/* Paralllelll Universe — design tokens (fonts, colors, typography, spacing, effects, motion, base) */

/* fonts */
@font-face{font-family:"Patugo Demo";src:url("../fonts/PatugoDemo-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Pixelify+Sans:wght@400..700&display=swap");

:root{
/* ---- Base palette ---- */
--paper:#F2F0DA;
--paper-2:#FBF7E9;
--paper-3:#E6E3C9;
--ink:#201E1A;
--ink-2:#4A463E;
--ink-3:#8A8474;

--peach:#F0A860;
--peach-light:#FFC078;
--peach-pale:#FFE0BE;
--coral:#FF9048;
--red:#FF3048;
--red-deep:#D83030;
--pink:#F06090;
--pink-light:#F5A8C8;
--pink-pale:#FBDCE6;
--blush:#F5A8A8;
--periwinkle:#7B92FF;
--blue:#4860F0;
--sky:#60A8F0;
--sky-pale:#C0D8F0;
--lilac:#C0A8E8;
--lilac-pale:#E4D8F5;
--mint:#7FD6C0;
--mint-pale:#C6EBE0;
--sage:#C0D8A8;
--butter:#FFD98A;
--butter-pale:#FBEFC6;
--cocoa:#8A5A3C;
--cocoa-dark:#5A3A28;

/* ---- Semantic aliases ---- */
--bg-page:var(--paper);
--bg-page-alt:var(--butter-pale);
--surface-card:var(--paper-2);
--surface-card-alt:var(--pink-pale);
--surface-sunken:var(--paper-3);
--surface-bubble:#FFFDF6;
--surface-invert:var(--ink);

--text-body:var(--ink);
--text-muted:var(--ink-2);
--text-meta:var(--ink-3);
--text-invert:var(--paper-2);
--text-link:var(--blue);
--text-link-hover:var(--pink);

--border-ink:var(--ink);
--border-soft:rgba(32,30,26,.22);

--accent-primary:var(--red);
--accent-primary-text:var(--paper-2);
--accent-secondary:var(--periwinkle);
--accent-tertiary:var(--mint);
--accent-highlight:var(--butter);

--focus-ring:var(--blue);
--price-tag:var(--butter);
--sold-out:var(--ink-3);

--wash-peach:var(--peach-pale);
--wash-mint:var(--mint-pale);
--wash-lilac:var(--lilac-pale);
--wash-sky:var(--sky-pale);
--wash-pink:var(--pink-pale);
--wash-butter:var(--butter-pale);

/* ---- Typography ---- */
--font-lettering:"Patugo Demo","Figtree","Helvetica Neue",sans-serif;
--font-body:"Figtree","Helvetica Neue",sans-serif;
--font-arcade:"Pixelify Sans","Courier New",monospace;

--text-2xs:11px;
--text-xs:13px;
--text-sm:15px;
--text-base:17px;
--text-lg:20px;
--text-xl:25px;
--text-2xl:31px;
--text-3xl:39px;
--text-4xl:49px;
--text-5xl:61px;
--text-6xl:76px;

--leading-tight:1.05;
--leading-snug:1.2;
--leading-body:1.55;
--leading-loose:1.7;

--weight-body:400;
--weight-medium:500;
--weight-bold:700;
--weight-lettering:600;
--weight-lettering-heavy:800;

--tracking-lettering:0.02em;
--tracking-caps:0.10em;
--tracking-arcade:0.06em;
--tracking-body:0;

/* ---- Spacing ---- */
--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:24px;
--space-6:32px;
--space-7:48px;
--space-8:64px;
--space-9:96px;
--space-10:128px;

--gutter:var(--space-5);
--section-y:var(--space-9);
--panel-pad:var(--space-5);

--container:1180px;
--container-narrow:720px;
--container-wide:1440px;

/* ---- Effects ---- */
--stroke-hair:1.5px;
--stroke:2px;
--stroke-bold:3px;
--stroke-heavy:4px;
--border-panel:var(--stroke-bold) solid var(--border-ink);
--border-control:var(--stroke) solid var(--border-ink);

--radius-sm:6px;
--radius-md:12px;
--radius-lg:20px;
--radius-xl:32px;
--radius-pill:999px;
--radius-wobble:18px 26px 20px 30px / 28px 18px 30px 20px;
--radius-bubble:26px 26px 26px 8px;

--shadow-sticker:3px 3px 0 var(--ink);
--shadow-panel:6px 6px 0 var(--ink);
--shadow-panel-lg:10px 10px 0 var(--ink);
--shadow-colour:6px 6px 0 var(--periwinkle);
--shadow-pressed:1px 1px 0 var(--ink);
--shadow-inset-page:inset 0 0 0 var(--stroke-bold) var(--ink);

--dot-grid:radial-gradient(var(--border-soft) 1px,transparent 1px);
--dot-grid-size:14px 14px;

/* Canvas texture for plain section backgrounds — a fine SVG noise grain
   (feTurbulence, tinted to --ink-3 so it reads warm, not cold gray) layered
   over a hairline crosshatch mimicking a plain weave. Both layers use
   low-alpha rgba/SVG-alpha values so normal alpha compositing over
   whatever background-color sits underneath is enough — no blend-mode
   needed. Applied via background-image alongside background-color (never
   the `background` shorthand, which would reset this back to none) on
   large flat section backdrops only — not the header/footer, and not
   bordered card/button surfaces, which should stay crisp. */
--canvas-texture:
  url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22140%22%20height%3D%22140%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.85%22%20numOctaves%3D%222%22%20stitchTiles%3D%22stitch%22%20result%3D%22t%22/%3E%3CfeColorMatrix%20in%3D%22t%22%20type%3D%22matrix%22%20values%3D%220%200%200%200%200.5411%20%200%200%200%200%200.5176%20%200%200%200%200%200.4549%20%200%200%200%200.09%200%22/%3E%3C/filter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url%28%23n%29%22/%3E%3C/svg%3E"),
  repeating-linear-gradient(90deg,rgba(32,30,26,.045) 0,rgba(32,30,26,.045) 1px,transparent 1px,transparent 4px),
  repeating-linear-gradient(0deg,rgba(32,30,26,.045) 0,rgba(32,30,26,.045) 1px,transparent 1px,transparent 4px);

/* ---- Motion ---- */
--dur-fast:120ms;
--dur:200ms;
--dur-slow:380ms;
--dur-loop:14s;

--ease-bounce:cubic-bezier(.34,1.56,.64,1);
--ease-out:cubic-bezier(.22,.61,.36,1);
--ease-in-out:cubic-bezier(.65,0,.35,1);
--ease-wobble:cubic-bezier(.5,-0.3,.5,1.3);

--hover-lift:translate(-2px,-2px);
--press-sink:translate(2px,2px);
}

/* ---- Base ---- */
/* overflow-x:clip only — NOT paired with an overflow-y value, and NOT
   overflow-x:hidden. This is a defensive backstop against .lp-wall-style
   width:100%-on-fixed bugs (see landing.css) still slipping a stray
   element past the viewport edge somewhere. Two broken attempts before
   this one, both confirmed live, both worth remembering:
   - overflow-x:hidden forces overflow-y to a non-visible computed value
     too (a real CSS rule: overflow-x/-y can't be split visible/non-visible
     — the visible one loses), which turns body/html into their own
     scroll container and breaks every position:sticky on the page.
   - overflow-x:clip PAIRED with overflow-y:clip goes further and disables
     real user scrolling on that axis entirely, not just visual overflow —
     window.scrollTo() still "worked" under it, which is what let that
     particular version ship without the total scroll freeze being caught.
   overflow-x:clip on its own, with overflow-y simply left unset, doesn't
   trigger either problem: overflow-y stays "visible" (the clip/hidden
   forced-pairing rule turns out to be specific to hidden, not clip) and
   normal page scrolling is completely unaffected. Confirmed with real
   simulated scroll input, not just window.scrollTo(), after being burned
   by that gap once already. */
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--bg-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--text-base);line-height:var(--leading-body);text-wrap:pretty;overflow-x:clip}
h1,h2,h3,h4,h5{font-family:var(--font-lettering);font-weight:var(--weight-lettering-heavy);line-height:var(--leading-tight);letter-spacing:var(--tracking-lettering);margin:0 0 var(--space-4)}
h1{font-size:var(--text-5xl)}h2{font-size:var(--text-3xl)}h3{font-size:var(--text-xl)}h4{font-size:var(--text-lg)}
p{margin:0 0 var(--space-4)}
a{color:var(--text-link);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;transition:color var(--dur) var(--ease-out)}
a:hover{color:var(--text-link-hover)}
:focus-visible{outline:var(--stroke-bold) solid var(--focus-ring);outline-offset:3px}
img{max-width:100%;display:block}
*,*::before,*::after{box-sizing:border-box}