@font-face { font-family:"Newsreader"; font-style:normal; font-weight:400 500; font-display:swap; src:url("../fonts/newsreader-roman-latin-var.woff2") format("woff2"); }
@font-face { font-family:"Newsreader"; font-style:italic; font-weight:400; font-display:swap; src:url("../fonts/newsreader-italic-latin-var.woff2") format("woff2"); }
@font-face { font-family:"Hanken Grotesk"; font-style:normal; font-weight:400 600; font-display:swap; src:url("../fonts/hankengrotesk-roman-latin-var.woff2") format("woff2"); }
@font-face { font-family:"Fragment Mono"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/fragmentmono-roman-latin-400.woff2") format("woff2"); }
:root {
  --paper:#F7F5F0; --paper-raised:#EFECE4; --paper-sunk:#E7E3DA;
  --ink:#121417; --ink-2:#42474F; --ink-3:#5F656E;
  --rule:#D8D3C8; --rule-strong:#BFB9AB;
  --open:#925708; --open-bg:#F7E9CF;
  --verified:#186A47; --verified-bg:#E1EEE6;
  --clinical:#3A5876;
  --stop:#A3251B;
  --serif:"Newsreader","Iowan Old Style",Georgia,serif;
  --sans:"Hanken Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"Fragment Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --gut:20px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
* { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
body { background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased; }
a { color:inherit; }

.mast { position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:10px; padding:14px var(--gut); background:var(--paper); border-bottom:1px solid var(--rule); }
.mast .mark { display:flex; flex:0 0 auto; }
.mast .name { font-family:var(--serif); font-size:19px; font-weight:500; }
.mast .name span { font-style:italic; }
.mast .spacer { flex:1; }
.mast .word { font-family:var(--mono); font-size:11px; color:var(--ink-3); letter-spacing:.14em; text-transform:uppercase; }
@media (max-width:520px){ .mast .word { display:none; } }

section { padding:clamp(68px,11vw,108px) var(--gut); }
.wrap { max-width:1160px; margin:0 auto; }
.eyebrow { font-family:var(--mono); font-size:11px; color:var(--ink-3); letter-spacing:.18em; text-transform:uppercase; margin-bottom:18px; }
.lede { font-family:var(--serif); font-weight:500; line-height:1.06; }
.cta { display:inline-flex; align-items:center; gap:10px; font-size:16px; font-weight:600; color:var(--paper); background:var(--ink); padding:14px 22px; border-radius:6px; text-decoration:none; }
.cta .arrow { font-family:var(--mono); font-weight:400; }
.cta:hover { background:#2A2D33; }

/* provenance: the illustrative mark (synthetic demonstration) */
.prov { display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; padding:3.5px 6px 3.5px 5px; border:1px solid var(--open); color:var(--open); line-height:1; white-space:nowrap; vertical-align:middle; }
.prov::before { content:""; width:6px; height:6px; flex:0 0 auto; background:transparent; border:1px dotted currentColor; }

/* ============ product screenshots ============ */
.shot { margin:0; }
.shot .frame { background:#fff; border:1px solid var(--rule-strong); border-radius:10px; overflow:hidden; box-shadow:0 1px 0 rgba(18,20,23,.04), 0 28px 56px -28px rgba(18,20,23,.22); }
.shot .frame img { display:block; width:100%; height:auto; }
.shot figcaption { margin-top:12px; display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; font-family:var(--mono); font-size:12px; color:var(--ink-3); letter-spacing:.04em; }

/* ============ 1. HERO ============ */
.hero { padding-top:clamp(36px,6vw,64px); }
.hero .h1 { font-family:var(--serif); font-weight:500; line-height:1.02; font-size:clamp(42px,10vw,82px); letter-spacing:-.01em; max-width:13ch; }
.hero .sub { font-size:clamp(18px,4.6vw,23px); line-height:1.42; color:var(--ink-2); max-width:40ch; margin:22px 0 30px; }
.hero .cta { font-size:17px; padding:16px 26px; }
.hero .shot--hero { margin-top:clamp(40px,7vw,64px); }

/* ============ 2. THE GAP ============ */
.gap { background:var(--paper-raised); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.gap .lede { font-size:clamp(34px,8vw,58px); max-width:18ch; }
.gap .shot { margin-top:clamp(36px,6vw,56px); max-width:min(768px,68%); margin-left:auto; margin-right:auto; }

/* ============ 3. THREE JOBS (tabbed product media) ============ */
.jobs .lede { font-size:clamp(34px,8vw,56px); }
.jobs .labels { margin-top:clamp(28px,4.5vw,44px); display:grid; gap:clamp(20px,3vw,32px); }
@media (min-width:900px){ .jobs .labels { grid-template-columns:1fr 1fr 1fr; } }
.job-label .k { font-family:var(--mono); font-size:12px; color:var(--open); letter-spacing:.16em; text-transform:uppercase; }
.job-label h3 { font-family:var(--serif); font-weight:500; font-size:clamp(22px,4vw,28px); line-height:1.1; margin:8px 0 6px; }
.job-label p { font-size:15px; color:var(--ink-2); max-width:36ch; }
.jobs .media { margin-top:clamp(28px,4.5vw,44px); }
.job-tabs { display:flex; gap:4px; border-bottom:1px solid var(--rule-strong); }
.job-tabs [role="tab"] {
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  padding:11px 18px; border:0; border-bottom:2px solid transparent; background:transparent; color:var(--ink-3); cursor:pointer;
}
.job-tabs [role="tab"]:hover { color:var(--ink); }
.job-tabs [role="tab"][aria-selected="true"] { color:var(--ink); border-bottom-color:var(--ink); }
.jobs .media .shot { margin-top:20px; }
.jobs .media .shot .frame { border-radius:8px; }

/* ============ 4. ONE POSITION ============ */
.position { background:#fff; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.position .lede { font-size:clamp(34px,8vw,56px); max-width:22ch; }
.position .shot { margin-top:clamp(32px,6vw,52px); }

/* ============ 5. PROOF ============ */
.proof .lede { font-size:clamp(34px,8vw,56px); max-width:20ch; }
.proof .shot { margin-top:clamp(36px,6vw,56px); }
.proof .method { margin-top:26px; font-size:16px; color:var(--ink-2); max-width:60ch; }
.proof .deeper { display:inline-block; margin-top:18px; font-family:var(--mono); font-size:13px; letter-spacing:.08em; text-decoration:none; border-bottom:1px solid var(--ink-3); padding-bottom:2px; }

/* ============ 6. CLOSE ============ */
.close { background:var(--ink); color:var(--paper); }
.close .eyebrow { color:#9AA0A8; }
.close .lede { font-size:clamp(34px,8vw,56px); max-width:20ch; }
.close .list { margin:28px 0; display:grid; gap:12px; }
.close .list .li { display:flex; gap:14px; align-items:baseline; font-size:17px; color:#D7DADF; }
.close .list .li b { font-family:var(--mono); font-weight:400; color:#9AA0A8; font-size:14px; min-width:74px; }
.close .cta { background:var(--paper); color:var(--ink); font-size:17px; padding:16px 26px; }
.close .cta:hover { background:#E8E4DB; }

footer { padding:28px var(--gut) 48px; display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center; border-top:1px solid var(--rule); }
footer .fname { font-family:var(--serif); font-size:16px; }
footer .fnote { font-size:13px; color:var(--ink-3); }
footer .flink { margin-left:auto; font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--ink-2); text-decoration:none; border-bottom:1px solid var(--ink-3); }

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