/* ==========================================================================
   MONO PRINT — Core design system
   Japanese minimalism / Tokyo streetwear / precision manufacturing
   --------------------------------------------------------------------------
   01 TOKENS   02 RESET    03 TYPE     04 LAYOUT   05 BUTTONS
   06 MEDIA    07 REVEAL   08 HEADER   09 FOOTER
   ========================================================================== */

/* --- 01 / TOKENS ---------------------------------------------------------- */
:root{
  /* Ink */
  --ink:        #0A0A0B;
  --ink-2:      #0F0F11;
  --graphite:   #17171A;
  --graphite-2: #212126;
  --steel:      #3A3A40;

  /* Light */
  --ivory:      #F2F0EB;
  --paper:      #FAF9F6;
  --concrete:   #DEDCD6;
  --concrete-2: #CBC8C1;
  --gray:       #8C8A85;
  --gray-2:     #6B6A66;

  /* Accent — used sparingly, always as punctuation.
     Sampled from the logo artwork so UI red and the stamp match exactly. */
  --red:        #FF0100;
  --red-deep:   #C50D05;

  /* Semantic */
  --bg:         var(--paper);
  --fg:         var(--ink);
  --muted:      var(--gray-2);
  --line:       rgba(10,10,11,.14);
  --line-soft:  rgba(10,10,11,.07);

  /* Type */
  --sans: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Rhythm */
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --max: 1680px;
  --sec-y: clamp(6rem, 12vw, 13rem);

  /* Motion */
  --ease: cubic-bezier(.19,1,.22,1);
  --ease-io: cubic-bezier(.65,.05,.36,1);

  --header-h: 76px;
}

/* --- 02 / RESET ----------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
/* overflow-x lives on the root and uses `clip`, not `hidden`: `hidden` on body
   makes body its own scroll container, which swallows wheel scrolling and
   breaks position:sticky for descendants. `clip` suppresses the overflow
   without creating a scrollport. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden;overflow-x:clip;background:var(--ink)}
body,h1,h2,h3,h4,h5,p,figure,blockquote,dl,dd,ul,ol,fieldset{margin:0;padding:0}
ul,ol{list-style:none}
fieldset{border:0}
img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:0}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
/* the hidden attribute must beat component display rules — several toggles
   (calculator gramaz, filter empty state, form success) rely on it */
[hidden]{display:none !important}
::selection{background:var(--red);color:#fff}

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

body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--fg);
  font-size:16px;
  line-height:1.55;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}

/* --- 03 / TYPE SCALE ------------------------------------------------------ */
.d1,.d2,.d3,.d4{
  font-weight:600;
  line-height:.86;
  letter-spacing:-.045em;
  text-transform:uppercase;
}
.d1{font-size:clamp(3.2rem, 10.6vw, 12rem)}
.d2{font-size:clamp(2.5rem, 7.2vw, 7.4rem);line-height:.9}
.d3{font-size:clamp(1.9rem, 4.3vw, 4.3rem);line-height:.94;letter-spacing:-.038em}
.d4{font-size:clamp(1.35rem, 2.1vw, 2.1rem);line-height:1.04;letter-spacing:-.03em}

.mega{
  font-weight:600;
  font-size:clamp(3.6rem, 16vw, 18rem);
  line-height:.8;
  letter-spacing:-.055em;
  text-transform:uppercase;
}

.lead{
  font-size:clamp(1rem, 1.2vw, 1.175rem);
  line-height:1.5;
  color:var(--muted);
  letter-spacing:-.01em;
  max-width:46ch;
}
.body-s{font-size:.9375rem;line-height:1.62;color:var(--muted);max-width:54ch}
.tight{max-width:34ch}

/* Technical annotation — connective tissue of the identity */
.mono{
  font-family:var(--mono);
  font-size:.6875rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:500;
  line-height:1.2;
  color:var(--muted);
}
.mono--xs{font-size:.625rem;letter-spacing:.2em}
.mono--fg{color:var(--fg)}
.mono--red{color:var(--red)}
.num{font-variant-numeric:tabular-nums}

.red{color:var(--red)}

/* Section eyebrow: 05 ——— LABEL */
.eyebrow{
  display:flex;align-items:center;gap:.85rem;
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.2em;
  text-transform:uppercase;font-weight:500;color:var(--muted);
}
.eyebrow .idx{color:var(--red);font-variant-numeric:tabular-nums}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--line);max-width:120px}
.eyebrow--plain::after{display:none}

/* Vertical annotation rail */
.vtext{
  writing-mode:vertical-rl;
  font-family:var(--mono);font-size:.625rem;letter-spacing:.34em;
  text-transform:uppercase;color:var(--muted);
  white-space:nowrap;
}

/* --- 04 / LAYOUT ---------------------------------------------------------- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter)}
.section{padding-block:var(--sec-y);position:relative}
.section--dark,.on-dark{
  background:var(--ink);color:var(--ivory);
  --bg:var(--ink);--fg:var(--ivory);
  --muted:var(--gray);--line:rgba(242,240,235,.16);--line-soft:rgba(242,240,235,.08);
}
.section--ivory{background:var(--ivory)}
.rule{height:1px;background:var(--line);width:100%;border:0;margin:0}

/* Hairline vertical grid overlay — the "precision" substrate */
.gridlines{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  display:grid;grid-template-columns:repeat(6,1fr);
  padding-inline:var(--gutter);max-width:var(--max);margin-inline:auto;
  left:0;right:0;
}
.gridlines i{border-left:1px solid var(--line-soft)}
.gridlines i:last-child{border-right:1px solid var(--line-soft)}
@media (max-width:900px){.gridlines{grid-template-columns:repeat(3,1fr)}}

/* --- 05 / BUTTONS --------------------------------------------------------- */
.btn{
  --btn-fg:#fff;--btn-bg:var(--red);--btn-hover:var(--ink);
  position:relative;display:inline-flex;align-items:center;gap:1.6rem;
  padding:1.15rem 1.55rem;
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  color:var(--btn-fg);background:var(--btn-bg);
  overflow:hidden;isolation:isolate;
  transition:color .5s var(--ease);
  will-change:transform;
}
.btn > span{position:relative;z-index:2;display:block;white-space:nowrap}
.btn::before{
  content:"";position:absolute;inset:0;z-index:1;background:var(--btn-hover);
  transform:scaleY(0);transform-origin:bottom;
  transition:transform .55s var(--ease);
}
.btn:hover::before,.btn:focus-visible::before{transform:scaleY(1)}
.btn:hover,.btn:focus-visible{color:#fff}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--fg);--btn-hover:var(--fg);box-shadow:inset 0 0 0 1px var(--line)}
.btn--ghost:hover,.btn--ghost:focus-visible{color:var(--bg)}
.btn--light{--btn-bg:var(--ivory);--btn-fg:var(--ink);--btn-hover:var(--red)}
.btn--lg{padding:1.45rem 2rem;font-size:.75rem}
.btn--block{width:100%;justify-content:space-between}

/* Animated arrow */
.arw{position:relative;z-index:2;width:26px;height:8px;flex:none;overflow:hidden}
.arw::before,.arw::after{
  content:"";position:absolute;top:50%;left:0;width:100%;height:1px;background:currentColor;
  transition:transform .55s var(--ease);
}
.arw::after{transform:translateX(-135%)}
.arw i{position:absolute;right:0;top:50%;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:translateY(-50%) rotate(45deg)}
.btn:hover .arw::before,.tlink:hover .arw::before{transform:translateX(135%)}
.btn:hover .arw::after,.tlink:hover .arw::after{transform:translateX(0)}

/* Text link with rule that wipes */
.tlink{
  display:inline-flex;align-items:center;gap:.9rem;
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  padding-bottom:.55rem;position:relative;color:var(--fg);
}
.tlink::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--line)}
.tlink::before{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--red);transform:scaleX(0);transform-origin:right;transition:transform .55s var(--ease);z-index:1}
.tlink:hover::before,.tlink:focus-visible::before{transform:scaleX(1);transform-origin:left}
.tlink .arw{width:20px}

:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* Forms: honeypot (hidden from people, visible to bots) + Turnstile slot */
.hp{position:absolute !important;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.captcha{display:grid;gap:.5rem}
.captcha .cf-turnstile{min-height:65px;max-width:400px;box-shadow:inset 0 0 0 1px var(--line);display:grid;place-items:center}
.captcha .cf-turnstile:empty::before{content:"Turnstile widget";font-family:var(--mono);font-size:.5625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

/* --- 06 / IMAGE PLACEHOLDER SYSTEM --------------------------------------- */
/* To use a real photo later: drop <img src="..." alt=""> inside .ph — it covers. */
.ph{
  position:relative;width:100%;aspect-ratio:var(--ar, 3/4);
  background:var(--concrete);
  overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:1rem;
}
.ph > img,.ph > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:3}
.ph::before{
  content:"";position:absolute;inset:0;z-index:1;
  background-image:
    linear-gradient(to right, rgba(10,10,11,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10,10,11,.045) 1px, transparent 1px);
  background-size:44px 44px;
}
.ph::after{
  content:"";position:absolute;left:50%;top:50%;width:20px;height:20px;z-index:2;
  transform:translate(-50%,-50%);
  background:
    linear-gradient(to right, currentColor 0 100%) center/100% 1px no-repeat,
    linear-gradient(to bottom, currentColor 0 100%) center/1px 100% no-repeat;
  color:rgba(10,10,11,.22);
}
.ph__id,.ph__spec{position:relative;z-index:2;font-family:var(--mono);font-size:.5625rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(10,10,11,.4)}
.ph__id{font-weight:600;color:rgba(10,10,11,.55)}
.ph__spec{max-width:32ch;line-height:1.55}
.ph--dark{background:var(--graphite)}
.ph--dark::before{background-image:
  linear-gradient(to right, rgba(242,240,235,.045) 1px, transparent 1px),
  linear-gradient(to bottom, rgba(242,240,235,.045) 1px, transparent 1px)}
.ph--dark::after{color:rgba(242,240,235,.2)}
.ph--dark .ph__id{color:rgba(242,240,235,.48)}
.ph--dark .ph__spec{color:rgba(242,240,235,.32)}

.img-box{position:relative;overflow:hidden}
.img-box .ph{transition:transform 1.5s var(--ease)}

/* --- 07 / REVEAL ---------------------------------------------------------- */
/* The hidden start state is scoped to .js, which main.js adds to <html>. If the
   script never runs, nothing is ever hidden — content must never be able to get
   stuck invisible. main.js also force-reveals anything left over after load. */
/* The reveal transition is scoped to :not(.is-done): once the reveal has played,
   main.js adds .is-done and the element's own hover transitions apply again
   (otherwise this higher-specificity rule would override them and hovers would jump). */
.js [data-reveal]{opacity:0;transform:translateY(28px)}
.js [data-reveal]:not(.is-done){transition:opacity 1s var(--ease),transform 1.15s var(--ease);transition-delay:var(--d,0ms)}
.js [data-reveal].is-in{opacity:1;transform:none}
.js [data-reveal="fade"]{transform:none}
.js [data-reveal="mask"]{opacity:1;transform:none;clip-path:inset(0 0 100% 0)}
.js [data-reveal="mask"]:not(.is-done){transition:clip-path 1.3s var(--ease);transition-delay:var(--d,0ms)}
.js [data-reveal="mask"].is-in{clip-path:inset(0 0 0 0)}

/* Line-by-line headline reveal.
   The tight display line-height (.86) makes glyphs overflow their line box, so the
   clip box is padded out and the padding is cancelled again with negative margins —
   optical rhythm unchanged. The slide-in distance has to clear that padding too. */
.split{display:block;overflow:hidden;padding:.14em 0 .12em;margin:-.14em 0 -.12em}
.js .split > span{display:block;transform:translateY(calc(105% + .12em));transition:transform 1.2s var(--ease);transition-delay:var(--d,0ms)}
.js .split.is-in > span,.js .is-in .split > span{transform:none}

/* --- 08 / HEADER ---------------------------------------------------------- */
.ticker-bar{
  position:relative;z-index:60;background:var(--ink);color:var(--ivory);
  height:34px;display:flex;align-items:center;overflow:hidden;
  transition:height .55s var(--ease),opacity .4s var(--ease);
}
.header.is-solid .ticker-bar{height:0;opacity:0}
.ticker{display:flex;white-space:nowrap;will-change:transform;animation:tick 46s linear infinite}
.ticker-bar:hover .ticker{animation-play-state:paused}
.ticker li{display:flex;align-items:center;gap:2.4rem;padding-right:2.4rem;font-family:var(--mono);font-size:.625rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(242,240,235,.58)}
.ticker li::after{content:"";width:3px;height:3px;background:var(--red);flex:none}
@keyframes tick{to{transform:translateX(-50%)}}

.header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  transition:transform .6s var(--ease),background-color .5s var(--ease),color .45s var(--ease),box-shadow .5s var(--ease);
  color:var(--ivory);
}
.header__inner{
  height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:2rem;
  max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter);
}
.header.is-solid{background:rgba(10,10,11,.84);backdrop-filter:blur(20px) saturate(140%);box-shadow:0 1px 0 rgba(242,240,235,.1)}
.header.is-hidden{transform:translateY(-115%)}
.header.is-light{color:var(--ink)}
.header.is-light.is-solid{background:rgba(250,249,246,.86);box-shadow:0 1px 0 rgba(10,10,11,.1)}

/* Logo — the supplied artwork in two colourways. The ivory version shows over
   dark sections, the original black one over light sections, crossfading with
   the header theme. Height drives width through the artwork's aspect ratio. */
.logo{
  --logo-h:30px;
  position:relative;display:block;flex:none;
  height:var(--logo-h);aspect-ratio:907/192;
  transition:opacity .35s var(--ease);
}
.logo:hover{opacity:.72}
.logo__img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .45s var(--ease)}
.logo__img--on-light{opacity:0}
.header.is-light .logo__img--on-light{opacity:1}
.header.is-light .logo__img--on-dark{opacity:0}

.nav{display:flex;align-items:center;gap:2.3rem}
.nav a{
  position:relative;font-family:var(--mono);font-size:.6875rem;letter-spacing:.15em;text-transform:uppercase;font-weight:500;
  padding-block:.4rem;opacity:.72;transition:opacity .4s var(--ease);
}
.nav a:hover,.nav a[aria-current="page"]{opacity:1}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}
.nav a.is-key{opacity:1;color:var(--red);font-weight:600;display:flex;align-items:center;gap:.5rem}
.nav a.is-key::before{content:"";width:4px;height:4px;background:var(--red);animation:pulse 2.6s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.55)}}

.utils{display:flex;align-items:center;gap:1.25rem}
.iconbtn{width:34px;height:34px;display:grid;place-items:center;position:relative;opacity:.78;transition:opacity .35s var(--ease),transform .5s var(--ease)}
.iconbtn:hover{opacity:1;transform:translateY(-2px)}
.iconbtn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.3;stroke-linecap:square}
.iconbtn .count{
  position:absolute;top:-1px;right:-2px;min-width:15px;height:15px;padding-inline:3px;
  background:var(--red);color:#fff;border-radius:99px;
  font-family:var(--mono);font-size:.5rem;font-weight:700;display:grid;place-items:center;line-height:1;
}
.lang{display:flex;align-items:center;gap:.35rem;font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase}
.lang a{opacity:.45;transition:opacity .3s}
.lang a:hover,.lang a[aria-current]{opacity:1}
.lang i{font-style:normal;opacity:.3}
.drawer__lang a{opacity:.5}
.drawer__lang a[aria-current]{opacity:1;color:var(--red)}

.burger{display:none;width:38px;height:38px;flex-direction:column;justify-content:center;gap:5px;align-items:flex-end}
.burger i{display:block;width:20px;height:1.5px;background:currentColor;transition:transform .5s var(--ease),width .5s var(--ease)}
.burger i:last-child{width:13px}
body.nav-open .burger i:first-child{transform:translateY(3.25px) rotate(45deg)}
body.nav-open .burger i:last-child{transform:translateY(-3.25px) rotate(-45deg);width:20px}

/* Mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:45;background:var(--ink);color:var(--ivory);
  display:flex;flex-direction:column;justify-content:center;padding:7rem var(--gutter) 2.5rem;
  clip-path:inset(0 0 100% 0);transition:clip-path .85s var(--ease),visibility .85s;
  visibility:hidden;overflow-y:auto;
}
body.nav-open{overflow:hidden}
body.nav-open .drawer{clip-path:inset(0 0 0 0);visibility:visible}
.drawer a{display:flex;align-items:baseline;gap:.9rem;font-size:clamp(1.9rem,8.5vw,3.4rem);font-weight:600;text-transform:uppercase;letter-spacing:-.04em;line-height:1.08;padding-block:.3em;border-bottom:1px solid rgba(242,240,235,.1)}
.drawer a .n{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;color:var(--red);font-weight:500}
.drawer__foot{margin-top:auto;padding-top:2.5rem;display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap}

/* --- 09 / FOOTER ---------------------------------------------------------- */
.footer{background:var(--ink);color:var(--ivory);--bg:var(--ink);--fg:var(--ivory);--muted:var(--gray);--line:rgba(242,240,235,.14);padding-top:clamp(3.5rem,6vw,6rem);overflow:hidden}
.footer__top{display:grid;grid-template-columns:1.4fr repeat(3,1fr) 1.2fr;gap:var(--gutter);padding-bottom:clamp(3rem,6vw,6rem)}
.footer h4{font-family:var(--mono);font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gray);font-weight:500;margin-bottom:1.6rem}
.footer li + li{margin-top:.7rem}
.footer li a{font-size:.9375rem;opacity:.85;transition:opacity .3s,padding-left .4s var(--ease);display:inline-block}
.footer li a:hover{opacity:1;padding-left:.4rem;color:var(--red)}
.footer__brand .logo{--logo-h:38px;margin-bottom:1.5rem}
.footer__bottom{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;padding-block:1.6rem;border-top:1px solid var(--line)}
.socials{display:flex;gap:.5rem}
.socials a{width:38px;height:38px;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--line);transition:background .4s var(--ease),color .4s}
.socials a:hover{background:var(--red);color:#fff;box-shadow:none}
.socials svg{width:15px;height:15px;fill:currentColor}
.totop{display:flex;align-items:center;gap:.7rem;font-family:var(--mono);font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gray)}
.totop:hover{color:var(--ivory)}
.totop i{width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(-45deg);display:block}

/* Oversized footer wordmark */
.footer__mark{
  font-weight:600;text-transform:uppercase;letter-spacing:-.05em;line-height:.78;
  font-size:clamp(3.5rem,15.5vw,17rem);
  color:transparent;-webkit-text-stroke:1px rgba(242,240,235,.15);
  padding-bottom:.14em;user-select:none;
}

/* --- RESPONSIVE ----------------------------------------------------------- */
@media (max-width:1180px){
  .nav,.lang{display:none}
  .burger{display:flex}
  .footer__top{grid-template-columns:1fr 1fr}
}
/* Very narrow screens: a nowrap button label has a large min-content width,
   which makes its grid column (and everything in it) overflow the viewport.
   Let labels wrap and let buttons fill the column instead. */
@media (max-width:430px){
  .btn{width:100%;justify-content:space-between;gap:1rem}
  .btn > span{white-space:normal}
  .btn--lg{padding:1.2rem 1.25rem;font-size:.6875rem}
  .grid > *,.final__row > *,.printband__copy > *{min-width:0}
}

/* Below ~480px the logo + 4 utility targets no longer fit one row, so the
   account icon moves into the drawer and the spacing tightens. */
@media (max-width:520px){
  .header__inner{gap:.75rem}
  .utils{gap:.35rem}
  .iconbtn.is-optional{display:none}
  .logo{--logo-h:21px}
}

@media (max-width:640px){
  :root{--header-h:66px}
  .footer__top{grid-template-columns:1fr;gap:2.5rem}
  .footer__bottom{flex-direction:column;align-items:flex-start;gap:1.2rem}
}