:root {
  --bg:#f4f1ea; --bg-elev:#faf8f3; --card:#fff; --ink:#14181a;
  --ink-dim:#5a635f; --ink-mute:#8d9590; --line:#e2ddd2;
  --line-strong:#c9c3b4; --accent:#ff4d1f; --accent-tint:rgba(255,77,31,.07);
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { min-height:100vh; overflow-x:hidden; background:var(--bg); color:var(--ink); font-family:"Archivo",sans-serif; line-height:1.55; font-feature-settings:"ss01","cv11"; }
body::before { content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:56px 56px; mask-image:radial-gradient(ellipse at 25% 12%,black 0%,transparent 74%); }
a { color:inherit; }
.wrap { width:min(1180px,calc(100% - 80px)); margin:0 auto; }
main { position:relative; z-index:1; }

.hero { padding:94px 0 72px; }
.eyebrow { display:inline-flex; align-items:center; gap:12px; margin-bottom:34px; padding:7px 13px; border:1px solid var(--line-strong); background:var(--card); color:var(--ink-dim); font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.13em; text-transform:uppercase; }
.eyebrow i { width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px var(--accent-tint); }
h1 { max-width:1080px; font-size:clamp(46px,6.6vw,86px); font-weight:300; letter-spacing:-.045em; line-height:.97; }
h1 em { color:var(--accent); font-style:italic; font-weight:400; }
.hero-bottom { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(260px,.8fr); gap:80px; align-items:end; margin-top:42px; }
.lede { max-width:740px; color:var(--ink-dim); font-size:20px; line-height:1.62; }
.lede strong { color:var(--ink); font-weight:600; }
.role-meta { border-top:1px solid var(--line-strong); }
.role-meta div { display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid var(--line); font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.09em; text-transform:uppercase; }
.role-meta dt { color:var(--ink-mute); }
.role-meta dd { color:var(--ink); text-align:right; }

.content-shell { display:grid; grid-template-columns:240px minmax(0,720px); gap:88px; justify-content:center; padding:82px 0 110px; border-top:1px solid var(--line-strong); }
.side { position:relative; }
.side-inner { position:sticky; top:92px; }
.side-label { margin-bottom:18px; color:var(--ink-mute); font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.13em; text-transform:uppercase; }
.side p { margin-bottom:22px; color:var(--ink-dim); font-size:14px; line-height:1.65; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:12px; width:100%; padding:15px 18px; border:1px solid var(--ink); background:var(--ink); color:white; font-family:"IBM Plex Mono",monospace; font-size:11px; font-weight:500; letter-spacing:.1em; text-decoration:none; text-transform:uppercase; transition:.18s ease; }
.button:hover,.button:focus-visible { border-color:var(--accent); background:var(--accent); outline:none; }

.prose section + section { margin-top:58px; }
.section-no { margin-bottom:11px; color:var(--accent); font-family:"IBM Plex Mono",monospace; font-size:10px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; }
h2 { margin-bottom:22px; padding-bottom:18px; border-bottom:1px solid var(--line-strong); font-size:clamp(28px,3vw,40px); font-weight:300; letter-spacing:-.03em; line-height:1.1; }
h2 em { color:var(--accent); font-style:italic; }
.prose p { margin-bottom:18px; color:var(--ink-dim); font-size:16px; line-height:1.72; }
.prose p strong { color:var(--ink); font-weight:600; }
.prose ul { list-style:none; }
.prose li { position:relative; padding:15px 0 15px 30px; border-bottom:1px solid var(--line); color:var(--ink-dim); font-size:15px; line-height:1.58; }
.prose li:first-child { border-top:1px solid var(--line); }
.prose li::before { content:"↳"; position:absolute; left:2px; top:15px; color:var(--accent); font-family:"IBM Plex Mono",monospace; }
.prose li strong { color:var(--ink); font-weight:600; }
.callout { padding:30px 32px; border-left:3px solid var(--accent); background:var(--card); }
.callout p { margin:0; color:var(--ink); font-size:18px; line-height:1.6; }
.stack-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; border:1px solid var(--line-strong); background:var(--line-strong); }
.stack-item { min-height:112px; padding:21px; background:var(--card); }
.stack-item b { display:block; margin-bottom:7px; color:var(--accent); font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.08em; }
.stack-item span { color:var(--ink-dim); font-size:13px; line-height:1.5; }

.apply { position:relative; z-index:1; padding:72px 0; overflow:hidden; background:var(--ink); color:white; }
.apply-grid { display:grid; grid-template-columns:1fr auto; gap:56px; align-items:center; }
.apply-label { margin-bottom:14px; color:var(--accent); font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; }
.apply h2 { max-width:760px; margin:0; padding:0; border:0; color:white; font-size:clamp(32px,4vw,54px); }
.apply p { max-width:680px; margin-top:19px; color:rgba(255,255,255,.62); font-size:15px; line-height:1.65; }
.apply .button { width:auto; min-width:210px; border-color:var(--accent); background:var(--accent); }
.apply .button:hover { border-color:white; background:white; color:var(--ink); }

@media(max-width:820px) {
  .wrap { width:min(100% - 40px,720px); }
  .hero { padding:62px 0 52px; }
  .hero-bottom { grid-template-columns:1fr; gap:36px; }
  .role-meta { max-width:420px; }
  .content-shell { grid-template-columns:1fr; gap:54px; padding:60px 0 76px; }
  .side-inner { position:static; }
  .side { padding:28px; border:1px solid var(--line-strong); background:var(--bg-elev); }
  .side .button { width:auto; }
  .apply-grid { grid-template-columns:1fr; gap:32px; }
  .apply .button { justify-self:start; }
}
@media(max-width:520px) {
  .wrap { width:min(100% - 32px,720px); }
  h1 { font-size:clamp(41px,12.4vw,62px); }
  .lede { font-size:17px; }
  .hero { padding-top:48px; }
  .eyebrow { margin-bottom:26px; }
  .side { padding:24px 20px; }
  .side .button,.apply .button { width:100%; }
  .callout { padding:24px 21px; }
  .stack-grid { grid-template-columns:1fr; }
  .stack-item { min-height:0; }
  .apply { padding:56px 0; }
}
@media(prefers-reduced-motion:no-preference) {
  .reveal { opacity:0; transform:translateY(12px); animation:reveal .65s ease forwards; }
  .reveal:nth-child(2) { animation-delay:.08s; }
  .reveal:nth-child(3) { animation-delay:.16s; }
  @keyframes reveal { to { opacity:1; transform:none; } }
}
