/* ---------- Fonts (self-hosted, variable) ---------- */
@font-face {
  font-family: "Newsreader";
  src: url("fonts/Newsreader-VariableFont_opsz,wght.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("fonts/Newsreader-Italic-VariableFont_opsz,wght.ttf") format("truetype");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-VariableFont_opsz,wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Italic-VariableFont_opsz,wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ---------- Site styles ---------- */
:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  --bg:#0f1012;--surface:#17181b;--line:#2a2c31;--text:#ecebe6;--muted:#9a9ca3;
  --amber:#e9b44c;--amber-hi:#f3c872;--amber-dim:#7a5e24;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color-scheme:dark;
}
html{scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.7 var(--sans);-webkit-font-smoothing:antialiased}
::selection{background:var(--amber);color:#0f1012}
a:focus-visible,.btn:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.wrap{max-width:1040px;margin:0 auto;padding:0 24px}
header{display:flex;justify-content:space-between;align-items:center;padding:24px 0;border-bottom:1px solid var(--line)}
.logo{display:inline-flex;align-items:baseline;gap:.32em;font:700 1.2rem/1 var(--sans);letter-spacing:.06em;text-transform:uppercase}
.logo .l1{color:var(--text);font-style:normal}
.logo .l2{color:var(--amber);font-style:italic}
nav a{font:600 .72rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-decoration:none;margin-left:24px;transition:color .2s}
nav a:hover{color:var(--amber)}
.label{font:600 .72rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.hero{position:relative;padding:96px 0 88px}
.hero::before{content:"";position:absolute;inset:-60px 0 auto 0;height:440px;background:radial-gradient(60% 100% at 30% 0%,rgba(233,180,76,.13),transparent 70%);pointer-events:none;z-index:-1}
h1{font:400 clamp(2.9rem,9vw,6.2rem)/1.02 var(--serif);letter-spacing:-.02em;margin:20px 0 28px;max-width:11ch}
h1 em{font-style:italic;color:var(--amber)}
.lead{color:var(--muted);font-size:1.1rem;max-width:52ch;margin:0 0 36px}
.btn{display:inline-block;background:var(--amber);color:#0f1012;padding:14px 26px;border-radius:2px;text-decoration:none;font:600 .8rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;transition:background .2s}
.btn:hover{background:var(--amber-hi)}
section{padding:72px 0;border-top:1px solid var(--line)}
h2{font:400 clamp(2rem,5vw,3rem)/1.1 var(--serif);letter-spacing:-.01em;margin:0 0 40px}
h2::before{content:"";display:block;width:44px;height:2px;background:var(--amber);margin-bottom:20px}
.list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.list li{display:grid;grid-template-columns:80px 1fr 1.4fr;gap:20px;align-items:baseline;padding:30px 0;border-bottom:1px solid var(--line);transition:border-color .25s}
.list li:hover{border-bottom-color:var(--amber)}
.list li:hover h3{color:var(--amber)}
.n{font:italic 400 1.5rem/1 var(--serif);color:var(--amber)}
.list h3{font:500 clamp(1.4rem,3vw,1.9rem)/1.2 var(--serif);margin:0;transition:color .25s}
.list p{margin:0;color:var(--muted)}
.steps{display:grid;gap:40px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.steps .n{display:block;font-size:3.4rem;margin-bottom:14px}
.steps h3{font:500 1.4rem/1.2 var(--serif);margin:0 0 8px}
.steps p{margin:0;color:var(--muted)}
.mail{font:400 clamp(1.6rem,5vw,2.8rem)/1.2 var(--serif);color:var(--amber);text-decoration:none;border-bottom:1px solid var(--amber-dim);transition:color .2s,border-color .2s}
.mail:hover{color:var(--amber-hi);border-color:var(--amber-hi)}
.note{display:block;margin-top:14px;color:var(--muted);font-size:.9rem}
footer{padding:32px 0 48px;border-top:1px solid var(--line);color:var(--muted);font-size:.85rem}
footer b{color:var(--amber);font-weight:500}
@media (max-width:720px){
  .list li{grid-template-columns:44px 1fr;gap:8px 12px}
  .list p{grid-column:2}
  .hero{padding:64px 0 56px}
  nav a{margin-left:16px}
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}