/* Nightingale — Embroidered edition.
   Same page, stitched onto dark green linen: cream/gold/rust/olive thread,
   running-stitch rules drawn as actual thread (SVG tiles with rounded ends,
   a slight curve, and a shadow), turned-wood hoops around the portraits. */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --cloth: #223829;
  --cloth-deep: #1a2d20;
  --thread: #e7d9b4;      /* cream */
  --thread-dim: #b9ad8c;
  --gold: #d1a34c;
  --gold-soft: #b98c33;
  --rust: #bf6b3a;
  --olive: #9aa55e;
  --stitch: rgba(231, 217, 180, .38);

  /* running-stitch tiles: each dash is a curved thread with rounded ends
     lying over its own shadow, so rules read as sewn, not dashed */
  --st-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='6'%3E%3Cpath d='M2 4.2 q4.5 -1.3 9.5 -.5' fill='none' stroke='rgba(20,13,5,.55)' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M2 3.3 q4.5 -1.3 9.5 -.5' fill='none' stroke='%23cfa14e' stroke-width='2.3' stroke-linecap='round'/%3E%3C/svg%3E");
  --st-rust: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='6'%3E%3Cpath d='M2 4.2 q4.5 -1.3 9.5 -.5' fill='none' stroke='rgba(20,13,5,.55)' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M2 3.3 q4.5 -1.3 9.5 -.5' fill='none' stroke='%23b0693a' stroke-width='2.3' stroke-linecap='round'/%3E%3C/svg%3E");
  --st-dim: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='6'%3E%3Cpath d='M2 4.2 q4.5 -1.3 9.5 -.5' fill='none' stroke='rgba(15,10,4,.4)' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M2 3.4 q4.5 -1.3 9.5 -.5' fill='none' stroke='rgba(206,194,158,.72)' stroke-width='2.1' stroke-linecap='round'/%3E%3C/svg%3E");
  --st-dim-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='17'%3E%3Cpath d='M4.6 2 q-1.3 4.5 -.5 9.5' fill='none' stroke='rgba(15,10,4,.4)' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M3.7 2 q-1.3 4.5 -.5 9.5' fill='none' stroke='rgba(206,194,158,.72)' stroke-width='2.1' stroke-linecap='round'/%3E%3C/svg%3E");
}

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background-color: var(--cloth);
  /* linen: fine warp/weft weave + cloth grain + a soft vignette */
  background-image:
    radial-gradient(120% 90% at 50% 12%, rgba(255, 244, 214, .05), transparent 55%),
    radial-gradient(140% 120% at 50% 110%, rgba(0, 0, 0, .35), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .05) 0 1px, transparent 1px 3px);
  color: var(--thread);
  font-family: Baskerville, "Baskerville Old Face", Palatino, Georgia, serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* stitched border around the viewport, sewn from the thread tiles */
body::after {
  content: "";
  position: fixed; inset: 12px;
  background-image: var(--st-dim), var(--st-dim), var(--st-dim-v), var(--st-dim-v);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-position: left top, left bottom, left top, right top;
  opacity: .6;
  pointer-events: none;
  z-index: 10;
}

::selection { background: rgba(209, 163, 76, .35); }

/* corner sprays: quiet, behind the content */
.corner { position: fixed; pointer-events: none; z-index: 0; opacity: .5; }
.corner-tr { top: -6px; right: -8px; width: 230px; }
.corner-bl { bottom: -6px; left: -8px; width: 250px; }

.wrap { max-width: 900px; margin: 0 auto; padding: 0 2rem; position: relative; z-index: 1; }

a { color: inherit; }
a:focus-visible { outline: 2px dashed var(--gold); outline-offset: 3px; }

/* avoid a lone word stranded on a paragraph's last line */
p, li { text-wrap: pretty; }

/* ---------- placeholder slots ---------- */
.slot {
  display: block;
  background-image: var(--st-dim), var(--st-dim), var(--st-dim-v), var(--st-dim-v);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-position: left top, left bottom, left top, right top;
  padding: .9em 1.1em;
  font-family: Menlo, "SF Mono", Consolas, monospace;
  font-size: .72rem;
  letter-spacing: .02em;
  line-height: 1.55;
  color: var(--thread-dim);
  text-align: left;
  text-transform: none;
}
.slot::before { content: "¶ "; color: var(--gold); }

/* ---------- header ---------- */
header {
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: .8rem 1.5rem;
  padding: 2rem 0 1.8rem;
}
.mark {
  font-size: 1.02rem; letter-spacing: .34em; text-transform: uppercase;
  font-weight: 600; text-decoration: none;
  color: var(--thread);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
}
nav { display: flex; gap: 1.5rem; flex-wrap: wrap; }
nav a {
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--thread-dim); text-decoration: none;
  padding-bottom: .4em;
  transition: color .2s ease;
}
nav a:hover {
  color: var(--thread);
  background-image: var(--st-gold);
  background-repeat: repeat-x;
  background-position: left bottom;
}

/* ---------- hero ---------- */
.hero { padding: 2.2rem 0 0; text-align: center; }

.needlework {
  display: block;
  width: min(560px, 92%);
  margin: 0 auto;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .45));
}

h1 {
  font-size: clamp(2rem, 4.6vw, 3.1rem);
  font-weight: 500; line-height: 1.18; letter-spacing: .01em;
  max-width: 22ch; margin: 1.6rem auto 0; text-wrap: balance;
  color: var(--thread);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .55), 0 2px 3px rgba(0, 0, 0, .25);
}
.hero .slot { max-width: 46ch; margin: 2rem auto 0; }
.hero-sub {
  font-size: 1.05rem;
  font-variant: small-caps;
  letter-spacing: .32em;
  color: var(--gold);
  max-width: 52ch; margin: 1.4rem auto 0;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
}
.hero-sub + .hero-sub { margin-top: .8em; }

/* sunrise, stitched in gold (inline SVG) */
.horizon { display: block; width: min(760px, 100%); height: auto; margin: 2.6rem auto 0; }

/* the full-width branch: bleeds clear across the viewport */
.page-branch {
  width: 100vw; position: relative; left: 50%; margin-left: -50vw;
  margin-top: 4rem; opacity: .65;
}
.page-branch svg { display: block; width: 100%; height: auto; }

/* ---------- sections ---------- */
section { padding: 4.2rem 0 0; }
.sec-label {
  font-size: .8rem; font-weight: 600; letter-spacing: .26em;
  text-transform: uppercase; color: var(--gold);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
}
.sec-label::after {
  content: ""; display: block; width: 3.2rem; height: 6px;
  margin-top: .6rem;
  background-image: var(--st-gold);
  background-repeat: repeat-x;
}
.sec-body { margin-top: 1.6rem; }
.sec-body .slot { max-width: 62ch; }
.sec-body p { font-size: 1rem; color: var(--thread); max-width: 62ch; }
.sec-body p + p, .sec-body .slot + p, .sec-body p + .slot { margin-top: .8em; }
.sec-body ul { margin: .8em 0 0 1.2em; list-style: none; }
.sec-body li { font-size: 1rem; color: var(--thread); max-width: 60ch; margin-top: .4em; }
.sec-body li::before { content: "✕ "; color: var(--rust); font-size: .8em; }

/* column grid */
.cols {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2.4rem; margin-top: 1.8rem;
}
.col h3 {
  font-size: .8rem; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; margin-bottom: .9rem;
  color: var(--thread);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
}
.col h3::after {
  content: ""; display: block; width: 2.4rem; height: 6px;
  margin-top: .5rem;
  background-image: var(--st-rust);
  background-repeat: repeat-x;
}
.col p { font-size: .98rem; color: var(--thread-dim); }
.col p + p { margin-top: .8em; }

/* values ledger — rows joined by running stitches */
.values { margin-top: 1.8rem; display: grid; gap: 0; }
.value {
  display: grid; grid-template-columns: 220px 1fr; gap: 1.5rem;
  padding: 1.3rem 0;
  position: relative;
}
.value::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px;
  background-image: var(--st-dim);
  background-repeat: repeat-x;
}
.value:last-child::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
  background-image: var(--st-dim);
  background-repeat: repeat-x;
}
.value h3 {
  font-size: .96rem; font-weight: 600; letter-spacing: .04em; padding-top: .1rem;
  color: var(--gold);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
}
.value p { font-size: .96rem; color: var(--thread); max-width: 58ch; }

/* ---------- portraits: turned-wood embroidery hoops ---------- */
.portraits {
  display: flex; justify-content: center; align-items: flex-start;
  gap: 3.5rem; flex-wrap: wrap; margin-top: 1.8rem;
}
.portraits .portrait-fig { margin-top: 0; flex: 0 0 auto; max-width: 240px; }
.portrait-fig { text-align: center; margin: 1.8rem auto 0; }
.portrait {
  width: 184px; height: 184px; border-radius: 50%;
  object-fit: cover; object-position: 50% 25%;
  /* hoop: wood ring (border area) around a sliver of cloth (padding area) */
  border: 9px solid transparent;
  padding: 3px;
  background:
    linear-gradient(var(--cloth-deep), var(--cloth)) padding-box,
    conic-gradient(from 210deg,
      #6b431f, #a97e42 12%, #7a5426 26%, #c39a5b 42%, #7c5326 58%,
      #b1854a 72%, #66401d 88%, #6b431f) border-box;
  box-shadow:
    0 0 0 1.5px #3c2510,
    0 1px 0 1.5px rgba(240, 220, 170, .18),
    0 8px 18px rgba(0, 0, 0, .5);
  filter: sepia(.22) saturate(.9) contrast(.96);
}
.portrait-fig figcaption {
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--thread-dim); margin-top: 1.2rem;
}
.cols .portrait-fig { margin-top: .2rem; }
.cols .portrait { width: 140px; height: 140px; border-width: 7px; }

/* ---------- quote ---------- */
.quote { padding: 5rem 0 0; text-align: center; }
.quote::before {
  /* a small sprig above the quote */
  content: "";
  display: block; width: 90px; height: 26px; margin: 0 auto 1.2rem;
  background-repeat: no-repeat; background-position: center; background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 26'%3E%3Cg fill='none' stroke='%239aa55e' stroke-width='2' stroke-linecap='round' stroke-dasharray='5 3'%3E%3Cpath d='M8 16 C 30 8 60 8 82 16'/%3E%3C/g%3E%3Cg fill='%239aa55e'%3E%3Cellipse cx='24' cy='9' rx='7' ry='3' transform='rotate(-18 24 9)'/%3E%3Cellipse cx='45' cy='6' rx='7' ry='3'/%3E%3Cellipse cx='66' cy='9' rx='7' ry='3' transform='rotate(18 66 9)'/%3E%3C/g%3E%3Ccircle cx='45' cy='17' r='3.4' fill='%23bf6b3a'/%3E%3C/svg%3E");
}
blockquote {
  font-style: italic; font-size: 1.35rem; line-height: 1.55;
  max-width: 40ch; margin: 0 auto; color: var(--thread);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
}
blockquote footer {
  font-style: normal; font-size: .68rem; letter-spacing: .24em;
  text-transform: uppercase; color: var(--gold); margin-top: 1.2rem;
}

/* ---------- footer ---------- */
.foot {
  margin-top: 5.5rem;
  padding: 2rem 0 3rem;
  position: relative;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 1rem;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--thread-dim);
}
.foot::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px;
  background-image: var(--st-gold);
  background-repeat: repeat-x;
}
.foot .slot, .foot p { display: inline-block; }
.foot p { font-size: .82rem; text-transform: none; letter-spacing: .03em; }
.alt-skin {
  color: var(--thread-dim); text-decoration: none;
  padding-bottom: .4em;
  background-image: var(--st-dim);
  background-repeat: repeat-x;
  background-position: left bottom;
}
.alt-skin:hover { color: var(--thread); background-image: var(--st-gold); }

@media (max-width: 1000px) {
  .corner { display: none; }
}
@media (max-width: 720px) {
  .cols { grid-template-columns: 1fr; }
  .value { grid-template-columns: 1fr; gap: .4rem; }
  .hero { padding-top: 1.2rem; }
  body::after { inset: 7px; }
}