/* Semantic Copyright — site.css
   Quiet editorial layout. One accent colour, hairline rules, generous space. */

:root{
  --paper:#f4f2ed;
  --paper-2:#eae7e0;
  --ink:#17181c;
  --ink-2:#51535a;
  --ink-3:#8b8d94;
  --line:#d9d5cc;
  --line-2:#c8c3b8;
  --clay:#9b3c2b;
  --maxw:1140px;
  --sans:"Inter","Helvetica Neue",Helvetica,Arial,"Segoe UI",sans-serif;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
}

@media (prefers-color-scheme: dark){
  :root{
    --paper:#121316;
    --paper-2:#191a1e;
    --ink:#ece9e3;
    --ink-2:#a8aab0;
    --ink-3:#74767d;
    --line:#2a2c32;
    --line-2:#383b42;
    --clay:#d1735c;
  }
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  font-feature-settings:"ss01","cv05";
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img,svg{max-width:100%;display:block}

a{color:inherit;text-decoration:none}

p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

::selection{background:var(--clay);color:var(--paper)}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 32px}
@media (max-width:640px){ .wrap{padding:0 20px} }

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- small labels ---------- */
.label{
  font-size:11px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-3);
}

/* ---------- maintenance strip ---------- */
.notice{
  background:var(--paper-2);
  border-bottom:1px solid var(--line);
}
.notice__in{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:44px;
  padding-top:9px;
  padding-bottom:9px;
  font-size:13px;
  color:var(--ink-2);
}
.dot{
  flex:0 0 auto;
  width:7px;height:7px;
  border-radius:50%;
  background:var(--clay);
  animation:breathe 2.8s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.35;transform:scale(.8)}
}
@media (prefers-reduced-motion: reduce){ .dot{animation:none} }

/* ---------- header / navigation ---------- */
.site-head{border-bottom:1px solid var(--line)}
.site-head__in{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding-top:26px;
  padding-bottom:26px;
}
.brand{display:flex;align-items:baseline;gap:10px}
.brand__mark{
  font-family:var(--serif);
  font-size:21px;
  line-height:1;
  letter-spacing:-.01em;
}
.brand__mark span{color:var(--clay)}
.brand__sub{
  font-size:10.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-3);
}
@media (max-width:560px){ .brand__sub{display:none} }

.nav{display:flex;align-items:center;gap:30px}
.nav a{
  font-size:14.5px;
  color:var(--ink-2);
  padding:3px 0;
  border-bottom:1px solid transparent;
  transition:color .18s ease, border-color .18s ease;
}
.nav a:hover{color:var(--ink);border-bottom-color:var(--line-2)}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--clay)}

.nav-btn{
  display:none;
  background:none;
  border:1px solid var(--line-2);
  color:var(--ink);
  font:inherit;
  font-size:13px;
  padding:7px 13px;
  cursor:pointer;
}
@media (max-width:760px){
  .nav-btn{display:block}
  .nav{
    display:none;
    position:absolute;left:0;right:0;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    padding:6px 32px 20px;
    z-index:20;
  }
  .nav.is-open{display:flex}
  .nav a{width:100%;padding:13px 0;border-bottom:1px solid var(--line)}
  .nav a[aria-current="page"]{border-bottom-color:var(--line)}
  .site-head__in{position:relative}
  @media (max-width:640px){ .nav{padding-left:20px;padding-right:20px} }
}

/* ---------- section scaffold ---------- */
.sec{padding-top:84px;padding-bottom:84px}
.sec--tight{padding-top:56px;padding-bottom:56px}
.sec + .sec{border-top:1px solid var(--line)}
@media (max-width:760px){ .sec{padding-top:60px;padding-bottom:60px} }

.sec__head{
  display:grid;
  grid-template-columns:150px 1fr;
  gap:28px;
  margin-bottom:46px;
}
@media (max-width:760px){
  .sec__head{grid-template-columns:1fr;gap:10px;margin-bottom:32px}
}
.sec__head h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.65rem,3.4vw,2.5rem);
  line-height:1.15;
  letter-spacing:-.015em;
  margin:0;
  max-width:22ch;
}

/* ---------- hero ---------- */
.hero{padding-top:96px;padding-bottom:72px}
@media (max-width:760px){ .hero{padding-top:58px;padding-bottom:48px} }

.hero h1{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.5rem,6.6vw,5rem);
  line-height:1.03;
  letter-spacing:-.025em;
  margin:22px 0 0;
  max-width:19ch;
}
.hero h1 em{font-style:italic;color:var(--clay)}

.hero__lead{
  margin-top:30px;
  max-width:56ch;
  font-size:18.5px;
  color:var(--ink-2);
}
@media (max-width:760px){ .hero__lead{font-size:17px} }

.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:14.5px;
  font-weight:500;
  padding:13px 22px;
  border:1px solid var(--ink);
  background:var(--ink);
  color:var(--paper);
  cursor:pointer;
  font-family:inherit;
  max-width:100%;
  flex-wrap:wrap;
  overflow-wrap:anywhere;
  transition:opacity .18s ease,background .18s ease,color .18s ease;
}
@media (max-width:400px){ .btn{padding-left:16px;padding-right:16px} }
.btn:hover{opacity:.85}
.btn--ghost{background:none;color:var(--ink);border-color:var(--line-2)}
.btn--ghost:hover{opacity:1;border-color:var(--ink);background:var(--paper-2)}
.btn__arw{font-size:15px;line-height:1}

/* ---------- spec table ---------- */
.spec{
  margin-top:64px;
  border-top:1px solid var(--line);
}
.spec__row{
  display:grid;
  grid-template-columns:200px 1fr;
  gap:24px;
  padding:16px 0;
  border-bottom:1px solid var(--line);
  font-size:15px;
}
.spec__row > span:last-child{color:var(--ink-2)}
.spec__row a{border-bottom:1px solid var(--line-2)}
.spec__row a:hover{border-bottom-color:var(--clay);color:var(--clay)}
@media (max-width:640px){
  .spec__row{grid-template-columns:1fr;gap:3px;padding:14px 0}
}

/* ---------- progress ---------- */
.prog{margin-top:54px;max-width:520px}
.prog__top{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:12px;
}
.prog__val{font-family:var(--serif);font-size:19px}
.prog__bar{height:3px;background:var(--line);overflow:hidden}
.prog__fill{
  height:100%;
  background:var(--clay);
  width:0;
  animation:fill 1.5s .25s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes fill{to{width:var(--p,62%)}}
@media (prefers-reduced-motion: reduce){
  .prog__fill{animation:none;width:var(--p,62%)}
}
.prog__note{margin-top:12px;font-size:13.5px;color:var(--ink-3)}

/* ---------- numbered list ---------- */
.list{border-top:1px solid var(--line);margin:0;padding:0;list-style:none;counter-reset:n}
.list li{
  display:grid;
  grid-template-columns:72px 1fr 1.25fr;
  gap:30px;
  padding:28px 0;
  border-bottom:1px solid var(--line);
}
.list li::before{
  counter-increment:n;
  content:"0" counter(n);
  font-size:12.5px;
  letter-spacing:.1em;
  color:var(--ink-3);
  padding-top:5px;
}
.list h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:21px;
  line-height:1.25;
  margin:0;
  letter-spacing:-.01em;
}
.list p{font-size:15.5px;color:var(--ink-2);margin:0}
@media (max-width:860px){
  .list li{grid-template-columns:48px 1fr;gap:8px 18px}
  .list p{grid-column:2}
}

/* ---------- prose blocks ---------- */
.prose{max-width:62ch;font-size:17.5px}
.prose h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:1.4rem;
  letter-spacing:-.01em;
  margin:2.2em 0 .6em;
}
.prose a{border-bottom:1px solid var(--line-2)}
.prose a:hover{color:var(--clay);border-bottom-color:var(--clay)}
.lead-first::first-letter{
  font-family:var(--serif);
  font-size:3.1em;
  float:left;
  line-height:.82;
  padding:.06em .09em 0 0;
  color:var(--clay);
}

.cols{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.cols > div{background:var(--paper);padding:30px 26px}
.cols h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:19px;
  margin:14px 0 10px;
  letter-spacing:-.01em;
}
.cols p{font-size:15px;color:var(--ink-2);margin:0}
@media (max-width:860px){ .cols{grid-template-columns:1fr} }

/* ---------- timeline ---------- */
.tl{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.tl li{
  display:grid;
  grid-template-columns:150px 1fr;
  gap:24px;
  padding:20px 0;
  border-bottom:1px solid var(--line);
  font-size:15.5px;
}
.tl b{font-weight:500}
.tl span{color:var(--ink-2)}
.tl .is-now b{color:var(--clay)}
@media (max-width:640px){ .tl li{grid-template-columns:1fr;gap:4px} }

/* ---------- pull quote ---------- */
.pull{
  margin:0;
  padding:38px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  font-family:var(--serif);
  font-size:clamp(1.3rem,3vw,1.9rem);
  line-height:1.3;
  letter-spacing:-.015em;
  max-width:30ch;
}
.pull cite{
  display:block;
  margin-top:18px;
  font-family:var(--sans);
  font-size:12px;
  font-style:normal;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-3);
}

/* ---------- contact ---------- */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:72px;
}
@media (max-width:900px){ .contact-grid{grid-template-columns:1fr;gap:48px} }

.form{display:grid;gap:20px;max-width:520px}
.field{display:grid;gap:7px}
.field label{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.field input,.field textarea,.field select{
  font:inherit;
  font-size:16px;
  color:var(--ink);
  background:transparent;
  border:0;
  border-bottom:1px solid var(--line-2);
  padding:9px 0;
  border-radius:0;
  transition:border-color .18s ease;
}
.field textarea{min-height:120px;resize:vertical;line-height:1.55}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;
  border-bottom-color:var(--clay);
}
.form__note{font-size:13px;color:var(--ink-3);margin:0}

/* ---------- 404 ---------- */
.mid{min-height:58vh;display:flex;align-items:center}
.big{
  font-family:var(--serif);
  font-size:clamp(4rem,14vw,9rem);
  line-height:1;
  letter-spacing:-.04em;
  margin:0;
  color:var(--clay);
}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line);padding:56px 0 34px;margin-top:0}
.foot-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr;
  gap:40px;
}
@media (max-width:760px){ .foot-grid{grid-template-columns:1fr;gap:32px} }
.foot-grid p{font-size:14.5px;color:var(--ink-2);max-width:34ch;margin:14px 0 0}
.foot-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:9px;font-size:14.5px}
.foot-list a{color:var(--ink-2)}
.foot-list a:hover{color:var(--clay)}
.foot-bottom{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:12px;
  margin-top:48px;
  padding-top:22px;
  border-top:1px solid var(--line);
  font-size:12.5px;
  color:var(--ink-3);
}
