/* ==========================================================================
   Tortuga Early Instruments — design system
   Palette and type are drawn from the instrument itself:
   iron-oxide case red, chalk soundboard ground, gilt banding, ebony,
   verdigris from Flemish soundboard painting. Display face is IM Fell
   English — cut in the 17th century, contemporaneous with the Ruckers shop.
   ========================================================================== */

:root {
  --case-red: #5e1f14;        /* iron-oxide interior of a Flemish case */
  --case-red-deep: #46150d;
  --soundboard: #f7f1e1;      /* chalk-and-casein ground */
  --soundboard-shade: #ede3cb;
  --ebony: #211a13;           /* sharp-key ebony, warm black */
  --ink: #33291d;
  --ink-soft: #5c4f3d;
  --gilt: #b8912f;            /* gold case banding */
  --gilt-bright: #d4af4e;
  --verdigris: #3f6353;       /* soundboard-painting green */
  --verdigris-deep: #2f4c40;

  --serif-display: "IM Fell English", "Iowan Old Style", Georgia, serif;
  --serif-sc: "IM Fell English SC", "IM Fell English", Georgia, serif;
  --serif-body: "EB Garamond", "Iowan Old Style", Georgia, serif;
  --mono: "IBM Plex Mono", "Consolas", monospace;

  --measure: 66ch;
  --gutter: clamp(1.25rem, 4vw, 3rem);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--soundboard);
  color: var(--ink);
  font-family: var(--serif-body);
  font-size: 1.155rem;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ------------------------------------------------------------------ type */

h1, h2, h3 {
  font-family: var(--serif-display);
  font-weight: 400;
  line-height: 1.12;
  color: var(--ebony);
  margin: 0 0 0.6em;
}

h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); letter-spacing: 0.01em; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.55rem); }

p { margin: 0 0 1.1em; }

a {
  color: var(--verdigris-deep);
  text-decoration-color: color-mix(in srgb, var(--verdigris) 55%, transparent);
  text-underline-offset: 0.18em;
  transition: color 120ms ease;
}
a:hover { color: var(--case-red); text-decoration-color: var(--case-red); }

:focus-visible {
  outline: 2px solid var(--gilt);
  outline-offset: 3px;
  border-radius: 1px;
}

::selection { background: var(--gilt); color: var(--ebony); }

/* Utility voice: drafting-room labels */
.label {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Lid-motto voice */
.motto {
  font-family: var(--serif-sc);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------- layout */

.wrap {
  max-width: 76rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.prose { max-width: var(--measure); }

section { padding-block: clamp(2.75rem, 7vw, 5.5rem); }

/* Two-column scholarly layout: running text + marginalia */
.folio {
  display: grid;
  grid-template-columns: minmax(0, var(--measure)) minmax(11rem, 16rem);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}
.folio > .margin-notes { padding-top: 0.5rem; }

.note {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-soft);
  border-top: 1px solid var(--gilt);
  padding-top: 0.6rem;
  margin-bottom: 1.6rem;
}
.note .label { display: block; margin-bottom: 0.3rem; color: var(--gilt); }

@media (max-width: 54rem) {
  .folio { grid-template-columns: 1fr; }
  .margin-notes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1rem;
  }
}

/* ------------------------------------------------------------ block paper
   Antwerp block-printed case paper, abstracted: interlaced strapwork band
   used as a section divider. */

.paper-band {
  height: 1.35rem;
  background-color: var(--soundboard-shade);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='22' viewBox='0 0 44 22'%3E%3Cg fill='none' stroke='%2333291d' stroke-width='1.1'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Ccircle cx='33' cy='11' r='7'/%3E%3Cpath d='M0 11h4M18 11h8M40 11h4'/%3E%3C/g%3E%3Ccircle cx='22' cy='11' r='1.6' fill='%235e1f14'/%3E%3Ccircle cx='0' cy='11' r='1.6' fill='%235e1f14'/%3E%3Ccircle cx='44' cy='11' r='1.6' fill='%235e1f14'/%3E%3C/svg%3E");
  background-size: 44px 22px;
  background-repeat: repeat-x;
  background-position: center;
  border-block: 1px solid var(--ebony);
  opacity: 0.85;
}

/* ---------------------------------------------------------------- header */

.topbar {
  background: var(--case-red);
  color: var(--soundboard);
  border-bottom: 3px double var(--gilt);
}

.topbar .wrap {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding-block: 0.9rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  text-decoration: none;
  color: var(--soundboard);
  margin-right: auto;
}
.brand:hover { color: var(--gilt-bright); }
.brand svg { width: 2.6rem; height: 2.6rem; flex: none; }

.brand-name {
  font-family: var(--serif-display);
  font-size: 1.32rem;
  line-height: 1.1;
}
.brand-name small {
  display: block;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gilt-bright);
  margin-top: 0.2rem;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.35rem;
}
.nav a {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--soundboard);
  padding-block: 0.35rem;
  border-bottom: 1px solid transparent;
}
.nav a:hover { color: var(--gilt-bright); border-bottom-color: var(--gilt-bright); }
.nav a[aria-current="page"] { color: var(--gilt-bright); border-bottom-color: var(--gilt); }

/* ------------------------------------------------------------------ hero */

.hero {
  background: var(--case-red);
  color: var(--soundboard);
  padding-block: clamp(3rem, 8vw, 6rem) clamp(2.5rem, 6vw, 4.5rem);
}
.hero h1 { color: var(--soundboard); max-width: 24ch; }
.hero .lede {
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  max-width: 52ch;
  color: color-mix(in srgb, var(--soundboard) 88%, var(--case-red));
}
.hero .label { color: var(--gilt-bright); }
.hero a { color: var(--gilt-bright); }
.hero a:hover { color: var(--soundboard); }

.hero-drawing {
  display: block;
  width: 100%;
  height: auto;
  margin-top: clamp(1.5rem, 4vw, 3rem);
}

/* page-load line draw for the measured drawing.
   Paths carry pathLength="1" so one keyframe drives any length. */
@media (prefers-reduced-motion: no-preference) {
  .hero-drawing .draw {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: draw 2.6s ease-in-out forwards;
  }
  .hero-drawing .draw-late {
    opacity: 0;
    animation: fade 1.1s ease-out 2s forwards;
  }
  @keyframes draw { to { stroke-dashoffset: 0; } }
  @keyframes fade { to { opacity: 1; } }
}

/* ----------------------------------------------------------------- cards */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: 1.4rem;
  margin-top: 2.2rem;
}

.card {
  background: var(--soundboard);
  border: 1px solid var(--ebony);
  padding: 1.5rem 1.5rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  box-shadow: 4px 4px 0 color-mix(in srgb, var(--ebony) 14%, transparent);
  transition: box-shadow 140ms ease, translate 140ms ease;
}
.card:hover {
  box-shadow: 6px 6px 0 color-mix(in srgb, var(--case-red) 35%, transparent);
  translate: -1px -1px;
}
.card h3 { margin: 0; }
.card p { margin: 0; font-size: 1.02rem; color: var(--ink-soft); }
.card .label { color: var(--case-red); }
.card a { text-decoration: none; color: inherit; }
.card a h3 { transition: color 120ms ease; }
.card a:hover h3 { color: var(--case-red); }

/* ------------------------------------------------------------- directory */

.dir-group { margin-top: 2.6rem; }
.dir-group > .label {
  display: block;
  color: var(--case-red);
  border-bottom: 1px solid var(--ebony);
  padding-bottom: 0.5rem;
}

.dir-list { list-style: none; margin: 0; padding: 0; }
.dir-list li {
  display: grid;
  grid-template-columns: minmax(11rem, 16rem) 1fr;
  gap: 0.4rem 1.6rem;
  padding-block: 0.85rem;
  border-bottom: 1px dotted color-mix(in srgb, var(--ink-soft) 45%, transparent);
}
.dir-list li:last-child { border-bottom: none; }
.dir-list .dir-name { font-family: var(--serif-body); font-weight: 600; font-size: 1.08rem; }
.dir-list .dir-desc { font-size: 1rem; color: var(--ink-soft); margin: 0; }
@media (max-width: 40rem) {
  .dir-list li { grid-template-columns: 1fr; padding-block: 1rem; }
}

/* ---------------------------------------------------------------- plates
   Explicit photo placeholders — replaced by real shop photography. */

.plate {
  border: 1px solid var(--ebony);
  background: var(--soundboard-shade);
  padding: 0.6rem;
  margin: 1.8rem 0;
}
.plate img { display: block; width: 100%; height: auto; }
.plate figcaption {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 0.55rem 0.2rem 0.1rem;
}

.plate--pending .plate-void {
  display: grid;
  place-content: center;
  min-height: 11rem;
  border: 1px dashed var(--ink-soft);
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  padding: 1rem;
}

/* ------------------------------------------------------------ quote/motto */

.lid-motto {
  text-align: center;
  padding-block: clamp(2rem, 5vw, 3.2rem);
  border-block: 3px double var(--gilt);
  margin-block: clamp(2.2rem, 5vw, 3.5rem);
}
.lid-motto .motto {
  font-size: clamp(1.25rem, 3vw, 1.9rem);
  color: var(--case-red);
  margin: 0;
}
.lid-motto .label { margin-top: 0.9rem; display: block; }

blockquote {
  margin: 2rem 0;
  padding-left: 1.4rem;
  border-left: 3px solid var(--gilt);
  font-size: 1.18rem;
  font-style: italic;
  color: var(--ink-soft);
}
blockquote cite { display: block; font-style: normal; margin-top: 0.6rem; }

/* -------------------------------------------------------------- timeline */

.era { border-top: 1px solid var(--ebony); padding-top: 2rem; margin-top: 3rem; }
.era:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }
.era-head {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.era-head .dates {
  font-family: var(--mono);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: var(--case-red);
}
.era-head h2, .era-head h3 { margin: 0; }

/* -------------------------------------------------------------- feature */

.feature {
  background: var(--ebony);
  color: var(--soundboard);
}
.feature h2, .feature h3 { color: var(--soundboard); }
.feature .label { color: var(--gilt-bright); }
.feature a { color: var(--gilt-bright); }
.feature a:hover { color: var(--soundboard); }
.feature p { color: color-mix(in srgb, var(--soundboard) 85%, var(--ebony)); }

.band--shade { background: var(--soundboard-shade); }

/* ---------------------------------------------------------------- footer */

footer {
  background: var(--ebony);
  color: var(--soundboard);
  padding-block: 3rem 2.4rem;
  margin-top: clamp(3rem, 7vw, 5rem);
  border-top: 3px double var(--gilt);
  text-align: center;
}
footer .motto {
  color: var(--gilt-bright);
  font-size: 1.05rem;
  display: block;
  margin-bottom: 0.5rem;
}
footer p {
  font-size: 0.95rem;
  color: color-mix(in srgb, var(--soundboard) 75%, var(--ebony));
  margin: 0.3rem 0;
}
footer a { color: var(--soundboard); }
footer a:hover { color: var(--gilt-bright); }
footer svg { width: 3rem; height: 3rem; margin-bottom: 0.8rem; }

/* --------------------------------------------------------------- tables */

table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.5rem 0;
  font-size: 1rem;
}
th, td {
  text-align: left;
  padding: 0.55rem 0.9rem 0.55rem 0;
  border-bottom: 1px dotted color-mix(in srgb, var(--ink-soft) 45%, transparent);
  vertical-align: top;
}
th {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--case-red);
  border-bottom: 1px solid var(--ebony);
}

/* ------------------------------------------------------------ utilities */

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--gilt);
  color: var(--ebony);
  padding: 0.6rem 1rem;
  font-family: var(--mono);
  font-size: 0.8rem;
  z-index: 10;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

hr {
  border: none;
  border-top: 1px solid var(--ebony);
  margin: 2.5rem 0;
}

.small { font-size: 0.95rem; color: var(--ink-soft); }

/* Flagged-as-doubtful callout — used where a good story rests on thin evidence */
.caveat {
  border: 1px solid var(--case-red);
  border-left: 4px solid var(--case-red);
  background: color-mix(in srgb, var(--case-red) 5%, var(--soundboard));
  padding: 1.1rem 1.3rem;
  margin: 1.8rem 0;
  font-size: 1.02rem;
}
.caveat .label {
  display: block;
  color: var(--case-red);
  margin-bottom: 0.4rem;
}
.caveat p:last-child { margin-bottom: 0; }

/* Lead paragraph inside prose */
.dropcap::first-letter {
  font-family: var(--serif-display);
  font-size: 3.4em;
  float: left;
  line-height: 0.82;
  padding: 0.05em 0.1em 0 0;
  color: var(--case-red);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}