/* ==========================================================================
   THE DIVINE WORKSHOP — DESIGN TOKENS
   v1.0 · Drop this file into your site and link it before any other CSS.
   Every colour, size and spacing value on the site must come from here.
   Never hard-code a hex value anywhere else.
   ========================================================================== */

/* Fonts are self-hosted — see assets/fonts.css, loaded before this file. */

:root {

  /* --- CORE COLOUR ------------------------------------------------------ */
  --tdw-seal:        #A9482A;   /* terracotta — the mark. Use at ~10% of any view. */
  --tdw-seal-deep:   #7C3320;   /* pressed / hover state of the seal colour       */
  --tdw-paper:       #F7F1E6;   /* ivory — primary light background                */
  --tdw-ink:         #26221F;   /* warm charcoal — body text, dark backgrounds     */
  --tdw-ink-deep:    #171412;   /* reserved for deepest emphasis. Use rarely.      */

  /* --- SUPPORTING NEUTRALS ---------------------------------------------- */
  --tdw-ash:         #857A70;   /* secondary text, captions, metadata              */
  --tdw-bone:        #E8DFD0;   /* panels, hairlines, hover fills                  */
  --tdw-bone-deep:   #D8CCB8;   /* stronger rules, borders on paper                */

  /* --- SEMANTIC ROLES (use these in components, not the raw names above) - */
  --bg:              var(--tdw-paper);
  --bg-panel:        var(--tdw-bone);
  --fg:              var(--tdw-ink);
  --fg-muted:        var(--tdw-ash);
  --accent:          var(--tdw-seal);
  --accent-pressed:  var(--tdw-seal-deep);
  --rule:            var(--tdw-bone-deep);
  --rule-hair:       rgba(38, 34, 31, 0.14);

  /* --- DARK CONTEXT (used by .tdw-section--dark on index.html and similar dark panels) --- */
  --bg-dark:         var(--tdw-ink);
  --fg-on-dark:      var(--tdw-paper);
  --fg-muted-dark:   #9C9086;
  --rule-on-dark:    rgba(247, 241, 230, 0.16);

  /* --- TYPE FAMILIES ----------------------------------------------------- */
  --font-text:  'EB Garamond', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-mark:  'Courier Prime', 'Courier New', ui-monospace, monospace;

  /* --- TYPE SCALE -------------------------------------------------------- */
  --size-display:  clamp(2.5rem, 6vw, 4.25rem);
  --size-title:    clamp(1.9rem, 3.6vw, 2.75rem);
  --size-heading:  clamp(1.4rem, 2.2vw, 1.75rem);
  --size-sub:      1.25rem;
  --size-body:     1.0625rem;   /* 17px — do not go below this for prose */
  --size-small:    0.9375rem;
  --size-mark:     0.75rem;     /* typewriter labels, edition numbers   */
  --size-mark-sm:  0.6875rem;

  --leading-tight: 1.12;
  --leading-snug:  1.3;
  --leading-body:  1.62;

  --track-mark:    0.18em;      /* letterspacing for all mono labels    */
  --track-caps:    0.06em;

  /* --- SPACING (8px base) ------------------------------------------------ */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* --- LAYOUT ------------------------------------------------------------ */
  --measure-prose: 34rem;       /* max width for story text — never wider */
  --measure-page:  72rem;
  --measure-wide:  90rem;

  /* single gutter token — applied as padding-inline on every wrapper
     so NO text, card or button ever touches the viewport edge.
     min 20px (when viewport <400px) → fluid scale → max 40px (>=800px). */
  --gutter:        clamp(20px, 5vw, 40px);

  /* --- FORM -------------------------------------------------------------- */
  --radius: 0;                  /* letterpress card, not app UI. Keep at 0. */
  --border-hair: 1px solid var(--rule-hair);
  --border-rule: 1px solid var(--rule);

  /* --- NAV --------------------------------------------------------------- */
  --tdw-nav-h: 64px;            /* sticky grand-nav approximate height; refined
                                    at runtime by tdw-nav.js for the mobile
                                    panel offset. */

  /* --- MOTION ------------------------------------------------------------ */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:  420ms;
}

/* ==========================================================================
   BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }   /* honor the gutter token even if a single
                                       asset (large hero image) tries to push
                                       wider than the viewport. No horizontal
                                       scroll. */

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-text);
  font-size: var(--size-body);
  line-height: var(--leading-body);
  font-feature-settings: "onum" 1, "kern" 1;   /* old-style numerals in prose */
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   THE MARK LAYER  — typewriter metadata. This is the signature device.
   Every edition number, date, material line and status label uses it.
   ========================================================================== */

.tdw-mark {
  font-family: var(--font-mark);
  font-size: var(--size-mark);
  letter-spacing: var(--track-mark);
  text-transform: uppercase;
  color: var(--fg-muted);
  line-height: 1.5;
}

.tdw-mark--accent { color: var(--accent); }
.tdw-mark--sm     { font-size: var(--size-mark-sm); }

/* A record row: the horizontal line of facts under any work. */
.tdw-record {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: var(--border-hair);
  border-bottom: var(--border-hair);
}
.tdw-record > * + *::before {
  content: "·";
  margin-right: var(--space-3);
  color: var(--rule);
}

/* ==========================================================================
   TYPE ROLES
   ========================================================================== */

.tdw-display {
  font-size: var(--size-display);
  line-height: var(--leading-tight);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0;
}

.tdw-title {
  font-size: var(--size-title);
  line-height: var(--leading-snug);
  font-weight: 400;
  margin: 0;
}

.tdw-heading {
  font-size: var(--size-heading);
  line-height: var(--leading-snug);
  font-weight: 500;
  margin: 0;
}

/* Wordmark setting — matches the logo lockup. */
.tdw-wordmark {
  font-family: var(--font-text);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  font-weight: 500;
  line-height: 1.05;
}

/* Story text. Never exceeds the prose measure. */
.tdw-prose {
  max-width: var(--measure-prose);
  padding-inline: var(--gutter);
  font-size: var(--size-body);
  line-height: var(--leading-body);
}
.tdw-prose p { margin: 0 0 var(--space-5); }
.tdw-prose p:last-child { margin-bottom: 0; }

/* ==========================================================================
   CONTROLS
   ========================================================================== */

.tdw-button {
  display: inline-block;
  font-family: var(--font-mark);
  font-size: var(--size-mark);
  letter-spacing: var(--track-mark);
  text-transform: uppercase;
  padding: var(--space-4) var(--space-6);
  background: var(--accent);
  color: var(--tdw-paper);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tdw-button:hover  { background: var(--accent-pressed); border-color: var(--accent-pressed); }
.tdw-button:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }

.tdw-button--quiet {
  background: transparent;
  color: var(--fg);
  border-color: var(--rule);
}
.tdw-button--quiet:hover { background: var(--bg-panel); border-color: var(--fg); color: var(--fg); }

.tdw-button[aria-disabled="true"] {
  background: transparent;
  color: var(--fg-muted);
  border-color: var(--rule);
  pointer-events: none;
}

/* ==========================================================================
   DARK CONTEXT — archive and originals only
   ========================================================================== */

.tdw-dark {
  background: var(--bg-dark);
  color: var(--fg-on-dark);
}
.tdw-dark .tdw-mark    { color: var(--fg-muted-dark); }
.tdw-dark .tdw-record  { border-color: var(--rule-on-dark); }
.tdw-dark .tdw-button--quiet { color: var(--fg-on-dark); border-color: var(--rule-on-dark); }

/* ==========================================================================
   ACCESSIBILITY FLOOR
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
/* --------------------------------------------------------------------------
   FORTHCOMING CARD — a piece in preparation, not yet for sale
   Same shape as a regular card; quieter action, status reads as time.
   -------------------------------------------------------------------------- */
.tdw-card--forthcoming .tdw-card__img {
  /* a touch desaturated, like a photograph in an archive envelope */
  filter: saturate(0.92) brightness(0.99);
}
.tdw-card--forthcoming .tdw-card__img::after {
  /* no TDW stamp on forthcoming cards — they are not yet signed */
  display: none;
}
.tdw-card--forthcoming .tdw-status--forthcoming {
  display: inline-block;
  font-family: var(--font-mark);
  font-size: var(--size-mark-sm);
  letter-spacing: var(--track-mark);
  text-transform: uppercase;
  color: var(--fg-muted);
  border: 1px solid var(--rule);
  padding: 4px var(--space-3);
  align-self: flex-start;
  margin-top: var(--space-3);
}