/* ============================================================================
   VESSEL — legal pages
   Built on packages/design/tokens.ts, vendored verbatim. Nothing invented.
   Ground, ink, text ramp, glass, lift, rim and radii are copies of record.

   Rules this file obeys (packages/design/DESIGN.md):
     · Law 4 — NO borders and no background shapes. Depth is lift + rim only.
     · Law 3 — signal #C2551C is a 7px dot on the live thing. Nothing is
       running on a legal page, so there is no orange here. That is correct.
     · Law 7 — two families. Archivo displays, Inter speaks. No mono.
     · Contrast floor — read copy never lighter than text.3 (#565E45).
     · No dark mode: this system is daylight paper. A dark palette would be
       invented, and inventing is what this file exists to prevent.
   ============================================================================ */

:root{
  /* paper */
  --paper-lit:#F2F4EB;
  --paper-mid:#E8EBDE;
  --paper-shade:#D8DECB;
  --ground:linear-gradient(178deg,#F2F4EB 0%,#E8EBDE 46%,#D8DECB 100%);

  /* ink + the six-step text ramp */
  --ink:#232719;
  --text-2:#4C5440;
  --text-3:#565E45;
  --text-4:#666E52;

  /* glass */
  --glass-90:rgba(255,255,255,0.90);
  --glass-72:rgba(255,255,255,0.72);
  --glass-60:rgba(255,255,255,0.60);

  /* elevation — negative spread is deliberate, it reads as height not halo */
  --lift-card:0px 20px 40px -28px rgba(52,60,38,.50);
  --lift-row:0px 16px 30px -26px rgba(52,60,38,.40);
  --rim-strong:inset 0px 1px 0px 0px #ffffff;
  --rim-soft:inset 0px 1px 0px 0px rgba(255,255,255,0.90);

  --r-card:22px;
  --r-row:19px;
  --side:20px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  min-height:100svh;
  background:var(--ground);
  background-attachment:fixed;
  color:var(--text-2);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

.wrap{
  max-width:740px;
  margin:0 auto;
  padding:clamp(28px,6vw,60px) var(--side) clamp(64px,12vw,110px);
  min-width:0;
}

/* header ------------------------------------------------------------------ */
header{margin-bottom:clamp(30px,6vw,44px)}
a.home{text-decoration:none;color:inherit;display:inline-block}

/* THE WORDMARK — Archivo 900 with the cut punched into the V only.
   Geometry from app/wordmark.tsx: line-height .78 · slot .2em down the V's
   box · .12em thick · stops 48% across · tracking -.014em · the V/e kern
   given back as -.042em, because browsers do not kern across elements. */
.wordmark{
  font-family:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:900;
  font-size:30px;
  line-height:.78;
  letter-spacing:-.014em;
  color:var(--ink);
  display:inline-block;
  white-space:nowrap;
}
.wordmark .v{
  display:inline-block;
  margin-right:-.042em;
  -webkit-mask-image:var(--cut);
          mask-image:var(--cut);
  -webkit-mask-size:100% 100%;
          mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
}
:root{
  --cut:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Crect x='0' y='0' width='100' height='25.6' fill='white'/%3E%3Crect x='0' y='41' width='100' height='59' fill='white'/%3E%3Crect x='48' y='25.6' width='52' height='15.4' fill='white'/%3E%3C/svg%3E");
}

/* type -------------------------------------------------------------------- */
h1{
  font-family:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:900;
  font-size:clamp(34px,7vw,46px);
  line-height:1.06;
  letter-spacing:-.025em;
  color:var(--ink);
  margin:clamp(22px,4vw,30px) 0 8px;
}
h2{
  font-family:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:800;
  font-size:clamp(21px,3.6vw,25px);
  line-height:1.2;
  letter-spacing:-.02em;
  color:var(--ink);
  /* spacing separates sections. NEVER a rule line — law 4. */
  margin:clamp(46px,8vw,64px) 0 14px;
}
h3{
  font-family:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:700;
  font-size:17px;
  letter-spacing:-.01em;
  color:var(--ink);
  margin:28px 0 6px;
}
p{margin:0 0 16px}
ul{margin:0 0 16px;padding-left:22px}
li{margin:0 0 9px}
strong{font-weight:700;color:var(--ink)}
em{font-style:italic}

.stamp{
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--text-4);
  font-variant-numeric:tabular-nums;
  margin:0 0 clamp(28px,5vw,38px);
}
.lede{font-size:19px;line-height:1.55;color:var(--text-2);margin:0 0 28px}
.muted{color:var(--text-3);font-size:15.5px}

/* surfaces — glass, lift, rim. No borders, no background shapes. ---------- */
.card{
  background:var(--glass-90);
  border-radius:var(--r-card);
  box-shadow:var(--lift-card),var(--rim-strong);
  padding:clamp(20px,4vw,28px) clamp(20px,4vw,30px);
  margin:0 0 28px;
}
.panel{
  background:var(--glass-72);
  border-radius:var(--r-row);
  box-shadow:var(--lift-row),var(--rim-soft);
  padding:clamp(18px,3.5vw,24px) clamp(18px,3.5vw,26px);
}
.card > :first-child,.panel > :first-child{margin-top:0}
.card > :last-child,.panel > :last-child{margin-bottom:0}

.two{display:grid;grid-template-columns:1fr;gap:14px;margin:0 0 24px}
@media (min-width:660px){ .two{grid-template-columns:1fr 1fr;gap:16px} }

a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}

footer{
  margin-top:clamp(56px,9vw,78px);
  color:var(--text-4);
  font-size:15px;
}
footer a{margin-right:20px;color:var(--text-3)}