/* The Long List — shared system.
   DESIGN.md is the source of truth. Nothing here may introduce a colour,
   a square image, or a section heading. Salomé, 2026-07-22: no hairlines
   anywhere — whitespace does the separating. --line is kept only so nothing
   breaks while the templates are stripped; do not reintroduce it. */

:root{
  --paper:#ffffff; --ink:#141414; --soft:#f3f2ef;
  --sub:#5f5d57; --mute:#9a958c; --line:transparent;
  --on-red:#fdf7f4; --on-red-mute:rgba(253,247,244,.66);
  /* Salomé's palette, 10 Aug — board 2 of the two she sent, the one with the pink.
     Five colours, sampled off her swatches, and no others. This supersedes the
     3 Aug Pantone set: her own red is now in (it replaces #93261e), Java Brown is
     out, and pink + cream are new. ONE PER LINE — a regex that trimmed to
     end-of-line once took the whole row out with it and shipped invisible text. */
  --red:#9d1208;
  --c-pink:#ff9ecd;
  --c-cream:#f2e5d6;
  --c-blue:#c8d1d9;
  --c-soil:#4f2c25;
  --fine:'Yellowtail','Snell Roundhand',cursive;
  --loud:'Unbounded',Impact,sans-serif;
  --body:'Inter',-apple-system,sans-serif;
  --r:8px;
  --pad:clamp(20px,4.4vw,84px);
  --maxw:1460px;
  --gx:max(var(--pad), calc((100% - var(--maxw)) / 2));
  --ease:cubic-bezier(.22,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--paper);color:var(--ink);font-family:var(--body);line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;}
img{display:block;width:100%;height:100%;object-fit:cover;}
a{color:inherit;text-decoration:none;}

/* ---------- type roles ---------- */
.fine{font-family:var(--fine);font-weight:400;letter-spacing:-.01em;line-height:1.16;}

.loud{font-family:var(--loud);font-weight:700;text-transform:uppercase;line-height:1.14;letter-spacing:-.01em;}
.meta{font-family:var(--loud);font-size:10px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mute);}
.note{font-size:12px;line-height:1.5;color:var(--sub);}
.rule{height:1px;background:var(--line);}
.kick{display:block;margin-bottom:7px;}

/* ---------- nav ---------- */
nav{position:sticky;top:0;z-index:60;background:var(--red);}
.nav-in{display:flex;align-items:center;gap:clamp(18px,2.6vw,40px);padding:14px var(--gx);flex-wrap:wrap;}
.nav-in a.n{font-family:var(--loud);font-size:11.5px;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--on-red);transition:opacity .2s;}
.nav-in a.n:hover{opacity:.66;}

/* ---------- the inner-page header ----------
   Salomé, 10 Aug: away from the front page she does not want the red band. Just
   the nav words on white, sitting directly above the piece's own heading, with
   the nameplate on the right — which is the corner it occupies on the front page.
   This replaces `.masthead.small` inside `.top`; the red now belongs to the
   front page alone, which is what makes arriving there feel like an arrival.
   The `nav` element inside it has to reset the sticky red bar rule above. */
.pagetop{display:flex;align-items:baseline;justify-content:space-between;
  gap:clamp(14px,3vw,44px);flex-wrap:wrap;background:var(--paper);
  padding:clamp(20px,2.8vw,38px) var(--gx) clamp(16px,2.2vw,28px);}
.pt-nav{display:flex;flex-wrap:wrap;gap:6px clamp(16px,2.4vw,34px);
  position:static;background:transparent;z-index:auto;}
.pt-nav a{font-family:var(--loud);font-size:11.5px;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink);transition:opacity .2s;}
.pt-nav a:hover{opacity:.5;}
.pt-name{font-size:clamp(20px,2.2vw,32px);color:var(--ink);}
@media(max-width:680px){
  .pagetop{flex-direction:column-reverse;align-items:flex-start;gap:12px;}
}

/* The `.masthead`, `.masthead.small` and red `.top` band rules that used to live
   here are gone: Salomé, 10 Aug — the red belongs to the front page alone, and the
   reading pages open on `.pagetop` above. The front page keeps its own copy inline. */

/* ---------- board pieces (shared with index) ---------- */
.piece{display:block;padding:clamp(12px,1.4vw,20px) 0;}
.piece:first-child{padding-top:clamp(10px,1.2vw,16px);}
.piece + .piece{border-top:1px solid var(--line);}
.shot{border-radius:var(--r);overflow:hidden;background:var(--soft);margin-bottom:10px;}
/* the art never moves inside its frame — hover reads on the type, not the picture */
.shot img{transition:filter .35s var(--ease);}
.piece:hover .shot img,.work:hover .shot img{filter:brightness(.94);}
.piece h3{font-size:clamp(15px,1.28vw,20px);transition:color .2s;}
.piece:hover h3,.work:hover h3{color:var(--red);}
.piece .note{margin-top:6px;}
.piece.text h3{font-size:clamp(16px,1.5vw,23px);}
.piece.text .note{margin-top:8px;}

/* ---------- grounds ----------
   Salomé, 3 Aug: a piece carrying a picture needs no ground; a purely written
   piece does. Structural via :has() so new content can't get it wrong. Colour
   per piece with a .g-* class; grey is the fallback. */
.piece:not(:has(.shot)){background:var(--soft);border-radius:var(--r);
  padding:clamp(15px,1.7vw,24px);}
.piece.g-pink{background:var(--c-pink);}
.piece.g-cream{background:var(--c-cream);}
.piece.g-blue{background:var(--c-blue);}
.piece.g-soil{background:var(--c-soil);}
.piece.g-red{background:var(--red);}
.piece.g-soil,.piece.g-red{color:var(--on-red);}
.g-soil .meta,.g-red .meta,
.g-soil .note,.g-red .note{color:var(--on-red-mute);}
/* on a dark ground the hover cannot be the red — it is invisible on both of them.
   It goes to the pink, which is the one colour in the board that survives there. */
.g-soil:hover h3,.g-red:hover h3{color:var(--c-pink);}
/* the grey kicker/body colours are tuned for white — on the light grounds they
   wash out, so type there is ink at reduced weight instead */
.piece.g-pink .meta,.piece.g-cream .meta,.piece.g-blue .meta{color:rgba(20,20,20,.56);}
.piece.g-pink .note,.piece.g-cream .note,.piece.g-blue .note{color:rgba(20,20,20,.74);}

/* ---------- footer ----------
   Salomé, 3 Aug: the old one was too big and she didn't like the style.
   Minimal — links, a field, a line. Email capture stays; the list is the point. */
footer{background:var(--paper);display:grid;grid-template-columns:1fr;gap:clamp(14px,1.8vw,24px);
  padding:clamp(22px,2.6vw,36px) var(--gx) clamp(18px,2vw,26px);}
.fm-row{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:14px clamp(20px,3vw,44px);}
/* position/background reset: the global `nav` rule is the sticky red bar */
.fs-links{display:flex;flex-wrap:wrap;gap:6px clamp(16px,2vw,30px);
  position:static;background:transparent;z-index:auto;}
.fs-links a{font-family:var(--loud);font-size:11.5px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--sub);transition:color .2s;}
.fs-links a:hover{color:var(--red);}
.signup{display:flex;max-width:340px;background:var(--soft);border-radius:var(--r);overflow:hidden;}
.signup input{flex:1;min-width:0;border:0;padding:11px 16px;font-family:inherit;font-size:13px;
  background:transparent;color:var(--ink);}
.signup input:focus{outline:none;}
.signup button{border:0;background:var(--c-pink);color:var(--ink);padding:11px 20px;font-family:var(--loud);
  font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;cursor:pointer;}

@media(max-width:680px){
  .nav-in{overflow-x:auto;flex-wrap:nowrap;gap:20px;}
  .nav-in a.n{white-space:nowrap;}
}
@media(max-width:420px){
  .nav-in{flex-wrap:wrap;overflow:visible;row-gap:6px;}
}