/* =====================================================================
   TRIAD — RE:STRUCTURE  ::  Design System (monochrome / systematic)
   Concept: TRIAD = three. 「創る」「伝える」「やさしい」
   Pure monochrome, modern grotesk + monospace meta. Built for motion.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap');

:root{
  /* --- Ink & paper (monochrome ramp) --- */
  --ink:        #0b0b0c;   /* near-black */
  --ink-2:      #1a1a1d;
  --ink-3:      #2b2b30;
  --grey-700:   #4b4b51;
  --grey-500:   #76767d;   /* mid */
  --grey-400:   #9a9aa1;
  --grey-300:   #c7c7cc;
  --line:       #e3e3e5;   /* hairlines on paper */
  --line-2:     #ededee;
  --paper-2:    #f4f4f3;   /* faint warm-neutral panel */
  --paper:      #ffffff;
  /* inverted hairline (on ink) */
  --line-inv:   rgba(255,255,255,.14);
  --line-inv-2: rgba(255,255,255,.08);

  /* --- Type families --- */
  --latin: 'Space Grotesk', system-ui, sans-serif;
  --mono:  'Space Mono', ui-monospace, monospace;
  --jp:    'Zen Kaku Gothic New', system-ui, sans-serif;
  --sans:  var(--jp);

  /* --- Fluid type scale --- */
  --fs-mega:  clamp(4rem, 14vw, 15rem);
  --fs-h1:    clamp(2.6rem, 7vw, 6rem);
  --fs-h2:    clamp(2rem, 4.6vw, 3.6rem);
  --fs-h3:    clamp(1.35rem, 2.4vw, 2rem);
  --fs-lead:  clamp(1.05rem, 1.55vw, 1.35rem);
  --fs-body:  clamp(0.95rem, 1.05vw, 1.0625rem);
  --fs-meta:  clamp(0.7rem, 0.85vw, 0.8125rem);

  /* --- Rhythm --- */
  --gut: clamp(20px, 4.2vw, 64px);   /* page margin */
  --col-gap: clamp(16px, 1.6vw, 28px);
  --sec-y: clamp(80px, 12vh, 180px);

  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  font-size:var(--fs-body);
  line-height:1.75;
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{ background:var(--ink); color:var(--paper); }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

/* ---------- Utility primitives ---------- */
.u-mono{
  font-family:var(--mono);
  letter-spacing:.06em;
  text-transform:uppercase;
}
.u-latin{ font-family:var(--latin); }
.u-shell{ padding-inline:var(--gut); }
.u-maxw{ max-width:1680px; margin-inline:auto; }
.u-rule{ height:1px; background:var(--line); border:0; margin:0; }
.u-rule--inv{ background:var(--line-inv); }

/* Kicker / eyebrow label — the systematic meta line */
.kicker{
  font-family:var(--mono);
  font-size:var(--fs-meta);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--grey-500);
  display:inline-flex;
  align-items:center;
  gap:.7em;
}
.kicker::before{
  content:"";
  width:1.6em; height:1px;
  background:currentColor;
  display:inline-block;
}
.kicker--plain::before{ display:none; }

/* Index numerals (01 / 07) */
.idx{
  font-family:var(--mono);
  font-weight:700;
  letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
}

/* Display headline base */
.display{
  font-family:var(--jp);
  font-weight:900;
  line-height:1.04;
  letter-spacing:-.01em;
  margin:0;
}
.display--latin{
  font-family:var(--latin);
  font-weight:700;
  letter-spacing:-.02em;
}

/* RE:STRUCTURE lockup */
.restructure{
  font-family:var(--latin);
  font-weight:700;
  letter-spacing:-.03em;
  line-height:.92;
}
.restructure .re{ }
.restructure .colon{ color:var(--grey-400); font-weight:400; }

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--mono);
  font-size:var(--fs-meta);
  letter-spacing:.12em;
  text-transform:uppercase;
  display:inline-flex; align-items:center; gap:.9em;
  padding:1.05em 1.6em;
  background:var(--ink); color:var(--paper);
  border:1px solid var(--ink);
  border-radius:999px;
  cursor:pointer;
  transition:transform .5s var(--ease-out), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  white-space:nowrap;
}
.btn .arw{ transition:transform .5s var(--ease-out); }
.btn:hover{ transform:translateY(-2px); }
.btn:hover .arw{ transform:translate(4px,-0px); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:var(--paper); }
.btn--inv{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.btn--inv:hover{ background:var(--paper); color:var(--ink); }
.btn--ghost-inv{ background:transparent; color:var(--paper); border-color:var(--line-inv); }
.btn--ghost-inv:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); }

/* Text link with animated underline */
.tlink{
  font-family:var(--mono);
  font-size:var(--fs-meta);
  letter-spacing:.1em;
  text-transform:uppercase;
  display:inline-flex; align-items:center; gap:.6em;
  position:relative;
}
.tlink::after{
  content:""; position:absolute; left:0; bottom:-.35em;
  width:100%; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease-out);
}
.tlink:hover::after{ transform:scaleX(1); }
.tlink .arw{ transition:transform .5s var(--ease-out); }
.tlink:hover .arw{ transform:translateX(3px); }

/* ---------- Image placeholder (striped) ---------- */
.ph{
  position:relative;
  background:
    repeating-linear-gradient(135deg, var(--line-2) 0 10px, var(--paper) 10px 20px);
  border:1px solid var(--line);
  display:grid; place-items:center;
  overflow:hidden;
}
.ph--inv{
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 10px, transparent 10px 20px);
  border-color:var(--line-inv);
}
.ph__tag{
  font-family:var(--mono);
  font-size:var(--fs-meta);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--grey-500);
  background:var(--paper);
  padding:.5em .8em;
  border:1px solid var(--line);
}
.ph--inv .ph__tag{ background:var(--ink); color:var(--grey-400); border-color:var(--line-inv); }

/* ---------- Reveal animation hooks ---------- */
@media (prefers-reduced-motion:no-preference){
  html.js [data-reveal]{
    opacity:0;
    transform:translateY(24px);
    transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
    transition-delay:var(--rd, 0ms);
    will-change:opacity, transform;
  }
  html.js [data-reveal="up"]{ transform:translateY(34px); }
  html.js [data-reveal="fade"]{ transform:none; }
  html.js [data-reveal="clip"]{
    opacity:1; transform:none;
    clip-path:inset(0 100% 0 0);
    transition:clip-path 1s var(--ease-out);
    transition-delay:var(--rd, 0ms);
  }
  html.js [data-reveal].is-in{
    opacity:1; transform:none; clip-path:inset(0 0 0 0);
  }
  /* line-by-line mask for big type */
  .lineMask{ overflow:hidden; display:block; }
  html.js .lineMask > span{
    display:block;
    transform:translateY(110%);
    transition:transform 1s var(--ease-out);
    transition-delay:var(--rd, 0ms);
  }
  html.js [data-reveal].is-in .lineMask > span,
  html.js .is-in > .lineMask > span{ transform:none; }
}

/* ---------- Inverted section ---------- */
.inv{ background:var(--ink); color:var(--paper); }
.inv .kicker{ color:var(--grey-400); }
.inv .ph__tag{ background:var(--ink); color:var(--grey-400); border-color:var(--line-inv); }

/* ---------- Marquee ---------- */
.marquee{ overflow:hidden; white-space:nowrap; display:flex; }
.marquee__row{
  display:inline-flex; gap:.6em; align-items:center;
  padding-right:.6em;
  animation:marq 28s linear infinite;
}
.marquee:hover .marquee__row{ animation-play-state:paused; }
@keyframes marq{ to{ transform:translateX(-100%); } }
@media (prefers-reduced-motion:reduce){ .marquee__row{ animation:none; } }