/* =========================================================
   Twin Fin Projects — shared system
   9-column Van de Graaf · Salt-air frame · Cormorant + Space Mono + Young Serif
   Coastal Home palette: Salt Air surface, Fig Clay body, Cream titles,
   Terra dates, Kelp section labels. Fig Clay is the dark interior,
   reserved for project surfaces and the Philosophy band.
   ========================================================= */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}

:root{
  --fig-clay:#261E20;
  --fig-clay-mid:#4A3E42;
  --fig-clay-soft:#6B555A;
  --cream:#F0E8DC;
  --cream-soft:rgba(240,232,220,0.82);
  --cream-faint:rgba(240,232,220,0.55);
  --cream-ghost:rgba(240,232,220,0.32);
  --salt-air:#8AAFB2;
  --salt-air-nav:rgba(138,175,178,0.92);
  --salt-air-deep:#6D9397;
  --terra:#8B4F30;
  --amber:#D4A054;
  --lilac:#C0ADCF;
  --lilac-accent:#C0ADCF;
  --lilac-lift:#D8CBE3; /* small text on dark planes — 4.7:1 on Deep Dusk */
  --lilac-deep:#6E5A85;
  --pale-lilac:#E8E0ED;
  --kelp:#3D5A4A;
  --sage-surf:#5B7E6B;
  --dusk-water:#6A8FA3;
  --rule:rgba(38,30,32,0.14);
  --rule-soft:rgba(38,30,32,0.08);
  --rule-cream:rgba(240,232,220,0.18);
  --rule-cream-soft:rgba(240,232,220,0.10);
  --cols:9;--gutter:20px;--margin:60px;
}

html,body{
  min-height:100%;
  background:var(--cream);
  color:var(--fig-clay);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body{
  font-family:'Cormorant Garamond',serif;
  font-size:17px;line-height:1.65;
  position:relative;overflow-x:hidden;
}

/* soft tonal cloud so the flat lilac field breathes */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:
    radial-gradient(ellipse 58% 42% at 82% 4%, rgba(138,175,178,0.13), transparent 60%),
    radial-gradient(ellipse 54% 40% at 6% 94%, rgba(139,79,48,0.06), transparent 62%);
}

/* paper grain */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;opacity:0.05;z-index:1000;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:128px 128px;
}

/* 9-column grid */
.grid-9{
  display:grid;grid-template-columns:repeat(9,1fr);gap:0 var(--gutter);
  padding:0 var(--margin);max-width:1400px;margin:0 auto;
}

/* grid overlay (press G) */
.grid-overlay{
  position:fixed;inset:0;z-index:900;pointer-events:none;
  opacity:0;transition:opacity 0.4s ease;
}
.grid-overlay.visible{opacity:1}
.grid-columns{
  position:absolute;inset:0;display:grid;
  grid-template-columns:repeat(9,1fr);gap:var(--gutter);
  padding:0 var(--margin);max-width:1400px;margin:0 auto;
}
.grid-columns .col{
  background:rgba(139,79,48,0.06);
  border-left:1px solid rgba(139,79,48,0.18);
  border-right:1px solid rgba(139,79,48,0.18);
}
.grid-label{
  position:fixed;bottom:20px;right:20px;
  font-family:'Space Mono',monospace;font-size:10px;
  letter-spacing:0.12em;text-transform:uppercase;
  color:var(--terra);opacity:0;transition:opacity 0.4s ease;
  z-index:901;pointer-events:none;
}
.grid-overlay.visible~.grid-label{opacity:1}

/* NAV — cream paper by default, dark over fig-clay band */
nav.mast{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(240,232,220,0.88);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--rule);
  padding:20px 0;
  transition:background 0.4s ease, border-color 0.4s ease;
}
nav.mast.dark{
  background:rgba(38,30,32,0.92);
  border-bottom-color:var(--rule-cream);
}
.mast-inner{align-items:baseline}
.mast-logo{
  grid-column:1/4;
  font-family:'Space Mono',monospace;font-size:11px;letter-spacing:0.2em;
  color:var(--fig-clay);text-transform:uppercase;text-decoration:none;
  transition:color 0.4s ease;
}
nav.mast.dark .mast-logo{color:var(--cream)}
.mast-center{
  grid-column:4/7;text-align:center;
  font-family:'Cormorant Garamond',serif;font-style:italic;font-size:15px;
  color:var(--fig-clay-mid);
  transition:color 0.4s ease;
}
nav.mast.dark .mast-center{color:var(--cream-faint)}
.mast-center .sep{
  font-family:'Space Mono',monospace;font-style:normal;font-size:11px;
  margin:0 8px;opacity:0.5;vertical-align:2px;
}
.mast-links{grid-column:7/10;display:flex;justify-content:flex-end;gap:24px;list-style:none}
.mast-links a{
  font-family:'Space Mono',monospace;font-size:11px;letter-spacing:0.06em;
  color:var(--fig-clay);text-decoration:none;
  transition:color 0.3s ease;position:relative;
}
nav.mast.dark .mast-links a{color:var(--cream-soft)}
.mast-links a:hover{color:var(--terra)}
nav.mast.dark .mast-links a:hover{color:var(--cream)}
.mast-links a.active{color:var(--terra)}
nav.mast.dark .mast-links a.active{color:var(--amber)}

/* eyebrows — Kelp on light surfaces, Amber on dark */
.eyebrow{
  font-family:'Space Mono',monospace;
  font-size:10px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--kelp);
}
.eyebrow.muted{color:var(--fig-clay-mid);font-weight:400}
.eyebrow .dot{color:var(--terra);margin:0 6px;font-weight:400}

/* colophon */
footer.colophon{padding:72px 0;margin-top:80px;position:relative;z-index:1}
.footer-rule{grid-column:1/10;height:1px;background:var(--rule);margin-bottom:32px}
.footer-inner{align-items:flex-start}
.footer-mark{
  grid-column:1/4;
  font-family:'Space Mono',monospace;font-size:10px;letter-spacing:0.06em;
  color:var(--fig-clay-mid);
}
.footer-links{grid-column:7/10;display:flex;justify-content:flex-end;gap:20px;list-style:none}
.footer-links a{
  font-family:'Space Mono',monospace;font-size:10px;letter-spacing:0.06em;
  color:var(--fig-clay-mid);text-decoration:none;transition:color 0.3s ease;
}
.footer-links a:hover{color:var(--terra)}

@media (max-width:900px){
  :root{--margin:32px;--gutter:14px}
  .mast-center{display:none}
  .mast-logo{grid-column:1/5}
  .mast-links{grid-column:5/10}
  .footer-mark{grid-column:1/10;margin-bottom:12px}
  .footer-links{grid-column:1/10;justify-content:flex-start}
}
@media (max-width:600px){
  :root{--margin:20px;--gutter:10px}
}