/* =====================================================================
   LYLLAK — site stylesheet
   Colours sampled from the logo files (see docs/LYLLAK-DESIGN.md).
   The mark's stroke angle (57.4° from horizontal) is the only diagonal
   used on the site: skewX(-32.6deg) turns verticals into that angle.
   ===================================================================== */

/* ---------- Fonts (self-hosted, OFL) ---------- */
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;src:url(/assets/fonts/spacegrotesk-normal-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;src:url(/assets/fonts/spacegrotesk-normal-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:300 700;font-display:swap;src:url(/assets/fonts/dmsans-normal-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:300 700;font-display:swap;src:url(/assets/fonts/dmsans-normal-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"DM Sans";font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/dmsans-italic-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- Tokens ---------- */
:root{
  --ink:#090438;          /* logo background */
  --ink-deep:#06002D;
  --ink-raise:#120A4E;
  --mark:#6C4DC2;         /* logo mark, average */
  --mark-light:#6E50C7;
  --mark-shade:#6241B9;
  --lilac:#B9A8F5;        /* text-size accent on ink (purple fails as text) */
  --paper:#F7F4FF;
  --paper-line:#DCD5F0;
  --mute:#AAA3C4;
  --mute-paper:#4E4672;
  --white:#FFFFFF;
  --dopa-1:#F5A91D; --dopa-2:#EE6A56; --dopa-3:#E73387; --dopa-ink:#1B1A1E;
  --mm-1:#EA023A; --mm-2:#FF3131; --mm-3:#FD8FD1; --mm-ink:#160709; --mm-bone:#F6EEE9;   /* MatchMind's own palette */
  --yu-ink:#09070D; --yu-silver:#C8C8CE; --yu-gold:#D8A84E; --yu-ember:#C94A1A; --yu-ember-2:#A93C14; --yu-bone:#EEEAF2; --yu-mute:#B4ADC0;   /* Yuniverse's own palette */
  --od-sun:#F7C044; --od-mustard:#D8AD47; --od-umber:#7C5600; --od-ink:#242424; --od-cream:#F3EBD5;   /* Oddly's own palette (sampled from its logo and character sheet) */

  --skew:-32.6deg;        /* verticals → mark angle */
  --display:"Space Grotesk",ui-sans-serif,system-ui,sans-serif;
  --text:"DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --gut:clamp(1rem,4vw,3.5rem);
  --max:1440px;
  --ease:cubic-bezier(.2,.7,.1,1);
  --nav-h:72px;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--nav-h);overflow-x:clip}
body{margin:0;background:var(--ink);color:var(--white);font:400 1.0625rem/1.6 var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:500;letter-spacing:-.03em;line-height:1;text-wrap:balance}
/* Three title tiers, so chapters don't all shout at once:
   A — anchors (hero, The brands, DopaFix quote) · B — statements · C — working titles */
.t-b{font-size:clamp(2.4rem,5.2vw,4.8rem);letter-spacing:-.045em}
.t-c{font-size:clamp(1.7rem,2.6vw,2.4rem);letter-spacing:-.03em}
p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--lilac);outline-offset:3px;border-radius:2px}
.chapter--paper :focus-visible{outline-color:var(--mark-shade)}
.nm{letter-spacing:.08em;font-weight:600}
.tl{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.tl:hover{text-decoration-thickness:2px}
.skip{position:absolute;inset-inline-start:var(--gut);top:-100px;z-index:100;background:var(--paper);color:var(--ink);padding:.7rem 1rem;font-weight:600}
.skip:focus{top:1rem}
.linkbtn{background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:.2em}

/* Grain: one tiled SVG noise, fixed, below the cursor. */
body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- Buttons ---------- */
.btn{--mx:0px;--my:0px;position:relative;display:inline-flex;align-items:center;gap:.6em;min-height:48px;padding:.8rem 1.4rem;border:1.5px solid transparent;
  font:600 1rem/1 var(--text);text-decoration:none;cursor:pointer;transform:translate(var(--mx),var(--my));transition:transform .35s var(--ease),background-color .2s,color .2s,border-color .2s}
.btn::after{content:"";width:.55em;height:.55em;border:1.5px solid currentColor;transform:rotate(45deg);transition:transform .3s var(--ease),background-color .2s}
.btn:hover::after,.btn:focus-visible::after{transform:rotate(45deg) scale(1.15);background:currentColor}
.btn--solid{background:var(--paper);color:var(--ink)}
.btn--solid:hover{background:var(--white)}
.chapter--paper .btn--solid{background:var(--ink);color:var(--paper)}
.chapter--paper .btn--solid:hover{background:var(--mark-shade)}
.btn--line{border-color:color-mix(in srgb,currentColor 45%,transparent)}
.btn--line:hover{border-color:currentColor}
.btn--text{padding-inline:.2rem;border:0;color:var(--mute)}
.btn--text:hover{color:var(--white)}
.btn--dopa{background:linear-gradient(110deg,var(--dopa-1),var(--dopa-2) 55%,var(--dopa-3));color:#1B1A1E}
.btn--dopa:hover{filter:brightness(1.06)}

/* ---------- Navigation ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:50;height:var(--nav-h);display:flex;align-items:center;gap:2rem;padding:0 var(--gut);
  transition:transform .4s var(--ease),background-color .3s,box-shadow .3s}
.nav.is-solid{background:color-mix(in srgb,var(--ink) 88%,transparent);backdrop-filter:blur(10px);box-shadow:0 1px 0 #ffffff14}
.nav.is-hidden{transform:translateY(-100%)}
.nav__logo{display:block;width:118px;margin-inline-end:auto}
.nav__links{display:flex;gap:.25rem}
.nav__links a{position:relative;padding:.6rem .8rem;text-decoration:none;font-weight:500;color:var(--mute);transition:color .2s}
.nav__links a:hover,.nav__links a[aria-current="true"]{color:var(--white)}
/* the active marker is a small slanted bar cut at the mark angle */
.nav__links a::after{content:"";position:absolute;left:.8rem;right:.8rem;bottom:.25rem;height:2px;background:var(--lilac);transform:scaleX(0) skewX(var(--skew));transform-origin:left;transition:transform .35s var(--ease)}
.nav__links a[aria-current="true"]::after{transform:scaleX(1) skewX(var(--skew))}
.nav__progress{--sp:0;width:14px;height:14px;border:1.5px solid var(--lilac);transform:rotate(45deg);overflow:hidden;flex:none}
.nav__progress i{display:block;width:100%;height:100%;background:var(--lilac);transform:scaleY(var(--sp));transform-origin:bottom}
.nav__menu{display:none;align-items:center;gap:.7rem;min-height:44px;padding:.4rem 0;background:none;border:0;cursor:pointer;font-weight:600}
.nav__menu-icon{position:relative;width:22px;height:12px}
.nav__menu-icon i{position:absolute;left:0;right:0;height:2px;background:currentColor;transition:transform .35s var(--ease),top .35s var(--ease)}
.nav__menu-icon i:first-child{top:0}.nav__menu-icon i:last-child{top:10px}
.nav__menu[aria-expanded="true"] .nav__menu-icon i:first-child{top:5px;transform:rotate(45deg)}
.nav__menu[aria-expanded="true"] .nav__menu-icon i:last-child{top:5px;transform:rotate(-45deg)}

.sheet{position:fixed;inset:0;z-index:45;background:var(--ink-deep);padding:calc(var(--nav-h) + 2rem) var(--gut) 2rem;display:flex;flex-direction:column;justify-content:space-between;overflow:auto}
.sheet[hidden]{display:none}
.sheet nav{display:grid}
.sheet a{display:grid;gap:.15rem;padding:1.1rem 0;border-bottom:1px solid #ffffff1a;text-decoration:none}
.sheet a b{font:500 clamp(2rem,9vw,3rem)/1 var(--display);letter-spacing:-.03em}
.sheet a span{color:var(--mute);font-size:.95rem}
.sheet__foot{color:var(--lilac);font-family:var(--display)}

/* ---------- The mark (four stacked full-frame layers) ---------- */
.mark{position:relative;aspect-ratio:803/678}
.mark__piece{position:absolute;inset:0;width:100%;height:100%;transition:opacity .35s,filter .35s,transform .6s var(--ease)}
.mark__piece:first-child{position:relative}

/* ---------- 1 · Hero ---------- */
.hero{position:relative;min-height:100svh;display:grid;grid-template-columns:repeat(12,1fr);align-items:center;column-gap:var(--gut);
  padding:calc(var(--nav-h) + 2rem) var(--gut) 4rem;max-width:var(--max);margin:0 auto;isolation:isolate}
/* hairlines at the mark angle, fading toward the text */
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:repeating-linear-gradient(122.6deg,transparent 0 119px,#ffffff0d 119px 120px);
  -webkit-mask:linear-gradient(90deg,transparent 15%,#000 70%);mask:linear-gradient(90deg,transparent 15%,#000 70%)}
.hero__mark{grid-column:7/13;grid-row:1;width:100%;max-width:640px;justify-self:end;--rx:0deg;--ry:0deg;
  transform:perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .5s var(--ease)}
.hero__text{grid-column:1/9;grid-row:1;position:relative}
.hero__title{font-size:clamp(3.4rem,10.5vw,10.5rem);font-weight:500;letter-spacing:-.055em;line-height:.88}
.hero__title span{display:inline-block}
.hero__lede{max-width:30ch;margin-top:2rem;font-size:clamp(1.15rem,1.6vw,1.45rem);line-height:1.45;color:var(--mute)}
.hero__lede .nm{color:var(--white)}
.hero__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.25rem}

/* load sequence: pieces slide in along their own axes, the joint lands last */
@media (prefers-reduced-motion:no-preference){
  .hero__mark .mark__piece--v{animation:in-v 1s var(--ease) .1s both}
  .hero__mark .mark__piece--stroke{animation:in-stroke 1.05s var(--ease) .25s both}
  .hero__mark .mark__piece--shard{animation:in-shard .95s var(--ease) .4s both}
  .hero__mark .mark__piece--joint{animation:in-joint .7s cubic-bezier(.3,1.6,.5,1) 1.05s both}
  /* the headline is there from the first frame; only the supporting line waits for the joint */
  .hero__lede,.hero__actions{animation:fade .6s ease 1.15s both}
}
@keyframes fade{from{opacity:0}}
@keyframes in-v{from{opacity:0;transform:translateY(22%)}}
@keyframes in-stroke{from{opacity:0;transform:translate(-14%,22%)}}
@keyframes in-shard{from{opacity:0;transform:translate(-11%,-17%)}}
@keyframes in-joint{from{opacity:0;transform:scale(.2) rotate(-90deg)}}
@keyframes rise{from{opacity:0;transform:translateY(.35em)}}
.hero__mark:hover .mark__piece--joint{filter:drop-shadow(0 0 18px var(--lilac)) brightness(1.15)}

/* ---------- Band ---------- */
.band{overflow:hidden;border-block:1px solid #ffffff1a;background:var(--ink-raise)}
.band__track{display:flex;width:max-content;animation:band 48s linear infinite}
.band:hover .band__track{animation-play-state:paused}
.band span{display:flex;align-items:center;gap:2.5rem;padding:1.1rem 1.25rem 1.1rem 0;font:500 clamp(1rem,1.6vw,1.35rem)/1 var(--display);color:var(--lilac);white-space:nowrap}
.band span::after{content:"";width:.5em;height:.5em;background:var(--mark);transform:rotate(45deg)}
@keyframes band{to{transform:translateX(-50%)}}

/* ---------- Chapters ---------- */
.chapter{position:relative;padding:clamp(5rem,12vw,10rem) var(--gut)}
.chapter > *{max-width:var(--max);margin-inline:auto}
.chapter--paper{background:var(--paper);color:var(--ink)}

/* ---------- 2 · About ---------- */
.about{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);row-gap:3rem;max-width:none}
.about > *{margin:0}
.about__title{grid-column:1/8;font-size:clamp(2.4rem,5.2vw,4.8rem);letter-spacing:-.045em;max-width:13ch}
.about__body{grid-column:8/13;align-self:end}
.about__lead{font-size:clamp(1.1rem,1.4vw,1.25rem);line-height:1.55;color:var(--mute-paper)}
.about__not{grid-column:1/-1;margin:clamp(2rem,5vw,4rem) 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gut)}
.about__not div{padding-top:1.25rem;border-top:1.5px solid var(--ink)}
.about__not dt{font:500 clamp(1.5rem,2.6vw,2.2rem)/1.1 var(--display);letter-spacing:-.03em}
.about__not dd{margin:.75rem 0 0;color:var(--mute-paper);max-width:32ch}
/* the negated word is struck through by a bar cut at the mark angle */
.strike{position:relative;white-space:nowrap}
.strike::after{content:"";position:absolute;left:-.08em;right:-.08em;top:52%;height:.12em;background:var(--mark);transform:skewX(var(--skew)) scaleX(var(--s,1));transform-origin:left}
html.js .about .strike::after{--s:0;transition:transform .7s var(--ease)}
html.js .about.is-seen .strike::after{--s:1}
html.js .about.is-seen div:nth-child(2) .strike::after{transition-delay:.15s}
html.js .about.is-seen div:nth-child(3) .strike::after{transition-delay:.3s}

/* ---------- 3 · Operating model ---------- */
.model{--p:1;padding-block:0}
.model__stage{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);align-items:center;padding-block:clamp(5rem,12vw,9rem)}
.model__mark{grid-column:1/7;width:100%;max-width:560px}
.model__text{grid-column:8/13}
.model__title{font-size:clamp(2.2rem,4.6vw,4.2rem);letter-spacing:-.04em}
.model__intro{margin-top:1.25rem;color:var(--mute);max-width:44ch}
.model__list{list-style:none;margin:2rem 0 0;padding:0;display:grid}
.model__list button{display:grid;gap:.35rem;width:100%;padding-block:1.1rem;padding-inline:1.6rem 0;text-align:start;background:none;border:0;border-top:1px solid #ffffff1f;cursor:pointer;position:relative;transition:color .2s}
.model__list button::before{content:"";position:absolute;inset-inline-start:.15rem;top:1.45rem;width:.6rem;height:.6rem;border:1.5px solid var(--mark);transform:rotate(45deg);transition:background-color .2s,transform .3s var(--ease)}
.model__list b{font:500 1.4rem/1.1 var(--display);letter-spacing:-.02em}
.model__list button > span{color:var(--mute);font-size:.98rem;line-height:1.5;max-width:46ch}
.model__list button:hover::before,.model__list button[aria-pressed="true"]::before{background:var(--lilac);border-color:var(--lilac);transform:rotate(45deg) scale(1.2)}
.model__list button[aria-pressed="true"] > span{color:var(--white)}
/* exploded mark: --k = 1 apart, 0 assembled. Scroll writes --p. */
.mark--exploded{--k:calc(1 - var(--p))}
.mark--exploded .mark__piece{transition:opacity .35s,filter .35s}
.mark--exploded .mark__piece--v{transform:translate(calc(-7% * var(--k)),calc(6% * var(--k)))}
.mark--exploded .mark__piece--shard{transform:translate(calc(-6% * var(--k)),calc(-13% * var(--k)))}
.mark--exploded .mark__piece--stroke{transform:translate(calc(11% * var(--k)),calc(-3% * var(--k)))}
.mark--exploded .mark__piece--joint{transform:scale(calc(1 + .35 * var(--k)))}
.model[data-focus] .mark__piece{opacity:.16;filter:saturate(.4)}
.model[data-focus="create"] [data-piece="create"],.model[data-focus="own"] [data-piece="own"],
.model[data-focus="operate"] [data-piece="operate"],.model[data-focus="lyllak"] [data-piece="lyllak"]{opacity:1;filter:drop-shadow(0 0 22px #b9a8f566)}

/* ---------- 4 · Brand register ---------- */
.register{background:var(--ink-deep)}
.register__head{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);align-items:end;margin-bottom:clamp(3rem,6vw,5rem)}
.register__title{grid-column:1/7;font-size:clamp(2.6rem,7vw,6.5rem);letter-spacing:-.05em}
.register__sub{grid-column:8/13;color:var(--mute);max-width:42ch}
.register__body{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);align-items:start}
.register__map{grid-column:1/8;position:relative;padding:5.5rem 0 1rem;min-width:0}
.register__lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.register__line{fill:none;stroke:var(--lilac);stroke-width:1.5;stroke-dasharray:var(--len,0);stroke-dashoffset:0;transition:stroke-dashoffset .6s var(--ease)}
.register__origin{position:absolute;inset-inline-start:0;top:0;display:flex;align-items:center;gap:.8rem;color:var(--lilac);font-size:.9rem}
/* crop of the real joint piece (diamond sits at x 405–512, y 278–415 of the 803×678 frame) */
.register__joint{position:relative;width:44px;height:56px;overflow:hidden;flex:none}
.register__joint img{position:absolute;width:330px;max-width:none;left:-166px;top:-114px}
.register__slots{display:grid;gap:1rem;--step:clamp(1.5rem,5vw,4.5rem)}
.register__fallback{color:var(--mute)}

/* a slot is a parallelogram cut at the mark angle; content is un-skewed */
/* --sk = how far the skewed outline reaches past the box (≈ 0.32 × height); slots are inset by it */
.slot{--accent:var(--mark);--sk:1.9rem;position:relative;display:flex;align-items:center;gap:1.25rem;min-height:84px;min-width:0;
  width:min(440px,calc(100% - var(--i) * var(--step) - 2 * var(--sk)));
  margin-inline-start:calc(var(--i) * var(--step) + var(--sk));padding:1rem 1.25rem 1rem 1.25rem;background:none;border:0;text-align:start;cursor:pointer;color:var(--white);isolation:isolate}
.slot::before{content:"";position:absolute;inset:0;z-index:-1;border:1.5px solid #b9a8f54d;background-color:var(--ink-deep);transform:skewX(var(--skew));transition:background-color .3s,border-color .3s}
.slot:hover::before{border-color:var(--lilac)}
.slot[aria-pressed="true"]::before{border-color:var(--lilac);background-color:var(--ink-raise)}
.slot--open::before{background-image:repeating-linear-gradient(90deg,transparent 0 13px,#b9a8f51c 13px 14px)}
/* focus follows the parallelogram, not the box */
.slot:focus-visible{outline:none}
.slot:focus-visible::before{outline:2px solid var(--white);outline-offset:4px}
.register__lines{z-index:0}
.register__slots{position:relative;z-index:1}
.slot--active::before{border-color:#f5a91d99}
.slot--active[aria-pressed="true"]::before{border-color:var(--dopa-1)}
.slot__no{font:500 .95rem/1 var(--display);color:var(--mute);min-width:1.6rem}
.slot__name{font:500 1.45rem/1.1 var(--display);letter-spacing:-.02em}
.slot--open{--sk:1.4rem;min-height:64px;width:min(380px,calc(100% - var(--i) * var(--step) - 2 * var(--sk)))}
.slot--open .slot__name{color:var(--mute);font-weight:400;font-size:1.05rem}
.slot--active{min-height:96px}
.slot--active .slot__name{font-size:1.7rem}
.slot__status{margin-inline-start:auto;display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--mute);white-space:nowrap}
.slot__status::before{content:"";width:.5rem;height:.5rem;border:1.5px solid currentColor;transform:rotate(45deg)}
.slot--active .slot__status{color:var(--dopa-1)}
.slot--active .slot__status::before{background:var(--dopa-1);border-color:var(--dopa-1)}
.slot__mark{width:34px;height:34px;flex:none;object-fit:contain}

.register__detail{grid-column:9/13;position:sticky;top:calc(var(--nav-h) + 2rem);padding-top:5.5rem;min-height:300px}
.register__detail[data-status="active"]{--accent:var(--dopa-1)}
.rd__status{display:inline-flex;align-items:center;gap:.5rem;font-size:.9rem;color:var(--accent,var(--lilac))}
.rd__status::before{content:"";width:.55rem;height:.55rem;background:currentColor;transform:rotate(45deg)}
.rd__name{margin-top:1rem;font-size:clamp(2.4rem,4vw,3.6rem);letter-spacing:-.04em}
.register__detail:not([data-status="active"]) .rd__name{color:var(--mute);font-weight:400}
.rd__cat{margin-top:.6rem;color:var(--lilac)}
.rd__sum{margin-top:1.25rem;color:var(--mute);max-width:40ch}
.rd__cta{margin-top:2rem}
/* a new record is "cut in" along the mark angle, like a slot being filled */
@media (prefers-reduced-motion:no-preference){
  .rd__name{animation:cut-in .55s var(--ease) both}
  .register__detail > :not(.rd__name){animation:fade .4s ease .15s both}
}
@keyframes cut-in{from{clip-path:polygon(0 0,0 0,-40% 100%,-40% 100%)}to{clip-path:polygon(0 0,140% 0,100% 100%,-40% 100%)}}

/* ---------- 5 · DopaFix chapter ---------- */
.dopafix{--p:1;--dh:0px;position:relative;isolation:isolate;min-height:100svh;display:grid;align-items:center;padding:clamp(6rem,12vw,10rem) var(--gut);color:#F5F1EA}
.dopafix__wash{position:absolute;inset:0;z-index:-1;background:
  radial-gradient(60% 50% at 85% 20%,#f5a91d2e,transparent 70%),
  radial-gradient(50% 45% at 10% 95%,#e7338729,transparent 70%),var(--dopa-ink);
  clip-path:polygon(0 0,calc(var(--p) * (100% + var(--dh))) 0,calc(var(--p) * (100% + var(--dh)) - var(--dh)) 100%,0 100%)}
.dopafix__inner{max-width:var(--max);margin:0 auto;width:100%}
.dopafix__kicker{color:#A5AAA8;font-size:.95rem}
.dopafix__logo{margin-top:1.75rem;width:min(520px,80vw)}
.dopafix__quote{margin:clamp(2.5rem,6vw,4rem) 0 0;font:400 clamp(2rem,5.2vw,4.6rem)/1.08 Georgia,"Times New Roman",serif;letter-spacing:-.015em;max-width:22ch;text-wrap:balance}
.dopafix__quote span{display:block;text-wrap:balance}
.dopafix__cols{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);margin-top:clamp(2.5rem,5vw,4rem)}
.dopafix__about{grid-column:1/6;color:#A5AAA8;font-size:1.1rem;line-height:1.55}
.dopafix__list{grid-column:7/13;list-style:none;margin:0;padding:0}
.dopafix__list li{display:grid;grid-template-columns:11rem 1fr;gap:1rem;padding:.9rem 0;border-top:1px solid #ffffff1f}
.dopafix__list b{font-weight:600}
.dopafix__list span{color:#A5AAA8}
.dopafix__note{margin:2.5rem 0 1.25rem;font-size:.95rem;color:#F5F1EA;display:flex;align-items:center;gap:.6rem}
.dopafix__note::before{content:"";width:1.4rem;height:2px;background:linear-gradient(90deg,var(--dopa-1),var(--dopa-3))}
.dopafix ::selection{background:#e7338755}

/* ---------- 5b · MatchMind chapter (its own identity: wine-black, crimson, the mascot) ---------- */
.matchmind{--p:1;--dh:0px;position:relative;isolation:isolate;min-height:100svh;display:grid;align-items:center;padding:clamp(6rem,12vw,10rem) var(--gut);color:var(--mm-bone);overflow:hidden}
.matchmind__wash{position:absolute;inset:0;z-index:-1;background:
  radial-gradient(55% 50% at 88% 30%,#ea023a33,transparent 70%),
  radial-gradient(45% 40% at 8% 92%,#fd8fd11f,transparent 70%),var(--mm-ink);
  /* DopaFix's wipe, mirrored: nothing at --p:0, the whole chapter at --p:1, entering from the right */
  clip-path:polygon(calc(100% - var(--p) * (100% + var(--dh))) 0,100% 0,100% 100%,calc(100% - var(--p) * (100% + var(--dh)) + var(--dh)) 100%)}
.matchmind__inner{max-width:var(--max);margin:0 auto;width:100%;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut)}
.matchmind__head{grid-column:1/9}
.matchmind__kicker{color:#C9B8B9;font-size:.95rem}
.matchmind__logo{margin-top:1.75rem;width:min(560px,82vw)}
.matchmind__logo img{width:100%;height:auto}
.matchmind__quote{margin:clamp(2.5rem,6vw,4rem) 0 0;font:700 clamp(2.2rem,5.6vw,5rem)/.98 var(--display);letter-spacing:-.04em;max-width:16ch;text-wrap:balance}
.matchmind__quote span{display:block}
.matchmind__quote span + span{color:var(--mm-3)}
.matchmind__portal{grid-column:9/13;align-self:start;justify-self:end;width:min(300px,100%);margin-top:clamp(1rem,4vw,3rem);transform:rotate(calc((1 - var(--p)) * -14deg + 6deg));transition:transform .2s linear}
.matchmind__portal img{width:100%;height:auto;border-radius:50%}
/* 2026-10-14: the owner's slime couple (her angel, him devil) replaces the round mascot */
.matchmind__portal--couple{width:min(380px,100%)}.matchmind__portal--couple img{border-radius:0;filter:drop-shadow(0 18px 24px #0009)}
.matchmind__cols{grid-column:1/13;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);margin-top:clamp(2.5rem,5vw,4rem)}
.matchmind__about{grid-column:1/6;color:#C9B8B9;font-size:1.1rem;line-height:1.55}
.matchmind__list{grid-column:7/13;list-style:none;margin:0;padding:0}
.matchmind__list li{display:grid;grid-template-columns:11rem 1fr;gap:1rem;padding:.9rem 0;border-top:1px solid #ffffff1f}
.matchmind__list b{font-weight:600}
.matchmind__list span{color:#C9B8B9}
.matchmind__foot{grid-column:1/13}
.matchmind__note{margin:2.5rem 0 1.25rem;font-size:.95rem;display:flex;align-items:center;gap:.6rem}
.matchmind__note::before{content:"";width:1.4rem;height:2px;background:linear-gradient(90deg,var(--mm-1),var(--mm-3))}
.matchmind ::selection{background:#ea023a66}
.btn--mm{background:var(--mm-1);color:#fff}
.btn--mm:hover{background:var(--mm-2)}

/* brand-aware register, footer, cursor and exit wipe (DopaFix stays the default) */
.slot--active[data-id="matchmind"]::before{border-color:#ea023a99}
.slot--active[data-id="matchmind"][aria-pressed="true"]::before{border-color:var(--mm-1)}
.slot--active[data-id="matchmind"] .slot__status{color:var(--mm-3)}
.slot--active[data-id="matchmind"] .slot__status::before{background:var(--mm-3);border-color:var(--mm-3)}
.register__detail[data-brand="matchmind"]{--accent:var(--mm-3)}
.foot__brands{display:flex;flex-wrap:wrap;gap:.5rem 2.5rem}
.foot__brands a[data-brand-link="matchmind"]:hover b{background:linear-gradient(90deg,var(--mm-1),var(--mm-3));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- 5c · Yuniverse chapter (its own identity: night, measured silver, told gold, the witch cat) ---------- */
.yuniverse{--p:1;--dh:0px;position:relative;isolation:isolate;min-height:100svh;display:grid;align-items:center;padding:clamp(6rem,12vw,10rem) var(--gut);color:var(--yu-bone);overflow:hidden}
.yuniverse__wash{position:absolute;inset:0;z-index:-1;background:
  radial-gradient(50% 45% at 12% 22%,#c8c8ce1f,transparent 70%),
  radial-gradient(45% 45% at 90% 88%,#d8a84e24,transparent 70%),var(--yu-ink);
  clip-path:polygon(0 0,calc(var(--p) * (100% + var(--dh))) 0,calc(var(--p) * (100% + var(--dh)) - var(--dh)) 100%,0 100%)}
.yuniverse__inner{max-width:var(--max);margin:0 auto;width:100%;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut)}
.yuniverse__head{grid-column:1/9}
.yuniverse__kicker{color:var(--yu-mute);font-size:.95rem}
.yuniverse__logo{margin-top:1.75rem;width:min(560px,82vw)}
.yuniverse__logo img{width:100%;height:auto}
.yuniverse__quote{margin:clamp(2.5rem,6vw,4rem) 0 0;font:700 clamp(2.2rem,5.6vw,5rem)/.98 var(--display);letter-spacing:-.04em;max-width:16ch;text-wrap:balance}
.yuniverse__quote span{display:block;color:var(--yu-silver)}
.yuniverse__quote span + span{color:var(--yu-gold)}
.yuniverse__portal{grid-column:9/13;align-self:start;justify-self:end;width:min(300px,100%);aspect-ratio:1;margin-top:clamp(1rem,4vw,3rem);border-radius:50%;border:1.5px solid #d8a84e80;overflow:hidden;display:grid;place-items:end center;
  background:radial-gradient(70% 60% at 50% 35%,#4b2f5766,transparent 70%),#140f1c;transform:rotate(calc((1 - var(--p)) * 10deg - 4deg));transition:transform .2s linear}
.yuniverse__portal img{width:64%;height:auto;margin-bottom:-2%}
.yuniverse__cols{grid-column:1/13;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);margin-top:clamp(2.5rem,5vw,4rem)}
.yuniverse__about{grid-column:1/6;color:var(--yu-mute);font-size:1.1rem;line-height:1.55}
.yuniverse__list{grid-column:7/13;list-style:none;margin:0;padding:0}
.yuniverse__list li{display:grid;grid-template-columns:11rem 1fr;gap:1rem;padding:.9rem 0;border-top:1px solid #ffffff1f}
.yuniverse__list b{font-weight:600}
.yuniverse__list span{color:var(--yu-mute)}
.yuniverse__foot{grid-column:1/13}
.yuniverse__note{margin:2.5rem 0 1.25rem;font-size:.95rem;display:flex;align-items:center;gap:.6rem}
.yuniverse__note::before{content:"";flex:none;width:1.4rem;height:2px;background:linear-gradient(90deg,var(--yu-silver),var(--yu-gold))}
.yuniverse ::selection{background:#d8a84e55}
.btn--yu{background:var(--yu-ember);color:#fff}
.btn--yu:hover{background:var(--yu-ember-2)}
.slot--active[data-id="yuniverse"]::before{border-color:#d8a84e99}
.slot--active[data-id="yuniverse"][aria-pressed="true"]::before{border-color:var(--yu-gold)}
.slot--active[data-id="yuniverse"] .slot__status{color:var(--yu-gold)}
.slot--active[data-id="yuniverse"] .slot__status::before{background:var(--yu-gold);border-color:var(--yu-gold)}
.register__detail[data-brand="yuniverse"]{--accent:var(--yu-gold)}
.foot__brands a[data-brand-link="yuniverse"]:hover b{background:linear-gradient(90deg,var(--yu-silver),var(--yu-gold));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- 5d · Oddly chapter (its own identity: logo-yellow field, ink, The Odd standing on the rule) ---------- */
.oddly{--p:1;--dh:0px;position:relative;isolation:isolate;min-height:100svh;display:grid;align-items:center;padding:clamp(6rem,12vw,10rem) var(--gut);color:var(--od-ink);overflow:hidden}
.oddly__wash{position:absolute;inset:0;z-index:-1;background:var(--od-sun);
  clip-path:polygon(0 0,calc(var(--p) * (100% + var(--dh))) 0,calc(var(--p) * (100% + var(--dh)) - var(--dh)) 100%,0 100%)}
.oddly__inner{max-width:var(--max);margin:0 auto;width:100%;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut)}
.oddly__head{grid-column:1/9}
.oddly__kicker{font-size:.95rem}
.oddly__logo{margin-top:1.75rem;width:min(460px,78vw);padding:clamp(.9rem,2vw,1.4rem) clamp(1.4rem,3vw,2.2rem);background:var(--od-ink);border-radius:999px}
/* the wordmark's own yellow would vanish on the yellow field: it sits on an ink tab, as on Oddly's share cards */
.oddly__logo img{width:100%;height:auto;display:block}
.oddly__quote{margin:clamp(2.5rem,6vw,4rem) 0 0;font:700 clamp(2.2rem,5.6vw,5rem)/.98 var(--display);letter-spacing:-.04em;max-width:16ch;text-wrap:balance}
.oddly__quote span{display:block}
.oddly__quote span + span{color:var(--od-umber)}
.oddly__portal{grid-column:9/13;align-self:start;justify-self:end;width:min(300px,100%);aspect-ratio:1;margin-top:clamp(1rem,4vw,3rem);border-radius:50%;border:3px solid var(--od-ink);overflow:hidden;display:grid;place-items:end center;
  background:var(--od-cream);transform:rotate(calc((1 - var(--p)) * -10deg + 3deg));transition:transform .2s linear}
.oddly__portal img{width:62%;height:auto;margin-bottom:-3%}
.oddly__cols{grid-column:1/13;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);margin-top:clamp(2.5rem,5vw,4rem)}
.oddly__about{grid-column:1/6;font-size:1.1rem;line-height:1.55}
.oddly__list{grid-column:7/13;list-style:none;margin:0;padding:0}
.oddly__list li{display:grid;grid-template-columns:11rem 1fr;gap:1rem;padding:.9rem 0;border-top:1.5px solid #2424243d}
.oddly__list b{font-weight:600}
.oddly__foot{grid-column:1/13}
.oddly__note{margin:2.5rem 0 1.25rem;font-size:.95rem;display:flex;align-items:center;gap:.6rem}
.oddly__note::before{content:"";flex:none;width:1.4rem;height:3px;background:var(--od-ink)}
.oddly ::selection{background:#24242433}
.oddly :focus-visible{outline-color:var(--od-ink)}
.btn--od{background:var(--od-ink);color:var(--od-sun)}
.btn--od:hover{background:var(--od-umber);color:var(--od-cream)}
.slot--active[data-id="oddly"]::before{border-color:#f7c04499}
.slot--active[data-id="oddly"][aria-pressed="true"]::before{border-color:var(--od-sun)}
.slot--active[data-id="oddly"] .slot__status{color:var(--od-sun)}
.slot--active[data-id="oddly"] .slot__status::before{background:var(--od-sun);border-color:var(--od-sun)}
.register__detail[data-brand="oddly"]{--accent:var(--od-sun)}
.foot__brands a[data-brand-link="oddly"]:hover b{color:var(--od-sun)}
/* ---------- 6 · What we build ---------- */
/* Structure, not a services list: three things a brand has, standing on one shared layer. */
.builds__head{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);align-items:end}
.builds__title{grid-column:1/6;font-size:clamp(1.7rem,2.6vw,2.4rem);letter-spacing:-.03em}
.builds__head p{grid-column:7/13;color:var(--mute-paper);max-width:46ch}
.builds__list{list-style:none;margin:clamp(2rem,4vw,3rem) auto 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}
.builds__list li{position:relative;display:grid;align-content:start;gap:.75rem;min-height:11rem;padding:1.5rem;border:1.5px solid var(--ink);transition:transform .45s var(--ease),background-color .3s}
.builds__list b{font:500 clamp(1.35rem,2.2vw,1.9rem)/1.08 var(--display);letter-spacing:-.025em}
.builds__list span{color:var(--mute-paper);max-width:34ch}
/* each column is "held up": on hover it lifts off the layer beneath */
.builds__list li:not(.builds__base):hover{transform:translateY(-.5rem);background:#fff}
.builds__base{grid-column:1/-1;min-height:0!important;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);align-items:baseline;background:var(--ink);color:var(--paper);
  background-image:repeating-linear-gradient(122.6deg,transparent 0 22px,#ffffff0c 22px 23px)}
.builds__base b{grid-column:1/6}
.builds__base span{grid-column:6/13;color:var(--mute)}

/* ---------- 7 · Principles ---------- */
.principles__title{font-size:1rem;font-family:var(--text);font-weight:600;letter-spacing:0;color:var(--lilac)}
.principles__list{list-style:none;margin:2rem auto 0;padding:0;display:grid;gap:.4em;font:500 clamp(1.9rem,5.2vw,4.6rem)/1.08 var(--display);letter-spacing:-.04em}
.principles__list li{transition:opacity .35s,color .35s;max-width:22ch;overflow-wrap:break-word;cursor:default;outline-offset:6px}
/* each line steps right along the mark angle, like the brand register */
.principles__list li:nth-child(2){margin-inline-start:calc(1 * var(--pstep))}
.principles__list li:nth-child(3){margin-inline-start:calc(2 * var(--pstep))}
.principles__list li:nth-child(4){margin-inline-start:calc(3 * var(--pstep))}
.principles__list{--pstep:clamp(0rem,4.5vw,5rem)}
.principles__list:has(li:hover,li:focus-visible) li:not(:hover):not(:focus-visible){opacity:.22}
.principles__list li:hover,.principles__list li:focus-visible{color:var(--lilac)}

/* ---------- 9 · Contact ---------- */
.contact{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);row-gap:3rem;max-width:none}
.contact > *{margin:0}
.contact__intro{grid-column:1/6}
.contact__title{font-size:clamp(2rem,3.6vw,3.2rem);letter-spacing:-.04em}
.contact__intro p{margin-top:1.25rem;color:var(--mute-paper);max-width:38ch}
.form{grid-column:7/13;display:grid;grid-template-columns:1fr 1fr;gap:1.5rem 1.25rem}
.form__field{display:grid;gap:.4rem}
.form__field--wide,.form__foot,.form__status{grid-column:1/-1}
.form label{font-weight:600;font-size:.95rem}
.form input,.form select,.form textarea{width:100%;min-height:48px;padding:.7rem .1rem;background:transparent;border:0;border-bottom:1.5px solid #090438;border-radius:0;color:var(--ink);font-size:1.05rem;transition:border-color .2s}
.form textarea{resize:vertical;min-height:140px}
.form select{appearance:none;background:linear-gradient(45deg,transparent 50%,var(--ink) 50%) right .45rem center/7px 7px no-repeat,linear-gradient(-45deg,transparent 50%,var(--ink) 50%) right .05rem center/7px 7px no-repeat;padding-right:1.5rem}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-bottom-color:var(--mark-shade);box-shadow:0 1.5px 0 var(--mark-shade)}
.form [aria-invalid="true"]{border-bottom-color:#B3261E}
.form__err{min-height:1.2em;font-size:.88rem;color:#B3261E}
.form__hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.form__foot{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem}
.form__note{font-size:.9rem;color:var(--mute-paper)}
.form__status{min-height:1.5em;font-weight:600}
.form__status.is-ok{color:#1F7A4A}.form__status.is-bad{color:#B3261E}

/* ---------- 10 · Footer ---------- */
.foot{background:var(--ink-deep);padding:clamp(4rem,8vw,6rem) var(--gut) 2rem;color:var(--mute)}
.foot > *{max-width:var(--max);margin-inline:auto}
.foot__top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2rem}
.foot__brand img{width:150px}
.foot__brand p{margin-top:1rem;font:500 1.6rem/1.1 var(--display);color:var(--white);letter-spacing:-.02em}
.foot__nav{display:flex;flex-wrap:wrap;gap:.25rem 1.5rem;align-items:flex-start}
.foot__nav a{text-decoration:none;padding:.4rem 0}
.foot__nav a:hover{color:var(--white)}
.foot__brands{margin-top:3rem;padding-top:1.5rem;border-top:1px solid #ffffff1a}
.foot__brands a{display:inline-grid;gap:.15rem;text-decoration:none;padding:.3rem 0}
.foot__brands b{color:var(--white);font-weight:600;transition:color .2s}
.foot__brands a:hover b{background:linear-gradient(90deg,var(--dopa-1),var(--dopa-3));-webkit-background-clip:text;background-clip:text;color:transparent}
.foot__fine{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin-top:3rem;font-size:.9rem}
.foot__fine a{text-decoration:none}.foot__fine a:hover{color:var(--white)}
.foot__fine > span:first-child{margin-inline-end:auto}

/* ---------- Document pages (privacy, terms, cookies) ---------- */
.doc-page{background:var(--paper);color:var(--ink)}
.doc-page .nav.is-solid{background:var(--ink)}
.doc-page .nav{color:var(--paper)}   /* light text on the always-solid doc-page nav (Phase 9 contrast fix) */
.doc{max-width:68ch;margin:0 auto;padding:calc(var(--nav-h) + clamp(3rem,8vw,6rem)) var(--gut) clamp(4rem,8vw,6rem)}
.doc h1{font-size:clamp(2.6rem,7vw,4.8rem);letter-spacing:-.045em}
.doc h2{margin-top:2.75rem;font-size:1.5rem;letter-spacing:-.02em}
.doc h3{margin-top:1.5rem;font:600 1.05rem/1.3 var(--text);letter-spacing:0}
.doc p{margin-top:.75rem;color:#2C2650}
.doc__meta{color:var(--mute-paper)!important}
.doc__todo{padding:.8rem 1rem;border-left:3px solid var(--mark);background:#ece6ff}
.doc code{font-size:.92em;background:#ece6ff;padding:.05em .3em}
.doc .btn--solid{background:var(--ink);color:var(--paper)}
.doc :focus-visible{outline-color:var(--mark-shade)}

/* ---------- 404 ---------- */
.lost{min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:var(--gut);padding:var(--gut);max-width:var(--max);margin:0 auto}
.lost__mark{width:100%;max-width:520px;justify-self:center}
.lost__ghost{opacity:.12;filter:grayscale(1) brightness(2)}
.lost h1{font-size:clamp(2.6rem,6vw,5rem);letter-spacing:-.045em}
.lost p{margin:1.25rem 0 2rem;color:var(--mute);max-width:34ch}
@media (max-width:700px){.lost{grid-template-columns:1fr}.lost__mark{max-width:300px}}
@media (prefers-reduced-motion:no-preference){.lost__ghost{animation:ghost 2.6s ease-in-out infinite}}
@keyframes ghost{50%{opacity:.03}}

/* ---------- Consent ---------- */
.consent{position:fixed;inset-inline-start:var(--gut);bottom:var(--gut);z-index:80;max-width:520px;padding:1.25rem 1.4rem;background:var(--paper);color:var(--ink);box-shadow:0 20px 50px #0007}
.consent[hidden]{display:none}
.consent p{font-size:.95rem;line-height:1.5}
.consent__actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.consent .btn--solid{background:var(--ink);color:var(--paper)}

/* ---------- Brand exit wipe ---------- */
.wipe{position:fixed;inset:0;z-index:95;pointer-events:none;background:linear-gradient(110deg,var(--dopa-1),var(--dopa-2) 50%,var(--dopa-3));
  clip-path:polygon(0 0,0 0,-64vh 100%,-64vh 100%);transition:clip-path .65s cubic-bezier(.7,0,.3,1)}
.wipe.is-on{clip-path:polygon(0 0,calc(100% + 64vh) 0,100% 100%,-64vh 100%)}
.wipe[data-brand="matchmind"]{background:linear-gradient(110deg,var(--mm-ink),var(--mm-1) 55%,var(--mm-3))}
.wipe[data-brand="yuniverse"]{background:linear-gradient(110deg,var(--yu-ink),#4b2f57 55%,var(--yu-gold))}
.wipe[data-brand="oddly"]{background:linear-gradient(110deg,var(--od-ink),var(--od-mustard) 55%,var(--od-sun))}

/* ---------- Cursor (fine pointers only; added by JS) ---------- */
.cur{position:fixed;left:0;top:0;z-index:99;pointer-events:none;will-change:transform}
.cur--dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--white);border-radius:50%;mix-blend-mode:difference}
.cur--ring{width:38px;height:38px;margin:-19px 0 0 -19px}
.cur--ring i{position:absolute;inset:0;border:1.5px solid var(--lilac);border-radius:50%;transition:transform .35s var(--ease),border-radius .35s var(--ease),border-color .25s,opacity .25s,background-color .25s}
html.has-cursor[data-cur="link"] .cur--ring i{transform:scale(1.5);background:#b9a8f51a}
html.has-cursor[data-cur="slot"] .cur--ring i{border-radius:0;transform:rotate(45deg) scale(.9);border-color:var(--white)}
html.has-cursor[data-cur="dopafix"] .cur--ring i{transform:scale(1.7);border-color:var(--dopa-1);background:#f5a91d1f}
html.has-cursor[data-cur="matchmind"] .cur--ring i{transform:scale(1.7);border-color:var(--mm-1);background:#ea023a1f}
html.has-cursor[data-cur="yuniverse"] .cur--ring i{transform:scale(1.7);border-color:var(--yu-gold);background:#d8a84e1f}
html.has-cursor[data-cur="oddly"] .cur--ring i{transform:scale(1.7);border-color:var(--od-sun);background:#f7c0441f}
html.has-cursor[data-cur="text"] .cur--ring i,html.has-cursor[data-cur="text"] .cur--dot{opacity:0}
html.has-cursor.is-down .cur--ring i{transform:scale(.8)}
html.has-cursor,html.has-cursor a,html.has-cursor button,html.has-cursor [tabindex]{cursor:none}
html.has-cursor input,html.has-cursor textarea,html.has-cursor select{cursor:auto}
@media (forced-colors:active){.cur{display:none}html.has-cursor,html.has-cursor *{cursor:auto!important}}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .hero__text{grid-column:1/10}
  .model__mark{grid-column:1/7}
  .model__text{grid-column:7/13}
}
@media (max-width:900px){
  :root{--nav-h:64px}
  .nav__links,.nav__progress{display:none}
  .nav__menu{display:inline-flex}
  .hero{grid-template-columns:1fr;align-content:center;padding-top:calc(var(--nav-h) + 1rem)}
  .hero__mark{grid-column:1;grid-row:1;justify-self:start;width:62%;max-width:360px;margin-bottom:2rem}
  .hero__text{grid-column:1;grid-row:2}
  .hero::before{-webkit-mask:linear-gradient(180deg,#000,transparent 55%);mask:linear-gradient(180deg,#000,transparent 55%)}
  .about,.contact,.register__head,.register__body,.dopafix__cols{grid-template-columns:1fr}
  .about__title,.about__body,.contact__intro,.form,.register__title,.register__sub,.register__map,.register__detail,.dopafix__about,.dopafix__list{grid-column:1}
  .register__sub{margin-top:1.25rem}
  .register__detail{position:static;padding-top:2.5rem;min-height:0}
  .dopafix__list{margin-top:2rem}
  .matchmind__inner,.matchmind__cols{grid-template-columns:1fr}
  .matchmind__head,.matchmind__portal,.matchmind__cols,.matchmind__about,.matchmind__list,.matchmind__foot{grid-column:1}
  .matchmind__portal{grid-row:1;justify-self:start;width:min(180px,46vw);margin:0 0 1.5rem}
  .matchmind__list{margin-top:2rem}
  .yuniverse__inner,.yuniverse__cols{grid-template-columns:1fr}
  .yuniverse__head,.yuniverse__portal,.yuniverse__cols,.yuniverse__about,.yuniverse__list,.yuniverse__foot{grid-column:1}
  .yuniverse__portal{grid-row:1;justify-self:start;width:min(180px,46vw);margin:0 0 1.5rem}
  .yuniverse__list{margin-top:2rem}
  .oddly__inner,.oddly__cols{grid-template-columns:1fr}
  .oddly__head,.oddly__portal,.oddly__cols,.oddly__about,.oddly__list,.oddly__foot{grid-column:1}
  .oddly__portal{grid-row:1;justify-self:start;width:min(180px,46vw);margin:0 0 1.5rem}
  .oddly__list{margin-top:2rem}
  .model__stage{grid-template-columns:1fr;row-gap:2.5rem}
  .model__mark,.model__text{grid-column:1}
  .model__mark{max-width:380px;width:78%;justify-self:center}
  .about__not{grid-template-columns:1fr;gap:1.5rem}
  .builds__head{grid-template-columns:1fr;row-gap:1rem}
  .builds__title,.builds__head p{grid-column:1}
  .builds__list{grid-template-columns:1fr}
  .builds__list li{min-height:0}
  .builds__base{grid-template-columns:1fr;row-gap:.6rem}
  .builds__base b,.builds__base span{grid-column:1}
  .hero__title{line-height:.95}
}
@media (max-width:560px){
  .form{grid-template-columns:1fr}
  .slot{padding:.8rem .9rem;gap:.8rem}
  /* phones: the status moves under the name, so a brand name always has the whole slot */
  .slot{display:grid;grid-template-columns:auto auto minmax(0,1fr);column-gap:.8rem;row-gap:.2rem;align-items:center}
  .slot__no,.slot__mark{grid-row:1/3}
  .slot__name,.slot__status{grid-column:-2;margin-inline-start:0}
  .slot--active{min-height:80px;--sk:1.6rem}
  .slot--active .slot__name{font-size:1.35rem}
  .slot__status{font-size:.78rem}
  .register__slots{--step:1rem}
  .dopafix__list li,.matchmind__list li,.yuniverse__list li,.oddly__list li{grid-template-columns:1fr;gap:.25rem}
  .hero__actions .btn{flex:1 1 auto;justify-content:center}
  .foot__fine > span:first-child{flex-basis:100%}
}
@media (max-width:340px){.slot--active .slot__name{font-size:1.15rem}}
/* Model chapter becomes scroll-driven only where there is room for it. */
@media (min-width:901px) and (min-height:620px){
  html.js .model{height:240vh}
  html.js .model__stage{position:sticky;top:0;min-height:100vh;padding-block:calc(var(--nav-h) + 1rem) 2rem}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .band__track{animation:none;flex-wrap:wrap;width:auto}
  .band__track span:nth-child(n+2){display:none}
}

/* ---------- Print ---------- */
@media print{
  body{background:#fff;color:#000}
  body::after,.nav,.sheet,.band,.consent,.wipe,.cur,.form{display:none!important}
  .chapter,.dopafix,.matchmind,.yuniverse,.oddly,.hero{min-height:0;padding:1.5rem 0;background:none!important;color:#000}
  .dopafix__wash,.matchmind__wash,.yuniverse__wash,.oddly__wash{display:none}
}

/* ---------- Languages (2026-10-17): header menu, footer list ---------- */
.lang{position:relative;flex:none}
.lang__toggle{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.4rem .2rem;cursor:pointer;list-style:none;color:var(--mute);font-weight:500;transition:color .2s}
.lang__toggle::-webkit-details-marker{display:none}
.lang__toggle:hover,.lang[open] .lang__toggle{color:var(--white)}
.lang__icon{flex:none}
.lang__list{position:absolute;inset-inline-end:0;top:calc(100% + .5rem);z-index:2;margin:0;padding:.4rem 0;list-style:none;min-width:15rem;max-height:min(70vh,34rem);overflow:auto;background:var(--ink-raise);border:1px solid #ffffff1f;box-shadow:0 18px 40px #00000073}
.lang__list a{display:flex;align-items:center;gap:.75rem;min-height:44px;padding:.55rem 1.1rem;text-decoration:none;color:var(--paper)}
.lang__list a:hover{background:#ffffff0f;color:var(--white)}
.lang__list a::before{content:"";flex:none;width:.45em;height:.45em;border:1.5px solid transparent;transform:rotate(45deg)}
.lang__list a[aria-current="true"]{color:var(--white);font-weight:600}
.lang__list a[aria-current="true"]::before{border-color:var(--lilac);background:var(--lilac)}
.lang__list :focus-visible{outline-offset:-3px}
@media (prefers-reduced-motion:no-preference){
  .lang[open] .lang__list{animation:lang-in .18s var(--ease)}
  @keyframes lang-in{from{opacity:0;transform:translateY(-4px)}}
}
.foot__langs{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem;margin-top:2.5rem;font-size:.95rem}
.foot__langs a{text-decoration:none;padding:.35rem 0}
.foot__langs a:hover{color:var(--white)}
.foot__langs a[aria-current="true"]{color:var(--white);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em}
.foot__legal{margin-top:1rem;font-size:.85rem}
/* a language whose hero has a word too long for the smallest phones gets a lower floor ("Construyendo" at 320px) */
.hero__title:lang(es){font-size:clamp(2.6rem,10.5vw,10.5rem)}
@media (max-width:560px){
  .lang__now{display:none}
  .lang__toggle{min-width:44px;justify-content:center}
  .lang__list{position:fixed;inset-inline:var(--gut);top:calc(var(--nav-h) - .25rem);min-width:0}   /* phones: the full width under the bar */
}

/* ---------- Right-to-left pages (ar, he, fa) and non-Latin scripts (2026-10-17) ---------- */
/* Layout mirrors through logical properties and the grid; these are the pieces that need a hand. The mark and logos are never mirrored. */
[dir="rtl"] .nav__links a::after,[dir="rtl"] .strike::after{transform-origin:right}
[dir="rtl"] .band__track{animation-name:band-rtl}
@keyframes band-rtl{to{transform:translateX(50%)}}
[dir="rtl"] .band span{padding:1.1rem 0 1.1rem 1.25rem}
[dir="rtl"] .form select{background-position:left .45rem center,left .05rem center;padding-right:.1rem;padding-left:1.5rem}
/* Arabic and Persian join their letters: no tracking, and room for the tall marks above and below */
:lang(ar) h1,:lang(ar) h2,:lang(ar) h3,:lang(fa) h1,:lang(fa) h2,:lang(fa) h3,:lang(ar) .about__not dt,:lang(fa) .about__not dt,:lang(ar) .band span,:lang(fa) .band span,:lang(ar) .slot__name,:lang(fa) .slot__name,:lang(ar) .model__list b,:lang(fa) .model__list b{letter-spacing:0}
:lang(ar) .hero__title,:lang(fa) .hero__title,:lang(he) .hero__title{line-height:1.15}
:lang(ar) h2,:lang(fa) h2,:lang(ar) h3,:lang(fa) h3{line-height:1.3}
:lang(ar) body,:lang(fa) body{line-height:1.8}
/* Chinese, Japanese and Korean: the system's own typeface, no negative tracking, no breaks inside Korean words */
:lang(zh) h1,:lang(zh) h2,:lang(zh) h3,:lang(ja) h1,:lang(ja) h2,:lang(ja) h3,:lang(ko) h1,:lang(ko) h2,:lang(ko) h3,:lang(zh) .about__not dt,:lang(ja) .about__not dt,:lang(ko) .about__not dt{letter-spacing:0}
:lang(zh) .hero__title,:lang(ja) .hero__title,:lang(ko) .hero__title{line-height:1.12}
:lang(zh),:lang(ja){line-break:strict}
:lang(ko){word-break:keep-all}
[dir="rtl"] .slot::before{transform:skewX(calc(var(--skew) * -1))}   /* the parallelogram leans the other way, like the mirrored stair */