/* R13 CANDIDATE = copy of r12.css (R12 untouched) + the R13 section at the end.
   R12 header comment follows: R12 CANDIDATE = copy of r11.css (R11 untouched) + the R12 section at the end.
   R11 header comment follows: R11 CANDIDATE = copy of r10.css (R10 untouched) + the R11 section at the end.
   R10 header comment follows: R10 CANDIDATE = copy of r9.css (R9 untouched) + the R10 section at the end.
   R9 header comment follows: R9 CANDIDATE — refinement of R8 on top of the approved baseline (r2.css, unchanged). R8 (r8.css) is untouched.
   vs R8: · hero CTAs: R8's CTA overrides REMOVED, so the baseline controls from r2.css apply exactly as before R8
          · login: rounded capsule "[Patreon] LOGIN WITH PATREON [→]"
          · Current Drop world: OX blue (was coral) with rebalanced type / outlines / accents; layout derived from product count (r9.js)
          · Archive / Membership kept from R8 (seal fix, Merchant round badge removed, new line) · real footer */

/* ---------------- 1 · LOGIN: rounded capsule ---------------- */
.plog{--h:44px;margin-left:auto;position:relative;display:inline-flex;align-items:center;gap:10px;height:var(--h);padding:0 5px 0 14px;border-radius:999px;
 background:#FFFDF7;color:var(--ink);box-shadow:inset 0 0 0 1.6px var(--ink),0 2px 0 rgba(29,33,36,.9);text-decoration:none;pointer-events:auto;
 -webkit-tap-highlight-color:transparent;transition:transform .35s var(--spring),box-shadow .35s var(--spring)}
.plog .pl-mark{display:grid;place-items:center;mix-blend-mode:multiply}
.plog .pl-mark .patw{--pw:19px}
.plog b{font:800 .74rem/1 var(--display);letter-spacing:.08em;text-transform:uppercase;font-stretch:88%;white-space:nowrap;padding-right:2px}
.plog .pl-m{display:none}
.plog .pl-go{position:relative;display:block;flex:none;width:34px;height:34px;border-radius:50%;background:var(--ink);overflow:hidden;clip-path:circle(50%)}
.plog .pl-go i{position:absolute;inset:0;display:grid;place-items:center;color:var(--cream);font:800 .95rem/1 var(--display);font-style:normal;transition:transform .38s var(--out)}
.plog .pl-go i+i{transform:translateX(-110%)}
.plog:focus-visible{outline:2px dashed var(--ink);outline-offset:5px}
@media (hover:hover){
 .plog:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1.6px var(--ink),0 4px 0 rgba(29,33,36,.9)}
 .plog:hover .pl-go i:first-child{transform:translateX(110%)}
 .plog:hover .pl-go i+i{transform:translateX(0)}
}
.plog:focus-visible .pl-go i:first-child{transform:translateX(110%)}.plog:focus-visible .pl-go i+i{transform:translateX(0)}
/* press: pushed into the page — the 2px edge closes and the capsule squashes slightly */
.plog:active{transform:translateY(2px) scale(.975);box-shadow:inset 0 0 0 1.6px var(--ink),0 0 0 rgba(29,33,36,.9);transition-duration:.07s}

/* ---------------- 2 · NAV: OX Blue underline grows left → right ---------------- */
/* R10: perfectly straight rule, label width, grows left → right (200 ms), retracts on leave. The label never moves.
   Library R16 redesign: OX Blue (--blue2) 3px active/hover indicator; the current page is also set in a heavier weight. */
.links a::after{height:0;bottom:0;border-bottom:3px solid var(--blue2);border-radius:0;transform-origin:0 50%;transition:transform .2s cubic-bezier(.3,.7,.2,1)}
.links a:hover::after,.links a:focus-visible::after,.links a[aria-current]::after{transform:scaleX(1)}
.links a[aria-current]{font-weight:800}


/* ---------------- 4 · CURRENT DROP: same composition, softer prints, lighter offsets, a little more air ---------------- */
.obj-plate{border-radius:16px}
.obj-plate::before{border-radius:16px;transform:translate(5px,7px);background:rgba(29,33,36,.78)}
.obj-plate::after{border-radius:10px}
.obj-img{border-radius:10px}
.obj-label span{border-radius:10px}
.obj{transition:translate .45s var(--spring)}
@media (hover:hover){
 .obj-hit:hover .obj-plate{transform:translate(-3px,-8px) rotate(calc(var(--r)*-.6))}
 .obj-hit:hover .obj-plate::before{transform:translate(9px,13px)}
}
.obj-hit:focus-visible .obj-plate{transform:translate(-3px,-8px) rotate(calc(var(--r)*-.6))}


/* ---------------- 4b · CURRENT DROP WORLD = OX BLUE (was coral). Same hand-off: the world grows inside the ring,
   the floor rises in front of Chef, the ring opens. Type / outlines / route switch to charcoal; coral only as small accents ---------------- */
.portal .disc{background:var(--blue)}
.lip svg path{fill:var(--blue)}
.lip i{background:var(--blue)}
.drop{color:var(--ink);background:linear-gradient(to bottom,transparent calc(var(--O) - 3px),var(--blue) calc(var(--O) - 3px))}
.pin-off .drop{background:linear-gradient(to bottom,transparent min(18vw,240px),var(--blue) min(18vw,240px))}
.rm-edge .fill{fill:var(--blue)}
.rm-edge .band{stroke:var(--ink);stroke-width:1.4;stroke-dasharray:2 10;vector-effect:non-scaling-stroke;opacity:.55}
.drop-head h2{color:var(--ink)}
.drop-head h2 .o{-webkit-text-stroke-color:var(--ink)}
.drop-kick{color:var(--ink)}
.drop-kick span+span::before{background:var(--red);height:2px}
.drop-note{color:var(--red)}
.drop-note svg{stroke:var(--red)}
.shelf .path path{stroke:var(--ink);opacity:.5}
.obj-plate{box-shadow:0 0 0 1.5px var(--ink)}
.obj-tag b{color:var(--red)}
.obj-label span{box-shadow:0 0 0 1.5px var(--ink)}
.drop-error{color:var(--ink)}
/* the Drop ends with room to spare: the cream Archive curve overlaps the end of the Drop by up to 2× its height,
   so the last print always finishes clear of it (was: last print cut by the curve) */
.drop{padding-bottom:calc(clamp(60px,8vw,120px)*2 + clamp(50px,6vw,100px))}

/* ---------------- 4c · CURRENT DROP layout derived from the product count (r9.js writes --gc/--gr/--mt/--dar/--dr per print).
   Desktop only; phones keep the baseline flowing 5-step rhythm, which already repeats for any count. ---------------- */
@media (min-width:900px) and (not ((orientation:portrait) and (max-width:1100px))){
 #shelf .obj.lay{grid-column:var(--gc);grid-row:var(--gr);margin:var(--mt) 0 0;--ar:var(--dar);--r:var(--dr);z-index:var(--z,1)}
}
.fixture-badge{position:fixed;left:12px;bottom:12px;z-index:90;padding:8px 12px;border-radius:999px;background:var(--ink);color:var(--cream);font:700 .6rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;pointer-events:none}

/* ---------------- 5 · QUIET TRANSITION + DESIGN ARCHIVE (cream again) ---------------- */
.arch{position:relative;z-index:11;margin-top:calc(clamp(60px,8vw,120px)*-1);color:var(--ink);background:var(--cream)}
.arch-edge{position:absolute;left:0;right:0;top:calc(clamp(60px,8vw,120px)*-1 + 1px);width:100%;height:clamp(60px,8vw,120px);overflow:visible;pointer-events:none}
.arch-edge .fill{fill:var(--cream)}.arch-edge .line{fill:none;stroke:var(--ink);stroke-width:1.4;stroke-dasharray:2 10;vector-effect:non-scaling-stroke;opacity:.6}
.arch-in{max-width:1440px;margin:0 auto;padding:clamp(40px,6vw,90px) clamp(16px,5vw,80px) clamp(40px,6vw,80px)}
.arch-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px 30px;margin-bottom:clamp(30px,4vw,56px)}
.arch-kick{grid-column:1/-1;margin:0;font-size:.66rem;display:flex;gap:14px;color:var(--ink2)}
.arch-kick span+span::before{content:"";display:inline-block;width:18px;height:1.5px;background:currentColor;vertical-align:middle;margin-right:14px}
.arch-head h2{margin:0;font:900 clamp(46px,6vw,104px)/.84 var(--display);font-stretch:70%;text-transform:uppercase;letter-spacing:-.015em}
.arch-head h2 .o{color:transparent;-webkit-text-stroke:max(1.6px,.016em) var(--ink)}
.arch-sub{margin:0;font-size:.62rem;color:var(--ink2);text-align:right;align-self:end;padding-bottom:.6em}
.arch-body{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:clamp(24px,4vw,70px);align-items:start}
.arch-index{list-style:none;margin:0;padding:0;columns:2;column-gap:clamp(20px,3vw,48px)}
.arch-index li{break-inside:avoid}
.ai{display:grid;grid-template-columns:30px 42px minmax(0,1fr);align-items:center;gap:12px;width:100%;padding:7px 0;border:0;background:none;color:inherit;text-align:left;cursor:pointer;position:relative}
.ai .no{font:700 .6rem var(--mono);letter-spacing:.1em;color:var(--ink2)}
.ai .th{width:42px;height:42px;border-radius:10px;overflow:hidden;background:#e9e4d6;box-shadow:0 0 0 1.5px var(--ink);transition:transform .35s var(--spring)}
.ai .th img{width:100%;height:100%;object-fit:cover;transform:scale(1.3) translateY(4%)}
.ai .nm{display:flex;align-items:baseline;gap:8px;min-width:0;font:800 clamp(.8rem,.95vw,.92rem)/1.15 var(--display);font-stretch:84%;text-transform:uppercase;letter-spacing:.02em}
.ai .nm span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai .nm::after{content:"";flex:1;min-width:14px;height:1px;border-bottom:1.5px dotted rgba(29,33,36,.35);transform:translateY(-3px)}
.ai::before{content:"";position:absolute;left:66px;right:0;bottom:2px;height:2px;background:var(--red);transform:scaleX(0);transform-origin:0 50%;transition:transform .2s}
@media (hover:hover){.ai:hover .th{transform:translateY(-3px) rotate(-4deg)}.ai:hover::before{transform:scaleX(1)}}
.ai.on .th{transform:translateY(-3px) rotate(-4deg);box-shadow:0 0 0 2px var(--ink),3px 4px 0 var(--blue)}
.ai.on::before{transform:scaleX(1)}
.ai:focus-visible{outline:2px dashed var(--ink);outline-offset:3px}
.arch-index li.more-hidden{display:none}
.arch-view{position:sticky;top:110px}
.av-print{margin:0;padding:12px 12px 16px;background:#fbfaf3;border-radius:18px;box-shadow:inset 0 0 0 2px var(--ink),5px 7px 0 rgba(29,33,36,.7);transform:rotate(1.5deg);transition:transform .45s var(--spring)}
.av-print.flip{transform:rotate(-1deg) translateY(-6px)}
.av-img{display:block;aspect-ratio:1;border-radius:11px;overflow:hidden;background:#e9e4d6}
.av-img img{width:100%;height:100%;object-fit:cover;transform:scale(1.22) translateY(4%)}
.av-print figcaption{display:grid;gap:4px;margin:14px 4px 0}
.av-print small{font-size:.58rem;color:var(--ink2)}
.av-print b{font:900 clamp(1.3rem,1.9vw,1.9rem)/1 var(--display);font-stretch:74%;text-transform:uppercase}
.av-hint{margin:14px 6px 0;font-size:.55rem;color:var(--ink2)}
.arch-more{display:block;margin:clamp(24px,3vw,40px) 0 0;padding:0;border:0;background:none;cursor:pointer;position:relative;color:var(--ink)}
.arch-more .am-face{display:inline-flex;align-items:center;gap:14px;padding:12px 18px;border-radius:12px;background:var(--cream);box-shadow:inset 0 0 0 2px var(--ink),3px 4px 0 var(--blue);font:800 .74rem var(--display);letter-spacing:.08em;text-transform:uppercase;transition:transform .3s var(--spring)}
.arch-more:hover .am-face{transform:translateY(-2px)}.arch-more:active .am-face{transform:translate(2px,3px)}
.arch-more i{font-style:normal}
.arch-more[hidden]{display:none}

/* ---------------- 6 · QUIET TRANSITION + MEMBERSHIP (cream page, colour lives inside the tier objects) ---------------- */
.mem{position:relative;z-index:11;background:var(--cream);color:var(--ink);padding:0 clamp(16px,5vw,80px) 0}
/* seal on the dotted transition (R9 fix): the path svg and the seal are both centred on the same axis; the path passes exactly
   through the centre point (symmetric curve), and the seal is its own element (not r2's fixed-position .stamp) */
.mem-gap{position:relative;height:clamp(150px,16vw,230px)}
.mem-gap .mg-path{position:absolute;left:50%;top:0;width:40px;height:100%;margin-left:-20px;overflow:visible}
.mem-gap .mg-path path{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-dasharray:2 10;stroke-linecap:round;opacity:.6;vector-effect:non-scaling-stroke}
.mg-seal{position:absolute;left:50%;top:50%;width:78px;height:78px;margin:-39px 0 0 -39px;display:grid;place-items:center;transform:rotate(-10deg)}
.mg-seal svg{position:absolute;inset:0;width:100%;height:100%}
.mg-seal img{position:relative;width:38%;height:auto}
.mem-head{max-width:1440px;margin:0 auto clamp(40px,5vw,70px);text-align:center}
.mem-head p.mono{margin:0 0 10px;font-size:.66rem;color:var(--ink2)}
.mem-head h2{margin:0;font:900 clamp(44px,5.6vw,96px)/.86 var(--display);font-stretch:68%;text-transform:uppercase;letter-spacing:-.01em}
.mem-note{margin:14px 0 0;font-size:clamp(22px,2vw,30px);color:var(--red);transform:rotate(-2deg)}
.tiers{max-width:1180px;margin:0 auto;display:flex;gap:clamp(18px,2.4vw,36px);align-items:stretch;padding-top:clamp(70px,7vw,110px)}
/* EXISTING tier identities (values identical to public/membership.css "Artwork-led tier palettes") */
.tier.snack{--tbg:radial-gradient(ellipse at 60% 35%,#fff0c67a,transparent 65%),linear-gradient(145deg,#f9cebc,#f6c99b),#f8ccaa;--ttx:#422719;--cta:#d5e876;--ctt:#382a1b;--ctb:#4d2b1a}
.tier.hobbyist{--tbg:radial-gradient(ellipse at 65% 40%,#f6cfec88,transparent 65%),linear-gradient(145deg,#efb8ad,#d68dde),#df9ad2;--ttx:#392340;--cta:#634077;--ctt:#fff0d3;--ctb:#392340}
.tier.merchant{--tbg:#192F4D;--ttx:#fff2cf;--cta:#d7e980;--ctt:#192F4D;--ctb:#f6d35c}
.tier{position:relative;flex:1 1 0;min-width:0;min-height:clamp(320px,26vw,370px);color:var(--ttx);transition:flex-grow .5s var(--spring),transform .5s var(--spring),opacity .3s}
.tier-bg{position:absolute;inset:0;border-radius:24px;background:var(--tbg);box-shadow:0 0 0 2px rgba(29,33,36,.9),5px 7px 0 rgba(29,33,36,.55);transition:box-shadow .4s var(--spring)}
.tier-hit{position:absolute;inset:0;z-index:4;border:0;background:none;border-radius:24px;cursor:pointer}
.tier-hit:focus-visible{outline:2px dashed var(--ink);outline-offset:6px}
.tier-art{position:absolute;z-index:2;left:12%;width:76%;height:auto;aspect-ratio:1.15;top:-26%;overflow:visible;pointer-events:none;filter:drop-shadow(0 10px 12px rgba(25,47,77,.25));transition:transform .5s var(--spring)}
.tier-tc{position:relative;z-index:5;pointer-events:none;padding:clamp(120px,10.5vw,150px) clamp(18px,2vw,28px) 24px}
.tier-role{margin:0 0 10px;font-size:.58rem;opacity:.8}
.tier-id{display:block;width:88%;height:auto;overflow:visible}
.tier-price{margin:10px 0 0;display:flex;align-items:baseline;gap:8px}
.tier-price strong{font:900 clamp(30px,2.6vw,40px)/1 var(--display);font-stretch:78%}
.tier-price span{font:700 1.15rem var(--hand)}
.tier-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--spring),opacity .3s;opacity:0}
.tier-more>*{min-height:0}
.tier-more{overflow:hidden}
.tier-ben{margin:14px 0 0;font:650 .98rem/1.4 var(--display)}
.tier-cta{pointer-events:auto;display:inline-flex;align-items:center;gap:10px;margin:16px 0 4px;padding:11px 18px;border-radius:12px;background:var(--cta);color:var(--ctt);box-shadow:inset 0 0 0 2px var(--ctb);font:800 .74rem/1 var(--display);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;width:max-content;position:relative;z-index:6}
/* hover / focus / open: the tier expands moderately, its artwork moves forward, details reveal; the others yield */
@media (hover:hover) and (min-width:900px){
 .tiers:hover .tier{flex-grow:.86;opacity:.94}
 .tiers .tier:hover{flex-grow:1.34;opacity:1}
 .tier:hover .tier-art{transform:translateY(-12px) scale(1.07)}
 .tier:hover .tier-bg{box-shadow:0 0 0 2px rgba(29,33,36,.9),8px 11px 0 rgba(29,33,36,.55)}
 .tier:hover .tier-more{grid-template-rows:1fr;opacity:1}
 .tier:hover{transform:translateY(-6px)}
}
.tier.open{flex-grow:1.34}
.tier.open .tier-more,.tier:focus-within .tier-more{grid-template-rows:1fr;opacity:1}
.tier.open .tier-art{transform:translateY(-12px) scale(1.07)}
/* dotted path continues from Membership down into the footer */
.mem-trail{display:block;width:100%;height:clamp(90px,10vw,150px);margin-top:clamp(40px,5vw,70px);overflow:visible}
.mem-trail path{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-dasharray:2 10;stroke-linecap:round;opacity:.55;vector-effect:non-scaling-stroke}


/* ---------------- 7 · FOOTER — the last chapter: a charcoal print on the cream page, the dotted route ends at the seal ---------------- */
.foot{position:relative;z-index:11;background:var(--cream);padding:0 clamp(12px,2.4vw,36px) clamp(12px,2.4vw,36px);color:var(--cream)}
.foot-plate{position:relative;max-width:1440px;margin:0 auto;border-radius:clamp(22px,2.4vw,34px);background:var(--ink);overflow:hidden;
 padding:clamp(34px,4.4vw,64px) clamp(20px,4.4vw,68px) clamp(18px,2vw,26px)}
.foot-plate::before{content:"";position:absolute;inset:0;background:radial-gradient(rgba(248,246,235,.07) 1px,transparent 1.3px) 0 0/6px 6px;pointer-events:none}
.foot-plate>*{position:relative}
.foot-top{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.6fr);gap:clamp(30px,5vw,90px);align-items:start}
.foot-kick{margin:0 0 18px;font-size:.62rem;display:flex;gap:14px;color:var(--blue)}
.foot-kick span+span::before{content:"";display:inline-block;width:18px;height:1.5px;background:var(--red);vertical-align:middle;margin-right:14px}
.foot-word{margin:0;display:flex;flex-wrap:wrap;font:900 clamp(48px,6.4vw,112px)/.84 var(--display);font-stretch:68%;text-transform:uppercase;letter-spacing:-.01em;color:var(--cream)}
.foot-word .o{color:transparent;-webkit-text-stroke:max(1.6px,.016em) var(--cream)}
.foot-tag{margin:14px 0 0;font-size:.62rem;color:rgba(248,246,235,.72)}
.foot-note{margin:22px 0 0;font-size:clamp(22px,1.9vw,30px);color:var(--blue);transform:rotate(-3deg);transform-origin:0 50%}
.foot-cols{display:grid;grid-template-columns:repeat(4,minmax(0,auto));justify-content:space-between;gap:28px clamp(18px,2.6vw,44px);padding-top:6px}
.fh{margin:0 0 16px;display:flex;align-items:center;gap:10px;font-size:.6rem;color:var(--blue)}
.fh i{font-style:normal;display:grid;place-items:center;min-width:24px;height:18px;padding:0 5px;border-radius:999px;box-shadow:inset 0 0 0 1.2px var(--blue);font-size:.52rem}
.fcol ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.fcol a,.fcol .nolink{position:relative;display:inline-flex;align-items:baseline;gap:6px;font:700 clamp(.86rem,1vw,.98rem)/1.2 var(--display);font-stretch:90%;letter-spacing:.03em;text-transform:uppercase;color:var(--cream)}
.fcol ul a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:5px;border-bottom:2px solid var(--blue2);border-radius:0 0 60% 40%/0 0 100% 70%;transform:scaleX(0);transform-origin:0 50%;transition:transform .2s cubic-bezier(.3,.7,.2,1)}
.fcol ul a:hover::after,.fcol ul a:focus-visible::after{transform:scaleX(1)}
.fcol a:focus-visible{outline:2px dashed var(--cream);outline-offset:5px}
.fcol .nolink{color:rgba(248,246,235,.5);cursor:default}
.fcol .nolink small{font-size:.5rem;padding:3px 6px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(248,246,235,.4);letter-spacing:.12em}
.fcol a.plog{display:inline-flex;align-items:center;gap:10px;color:var(--ink);font:inherit;letter-spacing:0;text-transform:none}
.plog--foot{margin:0;--h:42px;padding-right:4px}
.foot-base{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;margin-top:clamp(34px,4.4vw,64px);padding-top:clamp(16px,1.8vw,22px);border-top:1.5px dotted rgba(248,246,235,.35)}
.foot-base p{margin:0;font-size:.6rem;color:rgba(248,246,235,.78)}
.foot-seal{position:relative;display:grid;place-items:center;width:62px;height:62px;transform:rotate(-10deg)}
.foot-seal svg{position:absolute;inset:0;width:100%;height:100%}.foot-seal img{position:relative;width:38%;height:auto}
.foot-up{justify-self:end;font-size:.6rem;color:rgba(248,246,235,.78)}
.foot-up:hover{color:var(--cream)}
.foot-up:focus-visible{outline:2px dashed var(--cream);outline-offset:5px}

/* ---------------- phones ---------------- */
@media (max-width:899px),(orientation:portrait) and (max-width:1100px){
 .plog{--h:40px;gap:8px;padding:0 4px 0 12px}
 .plog .pl-d{display:none}.plog .pl-m{display:inline}
 .plog .pl-go{width:30px;height:30px}
 .arch-head{grid-template-columns:1fr}.arch-sub{text-align:left;padding:0}
 .arch-body{grid-template-columns:1fr}
 .arch-index{columns:1}
 .arch-view{display:none}
 .ai{grid-template-columns:26px 48px minmax(0,1fr);padding:8px 0}
 .ai .th{width:48px;height:48px}
 .tiers{flex-direction:column;gap:clamp(90px,24vw,120px);padding-top:80px}
 .tier{flex:none;min-height:0}
 .tier-art{width:58%;left:36%;top:-18%}
 .tier-tc{padding:26px 20px 22px;max-width:62%}
 .tier.open .tier-tc,.tier:focus-within .tier-tc{max-width:none}
}
@media (prefers-reduced-motion:reduce){.plog,.plog *,.tier,.tier *,.ai *,.av-print,.obj{transition:none!important}}

@media (max-width:1100px){
 .foot-top{grid-template-columns:1fr}
}
@media (max-width:899px),(orientation:portrait) and (max-width:1100px){
 .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr));justify-content:stretch;gap:30px 18px}
 .foot-word{font-size:clamp(46px,17vw,110px)}
 .plog--foot{--h:42px;padding-right:6px}
 .plog--foot .pl-d{display:inline}.plog--foot .pl-m{display:none}
 .foot-cols .fcol:nth-child(2){grid-column:1/-1}
 .foot-base{grid-template-columns:1fr auto;grid-template-areas:"seal seal" "c up";row-gap:18px}
 .foot-seal{grid-area:seal;justify-self:start}
 .foot-base p{grid-area:c}.foot-up{grid-area:up}
}

/* =====================================================================================================
   R10 — refinements on top of R9
   ===================================================================================================== */

/* ---------------- sticky header: same header, same layout, same height. At the very top it is exactly R9
   (transparent, over the hero). Once the page moves it gets a quiet cream backing with a dotted hairline, and the
   small "Digital toys for real life" line folds away so the bar stays slim and never sits on section headings. */
.nav{position:fixed;z-index:60;transition:background-color .25s ease,padding .25s var(--out)}
.nav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:0;border-bottom:1.5px dotted rgba(29,33,36,.28);opacity:0;transition:opacity .25s ease;pointer-events:none}
.nav .brand .tag{max-height:3em;overflow:hidden;transition:max-height .25s var(--out),opacity .2s ease,margin .25s var(--out)}
.nav.stuck{background:rgba(248,246,235,.94);-webkit-backdrop-filter:saturate(1.1) blur(6px);backdrop-filter:saturate(1.1) blur(6px);padding-top:10px;padding-bottom:10px}
.nav.stuck::after{opacity:1}
.nav.stuck .brand .tag{max-height:0;opacity:0;margin-top:0}

/* ---------------- menu control: one complete rounded object from the same family as the login capsule */
.burger{width:44px;height:44px;border:0;border-radius:13px;clip-path:none;background:#FFFDF7;display:grid;place-content:center;gap:4px;padding:0;
 box-shadow:inset 0 0 0 1.6px var(--ink),0 2px 0 rgba(29,33,36,.9);transition:transform .3s var(--spring),box-shadow .3s var(--spring);-webkit-tap-highlight-color:transparent}
.burger i{width:18px;height:2px;border-radius:2px;background:var(--ink)}
@media (hover:hover){.burger:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1.6px var(--ink),3px 4px 0 var(--blue)}}
.burger:focus-visible{outline:2px dashed var(--ink);outline-offset:5px}
.burger:active{transform:translateY(1px);box-shadow:inset 0 0 0 1.6px var(--ink),0 0 0 var(--blue);transition-duration:.07s}

/* ---------------- footer: social icons instead of words (same links) */
.fcol ul.socials{display:flex;align-items:center;gap:6px;margin-left:-9px}
.socials a{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;color:var(--cream);transition:color .2s ease,transform .3s var(--spring)}
.socials a::after{display:none}
.socials svg{width:22px;height:22px;display:block}
.socials .yt-play{fill:var(--ink)}
.socials .patw{--pw:20px}
@media (hover:hover){.socials a:hover{color:var(--blue);transform:translateY(-2px) rotate(-6deg)}
 .socials a:hover .patw img{filter:invert(1) sepia(1) saturate(2.2) hue-rotate(160deg) brightness(.98)}}
.socials a:focus-visible{outline:2px dashed var(--cream);outline-offset:3px;color:var(--blue)}

@media (max-width:899px),(orientation:portrait) and (max-width:1100px){
 .burger{width:40px;height:40px;border-radius:12px}
 .nav.stuck{padding-top:8px;padding-bottom:8px}
}
@media (prefers-reduced-motion:reduce){.nav,.nav *,.burger,.socials a{transition:none!important}}

/* =====================================================================================================
   R11 — refinements on top of R10 (everything above is R10 verbatim)
   ===================================================================================================== */

/* (R12: the R11 coral JOIN rule is removed here, so JOIN is charcoal again like the rest of the headline) */

/* Current Drop: Design 01 no longer crowds "SEPTEMBER'S DROP". The heading is sized to its own column (it used to keep
   growing up to 150px while the grid stops at 1440px, so on wide screens it ran under print 01) and the heading column keeps
   a gutter before print 01. Print 01 itself is unchanged, so it stays the dominant object. */
@media (min-width:900px) and (not ((orientation:portrait) and (max-width:1100px))){
 .drop-head h2{font-size:clamp(56px,7.6vw,118px)}
 .drop-grid .drop-head{padding-right:clamp(28px,3.4vw,60px)}
 .drop-note{right:clamp(28px,3.4vw,60px)}
}
/* "Small objects. Big personalities." + its arrow in Canvas Cream */
.drop-note{color:var(--cream)}
.drop-note svg{stroke:var(--cream)}

/* Membership handwritten line in OX blue (same font, size, rotation) */
.mem-note{color:var(--blue)}

/* footer: social icons stacked vertically (same icons, links, labels, hover) */
.fcol ul.socials{flex-direction:column;align-items:flex-start;gap:4px;margin-left:-9px}
/* footer hover lines: perfectly straight, thin, OX blue, left → right */
.fcol ul a::after{height:0;bottom:-4px;border-bottom:2px solid var(--blue2);border-radius:0}

/* =====================================================================================================
   R12 — four corrections on top of R11 (everything above is R11 verbatim, minus the coral JOIN rule)
   ===================================================================================================== */
/* Archive hover / active line: OX blue (same position, length, thickness, timing) */
.ai::before{background:var(--blue)}
/* header nav hover line: OX blue (same straight rule, same left → right reveal) — matches the footer */
.links a::after{border-bottom-color:var(--blue2)}
/* Current Drop: "Collect them all!" sits lower, in the blue space under the heading (clear of the month, seal and Design 01) */
/* (R13: the R12 "below the heading" placement is replaced by the R13 placement at the end of this file) */

/* =====================================================================================================
   R13 — three corrections on top of R12 (everything above is R12 verbatim, minus the R12 note placement)
   ===================================================================================================== */
/* 1 · footer: social icons back in ONE compact horizontal row (same icons, links, labels, hover) */
.fcol ul.socials{flex-direction:row;align-items:center;gap:6px;margin-left:-9px}
/* Terms / License balanced with the icon row: same cap height as the icons' optical size, centred on the row */
.foot-cols .fcol:last-child ul{min-height:40px;align-content:center}
.foot-cols .fcol:last-child ul a{font-size:clamp(.8rem,.9vw,.88rem);letter-spacing:.04em}

/* 2 · "Collect them all!" — a small annotation BESIDE the heading (next to DROP + seal, before Design 01), arrow ↘ */
@media (min-width:900px) and (not ((orientation:portrait) and (max-width:1100px))){
 .drop-note{top:auto;bottom:-.55em;right:clamp(28px,3.4vw,60px);white-space:nowrap;text-align:right}
 .drop-note svg{margin:4px 6px 0 auto;transform:scaleY(-1)}
}
/* phones: the icon row keeps a clear gap before Terms / License (community column a little wider) */
@media (max-width:899px),(orientation:portrait) and (max-width:1100px){
 .foot-cols{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
}