/* ego death — one page. Black on white, light grotesk + book serif, photos set inline like words. */
:root{
  --ink:#111111;
  --paper:#ffffff;
  --muted:#5c5c5c;
  --hair:#dddddd;
  --sans:"Inter Tight","Helvetica Neue",Arial,sans-serif;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --gutter:clamp(16px,3vw,44px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.4;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--ink)}
a:hover{color:var(--muted)}
a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gutter);top:8px;background:var(--paper);padding:6px 10px;z-index:10}
h1,h2,h3,p,ul,ol,figure{margin:0}

.page{max-width:1360px;margin:0 auto;padding:0 var(--gutter) 40px}
.rule{border-bottom:1px solid var(--ink)}
main section{scroll-margin-top:64px}
@media (max-width:560px){main section{scroll-margin-top:100px}}
.eyebrow{display:block;font-family:var(--sans);font-weight:400;font-size:12px;line-height:1.4;letter-spacing:0;list-style:none}

/* inline photos, sized to the line they sit in */
.pic{display:inline-block;height:.62em;width:.92em;object-fit:cover;vertical-align:.02em;margin:0 .06em}
.spic{display:inline-block;height:.6em;width:.88em;object-fit:cover;vertical-align:.05em;margin:0 .14em}
sup{font-family:var(--sans);font-size:14px;line-height:0;letter-spacing:0;vertical-align:super}

/* header */
.top{position:sticky;top:0;z-index:5;background:var(--paper);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 24px;padding:20px 0 10px;border-bottom:1px solid var(--ink);font-size:17px}
.brand{text-decoration:none;font-weight:500;letter-spacing:-.02em}
.top nav{display:flex;flex-wrap:wrap;gap:8px 28px}
.top nav a{text-decoration:none;text-transform:uppercase}
.top nav em{font-family:var(--serif);text-transform:none}

/* about */
.intro{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:16px 48px;padding:10px 0 20px}
.intro p{font-family:var(--serif);font-size:19px;line-height:1.38;max-width:34em;margin-top:6px}

/* statement */
.statement{padding:10px 0 30px}
.statement h1{margin-top:8px;font-weight:300;font-size:clamp(44px,7.6vw,112px);line-height:.96;letter-spacing:-.05em;text-wrap:balance}

/* cut / kept */
.cutkept{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:24px 48px;padding:10px 0 30px}
.cutkept ul{padding:0;list-style:none;display:flex;flex-direction:column;gap:4px}
.cutkept li:not(.eyebrow){font-family:var(--serif);font-size:clamp(36px,4.4vw,60px);line-height:1.08}
.cutkept .eyebrow{margin-bottom:10px}
.cutkept s{text-decoration-thickness:2px}

/* bottles */
.bottles{padding:24px 0;display:flex;flex-direction:column;gap:16px}
.bottles .wide{width:100%;aspect-ratio:16/9;object-fit:cover}
.caption{font-size:15px;color:var(--muted)}

/* wines index */
.wines{padding:10px 0 30px}
.wines .head{display:flex;justify-content:space-between;padding-bottom:18px}
.wine{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.15fr) minmax(0,.8fr) 168px;gap:4px 32px;align-items:start;padding:14px 0;border-top:1px solid var(--hair)}
.wine .scene{width:168px;height:auto;aspect-ratio:4/5;object-fit:cover}
.wine h3{white-space:nowrap}
@media (max-width:860px){.wine{grid-template-columns:minmax(0,1fr);gap:8px}.wine .scene{width:100%;max-width:420px;margin-top:6px}}
.wine:last-child{border-bottom:1px solid var(--hair)}
.wine h3{font-family:var(--serif);font-weight:400;font-size:clamp(40px,5vw,72px);line-height:1}
.wine .note{font-size:20px;line-height:1.3}
.wine .facts{font-size:15px;line-height:1.45;font-variant-numeric:tabular-nums}
.wine .spic{transition:transform .25s ease}
.wine:hover .spic{transform:scale(1.5)}
@media (prefers-reduced-motion:reduce){.wine .spic{transition:none}}

/* how to read it */
.howto{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:32px 56px;padding:10px 0 36px;align-items:start}
.label{margin-top:12px;background:#FF4A2B;color:var(--ink);border-radius:40px 78px 46px 84px / 64px 36px 72px 40px;padding:40px 34px 34px;display:flex;flex-direction:column;gap:10px;aspect-ratio:3/4;max-width:100%}
.circled{position:relative;display:inline-block}
.circled svg{position:absolute;left:-.22em;top:-.14em;width:calc(100% + .44em);height:calc(100% + .28em);overflow:visible;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke}
.label hr{border:0;border-top:1px solid var(--ink);margin:0;width:100%}
.lrow{display:flex;justify-content:space-between;gap:12px;font-size:12px}
.lsentence{flex-grow:1;font-weight:300;font-size:clamp(30px,3.4vw,46px);line-height:.98;letter-spacing:-.045em}
.lsmall{font-size:12px}
.lserve{font-weight:300;font-size:30px;letter-spacing:-.03em}
.lserve sup{font-size:12px}
.steps{padding:30px 0 0;list-style:none;display:flex;flex-direction:column;gap:22px}
.steps li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;border-top:1px solid var(--ink);padding-top:10px}
.steps .n{font-size:14px}
.steps strong{display:block;font-weight:300;font-size:clamp(28px,3vw,40px);letter-spacing:-.04em;line-height:1}
.steps p{margin-top:6px;font-size:17px;line-height:1.4;max-width:32em}

/* buy */
.buy{padding:10px 0 28px;display:flex;flex-direction:column;gap:6px}
.buy .big{font-weight:300;font-size:clamp(40px,6.4vw,92px);line-height:1;letter-spacing:-.045em;overflow-wrap:anywhere}
.buy .big a{text-decoration:none}
.buy sup{font-size:.22em}

.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding-top:10px;font-size:12px;line-height:1.5}