/* ===========================================================================
   Wren Hollis — the shared look for every example deliverable.

   Before this file, each example carried its own 12 to 20KB of inline CSS and
   its own palette: four documents, four unrelated colour systems, one of them
   a seven-colour rainbow. A buyer opening two of them could not tell they came
   from the same practice, which is the opposite of what an example is for.

   The palette is not invented here so much as settled. The Brand Bible and the
   second dashboard already agreed on ember #C4623A and moss #4A5D52; the first
   dashboard had the best text tone at bone #E8DFD1 and the most on-brand names
   (pew, communion, whiskey) for a West Texas alt-country record. Those won.
   The Content Bible's pink, blue and silver did not.

   Canon lives in docs/WREN-HOLLIS-IDENTITY.md. Change it there first.

   Legacy aliases at the bottom exist so the four original documents could drop
   their own :root blocks and inherit this one without their markup being
   rewritten. New deliverables should use the --wren- names directly.
   =========================================================================== */

@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-normal-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-italic-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-normal-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Ground: pressed dirt and lamplight, darkest to lightest. */
  --wren-ink: #12100D;
  --wren-surface: #1A1712;
  --wren-raised: #241F18;
  --wren-line: #342D24;
  --wren-line-soft: rgba(232, 223, 209, 0.10);

  /* Type tones. Bone is caliche dust, which is what the record sounds like.
     Three tiers, not four. Every tone here clears 4.5:1 on ink, surface and
     raised, which is the whole set of grounds text ever lands on. Fog was
     #8A8478 and missed on raised by 0.10, which is invisible to the eye and
     fails an audit on every card in the set. */
  --wren-bone: #E8DFD1;     /* 13.5 / 12.7 / 11.6 */
  --wren-bone-soft: #CFC8B8;/* 10.7 / 10.1 /  9.2 */
  --wren-fog: #8C867A;      /*  5.3 /  4.9 /  4.5 */

  /* There is no readable fourth tier. Anything quieter than fog on a ground
     this dark lands under 4.5:1, and the old value (#5F574B, 2.30 on raised)
     was carrying real content: checklist labels, timestamps. Quieter is done
     with size and weight now. The token stays so no document needs rewriting,
     and it resolves to fog rather than to something nobody can read. */
  --wren-faint: #8C867A;

  /* Accents. Ember carries emphasis, whiskey and brass carry data, moss means
     settled or done, deep rust means overdue. Five, on purpose. Four of them
     were legal only on the darkest ground while every card in every dashboard
     is surface or raised, so they failed as a family; these values clear 4.5
     on all three. Rust-deep stays as it is because it is a ground, never
     text. */
  --wren-ember: #C96E48;
  --wren-ember-soft: #C47154;
  --wren-ember-glow: rgba(201, 110, 72, 0.12);
  --wren-whiskey: #B67944;
  --wren-brass: #B08840;
  --wren-moss: #4A5D52;
  --wren-moss-light: #778B7F;
  --wren-rust-deep: #7D2E22;

  /* Status-chip grounds. A chip used to tint its own background with its own
     colour, which meant the label was the least readable thing on a card
     built to be scanned, and the exact ratio changed depending on which card
     it landed on. Solid, so a chip reads the same on ink, surface or raised:
     4.6 to 4.8 for its own accent, and about 9.5 for bone-soft. */
  --wren-tint-ember: #281B14;
  --wren-tint-moss: #1E1F1B;
  --wren-tint-brass: #2B2315;
  --wren-tint-fog: #211E1A;

  --wren-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --wren-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --wren-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* --------------------------------------------------------------- links

   Three documents shipped no `a` rule at all, so their upsell links rendered
   browser-default blue on near-black: 2.02:1, the least readable text on a
   page, on the one thing meant to be clicked. Low specificity on purpose, so
   any document that styles its own links still wins. */

a { color: var(--wren-ember); text-underline-offset: 2px; }

/* ---------------------------------------------------------------- print

   Every document draws its colour through these tokens, so print is fixed
   once, here, rather than thirteen times. Before this, three documents had no
   print rules and came out as bone text on white paper (1.32:1, blank), and
   the six that did set a white ground still lost the first column of every
   table, because those rules set their colour explicitly and outranked the
   body. Remapping the tokens themselves catches both cases. Everything below
   clears 6.5:1 on paper. */

@media print {
  :root {
    --wren-ink: #FFFFFF;
    --wren-surface: #FFFFFF;
    --wren-raised: #FFFFFF;
    --wren-line: #BBBBBB;
    --wren-line-soft: #DDDDDD;
    --wren-bone: #111111;
    --wren-bone-soft: #222222;
    --wren-fog: #444444;
    --wren-faint: #444444;
    --wren-ember: #8A3D1E;
    --wren-ember-soft: #8A3D1E;
    --wren-ember-glow: #F7EEE9;
    --wren-whiskey: #6E4A28;
    --wren-brass: #6A5122;
    --wren-moss: #3A4A41;
    --wren-moss-light: #46554B;
    --wren-rust-deep: #7D2E22;
    --wren-tint-ember: #F7EEE9;
    --wren-tint-moss: #EDF0EE;
    --wren-tint-brass: #F4EFE2;
    --wren-tint-fog: #F0EEEB;
  }
  body { background: #FFFFFF; color: #111111; }
  /* One dashboard clips itself to a single screenful on screen, which on
     paper means a single page and the rest simply missing. */
  html, body { overflow: visible; height: auto; }
  /* Nothing sticks to a sheet of paper. */
  nav, .nav, .side, .sidebar, .tabs, .masthead { position: static; }
}

/* ------------------------------------------------------ the demo disclosure

   Rule 4 of the canon says every Wren surface a visitor reaches carries the
   disclosure. It used to be buried in a footer or a byline, which satisfies
   the letter of it and not the point: someone landing mid-document could read
   a whole page of plausible career detail before finding out whose it was.
   This sits at the top, stays there while scrolling, and says why the artist
   is invented rather than just that they are. */

.wren-demo {
  position: sticky;
  top: 0;
  z-index: 999;
  /* Literal, not tokens, and deliberately so. This band must look identical on
     all thirteen documents, including the three that invert the palette for a
     paper ground: when it followed --wren-ember it inherited light mode's
     darkened ember and put dark text on a dark bar at 3.11:1. The disclosure
     does not have a light variant. 5.2:1. */
  background: #C96E48;
  color: #1A0F09;
  font-family: var(--wren-sans);
  font-size: 0.82rem;
  line-height: 1.5;
  padding: 0.7rem clamp(1rem, 4vw, 2.5rem);
  border-bottom: 1px solid rgba(26, 15, 9, 0.35);
}
/* The colour is set on the children too, not only inherited. A document with a
   bare p{color:...} rule beats inheritance on specificity, which is how the
   Brand Bible ended up rendering this line at 2.45:1 while the other twelve
   rendered it at 4.62:1. The disclosure is the last thing that should be hard
   to read, so it does not rely on inheritance. */
.wren-demo p,
.wren-demo b,
.wren-demo strong,
.wren-demo span { color: #1A0F09; }
.wren-demo p { margin: 0; max-width: 100ch; }
.wren-demo b { font-weight: 700; }
.wren-demo a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

@media print {
  .wren-demo {
    position: static;
    background: transparent;
    color: #000;
    border-bottom: 1px solid #000;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wren-demo { position: static; }
}

/* -------------------------------------------------------------- light mode

   One document is not read by the artist. The press kit is forwarded to
   promoters and press, and it is the only Wren surface whose audience is a
   stranger deciding in fifteen seconds whether to open the links. Its skill
   specifies a paper ground for that reason.

   So the palette inverts rather than changes: same bone, same ink, same ember,
   same two typefaces, opposite roles. That keeps it recognisably the same
   practice while giving the kit the ground it needs. Any future document with
   the same audience uses this scope rather than inventing a third palette. */

.wren-light {
  --wren-ink: #F6F1E6;
  --wren-surface: #EFE8D9;
  --wren-raised: #E7DECC;
  --wren-line: #D8CDB6;
  --wren-line-soft: rgba(33, 28, 21, 0.10);
  --wren-bone: #211C15;
  --wren-bone-soft: #4A4238;
  --wren-fog: #675E50;
  --wren-faint: #675E50;

  /* The inversion used to swap the grounds and leave the accents alone, which
     put brass at 2.89 on venue capacities and ember at 3.05 on the press kit
     a promoter reads. Same hues, darkened to clear 4.5 against paper. */
  --wren-ember: #9A4D2E;
  --wren-ember-soft: #9A4D2E;
  --wren-ember-glow: rgba(154, 77, 46, 0.06);
  --wren-whiskey: #865932;
  --wren-brass: #7A5E2C;
  --wren-moss-light: #58665D;
}

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

   Every document ends the same way: who made it, that the artist is invented,
   and a way back to the site for someone who opened it in a new tab. */

.wren-foot {
  background: var(--wren-surface);
  color: var(--wren-bone);
  font-family: var(--wren-sans);
  text-align: center;
  padding: 1.6rem 1.5rem;
  border-top: 1px solid var(--wren-line);
}
.wren-foot .house { font-size: 0.94rem; font-weight: 640; letter-spacing: 0.02em; margin: 0; }
.wren-foot .note { font-size: 0.82rem; color: var(--wren-fog); margin: 0.3rem auto 0; max-width: 52ch; line-height: 1.55; }
.wren-foot .back {
  display: inline-block;
  margin-top: 0.9rem;
  background: var(--wren-bone);
  color: var(--wren-ink);
  text-decoration: none;
  padding: 0.65rem 1.25rem;
  border-radius: 2px;
  font-size: 0.87rem;
  font-weight: 640;
}
.wren-foot .back:hover { background: var(--wren-bone-soft); }
@media print { .wren-foot { background: transparent; color: #000; border-top: 1px solid #000; } .wren-foot .back { display: none; } }

/* ---------------------------------------------------------- legacy aliases

   The four original documents name their tokens differently for the same job.
   Mapping them here is what let each one delete its own palette in a single
   edit rather than having every rule rewritten. */

:root {
  /* Brand Bible */
  --ink: var(--wren-ink);
  --ink-2: var(--wren-surface);
  --ink-3: var(--wren-raised);
  --ink-4: var(--wren-line);
  --ink-soft: var(--wren-line);
  --slate: var(--wren-line);
  --moss: var(--wren-moss);
  --moss-light: var(--wren-moss-light);
  --fog: var(--wren-fog);
  --bone: var(--wren-bone);
  --bone-soft: var(--wren-bone-soft);
  --ember: var(--wren-ember);
  --ember-soft: var(--wren-ember-soft);
  --ember-glow: var(--wren-ember-glow);
  --bruise: var(--wren-raised);
  --leather: var(--wren-surface);
  --vellum: var(--wren-bone);
  --vellum-line: var(--wren-bone-soft);
  --whiskey: var(--wren-whiskey);

  /* Dashboard, first build */
  --coffin: var(--wren-ink);
  --pew: var(--wren-line);
  --communion: var(--wren-rust-deep);
  --bg: var(--wren-ink);
  --bg-elev: var(--wren-surface);
  --card: var(--wren-raised);
  --card-hover: var(--wren-line);
  --accent: var(--wren-whiskey);
  --accent-hover: var(--wren-brass);
  --accent-soft: var(--wren-tint-brass);
  --text: var(--wren-bone);
  --text-muted: var(--wren-fog);
  --text-faint: var(--wren-faint);
  --border: var(--wren-line);
  --border-strong: var(--wren-line);
  --success: var(--wren-moss-light);
  --warning: var(--wren-brass);
  --danger: var(--wren-rust-deep);

  /* Seven rainbow pillar colours became five Wren ones. Two pairs share a
     tone: they are labelled in the document, so hue was not carrying the
     meaning on its own. */
  --pillar-craft: var(--wren-ember);
  --pillar-output: var(--wren-whiskey);
  --pillar-money: var(--wren-moss-light);
  --pillar-presence: var(--wren-brass);
  --pillar-admin: var(--wren-rust-deep);
  --pillar-stage: var(--wren-ember-soft);
  --pillar-scene: var(--wren-fog);

  /* Dashboard, second build */
  --beige: var(--wren-bone-soft);
  --brass: var(--wren-brass);
  --red: var(--wren-rust-deep);
  --card-2: var(--wren-surface);
  --hair: var(--wren-line-soft);
  --hair-soft: rgba(232, 223, 209, 0.06);

  /* Content Bible */
  --bg-card: var(--wren-raised);
  --bg-hover: var(--wren-line);
  --bg-accent: var(--wren-surface);
  --border-light: var(--wren-line);
  --text-dim: var(--wren-fog);
  --pink: var(--wren-ember);
  --pink-dim: var(--wren-ember-soft);
  --burgundy: var(--wren-rust-deep);
  --gold: var(--wren-brass);
  --gold-dim: var(--wren-whiskey);
  --green: var(--wren-moss);
  --green-light: var(--wren-moss-light);
  --blue: var(--wren-fog);
  --blue-light: var(--wren-bone-soft);
  --silver: var(--wren-fog);
  --charcoal: var(--wren-raised);
  --tobacco: var(--wren-whiskey);
  --forest: var(--wren-moss);
  --red-soft: var(--wren-ember-soft);

  /* Type, under every name the four documents used for it. */
  --serif: var(--wren-serif);
  --sans: var(--wren-sans);
  --font-display: var(--wren-serif);
  --font-body: var(--wren-sans);
}