/* ============================================================
   lsware.net — a clothbound monograph of enterprise software
   Botanical-editorial · sepia-nostalgic · elastic manuscript grid
   ============================================================ */

/* ---- Paper noise: tileable rag-paper fibre as a data-URI SVG ---- */
:root {
  --foxed:    #f4ecdc; /* Foxed Paper   — page background */
  --linen:    #e8dcc2; /* Pressed Linen — alternating bands */
  --vellum:   #c9b48a; /* Aged Vellum   — rules, borders */
  --walnut:   #8b6f3f; /* Walnut Ink    — links, accents, ferns */
  --bistre:   #5b4423; /* Bistre        — body text */
  --tannin:   #2e2418; /* Tannin Black  — headings, drop-caps */
  --buckwheat:#a8895c; /* Buckwheat     — mid-tone illustration fill */
  --vermillion:#d94a1f;/* Vermillion Stamp — single-use accent */

  --paper-noise: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");

  /* Elastic six-step rhythm — clamp()-based, no fixed pixel scale */
  --space-1: clamp(0.875rem, 0.62rem + 0.6vw, 1.1rem);
  --space-2: clamp(1.1rem, 0.78rem + 1vw, 1.6rem);
  --space-3: clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem);
  --space-4: clamp(2.4rem, 1.6rem + 3vw, 3.8rem);
  --space-5: clamp(3.8rem, 2.4rem + 5vw, 6rem);
  --space-6: clamp(5.6rem, 3.4rem + 7vw, 9.5rem);

  --rubber: cubic-bezier(0.34, 1.56, 0.64, 1);

  font-feature-settings: "onum" 1, "liga" 1, "kern" 1;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Lora', Georgia, serif;
  font-size: 18px;
  line-height: 1.72;
  color: var(--bistre);
  background-color: var(--foxed);
  background-image: var(--paper-noise);
  background-blend-mode: multiply;
  background-size: 220px 220px;
  font-feature-settings: "onum" 1, "liga" 1, "kern" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.paper-wrap { overflow-x: hidden; }

/* ---------- The manuscript grid ---------- */
.grid {
  display: grid;
  grid-template-columns:
    minmax(2rem, 1fr) minmax(0, 64ch) minmax(2rem, 22ch) minmax(2rem, 1fr);
  column-gap: clamp(1.4rem, 1rem + 2vw, 3rem);
  align-items: start;
}
.col-read   { grid-column: 2; }
.col-margin { grid-column: 3; padding-top: var(--space-3); }

@media (max-width: 900px) {
  .grid {
    grid-template-columns: minmax(1.4rem, 1fr) minmax(0, 64ch) minmax(1.4rem, 1fr);
  }
  .col-read   { grid-column: 2; }
  .col-margin { grid-column: 2; padding-top: var(--space-2); }
}

/* ---------- Folio numbers ---------- */
.folio {
  position: absolute;
  top: var(--space-2);
  right: clamp(1.4rem, 4vw, 4rem);
  font-family: 'Cormorant Upright', 'Cormorant Garamond', serif;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  color: var(--walnut);
  font-variant-numeric: oldstyle-nums;
}

/* ---------- Engraved ridgeline rule ---------- */
.ridge {
  display: block;
  width: 100%;
  height: clamp(20px, 3vw, 34px);
  margin: 0;
}
.ridge--head { height: 38px; margin-top: 0; }

/* ---------- Masthead / nav ---------- */
.masthead {
  position: relative;
  padding-top: var(--space-3);
  background-color: var(--foxed);
  background-image: var(--paper-noise);
  background-blend-mode: multiply;
  background-size: 220px 220px;
}
.masthead-inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
}
.wordmark {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.8rem, 1.2rem + 2vw, 2.7rem);
  color: var(--tannin);
  text-transform: lowercase;
  letter-spacing: -0.012em;
  text-decoration: none;
  line-height: 1;
  position: relative;
  display: inline-block;
}
.wordmark::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -0.16em;
  height: 1px;
  background: var(--walnut);
}
.topnav ul {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.9rem, 0.5rem + 1.2vw, 1.8rem);
  list-style: none;
}
.topnav a {
  font-family: 'Cormorant Upright', 'Cormorant Garamond', serif;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--walnut);
  text-decoration: none;
  transition: color 220ms var(--rubber);
}
.topnav a:hover { color: var(--bistre); }

/* ---------- Generic links ---------- */
a {
  color: var(--walnut);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--vellum);
  transition: color 220ms var(--rubber), text-decoration-thickness 220ms var(--rubber), text-decoration-color 220ms var(--rubber);
}
a:hover {
  color: var(--bistre);
  text-decoration-thickness: 2.5px;
  text-decoration-color: var(--walnut);
}

/* ---------- Hero plate ---------- */
.plate {
  position: relative;
  min-height: 38vh;
  padding-block: var(--space-5);
  background-color: var(--linen);
  background-image: var(--paper-noise);
  background-blend-mode: multiply;
  background-size: 220px 220px;
  overflow: hidden;
}
.plate-inner { position: relative; z-index: 2; }
.eyebrow {
  font-family: 'Cormorant Upright', 'Cormorant Garamond', serif;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--walnut);
  margin-bottom: var(--space-2);
}
.plate-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: clamp(3rem, 2rem + 6vw, 6.5rem);
  line-height: 0.96;
  letter-spacing: -0.012em;
  color: var(--tannin);
  margin-bottom: var(--space-3);
}
.plate-sub {
  font-style: italic;
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem);
  color: var(--bistre);
  max-width: 52ch;
}
.plate-margin { position: relative; z-index: 2; }

/* ---------- Vermillion seal (single saturated accent) ---------- */
.seal {
  position: absolute;
  top: var(--space-4);
  right: clamp(1.4rem, 5vw, 5rem);
  width: clamp(78px, 11vw, 130px);
  z-index: 3;
  opacity: 0.92;
}
.seal svg { width: 100%; height: auto; display: block; }
.seal text {
  font-family: 'Cormorant Upright', 'Cormorant Garamond', serif;
  font-size: 9.5px;
  letter-spacing: 0.06em;
}

/* ---------- Fern silhouettes in gutters ---------- */
.fern {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  opacity: 0.4;
  transform-origin: 50% 100%;
}
.fern--plate {
  width: clamp(80px, 12vw, 200px);
  left: -2.5vw;
  bottom: -4vh;
}
.fern--chapter {
  width: clamp(80px, 11vw, 170px);
  right: -1.5vw;
  bottom: var(--space-4);
}
@media (max-width: 900px) { .fern { opacity: 0.22; } }

/* ---------- Chapters / bands ---------- */
.chapter {
  position: relative;
  padding-block: var(--space-5);
  overflow: hidden;
}
.band-paper {
  background-color: var(--foxed);
  background-image: var(--paper-noise);
  background-blend-mode: multiply;
  background-size: 220px 220px;
}
.band-linen {
  background-color: var(--linen);
  background-image: var(--paper-noise);
  background-blend-mode: multiply;
  background-size: 220px 220px;
}
.chapter-eyebrow {
  font-family: 'Cormorant Upright', 'Cormorant Garamond', serif;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--walnut);
  margin-bottom: var(--space-1);
}
.chapter-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: clamp(2rem, 1.3rem + 3.4vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -0.012em;
  color: var(--tannin);
  margin-bottom: var(--space-3);
  text-wrap: balance;
}

/* ---------- Body prose ---------- */
.chapter p,
.colophon p {
  margin-bottom: var(--space-2);
  hyphens: auto;
  font-variant-numeric: oldstyle-nums;
}
.chapter p:last-child { margin-bottom: 0; }
.lead {
  font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.22rem);
}

/* ---------- Drop-caps with botanical ornament ---------- */
.dropcap { position: relative; }
.dropcap::first-letter {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 4.4em;
  line-height: 0.86;
  float: left;
  margin: 0.06em 0.12em 0 0;
  color: var(--tannin);
}
.dropcap::before {
  content: "";
  position: absolute;
  left: -0.55em;
  top: -0.25em;
  width: 2.8em;
  height: 2.8em;
  opacity: 0.1;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}
.dropcap[data-orn="clematis"]::before {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%232e2418' stroke-width='1.25'%3E%3Cpath d='M10,90 C40,70 30,40 60,20 M60,20 C70,30 65,45 50,55 M60,20 C80,25 90,40 85,55 M30,60 C20,52 18,42 22,32'/%3E%3Ccircle cx='62' cy='22' r='4'/%3E%3C/g%3E%3C/svg%3E");
}
.dropcap[data-orn="ivy"]::before {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%232e2418' stroke-width='1.25'%3E%3Cpath d='M12,88 C30,68 24,44 44,28 C52,40 50,54 36,62 M44,28 C58,22 72,30 70,46 C68,58 56,62 46,58 M20,60 C14,50 16,40 24,34'/%3E%3C/g%3E%3C/svg%3E");
}
.dropcap[data-orn="oak"]::before {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%232e2418' stroke-width='1.25'%3E%3Cpath d='M14,86 C36,66 30,44 52,26 M52,26 C44,18 38,18 30,24 M52,26 C60,18 66,18 72,26 M40,50 C30,42 26,32 30,22 M64,46 C74,40 80,30 78,20'/%3E%3Cellipse cx='52' cy='20' rx='5' ry='7'/%3E%3C/g%3E%3C/svg%3E");
}
.dropcap[data-orn="laurel"]::before {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%232e2418' stroke-width='1.25'%3E%3Cpath d='M16,84 C34,64 30,42 50,24 C58,34 56,48 44,56 M50,24 C42,16 36,16 30,22 M50,24 C58,16 64,16 70,24 M60,46 C70,40 76,30 74,20'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- Pull quotes ---------- */
.pullquote {
  margin: var(--space-3) 0;
  padding: var(--space-2) 0 var(--space-2) var(--space-3);
  border-left: 1px solid var(--vellum);
}
.pullquote p {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.3rem, 1rem + 1.4vw, 1.85rem);
  line-height: 1.32;
  color: var(--tannin);
  margin-bottom: var(--space-1);
}
.pullquote cite {
  display: block;
  font-style: normal;
  font-family: 'Cormorant Upright', 'Cormorant Garamond', serif;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--walnut);
}

/* ---------- Marginalia ---------- */
.marginalia {
  font-family: 'Cormorant Upright', 'Cormorant Garamond', serif;
  font-size: 13.5px;
  line-height: 1.62;
  letter-spacing: 0.01em;
  color: var(--walnut);
  margin-bottom: var(--space-2);
}
.marginalia em { font-style: italic; }
.marg-mark { color: var(--vellum); margin-right: 0.35em; }
@media (max-width: 900px) {
  .marginalia {
    font-style: italic;
    font-family: 'Lora', Georgia, serif;
    font-size: 15px;
    color: var(--bistre);
    border-top: 1px solid var(--vellum);
    padding-top: var(--space-1);
  }
}

/* ---------- Commission index ---------- */
.commissions {
  list-style: none;
  margin: var(--space-3) 0;
  font-variant-numeric: oldstyle-nums;
}
.commissions li {
  display: grid;
  grid-template-columns: 4.5ch 1fr;
  gap: 1.2em;
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--vellum);
}
.commissions li:first-child { border-top: 1px solid var(--vellum); }
.comm-year {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25em;
  color: var(--tannin);
  font-variant-numeric: oldstyle-nums;
}
.comm-body { color: var(--bistre); }
.commissions li::before {
  content: "";
}

/* ---------- Figure plates ---------- */
.plate-fig {
  margin: var(--space-4) auto 0;
  max-width: min(86ch, 92vw);
}
.plate-fig svg { width: 100%; height: auto; display: block; }
.plate-fig figcaption {
  font-family: 'Cormorant Upright', 'Cormorant Garamond', serif;
  font-style: italic;
  font-variant: small-caps;
  font-size: 13.5px;
  letter-spacing: 0.06em;
  color: var(--walnut);
  margin-top: var(--space-1);
  text-align: center;
}

/* ---------- Colophon / footer ---------- */
.colophon {
  position: relative;
  padding-top: var(--space-5);
  padding-bottom: clamp(8rem, 6rem + 12vw, 16rem);
  background-color: var(--foxed);
  background-image: var(--paper-noise);
  background-blend-mode: multiply;
  background-size: 220px 220px;
  overflow: hidden;
}
.footer-range {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  height: clamp(140px, 22vw, 320px);
  z-index: 1;
}
.colophon-inner, .colophon-margin { position: relative; z-index: 2; }
.colophon-title {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(2.4rem, 1.6rem + 3.6vw, 4rem);
  letter-spacing: -0.012em;
  color: var(--tannin);
  text-transform: lowercase;
  margin-bottom: var(--space-3);
}
.colophon-body { max-width: 56ch; }
.colophon-imprint {
  font-family: 'Cormorant Upright', 'Cormorant Garamond', serif;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--walnut);
  margin-top: var(--space-3) !important;
  font-variant-numeric: oldstyle-nums;
}

/* ---------- Code / mono (rare) ---------- */
code, pre, .mono {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 14.5px;
  font-variant-numeric: lining-nums;
}