@font-face{
  font-family:"Instrument Serif"; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/instrument-serif.woff2") format("woff2");
}
@font-face{
  font-family:"Instrument Serif"; font-style:italic; font-weight:400; font-display:swap;
  src:url("fonts/instrument-serif-italic.woff2") format("woff2");
}
@font-face{
  font-family:"Inter Tight"; font-style:normal; font-weight:400 600; font-display:swap;
  src:url("fonts/inter-tight.woff2") format("woff2");
}
:root{
  --paper:#edeae4;
  --paper-2:#e4e0d8;
  --ink:#151412;
  --ink-2:#5b5750;
  --ink-3:#8d877d;
  --rule:rgba(21,20,18,.14);
  --serif:"Instrument Serif", "Times New Roman", serif;
  --sans:"Inter Tight", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --gut:clamp(20px, 3.2vw, 48px);
  --ease:cubic-bezier(.2,.7,.1,1);
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:13px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  height:100vh;
  height:100svh;
  min-height:560px;
  overflow:hidden;
}
.stage{ position:absolute; inset:0; }
.stage canvas{ display:block; width:100%; height:100%; }

/* ---------- Top bar ---------- */
.top{
  position:absolute; top:0; left:0; right:0;
  display:flex; justify-content:space-between; align-items:flex-start;
  padding:var(--gut);
  z-index:3;
  animation:fade 1s .1s both;
}
.mark{ display:flex; flex-direction:column; gap:3px; line-height:1; }
.mark-name{
  font-weight:600; font-size:15px; letter-spacing:.34em; text-transform:uppercase;
}
.mark-sub{
  font-size:10px; letter-spacing:.42em; text-transform:uppercase; color:var(--ink-2);
}
.top-meta{
  display:flex; gap:clamp(18px, 3vw, 44px); align-items:center;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2);
}
.link{
  color:var(--ink);
  padding-bottom:3px;
  background:linear-gradient(currentColor,currentColor) 0 100% / 100% 1px no-repeat;
  transition:background-size .5s var(--ease);
}
.link:hover{ background-size:0 1px; background-position:100% 100%; }

/* ---------- Headline ---------- */
.copy{
  position:absolute; left:var(--gut); bottom:var(--gut);
  z-index:3;
  pointer-events:none;
}
.headline{
  margin:0;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(64px, 10.5vw, 176px);
  line-height:.86;
  letter-spacing:-.025em;
}
.headline .line{ display:block; overflow:hidden; padding-bottom:.06em; }
.headline em{ font-style:italic; }

.reveal{
  display:inline-block;
  animation:rise 1.3s var(--d, 0s) var(--ease) both;
}
.reveal.d1{ --d:.25s; }
.reveal.d2{ --d:.4s; }


/* ---------- Scan-line readout ---------- */
.tags{ position:absolute; inset:0; pointer-events:none; z-index:2; }
.tag{
  position:absolute; left:0; top:0;
  display:flex; align-items:center;
  font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink);
  white-space:nowrap;
  opacity:0;
  will-change:transform;
}
.tag i{ display:block; height:1px; background:var(--ink); }
.tag.scan{ gap:8px; font-variant-numeric:tabular-nums; transition:none; }
.tag.scan.on{ opacity:.85; }
.tag.scan::before{ display:none; }
.tag.scan i{ width:18px; }

/* ---------- Footer ---------- */
.foot{
  background:var(--ink); color:var(--paper);
  padding:clamp(56px, 8vw, 110px) var(--gut) var(--gut);
}
.foot-inner{ max-width:1600px; margin:0 auto; }
.foot-contact{ padding-bottom:clamp(40px, 6vw, 80px); }
.foot-label{
  margin:0 0 14px;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:#8d877d;
}
.foot-big{
  font-family:var(--serif); font-size:clamp(28px, 3.4vw, 52px); line-height:1;
  background:linear-gradient(currentColor,currentColor) 0 100% / 0 1px no-repeat;
  transition:background-size .6s var(--ease);
  padding-bottom:4px;
}
.foot-big:hover{ background-size:100% 1px; }
.foot-base{
  display:flex; justify-content:space-between; gap:16px;
  margin-top:clamp(28px, 4vw, 48px);
  padding-top:18px;
  border-top:1px solid rgba(237,234,228,.16);
  font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:#8d877d;
}

/* ---------- Paper grain ---------- */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:10;
  opacity:.22; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .48 0 0 0 0 .45 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Motion ---------- */
@keyframes fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes rise{ from{ transform:translateY(105%); } to{ transform:none; } }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* ---------- Small screens ---------- */
@media (max-width:860px){
  .foot-base{ flex-direction:column; }
}