@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500;1,600&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root{
  color-scheme: light;

  --ink: #f3e8d3;
  --ink-soft: #ece0c8;
  --surface: #faf2e1;
  --surface-line: rgba(47,32,20,.18);
  --surface-line-strong: rgba(47,32,20,.36);

  --gold: #2f7166;
  --gold-bright: #d2603a;
  --moss: #d9a441;

  --text: #2b211a;
  --text-dim: rgba(43,33,26,.7);
  --text-faint: rgba(43,33,26,.45);

  --font-display: "Cormorant Garamond", serif;
  --font-body: "Source Serif 4", serif;
  --font-mono: "IBM Plex Mono", monospace;

  --radius-s: 3px;
  --radius-m: 6px;
}

*{ box-sizing:border-box; }

html,body{ margin:0; padding:0; }

body{
  background:var(--ink);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  position:relative;
  min-height:100vh;
}

/* ---------- atmosphere: hairline blueprint grid + vignette ---------- */
body::before{
  content:"";
  position:fixed; inset:0;
  z-index:-2;
  background-image:
    repeating-linear-gradient(0deg, rgba(47,32,20,.05) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(47,32,20,.05) 0 1px, transparent 1px 64px);
}
body::after{
  content:"";
  position:fixed; inset:0;
  z-index:-1;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(210,96,58,.06), transparent 60%),
    radial-gradient(ellipse 100% 70% at 50% 100%, rgba(47,32,20,.08), transparent 70%);
}

a{ color:inherit; }

/* ---------- layout ---------- */
.wrap{
  max-width:760px;
  margin:0 auto;
  padding:0 24px 80px;
  position:relative;
}
.wrap--home{
  min-height:100vh;
  display:grid;
  align-content:center;
  padding-top:80px;
  padding-bottom:80px;
}
.wrap--page{
  padding-top:48px;
}
.wrap--wide{
  max-width:920px;
}

/* ---------- top nav ---------- */
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:760px;
  margin:0 auto;
  padding:36px 24px 0;
  position:relative;
  z-index:2;
  opacity:0;
  animation:rise .7s cubic-bezier(.16,1,.3,1) .05s forwards;
}
.nav__mark{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:600;
  font-size:20px;
  text-decoration:none;
  letter-spacing:.01em;
}
.nav__mark-dot{ color:var(--gold); }
.nav__links{
  display:flex;
  gap:22px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.nav__links a{
  text-decoration:none;
  color:var(--text-dim);
  padding-bottom:3px;
  border-bottom:1px solid transparent;
  transition:color .25s, border-color .25s;
}
.nav__links a:hover{ color:var(--text); border-color:var(--surface-line-strong); }
.nav__links a[aria-current="page"]{
  color:var(--gold-bright);
  border-color:var(--gold);
}

/* ---------- eyebrow / specimen label ---------- */
.eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 18px;
}
.eyebrow::before{
  content:"";
  width:20px; height:1px;
  background:var(--gold);
  display:inline-block;
}

/* ---------- typography ---------- */
h1{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:600;
  font-size:clamp(34px, 5vw, 48px);
  line-height:1.05;
  letter-spacing:.005em;
  margin:0 0 14px;
  color:var(--text);
}
h2{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:600;
  font-size:24px;
  line-height:1.2;
  margin:40px 0 10px;
  color:var(--text);
  position:relative;
}
h2[data-mark]::before{
  content:attr(data-mark);
  position:absolute;
  left:-86px;
  top:5px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--text-faint);
}
@media (max-width:1040px){
  h2[data-mark]::before{ display:none; }
}

p{
  margin:14px 0;
  font-size:16px;
  color:var(--text-dim);
}
.lede{
  font-size:18px;
  color:var(--text-dim);
  max-width:46ch;
}
.lede em{ color:var(--gold-bright); font-style:italic; }

.dropcap::first-letter{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:600;
  font-size:54px;
  line-height:.75;
  float:left;
  padding:4px 8px 0 0;
  color:var(--gold-bright);
}

/* ---------- tags / stamped labels ---------- */
.tags{ display:flex; flex-wrap:wrap; gap:8px 8px; margin:18px 0 0; padding:0; list-style:none; }
.tag{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:5px 10px;
  border-radius:var(--radius-s);
  border:1px solid var(--surface-line);
  color:var(--text-dim);
  background:rgba(47,113,102,.08);
}

/* ---------- CTA links ---------- */
.links{ display:flex; gap:14px; flex-wrap:wrap; margin-top:32px; }
.stub{
  position:relative;
  display:inline-flex;
  align-items:center;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--text);
  padding:11px 18px;
  border:1px solid var(--surface-line);
  border-radius:var(--radius-s);
  background:var(--surface);
  transition:border-color .25s, color .25s, transform .25s;
}
.stub:hover{
  border-color:var(--gold);
  color:var(--gold-bright);
  transform:translateY(-1px);
}
.stub--primary{
  background:var(--gold);
  color:var(--surface);
  border-color:transparent;
  font-weight:500;
}
.stub--primary:hover{ color:var(--surface); filter:brightness(1.08); }

/* ---------- home card ---------- */
.card{
  position:relative;
  max-width:620px;
  padding:42px 40px;
  border:1px solid var(--surface-line);
  border-radius:var(--radius-m);
  background:var(--surface);
  box-shadow:0 30px 60px -30px rgba(47,32,20,.25);
  overflow:hidden;
  opacity:0;
  animation:rise .8s cubic-bezier(.16,1,.3,1) .15s forwards;
}

/* ---------- spiral watermark ---------- */
.spiral{
  position:absolute;
  pointer-events:none;
  z-index:0;
}
.spiral--hero{
  width:420px; height:420px;
  right:-140px; top:50%;
  transform:translateY(-50%);
  opacity:.55;
}
.spiral--corner{
  width:240px; height:240px;
  right:-60px; top:-40px;
  opacity:.3;
}
.spiral path{
  fill:none;
  stroke:var(--gold);
  stroke-width:1;
  stroke-linecap:round;
  stroke-linejoin:round;
  transform-origin:center;
  animation:spin 140s linear infinite;
}

/* ---------- footer ---------- */
.site-footer{
  margin-top:48px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--text-faint);
}

/* ---------- specimen cards (projects) ---------- */
#projects{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:18px;
  counter-reset:specimen;
  margin-top:8px;
}
.project{
  position:relative;
  padding:24px 22px 22px;
  border:1px solid var(--surface-line);
  border-radius:var(--radius-m);
  background:var(--surface);
  counter-increment:specimen;
}
.project::before{
  content:"No. " counter(specimen, specimen-num);
  display:block;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.14em;
  color:var(--text-faint);
  margin-bottom:10px;
}
@counter-style specimen-num{
  system:numeric;
  symbols:"0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
  pad:2 "0";
}
.project h2{
  margin:0 0 8px;
  font-size:21px;
}
.project h2 a{
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .25s, border-color .25s;
}
.project h2 a:hover{
  color:var(--gold-bright);
  border-color:var(--surface-line-strong);
}
.project p{
  margin:6px 0 0;
  font-size:14.5px;
  line-height:1.6;
}

/* ---------- entrance stagger ---------- */
.content > *{
  opacity:0;
  animation:rise .7s cubic-bezier(.16,1,.3,1) forwards;
}
.content > *:nth-child(1){ animation-delay:.1s; }
.content > *:nth-child(2){ animation-delay:.18s; }
.content > *:nth-child(3){ animation-delay:.26s; }
.content > *:nth-child(4){ animation-delay:.34s; }
.content > *:nth-child(5){ animation-delay:.42s; }
.content > *:nth-child(6){ animation-delay:.5s; }

@keyframes rise{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes spin{ to{ transform:rotate(360deg); } }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; }
  .nav, .card, .content > *{ opacity:1; transform:none; }
}

@media (max-width:640px){
  .card{ padding:30px 24px; }
  .spiral--hero{ width:260px; height:260px; right:-110px; opacity:.35; }
}