/* ==========================================================================
   overstreet.me — an engineering plate

   One ground, drawn from the cyanotype: pale linework on Prussian blue.
   A deliberately single visual world, so there is no theme switching —
   but every colour is still a token and components never reference a
   literal, so the palette stays changeable from one place.
   ========================================================================== */

@font-face{
  font-family:"B612";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/b612-400.woff2") format("woff2");
}
@font-face{
  font-family:"B612";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/b612-700.woff2") format("woff2");
}
@font-face{
  font-family:"B612 Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/b612-mono-400.woff2") format("woff2");
}
@font-face{
  font-family:"B612 Mono";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/b612-mono-700.woff2") format("woff2");
}

/* ---------- tokens ---------- */

:root{
  --plate:#0f3352;
  --plate-2:#0c2942;
  --box:rgba(9,36,60,.5);
  --box-live:rgba(239,113,80,.05);
  --strip:rgba(15,51,82,.84);

  --ink:#f2f8fd;
  --line-2:rgba(207,225,240,.58);
  --line-3:rgba(207,225,240,.30);
  --line-4:rgba(207,225,240,.16);
  --grid:rgba(207,225,240,.055);
  --grid-major:rgba(207,225,240,.11);

  --mark:#ef7150;
  --mark-dim:rgba(239,113,80,.34);
  --mark-halo:rgba(239,113,80,.14);

  --wash-1:rgba(30,86,132,.5);
  --wash-2:rgba(8,32,56,.55);
  --grain:.5;
  --duo:#2f7ab5;

  --sans:"B612",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"B612 Mono",ui-monospace,Menlo,Consolas,monospace;
}

/* ---------- base ---------- */

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

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

body{
  margin:0;color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
  background:
    linear-gradient(var(--grid) 1px,transparent 1px) 0 0/100% 10px,
    linear-gradient(90deg,var(--grid) 1px,transparent 1px) 0 0/10px 100%,
    linear-gradient(var(--grid-major) 1px,transparent 1px) 0 0/100% 80px,
    linear-gradient(90deg,var(--grid-major) 1px,transparent 1px) 0 0/80px 100%,
    var(--plate);
}

/* wash + paper tooth */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 90% at 18% 6%,var(--wash-1),transparent 62%),
    radial-gradient(100% 80% at 88% 88%,var(--wash-2),transparent 66%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.55 0 0 0 0 0.6 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection{background:var(--mark-dim);}

a{color:var(--ink);text-decoration:none;}
a:focus-visible,button:focus-visible{outline:2px solid var(--mark);outline-offset:3px;}

.plate{
  position:relative;z-index:1;max-width:1140px;margin:0 auto;
  padding:0 clamp(16px,4vw,48px) clamp(30px,5vw,56px);
}

.lbl{
  font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--line-2);margin:0;
}

/* ---------- sticky strip ---------- */

.strip{
  position:sticky;top:0;z-index:20;
  display:flex;flex-wrap:wrap;gap:6px clamp(14px,2.4vw,26px);
  justify-content:space-between;align-items:center;
  padding:11px 0;border-bottom:1px solid var(--line-4);
  background:var(--strip);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--line-2);
}

.strip .brand{
  color:var(--ink);white-space:nowrap;
  opacity:0;transform:translateY(6px);pointer-events:none;
  transition:opacity .4s ease,transform .4s cubic-bezier(.16,1,.3,1);
}
.strip.past .brand{opacity:1;transform:none;pointer-events:auto;}
.strip .brand:hover{color:var(--mark);}

.strip nav{display:flex;flex-wrap:wrap;gap:6px clamp(12px,2vw,22px);align-items:center;}
.strip nav a{color:var(--line-2);white-space:nowrap;transition:color .2s;}
.strip nav a:hover{color:var(--ink);}

@media (max-width:720px){
  .strip nav a.opt{display:none;}
}

/* ---------- hero ---------- */

.hero{padding:clamp(44px,8vw,96px) 0 clamp(34px,5vw,58px);}

.hero-grid{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(28px,5vw,72px);align-items:center;
}
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr;gap:clamp(26px,5vw,38px);}
}

.hero .lbl{margin-bottom:clamp(16px,2.4vw,22px);}

h1{
  margin:0;font-family:var(--sans);font-weight:700;
  font-size:clamp(42px,8.4vw,108px);line-height:.92;letter-spacing:-.045em;
  text-transform:uppercase;
}
h1 .l2{display:block;color:var(--line-2);}

.thesis{
  margin:clamp(34px,5vw,54px) 0 0;
  font-size:clamp(20px,2.7vw,32px);line-height:1.35;letter-spacing:-.02em;
  max-width:22ch;color:var(--ink);text-wrap:balance;
}
.thesis em{font-style:normal;color:var(--mark);}

.hero-sub{margin:16px 0 0;color:var(--line-2);font-size:15.5px;max-width:52ch;}
.hero-sub a{border-bottom:1px solid var(--line-3);}
.hero-sub a:hover{border-bottom-color:var(--mark);color:var(--mark);}

/* portrait: the photograph itself, mounted on the plate rather than printed
   into it. A face is the one thing on this page that should not be stylised. */
.portrait{
  position:relative;margin:0;flex:none;
  width:clamp(180px,24vw,300px);
  border:1px solid var(--line-3);background:var(--plate-2);
}
.portrait img{
  display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;
}
/* corner registration tick */
.portrait::after{
  content:"";position:absolute;z-index:2;bottom:6px;right:6px;width:10px;height:10px;
  border-right:1px solid var(--line-3);border-bottom:1px solid var(--line-3);
}
@media (max-width:860px){.portrait{width:clamp(150px,38vw,210px);}}

/* ---------- signal bus ---------- */

.run{
  position:relative;padding-left:64px;
  display:flex;flex-direction:column;gap:clamp(28px,4vw,46px);
}

.bus{position:absolute;left:23px;top:0;bottom:0;width:1px;background:var(--line-3);overflow:hidden;}
.pulse{
  position:absolute;left:-2px;width:5px;height:90px;top:-90px;
  background:linear-gradient(180deg,transparent,var(--mark),transparent);
  filter:blur(1px);
  animation:run 8s linear infinite;
}
@keyframes run{from{top:-90px;}to{top:100%;}}

.node{position:relative;}
.node::before{
  content:"";position:absolute;left:-41px;top:15px;width:41px;height:1px;background:var(--line-3);
}
.node::after{
  content:"";position:absolute;left:-44px;top:12px;width:7px;height:7px;border-radius:50%;
  background:var(--plate);border:1px solid var(--line-3);
}
.node.live::after{border-color:var(--mark);box-shadow:0 0 0 3px var(--mark-halo);}

@media (max-width:760px){
  .run{padding-left:0;}
  .bus{display:none;}
  .node::before,.node::after{display:none;}
}

.node > .lbl{margin-bottom:10px;}
.node.live > .lbl{color:var(--mark);}

/* ---------- boxes ---------- */

.box{border:1px solid var(--line-4);background:var(--box);padding:clamp(20px,3vw,30px);}
.box.live{border-color:var(--mark-dim);background:var(--box-live);}

h2{margin:0;font-weight:700;font-size:clamp(19px,2.4vw,26px);line-height:1.24;letter-spacing:-.025em;}
h3{margin:0 0 8px;font-weight:700;font-size:17px;letter-spacing:-.015em;}
p{margin:0;color:var(--line-2);}
p + p{margin-top:.9em;}
.prose{max-width:68ch;}

.live-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;}
@media (max-width:600px){.live-head{grid-template-columns:1fr;justify-items:start;}}
.live-head h2{margin-bottom:8px;}

.plug{
  font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;border:1px solid var(--mark-dim);color:var(--mark);
  padding:11px 16px;white-space:nowrap;transition:background .2s,color .2s;
}
.plug:hover{background:var(--mark);color:var(--plate);}

/* ---------- readouts ---------- */

.readouts{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--line-4);border:1px solid var(--line-4);
}
@media (max-width:900px){.readouts{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.readouts{grid-template-columns:1fr;}}

.readout{background:var(--plate-2);padding:clamp(16px,2.4vw,22px);}
.readout .rv{
  display:block;font-family:var(--mono);font-weight:700;
  font-size:clamp(22px,3vw,32px);line-height:1.1;letter-spacing:-.03em;
  color:var(--ink);font-variant-numeric:tabular-nums;
}
.readout .rl{display:block;margin-top:9px;font-size:12.5px;line-height:1.45;color:var(--line-2);}

/* ---------- timeline ---------- */

.tl-scroll{overflow-x:auto;}

table{width:100%;border-collapse:collapse;min-width:520px;}
thead th{
  font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--line-2);text-align:left;
  padding:0 14px 9px;border-bottom:1px solid var(--line-3);white-space:nowrap;
}
thead th:first-child{padding-left:0;width:1%;}
thead th:nth-child(2){width:1%;}
tbody td{padding:13px 14px;border-bottom:1px solid var(--line-4);vertical-align:baseline;color:var(--line-2);}
tbody td:first-child{padding-left:0;font-family:var(--mono);font-size:13px;font-weight:700;color:var(--ink);}
tbody td.when{font-family:var(--mono);font-size:12px;white-space:nowrap;}
tbody tr.current td{color:var(--ink);}
tbody tr.current td:first-child{color:var(--mark);}

@media (max-width:640px){
  table,tbody{display:block;min-width:0;}
  thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
  tbody tr{
    display:grid;grid-template-columns:auto 1fr;gap:3px 12px;
    padding:13px 0;border-bottom:1px solid var(--line-4);
  }
  tbody td{padding:0;border:none;}
  tbody td:first-child{grid-area:1/1;}
  tbody td.when{grid-area:1/2;}
  tbody td.what{grid-area:2/1/3/3;}
}

/* ---------- contact ---------- */

.contact-mail{
  display:block;font-weight:700;
  font-size:clamp(24px,4.6vw,52px);letter-spacing:-.04em;line-height:1.1;
  color:var(--ink);transition:color .2s;
}
.contact-mail:hover{color:var(--mark);}
.contact-tel{
  display:inline-block;margin-top:10px;font-family:var(--mono);font-size:13.5px;
  letter-spacing:.08em;color:var(--line-2);transition:color .2s;
}
.contact-tel:hover{color:var(--ink);}

/* ---------- title block ---------- */

.titleblock{
  margin-top:clamp(34px,5vw,58px);
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line-3);border-left:1px solid var(--line-3);
}
@media (max-width:820px){.titleblock{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){
  .titleblock{grid-template-columns:1fr;}
  .tb-cell.wide{grid-column:span 1;}
}

.tb-cell{border-right:1px solid var(--line-3);border-bottom:1px solid var(--line-3);padding:12px 14px;}
.tb-cell.wide{grid-column:span 2;}
.tb-cell dt{
  font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--line-3);margin-bottom:5px;
}
.tb-cell dd{margin:0;font-family:var(--mono);font-size:12.5px;color:var(--ink);}
.tb-cell dd a{border-bottom:1px solid var(--line-3);}
.tb-cell dd a:hover{color:var(--mark);border-bottom-color:var(--mark);}

.foot{
  display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between;
  margin-top:clamp(20px,3vw,30px);
  font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--line-3);
}
.foot-group{display:flex;flex-wrap:wrap;gap:8px 22px;}
.foot a{
  color:var(--line-2);border-bottom:1px solid var(--line-4);
  transition:color .2s,border-color .2s;
}
.foot a:hover{color:var(--mark);border-bottom-color:var(--mark);}

/* ---------- 404: a sheet that was never issued ---------- */

.sheet-missing .plate{
  min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
}

.nf{
  flex:1;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(50px,10vw,110px) 0 clamp(40px,7vw,80px);
}

.nf > .lbl{margin-bottom:clamp(20px,3vw,30px);}

.nf-grid{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(26px,5vw,66px);align-items:center;
}
@media (max-width:760px){
  .nf-grid{grid-template-columns:1fr;gap:clamp(20px,4vw,30px);}
}

/* the number drawn as linework rather than type on the page */
.nf-code{
  margin:0;font-family:var(--sans);font-weight:700;
  font-size:clamp(96px,20vw,230px);line-height:.8;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:1.5px var(--line-3);
  padding-right:.04em;
}

.nf-body{border-left:1px solid var(--line-3);padding-left:clamp(20px,3vw,34px);}
@media (max-width:760px){
  .nf-body{border-left:0;border-top:1px solid var(--line-3);padding:22px 0 0;}
}

.nf-title{
  margin:0;font-family:var(--sans);font-weight:700;
  font-size:clamp(24px,3.6vw,44px);line-height:1.1;letter-spacing:-.03em;
  text-wrap:balance;
}

.nf-text{margin:16px 0 0;color:var(--line-2);font-size:16px;max-width:46ch;}

.nf-action{
  display:inline-block;margin-top:clamp(24px,3vw,32px);
  font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);border:1px solid var(--line-3);padding:12px 20px;
  transition:border-color .2s,color .2s,background .2s;
}
.nf-action:hover{color:var(--mark);border-color:var(--mark);background:var(--box-live);}

/* ---------- checkout: the test sale sheet ---------- */

.sheet-checkout .plate{
  min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
}

.co{
  flex:1;display:flex;flex-direction:column;justify-content:center;
  max-width:660px;padding:clamp(50px,10vw,100px) 0 clamp(40px,7vw,80px);
}

.co > .lbl{margin-bottom:clamp(18px,3vw,26px);}

.co-title{
  margin:0;font-weight:700;font-size:clamp(26px,4.2vw,44px);
  line-height:1.1;letter-spacing:-.03em;text-transform:none;text-wrap:balance;
}

.co-text{margin:16px 0 0;color:var(--line-2);max-width:52ch;}

.co .box{margin-top:clamp(24px,4vw,34px);}

.co-item{display:flex;align-items:center;gap:clamp(16px,3vw,26px);}

/* the product photograph, mounted on the plate like the portrait */
.co-photo{margin:0;flex:none;width:clamp(96px,16vw,140px);border:1px solid var(--line-3);}
.co-photo img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;}

.co-item .live-head{flex:1;min-width:0;}

.notice{
  margin-top:clamp(24px,4vw,34px);padding:14px 18px;
  border:1px solid var(--line-4);border-left:3px solid var(--line-2);
  background:var(--box);color:var(--ink);font-size:14.5px;
}
.notice.good{border-left-color:var(--mark);}
.notice .mono-line{
  display:block;margin-top:6px;font-family:var(--mono);font-size:12px;
  color:var(--line-2);word-break:break-all;
}

/* ---------- reveal ----------
   Content is visible by default and only hidden once the script has
   confirmed it can bring it back, so a failed observer cannot leave a
   section blank. */

.js .up{opacity:0;transform:translateY(16px);}
.js .up.on{opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1);}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .js .up,.js .up.on{opacity:1;transform:none;transition:none;}
  .pulse{display:none;}
  .strip .brand{transition:none;}
}