/* ============================================================
   jennquader.com — V4

   ART DIRECTION NOTE
   The palette is not invented. It is measured out of the photo
   library: the cobalt of the Paris door, the vermilion of the
   Seine dress and the lipstick, the warm limestone of Lisbon
   and Charleston, the jade of the turquoise necklace, and the
   pale blue of chalk on a sidewalk.

   Three motifs carry the depth:
     1. AZULEJO   a Portuguese tile lattice, drawn in SVG, laid
                  under tinted bands at 4-7% so it reads as
                  texture and never as decoration.
     2. THRESHOLD a double rule with an arrow. Doors and "about
                  to go through" is the spine of the whole
                  library, so it is the spine of the furniture.
     3. OFFSET    every photograph sits proud of a colour block
                  behind it. Cheap depth, zero contrast cost.

   READABILITY RULE
   No text is ever set on unscrimmed photography. Body copy is
   18px minimum at a 66ch measure. Every text/background pair
   on this page clears WCAG AA, and body copy clears AAA.
   ============================================================ */

:root {
  /* ---- surfaces ---- */
  --paper:      #FBFAF8;
  --paper-2:    #F3F0EA;   /* limestone */
  --paper-3:    #E9E4DA;
  --ink:        #16191C;
  --ink-2:      #454D55;
  --ink-3:      #575F67;
  --rule:       #DEDAD2;
  --rule-2:     #C2BCB1;

  /* ---- measured out of the photographs ---- */
  --red:        #BB3826;   /* the Seine dress, the lipstick */
  --red-deep:   #9E3123;
  --red-wash:   #FBEFEC;

  --door:       #0B63A8;   /* the Paris door */
  --door-deep:  #084F86;
  --door-abyss: #062B49;
  --door-light: #3E9AD8;
  --door-wash:  #EDF4FA;

  --jade:       #1F7A6B;   /* the turquoise necklace, the green door */
  --terracotta: #B5643C;   /* Lisbon roofs, Charleston brick */
  --chalk:      #DCEAF0;   /* chalk on concrete */
  --gold:       #B8912F;

  /* ---- type ---- */
  --display: "Bodoni Moda", "Didot", "Bodoni MT", Georgia, serif;
  --body:    "Spectral", Georgia, "Times New Roman", serif;
  --label:   "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* ---- measure ---- */
  --shell:     1240px;
  --shell-nar: 720px;
  --band:      clamp(3.5rem, 8vw, 7rem);

  /* ---- motif 1: the azulejo damask ----
     A double ogee frame with a six-petal rosette at its heart,
     four-petal sprigs on the corners that assemble into a whole
     flower where four tiles meet, and a dot in each waist.
     Drawn from the tile panel in the Lisbon arcade photograph and
     finished the way an endpaper would be: fine line, formal
     symmetry, nothing loud. Two colourways so it can sit on the
     limestone and on the blue hour without being recoloured.      */
  --pat-azulejo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cdefs%3E%3Cpath id='a' d='M0 0C-3.2 -4.83 -3.2 -9.2 0 -11.5C3.2 -9.2 3.2 -4.83 0 0Z'/%3E%3Cpath id='b' d='M0 0C-1.9 -2.52 -1.9 -4.8 0 -6C1.9 -4.8 1.9 -2.52 0 0Z'/%3E%3Cpath id='c' d='M0 0C-2.8 -3.78 -2.8 -7.2 0 -9C2.8 -7.2 2.8 -3.78 0 0Z'/%3E%3Cg id='R'%3E%3Cuse href='%23c' transform='rotate(45)'/%3E%3Cuse href='%23c' transform='rotate(135)'/%3E%3Cuse href='%23c' transform='rotate(225)'/%3E%3Cuse href='%23c' transform='rotate(315)'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%230B63A8' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath stroke-width='.8' d='M48 4C48 17.2 78.8 48 92 48C78.8 48 48 78.8 48 92C48 78.8 17.2 48 4 48C17.2 48 48 17.2 48 4Z'/%3E%3Cpath stroke-width='.5' d='M48 13C48 22.1 73.9 48 83 48C73.9 48 48 73.9 48 83C48 73.9 22.1 48 13 48C22.1 48 48 22.1 48 13Z'/%3E%3Cg stroke-width='.6' transform='translate(48 48)'%3E%3Cuse href='%23a'/%3E%3Cuse href='%23a' transform='rotate(60)'/%3E%3Cuse href='%23a' transform='rotate(120)'/%3E%3Cuse href='%23a' transform='rotate(180)'/%3E%3Cuse href='%23a' transform='rotate(240)'/%3E%3Cuse href='%23a' transform='rotate(300)'/%3E%3Ccircle r='2.2'/%3E%3C/g%3E%3Cg stroke-width='.45' transform='translate(48 48)'%3E%3Cuse href='%23b' transform='rotate(30)'/%3E%3Cuse href='%23b' transform='rotate(90)'/%3E%3Cuse href='%23b' transform='rotate(150)'/%3E%3Cuse href='%23b' transform='rotate(210)'/%3E%3Cuse href='%23b' transform='rotate(270)'/%3E%3Cuse href='%23b' transform='rotate(330)'/%3E%3C/g%3E%3Cg stroke-width='.6'%3E%3Cuse href='%23R'/%3E%3Cuse href='%23R' transform='translate(96 0)'/%3E%3Cuse href='%23R' transform='translate(0 96)'/%3E%3Cuse href='%23R' transform='translate(96 96)'/%3E%3C/g%3E%3Cg stroke-width='.45'%3E%3Ccircle cx='48' cy='26' r='.9'/%3E%3Ccircle cx='48' cy='70' r='.9'/%3E%3Ccircle cx='26' cy='48' r='.9'/%3E%3Ccircle cx='70' cy='48' r='.9'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --pat-azulejo-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cdefs%3E%3Cpath id='a' d='M0 0C-3.2 -4.83 -3.2 -9.2 0 -11.5C3.2 -9.2 3.2 -4.83 0 0Z'/%3E%3Cpath id='b' d='M0 0C-1.9 -2.52 -1.9 -4.8 0 -6C1.9 -4.8 1.9 -2.52 0 0Z'/%3E%3Cpath id='c' d='M0 0C-2.8 -3.78 -2.8 -7.2 0 -9C2.8 -7.2 2.8 -3.78 0 0Z'/%3E%3Cg id='R'%3E%3Cuse href='%23c' transform='rotate(45)'/%3E%3Cuse href='%23c' transform='rotate(135)'/%3E%3Cuse href='%23c' transform='rotate(225)'/%3E%3Cuse href='%23c' transform='rotate(315)'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%236FB4E4' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath stroke-width='.8' d='M48 4C48 17.2 78.8 48 92 48C78.8 48 48 78.8 48 92C48 78.8 17.2 48 4 48C17.2 48 48 17.2 48 4Z'/%3E%3Cpath stroke-width='.5' d='M48 13C48 22.1 73.9 48 83 48C73.9 48 48 73.9 48 83C48 73.9 22.1 48 13 48C22.1 48 48 22.1 48 13Z'/%3E%3Cg stroke-width='.6' transform='translate(48 48)'%3E%3Cuse href='%23a'/%3E%3Cuse href='%23a' transform='rotate(60)'/%3E%3Cuse href='%23a' transform='rotate(120)'/%3E%3Cuse href='%23a' transform='rotate(180)'/%3E%3Cuse href='%23a' transform='rotate(240)'/%3E%3Cuse href='%23a' transform='rotate(300)'/%3E%3Ccircle r='2.2'/%3E%3C/g%3E%3Cg stroke-width='.45' transform='translate(48 48)'%3E%3Cuse href='%23b' transform='rotate(30)'/%3E%3Cuse href='%23b' transform='rotate(90)'/%3E%3Cuse href='%23b' transform='rotate(150)'/%3E%3Cuse href='%23b' transform='rotate(210)'/%3E%3Cuse href='%23b' transform='rotate(270)'/%3E%3Cuse href='%23b' transform='rotate(330)'/%3E%3C/g%3E%3Cg stroke-width='.6'%3E%3Cuse href='%23R'/%3E%3Cuse href='%23R' transform='translate(96 0)'/%3E%3Cuse href='%23R' transform='translate(0 96)'/%3E%3Cuse href='%23R' transform='translate(96 96)'/%3E%3C/g%3E%3Cg stroke-width='.45'%3E%3Ccircle cx='48' cy='26' r='.9'/%3E%3Ccircle cx='48' cy='70' r='.9'/%3E%3Ccircle cx='26' cy='48' r='.9'/%3E%3Ccircle cx='70' cy='48' r='.9'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

  /* ---- motif 2: chalk hatch ---- */
  --pat-chalk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath d='M0 8 L8 0 M-2 2 L2 -2 M6 10 L10 6' stroke='%2316191C' stroke-width='0.6'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--red); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--red-deep); }
:focus-visible { outline: 3px solid var(--door); outline-offset: 3px; border-radius: 2px; }

.shell { width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:clamp(1.25rem,4vw,3rem); }
.shell--narrow { max-width: var(--shell-nar); }
.visually-hidden { position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap; }
.skip-link { position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:#fff;padding:.9rem 1.5rem;font-family:var(--label);font-size:.9rem; }
.skip-link:focus { left:0; }

/* ============================================================
   MOTIF 2 — THRESHOLD RULE
   A double rule broken by an arrow. Used wherever the page
   moves from one room to the next.
   ============================================================ */
.threshold {
  /* also used as a real <h2> on section pages, so neutralise the
     heading defaults and let .threshold__mark set the type */
  font-size:1rem; font-weight:400;
  display:flex; align-items:center; gap:1rem;
  margin: 0 0 clamp(2rem,4vw,3.25rem);
}
.threshold::before,
.threshold::after {
  content:""; flex:1; height:4px;
  border-top:1px solid var(--rule-2);
  border-bottom:1px solid var(--rule-2);
}
.threshold__mark {
  font-family:var(--label); font-size:.62rem; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-3); white-space:nowrap;
}
.threshold__mark::after { content:" \2192"; color:var(--red); }

/* ============================================================
   MOTIF 3 — OFFSET PLATE
   Every photograph sits proud of a colour block. The block is
   behind the image, so nothing is ever laid over the picture.
   ============================================================ */
.plate { position:relative; margin:0; }
.plate::before {
  content:""; position:absolute; inset:auto auto -14px -14px;
  width:70%; height:70%;
  background:var(--door-wash);
  border:1px solid var(--door-light);
  z-index:0;
}
.plate--red::before { background:var(--red-wash); border-color:var(--red); }
.plate--jade::before { background:#E9F2F0; border-color:var(--jade); }
.plate > img, .plate > a { position:relative; z-index:1; }
.plate > a { display:block; }
.plate figcaption {
  position:relative; z-index:1;
  font-family:var(--label); font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3);
  margin-top:.9rem; padding-left:.1rem;
}
@media (max-width:640px){ .plate::before { inset:auto auto -9px -9px; } }

/* ============================================================
   MASTHEAD
   ============================================================ */
.masthead { border-bottom:1px solid var(--ink); background:var(--paper); position:relative; z-index:5; }
.masthead__inner { display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;padding-block:1.1rem;flex-wrap:wrap; }
.masthead__name { font-family:var(--display);font-weight:500;font-size:clamp(1.5rem,1.1rem + 1.5vw,2.1rem);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);text-decoration:none;line-height:1; }
.masthead__name:hover { color: var(--red); }
.nav { display:flex;gap:clamp(.9rem,2.5vw,2rem);list-style:none;margin:0;padding:0;flex-wrap:wrap; }
.nav a {
  font-family:var(--label);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  color:var(--ink-2);text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px;
  border-bottom:2px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"] { color:var(--ink); border-bottom-color:var(--red); }

.note-strip {
  margin:0;background:var(--ink);color:var(--paper-2);
  font-family:var(--label);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  text-align:center;padding:.6rem 1rem;
}

/* ============================================================
   COVER
   ============================================================ */
.cover { border-bottom:1px solid var(--ink); background:var(--paper); position:relative; overflow:hidden; }
.cover::before {
  content:""; position:absolute; inset:0;
  background-image:var(--pat-azulejo); background-size:96px 96px;
  opacity:.05; pointer-events:none;
}
.cover__grid { display:grid; grid-template-columns:1fr; position:relative; z-index:1; }
@media (min-width:900px){ .cover__grid { grid-template-columns:1.05fr .95fr; align-items:stretch; } }
.cover__type { padding-block:clamp(2.5rem,6vw,5rem); padding-right:clamp(0rem,4vw,3.5rem); display:flex;flex-direction:column;justify-content:center; }
.cover__art { position:relative; min-height:380px; background:var(--door-abyss); }
.cover__art img { width:100%;height:100%;object-fit:cover;object-position:50% 25%; }
/* a hairline of the door blue down the seam */
@media (min-width:900px){ .cover__art::before { content:"";position:absolute;left:-1px;top:0;bottom:0;width:3px;background:var(--door);z-index:2; } }

.kicker { font-family:var(--label);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--red);margin:0 0 1.4rem;line-height:1.8; }
.kicker span { color:var(--ink-3); }
.cover h1 { font-family:var(--display);font-weight:500;font-size:clamp(2.9rem,1.6rem + 5vw,5.4rem);line-height:.98;letter-spacing:-.02em;margin:0 0 1.5rem;text-wrap:balance; }
.cover h1 em { font-style:italic; color:var(--red); }
.deck { font-size:clamp(1.06rem,1rem + .4vw,1.22rem);line-height:1.65;color:var(--ink-2);max-width:44ch;margin:0 0 2rem; }
.deck strong { color:var(--ink);font-weight:600; }
.cover__meta { display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;margin:2.2rem 0 0;padding-top:1.2rem;border-top:1px solid var(--rule); font-family:var(--label);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3); }
.cover__meta span + span { position:relative; }
.cover__meta span + span::before { content:"";position:absolute;left:-.75rem;top:.35em;width:3px;height:3px;background:var(--red); }

/* ---------- buttons ---------- */
.btn-row { display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.5rem; }
.btn {
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:.55rem 1.5rem;
  font-family:var(--label);font-size:.78rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;border:1.5px solid var(--ink);background:transparent;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.btn:hover { background:var(--ink);color:var(--paper); }
.btn--solid { background:var(--red);border-color:var(--red);color:#fff; }
.btn--solid:hover { background:var(--red-deep);border-color:var(--red-deep);color:#fff; }
.btn--light { border-color:var(--paper-2);color:var(--paper); }
.btn--light:hover { background:var(--paper);color:var(--door-abyss);border-color:var(--paper); }

/* ============================================================
   DEPARTMENTS
   ============================================================ */
.dept { padding-block:var(--band); position:relative; }
.dept--tint { background:var(--paper-2); border-block:1px solid var(--rule); overflow:hidden; }
.dept--tint::before {
  content:""; position:absolute; inset:0;
  background-image:var(--pat-azulejo); background-size:96px 96px;
  opacity:.07; pointer-events:none;
}
.dept--tint > .shell { position:relative; z-index:1; }
.dept--ink { background:var(--door-abyss); color:var(--paper); overflow:hidden; }
.dept--ink::before {
  content:""; position:absolute; inset:0;
  background-image:var(--pat-azulejo-light); background-size:96px 96px;
  opacity:.15; pointer-events:none;
}
.dept--ink > .shell { position:relative; z-index:1; }
.dept--ink .dept__head { color:var(--paper); }
.dept--ink .dept__label { color:var(--door-light); }
.dept--ink p { color:#E3EAF0; }

.dept__label { font-family:var(--label);font-size:.7rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--red);margin:0 0 .8rem; }
.dept__head { font-family:var(--display);font-weight:500;font-size:clamp(2.1rem,1.4rem + 2.8vw,3.4rem);line-height:1.06;letter-spacing:-.015em;margin:0 0 1.1rem; }
.dept__sub { font-size:1.06rem;color:var(--ink-2);max-width:62ch;margin:0 0 clamp(2.25rem,4vw,3.25rem); }

/* ============================================================
   THREE ROOMS — the triptych that proves the headline
   ============================================================ */
.rooms { display:grid;gap:clamp(1.5rem,3vw,2.5rem);grid-template-columns:1fr; }
@media (min-width:760px){ .rooms { grid-template-columns:repeat(3,1fr); } }
/* Each card leads somewhere: 1 to About, 2 to Writing, 3 to Music.
   The link lives on the heading so there is exactly one link per
   card and the h3 stays a real heading; the ::after then stretches
   it over the whole card so the photograph is clickable too. One
   link, one tab stop, whole card as the target. */
.room { margin:0; position:relative; }
.room figure { margin:0 0 1.25rem; position:relative; overflow:hidden; }
.room img { width:100%;aspect-ratio:4/5;object-fit:cover; transition:transform .5s ease; }
.room h3 a {
  color:var(--ink); text-decoration:none;
  background-image:linear-gradient(var(--red),var(--red));
  background-size:0 2px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .25s ease;
}
.room h3 a::after { content:""; position:absolute; inset:0; z-index:2; }
.room:hover h3 a, .room:focus-within h3 a { background-size:100% 2px; }
.room:hover img, .room:focus-within img { transform:scale(1.035); }
.room h3 a:focus-visible { outline:none; }
.room:focus-within { outline:3px solid var(--red); outline-offset:6px; }
@media (prefers-reduced-motion: reduce) {
  .room img { transition:none; }
  .room:hover img, .room:focus-within img { transform:none; }
}
.room__no {
  position:absolute;top:0;left:0;z-index:2;
  background:var(--paper);color:var(--ink);
  font-family:var(--display);font-size:1.5rem;line-height:1;
  padding:.5rem .7rem;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);
}
.room h3 { font-family:var(--display);font-weight:500;font-size:1.55rem;line-height:1.15;margin:0 0 .5rem; }
.room p { margin:0;color:var(--ink-2);font-size:1rem; }
.room__tag { font-family:var(--label);font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--red);display:block;margin-bottom:.45rem; }

/* ============================================================
   LEAD ARTICLE
   ============================================================ */
.lead { display:grid;gap:clamp(1.75rem,4vw,3rem);grid-template-columns:1fr;align-items:start;margin-bottom:clamp(3rem,6vw,4.5rem);padding-bottom:clamp(3rem,6vw,4.5rem);border-bottom:1px solid var(--rule); }
@media (min-width:860px){ .lead { grid-template-columns:1.15fr .85fr; } }
.lead__art { margin:0; }
.lead__art img { width:100%;aspect-ratio:3/2;object-fit:cover; }
.byline { font-family:var(--label);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin:0 0 .7rem; }
.byline b { color:var(--red);font-weight:600; }
.lead h3 { font-family:var(--display);font-weight:500;font-size:clamp(1.9rem,1.3rem + 2vw,2.9rem);line-height:1.08;letter-spacing:-.015em;margin:0 0 1rem;text-wrap:balance; }
.lead h3 a { color:var(--ink);text-decoration:none;background-image:linear-gradient(var(--red),var(--red));background-size:0 2px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .25s ease; }
.lead h3 a:hover { background-size:100% 2px; }
.lead__body { font-size:1.08rem;color:var(--ink-2);margin:0 0 1.25rem;max-width:56ch; }
.more { font-family:var(--label);font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--red);display:inline-flex;align-items:center;min-height:44px; }
.more::after { content:" \2192";margin-left:.45rem;transition:transform .18s ease;display:inline-block; }
.more:hover::after { transform:translateX(4px); }

/* ============================================================
   CARD GRID

   The eight cards come from four different shoots, so they need
   something to hold them together. The shot list's own rule is
   "full colour, no filters" — so the unifier is NOT a duotone.
   It is three things that cost the photographs nothing:
     - one crop for all eight (4:3)
     - one hairline frame
     - the tinted, tiled band they all sit on
   ============================================================ */
.grid { display:grid;gap:clamp(1.75rem,3.5vw,2.75rem);grid-template-columns:1fr; }
@media (min-width:620px){ .grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:980px){ .grid { grid-template-columns:repeat(3,1fr); } }

.card { margin:0; }
.card__art {
  margin:0 0 1.1rem;position:relative;overflow:hidden;
  background:var(--paper-3);
  outline:1px solid var(--rule-2);outline-offset:-1px;
}
.card__art img {
  width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform .5s ease;
}
.card:hover .card__art img,
.card:focus-within .card__art img { transform:scale(1.035); }

.card h4 { font-family:var(--display);font-weight:500;font-size:1.38rem;line-height:1.18;margin:0 0 .6rem;text-wrap:balance; }
.card h4 a { color:var(--ink);text-decoration:none;background-image:linear-gradient(var(--red),var(--red));background-size:0 2px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .25s ease; }
.card h4 a:hover { background-size:100% 2px; }
.card p { margin:0 0 .7rem;color:var(--ink-2);font-size:.98rem; }
.card .byline { margin:0; }

/* ============================================================
   FULL-BLEED ART PLATE
   The page needs somewhere to breathe between departments.
   ============================================================ */
.artplate { position:relative;background:var(--ink); }
.artplate img { width:100%;height:clamp(240px,38vw,460px);object-fit:cover;display:block; }
.artplate figcaption {
  background:var(--ink);color:var(--paper-2);
  font-family:var(--label);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  padding:.9rem clamp(1.25rem,4vw,3rem);
  display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;justify-content:space-between;
}
.artplate figcaption em { font-style:normal;color:var(--door-light); }

/* ============================================================
   CHALK BAND — found text in the wild
   Chalk somebody left on a public sidewalk, photographed. Jenn
   found these; she did not write them, so nothing here says she did.
   This is the voice of the brand as an object.
   ============================================================ */
.chalk { background:var(--door-abyss);padding-block:var(--band);overflow:hidden;position:relative; }
.chalk::before { content:"";position:absolute;inset:0;background-image:var(--pat-azulejo-light);background-size:96px 96px;opacity:.13;pointer-events:none; }
.chalk > .shell { position:relative;z-index:1; }
.chalk__label { font-family:var(--label);font-size:.7rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--door-light);margin:0 0 .8rem;text-align:center; }
.chalk__head { font-family:var(--display);font-weight:500;font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem);color:var(--paper);text-align:center;margin:0 0 clamp(2rem,4vw,3rem);text-wrap:balance; }
.chalk__grid { display:grid;gap:clamp(1.25rem,3vw,2rem);grid-template-columns:1fr; }
@media (min-width:700px){ .chalk__grid { grid-template-columns:repeat(3,1fr); } }
.chalk__grid figure { margin:0; }
/* NO forced aspect ratio, on purpose.
   These three are hand-written text filling the whole frame, and the
   three frames are different shapes: two are square, and Life is
   Beautiful is 3:2 after being trimmed to lose a stray scribble.
   Every single ratio tried here cost a word - 1:1 cut the ends off
   "Life is Beautiful", 3:2 cut "Flowers" off the bottom of the third.
   So each keeps its own shape and the row runs to uneven heights.
   The words being readable is the entire point of this band; tidy
   bottoms are not. Do not add aspect-ratio back. */
.chalk__grid { align-items:start; }
.chalk__grid img { width:100%;height:auto;display:block;border:1px solid rgba(255,255,255,.18); }
.chalk__grid figcaption { font-family:var(--label);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:#B9CCDA;margin-top:.8rem; }

/* ============================================================
   PULL QUOTE
   ============================================================ */
.pull { margin:0;text-align:center; }
.pull blockquote {
  margin:0 0 1.5rem;font-family:var(--display);font-weight:400;font-style:italic;
  font-size:clamp(1.5rem,1.1rem + 2vw,2.35rem);line-height:1.3;letter-spacing:-.01em;
  color:var(--ink);text-wrap:balance;
}
.pull blockquote::before { content:"\201C";color:var(--red);margin-right:.05em; }
.pull blockquote::after { content:"\201D";color:var(--red); }
.pull figcaption { font-family:var(--label);font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3); }
.pull figcaption::before { content:"";display:block;width:44px;height:2px;background:var(--red);margin:0 auto 1rem; }

/* ============================================================
   FEATURE (music, speaking)
   ============================================================ */
.feature { display:grid;gap:clamp(2rem,5vw,4rem);grid-template-columns:1fr;align-items:center; }
@media (min-width:880px){
  .feature { grid-template-columns:1.05fr .95fr; }
  .feature--flip > *:first-child { order:2; }
}
.feature__art { margin:0; }
.feature__art img { width:100%;object-fit:cover; }
.feature p { font-size:1.04rem;margin:0 0 1.1rem;max-width:56ch; }

.stat-row { display:flex;flex-wrap:wrap;gap:clamp(1.5rem,4vw,3rem);margin-top:2.25rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.2); }
.dept:not(.dept--ink) .stat-row { border-top-color:var(--rule); }
.stat b { display:block;font-family:var(--display);font-size:1.9rem;line-height:1;font-weight:500;color:var(--door-light); }
.dept:not(.dept--ink) .stat b { color:var(--red); }
.stat span { font-family:var(--label);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:#B9CCDA;display:block;margin-top:.4rem; }
.dept:not(.dept--ink) .stat span { color:var(--ink-3); }

/* ============================================================
   STUDIO STRIP
   The copy says the record was made with her father on piano.
   Until now the page asserted that and showed an album cover.
   These three frames are the assertion, photographed: her at
   the microphone, his hands on the keys, the two of them in
   the same room.
   ============================================================ */
.studio {
  margin-top: clamp(2.75rem,5vw,4rem);
  padding-top: clamp(2rem,4vw,2.75rem);
  border-top: 1px solid rgba(255,255,255,.22);
}
.studio__label {
  font-family:var(--label); font-size:.66rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--door-light); margin:0 0 1.5rem;
}
.studio__grid { display:grid; gap:clamp(1rem,2.5vw,1.75rem); grid-template-columns:1fr; }
/* Two upright frames, then the whole room full width underneath.
   The group shot is a 4:3 of eight people; forcing it into a 4:5
   cell cropped the players off both ends. */
@media (min-width:680px){ .studio__grid { grid-template-columns:repeat(2,1fr); } }
/* THE PLAYERS — five people, one each, on /music/.
   auto-fit rather than a fixed five, so it goes 5 / 3 / 2 / 1 as the
   window narrows instead of squeezing five 90px slivers onto a phone. */
.players {
  display:grid; gap:clamp(.85rem,2vw,1.5rem);
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
}
.players figure { margin:0; }
.players img {
  width:100%; aspect-ratio:4/5; object-fit:cover; display:block;
  border:1px solid rgba(255,255,255,.18);
}
.players figcaption {
  font-family:var(--label); font-size:.64rem; letter-spacing:.1em;
  text-transform:uppercase; color:#B9CCDA; margin-top:.7rem; line-height:1.55;
}
.players figcaption b { display:block; color:var(--paper); font-weight:600; letter-spacing:.11em; }

.studio__wide { margin:clamp(1rem,2.5vw,1.75rem) 0 0; }
.studio__wide img {
  width:100%; height:auto; display:block; aspect-ratio:16/9; object-fit:cover;
  border:1px solid rgba(255,255,255,.18);
}
.studio__wide figcaption {
  font-family:var(--label); font-size:.66rem; letter-spacing:.12em;
  text-transform:uppercase; color:#B9CCDA; margin-top:.75rem; line-height:1.7;
  max-width:78ch;
}
.studio__wide figcaption b { display:block; color:var(--paper); font-weight:600; letter-spacing:.14em; }
.studio__grid figure { margin:0; }
.studio__grid img {
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border:1px solid rgba(255,255,255,.18);
}
.studio__grid figcaption {
  font-family:var(--label); font-size:.66rem; letter-spacing:.12em;
  text-transform:uppercase; color:#B9CCDA; margin-top:.75rem; line-height:1.6;
}
.studio__grid figcaption b { display:block; color:var(--paper); font-weight:600; letter-spacing:.14em; }

/* ============================================================
   SPEAKING PROOF ROW
   ============================================================ */
.proof { display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:clamp(2.5rem,5vw,3.5rem);grid-template-columns:1fr; }
@media (min-width:620px){ .proof { grid-template-columns:repeat(3,1fr); } }
.proof__item { background:var(--paper);padding:1.5rem 1.4rem; }
.proof__item b { display:block;font-family:var(--label);font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin-bottom:.55rem; }
.proof__item span { display:block;font-family:var(--display);font-size:1.22rem;line-height:1.25;color:var(--ink); }
.proof__item i { display:block;font-style:normal;font-size:.9rem;color:var(--ink-3);margin-top:.4rem; }

/* ============================================================
   MAILING LIST
   Chalk hatch instead of tile — a different surface, so the
   page does not repeat itself.
   ============================================================ */
.signup { position:relative;text-align:center;padding:clamp(2.5rem,6vw,4rem) clamp(1.5rem,4vw,3rem);border:2px solid var(--ink);overflow:hidden;background:var(--paper); }
.signup::before { content:"";position:absolute;inset:0;background-image:var(--pat-chalk);background-size:8px 8px;opacity:.06;pointer-events:none; }
.signup > * { position:relative;z-index:1; }
.signup h2, .signup h3 { font-family:var(--display);font-weight:500;font-size:clamp(1.6rem,1.2rem + 1.6vw,2.3rem);line-height:1.15;margin:0 0 .9rem;text-wrap:balance; }
.signup p { color:var(--ink-2);max-width:48ch;margin:0 auto 1.75rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot { background:var(--ink);color:#C9CFD5;padding-block:clamp(3rem,6vw,4.5rem) 2rem;font-size:.95rem; }
.foot__grid { display:grid;gap:2.25rem;grid-template-columns:1fr; }
@media (min-width:860px){ .foot__grid { grid-template-columns:1.4fr repeat(3,1fr); } }
.foot__name { font-family:var(--display);font-size:1.7rem;color:var(--paper);margin:0 0 .5rem;letter-spacing:.04em;text-transform:uppercase; }
.foot .foot__h { font-family:var(--label);font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--door-light);margin:0 0 .9rem; }
.foot ul { list-style:none;margin:0;padding:0; }
.foot li { margin-bottom:.15rem; }
.foot a { color:#C9CFD5;text-decoration:none;display:inline-flex;align-items:center;min-height:36px; }
.foot a:hover { color:var(--paper);text-decoration:underline; }
.foot__legal { display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;margin-top:3rem;padding-top:1.5rem;border-top:1px solid #333A41;font-family:var(--label);font-size:.7rem;letter-spacing:.1em;color:#8A939B; }

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important; }
}

@media (prefers-contrast: more) {
  :root { --ink-2:#2A3037; --ink-3:#3F464D; --rule:#9A948A; }
  .cover::before, .dept--tint::before, .dept--ink::before, .chalk::before, .signup::before { opacity:.02; }
}

@media print {
  .note-strip,.nav,.btn,.artplate,.chalk { display:none; }
  body { font-size:11pt;background:#fff; }
}

/* ============================================================
   ESSAY PAGE  —  /writing/<slug>/

   The reading template. It has to hold a 400-word column and a
   3,500-word memoir without either one looking wrong, so the
   furniture does the work the word count cannot: a tinted
   header band on the azulejo, the photograph on an offset
   plate, and a 66ch measure that never changes width.

   Nothing new is invented here. The kicker, the threshold
   rule, the plate, the pull-quote and the byline are all the
   homepage's own parts, reused.
   ============================================================ */

.essay { display:block; }

/* ---------- header band ---------- */
.essay__head {
  position:relative; overflow:hidden;
  background:var(--paper-2);
  border-bottom:1px solid var(--rule);
  padding-block: clamp(2.25rem,5vw,4rem) clamp(2rem,4vw,3.25rem);
}
.essay__head::before {
  content:""; position:absolute; inset:0;
  background-image:var(--pat-azulejo); background-size:96px 96px;
  opacity:.05; pointer-events:none;
}
.essay__head > * { position:relative; }

.essay__crumb {
  font-family:var(--label); font-size:.68rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 1.6rem;
  display:flex; flex-wrap:wrap; align-items:center; gap:.55rem;
}
.essay__crumb a { color:var(--ink-3); text-decoration:none; border-bottom:1px solid var(--rule-2); }
.essay__crumb a:hover { color:var(--red); border-bottom-color:var(--red); }
.essay__crumb span[aria-hidden] { color:var(--rule-2); }

.essay__title {
  overflow-wrap:break-word;
  font-family:var(--display); font-weight:500;
  font-size:clamp(2.15rem,1.4rem + 3.4vw,4rem); line-height:1.02;
  letter-spacing:-.02em; margin:0 0 1.35rem; text-wrap:balance; max-width:19ch;
}
.essay__title em { font-style:italic; color:var(--red); }

.essay__deck {
  font-size:clamp(1.06rem,1rem + .45vw,1.28rem); line-height:1.6;
  color:var(--ink-2); max-width:52ch; margin:0;
}

.essay__meta {
  display:flex; flex-wrap:wrap; gap:.55rem 1.4rem;
  margin:2rem 0 0; padding-top:1.15rem; border-top:1px solid var(--rule-2);
  font-family:var(--label); font-size:.68rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3);
}
.essay__meta b { color:var(--ink); font-weight:600; }
.essay__meta span + span { position:relative; }
.essay__meta span + span::before {
  content:""; position:absolute; left:-.78rem; top:.42em;
  width:3px; height:3px; background:var(--red);
}

/* ---------- hero photograph ---------- */
.essay__hero { margin:clamp(2.25rem,5vw,3.5rem) 0 0; }
/* filled, not outlined: door-wash against the paper is so pale
   that only the hairline showed, and it read as a stray box */
.essay__hero .plate::before {
  inset:auto auto -13px -13px; width:46%; height:62%;
  background:var(--chalk); border:0;
}
.essay__hero img {
  position:relative; z-index:1; display:block; width:100%; height:auto;
  outline:1px solid var(--rule-2); outline-offset:-1px; background:var(--paper-3);
}
.essay__cap {
  font-family:var(--label); font-size:.66rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
  margin:1.05rem 0 0; display:flex; align-items:baseline; gap:.6rem;
}
.essay__cap::before {
  content:""; flex:0 0 26px; height:1px; background:var(--red); transform:translateY(-.35em);
}

/* ---------- the column ---------- */
.essay__body {
  /* Jenn writes things like HOOOOOOOOOOOOOOOWWWWW. Let any token
     that cannot fit break rather than push the page sideways. */
  overflow-wrap:break-word;
  margin:clamp(2.5rem,5vw,4rem) 0 0;
  font-size:1.075rem; line-height:1.78; color:var(--ink);
}
.essay__body > * { max-width:66ch; }
.essay__body p { margin:0 0 1.35em; }
.essay__body strong { font-weight:600; }
.essay__body em { font-style:italic; }
.essay__body a { color:var(--ink); text-decoration:none; border-bottom:1px solid var(--red); }
.essay__body a:hover { color:var(--red); }

/* The opening paragraph is a lede, not a drop cap. Several of
   these essays open on a single short sentence, and a floated
   initial then bleeds down into the paragraphs beneath it. A
   lede is length-proof. */
.essay__body > p:first-of-type {
  font-size:1.2em; line-height:1.6; margin-bottom:1.5em;
}

.essay__body h2 {
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.55rem,1.2rem + 1.4vw,2.25rem); line-height:1.12;
  letter-spacing:-.015em; color:var(--ink);
  margin:clamp(2.75rem,5vw,3.75rem) 0 1.1rem; text-wrap:balance;
}
.essay__body h2::before {
  content:""; display:block; width:44px; height:2px;
  background:var(--red); margin:0 0 1.15rem;
}

/* lists inside the column, and the sources block the LinkedIn
   originals end with */
.essay__list { margin:0 0 1.35em; padding:0; list-style:none; max-width:66ch; }
.essay__list li { position:relative; padding-left:1.55rem; margin-bottom:.7em; }
.essay__list li::before {
  content:""; position:absolute; left:.25rem; top:.72em;
  width:6px; height:6px; background:var(--red); transform:rotate(45deg);
}
.essay__list li:last-child { margin-bottom:0; }

/* a break where the manuscript had one */
.essay__rule { border:0; margin:clamp(2.5rem,5vw,3.5rem) 0; max-width:66ch; text-align:center; }
.essay__rule::before {
  content:"\2726"; font-size:.8rem; color:var(--rule-2); letter-spacing:1.2em;
}

/* quotations set inside the flow */
.essay__body blockquote {
  margin:2rem 0; padding:.15rem 0 .15rem 1.5rem;
  border-left:2px solid var(--red);
  font-family:var(--display); font-style:italic; font-weight:400;
  font-size:1.28em; line-height:1.42; color:var(--ink); max-width:52ch;
}
.essay__body blockquote p { margin:0; }
.essay__body blockquote cite {
  display:block; margin-top:.7rem; font-family:var(--label); font-style:normal;
  font-size:.62rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3);
}

/* ---------- closing ---------- */
.essay__end {
  margin:2.5rem 0 0; max-width:66ch;
  font-family:var(--label); font-size:.68rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3);
  display:flex; align-items:center; gap:.9rem;
}
.essay__end::before { content:""; width:26px; height:2px; background:var(--red); }

.essay__closer {
  margin:clamp(2.75rem,5vw,4rem) 0 0; padding:clamp(1.75rem,4vw,2.5rem) 0 0;
  border-top:1px solid var(--rule); max-width:66ch;
}

/* ---------- next reads ---------- */
.essay-next { background:var(--paper-2); border-top:1px solid var(--rule); }
.essay-next .grid { grid-template-columns:1fr; }
@media (min-width:760px){ .essay-next .grid { grid-template-columns:repeat(3,1fr); } }
.essay-next h2 {
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem); line-height:1.1;
  margin:0 0 clamp(1.75rem,3.5vw,2.5rem);
}
.essay-next .card h3 {
  font-family:var(--display); font-weight:500; font-size:1.32rem; line-height:1.15;
  letter-spacing:-.01em; margin:0 0 .55rem; text-wrap:balance;
}
.essay-next .card h3 a {
  color:var(--ink); text-decoration:none;
  background-image:linear-gradient(var(--red),var(--red));
  background-size:0 2px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .25s ease;
}
.essay-next .card h3 a:hover { background-size:100% 2px; }
.essay-next .card p { margin:0; font-size:.97rem; color:var(--ink-2); }
.essay-next .card__art img { display:block; width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; }
.essay-next .card__kick {
  font-family:var(--label); font-size:.64rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--red); margin:0 0 .5rem;
}

@media print {
  .essay__head::before, .essay-next { display:none; }
  .essay__body { font-size:11pt; }
}

/* ============================================================
   TALK PAGE  —  /speaking/<slug>/

   A talk is not an essay. There is a recording, a structure the
   speaker actually used, and no running prose. So: a click-to-
   play still instead of a hero, and the talk's own numbered
   points instead of paragraphs.
   ============================================================ */

.talk__sub {
  font-family:var(--label); font-size:.72rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3);
  margin:-.6rem 0 1.25rem;
}

/* ---------- click-to-play ---------- */
.talk__video { margin:clamp(2.25rem,5vw,3.5rem) 0 0; }
.talk__player {
  position:relative; display:block; width:100%; margin:0;
  aspect-ratio:16/9; overflow:hidden; background:var(--ink);
  outline:1px solid var(--rule-2); outline-offset:-1px; cursor:pointer;
}
.talk__player img { display:block; width:100%; height:100%; object-fit:cover; }
.talk__player iframe { display:block; width:100%; height:100%; border:0; }
.talk__player.is-playing { cursor:default; aspect-ratio:16/9; }
.talk__player::after {
  content:""; position:absolute; inset:0; background:rgba(6,43,73,.28);
  transition:background .2s ease; pointer-events:none;
}
.talk__player.is-playing::after { display:none; }
.talk__player:hover::after { background:rgba(6,43,73,.14); }

.talk__play {
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem;
  background:none; border:0; cursor:pointer; color:#fff; font:inherit; padding:1rem;
}
.talk__player.is-playing .talk__play { display:none; }
.talk__play-mark {
  width:72px; height:72px; border-radius:50%;
  background:var(--red); border:2px solid rgba(255,255,255,.9);
  display:grid; place-items:center;
  transition:transform .18s ease, background .18s ease;
}
.talk__play-mark::before {
  content:""; width:0; height:0;
  border-left:20px solid #fff; border-top:12px solid transparent; border-bottom:12px solid transparent;
  margin-left:5px;
}
.talk__play:hover .talk__play-mark,
.talk__play:focus-visible .talk__play-mark { transform:scale(1.07); background:var(--red-deep); }
.talk__play:focus-visible { outline:3px solid #fff; outline-offset:-6px; }
.talk__play-label {
  font-family:var(--label); font-size:.72rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; text-shadow:0 1px 12px rgba(0,0,0,.5);
  display:flex; align-items:center; gap:.7rem;
}
.talk__play-label b { font-weight:400; color:rgba(255,255,255,.72); }
.talk__play-label b::before { content:"\00B7"; margin-right:.7rem; }

/* ---------- the talk's own structure ---------- */
.talk__points { list-style:none; margin:1.5rem 0 0; padding:0; max-width:66ch; }
.talk__point {
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:0 1.4rem;
  padding:1.6rem 0; border-top:1px solid var(--rule);
}
.talk__point:last-child { border-bottom:1px solid var(--rule); }
.talk__n {
  font-family:var(--display); font-weight:500; font-size:2rem; line-height:1;
  color:var(--red); min-width:1.4em; padding-top:.05em;
}
.talk__point h3 {
  font-family:var(--display); font-weight:500; font-size:1.32rem; line-height:1.2;
  letter-spacing:-.01em; margin:0 0 .5rem; color:var(--ink); text-wrap:balance;
}
.talk__point p { margin:0; font-size:1rem; color:var(--ink-2); }

/* ---------- talks index ---------- */
.talks { display:grid; gap:clamp(1.75rem,3.5vw,2.5rem); grid-template-columns:1fr; margin-top:.5rem; }
@media (min-width:820px){ .talks { grid-template-columns:repeat(3,1fr); } }
.talkcard { margin:0; }
.talkcard__art {
  position:relative; margin:0 0 1.1rem; overflow:hidden;
  background:var(--paper-3); outline:1px solid var(--rule-2); outline-offset:-1px;
}
.talkcard__art img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }
.talkcard__badge {
  position:absolute; left:0; bottom:0;
  font-family:var(--label); font-size:.6rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  background:var(--red); color:#fff; padding:.4rem .7rem;
}
.talkcard__kick {
  font-family:var(--label); font-size:.64rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--red); margin:0 0 .5rem;
}
.talkcard h3 {
  font-family:var(--display); font-weight:500; font-size:1.32rem; line-height:1.15;
  letter-spacing:-.01em; margin:0 0 .55rem; text-wrap:balance;
}
.talkcard h3 a {
  color:var(--ink); text-decoration:none;
  background-image:linear-gradient(var(--red),var(--red));
  background-size:0 2px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .25s ease;
}
.talkcard h3 a:hover { background-size:100% 2px; }
.talkcard p { margin:0; font-size:.97rem; color:var(--ink-2); }

@media print {
  .talk__play { display:none; }
}

/* the delivered script, printed under the summary */
.talk__text {
  margin:clamp(2.75rem,5vw,4rem) 0 0;
  padding-top:clamp(2rem,4vw,2.75rem);
  border-top:1px solid var(--rule);
  font-size:1.05rem; line-height:1.78; color:var(--ink);
  overflow-wrap:break-word;
}
.talk__text > * { max-width:66ch; }
.talk__text h2 {
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.55rem,1.2rem + 1.4vw,2.25rem); line-height:1.12;
  letter-spacing:-.015em; margin:0 0 .6rem;
}
.talk__text h2::before {
  content:""; display:block; width:44px; height:2px;
  background:var(--red); margin:0 0 1.15rem;
}
.talk__text-note {
  font-family:var(--label); font-size:.68rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
  margin:0 0 2rem;
}
.talk__text p { margin:0 0 1.35em; }
.talk__text p:first-of-type { font-size:1.15em; line-height:1.62; }
.talk__text a { color:var(--ink); text-decoration:none; border-bottom:1px solid var(--red); }
.talk__text a:hover { color:var(--red); }

/* ============================================================
   ART PLATE AS A LINK
   The full-bleed dividers now go somewhere. If a photograph is
   going to take the whole width it should earn it.
   ============================================================ */
.artplate--link { display:block; position:relative; text-decoration:none; color:inherit; margin:0; }
.artplate--link img { display:block; width:100%; height:auto; }
.artplate__cap {
  display:block; margin-top:.9rem;
  font-family:var(--label); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); text-align:center;
}
.artplate__cap span { display:block; color:var(--ink-2); }
.artplate__cap em {
  display:inline-block; margin-top:.4rem; font-style:normal; color:var(--red); font-weight:600;
}
.artplate__cap em::after { content:" \2192"; display:inline-block; transition:transform .18s ease; }
.artplate--link:hover .artplate__cap em::after { transform:translateX(4px); }
.artplate--link:focus-visible { outline:3px solid var(--red); outline-offset:4px; }

/* ============================================================
   ON AIR  —  the Resiliency band
   Sits where a decorative divider used to. Same full-width
   weight on the page, but it is now a door to somewhere.
   ============================================================ */
.onair {
  position:relative; overflow:hidden;
  background:var(--door-abyss); color:var(--paper);
  padding-block:clamp(3rem,7vw,5rem);
}
.onair::before {
  content:""; position:absolute; inset:0;
  background-image:var(--pat-azulejo-light); background-size:96px 96px;
  opacity:.07; pointer-events:none;
}
.onair > * { position:relative; }
.onair__grid { display:grid; gap:clamp(2rem,5vw,4rem); grid-template-columns:1fr; align-items:center; }
@media (min-width:860px){ .onair__grid { grid-template-columns:1.35fr .65fr; } }
/* the episode-count tiles are gone: the numbers kept going stale, so
   the prose carries it and the text gets the full measure */
.onair__grid--wide { grid-template-columns:1fr !important; }
.onair__grid--wide .onair__body { max-width:70ch; }
.onair__label {
  font-family:var(--label); font-size:.72rem; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:var(--red);
  margin:0 0 1.1rem; display:flex; align-items:center; gap:.7rem;
}
.onair__label::before {
  content:""; width:9px; height:9px; border-radius:50%; background:var(--red);
  box-shadow:0 0 0 0 rgba(187,56,38,.7); animation:onair-pulse 2.6s ease-out infinite;
}
@keyframes onair-pulse {
  0%   { box-shadow:0 0 0 0 rgba(187,56,38,.65); }
  70%  { box-shadow:0 0 0 12px rgba(187,56,38,0); }
  100% { box-shadow:0 0 0 0 rgba(187,56,38,0); }
}
@media (prefers-reduced-motion: reduce){ .onair__label::before { animation:none; } }
.onair__head {
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.9rem,1.3rem + 2.2vw,3rem); line-height:1.05;
  letter-spacing:-.018em; margin:0 0 1.1rem; color:var(--paper); text-wrap:balance;
}
.onair__body { font-size:1.06rem; line-height:1.7; color:#D7E3EE; max-width:56ch; margin:0 0 1.8rem; }
/* The podcast cover, in the narrow column .onair__grid already had.
   Capped so it reads as a record sleeve beside the text, not a hero. */
.onair__art { margin:0; max-width:320px; justify-self:center; }
.onair__art img { width:100%; height:auto; display:block; border:1px solid rgba(255,255,255,.16); }
.onair__art figcaption {
  font-family:var(--label); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:#B9CCDA; margin-top:.75rem; text-align:center;
}
.onair__stats { display:flex; flex-wrap:wrap; gap:1.5rem 2.5rem; }
@media (min-width:860px){ .onair__stats { flex-direction:column; gap:1.4rem; } }
.onair__stats .stat b {
  display:block; font-family:var(--display); font-weight:500; font-size:2.4rem;
  line-height:1; color:var(--paper);
}
.onair__stats .stat span {
  display:block; margin-top:.35rem; font-family:var(--label); font-size:.66rem;
  font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--door-light);
}

/* ============================================================
   EPISODE LIST  —  the GlobeSt library
   A numbered list of conversations. Not cards: there are eight
   and there will be more, and a reader scanning for a name
   wants a list, not a grid.
   ============================================================ */
.globest-note {
  font-size:1.06rem; line-height:1.7; color:var(--ink-2);
  max-width:62ch; margin:0 0 clamp(2rem,4vw,3rem);
  padding-left:1.2rem; border-left:2px solid var(--red);
}
.eps { list-style:none; margin:0; padding:0; counter-reset:ep; }
.ep {
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:0 1.3rem;
  padding:1.5rem 0; border-top:1px solid var(--rule);
}
.ep:last-child { border-bottom:1px solid var(--rule); }
/* .ep__no held the episode number and counted down the page. It is
   replaced by .ep__play - the same slot, an audio signal instead. */
.ep__play { color:var(--rule-2); display:block; padding-top:.15rem; transition:color .2s ease; }
.ep__play svg { display:block; }
.ep:hover .ep__play, .ep:focus-within .ep__play { color:var(--red); }
@media (prefers-reduced-motion: reduce) { .ep__play { transition:none; } }

/* ---- the show card above the list ---- */
.show { display:grid; gap:clamp(1.5rem,4vw,2.75rem); grid-template-columns:1fr; align-items:center; }
@media (min-width:800px){ .show { grid-template-columns:minmax(0,.42fr) minmax(0,.58fr); } }
.show__art { margin:0; }
.show__art img { width:100%; height:auto; display:block; }
.show__body .globest-note { margin-bottom:1.4rem; }
.ep__body h3 {
  font-family:var(--display); font-weight:500; font-size:1.3rem; line-height:1.2;
  letter-spacing:-.01em; margin:0 0 .45rem; text-wrap:balance;
}
.ep__body h3 a {
  color:var(--ink); text-decoration:none;
  background-image:linear-gradient(var(--red),var(--red));
  background-size:0 2px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .25s ease;
}
.ep__body h3 a:hover { background-size:100% 2px; }
.ep__body > p { margin:0 0 .6rem; font-size:.99rem; color:var(--ink-2); max-width:62ch; }
.ep__meta {
  display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; margin:0 !important;
  font-family:var(--label); font-size:.66rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
}
.ep__meta span + span { position:relative; }
.ep__meta span + span::before {
  content:""; position:absolute; left:-.65rem; top:.42em;
  width:3px; height:3px; background:var(--red);
}

/* the About page now carries four fact boxes, not three */
@media (min-width:760px){
  .proof { grid-template-columns:repeat(2,1fr); }
}
@media (min-width:1080px){
  .proof { grid-template-columns:repeat(4,1fr); }
}

/* ============================================================
   LIBRARY CARD  —  the GlobeSt series on /speaking/
   One wide card above the individual talks, because a series of
   eight is a different kind of object from a single talk.
   ============================================================ */
.library {
  display:block; text-decoration:none; color:inherit;
  background:var(--door-abyss); position:relative; overflow:hidden;
  padding:clamp(1.75rem,4vw,2.75rem);
  margin:0 0 clamp(1.75rem,3.5vw,2.5rem);
}
.library::before {
  content:""; position:absolute; inset:0;
  background-image:var(--pat-azulejo-light); background-size:96px 96px;
  opacity:.07; pointer-events:none;
}
.library > * { position:relative; display:block; }
.library__label {
  font-family:var(--label); font-size:.66rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--red); margin-bottom:.9rem;
}
.library__head {
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem); line-height:1.08;
  letter-spacing:-.015em; color:var(--paper); margin-bottom:.8rem; text-wrap:balance;
}
.library__body { font-size:1rem; line-height:1.65; color:#D2E0EC; max-width:64ch; margin-bottom:1.2rem; }
.library__more {
  font-family:var(--label); font-size:.72rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--door-light);
}
.library__more::after { content:" \2192"; display:inline-block; transition:transform .18s ease; }
.library:hover .library__more { color:#fff; }
.library:hover .library__more::after { transform:translateX(4px); }
.library:focus-visible { outline:3px solid var(--red); outline-offset:3px; }

/* ============================================================
   HAPPENINGS  —  /happenings/ and the strip on the home page

   ART DIRECTION NOTE
   A concert on a Sunday afternoon and a hardcover are different
   kinds of object, so this page does not force them into one
   card grid. Each entry gets a date rail, a kind chip and as
   much or as little furniture as it actually has. An entry with
   no photograph is not a broken card; it is a typographic
   entry, which is what a book announcement looked like in a
   newspaper for two hundred years.

   The chip colours come straight out of the palette that was
   measured off the photographs: red for live, cobalt for print,
   jade for press. No new hues.
   ============================================================ */
.hap {
  display:grid; gap:clamp(1.1rem,2.5vw,2rem);
  grid-template-columns:1fr;
  padding-block:clamp(1.75rem,3.5vw,2.5rem);
  border-top:1px solid var(--rule);
}
.hap:first-of-type { border-top:0; padding-top:0; }

/* the date rail spans the full width, above everything */
.hap__date {
  grid-column:1/-1;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.7rem 1rem;
  font-family:var(--label); font-size:.74rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); margin:0;
}
.hap__kind {
  font-weight:600; letter-spacing:.18em; color:#fff;
  padding:.3rem .6rem .26rem; background:var(--ink);
}
.hap__kind--concert { background:var(--red); }
.hap__kind--book,
.hap__kind--release { background:var(--door-deep); }
.hap__kind--press   { background:var(--jade); }
.hap__kind--talk,
.hap__kind--episode { background:var(--terracotta); }

.hap__art { margin:0; }
.hap__art img { width:100%; height:auto; display:block; }

.hap__body > *:first-child { margin-top:0; }
.hap h3 {
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem); line-height:1.12;
  letter-spacing:-.015em; margin:0 0 .7rem; text-wrap:balance;
}
.hap h3 em { font-style:normal; color:var(--red); }
.hap__deck { font-size:1.06rem; line-height:1.6; color:var(--ink-2); margin:0 0 1rem; max-width:60ch; }
.hap__body p { max-width:64ch; }
.hap__body p em { color:var(--ink); font-style:italic; }

/* who else is on the bill */
.hap__who {
  font-size:.98rem; line-height:1.65; color:var(--ink-2);
  padding-left:1rem; border-left:2px solid var(--rule-2); margin:1.1rem 0;
}
.hap__who span {
  font-family:var(--label); font-size:.68rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3);
  display:block; margin-bottom:.3rem;
}

/* where, how much, who it is for */
.hap__facts {
  display:grid; gap:1rem clamp(1.5rem,3vw,2.5rem);
  grid-template-columns:1fr; margin:1.4rem 0 1.5rem;
  padding-top:1.2rem; border-top:1px solid var(--rule);
}
@media (min-width:560px){ .hap__facts { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.hap__fact dt {
  font-family:var(--label); font-size:.66rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); margin-bottom:.35rem;
}
.hap__fact dd { margin:0; font-size:.98rem; line-height:1.55; color:var(--ink); }

/* the lead entry: art beside the words on a wide screen */
@media (min-width:900px){
  .hap--lead { grid-template-columns:1fr 1fr; align-items:start; }
  .hap--lead .hap__art { order:2; }
  .hap--lead .hap__body { order:1; }
  .hap--lead h3 { font-size:clamp(2rem,1.4rem + 2.2vw,3rem); }
  .hap:not(.hap--lead) { grid-template-columns:minmax(0,320px) 1fr; }
  .hap:not(.hap--lead):not(:has(.hap__art)) { grid-template-columns:1fr; }
}

.hap__ask {
  font-family:var(--display); font-size:clamp(1.15rem,1rem + .6vw,1.5rem);
  line-height:1.5; color:var(--ink-2); margin:0; text-wrap:balance;
}
.hap__ask a { color:var(--red); text-decoration:none; border-bottom:1px solid currentColor; }
.hap__ask a:hover { color:var(--red-deep); }

@media (prefers-contrast: more) {
  .hap__kind--press { background:#155A4E; }
}
@media print {
  .hap { break-inside:avoid; }
  .hap .btn-row { display:none; }
}

/* ------------------------------------------------------------
   THE STRIP  —  the two live things, on the home page
   Sits directly under the cover, because a concert six days out
   outranks everything else on the page while it is six days out.
   ------------------------------------------------------------ */
.strip { background:var(--door-abyss); position:relative; overflow:hidden; padding-block:clamp(2rem,4vw,3rem); }
.strip::before {
  content:""; position:absolute; inset:0;
  background-image:var(--pat-azulejo-light); background-size:96px 96px;
  opacity:.09; pointer-events:none;
}
.strip > .shell { position:relative; z-index:1; }
.strip__head {
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:.6rem 1.5rem; margin:0 0 1.5rem;
}
.strip__label {
  font-family:var(--label); font-size:.7rem; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:var(--red); margin:0;
}
.strip__all {
  font-family:var(--label); font-size:.72rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--door-light);
  text-decoration:none;
}
.strip__all::after { content:" \2192"; display:inline-block; transition:transform .18s ease; }
.strip__all:hover { color:#fff; }
.strip__all:hover::after { transform:translateX(4px); }

/* auto-fit, not repeat(2,1fr): the number of live things changes.
   With two entries this is two columns; with one it goes full width
   rather than leaving a hole where the second used to be. */
.strip__grid { display:grid; gap:clamp(1.25rem,3vw,2rem); grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }

.strip__item {
  display:block; text-decoration:none; color:inherit;
  border:1px solid rgba(255,255,255,.2); padding:clamp(1.1rem,2.5vw,1.6rem);
}
.strip__item:hover { border-color:var(--door-light); }
.strip__item:focus-visible { outline:3px solid var(--red); outline-offset:3px; }
.strip__when {
  font-family:var(--label); font-size:.68rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--door-light);
  margin:0 0 .6rem; display:block;
}
.strip__title {
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.3rem,1.1rem + .9vw,1.75rem); line-height:1.14;
  letter-spacing:-.01em; color:var(--paper); margin:0 0 .5rem; text-wrap:balance;
  display:block;
}
/* --door-light, not a salmon tint. On the abyss ground this is the
   accent the rest of the site already uses (the chalk label, the art
   plate caption, the library link), so the strip stops introducing a
   hue that appears nowhere else. */
.strip__title em { font-style:normal; color:var(--door-light); }
.strip__deck { font-size:.96rem; line-height:1.6; color:#D2E0EC; margin:0; display:block; max-width:46ch; }


/* ============================================================
   CONSTANT CONTACT  -  the sign-up form in the SIGNUP block

   The widget renders real DOM into .ctct-inline-form rather than
   an iframe, so it can be dressed to match the site. Everything
   below is scoped to .ctct-inline-form so it can never leak.

   Their defaults arrive as Arial and Helvetica Neue with a 3px
   radius. The site has neither. If Constant Contact ever renames
   these classes the form still works, it just reverts to their
   look, so check it after any change at their end.
   ============================================================ */

/* The form repeats the heading and the paragraph that .signup
   already sets in the site typography. Hide the duplicates. */
.ctct-inline-form .ctct-form-header,
.ctct-inline-form .ctct-form-text { display:none !important; }

.ctct-inline-form .ctct-form-container { padding:0 !important; background:transparent !important; }
.ctct-inline-form .ctct-form-custom { max-width:27rem; margin:1.75rem auto 0; }
.ctct-inline-form .ctct-form-field { margin-bottom:1rem; text-align:left; }

.ctct-inline-form .ctct-form-label {
  font-family:var(--label) !important; font-size:.68rem !important; font-weight:600 !important;
  letter-spacing:.16em !important; text-transform:uppercase !important; color:var(--ink-2) !important;
}

.ctct-inline-form .ctct-form-element {
  font-family:var(--body) !important; font-size:1rem !important; color:var(--ink) !important;
  width:100%; min-height:48px; padding:.55rem .8rem !important;
  background:var(--paper) !important; border:1.5px solid var(--rule-2) !important; border-radius:0 !important;
}
.ctct-inline-form .ctct-form-element:focus {
  outline:none; border-color:var(--ink) !important;
  box-shadow:0 0 0 3px rgba(11,99,168,.18) !important;
}

/* the site button, exactly: .btn + .btn--solid */
.ctct-inline-form .ctct-form-button {
  display:inline-flex !important; align-items:center; justify-content:center;
  width:100%; min-height:48px; padding:.55rem 1.5rem !important;
  font-family:var(--label) !important; font-size:.78rem !important; font-weight:600 !important;
  letter-spacing:.13em !important; text-transform:uppercase !important;
  background:var(--red) !important; border:1.5px solid var(--red) !important;
  color:#fff !important; border-radius:0 !important;
  transition:background .18s ease,border-color .18s ease;
}
.ctct-inline-form .ctct-form-button:hover {
  background:var(--red-deep) !important; border-color:var(--red-deep) !important;
}

/* the consent paragraph and their footer, quietened but readable */
.ctct-inline-form .ctct-gdpr-text,
.ctct-inline-form .ctct-form-footer {
  font-family:var(--label) !important; font-size:.62rem !important; line-height:1.6 !important;
  letter-spacing:.02em; color:var(--ink-3) !important; margin-top:1rem !important;
}
.ctct-inline-form .ctct-form-footer-link { color:var(--ink-3) !important; }
.ctct-inline-form .ctct-form-errorMessage { font-family:var(--label) !important; font-size:.7rem !important; color:var(--red) !important; }

/* Badge hidden. The sentence Google requires instead is printed in
   the SIGNUP block in index.html - do not delete one without the other. */
.grecaptcha-badge { visibility:hidden; }

.signup__fine {
  font-family:var(--label); font-size:.62rem; letter-spacing:.08em;
  color:var(--ink-3); margin:1rem 0 0;
}