@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400&family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap');
/* The approved ivory paper card. All surfaces also follow the appearance switch. */
:root{--wine-card-paper:#f4eee3;--wine-card-edge:#d1c5b3;--wine-card-accent:#951e38;--wine-card-shadow:rgba(88,71,46,.12);--wine-card-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.23' filter='url(%23n)'/%3E%3C/svg%3E")}
:root[data-appearance="dark"]{--wine-card-paper:#211c17;--wine-card-edge:#514637;--wine-card-accent:#d38c9a;--taste-track:#655750;--wine-card-shadow:rgba(0,0,0,.3)}
.wine-card,.wine-preview{background-color:var(--wine-card-paper);background-image:var(--wine-card-grain);border:1px solid var(--wine-card-edge);border-radius:2px;box-shadow:0 3px 7px var(--wine-card-shadow),0 14px 30px var(--wine-card-shadow);color:var(--cream);position:relative}
.wine-card{padding:26px 30px;display:grid;grid-template-columns:1fr;gap:12px;max-width:430px;width:100%;margin:auto;isolation:isolate}
.wine-card:before,.wine-preview:before{content:'';position:absolute;inset:6px;border:1px solid var(--wine-card-edge);opacity:.65;pointer-events:none;z-index:-1}
.wine-card-heading{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid var(--wine-card-edge);padding-bottom:14px}
.wine .wine-card-heading .fitword{font-size:clamp(27px,3.5vw,38px);line-height:1.1}
.wine-card-heading .card-fit{font-size:11px;letter-spacing:.13em;color:var(--cream2);text-transform:uppercase;text-align:right;line-height:1.6}
.wine .halo{display:none}
.wine .bottle img,.wine-preview .bottle img{filter:none!important}
.wine .wine-card .bottle{width:100%;height:190px;max-height:none;margin:0;align-self:center}
.wine .wine-card .bottle img{height:100%;max-height:100%;width:100%;object-fit:contain}
.wine .wine-card .txt{align-self:center}
.wine h3,.wine-preview .d,#s-name{font-family:'EB Garamond',Georgia,serif!important;font-weight:500;letter-spacing:-.012em}
.wine .wine-card h3{font-size:30px;line-height:1.1;margin:0;max-width:none}
.wine .voice,.wine-preview .voice,#sheet .story{font-family:'EB Garamond',Georgia,serif;font-weight:400;font-style:italic;letter-spacing:0}
.wine .wine-card .voice{font-size:20px;line-height:1.45;margin-top:16px}
.wine .wine-card .caps{font-size:11px;line-height:1.6;letter-spacing:.16em;margin-top:12px}
.wine .wine-card .marks{gap:10px;margin-top:14px}
.wine .wine-card .marks span{border:0;padding:0;border-radius:0;font-size:11px;letter-spacing:.12em}
.wine .wine-card .marks span+span:before{content:'·';margin-right:10px}
.wine .wine-card .foot{border-top:1px solid var(--wine-card-edge);padding-top:18px;margin-top:22px;gap:12px;justify-content:space-between}
.wine .wine-card .price{font-size:28px}
.wine .wine-card .order{font-family:'EB Garamond',Georgia,serif;font-size:20px;min-height:44px;padding:9px 20px}
.wine-character{display:block;margin-top:22px;color:var(--cream2)}
.character-title{display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:16px}
.character-title:after{content:'';height:1px;flex:1;background:var(--wine-card-edge)}
.character-title small{font-size:11px;letter-spacing:0;text-transform:none;font-style:italic}
.character-grid{display:grid;grid-template-columns:1fr 1fr;gap:19px 20px}
.character-dial{display:block;min-width:0}
.character-ends{display:flex;justify-content:space-between;gap:5px;font:14px/1.3 Arial,sans-serif;margin-bottom:8px}
.character-track{display:block;height:5px;border-radius:99px;background:var(--taste-track,#d7cec9);position:relative;margin:0 5px}
.character-dot{position:absolute;top:50%;transform:translate(-50%,-50%);width:10px;height:10px;border-radius:50%;background:var(--wine-card-accent)}
body[data-screen="reco"] .wine{display:flex;align-items:flex-start;padding:100px max(18px,4vw) calc(var(--toggle-band) + 108px);overflow-y:auto;overscroll-behavior-y:contain;scrollbar-width:thin}
body[data-screen="reco"] .wine .idx{top:37px}
.wine-list .sheet{background-color:var(--ground);background-image:var(--wine-card-grain)}
.wine-list .wine-card{margin-top:18px}
.wine-character-compact{margin-top:16px;max-width:440px}
.wine-character-compact .character-title{display:none}
.wine-character-compact .character-grid{gap:14px 20px}
.wine-character-compact .character-ends{font-size:12px}
.wine-preview{color:var(--ink);padding:28px!important;--cream:var(--ink);--cream2:var(--ink2)}
.wine-preview .voice{font-size:20px;line-height:1.45}
.wine-preview .d{font-size:28px!important;line-height:1.1}
.wine-preview .foot{border-top:1px solid var(--wine-card-edge);padding-top:18px}
@media(max-width:760px){
 .wine-card{grid-template-columns:1fr;padding:22px 25px;gap:12px;max-width:430px}
 .wine .wine-card .bottle{height:180px;max-height:none;justify-self:center}
 .wine .wine-card .txt{width:100%}
 .wine .wine-card h3{font-size:30px;line-height:1.1}
 .wine .wine-card .voice{font-size:19px;line-height:1.45}
 body[data-screen="reco"] .wine{padding-top:84px;display:flex;gap:0}
 body[data-screen="reco"] .wine-card{margin:0 auto}
 .wine-list .deck{padding-left:16px;padding-right:16px}
}
@media(max-width:380px){.wine-card{padding:22px 20px}.wine .wine-card h3{font-size:27px}.character-grid{column-gap:18px}.wine .wine-card .order{padding:9px 14px;font-size:18px}.wine .wine-card .price{font-size:25px}}
.wine-card-no-bottle .txt{grid-column:1/-1}
.wine-preview{isolation:isolate}
:root:not([data-appearance="dark"]) .wine .bottle img,
:root:not([data-appearance="dark"]) .wine-preview .bottle img{mix-blend-mode:multiply}
#sheet,#so-card{background-color:var(--wine-card-paper)!important;background-image:var(--wine-card-grain)!important;color:var(--ink)!important;border:1px solid var(--wine-card-edge);box-shadow:0 -8px 32px var(--wine-card-shadow)}
#so-card h3,#so-ask b{font-family:'EB Garamond',Georgia,serif!important;font-weight:500}
#so-card img{filter:none!important}
:root:not([data-appearance="dark"]) #so-card img{mix-blend-mode:multiply}
#so-card .sub,#so-card .lab{color:var(--ink2)!important}
/* ordered.js paints its buttons cream for its own night card; on the paper card they need ink. */
#so-card .pill{border-color:var(--wine-card-edge)!important;color:var(--ink)!important}
#so-card .pill.solid{background:var(--ink)!important;border-color:var(--ink)!important;color:var(--wine-card-paper)!important}
#so-card .quiet{color:var(--ink2)!important;border-bottom-color:var(--wine-card-edge)!important}
#so-card .grab{background:var(--wine-card-edge)!important}
#so-card .sub{font-family:'EB Garamond',Georgia,serif;font-style:italic}
/* A tall paper card starts below the wordmark and scrolls within its slide. */
body[data-screen="reco"] .wine{flex-direction:row;justify-content:center}
body[data-screen="reco"] .wine-card{flex-shrink:0}
/* Keep deck navigation on its own paper band while a long card scrolls. */
body[data-screen="reco"] #view-reco:after{content:'';position:fixed;left:0;right:0;bottom:0;height:calc(var(--toggle-band) + 50px);background:linear-gradient(to bottom,transparent,var(--ground) 18px);z-index:4;pointer-events:none}
body[data-screen="reco"] .f-over{display:none}

/* Reference composition: a printed tasting card, with the vintage beside the bottle. */
body[data-screen="reco"]{background-color:#e9e1d3;background-image:var(--wine-card-grain)}
:root[data-appearance="dark"] body[data-screen="reco"]{background-color:var(--ground)}
.wine-card{padding:24px 27px 23px;gap:0;box-shadow:0 3px 7px var(--wine-card-shadow),0 18px 24px var(--wine-card-shadow)}
.wine-card:before{inset:6px}
.wine .wine-card-heading .fitword{font-family:'Cormorant Garamond',Georgia,serif;font-size:32px;font-weight:400;letter-spacing:-.6px}
.wine-card-heading{padding-bottom:16px}
.wine-card-heading .card-fit{display:flex;align-items:center;gap:9px;font-size:10px;letter-spacing:1.5px;white-space:nowrap}
.wine-card-heading .card-fit b{font-family:'Cormorant Garamond',Georgia,serif;font-size:29px;font-weight:400;letter-spacing:0;color:var(--wine-card-accent)}
.wine .wine-card .bottle{height:215px;padding:22px 0 20px;position:relative}
.wine .wine-card .bottle img{height:173px;width:auto;max-width:65%}
.card-vintage{position:absolute;right:2px;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--cream2)}
.wine .wine-card .card-origin{font:10px/1.6 Arial,sans-serif;letter-spacing:2.4px;margin:5px 0 14px!important;color:var(--cream2)}
.wine .wine-card h3{font-size:30px;line-height:1.1;font-weight:500;letter-spacing:-.35px}
.wine .wine-card .marks{margin-top:22px}
.wine .wine-card .marks span{font-size:10px;letter-spacing:1.5px}
.wine .wine-card .voice{font-size:19px;line-height:1.45;margin-top:24px}
.wine-character{margin-top:28px}
.character-title{font-size:10px;letter-spacing:2.4px;margin-bottom:23px}
.character-ends{font:14px/1.3 'EB Garamond',Georgia,serif;margin-bottom:12px}
.character-track{height:2px;border-radius:0;background:var(--taste-track,#c7bdae);margin:0}
.character-dot{width:7px;height:7px}
.character-grid{gap:23px 24px}
.wine .wine-card .foot{margin-top:27px;padding-top:18px}
.wine .wine-card .price{font-family:'EB Garamond',Georgia,serif;font-size:30px}
.wine .wine-card .order{font-size:20px;padding:10px 20px;font-weight:400}
/* Drawn, not typed: iOS shows a "↗" character as a blue emoji tile. */
.wine .wine-card .order .arrow-ne{width:.66em;height:.66em;margin-left:7px;vertical-align:0;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:380px){.wine-card{padding:22px 20px}.wine .wine-card h3{font-size:27px}.wine .wine-card-heading .fitword{font-size:28px}.wine-card-heading .card-fit{font-size:9px;letter-spacing:1px;gap:6px}.wine .wine-card .price{font-size:27px}.wine .wine-card .order{font-size:18px;padding:9px 14px}}

body[data-screen="reco"] #view-reco{background-color:var(--ground);background-image:var(--wine-card-grain)}
.wine .wine-card h3{font-size:32px}
@media(max-width:380px){.wine .wine-card h3{font-size:27px}}

/* Browse from the sides of the card; the count and gesture hint sit below it. */
.wine-list .card-browser{position:relative;max-width:534px;margin:0 auto}
.wine-list .card-browser .deck{padding:0 42px 0}
.wine-list .card-browser .arrow{position:absolute;top:min(36svh,310px);z-index:3;display:grid;place-items:center;width:44px;height:52px;padding:0;background:transparent;border:0;color:var(--cream2);font-size:38px}
.wine-list .card-browser .card-prev{left:0}
.wine-list .card-browser .card-next{right:0}
.wine-list .card-browser .arrow:disabled{opacity:.2}
.wine-list .card-discover{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 12px 25px;color:var(--cream2);font-family:'EB Garamond',Georgia,serif;font-size:16px;font-style:italic}
.wine-list .card-discover .idx{font-size:12px;font-style:normal;letter-spacing:2px}
@media(max-width:380px){.wine-list .card-browser .deck{padding:0 32px}.wine-list .card-browser .arrow{width:32px}}
/* Phones: one card, one screen, no scrolling. The card takes the browser's
   visible height (dvh follows Safari's toolbars). The bottle takes whatever
   room the words leave, up to a comfortable size, so a roomy phone gets a
   bigger bottle rather than an empty band. When the words alone outgrow the
   card (a small phone, a long name, three bottle sizes), SavviWineCard.fit()
   adds data-fit steps: tighter type, then a shorter tasting line, then no
   taste dials. Only past the last step does the card scroll inside itself, so
   the prices and buttons are never cut off. */
@media(max-width:760px){
 /* The sheet stops short of the top: the dimmed list above it is the tap that closes it. */
 .wine-list #sheet{height:calc(100vh - 44px);height:calc(100dvh - clamp(30px,6dvh,44px));max-height:none;overflow:hidden;padding-bottom:env(safe-area-inset-bottom);display:flex;flex-direction:column}
 .wine-list #sheet>.grab{flex:none;margin:9px auto 7px}
 /* Every touch on the sheet goes to list.html's handlers: sideways steps, down closes.
    A card that has to scroll (data-fit "scroll") keeps its own vertical pan. */
 .wine-list #sheet,.wine-list #sheet .wine-card{touch-action:none}
 .wine-list #sheet .wine-card[data-fit~="scroll"]{touch-action:pan-y}
 .wine-list .card-browser{flex:1;min-height:0;width:100%;display:flex;flex-direction:column;margin:0 auto}
 .wine-list .card-browser .deck{flex:1;min-height:0;padding:0 28px}
 .wine-list .card-browser .wine{height:100%;display:block}
 .wine-list .card-browser .wine-card{height:100%;margin:0 auto;max-width:430px}
 .wine-list .card-browser .arrow{top:44%;width:28px;height:44px;font-size:30px}
 .wine-list .card-discover{flex:none;flex-direction:row;justify-content:center;gap:15px;padding:7px 10px 8px;font-size:13px}
 body[data-screen="reco"] .wine{height:100vh;height:100dvh;padding:74px 18px calc(var(--toggle-band) + 50px);overflow:hidden}
 body[data-screen="reco"] .wine-card{height:100%;margin:0 auto}

 .wine-card{display:flex;flex-direction:column;gap:0;min-height:0;padding:16px 19px;overflow:hidden}
 .wine-card-heading{flex:none;padding-bottom:9px}
 .wine .wine-card-heading .fitword{font-size:27px}
 .wine-card-heading .card-fit{font-size:9px}
 .wine-card-heading .card-fit b{font-size:26px}
 /* One bottle size per phone, whatever the words: set by the screen's height
    (about 150px on an iPhone 15 in Safari, 95px on an SE, up to 190px), so
    every card shows the bottle as large as the next one does and
    a swipe never shrinks or grows it. Spare room goes to the bottle's auto
    margins (centring it, the prices on the card's foot); a card with more
    words tightens its type instead (data-fit). The flight's card is shorter
    — the deck keeps its counter and controls on screen — so its bottle is too. */
 .wine .wine-card .bottle{flex:none;height:clamp(88px,calc(38.3vh - 117px),190px);height:clamp(88px,calc(38.3dvh - 117px),190px);min-height:0;max-height:none;width:100%;margin:auto 0;padding:0;position:relative}
 body[data-screen="reco"] .wine .wine-card .bottle{height:clamp(80px,14vh,150px);height:clamp(80px,14dvh,150px)}
 .wine .wine-card .bottle img{position:absolute;left:0;top:12px;width:100%;height:calc(100% - 20px);max-width:none;max-height:none;min-height:0;object-fit:contain}
 .card-vintage{font-size:9px;letter-spacing:2px}
 .wine .wine-card .txt{flex:none;width:100%;align-self:stretch}
 .wine .wine-card .card-origin{font-size:9.5px;letter-spacing:1.6px;margin:0 0 6px!important}
 .wine .wine-card h3{font-size:26px;line-height:1.08}
 .wine .wine-card .marks{margin-top:9px;gap:6px}
 .wine .wine-card .marks span{font-size:9.5px;letter-spacing:1.2px}
 .wine .wine-card .voice{font-size:17px;line-height:1.32;margin-top:10px}
 .wine-character{margin-top:14px}
 .character-title{font-size:9px;letter-spacing:1.7px;margin-bottom:10px}
 .character-grid{gap:12px 18px}
 .character-ends{font-size:13px;margin-bottom:7px}
 .wine .wine-card .foot{margin-top:14px;padding-top:11px;gap:5px 10px}
 /* Prices on one line, the buttons together on the next. */
 .wine .wine-card .foot:before{content:'';order:1;flex-basis:100%}
 .wine .wine-card .foot .order{order:2}
 .wine .wine-card .price{font-size:25px}
 .wine .wine-card .order{font-size:16px;min-height:42px;padding:8px 14px}
 /* No bottle (a cocktail, a beer): the words fill the card and the prices sit on its foot. */
 .wine-card-no-bottle .txt{flex:1 0 auto;display:flex;flex-direction:column}
 .wine-card-no-bottle .foot{margin-top:auto!important}

 /* data-fit steps, cumulative ("1 2 3"), set only when the words outgrow the
    card: first tighter type with every word kept, then a shorter tasting line,
    then no dials. */
 .wine-card[data-fit~="1"]{padding:13px 16px}
 .wine-card[data-fit~="1"] .wine-card-heading{padding-bottom:7px}
 .wine .wine-card[data-fit~="1"] .wine-card-heading .fitword,.wine-card[data-fit~="1"] .wine-card-heading .card-fit b{font-size:23px}
 .wine .wine-card[data-fit~="1"] h3{font-size:23px;line-height:1.06}
 .wine .wine-card[data-fit~="1"] .marks{margin-top:7px}
 .wine .wine-card[data-fit~="1"] .voice{font-size:15.5px;line-height:1.28;margin-top:8px}
 .wine-card[data-fit~="1"] .wine-character{margin-top:10px}
 .wine-card[data-fit~="1"] .character-grid{gap:9px 16px}
 .wine-card[data-fit~="1"] .character-ends{font-size:12px;margin-bottom:6px}
 .wine .wine-card[data-fit~="1"] .foot{margin-top:10px;padding-top:9px;gap:4px 10px}
 .wine .wine-card[data-fit~="1"] .price{font-size:22px}
 .wine .wine-card[data-fit~="1"] .order{font-size:15px;min-height:38px;padding:6px 12px}
 .wine-card[data-fit~="2"] .voice{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
 .wine-card[data-fit~="3"] .character-title{display:none}
 .wine .wine-card[data-fit~="3"] .voice{-webkit-line-clamp:2}
 /* The last step before scrolling drops the dials (the flight's full-story sheet still has them). */
 .wine-card[data-fit~="4"] .wine-character{display:none}
 .wine-card[data-fit~="scroll"]{overflow-y:auto;overscroll-behavior:contain}
}