/* treely.co.uk. Dark, as the app is (round 3, 2026-10-28, docs/website.md): the app's deep ground, cream ink,
   Fraunces with an italic second line in the pale gold, full-bleed photographs, and cream for the one thing to
   press. Values are the app's DARK theme (src/constants/theme.ts). The token names are the pilot's, from its
   cream design, so every page turned dark at once: --cream is the ground and --ink the type. */

@font-face{font-family:'Fraunces';src:url('/fonts/Fraunces_600SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Fraunces';src:url('/fonts/Fraunces_400Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Fraunces';src:url('/fonts/Fraunces_500Medium_Italic.woff2') format('woff2');font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:'DM Sans';src:url('/fonts/DMSans_400Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'DM Sans';src:url('/fonts/DMSans_500Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'DM Sans';src:url('/fonts/DMSans_600SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}

:root{
  color-scheme:dark;
  --cream:#0e0e0c;--paper:#1a1a14;--well:#2a2a1f;
  --ink:#f2efe6;--ink-2:rgba(242,239,230,.78);--ink-3:rgba(242,239,230,.56);
  --accent:#e6cf94;--accent-soft:rgba(230,207,148,.1);
  --line:rgba(242,239,230,.14);--line-2:rgba(242,239,230,.22);
  --deep:#0e0e0c;--deep-2:#1a1a14;--text:#f2efe6;--sec:#a8a48e;--gold:#e6cf94;--green:#8fc79a;--dline:rgba(242,239,230,.14);
  --wrong:#b4473b;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --r-lg:28px;--r-md:18px;--r-sm:12px;
  --shadow:0 30px 60px -20px rgba(0,0,0,.5),0 6px 16px -6px rgba(0,0,0,.3);
  --gutter:24px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{margin:0;background:var(--cream);color:var(--ink);font:400 18px/1.62 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--ink)}
h1,h2,h3{font-family:var(--serif);font-weight:600;color:var(--ink);text-wrap:balance;letter-spacing:-.012em;margin:0}
h1 em,h2 em,h3 em{font-style:italic;font-weight:500;color:var(--accent)}
p{margin:0 0 1em;text-wrap:pretty}
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--gutter)}
.narrow{max-width:760px}
.kicker{display:inline-block;font:600 12.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:12px;z-index:99;background:var(--ink);color:var(--cream);padding:8px 14px;border-radius:8px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* ── Header ── */
.site-head{position:sticky;top:0;z-index:50;background:rgba(14,14,12,.82);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .2s}
.site-head.scrolled{border-bottom-color:var(--line)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:20px}
.logo{display:flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none;font:600 27px/1 var(--serif);letter-spacing:-.02em}
.logo svg{width:26px;height:26px;color:var(--ink);margin-top:-3px}
.logo:hover{color:var(--ink)}
.nav{display:flex;align-items:center;gap:28px}
.nav a{color:var(--ink-2);text-decoration:none;font:500 15.5px/1 var(--sans)}
.nav a:hover,.nav a[aria-current]{color:var(--ink)}
.pill{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:var(--cream)!important;padding:11px 18px;border-radius:999px;font:600 15px/1 var(--sans);text-decoration:none;white-space:nowrap}
.pill:hover{background:var(--accent)}

.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}

.lede{font-size:21px;line-height:1.55;color:var(--ink-2);max-width:34ch;margin-bottom:34px}

.options{display:grid;gap:10px;margin:0 0 4px;padding:0;list-style:none}
.options button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;font:500 18px/1.2 var(--sans);color:var(--ink);background:var(--cream);border:1.5px solid var(--line);border-radius:14px;padding:17px 20px;cursor:pointer;transition:border-color .15s,background .15s,transform .1s}
.options button:hover:not(:disabled){border-color:var(--ink);background:var(--paper)}
.options button:active:not(:disabled){transform:scale(.99)}
.options button:disabled{cursor:default}
.options button .mark{font:600 15px/1 var(--sans);opacity:0}
.options button.right{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.options button.right .mark{opacity:1}
.options button.wrong{border-color:var(--wrong);color:var(--wrong);background:rgba(180,71,59,.06)}
.options button.wrong .mark{opacity:1}
.options button.faded{opacity:.45}
.verdict{display:none;margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.verdict.on{display:block;animation:rise .35s ease-out}
.verdict h3{font-size:24px;margin-bottom:8px}
.verdict p{color:var(--ink-2);font-size:17px}
.verdict .cta-row{margin-top:18px}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ── FAQ ── */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:24px 0;font:600 21px/1.3 var(--serif);color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font:400 28px/1 var(--sans);color:var(--accent);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--ink-2);max-width:62ch;margin:-6px 0 24px}

/* ── Breadcrumb ── */
.crumbs{font:500 14px/1 var(--sans);color:var(--ink-3);padding-top:26px;display:flex;flex-wrap:wrap;gap:8px}
.crumbs a{color:var(--ink-3);text-decoration:none}.crumbs a:hover{color:var(--ink)}
.crumbs span[aria-hidden]{opacity:.5}

/* Prose (legal, support) */
.prose{padding:40px 0 96px}
.prose h1{font-size:clamp(40px,5vw,60px);line-height:1.05;margin:14px 0 18px}
.prose h2{font-size:26px;margin:44px 0 10px}
.prose p,.prose li{color:var(--ink-2)}
.prose .updated{font-size:15px;color:var(--ink-3)}
.mail{display:inline-block;margin:8px 0;padding:14px 24px;border-radius:999px;background:var(--ink);color:var(--cream)!important;font-weight:600;text-decoration:none}

/* Credits + footer */
.credits{font:400 13.5px/1.6 var(--sans);color:var(--ink-3);padding:28px 0 0}
.credits a{color:var(--ink-3)}
.site-foot{border-top:1px solid var(--line);padding:64px 0 40px;margin-top:0}
.site-foot .wrap{display:grid;grid-template-columns:1.3fr repeat(4,minmax(0,1fr));gap:32px}
.site-foot p{font-size:15.5px;color:var(--ink-2);max-width:34ch;margin:16px 0 22px}
.site-foot .ft-h{font:600 12.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:6px 0 16px}
.site-foot ul{list-style:none;padding:0;margin:0}
.site-foot li{margin:0 0 10px}
.site-foot li a{color:var(--ink);text-decoration:none;font-size:15.5px}
.site-foot li a:hover{color:var(--accent)}
.legal{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding-top:24px;margin-top:20px;font-size:14px;color:var(--ink-3)}

/* ── Phones and small tablets ── */
@media (max-width:980px){

  .site-foot .wrap{grid-template-columns:1fr 1fr}
  .site-foot .wrap > div:first-child{grid-column:1/-1}
}
@media (max-width:720px){
  :root{--gutter:16px}
  body{font-size:17px}
  .nav a:not(.pill){display:none}

  .lede{font-size:19px;margin-bottom:26px}

  .faq summary{font-size:19px;padding:20px 0}
  .site-foot .wrap{grid-template-columns:1fr 1fr;gap:28px}
}
/* ── The cream button (every store link) ── */
.cta{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--cream)!important;border-radius:999px;padding:16px 26px 16px 22px;font:600 17px/1 var(--sans);text-decoration:none;white-space:nowrap;transition:transform .15s,background .15s}
.cta svg{width:18px;height:22px;fill:currentColor;margin-top:-3px;flex:none}
.stores{display:inline-flex;flex-wrap:wrap;gap:10px}
.stores .cta{padding:15px 22px 15px 18px}
.cta:hover{transform:translateY(-1px);background:#fff}

/* ── Header laid over the home page's photograph, until the page scrolls ── */
.site-head.over{position:fixed;left:0;right:0;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.site-head.over.scrolled{background:rgba(14,14,12,.82);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px)}
.site-head.over .nav a:not(.pill){color:rgba(242,239,230,.86)}

/* ── Home ── */
.hm-hero{position:relative;isolation:isolate;min-height:min(880px,100svh);display:flex;align-items:center;overflow:hidden}
.hm-hero-bg{position:absolute;inset:0;z-index:-2}
.hm-hero-bg img{width:100%;height:100%;object-fit:cover}
.hm-hero::before{content:'';position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg,rgba(14,14,12,.9) 0%,rgba(14,14,12,.66) 32%,rgba(14,14,12,.05) 62%,rgba(14,14,12,.1) 100%),
  linear-gradient(0deg,rgba(14,14,12,1) 0%,rgba(14,14,12,0) 30%),
  linear-gradient(180deg,rgba(14,14,12,.6) 0%,rgba(14,14,12,0) 22%)}
.hm-hero-body{width:100%;padding-top:140px;padding-bottom:120px;display:grid;gap:26px;justify-items:start}
.hm-hero h1{font-size:clamp(44px,6.4vw,92px);line-height:1;max-width:11ch}
.hm-hero h1 em{display:block}
.hm-hero .lede{font-size:clamp(18px,1.6vw,21px);max-width:40ch;margin:0}
.hm-hero .cta-row{gap:16px 26px}
.hm-credit{position:absolute;z-index:2;right:max(12px,env(safe-area-inset-right,0px));bottom:10px;font:400 11px/1.3 var(--sans);color:rgba(242,239,230,.6)}
.hm-credit a{color:inherit;text-decoration:none}

.hm-chap{padding:clamp(64px,8vw,112px) 0 0}
#questions{padding-bottom:96px}

.live{display:inline-flex;align-items:center;gap:8px;font:600 12.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.live::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(230,207,148,.18)}

.hm-card,.hm-month{position:relative;margin:0;border-radius:16px;overflow:hidden;background:var(--paper)}
.hm-card{aspect-ratio:4/5}
.hm-card img,.hm-month img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hm-card::after,.hm-month::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(14,14,12,.88) 0%,rgba(14,14,12,0) 52%)}
.hm-card figcaption,.hm-month figcaption{position:absolute;z-index:1;left:16px;right:12px;bottom:14px;display:grid;gap:3px}
.hm-card figcaption b,.hm-month figcaption b{font:600 11px/1.2 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--accent)}
.hm-card figcaption span,.hm-month figcaption span{font:600 clamp(18px,1.7vw,24px)/1.1 var(--serif);color:var(--ink);white-space:nowrap}
.hm-card .hm-credit,.hm-month .hm-credit{top:10px;bottom:auto;z-index:1;font-size:10px}

@media (max-width:720px){
  .hm-hero{align-items:flex-end}
  .hm-hero::before{background:linear-gradient(0deg,rgba(14,14,12,1) 30%,rgba(14,14,12,.4) 70%,rgba(14,14,12,.6) 100%)}
  .hm-hero-body{padding-top:44vw;padding-bottom:64px}

  .cta{padding:15px 22px 15px 18px;font-size:16px}
}

#oak > .wrap > .kicker,#how > .wrap > .kicker{display:block;margin-bottom:16px}

/* ── Out now page ── */
.on-hero{padding:24px 0 8px}
.on-hero h1{font-size:clamp(42px,5.6vw,80px);line-height:1.02;margin:6px 0 20px}
.on-hero h1 em{display:block}
.on-hero .lede{max-width:52ch}
.on-jump{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.on-jump a{border:1px solid var(--line-2);border-radius:999px;padding:10px 16px;font:500 15px/1 var(--sans);color:var(--ink-2);text-decoration:none}
.on-jump a:hover{border-color:var(--ink);color:var(--ink)}
.on-group{padding:clamp(48px,6vw,80px) 0 0;scroll-margin-top:80px}
.on-group h2{font-size:clamp(28px,3vw,40px);margin-bottom:22px}
.on-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:10px}

.on-group:last-of-type{padding-bottom:72px}

@media (max-width:720px){

  .on-grid{grid-template-columns:repeat(2,minmax(0,1fr))}

}

/* ── Out now cards that turn over: the photograph, then what to look for ── */
.hm-card.turn{display:block;width:100%;padding:0;border:0;font:inherit;color:var(--ink);text-align:left;cursor:pointer;perspective:1200px;background:none;overflow:visible}
.hm-card.turn::after{display:none}
.turn .face,.turn .back{position:absolute;inset:0;border-radius:16px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.turn .face{background:var(--paper)}
.turn .face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.turn .face::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(14,14,12,.88) 0%,rgba(14,14,12,0) 52%)}
.turn .cap{position:absolute;z-index:1;left:16px;right:44px;bottom:14px;display:grid;gap:3px}
.turn .cap b{font:600 11px/1.2 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--accent)}
.turn .cap span{font:600 clamp(18px,1.7vw,24px)/1.1 var(--serif);color:var(--ink)}
.turn .more{position:absolute;z-index:1;right:12px;bottom:14px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:500 20px/1 var(--sans);color:var(--ink);background:rgba(14,14,12,.45);border:1px solid rgba(242,239,230,.4);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .2s}
.turn:hover .face img{transform:scale(1.04)}
.turn:hover .more{background:rgba(242,239,230,.9);color:var(--cream)}
.turn .back{transform:rotateY(180deg);background:var(--well);padding:18px 16px;display:flex;flex-direction:column;gap:8px;overflow-y:auto}
.turn .back b{font:600 11px/1.2 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--accent)}
.turn .back .what{font:600 clamp(19px,1.6vw,23px)/1.1 var(--serif)}
.turn .back .look{font-size:15px;line-height:1.4;color:var(--ink)}
.turn .back .find{font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.turn .back .when{font:600 11.5px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);padding-bottom:10px;border-bottom:1px solid var(--line)}
.turn .back .when::before{content:'Out ';color:var(--accent)}
.turn[aria-expanded="true"] .face{transform:rotateY(-180deg);opacity:0;transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity 0s .2s}
.turn[aria-expanded="true"] .back{transform:rotateY(0)}
.turn:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:16px}
@media (prefers-reduced-motion:reduce){.turn .face,.turn .back{transition:none}}
/* Phones: two cards to a row are too narrow to hold the back, so the open card takes the whole row instead. */
@media (max-width:720px){
  .hm-card.turn[aria-expanded="true"]{grid-column:1/-1;aspect-ratio:auto}
  .turn[aria-expanded="true"] .face{display:none}
  .turn[aria-expanded="true"] .back{position:relative;inset:auto;transform:none;overflow:visible}
}

/* ── Home: what the app does, as a plain list (2026-10-28: "tone down the number of boxes") ── */
.hm-title{text-align:center;max-width:40rem;margin:0 auto clamp(32px,4vw,52px);display:grid;gap:12px}
.hm-title h2{font-size:clamp(36px,4.4vw,60px);line-height:1.02}
.hm-title p{color:var(--ink-2);font-size:clamp(17px,1.4vw,19px);margin:0}
/* What the app does, as a scroll: the picture is held on screen and changes as each feature passes it. */
.tour{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:start;max-width:72rem;margin:0 auto}
.tour-steps{list-style:none;margin:0;padding:0}
.tour-step{min-height:72vh;display:flex;align-items:center}
.tour-step:first-child{min-height:56vh;align-items:flex-start;padding-top:10vh}
.tour-step:last-child{min-height:64vh}
.tour-words{display:grid;gap:14px;max-width:30rem;opacity:.3;transition:opacity .4s}
.tour-step.on .tour-words{opacity:1}
.tour-k{font:600 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.tour-words h3{font-size:clamp(30px,3.2vw,46px);line-height:1.05}
.tour-words p{color:var(--ink-2);font-size:clamp(17px,1.35vw,19px);line-height:1.6;margin:0}
.tour-link{justify-self:start;color:var(--ink);font:500 15.5px/1 var(--sans);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:6px}
.tour-link:hover{color:var(--ink);text-decoration-color:var(--ink)}
.tour-stage{position:sticky;top:calc(50vh - min(330px,40vh));height:min(660px,80vh);border-radius:28px;overflow:hidden;background:var(--paper)}
.tour-stage .tour-vis{position:absolute;inset:0;opacity:0;transform:scale(1.03);transition:opacity .6s,transform 1s}
.tour-stage .tour-vis.on{opacity:1;transform:none}
.tour-inline{display:none}
/* A picture's examples, one showing at a time, and the dots that say there are more. */
.slide{position:absolute;inset:0;opacity:0;transition:opacity .7s}
.slide.on{opacity:1}
/* The names that pick a picture's example. */
.ex{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.ex button{font:500 14.5px/1 var(--sans);color:var(--ink-2);background:transparent;border:1px solid var(--line-2);border-radius:999px;padding:9px 14px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.ex button:hover{border-color:var(--ink);color:var(--ink)}
.ex button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.vis-name{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);padding:8px 16px;border-radius:999px;background:rgba(14,14,12,.72);border:1px solid rgba(242,239,230,.18);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font:600 18px/1 var(--serif);color:#f2efe6;white-space:nowrap}

/* The pictures: a photograph, and the app's details laid over it. */
.slide > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tour-vis{isolation:isolate}
.slide::after{content:'';position:absolute;inset:0;z-index:0;background:linear-gradient(0deg,rgba(14,14,12,.75) 0%,rgba(14,14,12,0) 45%);pointer-events:none}
.vis-cards{position:absolute;z-index:1;left:20px;top:20px;display:grid;gap:8px;width:min(22rem,calc(100% - 40px));padding:14px;border-radius:22px;background:rgba(14,14,12,.66);border:1px solid rgba(242,239,230,.14);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}

.vis-title{font:600 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);padding:4px 4px 2px}
.chip{display:flex;align-items:center;gap:12px;padding:8px 12px 8px 8px;border-radius:14px;background:rgba(242,239,230,.07)}
.chip img{width:44px;height:44px;border-radius:10px;object-fit:cover;flex:none}
.chip > span{display:grid;gap:3px;font:600 15px/1.2 var(--serif);color:#f2efe6}
.chip small{font:600 9.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}

.vis-four{position:absolute;inset:0;display:grid;gap:4px}
.vis-four{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.vis-four span{position:relative;overflow:hidden}
.vis-four img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vis-four b{position:absolute;z-index:2;left:16px;bottom:14px;font:600 20px/1 var(--serif);color:#f2efe6;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.vis-frame{position:absolute;z-index:1;inset:14% 20% 30%;border:2px solid rgba(255,255,255,.9);border-radius:18px}
.vis-result{position:absolute;z-index:1;left:0;right:0;bottom:24px;text-align:center;display:grid;gap:4px;font:600 30px/1 var(--serif);color:#f2efe6}
.vis-result small{font:600 10px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}

/* Lookalikes: the app's Compare as a table. Each tree's photograph heads its column; the parts run down the left. */
.vis-cmp{position:absolute;inset:0;z-index:1;display:grid;grid-template-columns:4.4rem minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);grid-auto-rows:auto;column-gap:12px;padding:14px 16px 10px;background:linear-gradient(180deg,#191a15,#121210)}
.cmp-head{position:relative;min-height:0;border-radius:16px;overflow:hidden;margin-bottom:8px}
.cmp-head img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cmp-head::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(14,14,12,.85),rgba(14,14,12,0) 50%)}
.cmp-head b{position:absolute;z-index:1;left:14px;right:10px;bottom:12px;font:600 22px/1.05 var(--serif);color:#f2efe6}
.cmp-part,.cmp-cell{padding:13px 0 14px;border-top:1px solid rgba(242,239,230,.12)}
.cmp-part{font:600 10.5px/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.cmp-cell{font:600 16px/1.3 var(--serif);color:#f2efe6}
.slide:has(.vis-cmp)::after{display:none}
.tour-stage :is(.tour-vis:not(.on),.slide:not(.on)) :is(.cmp-part,.cmp-cell){opacity:0}
.tour-stage .tour-vis .cmp-part,.tour-stage .tour-vis .cmp-cell{transition:opacity .5s ease .35s}

/* Progress: a panel of its own, the four stages as bars that fill, in the app's words. */
.vis-grow{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:center;gap:28px;padding:clamp(28px,4vw,48px);background:radial-gradient(120% 80% at 50% 0%,rgba(92,169,108,.22),rgba(92,169,108,0) 60%),linear-gradient(180deg,#1b2019,#121310)}
.grow-tree{display:flex;align-items:center;gap:14px}
.grow-tree img{width:64px;height:64px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px rgba(92,169,108,.5)}
.grow-tree b{font:600 26px/1 var(--serif);color:#f2efe6}
.grow-steps{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.grow-steps li{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:6px 16px;align-items:center}
.grow-steps b{font:600 18px/1 var(--serif);color:rgba(242,239,230,.7)}
.grow-bar{height:8px;border-radius:999px;background:rgba(242,239,230,.1);overflow:hidden}
.grow-bar i{display:block;height:100%;border-radius:999px;background:rgba(92,169,108,.55)}
.grow-steps small{grid-column:2;font-size:13.5px;color:rgba(242,239,230,.55)}
.grow-steps li.top b{color:#f2efe6}
.grow-steps li.top .grow-bar i{background:var(--green);box-shadow:0 0 12px rgba(92,169,108,.6)}
.grow-steps li.top small{color:var(--green)}

/* Explore: this week's finds as a list, the first one found. */
.vis-week{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:clamp(24px,3.5vw,40px);background:linear-gradient(180deg,#221d14,#13120f)}
.vis-week .vis-title{padding:0 4px 4px;font-size:13px}
.find{position:relative;display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;align-items:center;padding:10px;border-radius:18px;background:rgba(242,239,230,.05);border:1px solid rgba(242,239,230,.1)}
.find img{width:96px;height:96px;border-radius:12px;object-fit:cover}
.find > span{display:grid;gap:4px}
.find small{font:600 9.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.find b{font:600 22px/1 var(--serif);color:#f2efe6}
.find em{font-style:normal;font-size:14px;line-height:1.35;color:rgba(242,239,230,.68)}
.find-tick{position:absolute;top:10px;right:10px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--green);color:#0e0e0c;font:700 13px/1 var(--sans);font-style:normal}
.slide:has(.vis-grow)::after,.slide:has(.vis-week)::after{display:none}

/* Each picture plays its own small moment as it arrives on the held stage; anywhere else it shows finished.
   Learn: the cards slide in. Guide: the seasons appear in turn. Identify: the frame closes on the trunk, then
   the name. Lookalikes: the leaves slide in from either side. Progress: the bars fill. Explore: the finds rise. */
.tour-stage .tour-vis .chip,.tour-stage .tour-vis .vis-four span,.tour-stage .tour-vis .vis-result,
.tour-stage .tour-vis .find,.tour-stage .tour-vis .find-tick,.tour-stage .tour-vis .grow-steps small{transition:opacity .5s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.tour-stage :is(.tour-vis:not(.on),.slide:not(.on)) .chip{opacity:0;transform:translateX(-16px)}
.tour-stage .tour-vis.on .slide.on .chip:nth-of-type(1){transition-delay:.25s}
.tour-stage .tour-vis.on .slide.on .chip:nth-of-type(2){transition-delay:.45s}
.tour-stage .tour-vis.on .slide.on .chip:nth-of-type(3){transition-delay:.65s}
.tour-stage :is(.tour-vis:not(.on),.slide:not(.on)) .vis-four span{opacity:0;transform:scale(.94)}
.tour-stage .tour-vis.on .slide.on .vis-four span:nth-child(2){transition-delay:.18s}
.tour-stage .tour-vis.on .slide.on .vis-four span:nth-child(3){transition-delay:.36s}
.tour-stage .tour-vis.on .slide.on .vis-four span:nth-child(4){transition-delay:.54s}
.tour-stage .vis-frame{transition:inset .9s cubic-bezier(.2,.7,.2,1),opacity .4s}
.tour-stage :is(.tour-vis:not(.on),.slide:not(.on)) .vis-frame{inset:4% 6% 16%;opacity:.4}
.tour-stage :is(.tour-vis:not(.on),.slide:not(.on)) .vis-result{opacity:0;transform:translateY(12px)}
.tour-stage .tour-vis.on .slide.on .vis-result{transition-delay:.8s}
.tour-stage :is(.tour-vis:not(.on),.slide:not(.on)) .tour-stage .tour-vis.on .slide.on .tour-stage .grow-bar i{transform-origin:left;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.tour-stage :is(.tour-vis:not(.on),.slide:not(.on)) .grow-bar i{transform:scaleX(0)}
.tour-stage :is(.tour-vis:not(.on),.slide:not(.on)) .grow-steps small{opacity:0}
.tour-stage .tour-vis.on .slide.on .grow-steps li:nth-child(1) i,.tour-stage .tour-vis.on .slide.on .grow-steps li:nth-child(1) small{transition-delay:.2s}
.tour-stage .tour-vis.on .slide.on .grow-steps li:nth-child(2) i,.tour-stage .tour-vis.on .slide.on .grow-steps li:nth-child(2) small{transition-delay:.45s}
.tour-stage .tour-vis.on .slide.on .grow-steps li:nth-child(3) i,.tour-stage .tour-vis.on .slide.on .grow-steps li:nth-child(3) small{transition-delay:.7s}
.tour-stage .tour-vis.on .slide.on .grow-steps li:nth-child(4) i,.tour-stage .tour-vis.on .slide.on .grow-steps li:nth-child(4) small{transition-delay:.95s}
.tour-stage :is(.tour-vis:not(.on),.slide:not(.on)) .find{opacity:0;transform:translateY(18px)}
.tour-stage .tour-vis.on .slide.on .find:nth-of-type(1){transition-delay:.2s}
.tour-stage .tour-vis.on .slide.on .find:nth-of-type(2){transition-delay:.38s}
.tour-stage .tour-vis.on .slide.on .find:nth-of-type(3){transition-delay:.56s}
.tour-stage :is(.tour-vis:not(.on),.slide:not(.on)) .find-tick{opacity:0;transform:scale(.3)}
.tour-stage .tour-vis.on .slide.on .find-tick{transition-delay:1s}
@media (prefers-reduced-motion:reduce){
  .tour-stage .tour-vis *{transition:none!important;transition-delay:0s!important}
}

/* Narrow screens: no held picture; each feature carries its own, above its words. */
@media (max-width:900px){
  .tour{grid-template-columns:minmax(0,1fr)}
  .tour-stage{display:none}
  .tour-step,.tour-step:first-child,.tour-step:last-child{min-height:0;display:grid;gap:22px;padding:24px 0 40px;align-items:start}
  .tour-words{opacity:1}
  .tour-inline{display:block;order:-1}
  .tour-inline .tour-vis{position:relative;aspect-ratio:4/5;max-height:70vh;border-radius:22px;overflow:hidden;background:var(--paper)}
  /* The comparison grows to fit its rows: its photographs keep a fixed height and the checks run below. */
  .tour-inline .tour-vis:has(.vis-cmp){aspect-ratio:auto;max-height:none}
  .tour-inline .slide.on:has(.vis-cmp){position:relative}
  .tour-inline .vis-cmp{position:relative;grid-template-columns:3.4rem minmax(0,1fr) minmax(0,1fr);padding:16px;column-gap:10px}
  .tour-inline .vis-cmp{grid-template-rows:auto}
  .tour-inline .cmp-head{aspect-ratio:1}
  .tour-inline .cmp-cell{font-size:13.5px}
}
@media (prefers-reduced-motion:reduce){.tour-stage .tour-vis,.tour-words{transition:none}}

/* Questions, and the links into the tree pages. */
.hm-faq{padding-bottom:88px}
.hm-faq h2{font-size:clamp(30px,3.4vw,44px);margin-bottom:20px}
.hm-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px;align-items:center}
.hm-links .tour-k{flex-basis:100%;margin-bottom:4px}
.hm-links a{border:1px solid var(--line-2);border-radius:999px;padding:10px 16px;font:500 15px/1 var(--sans);color:var(--ink-2);text-decoration:none}
.hm-links a:hover{border-color:var(--ink);color:var(--ink)}

/* The close: free to download, and the buttons, centred. */
.hm-close{padding:clamp(80px,10vw,140px) 0 24px;text-align:center}
.hm-close h2{font-size:clamp(40px,5vw,72px);line-height:1}
.hm-close p{color:var(--ink-2);font-size:19px;max-width:36rem;margin:18px auto 30px}
.hm-close .cta-row{justify-content:center}
.hm-close .credits{text-align:left;max-width:52rem;margin:64px auto 0;font-size:13.5px;color:var(--ink-3)}

/* ── Tree page (2026-10-28): built from the app's entry, a slice of it, then what the app adds ── */
.tp-hero{padding:18px 0 clamp(48px,6vw,80px)}
.tp-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.tp-hero-copy{display:grid;gap:16px;justify-items:start}
.tp-hero h1{font-size:clamp(46px,6vw,84px);line-height:1}
.tp-latin{font:italic 500 20px/1.3 var(--serif);color:var(--accent);margin:0}
.tp-hero .lede{max-width:40ch;margin:0}
.tp-hero-pic{position:relative;margin:0;aspect-ratio:4/5;border-radius:26px;overflow:hidden;background:var(--paper)}
.tp-hero-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tp-sec{padding:clamp(48px,6vw,80px) 0 0}
.tp-sec h2{font-size:clamp(30px,3.4vw,46px);line-height:1.06;margin-bottom:26px}
.tp-k{font:600 11.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}

.tp-marks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.tp-mark{display:grid;gap:10px;align-content:start}
.tp-mark-pic{position:relative;aspect-ratio:4/3;border-radius:18px;overflow:hidden;background:var(--paper);margin-bottom:6px}
.tp-mark-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tp-mark p{color:var(--ink-2);font-size:16.5px;line-height:1.55;margin:0}

/* Every part: one large photograph beside an index of the parts; hover or tap a part to bring it up. */
.tp-viewer{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(16px,2.4vw,28px);align-items:stretch}
.tp-stage{position:relative;min-height:100%;aspect-ratio:4/3;border-radius:24px;overflow:hidden;background:var(--paper)}
.tp-shot{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .6s}
.tp-shot.on{opacity:1}
.tp-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.tp-shot.on img{transform:scale(1)}
.tp-shot::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(14,14,12,.7) 0%,rgba(14,14,12,0) 38%);pointer-events:none}
.tp-shot figcaption{position:absolute;z-index:1;left:clamp(18px,2.4vw,28px);right:18px;bottom:clamp(16px,2.2vw,24px);display:grid;gap:6px}
.tp-shot-name{font:600 clamp(30px,3.2vw,44px)/1 var(--serif);color:#f2efe6}
.tp-shot figcaption b{display:none;font:500 16px/1.35 var(--sans);color:rgba(242,239,230,.82)}
.tp-shot .hm-credit{top:12px;bottom:auto}
.tp-index{list-style:none;margin:0;padding:0;display:grid;gap:4px;align-content:center}
.tp-row{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:grid;grid-template-columns:64px minmax(0,1fr);gap:16px;align-items:center;padding:9px 14px 9px 9px;border-radius:16px;border:1px solid transparent;transition:background .25s,border-color .25s}
.tp-row:hover{background:rgba(242,239,230,.04)}
.tp-row:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tp-row[aria-pressed="true"]{background:linear-gradient(160deg,#1c1c16,#141410);border-color:var(--line)}
.tp-thumb{position:relative;width:64px;height:64px;border-radius:12px;overflow:hidden;background:var(--paper);opacity:.55;transition:opacity .25s}
.tp-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tp-row:hover .tp-thumb,.tp-row[aria-pressed="true"] .tp-thumb{opacity:1}
.tp-row-txt{display:grid;gap:6px}
.tp-row .tp-k{color:var(--ink-3);transition:color .25s}
.tp-row[aria-pressed="true"] .tp-k{color:var(--accent)}
.tp-row-txt b{font:600 17px/1.3 var(--serif);color:var(--ink-2);transition:color .25s}
.tp-row[aria-pressed="true"] .tp-row-txt b{color:var(--ink)}

.tp-two{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(32px,5vw,72px);align-items:start}
.tp-months{display:grid;gap:6px}
.tp-mrow{display:grid;grid-template-columns:6.5rem repeat(12,minmax(0,1fr));gap:4px;align-items:center}
.tp-mhead span{font:600 11px/1 var(--sans);color:var(--ink-3);text-align:center}
.tp-mrow span[role="cell"]{height:26px;border-radius:6px;background:var(--line)}
.tp-mrow span.on{background:var(--green)}
.tp-mlabel{font:600 15px/1.2 var(--serif);color:var(--ink)}
.tp-note{color:var(--ink-3);font-size:14px;margin:14px 0 0}
.tp-where{color:var(--ink-2);font-size:17px;line-height:1.6;margin:0}

.tp-looks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tp-look{border:1px solid var(--line);border-radius:20px;padding:20px 22px;display:grid;gap:10px;align-content:start;background:linear-gradient(160deg,#1c1c16,#141410)}

.tp-look p{color:var(--ink-2);margin:0;font-size:15.5px}
.tp-check{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;border-top:1px solid var(--line);padding-top:12px;margin-top:2px}
.tp-check .tp-k{grid-column:1/-1}
.tp-check > span:not(.tp-k){display:grid;gap:4px;font:600 15px/1.3 var(--serif);color:var(--ink)}
.tp-check small{font:500 12px/1 var(--sans);color:var(--ink-3)}
.tp-credits{padding-top:28px;padding-bottom:72px}

/* The index pages: every tree, or every pair, grouped by family, with a box that narrows them. */
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hb-hero{padding:clamp(24px,4vw,48px) 0 0}
.hb-hero h1{font-size:clamp(42px,5.6vw,78px);line-height:1.02;margin:14px 0 18px}
.hb-hero h1 em{color:var(--accent)}
.hb-hero .lede{max-width:46ch;margin:0}
.hb-find{display:block;margin-top:28px;max-width:420px}
.hb-find input{width:100%;box-sizing:border-box;font:500 17px/1 var(--sans);color:var(--ink);background:rgba(242,239,230,.05);border:1px solid var(--line-2);border-radius:999px;padding:15px 22px}
.hb-find input::placeholder{color:var(--ink-3)}
.hb-find input:focus{outline:none;border-color:var(--accent)}
.hb-body{padding:clamp(28px,4vw,48px) 0 88px}
.hb-group{padding-top:clamp(28px,3.4vw,44px)}
.hb-group h2{font-size:clamp(24px,2.4vw,32px);margin:0 0 18px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.hb-group h2 small{font:italic 500 15px/1 var(--serif);color:var(--ink-3)}
.hb-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:10px}
.hb-tile{display:grid;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:linear-gradient(160deg,#1c1c16,#141410);color:inherit;text-decoration:none;transition:border-color .25s}
.hb-tile:hover{border-color:var(--line-2)}
.hb-pics{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:2px;aspect-ratio:4/3;background:var(--paper)}
.hb-pics img{display:block;width:100%;height:100%;min-height:0;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.hb-tile:hover .hb-pics img{transform:scale(1.04)}
.hb-pics{overflow:hidden}
.hb-txt{display:grid;gap:5px;padding:12px 14px 14px}
.hb-txt b{font:600 17px/1.2 var(--serif);color:var(--ink)}
.hb-txt i{font:italic 500 14px/1.2 var(--serif);color:var(--ink-3)}
.hb-none{color:var(--ink-3);margin-top:32px}

/* Identify by one part: tabs between the parts, then tiles of the part with the app's one line. */
.bp-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.bp-tabs a{font:500 14.5px/1 var(--sans);color:var(--ink-2);border:1px solid var(--line-2);border-radius:999px;padding:10px 16px;text-decoration:none;transition:background .2s,color .2s,border-color .2s}
.bp-tabs a:hover{border-color:var(--ink);color:var(--ink)}
.bp-tabs a[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.bp-line{color:var(--ink-2);margin:-8px 0 18px;max-width:60ch}
.bp-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(44%,220px),1fr));gap:10px}
.bp-tile{display:grid;align-content:start;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:linear-gradient(160deg,#1c1c16,#141410);color:inherit;text-decoration:none;transition:border-color .25s}
.bp-tile:hover{border-color:var(--line-2)}
.bp-pic{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--paper)}
.bp-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.bp-tile:hover .bp-pic img{transform:scale(1.04)}
.bp-pic .hm-credit{top:8px;bottom:auto;font-size:10px}
.bp-glance{font:500 14px/1.4 var(--sans);color:var(--ink-2)}

/* A lookalike pair: the answer, the two trees, then each part side by side. */
.lk-hero{padding:clamp(24px,4vw,48px) 0 0}
.lk-hero h1{font-size:clamp(42px,5.6vw,78px);line-height:1.02;margin:0 0 22px;max-width:16ch}
.lk-hero h1 em{color:var(--accent)}

.lk-cell{margin:0;display:grid;gap:12px}
.lk-cell-pic{position:relative;aspect-ratio:4/3;border-radius:18px;overflow:hidden;background:var(--paper)}
.lk-cell-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lk-cell .hm-credit{top:10px;bottom:auto}
.lk-cell figcaption{display:grid;gap:5px;font:600 17px/1.35 var(--serif);color:var(--ink)}
.lk-cell small{font:500 12.5px/1 var(--sans);color:var(--ink-3)}

@media (max-width:900px){
  .tp-hero-grid,.tp-two{grid-template-columns:minmax(0,1fr)}
  .tp-hero-pic{order:-1;aspect-ratio:4/3}
  .tp-marks{grid-template-columns:minmax(0,1fr)}
  .tp-looks{grid-template-columns:minmax(0,1fr)}
  /* On a phone the parts become a row of photographs to swipe, each with its line under the name. */
  .tp-viewer{display:block}
  .tp-index{display:none}
  .tp-stage{display:flex;gap:10px;aspect-ratio:auto;min-height:0;overflow-x:auto;scroll-snap-type:x mandatory;border-radius:0;background:none;margin:0 calc(-1 * var(--gutter,16px));padding:0 var(--gutter,16px);scroll-padding:0 var(--gutter,16px);scrollbar-width:none}
  .tp-stage::-webkit-scrollbar{display:none}
  .tp-shot{position:relative;inset:auto;flex:0 0 min(82%,420px);aspect-ratio:4/5;border-radius:20px;overflow:hidden;opacity:1;scroll-snap-align:start;background:var(--paper)}
  .tp-shot img{transform:none}
  .tp-shot::after{background:linear-gradient(0deg,rgba(14,14,12,.88) 0%,rgba(14,14,12,0) 50%)}
  .tp-shot-name{font-size:28px}
  .tp-shot figcaption b{display:block}
}
@media (max-width:600px){
  .tp-mrow{grid-template-columns:4.6rem repeat(12,minmax(0,1fr));gap:2px}
  .tp-mrow span[role="cell"]{height:20px;border-radius:4px}
  .tp-mlabel{font-size:13px}
  .lk-face,.lk-cell-pic{border-radius:14px}
  .lk-cell figcaption{font-size:15px}
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.bp-by{font:500 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);align-self:center;margin-right:4px}

/* Group by goes to another page, Show swaps in place: Group by reads as page tabs, not as the same pills. */
.bp-tabs{gap:4px 22px;align-items:baseline}
.bp-tabs a{border:0;border-radius:0;padding:6px 0;border-bottom:2px solid transparent}
.bp-tabs a:hover{border-color:var(--line-2)}
.bp-tabs a[aria-current="page"]{background:none;color:var(--ink);border-color:var(--accent)}
.bp-keys{list-style:none;padding:0;margin:0 0 32px;display:grid;gap:10px}
@media (min-width:760px){.bp-keys{grid-template-columns:1fr 1fr}}
.bp-keys li{display:flex;align-items:center;gap:14px;padding:10px 16px 10px 10px;border:1px solid var(--line);border-radius:16px;background:rgba(242,239,230,.03)}
.bp-k-pic{flex:none;width:56px;height:56px;border-radius:11px;overflow:hidden;background:rgba(242,239,230,.06)}
.bp-k-pic img{display:block;width:100%;height:100%;object-fit:cover}.bp-k-pic i{display:block}
.bp-k-t{display:grid;gap:3px;min-width:0}
.bp-keys b{font:600 17px/1.2 var(--serif);color:var(--ink)}
.bp-k-t>span{font:400 14.5px/1.4 var(--sans);color:var(--ink-2)}
/* The directory's head: title and line, then one strip with the groupings on the left and the find box on the
   right. */
.bp-hero h1{margin-top:0}
.bp-bar{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 32px;flex-wrap:wrap;margin-top:36px;border-bottom:1px solid var(--line)}
.bp-bar .bp-tabs{margin:0}
.bp-bar .bp-tabs a{padding:12px 0;margin-bottom:-1px}
.bp-bar .bp-by{align-self:center}
.bp-bar .hb-find{margin:0 0 10px;width:min(300px,100%)}
.bp-bar .hb-find input{padding:10px 18px;font-size:15px}
.bp-hero + .hb-body{padding-top:clamp(32px,4vw,48px)}
@media (max-width:640px){.bp-bar{flex-direction:column-reverse;align-items:stretch}.bp-bar .hb-find{width:100%;margin:0 0 4px}}
@media (max-width:640px){.bp-bar .bp-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:18px}.bp-bar .bp-tabs::-webkit-scrollbar{display:none}.bp-bar .bp-tabs a{flex:none}.bp-bar .bp-by{flex:none}}

/* Their other lookalikes: each pair as a split plate, each half named, the question and its quickest check. */
.lk-also{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:12px}
.lk-also-tile{display:grid;border-radius:22px;overflow:hidden;border:1px solid var(--line);background:linear-gradient(160deg,#1c1c16,#141410);color:inherit;text-decoration:none;transition:border-color .25s}
.lk-also-tile:hover{border-color:var(--line-2)}
.lk-also-pics{display:grid;grid-template-columns:1fr 1fr;gap:2px;aspect-ratio:16/10;overflow:hidden;background:var(--paper)}
.lk-also-pics > span{position:relative;overflow:hidden}
.lk-also-pics img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.lk-also-tile:hover .lk-also-pics img{transform:scale(1.04)}
.lk-also-pics em{position:absolute;left:10px;bottom:10px;max-width:calc(100% - 20px);font:600 12.5px/1.2 var(--sans);font-style:normal;color:#f2efe6;background:rgba(0,0,0,.62);padding:5px 10px;border-radius:999px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lk-also-txt{display:grid;gap:6px;padding:16px 18px 18px}
.lk-also-txt b{font:600 clamp(19px,1.8vw,22px)/1.2 var(--serif);color:var(--ink)}
.lk-also-txt small{font:500 14px/1.35 var(--sans);color:var(--ink-3)}

/* A lookalike pair: the answer in words beside the heading; then the page on the left and, on a wide screen, an
   aside that stays in view with a small try-one and the app. On a phone both sit in the page after the two trees. */
.lk-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px clamp(32px,5vw,72px);align-items:end}
.lk-head h1{margin:0}
.lk-why{font:500 clamp(19px,1.8vw,22px)/1.45 var(--serif);color:var(--ink-2);margin:0 0 14px}
.lk-answer{font:500 clamp(19px,1.9vw,23px)/1.5 var(--serif);color:var(--ink);margin:0}
.lk-answer b{color:var(--accent);font-weight:600}
.lk-body{padding:clamp(36px,5vw,64px) 0 clamp(48px,6vw,80px)}
.lk-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(32px,4vw,56px);align-items:start}
.lk-aside{position:sticky;top:92px}
.lk-aside-in{display:grid;gap:12px}
.lk-inline{display:none}
.lk-trees{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.lk-tree{border-radius:24px;overflow:hidden;border:1px solid var(--line);background:linear-gradient(160deg,#1c1c16,#141410);display:grid;align-content:start}
.lk-tree-pic{position:relative;aspect-ratio:4/3;background:var(--paper)}
.lk-tree-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lk-tree-pic .hm-credit{top:12px;bottom:auto}
.lk-tree-txt{padding:clamp(18px,2.2vw,24px);display:grid;gap:4px;justify-items:start}
.lk-tree-txt h2{font:600 clamp(26px,2.8vw,36px)/1.05 var(--serif);margin:0}
.lk-tree-txt i{font:italic 500 15.5px/1.2 var(--serif);color:var(--accent)}
.lk-tree-txt p{color:var(--ink-2);font-size:16px;line-height:1.6;margin:10px 0 4px}
.lk-read{font:500 14px/1 var(--sans);color:var(--ink);text-decoration:underline;text-decoration-color:rgba(242,239,230,.4);text-underline-offset:5px;margin-top:6px}
.lk-ways{counter-reset:way;margin-top:clamp(48px,6vw,72px)}
.lk-ways > h2,.lk-others > h2{font-size:clamp(28px,3.2vw,42px);margin:0 0 6px}
.lk-way{counter-increment:way;display:grid;grid-template-columns:minmax(0,.6fr) minmax(0,1fr) minmax(0,1fr);gap:12px clamp(10px,1.4vw,16px);padding:clamp(22px,3vw,32px) 0;border-top:1px solid var(--line);align-items:start}
.lk-way-h::before{content:counter(way);display:block;font:600 clamp(38px,4.4vw,56px)/1 var(--serif);color:var(--accent);margin-bottom:8px}
.lk-way-h b{display:block;font:600 clamp(19px,1.9vw,24px)/1.2 var(--serif)}
.lk-way-h span{display:block;margin-top:6px;color:var(--ink-3);font-size:14px}
.lk-way .lk-cell{margin:0;display:grid;gap:10px}
.lk-way.words .lk-cell{border-left:2px solid var(--line-2);padding-left:14px;align-self:center}
.lk-others{margin-top:clamp(48px,6vw,72px)}
.lk-others .lk-also{margin-top:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
.lk-mini,.lk-appcard{border-radius:20px;border:1px solid var(--line);background:linear-gradient(160deg,#1c1c16,#141410);padding:16px}
.lk-mini-top{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;align-items:center}
.lk-mini-pic{aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:var(--paper)}
.lk-mini-pic img{width:100%;height:100%;object-fit:cover}
.lk-mini b{display:block;font:600 18px/1.2 var(--serif);margin-top:6px}
.lk-mini .options{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px}
.lk-mini .options button{width:100%;display:flex;justify-content:space-between;align-items:center;font:500 14.5px/1 var(--sans);color:var(--ink);background:rgba(242,239,230,.04);border:1px solid var(--line-2);border-radius:12px;padding:12px 14px;cursor:pointer}
.lk-mini .options button:hover{border-color:var(--ink)}
.lk-mini .options .mark{opacity:0}
.lk-mini .options button.right{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.lk-mini .options button.right .mark,.lk-mini .options button.wrong .mark{opacity:1}
.lk-mini .options button.wrong{border-color:#d9826b;color:#d9826b}
.lk-mini .options button.faded{opacity:.5}
.lk-mini .verdict{display:none;margin-top:12px}
.lk-mini .verdict.on{display:block}
.lk-mini .verdict h3{font:600 16px/1.2 var(--serif);margin:0 0 4px}
.lk-mini .verdict p{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
@media (max-width:1000px){
  .lk-head{grid-template-columns:minmax(0,1fr)}
  .lk-grid{grid-template-columns:minmax(0,1fr)}
  .lk-aside{display:none}
  .lk-inline{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
}
@media (max-width:640px){
  .lk-trees,.lk-inline{grid-template-columns:minmax(0,1fr)}
  .lk-way{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lk-way-h{grid-column:1/-1}
}

/* The app card: cream, like the app's icon, so it reads as the app on the dark page; an App Store-like line on top. */
.lk-appcard{border-radius:22px;padding:20px;background:#efeadc;color:#14140f;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.lk-app-id{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;align-items:center;padding-bottom:16px;border-bottom:1px solid rgba(20,20,15,.12)}
.lk-app-id img{width:56px;height:56px;border-radius:13px;box-shadow:0 0 0 1px rgba(20,20,15,.1)}
.lk-app-id b{display:block;font:600 20px/1.1 var(--serif);color:#14140f}
.lk-app-id span{display:block;margin-top:3px;font:500 13px/1.3 var(--sans);color:rgba(20,20,15,.6)}
.lk-appcard h3{font:600 24px/1.1 var(--serif);margin:16px 0 8px;color:#14140f}
.lk-appcard h3 em{color:#3f7d4c}
.lk-appcard p{margin:0 0 16px;font-size:14.5px;line-height:1.5;color:rgba(20,20,15,.72)}
.lk-appcard .stores{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px}
.lk-appcard .stores .cta{justify-content:center;background:#14140f;color:#efeadc!important;padding:12px 12px;font-size:14px;gap:8px}
.lk-appcard .stores .cta svg{width:15px;height:18px}
.lk-appcard .stores .cta:hover{background:#2c2c24}

/* A tree page on the lookalike page's frame: the hero with "Know it by" as the answer, then the page beside a side
   column (try-one and the app card) that stays in view on a wide screen. */
.tp-know{margin:6px 0 0;display:grid;gap:0;width:100%;max-width:520px;border-top:1px solid var(--line)}
.tp-know-h{font:600 11.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);padding:16px 0 6px}
.tp-know > div:not(.tp-know-h){display:grid;grid-template-columns:6.5rem minmax(0,1fr);gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.tp-know dt{font:600 15px/1.4 var(--serif);color:var(--ink)}
.tp-know dd{margin:0;font-size:16px;line-height:1.45;color:var(--ink-2)}
.tp-body{padding-top:0}
.tp-body .tp-sec:first-child{padding-top:0}
.tp-body .lk-main{min-width:0}
.tp-then{display:grid;gap:8px;margin:22px 0 0;padding:18px 20px;border-radius:18px;background:var(--accent-soft);color:var(--ink);font-size:16.5px;line-height:1.55}
.tp-body .tp-two{grid-template-columns:minmax(0,1fr) minmax(0,.75fr);gap:clamp(28px,4vw,48px)}
.tp-looks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tp-look{display:grid;align-content:start;padding:0;gap:0;border-radius:22px;overflow:hidden;color:inherit;text-decoration:none;transition:border-color .25s}
.tp-look:hover{border-color:var(--line-2);color:inherit}
.tp-look:hover .lk-also-pics img{transform:scale(1.04)}
.tp-look-txt{display:grid;gap:10px;padding:16px 18px 18px}
.tp-look-txt > b{font:600 clamp(19px,1.8vw,22px)/1.2 var(--serif);color:var(--ink)}
.tp-look-why{color:var(--ink-2);font-size:15.5px;line-height:1.5}
.tp-look .tp-check{margin-top:0}
.tp-look-go{font:500 14px/1 var(--sans);color:var(--ink);text-decoration:underline;text-decoration-color:rgba(242,239,230,.4);text-underline-offset:5px;margin-top:4px}
.tp-also{list-style:none;margin:16px 0 0;padding:0;border-top:1px solid var(--line)}
.tp-also li{display:grid;grid-template-columns:11rem minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.tp-also b{font:600 18px/1.3 var(--serif)}
.tp-also span{color:var(--ink-2);font-size:15.5px;line-height:1.55}
.tp-also em{font-style:normal;font-weight:600;color:var(--ink)}
.lk-inline.one{grid-template-columns:minmax(0,1fr)}
@media (max-width:1100px) and (min-width:1001px){.tp-body .tp-marks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1000px){.tp-body .lk-inline{margin-top:28px}}
@media (max-width:900px){.tp-body .tp-two{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){
  .tp-looks{grid-template-columns:minmax(0,1fr)}
  .tp-also li{grid-template-columns:minmax(0,1fr);gap:4px}
  .tp-know > div:not(.tp-know-h){grid-template-columns:5.5rem minmax(0,1fr)}
}
/* In the side-column frame the index sets the row's height, so the stage takes that height, not a ratio of its own
   (with both, the ratio widened the stage over the index). */
@media (min-width:901px){.tp-body .tp-stage{aspect-ratio:auto;min-height:440px}}
.tp-body .tp-two h2{font-size:clamp(26px,2.6vw,36px)}
/* The app card laid out in a row, at the foot of an index page. */
.ix-app{padding:0 0 clamp(24px,3vw,40px)}
.hb-body + .ix-app{margin-top:-40px}
.lk-appcard.wide{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:20px clamp(24px,3vw,40px);align-items:center;padding:clamp(20px,2.4vw,28px)}
.lk-appcard.wide .lk-app-id{padding:0 clamp(24px,3vw,40px) 0 0;border:0;border-right:1px solid rgba(20,20,15,.12);align-self:stretch}
.lk-appcard.wide h3{margin:0 0 6px;font-size:clamp(22px,2.2vw,28px)}
.lk-appcard.wide p{margin:0;max-width:60ch}
.lk-appcard.wide .stores{grid-template-columns:repeat(2,auto)}
.lk-appcard.wide .stores .cta{padding:14px 18px;font-size:15px}
@media (max-width:900px){
  .lk-appcard.wide{grid-template-columns:minmax(0,1fr)}
  .lk-appcard.wide .lk-app-id{border:0;border-bottom:1px solid rgba(20,20,15,.12);padding:0 0 16px}
  .lk-appcard.wide .stores{grid-template-columns:repeat(auto-fit,minmax(118px,1fr))}
}
.bp-keys b a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:4px}.bp-keys b a:hover{text-decoration-color:var(--accent)}
.tp-aka{margin:-8px 0 0;font:500 15.5px/1.4 var(--sans);color:var(--ink-3)}
.tp-checked{font:400 14.5px/1.6 var(--sans);color:var(--ink-2);max-width:72ch;margin:0;padding:18px 0 0;border-top:1px solid var(--line)}
.tp-checked a{color:var(--ink)}

/* About: the words beside the app card. */
.ab-head .wrap{max-width:760px}
.ab-head{padding-top:clamp(40px,6vw,80px)}
.ab-head .crumbs{padding:0;margin:0 0 4px}
.ab-head+.ab-body{padding-top:clamp(28px,3vw,40px)}
.ab-body{padding:clamp(32px,4vw,56px) 0 88px}
.ab-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(32px,5vw,72px);align-items:start}
.ab-aside{position:sticky;top:92px}
.ab-prose{max-width:68ch}
.ab-prose h2{font-size:clamp(26px,2.6vw,34px);margin:40px 0 12px}
.ab-prose h2:first-child{margin-top:0}
.ab-prose p,.ab-prose li{color:var(--ink-2);font-size:17.5px;line-height:1.65}
.ab-prose b{color:var(--ink)}
@media (max-width:900px){.ab-grid{grid-template-columns:minmax(0,1fr)}.ab-aside{position:static}}

/* The blog: a post reads as an article beside the app card; tree blocks carry the tree page's "Know it by". */
.bl-head{padding-top:clamp(24px,4vw,48px);max-width:900px;margin-left:auto;margin-right:auto;box-sizing:border-box}
.bl-head h1{font-size:clamp(40px,5vw,68px);line-height:1.04;margin:14px 0 18px}
.bl-head .lede{max-width:52ch;margin:0}
.bl-hero{margin:clamp(28px,4vw,48px) auto 0}
.bl-hero > div{position:relative;aspect-ratio:21/9;border-radius:26px;overflow:hidden;background:var(--paper)}
.bl-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bl-grid{padding-top:clamp(36px,5vw,56px)}
.bl-body{min-width:0;max-width:720px}
.bl-body > p{color:var(--ink-2);font-size:18px;line-height:1.7;margin:0 0 20px}
.bl-body > h2{font-size:clamp(28px,3vw,40px);margin:48px 0 16px}
.bl-tree{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;padding:28px 0;border-top:1px solid var(--line)}
.bl-tree-pic{position:relative;display:block;aspect-ratio:4/5;border-radius:18px;overflow:hidden;background:var(--paper);align-self:start}
.bl-tree-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bl-tree-txt{display:grid;gap:10px;justify-items:start}
.bl-tree h2{font-size:clamp(26px,2.6vw,34px);margin:0}
.bl-tree h2 a{color:var(--ink);text-decoration:none}
.bl-why{color:var(--ink);font-size:17px;line-height:1.55;margin:0}
.bl-tree .tp-know{margin:0;max-width:none}
.bl-then{color:var(--ink-2);font-size:15.5px;line-height:1.55;margin:0}
.bl-then b{color:var(--ink);font-weight:600}
.bl-parts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(44%,170px),1fr));gap:10px;margin:8px 0 24px}
.bl-pairs{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.bl-pairs a{display:inline-block;border:1px solid var(--line-2);border-radius:999px;padding:10px 16px;font:500 15px/1 var(--sans);color:var(--ink-2);text-decoration:none}
.bl-pairs a:hover{border-color:var(--ink);color:var(--ink)}
.bl-foot{display:none;padding-top:32px}
.bl-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:16px}
.bl-card{display:grid;border-radius:24px;overflow:hidden;border:1px solid var(--line);background:linear-gradient(160deg,#1c1c16,#141410);color:inherit;text-decoration:none;transition:border-color .25s}
.bl-card:hover{border-color:var(--line-2);color:inherit}
.bl-card-pic{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--paper)}
.bl-card-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.bl-card:hover .bl-card-pic img{transform:scale(1.04)}
.bl-card-txt{display:grid;gap:8px;padding:20px 22px 24px}
.bl-card-txt small{font:600 11.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.bl-card-txt b{font:600 clamp(22px,2.2vw,28px)/1.15 var(--serif);color:var(--ink)}
.bl-card-txt span{color:var(--ink-2);font-size:16px;line-height:1.55}
@media (max-width:1000px){.bl-foot{display:block}}
@media (max-width:640px){.bl-tree{grid-template-columns:minmax(0,1fr)}.bl-tree-pic{aspect-ratio:4/3}.bl-hero > div{aspect-ratio:4/3;border-radius:18px}}
.bl-tree-pic .hm-credit{top:10px;bottom:auto;font-size:10px}
/* In season: every month's page, a strip of the twelve; and the line that points on when the hub is out of date. */
.on-months{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.on-months a{font:500 14.5px/1 var(--sans);color:var(--ink-3);text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.on-months a:hover{color:var(--ink)}
.on-months a[aria-current="page"]{color:var(--ink);border-color:var(--accent)}
.on-stale p{margin:18px 0 0;padding:14px 18px;border-radius:14px;background:var(--accent-soft);color:var(--ink);font-size:16px}
/* Links on to the identify group pages: from a tree page ("Other trees with"), and between groups of one part. */
.tp-groups,.bp-siblings{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:clamp(40px,5vw,56px);padding-top:24px;border-top:1px solid var(--line)}
.tp-groups .tp-k,.bp-siblings .bp-by{margin-right:8px}
.tp-groups a,.bp-siblings a{border:1px solid var(--line-2);border-radius:999px;padding:10px 16px;font:500 15px/1 var(--sans);color:var(--ink-2);text-decoration:none}
.tp-groups a:hover,.bp-siblings a:hover{border-color:var(--ink);color:var(--ink)}
.hb-group h2 a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-2);text-decoration-thickness:1px;text-underline-offset:6px}
.hb-group h2 a:hover{text-decoration-color:var(--accent)}
/* About: Poppy. The photograph of Leon and Poppy leads, the other four beside it. */
.ab-poppy{display:grid;grid-template-columns:1.25fr 1fr 1fr;grid-template-rows:auto auto;gap:8px;margin:24px 0 28px}
.ab-poppy figure{position:relative;margin:0;border-radius:16px;overflow:hidden;background:var(--paper);aspect-ratio:4/5}
.ab-poppy figure:first-child{grid-row:1/3;aspect-ratio:auto}
.ab-poppy img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:640px){.ab-poppy{grid-template-columns:1fr 1fr}.ab-poppy figure:first-child{grid-row:auto;grid-column:1/-1;aspect-ratio:4/5}}
.ab-poppy{margin-bottom:28px}
.legal a{color:inherit;text-decoration:none}.legal a:hover{color:var(--ink)}

/* ── The home page as the store set, made big (2026-11-02). Each chapter: a photograph filling the band, the words on
   one side, the screenshot's own card on the other; alternate chapters swap sides. Stacked on a phone. ── */
.hero-grid{grid-template-columns:minmax(0,1fr);align-items:center}
.hero-card{display:none}
@media (min-width:1000px){.hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);column-gap:64px}.hero-card{display:block;justify-self:end;width:100%;max-width:420px}}

.ch{position:relative;isolation:isolate;overflow:hidden;padding:clamp(72px,10vw,140px) 0;min-height:min(900px,100svh);display:flex;align-items:center}
.ch-bg{position:absolute;inset:0;z-index:-2}
.ch-bg img{width:100%;height:100%;object-fit:cover}
.ch-bg.split{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:#0e0e0c}
.ch::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(10,10,8,.86) 0%,rgba(10,10,8,.6) 42%,rgba(10,10,8,.25) 100%)}
.ch.flip::before{background:linear-gradient(270deg,rgba(10,10,8,.86) 0%,rgba(10,10,8,.6) 42%,rgba(10,10,8,.25) 100%)}
.ch-body{width:100%;display:grid;gap:clamp(36px,5vw,72px);align-items:center}
@media (min-width:1000px){.ch-body{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.ch.flip .ch-words{order:2}}
.ch-words{display:grid;gap:18px;max-width:520px}
.ch-words h2{margin:0;font:600 clamp(40px,5.2vw,68px)/1.04 var(--serif);letter-spacing:-.015em;color:var(--ink);text-wrap:balance}
.ch-words h2 em{display:block;font-style:italic;font-weight:500;color:var(--accent)}
.ch-words p{margin:0;font-size:clamp(17px,1.5vw,19px);color:var(--ink-2)}
.ch-link{justify-self:start;margin-top:6px;font-weight:600;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-2);padding-bottom:3px}
.ch-link:hover{border-color:var(--accent)}
.ch-card{display:flex;justify-content:center;min-width:0}
.ch-dark{background:#0e0e0c}.ch-dark::before,.ch-wall::before{display:none}
.ch-wall{background:#0e0e0c}

/* The cards: the app's dark glass, one cream accent. */
.card{width:100%;max-width:460px;border-radius:30px;padding:clamp(22px,2.6vw,30px);background:rgba(20,20,18,.9);border:1px solid rgba(242,239,230,.12);box-shadow:0 30px 80px rgba(0,0,0,.5);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#f2efe6}
.card .k,.ch-card .k{display:block;font:700 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.card.cream{background:#f7f3e9;color:#14301c;border-color:#f7f3e9}

.q-card{text-align:center}
.q-t{display:block;margin-top:14px;font:600 40px/1 var(--serif)}
.q-h{display:block;margin-top:10px;font-size:15px;color:rgba(242,239,230,.75)}
.q-h u{color:var(--green);text-decoration:underline dashed 1px;text-underline-offset:4px}
.q-opts{margin-top:22px;display:grid;gap:10px}
.q-opts span{display:flex;justify-content:space-between;align-items:center;padding:16px 18px 16px 22px;border-radius:16px;border:1px solid rgba(242,239,230,.14);background:rgba(24,24,22,.8);font:600 19px/1 var(--serif);text-align:left}
.q-opts i{width:18px;height:18px;border-radius:50%;border:1.5px solid rgba(242,239,230,.5)}

.ch-wall .ch-card{position:relative;display:block}
.wall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.wall span{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden}
.wall img{width:100%;height:100%;object-fit:cover}
.wall span::after{content:'';position:absolute;inset:50% 0 0;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.72))}
.wall b{position:absolute;left:10px;bottom:9px;z-index:2;font:700 10px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#f2efe6}
.count{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:auto;min-width:min(78%,340px);text-align:center;padding:28px 34px}
.count b{display:block;font:600 clamp(56px,7vw,92px)/1 var(--serif);letter-spacing:-.02em}
.count span{display:block;margin-top:12px;font:700 11px/1.35 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#2f6b3f}

.cmp-stack{width:100%;max-width:480px;display:grid;gap:16px;justify-items:center}
.pills{display:flex;gap:10px}
.pills span{padding:12px 22px;border-radius:999px;background:rgba(14,14,12,.7);border:1px solid rgba(242,239,230,.25);font:600 16px/1 var(--sans);backdrop-filter:blur(10px)}
.pills span.on{background:#f7f3e9;color:#14140f;border-color:#f7f3e9}
.cmp-hd{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-bottom:14px;font:600 24px/1 var(--serif)}
.cmp-hd span{display:flex;align-items:center;gap:10px}
.cmp-hd img{width:34px;height:34px;border-radius:50%;object-fit:cover;border:1.5px solid rgba(242,239,230,.3)}
.cmp-row{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;padding:13px 0;border-top:1px solid rgba(242,239,230,.1);font-size:15px}
.cmp-row small{grid-column:1/-1;font:700 10px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.cmp-row span+span{border-left:1px solid rgba(242,239,230,.12);padding-left:16px}

.ans .v{display:block;font:600 34px/1 var(--serif)}.ans .v em{font-style:normal;color:var(--green)}
.ans .k{margin:22px 0 8px}
.ans-row{display:flex;align-items:center;gap:16px;padding:12px 0;border-top:1px solid rgba(242,239,230,.1)}
.ans-row img{width:64px;height:64px;border-radius:14px;object-fit:cover}
.ans-row span{display:grid;gap:5px;font:600 20px/1.1 var(--serif)}
.ans-row small{font:700 10px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:rgba(242,239,230,.6)}

.ch-frame{position:absolute;z-index:0;left:50%;top:50%;width:min(36vw,420px);aspect-ratio:1;transform:translate(-10%,-50%);border:3px solid rgba(255,255,255,.9);border-radius:22px;-webkit-mask:linear-gradient(#000 0 0) top left/60px 60px no-repeat,linear-gradient(#000 0 0) top right/60px 60px no-repeat,linear-gradient(#000 0 0) bottom left/60px 60px no-repeat,linear-gradient(#000 0 0) bottom right/60px 60px no-repeat;mask:linear-gradient(#000 0 0) top left/60px 60px no-repeat,linear-gradient(#000 0 0) top right/60px 60px no-repeat,linear-gradient(#000 0 0) bottom left/60px 60px no-repeat,linear-gradient(#000 0 0) bottom right/60px 60px no-repeat}
@media (max-width:999px){.ch-frame{display:none}}
.cam{text-align:center}
.cam b{display:block;margin-top:12px;font:600 46px/1 var(--serif)}
.cam-l{display:block;margin-top:10px;font-size:15px;color:rgba(242,239,230,.7)}
.ticket{margin-top:22px;display:flex;align-items:center;justify-content:space-between;padding:12px 12px 12px 24px;border-radius:999px;background:#f7f3e9;color:#14140f;text-align:left}
.ticket b{display:block;margin:0;font:600 21px/1 var(--serif)}.ticket small{display:block;margin-top:5px;font-size:13px;color:#5a5644}
.ticket i{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#14140f;color:#f7f3e9;font-style:normal;font-size:22px}

.gd{text-align:center}
.gd-n{display:block;margin-top:10px;font:600 52px/1 var(--serif);letter-spacing:-.015em}
.gd-l{display:block;margin-top:6px;font:italic 500 18px/1 var(--serif);color:rgba(242,239,230,.75)}
.gd p{margin:16px 0 0;font-size:15px;line-height:1.5;color:rgba(242,239,230,.85);text-align:left}
.gd-sq{margin-top:18px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.gd-sq span{position:relative;aspect-ratio:6/5;border-radius:12px;overflow:hidden}
.gd-sq img{width:100%;height:100%;object-fit:cover}
.gd-sq span::after{content:'';position:absolute;inset:50% 0 0;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.7))}
.gd-sq b{position:absolute;left:8px;bottom:7px;z-index:2;font:700 9.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase}

.lessons{width:100%;max-width:480px;display:grid;gap:10px}
.les{position:relative;display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:16px;align-items:center;padding:10px 14px 10px 10px;border-radius:18px;background:rgba(26,26,23,.92);border:1px solid rgba(242,239,230,.09);backdrop-filter:blur(10px)}
.les img{width:72px;height:72px;border-radius:12px;object-fit:cover}
.les > span{display:grid;gap:4px;min-width:0}
.les small{font:700 9.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:rgba(242,239,230,.55)}
.les b{font:600 20px/1.1 var(--serif);color:#f2efe6}
.les em{font-style:normal;font-size:13.5px;line-height:1.3;color:rgba(242,239,230,.62)}
.les.next{border-color:#f7f3e9}
.les .tick{font:700 18px/1 var(--sans);font-style:normal;color:var(--green)}
.les .next{font:700 10px/1 var(--sans);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:#14140f;background:#f7f3e9;padding:7px 11px;border-radius:999px}
.lessons .les:last-child{-webkit-mask:linear-gradient(#000 35%,transparent);mask:linear-gradient(#000 35%,transparent)}

.fd-t{display:block;margin-top:10px;font:600 32px/1.05 var(--serif)}
.fd-s{display:block;margin-top:8px;font-size:14.5px;color:rgba(242,239,230,.7)}
.fd-three{margin-top:18px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.fd-three span{position:relative;display:grid;gap:4px}
.fd-three img{width:100%;aspect-ratio:4/5;border-radius:14px;object-fit:cover}
.fd-three b{margin-top:6px;font:600 20px/1 var(--serif)}
.fd-three small{font-size:12.5px;color:rgba(242,239,230,.6)}
.tick-dot{position:absolute;right:8px;top:8px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--green);color:#0e0e0c;font:700 14px/1 var(--sans);font-style:normal}

.coll{width:100%;max-width:520px}
.coll-hd{display:flex;justify-content:space-between;align-items:baseline}
.coll-hd b{font:600 24px/1 var(--serif)}.coll-hd small{font:600 13px/1 var(--sans);color:rgba(242,239,230,.6)}
.coll-bar{display:block;margin-top:12px;height:6px;border-radius:999px;background:rgba(242,239,230,.12)}.coll-bar i{display:block;width:12%;height:100%;border-radius:999px;background:#f7f3e9}
.coll-grid{margin-top:16px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.cf{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;background:#1a1a17}
.cf img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cf::after{content:'';position:absolute;inset:45% 0 0;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.75))}
.cf small{position:absolute;left:7px;top:6px;z-index:2;font:700 9px/1 var(--sans);color:rgba(242,239,230,.85)}
.cf i{position:absolute;right:6px;top:5px;z-index:2;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:#f7f3e9;color:#14140f;font:700 10px/1 var(--sans);font-style:normal}
.cf b{position:absolute;left:7px;right:5px;bottom:6px;z-index:2;font:600 12.5px/1.05 var(--serif);color:#f2efe6}
.cf.empty{background:transparent;border:1.5px dashed rgba(242,239,230,.2)}.cf.empty::after{display:none}
.cf.empty small,.cf.empty b{color:rgba(242,239,230,.45)}.cf.empty b{bottom:20px}
.cf.empty em{position:absolute;left:7px;bottom:6px;font:600 8.5px/1 var(--sans);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:rgba(230,207,148,.7)}

@media (max-width:999px){.ch{min-height:0}.ch::before,.ch.flip::before{background:linear-gradient(180deg,rgba(10,10,8,.82),rgba(10,10,8,.55) 50%,rgba(10,10,8,.85))}}

.hero-words{display:grid;gap:26px;justify-items:start}

/* ── Behaviour (2026-11-02): the chapters as a deck of slides, each arriving once; the index; cards you can play. ── */
/* Every width: a chapter pins once it has been read, and the next slides over it. A chapter taller than the screen
   (a phone, words over card) pins by its bottom edge: site.js sets its top to the screen height minus its own. */
.chapters .ch{position:sticky;top:0;min-height:100svh;box-shadow:0 -40px 80px rgba(0,0,0,.55);border-radius:28px 28px 0 0}
.chapters .ch:first-child{border-radius:0}
@media (min-width:1000px) and (min-height:720px){.chapters .ch{height:100svh;min-height:0;padding:0}}
.ch-anim .ch .ch-bg img{transform:scale(1.08);transition:transform 2.4s cubic-bezier(.2,.7,.2,1)}
.ch-anim .ch .ch-words > *,.ch-anim .ch .ch-card{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.ch-anim .ch.in .ch-bg img{transform:none}
.ch-anim .ch.in .ch-words > *,.ch-anim .ch.in .ch-card{opacity:1;transform:none}
.ch-anim .ch.in .ch-words > :nth-child(2){transition-delay:.08s}.ch-anim .ch.in .ch-words > :nth-child(3){transition-delay:.16s}.ch-anim .ch.in .ch-words > :nth-child(4){transition-delay:.24s}
.ch-anim .ch.in .ch-card{transition-delay:.3s}

.ch-index{position:fixed;right:max(18px,env(safe-area-inset-right,0px));top:50%;z-index:40;transform:translateY(-50%);display:none;flex-direction:column;gap:12px;opacity:0;pointer-events:none;transition:opacity .4s}
.ch-index.shown{opacity:1;pointer-events:auto}
@media (min-width:1180px){.ch-index{display:flex}}
.ch-index a{position:relative;display:block;width:10px;height:10px;border-radius:50%;background:rgba(242,239,230,.28);transition:background .3s,transform .3s}
.ch-index a span{position:absolute;right:22px;top:50%;transform:translateY(-50%);white-space:nowrap;font:600 12px/1 var(--sans);letter-spacing:.06em;color:var(--ink);background:rgba(14,14,12,.82);padding:7px 10px;border-radius:999px;opacity:0;transition:opacity .25s}
.ch-index a:hover span,.ch-index a:focus-visible span,.ch-index a.on span{opacity:1}
.ch-index a.on{background:#f7f3e9;transform:scale(1.3)}
.ch-index a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.q-opts button{all:unset;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;padding:16px 18px 16px 22px;border-radius:16px;border:1px solid rgba(242,239,230,.14);background:rgba(24,24,22,.8);font:600 19px/1 var(--serif);color:#f2efe6;cursor:pointer;transition:border-color .2s,background .2s,transform .15s}
.q-opts button:hover{border-color:rgba(242,239,230,.4);transform:translateY(-1px)}
.q-opts button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.q-opts button i{width:18px;height:18px;border-radius:50%;border:1.5px solid rgba(242,239,230,.5)}
.answered .q-opts button{cursor:default;transform:none}
.answered .q-opts button:not(.right):not(.wrong){opacity:.45}
.q-opts button.right{border-color:var(--green);background:rgba(143,199,154,.12)}.q-opts button.right i{background:var(--green);border-color:var(--green)}
.q-opts button.wrong{border-color:#d9a35b;background:rgba(217,163,91,.1)}.q-opts button.wrong i{border-color:#d9a35b}
.q-verdict{display:grid;gap:6px;margin-top:16px;text-align:left;animation:qin .35s ease}
.q-verdict b{font:600 24px/1.1 var(--serif)}.q-verdict em{font-style:normal;color:var(--green)}.q-verdict em.miss{color:#d9a35b}
.q-verdict span{font-size:14.5px;color:rgba(242,239,230,.75)}
@keyframes qin{from{opacity:0;transform:translateY(6px)}}

.pills button{all:unset;box-sizing:border-box;padding:12px 22px;border-radius:999px;background:rgba(14,14,12,.7);border:1px solid rgba(242,239,230,.25);font:600 16px/1 var(--sans);color:#f2efe6;cursor:pointer;backdrop-filter:blur(10px);transition:background .2s,color .2s}
.pills button:hover{border-color:rgba(242,239,230,.5)}
.pills button.on{background:#f7f3e9;color:#14140f;border-color:#f7f3e9}
.pills button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cmp-set{display:block;animation:qin .3s ease}

.find-b{all:unset;box-sizing:border-box;position:relative;display:grid;gap:4px;cursor:pointer}
.find-b img{width:100%;aspect-ratio:4/5;border-radius:14px;object-fit:cover;transition:transform .2s}
.find-b:hover img{transform:translateY(-2px)}
.find-b b{margin-top:6px;font:600 20px/1 var(--serif)}.find-b small{font-size:12.5px;color:rgba(242,239,230,.6)}
.find-b .tick-dot{opacity:0;transform:scale(.6);transition:opacity .2s,transform .25s cubic-bezier(.3,1.6,.5,1)}
.find-b.got .tick-dot{opacity:1;transform:none}
.find-b:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:14px}
@media (prefers-reduced-motion:reduce){.q-verdict,.cmp-set{animation:none}.find-b .tick-dot{transition:none}}

/* Learn: the tree's reference card. */
.ans .v{display:block;margin-top:10px;font:600 46px/1 var(--serif);letter-spacing:-.01em}
.ans-l{display:block;margin:8px 0 6px;font:italic 500 17px/1 var(--serif);color:rgba(242,239,230,.7)}
.ans .ans-row:first-of-type{margin-top:12px}

/* Camera: the screenshot, made big. One leaf in the viewfinder, the corner brackets, the instruction, the result. */
.vf{position:relative;width:100%;max-width:460px;aspect-ratio:5/7;border-radius:30px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.55);border:1px solid rgba(242,239,230,.12)}
/* The same leaf the store slide frames: the kit photo placed so its 408-1114 x 609-1204 crop fills the frame. */
.vf > img{position:absolute;left:-27.6%;top:-31.3%;width:139%;max-width:none;height:auto}
.vf::before{content:'';position:absolute;left:14%;right:14%;top:13%;height:50%;border-radius:18px;box-shadow:0 0 0 2000px rgba(0,0,0,.38);z-index:1}
.vf-pill{position:absolute;z-index:2;left:50%;top:5%;transform:translateX(-50%);white-space:nowrap;padding:8px 14px;border-radius:999px;background:rgba(14,14,12,.82);font:500 12.5px/1 var(--sans);color:#f2efe6}
.vf-c{position:absolute;z-index:2;width:34px;height:34px;border:3.5px solid #fff}
.vf-c.tl{left:14%;top:13%;border-right:0;border-bottom:0;border-radius:18px 0 0 0}
.vf-c.tr{right:14%;top:13%;border-left:0;border-bottom:0;border-radius:0 18px 0 0}
.vf-c.bl{left:14%;top:calc(63% - 34px);border-right:0;border-top:0;border-radius:0 0 0 18px}
.vf-c.br{right:14%;top:calc(63% - 34px);border-left:0;border-top:0;border-radius:0 0 18px 0}
.vf .cam{position:absolute;z-index:3;left:5%;right:5%;bottom:4%;width:auto;padding:18px 20px}
.vf .cam b{font-size:34px;margin-top:8px}.vf .cam-l{margin-top:6px;font-size:13.5px}
.vf .ticket{margin-top:14px;padding:9px 9px 9px 18px}.vf .ticket b{font-size:17px}.vf .ticket i{width:40px;height:40px;font-size:18px}

/* ── Tree pages, in the home page's language (2026-11-02): a full-bleed hero with a "Know it by" card, then
   chapters on the dark ground, closing on the app over one of the tree's own photographs. ── */
.tq-hero{position:relative;isolation:isolate;min-height:min(820px,92svh);display:flex;align-items:flex-end;overflow:hidden;padding:170px 0 clamp(48px,7vw,88px)}
.tq-hero-bg{position:absolute;inset:0;z-index:-2}
.tq-hero-bg img{width:100%;height:100%;object-fit:cover}
.tq-hero-bg .hm-credit{z-index:3}
.tq-hero::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(10,10,8,.88),rgba(10,10,8,.55) 50%,rgba(10,10,8,.2)),linear-gradient(0deg,rgba(10,10,8,.85),rgba(10,10,8,0) 45%)}
.tq-hero-grid{width:100%;display:grid;gap:36px;align-items:end}
@media (min-width:1000px){.tq-hero-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:64px}}
.tq-hero-copy{display:grid;gap:14px;justify-items:start;max-width:620px}
.tq-hero-copy .crumbs{margin:0 0 6px}
.tq-hero h1{margin:0;font:600 clamp(52px,7.5vw,104px)/.98 var(--serif);letter-spacing:-.02em}
.tq-latin{margin:0;font-size:18px;color:var(--ink-2)}.tq-latin em{font-family:var(--serif)}
.tq-aka{margin:0;font-size:15px;color:var(--ink-3)}
.tq-tell{margin:6px 0 0;font:400 clamp(18px,1.6vw,21px)/1.55 var(--sans);color:var(--ink)}
.tq-know{justify-self:end;max-width:440px}
.tq-know-row{display:grid;grid-template-columns:56px minmax(0,1fr);gap:14px;align-items:center;padding:12px 0;border-top:1px solid rgba(242,239,230,.1);font:600 17px/1.3 var(--serif)}
.card .k+.tq-know-row{margin-top:12px;border-top:0}
.tq-know-row img,.tq-know-row i{width:56px;height:56px;border-radius:12px;object-fit:cover;background:rgba(242,239,230,.08)}
.tq-know-row small{display:block;margin-bottom:4px;font:700 10px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:rgba(242,239,230,.6)}

.tq-sec{padding:clamp(64px,8vw,112px) 0 0}
.tq-h{margin:0 0 clamp(24px,3vw,36px);font:600 clamp(34px,4.2vw,54px)/1.05 var(--serif);letter-spacing:-.015em}
.tq-h em{font-style:italic;font-weight:500;color:var(--accent)}
.tq-k{display:block;font:700 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.tq-marks{display:grid;gap:22px}
@media (min-width:760px){.tq-marks{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tq-mark{display:grid;gap:12px;align-content:start}
.tq-mark-pic{position:relative;aspect-ratio:4/5;border-radius:22px;overflow:hidden;background:var(--paper)}
.tq-mark-pic img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.tq-mark:hover .tq-mark-pic img{transform:scale(1.04)}
.tq-mark p{margin:0;font-size:17px;color:var(--ink-2)}
.tq-know-then{margin:6px 0 0;padding:14px 16px;border-radius:16px;background:#f7f3e9;color:#14301c;font:400 15px/1.45 var(--sans)}
.tq-know-then small{display:block;margin-bottom:6px;font:700 10px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#2f6b3f}
.tq-parts .tp-viewer{max-width:none}
@media (min-width:901px){.tq-parts .tp-stage{aspect-ratio:auto;width:100%;min-height:clamp(420px,42vw,600px)}}
.tq-two{display:grid;gap:48px}
@media (min-width:1000px){.tq-two{grid-template-columns:1.2fr .8fr;gap:72px}}
.tq-note{margin:16px 0 0;font-size:15px;color:var(--ink-3)}
.tq-where{margin:0;font-size:19px;line-height:1.6;color:var(--ink-2)}
.tq-close{position:relative;isolation:isolate;overflow:hidden;margin-top:clamp(72px,9vw,120px);padding:clamp(72px,10vw,140px) 0}
.tq-close-bg{position:absolute;inset:0;z-index:-2}.tq-close-bg img{width:100%;height:100%;object-fit:cover}
.tq-close::before{content:'';position:absolute;inset:0;z-index:-1;background:rgba(10,10,8,.62)}
.tq-close-body{display:flex;justify-content:center}
.tq-close .lk-appcard{max-width:560px;width:100%}

/* Sections that arrive as you scroll (any page): once, then they stay. Off with reduced motion or without script. */
.rv-anim .rv{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.rv-anim .rv.in{opacity:1;transform:none}
.rv-anim .tq-hero.rv{transform:none}

/* Mistaken for, compact: both trees' photographs small, the question, why, the check that settles it. */
.tq-looks{display:grid;gap:12px}
@media (min-width:900px){.tq-looks{grid-template-columns:1fr 1fr}}
.tq-look{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;padding:12px 18px 12px 12px;border-radius:20px;background:var(--paper);border:1px solid var(--line);color:var(--ink);text-decoration:none;transition:border-color .2s,transform .2s}
.tq-look:hover{border-color:var(--line-2);transform:translateY(-2px)}
.tq-look-pics{display:flex;gap:4px}
.tq-look-pics img{width:72px;height:88px;object-fit:cover;border-radius:12px}
.tq-look-pics img:first-child{border-radius:12px 4px 4px 12px}.tq-look-pics img:last-child{border-radius:4px 12px 12px 4px}
.tq-look-t{display:grid;gap:4px;min-width:0}
.tq-look-t b{font:600 19px/1.15 var(--serif)}
.tq-look-t span{font-size:14.5px;line-height:1.4;color:var(--ink-2)}
.tq-look-t small{font:700 10px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-top:2px}
.tq-look i{font-style:normal;font-size:20px;color:var(--ink-3)}

/* The mid-page nudge. */
.tq-nudge{margin-top:clamp(28px,3vw,40px);display:flex;align-items:center;gap:18px;padding:18px 18px 18px 18px;border-radius:24px;background:linear-gradient(120deg,var(--well),var(--paper) 70%);border:1px solid var(--line);color:var(--ink-2);text-decoration:none;font-size:15.5px;line-height:1.45;transition:border-color .2s,transform .2s}
.tq-nudge:hover{border-color:var(--accent)}
.tq-nudge img{flex:none;width:56px;height:56px;border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.tq-nudge span{flex:1;min-width:0}
.tq-nudge span b{display:block;margin-bottom:3px;font:600 20px/1.2 var(--serif);color:var(--ink)}
.tq-nudge i{flex:none;font-style:normal;padding:13px 22px;border-radius:999px;background:#f7f3e9;color:#14140f;font:600 15px/1 var(--sans)}
@media (max-width:640px){.tq-nudge{flex-wrap:wrap;gap:14px;padding:16px}.tq-nudge img{width:48px;height:48px;border-radius:12px}.tq-nudge span{flex-basis:calc(100% - 62px)}.tq-nudge i{flex:1 1 100%;text-align:center}}

/* The closing sell: what the app adds for this tree, the store buttons, three real screenshots fanned. */
.tq-close{padding:clamp(80px,10vw,140px) 0}
.tq-close::before{background:linear-gradient(90deg,rgba(10,10,8,.9),rgba(10,10,8,.7) 55%,rgba(10,10,8,.45))}
.tq-close-grid{display:grid;gap:56px;align-items:center}
@media (min-width:1000px){.tq-close-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}}
.tq-close-copy{display:grid;gap:22px;justify-items:start}
.tq-close-copy h2{margin:0;font:600 clamp(38px,4.6vw,60px)/1.04 var(--serif);letter-spacing:-.015em}
.tq-close-copy h2 em{font-style:italic;font-weight:500;color:var(--accent)}
.tq-adds{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.tq-adds li{display:grid;gap:3px;padding-left:30px;position:relative;font-size:15.5px;color:var(--ink-2)}
.tq-adds li::before{content:'✓';position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--green);color:#0e0e0c;font:700 11px/1 var(--sans)}
.tq-adds b{font:600 19px/1.2 var(--serif);color:var(--ink)}
.tq-free{margin:14px 0 0;font-size:14.5px;color:var(--ink-2)}
.tq-close-copy .tq-free{margin-top:-8px}

/* ── The tree quiz (2026-11-02). ── */
.qz-hero{position:relative;isolation:isolate;overflow:hidden;padding:clamp(150px,16vw,200px) 0 clamp(56px,7vw,90px)}
.qz-hero-bg{position:absolute;inset:0;z-index:-2}.qz-hero-bg img{width:100%;height:100%;object-fit:cover}
.qz-hero::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(10,10,8,.9),rgba(10,10,8,.55)),linear-gradient(0deg,#0e0e0c,rgba(14,14,12,0) 50%)}
.qz-hero-body{display:grid;gap:16px;justify-items:start}
.qz-hero h1{margin:0;font:600 clamp(48px,7vw,96px)/1 var(--serif);letter-spacing:-.02em}
.qz-hero h1 em{display:block;font-style:italic;font-weight:500;color:var(--accent)}
.qz-hero .lede{max-width:560px;margin:0}

.qz-pick{padding:clamp(40px,5vw,64px) 0 clamp(64px,8vw,104px)}
.qz-levels{display:grid;gap:20px}
@media (min-width:900px){.qz-levels{grid-template-columns:repeat(3,1fr)}}
.qz-level{all:unset;box-sizing:border-box;cursor:pointer;display:grid;border-radius:26px;overflow:hidden;background:var(--paper);border:1px solid var(--line);transition:transform .25s,border-color .25s}
.qz-level:hover{transform:translateY(-4px);border-color:var(--accent)}
.qz-level:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.qz-level-pic{aspect-ratio:4/3;overflow:hidden}.qz-level-pic img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.qz-level:hover .qz-level-pic img{transform:scale(1.05)}
.qz-level-t{display:grid;gap:8px;padding:22px 24px 26px}
.qz-level-t b{font:600 28px/1.05 var(--serif);color:var(--ink)}
.qz-level-t > span:not(.kicker){font-size:15.5px;color:var(--ink-2)}
.qz-level-t i{margin-top:8px;justify-self:start;font-style:normal;padding:11px 18px;border-radius:999px;background:#f7f3e9;color:#14140f;font:600 14px/1 var(--sans)}

.qz-game{padding:clamp(110px,12vw,140px) 0 clamp(56px,7vw,90px)}
.qz-top{display:flex;align-items:center;gap:16px;font:600 14px/1 var(--sans);color:var(--ink-2)}
.qz-lvl{color:var(--accent);letter-spacing:.14em;text-transform:uppercase;font-size:12px}
.qz-quit{all:unset;margin-left:auto;cursor:pointer;color:var(--ink-3);font-size:14px;border-bottom:1px solid var(--line-2)}
.qz-bar{margin:14px 0 26px;height:6px;border-radius:999px;background:var(--line)}.qz-bar i{display:block;height:100%;width:0;border-radius:999px;background:var(--green);transition:width .4s}
.qz-opts{display:grid;gap:12px}
.qz-opts button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:20px 22px 20px 26px;border-radius:18px;border:1px solid var(--line-2);background:var(--paper);font:600 22px/1 var(--serif);color:var(--ink);transition:border-color .2s,transform .15s}
.qz-opts button:hover{border-color:rgba(242,239,230,.5);transform:translateY(-1px)}
.qz-opts button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.qz-opts button i{width:20px;height:20px;border-radius:50%;border:1.5px solid rgba(242,239,230,.5)}
.answered .qz-opts button{cursor:default;transform:none}
.answered .qz-opts button:not(.right):not(.wrong){opacity:.4}
.qz-opts button.right{border-color:var(--green);background:rgba(143,199,154,.12)}.qz-opts button.right i{background:var(--green);border-color:var(--green)}
.qz-opts button.wrong{border-color:#d9a35b;background:rgba(217,163,91,.1)}.qz-opts button.wrong i{border-color:#d9a35b}
.qz-why{display:grid;gap:10px;animation:qin .35s ease}
.qz-v{font:600 28px/1.1 var(--serif)}.qz-v em{font-style:normal;color:var(--green)}.qz-v em.miss{color:#d9a35b}
.qz-why p{margin:0;font-size:17px;color:var(--ink-2)}
.qz-part{display:block;margin-bottom:4px;font:700 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.qz-more{justify-self:start;font-size:15px;color:var(--ink);border-bottom:1px solid var(--line-2);text-decoration:none}
.qz-next{all:unset;cursor:pointer;justify-self:start;margin-top:8px;padding:15px 26px;border-radius:999px;background:#f7f3e9;color:#14140f;font:600 16px/1 var(--sans)}
.qz-next:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.qz-done{padding:clamp(120px,12vw,150px) 0 clamp(64px,8vw,104px)}
.qz-done-grid{display:grid;gap:48px;align-items:center}
@media (min-width:900px){.qz-done-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.qz-score{max-width:480px;text-align:center;padding:36px 32px}
.qz-big{display:block;margin-top:12px;font:600 clamp(96px,11vw,140px)/1 var(--serif);letter-spacing:-.03em}
.qz-big small{font-size:.38em;color:var(--ink-3)}
.qz-rank{display:block;margin-top:10px;font:600 26px/1.1 var(--serif);color:var(--accent)}
.qz-rank-line{margin:10px 0 0;font-size:16px;color:var(--ink-2)}
.qz-share-row{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.qz-share,.qz-again{all:unset;cursor:pointer;padding:14px 22px;border-radius:999px;font:600 15px/1 var(--sans)}
.qz-share{background:#f7f3e9;color:#14140f}.qz-again{border:1px solid var(--line-2);color:var(--ink)}
.qz-copied{display:block;min-height:1.2em;margin-top:12px;font-size:14px;color:var(--green)}
.qz-sell{display:grid;gap:18px;justify-items:start}
.qz-sell h2{margin:0;font:600 clamp(38px,4.6vw,58px)/1.04 var(--serif)}.qz-sell h2 em{font-style:italic;font-weight:500;color:var(--accent)}
.qz-sell p{margin:0;font-size:17px;color:var(--ink-2);max-width:520px}
.qz-free{font-size:14px!important;color:var(--ink-3)!important}
.qz-credits{padding-bottom:40px}



/* The question (rewritten in one piece, 2026-11-02). The photograph shows at its own shape, whole, never covered and
   never cropped, up to a height that leaves the answers on screen; a blurred copy of it fills the stage behind. The
   card sits beside it from 760px, under it below that. No fixed heights anywhere, so nothing can squeeze. */
.qz-game{padding:clamp(84px,9vw,104px) 0 48px}
.qz-bar{height:4px;margin:12px 0 20px}
.qz-q{position:relative;isolation:isolate;overflow:hidden;display:grid;gap:20px;align-items:center;padding:clamp(14px,2vw,24px);border-radius:30px;background:#0e0e0c;box-shadow:0 40px 90px rgba(0,0,0,.5)}
.qz-q[hidden]{display:none}
.qz-blur{position:absolute;inset:0;z-index:-1}
.qz-blur img{width:100%;height:100%;object-fit:cover;filter:blur(40px) saturate(1.1) brightness(.42);transform:scale(1.2)}
.qz-pic{position:relative;line-height:0;border-radius:20px;overflow:hidden}
.qz-pic img{display:block;width:100%;height:auto;max-height:min(46svh,460px);object-fit:contain}
.qz-side{display:grid;gap:12px;min-width:0;padding:clamp(18px,2.2vw,28px);background:rgba(18,18,16,.86)}
.qz-title{font:600 clamp(28px,3vw,42px)/1 var(--serif);letter-spacing:-.01em}
.qz-opts{display:grid;gap:10px}
.qz-opts button{gap:14px;min-width:0;text-align:left;line-height:1.15;background:rgba(30,30,27,.85);border-color:rgba(242,239,230,.16);font-size:clamp(17px,1.5vw,20px);padding:15px 18px}
.qz-opts button i{flex:none}
.qz-why{border-top:1px solid rgba(242,239,230,.12);padding-top:12px;gap:8px}
.qz-v{font-size:clamp(20px,1.9vw,25px)}.qz-why p{font-size:15.5px}
@media (min-width:760px){
  .qz-q{grid-template-columns:minmax(0,1.45fr) minmax(300px,1fr);gap:clamp(18px,2.4vw,32px)}
  .qz-pic img{max-height:min(calc(100svh - 230px),680px)}
}

/* ONE SIZE FOR THE WHOLE QUIZ (Leon, 2026-11-02: "the quiz screen shouldn't change sizes at all between images").
   The stage's height depends on the screen only. The photograph fills a fixed frame, whole, with the blur round it;
   the answer's space is reserved from the start and only becomes visible. */
.qz-why{visibility:hidden;animation:none;min-height:186px;align-content:start}
.answered .qz-why{visibility:visible;animation:qin .35s ease}
.qz-q{height:clamp(600px,calc(100svh - 200px),680px);grid-template-rows:100%}
.qz-pic{height:100%}
.qz-pic img{width:100%;height:100%;max-height:none!important;object-fit:contain}
.qz-side{align-self:center}
@media (max-width:759px){
  .qz-q{height:auto;grid-template-rows:clamp(220px,34svh,320px) auto;align-items:stretch}
  .qz-why{min-height:176px}
}
@media (max-width:759px){.qz-why{height:225px;min-height:0;overflow:hidden}.qz-opts{height:176px;align-content:start}}

/* Phones (Leon, 2026-11-02: "a bit of a shitty experience on this sizing"): the question is exactly one screen. The
   photograph fills everything above the card; once answered, the verdict lays itself over the photograph's top
   (it has been looked at by then), so no space is held empty and nothing moves. */
@media (max-width:759px){
  .qz-game{padding-top:64px;padding-bottom:16px}
  .qz-top{font-size:13px}.qz-bar{margin:10px 0 12px}
  .qz-q{display:flex!important;flex-direction:column;height:calc(100svh - 132px)!important;min-height:500px;padding:10px;gap:10px;border-radius:24px}
  .qz-q[hidden]{display:none!important}
  .qz-pic{flex:1 1 auto;min-height:0;height:auto!important;border-radius:16px}
  .qz-pic img{object-fit:cover}
  .qz-side{flex:none;position:static!important;width:auto!important;margin:0!important;padding:14px 14px 12px;gap:8px}
  .qz-side .kicker{display:none}
  .qz-title{font-size:24px}
  .qz-opts{height:auto!important;gap:8px}
  .qz-opts button{padding:12px 14px;font-size:17px}
  .qz-why{position:absolute;z-index:3;left:18px;right:18px;top:18px;height:auto!important;min-height:0!important;overflow:visible!important;padding:16px 16px 14px;border:1px solid rgba(242,239,230,.14)!important;border-radius:18px;background:rgba(16,16,14,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 20px 50px rgba(0,0,0,.5)}
  .qz-next{margin-top:4px}
}
@media (max-width:759px){.qz-q .qz-side{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;filter:none;transform:none!important}}

/* Phones (Leon, 2026-11-02): the card is the photograph's full width and one fixed height, and once answered it
   turns into the result in place: the question and options go, the verdict, what to look for and Next come in. */
@media (max-width:759px){
  .qz-q .qz-side{align-self:stretch!important;justify-self:stretch!important;width:auto!important;max-width:none!important;height:268px;box-sizing:border-box;overflow:hidden}
  .qz-why{position:static!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;display:none}
  .answered .qz-why{display:grid}
  .answered .qz-title,.answered .qz-opts{display:none}
  .qz-why .qz-v{font-size:24px}
}

/* Spot it: three photographs to choose between, in the photograph's place. Each one's tree is named once answered. */
.qz-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-content:stretch;background:transparent}
.qz-tile{all:unset;box-sizing:border-box;position:relative;cursor:pointer;border-radius:16px;overflow:hidden;border:2px solid rgba(242,239,230,.14);transition:transform .2s,border-color .2s;min-height:0}
.qz-tile img{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover!important;max-height:none!important}
.qz-tile:hover{transform:translateY(-2px);border-color:rgba(242,239,230,.5)}
.qz-tile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.qz-tile i{position:absolute;right:10px;top:10px;width:24px;height:24px;border-radius:50%;border:2px solid rgba(255,255,255,.85);background:rgba(0,0,0,.25)}
.qz-tile-name{position:absolute;left:0;right:0;bottom:0;padding:22px 12px 10px;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.8));font:600 15px/1.1 var(--serif);color:#f2efe6;opacity:0;transition:opacity .3s}
.answered .qz-tile{cursor:default;transform:none}
.answered .qz-tile-name{opacity:1}
.answered .qz-tile:not(.right):not(.wrong){opacity:.5}
.qz-tile.right{border-color:var(--green)}.qz-tile.right i{background:var(--green);border-color:var(--green)}
.qz-tile.wrong{border-color:#d9a35b}.qz-tile.wrong i{border-color:#d9a35b;background:rgba(217,163,91,.4)}
.qz-hint{margin:0;font-size:15px;color:var(--ink-3)}
/* Match: the leaf to match sits first, labelled, not a choice. */
.qz-lead{position:relative;border-radius:16px;overflow:hidden;border:2px solid var(--accent);min-height:0}
.qz-lead img{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover!important;max-height:none!important}
.qz-lead .qz-tile-name{opacity:1;color:var(--accent)}
@media (max-width:759px){.qz-lead{border-radius:12px}}
.answered .qz-hint{display:none}
@media (max-width:759px){.qz-tiles{gap:6px}.qz-tile{border-radius:12px}.qz-tile-name{font-size:13px;padding:16px 8px 8px}.qz-tile i{width:20px;height:20px;right:6px;top:6px}}
.qz-side{align-content:start}
.qz-hint{margin-top:4px}

/* Four photographs (Hard): two by two, so none is a sliver. */
.qz-tiles:has(> :nth-child(4)){grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
@media (max-width:759px){.qz-q .qz-side{height:296px}}
.qz-spot:not(.answered) .qz-side{align-content:center;justify-items:center;text-align:center}
.qz-spot:not(.answered) .qz-title{font-size:clamp(28px,3vw,40px)}

/* ── Lookalike pages, in the tree pages' language (2026-11-02): both trees full-bleed side by side, the question
   over them, the quickest check as a card; then the ways to tell them apart, the two trees, their other lookalikes,
   and the app. ── */
.lq-hero{position:relative;isolation:isolate;overflow:hidden;min-height:min(820px,92svh);display:flex;align-items:flex-end;padding:170px 0 clamp(48px,7vw,88px)}
.lq-hero-bg{position:absolute;inset:0;z-index:-2;display:grid;grid-template-columns:1fr 1fr;gap:3px;background:#0e0e0c}
.lq-hero-bg figure{position:relative;margin:0;overflow:hidden}
.lq-hero-bg img{width:100%;height:100%;object-fit:cover}
.lq-hero-bg figcaption{position:absolute;top:96px;left:50%;transform:translateX(-50%);padding:8px 16px;border-radius:999px;background:rgba(14,14,12,.72);font:600 15px/1 var(--serif);white-space:nowrap}
.lq-hero::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(10,10,8,.94),rgba(10,10,8,.55) 55%,rgba(10,10,8,.15))}
.lq-hero-body{display:grid;gap:14px;justify-items:start;max-width:860px}
.lq-hero-body .crumbs{margin:0 0 4px}
.lq-hero h1{margin:0;font:600 clamp(44px,6.4vw,88px)/1 var(--serif);letter-spacing:-.02em}
.lq-hero h1 em{display:block;font-style:italic;font-weight:500;color:var(--accent)}
.lq-why{margin:0;font-size:clamp(17px,1.5vw,20px);color:var(--ink-2);max-width:640px}
.lq-answer{max-width:640px;margin-top:8px}
.lq-answer p{margin:10px 0 0;font-size:16.5px;line-height:1.55;color:rgba(242,239,230,.88)}
.lq-answer b{color:#f2efe6}
.lq-trees{display:grid;gap:18px}
@media (min-width:800px){.lq-trees{grid-template-columns:1fr 1fr}}
.lq-tree{display:grid;gap:8px;align-content:start;padding:26px 28px;border-radius:24px;background:var(--paper);border:1px solid var(--line)}
.lq-tree h3{margin:0;font:600 30px/1.05 var(--serif)}
.lq-tree i{color:var(--ink-3);font-family:var(--serif)}
.lq-tree p{margin:4px 0 0;font-size:16.5px;color:var(--ink-2)}
@media (max-width:640px){.lq-hero-bg figcaption{top:76px;font-size:13px}}

/* ── Every other page's hero (2026-11-02): a photograph full-bleed behind the title, as the tree pages have it. ── */
.ph-hero{position:relative;isolation:isolate;overflow:hidden;padding-top:clamp(130px,14vw,190px)!important;padding-bottom:clamp(48px,6vw,80px)!important}
.ph-bg{position:absolute;inset:0;z-index:-2}
.ph-bg img{width:100%;height:100%;object-fit:cover}
.ph-hero::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(10,10,8,.9),rgba(10,10,8,.6) 55%,rgba(10,10,8,.35)),linear-gradient(0deg,#0e0e0c,rgba(14,14,12,0) 45%)}
.ph-hero .crumbs{margin:0 0 18px;padding:0}
.ph-hero h1{font-size:clamp(46px,6.4vw,88px);line-height:1;letter-spacing:-.02em}
.ph-hero h1 em{display:block}
.ab-grid{grid-template-columns:minmax(0,1fr)!important;max-width:760px}

/* Phones (audit 2026-11-02): the hero's "Know it by" card repeats the marks that follow straight after it, so it goes;
   the three marks swipe sideways like the parts viewer instead of stacking three tall photographs. */
@media (max-width:759px){
  /* The answer on the first screen (quality review): the hero is shorter, and its "Know it by" card stays, compact. */
  .tq-hero{min-height:0;padding-top:120px}
  .tq-hero-grid{gap:22px}
  .tq-tell{font-size:16px}
  .tq-know{justify-self:stretch;max-width:none;padding:14px 16px;gap:2px}
  .tq-know-row{grid-template-columns:44px minmax(0,1fr);gap:12px;padding:9px 0;font-size:15.5px}
  .tq-know-row img,.tq-know-row i{width:44px;height:44px;border-radius:10px}
  .tq-marks{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1 * var(--gutter,16px));padding:0 var(--gutter,16px);scroll-padding:0 var(--gutter,16px);scrollbar-width:none}
  .tq-marks::-webkit-scrollbar{display:none}
  .tq-mark{flex:0 0 82%;scroll-snap-align:start}
  .tq-mark-pic{aspect-ratio:4/3}
  .tq-mark p{font-size:16px}
}

/* In season cards (2026-11-02): photograph, the look line and months in view, the whole card a link to the tree. */
.on-card{display:flex;flex-direction:column;border-radius:16px;overflow:hidden;background:var(--paper);border:1px solid var(--line);color:var(--ink);text-decoration:none;transition:border-color .2s,transform .2s}
a.on-card:hover{border-color:var(--line-2);transform:translateY(-2px)}
a.on-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.on-pic{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--paper)}
.on-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
a.on-card:hover .on-pic img{transform:scale(1.04)}
.on-pic::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(14,14,12,.85) 0%,rgba(14,14,12,0) 55%)}
.on-pic .cap{position:absolute;z-index:1;left:14px;right:14px;bottom:12px;display:grid;gap:3px}
.on-pic .cap b{font:600 11px/1.2 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--accent)}
.on-pic .cap span{font:600 clamp(18px,1.7vw,23px)/1.1 var(--serif);color:var(--ink)}
.on-pic .hm-credit{top:10px;bottom:auto}
.on-txt{display:grid;gap:8px;padding:14px 14px 4px;flex:1}
.on-txt .look{font:400 15px/1.45 var(--sans);color:var(--ink)}
.on-txt .when{font:600 11.5px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.on-txt .when::before{content:'Out ';color:var(--accent)}
.on-go{padding:8px 14px 14px;font:600 13.5px/1.2 var(--sans);color:var(--accent)}
@media (max-width:600px){.on-txt .look{font-size:14px}.on-txt{padding:12px 12px 2px}.on-go{padding:6px 12px 12px;font-size:13px}}
/* Photo credits readable (quality review): 12px on a small dark plate. */
.hm-credit{font-size:12px!important;color:rgba(242,239,230,.85)!important;background:rgba(10,10,8,.55);padding:3px 7px;border-radius:6px}

/* A tree page's family row and A to Z (2026-11-02). */
.tq-more{padding:clamp(64px,8vw,112px) 0 0}
.tq-more-in{border-radius:28px;background:var(--paper);border:1px solid var(--line);padding:clamp(22px,3vw,32px)}
.tq-more .tq-k{margin:0 0 18px}
.tq-kin{display:flex;flex-wrap:wrap;gap:10px}
.tq-kin a{display:flex;align-items:center;gap:12px;padding:6px 18px 6px 6px;border-radius:999px;border:1px solid var(--line-2);color:var(--ink);text-decoration:none;transition:border-color .2s}
.tq-kin a:hover{border-color:var(--accent)}
.tq-kin img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
.tq-kin span{display:grid;gap:2px}
.tq-kin b{font:600 15.5px/1.2 var(--sans)}
.tq-kin small{font:italic 400 13px/1.2 var(--serif);color:var(--ink-3)}
.tq-more .tq-next{margin-top:24px}
.tq-next{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:40px;padding-top:22px;border-top:1px solid var(--line)}
.tq-next a{font:600 15px/1.3 var(--sans);color:var(--ink-2);text-decoration:none}
.tq-next a:hover{color:var(--accent)}

/* Guides: winter steps, calendar, printables, the app page (2026-11-02). */
.gd-step .gd-n{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;margin-bottom:16px;font:600 18px/1 var(--serif);color:var(--cream);background:var(--accent)}
.gd-p{max-width:720px;margin:0 0 28px;font:400 18px/1.6 var(--sans);color:var(--ink-2)}
.gd-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(46%,190px),1fr));gap:14px}
.gd-tile{display:grid;gap:4px;align-content:start;color:var(--ink);text-decoration:none}
.gd-tile>span{display:block;aspect-ratio:1;border-radius:16px;overflow:hidden;background:var(--paper);margin-bottom:6px}
.gd-tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.gd-tile:hover img{transform:scale(1.05)}
.gd-tile b{font:600 18px/1.2 var(--serif)}
.gd-tile small{font:400 14px/1.4 var(--sans);color:var(--ink-2)}
.gd-links{margin-top:28px}
.gd-print{display:flex;align-items:center;gap:16px;padding:22px 24px;border-radius:20px;background:var(--accent);color:var(--cream);text-decoration:none}
.gd-print b{font:600 22px/1.2 var(--serif)}.gd-print span{flex:1;font:500 15.5px/1.4 var(--sans)}.gd-print i{font-style:normal;font-size:22px}
@media (max-width:600px){.gd-print{flex-wrap:wrap}.gd-print span{flex-basis:100%}}
.cl-hero{padding-top:130px;padding-bottom:24px;min-height:0}
.cl-key{display:flex;flex-wrap:wrap;gap:18px;margin-top:8px;font:500 14.5px/1 var(--sans);color:var(--ink-2)}
.cl-key span{display:inline-flex;align-items:center;gap:8px}.cl-key i{width:16px;height:16px;border-radius:4px}
.cl-key .f,.cl-c.f{background:#e8c7d0}.cl-key .g,.cl-c.g{background:#c98a3a}
.cl-c.f.g{background:linear-gradient(180deg,#e8c7d0 50%,#c98a3a 50%)}
.cl-chart{display:grid;gap:3px;overflow-x:auto}
.cl-row{display:grid;grid-template-columns:minmax(130px,200px) repeat(12,minmax(18px,1fr));gap:3px;align-items:center;min-width:420px}
.cl-row>a,.cl-row>span:first-child{font:500 14.5px/1.2 var(--sans);color:var(--ink);text-decoration:none;padding-right:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-row>a:hover{color:var(--accent)}
.cl-head span{font:600 11.5px/1 var(--sans);color:var(--ink-3);text-align:center}
.cl-head span:first-child{text-align:left}
.cl-c{height:20px;border-radius:4px;background:rgba(242,239,230,.06)}
.pr-screen{padding:120px 0 24px}
.pr-screen h1{margin:8px 0 12px;font:600 clamp(40px,5vw,64px)/1.02 var(--serif)}
.pr-screen h1 em{font-style:italic;font-weight:500;color:var(--accent)}
.pr-print{margin-top:8px;padding:14px 22px;border:0;border-radius:999px;background:var(--ink);color:var(--cream);font:600 16px/1 var(--sans);cursor:pointer}
.pr-sheet{max-width:820px;margin:24px auto 60px;padding:36px;background:#fbfaf6;color:#1b1b16;border-radius:6px}
.pr-sheet header{display:grid;gap:4px;margin-bottom:20px;border-bottom:2px solid #1b1b16;padding-bottom:12px}
.pr-sheet header b{font:600 30px/1.1 var(--serif)}.pr-sheet header span{font:400 14px/1.4 var(--sans);color:#4a4a40}
.pr-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pr-item{display:grid;gap:5px;align-content:start}
.pr-item img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px}
.pr-item span{display:flex;align-items:center;gap:7px}.pr-item i{flex:none;width:15px;height:15px;border:1.5px solid #1b1b16;border-radius:3px}
.pr-item b{font:600 15px/1.2 var(--serif)}.pr-item small{font:400 11.5px/1.35 var(--sans);color:#4a4a40}
.pr-sheet footer{margin-top:18px;padding-top:10px;border-top:1px solid #ccc;display:grid;gap:4px;font:400 10px/1.4 var(--sans);color:#555}
.pr-sheet footer a{color:#555}
@media (max-width:700px){.pr-sheet{margin:16px;padding:18px}.pr-grid{grid-template-columns:repeat(2,1fr)}}
.pr-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:16px}
.pr-card{display:grid;gap:8px;padding:16px;border:1px solid var(--line);border-radius:20px;background:var(--paper);color:var(--ink);text-decoration:none}
.pr-card:hover{border-color:var(--line-2)}
.pr-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:6px}.pr-thumbs img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px}
.pr-card b{font:600 22px/1.2 var(--serif)}.pr-card small{font:400 15px/1.45 var(--sans);color:var(--ink-2)}.pr-card i{font:600 14px/1 var(--sans);font-style:normal;color:var(--accent)}
.ap-what{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:16px}
.ap-what div{padding:22px;border:1px solid var(--line);border-radius:20px;background:var(--paper)}
.ap-what b{display:block;margin-bottom:8px;font:600 21px/1.2 var(--serif)}.ap-what p{margin:0;font:400 16px/1.55 var(--sans);color:var(--ink-2)}
.ap-shots{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:thin}
.ap-shots span{flex:0 0 clamp(200px,22vw,260px);scroll-snap-align:start;border-radius:22px;overflow:hidden;border:1px solid var(--line)}
.ap-shots img{display:block;width:100%;height:auto}
.ap-faq{max-width:820px}
.ap-faq details{border-top:1px solid var(--line);padding:18px 0}
.ap-faq summary{cursor:pointer;font:600 20px/1.3 var(--serif)}
.ap-faq p{margin:12px 0 0;font:400 16.5px/1.6 var(--sans);color:var(--ink-2)}
@media print{
  .site-head,.site-foot,.pr-screen,.skip,.tq-close{display:none!important}
  body{background:#fff!important;color:#000!important}
  .pr-sheet{margin:0;max-width:none;padding:0;border-radius:0;background:#fff}
  .pr-grid{grid-template-columns:repeat(4,1fr)}
  @page{size:A4;margin:12mm}
  .rv{opacity:1!important;transform:none!important}
}

/* Site search (2026-11-02). */
.srch-open{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line-2);border-radius:50%;background:none;color:var(--ink);cursor:pointer}
.srch-open:hover{border-color:var(--ink-2)}
.srch-open:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
dialog.srch{width:min(640px,calc(100% - 24px));max-height:min(80vh,640px);margin:min(12vh,96px) auto auto;padding:0;border:1px solid var(--line-2);border-radius:20px;background:#151511;color:var(--ink);box-shadow:0 30px 80px rgba(0,0,0,.6);overflow:hidden}
dialog.srch::backdrop{background:rgba(6,6,4,.7);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.srch-box{display:flex;gap:8px;padding:14px;border-bottom:1px solid var(--line)}
.srch-box input{flex:1;min-width:0;padding:12px 14px;border:0;border-radius:12px;background:rgba(242,239,230,.07);color:var(--ink);font:400 17px/1.2 var(--sans);outline:none}
.srch-box input:focus-visible{box-shadow:0 0 0 2px var(--accent)}
.srch-x{padding:0 14px;border:0;border-radius:12px;background:none;color:var(--ink-2);font:500 15px/1 var(--sans);cursor:pointer}
.srch-res{list-style:none;margin:0;padding:6px;max-height:calc(min(80vh,640px) - 80px);overflow-y:auto}
.srch-res a{display:flex;align-items:center;gap:12px;padding:8px;border-radius:12px;color:var(--ink);text-decoration:none}
.srch-res a:hover,.srch-res a:focus-visible{background:rgba(242,239,230,.07);outline:none}
.srch-res img,.srch-res i{flex:none;width:48px;height:48px;border-radius:10px;object-fit:cover;background:rgba(242,239,230,.07)}
.srch-res span{display:grid;gap:2px;min-width:0}
.srch-res small{font:600 10.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.srch-res b{font:600 16.5px/1.25 var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srch-none{margin:0;padding:18px;color:var(--ink-2);font:400 15px/1.5 var(--sans)}
.cl-hero{padding-bottom:8px!important}
.cl-hero+.tq-sec{padding-top:24px}
@media (max-width:600px){.cl-row{grid-template-columns:96px repeat(12,minmax(0,1fr));gap:2px;min-width:0}.cl-row>a{font-size:12.5px}.cl-c{height:16px;border-radius:3px}}
.pr-acts{display:flex;flex-wrap:wrap;gap:10px}
a.pr-print{display:inline-block;text-decoration:none}
.pr-print.alt{background:none;color:var(--ink);border:1px solid var(--line-2)}
.pr-sheet .credits,.pr-sheet .credits a{color:#555!important;font-size:9.5px}
@media print{html,body{background:#fff!important}.pr-sheet{color:#1b1b16}*{-webkit-print-color-adjust:exact;print-color-adjust:exact}}

/* /in-season/ hub: the twelve months (2026-11-02). */
.on-year{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:14px}
.on-month{position:relative;display:grid;gap:6px;align-content:start;padding:0 0 16px;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--paper);color:var(--ink);text-decoration:none}
.on-month:hover{border-color:var(--line-2)}
.on-month-pic{display:block;aspect-ratio:16/10;overflow:hidden}
.on-month-pic img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.on-month:hover img{transform:scale(1.04)}
.on-month b{padding:8px 16px 0;font:600 24px/1.1 var(--serif)}
.on-month small{padding:0 16px;font:400 14.5px/1.45 var(--sans);color:var(--ink-2)}
.on-month .now{display:none;position:absolute;top:12px;left:12px;padding:6px 10px;border-radius:999px;background:var(--accent);color:var(--cream);font:700 11px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;font-style:normal}
.on-month.is-now{border-color:var(--accent)}.on-month.is-now .now{display:block}
@media (min-width:900px){.on-month.is-now{grid-column:span 2}.on-month.is-now .on-month-pic{aspect-ratio:16/8}}
.gd-tile>span{position:relative}
.gd-tag{position:absolute;z-index:1;top:10px;left:10px;padding:5px 9px;border-radius:999px;background:rgba(10,10,8,.72);color:var(--ink);font:600 11.5px/1 var(--sans);font-style:normal}
.tq-confused{display:inline-block;margin-top:6px;color:var(--ink-2);font:400 15.5px/1.4 var(--sans);text-decoration:none;border-bottom:1px solid var(--line-2);padding-bottom:3px}
.tq-confused b{color:var(--accent);font-weight:600}
.tq-confused:hover{color:var(--ink)}
.lq-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:18px}
.lq-table{width:100%;border-collapse:collapse;font:400 15.5px/1.45 var(--sans)}
.lq-table th,.lq-table td{padding:14px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.lq-table tbody tr:last-child>*{border-bottom:0}
.lq-table thead th{font:600 18px/1.2 var(--serif);color:var(--ink);background:rgba(242,239,230,.04)}
.lq-table tbody th{font:600 12px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);width:22%}
.lq-table td{color:var(--ink-2)}
@media (max-width:600px){.lq-table th,.lq-table td{padding:11px 12px;font-size:14px}.lq-table thead th{font-size:16px}}
.bp-further{margin-top:8px;margin-bottom:8px}
.on-also{margin:14px 0 0;font:500 15px/1.5 var(--sans);color:var(--ink-2)}.on-also a{color:var(--ink)}
.cl-note{max-width:640px;margin:10px 0 0;font:400 14.5px/1.5 var(--sans);color:var(--ink-3)}
.cl-m1{display:none}
@media (max-width:600px){.cl-m3{display:none}.cl-m1{display:inline}}
.cl-h2{margin-top:56px}
.cl-list{columns:2 320px;column-gap:40px;margin:0;padding:0;list-style:none;font:400 15px/1.5 var(--sans);color:var(--ink-2)}
.cl-list li{break-inside:avoid;padding:6px 0;border-bottom:1px solid var(--line)}
.cl-list a{color:var(--ink);font-weight:600;text-decoration:none}.cl-list a:hover{color:var(--accent)}