/* ==========================================================================
   Nectaring, press-accent.css
   Loaded AFTER style.css on press.html and 404.html.

   Still not a redesign. The layout, the structure and the generous measure
   are untouched, because a press kit's job is to let a journalist find a bio
   and a photo in thirty seconds. What changes is everything a reader
   recognises a site by: the palette, the type, and the ground.

   Round one moved the accents off herbarium colours (oxidised green, faded
   indigo, dried red) onto the home page's pink, gold and violet.

   Round two, this one, brings the type across as well. The three faces from
   the home page are re-declared here because @font-face lives per document
   and this page does not load aero.css. It also gives each section a pane of
   pale glass with a gold hairline, which is the home page's window reduced
   to the one gesture that survives being calm.

   What is deliberately NOT brought across: no animation, no neon glow on
   running text, no rose window, no bubbles. A press page is read, printed
   and skimmed by people deciding whether to cover him. It should look like
   the same artist, not like the same party.

   Every colour here was measured against the paper it sits on. The floor is
   4.5:1 for text and 3:1 for rules and marks, same as the original build.

   To take it off: delete the one <link> tag from press.html and 404.html.
   ========================================================================== */

/* --------------------------------------------------------------------------
   The home page's type, re-declared. @font-face is per document and this
   page loads style.css, not aero.css, so the faces have to be stated again.
   The files are the same ones; nothing extra is downloaded that the site was
   not already serving.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "UnifrakturMaguntia";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/unifrakturmaguntia-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Grenze Gotisch";
  font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/grenze-gotisch-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Nunito";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/nunito-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Nunito";
  font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/nunito-latin-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Nunito";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/nunito-latin-700-normal.woff2") format("woff2");
}

:root {
  --display: "UnifrakturMaguntia", "Grenze Gotisch", serif;
  --gothic:  "Grenze Gotisch", "Palatino Linotype", Palatino, serif;
  --body:    "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Links were oxidised green. Now the site's pink ink. 6.2:1 on paper. */
  --green: #A8005E;

  /* The two supporting marks move off herbarium colours onto the sky's
     violet and a wine that sits between the pink and the old red. */
  --indigo: #57376F;   /* 7.0:1 */
  --red:    #8E2B4C;   /* 7.0:1 */

  /* Rules, frames and ornament become gold leaf rather than khaki. Neither
     of these ever carries text; they are hairlines and borders only. */
  --khaki:  #A87A1E;
  --khaki-text: #6E5210;   /* the text-safe version, 6.4:1 */
  --frame:  #8A5A12;

  /* Paper warms very slightly toward the pink end. Still paper. */
  --paper:  #F5EEE2;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* --paper MUST be restated here. It is overridden in the light block
       above, and this file loads after style.css, so without this line the
       light paper wins in dark mode and the page renders dark-mode ink on
       light-mode ground. Measured at 1.13:1 before this was added. */
    --paper:  #221A20;

    --green:  #FF8FC6;
    --indigo: #C4A6E0;
    --red:    #FF9BB4;
    --khaki:  #C9A03A;
    --khaki-text: #E8C46A;
    --frame:  #8A6A22;
  }
}

/* --------------------------------------------------------------------------
   A gold rule under the header and above the footer, which is the one piece
   of furniture the home page and this page can obviously share.
   -------------------------------------------------------------------------- */

.site-header {
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg,
    transparent 0%, #8A5A12 8%, #C99A22 26%,
    #FFF0C0 50%, #C99A22 74%, #8A5A12 92%, transparent 100%) 1;
  padding-bottom: 0.7rem;
}

.site-footer {
  border-top: 2px solid transparent;
  border-image: linear-gradient(90deg,
    transparent 0%, #8A5A12 8%, #C99A22 26%,
    #FFF0C0 50%, #C99A22 74%, #8A5A12 92%, transparent 100%) 1;
}

/* --------------------------------------------------------------------------
   The butterfly ground, at a whisper.

   The same tile the home page uses. On the home page it sits on glass at
   20%; here it is a watermark on paper, faint enough that it registers as a
   texture rather than a picture. It is the quietest possible way to say
   these two pages belong to each other, and it never comes near the text —
   it is behind everything, and every pane has its own ground.
   -------------------------------------------------------------------------- */

/* Its own element, not body::before: style.css already uses that pseudo for
   the paper grain, and this file was quietly wiping it out.

   The home page's tile is white art with an alpha channel, which is correct
   on glass and invisible on paper. Two things were tried before this: invert
   plus multiply, which gave grey butterflies, the one colour that appears
   nowhere else on the site; and a CSS mask over a pink gradient, which is
   the right idea and silently paints nothing over file://, where a mask
   image counts as cross-origin and is refused.

   So a second tile is baked instead, by tools/butterfly-ink.py: the same
   alpha, the same butterflies in the same places, with the RGB replaced by
   the site's pink cooling to gold. Ordinary background-image, works
   everywhere, testable locally. Dark mode lifts the same file rather than
   shipping a third copy of it. */
.press-ground {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("../img/butterflies-ink.webp") 0 0 / 190px 190px repeat;
  opacity: 0.13;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .press-ground {
    filter: brightness(2.3) saturate(0.85);
    opacity: 0.10;
  }
}

/* --------------------------------------------------------------------------
   The brand mark in the header gets the same little glass orb the home page
   puts before the wordmark, so the top-left corner matches on both pages.
   -------------------------------------------------------------------------- */

.site-header .brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.site-header .brand::before {
  content: "";
  width: 13px; height: 13px;
  border-radius: 50%;
  flex: none;
  background: radial-gradient(circle at 34% 30%,
    #fff 0%, rgba(255,255,255,.7) 22%, #FF2D95 60%, #7D0042 100%);
  box-shadow: 0 0 8px rgba(255, 45, 149, 0.35);
}

/* --------------------------------------------------------------------------
   Cover art and press photos get the gold frame from the home page, so the
   same three covers look like the same three covers on both pages.
   -------------------------------------------------------------------------- */

.press-photos img,
.press-art img {
  border: 3px solid transparent;
  border-image: linear-gradient(180deg,
    #FFF3C4 0%, #F7D97A 26%, #E8B23A 52%, #8A5A12 74%, #F2CF6A 100%) 1;
}

/* --------------------------------------------------------------------------
   Print: none of the decoration, all of the information. A press kit gets
   printed more often than most pages, and a watermark of butterflies is
   not what anyone wants coming out of the tray.
   -------------------------------------------------------------------------- */

@media print {
  .press-ground { display: none; }
  .site-header, .site-footer { border-image: none; border-color: #999; }
}

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

   Blackletter for the page title, so the top of this page and the top of the
   home page are recognisably the same hand. Gothic for section headings.
   Nunito for everything that is read in sentences.

   The one rule held throughout: nothing decorative touches running text. The
   glow that the home page puts on its headings is not here, because a bio a
   journalist is going to copy and paste should be plain.
   ========================================================================== */

body {
  font-family: var(--body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  line-height: 1.62;
}

.press-intro h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4.1rem);
  line-height: 1.16;
  letter-spacing: 0.012em;
  /* A whisper of the home page's halo. Enough to rhyme, not enough to make
     the heading feel like signage. */
  text-shadow: 0 0 18px rgba(255, 45, 149, 0.16);
}

.press-intro .sub {
  font-family: var(--body);
  font-style: normal;
  font-size: 1.02rem;
}

h2 {
  font-family: var(--gothic);
  font-weight: 600;
  letter-spacing: 0.012em;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
}

h3 {
  font-family: var(--gothic);
  font-weight: 600;
}

.brand {
  font-family: var(--gothic);
  font-weight: 600;
  font-size: 1.24rem;
}

header nav a,
.footer-links a {
  font-family: var(--gothic);
  font-weight: 600;
  font-size: 1.02rem;
}

figcaption,
.small,
.muted {
  font-family: var(--body);
}

/* Nunito's italic carries the record titles now that the body face changed. */
em, cite { font-family: var(--body); font-style: italic; }

/* ==========================================================================
   THE PANES

   The home page's window, reduced to the one gesture that survives being
   quiet: a pale pane with a gold hairline. No title bar, no chrome buttons,
   no arcade, no glow. It gives the page the same rhythm of discrete blocks
   without pretending a press kit is an operating system.
   ========================================================================== */

.press-main > section,
.press-intro {
  position: relative;
  padding: clamp(1.1rem, 3vw, 1.9rem) clamp(1rem, 3vw, 1.8rem);
  margin-bottom: clamp(1.2rem, 3vw, 1.8rem);
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid transparent;
  border-image: linear-gradient(180deg,
    #F7D97A 0%, #E8B23A 40%, #B08216 70%, #F2CF6A 100%) 1;
  box-shadow: 0 6px 22px rgba(74, 48, 40, 0.10);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .press-main > section,
  :root:not([data-theme="light"]) .press-intro {
    background: rgba(255, 255, 255, 0.045);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
  }
}

/* ==========================================================================
   THE GROUND

   A wash of the home page's sky: pink at the top, cooling through lilac to
   a pale green at the foot. Far paler than the real thing, because this page
   has to stay a document. The butterflies sit on top of it.
   ========================================================================== */

body {
  background-color: var(--paper);
  background-image: linear-gradient(
    180deg,
    rgba(255, 138, 200, 0.20) 0%,
    rgba(214, 150, 220, 0.14) 26%,
    rgba(150, 200, 230, 0.12) 58%,
    rgba(168, 226, 180, 0.14) 82%,
    rgba(214, 232, 150, 0.18) 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body {
    background-image: linear-gradient(
      180deg,
      rgba(255, 45, 149, 0.14) 0%,
      rgba(150, 60, 200, 0.12) 30%,
      rgba(20, 120, 160, 0.12) 62%,
      rgba(30, 150, 110, 0.12) 100%);
  }
}

/* The butterflies' weight is set once, where the ground is defined above.
   It used to be re-set here as well, which meant two numbers in two places
   silently disagreeing about the same thing. */

@media print {
  body { background-image: none; }
  .press-main > section, .press-intro {
    background: none; box-shadow: none; border-image: none; border-color: #bbb;
  }
}

/* ==========================================================================
   ROUND THREE, 2026-09-02: the purple pass
   The home page moved to Jackson's palette (#f8b4fe, #8825b7, #1923f9,
   #44fa09, #d27cfd), Cinzel for headings and a daytime sky. This page
   follows: same faces, same accents, lilac paper, purple rules, and it is
   pinned to daytime like the home page (data-theme="light" on <html>).
   The gold and the blackletter from the earlier rounds are switched off
   below rather than deleted, so the history in this file still reads.
   ========================================================================== */

@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/cinzel-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/cinzel-latin-700-normal.woff2") format("woff2"); }

:root {
  --display: "Cinzel", Palatino, serif;
  --gothic:  "Cinzel", Palatino, serif;

  --green:  #8825b7;          /* links: 6.0:1 on the paper */
  --indigo: #6c03af;
  --red:    #1923f9;
  --khaki:  #d27cfd;          /* rules and hairlines only */
  --khaki-text: #6c03af;
  --frame:  #8825b7;
  --paper:  #fbf1ff;          /* lilac paper */
  --ink:    #2c0f3d;
}
:root { color-scheme: light; }

body { color: var(--ink); }

/* type: Cinzel's lowercase is small capitals, so everything set in it is
   caps; sizes come down a little from the blackletter they replace */
.press-intro h1 { font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem); letter-spacing: 0.04em; text-shadow: none; color: #6c03af; }
h2 { font-family: var(--gothic); font-weight: 700; letter-spacing: 0.05em; font-size: clamp(1.15rem, 1rem + 0.7vw, 1.45rem); color: #6c03af; }
h3, .brand, header nav a, .footer-links a { font-family: var(--gothic); font-weight: 700; letter-spacing: 0.05em; }
.brand { font-size: 1.05rem; }

/* rules: purple, not gold */
.site-header, .site-footer {
  border-image: linear-gradient(90deg, transparent 0%, #8825b7 8%, #d27cfd 30%, #f8b4fe 50%, #d27cfd 70%, #8825b7 92%, transparent 100%) 1;
}
.press-main > section, .press-intro {
  background: rgba(255, 255, 255, 0.55);
  border-image: linear-gradient(180deg, #d27cfd 0%, #8825b7 45%, #6c03af 80%, #d27cfd 100%) 1;
  box-shadow: 0 6px 22px rgba(94, 21, 128, 0.12);
}
.press-photos img, .press-art img {
  border-image: none;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px #8825b7, 0 10px 20px rgba(94, 21, 128, 0.25);
  border-radius: 8px;
}

/* the sky wash: blue at the top into lilac, the home page's sky as a tint */
body {
  background-image: linear-gradient(180deg,
    rgba(58, 172, 255, 0.22) 0%, rgba(140, 212, 255, 0.16) 30%,
    rgba(246, 178, 255, 0.14) 65%, rgba(251, 241, 255, 0) 100%);
}

/* the orb before the brand goes lime, like the home page's dots */
.site-header .brand::before {
  background: radial-gradient(circle at 35% 30%, #f4ffd0 0%, #44fa09 45%, #2fc400 100%);
  box-shadow: 0 1px 2px rgba(40, 8, 80, 0.4);
}

/* the watermark is re-inked orchid to purple by tools/butterfly-ink.py */
.press-ground { opacity: 0.11; }
/* style.css sets the brand with a more specific selector; match it. */
.site-header .brand { font-family: var(--gothic); font-weight: 700; letter-spacing: 0.05em; }