:root{color-scheme:dark;--bg:#21151d;--text:#f7eee4;--muted:#c9b8bd;--accent:#e9a382;--line:#60404b;font-family:Arial,Helvetica,sans-serif;color:var(--text);background:var(--bg);font-synthesis:none}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:2rem}body{margin:0}a{color:inherit;text-decoration:none}a:focus-visible{outline:3px solid var(--accent);outline-offset:6px}a:hover{text-decoration:underline;text-underline-offset:5px}img{display:block;max-width:100%}figure,p,h1,h2,h3{margin:0}h1,h2,h3{font-family:Georgia,'Times New Roman',serif;font-weight:400;text-wrap:balance}p{line-height:1.75}.wrap{width:min(1200px,calc(100% - 6rem));margin-inline:auto}.opening{background:radial-gradient(circle at 80% 10%,#a35b422e,transparent 55%),radial-gradient(circle,#d9876314 1px,transparent 1.4px),linear-gradient(145deg,#21151d,#352027);background-size:auto,22px 22px,auto}.header{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding-block:1.4rem;border-bottom:1px solid #e2bba31c}.brand{display:flex;align-items:center;gap:.6rem;font-family:Georgia,serif;font-size:1.6rem;letter-spacing:-.035em}.brand img{object-fit:contain}.header nav{display:flex;gap:2rem;font-size:.875rem}.header nav a{padding-block:.7rem}.hero{display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:3.5rem;padding-block:4.8rem 5.5rem}.eyebrow,.label{font-size:.75rem;letter-spacing:.14em;line-height:1.7;font-weight:600;color:var(--accent)}h1{font-size:clamp(3.5rem,5.7vw,5.4rem);line-height:1.05;letter-spacing:-.055em;margin-block:1.5rem}em{color:var(--accent);font-weight:400}.lead{max-width:25rem;font-size:1.125rem;color:var(--muted)}.button{display:inline-flex;align-items:center;gap:2rem;margin-top:2rem;padding:1rem 1.4rem;background:#ead3bc;color:#2b1e22;border-radius:8px;font-size:.9375rem;font-weight:600}.button:hover{background:#f5dfc9;text-decoration:none}.availability{font-size:.875rem;color:var(--muted);margin-top:1rem}.hero-image{position:relative;overflow:hidden;border-radius:20px;border:1px solid #cc896331}.hero-image img{width:100%;height:480px;object-fit:cover}.hero-image figcaption{position:absolute;bottom:0;inset-inline:0;padding:3rem 1.7rem 1.5rem;background:linear-gradient(transparent,#21151de8);font-family:Georgia,serif;font-size:1.5rem}.needs{padding-block:4.5rem 5rem}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:3rem;margin-bottom:2.5rem}h2{font-size:clamp(2rem,3.2vw,3rem);line-height:1.15;letter-spacing:-.035em;margin-top:1rem}.section-heading>p{max-width:24rem;color:var(--muted);font-size:1rem}.need-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}.need{min-width:0}.need img{width:100%;height:auto;aspect-ratio:1.25;object-fit:cover;border-radius:13px;border:1px solid #cc89632b}.need>div{padding:1.4rem .15rem 0}.need h3{font-size:1.55rem;line-height:1.2;letter-spacing:-.02em;margin-block:.7rem}.need p:last-child{color:var(--muted);font-size:1rem}.taste{background:radial-gradient(circle,#c9cc9710 1px,transparent 1.4px),linear-gradient(130deg,#183831,#23493d);background-size:22px 22px,auto;padding-block:5rem;--accent:#dbdabb}.taste-layout{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}.vine img{border-radius:16px;width:100%;height:auto;aspect-ratio:1.15;object-fit:cover}.vine figcaption{color:#c5d1bd;font-size:.875rem;margin-top:.85rem}.taste-copy h2{margin-bottom:1.5rem}.taste-copy>p:not(.eyebrow){color:#d0d9cf;font-size:1.0625rem;margin-top:1rem}.taste-note{border-left:2px solid #afbca2;padding-left:1.25rem;color:#d0d9cf;font-size:.9375rem;line-height:1.75;margin-top:1.75rem}.simple{display:grid;grid-template-columns:1fr 1fr;gap:5rem;padding-block:5rem}.simple-intro>p:not(.eyebrow):not(.more-guide){color:var(--muted);max-width:26rem;margin-top:1.5rem}.steps{counter-reset:step;list-style:none;padding:0;margin:0}.steps li{position:relative;counter-increment:step;padding:1.4rem 0 1.4rem 3.25rem;border-bottom:1px solid var(--line)}.steps li:first-child{padding-top:0}.steps li:before{content:'0' counter(step);position:absolute;left:0;top:1.6rem;font-size:.875rem;color:var(--accent)}.steps li:first-child:before{top:.2rem}.steps h3{font-size:1.5rem;line-height:1.25;margin-bottom:.5rem}.steps p{color:var(--muted)}.closing{border-top:1px solid var(--line);text-align:center;padding-block:3.5rem}.closing h2{margin-bottom:1.2rem}.closing>p:last-child{color:var(--muted)}.footer{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:1.5rem 2rem;font-size:.875rem;color:var(--muted);border-top:1px solid #e2bba31c}.footer .brand{font-size:1.2rem;color:var(--text)}.skip{position:fixed;top:-100px;left:1rem;padding:1rem;background:var(--text);color:var(--bg);z-index:5}.skip:focus{top:1rem}
@media(max-width:1000px){.wrap{width:calc(100% - 4rem)}.hero{gap:2rem}.hero-image img{height:430px}.need-grid{grid-template-columns:repeat(2,1fr);gap:2.5rem 1.5rem}.need img{aspect-ratio:1.7}.taste-layout,.simple{gap:2.5rem}}
@media(max-width:700px){.wrap{width:calc(100% - 2.5rem)}.header{flex-wrap:wrap;gap:.7rem 1.5rem;padding-block:1rem}.brand{font-size:1.45rem}.header nav{gap:1.5rem;flex-wrap:wrap}.hero{grid-template-columns:1fr;padding-block:2.75rem 2.5rem;gap:2rem}h1{font-size:clamp(3.5rem,11vw,4.75rem)}.hero-image img{height:auto;aspect-ratio:1.3}.section-heading{display:block;margin-bottom:2rem}.section-heading>p{margin-top:1.25rem}.needs{padding-block:3rem}.need-grid{gap:2rem 1rem}.need img{aspect-ratio:1.1}.need h3{font-size:1.5rem}.need .label{letter-spacing:.07em}.taste{padding-block:3rem}.taste-layout{grid-template-columns:1fr;gap:2rem}.vine img{aspect-ratio:1.4}.simple{grid-template-columns:1fr;gap:2rem;padding-block:3rem}.closing{padding-block:2.5rem}.footer{flex-wrap:wrap}.footer>span{display:none}}
@media(max-width:380px){.need-grid{grid-template-columns:1fr}.need img{aspect-ratio:1.7}.eyebrow{letter-spacing:.09em}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.hero > div, .hero-image, .taste-copy, .simple-intro { min-width: 0; }
.button { max-width: 100%; }
.steps { min-width: 0; overflow-wrap: anywhere; }
.hero-image img { height: auto; aspect-ratio: 1200 / 561; }
.hero-image figcaption { position: static; padding: 1.15rem 1.5rem; background: #291a22; }
.closing .positioning { max-width: 38rem; margin: 0 auto 1.5rem; color: var(--text); font-size: 1.0625rem; }
.standpoint { text-align: center; padding-block: 3.5rem; border-bottom: 1px solid var(--line); }
.standpoint h2 { margin-bottom: 1.2rem; }
.standpoint .positioning { max-width: 38rem; margin-inline: auto; font-size: 1.0625rem; }
@media(max-width:700px) { .standpoint { padding-block: 2.5rem; } }
@media(max-width:700px){
  .button { gap: .75rem; padding-inline: .8rem; }
  .need-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
  h1 { font-size: clamp(2.2rem, 11vw, 4.75rem); }
  .brand { font-size: clamp(1rem, 5.8vw, 1.45rem); }
}

/* Mobile reading pass: less empty space and one situation at a time. */
@media (max-width: 700px) {
  .header { gap: .25rem 1.5rem; padding-block: .6rem; }
  .header nav { gap: .25rem; }
  .header nav a { display: inline-flex; align-items: center; min-height: 44px; padding: .5rem .75rem; }
  .header nav a:first-child { padding-left: 0; padding-right: 1rem; }
  .hero { padding-block: 1.75rem; gap: 1.5rem; }
  h1 { margin-block: 1rem; }
  .lead { font-size: 1.0625rem; line-height: 1.65; }
  .button { margin-top: 1.25rem; min-height: 48px; }
  .availability { margin-top: .75rem; }
  .hero-image { border-radius: 14px; }
  .hero-image figcaption { padding: .75rem 1rem; font-size: 1.25rem; }
  .standpoint, .needs, .simple, .taste { padding-block: 2rem; }
  .section-heading { margin-bottom: 1.5rem; }
  .need-grid { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .need { display: grid; grid-template-columns: 24% minmax(0, 1fr); gap: 1rem; align-items: start; }
  .need + .need { border-top: 1px solid var(--line); padding-top: 1.25rem; }
  .need img { aspect-ratio: 3 / 4; border-radius: 10px; }
  .need > div { padding: 0; }
  .need h3 { font-size: 1.375rem; margin-block: .4rem .6rem; }
  .need p:last-child { line-height: 1.65; }
  .taste-layout { gap: 1.5rem; }
  .taste-note { margin-top: 1.25rem; }
  .simple { gap: 1.5rem; }
  .closing { padding-block: 1.75rem; }
  .footer a { display: inline-flex; align-items: center; min-height: 44px; }
}
/* Stack the image on the narrowest screens. */
@media (max-width: 24rem) {
  .need { grid-template-columns: minmax(0, 1fr); gap: .9rem; }
  .need img { aspect-ratio: 2 / 1; }
}
.positioning { overflow-wrap: anywhere; }

/* Information pages share the product's typography and quiet surfaces. */
.article { max-width: 760px; padding-block: 2rem 3rem; overflow-wrap: anywhere; }
.article h1 { font-size: clamp(2.2rem, 7vw, 3.8rem); letter-spacing: -.04em; }
.article h2 { font-size: clamp(1.65rem, 4vw, 2.2rem); margin: 0 0 1rem; }
.article section { margin-top: 2.5rem; }
.article section > .eyebrow { margin-bottom: .7rem; }
.article p + p { margin-top: 1rem; }
.article p, .article li, .article dd { color: var(--muted); }
.article .eyebrow { color: var(--accent); }
.article .article-lead { font-size: 1.125rem; color: var(--text); }
.article a, .text-link { text-decoration: underline; text-underline-offset: 4px; color: var(--accent); }
.notice { background: #34242d; border-left: 3px solid var(--accent); padding: 1.2rem; border-radius: 0 8px 8px 0; margin-block: 1.5rem; line-height: 1.75; }
.notice strong { color: var(--text); }
.notice strong + p { margin-top: .5rem; }
.contents { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; border-block: 1px solid var(--line); padding-block: .65rem; }
.contents a { display: inline-flex; align-items: center; min-height: 44px; }
.article details { border-bottom: 1px solid var(--line); }
.article summary { cursor: pointer; padding-block: 1rem; line-height: 1.5; font-weight: 600; }
.article summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.article details p { padding-bottom: 1.25rem; }
.article ul { padding-left: 1.25rem; line-height: 1.75; }
.article li + li { margin-top: .6rem; }
.info-list { margin: 0; }
.info-list > div { border-bottom: 1px solid var(--line); padding-block: 1rem; }
.info-list dt { font-weight: 600; margin-bottom: .5rem; }
.info-list dd { margin: 0; line-height: 1.75; }
.article .read-next { border-top: 1px solid var(--line); padding-top: 1.5rem; margin-top: 2rem; }
.article-meta { margin-top: 2rem; font-size: .875rem; }
.footer nav { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.footer nav a { display: inline-flex; align-items: center; min-height: 44px; }
.simple > .more-guide { margin: 0; min-width: 0; }
.more-guide a { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 701px) { .article { padding-block: 3.5rem 5rem; } }

/* Caption stays as accessible, editable text over the quiet sky. */
.vine { position: relative; container-type: inline-size; }
.vine img { aspect-ratio: 4 / 3; object-fit: contain; }
.vine figcaption { position: absolute; left: 36%; top: 38%; width: 61%; margin: 0; padding: .35em .3em; color: #12382e; font-weight: 700; background: radial-gradient(ellipse at center, #fff8e6d9 0%, #fff8e68c 52%, #fff8e600 75%); text-align: center; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(.875rem, 3.8cqw, 1.4rem); line-height: 1.3; text-shadow: 0 1px 8px #e6dfba; }
.vine figcaption > span, .vine figcaption > em { display: block; }
.vine figcaption > em { color: inherit; font-size: .85em; font-weight: 700; margin-top: .3em; }
/* Keep enlarged text readable within the image on narrow layouts. */
.vine { display: grid; }
.vine img { grid-area: 1 / 1; }
@container (max-width: 18em) {
  .vine figcaption { grid-area: 1 / 1; position: relative; left: auto; top: auto; align-self: end; width: auto; padding: .45em; border-radius: 0 0 16px 16px; background: #e2d7b5f2; text-shadow: none; }
}

.vine figcaption > span { text-wrap: balance; }

/* One link, with mobile-first reading order: introduction, steps, detail link. */
@media (min-width: 701px) {
  .simple { grid-template-rows: auto 1fr; row-gap: 1rem; }
  .simple-intro { grid-column: 1; grid-row: 1; }
  .simple > .steps { grid-column: 2; grid-row: 1 / 3; }
  .simple > .more-guide { grid-column: 1; grid-row: 2; align-self: start; }
}