/* TANNED app, in the brand book (version 2, 8 Oct 2026): cream and tan, signed in red. Cream pages with the soft
   peach glow (here it stands where the place's sun stands), black for text and outlines only, tan for fills,
   sun orange for the full stop, filled buttons and errors and nothing else, joined green only for "You're in".
   Jost for display, headings and labels (medium capitals, widely spaced, never wide or stretched); Newsreader for
   body at 17 px. Cards: radius 14, a 1 px line, no shadow. Photographs: 8 px corners inside cards, square in the
   magazine. One column, built for a phone.
   Contrast (the book's approved pairs): black on cream 15.4:1, on card 16.5:1, on tan 8.0:1; sun orange on cream
   4.7:1; white on sun orange 5.3:1; white on joined green 5.3:1. Tan is never text on cream. */
@font-face{font-family:'TANNED Sans';font-style:normal;font-weight:300 500;font-display:swap;src:url(fonts/tanned-sans-latin.woff2) format('woff2')}
@font-face{font-family:'TANNED Text';font-style:normal;font-weight:300 500;font-display:swap;src:url(fonts/tanned-text-latin.woff2) format('woff2')}
:root{
  --ground:#F6EEE4; --paper:#FBF6F0; --raised:#FBF6F0; --field:#EFE4D8; --sand:#EFE4D8; --apricot:#D9A47A; --tan:#D9A47A;
  --ink:#1A1816; --ink-2:#57524D; --line:#DDD3C8; --line-strong:#1A1816;
  --sun-orange:#C8321A; --green:#1E7A46; --peach:#F1D6C6;
  --accent:var(--ink);              /* what was the terracotta accent: labels and links are black now */
  --sun-x:85%; --sun-y:-10%; --sun-sx:90%; --sun-sy:55%; --glow-a:rgba(241,214,198,.9); --glow-b:rgba(241,214,198,.35);
  --f-display:"TANNED Sans","Jost","Futura","Avenir Next",system-ui,sans-serif;
  --f-text:"TANNED Text","Newsreader","Iowan Old Style",Georgia,serif;
  --f-label:"TANNED Sans","Jost","Futura","Avenir Next",system-ui,sans-serif;
  --lift:none;
  --sun:var(--tan);
  --bar-h:64px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--ground);-webkit-text-size-adjust:100%}
body{margin:0;min-height:100%;color:var(--ink);font-family:var(--f-text);font-size:1.0625rem;line-height:1.55;-webkit-font-smoothing:antialiased;
  background-color:var(--ground);
  background-image:radial-gradient(var(--sun-sx) var(--sun-sy) at var(--sun-x) var(--sun-y),var(--glow-a),var(--glow-b) 42%,transparent 72%);
  background-attachment:fixed;background-repeat:no-repeat}
@media (prefers-reduced-motion:no-preference){body{transition:background-position 2s}}
h1,h2,h3{font-family:var(--f-display);font-weight:300;letter-spacing:-.01em;margin:0;text-wrap:balance;overflow-wrap:break-word}
p{margin:0}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
button{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);padding:10px 14px;border-radius:8px;z-index:100;text-decoration:none}
.skip:focus{top:12px}
/* the sun full stop closes every headline: sun orange with black letters, white when the words are white */
.dot{color:var(--sun-orange)}
.backpage .dot,.hello .dot,.story-card .dot,.cover .dot{color:#fff}
[hidden]{display:none!important}
svg{stroke-linecap:round;stroke-linejoin:round}

/* ---------- frame ---------- */
.app{max-width:480px;margin:0 auto;min-height:100vh;min-height:100dvh;display:grid;grid-template-rows:auto 1fr;grid-template-columns:minmax(0,1fr)}
.main{display:grid;grid-template-rows:auto 1fr;grid-template-columns:minmax(0,1fr);align-content:start;min-width:0}
.bar{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:calc(12px + env(safe-area-inset-top,0px)) 16px 10px;background:var(--ground);border-bottom:1px solid transparent}
.wordmark svg{display:block;height:13px;width:auto}
.bar-r{display:flex;gap:8px;align-items:center}
.place{display:inline-flex;align-items:center;gap:8px;max-width:210px;min-height:44px;border:1px solid var(--ink);border-radius:999px;background:transparent;padding:0 14px 0 12px;font:500 .875rem var(--f-label);cursor:pointer}
.place i{width:10px;height:10px;border-radius:50%;background:var(--tan);flex:none}
.place #placeName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.place::after{content:"";flex:none;width:6px;height:6px;border:solid currentColor;border-width:0 1.6px 1.6px 0;transform:rotate(45deg) translate(-2px,-2px);opacity:.6}
.menu{width:44px;height:44px;border-radius:50%;border:1px solid var(--ink);background:transparent;display:grid;place-items:center;cursor:pointer}
.menu svg{width:18px;height:18px;fill:currentColor}
.view{padding:6px 16px calc(var(--bar-h) + 40px + env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-content:start;outline:none;min-width:0}

/* the brand's live sunlight and its caption */
.sunline{display:flex;align-items:center;gap:8px;margin:0 16px 2px;min-height:28px;font:400 .8125rem var(--f-text);color:var(--ink-2);font-variant-numeric:tabular-nums}
.sunline i{flex:none;width:9px;height:9px;border-radius:50%;background:var(--tan)}
.sunline span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sunline button{position:relative;flex:none;height:26px;padding:0 10px;border-radius:999px;border:1px solid var(--line-strong);background:transparent;font:inherit;cursor:pointer}
.sunline button::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:44px;transform:translateY(-50%)}  /* a small pill, a thumb-sized target */

/* ---------- type ---------- */
/* labels: Jost medium capitals, letter spacing 0.2 em, 12 px; black, never stretched (the book: no wide or extended capitals) */
.eyebrow,.k{font:500 .75rem/1.3 var(--f-label);letter-spacing:.2em;text-transform:uppercase;color:var(--ink);margin:0}
.k{display:flex;justify-content:space-between;gap:10px;align-items:baseline;color:var(--ink)}
.head{display:grid;gap:8px;padding:6px 2px 0}
.head h1{font-size:2.5rem;line-height:1.05;letter-spacing:-.01em;outline:none}  /* display: Jost light 40/1.05 */
.head .sub{font-size:1rem;color:var(--ink-2);max-width:32ch}
.sec{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 12px;padding:10px 2px 0}
.sec h2{font-size:1.75rem;line-height:1.1}  /* heading: Jost light 28/1.1 */
.sec a,.sec button{font:500 .75rem var(--f-label);letter-spacing:.2em;text-transform:uppercase;color:var(--ink);text-decoration:underline;text-underline-offset:4px;background:none;border:0;padding:14px 0;margin:-14px 0;cursor:pointer;text-decoration:none;white-space:nowrap}
.lead{font-family:var(--f-display);font-size:1.3rem;line-height:1.2}
.note,.hint{font-size:.875rem;color:var(--ink-2);line-height:1.4}  /* small: Newsreader 14/1.4 */
.err{font-size:.875rem;color:var(--sun-orange);min-height:1.2em}  /* errors: sun orange, in words */
.sheet .err:empty{display:none}
.status{font-size:.88rem;color:var(--ink-2);text-align:center;min-height:1.3em}
.sample{font-size:.8125rem;color:var(--ink-2);border-left:1px solid var(--ink);padding-left:10px;line-height:1.4}
.fine{font-size:.8125rem;color:var(--ink-2);line-height:1.45}
.fine a{padding:16px 4px;margin:0 -4px}   /* padding on a word in a line reaches a thumb without moving the line */

/* ---------- buttons, chips ---------- */
/* buttons (the book): a full pill, 44 high. A black outline by default; .primary is the one sun-orange button on a
   screen, white type; once you're in it turns joined green with a tick. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:0 22px;border-radius:999px;background:transparent;color:var(--ink);border:1px solid var(--ink);
  font:500 1rem var(--f-display);cursor:pointer;text-decoration:none;transition:background-color .2s ease-out,color .2s ease-out}
.btn.primary{background:var(--sun-orange);border-color:var(--sun-orange);color:#fff}
.btn.wide{width:100%}
.btn.sand{background:transparent;color:var(--ink)}
.btn.light{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.btn.danger{background:transparent;color:var(--sun-orange);border-color:var(--sun-orange)}
.btn.sm{min-height:44px;padding:0 18px;font-size:.9375rem}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
.btn[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#fff}
.btn[aria-pressed="true"]::before{content:"";width:11px;height:6px;margin:-3px 0 0;border:solid currentColor;border-width:0 0 1.75px 1.75px;transform:rotate(-45deg)}  /* the tick */
.btns{display:flex;flex-wrap:wrap;gap:8px}
.btns .btn{flex:1 1 0;min-width:max-content}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:2px 16px 4px;scroll-padding-inline:16px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--ink);background:transparent;font:400 .9375rem var(--f-display);cursor:pointer;white-space:nowrap}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--ground)}
/* tags: a pill 24 high, outlined in black, the sport's name in lower case */
.tag{display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border-radius:999px;border:1px solid var(--ink);font:400 .8125rem var(--f-display);justify-self:start}
.opts{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.opts.left{justify-content:flex-start}

/* ---------- fields: filled, thumb-sized, an icon in front (after Shootout) ---------- */
.form{display:grid;gap:16px}
.place-fields{display:grid;gap:12px}
.f{display:grid;gap:8px;min-width:0}
/* one column that may be narrower than a field's own width: at twice the text size an input asks for ~500px */
.form,.f,.card,.place-fields{grid-template-columns:minmax(0,1fr)}
.f>label:not(.tile),.f .flabel{display:flex;justify-content:space-between;gap:8px;font:500 1rem var(--f-display);color:var(--ink)}  /* the label above the field, never inside it */
.f .count{font:400 .875rem var(--f-text);color:var(--ink-2);font-variant-numeric:tabular-nums}   /* full ink-2: faded, it read 4.2:1 at 10px */
.control{position:relative;display:flex;align-items:center;min-height:48px;border-radius:12px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--ink)}
.control:focus-within{box-shadow:inset 0 0 0 2px var(--ink)}
.control>svg{position:absolute;left:14px;width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:1.75;pointer-events:none}
.control input,.control select{flex:1;min-width:0;height:48px;border:0;outline:0;background:transparent;padding:0 16px;font-family:var(--f-text);font-size:1.05rem;color:var(--ink);-webkit-appearance:none;appearance:none}
.control>svg+input,.control>svg+select{padding-left:48px}
.control input::placeholder{color:var(--ink-2)}
.control .chev{left:auto;right:18px}
.control .clear{flex:none;width:36px;height:36px;margin-right:6px;border-radius:50%;border:0;background:var(--sand);display:grid;place-items:center;cursor:pointer}
.control .clear svg{width:14px;height:14px;stroke:var(--ink);stroke-width:2;fill:none}
/* a photo, as a tile you press, never the browser's file box */
.tile{position:relative;display:flex;align-items:center;gap:14px;min-height:84px;padding:12px 14px;border-radius:14px;background:var(--paper);border:1px dashed var(--ink);cursor:pointer}
.tile:focus-within{outline:2px solid var(--ink);outline-offset:3px}
.tile input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.tile .ti{flex:none;width:52px;height:52px;border-radius:8px;background:var(--sand);display:grid;place-items:center;overflow:hidden}
.tile .ti svg{width:24px;height:24px;fill:none;stroke:var(--ink);stroke-width:1.75}
.tile .ti img{width:100%;height:100%;object-fit:cover}
.tile b{display:block;font:500 1rem var(--f-display)}
.tile span{font-size:.875rem;color:var(--ink-2)}
.tile.has{border-style:solid;border-color:var(--line)}

/* ---------- cards ---------- */
/* cards (the book): radius 14, a 1 px line, padding 16, no shadow */
.card{background:var(--paper);border-radius:14px;padding:16px;display:grid;gap:12px;border:1px solid var(--line);min-width:0}
.card.sand{background:color-mix(in srgb,var(--sand) 70%,var(--paper))}
.ph{display:block;width:100%;height:auto;object-fit:cover;background:var(--sand)}
.ph{filter:sepia(.06) saturate(.92) contrast(.96)}
.gen{filter:sepia(.14) saturate(.86) contrast(.95) brightness(1.02)}  /* one warm, faded grade for the generated set */
/* a photograph that could not load: the brand's light in its place, at the same size */
.ph.gone{background:var(--sand);filter:none;z-index:auto;padding:0}  /* under the shade, as the picture was */
/* where light words sit on the picture, its stand-in is the deep end of the light, so the words still read */
.cover>.ph.gone,.backpage .ph.gone,.story-card .ph.gone,.start .ph.gone,.hello>.ph.gone{background:var(--tan)}
.pcard-photo,.feature{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--paper);display:grid;text-decoration:none;color:inherit;border:0;padding:0;text-align:left;cursor:pointer;width:100%}
.feature .ph{aspect-ratio:16/11;border-radius:8px 8px 0 0}
.feature .fb{padding:16px;display:grid;gap:6px}
.feature h3{font-size:1.75rem;line-height:1.1}
.feature p.say{font-size:.95rem;color:var(--ink-2)}
.feature .go{display:inline-flex;align-items:center;gap:8px;margin-top:6px;font:500 .75rem var(--f-label);letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.feature .go::after{content:"";width:7px;height:7px;border:solid currentColor;border-width:1.6px 1.6px 0 0;transform:rotate(45deg)}
.credit{font:400 .8125rem var(--f-text);color:var(--ink-2)}  /* small text, 13 px at least */

/* rails: a row you swipe, snapping card to card */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:min(78%,320px);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:4px 16px 18px;scroll-padding-inline:16px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start}
.rail.small{grid-auto-columns:min(44%,180px)}

/* ---------- postcards: the brand's object. A print with a white border, the stamp on the photo, the UV as postage ---------- */
.pcard{border-radius:14px;border:1px solid var(--line);background:var(--paper)}
.pc-front,.pc-back{border-radius:14px;padding:8px 8px 16px;display:grid;gap:14px;align-content:start}
.pc-print{position:relative;border-radius:8px;overflow:hidden;background:var(--sand);aspect-ratio:4/2.9}
.pc-print .ph{position:absolute;inset:0;width:100%;height:100%}
.pc-print::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(26,24,22,.24))}
.pc-top{position:absolute;z-index:1;left:12px;right:12px;top:12px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.pc-stamp{min-width:0;line-height:1.5;font:500 .75rem var(--f-label);letter-spacing:.2em;text-transform:uppercase;background:var(--paper);border-radius:6px;padding:6px 9px;font-variant-numeric:tabular-nums}
.pc-uv{flex:none;width:58px;height:66px;display:grid;place-items:center;align-content:center;gap:2px;background:var(--paper);
  outline:1px dotted var(--ink);outline-offset:-5px;border-radius:3px;transform:rotate(3deg)}
.pc-uv b{font:300 1.9rem/1 var(--f-display);font-variant-numeric:tabular-nums}
.pc-uv span{font:500 .625rem var(--f-label);letter-spacing:.2em}
.pc-body{display:grid;gap:10px;padding:0 8px}
.pc-line{font:300 1.75rem/1.1 var(--f-display);letter-spacing:-.01em;text-wrap:balance}
.pc-meta{font:500 .75rem var(--f-label);letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.pc-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:0 8px}
.pc-back{background:var(--paper);padding:20px 18px 16px;
  background-image:linear-gradient(90deg,transparent calc(100% - 64px),var(--line) calc(100% - 64px) calc(100% - 63px),transparent calc(100% - 63px))}
.turn{display:inline-flex;align-items:center;gap:8px;min-height:44px;border:1px solid var(--ink);border-radius:999px;background:transparent;padding:0 16px;font:400 .9375rem var(--f-display);cursor:pointer}
.turn{white-space:nowrap}
.turn svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.pc-addr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0;padding-top:10px;border-top:1px solid var(--line)}
.pc-addr dt{font:500 .75rem var(--f-label);letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.pc-addr dd{margin:0;font:400 1.02rem var(--f-display);font-variant-numeric:tabular-nums}
#pcBack{grid-template-columns:minmax(0,1fr)}
#pcBack div{display:grid;gap:2px}
.pc-sign{font:400 1.0625rem var(--f-text);color:var(--ink-2)}
.pc-cta{font:400 1.25rem/1.2 var(--f-display)}  /* the brand line, an invitation at the end */
/* the other side rises into place and settles (the book: nothing spins); 250 ms, ease-out */
.in{animation:rise-in .25s ease-out}
@keyframes rise-in{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}

/* the UV scale in the palette: sand, tan, black; the band is also named in words, never told by colour alone */
.band{height:8px;border-radius:999px;background:linear-gradient(90deg,var(--sand) 0 25%,var(--tan) 25% 66.6%,var(--ink) 66.6%)}
.band i{display:block;width:16px;height:16px;border-radius:50%;background:var(--paper);border:2px solid var(--ink);margin-top:-4px;transform:translateX(-8px)}

/* your day: activities with their picture */
.plan{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.plan li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:2px 14px;align-items:center;padding-block:8px;border-top:1px solid var(--line)}
.plan li:first-child{border-top:0}
.plan .ph{grid-row:span 2;width:56px;height:56px;border-radius:8px}
.plan b{font-family:var(--f-display);font-weight:500;font-size:1.0625rem;align-self:end}
.plan span{font-size:.9375rem;color:var(--ink-2);line-height:1.35;align-self:start}

.hours{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:2px}
.hours li{display:grid;justify-items:center;gap:3px}
.hours i{font-style:normal;width:100%;aspect-ratio:1/1.45;border-radius:5px;display:grid;place-items:center;font:500 .75rem var(--f-label);color:var(--ink);font-variant-numeric:tabular-nums}
.hours i.dark{color:#fff}
.hours li>span{font:500 .6875rem var(--f-label);color:var(--ink);font-variant-numeric:tabular-nums}
/* every other hour is named under the strip: sixteen labels side by side run into each other on a phone */
.hours li:nth-child(even)>span>[aria-hidden]{visibility:hidden}
.hours .nowh i{outline:2px solid var(--ink);outline-offset:1px}
.curve svg{width:100%;height:auto;display:block;color:var(--ink-2)}

/* the Sun List: what we carried */
.kit{display:grid;gap:4px;padding:16px;border-radius:14px;background:var(--paper);border:1px solid var(--line);min-height:150px;align-content:start}
.kit b{font:500 1.0625rem/1.2 var(--f-display)}
.kit span{font-size:.9375rem;color:var(--ink-2);line-height:1.4}

/* ---------- story cards (the roster's Sun Stories) ---------- */
.story-card{position:relative;display:grid;align-content:end;aspect-ratio:3/4;border-radius:0;overflow:hidden;border:0;padding:0;cursor:pointer;color:#fff;text-align:left;background:var(--tan)}
.story-card .ph{position:absolute;inset:0;width:100%;height:100%}
/* Words on a photograph sit on a shade deep enough to read at the size they are set (4.5:1 measured on the
   brightest tenth of the picture under them, not on its average) */
.story-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,24,22,0) 26%,rgba(26,24,22,.58) 52%,rgba(26,24,22,.88))}
.story-card .sc{position:relative;z-index:1;padding:16px;display:grid;gap:6px}
.story-card .eyebrow{color:#fff}
.story-card b{font:500 1.375rem/1.15 var(--f-display);letter-spacing:-.01em}  /* over a photograph: medium */
.story-card .stamp{position:absolute;z-index:1;top:12px;left:12px;max-width:calc(100% - 24px);line-height:1.5;font:500 .6875rem var(--f-label);letter-spacing:.2em;text-transform:uppercase;background:var(--paper);color:var(--ink);border-radius:6px;padding:5px 8px}

/* ---------- reapply ---------- */
.timer{display:grid;gap:12px;justify-items:center;padding:24px 16px 16px;background:var(--paper);border-radius:14px;border:1px solid var(--line);position:relative;overflow:hidden}
.ring{position:relative;width:210px;height:210px;display:block}
.ring .face{position:absolute;inset:22px;border-radius:50%;background:var(--tan);display:grid;place-items:center;align-content:center;gap:2px}  /* tan is a fill */
.ring svg{position:absolute;inset:0}
.big{position:relative;font-family:var(--f-display);font-weight:300;font-size:2.7rem;line-height:1;text-align:center;font-variant-numeric:tabular-nums}
.ring .face small{position:relative;font:500 .6875rem var(--f-label);letter-spacing:.2em;text-transform:uppercase}
.starts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%}
.start{position:relative;display:grid;align-content:end;min-height:120px;border-radius:8px;overflow:hidden;border:0;padding:0;cursor:pointer;color:#fff;text-align:left;background:var(--tan)}
.start .ph{position:absolute;inset:0;width:100%;height:100%}
.start::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,24,22,.12) 15%,rgba(26,24,22,.62) 48%,rgba(26,24,22,.9))}
.start>span:not(.ph){position:relative;z-index:1;padding:10px;display:grid;gap:2px;font:500 1rem/1.1 var(--f-display)}  /* the caption, never a lost photograph's stand-in */
.start small{font:500 .6875rem var(--f-label);letter-spacing:.2em;text-transform:uppercase;color:#fff}
.start[aria-pressed="true"]{outline:2px solid var(--ink);outline-offset:3px}
/* where the sun lands: in words, numbered, no pictures of bodies */
.skin{list-style:none;margin:0;padding:0 16px;display:grid;background:var(--paper);border:1px solid var(--line);border-radius:14px;counter-reset:sk}
.skin li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:2px 8px;padding:12px 0;border-top:1px solid var(--line);counter-increment:sk}
.skin li:first-child{border-top:0}
.skin li::before{content:counter(sk,decimal-leading-zero);grid-row:span 2;font:500 .75rem var(--f-label);letter-spacing:.2em;padding-top:5px}
.skin b{font:500 1.0625rem var(--f-display)}
.skin span{font-size:.9375rem;line-height:1.4;color:var(--ink-2)}
.rows{display:grid}
.rowb{display:flex;align-items:center;gap:12px;min-height:60px;padding:8px 0;border:0;border-top:1px solid var(--line);background:none;text-align:left;cursor:pointer;width:100%;color:inherit}
.rowb:first-child{border-top:0}
.rowb .ri{flex:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--ink);display:grid;place-items:center}
.rowb .ri svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:1.75}
.rowb span{flex:1;display:grid;gap:1px;font:500 1rem var(--f-display)}
.rowb small{font:400 .875rem var(--f-text);color:var(--ink-2)}
.rowb[aria-pressed="true"] .ri{box-shadow:inset 0 0 0 1px var(--ink)}

/* ---------- sessions ---------- */
.session{display:grid;border-radius:14px;overflow:hidden;background:var(--paper);border:1px solid var(--line)}
.session .ph{aspect-ratio:16/9}
.session .sb{padding:16px;display:grid;gap:6px}
.session h3{font-size:1.75rem;line-height:1.1}
.session p:not(.eyebrow){font-size:.9375rem;color:var(--ink-2)}
.session .btns{margin-top:8px}
.skel{min-height:180px;align-content:start}
.skel i{display:block;height:14px;border-radius:7px;background:var(--sand)}
.skel i:first-of-type{height:110px;border-radius:8px}
.skel i:last-of-type{width:60%}

/* ---------- the magazine ---------- */
.cover{position:relative;display:grid;align-content:space-between;aspect-ratio:4/5.25;border-radius:0;overflow:hidden;color:#fff;background:var(--tan)}  /* one photo, the wordmark top left, one line */
.cover>.ph{position:absolute;inset:0;width:100%;height:100%;filter:sepia(.32) saturate(.8) contrast(.95) brightness(1.03)}
.cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,24,22,.34),rgba(26,24,22,0) 30%,rgba(26,24,22,0) 40%,rgba(26,24,22,.6) 62%,rgba(26,24,22,.86))}
.cover .ctop,.cover .cbot{position:relative;z-index:1;padding:20px;display:grid;gap:10px}
.cover .mast svg{display:block;width:82%;height:auto}
.cover .mast{--dot:#fff}
.cover .eyebrow{color:#fff}   /* on a photograph the whole mark is white, the sun too */
/* the issue line as the brand's stamps: small words on a bright sky cannot be made legible by a shade alone */
.cover .issue{display:flex;flex-wrap:wrap;gap:6px;font:500 .6875rem var(--f-label);letter-spacing:.2em;text-transform:uppercase}
.cover .issue span{background:var(--paper);color:var(--ink);border-radius:6px;padding:5px 8px}
.cover .cline{font:500 1.625rem/1.12 var(--f-display);letter-spacing:-.01em;max-width:18ch}
.cover .btn{justify-self:start;min-height:44px;padding:0 20px;font-size:.8rem}
.ribbon{font:500 .75rem var(--f-label);letter-spacing:.2em;text-transform:uppercase;color:var(--ink);text-align:center}
.toc{list-style:none;margin:0;padding:0;display:grid}
.toc button{display:grid;grid-template-columns:72px minmax(0,1fr);gap:4px 14px;align-items:center;width:100%;padding:12px 0;border:0;border-top:1px solid var(--line);background:none;text-align:left;cursor:pointer}
.toc li:first-child button{border-top:0}
.toc .ph{grid-row:span 3;width:72px;height:72px;border-radius:0}
.toc .n{font:500 .6875rem var(--f-label);letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.toc b{font:500 1.0625rem/1.2 var(--f-display)}
.toc em{font-style:normal;font-size:.9375rem;color:var(--ink-2);line-height:1.35}
.uvthumb{grid-row:span 3;width:72px;height:72px;border-radius:0;background:var(--tan);display:grid;place-items:center;font:300 1.9rem var(--f-display)}
.backpage{position:relative;display:grid;align-content:end;min-height:260px;border-radius:0;overflow:hidden;color:#fff;background:var(--tan)}
.backpage .ph{position:absolute;inset:0;width:100%;height:100%}
.backpage::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,24,22,0) 20%,rgba(26,24,22,.6) 50%,rgba(26,24,22,.88))}
.backpage div{position:relative;z-index:1;padding:20px;display:grid;gap:6px}
.backpage h2{font-size:1.9rem;line-height:1.05;font-weight:500}  /* over a photograph: medium */
.backpage .eyebrow{color:#fff}
details.credits{font-size:.78rem;color:var(--ink-2)}
details.credits summary{cursor:pointer;font:500 .75rem var(--f-label);letter-spacing:.2em;text-transform:uppercase;min-height:44px;display:flex;align-items:center}
details.credits ul{margin:0;padding-left:1.1em;display:grid;gap:4px}

/* member postcards (the magazine's mail) */
.mail{display:grid;gap:14px;padding:6px 4px}
.mail article{background:var(--paper);border-radius:6px;padding:16px;border:1px solid var(--line);transform:rotate(var(--r,0deg));display:grid;gap:8px}
.mail .d{font:500 .6875rem var(--f-label);letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.mail .from{font:400 1rem var(--f-text);color:var(--ink-2)}

/* ---------- postcard tab ---------- */
.pc{width:100%;height:auto;border-radius:8px;display:block;background:var(--sand)}
.compose .pc-front{gap:12px}
.mine{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;list-style:none;margin:0;padding:0}
.mine li{background:var(--paper);border-radius:14px;padding:12px;border:1px solid var(--line);display:grid;gap:6px;font:400 1rem/1.2 var(--f-display)}
.mine small{font:500 .6875rem var(--f-label);letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}

/* ---------- the bar: cream with a line on top and black outline icons (the book's navigation); the ritual is a raised tan disc ---------- */
.tabbar{position:fixed;z-index:20;left:50%;bottom:0;transform:translateX(-50%);width:min(480px,100%);
  background:var(--ground);color:var(--ink);border-top:1px solid var(--line);padding:0 10px env(safe-area-inset-bottom,0px)}
.tabbar .tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.tabbar [role="tab"]{position:relative;height:var(--bar-h);border:0;background:transparent;color:inherit;display:grid;justify-items:center;align-content:end;gap:5px;cursor:pointer;padding:0 0 11px}
.tabbar [role="tab"]>span{font:400 .75rem var(--f-display);color:var(--ink)}
.tabbar .ic{width:24px;height:24px;fill:none;stroke:var(--ink);stroke-width:1.75}
.tabbar [aria-selected="true"]::after{content:"";position:absolute;left:30%;right:30%;bottom:4px;height:2px;border-radius:1px;background:var(--ink)}
.tabbar [aria-selected="true"]>span{font-weight:500}
.tabbar [role="tab"]:focus-visible{outline:2px solid var(--ink);outline-offset:-4px;border-radius:14px}
.tab-disc>span:last-child{position:absolute;bottom:10px}
.disc{position:absolute;left:50%;top:-22px;width:60px;height:60px;margin-left:-30px;border-radius:50%;background:var(--tan);box-shadow:0 0 0 4px var(--ground),0 0 0 5px var(--line);display:grid;place-items:center}
.disc-ring{position:absolute;inset:-6px;width:72px;height:72px;fill:none;stroke-width:3}
.disc-ring circle:first-child{stroke:transparent}
.disc-ring #discArc{stroke:var(--ink);stroke-dasharray:0 208}
.disc-ic{width:24px;height:24px;fill:none;stroke:var(--ink);stroke-width:1.75}
.disc b{position:absolute;bottom:-22px;font:500 .75rem var(--f-display);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.tab-disc.running>span:last-child{display:none}
.tab-disc[aria-selected="true"] .disc{box-shadow:0 0 0 4px var(--ground),0 0 0 6px var(--ink)}
.tab-disc[aria-selected="true"]::after{display:none}

.toast{position:fixed;left:50%;bottom:calc(var(--bar-h) + 28px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:50;display:flex;gap:12px;align-items:center;max-width:calc(100vw - 32px);padding:8px 8px 8px 16px;border-radius:999px;background:var(--paper);color:var(--ink);border:1px solid var(--ink);font:400 .9375rem var(--f-display)}
.toast button{min-height:36px;border:1px solid var(--ink);background:transparent;border-radius:999px;padding:0 14px;cursor:pointer;font:500 .9375rem var(--f-display)}

/* ---------- sheets and the reader ---------- */
dialog{border:0;padding:0;color:var(--ink);background:var(--ground)}
dialog::backdrop{background:rgba(26,24,22,.42)}
.sheet{width:min(480px,100%);max-width:100%;max-height:88dvh;margin:auto auto 0;border-radius:14px 14px 0 0;padding:10px 16px calc(20px + env(safe-area-inset-bottom,0px));overflow:auto;border-top:1px solid var(--line)}
.sheet::before{content:"";display:block;width:40px;height:4px;border-radius:2px;background:var(--line);margin:0 auto 12px}
.sheet.tall{max-height:94dvh}
@media (prefers-reduced-motion:no-preference){.sheet[open]{animation:sheet-up .25s ease-out}}
@keyframes sheet-up{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}  /* content slides up gently: no zooms, no wipes */
dialog h2{font-size:1.75rem;line-height:1.1}
dialog h3{font-size:1.25rem;font-weight:500;margin-bottom:6px}  /* subheading: Jost medium 20/1.2 */
.sheet section{display:grid;gap:10px;padding:16px 0 4px;border-top:1px solid var(--line);margin-top:14px}
.dlg-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.x{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--ink);background:transparent;display:grid;place-items:center;cursor:pointer}
.x svg{width:18px;height:18px;stroke:var(--ink);stroke-width:2;fill:none}
.kept{display:grid;gap:0;margin:0}
.kept div{display:flex;justify-content:space-between;padding-block:8px;border-bottom:1px solid var(--line);font-size:.9375rem}
.kept dt{color:var(--ink-2)}
.kept dd{margin:0}
.results{list-style:none;margin:0;padding:0;display:grid}
.results button{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:8px 4px;border:0;border-top:1px solid var(--line);background:none;text-align:left;cursor:pointer;font:400 1.0625rem var(--f-display);color:var(--ink)}
.results li:first-child button{border-top:0}
.results i{flex:none;width:10px;height:10px;border-radius:50%;background:var(--tan)}
.results span{flex:1}
.results small{font:400 .875rem var(--f-text);color:var(--ink-2)}
.results [aria-current="true"]{font-weight:500}
.results [aria-current="true"]::after{content:"";width:12px;height:7px;border:solid currentColor;border-width:0 0 2px 2px;transform:rotate(-45deg) translateY(-2px)}

.reader{width:100%;max-width:100%;height:100dvh;max-height:100dvh;margin:0;border-radius:0;overflow:auto;background:var(--ground)}
.reader-bar{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:12px;padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px;background:var(--ground);border-bottom:1px solid var(--line)}
.back{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--ink);background:transparent;display:grid;place-items:center;cursor:pointer}
.back svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:2}
.reader-body{max-width:560px;margin:0 auto;padding:16px 16px calc(40px + env(safe-area-inset-bottom,0px));display:grid;gap:16px}
.reader-body figure{margin:0;display:grid;gap:8px}
.reader-body figure .ph{border-radius:0;aspect-ratio:3/2}  /* the magazine: square photographs */
.reader-body figcaption{font:400 .8125rem/1.4 var(--f-text);color:var(--ink-2)}
.reader-body h1{font-size:2.5rem;line-height:1.05;letter-spacing:-.01em}
.standfirst{font:400 1.25rem/1.35 var(--f-display);color:var(--ink)}  /* under 24 px the light weight is too thin: regular */
.byline{font:500 .75rem var(--f-label);letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.prose{display:grid;gap:16px;font-size:1.0625rem;line-height:1.5}  /* body: Newsreader 17/1.5 */
.prose .drop::first-letter{float:left;font:300 3.6rem/.82 var(--f-display);margin:6px 8px 0 0;color:var(--ink)}
.prose .stamp{justify-self:start;font:500 .75rem var(--f-label);letter-spacing:.2em;text-transform:uppercase;background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:6px 10px;margin-top:6px}
.prose .pull{font:300 1.75rem/1.15 var(--f-display);letter-spacing:-.01em;color:var(--ink);padding:6px 0;text-wrap:balance}
.prose .sign{font:400 1.0625rem var(--f-text);color:var(--ink-2)}
.under{display:grid;gap:0;background:var(--paper);border-radius:14px;padding:4px 16px;border:1px solid var(--line)}
.under div{display:grid;gap:2px;padding:10px 0;border-top:1px solid var(--line)}
.under div:first-child{border-top:0}
.under b{font:500 .75rem var(--f-label);letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.under span{font-size:1rem}
.uvbands{display:grid;gap:6px}
.uvbands div{display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px;align-items:center;padding:10px 14px;border-radius:12px}
.uvbands b{font:300 1.3rem var(--f-display);font-variant-numeric:tabular-nums}
.places{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:pl}
.places li{display:grid;gap:4px;padding:16px;background:var(--paper);border-radius:14px;border:1px solid var(--line);counter-increment:pl}
.places h3{font-size:1.25rem;font-weight:500}
.places h3::before{content:counter(pl,decimal-leading-zero) "  ";font:500 .75rem var(--f-label);color:var(--ink);letter-spacing:.2em;vertical-align:middle}
.places .where{font:500 .75rem var(--f-label);letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.picks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.next{display:grid;gap:6px;padding:16px;border-radius:14px;background:var(--paper);color:var(--ink);border:1px solid var(--ink);text-align:left;cursor:pointer}
.next b{font:300 1.75rem/1.1 var(--f-display)}
.close-go{display:grid;gap:6px;justify-items:center;text-align:center;padding:10px 0 0}
.close-go h2{font-size:1.75rem}

/* the home screen: an offer made once, where installing is possible */
.home .lead{font-size:1.25rem}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:st}
.steps li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:center;font-size:1.0625rem}
.steps .si{width:44px;height:44px;border-radius:12px;border:1px solid var(--ink);display:grid;place-items:center}
.steps .si svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:1.75}

/* the first visit: a welcome strip over Today, never a wall */
.hello{position:relative;display:grid;gap:10px;padding:16px;border-radius:14px;overflow:hidden;color:#fff;background:var(--tan)}
.hello>.ph{position:absolute;inset:0;width:100%;height:100%}
.hello::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,24,22,.7),rgba(26,24,22,.84))}  /* its words run top to bottom over a bright beach */
.hello>*:not(.ph){position:relative;z-index:1}
.hello .eyebrow{color:#fff}
.hello h2{font-size:1.75rem;line-height:1.1;font-weight:500}
.hello-cta{font:400 1.25rem/1.2 var(--f-display)}
.hello b{font-weight:500}
.hello .hint{color:#fff}
.hello .btn{padding:0 14px;min-width:0}

.signoff{display:grid;gap:6px;justify-items:center;text-align:center;padding:16px 8px 6px;color:var(--ink-2);font-size:.9375rem}
.signoff .cta{font:300 1.75rem/1.1 var(--f-display);color:var(--ink)}
.signoff .wm svg{display:block;height:.78rem;width:auto}

@media (min-width:720px){.app{padding-top:24px}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* privacy.html and any other plain page of the app: one readable column */
.doc{max-width:640px;margin:0 auto;padding:max(20px,env(safe-area-inset-top)) 18px 56px;display:grid;gap:18px}
.doc h1{font-size:clamp(2.2rem,8vw,3.2rem);line-height:1}
.doc h2{font-size:1.3rem;font-weight:400;margin-bottom:6px}
.doc section{display:grid;gap:8px;padding-top:14px;border-top:1px solid var(--line)}
.doc ul{margin:0;padding-left:1.1em;display:grid;gap:6px}
.doc ul.credits{list-style:none;padding:0;gap:0}
.doc ul.credits li{padding:9px 0;border-top:1px solid var(--line);font-size:.9rem}
.doc ul.credits a{color:var(--ink)}
.doc p{margin:0}
.doc a{color:inherit}
.doc .k a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px;padding-right:8px}

/* The first minute (take: the cover): the welcome is the first page, in the live light, not a box over a blurred page */
dialog.welcome-cover{width:100%;max-width:none;height:100%;max-height:none;margin:0;border-radius:0;box-shadow:none;padding:calc(26px + env(safe-area-inset-top,0px)) 22px calc(22px + env(safe-area-inset-bottom,0px));
  background-color:var(--ground);
  background-image:radial-gradient(var(--sun-sx) var(--sun-sy) at var(--sun-x) var(--sun-y),var(--glow-a),var(--glow-b) 42%,transparent 72%)}
dialog.welcome-cover::backdrop{background:var(--ground)}
dialog.welcome-cover form{min-height:100%;max-width:440px;margin:0 auto;grid-template-rows:1fr auto;gap:28px}
.welcome-top{display:grid;gap:18px;align-content:center}
.welcome-top .wordmark svg{height:22px;width:auto;display:block}
dialog.welcome-cover h2{font-size:2.5rem;line-height:1.05;letter-spacing:-.01em;outline:none}  /* focus lands here first, for a screen reader; no ring for a heading */
.welcome-cover .lede{font-size:1.0625rem;color:var(--ink-2);max-width:32ch}
.welcome-ask{display:grid;gap:12px}
.welcome-where{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px}
.welcome-where label{font:300 1.75rem var(--f-display);color:var(--ink)}
/* the city is one of app 2's paper fields, a pill here, never the browser's grey box */
.welcome-where .control{border-radius:999px}
.welcome-where select{font:300 1.5rem var(--f-display);padding:0 52px 0 18px;cursor:pointer}
.welcome-cover .away{font-size:.9375rem;line-height:1.4;color:var(--ink);background:var(--paper);border-radius:14px;padding:12px 16px;border:1px solid var(--line)}
.welcome-zip summary{font:400 .9375rem var(--f-display);color:var(--ink);text-decoration:underline;text-underline-offset:4px;cursor:pointer;min-height:44px;display:flex;align-items:center}
.welcome-zip[open] summary{margin-bottom:8px}
.welcome-cover .btn{min-height:48px;font-size:1.0625rem}
/* the Cover's way to anywhere else (app 2.4): a link that is a button, a full finger tall */
.welcome-else{margin:0}
.linkish{min-height:44px;padding:0;border:0;background:none;color:var(--ink);font:400 1rem var(--f-display);text-decoration:underline;text-underline-offset:4px;cursor:pointer}