/* wisst.app's home page (design system: HomePage). Every value comes from the tokens' variables (inline in the page).
   Without the script the page is complete and still; `.js` on <html>, set by the script, turns on the moving layouts. */

:root{--bar-h:calc(var(--control-md) + 2 * var(--space-12));--wide:calc(2 * var(--card-measure) + var(--space-48))}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;overflow-x:clip;background:var(--paper);color:var(--ink);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol,figure{margin:0}
h1,h2{text-wrap:balance}
ul,ol{padding:0;list-style:none}
a[href],button:not(:disabled),[role="button"]:not([aria-disabled="true"]),summary,label[for]{cursor:pointer}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.muted{color:var(--ink-muted)}
.secondary{color:var(--ink-secondary)}
.body-ink{color:var(--ink-body)}
.topic{color:var(--tct,var(--ink))}

/* The bar: on paper; over the deck, with the script, see-through on the topic's colour. */
.bar{position:fixed;inset-inline:0;top:0;z-index:30;height:var(--bar-h);padding-inline:var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:var(--space-16);background:var(--paper);color:var(--ink);box-shadow:0 1px 0 var(--line);transition:background-color var(--duration-fade) var(--ease-standard),color var(--duration-fade) var(--ease-standard),box-shadow var(--duration-fade) var(--ease-standard)}
.mark{color:inherit;display:inline-flex}
.mark svg{height:var(--space-24);width:auto;display:block}
.lang{color:inherit;text-decoration:none;min-height:var(--control-md);display:flex;align-items:center}
.bar.over{background:transparent;color:var(--on-topic);box-shadow:none}
.bar.over .mark circle{fill:var(--signal-on-topic)!important}

/* The first screen: the front card's colour, edge to edge. */
.hero{position:relative;min-height:100svh;padding:calc(var(--bar-h) + var(--space-24)) var(--gutter) var(--space-32);display:flex;align-items:center;background:var(--tc);color:var(--on-topic);overflow:hidden}
.hero-colour,.hero-colour span{position:absolute;inset:0;pointer-events:none}
.hero-colour{z-index:0}
.hero-colour span{opacity:0;transition:opacity var(--duration-swipe) var(--ease-swipe)}
.hero-in{position:relative;z-index:1;width:100%;max-width:var(--wide);margin:0 auto;display:flex;flex-direction:column;gap:var(--space-32)}
.hero-text{display:flex;flex-direction:column;gap:var(--space-16)}
.hero .t-lead,.hero .t-reply{color:var(--on-topic-soft)}
.act{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-12);margin-top:var(--space-8)}
.get{display:inline-flex;align-items:center;justify-content:center;min-height:var(--control-lg);padding-inline:var(--space-24);border-radius:var(--radius-16);background:var(--inverse);color:var(--on-inverse);text-decoration:none;transition:transform var(--duration-press) var(--ease-standard)}
.get:active{transform:scale(0.97)}
.textlink{color:inherit;min-height:var(--control-md);display:flex;align-items:center;text-decoration:underline;text-underline-offset:0.2em}
.scan{display:none}
/* The stores' badges (STORE_BADGE_STYLE, inline): on a topic's colour or Night's inverse card, the focus ring in its text colour. */
.hero .badge:focus-visible,.end .badge:focus-visible{outline-color:var(--on-topic)}
.end-card .badge:focus-visible{outline-color:var(--on-inverse)}
.qr{display:block;width:calc(2 * var(--space-48) + var(--space-16));height:auto;padding:var(--space-4);background:var(--paper);color:var(--ink);border-radius:var(--radius-12)}

/* The deck. */
.deck-area{display:flex;flex-direction:column;align-items:center;gap:var(--space-12)}
.deck{position:relative;width:min(100%, calc(62svh * 4 / 5));aspect-ratio:4/5;touch-action:pan-x pinch-zoom;user-select:none;-webkit-user-select:none}
.card{position:absolute;inset:0;margin:0;border:0;font:inherit;text-align:start;background:var(--tc);color:var(--on-topic);border-radius:var(--radius-26);padding:var(--space-24);display:flex;flex-direction:column;gap:var(--space-16);overflow:hidden;-webkit-tap-highlight-color:transparent}
.card-meta,.card-writer{color:var(--on-topic-muted)}
.card-body{margin-top:auto;display:flex;flex-direction:column;gap:var(--space-12)}
.card-teaser{color:var(--on-topic-soft)}
.card[data-i="0"]{z-index:3}
.card[data-i="1"]{z-index:2}
.card[data-i="2"]{z-index:1}
html:not(.js) .card{pointer-events:none}
/* The cards behind wait sat back, as the script keeps them; <noscript> tilts them instead (home.ts). */
.card[data-i="1"],.card[data-i="2"]{transform:scale(0.96)}
.js .deck{overflow:hidden;border-radius:var(--radius-26);isolation:isolate}
/* The deck reads as a phone's screen: a bezel in the card's own veil, so a card the colour of the screen still shows. */
.deck{box-shadow:0 0 0 var(--space-8) var(--on-topic-veil);border-radius:var(--radius-26)}
.js .card{will-change:transform}
.js .card:focus-visible{outline-color:var(--on-topic);outline-offset:calc(-1 * var(--space-8))}
.frost{position:absolute;inset:0;border-radius:var(--radius-26);background:var(--scrim);-webkit-backdrop-filter:blur(var(--space-12));backdrop-filter:blur(var(--space-12));pointer-events:none;opacity:0}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.frost{-webkit-backdrop-filter:none;backdrop-filter:none}}
.hint{color:var(--on-topic-muted);text-align:center}
.hint .pointer{display:none}
@media (pointer:fine){.hint .touch{display:none}.hint .pointer{display:inline}}
html:not(.js) .hint,html:not(.js) .deck-keys{display:none}
.deck-keys{display:flex;gap:var(--space-8)}
.deck-keys:not(:focus-within){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.key{min-height:var(--control-md);padding-inline:var(--space-16);border:0;border-radius:var(--radius-pill);background:var(--paper);color:var(--ink);font:inherit}
.end-card{position:absolute;inset:0;border-radius:var(--radius-26);padding:var(--space-24);display:flex;flex-direction:column;justify-content:flex-end;gap:var(--space-12);background:var(--inverse);color:var(--on-inverse)}
.end-card .get{background:var(--paper);color:var(--ink)}

/* A card opened: the article inside the deck's frame. */
.reader{position:absolute;inset:0;z-index:100;border-radius:var(--radius-26);background:var(--paper);color:var(--ink);overflow-y:auto;overscroll-behavior:contain;padding:var(--space-12) var(--space-24) var(--space-32);display:flex;flex-direction:column;gap:var(--space-12)}
.back{align-self:flex-start;display:inline-flex;align-items:center;gap:var(--space-4);min-height:var(--control-md);padding:0;border:0;background:none;color:var(--ink);font:inherit}
.back svg{width:var(--icon);height:var(--icon)}
[dir="rtl"] .back svg{transform:scaleX(-1)}
.r-meta{color:var(--tct,var(--ink));font-weight:700}
.r-writer{color:var(--ink);font-weight:700}
.r-first{color:var(--ink-body)}
.takeaway,.pic-takeaway,.s-takeaway{position:relative;padding-top:var(--space-16);display:flex;flex-direction:column;gap:var(--space-8)}
.takeaway::before,.pic-takeaway::before{content:"";position:absolute;inset-inline-start:0;top:0;width:var(--space-32);height:2px;background:var(--tct,var(--ink))}
.rest{margin-top:var(--space-16);padding:var(--space-24);background:var(--paper-raised);border-radius:var(--radius-16);display:flex;flex-direction:column;gap:var(--space-12)}
.rest .act{margin-top:0}

/* Sections under the deck. */
.story,.topics,.writers{width:100%;max-width:calc(var(--wide) + 2 * var(--gutter));margin:0 auto;padding:calc(2 * var(--space-48)) var(--gutter) 0;display:flex;flex-direction:column;gap:var(--space-16)}
.story-in{display:flex;flex-direction:column;gap:var(--space-32);margin-top:var(--space-8)}
.beats{display:flex;flex-direction:column;gap:var(--space-32)}
.beat{display:flex;flex-direction:column;gap:var(--space-4)}
.beat h3,.points h3{color:var(--ink)}
.panel{margin-top:var(--space-12);padding:var(--space-24);background:var(--paper-raised);border-radius:var(--radius-16);display:flex;flex-direction:column;gap:var(--space-8)}
.pic-card{background:var(--tc);color:var(--on-topic);border-radius:var(--radius-16);padding:var(--space-16);display:flex;flex-direction:column;justify-content:flex-end;gap:var(--space-8);min-height:calc(4 * var(--space-48))}
.pic-card .t-meta{color:var(--on-topic-muted)}
.pic-field{display:flex;flex-direction:column;gap:var(--space-8)}
.pic-box{padding:var(--space-16);background:var(--paper);border:1px solid var(--line-strong);border-radius:var(--radius-16);min-height:calc(var(--control-lg) + var(--space-16))}
.pic-foot{display:flex;justify-content:space-between;gap:var(--space-8)}
.pic-foot span:last-child{white-space:nowrap}
.pic-foot svg{width:var(--space-16);height:var(--space-16);vertical-align:-3px;margin-inline-end:var(--space-4)}
.pic-foot .shackle{transform-origin:85% 95%;transition:transform var(--duration-sheet) var(--ease-standard)}
.pic-talk{display:flex;flex-direction:column;gap:var(--space-16)}
.pic-talk .mine,.pic-talk .other{display:flex;flex-direction:column;gap:var(--space-4)}
.pic-talk .other{padding-top:var(--space-16);border-top:1px solid var(--line)}
.pic-talk .reply{margin-top:var(--space-8);padding-inline-start:var(--space-12);border-inline-start:1px solid var(--line);display:flex;flex-direction:column;gap:var(--space-2)}
.stage{display:none}

/* The pinned stage, with the script. */
.js .beat .panel{display:none}
.js .stage{display:block;position:sticky;top:calc(var(--bar-h) + var(--space-8));z-index:2;height:min(52svh, calc(var(--card-measure) * 1.2));background:var(--paper);padding-bottom:var(--space-12)}
.js .beats{gap:0}
.js .beat{min-height:72svh;justify-content:center}
.screen{position:relative;height:100%;max-width:var(--card-measure);margin:0 auto;background:var(--paper-raised);border-radius:var(--radius-26);overflow:hidden}
.s-card{position:absolute;inset:0;background:var(--tc);color:var(--on-topic);padding:var(--space-24);display:flex;flex-direction:column;justify-content:flex-end;gap:var(--space-12)}
.s-card>.t-meta:first-child{position:absolute;top:var(--space-24);inset-inline-start:var(--space-24);color:var(--on-topic-muted)}
.s-card>.t-meta:last-child{color:var(--on-topic-muted)}
.s-card .t-teaser{color:var(--on-topic-soft)}
.s-ghost{visibility:hidden}
.s-article{position:relative;padding:var(--space-24);display:flex;flex-direction:column;gap:var(--space-16)}
.s-title{position:relative;color:var(--ink);will-change:transform}
.s-title .on{position:absolute;inset:0;color:var(--on-topic)}
.s-byline{color:var(--ink);font-weight:700}
.s-takeaway .rule{position:absolute;inset-inline-start:0;top:0;width:var(--space-32);height:2px;background:var(--tct);transform-origin:0 50%}
[dir="rtl"] .s-takeaway .rule{transform-origin:100% 50%}
.s-field{display:flex;flex-direction:column;gap:var(--space-12)}
.share{align-self:flex-end;display:inline-flex;align-items:center;min-height:var(--control-md);padding-inline:var(--space-16);border-radius:var(--radius-pill);background:var(--inverse);color:var(--on-inverse)}
.s-field,.s-talk,.s-takeaway,.s-byline{will-change:opacity,transform}
.s-talk{position:absolute;inset-inline:var(--space-24);top:calc(var(--space-48) * 3)}

/* Topics and writers. */
.tiles{display:flex;flex-wrap:wrap;gap:var(--space-8);margin-block:var(--space-8)}
.tile{display:flex;border-radius:var(--radius-12);background:var(--tc);color:var(--on-topic);transition:transform var(--duration-press) var(--ease-standard)}
.tile a{min-height:var(--control-md);padding-inline:var(--space-16);display:flex;align-items:center;border-radius:inherit;color:inherit;text-decoration:none}
.tile a:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.tile:hover,.tile:focus-within{transform:translateY(calc(-1 * var(--space-4)))}
.writers-text{display:flex;flex-direction:column;gap:var(--space-16)}
.points{display:flex;flex-direction:column;gap:var(--space-16);margin-top:var(--space-8)}
.points li{display:flex;flex-direction:column;gap:var(--space-4)}
.stats{padding:var(--space-24);background:var(--paper-raised);border-radius:var(--radius-16);display:flex;flex-direction:column;gap:var(--space-4)}
.stats .readers{margin-top:var(--space-16)}
.stats ul li{display:grid;grid-template-columns:1fr auto;align-items:baseline;column-gap:var(--space-16);padding-top:var(--space-12)}
.stats ul li .t-label{color:var(--ink);font-variant-numeric:tabular-nums}
.fill{grid-column:1/-1;position:relative;height:2px;margin-top:var(--space-12);background:var(--line)}
.fill::after{content:"";position:absolute;inset:0;background:var(--tct,var(--ink));transform:scaleX(calc(var(--share) * var(--grow, 1)));transform-origin:0 50%}
[dir="rtl"] .fill::after{transform-origin:100% 50%}

/* The end of the feed. */
.end{margin-top:calc(2 * var(--space-48));padding:calc(2 * var(--space-48)) var(--gutter);background:var(--tc);color:var(--on-topic)}
.end-in{max-width:var(--measure);margin:0 auto;display:flex;flex-direction:column;gap:var(--space-16)}
/* Only the band's own lines: the waiting list inside it sits on paper with its own colours. */
.end-in>.t-lead,.end .act>.t-reply{color:var(--on-topic-soft)}
.end .act{align-items:stretch}
.end .act>.get{align-self:flex-start}
.iphone-too{margin-top:var(--space-16)}
.waitlist{padding:var(--space-24);background:var(--paper);color:var(--ink);border-radius:var(--radius-16);display:flex;flex-direction:column;gap:var(--space-12)}
.waitlist .t-footnote a{color:var(--ink)}
.foot{max-width:calc(var(--wide) + 2 * var(--gutter));margin:0 auto;padding:var(--space-24) var(--gutter) var(--space-48);display:flex;flex-wrap:wrap;column-gap:var(--space-24)}
.foot a{color:var(--ink);min-height:var(--control-md);display:flex;align-items:center}

@media (min-width:880px){
.hero-in{flex-direction:row;align-items:center;justify-content:space-between;gap:var(--space-48)}
.hero-text{flex:1;max-width:var(--card-measure)}
.deck{width:auto;height:min(calc(100svh - var(--bar-h) - 3 * var(--space-48)), calc(var(--card-measure) * 16 / 9));aspect-ratio:9/16}
.scan{display:flex;align-items:center;gap:var(--space-12);margin-top:var(--space-8)}
html:not(.js) .beats{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-24)}
.js .story-in{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-48);align-items:start}
.js .stage{grid-column:2;grid-row:1;height:calc(100svh - var(--bar-h) - 2 * var(--space-48));top:calc(var(--bar-h) + var(--space-48));padding-bottom:0;background:none}
.js .beats{grid-column:1;grid-row:1}
.js .beat{min-height:90svh}
.writers{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-48);align-items:start}
}

@media (prefers-reduced-motion:reduce){
.tile,.get,.bar,.pic-foot .shackle{transition:none}
.stage [data-s],.stage .mine,.stage .other,.stage .reply{transition:opacity var(--duration-fade) var(--ease-standard)}
}

/* A QR code reads dark on light, in Night too. */
@media (prefers-color-scheme:dark){.qr{background:var(--ink);color:var(--paper)}}