/* ----------------------------------------------------------
   Porvenir — Advisory
   Drafting instrument: the dark splash as a machined part on
   a drafting table. Sheet frame, registration ticks, a felt
   grid field, the gloss set as a datum/spec label.
   Chrome stays a whisper below the sentence.
   ---------------------------------------------------------- */

:root{
  color-scheme:dark;
  --bg:#0D0F0E;
  --text:#E6E8E6;
  --soft:#B8BCB8;
  --dim:#8A8F8B;
  --sage:#9BC4A0;
  --hair:#2C312E;

  /* drafting chrome — deliberately below the threshold of notice */
  --grid-minor:rgba(230,232,230,0.014);
  --grid-major:rgba(230,232,230,0.028);
  --frame:rgba(230,232,230,0.075);
  --reg:rgba(230,232,230,0.26);
  --tick-minor:rgba(230,232,230,0.10);
  --tick-major:rgba(230,232,230,0.19);

  --pad:clamp(1.5rem,5.5vw,5rem);
  --page-max:1280px;
  --inset:clamp(0.6rem,1.4vw,1.5rem);
  --unit:24px;          /* grid module; ticks share it */
  --unit-major:96px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{background:var(--bg)}

body{
  background:var(--bg);
  color:var(--text);
  font-family:'Space Grotesk','Space Grotesk Fallback',system-ui,sans-serif;
  font-weight:300;
  font-size:clamp(1rem,0.95rem + 0.3vw,1.125rem);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
}

::selection{background:var(--sage);color:var(--bg)}
:focus-visible{outline:2px solid var(--sage);outline-offset:3px}

/* Drafting plate ------------------------------------------- */

.plate{
  position:fixed;
  inset:0;
  padding:var(--inset);
  display:flex;
  justify-content:center;
  pointer-events:none;
  z-index:0;
  /* the drafting table: grid runs edge to edge under the sheet */
  background-image:
    linear-gradient(to right,  var(--grid-major) 0 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-major) 0 1px, transparent 1px),
    linear-gradient(to right,  var(--grid-minor) 0 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-minor) 0 1px, transparent 1px);
  background-size:
    var(--unit-major) 100%,
    100% var(--unit-major),
    var(--unit) 100%,
    100% var(--unit);
  background-position:0 0;
}
.sheet{
  position:relative;
  width:100%;
  border:1px solid var(--frame);
}

/* corner registration crosshairs, centred on the sheet corners */
.reg{position:absolute;width:11px;height:11px;
  background:
    linear-gradient(var(--reg),var(--reg)) center/100% 1px no-repeat,
    linear-gradient(var(--reg),var(--reg)) center/1px 100% no-repeat;
}
.reg.tl{top:-6px;left:-6px}
.reg.tr{top:-6px;right:-6px}
.reg.bl{bottom:-6px;left:-6px}
.reg.br{bottom:-6px;right:-6px}

/* scale along the top edge — minor ticks on the module, major on the fourth */
.scale{
  position:absolute;top:0;left:0;right:0;height:7px;
  background:
    repeating-linear-gradient(to right, var(--tick-major) 0 1px, transparent 1px var(--unit-major)) top left/100% 7px no-repeat,
    repeating-linear-gradient(to right, var(--tick-minor) 0 1px, transparent 1px var(--unit))       top left/100% 3px no-repeat;
}

/* cursor grid canvas (grid.js creates it; absent without JS) */
.fx-grid{position:fixed;inset:0;pointer-events:none;z-index:0}

header.top,main,footer{
  position:relative;z-index:1;
  width:100%;max-width:var(--page-max);margin-inline:auto;
}

/* Masthead ------------------------------------------------- */

header.top{
  display:flex;justify-content:space-between;align-items:center;
  padding:clamp(1.5rem,2.4vw,2.6rem) var(--pad);
}
.mark{display:flex;align-items:center;gap:0.8rem}
.mark .dot{width:9px;height:9px;background:var(--sage)}
.mark .word{font-size:1.05rem;font-weight:500;letter-spacing:0.2em}

/* Splash ---------------------------------------------------- */

main{flex:1;display:flex;align-items:center}

.splash{
  padding:clamp(3rem,8vh,6rem) var(--pad);
  margin-top:-1rem;
  width:100%;
}

/* Gloss as a datum / spec label ----------------------------- */

.gloss{
  position:relative;
  margin:0 0 clamp(2rem,4.5vh,3.2rem);
  width:fit-content;
  max-width:100%;
  display:flex;flex-wrap:nowrap;align-items:baseline;
  border:1px solid var(--hair);
  padding:0.5rem 0.95rem 0.55rem;
  font-size:clamp(0.85rem,0.82rem + 0.2vw,0.98rem);
  line-height:1.55;
  color:var(--dim);
}
/* label corner ticks — same motif as the sheet, quarter scale */
.gloss::before,.gloss::after{
  content:"";position:absolute;width:9px;height:9px;
  background:
    linear-gradient(var(--reg),var(--reg)) center/100% 1px no-repeat,
    linear-gradient(var(--reg),var(--reg)) center/1px 100% no-repeat;
}
.gloss::before{top:-5px;left:-5px}
.gloss::after{bottom:-5px;right:-5px}

.gloss .entry{color:var(--soft);letter-spacing:0.08em;padding-right:0.95rem;white-space:nowrap}
.gloss .sep{color:var(--sage);padding:0 0.12em}
.gloss .def{
  border-left:1px solid var(--hair);
  padding-left:0.95rem;
  text-wrap:pretty;
}
.gloss .def i{font-style:italic;color:var(--dim);margin-right:0.35em}

@media (max-width:32em){
  .gloss{flex-direction:column;align-items:stretch}
  .gloss .entry{padding-right:0;padding-bottom:0.4rem}
  .gloss .def{
    border-left:0;padding-left:0;
    border-top:1px solid var(--hair);
    margin-inline:-0.95rem;padding-inline:0.95rem;padding-top:0.4rem;
  }
}

/* Sentence -------------------------------------------------- */

h1{
  position:relative;
  margin:0;font-weight:300;
  font-size:clamp(1.9rem, min(0.9rem + 3.6vw, 0.6rem + 4.6vh), 3.6rem);
  line-height:1.18;letter-spacing:-0.005em;
  max-width:21ch;
  text-wrap:balance;
}
h1 .nb{white-space:nowrap}
@media (min-width:64em){ h1{letter-spacing:-0.022em} }
@media (max-width:26em){
  h1{font-size:1.7rem}
  h1 .nb{white-space:normal}
}
/* datum stub: a hairline extension line pointing at the sentence */
@media (min-width:48em){
  h1::before{
    content:"";position:absolute;
    left:-1.5rem;width:0.9rem;top:0.56em;height:1px;
    background:var(--tick-major);
  }
}

.hello{
  margin:clamp(2.4rem,5.5vh,4rem) 0 0;
  font-size:clamp(1.05rem,1rem + 0.4vw,1.25rem);
  color:var(--soft);
  text-wrap:pretty;
}
.mail{
  margin:0.9rem 0 0;
  font-size:clamp(1.05rem,1rem + 0.4vw,1.25rem);
}
.mail a{
  color:var(--text);text-decoration:none;
  border-bottom:1px solid var(--sage);
  padding-bottom:0.08em;
  transition:color 200ms ease;
  white-space:nowrap;
}
.mail a:hover{color:var(--sage)}

/* Colophon: the founder card and bio below the splash --------- */

/* The first viewport holds the splash and ends on the founder card;
   the card is the sign the sheet continues. No scroll cue. */
main.stacked{display:block}
main.stacked .fold{
  min-height:calc(100svh - 14rem);
  display:flex;align-items:center;
}
.colophon{
  padding:clamp(2rem,6vh,4rem) var(--pad) clamp(3rem,8vh,5rem);
}
.colophon h2.gloss{
  font-weight:300;
  margin:0 0 clamp(1.4rem,3vh,2rem);
}
.about{
  margin:0;
  max-width:60ch;
  font-size:clamp(0.95rem,0.9rem + 0.2vw,1.05rem);
  line-height:1.65;
  color:var(--soft);
  text-wrap:pretty;
}
.about + .about{margin-top:1.1em}

/* Short landscape viewports (phones) ------------------------ */

@media (max-height:34em) and (orientation:landscape){
  .splash{padding-block:clamp(1rem,3vh,2rem);margin-top:0}
  .gloss{margin-bottom:clamp(1rem,2.5vh,1.6rem);padding-block:0.34rem 0.38rem}
  .hello{margin-top:clamp(1.2rem,3vh,2rem)}
  header.top{padding-block:1.1rem}
  footer{padding:1.2rem var(--pad) 1.4rem}
}

/* Footer ---------------------------------------------------- */

footer{
  position:relative;
  padding:clamp(1.6rem,2.4vw,2.6rem) var(--pad) clamp(1.9rem,3.2vw,3.6rem);
  display:flex;justify-content:space-between;align-items:center;
  font-size:0.8rem;color:var(--dim);letter-spacing:0.16em;
}
/* dimension line: hairline with turned-down end ticks, no numbers */
footer::before{
  content:"";position:absolute;top:0;left:var(--pad);right:var(--pad);
  height:7px;
  border-top:1px solid var(--hair);
  border-left:1px solid var(--hair);
  border-right:1px solid var(--hair);
}
footer .fmark{width:7px;height:7px;background:var(--sage)}

/* Motion ----------------------------------------------------- */

@media (prefers-reduced-motion: no-preference){
  .splash{animation:rise 600ms 60ms cubic-bezier(0.22,1,0.36,1) both}
  @keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}

/* Print ------------------------------------------------------ */

@media print{
  html,body{background:#fff;color:#000;min-height:0}
  .plate,.fx-grid{display:none}
  .splash{animation:none!important}
  .mark .dot,footer .fmark{display:none}
  .gloss,footer{color:#444}
  .gloss{border-color:#ccc}
  .gloss::before,.gloss::after{display:none}
  .gloss .def{border-color:#ccc}
  .gloss .entry,.gloss .sep{color:#444}
  h1::before{display:none}
  .hello{color:#222}
  .mail a{color:#000;border-color:#666}
  .about{color:#222}
  footer::before{border-color:#ccc}
}