/* ==========================================================================
   sorted — website stylesheet
   Route 2 (paper + fat outlines + hard shadows), reconciled with the
   "New Website Copies" and "Sorted Website" decks and the Figma final version.
   Colours are MEASURED from those decks, not guessed. See BUILD-NOTES.md.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* ground + ink */
  --paper:      #F4F5F0;   /* measured, PPT "New Website Copies" */
  --paper-warm: #F2F1ED;   /* measured, PPT "Sorted Website" */
  --paper-sink: #E8E8E1;   /* recessed panels */
  --ink:        #111111;   /* outlines, body */
  --ink-deep:   #0C0C01;   /* measured: full-bleed dark sections */
  --ink-mute:   #5A5A55;   /* secondary body */

  /* accents — measured off the decks */
  --yellow:      #F2FF00;  /* the brand yellow (logo) */
  --yellow-soft: #F4FF53;  /* the deck's highlight/fill yellow */
  --violet:      #6B2EFF;  /* the deck's electric violet (type accent) */
  --violet-soft: #A35DF6;  /* violet card fill */
  --orange:      #F0913A;
  --green:       #89FC9D;
  --cyan:        #7DEDFC;
  --blue:        #60A1F8;
  --pink:        #F48FB8;

  /* hard-shadow system — zero blur, always */
  --line: 3px;
  --shadow:    6px 6px 0 var(--ink);
  --shadow-lg: 9px 9px 0 var(--ink);
  --shadow-sm: 4px 4px 0 var(--ink);
  --radius: 14px;

  /* rhythm */
  --pad-section: clamp(4.5rem, 10vw, 8rem);
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --maxw: 78rem;

  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io:  cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height:1.55;
  font-weight:500;
  overflow-x:clip;                 /* clip, never hidden — hidden kills sticky */
  -webkit-font-smoothing:antialiased;
}
img,svg,video{ max-width:100%; display:block; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
h1,h2,h3,h4,p,ul,ol,figure,blockquote{ margin:0; }
ul,ol{ padding:0; list-style:none; }
:focus-visible{ outline:3px solid var(--violet); outline-offset:3px; border-radius:4px; }
::selection{ background:var(--yellow-soft); color:var(--ink); }

/* ---------- 3. Type scale ---------- */
.display{                                   /* Anton — the loud condensed caps */
  font-family:'Anton', 'Arial Narrow', sans-serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:0.005em;
  line-height:0.92;
  font-size:clamp(2.6rem, 7.4vw, 6.2rem);
}
.display--sm{ font-size:clamp(2rem, 4.6vw, 3.6rem); }
/* looser than .display: at this size the highlight blocks need room or the
   filled boxes on one line collide with the text on the next */
.display--xl{ font-size:clamp(2.75rem, 8vw, 7rem); line-height:1.04; }

.headline{                                  /* Figtree — the friendly sentence-case voice */
  font-family:'Figtree', sans-serif;
  font-weight:800;
  letter-spacing:-0.03em;
  line-height:1.02;
  font-size:clamp(2rem, 5.2vw, 4.25rem);
}
.headline--sm{ font-size:clamp(1.5rem, 3vw, 2.25rem); line-height:1.1; }

.label{                                     /* Space Mono — every eyebrow and chip */
  font-family:'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight:700;
  font-size:0.75rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
}
.lede{
  font-size:clamp(1.0625rem, 0.98rem + 0.42vw, 1.3125rem);
  line-height:1.5;
  font-weight:500;
  max-width:56ch;
}
.muted{ color:var(--ink-mute); }
.ink-violet{ color:var(--violet); }
.ink-yellow{ color:var(--yellow-soft); }

/* ---------- 4. Layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--pad-section); position:relative; }
.section--tight{ padding-block:clamp(3rem,6vw,5rem); }
.section--dark{ background:var(--ink-deep); color:var(--paper); }
.section--dark .muted{ color:rgb(255 255 255 / 0.62); }
.section--violet{ background:var(--violet-soft); }
.section--yellow{ background:var(--yellow-soft); }
.stack > * + *{ margin-top:var(--gap, 1.25rem); }
.grid-2{ display:grid; gap:clamp(1.5rem,4vw,3.5rem); grid-template-columns:1fr; align-items:start; }
@media (min-width:900px){
  .grid-2{ grid-template-columns:1fr 1fr; }
  .grid-2--wide-left{ grid-template-columns:1.15fr 0.85fr; }
  .grid-2--wide-right{ grid-template-columns:0.85fr 1.15fr; }
}
.grid-3{ display:grid; gap:clamp(1.25rem,2.5vw,2rem); grid-template-columns:1fr; }
@media (min-width:760px){ .grid-3{ grid-template-columns:repeat(3,1fr); } }

/* ---------- 5. Graph-paper ground ---------- */
.graph{ position:relative; isolation:isolate; }
.graph::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    repeating-linear-gradient(to right,  rgb(17 17 17 / 0.075) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(to bottom, rgb(17 17 17 / 0.075) 0 1px, transparent 1px 40px);
}
.section--dark.graph::before{
  background-image:
    repeating-linear-gradient(to right,  rgb(255 255 255 / 0.075) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(to bottom, rgb(255 255 255 / 0.075) 0 1px, transparent 1px 40px);
}
.graph--fade::before{
  -webkit-mask-image:radial-gradient(ellipse 90% 78% at 50% 42%, #000 45%, transparent 100%);
          mask-image:radial-gradient(ellipse 90% 78% at 50% 42%, #000 45%, transparent 100%);
}

/* ---------- 6. Hard-shadow primitives ---------- */
/* .card always paints a paper ground, so it must also own its text colour —
   otherwise it inherits paper-white inside .section--dark and disappears */
.card{
  background:var(--paper);
  color:var(--ink);
  border:var(--line) solid var(--ink);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:clamp(1.25rem,2.4vw,1.9rem);
}
.section--dark .card .muted{ color:var(--ink-mute); }
.card--flat{ box-shadow:none; }
.card--sharp{ border-radius:0; }
.card--lift{ transition:transform .15s var(--ease-io), box-shadow .15s var(--ease-io); }
.card--lift:hover, .card--lift:focus-within{ transform:translate(-3px,-3px); box-shadow:var(--shadow-lg); }

.chip{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.42rem .8rem;
  border:2px solid var(--ink); border-radius:8px;
  background:var(--paper); box-shadow:3px 3px 0 var(--ink);
  white-space:nowrap;
}
/* filled chips must carry their own colour — inside .section--dark they would
   otherwise inherit paper-white and vanish into their own fill */
.chip--yellow{ background:var(--yellow-soft); color:var(--ink); }
.chip--violet{ background:var(--violet); color:#fff; }
.chip--ink{ background:var(--ink); color:var(--paper); }
.chip--tilt{ transform:rotate(-2.5deg); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.85rem 1.5rem;
  font-family:'Space Mono', monospace; font-weight:700; font-size:.8125rem;
  letter-spacing:.1em; text-transform:uppercase; text-decoration:none;
  border:var(--line) solid var(--ink); border-radius:10px;
  background:var(--yellow-soft); color:var(--ink);
  box-shadow:var(--shadow); cursor:pointer;
  transition:transform .15s var(--ease-io), box-shadow .15s var(--ease-io);
}
.btn:hover,.btn:focus-visible{ transform:translate(-3px,-3px); box-shadow:var(--shadow-lg); }
.btn:active{ transform:translate(2px,2px); box-shadow:var(--shadow-sm); }
.btn--ink{ background:var(--ink); color:var(--paper); }
.btn--ink:hover{ box-shadow:9px 9px 0 var(--yellow-soft); }
.btn--paper{ background:var(--paper); }
.btn--ghost{ background:transparent; box-shadow:none; }
.btn--ghost:hover{ background:var(--paper); box-shadow:var(--shadow-sm); transform:translate(-2px,-2px); }
.section--dark .btn--ghost{ color:var(--paper); border-color:var(--paper); }
.section--dark .btn--ghost:hover{ background:var(--paper); color:var(--ink); box-shadow:4px 4px 0 var(--yellow-soft); }

/* highlighter — the deck's signature "word in a block" */
.mark-hl{ background:var(--yellow-soft); box-shadow:.18em 0 0 var(--yellow-soft), -.18em 0 0 var(--yellow-soft); }
.mark-hl--violet{ background:var(--violet); color:#fff; box-shadow:.18em 0 0 var(--violet), -.18em 0 0 var(--violet); }
.mark-hl--ink{ background:var(--ink); color:var(--paper); box-shadow:.18em 0 0 var(--ink), -.18em 0 0 var(--ink); }

/* the round stamp badge */
.stamp{
  display:grid; place-content:center; text-align:center;
  width:clamp(88px,11vw,132px); aspect-ratio:1; border-radius:50%;
  background:var(--yellow-soft); border:var(--line) solid var(--ink);
  box-shadow:var(--shadow); transform:rotate(-8deg);
  font-family:'Space Mono',monospace; font-weight:700; line-height:1.15;
}
.stamp b{ display:block; font-size:clamp(1.05rem,1.7vw,1.45rem); }
.stamp span{ font-size:.6rem; letter-spacing:.1em; }

/* sticky-note card — always ink on its own fill, on any ground */
.note{
  border:var(--line) solid var(--ink); border-radius:4px;
  box-shadow:var(--shadow); padding:clamp(1.1rem,2vw,1.6rem);
  color:var(--ink);
}
.section--dark .note .muted{ color:var(--ink-mute); }
.note--yellow{ background:var(--yellow-soft); }
.note--violet{ background:var(--violet-soft); }
.note--cyan  { background:var(--cyan); }
.note--green { background:var(--green); }
.note--pink  { background:var(--pink); }
.note--paper { background:#fff; }

/* photo frame (polaroid) */
.frame{
  background:#fff; padding:12px 12px 14px;
  border:var(--line) solid var(--ink); box-shadow:var(--shadow-lg);
}
.frame img{ width:100%; height:auto; }
.frame figcaption{
  margin-top:.8rem; font-family:'Space Mono',monospace; font-weight:700;
  font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
}
.tilt-l{ transform:rotate(-2deg); }
.tilt-r{ transform:rotate(2deg); }

/* ---------- 7. Logo lockups ---------- */
.wordmark{ display:inline-block; height:1em; width:auto; vertical-align:baseline; }
.wordmark path{ fill:currentColor; }
.mark{ display:inline-block; width:1em; height:1em; }
.mark path{ fill:currentColor; }

/* the nav's yellow logo plate */
.logo-plate{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.42rem .7rem;
  background:var(--yellow-soft); border:var(--line) solid var(--ink);
  border-radius:6px; box-shadow:var(--shadow-sm); color:var(--ink);
  transition:transform .15s var(--ease-io), box-shadow .15s var(--ease-io);
}
.logo-plate .wordmark{ height:22px; }
a.logo-plate:hover{ transform:translate(-2px,-2px); box-shadow:var(--shadow); }

/* ---------- 8. Nav ---------- */
.nav{
  position:sticky; top:0; z-index:60;
  background:var(--paper); border-bottom:var(--line) solid var(--ink);
}
.nav__in{
  display:flex; align-items:center; gap:1.25rem;
  min-height:70px; padding-block:.6rem;
}
.nav__links{ display:none; margin-left:auto; align-items:center; gap:clamp(.9rem,2vw,1.9rem); }
@media (min-width:1060px){ .nav__links{ display:flex; } }
.nav__links a{
  font-family:'Space Mono',monospace; font-weight:700; font-size:.78rem;
  letter-spacing:.1em; text-transform:uppercase; text-decoration:none;
  padding:.3rem 0; border-bottom:3px solid transparent;
}
.nav__links a:hover{ border-bottom-color:var(--violet); }
.nav__links a[aria-current="page"]{ border-bottom-color:var(--ink); }
.nav__cta{ margin-left:auto; display:none; }
@media (min-width:1060px){ .nav__cta{ margin-left:.5rem; display:block; } }
.nav__cta .btn{ padding:.7rem 1.15rem; }
.nav__burger{
  margin-left:auto; display:grid; place-content:center; gap:5px;
  width:46px; height:46px; background:var(--paper);
  border:var(--line) solid var(--ink); border-radius:10px; box-shadow:var(--shadow-sm);
  cursor:pointer;
}
@media (min-width:1060px){ .nav__burger{ display:none; } }
.nav__burger i{ display:block; width:20px; height:3px; background:var(--ink); border-radius:2px; }

.menu{
  position:fixed; inset:0; z-index:70; display:none;
  background:var(--paper); padding:clamp(1.5rem,6vw,3rem);
  overflow-y:auto;
}
.menu[data-open="true"]{ display:block; }
.menu__close{
  position:absolute; top:1rem; right:1rem; width:46px; height:46px;
  background:var(--paper); border:var(--line) solid var(--ink);
  border-radius:10px; box-shadow:var(--shadow-sm); cursor:pointer; font-size:1.3rem; line-height:1;
}
.menu ul{ margin-top:4rem; display:grid; gap:.35rem; }
.menu a{
  display:block; text-decoration:none; padding:.3rem 0;
  font-family:'Anton',sans-serif; text-transform:uppercase;
  font-size:clamp(2rem,10vw,3.6rem); line-height:1.05;
}
.menu a:hover{ color:var(--violet); }
.menu .btn{ margin-top:1.5rem; }

/* ---------- 9. Marquee (ticker + client logos) ---------- */
.marquee{
  display:flex; overflow:hidden; width:100%;
  -webkit-user-select:none; user-select:none;
}
.marquee__track{
  display:flex; flex-shrink:0; align-items:center;
  gap:var(--mq-gap, 2.5rem);
  padding-right:var(--mq-gap, 2.5rem);
  min-width:100%;
  animation:mq-scroll var(--mq-speed, 40s) linear infinite;
  will-change:transform;
}
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee--reverse .marquee__track{ animation-direction:reverse; }
@keyframes mq-scroll{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-100%,0,0); } }

/* the yellow tape ticker band */
.ticker{
  background:var(--yellow-soft);
  border-block:var(--line) solid var(--ink);
  padding-block:.7rem;
  --mq-gap:1.5rem; --mq-speed:34s;
}
.ticker .marquee__track > span{
  display:inline-flex; align-items:center; gap:1.5rem;
  font-family:'Space Mono',monospace; font-weight:700;
  font-size:.8125rem; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
}
.ticker .star{ width:12px; height:12px; flex:0 0 auto; }
/* rotated, so it has to overhang both edges or the corners show daylight */
.ticker--tape{
  transform:rotate(-1.4deg); position:relative; z-index:1;
  width:106%; margin-left:-3%;
}

/* client logo strip — logos sit on paper, no plates, no boxes */
.logos{ --mq-gap:clamp(2.5rem,5vw,4.5rem); --mq-speed:52s; padding-block:.5rem; }
.logos .marquee__track{ align-items:center; }
.logos img{
  height:clamp(30px,4.2vw,46px); width:auto; flex:0 0 auto;
  object-fit:contain;
  filter:grayscale(1) contrast(1.05); opacity:.72;
  transition:filter .25s var(--ease-io), opacity .25s var(--ease-io), transform .25s var(--ease-io);
}
.logos img:hover{ filter:none; opacity:1; transform:scale(1.06); }
/* typographic stand-in used until the real artwork lands */
.logos .logo-name{
  flex:0 0 auto; white-space:nowrap;
  font-family:'Figtree',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size:clamp(1.05rem,2.1vw,1.6rem);
  color:var(--ink); opacity:.5;
  transition:opacity .25s var(--ease-io), color .25s var(--ease-io);
}
.logos .logo-name:hover{ opacity:1; color:var(--violet); }
.logos__edge{ position:relative; }
.logos__edge::before,.logos__edge::after{
  content:''; position:absolute; top:0; bottom:0; width:clamp(40px,8vw,110px); z-index:2; pointer-events:none;
}
.logos__edge::before{ left:0;  background:linear-gradient(to right, var(--paper), rgb(244 245 240 / 0)); }
.logos__edge::after { right:0; background:linear-gradient(to left,  var(--paper), rgb(244 245 240 / 0)); }
.section--dark .logos__edge::before{ background:linear-gradient(to right, var(--ink-deep), rgb(12 12 1 / 0)); }
.section--dark .logos__edge::after { background:linear-gradient(to left,  var(--ink-deep), rgb(12 12 1 / 0)); }
.section--dark .logos .logo-name{ color:var(--paper); opacity:.55; }
.section--dark .logos .logo-name:hover{ color:var(--yellow-soft); opacity:1; }
.section--dark .logos img{ filter:grayscale(1) invert(1) contrast(1.1); }
.section--dark .logos img:hover{ filter:none; }

/* ---------- 10. Reveal-on-scroll ----------
   Opt-in only. The hiding rule is scoped to .js, which main.js puts on <html>
   before anything else can fail — so with JS off, blocked, or erroring, every
   section is simply visible rather than stuck at opacity:0. */
.js .reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.js .reveal.is-in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s; }
.reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; }
.reveal[data-d="4"]{ transition-delay:.32s; }
.reveal[data-d="5"]{ transition-delay:.40s; }

/* ---------- 11. Footer ---------- */
.footer{ background:var(--ink-deep); color:var(--paper); padding-block:clamp(3rem,7vw,5rem) 2rem; }
.footer a{ text-decoration:none; }
.footer__grid{ display:grid; gap:2.5rem; grid-template-columns:1fr; }
@media (min-width:820px){ .footer__grid{ grid-template-columns:1.4fr 1fr 1fr; } }
.footer h3{ font-family:'Space Mono',monospace; font-size:.72rem; letter-spacing:.14em;
            text-transform:uppercase; color:rgb(255 255 255 / .5); margin-bottom:.9rem; font-weight:700; }
.footer li + li{ margin-top:.45rem; }
.footer li a:hover{ color:var(--yellow-soft); }
.footer__base{
  margin-top:3rem; padding-top:1.25rem; border-top:1px solid rgb(255 255 255 / .16);
  display:flex; flex-wrap:wrap; gap:.75rem 1.5rem; justify-content:space-between;
  font-family:'Space Mono',monospace; font-size:.7rem; letter-spacing:.08em;
  text-transform:uppercase; color:rgb(255 255 255 / .5);
}

/* ---------- 12. Utilities ---------- */
.center{ text-align:center; }
.center .lede{ margin-inline:auto; }
.row{ display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; }
.row--gap-lg{ gap:1.25rem; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.rule{ height:var(--line); background:var(--ink); border:0; }
.section--dark .rule{ background:rgb(255 255 255 / .25); }

/* ---------- 13. 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; }
  .marquee__track{ animation:none; transform:none; }
  .marquee{ overflow-x:auto; }
  /* must match the .js prefix used above, or it loses on specificity
     and reduced-motion users are left staring at opacity:0 */
  .reveal, .js .reveal{ opacity:1; transform:none; }
}