:root{
  --bg:#f2efe8;--ink:#111;--paper:#fffdf8;--red:#c1121f;--muted:rgba(17,17,17,.55);
  --pad:clamp(16px,4vw,28px);--max:1080px;
  --serif:"Playfair Display",Georgia,serif;--sans:"IBM Plex Sans",system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden}
a{color:inherit;text-decoration:none}ul{list-style:none}button{font:inherit;border:0;background:none;color:inherit;cursor:pointer}

.canvas{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(90deg, transparent 79px, rgba(17,17,17,.05) 80px),
    linear-gradient(transparent 79px, rgba(17,17,17,.05) 80px),
    var(--bg);
  background-size:80px 80px;
}
.canvas__slash{
  position:absolute;width:140vw;height:1px;background:var(--ink);opacity:.12;
  top:28%;left:-20%;transform:rotate(-18deg);
}
.canvas__slash--2{top:62%;transform:rotate(12deg);opacity:.08}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad);position:relative;z-index:1}
.nav{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:18px var(--pad);background:rgba(242,239,232,.92);border-bottom:1px solid rgba(17,17,17,.15);
}
.logo{font-family:var(--serif);font-size:1.35rem;font-weight:500;letter-spacing:-.02em}
.logo span{color:var(--red);font-style:italic}
.nav__toggle{display:none;width:42px;height:42px;border:1px solid var(--ink);align-items:center;justify-content:center;flex-direction:column;gap:5px}
.nav__toggle i{width:16px;height:1px;background:var(--ink);display:block}
.nav__links{display:flex;align-items:center;gap:20px;font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
.nav__links a{color:var(--muted)}
.nav__links a:hover{color:var(--ink)}
.nav__cta{border-bottom:1px solid var(--red);color:var(--red)!important;padding-bottom:2px}

.hero{position:relative;z-index:1;min-height:min(96vh,900px);padding:clamp(48px,10vw,100px) var(--pad) clamp(40px,7vw,70px);display:grid;align-items:end}
.hero__layout{max-width:var(--max);margin:0 auto;width:100%;display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:end}
.hero__mark{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin-bottom:18px;
  animation:fadeUp .9s ease both;
}
.hero h1{
  font-family:var(--serif);font-weight:500;font-size:clamp(3.4rem,11vw,7.2rem);line-height:.9;letter-spacing:-.04em;
  margin-bottom:20px;animation:fadeUp .95s .05s ease both;
}
.hero h1 i{font-style:italic;color:var(--red)}
.hero__lead{max-width:28rem;color:var(--muted);font-size:1.05rem;margin-bottom:28px;animation:fadeUp .95s .12s ease both}
.hero__row{display:flex;flex-wrap:wrap;gap:10px;animation:fadeUp .95s .18s ease both}
.btn{display:inline-flex;align-items:center;padding:13px 18px;font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;transition:transform .2s,background .2s}
.btn:hover{transform:translateY(-2px)}
.btn--ink{background:var(--ink);color:#fff}
.btn--line{border:1px solid var(--ink);background:transparent}

.hero__side{
  justify-self:end;width:min(100%,280px);aspect-ratio:.72;
  background:
    linear-gradient(160deg,transparent 40%,rgba(193,18,31,.85) 40.2% 58%,transparent 58.2%),
    linear-gradient(#1a1a1a,#111);
  border:1px solid var(--ink);
  position:relative;animation:fadeUp 1s .2s ease both;
}
.hero__side span{
  position:absolute;left:14px;bottom:14px;right:14px;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;
}

.sec{position:relative;z-index:1;padding:clamp(56px,10vw,110px) var(--pad)}
.sec__head{display:grid;grid-template-columns:120px 1fr;gap:18px;margin-bottom:36px;align-items:start}
.sec__num{font-family:var(--mono);font-size:.75rem;letter-spacing:.16em;color:var(--red)}
.sec h2{font-family:var(--serif);font-weight:500;font-size:clamp(2rem,4.5vw,3.2rem);letter-spacing:-.03em;line-height:1.05;max-width:16ch}

.cols{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.cols article{
  grid-column:span 4;padding:22px;background:var(--paper);border:1px solid rgba(17,17,17,.18);min-height:200px;
  transition:transform .3s ease, box-shadow .3s ease;
}
.cols article:nth-child(1){grid-column:span 5}
.cols article:nth-child(2){grid-column:span 3;margin-top:40px}
.cols article:nth-child(3){grid-column:span 4;margin-top:18px}
.cols article:nth-child(4){grid-column:span 4;margin-top:-10px}
.cols article:nth-child(5){grid-column:span 5}
.cols article:nth-child(6){grid-column:span 3;margin-top:28px}
.cols article:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.08)}
.cols span{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;color:var(--red)}
.cols h3{font-family:var(--serif);font-size:1.45rem;font-weight:500;margin:16px 0 8px;letter-spacing:-.02em}
.cols p{color:var(--muted);font-size:.95rem}

.manifesto{
  margin:0 var(--pad);padding:clamp(36px,7vw,64px);
  background:var(--ink);color:#f2efe8;
  display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:end;
}
.manifesto blockquote{font-family:var(--serif);font-size:clamp(1.7rem,4vw,2.8rem);font-weight:500;line-height:1.15;letter-spacing:-.03em;font-style:italic}
.manifesto p{color:rgba(242,239,232,.65);max-width:28rem;margin-bottom:18px}
.manifesto .btn--ink{background:#f2efe8;color:var(--ink)}

.cta{position:relative;z-index:1;padding:clamp(64px,12vw,120px) var(--pad);text-align:left}
.cta h2{font-family:var(--serif);font-size:clamp(2.2rem,6vw,4rem);letter-spacing:-.035em;line-height:1.02;max-width:14ch;margin-bottom:16px}
.cta p{color:var(--muted);max-width:32rem;margin-bottom:24px}

.foot{position:relative;z-index:1;padding:22px var(--pad) 40px;border-top:1px solid rgba(17,17,17,.15);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;color:var(--muted)}
.foot a{color:var(--red)}

[data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s ease}
[data-reveal].is-in{opacity:1;transform:none}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

@media(max-width:900px){
  .nav__toggle{display:flex}
  .nav__links{display:none;position:absolute;left:var(--pad);right:var(--pad);top:68px;flex-direction:column;align-items:stretch;gap:0;background:var(--paper);border:1px solid rgba(17,17,17,.2);padding:8px}
  .nav__links.is-open{display:flex}
  .nav__links a,.nav__cta{padding:12px}
  .hero__layout,.sec__head,.manifesto,.cols{grid-template-columns:1fr}
  .cols article,.cols article:nth-child(n){grid-column:span 1!important;margin-top:0!important}
  .hero__side{width:100%;max-width:220px;justify-self:start;aspect-ratio:1.4}
  .canvas{background-size:40px 40px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}[data-reveal]{opacity:1;transform:none}}