/* Cork site, "Pinned" (site refresh 2026-09-27, cork.css v1).
   The page is a corkboard in a walnut frame. Everything that carries words is PAPER pinned to it: the index
   card in the hero, the sticky notes, the photo prints, the plan sheets. The cork itself (assets/cork.webp,
   a seamless tile made from a ComfyUI texture, master in design/refresh-2026-09-27/ in the site repo) never has text
   on it. The pins are small rounded tiles in the logo's colours. Section kickers are label-maker tape.
   The dark page between the boards is Cork's own free skin, Corkboard (skins/Skins.kt), with its speckle.

   Rules this file keeps:
   - Text sits on paper or on the dark page, never on the cork texture or a photo.
   - Nothing loops. The only automatic motion is the hero settling in (under 2 s) and reveal-on-scroll, so
     there is no Pause chip; html.rm (prefers-reduced-motion) gets the still, final state, and so does a
     page without JS (html:not(.js)) or with a failed script (html.failsafe after 3.5 s).
   - The promo cards stay ALIGNED (owner 2026-09-27): no rotation, no offset, same top and bottom edges.
   - Colours are tokens; the contrast proof is tools/contrast-manifest.json (site repo) through the site-kit
     contrast.py, including the mini board in all seven skins. Change a colour, run it.
   - assets/style.css is the old family sheet, left byte-identical and no longer referenced. */

@font-face{font-family:"Rubik";font-style:normal;font-weight:500 800;font-display:swap;src:url(fonts/cork-display.woff2) format("woff2")}
@font-face{font-family:"Caveat";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/cork-hand.woff2) format("woff2")}

:root{
  /* the page: Corkboard, from skins/Skins.kt (backdrop #19100A, a touch deeper for the page field) */
  --bg:#140D08;
  --bg2:#1A110B;          /* alternate band */
  --panel:#241812;        /* Skins.corkboard surface */
  --card:#2E2016;         /* Skins.corkboard card */
  --line:#453324;         /* Skins.corkboard line */
  --line2:#6A4E36;        /* control outline */
  --ink:#F7EDE0;          /* headings on the dark page */
  --text:#F2E7D6;         /* Skins.corkboard text */
  --text2:#DCCAB4;        /* secondary body */
  --dim:#B9A58E;          /* small print (Skins.corkboard textDim, lifted a hair) */
  --accent:#E0764A;       /* Skins.corkboard accent */
  --link:#F5A67E;         /* links, focus rings on the dark page */
  --onaccent:#1E0F07;     /* Skins.corkboard onAccent */

  /* paper */
  --paper:#F7F0E3;        /* the index card, plan sheets */
  --print:#FBF8F1;        /* photo-print border */
  --pink:#2A1D13;         /* ink on paper */
  --pink2:#5A4535;        /* secondary ink on paper */
  --pred:#A8361F;         /* red ink on paper (headline accent, focus ring on paper) */
  --prule:#D98C7C;        /* the index card's red rule (decoration) */
  --hilite:rgba(201,162,39,.38); /* marker highlight behind the headline accent */
  --sn-butter:#F4DE8A;--sn-sky:#C9DFEA;--sn-peach:#F6CBA8;--sn-mint:#D2E5C0;--sn-lilac:#DDCDEB;--sn-rose:#F2C4BE;

  /* wood and cork */
  --wood:#6E4A2C;--wood2:#4A301B;--wood3:#8C6243;
  --corkbase:#A9774A;     /* under the tile while it loads; the tile's mean is close to this */
  --focus-dark:#1E0F07;--focus-light:#FFF3E2;

  /* the free Corkboard palette (engine/Palettes.kt) = tile colours and pins, with the ink that passes on each */
  --poppy:#C93B2E;--marigold:#D98E32;--mustard:#C9A227;--fern:#5F8C4A;--lake:#3E7C99;--plum:#7C5296;--walnut:#7A5233;--chalk:#9AA1A8;
  --onlight:#1E0F07;--ondark:#FFFFFF;
  /* label-maker tapes (web-only, darker than the tiles so white passes) */
  --tape:#AE3527;--tape-plum:#6B4282;--tape-fern:#38622C;--tape-lake:#2A5D77;--tapetext:#FFF8EE;

  /* the seven skins, verbatim from skins/Skins.kt: bg backdrop, sf surface, cd card, ln line, tx text,
     ac accent, oa onAccent. One web-only change: Paper's accent is darkened for its chips (#C65A38 with
     #FFF6E9 is 4.0:1, under AA for 13 px text), noted as --paper-acweb. */
  --corkboard-bg:#19100A;--corkboard-sf:#241812;--corkboard-cd:#2E2016;--corkboard-ln:#453324;--corkboard-tx:#F2E7D6;--corkboard-ac:#E0764A;--corkboard-oa:#1E0F07;
  --chalkboard-bg:#10201A;--chalkboard-sf:#182B23;--chalkboard-cd:#20362C;--chalkboard-ln:#32493E;--chalkboard-tx:#EFF5EC;--chalkboard-ac:#E8D48B;--chalkboard-oa:#1A2018;
  --blueprint-bg:#0E1B33;--blueprint-sf:#16264A;--blueprint-cd:#1D2F5A;--blueprint-ln:#2E4370;--blueprint-tx:#E8EEF9;--blueprint-ac:#6FB2E6;--blueprint-oa:#0A1526;
  --paper-bg:#F4EDE0;--paper-sf:#EAE0CE;--paper-cd:#E2D6C0;--paper-ln:#C9B99E;--paper-tx:#35281A;--paper-ac:#C65A38;--paper-acweb:#A94A2C;--paper-oa:#FFF6E9;
  --midnight-bg:#0B0D12;--midnight-sf:#14171E;--midnight-cd:#1B1F28;--midnight-ln:#2A2F3A;--midnight-tx:#E9ECF2;--midnight-ac:#7B9EFF;--midnight-oa:#0A0C10;
  --ocean-bg:#07222B;--ocean-sf:#0D3038;--ocean-cd:#123C45;--ocean-ln:#25545E;--ocean-tx:#E6F2F1;--ocean-ac:#5FD0C7;--ocean-oa:#06211F;
  --charcoal-bg:#121212;--charcoal-sf:#1C1C1C;--charcoal-cd:#262626;--charcoal-ln:#383838;--charcoal-tx:#F0EDE8;--charcoal-ac:#E8C25B;--charcoal-oa:#181203;

  --tagpro:#F3CF95;--tagpro-bg:#3A2616;
  --tagfree:#B5E0BB;--tagfree-bg:#1C2A1D;
  --ptag:#7A2A17;--ptag-bg:#F5DCCD;      /* tags on paper */
  --ptagfree:#23511F;--ptagfree-bg:#DCEBCF;

  --navh:56px;
  --pad:clamp(16px,4.2vw,40px);
  --display:"Rubik",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --hand:"Caveat","Segoe Print","Bradley Hand",cursive;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --settle:cubic-bezier(.25,1.2,.4,1);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
html.rm{scroll-behavior:auto}
[id]{scroll-margin-top:calc(var(--navh) + 12px)}
body{background:var(--bg);color:var(--text);font:16px/1.62 var(--sans);overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:#FFC7A6}
strong{color:var(--ink);font-weight:650}
button{font:inherit;color:inherit}
ul,ol{list-style:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--pad)}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
html:not(.js) .needs-js{display:none}

/* focus: a light ring with a dark halo on the dark page; red ink with a paper halo on paper */
:focus:not(:focus-visible){outline:none}
:focus-visible{outline:2px solid var(--link);outline-offset:3px;border-radius:6px;box-shadow:0 0 0 5px rgba(20,13,8,.92)}
.idcard :focus-visible,.plan :focus-visible{outline-color:var(--pred);box-shadow:0 0 0 5px var(--paper)}
.skip{position:absolute;left:-999px;top:8px;z-index:90;background:var(--ink);color:var(--bg);padding:.7em 1.1em;border-radius:10px;font-weight:650;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.skip:focus{left:8px}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--navh);background:rgba(20,13,8,.86);-webkit-backdrop-filter:blur(12px) saturate(1.1);backdrop-filter:blur(12px) saturate(1.1);border-bottom:1px solid rgba(106,78,54,0);transition:background .3s,border-color .3s}
.nav.scrolled,html:not(.js) .nav{background:rgba(20,13,8,.95);border-bottom-color:rgba(106,78,54,.9)}
.navin{max-width:1240px;margin:0 auto;height:100%;padding:0 12px;display:flex;align-items:center;gap:8px}
.brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);min-height:44px;padding-right:4px}
.logo-b{width:30px;height:30px;flex:none}
.wordmark{font-family:var(--display);font-weight:700;font-size:.9rem;letter-spacing:.34em;color:var(--ink)}
.navlinks{display:none}
.getbtn{margin-left:auto;display:inline-flex;align-items:center;min-height:38px;padding:0 15px;border-radius:12px;background:var(--accent);color:var(--onaccent);font-weight:700;font-size:.88rem;text-decoration:none;white-space:nowrap;box-shadow:inset 0 -2px 0 rgba(0,0,0,.18)}
.getbtn:hover{background:#EE8A5F;color:var(--onaccent)}
.navmenu{position:relative}
.navmenu summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 12px;border-radius:12px;border:1px solid var(--line2);color:var(--text);font-size:.86rem;background:rgba(36,24,18,.7)}
.navmenu summary::-webkit-details-marker{display:none}
.navmenu summary::after{content:"";width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.navmenu[open] summary::after{transform:translateY(1px) rotate(-135deg)}
.navmenu nav{position:absolute;right:0;top:calc(100% + 10px);min-width:210px;background:var(--panel);border:1px solid var(--line2);border-radius:16px;padding:6px;box-shadow:0 18px 40px rgba(0,0,0,.6)}
.navmenu nav a{display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:10px;color:var(--text);text-decoration:none}
.navmenu nav a:hover{background:var(--card);color:var(--ink)}
@media (min-width:370px){.navin{padding:0 16px;gap:10px}.getbtn{padding:0 17px;font-size:.9rem}}
@media (max-width:339.98px){.wordmark{display:none}}
@media (min-width:880px){
  .navlinks{display:flex;gap:2px;margin-left:auto}
  .navlinks a{display:inline-flex;align-items:center;min-height:40px;padding:0 11px;border-radius:10px;color:var(--text2);text-decoration:none;font-size:.93rem}
  .navlinks a:hover{color:var(--ink);background:rgba(255,255,255,.05)}
  .getbtn{margin-left:8px}
  .navmenu{display:none}
}
.logo-b .pinhead{transform-box:fill-box;transform-origin:50% 50%}
@media (prefers-reduced-motion:no-preference){.brand:hover .logo-b .pinhead{animation:logo-pin .6s var(--settle) 1}}
@keyframes logo-pin{0%{transform:translateY(-5px) scale(1.4)}60%{transform:translateY(1px) scale(.9)}100%{transform:none}}

/* ---------- the board: walnut frame, cork inside ---------- */
.board{position:relative;border-radius:18px;padding:7px;
  background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,0) 30%,rgba(0,0,0,.18) 70%),
    repeating-linear-gradient(90deg,rgba(0,0,0,.07) 0 2px,transparent 2px 7px,rgba(255,255,255,.035) 7px 8px,transparent 8px 13px),
    linear-gradient(180deg,var(--wood3),var(--wood) 30%,var(--wood2));
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 30px 60px -20px rgba(0,0,0,.8),0 0 0 1px rgba(0,0,0,.6)}
.cork{position:relative;border-radius:11px;background:url(cork.webp) 0 0/360px 360px,var(--corkbase);
  box-shadow:inset 0 3px 7px rgba(30,14,4,.55),inset 0 0 0 1px rgba(40,20,6,.5),inset 0 0 60px rgba(40,18,4,.35)}
.cork::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(90% 70% at 22% 12%,rgba(255,236,200,.16),transparent 60%),radial-gradient(120% 90% at 80% 110%,rgba(40,16,2,.28),transparent 60%)}

/* ---------- pins: little rounded tiles in the logo's colours ---------- */
.pin{position:absolute;top:-9px;left:50%;z-index:6;width:20px;height:20px;margin-left:-10px;border-radius:6px;pointer-events:none;
  background:linear-gradient(145deg,rgba(255,255,255,.5),rgba(255,255,255,0) 48%),var(--pc,var(--poppy));
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.26),0 1px 1px rgba(0,0,0,.35),3px 5px 6px rgba(20,8,0,.42)}
.pin::after{content:"";position:absolute;left:5px;top:4px;width:6px;height:3px;border-radius:2px;background:rgba(255,255,255,.65)}
.pin-poppy{--pc:var(--accent)}.pin-mustard{--pc:var(--mustard)}.pin-fern{--pc:var(--fern)}.pin-lake{--pc:var(--lake)}

/* ---------- hero ---------- */
.hero{position:relative;padding:calc(var(--navh) + 10px) 8px 34px;
  background:radial-gradient(70% 40% at 50% 0%,rgba(224,118,74,.12),transparent 70%),var(--bg)}
.hero .cork{padding:18px 10px 12px}
.idcard{position:relative;z-index:3;background:var(--paper);color:var(--pink);border-radius:5px;padding:20px 16px 16px;
  box-shadow:0 1px 1px rgba(0,0,0,.28),0 16px 26px -12px rgba(30,12,2,.7),inset 0 0 0 1px rgba(90,69,53,.08)}
.eyebrow{font-family:var(--display);font-size:.74rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--pink2);padding-bottom:9px;border-bottom:2px solid var(--prule)}
.hero h1{font-family:var(--display);font-weight:800;font-size:clamp(2rem,9.2vw,2.7rem);line-height:1.04;letter-spacing:-.02em;color:var(--pink);margin-top:12px;max-width:14ch}
.hl{color:var(--pred);background:linear-gradient(transparent 60%,var(--hilite) 60% 94%,transparent 94%) no-repeat 0 0/100% 100%;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .06em}
.lede{margin-top:10px;color:var(--pink2);font-size:1.02rem;line-height:1.5;max-width:30rem}
.pillars{display:flex;flex-wrap:wrap;gap:6px;margin-top:13px}
.pillars li{border:1px solid rgba(42,29,19,.3);background:rgba(42,29,19,.05);color:var(--pink);font-size:.8rem;font-weight:600;padding:3px 11px;border-radius:999px;white-space:nowrap}
.store-row{display:flex;align-items:center;flex-wrap:wrap;gap:2px 4px;margin-top:12px}
.store-row a{display:inline-flex;border-radius:10px}
.play-badge{height:60px;width:auto;margin-left:-6px}
.tf-badge{height:40.3px;width:auto;margin:0 0 0 2px}
@media (max-width:359.98px){.play-badge{height:54px}.tf-badge{height:36.3px}.hero h1{font-size:1.9rem}}

.pinned{position:relative;margin-top:26px;aspect-ratio:1/.96;container-type:inline-size}
.print{position:absolute;width:44cqi;padding:5px 5px 0;background:var(--print);border-radius:2px;--py:0px;
  transform:translateY(var(--py)) rotate(var(--r));
  box-shadow:0 1px 1px rgba(0,0,0,.25),2px 12px 20px -8px rgba(40,18,4,.7);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.print img{width:100%;height:auto;border-radius:1px;background:var(--panel)}
.print figcaption{font-family:var(--hand);font-weight:600;font-size:1.15rem;line-height:1;color:var(--pink);text-align:center;padding:5px 2px 7px;overflow-wrap:anywhere}
.p1{left:0;top:5%;--r:-5deg;z-index:2}
.p2{left:28%;top:0;--r:2.5deg;z-index:3}
.p3{left:56%;top:7%;--r:6deg;z-index:2}
.p1 figcaption{text-align:left;padding-left:6px}.p3 figcaption{text-align:right;padding-right:6px}
.sticky{display:none}
@media (min-width:600px){
  .hero{padding:calc(var(--navh) + 16px) var(--pad) 40px}
  .board{padding:11px;border-radius:22px}
  .hero .cork{padding:30px 28px 24px}
  .idcard{padding:26px 26px 22px;max-width:560px}
  .pinned{aspect-ratio:1/.62;margin-top:34px}
  .print{width:26cqi;padding:7px 7px 0}
  .print figcaption{font-size:1.3rem;padding:7px 2px 9px}
  .p1{left:12%}.p2{left:37%}.p3{left:62%}
  .sticky{display:block;position:absolute;left:0;bottom:4%;z-index:4;width:24cqi;min-width:130px;padding:22px 14px 16px;background:var(--sn-butter);color:var(--pink);
    font-family:var(--hand);font-weight:600;font-size:1.5rem;line-height:1.05;--r:-6deg;--py:0px;transform:translateY(var(--py)) rotate(var(--r));
    box-shadow:0 1px 1px rgba(0,0,0,.2),3px 12px 18px -8px rgba(40,18,4,.7);border-radius:2px 2px 14px 2px}
}
@media (min-width:960px){
  .hero{padding:calc(var(--navh) + 18px) var(--pad) 44px}
  .board{max-width:1320px;margin:0 auto;padding:14px;border-radius:26px}
  .hero .cork{display:grid;grid-template-columns:minmax(360px,.9fr) 1.1fr;align-items:center;gap:40px;padding:40px 44px;
    min-height:clamp(560px,calc(100svh - var(--navh) - 90px),800px)}
  .idcard{padding:32px 32px 28px;max-width:540px}
  .hero h1{font-size:clamp(2.7rem,4.1vw,3.9rem);max-width:12ch;margin-top:16px}
  .lede{font-size:1.12rem;margin-top:14px}
  .pillars{margin-top:18px}
  .play-badge{height:74px}.tf-badge{height:49.7px}
  .store-row{margin-top:16px}
  .pinned{margin-top:0;height:100%;min-height:500px;aspect-ratio:auto}
  .print{width:39cqi;padding:9px 9px 0}
  .p1{left:0;top:6%}.p2{left:30%;top:12%;--r:2deg}.p3{left:61%;top:3%;--r:6.5deg}
  .sticky{left:auto;right:0;bottom:1%;width:23cqi;font-size:1.7rem;--r:-7deg}
  .print figcaption{font-size:1.4rem}
}
@media (min-width:960px) and (max-height:760px){.pinned{min-height:440px}.print{width:32cqi}}
@media (hover:hover) and (pointer:fine){
  html:not(.rm) .print:hover{transform:translateY(calc(var(--py) - 10px)) rotate(calc(var(--r) * .3)) scale(1.035);z-index:5;
    box-shadow:0 2px 2px rgba(0,0,0,.2),6px 30px 40px -12px rgba(40,18,4,.75)}
  html:not(.rm) .print:hover .pin{transform:translateY(1px)}
}

/* the settle: prints fall onto the board, then their pins push in (html.enh only; the still state is final) */
@keyframes land{
  0%{opacity:0;transform:translate(14px,-70px) rotate(calc(var(--r) + 10deg)) scale(1.08);box-shadow:0 1px 1px rgba(0,0,0,.1),14px 50px 50px -10px rgba(40,18,4,.35)}
  55%{opacity:1;transform:translate(0,6px) rotate(calc(var(--r) - 1.6deg)) scale(1)}
  78%{transform:translate(0,-2px) rotate(calc(var(--r) + .5deg))}
  100%{transform:translateY(var(--py)) rotate(var(--r))}
}
@keyframes pin-in{0%{opacity:0;transform:translate(-8px,-30px) scale(1.8)}65%{opacity:1;transform:translate(0,1px) scale(.9)}100%{transform:none}}
@keyframes marker{from{background-size:0% 100%}to{background-size:100% 100%}}
html.enh:not(.failsafe) .hero:not(.go) .drop,html.enh:not(.failsafe) .hero:not(.go) .drop .pin,html.enh:not(.failsafe) .hero:not(.go) .drop-pin{opacity:0}
html.enh .hero.go .drop{animation:land .95s var(--ease) var(--d,0s) backwards}
html.enh .hero.go .drop .pin{animation:pin-in .5s var(--settle) calc(var(--d,0s) + .55s) backwards}
html.enh .hero.go .drop-pin{animation:pin-in .5s var(--settle) .1s backwards}
html.enh .hero.go .hl{animation:marker .7s var(--ease) .5s backwards}
.p1{--d:.12s}.p2{--d:.3s}.p3{--d:.48s}.sticky{--d:.72s}

/* ---------- sections ---------- */
main > section{padding:clamp(56px,8vw,100px) 0}
main > section.hero{padding-bottom:34px}
.kicker{display:flex}
.tape{display:inline-block;font-family:var(--display);font-size:.74rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;line-height:1.2;
  color:var(--tapetext);background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 45%,rgba(0,0,0,.14)),var(--tb,var(--tape));
  padding:.42em .85em .4em;border-radius:3px;transform:rotate(-1.4deg);box-shadow:0 2px 3px rgba(0,0,0,.45);text-shadow:0 -1px 0 rgba(0,0,0,.4)}
.tape-plum{--tb:var(--tape-plum)}.tape-fern{--tb:var(--tape-fern)}.tape-lake{--tb:var(--tape-lake)}
h2{font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,5.8vw,3.1rem);line-height:1.06;letter-spacing:-.02em;color:var(--ink);margin-top:14px;max-width:20ch}
h3{color:var(--ink)}
.intro{margin-top:12px;max-width:38rem;color:var(--text2);font-size:1.06rem;line-height:1.6}
.caption{margin-top:16px;color:var(--dim);font-size:.86rem}

/* a strip of cork between wood trims (the cards and the gallery live on it) */
.corkband{position:relative;margin-top:30px;background:url(cork.webp) 0 0/360px 360px,var(--corkbase);
  border-block:9px solid var(--wood2);box-shadow:inset 0 4px 8px rgba(30,14,4,.5),inset 0 -4px 8px rgba(30,14,4,.4),0 1px 0 var(--wood3),0 -1px 0 var(--wood3)}
.corkband::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(70% 90% at 30% 0%,rgba(255,236,200,.14),transparent 60%)}

/* the promo cards: pinned prints, ALIGNED (no rotation, no offset) */
.cardstrip{position:relative;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--pad);padding:34px var(--pad) 30px;scrollbar-width:thin;scrollbar-color:var(--wood2) transparent}
.cardrow{display:flex;gap:18px;width:max-content}
.card{position:relative;flex:0 0 auto;width:min(80vw,380px);scroll-snap-align:start;padding:6px;background:var(--print);border-radius:4px;
  box-shadow:0 1px 1px rgba(0,0,0,.25),0 16px 26px -10px rgba(40,18,4,.75)}
.card img{width:100%;height:auto;border-radius:2px;background:var(--panel)}
.card .pin{top:-10px}
@media (min-width:960px){
  .cardstrip{overflow:visible;padding:44px var(--pad) 40px}
  .cardrow{width:auto;display:grid;grid-template-columns:repeat(3,minmax(0,340px));justify-content:center;gap:clamp(24px,3vw,44px)}
  .card{width:auto}
}
.cardstrip:focus-visible,.galstrip:focus-visible{outline:3px solid var(--focus-dark);outline-offset:-9px;border-radius:0;box-shadow:inset 0 0 0 6px var(--focus-light)}

/* how it works */
.how{background:var(--bg2)}
.how-in{display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
.steps{margin-top:26px;display:grid;gap:18px;counter-reset:none}
.step{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
.num{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;font-family:var(--display);font-weight:800;font-size:1.25rem;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.2),0 6px 14px rgba(0,0,0,.35)}
.n1{background:var(--poppy);color:var(--ondark)}.n2{background:var(--mustard);color:var(--onlight)}.n3{background:var(--lake);color:var(--ondark)}
.step h3{font-family:var(--display);font-weight:700;font-size:1.3rem;line-height:1.2}
.step p{margin-top:4px;color:var(--text2);max-width:32rem}
.try{display:flex;flex-direction:column;align-items:center;min-width:0}

/* the mini board: a sketch in the app's own colours (skins/Skins.kt, engine/Palettes.kt) */
.mini{--s-bg:var(--corkboard-bg);--s-sf:var(--corkboard-sf);--s-cd:var(--corkboard-cd);--s-ln:var(--corkboard-ln);--s-tx:var(--corkboard-tx);--s-ac:var(--corkboard-ac);--s-oa:var(--corkboard-oa);
  --s-pat:radial-gradient(circle at 30% 40%,color-mix(in srgb,var(--s-tx) 9%,transparent) 0 1px,transparent 1.6px) 0 0/19px 17px,radial-gradient(circle at 70% 70%,color-mix(in srgb,var(--s-tx) 6%,transparent) 0 1px,transparent 1.5px) 0 0/23px 29px;
  position:relative;width:min(100%,388px);border-radius:34px;border:9px solid #0B0705;padding:14px 12px 16px;color:var(--s-tx);
  background:var(--s-pat),var(--s-bg);box-shadow:0 0 0 1px rgba(242,231,214,.08),0 40px 70px -20px rgba(0,0,0,.8);transition:background-color .5s,color .5s;overflow:hidden}
.mini-top{display:flex;align-items:center;justify-content:space-between;min-height:40px}
.boardchip{display:inline-flex;align-items:center;gap:8px;background:var(--s-cd);color:var(--s-tx);border-radius:12px;padding:6px 12px 6px 7px;font-weight:650;font-size:.95rem}
.bt{width:22px;height:22px;border-radius:6px;background:var(--poppy)}
.gear{width:22px;height:22px;fill:none;stroke:var(--s-tx);stroke-width:1.7;stroke-linecap:round;margin-right:4px}
.chips{display:flex;flex-wrap:nowrap;gap:6px;margin:6px -6px;padding:6px;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
.chips::-webkit-scrollbar{display:none}
html:not(.js) .chips{flex-wrap:wrap;overflow:visible}
.chip{flex:none;min-height:32px;padding:0 13px;border-radius:999px;border:1px solid var(--s-ln);background:var(--s-sf);color:var(--s-tx);font-size:.82rem;font-weight:650;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.chip[aria-pressed="true"]{background:var(--s-ac);border-color:var(--s-ac);color:var(--s-oa)}
.chip:not([disabled]):hover{border-color:var(--s-ac)}
.chip[disabled],.tile[disabled]{cursor:default}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;min-height:250px;align-content:start}
.tiles li[hidden]{display:none}
.tile{position:relative;width:100%;aspect-ratio:1;border:0;border-radius:18px;background:var(--tc);color:var(--ti);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:8px 5px;font-size:.74rem;font-weight:650;line-height:1.15;text-align:center;cursor:pointer;overflow:hidden;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.18);transition:transform .12s}
.tile svg{width:30%;height:auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tile.hit{transform:scale(.93)}
.tile::before{content:"";position:absolute;left:50%;top:50%;width:140%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.4),transparent);opacity:0;transform:scale(.2)}
.tile.hit::before{animation:ripple .5s var(--ease)}
@keyframes ripple{from{opacity:1;transform:scale(.2)}to{opacity:0;transform:scale(1)}}
.tile.note::after{content:"";position:absolute;right:0;top:0;width:18px;height:18px;background:linear-gradient(225deg,var(--s-bg) 50%,rgba(0,0,0,.22) 50%);border-bottom-left-radius:6px}
.t-poppy{--tc:var(--poppy);--ti:var(--ondark)}.t-marigold{--tc:var(--marigold);--ti:var(--onlight)}.t-mustard{--tc:var(--mustard);--ti:var(--onlight)}
.t-fern{--tc:var(--fern);--ti:var(--onlight)}.t-lake{--tc:var(--lake);--ti:var(--ondark)}.t-plum{--tc:var(--plum);--ti:var(--ondark)}
.t-walnut{--tc:var(--walnut);--ti:var(--ondark)}.t-chalk{--tc:var(--chalk);--ti:var(--onlight)}
.tile.add{--tc:transparent;--ti:var(--s-tx);border:2px dashed color-mix(in srgb,var(--s-tx) 45%,transparent);box-shadow:none}
.tile.add svg{width:34%}
.tile.add[disabled]{opacity:1}
.toast{position:absolute;left:50%;bottom:22px;translate:-50% 0;z-index:3;white-space:nowrap;background:var(--s-cd);color:var(--s-tx);border:1px solid var(--s-ln);border-radius:999px;padding:8px 16px;font-size:.85rem;font-weight:600;
  box-shadow:0 10px 24px rgba(0,0,0,.4);opacity:0;transform:translateY(10px);transition:opacity .25s,transform .25s;pointer-events:none}
.toast.show{opacity:1;transform:none}
.mini :focus-visible{outline:2px solid var(--s-tx);outline-offset:2px;box-shadow:0 0 0 5px var(--s-bg)}

/* skins: one radio group; the colours follow it through :has() with no script, and cork.js sets data-skin too */
:root:has(#sk-chalkboard:checked) .mini,.mini[data-skin="chalkboard"]{--s-bg:var(--chalkboard-bg);--s-sf:var(--chalkboard-sf);--s-cd:var(--chalkboard-cd);--s-ln:var(--chalkboard-ln);--s-tx:var(--chalkboard-tx);--s-ac:var(--chalkboard-ac);--s-oa:var(--chalkboard-oa);--s-pat:none}
:root:has(#sk-blueprint:checked) .mini,.mini[data-skin="blueprint"]{--s-bg:var(--blueprint-bg);--s-sf:var(--blueprint-sf);--s-cd:var(--blueprint-cd);--s-ln:var(--blueprint-ln);--s-tx:var(--blueprint-tx);--s-ac:var(--blueprint-ac);--s-oa:var(--blueprint-oa);
  --s-pat:linear-gradient(color-mix(in srgb,var(--blueprint-ln) 70%,transparent) 1px,transparent 1px) 0 0/22px 22px,linear-gradient(90deg,color-mix(in srgb,var(--blueprint-ln) 70%,transparent) 1px,transparent 1px) 0 0/22px 22px}
:root:has(#sk-paper:checked) .mini,.mini[data-skin="paper"]{--s-bg:var(--paper-bg);--s-sf:var(--paper-sf);--s-cd:var(--paper-cd);--s-ln:var(--paper-ln);--s-tx:var(--paper-tx);--s-ac:var(--paper-acweb);--s-oa:var(--paper-oa);
  --s-pat:radial-gradient(circle,color-mix(in srgb,var(--paper-ln) 80%,transparent) 0 1.1px,transparent 1.7px) 0 0/16px 16px}
:root:has(#sk-midnight:checked) .mini,.mini[data-skin="midnight"]{--s-bg:var(--midnight-bg);--s-sf:var(--midnight-sf);--s-cd:var(--midnight-cd);--s-ln:var(--midnight-ln);--s-tx:var(--midnight-tx);--s-ac:var(--midnight-ac);--s-oa:var(--midnight-oa);
  --s-pat:repeating-linear-gradient(45deg,color-mix(in srgb,var(--midnight-ln) 60%,transparent) 0 1px,transparent 1px 13px)}
:root:has(#sk-ocean:checked) .mini,.mini[data-skin="ocean"]{--s-bg:var(--ocean-bg);--s-sf:var(--ocean-sf);--s-cd:var(--ocean-cd);--s-ln:var(--ocean-ln);--s-tx:var(--ocean-tx);--s-ac:var(--ocean-ac);--s-oa:var(--ocean-oa);
  --s-pat:radial-gradient(circle,color-mix(in srgb,var(--ocean-ln) 75%,transparent) 0 1.1px,transparent 1.7px) 0 0/16px 16px}
:root:has(#sk-charcoal:checked) .mini,.mini[data-skin="charcoal"]{--s-bg:var(--charcoal-bg);--s-sf:var(--charcoal-sf);--s-cd:var(--charcoal-cd);--s-ln:var(--charcoal-ln);--s-tx:var(--charcoal-tx);--s-ac:var(--charcoal-ac);--s-oa:var(--charcoal-oa);--s-pat:none}
.mini[data-skin="corkboard"]{--s-bg:var(--corkboard-bg);--s-sf:var(--corkboard-sf);--s-cd:var(--corkboard-cd);--s-ln:var(--corkboard-ln);--s-tx:var(--corkboard-tx);--s-ac:var(--corkboard-ac);--s-oa:var(--corkboard-oa)}

.skins{border:0;display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:22px}
.skins legend{float:left;width:100%;text-align:center;font-family:var(--display);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--link);font-weight:700;margin-bottom:8px}
.swrow{display:grid;grid-template-columns:repeat(7,minmax(34px,44px));justify-content:center;gap:3px;width:100%}
.sw{position:relative;display:grid;place-items:center;width:100%;height:44px;border-radius:12px;cursor:pointer}
.sw input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.sw i{display:block;width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--sb) 0 52%,var(--sa) 52% 100%);box-shadow:0 0 0 1.5px rgba(242,231,214,.55);transition:transform .2s var(--settle)}
.sw:has(input:checked) i{transform:scale(1.12) rotate(-4deg);box-shadow:0 0 0 2px var(--bg2),0 0 0 4px var(--ink)}
.sw:has(input:focus-visible){outline:2px solid var(--link);outline-offset:1px;box-shadow:0 0 0 5px rgba(20,13,8,.92)}
.swname{min-height:1.6em;font-size:.92rem;color:var(--text2);display:flex;align-items:center;gap:8px}
.k-corkboard{--sa:var(--corkboard-ac);--sb:var(--corkboard-bg)}.k-chalkboard{--sa:var(--chalkboard-ac);--sb:var(--chalkboard-bg)}
.k-blueprint{--sa:var(--blueprint-ac);--sb:var(--blueprint-bg)}.k-paper{--sa:var(--paper-ac);--sb:var(--paper-bg)}
.k-midnight{--sa:var(--midnight-ac);--sb:var(--midnight-bg)}.k-ocean{--sa:var(--ocean-ac);--sb:var(--ocean-bg)}.k-charcoal{--sa:var(--charcoal-ac);--sb:var(--charcoal-bg)}
.honest{margin-top:10px;max-width:26rem;text-align:center;color:var(--dim);font-size:.84rem;line-height:1.5}
.tag{display:inline-block;font-family:var(--sans);font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:2px 8px;border-radius:999px;background:var(--tagpro-bg);color:var(--tagpro);line-height:1.5;vertical-align:middle}
.tag.free{background:var(--tagfree-bg);color:var(--tagfree)}
@media (min-width:960px){
  .how-in{grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:clamp(40px,6vw,96px)}
  .mini{width:388px}
}

/* free: sticky notes pinned in a grid */
.free-sec{background:radial-gradient(circle at 30% 40%,rgba(242,231,214,.045) 0 1px,transparent 1.6px) 0 0/19px 17px,var(--bg)}
.notes{display:grid;grid-template-columns:1fr;gap:26px;margin-top:34px}
.sn{position:relative;padding:24px 20px 20px;border-radius:2px 2px 18px 2px;color:var(--pink);background:var(--snc);transform:rotate(var(--r,0deg));
  box-shadow:0 1px 1px rgba(0,0,0,.25),3px 14px 22px -10px rgba(0,0,0,.75);transition:transform .35s var(--ease)}
.sn h3{font-family:var(--display);font-weight:700;font-size:1.18rem;line-height:1.2;color:var(--pink)}
.sn p{margin-top:6px;color:var(--pink2);font-size:.98rem;line-height:1.5}
.sn-butter{--snc:var(--sn-butter)}.sn-sky{--snc:var(--sn-sky)}.sn-peach{--snc:var(--sn-peach)}.sn-mint{--snc:var(--sn-mint)}.sn-lilac{--snc:var(--sn-lilac)}.sn-rose{--snc:var(--sn-rose)}
.notes .sn:nth-child(6n+1){--r:-.8deg}.notes .sn:nth-child(6n+2){--r:.7deg}.notes .sn:nth-child(6n+3){--r:-.5deg}
.notes .sn:nth-child(6n+4){--r:.9deg}.notes .sn:nth-child(6n+5){--r:-.9deg}.notes .sn:nth-child(6n+6){--r:.5deg}
@media (min-width:640px){.notes{grid-template-columns:repeat(2,1fr);gap:30px 26px}}
@media (min-width:1000px){
  .notes{grid-template-columns:repeat(3,1fr);gap:40px 34px}
  .notes .sn:nth-child(6n+1){--r:-1.6deg}.notes .sn:nth-child(6n+2){--r:1.1deg}.notes .sn:nth-child(6n+3){--r:-.7deg}
  .notes .sn:nth-child(6n+4){--r:1.4deg}.notes .sn:nth-child(6n+5){--r:-1.2deg}.notes .sn:nth-child(6n+6){--r:.9deg}
}
@media (hover:hover) and (pointer:fine){html:not(.rm) .sn:hover{transform:rotate(0deg) translateY(-4px)}}

/* gallery: prints on a cork strip; a sideways strip on phones, two rows on wide screens */
.galstrip{position:relative;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--pad);padding:36px var(--pad) 34px;scrollbar-width:thin;scrollbar-color:var(--wood2) transparent}
.galrow{display:flex;gap:22px;width:max-content;padding:0 4px}
.gp{position:relative;flex:0 0 auto;width:min(58vw,230px);scroll-snap-align:start;padding:7px 7px 0;background:var(--print);border-radius:2px;transform:rotate(var(--r,0deg));
  box-shadow:0 1px 1px rgba(0,0,0,.25),2px 14px 22px -10px rgba(40,18,4,.75);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.gp img{width:100%;height:auto;border-radius:1px;background:var(--panel)}
.gp figcaption{font-family:var(--hand);font-weight:600;font-size:1.3rem;line-height:1.05;color:var(--pink);text-align:center;padding:8px 4px 10px}
.galrow .gp:nth-child(8n+1){--r:-2.4deg}.galrow .gp:nth-child(8n+2){--r:1.8deg}.galrow .gp:nth-child(8n+3){--r:-1.2deg}.galrow .gp:nth-child(8n+4){--r:2.5deg}
.galrow .gp:nth-child(8n+5){--r:-2deg}.galrow .gp:nth-child(8n+6){--r:1.4deg}.galrow .gp:nth-child(8n+7){--r:-1.6deg}.galrow .gp:nth-child(8n+8){--r:2.1deg}
@media (min-width:1000px){
  .galstrip{overflow:visible;padding:50px var(--pad) 46px}
  .galrow{width:auto;max-width:1120px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:48px 40px}
  .gp{width:auto}
}
@media (hover:hover) and (pointer:fine){html:not(.rm) .gp:hover{transform:rotate(calc(var(--r) * .3)) translateY(-8px) scale(1.03);z-index:2;box-shadow:0 2px 2px rgba(0,0,0,.2),6px 30px 40px -14px rgba(40,18,4,.8)}}

/* the film: a pinned print of the promo (re-cut v2, 2026-09-27) */
.promo{margin-top:28px;max-width:980px}
.promo video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#000;border:7px solid var(--print);border-radius:3px;box-shadow:0 18px 40px rgba(0,0,0,.55)}
.promo-note{margin-top:14px;font-size:.9rem;color:var(--text2);display:flex;flex-wrap:wrap;gap:6px 14px}

/* pro: two plan sheets */
.pro-sec{background:radial-gradient(60% 40% at 50% 0%,rgba(224,118,74,.09),transparent 70%),var(--bg2)}
.plans{display:grid;gap:34px;margin-top:38px}
.plan{position:relative;background:var(--paper);color:var(--pink);border-radius:4px;padding:30px 22px 24px;
  box-shadow:0 1px 1px rgba(0,0,0,.28),0 20px 34px -14px rgba(0,0,0,.8)}
.plan h3{font-family:var(--display);font-weight:800;font-size:1.5rem;line-height:1.1;color:var(--pink);display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.plan ul{margin-top:14px;display:grid;gap:0;
  background:repeating-linear-gradient(180deg,transparent 0 27px,rgba(62,124,153,.22) 27px 28px,transparent 28px 32px)}
.plan li{position:relative;padding-left:28px;color:var(--pink);line-height:32px}
.plan li::before{content:"";position:absolute;left:0;top:8px;width:16px;height:16px;border-radius:5px;background:var(--fern);box-shadow:inset 0 -2px 0 rgba(0,0,0,.2)}
.plan.pro li::before{background:var(--accent)}
.plan .tag{background:var(--ptag-bg);color:var(--ptag)}
.plan .tag.free{background:var(--ptagfree-bg);color:var(--ptagfree)}
.plan-note{margin-top:18px;padding-top:14px;border-top:2px solid var(--prule);color:var(--pink2);font-size:.95rem;line-height:1.55}
@media (min-width:860px){
  .plans{grid-template-columns:1fr 1fr;gap:44px;align-items:start}
  .plan{padding:36px 34px 30px;transform:rotate(-.8deg)}
  .plan.pro{transform:rotate(.9deg)}
}

/* get: a small board with one card on it */
.get-sec{padding-top:clamp(40px,6vw,80px)!important}
.board-get{max-width:760px;margin:0 auto}
.board-get .cork{padding:30px 10px 20px}
.getcard{max-width:560px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;padding:22px 12px 18px}
.getcard .play-badge{height:56px}.getcard .tf-badge{height:37.6px}
.getmark{width:56px;height:56px}
.getcard h2{color:var(--pink);margin-top:8px}
.getcard > p{margin-top:10px;color:var(--pink2);max-width:30rem}
.getcard .store-row{justify-content:center;margin-top:16px}
.getcard .fine{margin-top:14px;font-size:.88rem;line-height:1.5;color:var(--pink2)}
.getcard a:not(.playlink):not(.tflink){color:var(--pred)}
@media (min-width:600px){.board-get{padding:11px}.board-get .cork{padding:46px 30px 34px}.getcard{padding:30px 34px 26px}.getcard .play-badge{height:74px}.getcard .tf-badge{height:49.7px}}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);padding:34px 0 48px;color:var(--dim);font-size:.9rem}
.foot .family{color:var(--text2);max-width:46rem}
.hand{font-family:var(--hand);font-weight:600;font-size:1.45rem;line-height:1;color:var(--link)}
.footlinks{display:flex;flex-wrap:wrap;gap:4px 6px;margin-top:16px}
.footlinks a{display:inline-flex;align-items:center;min-height:40px;padding:0 10px;margin-left:-10px;margin-right:6px;color:var(--text2);text-decoration:none;border-radius:8px}
.footlinks a:hover{color:var(--ink);text-decoration:underline}
.foot .co{margin-top:12px}
.foot .co a,.foot .family a{color:var(--text2)}
.foot .family a:hover,.foot .co a:hover{color:var(--ink)}
.legal-note{margin-top:10px;font-size:.8rem;line-height:1.5;color:var(--dim);max-width:52rem}

/* ---------- reveal ---------- */
.rv{transition:opacity .8s ease,transform .9s var(--ease);transition-delay:var(--dl,0s)}
html.js.enh:not(.failsafe) .rv:not(.in){opacity:0;transform:translateY(22px)}
html.js.enh:not(.failsafe) .sn.rv:not(.in),html.js.enh:not(.failsafe) .gp.rv:not(.in){transform:translateY(-26px) rotate(calc(var(--r,0deg) + 4deg))}
html.js.enh:not(.failsafe) .kicker.rv:not(.in) .tape{transform:rotate(-1.4deg) scaleX(.2);transform-origin:0 50%}
.kicker .tape{transition:transform .6s var(--settle) .1s}
.cardrow .card:nth-child(2),.plans .plan:nth-child(2),.notes .sn:nth-child(3n+2),.galrow .gp:nth-child(4n+2){--dl:.1s}
.cardrow .card:nth-child(3),.notes .sn:nth-child(3n+3),.galrow .gp:nth-child(4n+3){--dl:.2s}
.galrow .gp:nth-child(4n+4){--dl:.3s}
.sn.rv,.gp.rv{transition:opacity .7s ease,transform .8s var(--settle)}
/* the cards reveal straight: they end aligned */
html.js.enh:not(.failsafe) .card.rv:not(.in){transform:translateY(-18px)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}