/* ===========================================================================
   Diana's Lit Picks — editorial reading journal
   ---------------------------------------------------------------------------
   EVERYTHING visual is a custom property declared in the token layer below.
   Components only ever reference var(--…), never a literal colour or size, so
   the Design Studio (Settings → Design studio) can rewrite any of them live.

   Token groups:
     1. Colour        --c-*
     2. Typography    --f-* (family) --fs-* (size) --fw-* (weight)
                      --ls-* (letterspacing) --lh-* (line height)
     3. Layout        --w-* --sp-* --h-* --r-*
     4. Bookmarks     --bm-*
   See CUSTOMIZATION.md for the full map.
   ======================================================================== */

:root {
  /* --- 1. COLOUR -------------------------------------------------------- */
  /* Palette: "A Reading Room in Color".
     Porcelain #F8F0E4 · Wallpaper Sage #8FA58B · Olive Velvet #536E50
     Faded Rose #C9787E · Powder Blue #7D9FCF · Burnt Apricot #D4763C
     Honey Ochre #E0B35A · Mahogany #4B2828
     The eight swatches carry the character; the greys between them are mixed
     from Porcelain and Mahogany so the whole page stays in one family. */

  /* surfaces — Porcelain and two neighbours */
  --c-bg:            #f5f5f1;   /* cool ivory paper */
  --c-bg-sunk:       #e9eae4;   /* a shade deeper, for recesses */
  --c-bg-raised:     #fcfcf9;   /* a shade lighter, for panels */
  --c-bg-field:      #fcfcf9;

  /* ink — Mahogany, lightened twice */
  --c-ink:           #4b2828;   /* Mahogany */
  --c-ink-soft:      #6e4a44;
  --c-ink-faint:     #85625a;   /* kept just past 4.5:1 on Porcelain */

  /* lines — Porcelain pulled toward Mahogany */
  --c-rule:          #e3d6c3;
  --c-rule-strong:   #c9b79e;

  /* the editorial banner — Olive Velvet, the one green that holds small text */
  --c-banner-bg:     #536e50;   /* Olive Velvet */
  --c-banner-ink:    #f8f0e4;   /* Porcelain */
  --c-banner-ink-dim:#e6ece1;   /* the eyebrow is small — it needs the lift */
  /* Honey Ochre brightened, for the banner title and its swash. Display sizes
     only — at label size it would fall under the contrast floor. */
  --c-banner-accent: #f0cc7f;
  --banner-swash-display: inline-block;
  --banner-swash-scale:   1.9;   /* multiple of the title size */

  /* accent — Burnt Apricot, deepened so links and buttons stay legible.
     The literal #d4763c lives on the bookmarks, where it carries no text. */
  --c-accent:        #a8482a;
  --c-accent-ink:    #fdf6ee;
  --c-accent-soft:   #f3e0d4;
  --c-accent-deep:   #8a3820;

  /* the rest of the palette, for ornament */
  --c-rose:          #c9787e;   /* Faded Rose */
  --c-blue:          #7d9fcf;   /* Powder Blue */
  --c-terracotta:    #d4763c;   /* Burnt Apricot */
  --c-gold:          #e0b35a;   /* Honey Ochre */
  --c-sage:          #536e50;   /* Olive Velvet — also "complete" */

  /* Text-safe versions of the lighter swatches. The literal hues stay for
     fills and dots, where nothing has to be read against them. */
  /* Gilding for the museum frame — a vintage brass, warmer and greyer than
     raw gold so it reads as aged leaf rather than metallic paint. */
  --c-gilt-light:    #f0dcae;
  --c-gilt-mid:      #c6a45c;
  --c-gilt-deep:     #94703a;
  --c-gilt-shadow:   #5d431f;
  --gilt-width:      clamp(11px, 4.5%, 30px);

  /* Antique bronze — darker, wider and more sculpted than the gilt. Five
     tones, because a stepped moulding needs a lit edge, two mid bands, a
     recess and a near-black rebate to read as carved rather than printed. */
  --c-bronze-light:  #cda96c;
  --c-bronze-mid:    #8d6c3b;
  --c-bronze-deep:   #5b4526;
  --c-bronze-dark:   #35271a;
  --c-bronze-patina: #4d5942;
  --bronze-width:    clamp(9px, 7%, 46px);
  /* The carved frame needs real width for its scrollwork to read. Container
     units, because border-width rejects percentages — a percentage here makes
     the whole declaration invalid and the frame silently vanishes. */
  --ornate-width:    clamp(16px, 13cqw, 64px);

  --c-rose-ink:      #a14a52;
  --c-blue-ink:      #44648f;
  --c-gold-ink:      #8a6420;

  /* Tinted papers for section grounds. Light washes keep Mahogany readable;
     olive and ink are full strength and carry Porcelain text instead. */
  --tone-sage:    #e7ece3;
  --tone-rose:    #f5e4e2;
  --tone-blue:    #e3eaf4;
  --tone-apricot: #f7e6d8;
  --tone-gold:    #f8edd5;
  --tone-olive:   #536e50;
  --tone-ink:     #4b2828;
  --tone-deep-ink:#f8f0e4;   /* text on the two full-strength grounds */

  --c-danger:        #8e2f2f;
  --c-danger-soft:   #f3dfdc;
  --c-success:       #536e50;

  /* bookmark palette — the six character colours, each with a legible ink */
  --c-bm1-bg: #8fa58b;  --c-bm1-ink: #f8f0e4;   /* Wallpaper Sage */
  --c-bm2-bg: #4b2828;  --c-bm2-ink: #e0b35a;   /* Mahogany + Honey Ochre */
  --c-bm3-bg: #d4763c;  --c-bm3-ink: #f8f0e4;   /* Burnt Apricot */
  --c-bm4-bg: #7d9fcf;  --c-bm4-ink: #f8f0e4;   /* Powder Blue */
  --c-bm5-bg: #c9787e;  --c-bm5-ink: #f8f0e4;   /* Faded Rose */
  --c-bm6-bg: #e0b35a;  --c-bm6-ink: #4b2828;   /* Honey Ochre + Mahogany */
  --c-bm-empty-bg:   #fcf7ee;
  --c-bm-empty-rule: #c9b79e;
  --c-bm-cord:       #a8482a;

  --shadow-soft: 0 1px 2px rgba(75, 40, 40, .05);
  --shadow-sheet: 0 -8px 40px rgba(50, 26, 26, .20);
  --paper-texture-opacity: .8;

  /* --- 2. TYPOGRAPHY ---------------------------------------------------- */
  /* A high-contrast Didone for display, a geometric sans for the letterspaced
     small caps, a formal script for the wordmark and the swash initial, and a
     warm serif for anything you actually have to read at length. */
  /* The Romantic Folio: a more characterful, old-world typography default.
     Every role is still independently editable in Design Studio. */
  --f-script:  'Imperial Script', 'Pinyon Script', 'Snell Roundhand', 'Apple Chancery', cursive;
  --f-display: 'Cormorant Garamond', 'Bodoni Moda', 'Didot', Georgia, serif;
  --f-body:    'Spectral', 'EB Garamond', 'Iowan Old Style', Palatino, Georgia, serif;
  --f-ui:      'Josefin Sans', 'Jost', 'Futura', -apple-system, Arial, sans-serif;

  /* The script is a fine copperplate: it needs size to show its strokes. */
  --fs-wordmark:       clamp(2.15rem, 4.6vw, 3.05rem);
  --fs-nav:            0.70rem;
  --fs-banner-eyebrow: 0.70rem;
  --fs-banner-title:   clamp(2rem, 6.6vw, 4.6rem);
  --fs-banner-sub:     clamp(1.05rem, 1.9vw, 1.28rem);
  --fs-display:        clamp(1.5rem, 3.6vw, 2.3rem);  /* section headline */
  --fs-h2:             1.58rem;
  --fs-h3:             1.2rem;
  /* Cormorant is cut to be set large; these are its sizes, not Garamond's. */
  --fs-body:           1.18rem;
  --fs-small:          1.02rem;
  --fs-tiny:           0.86rem;
  --fs-label:          0.70rem;   /* letterspaced small caps */
  --fs-stat:           clamp(1.7rem, 3.4vw, 2.05rem); /* big numerals */

  --tt-display:  none;  /* mixed-case literary headlines by default */
  /* Playfair carries weight well; Cormorant needs 500 to hold a page. */
  --fw-display:  400;
  --fw-heading:  500;
  --fw-body:     400;
  --fw-label:    600;
  --fw-script:   400;

  /* Per-role style, so weight and italic are independent of one another and
     of the family. A section can override any of these on itself; the rules
     below read them rather than hard-coding a value. */
  --fi-display:  normal;   /* font-style for headings */
  --fi-body:     normal;
  --fi-ui:       normal;
  --fi-script:   normal;
  --fz-display:  1;        /* size multipliers, applied over the scale above */
  --fz-body:     1;
  --fz-ui:       1;
  --fz-script:   1;
  --ls-script:   0;
  --tt-body:     none;

  --ls-wordmark: 0;
  --ls-nav:      0.18em;
  --ls-label:    0.16em;
  --ls-eyebrow:  0.34em;
  --ls-display:  0.01em;
  --ls-body:     0.002em;

  --lh-display:  1.06;
  --lh-heading:  1.2;
  --lh-body:     1.5;     /* a larger body size wants a tighter leading ratio */
  --lh-tight:    1.3;

  --tt-label: uppercase;   /* flip to `none` for sentence-case labels */

  /* --- 3. LAYOUT -------------------------------------------------------- */
  --w-content:   1180px;   /* max width of the reading column */
  --w-prose:     720px;    /* max width for long-form blocks + forms */
  --sp-page-x:   clamp(1.15rem, 4vw, 3rem);
  --sp-section:  clamp(2.2rem, 5vw, 3.6rem);   /* between major sections */
  --sp-block:    1.35rem;                      /* between related blocks */
  --sp-tight:    0.6rem;

  --h-masthead:  clamp(58px, 7vw, 76px);
  --h-banner:    clamp(148px, 27vw, 300px);
  --h-tabbar:    60px;
  --tap:         44px;

  --r-sm:   2px;    /* editorial design keeps corners nearly square */
  --r-md:   3px;
  --r-pill: 999px;

  --bar-h:      5px;
  --bar-radius: 999px;

  --rule-w: 1px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur:  .22s;

  /* --- 4. BOOKMARKS ----------------------------------------------------- */
  --bm-w:          104px;  /* width of one bookmark — also sets column count */
  --bm-scale:      1;      /* internal: responsive multiplier, not user-facing */
  --bm-ratio:      3;      /* height = width x ratio (1:3, near the reference) */
  --bm-gap-x:      clamp(.7rem, 2vw, 1.6rem);
  --bm-gap-y:      2.1rem;
  --bm-radius:     2px;
  --bm-border-w:   1px;
  --bm-row-max:    100%;   /* cap the grid's width */
  --bm-min:        44px;   /* a bookmark never shrinks below this; the row scrolls */
  --bm-cord-show:  block;  /* `none` hides the hanging cord */
  --bm-cord-h:     18px;
  --bm-label-gap:  .62rem;
  --bm-check-size: 19px;
  --bm-empty-dash: 0;      /* set to e.g. 4 for a dashed outline */

  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

/* Dark mode is a cool midnight folio: blue-black, lavender, silver and rose.
   It deliberately avoids the light palette's brown and terracotta. */
:root[data-theme="dark"] {
  --c-bg:            #141d2c;
  --c-bg-sunk:       #101726;
  --c-bg-raised:     #1c293b;
  --c-bg-field:      #213149;
  --c-ink:           #f3f5fa;
  --c-ink-soft:      #ccd5e4;
  --c-ink-faint:     #aebed3;
  --c-rule:          #334359;
  --c-rule-strong:   #50637e;
  --c-banner-bg:     #283e60;
  --c-banner-ink:    #f5f6ff;
  --c-banner-ink-dim:#dae2f7;
  --c-banner-accent: #f5cbe2;
  --c-accent:        #eeb9da;
  --c-accent-ink:    #172032;
  --c-accent-soft:   #3b334d;
  --c-accent-deep:   #f7d7ec;
  --c-sage:          #74b2b0;
  --c-success:       #8bc6b3;
  --c-rose:          #e2a8ca;
  --c-blue:          #91baf0;
  --c-terracotta:    #b79ad6;
  --c-gold:          #ded3b7;
  --c-rose-ink:      #f1c0db;
  --c-blue-ink:      #b5d1ff;
  --c-gold-ink:      #e6dac0;
  --c-gilt-light:    #e1e9f4;
  --c-gilt-mid:      #a8b6ca;
  --c-gilt-deep:     #7186a4;
  --c-gilt-shadow:   #25344e;
  --c-bronze-light:  #c7d1e3;
  --c-bronze-mid:    #92a5be;
  --c-bronze-deep:   #536981;
  --c-bronze-dark:   #1b283d;
  --c-bronze-patina: #538888;
  --tone-sage:       #223c43;
  --tone-rose:       #3f2b48;
  --tone-blue:       #253753;
  --tone-apricot:    #39304d;
  --tone-gold:       #393a51;
  --tone-olive:      #2a4c55;
  --tone-ink:        #1a2239;
  --tone-deep-ink:   #f3f5fa;
  --c-danger:        #f3a0b5;
  --c-danger-soft:   #482a40;
  --c-bm1-bg: #538e98; --c-bm1-ink: #f3f5fa;
  --c-bm2-bg: #454677; --c-bm2-ink: #f3e6ff;
  --c-bm3-bg: #9a6ba5; --c-bm3-ink: #f3f5fa;
  --c-bm4-bg: #6489bc; --c-bm4-ink: #f3f5fa;
  --c-bm5-bg: #a56a92; --c-bm5-ink: #f3f5fa;
  --c-bm6-bg: #a0a8c8; --c-bm6-ink: #101726;
  --c-bm-empty-bg:   #1b2840;
  --c-bm-empty-rule: #50637e;
  --c-bm-cord:       #cfb4f3;
  --paper-texture-opacity: .08;
  --shadow-sheet: 0 -8px 40px rgba(3, 9, 22, .7);
}

/* =========================================================== base ======= */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

/* Real cotton-paper fibers, without procedural noise or distressed speckles. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--paper-texture-opacity);
  filter: contrast(1.8) brightness(.985);
  background: url('../assets/paper/antique-cotton-ivory.webp') repeat 0 0 / 768px 768px;
}
html[data-theme="dark"] body::before { opacity: 0; }
body > * { position: relative; z-index: 1; }

h1, h2, h3, h4 { margin: 0; font-weight: var(--fw-heading); line-height: var(--lh-heading); }
p { margin: 0 0 .7em; }
a { color: var(--c-accent); text-underline-offset: .18em; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .86em; }
hr { border: 0; border-top: var(--rule-w) solid var(--c-rule); margin: var(--sp-block) 0; }

::selection { background: var(--c-accent-soft); color: var(--c-ink); }

:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--c-bg-raised); padding: .6rem 1rem; }
.skip-link:focus { left: .5rem; top: .5rem; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ======================================================== masthead ====== */

.masthead {
  position: sticky; top: 0; z-index: 30;
  padding-top: var(--safe-t);
  background: var(--c-bg);
  border-bottom: var(--rule-w) solid var(--c-rule);
}
.masthead-inner {
  display: flex; align-items: center; gap: 1rem;
  min-height: var(--h-masthead);
  max-width: var(--w-content);
  margin: 0 auto;
  padding: 0 calc(var(--sp-page-x) + var(--safe-r)) 0 calc(var(--sp-page-x) + var(--safe-l));
}

.wordmark {
  font-family: var(--f-script);
  font-size: var(--fs-wordmark);
  font-weight: 400;
  letter-spacing: var(--ls-wordmark);
  line-height: 1;
  color: var(--c-ink);
  text-decoration: none;
  padding-block: .22em;          /* script fonts have deep descenders */
  white-space: nowrap;
  flex: none;
}

.masthead-nav { display: flex; align-items: center; gap: clamp(1.1rem, 2.6vw, 2.5rem); margin-left: auto; }
.masthead-link {
  font-family: var(--f-ui);
  font-size: var(--fs-nav);
  font-weight: var(--fw-label);
  letter-spacing: var(--ls-nav);
  text-transform: var(--tt-label);
  color: var(--c-ink-soft);
  text-decoration: none;
  white-space: nowrap;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.masthead-link:hover { color: var(--c-ink); }
.masthead-link[aria-current="page"] { color: var(--c-accent); border-bottom-color: var(--c-accent); }
.masthead-link-quiet { color: var(--c-ink-faint); }

.masthead-actions { display: flex; align-items: center; gap: .4rem; margin-left: .3rem; }
.masthead-back { margin-left: -.5rem; flex: none; }

.icon-btn {
  appearance: none; background: none; border: 0; cursor: pointer;
  color: var(--c-ink-soft);
  width: 34px; height: 34px; border-radius: var(--r-pill);
  display: grid; place-items: center;
}
.icon-btn:hover { color: var(--c-ink); background: var(--c-bg-sunk); }

/* ================================================ editorial banner ====== */

.editorial-banner {
  max-width: var(--w-content);
  margin: clamp(.9rem, 2vw, 1.6rem) auto 0;
  padding-bottom: clamp(1.1rem, 2.4vw, 1.9rem);
  border-bottom: var(--rule-w) solid var(--c-rule-strong);
  padding: 0 calc(var(--sp-page-x) + var(--safe-r)) 0 calc(var(--sp-page-x) + var(--safe-l));
}
.editorial-banner-inner {
  position: relative;
  overflow: hidden;
  min-height: var(--h-banner);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  gap: .5rem;
  padding: clamp(1.6rem, 4vw, 2.6rem) clamp(1rem, 4vw, 3rem);
  background: var(--c-banner-bg);
  color: var(--c-banner-ink);
  border-radius: var(--r-sm);
}
/* Woven paper grain, so the sage block reads as printed stock. */
.editorial-banner-inner::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  opacity: calc(var(--paper-texture-opacity) * .34);
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.42' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23b)'/%3E%3C/svg%3E");
}
.editorial-banner-inner > * { position: relative; z-index: 1; }

.banner-eyebrow {
  margin: 0;
  font-family: var(--f-ui);
  font-size: var(--fs-banner-eyebrow);
  font-weight: var(--fw-label);
  letter-spacing: var(--ls-eyebrow);
  text-transform: var(--tt-label);
  color: var(--c-banner-ink-dim);
}
.banner-title {
  position: relative;
  margin: .1em 0 .12em;
  font-family: var(--f-display);
  font-size: calc(var(--fs-banner-title) * var(--fz-display, 1));
  font-weight: var(--fw-display);
  font-style: var(--fi-display, normal);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: var(--tt-display);
  color: var(--c-title-ink, var(--c-banner-accent));
  text-wrap: balance;
}

/* The flourished initial. It sits inline and *is* the first letter — the
   title is never duplicated, so it copies and reads as plain text. Setting
   --banner-swash-display to `none` falls back to a plain capital. */
.banner-swash {
  font-family: var(--f-script);
  font-size: calc(1em * var(--banner-swash-scale));
  font-weight: 400;
  font-style: normal;
  line-height: .6;            /* keep the tall script off the eyebrow above */
  letter-spacing: 0;
  text-transform: none;
  margin-right: -.06em;
  vertical-align: -.1em;
}
.banner-swash, .banner-title-rest { display: inline; }
.banner-sub {
  margin: 0;
  font-family: var(--f-body);
  font-style: italic;
  font-size: var(--fs-banner-sub);
  color: var(--c-body-ink, var(--c-banner-ink-dim));
}

/* ========================================================== layout ====== */

.screen {
  max-width: var(--w-content);
  margin: 0 auto;
  padding:
    clamp(1.6rem, 3.4vw, 2.6rem)
    calc(var(--sp-page-x) + var(--safe-r))
    calc(var(--h-tabbar) + var(--safe-b) + 5rem)
    calc(var(--sp-page-x) + var(--safe-l));
}
/* The journal canvas itself needs paper grain; its full-size opaque surface
   otherwise hides the lower-level body texture. Keep decorative artwork intact. */
html:not([data-theme="dark"]) .screen {
  background-image: url('../assets/paper/antique-cotton-ivory.webp');
  background-size: 768px 768px;
}

/* Editorial pages run edge to edge; every section sets its own measure, so
   a hero can be full-bleed while the text beside it stays in column. */
.screen.is-editorial {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
}
.loading { color: var(--c-ink-faint); padding: 3rem 0; text-align: center; font-style: italic; }

.prose { max-width: var(--w-prose); }
.stack      { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-block); }
.row        { display: flex; align-items: center; gap: .65rem; }
.row-between{ display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.wrap       { flex-wrap: wrap; }
.grow       { flex: 1; min-width: 0; }
.center     { text-align: center; }
.nowrap     { white-space: nowrap; }
.truncate   { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.muted      { color: var(--c-ink-faint); }
.small      { font-size: var(--fs-small); }
.tiny       { font-size: var(--fs-tiny); }
.italic     { font-style: italic; }

/* The letterspaced small-caps label used throughout the design. */
.label {
  font-family: var(--f-ui);
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  letter-spacing: var(--ls-label);
  text-transform: var(--tt-label);
  color: var(--c-ink-faint);
}

/* A section opener: rule, label, headline. */
.section { margin-top: var(--sp-section); }
.section:first-child { margin-top: 0; }
.section-rule { border-top: var(--rule-w) solid var(--c-rule); padding-top: 1.15rem; }

.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.section-title {
  font-family: var(--f-display);
  font-size: var(--fs-display);
  font-weight: var(--fw-display);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
  text-transform: var(--tt-display);
  margin: 0;
}
.section-sub { font-style: italic; color: var(--c-ink-soft); margin: .2rem 0 0; font-size: var(--fs-body); }
.section-meta {
  font-family: var(--f-ui);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: var(--tt-label);
  color: var(--c-ink-soft);
  padding-left: 1.4rem;
  border-left: var(--rule-w) solid var(--c-rule-strong);
  align-self: center;
}

.h2 { font-family: var(--f-display); font-size: var(--fs-h2); font-weight: var(--fw-heading); }
.form-heading {
  font-family: var(--f-ui);
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  letter-spacing: var(--ls-label);
  text-transform: var(--tt-label);
  color: var(--c-ink-faint);
  margin: var(--sp-section) 0 .7rem;
}
.form-heading:first-child { margin-top: 0; }
.form-wrap { max-width: var(--w-prose); }
.h3 { font-family: var(--f-display); font-size: var(--fs-h3); font-weight: var(--fw-heading); }

/* Panels replace the old heavy cards: a hairline, no shadow, square corners. */
.panel {
  background: var(--c-bg-raised);
  border: var(--rule-w) solid var(--c-rule);
  border-radius: var(--r-sm);
  padding: clamp(1rem, 2.4vw, 1.5rem);
  box-shadow: var(--shadow-soft);
}
.panel-quiet { background: none; border: 0; padding: 0; box-shadow: none; }
.panel-link { display: block; color: inherit; text-decoration: none; transition: border-color var(--dur) var(--ease); }
.panel-link:hover { border-color: var(--c-rule-strong); }

/* ======================================================== progress ====== */

.goal { padding: 1.25rem 0; border-top: var(--rule-w) solid var(--c-rule); }
.goal:first-of-type { border-top: 0; }

.goal-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.goal-stat {
  font-family: var(--f-display);
  font-size: var(--fs-stat);
  font-weight: var(--fw-display);
  line-height: 1.1;
  letter-spacing: var(--ls-display);
}
.goal-stat b { font-weight: var(--fw-heading); }
.goal-stat .of { color: var(--c-ink-faint); font-weight: 400; }
.goal-pct {
  font-family: var(--f-ui);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-small);
  letter-spacing: .06em;
  color: var(--c-ink-soft);
}
.goal-pct.over { color: var(--c-accent); }
.goal-foot {
  display: flex; justify-content: space-between; gap: 1rem;
  margin-top: .55rem;
  font-size: var(--fs-tiny);
  font-style: italic;
  color: var(--c-ink-faint);
}

.bar {
  position: relative;
  height: var(--bar-h);
  margin-top: .7rem;
  background: var(--c-rule);
  border-radius: var(--bar-radius);
  overflow: hidden;
}
.bar-fill {
  position: absolute; inset: 0 auto 0 0;
  background: var(--c-accent);
  border-radius: var(--bar-radius);
  transition: width .5s var(--ease);
}
.bar.done .bar-fill { background: var(--c-sage); }

/* Tone modifiers, so each measure gets its own colour from the palette.
   These are decorative fills, so the full-strength hues are safe here. */
.bar-apricot   .bar-fill { background: var(--c-terracotta); }
.bar-blue      .bar-fill { background: var(--c-blue); }
.bar-gold      .bar-fill { background: var(--c-gold); }
.bar-rose      .bar-fill { background: var(--c-rose); }
.bar-sage      .bar-fill { background: var(--c-bm1-bg); }
.bar-olive     .bar-fill { background: var(--c-sage); }

/* the reference's inline progress line: label — bar — percentage */
.progress-line { display: flex; align-items: center; gap: clamp(.9rem, 3vw, 2rem); margin-top: 1.1rem; }
.progress-line .bar { flex: 1; margin-top: 0; }
.progress-line .progress-label,
.progress-line .progress-pct {
  font-family: var(--f-ui);
  font-size: var(--fs-small);
  color: var(--c-ink-soft);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.progress-line .progress-pct { font-size: var(--fs-h3); color: var(--c-ink); }

/* ======================================================= bookmarks ====== */

.bm-grid {
  display: grid;
  /* One row, always. Columns take their natural width when there is room and
     shrink down to --bm-min when there is not; past that the row scrolls
     rather than wrapping, so a set of bookmarks always reads as one set. */
  grid-auto-flow: column;
  grid-auto-columns: minmax(var(--bm-min), calc(var(--bm-w) * var(--bm-scale)));
  /* `safe` keeps the first bookmark reachable when the row does overflow —
     plain centring pushes the start out of the scrollable area. */
  justify-content: safe center;
  gap: var(--bm-gap-y) var(--bm-gap-x);
  max-width: var(--bm-row-max);
  margin: 1.8rem auto 0;
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: .3rem;
  overscroll-behavior-x: contain;
}
/* left-aligned variant for dense secondary listings */
.bm-grid-start { justify-content: start; margin-left: 0; margin-right: 0; }

.bm {
  display: flex; flex-direction: column; align-items: center;
  width: 100%;
  background: none; border: 0; padding: 0;
  font: inherit; color: inherit; text-align: center;
  cursor: pointer; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
/* A bookmark is a cord + a body. The body stretches to --bm-ratio; the cord
   and any glyph sit outside it so they never distort. */
.bm-art {
  position: relative;
  display: block;
  width: 100%;
  padding-top: var(--bm-cord-h);
  transition: transform var(--dur) var(--ease);
}
.bm:hover .bm-art { transform: translateY(-3px); }

.bm-cord {
  display: var(--bm-cord-show);
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 34%;
  height: calc(var(--bm-cord-h) + 9px);
  stroke: var(--c-bm-cord);
  pointer-events: none;
}

.bm-body-wrap {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / var(--bm-ratio);
}
.bm-body {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  border-radius: var(--bm-radius);
  overflow: hidden;
}
.bm-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: var(--bm-radius);
}

/* The star glyph keeps its own proportions whatever --bm-ratio is. */
.bm-glyph {
  position: absolute;
  left: 50%; bottom: 11%;
  transform: translateX(-50%);
  width: 36%; height: auto; aspect-ratio: 1;
  pointer-events: none;
}

/* Colourways. Each collected bookmark gets one, derived from its id. */
.bm-v1 .bm-ground { fill: var(--c-bm1-bg); }
.bm-v1 .bm-ink, .bm-v1 .bm-glyph { fill: var(--c-bm1-ink); }
.bm-v1 .bm-ink-stroke { stroke: var(--c-bm1-ink); }
.bm-v2 .bm-ground { fill: var(--c-bm2-bg); }
.bm-v2 .bm-ink, .bm-v2 .bm-glyph { fill: var(--c-bm2-ink); }
.bm-v2 .bm-ink-stroke { stroke: var(--c-bm2-ink); }
.bm-v3 .bm-ground { fill: var(--c-bm3-bg); }
.bm-v3 .bm-ink, .bm-v3 .bm-glyph { fill: var(--c-bm3-ink); }
.bm-v3 .bm-ink-stroke { stroke: var(--c-bm3-ink); }
.bm-v4 .bm-ground { fill: var(--c-bm4-bg); }
.bm-v4 .bm-ink, .bm-v4 .bm-glyph { fill: var(--c-bm4-ink); }
.bm-v4 .bm-ink-stroke { stroke: var(--c-bm4-ink); }
.bm-v5 .bm-ground { fill: var(--c-bm5-bg); }
.bm-v5 .bm-ink, .bm-v5 .bm-glyph { fill: var(--c-bm5-ink); }
.bm-v5 .bm-ink-stroke { stroke: var(--c-bm5-ink); }
.bm-v6 .bm-ground { fill: var(--c-bm6-bg); }
.bm-v6 .bm-ink, .bm-v6 .bm-glyph { fill: var(--c-bm6-ink); }
.bm-v6 .bm-ink-stroke { stroke: var(--c-bm6-ink); }

/* Uncollected: ground, outline, faint star. */
.bm-empty .bm-ground { fill: var(--c-bm-empty-bg); }
.bm-empty .bm-frame {
  stroke: var(--c-bm-empty-rule);
  stroke-dasharray: var(--bm-empty-dash);
}
.bm-empty .bm-glyph { fill: var(--c-bm-empty-rule); }
.bm-empty .bm-cord { stroke: var(--c-bm-empty-rule); }
.bm-empty .bm-body { border: var(--bm-border-w) solid transparent; }

.bm-check {
  width: var(--bm-check-size); height: var(--bm-check-size);
  margin-top: .7rem;
  border-radius: var(--r-pill);
  background: var(--c-accent);
  color: var(--c-accent-ink);
  display: grid; place-items: center;
  flex: none;
}
.bm-check svg { width: 62%; height: 62%; }

.bm-label {
  margin-top: var(--bm-label-gap);
  font-family: var(--f-body);
  font-size: var(--fs-small);
  line-height: var(--lh-tight);
  color: var(--c-ink);
  text-wrap: balance;
}
.bm.locked .bm-label { color: var(--c-ink-faint); }
.bm-sub {
  margin-top: .18rem;
  font-family: var(--f-ui);
  font-size: var(--fs-tiny);
  font-style: italic;
  color: var(--c-ink-faint);
}

/* The archive is a keepsake collection, with one quiet artwork editor. */
.bookmark-curator-intro { max-width: 940px; margin: 2.2rem auto 0; padding: 0 2rem; display: flex; align-items: baseline; gap: 1rem 2rem; flex-wrap: wrap; }
.bookmark-curator-intro .lit-overline { color: var(--c-accent); }
.bookmark-curator-intro p { font-family: var(--f-body); font-style: italic; margin: 0; flex: 1; min-width: 230px; color: var(--c-ink-soft); }
.bookmark-curator-intro button { border: 0; border-bottom: 1px solid currentColor; background: none; color: var(--c-accent); padding: .25rem 0; cursor: pointer; font: inherit; white-space: nowrap; }
.ed-archive .arc-group { padding: 2.7rem 0 3.4rem; border-bottom: 1px solid rgba(126,104,88,.2); }
.ed-archive .arc-group:last-child { border-bottom: 0; }
.ed-archive .arc-group .ed-subtitle { font-family: var(--f-display); font-size: clamp(1.5rem, 2.3vw, 2.25rem); font-weight: 400; }
.bookmark-detail { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 1.05rem; align-items: center; padding: .15rem 0 .7rem; }
.bookmark-detail-visual { width: 45px; height: 121px; padding: 0; background: #eee8db; border: 0; border-radius: 1px; box-shadow: none; display: flex; align-items: center; justify-content: center; }
.bookmark-detail-visual > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bookmark-detail-empty { display: grid; place-items: center; width: 100%; height: 100%; border: 1px solid #d4c7b1; color: #ad9a7d; font: 1.4rem var(--f-display); }
.bookmark-detail-visual .bm-art { width: 100%; padding-top: 9px; }
.bookmark-detail-visual .bm-cord { height: 15px; }
.bookmark-detail-visual.is-waiting > img { filter: saturate(.7); opacity: .77; }
.bookmark-detail-collection { font: normal .7rem/1.3 var(--f-ui); letter-spacing: .05em; text-transform: none; color: var(--c-ink-faint); margin: 0; }
.sheet .bookmark-detail-copy h2 { font: normal 1.45rem/1.15 var(--f-display); margin: .25rem 0 .4rem; }
.bookmark-detail-status { color: var(--c-accent); font: italic .79rem var(--f-body); letter-spacing: 0; text-transform: none; margin: 0; }
.bookmark-detail-requirement { max-width: 32ch; font: normal .8rem/1.4 var(--f-body); margin: .35rem 0 0; }
.bookmark-detail-ready { font-size: .7rem; color: var(--c-ink-faint); margin-top: .5rem; }
.bookmark-detail-actions { border-top: 1px solid #ddd2c3; padding-top: .45rem; }
.bookmark-detail-manage { display: flex; gap: .85rem; align-items: center; flex-wrap: wrap; }
.bookmark-detail-manage button, .bookmark-detail-manage a { border: 0; border-bottom: 1px solid currentColor; background: none; color: var(--c-accent); font: normal .73rem var(--f-ui); letter-spacing: .02em; padding: .2rem 0; text-decoration: none; cursor: pointer; }
.bookmark-detail-manage a { margin-left: auto; }
.bookmark-popout {
  position: fixed; z-index: 1400;
  padding: 1.3rem 1.1rem .9rem;
  color: var(--c-ink);
  background: #fcf9f2;
  border: 1px solid #d8cdbb;
  border-radius: 3px;
  box-shadow: 0 8px 30px rgba(48,32,26,.14);
  outline: none;
}
.bookmark-popout-close {
  position: absolute; top: .3rem; right: .65rem;
  border: 0; background: transparent; color: #957c70;
  font: 1.35rem/1 var(--f-body); cursor: pointer; padding: .1rem .35rem;
}
.bookmark-popout .bookmark-detail { padding: .1rem 0 .65rem; }
.bookmark-popout .bookmark-detail-copy h2 { font: normal 1.34rem/1.13 var(--f-display); margin: .2rem 0 .35rem; }
.bookmark-popout .bookmark-detail-collection { font-size: .62rem; padding-right: 1rem; }
.bookmark-popout .bookmark-detail-requirement { font-size: .78rem; line-height: 1.35; }
.bookmark-popout .bookmark-detail-actions { padding-top: .5rem; }
.bookmark-popout .bookmark-detail-manage { gap: .6rem; }
.bookmark-popout .bookmark-detail-manage button,
.bookmark-popout .bookmark-detail-manage a { font: normal .7rem/1.35 var(--f-ui); text-decoration: none; }
.bookmark-popout .bookmark-detail-manage a { margin-left: auto; }
.sheet:has(.bm-curator-compact) { width: min(calc(100% - 1.5rem), 375px); padding: 1rem 1.45rem 1.4rem; border: 1px solid #d9cbb6; background: #f9f6ef; box-shadow: 0 15px 65px rgba(48,32,26,.18); }
.sheet:has(.bookmark-detail) { width: min(calc(100% - 1.5rem), 350px); padding: .65rem 1.05rem .95rem; border: 0; background: #fbf8f1; box-shadow: 0 10px 34px rgba(53,35,24,.12); }
.sheet:has(.bookmark-detail) .sheet-back { margin-bottom: .4rem; font-size: .68rem; }
.bm-curator-compact .lit-overline { font-size: .65rem; letter-spacing: .13em; }
.sheet .bm-curator-compact > h2 { font: italic normal 2.05rem/1.13 var(--f-display); margin: .3rem 0 1.2rem; }
.bm-curator-one-choice { display: block; font: 600 .65rem var(--f-ui); text-transform: uppercase; letter-spacing: .1em; color: var(--c-ink-faint); }
.bm-curator-one-choice select { display: block; width: 100%; margin-top: .25rem; padding: .5rem 1.3rem .55rem .1rem; border: 0; border-bottom: 1px solid #ad9980; border-radius: 0; color: var(--c-ink); background: transparent; font: normal .95rem var(--f-body); }
.bm-curator-focus { display: flex; align-items: center; justify-content: flex-start; gap: 1.2rem; min-height: 150px; padding: 1.15rem 0; }
.bm-curator-preview { flex: none; width: 53px; height: 144px; background: #f4efdf; border: 1px solid #c3b296; display: grid; place-items: center; color: #b19c7a; font-size: 1.4rem; }
.bm-curator-preview img { height: 100%; width: 100%; object-fit: cover; }
.bm-curator-caption { display: flex; flex-direction: column; align-items: start; gap: .3rem; min-width: 0; }
.bm-curator-caption strong { font: normal 1.12rem/1.2 var(--f-display); }
.bm-curator-caption span { font: italic .75rem var(--f-body); color: var(--c-ink-faint); }
.bm-curator-caption button { margin-top: .6rem; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: var(--c-accent); cursor: pointer; padding: .25rem 0; font: .78rem var(--f-ui); }
.bm-curator-footnote { border-top: 1px solid #dcd1c0; padding-top: .65rem; margin: 0; color: var(--c-ink-faint); font: italic .76rem/1.35 var(--f-body); }
@media (max-width: 570px) {
.bookmark-detail { grid-template-columns: 45px minmax(0,1fr); gap: .85rem; }
  .sheet .bookmark-detail-copy h2 { font-size: 1.4rem; }
  .bookmark-detail-requirement { font-size: .83rem; }
  .bookmark-detail-manage a { margin-left: 0; }
}

/* a compact horizontal run of bookmarks (home teaser, period rows) */
.bm-strip { display: flex; gap: .6rem; overflow-x: auto; padding-bottom: .3rem; scrollbar-width: none; }
.bm-strip::-webkit-scrollbar { display: none; }
.bm-strip > * { flex: none; width: calc(var(--bm-w) * var(--bm-scale) * .42); }

/* =========================================================== lists ====== */

.list { border-top: var(--rule-w) solid var(--c-rule); }
.list-row {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.05rem 0;
  border-bottom: var(--rule-w) solid var(--c-rule);
}
.list-row-link { color: inherit; text-decoration: none; display: flex; gap: 1rem; flex: 1; min-width: 0; }

.cover {
  flex: none; width: 48px; aspect-ratio: 2 / 3;
  object-fit: cover;
  background: var(--c-bg-sunk);
  border: var(--rule-w) solid var(--c-rule);
  border-radius: var(--r-sm);
}
.cover-lg { width: 72px; }
.cover-ph {
  display: grid; place-items: center;
  font-family: var(--f-display); font-size: 1.2rem; font-style: italic;
  color: var(--c-ink-faint);
}

/* These sit inside a flex row's grow column, so they must stack. */
.entry-title {
  display: block;
  font-family: var(--f-display); font-size: var(--fs-h3);
  font-weight: var(--fw-heading); line-height: var(--lh-tight);
}
.entry-meta {
  display: block;
  font-size: var(--fs-small); color: var(--c-ink-faint); font-style: italic;
}
.list-row-link > .grow { display: flex; flex-direction: column; gap: .12rem; }

.tags { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin-top: .45rem; }
.tag {
  font-family: var(--f-ui);
  font-size: var(--fs-tiny);
  letter-spacing: .1em;
  text-transform: var(--tt-label);
  color: var(--c-ink-faint);
}
.tag-accent { color: var(--c-accent); }
.tag-sage   { color: var(--c-sage); }
.tag-rose   { color: var(--c-rose-ink); --tag-dot: var(--c-rose); }
.tag-blue   { color: var(--c-blue-ink); --tag-dot: var(--c-blue); }
.tag-gold   { color: var(--c-gold-ink); --tag-dot: var(--c-gold); }
.tag-accent { --tag-dot: var(--c-terracotta); }
.tag-sage   { --tag-dot: var(--c-bm1-bg); }

/* The little colour dot that precedes a tag, at full palette strength. */
.tag::before {
  content: '';
  display: inline-block;
  width: .42em; height: .42em;
  margin-right: .45em;
  border-radius: 50%;
  background: var(--tag-dot, currentColor);
  vertical-align: .08em;
  opacity: .85;
}
.tag-plain::before { display: none; }

/* checklist rows (this period / challenge periods) */
.checklist { display: grid; grid-template-columns: minmax(0, 1fr); }
.check-row {
  display: flex; align-items: flex-start; gap: .95rem;
  padding: .85rem 0;
  border-bottom: var(--rule-w) solid var(--c-rule);
  color: inherit; text-decoration: none;
}
.check-row:last-child { border-bottom: 0; }
.check-mark {
  flex: none; width: 21px; height: 21px; margin-top: .15rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-rule-strong);
  display: grid; place-items: center;
  color: transparent;
}
.check-row.done .check-mark { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-accent-ink); }
.check-mark svg { width: 11px; height: 11px; }
.check-body { flex: 1; min-width: 0; }
.check-title { display: block; font-family: var(--f-display); font-size: var(--fs-h3); font-weight: var(--fw-heading); }
.check-note  { display: block; font-size: var(--fs-small); font-style: italic; color: var(--c-ink-faint); overflow-wrap: anywhere; }

/* ========================================================= controls ===== */

.btn {
  appearance: none; -webkit-appearance: none;
  font-family: var(--f-ui);
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  letter-spacing: var(--ls-label);
  text-transform: var(--tt-label);
  min-height: var(--tap);
  padding: .55rem 1.3rem;
  background: none;
  color: var(--c-ink);
  border: 1px solid var(--c-rule-strong);
  border-radius: var(--r-sm);
  cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  touch-action: manipulation;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover { background: var(--c-bg-sunk); border-color: var(--c-ink-faint); }
.btn-primary { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-accent-ink); }
.btn-primary:hover { background: var(--c-accent-deep); border-color: var(--c-accent-deep); color: var(--c-accent-ink); }
.btn-quiet { border-color: transparent; color: var(--c-accent); min-height: 34px; padding: .3rem .4rem; }
.btn-quiet:hover { background: none; text-decoration: underline; }
.btn-danger { color: var(--c-danger); border-color: var(--c-danger); }
.btn-danger:hover { background: var(--c-danger-soft); }
.btn-sm { min-height: 34px; padding: .32rem .85rem; font-size: calc(var(--fs-label) * .95); }
.btn-block { width: 100%; }
.btn:disabled { opacity: .45; cursor: default; }
.btn-row { display: flex; gap: .7rem; flex-wrap: wrap; }

/* tab bar — phones only */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex;
  padding-bottom: var(--safe-b);
  padding-left: var(--safe-l); padding-right: var(--safe-r);
  background: var(--c-bg);
  border-top: var(--rule-w) solid var(--c-rule);
}
.tab {
  flex: 1; min-width: 0; height: var(--h-tabbar);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  text-decoration: none; color: var(--c-ink-faint);
  font-family: var(--f-ui); font-size: calc(var(--fs-label) * .92);
  font-weight: var(--fw-label); letter-spacing: .09em;
  text-transform: var(--tt-label);
  -webkit-tap-highlight-color: transparent;
}
.tab svg { width: 20px; height: 20px; }
.tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab[aria-current="page"] { color: var(--c-accent); }

/* ============================================================ forms ===== */

.field { margin-bottom: 1.1rem; }
.field > label, .field-label {
  display: block;
  font-family: var(--f-ui);
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  letter-spacing: var(--ls-label);
  text-transform: var(--tt-label);
  color: var(--c-ink-soft);
  margin-bottom: .42rem;
}
.hint { font-size: var(--fs-tiny); font-style: italic; color: var(--c-ink-faint); margin-top: .35rem; }

input[type="text"], input[type="search"], input[type="number"], input[type="date"],
textarea, select {
  width: 100%;
  font-family: var(--f-body);
  font-size: 1rem;              /* 16px keeps iOS from zooming on focus */
  color: var(--c-ink);
  background: var(--c-bg-field);
  border: 1px solid var(--c-rule-strong);
  border-radius: var(--r-sm);
  padding: .6rem .75rem;
  min-height: var(--tap);
  appearance: none; -webkit-appearance: none;
}
input::placeholder, textarea::placeholder { color: var(--c-ink-faint); font-style: italic; }
textarea { min-height: 86px; resize: vertical; line-height: var(--lh-body); }
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%238d7f6e' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .6rem center; background-size: 20px;
  padding-right: 2.3rem;
}
input[type="color"] { padding: 2px; min-height: 40px; cursor: pointer; }
input[type="range"] { width: 100%; min-height: 32px; accent-color: var(--c-accent); background: none; border: 0; padding: 0; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
@media (max-width: 430px) { .grid-2 { grid-template-columns: 1fr; } }

/* segmented control */
.seg { display: flex; border: 1px solid var(--c-rule-strong); border-radius: var(--r-sm); overflow: hidden; }
.seg button {
  flex: 1; appearance: none; border: 0; cursor: pointer;
  background: var(--c-bg-field); color: var(--c-ink-soft);
  font-family: var(--f-ui); font-size: var(--fs-label);
  font-weight: var(--fw-label); letter-spacing: var(--ls-label);
  text-transform: var(--tt-label);
  min-height: var(--tap);
  border-right: 1px solid var(--c-rule-strong);
}
.seg button:last-child { border-right: 0; }
.seg button[aria-pressed="true"] { background: var(--c-accent); color: var(--c-accent-ink); }
.seg.unset { border-color: var(--c-danger); }

/* checkbox rows */
.switch-row {
  display: flex; align-items: flex-start; gap: .85rem;
  padding: .8rem 0; border-bottom: var(--rule-w) solid var(--c-rule);
  cursor: pointer;
}
.switch-row:last-of-type { border-bottom: 0; }
.switch-row input { width: 19px; height: 19px; margin: .2rem 0 0; accent-color: var(--c-accent); flex: none; }
.switch-text { flex: 1; min-width: 0; font-family: var(--f-display); font-size: var(--fs-h3); font-weight: var(--fw-heading); }
.switch-text em { display: block; font-family: var(--f-body); font-size: var(--fs-small); font-weight: 400; color: var(--c-ink-faint); }

/* chips / filters */
.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  background: none;
  border: 1px solid var(--c-rule);
  color: var(--c-ink-soft);
  border-radius: var(--r-pill);
  padding: .34rem .85rem;
  font-family: var(--f-ui); font-size: var(--fs-tiny);
  letter-spacing: .07em;
  cursor: pointer; text-decoration: none;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.chip:hover { border-color: var(--c-rule-strong); color: var(--c-ink); }
.chip[aria-pressed="true"], .chip.on {
  background: var(--c-accent); border-color: var(--c-accent); color: var(--c-accent-ink);
}
.filters { display: flex; gap: .45rem; overflow-x: auto; padding-bottom: .55rem; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.filters .chip { flex: none; }

/* search results */
.result {
  display: flex; gap: .9rem; align-items: flex-start;
  width: 100%; text-align: left;
  padding: .85rem 0;
  border: 0; border-bottom: var(--rule-w) solid var(--c-rule);
  background: none; color: inherit; font: inherit; cursor: pointer;
}
.result:hover { background: var(--c-bg-sunk); }

/* =========================================================== sheets ===== */

.sheet-host {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(36, 28, 21, .38);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  padding-left: var(--safe-l); padding-right: var(--safe-r);
}
.sheet {
  width: min(100%, 560px);
  background: var(--c-bg);
  border: var(--rule-w) solid var(--c-rule);
  border-radius: var(--r-md) var(--r-md) 0 0;
  padding: 1.5rem 1.35rem calc(1.5rem + var(--safe-b));
  max-height: 88vh; overflow-y: auto;
  box-shadow: var(--shadow-sheet);
  animation: sheet-in var(--dur) var(--ease);
}
@keyframes sheet-in { from { transform: translateY(16px); opacity: .4; } }
.sheet h2 {
  font-family: var(--f-display); font-size: var(--fs-h2);
  font-weight: var(--fw-display); margin-bottom: .7rem;
}
@media (min-width: 760px) {
  .sheet-host { align-items: center; }
  .sheet { border-radius: var(--r-md); }
}

.summary-list { list-style: none; margin: .8rem 0; padding: 0; }
.summary-list li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .5rem 0; border-bottom: var(--rule-w) solid var(--c-rule);
  font-size: var(--fs-small);
}
.summary-list li:last-child { border-bottom: 0; }
.summary-list b { font-variant-numeric: tabular-nums; font-weight: var(--fw-heading); }

.kv { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1.1rem; font-size: var(--fs-small); margin: 0; }
.kv dt { font-family: var(--f-ui); font-size: var(--fs-tiny); letter-spacing: var(--ls-label); text-transform: var(--tt-label); color: var(--c-ink-faint); }
.kv dd { margin: 0; }

/* =========================================================== toasts ===== */

.toasts {
  position: fixed; z-index: 80;
  left: 50%; transform: translateX(-50%);
  bottom: calc(var(--h-tabbar) + var(--safe-b) + 4.4rem);
  width: min(94vw, 440px);
  display: grid; gap: .5rem;
  pointer-events: none;
}
.toast {
  background: var(--c-ink); color: var(--c-bg);
  border-radius: var(--r-sm);
  padding: .8rem 1rem;
  font-size: var(--fs-small);
  pointer-events: auto;
  animation: toast-in var(--dur) var(--ease);
}
.toast.good { background: var(--c-sage); color: #fbf8f0; }
.toast.bad  { background: var(--c-danger); color: #fbf8f0; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* ========================================================== notices ===== */

.alert-banner {
  padding: .75rem calc(var(--sp-page-x) + var(--safe-r)) .75rem calc(var(--sp-page-x) + var(--safe-l));
  background: var(--c-danger-soft); color: var(--c-danger);
  font-size: var(--fs-small); font-style: italic;
  border-bottom: var(--rule-w) solid var(--c-danger);
}
.notice {
  border: var(--rule-w) solid var(--c-rule-strong);
  border-left: 3px solid var(--c-accent);
  background: var(--c-bg-raised);
  padding: .95rem 1.1rem;
  font-size: var(--fs-small);
  margin-bottom: var(--sp-block);
}
.notice strong { font-family: var(--f-display); font-size: var(--fs-h3); display: block; margin-bottom: .2rem; }

.empty { text-align: center; color: var(--c-ink-faint); padding: 3.2rem 1rem; }
.empty h3 { font-family: var(--f-display); font-size: var(--fs-h2); font-weight: var(--fw-display); color: var(--c-ink); margin-bottom: .4rem; }
.empty p { font-style: italic; margin-bottom: 1.2rem; }

/* ================================================= design studio ======== */

.studio-preview {
  border: var(--rule-w) solid var(--c-rule);
  border-radius: var(--r-sm);
  overflow: hidden;
  margin-bottom: var(--sp-block);
  background: var(--c-bg);
}
.studio-preview-banner {
  background: var(--c-banner-bg); color: var(--c-banner-ink);
  text-align: center; padding: 1.5rem 1rem;
}
.studio-preview-banner .banner-title { font-size: clamp(1.7rem, 5vw, 2.6rem); }
.studio-preview-body { padding: 1.1rem; }

.studio-group { border-top: var(--rule-w) solid var(--c-rule); }
.studio-group > summary {
  cursor: pointer; list-style: none;
  padding: 1rem 0;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-family: var(--f-ui); font-size: var(--fs-label);
  font-weight: var(--fw-label); letter-spacing: var(--ls-label);
  text-transform: var(--tt-label); color: var(--c-ink);
}
.studio-group > summary::-webkit-details-marker { display: none; }
.studio-group > summary::after { content: '+'; font-size: 1.1rem; color: var(--c-ink-faint); }
.studio-group[open] > summary::after { content: '–'; }
.studio-body { padding-bottom: 1.1rem; display: grid; gap: .95rem; }

.token-row { display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem; align-items: center; }
.token-row > label { font-size: var(--fs-small); color: var(--c-ink-soft); margin: 0; font-family: var(--f-body); letter-spacing: 0; text-transform: none; font-weight: 400; }
.token-row .token-control { display: flex; align-items: center; gap: .5rem; }
.token-row input[type="color"] { width: 46px; flex: none; }
.token-row input[type="text"] { width: 118px; font-size: var(--fs-tiny); font-family: ui-monospace, Menlo, monospace; }
.token-row input[type="number"] { width: 86px; }
.token-row select { width: 190px; }
.token-row input[type="range"] { width: 150px; }
.token-dirty { color: var(--c-accent); font-size: 1.1em; line-height: 0; }
.token-value { font-size: var(--fs-tiny); color: var(--c-ink-faint); font-variant-numeric: tabular-nums; min-width: 54px; text-align: right; }
.token-row.is-wide { grid-template-columns: 1fr; }
.token-row.is-wide .token-control { width: 100%; }
.token-row.is-wide input[type="text"], .token-row.is-wide select { width: 100%; }

/* ====================================================== responsive ====== */

/* Phones: hide the masthead nav, show the tab bar. */
@media (max-width: 859px) {
  .masthead-nav { display: none; }
  .masthead-inner { justify-content: space-between; }
  .masthead-actions { margin-left: auto; }
  :root { --bm-scale: .82; }
}

/* Desktop: the tab bar gives way to the masthead. */
@media (min-width: 860px) {
  .tabbar { display: none; }
  .screen { padding-bottom: 5rem; }
  .toasts { bottom: 2rem; }
}

@media (max-width: 520px) {
  :root { --bm-scale: .72; }
  /* Five tabs across a phone: tighten the type so no label truncates. */
  .tab { font-size: calc(var(--fs-label) * .78); letter-spacing: .03em; }
  .section-meta { padding-left: 0; border-left: 0; }
  .progress-line { flex-wrap: wrap; gap: .5rem 1rem; }
  .progress-line .bar { order: 3; flex-basis: 100%; }
}

@media (max-width: 380px) {
  :root { --bm-scale: .64; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

@media print {
  .masthead, .tabbar, .toasts, .sheet-host { display: none !important; }
  body { background: #fff; }
}

/* ===========================================================================
   EDITORIAL SECTIONS
   Each section type in js/sections.js has its composition here. Sections set
   their own measure, so a hero runs full-bleed while a text column stays
   narrow on the same page.
   ======================================================================== */

.ed {
  position: relative;
  max-width: var(--w-content);
  margin: 0 auto;
  padding:
    var(--sp-section)
    calc(var(--sp-page-x) + var(--safe-r))
    var(--sp-section)
    calc(var(--sp-page-x) + var(--safe-l));
}
.ed.sp-tight { padding-top: calc(var(--sp-section) * .45); padding-bottom: calc(var(--sp-section) * .45); }
.ed.sp-loose { padding-top: calc(var(--sp-section) * 1.6); padding-bottom: calc(var(--sp-section) * 1.6); }
.ed.sp-flush { padding-top: 0; padding-bottom: 0; }

/* Any editable editorial section may take on an architectural arch silhouette.
   Keep the content and controls intact; only its outer silhouette changes. */
.ed.shape-arch:not(.ed-archFeature) {
  box-sizing: border-box;
  width: min(100%, 720px);
  min-height: 510px;
  padding-top: max(var(--sp-section), 125px);
  border-radius: 50% 50% 0 0 / 155px 155px 0 0;
  overflow: hidden;
  background-color: var(--tone-sage, #b1bdaa);
}
.ed.shape-arch.ed-bleed { max-width: 720px; }
/* Presets are visible paper swatches, not opaque names in a native dropdown. */
.tone-choice-list { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 10px; }
.tone-choice {
  display: grid; grid-template-columns: 25px minmax(0, 1fr); column-gap: 9px; align-items: center;
  padding: 8px; border: 1px solid #d9cbb9; border-radius: 7px;
  background: #fffcf7; color: #4c3734; text-align: left; cursor: pointer;
}
.tone-choice.is-selected { border-color: #a95536; box-shadow: inset 0 0 0 1px #a95536; }
.tone-choice-swatch { grid-row: span 2; width: 25px; height: 35px; border: 1px solid #c9bcae; border-radius: 3px; }
.tone-choice-name { font-size: 12px; line-height: 1.15; }
.tone-choice code { font: 10px/1.5 ui-monospace, monospace; color: #876f68; }
.tone-hex-label { display: block; margin-top: 14px; font-size: 12px; }
.tone-hex-row { display: flex; align-items: center; gap: 9px; margin-top: 5px; }
.tone-hex-row input[type="color"] { width: 41px; height: 41px; padding: 3px; border: 1px solid #cbbca9; border-radius: 6px; background: #fff; cursor: pointer; }
.tone-hex-row input[type="text"] { flex: 1; min-width: 0; text-transform: uppercase; font-family: ui-monospace, monospace; }
@media (max-width: 680px) {
  .ed.shape-arch:not(.ed-archFeature) {
    min-height: 420px;
    padding-top: max(var(--sp-section), 90px);
    border-radius: 50% 50% 0 0 / 105px 105px 0 0;
  }
}

/* The *entire panel* is the arch: not a photo frame in a rectangular card.
   A high curved crown falls into straight sides and a quiet square foot. */
.ed-archFeature {
  /* Let the crown rise into the preceding section, so the transition feels
     intentional rather than like a separate card with a large gap. */
  margin-top: -38px;
  padding-top: 0;
  padding-bottom: clamp(2.5rem, 5vw, 5rem);
  z-index: 2;
}
.lit-arch-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: min(100%, 620px);
  min-height: clamp(620px, 74vw, 790px);
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-radius: 50% 50% 0 0 / 29% 29% 0 0;
  background: #a7b49c;
  color: #30382e;
  box-shadow: inset 0 0 0 1px rgba(46,59,43,.13);
}
.lit-arch-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at 50% 8%, rgba(255,255,243,.2), transparent 63%),
    linear-gradient(to bottom, transparent 35%, rgba(246,243,222,.3) 100%);
}
.lit-arch-tone-rose { background-color: #cbb0ac; }
.lit-arch-tone-blue { background-color: #aebec4; }
.lit-arch-tone-apricot { background-color: #d9b398; }
.lit-arch-tone-gold { background-color: #cdbd8b; }
.lit-arch-tone-olive { background-color: #66715b; color: #faf4e9; }
.lit-arch-tone-ink { background-color: #4b3637; color: #faf4e9; }
.lit-arch-has-art::before {
  background-image: linear-gradient(to bottom, rgba(18,25,18,.05) 0%, rgba(18,25,18,.1) 40%, rgba(14,20,14,.7) 100%), var(--lit-arch-art);
  background-size: cover;
  background-position: center;
}
.lit-arch-has-art { color: #fff8ed; }
.lit-arch-copy {
  position: relative;
  text-align: center;
  max-width: 520px;
  padding: clamp(2rem, 6vw, 5rem) 2rem clamp(3rem, 6vw, 5.5rem);
}
.lit-arch-copy .ed-title { color: inherit; font-size: clamp(2.8rem, 4.7vw, 4.6rem); line-height: 1.07; }
.lit-arch-copy .ed-kicker, .lit-arch-body { color: inherit; }
.lit-arch-body { max-width: 37ch; line-height: 1.7; font-size: clamp(1rem, 1.6vw, 1.28rem); margin: 1.4rem auto 0; }
.lit-arch-flourish { display: block; margin-top: 1.4rem; font-size: 1.8rem; opacity: .65; }
.lit-arch-flip .lit-arch-copy { margin-left: auto; margin-right: clamp(0px, 3vw, 70px); }
@media (max-width: 680px) {
  .ed-archFeature { margin-top: -20px; }
  .lit-arch-panel { width: min(100%, 430px); min-height: 570px; border-radius: 50% 50% 0 0 / 24% 24% 0 0; }
  .lit-arch-copy { padding-inline: 1.25rem; }
  .lit-arch-flip .lit-arch-copy { margin: 0 auto; }
}

/* Full-bleed sections escape the measure entirely. */
.ed-bleed { max-width: none; padding-left: 0; padding-right: 0; padding-top: 0; padding-bottom: 0; }

/* A photograph behind a section. It bleeds the full width while the contents
   stay in column, and carries a scrim so type stays readable over it. */
.ed.has-bg {
  max-width: none;
  overflow: hidden;
  isolation: isolate;
  padding-top: calc(var(--sp-section) * 1.25);
  padding-bottom: calc(var(--sp-section) * 1.25);
  padding-left: max(calc((100% - var(--w-content)) / 2 + var(--sp-page-x)), var(--sp-page-x));
  padding-right: max(calc((100% - var(--w-content)) / 2 + var(--sp-page-x)), var(--sp-page-x));
}
.ed.has-bg.sp-tight { padding-top: calc(var(--sp-section) * .6); padding-bottom: calc(var(--sp-section) * .6); }
.ed.has-bg.sp-flush { padding-top: 0; padding-bottom: 0; }
.ed-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(28, 18, 14, calc(var(--scrim, .45) + .14)) 0%,
    rgba(28, 18, 14, calc(var(--scrim, .45) * .82)) 50%,
    rgba(28, 18, 14, calc(var(--scrim, .45) * .5)) 100%);
}
/* A photographed section with dark type gets a pale wash instead. */
.ed.has-bg:not(.ed-dark) .ed-scrim {
  background: linear-gradient(
    to top,
    rgba(248, 240, 228, calc(var(--scrim, .45) + .30)) 0%,
    rgba(248, 240, 228, calc(var(--scrim, .45) + .16)) 100%);
}

/* Tinted grounds. A toned section bleeds its colour the full width while its
   contents stay in column. */
.ed[class*="tone-"] {
  max-width: none;
  padding-left: max(calc((100% - var(--w-content)) / 2 + var(--sp-page-x)), var(--sp-page-x));
  padding-right: max(calc((100% - var(--w-content)) / 2 + var(--sp-page-x)), var(--sp-page-x));
}
.ed.tone-sage    { background: var(--tone-sage); }
.ed.tone-rose    { background: var(--tone-rose); }
.ed.tone-blue    { background: var(--tone-blue); }
.ed.tone-apricot { background: var(--tone-apricot); }
.ed.tone-gold    { background: var(--tone-gold); }
.ed.tone-olive   { background: var(--tone-olive); color: var(--tone-deep-ink); }
.ed.tone-ink     { background: var(--tone-ink);  color: var(--tone-deep-ink); }
/* Any section on a dark ground — a deep tone, or a photograph with light
   type over it — flips to the banner palette. */
.ed-dark { color: var(--c-body-ink, var(--tone-deep-ink)); }
.ed-dark .ed-kicker { color: var(--c-label-ink, var(--c-banner-ink-dim)); }
.ed-dark .ed-sub,
.ed-dark .ed-meta,
.ed-dark .hint,
.ed-dark .tick-note,
.ed-dark .measure-foot,
.ed-dark .measure-pct,
.ed-dark .bm-sub,
.ed-dark .spread-filter,
.ed-dark .shelf-meta,
.ed-dark .m-cap { color: var(--c-body-ink, var(--c-banner-ink-dim)); }
.ed-dark .ed-title,
.ed-dark .ed-subtitle,
.ed-dark .spread-title,
.ed-dark .measure-stat,
.ed-dark .tick-title,
.ed-dark .shelf-title,
.ed-dark .bm-label { color: var(--c-title-ink, var(--c-banner-accent)); }
.ed-dark .measure-stat span { color: var(--c-banner-ink-dim); }
/* The accent is tuned for paper; on a dark ground it loses too much. */
.ed-dark .measure-pct.over,
.ed-dark .goal-pct.over { color: var(--c-banner-accent); }
.ed-dark .tick,
.ed-dark .tick:first-child,
.ed-dark .measure { border-color: rgba(255, 255, 255, .20); }
.ed-dark .tick-mark { border-color: rgba(255, 255, 255, .42); }
.ed-dark .bar { background: rgba(255, 255, 255, .24); border-color: transparent; }
.ed-dark .ornament-line { background: rgba(255, 255, 255, .34); }
.ed-dark a { color: var(--c-banner-accent); }

/* Painted-canvas grain over toned grounds. */
.ed[class*="tone-"]::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  opacity: calc(var(--paper-texture-opacity) * .3);
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23c)'/%3E%3C/svg%3E");
}
.ed > * { position: relative; z-index: 2; }
.ed > .m-backdrop { z-index: 0; }
.ed > .ed-scrim { z-index: 1; }

/* ---------------------------------------------------- editorial type ----- */

.ed-kicker {
  margin: 0 0 .5rem;
  font-family: var(--f-ui);
  font-size: calc(var(--fs-label) * var(--fz-ui, 1));
  font-weight: var(--fw-label);
  font-style: var(--fi-ui, normal);
  letter-spacing: var(--ls-eyebrow);
  text-transform: var(--tt-label);
  color: var(--c-label-ink, var(--c-ink-faint));
}
.ed-title {
  margin: 0;
  font-family: var(--f-display);
  font-size: calc(var(--fs-display) * var(--fz-display, 1));
  font-weight: var(--fw-display);
  font-style: var(--fi-display, normal);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
  text-transform: var(--tt-display);
  color: var(--c-title-ink, var(--c-ink));
  text-wrap: balance;
}
.ed-title.has-script { text-transform: none; }
.ed-script {
  font-family: var(--f-script);
  font-size: calc(1.5em * var(--fz-script, 1));
  font-weight: var(--fw-script, 400);
  font-style: var(--fi-script, normal);
  line-height: .7;
  letter-spacing: var(--ls-script, 0);
  text-transform: none;
  color: var(--c-script-ink, var(--c-accent));
  margin-right: .06em;
  /* A copperplate's entrance stroke reaches well left of its glyph box. */
  padding-inline: .06em;
}
.ed-dark .ed-script { color: var(--c-script-ink, var(--c-banner-accent)); }
.ed-subtitle {
  margin: 0;
  font-family: var(--f-display);
  font-size: calc(var(--fs-h2) * var(--fz-display, 1));
  font-weight: var(--fw-heading);
  font-style: var(--fi-display, normal);
  text-transform: var(--tt-display);
  letter-spacing: var(--ls-display);
  color: var(--c-title-ink, var(--c-ink));
}
.ed-sub {
  margin: .35rem 0 0;
  font-size: calc(1em * var(--fz-body, 1));
  font-style: italic;
  color: var(--c-body-ink, var(--c-ink-soft));
}
.ed-meta {
  font-family: var(--f-ui); font-size: var(--fs-label);
  letter-spacing: var(--ls-label); text-transform: var(--tt-label);
  color: var(--c-body-ink, var(--c-ink-soft)); text-decoration: none; white-space: nowrap;
}
a.ed-meta:hover { color: var(--c-accent); }
.ed-head { margin-bottom: 1.8rem; }
.ed-head-split { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }

.ed-prose { max-width: 36em; margin-top: 1rem; }
.ed-prose p { margin: 0 0 .9em; }
.ed-prose.has-dropcap > p:first-child::first-letter {
  float: left;
  font-family: var(--f-display);
  font-size: 3.4em;
  line-height: .82;
  padding: .06em .1em 0 0;
  color: var(--c-accent);
}

/* Handwritten marginalia. */
.marginalia {
  font-family: var(--f-script);
  font-size: 1.5rem;
  line-height: 1.25;
  color: var(--c-accent);
  transform: rotate(var(--m-rot, -2deg));
  margin: 1rem 0 0;
}
.marginalia.big { font-size: clamp(1.7rem, 4vw, 2.9rem); margin: 0; }
.marginalia.center { text-align: center; }
.ed-dark .marginalia { color: var(--c-banner-accent); }

/* --------------------------------------------------------------- hero ---- */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  color: var(--c-banner-ink);
}
.hero-short  { min-height: clamp(260px, 38vw, 420px); }
.hero-tall   { min-height: clamp(420px, 62vw, 680px); }
.hero-full   { min-height: calc(100svh - var(--h-masthead)); }

.hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(28, 18, 14, calc(var(--scrim, .5) + .18)) 0%,
    rgba(28, 18, 14, calc(var(--scrim, .5) * .75)) 45%,
    rgba(28, 18, 14, calc(var(--scrim, .5) * .35)) 100%);
}
.hero-type {
  position: relative; z-index: 2;
  width: 100%;
  max-width: var(--w-content);
  margin: 0 auto;
  padding: clamp(2.5rem, 7vw, 5.5rem) calc(var(--sp-page-x) + var(--safe-r)) clamp(2.2rem, 6vw, 4.5rem) calc(var(--sp-page-x) + var(--safe-l));
}
.hero-center .hero-type { text-align: center; }
.hero-right  .hero-type { text-align: right; }
.hero-center { align-items: center; }

.hero .ed-kicker { color: var(--c-label-ink, var(--c-banner-ink-dim)); margin-bottom: .9rem; }
.hero-title {
  margin: 0;
  font-family: var(--f-display);
  font-size: calc(var(--fs-banner-title) * var(--fz-display, 1));
  font-weight: var(--fw-display);
  font-style: var(--fi-display, normal);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: var(--tt-display);
  color: var(--c-title-ink, var(--c-banner-accent));
  text-wrap: balance;
}
.hero-title.has-script { text-transform: none; }
.hero-title .ed-script { font-size: 1.45em; color: var(--c-script-ink, inherit); }
.hero-sub {
  margin: 1rem 0 0;
  font-family: var(--f-body);
  font-style: italic;
  font-size: var(--fs-banner-sub);
  color: var(--c-body-ink, var(--c-banner-ink-dim));
}

/* A photograph pinned into the corner of the hero. */
.hero-inset {
  position: absolute; z-index: 3;
  right: clamp(1rem, 5vw, 5rem);
  bottom: clamp(1rem, 2.2vw, 2.2rem);
  width: clamp(120px, 17vw, 230px);
}

/* ---------------------------------------------------------- split ------- */

.split { display: grid; gap: clamp(1.6rem, 4vw, 4rem); align-items: center; }
@media (min-width: 760px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split-wide-image { grid-template-columns: 1.4fr 1fr; }
  .split-wide-text  { grid-template-columns: 1fr 1.5fr; }
  .split-flip .split-media { order: 2; }
}
.split-body { max-width: 38em; }

/* -------------------------------------------------------- collage ------- */

.collage { position: relative; }
.collage-short  { min-height: clamp(300px, 46vw, 430px); }
.collage-tall   { min-height: clamp(380px, 60vw, 580px); }
.collage-taller { min-height: clamp(460px, 76vw, 740px); }
.collage-item {
  position: absolute;
  top: 50%; left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
}
.collage-item .m-fig {
  margin-left: var(--m-x, 0);
  margin-top: var(--m-y, 0);
}
.collage .marginalia {
  position: absolute; right: 2%; bottom: 0; z-index: 9; max-width: 42%;
}
/* On a phone the overlap becomes a simple stack. */
@media (max-width: 759px) {
  .collage { min-height: 0; display: grid; gap: 1.4rem; justify-items: center; }
  .collage-item { position: static; transform: none; width: min(78%, 320px); }
  .collage-item .m-fig { margin: 0; }
  .collage .marginalia { position: static; max-width: none; text-align: center; }
}

/* -------------------------------------------------------- gallery ------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: clamp(.9rem, 2.4vw, 2rem);
  align-items: start;
}
.gallery-stagger > *:nth-child(even) { margin-top: clamp(1.2rem, 4vw, 3.2rem); }
@media (max-width: 759px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .gallery { grid-template-columns: 1fr; } }

/* ------------------------------------------------------ statement ------- */

.statement { margin: 0; }
.statement p {
  margin: 0;
  font-family: var(--f-display);
  font-weight: var(--fw-display);
  line-height: 1.08;
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}
.st-medium p { font-size: clamp(1.6rem, 4vw, 2.6rem); max-width: 24ch; }
.st-large  p { font-size: clamp(2rem, 6vw, 4rem);     max-width: 18ch; }
.st-huge   p { font-size: clamp(2.4rem, 9vw, 6rem);   max-width: 14ch; }
.st-caps   p { text-transform: uppercase; }
.st-quote  { position: relative; padding-left: .7em; }
.st-quote p { font-style: italic; }
.st-quote::before {
  content: '\201C';
  position: absolute; left: -.22em; top: -.08em;
  font-family: var(--f-display);
  font-size: 3.4em; line-height: 1;
  color: var(--c-accent); opacity: .5;
}
.st-script p {
  font-family: var(--f-script); line-height: 1.1;
  font-size: clamp(2.4rem, 8vw, 5.5rem); letter-spacing: 0; max-width: 16ch;
}
.statement cite {
  display: block; margin-top: 1.2rem;
  font-family: var(--f-ui); font-style: normal;
  font-size: var(--fs-label); letter-spacing: var(--ls-label);
  text-transform: var(--tt-label); color: var(--c-ink-faint);
}
.ed-dark .statement cite { color: var(--c-banner-ink-dim); }
.ed-dark .st-quote::before { color: var(--c-banner-accent); }

/* ------------------------------------------------------ interlude ------- */

.ornament { display: flex; align-items: center; gap: 1.1rem; justify-content: center; }
.ornament-line { flex: 1; max-width: 170px; height: 1px; background: var(--c-rule-strong); }
.ornament svg { width: 22px; height: 22px; fill: var(--c-accent); opacity: .8; }
.interlude-rule { margin: 0; border: 0; border-top: var(--rule-w) solid var(--c-rule-strong); }
.interlude-strip .m-fig { width: 100%; }

/* -------------------------------------------------------- measures ------ */

.measures { display: grid; gap: 0; }
.measure { padding: 1.3rem 0; border-top: var(--rule-w) solid var(--c-rule); }
.measure:first-child { border-top: 0; }
.measure-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.measure-head .ed-kicker { margin: 0; }
.measure-pct {
  font-family: var(--f-ui); font-variant-numeric: tabular-nums;
  font-size: var(--fs-small); color: var(--c-ink-soft);
}
.measure-pct.over { color: var(--c-accent); }
.measure-stat {
  margin: .2rem 0 .1rem;
  font-family: var(--f-display); font-size: var(--fs-stat);
  font-weight: var(--fw-display); line-height: 1.1;
  letter-spacing: var(--ls-display);
}
.measure-stat span { color: var(--c-ink-faint); }
.measure-foot {
  display: flex; justify-content: space-between; gap: 1rem; margin-top: .55rem;
  font-size: var(--fs-tiny); font-style: italic; color: var(--c-ink-faint);
}

/* ----------------------------------------------------------- ticks ------ */

.ticks { display: grid; grid-template-columns: minmax(0, 1fr); }
.tick {
  display: flex; align-items: flex-start; gap: .95rem;
  padding: .95rem 0; border-bottom: var(--rule-w) solid var(--c-rule);
  color: inherit; text-decoration: none;
}
.tick:first-child { border-top: var(--rule-w) solid var(--c-rule); }
.tick-mark {
  flex: none; width: 21px; height: 21px; margin-top: .2rem;
  border-radius: var(--r-pill); border: 1px solid var(--c-rule-strong);
  display: grid; place-items: center; color: transparent;
}
.tick.done .tick-mark { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-accent-ink); }
.tick-mark svg { width: 11px; height: 11px; }
.tick-body { flex: 1; min-width: 0; }
.tick-title { display: block; font-family: var(--f-display); font-size: var(--fs-h3); font-weight: var(--fw-heading); }
.tick-note { display: block; font-size: var(--fs-small); font-style: italic; color: var(--c-ink-faint); overflow-wrap: anywhere; }
.tick-go { align-self: center; color: var(--c-accent); font: 1rem var(--f-ui); padding: 0 .3rem; transition: transform .18s ease; }
.tick:hover .tick-go, .tick:focus-visible .tick-go { transform: translate(2px, -2px); }
.period-tick { align-items: center; }
.period-check { appearance: none; -webkit-appearance: none; padding: 0; background: transparent; cursor: pointer; margin-top: 0; font: inherit; }
.period-check:disabled { cursor: default; }
.period-check:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 4px; }
.period-detail { flex: none; align-self: center; display: inline-flex; align-items: center; gap: .35rem; padding: .6rem .15rem; color: var(--c-accent); font: 600 .65rem var(--f-ui); letter-spacing: .05em; text-decoration: none; }
.period-detail:hover { text-decoration: underline; }
.period-action { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; margin-top: 1.25rem; }
.period-action p { margin: 0; max-width: 30rem; color: var(--c-ink-soft); font: italic .98rem/1.4 var(--f-body); }
.period-action a { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 44px; padding: .7rem 1rem; border: 1px solid var(--c-accent); color: var(--c-accent); text-decoration: none; font: 600 .7rem var(--f-ui); letter-spacing: .09em; text-transform: uppercase; }
.period-action a:hover, .period-action a:focus-visible { background: var(--c-accent); color: var(--c-accent-ink); }
@media (max-width: 520px) {
  .tick { min-height: 66px; align-items: center; gap: .75rem; }
  .tick-mark { width: 25px; height: 25px; margin-top: 0; }
  .tick-title { font-size: clamp(1.15rem, 5vw, 1.4rem); }
  .tick-note { margin-top: .2rem; }
  .period-action a { width: 100%; }
}

/* --------------------------------------------------------- spreads ------ */

.spreads { display: grid; gap: clamp(2.2rem, 5vw, 4.2rem); }
.spread {
  display: grid; gap: clamp(1.2rem, 3.5vw, 3rem);
  align-items: center; color: inherit; text-decoration: none;
}
@media (min-width: 720px) {
  .spread { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  .spread-flip .spread-media { order: 2; }
}
.spread-media { position: relative; }
.spread-marks {
  position: absolute; right: -10px; bottom: -14px;
  display: flex; gap: 4px; width: 46%; max-width: 150px;
}
.spread-marks > * { flex: 1; }
.spread-title {
  margin: .15rem 0 0;
  font-family: var(--f-display); font-size: clamp(1.5rem, 3.2vw, 2.2rem);
  font-weight: var(--fw-display); line-height: 1.12;
  letter-spacing: var(--ls-display); text-transform: var(--tt-display);
}
.spread-filter {
  margin: .9rem 0 .6rem;
  font-family: var(--f-ui); font-size: var(--fs-tiny);
  letter-spacing: var(--ls-label); text-transform: var(--tt-label);
  color: var(--c-ink-faint);
}
.spread:hover .spread-title { color: var(--c-accent); }

/* ----------------------------------------------------------- shelf ------ */

.shelf {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 132px));
  gap: clamp(1rem, 2.6vw, 2rem);
  justify-content: start;
}
.shelf-item { text-decoration: none; color: inherit; display: block; }
.shelf-item .cover { width: 100%; }
.shelf-title { display: block; margin-top: .6rem; font-family: var(--f-display); font-size: var(--fs-small); font-weight: var(--fw-heading); line-height: 1.2; }
.shelf-meta { display: block; font-size: var(--fs-tiny); font-style: italic; color: var(--c-ink-faint); }

/* ===========================================================================
   MEDIA — every picture in the journal, drawn by js/media.js
   ======================================================================== */

.m-fig {
  position: relative;
  margin: 0;
  display: block;
  transform: rotate(var(--m-rot, 0deg));
  transition: transform var(--dur) var(--ease);
}
.m-mount { position: relative; display: block; width: 100%; }
.m-box {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  background: var(--c-bg-sunk);
}
.m-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* A picture at its natural shape has no height to fill, so it flows instead. */
.m-auto .m-img { position: static; height: auto; }
.m-cap {
  margin-top: .55rem;
  font-family: var(--f-ui); font-size: var(--fs-tiny);
  letter-spacing: .06em; text-transform: var(--tt-label);
  color: var(--c-ink-faint);
}

/* Empty slots are tinted plates, not broken images — the layouts read as
   designed before a single photograph has been uploaded. */
.m-empty {
  position: absolute; inset: 0;
  display: grid; place-items: center;
}
.m-empty::after {
  content: ''; position: absolute; inset: 0;
  opacity: .5; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23p)'/%3E%3C/svg%3E");
}
.m-empty-mark { width: 26px; height: 26px; opacity: .5; position: relative; z-index: 1; }
.m-tint-sage    { background: linear-gradient(150deg, #9db197, #7c9178); }
.m-tint-olive   { background: linear-gradient(150deg, #64805f, #42573f); }
.m-tint-rose    { background: linear-gradient(150deg, #d79098, #bc6a72); }
.m-tint-blue    { background: linear-gradient(150deg, #93b0d8, #6b8cbd); }
.m-tint-apricot { background: linear-gradient(150deg, #dd8a55, #c4652f); }
.m-tint-gold    { background: linear-gradient(150deg, #e9c478, #d2a04a); }
.m-empty-mark, .m-tint-sage .m-empty-mark { fill: rgba(255,255,255,.75); }

/* ---- frames ---- */
.mf-shadow .m-mount { box-shadow: 0 2px 5px rgba(60, 36, 28, .10), 0 14px 34px rgba(60, 36, 28, .13); }
.mf-line .m-box { border: var(--rule-w) solid var(--c-rule-strong); }
.mf-plate .m-box { border: 1px solid rgba(120, 92, 70, .22); }
.mf-plate .m-box::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  box-shadow: inset 0 0 0 7px var(--c-bg-raised), inset 0 0 0 8px rgba(120, 92, 70, .20);
}
.mf-oval .m-box { border-radius: 50% / 50%; }
.mf-arch .m-box { border-radius: 50% 50% var(--bm-radius) var(--bm-radius) / 36% 36% var(--bm-radius) var(--bm-radius); }

/* Photographic carved-gold frames: the rectangular border scales by nine-slice,
   while the round and oval mounts retain their entire sculpted silhouette. */
.mf-gilded-real .m-mount {
  border: clamp(13px, 2.8vw, 32px) solid transparent;
  border-image-source: url('../assets/frames/antique-gilt-rectangle.webp');
  border-image-slice: 175;
  border-image-repeat: stretch;
  filter: drop-shadow(0 5px 8px rgba(40, 27, 10, .28));
}
.mf-gilded-real .m-box { box-shadow: inset 0 0 7px rgba(28,18,5,.35); }
.mf-gilded-round .m-mount, .mf-gilded-oval .m-mount { position: relative; padding: 0; filter: drop-shadow(0 7px 9px rgba(40,27,10,.25)); }
.mf-gilded-round .m-mount { aspect-ratio: 1; }
.mf-gilded-oval .m-mount { aspect-ratio: 3 / 4; }
.mf-gilded-round .m-mount::after, .mf-gilded-oval .m-mount::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background-size: 100% 100%; background-repeat: no-repeat; }
.mf-gilded-round .m-mount::after { background-image: url('../assets/frames/antique-gilt-round.webp'); }
.mf-gilded-oval .m-mount::after { background-image: url('../assets/frames/antique-gilt-oval.webp'); }
.mf-gilded-round .m-box, .mf-gilded-oval .m-box { position: absolute; width: auto; height: auto; overflow: hidden; border-radius: 50%; }
.mf-gilded-round .m-box { inset: 18%; aspect-ratio: 1 !important; }
.mf-gilded-oval .m-box { inset: 17% 18%; aspect-ratio: 3 / 4 !important; }
.mf-gilded-round .m-img, .mf-gilded-oval .m-img, .mf-gilded-round.m-auto .m-img, .mf-gilded-oval.m-auto .m-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover !important; }

.mf-polaroid .m-mount {
  background: var(--c-bg-raised);
  padding: 9px 9px 42px;
  box-shadow: 0 2px 5px rgba(60, 36, 28, .12), 0 16px 36px rgba(60, 36, 28, .16);
}
.mf-polaroid .m-cap {
  position: absolute; left: 0; right: 0; bottom: 10px;
  margin: 0; padding: 0 10px; text-align: center;
  font-family: var(--f-script); font-size: 1.1rem;
  letter-spacing: 0; text-transform: none; color: var(--c-ink-soft);
}


/* A torn deckle edge, cut with a mask so it works over any ground. */
.mf-deckle .m-box {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 100 100'%3E%3Cpath d='M2.5,1.2 Q12,0.2 22,1.6 Q33,3 44,1 Q56,-0.6 67,1.4 Q79,3.2 89,1.2 Q97,0.2 98.6,2.4 L98.4,97.2 Q89,99.4 78,97.6 Q66,95.8 55,98 Q43,100 32,98 Q20,95.8 10,97.8 Q3,99 1.4,96.8 Z' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 100 100'%3E%3Cpath d='M2.5,1.2 Q12,0.2 22,1.6 Q33,3 44,1 Q56,-0.6 67,1.4 Q79,3.2 89,1.2 Q97,0.2 98.6,2.4 L98.4,97.2 Q89,99.4 78,97.6 Q66,95.8 55,98 Q43,100 32,98 Q20,95.8 10,97.8 Q3,99 1.4,96.8 Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}

/* A postage stamp. The perforation mask is applied to the white backing only —
   masking the mount itself punched holes straight through the picture. */
.mf-stamp .m-mount { position: relative; padding: 11px; }
.mf-stamp .m-mount::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background: var(--c-bg-raised);
  filter: drop-shadow(0 6px 14px rgba(60, 36, 28, .18));
  -webkit-mask: radial-gradient(circle 5px at 5px 5px, transparent 97%, #000) -5px -5px / 10px 10px;
  mask: radial-gradient(circle 5px at 5px 5px, transparent 97%, #000) -5px -5px / 10px 10px;
}
.mf-stamp .m-box { z-index: 1; }

/* Washi tape holding a picture to the page. */
.mf-tape-top .m-mount::before,
.mf-tape-corners .m-mount::before,
.mf-tape-corners .m-mount::after {
  content: '';
  position: absolute; z-index: 4;
  width: 92px; height: 26px;
  background: linear-gradient(100deg, rgba(224,179,90,.62), rgba(212,118,60,.5));
  box-shadow: 0 1px 3px rgba(60,36,28,.14);
  opacity: .9;
}
.mf-tape-top .m-mount::before { top: -11px; left: 50%; transform: translateX(-50%) rotate(-2.5deg); }
.mf-tape-corners .m-mount::before { top: -12px; left: -16px; transform: rotate(-38deg); }
.mf-tape-corners .m-mount::after  { top: -12px; right: -16px; transform: rotate(38deg); }

/* Full-bleed backdrop behind a hero. */
.m-backdrop {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover;
  background-repeat: no-repeat;
}
.hero .m-backdrop-empty {
  background:
    radial-gradient(115% 85% at 16% 10%, rgba(224, 179, 90, .50), transparent 58%),
    radial-gradient(95% 80% at 84% 80%, rgba(201, 120, 126, .40), transparent 62%),
    radial-gradient(70% 60% at 62% 32%, rgba(125, 159, 207, .26), transparent 70%),
    linear-gradient(158deg, #4b2828 0%, #536e50 54%, #3b4a39 100%);
}
.m-backdrop-empty::after {
  content: ''; position: absolute; inset: 0;
  opacity: .45; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='h'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.45' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23h)'/%3E%3C/svg%3E");
}

.hide-sm { display: block; }
@media (max-width: 759px) { .hide-sm { display: none !important; } }

@media (max-width: 759px) {
  /* Tilts and offsets read as mistakes on a narrow screen. */
  .m-fig { transform: none; }
  .hero-inset {
    right: .9rem; left: auto;
    top: auto; bottom: .9rem;
    width: min(34%, 132px);
  }
  .spread-marks { position: static; width: 100%; max-width: none; margin-top: .7rem; }
}

/* ===========================================================================
   DESIGN STUDIO — the three workbenches. Deliberately plainer than the
   journal itself: these are tools, not pages.
   ======================================================================== */

.studio-nav {
  display: flex; gap: .4rem; flex-wrap: wrap;
  margin-bottom: 1.6rem;
  border-bottom: var(--rule-w) solid var(--c-rule);
}
.studio-tab {
  padding: .55rem .95rem;
  font-family: var(--f-ui); font-size: var(--fs-label);
  font-weight: var(--fw-label); letter-spacing: var(--ls-label);
  text-transform: var(--tt-label);
  color: var(--c-ink-faint); text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.studio-tab:hover { color: var(--c-ink); }
.studio-tab.is-active { color: var(--c-accent); border-bottom-color: var(--c-accent); }

/* ---- picture library ---- */
.asset-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.asset {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; padding: 0; cursor: pointer; color: inherit;
  font: inherit;
}
.asset-thumb {
  display: block; aspect-ratio: 4 / 3; overflow: hidden;
  border: var(--rule-w) solid var(--c-rule);
  border-radius: var(--r-sm); background: var(--c-bg-sunk);
}
.asset-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.asset:hover .asset-thumb { border-color: var(--c-accent); }
.asset-name { display: block; margin-top: .5rem; font-family: var(--f-display); font-size: var(--fs-small); font-weight: var(--fw-heading); }
.asset-meta { display: block; font-size: var(--fs-tiny); font-style: italic; color: var(--c-ink-faint); }
.asset-preview {
  max-height: 44vh; overflow: hidden; border-radius: var(--r-sm);
  border: var(--rule-w) solid var(--c-rule); background: var(--c-bg-sunk);
}
.asset-preview img { width: 100%; max-height: 44vh; object-fit: contain; display: block; }

/* ---- layout editor ---- */
.lay-list { list-style: none; margin: 0; padding: 0; border-top: var(--rule-w) solid var(--c-rule); }
.lay-row {
  display: flex; align-items: center; gap: .8rem;
  padding: .75rem 0; border-bottom: var(--rule-w) solid var(--c-rule);
}
.lay-row.is-hidden { opacity: .48; }
.lay-order { display: grid; gap: 2px; flex: none; }
.lay-order .icon-btn { width: 26px; height: 22px; font-size: .9rem; border-radius: var(--r-sm); }
.lay-order .icon-btn:disabled { opacity: .3; cursor: default; }
.lay-body { flex: 1; min-width: 0; }
.lay-type { display: block; font-family: var(--f-display); font-size: var(--fs-h3); font-weight: var(--fw-heading); }
.lay-summary { display: block; font-size: var(--fs-tiny); font-style: italic; color: var(--c-ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lay-acts { display: flex; align-items: center; gap: .35rem; flex: none; }

.type-list { display: grid; gap: .5rem; max-height: 52vh; overflow-y: auto; }
.type-opt {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--c-bg-raised); color: inherit; font: inherit;
  border: var(--rule-w) solid var(--c-rule); border-radius: var(--r-sm);
  padding: .7rem .85rem;
}
.type-opt:hover { border-color: var(--c-accent); }
.type-name { display: block; font-family: var(--f-display); font-size: var(--fs-h3); font-weight: var(--fw-heading); }
.type-blurb { display: block; font-size: var(--fs-tiny); font-style: italic; color: var(--c-ink-faint); }

/* ---- media slots & picker ---- */
.media-list { display: grid; gap: .5rem; margin-bottom: .6rem; }
.media-slot { display: flex; align-items: center; gap: .4rem; }
.media-pick {
  flex: 1; display: flex; align-items: center; gap: .7rem;
  background: var(--c-bg-raised); color: inherit; font: inherit; cursor: pointer;
  border: var(--rule-w) solid var(--c-rule-strong); border-radius: var(--r-sm);
  padding: .45rem .6rem; text-align: left; min-width: 0;
}
.media-pick:hover { border-color: var(--c-accent); }
.media-thumb {
  flex: none; width: 46px; aspect-ratio: 1; overflow: hidden;
  border-radius: 2px; background: var(--c-bg-sunk);
  display: grid; place-items: center;
}
.media-thumb img { width: 100%; height: 100%; object-fit: cover; }
.media-thumb-empty { font-size: var(--fs-tiny); color: var(--c-ink-faint); font-style: italic; }
.media-label { flex: 1; min-width: 0; font-size: var(--fs-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-meta { font-size: var(--fs-tiny); color: var(--c-ink-faint); white-space: nowrap; }

.asset-picker {
  display: grid; gap: .5rem;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  max-height: 32vh; overflow-y: auto;
  padding: .3rem; border: var(--rule-w) solid var(--c-rule); border-radius: var(--r-sm);
}
.asset-opt { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; }
.asset-opt-thumb {
  display: grid; place-items: center; aspect-ratio: 1; overflow: hidden;
  border: 2px solid transparent; border-radius: var(--r-sm); background: var(--c-bg-sunk);
}
.asset-opt-thumb img { width: 100%; height: 100%; object-fit: cover; }
.asset-opt-none { font-size: var(--fs-tiny); font-style: italic; color: var(--c-ink-faint); }
.asset-opt.is-on .asset-opt-thumb { border-color: var(--c-accent); }
.asset-opt-name {
  display: block; font-size: var(--fs-tiny); margin-top: .22rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-ink-faint);
}

/* The section visibility control shows state, not an action — a button
   labelled "Hide" beside a dimmed row reads as a label and invites a misclick. */
.vis-switch {
  display: inline-flex; align-items: center; gap: .38rem;
  cursor: pointer; user-select: none;
  font-family: var(--f-ui); font-size: var(--fs-tiny);
  letter-spacing: .06em; text-transform: var(--tt-label);
  color: var(--c-ink-faint);
}
.vis-switch input { width: 16px; height: 16px; accent-color: var(--c-accent); margin: 0; }
.vis-switch input:checked + span { color: var(--c-ink-soft); }
.lay-flag {
  display: inline-block; margin-left: .5rem;
  font-family: var(--f-ui); font-style: normal;
  font-size: var(--fs-tiny); letter-spacing: .08em;
  text-transform: var(--tt-label);
  color: var(--c-accent);
}

/* ---------------------------------------------------------------- gilt ----
   A vintage brass museum frame. Built from layered gradients rather than an
   image so it stays sharp at any size, costs nothing to load, and re-tints
   from four tokens.

   The profile reads outward from the picture: a dark rebate, a bright fillet,
   a shadowed scotia, then the broad gilded moulding with a lit outer lip.
   Light is assumed to fall from the upper left throughout.               */

.mf-gilt .m-mount, .mf-gilt-oval .m-mount {
  padding: var(--gilt-width);
  background-color: var(--c-gilt-mid);
  background-image:
    /* burnished striations — the tooth of hand-laid leaf */
    repeating-linear-gradient(46deg,
      rgba(255, 252, 240, .16) 0 1px, rgba(0, 0, 0, .05) 1px 2px, transparent 2px 5px),
    /* light catching the top-left, shadow pooling bottom-right */
    radial-gradient(90% 90% at 10% 6%, rgba(255, 248, 225, .62) 0%, transparent 52%),
    radial-gradient(95% 95% at 92% 96%, rgba(60, 40, 14, .42) 0%, transparent 55%),
    /* the moulding itself, rounded across its width */
    linear-gradient(132deg,
      var(--c-gilt-light) 0%,
      var(--c-gilt-mid) 24%,
      var(--c-gilt-deep) 50%,
      var(--c-gilt-mid) 72%,
      var(--c-gilt-light) 100%);
  box-shadow:
    /* lit outer lip, then the drop into the wall */
    inset 0 0 0 1px rgba(255, 246, 219, .55),
    inset 0 0 0 2px var(--c-gilt-shadow),
    0 2px 5px rgba(48, 32, 14, .26),
    0 20px 44px rgba(48, 32, 14, .30);
}

/* The rebate: where the gilding meets the picture. */
.mf-gilt .m-box {
  box-shadow:
    0 0 0 1px var(--c-gilt-shadow),
    0 0 0 4px var(--c-gilt-light),
    0 0 0 5px var(--c-gilt-deep),
    inset 0 2px 7px rgba(40, 26, 10, .36);
}

/* Oval — for portrait miniatures and cameos. */
.mf-gilt-oval .m-mount { border-radius: 50%; }
.mf-gilt-oval .m-box {
  border-radius: 50%;
  box-shadow:
    0 0 0 1px var(--c-gilt-shadow),
    0 0 0 4px var(--c-gilt-light),
    0 0 0 5px var(--c-gilt-deep),
    inset 0 2px 9px rgba(40, 26, 10, .40);
}
.mf-gilt-oval .m-cap { text-align: center; }

/* A caption under a gilt frame reads as a museum label. */
.mf-gilt .m-cap, .mf-gilt-oval .m-cap {
  margin-top: .75rem;
  font-family: var(--f-ui);
  font-size: var(--fs-tiny);
  letter-spacing: .14em;
  text-transform: var(--tt-label);
  color: var(--c-ink-faint);
}

/* The moulding narrows on a phone so small pictures keep their picture. */
@media (max-width: 759px) {
  .mf-gilt, .mf-gilt-oval { --gilt-width: clamp(8px, 3.5%, 16px); }
}

/* -------------------------------------------------------------- bronze ----
   An antique bronze moulding: darker, wider and more sculpted than the gilt.

   The relief is built from stacked inset rings rather than one gradient band.
   Inset shadows paint in source order, so a list of increasing spreads cuts
   concentric steps inward from the outer edge — a lit lip, a drop, a deep
   cove, a convex bead, a groove, then the rebate at the picture. That stepping
   is what reads as carved; a single gradient only ever looks printed.

   The picture sits above the mount's decoration (z-index), so the patina and
   the corner rosettes show on the moulding only.                          */

.mf-bronze .m-mount {
  position: relative;
  padding: var(--bronze-width);
  background-color: var(--c-bronze-mid);
  background-image:
    /* hammered tooth */
    repeating-linear-gradient(54deg,
      rgba(255, 238, 198, .09) 0 1px, rgba(0, 0, 0, .09) 1px 3px, transparent 3px 8px),
    /* light from the upper left, pooling dark at the lower right */
    radial-gradient(85% 85% at 12% 8%, rgba(255, 234, 186, .50) 0%, transparent 55%),
    radial-gradient(95% 95% at 90% 94%, rgba(20, 13, 6, .55) 0%, transparent 58%),
    /* the moulding, turned across its width */
    linear-gradient(128deg,
      var(--c-bronze-light) 0%,
      var(--c-bronze-mid) 20%,
      var(--c-bronze-deep) 44%,
      var(--c-bronze-dark) 56%,
      var(--c-bronze-mid) 78%,
      var(--c-bronze-light) 100%);
  box-shadow:
    /* outer lip */
    inset 0 0 0 2px var(--c-bronze-light),
    inset 0 0 0 4px var(--c-bronze-dark),
    /* cove — the deep recess that gives the frame its depth */
    inset 0 0 0 10px var(--c-bronze-deep),
    inset 0 0 0 13px var(--c-bronze-dark),
    /* bead — the convex roll catching light */
    inset 0 0 0 16px var(--c-bronze-light),
    inset 0 0 0 21px var(--c-bronze-mid),
    inset 0 0 0 24px var(--c-bronze-deep),
    /* and the frame's own shadow on the wall */
    0 3px 7px rgba(26, 17, 8, .34),
    0 24px 52px rgba(26, 17, 8, .34);
}

/* Mottled patina, settling into the recesses. */
.mf-bronze .m-mount::before {
  content: '';
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  mix-blend-mode: soft-light;
  opacity: .55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23b)'/%3E%3C/svg%3E");
}

/* Corner rosettes, as cast on an antique frame. */
.mf-bronze .m-mount::after {
  content: '';
  position: absolute; z-index: 2; pointer-events: none;
  inset: calc(var(--bronze-width) * .12);
  --r: calc(var(--bronze-width) * .42);
  background-image:
    radial-gradient(circle at 0 0, var(--c-bronze-light) 0 calc(var(--r) * .42), var(--c-bronze-dark) calc(var(--r) * .5), transparent calc(var(--r) * .62)),
    radial-gradient(circle at 100% 0, var(--c-bronze-light) 0 calc(var(--r) * .42), var(--c-bronze-dark) calc(var(--r) * .5), transparent calc(var(--r) * .62)),
    radial-gradient(circle at 0 100%, var(--c-bronze-light) 0 calc(var(--r) * .42), var(--c-bronze-dark) calc(var(--r) * .5), transparent calc(var(--r) * .62)),
    radial-gradient(circle at 100% 100%, var(--c-bronze-light) 0 calc(var(--r) * .42), var(--c-bronze-dark) calc(var(--r) * .5), transparent calc(var(--r) * .62));
  opacity: .9;
}

/* The picture rides above the decoration, so patina and rosettes stay on the
   moulding and never creep over the image. */
.mf-bronze .m-box {
  position: relative;
  z-index: 3;
  box-shadow:
    0 0 0 2px var(--c-bronze-dark),
    0 0 0 4px var(--c-bronze-light),
    0 0 0 6px var(--c-bronze-deep),
    inset 0 3px 11px rgba(18, 11, 4, .48);
}

.mf-bronze .m-cap {
  margin-top: .8rem;
  font-family: var(--f-ui);
  font-size: var(--fs-tiny);
  letter-spacing: .14em;
  text-transform: var(--tt-label);
  color: var(--c-ink-faint);
}

@media (max-width: 759px) {
  .mf-bronze .m-mount { --bronze-width: clamp(8px, 6%, 22px); }
}

/* -------------------------------------------------------------- ornate ----
   Carved baroque gilt. The scrollwork is an SVG generated in js/frames.js and
   applied as a border-image, so the corner cartouches draw once and the
   acanthus rails repeat along each side however long it is. Everything else
   here is the mount it sits on.                                           */

.mf-ornate { container-type: inline-size; }
.mf-ornate .m-mount {
  position: relative;
  /* Fallback first for anything without container queries. */
  border: clamp(16px, 4.2vw, 56px) solid transparent;
  border-width: var(--ornate-width);
  border-image-source: var(--frame-ornate);
  border-image-slice: 96;
  border-image-repeat: round;
  filter: drop-shadow(0 3px 6px rgba(34, 22, 8, .30))
          drop-shadow(0 22px 40px rgba(34, 22, 8, .26));
}

/* The rebate: a dark lip where the carving meets the picture. */
.mf-ornate .m-box {
  position: relative;
  z-index: 1;
  box-shadow:
    0 0 0 1px var(--c-gilt-shadow),
    inset 0 2px 9px rgba(32, 20, 6, .34);
}

.mf-ornate .m-cap {
  margin-top: .85rem;
  font-family: var(--f-ui);
  font-size: var(--fs-tiny);
  letter-spacing: .14em;
  text-transform: var(--tt-label);
  color: var(--c-ink-faint);
}

@media (max-width: 759px) {
  .mf-ornate .m-mount { --ornate-width: clamp(12px, 13cqw, 34px); }
}

/* ===========================================================================
   SECTION EDGES
   The seam where one section meets the next. A section with a ground — a tint
   or a photograph — can end in a torn, scalloped, laced or waved edge instead
   of a straight cut, so the page reads as one continuous object.

   Built as a two-layer mask: a repeating strip carries the shape along the
   bottom, a plain block covers everything above it. `mask-image: none` is a
   transparent layer, so an edge set to "none" simply contributes nothing.
   ======================================================================== */

/* A hero's ground is the banner inside it, so the mask applies there and the
   section keeps its normal flow. */
.ed-hero.has-edge { -webkit-mask-image: none; mask-image: none; padding-bottom: 0; }
.ed-hero.has-edge .hero {
  -webkit-mask-image: var(--edge-img), linear-gradient(black, black);
  -webkit-mask-size: var(--edge-tile) var(--edge-h), 100% calc(100% - var(--edge-h) + var(--trim-bite));
  -webkit-mask-position: bottom left, top left;
  -webkit-mask-repeat: repeat-x, no-repeat;
  mask-image: var(--edge-img), linear-gradient(black, black);
  mask-size: var(--edge-tile) var(--edge-h), 100% calc(100% - var(--edge-h) + var(--trim-bite));
  mask-position: bottom left, top left;
  mask-repeat: repeat-x, no-repeat;
  padding-bottom: var(--edge-h);
}

.ed.has-edge {
  --edge-img: none;
  --edge-h: 0px;
  --edge-tile: 100%;
  -webkit-mask-image: var(--edge-img), linear-gradient(black, black);
  -webkit-mask-size: var(--edge-tile) var(--edge-h), 100% calc(100% - var(--edge-h) + var(--trim-bite));
  -webkit-mask-position: bottom left, top left;
  -webkit-mask-repeat: repeat-x, no-repeat;
  mask-image: var(--edge-img), linear-gradient(black, black);
  mask-size: var(--edge-tile) var(--edge-h), 100% calc(100% - var(--edge-h) + var(--trim-bite));
  mask-position: bottom left, top left;
  mask-repeat: repeat-x, no-repeat;
  /* keep content clear of the shaped edge */
  padding-bottom: calc(var(--sp-section) + var(--edge-h) * .7);
}

/* Torn paper — irregular, like a sheet pulled against a straightedge. */
.ed.edge-torn {
  --edge-h: clamp(14px, 2.2vw, 26px);
  --edge-tile: 160px;
  --edge-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 22' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0 0H160V11l-9 5-11-5-12 6-12-5-12 6-12-5-12 6-12-6-12 5-12-6-11 5-10-5-11 6z'/%3E%3C/svg%3E");
}

/* Scallop — the repeating half-round of a lace hem. */
.ed.edge-scallop {
  --edge-h: clamp(12px, 1.8vw, 20px);
  --edge-tile: 44px;
  --edge-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 14'%3E%3Cpath fill='black' d='M0 0H44V3A11 11 0 0 1 22 3A11 11 0 0 1 0 3Z'/%3E%3C/svg%3E");
}

/* Lace — scallops with a course of eyelets punched above them. */
.ed.edge-lace {
  --edge-h: clamp(16px, 2.4vw, 28px);
  --edge-tile: 44px;
  --edge-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 20'%3E%3Cpath fill='black' fill-rule='evenodd' d='M0 0H44V9A11 11 0 0 1 22 9A11 11 0 0 1 0 9Z M11 5a2.2 2.2 0 1 0 0.1 0Z M33 5a2.2 2.2 0 1 0 0.1 0Z'/%3E%3C/svg%3E");
}

/* Wave — a long soft undulation, barely there. */
.ed.edge-wave {
  --edge-h: clamp(12px, 1.8vw, 20px);
  --edge-tile: 200px;
  --edge-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0 0H200V6C170 16 130-2 100 6 70 14 30-2 0 6Z'/%3E%3C/svg%3E");
}

/* Your own shape — an uploaded image used as the mask. By default the mask
   reads transparency; `edge-lum` reads brightness instead, so a black-backed
   PNG (white keeps, black cuts) works without an alpha channel. */
.ed.edge-custom {
  --edge-h: clamp(16px, 3vw, 44px);
  --edge-tile: 100%;
}
.ed.edge-lum, .ed-hero.edge-lum .hero {
  -webkit-mask-source-type: luminance, alpha;
  mask-mode: luminance, alpha;
}

/* Dissolve — the ground fades out rather than ending. */
.ed.edge-fade {
  --edge-h: clamp(40px, 7vw, 110px);
  --edge-tile: 100%;
  --edge-img: linear-gradient(to top, transparent, black);
}

/* A shaped edge and a photograph both want the picture to reach the cut. */
.ed.has-edge > .m-backdrop, .ed.has-edge > .ed-scrim { bottom: 0; }

@media (max-width: 759px) {
  .ed.edge-torn    { --edge-tile: 120px; }
  .ed.edge-wave    { --edge-tile: 150px; }
  .ed.edge-scallop, .ed.edge-lace { --edge-tile: 34px; }
}

/* Standalone decorative bands, for a divider between two plain sections.
   Drawn as masks over a colour fill rather than coloured SVG, so they take
   the palette like everything else. */
.lacework {
  height: clamp(22px, 3.4vw, 40px);
  background-color: var(--c-accent);
  opacity: .85;
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: auto 100%; mask-size: auto 100%;
}
.ed-dark .lacework { background-color: var(--c-banner-accent); }

.lacework-lace {
  -webkit-mask-image: var(--lace-mask); mask-image: var(--lace-mask);
  --lace-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 30'%3E%3Cg fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M0 4h96'/%3E%3Cpath d='M4 4v3a20 20 0 0 0 40 0V4'/%3E%3Cpath d='M52 4v3a20 20 0 0 0 40 0V4'/%3E%3C/g%3E%3Cg fill='black'%3E%3Ccircle cx='24' cy='20' r='3'/%3E%3Ccircle cx='72' cy='20' r='3'/%3E%3Ccircle cx='48' cy='8' r='2.2'/%3E%3Ccircle cx='0' cy='8' r='2.2'/%3E%3Ccircle cx='96' cy='8' r='2.2'/%3E%3C/g%3E%3C/svg%3E");
}
.lacework-vine {
  -webkit-mask-image: var(--vine-mask); mask-image: var(--vine-mask);
  --vine-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 30'%3E%3Cpath fill='none' stroke='black' stroke-width='1.8' d='M0 15c15-13 30 13 45 0s30-13 45 0 20 13 30 0'/%3E%3Cpath fill='black' d='M22 8c0-4 3-7 7-7 0 4-3 7-7 7ZM68 22c0 4 3 7 7 7 0-4-3-7-7-7ZM45 15c4-2 8 0 9 4-4 2-8 0-9-4Z'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- trim ----
   A decorative band laid ACROSS the seam — the artwork itself, shown at its
   own colours. This is the opposite of a shaped edge, which uses an image to
   cut the section away. A lace strip, a curtain valance, a painted border.

   It hangs outside the section, so a section carrying one must not clip. */

.ed.has-trim { overflow: visible; }
/* A band hanging below reserves its drop, so what follows clears it while the
   band still covers the gap — draped over the next section, not pushed off. */
/* The reserve shrinks by whatever the band was carried down, so the section
   below rises to meet it and the band laps over that section instead of a
   gap opening above it. */
.ed.has-trim-bottom {
  margin-bottom: calc(var(--trim-render-h, 0px) - var(--trim-bite) - var(--trim-shift, 0px));
}
.ed.has-trim-top { margin-top: calc(var(--trim-render-h, 0px) - var(--trim-bite)); }

/* A band lies on the section beneath it: without this the next section, being
   later in the document, would paint over the cloth. */
.ed.has-trim-bottom { position: relative; z-index: 3; }

.ed {
  /* One rendered height drives the band, its offset and the space reserved
     below it, so they can never disagree when the band scales down. */
  --trim-render-h: var(--trim-h, 90px);
  /* Every edge treatment bites this far into the section it sits on. A band
     whose top lands exactly on the seam still shows a hairline of page
     through it — subpixel rounding, or a soft edge in the artwork itself. A
     few pixels of overlap kills it and is far below noticing. */
  --trim-bite: min(3px, calc(var(--trim-render-h) * .1));
}
.ed-trim {
  position: absolute;
  /* A band laid between two sections belongs to the page, not to the text
     column — penned inside the measure it floats with bare paper either side.
     Same escape the curtain makes: wider than the window, pulled back by half
     the excess, so equal amounts fall past each edge and only the middle of
     the cloth is seen. Centred on the section rather than inset by it, so the
     section's own width and padding are untouched. */
  left: 50%;
  right: auto;
  inline-size: calc(100vw * var(--trim-over, 1.1));
  margin-inline-start: calc(100vw * var(--trim-over, 1.1) / -2);
  height: var(--trim-render-h);
  z-index: 5;
  pointer-events: none;
  background-image: var(--trim-img);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;     /* stretch across by default */
}
.ed-trim-repeat {
  background-repeat: repeat-x;
  background-size: auto 100%;
}
/* Flush against the edge it hangs from: the band's top edge lands exactly on
   the section's bottom, so nothing of the section shows beneath it. */
/* The band stays anchored to the seam it hangs from — moving it down would
   open the very gap it exists to close. The shift is spent on the reserve
   below instead, so the next section rises to lap underneath the cloth. */
.ed-trim-bottom { bottom: calc(var(--trim-render-h) * -1 + var(--trim-bite)); }
.ed-trim-top    { top: calc(var(--trim-render-h) * -1 + var(--trim-bite)); }

/* A hero clips its own banner, so a band hanging off it needs room. */
.ed-hero.has-trim .hero { overflow: visible; }

@media (max-width: 759px) {
  /* Bands scale down on a phone. Scaling the shared height keeps the offset
     and the reserved space in step with it. */
  .ed { --trim-render-h: calc(var(--trim-h, 90px) * .62); }
}

/* ---------------------------------------------- per-section type controls --
   A section can depart from the site's typography. The picker shows each face
   in itself, and the colour swatches are drawn from the live palette, so both
   lists are specimens rather than names you have to audition one at a time. */

.ink-pick {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 6px;
}

.ink-sw {
  inline-size: 30px; block-size: 30px; padding: 0;
  border-radius: 50%; cursor: pointer;
  background: var(--sw, transparent);
  border: 1px solid var(--c-rule-strong);
  box-shadow: inset 0 0 0 2px var(--c-bg-raised);
  transition: transform .12s ease, box-shadow .12s ease;
}
.ink-sw:hover { transform: translateY(-1px); }
.ink-sw.is-on {
  box-shadow: inset 0 0 0 2px var(--c-bg-raised), 0 0 0 2px var(--c-ink);
}

/* "Match the site" reads as the absence of a colour, not as another colour. */
.ink-auto {
  background:
    linear-gradient(135deg, transparent 44%, var(--c-ink-faint) 44%,
      var(--c-ink-faint) 56%, transparent 56%),
    var(--c-bg);
}

@media (max-width: 759px) { .ink-sw { inline-size: 34px; block-size: 34px; } }

/* Each challenge's run of bookmarks inside the archive section. */
.arc-group + .arc-group { margin-top: 2.4rem; padding-top: 2rem; border-top: 1px solid var(--c-rule); }
.arc-group .ed-head-split { margin-bottom: 1rem; }

/* ------------------------------------------------- per-section type UI ---
   Four rows, one per role: the face (shown in itself) and its colour. Both
   open a picker — a native <select> renders options in the UI font, which
   defeats the point of choosing a typeface. */

.type-row {
  display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
  padding: .55rem 0;
  border-top: 1px solid var(--c-rule);
}
.type-row-label {
  flex: 0 0 7.5rem;
  font-family: var(--f-ui); font-size: var(--fs-label);
  letter-spacing: var(--ls-label); text-transform: var(--tt-label);
  color: var(--c-ink-faint);
}
.type-row-ctl { flex: 1; display: flex; align-items: center; gap: .5rem; min-width: 0; }

.face-btn {
  flex: 1; min-width: 0;
  text-align: left; cursor: pointer;
  padding: .5rem .7rem;
  font-size: 1.02rem; line-height: 1.3;
  color: var(--c-ink);
  background: var(--c-bg-raised);
  border: 1px solid var(--c-rule-strong); border-radius: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.face-btn:hover { border-color: var(--c-accent); }

.ink-dot {
  flex: 0 0 auto; inline-size: 34px; block-size: 34px; padding: 0;
  border-radius: 50%; cursor: pointer;
  background: var(--sw, transparent);
  border: 1px solid var(--c-rule-strong);
  box-shadow: inset 0 0 0 2px var(--c-bg-raised);
}
.ink-dot:hover { border-color: var(--c-accent); }
/* "Match the site" reads as the absence of a colour, not as another colour. */
.ink-dot.is-auto, .ink-sw.ink-auto {
  background:
    linear-gradient(135deg, transparent 44%, var(--c-ink-faint) 44%,
      var(--c-ink-faint) 56%, transparent 56%),
    var(--c-bg);
}

/* The panels expand inside the row. */
.type-pop {
  flex: 1 0 100%;
  margin: .6rem 0 .3rem;
  padding: .7rem;
  background: var(--c-bg-sunk);
  border: 1px solid var(--c-rule);
  border-radius: 4px;
}

/* The specimen sheet. */
.face-list { max-height: 46vh; overflow-y: auto; margin: 0 -.2rem; }
.face-group {
  margin: 1rem 0 .3rem; padding: 0 .2rem;
  font-family: var(--f-ui); font-size: var(--fs-label);
  letter-spacing: var(--ls-label); text-transform: var(--tt-label);
  color: var(--c-ink-faint);
}
.face-opt {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  inline-size: 100%; text-align: left; cursor: pointer;
  padding: .6rem .7rem; border: 1px solid transparent; border-radius: 3px;
  background: none; color: var(--c-ink);
}
.face-opt:hover { background: var(--c-bg-sunk); }
.face-opt.is-on { border-color: var(--c-accent); background: var(--c-accent-soft); }
.face-specimen { font-size: 1.25rem; line-height: 1.2; }
.face-sample { font-size: 1rem; color: var(--c-ink-faint); white-space: nowrap; }

/* The colour picker: palette, then a wheel and a hex box. */
.ink-custom-row { display: flex; align-items: flex-end; gap: .7rem; margin-top: .9rem; }
.ink-wheel {
  position: relative; overflow: hidden; flex: 0 0 auto;
  inline-size: 44px; block-size: 44px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--c-rule-strong);
  background: conic-gradient(#c9787e, #e0b35a, #8fa58b, #7d9fcf, #c9787e);
}
.ink-wheel input[type="color"] {
  position: absolute; inset: -6px; inline-size: calc(100% + 12px);
  block-size: calc(100% + 12px); padding: 0; border: 0; opacity: 0; cursor: pointer;
}
.ink-custom-row input[type="text"] { font-family: var(--f-ui); text-transform: uppercase; }

@media (max-width: 559px) {
  .type-row { flex-wrap: wrap; gap: .4rem; }
  .type-row-label { flex: 1 0 100%; }
}

/* --------------------------------------------------------- mode toggle ---
   One tap between light and dark, in the masthead where it can be found.
   Whichever icon is showing is what a tap gives you. */
.mode-toggle { flex: 0 0 auto; color: var(--c-ink-soft); }
/* It sits last in the masthead, so the actions slot's auto margin carries it
   to the right edge in both layouts without a second competing margin. */
/* A primary control on a phone needs a thumb-sized target, whatever the icon. */
@media (pointer: coarse) { .mode-toggle { min-inline-size: 44px; min-block-size: 44px; } }
.mode-toggle:hover { color: var(--c-accent); }
.mode-toggle .mode-moon { display: none; }
.mode-toggle[data-mode="dark"] .mode-sun { display: none; }
.mode-toggle[data-mode="dark"] .mode-moon { display: block; }

/* ------------------------------------------------------------- curtain ---
   A proscenium around a whole section: valance across the top, drapes down
   both sides, tied-back bunches in the corners.

   Drawn as a nine-slice border-image on an overlay rather than a background,
   because a background can only stretch the whole picture — which squashes
   the valance on a tall section and stretches it flat on a short one. A
   nine-slice keeps the corners fixed, repeats the valance along the top and
   runs the drapes down however far the section goes.

   The slices are measured from the picture when it is added (assets.js), so
   the only thing to choose is how wide the drapes hang. */

.ed.has-curtain {
  position: relative;
  /* A curtain hangs off the edges of the page, not off the edges of the text
     column. Same escape the photo grounds use. */
  max-width: none;
  /* Content sits inside the opening: in past the drapes, down past the arch.
     Both come from proportions measured in the picture itself. */
  padding-inline: max(
    calc((100% - var(--w-content)) / 2 + var(--sp-page-x)),
    calc(var(--cur-side) + 1.6rem),
    var(--sp-page-x));
  /* How far the curtain rides up over the section above, so it covers the
     seam rather than meeting it. ~75px at a 2048px viewport; floored so a
     phone still overlaps, capped so a wide screen does not swallow the
     banner. Purely a position: the curtain's height is untouched. */
  --cur-lift: clamp(18px, 3.66vw, 96px);
  /* Air between the hem and the first line of text: an editorial gap on a
     wide screen, never less than 24px on a narrow one. */
  --cur-clear: clamp(24px, 4.5vw, 70px);
  /* The curtain is hung wider than the window so its outer folds fall past
     both edges and it reads as cloth hanging outside the page rather than a
     picture cut to fit. Width and height both take this factor, so it is a
     uniform enlargement — the folds are never stretched sideways. */
  --cur-over: 1.1;
  /* Its overhang is clipped here rather than on a page-level container:
     `clip` (not `hidden`) leaves the vertical axis alone, so the curtain
     still hangs up over the banner, and no scroll container is created to
     break the sticky masthead. */
  overflow-x: clip;
  /* Where the valance's deepest point lands, measured from the section's top:
     its depth in the picture, less however far the curtain was lifted over
     the section above. Reserve to there plus breathing room — and never less
     than the section's own spacing, for a shallow curtain or a big lift. */
  padding-block-start: max(
    calc(var(--cur-arch) * var(--cur-over) - var(--cur-lift) - var(--trim-bite, 3px)
      + var(--cur-clear) + var(--cur-gap, 0px)),
    var(--sp-section));
}
.ed.has-curtain.sp-flush {
  padding-block-start: max(
    calc(var(--cur-arch) * var(--cur-over) - var(--cur-lift) - var(--trim-bite, 3px)
      + var(--cur-clear)),
    1rem);
}

/* One picture, drawn whole and hung from the top. Not a nine-slice: a
   nine-slice's opening is a rectangle, so an arch came out as a box with
   square corners. Drawn whole, the painted silhouette is what you see —
   scalloped hem, tapering drapes, the page showing through the arch.

   It reaches a few pixels up over the section above for the same reason the
   hanging bands do: a section's height is fractional, and landing exactly on
   the seam leaves a hairline of page. */
.ed-curtain {
  position: absolute;
  /* Lifted over the section above, plus the hairline bite. Nothing here
     changes how tall the curtain is — only where it sits. */
  top: calc((var(--cur-lift, 0px) + var(--trim-bite, 3px)) * -1);
  /* Wider than its section and pulled back by half the excess, so equal
     amounts fall past each edge. Percentages resolve against the section's
     padding box, which is the full width of the window. */
  left: calc((var(--cur-over, 1) - 1) / -2 * 100%);
  right: auto;
  width: calc(100% * var(--cur-over, 1));
  height: calc(var(--cur-h) * var(--cur-over, 1));
  z-index: 6; pointer-events: none;
  background-image: var(--cur-img);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 100%;
}

/* The page clips sideways overhang — a band or a curtain hung wider than the
   window must not make the page scrollable. `clip`, not `hidden`: the vertical
   axis stays visible so a band still hangs into the section below, and no
   scroll container is created to break the sticky masthead. */
#app { overflow-x: clip; }

/* A curtained section's own stacking context must not trap the overlay below
   the banner above it: the banner isolates (it carries a photo ground), so the
   curtain's section is lifted as a whole and the overlay rides inside it. */
.ed.has-curtain { z-index: 2; }
/* And the banner must not crop what hangs over it. A photo ground clips to
   keep its own backdrop tidy; that would cut the curtain off at the seam. */
.ed.has-bg:has(+ .ed.has-curtain) { overflow: visible; }

/* A hero is already full bleed and its type is centred in the banner, so it
   needs no block inset — only enough side room to clear the drapes. */
.ed-hero.has-curtain { padding-block-start: 0; padding-inline: 0; }
.ed-hero.has-curtain .hero { overflow: visible; }
.ed-hero.has-curtain .hero-type { padding-inline: calc(var(--cur-side) + 1.6rem); }

/* The second curtain placement is a true bottom-edge treatment. The same
   transparent picture is mirrored vertically so the valance finishes at the
   bottom seam; text clearance is reserved below, not above. */
.ed.has-curtain.curtain-bottom { padding-block-start: var(--sp-section); padding-block-end: max(calc(var(--cur-arch) * var(--cur-over) - var(--cur-lift) + var(--cur-clear) + var(--cur-gap,0px)),var(--sp-section)); }
.ed.has-curtain.curtain-bottom .ed-curtain { top: auto; bottom: calc((var(--cur-lift,0px) + var(--trim-bite,3px)) * -1); transform: scaleY(-1); }
.ed-hero.has-curtain.curtain-bottom { padding-block-start: 0; padding-block-end: 0; }
.ed-hero.has-curtain.curtain-bottom .hero-type { padding-bottom: max(calc(var(--cur-arch) * var(--cur-over) + var(--cur-clear) + var(--cur-gap,0px)),var(--sp-section)); }

@media (max-width: 1000px) {
  /* Keep the painted curtain's width and height in the same proportion.
     Shrinking only its height detached its folds from the section edges on
     phones and made the valance look like unrelated corner ornaments. */
  .ed.has-curtain {
    --cur-over: 1;
    --cur-lift: clamp(8px, 2vw, 18px);
    --cur-clear: clamp(18px, 4vw, 30px);
    padding-inline: max(calc(var(--cur-side) + .65rem), var(--sp-page-x));
    padding-block-start: max(
      calc(var(--cur-arch) * var(--cur-over) - var(--cur-lift)
        - var(--trim-bite, 3px) + var(--cur-clear) + var(--cur-gap, 0px)),
      calc(var(--sp-section) * .6));
  }
  .ed.has-curtain.curtain-bottom { padding-block-start: calc(var(--sp-section) * .6); padding-block-end: max(calc(var(--cur-arch) * var(--cur-over) - var(--cur-lift) + var(--cur-clear) + var(--cur-gap,0px)),calc(var(--sp-section) * .6)); }
  .ed-hero.has-curtain.curtain-bottom { padding-block-start: 0; padding-block-end: 0; }
  .ed-hero.has-curtain.curtain-bottom .hero-type { padding-bottom: max(calc(var(--cur-arch) * var(--cur-over) + var(--cur-clear) + var(--cur-gap,0px)),var(--sp-section)); }
}

/* ------------------------------------------------------- word of the year --
   One word, set as large as the measure allows: it is the focal point, so it
   is sized against the viewport rather than the type scale. */

.word-word {
  margin: .1em 0 0;
  font-family: var(--f-display);
  font-size: clamp(3.2rem, 13vw, 11rem);
  font-weight: var(--fw-display);
  line-height: .9;
  letter-spacing: -.012em;
  text-transform: var(--tt-display);
  color: var(--c-title-ink, var(--c-accent));
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}
.word-note {
  margin: 1.1rem 0 0;
  font-family: var(--f-body);
  font-style: italic;
  font-size: var(--fs-lead);
  color: var(--c-body-ink, var(--c-ink-soft));
  max-width: 34ch;
}
.word-tally { margin: 1.3rem 0 0; }
.word-link {
  font-family: var(--f-ui); font-size: var(--fs-label);
  letter-spacing: var(--ls-label); text-transform: var(--tt-label);
  color: var(--c-accent); text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.word-link:hover { color: var(--c-accent-deep); }

.word-center { text-align: center; }
.word-center .word-note { margin-inline: auto; }
.word-right { text-align: right; }
.word-right .word-note { margin-inline-start: auto; }

/* With a picture beside it, the word takes the larger share. */
.word-split {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 5fr);
  gap: clamp(1.6rem, 5vw, 4.5rem);
  align-items: center;
}
.word-split.is-flipped { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr); }
.word-split.is-flipped .word-pic { order: 2; }

/* The tally page's summary figures. */
.wstats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: clamp(1rem, 3vw, 2.4rem);
  margin: 0 0 1.8rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--c-rule);
  text-align: center;
}
.wstat-n {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  line-height: 1;
  color: var(--c-accent);
}
.wstat-l {
  display: block; margin-top: .35rem;
  font-family: var(--f-ui); font-size: var(--fs-label);
  letter-spacing: var(--ls-label); text-transform: var(--tt-label);
  color: var(--c-ink-faint);
}

.word-count {
  flex: 0 0 auto;
  font-family: var(--f-display);
  font-size: 1.3rem;
  color: var(--c-accent);
  padding-inline: .8rem .2rem;
}

/* The editor's per-book tally list. */
.wlist { max-height: 46vh; overflow-y: auto; margin-top: .5rem; }
.wrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5rem;
  grid-template-areas: "title n" "meta n";
  align-items: center;
  gap: 0 .8rem;
  padding: .5rem .6rem;
  border-bottom: 1px solid var(--c-rule);
  cursor: text;
}
.wrow.is-on { background: var(--c-accent-soft); }
.wrow-title { grid-area: title; font-weight: 500; }
.wrow-meta { grid-area: meta; font-size: .85em; color: var(--c-ink-faint); }
.wrow input { grid-area: n; text-align: center; }

@media (max-width: 759px) {
  .word-split, .word-split.is-flipped { grid-template-columns: minmax(0, 1fr); }
  .word-split.is-flipped .word-pic { order: 0; }
  /* justify-self, not margin:auto — an auto margin makes a grid item
     shrink-to-fit, and the figure inside is width:100%, so the pair collapse
     to nothing. */
  .word-pic { inline-size: 100%; max-inline-size: 320px; justify-self: center; }
}

/* The eligible-books picker: the tick shows what counts now, whether the rule
   decided it or you did. */
.elist { max-height: 50vh; overflow-y: auto; margin-top: .6rem; }
.erow {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: start; gap: .7rem;
  padding: .6rem;
  border-bottom: 1px solid var(--c-rule);
  cursor: pointer;
}
.erow.is-on { background: var(--c-accent-soft); }
.erow input { margin-top: .25rem; }
.erow-body { display: block; min-width: 0; }
.erow-title { display: block; font-weight: 500; }
.erow-meta { display: block; font-size: .85em; color: var(--c-ink-faint); }
.erow-why {
  display: block; margin-top: .15rem;
  font-family: var(--f-ui); font-size: .72em;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--c-accent);
}

/* A sheet opened on top of another says how to get back to it. */
.sheet-back {
  display: inline-flex; align-items: center; gap: .3rem;
  margin: 0 0 .9rem; padding: .3rem .6rem .3rem 0;
  background: none; border: 0; cursor: pointer;
  font-family: var(--f-ui); font-size: var(--fs-label);
  letter-spacing: var(--ls-label); text-transform: var(--tt-label);
  color: var(--c-accent);
}
.sheet-back:hover { color: var(--c-accent-deep); }
@media (pointer: coarse) { .sheet-back { padding: .6rem 1rem .6rem 0; min-block-size: 44px; } }

/* ------------------------------------------------- type style controls ---
   Weight, style, size, tracking and case for one role, inside the panel its
   face button opens. Four roles stay four rows; the depth is on demand. */

.sty-block { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--c-rule); }
.sty-head {
  margin: .9rem 0 .4rem;
  font-family: var(--f-ui); font-size: var(--fs-label);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--c-ink-faint);
}
.sty-head:first-child { margin-top: 0; }
.sty-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.sty-chip {
  padding: .34rem .66rem;
  font-family: var(--f-ui); font-size: .78rem;
  color: var(--c-ink-soft);
  background: var(--c-bg-raised);
  border: 1px solid var(--c-rule-strong); border-radius: 2px;
  cursor: pointer;
}
.sty-chip:hover:not(:disabled) { border-color: var(--c-accent); color: var(--c-ink); }
.sty-chip.is-on {
  background: var(--c-accent); border-color: var(--c-accent); color: var(--c-accent-ink);
}
.sty-chip:disabled { opacity: .4; cursor: not-allowed; }

.sty-slider { margin-top: .8rem; }
.sty-slider label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--f-ui); font-size: var(--fs-label);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--c-ink-faint);
}
.sty-slider input { inline-size: 100%; margin-top: .3rem; }

@media (pointer: coarse) { .sty-chip { padding: .5rem .8rem; } }

/* -------------------------------------------------------- rich text field --
   Emphasis on a phrase rather than a whole element. */
.rich-bar { display: flex; gap: .3rem; margin: .3rem 0; }
.rich-btn {
  inline-size: 30px; block-size: 28px; padding: 0;
  font-family: var(--f-body); font-size: .95rem;
  color: var(--c-ink-soft);
  background: var(--c-bg-raised);
  border: 1px solid var(--c-rule-strong); border-radius: 2px;
  cursor: pointer;
}
.rich-btn:hover { border-color: var(--c-accent); color: var(--c-accent); }
.rich-clear { font-size: .85rem; }
.rich-input {
  min-block-size: 2.6rem;
  padding: .55rem .7rem;
  font-family: var(--f-body); font-size: var(--fs-body);
  color: var(--c-ink);
  background: var(--c-bg-raised);
  border: 1px solid var(--c-rule-strong); border-radius: 3px;
  white-space: pre-wrap; overflow-wrap: break-word;
}
.rich-input:focus { outline: 2px solid var(--c-accent); outline-offset: 1px; }
.rich-input b { font-weight: 700; }
.rich-input i { font-style: italic; }
@media (pointer: coarse) { .rich-btn { inline-size: 40px; block-size: 40px; } }

/* ========================================================================
   THE ILLUSTRATED LITERARY SALON — typographic finish
   Delicate rules, editorial navigation, restrained buttons. Everything here
   reads the role tokens, so a section override still wins over it.
   ===================================================================== */

/* A copperplate's entrance and exit strokes reach outside the glyph box; the
   wordmark needs room for them and must never clip or force a page scroll. */
.wordmark {
  padding-inline: .14em;
  padding-block: .06em;
  overflow: visible;
  line-height: 1.5;
}
.masthead, .masthead-inner { overflow: visible; }
.ed-script, .marginalia.big { overflow-wrap: normal; }

/* Navigation: small, widely spaced, with a hairline that draws on approach
   rather than a block of colour. */
.masthead-link {
  position: relative;
  font-weight: 500;
  letter-spacing: var(--ls-nav);
}
.masthead-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -.38em;
  block-size: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform .22s ease;
}
.masthead-link:hover::after,
.masthead-link[aria-current]::after { transform: scaleX(1); }

/* Buttons read as editorial labels, not as interface chrome. */
.btn {
  font-family: var(--f-ui);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: var(--tt-label);
}

/* Metadata and captions share one quiet treatment. */
.ed-meta, .shelf-meta, .entry-meta, .hint, .marginalia {
  font-feature-settings: 'onum' 1, 'liga' 1;
}

/* Old-style figures wherever numerals sit inside running text; lining figures
   where they are a measurement and want to align. */
.ed-body, .ed-sub, .statement, .marginalia { font-variant-numeric: oldstyle-nums; }
.wstat-n, .measure-stat, .tick .tag { font-variant-numeric: lining-nums tabular-nums; }

/* A hairline above a section heading, the editorial equivalent of a breath. */
.ed-head { position: relative; }

/* Script set at a size needs its leading opened or the flourishes collide. */
.marginalia.big { line-height: 1.45; padding-block: .1em; }

/* A role's controls shown with the field they style: no second label, and
   tucked under the input so the pairing reads at a glance. */
.type-row.is-inline {
  display: block;
  margin-top: .4rem;
  padding: 0;
  border-top: 0;
}
.type-row.is-inline .type-row-ctl { gap: .4rem; }
.type-row.is-inline .face-btn {
  padding: .34rem .6rem;
  font-size: .9rem;
}
.type-row.is-inline .ink-dot { inline-size: 28px; block-size: 28px; }
@media (pointer: coarse) {
  .type-row.is-inline .ink-dot { inline-size: 36px; block-size: 36px; }
}

/* ------------------------------------------------------------- fine-tune --
   The craft settings are all still here; they just do not greet you. */
.fine {
  margin-top: 1.1rem;
  border-top: 1px solid var(--c-rule);
  padding-top: .8rem;
}
.fine > summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--f-ui); font-size: var(--fs-label);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--c-ink-faint);
  padding: .35rem 0;
}
.fine > summary::-webkit-details-marker { display: none; }
.fine > summary::before { content: '▸ '; display: inline-block; transition: transform .15s ease; }
.fine[open] > summary::before { content: '▾ '; }
.fine > summary:hover { color: var(--c-accent); }
.fine-body { padding-top: .6rem; }

/* ------------------------------------------------------ drag to reorder --- */
.lay-row { cursor: default; }
.lay-row[draggable="true"] .lay-grip {
  display: block;
  cursor: grab;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--c-ink-faint);
  text-align: center;
  padding: .15rem 0 .25rem;
  user-select: none;
}
.lay-row[draggable="true"] .lay-grip:active { cursor: grabbing; }
.lay-row.is-dragging { opacity: .45; }
.lay-row.is-over { box-shadow: inset 0 2px 0 var(--c-accent); }
/* The arrows stay for keyboards and for a single step, just quieter. */
.lay-nudge { opacity: .5; }
.lay-row:hover .lay-nudge, .lay-nudge:focus-visible { opacity: 1; }

/* ------------------------------------------------------- editing on page --
   The page stays itself; editing just makes its words answer the cursor. */
.edit-toggle[aria-pressed="true"] { color: var(--c-accent); }

body.is-editing [data-edit] {
  outline: 1px dashed color-mix(in srgb, var(--c-accent) 55%, transparent);
  outline-offset: .22em;
  border-radius: 2px;
  cursor: text;
  transition: background .15s ease;
}
body.is-editing [data-edit]:hover {
  background: color-mix(in srgb, var(--c-accent) 8%, transparent);
}
body.is-editing [data-edit]:focus {
  outline: 2px solid var(--c-accent);
  background: color-mix(in srgb, var(--c-accent) 6%, transparent);
}

body.is-editing [data-sec] { position: relative; }
.edit-tools {
  position: absolute; top: .5rem; right: .5rem;
  z-index: 20;
  opacity: 0; transition: opacity .15s ease;
}
body.is-editing [data-sec]:hover > .edit-tools,
.edit-tools:focus-within { opacity: 1; }
.edit-chip {
  font-family: var(--f-ui); font-size: var(--fs-label);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  padding: .36rem .7rem;
  color: var(--c-accent-ink);
  background: var(--c-accent);
  border: 0; border-radius: 2px;
  cursor: pointer;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .18);
}
.edit-chip:hover { background: var(--c-accent-deep); }
@media (pointer: coarse) {
  .edit-tools { opacity: 1; }
  .edit-chip { padding: .5rem .9rem; }
}

/* ------------------------------------------------------------- type bar ---
   Styling where the words are: bold and italic act on what is selected, the
   rest belongs to the role this text is drawn in. */
.type-bar {
  position: fixed; z-index: 60;
  display: flex; align-items: center; gap: .25rem;
  padding: .35rem .45rem;
  background: var(--c-bg-raised);
  border: 1px solid var(--c-rule-strong);
  border-radius: 4px;
  box-shadow: 0 6px 22px rgba(28, 18, 14, .18);
}
.type-bar[hidden] { display: none; }
.type-bar button {
  min-inline-size: 30px; block-size: 28px; padding: 0 .4rem;
  font-family: var(--f-body); font-size: .92rem;
  color: var(--c-ink-soft);
  background: none; border: 1px solid transparent; border-radius: 2px;
  cursor: pointer;
}
.type-bar button:hover:not(:disabled) { background: var(--c-bg-sunk); color: var(--c-ink); }
.type-bar button.is-on { background: var(--c-accent); color: var(--c-accent-ink); }
.type-bar button:disabled { opacity: .35; cursor: not-allowed; }
.type-bar select {
  max-inline-size: 11rem; block-size: 28px;
  font-family: var(--f-ui); font-size: .8rem;
  padding: 0 .3rem;
  border: 1px solid var(--c-rule-strong); border-radius: 2px;
  background: var(--c-bg); color: var(--c-ink);
}
.tb-sep { inline-size: 1px; block-size: 18px; background: var(--c-rule); }
.tb-ink { position: relative; display: grid; place-items: center; cursor: pointer; }
.tb-ink.is-off { opacity: .35; pointer-events: none; }
.tb-dot {
  inline-size: 22px; block-size: 22px; border-radius: 50%;
  border: 1px solid var(--c-rule-strong);
  box-shadow: inset 0 0 0 2px var(--c-bg-raised);
}
.tb-dot.is-auto {
  background:
    linear-gradient(135deg, transparent 44%, var(--c-ink-faint) 44%,
      var(--c-ink-faint) 56%, transparent 56%), var(--c-bg) !important;
}
.tb-ink input[type="color"] {
  position: absolute; inset: 0; inline-size: 100%; block-size: 100%;
  opacity: 0; border: 0; padding: 0; cursor: pointer;
}
@media (pointer: coarse) {
  .type-bar button { min-inline-size: 40px; block-size: 38px; }
  .type-bar select { block-size: 38px; }
}
/* Phase 1: independent, section-anchored freeform canvas. */
#app [data-sec] { position: relative; }
#app > .canvas-page-surface[data-sec] { position: absolute; inset: 0; z-index: 15; pointer-events: none; }
#app:has(> .canvas-page-surface) { position: relative; }
.canvas-layer { position: absolute; inset: 0; pointer-events: none; z-index: 15; }
.canvas-item { position: absolute; max-width: 90%; transform-origin: top left; pointer-events: none; min-height: 20px; }
.canvas-item img { display: block; width: 100%; height: auto; user-select: none; }
.canvas-item.canvas-image.frame-fine { padding: 6px; border: 1px solid #b6a48d; background: var(--c-bg); box-shadow: inset 0 0 0 2px var(--c-bg), inset 0 0 0 3px #b6a48d; }
.canvas-item.canvas-image.frame-ornate { border: 23px solid transparent; border-image-source: url('../assets/frames/antique-gilt-rectangle.webp'); border-image-slice: 175; border-image-repeat: stretch; filter: drop-shadow(0 6px 10px rgba(44,28,16,.24)); }
.canvas-item.canvas-image.frame-gilded-round, .canvas-item.canvas-image.frame-gilded-oval { padding: 0; filter: drop-shadow(0 6px 10px rgba(44,28,16,.24)); }
.canvas-item.canvas-image.frame-gilded-round { aspect-ratio: 1 / 1; }
.canvas-item.canvas-image.frame-gilded-oval { aspect-ratio: 3 / 4; }
.canvas-item.canvas-image.frame-gilded-round > img, .canvas-item.canvas-image.frame-gilded-oval > img { position: absolute; width: 64%; height: 64%; inset: 18%; border-radius: 50%; object-fit: cover; }
.canvas-item.canvas-image.frame-gilded-oval > img { width: 64%; height: 66%; inset: 17% 18%; }
.canvas-item.canvas-image.frame-gilded-round::after, .canvas-item.canvas-image.frame-gilded-oval::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-size: 100% 100%; background-repeat: no-repeat; }
.canvas-item.canvas-image.frame-gilded-round::after { background-image: url('../assets/frames/antique-gilt-round.webp'); }
.canvas-item.canvas-image.frame-gilded-oval::after { background-image: url('../assets/frames/antique-gilt-oval.webp'); }
.canvas-item.canvas-image.frame-polaroid { padding: 10px 10px 28px; background: #fffaf0; box-shadow: 0 4px 12px rgba(44,28,16,.18); }
.canvas-item.canvas-image .canvas-resize { z-index: 5; }
.canvas-text-content { line-height: 1.12; overflow-wrap: anywhere; white-space: pre-wrap; }
.canvas-editing .canvas-item { pointer-events: auto; cursor: move; touch-action: none; outline: 1px dashed transparent; }
.canvas-editing .canvas-item:hover { outline-color: #a8482a; }
.canvas-editing .canvas-item.is-selected { outline: 2px solid #a8482a; outline-offset: 3px; }
.canvas-resize { display: none; position: absolute; right: -9px; bottom: -9px; width: 18px; height: 18px; background: #a8482a; border: 2px solid white; border-radius: 50%; cursor: nwse-resize; }
.canvas-editing .is-selected .canvas-resize { display: block; }
.canvas-toolbar { display: none; position: fixed; z-index: 1001; bottom: 20px; left: 50%; transform: translateX(-50%); align-items: center; gap: 8px; background: #fdf8f0; color: #4b2828; border: 1px solid #c9b79e; padding: 9px 12px; border-radius: 12px; box-shadow: 0 10px 35px #0002; max-width: calc(100vw - 20px); }
.canvas-editing .canvas-toolbar { display: flex; }
.canvas-toolbar button, .canvas-panel button { border: 1px solid #c9b79e; border-radius: 6px; padding: 7px 10px; color: #4b2828; background: white; font: 500 13px Jost, sans-serif; cursor: pointer; }
.canvas-toolbar-title { font: 600 11px Jost, sans-serif; text-transform: uppercase; letter-spacing: .12em; }
.canvas-save-state { font: 11px Jost, sans-serif; color: #536e50; white-space: nowrap; }
.canvas-panel { position: fixed; z-index: 1002; top: 88px; right: 18px; width: min(300px, calc(100vw - 36px)); max-height: calc(100dvh - 175px); overflow: auto; background: #fdf8f0; color: #4b2828; border: 1px solid #c9b79e; padding: 16px; border-radius: 12px; box-shadow: 0 10px 35px #0002; font: 13px Jost, sans-serif; }
.canvas-panel[hidden] { display: none; }
.canvas-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.canvas-panel label { display: flex; flex-direction: column; gap: 4px; margin: 0 0 10px; font-size: 12px; }
.canvas-panel input, .canvas-panel select, .canvas-panel textarea { width: 100%; min-width: 0; border: 1px solid #c9b79e; background: white; color: #4b2828; border-radius: 5px; padding: 6px; font: inherit; }
.canvas-panel input[type=checkbox] { width: auto; }
.canvas-panel input[type=color] { height: 32px; }
.canvas-panel-row { display: flex; gap: 12px; }
.canvas-panel-row label { flex: 1; min-width: 0; }
.canvas-panel .canvas-remove { width: 100%; color: #a8482a; }
.canvas-picker { position: fixed; inset: 0; background: #0008; z-index: 1100; display: grid; place-items: center; padding: 20px; }
.canvas-picker-dialog { width: min(640px, 100%); max-height: 80vh; overflow: auto; background: #fdf8f0; color: #4b2828; padding: 20px; border-radius: 12px; }
.canvas-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 12px; }
.canvas-picker-grid button { border: 1px solid #c9b79e; background: #f8f0e4; padding: 6px; border-radius: 6px; cursor: pointer; }
.canvas-picker-grid img { width: 100%; height: 100px; object-fit: contain; }
@media (max-width: 700px) {
  .canvas-toolbar { bottom: 92px; gap: 4px; padding: 7px; }
  .canvas-toolbar-title, .canvas-save-state { display: none; }
  .canvas-toolbar button { padding: 7px; font-size: 12px; }
  .canvas-panel { top: auto; bottom: 148px; right: 10px; max-height: 43dvh; }
}

/* A visually distinct, persistent design workspace. */
.edit-toggle { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--c-ink, #4b2828); color: var(--c-ink, #4b2828); background: transparent; border-radius: 5px; padding: 9px 12px; font: 600 11px Jost, sans-serif; letter-spacing: .05em; white-space: nowrap; cursor: pointer; }
.edit-toggle[hidden] { display: none; }
.edit-toggle[aria-pressed="true"] { background: #4b2828; color: #fff5e9; }
/* The editing entry point now lives under Settings → Appearance. */
#edit-page { display: none !important; }
.canvas-editing #app { margin-left: 300px; transition: margin-left .2s ease; }
.canvas-editing .masthead { z-index: 1005; }
.canvas-editing .canvas-toolbar { display: flex; left: 0; right: 0; top: var(--h-masthead, 68px); bottom: auto; width: auto; max-width: none; transform: none; justify-content: flex-end; border-radius: 0; box-shadow: 0 3px 10px #0001; padding: 9px 18px; background: #4b2828; color: #fff5e9; border: 0; }
.canvas-editing .canvas-toolbar-title { margin-right: auto; font-size: 12px; display: inline; }
.canvas-editing .canvas-save-state { display: inline; font-size: 11px; color: #e7d4bc; }
.canvas-editing .canvas-toolbar button { background: #fff5e9; border-color: #fff5e9; }
.canvas-editing .canvas-toolbar button[data-canvas="finish"] { background: #d4763c; color: #fff; border-color: #d4763c; }
.canvas-editing .canvas-panel { display: block; position: fixed; left: 0; top: calc(var(--h-masthead, 68px) + 43px); bottom: 0; right: auto; width: 300px; max-height: none; border: 0; border-right: 1px solid #d8c6ae; border-radius: 0; box-shadow: 4px 0 12px #0001; background: #fbf5eb; padding: 22px 17px; }
.canvas-panel-head { gap: 6px; }
.canvas-live-dot { color: #536e50; font-size: 11px; }
.canvas-panel-tabs { display: flex; border-bottom: 1px solid #d8c6ae; margin-bottom: 22px; gap: 2px; }
.canvas-panel-tabs button { border: 0; border-radius: 0; flex: 1; background: transparent; color: #72534b; padding: 12px 5px; }
.canvas-panel-tabs button.active { border-bottom: 2px solid #a8482a; color: #4b2828; font-weight: 700; }
.canvas-panel h3 { font: 500 23px 'Bodoni Moda',serif; margin: 4px 0 8px; }
.canvas-panel-hint { font: 13px/1.55 Jost,sans-serif; color: #72534b; margin: 0 0 18px; }
.canvas-add-card { display: flex; flex-direction: column; text-align: left; gap: 6px; width: 100%; margin: 0 0 10px; padding: 15px !important; background: #fff !important; border: 1px solid #d8c6ae !important; }
.canvas-add-card strong { font: 600 15px Jost,sans-serif; }
.canvas-add-card span { font: 12px Jost,sans-serif; color: #83665e; }
.canvas-add-card:hover { border-color: #a8482a !important; }
.canvas-panel-links { display: flex; flex-direction: column; gap: 12px; padding: 17px 0; margin: 12px 0; border-top: 1px solid #d8c6ae; }
.canvas-panel-links a { color: #a8482a; text-decoration: underline; font: 12px Jost,sans-serif; }
.canvas-layer-list { display: grid; gap: 6px; }
.canvas-layer-list button { text-align: left; padding: 11px; }
.canvas-layer-list small { float: right; opacity: .5; }
.canvas-layer-row { display: flex; align-items: center; gap: 4px; border: 1px solid var(--c-rule); background: var(--c-bg-raised); border-radius: 3px; min-width: 0; }
.canvas-layer-row.is-active { border-color: var(--c-accent); background: var(--c-accent-soft); }
.canvas-layer-row.is-hidden .canvas-layer-name { opacity: .45; }
.canvas-item[hidden] { display: none !important; }
.canvas-layer-list .canvas-layer-row .canvas-layer-name { display: flex; flex: 1; align-items: center; gap: 9px; min-width: 0; border: 0; background: transparent; padding: 9px 5px 9px 10px; font: .77rem/1.35 var(--f-ui); }
.canvas-layer-name span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.canvas-layer-name span:first-child { color: var(--c-accent); flex: none; }
.canvas-item.is-locked { cursor: default; }
.canvas-item.is-locked .canvas-resize { display: none; }
.canvas-layer-order { display: inline-flex; padding-right: 4px; gap: 2px; }
.canvas-layer-list .canvas-layer-order button { padding: 5px 7px; min-width: 27px; text-align: center; border: 1px solid var(--c-rule); background: transparent; color: var(--c-ink-soft); border-radius: 2px; }
.canvas-layer-list .canvas-layer-order button:hover:not(:disabled) { border-color: var(--c-accent); color: var(--c-accent); }
.canvas-layer-list .canvas-layer-order button:disabled { opacity: .22; cursor: default; }
.canvas-align-buttons { margin: 12px 0 15px; }
.canvas-align-buttons > span { display: block; margin-bottom: 6px; color: var(--c-ink-soft); font: 600 .73rem var(--f-ui); }
.canvas-align-buttons > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.canvas-align-buttons button { padding: 9px 4px; border: 1px solid var(--c-rule-strong); background: var(--c-bg-raised); color: var(--c-ink); font: 600 .72rem var(--f-ui); }
.canvas-align-buttons button:disabled { opacity: .35; cursor: default; }
@media (max-width: 850px) {
  .edit-toggle-label { display: none; }
  .canvas-editing #app { margin-left: 0; padding-bottom: 340px; }
  .canvas-editing .canvas-toolbar { top: auto; bottom: 0; padding: 7px 12px; z-index: 1004; }
  .canvas-editing .canvas-toolbar-title { display: inline; font-size: 10px; }
  .canvas-editing .canvas-save-state { display: none; }
  .canvas-editing .canvas-panel { top: auto; left: 0; right: 0; bottom: 42px; width: 100%; height: 295px; max-height: 42dvh; border-right: 0; border-top: 1px solid #d8c6ae; padding: 13px 17px; z-index: 1003; }
}

/* -----------------------------------------------------------------------
   Literary Journal prototype: a content-first editorial layer over the
   existing Reading Room palette and typography system.
   ----------------------------------------------------------------------- */
.lit-home, .literary-notebook, .lit-writing-form { color: var(--c-ink); }
.lit-home { overflow: hidden; }
.lit-overline, .lit-section-top, .lit-hero-edition, .lit-hero-foot, .lit-entry-number,
.lit-notebook-index, .lit-collection-card>span, .lit-section-number {
  font-family: var(--f-ui); font-size: .68rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase;
}
.lit-home a { color: inherit; }
.lit-hero { min-height: min(780px, 87vh); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(270px,.8fr); grid-template-rows: auto 1fr auto; position: relative; background: var(--c-bg); border-bottom: 1px solid var(--c-rule); padding: clamp(26px,4vw,70px) clamp(25px,7vw,115px) 24px; gap: 0 4vw; }
.lit-hero-edition, .lit-hero-foot { grid-column: 1/-1; display: flex; justify-content: space-between; color: var(--c-ink-soft); }
.lit-hero-edition { padding-bottom: 23px; border-bottom: 1px solid var(--c-rule-strong); }
.lit-hero-content { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 58px 0 75px; }
.lit-hero .lit-overline { color: var(--c-accent); margin-bottom: 32px; }
.lit-hero h1 { font-family: var(--f-display); font-weight: 400; font-size: clamp(4rem,8.7vw,9.5rem); letter-spacing: -.065em; line-height: .91; margin: 0; }
.lit-hero h1 em, .lit-feature h2 em, .lit-outro h2 em, .lit-page-heading h1 em { font-family: var(--f-body); font-weight: 400; }
.lit-hero-period { color: var(--c-accent); }
.lit-hero-deck { font: clamp(1rem,1.6vw,1.3rem)/1.55 var(--f-body); max-width: 440px; margin: 32px 0 30px; color: var(--c-ink-soft); }
.lit-hero-actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.lit-primary-action { border: 1px solid var(--c-ink); display: inline-flex; align-items: center; justify-content: space-between; gap: 25px; background: var(--c-ink); color: var(--c-bg) !important; padding: 13px 18px; font: 600 .72rem var(--f-ui); text-decoration: none; letter-spacing: .04em; cursor: pointer; }
.lit-primary-action:hover { background: var(--c-accent); border-color: var(--c-accent); color: white !important; }
.lit-text-action, .lit-underline-action { font: 600 .72rem var(--f-ui); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 5px; letter-spacing: .04em; }
.lit-hero-art { align-self: center; justify-self: stretch; position: relative; aspect-ratio: .87; max-height: 520px; margin: 40px 0; border: 1px solid var(--c-rule-strong); border-radius: 49% 49% 4px 4px; background: radial-gradient(circle at 44% 29%, color-mix(in srgb,var(--c-blue) 25%,transparent),transparent 43%), linear-gradient(135deg,var(--c-bg-sunk),var(--c-bg-raised) 53%,var(--c-accent-soft)); overflow: hidden; }
.lit-hero-art:before { content: ''; position: absolute; inset: 14px; border: 1px solid var(--c-rule-strong); border-radius: inherit; }
.lit-art-orbit { position: absolute; width: 76%; aspect-ratio: 1; top: 17%; left: 12%; border: 1px solid var(--c-ink-soft); border-radius: 50%; transform: rotate(-17deg) scaleX(.87); opacity: .47; }
.lit-art-initial { position: absolute; inset: 13% 0 auto; text-align: center; font: italic clamp(10rem,23vw,23rem)/1 var(--f-display); color: var(--c-ink); opacity: .75; }
.lit-art-small { position: absolute; top: 53%; right: 22%; font: italic clamp(5rem,9vw,10rem)/1 var(--f-script); color: var(--c-accent); transform: rotate(-16deg); }
.lit-art-caption { position: absolute; left: 13%; right: 13%; bottom: 12%; text-align: center; font: 600 .6rem var(--f-ui); letter-spacing: .13em; }
.lit-hero-foot { border-top: 1px solid var(--c-rule-strong); padding-top: 20px; }
.lit-feature { padding: clamp(60px,8vw,135px) clamp(24px,8vw,130px); }
.lit-section-top { display: flex; justify-content: space-between; align-items: center; gap: 20px; border-bottom: 1px solid var(--c-rule-strong); padding-bottom: 14px; margin-bottom: 50px; color: var(--c-ink-soft); }
.lit-section-top a { text-decoration: none; color: var(--c-accent); }
.lit-feature-writing { background: var(--c-bg-raised); }
.lit-feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,7vw,115px); }
.lit-script-note { font: italic clamp(2.2rem,4vw,4.3rem)/1 var(--f-script); color: var(--c-accent); margin: 0 0 12px; transform: rotate(-3deg); }
.lit-feature h2 { font: 400 clamp(3.3rem,6vw,7rem)/.95 var(--f-display); letter-spacing: -.05em; margin: 0 0 32px; }
.lit-feature-intro>p:not(.lit-script-note) { font: clamp(1.1rem,1.8vw,1.5rem)/1.45 var(--f-body); color: var(--c-ink-soft); max-width: 420px; margin-bottom: 32px; }
.lit-feature-content { align-self: center; }
.lit-feature-placeholder { border: 1px solid var(--c-rule-strong); padding: clamp(26px,4vw,50px); text-align: center; background: var(--c-bg); transform: rotate(1.2deg); }
.lit-plume { font: 5rem/1 var(--f-body); color: var(--c-accent); }
.lit-feature-placeholder h3 { font: italic 2.3rem var(--f-body); margin: 8px 0; }
.lit-feature-placeholder p { font: 1.15rem/1.5 var(--f-body); color: var(--c-ink-soft); }
.lit-feature-placeholder a, .lit-empty-shelf a { color: var(--c-accent); font: 600 .7rem var(--f-ui); letter-spacing: .1em; }
.lit-writing-excerpt { display: block; padding: 26px 0; text-decoration: none; border-bottom: 1px solid var(--c-rule-strong); }
.lit-writing-excerpt>span, .lit-writing-excerpt small { font: 600 .65rem var(--f-ui); letter-spacing: .13em; color: var(--c-accent); }
.lit-writing-excerpt h3 { font: italic 2.2rem var(--f-body); margin: 12px 0 6px; }
.lit-writing-excerpt p { font: 1.1rem/1.5 var(--f-body); color: var(--c-ink-soft); }
.lit-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 45px; }
.lit-section-heading h2 { margin: 0; }
.lit-section-heading p { font: italic 1.3rem var(--f-body); color: var(--c-ink-soft); }
.lit-books-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: clamp(15px,3vw,50px); }
.lit-book-tile { text-decoration: none; min-width: 0; }
.lit-book-art { aspect-ratio: .73; background: var(--c-bg-sunk); display: grid; place-items: center; margin-bottom: 18px; box-shadow: 5px 7px 0 color-mix(in srgb,var(--c-rule) 55%,transparent); }
.lit-book-art img { width: 100%; height: 100%; object-fit: cover; }
.lit-book-art span { font: italic clamp(4rem,10vw,9rem) var(--f-display); color: var(--c-ink-faint); }
.lit-book-tile small { font: 600 .63rem var(--f-ui); letter-spacing: .12em; color: var(--c-accent); }
.lit-book-tile h3 { font: 400 1.55rem/1.15 var(--f-display); margin: 8px 0 4px; }
.lit-book-tile p { font: 1.05rem var(--f-body); color: var(--c-ink-soft); }
.lit-empty-shelf { text-align: center; padding: 75px 20px; border: 1px dashed var(--c-rule-strong); }
.lit-empty-shelf span { font: 5rem var(--f-display); color: var(--c-ink-faint); letter-spacing: .2em; }
.lit-empty-shelf p { font: italic 1.6rem var(--f-body); }
.lit-reading-note { position: relative; display: grid; grid-template-columns: 1fr 1.5fr 1fr; align-items: center; gap: 35px; padding: 65px clamp(25px,8vw,130px); background: var(--c-sage); color: #fffaf0; }
.lit-reading-note .lit-section-number { align-self: start; }
.lit-reading-note .lit-script-note { color: #f5d6aa; }
.lit-reading-note h2 { font: 400 clamp(3.5rem,6vw,7rem)/1 var(--f-display); margin: 0; }
.lit-reading-note h2 em { font: italic .45em var(--f-body); }
.lit-reading-note p { font: 1.2rem var(--f-body); }
.lit-reading-note a { color: white; text-decoration: underline; font: .76rem/1.6 var(--f-ui); }
.lit-reading-bar { height: 3px; background: #ffffff66; width: 100%; }
.lit-reading-bar span { display: block; height: 100%; background: #fff3d8; }
.lit-outro { padding: 90px 30px 120px; text-align: center; }
.lit-outro>span { font: 600 .7rem var(--f-ui); letter-spacing: .15em; color: var(--c-accent); }
.lit-outro h2 { font: 400 clamp(3rem,6vw,6.5rem) var(--f-display); letter-spacing: -.05em; margin: 26px 0 40px; }
.lit-outro>div { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px 32px; }
.lit-outro a { font: 600 .7rem var(--f-ui); color: var(--c-ink); letter-spacing: .1em; }

/* The writing desk and cabinet of curiosities. */
.literary-notebook, .lit-writing-form { max-width: 1240px; margin: 0 auto; padding: 65px clamp(22px,6vw,85px) 110px; }
.lit-page-heading { text-align: center; padding: 35px 10px 65px; }
.lit-page-heading .lit-overline { color: var(--c-accent); }
.lit-page-heading h1, .lit-writing-form h1 { font: 400 clamp(3.8rem,7vw,7.5rem)/1 var(--f-display); letter-spacing: -.05em; margin: 20px 0; }
.lit-page-heading>p:last-of-type { font: 1.4rem/1.45 var(--f-body); color: var(--c-ink-soft); }
.lit-page-heading .lit-primary-action { margin-top: 22px; }
.lit-notebook-index { display: flex; justify-content: space-between; border-top: 1px solid var(--c-rule-strong); border-bottom: 1px solid var(--c-rule-strong); padding: 14px 0; }
.lit-writing-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 25px; margin-top: 35px; }
.lit-writing-card, .lit-collection-card { padding: 35px; text-decoration: none; color: var(--c-ink); border: 1px solid var(--c-rule-strong); background: var(--c-bg-raised); transition: transform .2s ease; }
.lit-writing-card:hover, .lit-collection-card:hover { transform: translateY(-5px); }
.lit-entry-number, .lit-collection-card>span { color: var(--c-accent); }
.lit-writing-card h2, .lit-collection-card h2 { font: italic 2.7rem/1.1 var(--f-body); margin: 30px 0 15px; }
.lit-writing-card>p, .lit-collection-card>p { font: 1.15rem/1.5 var(--f-body); color: var(--c-ink-soft); }
.lit-entry-foot { display: flex; justify-content: space-between; gap: 10px; padding-top: 27px; margin-top: 25px; border-top: 1px solid var(--c-rule); font: .72rem var(--f-ui); }
.lit-empty-writing { text-align: center; padding: 75px 20px; }
.lit-empty-writing .lit-flourish { font: 4rem var(--f-body); color: var(--c-accent); }
.lit-empty-writing h2 { font: italic 3rem var(--f-body); }
.lit-empty-writing p { font: 1.3rem var(--f-body); color: var(--c-ink-soft); }
.lit-empty-writing a { color: var(--c-accent); }
.lit-writing-form { max-width: 850px; }
.lit-back { color: var(--c-ink-soft); text-decoration: none; font: .8rem var(--f-ui); }
.lit-writing-form h1 { font-size: clamp(3rem,5vw,5.5rem); margin-bottom: 45px; }
.lit-writing-form form { display: grid; gap: 28px; }
.lit-writing-form label { display: grid; gap: 8px; font: 600 .68rem var(--f-ui); letter-spacing: .12em; }
.lit-writing-form input, .lit-writing-form select, .lit-writing-form textarea { background: var(--c-bg-raised); color: var(--c-ink); border: 1px solid var(--c-rule-strong); border-radius: 0; padding: 14px; font: 1.2rem var(--f-body); width: 100%; }
.lit-writing-form textarea { line-height: 1.65; resize: vertical; min-height: 300px; }
/* The Notebook is a collection of loose literary papers, not a dashboard.
   Paper edges, handwritten marginal marks and a quiet writing sheet add
   character without requiring any new design controls. */
.literary-notebook:not(.lit-collections) .lit-page-heading { position: relative; }
.literary-notebook:not(.lit-collections) .lit-page-heading::before {
  content: '✳'; display: block; width: fit-content; margin: 0 auto 10px;
  font: 400 1.15rem var(--f-body); color: var(--c-gilt-mid);
}
.literary-notebook .lit-writing-card {
  position: relative; isolation: isolate; min-height: 290px;
  border-color: var(--c-rule); box-shadow: 5px 6px 0 var(--c-bg-sunk), 6px 7px 0 var(--c-rule);
  background: var(--c-bg-raised);
}
.literary-notebook .lit-writing-card:nth-child(even) { box-shadow: -5px 6px 0 var(--c-bg-sunk), -6px 7px 0 var(--c-rule); }
.literary-notebook .lit-writing-card::before {
  content: '❦'; position: absolute; right: 26px; top: 19px;
  font: 1.4rem var(--f-body); color: var(--c-gilt-mid); opacity: .7;
}
.literary-notebook .lit-writing-card h2 { max-width: 90%; }
.literary-notebook .lit-writing-card:hover { transform: translateY(-3px) rotate(-.25deg); }
.lit-writing-form form {
  padding: clamp(20px, 5vw, 52px); border: 1px solid var(--c-rule);
  background: var(--c-bg-raised);
  box-shadow: 8px 8px 0 var(--c-bg-sunk), 9px 9px 0 var(--c-rule);
}
.lit-writing-form textarea {
  background-color: var(--c-bg-raised);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 2.04rem, var(--c-rule) calc(2.04rem + 1px), transparent calc(2.04rem + 2px));
  line-height: 2.1rem; padding-top: 12px; border-color: var(--c-rule);
}
.lit-writing-form textarea:focus { background-image: none; }
.lit-writing-form #linked-journal-hint { margin: -14px 0 0; font: italic 1rem/1.35 var(--f-body); color: var(--c-ink-soft); }
.lit-writing-form #linked-journal-hint a { color: var(--c-accent); }
/* The Notebook uses the same clean Regency writing stock as book journals.
   Keep the texture on the sheets themselves, never across the whole website. */
html:not([data-theme="dark"]) .literary-notebook .lit-writing-card,
html:not([data-theme="dark"]) .literary-notebook .lit-empty-writing,
html:not([data-theme="dark"]) .lit-writing-form form {
  background: #f8f7f2 url('../assets/regency-writing-paper.webp') center / cover no-repeat;
  border-color: #ded8cc;
  box-shadow: 3px 5px 11px rgba(56,48,36,.09);
}
html:not([data-theme="dark"]) .literary-notebook .lit-writing-card:nth-child(even) { box-shadow: -3px 5px 11px rgba(56,48,36,.09); }
html:not([data-theme="dark"]) .lit-writing-form textarea {
  background: #fbfaf6 url('../assets/regency-writing-paper.webp') center / cover no-repeat;
  line-height: 1.8;
  border-color: #ded8cc;
}
.literary-notebook .lit-empty-writing { max-width: 780px; margin: 35px auto 0; padding: clamp(55px,7vw,100px) clamp(24px,6vw,80px); border: 1px solid var(--c-rule); }
.lit-writing-form { position: relative; isolation: isolate; }
.lit-writing-form > :not(.book-decor-layer) { position: relative; z-index: 1; }
.lit-writing-form .book-decor-toolbar { margin: -22px 0 25px; padding: 0; border: 0; }
.lit-writing-form #book-decor-toggle { padding: 4px 0; border: 0; border-bottom: 1px solid var(--c-rule-strong); background: none; color: var(--c-ink-soft); font: 500 .78rem var(--f-ui); box-shadow: none; }
.lit-writing-form .book-decor-tools { position: relative; z-index: 4; margin-top: 12px; }
.lit-new-paper-hint { margin: -20px 0 28px; color: var(--c-ink-soft); font: italic 1rem var(--f-body); }
.lit-writing-form textarea { min-height: 370px; }
.lit-writing-form form { gap: 23px; padding: clamp(24px,5vw,62px); }
.lit-writing-form input[name="title"] { padding: 8px 0 14px; border: 0; border-bottom: 1px solid var(--c-rule-strong); background: transparent; font: italic 400 clamp(1.65rem,3vw,2.5rem)/1.2 var(--f-display); }
.lit-writing-form textarea[name="body"] { padding: 12px 0; border: 0; background-color: transparent; background-image: none; font: 1.2rem/1.85 var(--f-body); }
.lit-writing-form textarea[name="body"]:focus-visible, .lit-writing-form input[name="title"]:focus-visible { outline: 0; box-shadow: 0 2px 0 var(--c-accent); }
html:not([data-theme="dark"]) .lit-writing-form textarea[name="body"] { background: transparent; }
/* Notebook archive: an editorial sequence of writing, rather than uniform cards. */
.literary-notebook:not(.lit-collections) .lit-page-heading { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(250px,.7fr); gap: 8px clamp(35px,5vw,90px); align-items: end; text-align: left; padding: 10px 0 60px; }
.literary-notebook:not(.lit-collections) .lit-page-heading::before { display: none; }
.literary-notebook:not(.lit-collections) .lit-page-heading .lit-overline { grid-column: 1/-1; }
.literary-notebook:not(.lit-collections) .lit-page-heading h1 { grid-column: 1; grid-row: 2 / span 2; margin: 8px 0 0; line-height: .95; }
.literary-notebook:not(.lit-collections) .lit-page-heading > p:last-of-type { grid-column: 2; grid-row: 2; margin: 0; font-size: 1.18rem; }
.literary-notebook:not(.lit-collections) .lit-page-heading .lit-primary-action { grid-column: 2; grid-row: 3; justify-self: start; margin-top: 15px; }
.literary-notebook .lit-writing-grid { grid-template-columns: repeat(12,minmax(0,1fr)); align-items: start; gap: 26px clamp(26px,4vw,65px); }
.literary-notebook .lit-writing-card { grid-column: span 6; min-height: 250px; padding: clamp(30px,4vw,56px); border: 1px solid var(--c-rule); box-shadow: none; }
.literary-notebook .lit-writing-card:nth-child(4n+1) { grid-column: span 7; }
.literary-notebook .lit-writing-card:nth-child(4n+2) { grid-column: span 5; margin-top: 42px; }
.literary-notebook .lit-writing-card:nth-child(4n+3) { grid-column: span 5; margin-top: 22px; }
.literary-notebook .lit-writing-card:nth-child(4n+4) { grid-column: span 7; }
.literary-notebook .lit-writing-card::before { display: none; }
.literary-notebook .lit-writing-card h2 { font: 400 clamp(2.2rem,3.5vw,3.8rem)/1.1 var(--f-display); margin: 38px 0 16px; }
.literary-notebook .lit-writing-card > p { max-width: 48ch; line-height: 1.65; }
.literary-notebook .lit-writing-card:hover { transform: translateY(-2px); }
html:not([data-theme="dark"]) .literary-notebook .lit-writing-card, html:not([data-theme="dark"]) .literary-notebook .lit-writing-card:nth-child(even) { box-shadow: 2px 4px 8px rgba(56,48,36,.06); }
@media (max-width: 760px) {
  .literary-notebook:not(.lit-collections) .lit-page-heading { display: block; padding-bottom: 40px; }
  .literary-notebook:not(.lit-collections) .lit-page-heading h1 { margin: 18px 0; }
  .literary-notebook .lit-writing-grid { grid-template-columns: 1fr; }
  .literary-notebook .lit-writing-card, .literary-notebook .lit-writing-card:nth-child(n) { grid-column: 1; margin-top: 0; }
}
/* Entry pages are manuscripts with a slim reference margin and generous
   writing room, not large blank cards. The archive cards retain their styling. */
.lit-writing-form { max-width: 1180px; }
.lit-writing-form > h1 { max-width: 900px; margin-bottom: 28px; font-size: clamp(3rem,5vw,5rem); }
.lit-writing-form form,
html:not([data-theme="dark"]) .lit-writing-form form {
  display: grid;
  grid-template-columns: minmax(170px, .34fr) minmax(0,1fr);
  align-items: start;
  gap: 22px clamp(34px,6vw,95px);
  max-width: 1100px;
  margin: 15px auto 0;
  padding: 45px 0 50px;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--c-rule-strong);
  box-shadow: none;
}
.lit-writing-form .lit-form-row { grid-column: 1; grid-row: 1; grid-template-columns: 1fr; gap: 26px; }
.lit-writing-form #linked-journal-hint { grid-column: 1; grid-row: 2; margin: 0; padding-right: 16px; line-height: 1.6; }
.lit-writing-form form > label:has(input[name="title"]) { grid-column: 2; grid-row: 1; }
.lit-writing-form form > label:has(textarea[name="body"]) { grid-column: 2; grid-row: 2 / span 2; }
.lit-writing-form .lit-form-actions { grid-column: 2; grid-row: 4; }
.lit-writing-form input[name="title"] { padding: 14px 0 25px; font-style: normal; font-size: clamp(2.2rem,4vw,3.9rem); border-bottom: 1px solid var(--c-rule-strong); }
.lit-writing-form textarea[name="body"] { min-height: 520px; padding: 25px 0; font-size: 1.3rem; line-height: 1.9; }
.lit-writing-form .lit-form-row select { background: transparent; border-width: 0 0 1px; padding: 10px 0; font-size: 1rem; }
.lit-writing-form form > label { color: var(--c-ink-soft); }
/* Card backgrounds can be chosen separately while Design Mode is active. */
.lit-card-design { display: none; margin-top: 20px; padding: 18px 22px; border: 1px solid var(--c-rule-strong); background: var(--c-bg-raised); }
body.canvas-editing .lit-card-design { display: block; }
.lit-card-design summary { cursor: pointer; font: 600 .78rem var(--f-ui); color: var(--c-accent); letter-spacing: .05em; }
.lit-card-design p { font: italic 1.05rem var(--f-body); color: var(--c-ink-soft); }
.lit-card-design-list { display: grid; gap: 18px; }
.lit-card-design-list > label { display: grid; grid-template-columns: minmax(145px,1fr) 1fr 1fr auto; gap: 12px; align-items: center; font: .9rem var(--f-body); }
.lit-card-design select { min-width: 0; max-width: 100%; padding: 9px; background: var(--c-bg); color: var(--c-ink); border: 1px solid var(--c-rule-strong); }
.lit-card-upload { font: .75rem var(--f-ui); }
.lit-card-upload input { display: block; max-width: 150px; font-size: .7rem; }
/* The writing desk opens as a scrapbook journal: warm blush stock, a real
   centre gutter and two facing leaves, with space for personal collage. */
.lit-writing-form { max-width: 1380px; padding-top: 45px; }
.lit-writing-form > .lit-overline { margin-top: 30px; }
.lit-writing-form > h1 { margin-top: 6px; margin-bottom: 24px; }
.lit-journal-tabs { display: flex; justify-content: flex-end; gap: 2px; margin: 0 20px -1px 0; position: relative; z-index: 2; }
.lit-journal-tabs span { display: grid; place-items: center; width: clamp(38px,5vw,62px); height: 27px; border-radius: 11px 11px 0 0; background: #e5d6ce; color: #63544e; font: 600 .58rem var(--f-ui); letter-spacing: .1em; }
.lit-journal-tabs span:nth-child(2n) { background: #eadad6; }
.lit-journal-tabs span:nth-child(3n) { background: #d8ddcf; }
.lit-journal-tabs span:first-child { background: #d2b4ab; }
.lit-writing-form form.lit-open-journal,
html:not([data-theme="dark"]) .lit-writing-form form.lit-open-journal {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 0 0;
  max-width: none;
  min-height: 780px;
  margin: 0;
  padding: 0;
  border: 1px solid #d7beb9;
  border-radius: 5px 11px 11px 5px;
  background: linear-gradient(90deg,rgba(117,73,69,.08) 0%,transparent 4%,transparent 47.5%,rgba(93,56,54,.13) 49.7%,rgba(255,255,255,.35) 50.5%,transparent 53%),
    linear-gradient(rgba(246,222,221,.78),rgba(246,222,221,.78)),
    url('../assets/regency-writing-paper.webp') center / 1100px auto repeat,
    #f6e6e2;
  box-shadow: 0 3px 0 #e8d7d1, 0 6px 0 #d8c0b9, 0 9px 0 #eee0da, 0 18px 28px rgba(62,43,39,.15);
  isolation: isolate;
}
.lit-writing-form form.lit-open-journal::after { content:''; position:absolute; inset: 0 auto 0 49.8%; width: 1.5%; pointer-events:none; background:linear-gradient(90deg,rgba(83,56,52,.10),rgba(255,255,255,.13),transparent); z-index:1; }
.lit-open-journal .lit-journal-frontispiece { grid-column:1; grid-row:1; position:relative; min-height:425px; margin: 0; padding: clamp(40px,5vw,85px) clamp(28px,5vw,75px) 0; text-align:center; overflow:hidden; }
.lit-journal-kicker { display:block; font: 600 .65rem var(--f-ui); letter-spacing:.28em; color:#8c6666; }
.lit-journal-monogram { display:block; margin: 42px auto 0; font: italic 400 clamp(7rem,12vw,13rem)/1 var(--f-display); color:rgba(156,82,91,.26); transform:rotate(-9deg); }
.lit-journal-flower { position:absolute; top:27%; right:16%; font: 3.8rem var(--f-body); color:#bd8e87; transform:rotate(15deg); opacity:.72; }
.lit-journal-paper-slip { position:relative; width:max-content; max-width:90%; margin:-22px auto 0; padding:20px 34px 26px; background:rgba(255,250,243,.80); box-shadow:3px 5px 10px rgba(84,55,55,.09); transform:rotate(-5deg); }
.lit-journal-paper-slip span,.lit-journal-paper-slip em { display:block; font: italic clamp(1.25rem,2.2vw,2rem)/1.25 var(--f-display); color:#624747; }
.lit-journal-stars { display:block; margin:33px auto 0; letter-spacing:1.2rem; color:#bd8d8f; }
.lit-open-journal .lit-form-row { grid-column:1; grid-row:2; grid-template-columns:1fr; gap:17px; align-self:end; padding:0 clamp(28px,5vw,75px); margin:0 0 12px; }
.lit-open-journal #linked-journal-hint { grid-column:1; grid-row:3; align-self:start; max-width:36ch; margin:0 0 55px; padding:0 clamp(28px,5vw,75px); font-size:.88rem; }
.lit-open-journal > label:has(input[name="title"]) { grid-column:2; grid-row:1; align-self:end; padding:65px clamp(35px,5vw,85px) 0; }
.lit-open-journal > label:has(textarea[name="bodyRight"]) { grid-column:2; grid-row:2 / span 2; padding:20px clamp(35px,5vw,85px) 0; }
.lit-open-journal .lit-form-actions { grid-column:2; grid-row:4; align-self:end; padding:25px clamp(35px,5vw,85px) 48px; }
.lit-open-journal input[name="title"] { padding:13px 0 17px; font: italic 400 clamp(2.25rem,4vw,4rem)/1.12 var(--f-display); color:#5a3f40; border-bottom:1px solid rgba(122,84,83,.35); }
.lit-open-journal textarea[name="bodyLeft"], .lit-open-journal textarea[name="bodyRight"] { min-height:380px; padding:13px 0; font: 1.22rem/1.9 var(--f-body); color:#533d3d; background:transparent; }
.lit-open-journal label { color:#765959; }
.lit-open-journal select { color:#583e40; }
.lit-open-journal .lit-primary-action { white-space:nowrap; }
/* The final manuscript palette is ivory and watercolor, with decorative
   imagery at the margins and plenty of unprinted paper for personal collage. */
.lit-journal-tabs span, .lit-journal-tabs span:nth-child(2n), .lit-journal-tabs span:nth-child(3n) { background:#e5e2d5; color:#756e62; }
.lit-journal-tabs span:first-child { background:#cdd5c5; }
.lit-writing-form form.lit-open-journal,
html:not([data-theme="dark"]) .lit-writing-form form.lit-open-journal {
  border-color:#ded9cc;
  background:linear-gradient(90deg,rgba(95,82,70,.055),transparent 5%,transparent 48.5%,rgba(81,75,64,.10) 49.8%,rgba(255,255,255,.25) 50.6%,transparent 53%),
    linear-gradient(rgba(250,248,240,.87),rgba(250,248,240,.87)),
    url('../assets/regency-writing-paper.webp') center / 1100px auto repeat,
    #f5f2e8;
  box-shadow:0 3px 0 #e5e0d5,0 6px 0 #d8d2c5,0 10px 0 #efede5,0 18px 28px rgba(62,55,42,.12);
}
.lit-open-journal .lit-journal-frontispiece { min-height:425px; padding-top:clamp(55px,7vw,105px); }
.lit-open-journal .lit-journal-frontispiece::after { content:''; position:absolute; left:-5%; right:-5%; bottom:-15px; height:235px; background:url('../assets/notebook-watercolor-garden.png') center bottom / 100% auto no-repeat; opacity:.66; pointer-events:none; }
.lit-open-journal .lit-journal-kicker { color:#7e7867; }
.lit-open-journal .lit-journal-frontispiece h2 { position:relative; z-index:1; margin:36px auto 14px; font:400 clamp(2.5rem,4vw,4.4rem)/1.1 var(--f-display); letter-spacing:-.035em; color:#514f45; }
.lit-open-journal .lit-journal-frontispiece h2 em { font-weight:400; }
.lit-open-journal .lit-journal-frontispiece p { position:relative; z-index:1; margin:0 auto; max-width:25ch; font:italic 1.2rem/1.4 var(--f-body); color:#797566; }
.lit-open-journal input[name="title"] { color:var(--c-ink); border-color:var(--c-rule-strong); }
.lit-open-journal textarea[name="bodyLeft"], .lit-open-journal textarea[name="bodyRight"] { color:var(--c-ink); }
.lit-open-journal label { color:var(--c-ink-soft); }
.lit-open-journal select { color:var(--c-ink); }
/* Facing pages both accept prose; visual flourishes never commandeer one leaf. */
.lit-open-journal .lit-journal-frontispiece { grid-column:1; grid-row:1; min-height:245px; padding-top:43px; }
.lit-open-journal .lit-journal-frontispiece h2 { margin:16px auto 8px; font-size:clamp(2.1rem,3.1vw,3.1rem); }
.lit-open-journal .lit-journal-frontispiece p { font-size:1.02rem; }
.lit-open-journal .lit-journal-frontispiece::after { bottom:-35px; height:165px; opacity:.40; }
.lit-open-journal > label:has(input[name="title"]) { grid-column:2; grid-row:1; align-self:center; padding:42px clamp(30px,4vw,70px) 20px; }
.lit-open-journal .lit-left-writing { grid-column:1; grid-row:2; padding:25px clamp(30px,4vw,70px) 0; }
.lit-open-journal .lit-right-writing { grid-column:2; grid-row:2; padding:25px clamp(30px,4vw,70px) 0; }
.lit-open-journal .lit-left-writing textarea, .lit-open-journal .lit-right-writing textarea { min-height:475px; }
.lit-writing-form form.lit-open-journal textarea[name="bodyLeft"],
.lit-writing-form form.lit-open-journal textarea[name="bodyRight"],
html:not([data-theme="dark"]) .lit-writing-form form.lit-open-journal textarea[name="bodyLeft"],
html:not([data-theme="dark"]) .lit-writing-form form.lit-open-journal textarea[name="bodyRight"] { width:100%; border:0; background:transparent; resize:vertical; box-shadow:none; }
.lit-open-journal .lit-form-row { grid-column:1; grid-row:3; align-self:end; padding:30px clamp(30px,4vw,70px) 10px; }
.lit-open-journal #linked-journal-hint { grid-column:1; grid-row:4; padding:0 clamp(30px,4vw,70px); margin:0 0 32px; }
.lit-open-journal .lit-form-actions { grid-column:2; grid-row:3 / span 2; padding:30px clamp(30px,4vw,70px) 38px; }
@media (max-width: 850px) {
  .lit-writing-form form.lit-open-journal { grid-template-columns:1fr; border-radius:7px; }
  .lit-writing-form form.lit-open-journal::after { display:none; }
  .lit-open-journal .lit-journal-frontispiece { grid-column:1; grid-row:1; min-height:245px; padding-top:35px; }
  .lit-journal-monogram { margin-top:10px; font-size:7rem; }
  .lit-journal-paper-slip { margin-top:-8px; }
  .lit-journal-stars { margin-top:14px; }
  .lit-open-journal > label:has(input[name="title"]) { grid-column:1; grid-row:2; padding:25px 30px 0; }
  .lit-open-journal .lit-left-writing { grid-column:1; grid-row:3; padding:15px 30px 0; }
  .lit-open-journal .lit-right-writing { grid-column:1; grid-row:4; padding:15px 30px 0; }
  .lit-open-journal .lit-form-row { grid-column:1; grid-row:5; grid-template-columns:1fr 1fr; align-self:auto; padding:18px 30px 0; }
  .lit-open-journal #linked-journal-hint { grid-column:1; grid-row:6; padding:0 30px; margin:0 0 20px; }
  .lit-open-journal .lit-form-actions { grid-column:1; grid-row:7; padding:20px 30px 38px; }
  .lit-open-journal textarea[name="bodyLeft"], .lit-open-journal textarea[name="bodyRight"] { min-height:350px; }
}
/* Actual journal tabs: navigate between independent writable spreads. */
.lit-journal-tab-bar { display:flex; align-items:end; justify-content:space-between; gap:16px; margin:0 20px -1px 0; position:relative; z-index:3; }
.lit-journal-tab-bar .lit-journal-tabs { margin:0; }
.lit-journal-tabs button { display:grid; place-items:center; min-width:clamp(40px,5vw,65px); height:29px; padding:0 9px; border:1px solid #d9d8ca; border-bottom:0; border-radius:11px 11px 0 0; background:#e6e4d7; color:#665f55; font:600 .63rem var(--f-ui); letter-spacing:.06em; cursor:pointer; transition:background .15s,color .15s; }
.lit-journal-tabs button:nth-child(3n) { background:#e0e5dc; }
.lit-journal-tabs button.is-active { background:#f5f2e8; color:#473a34; height:34px; border-color:#c9c9b6; box-shadow:0 -2px 6px rgba(53,48,35,.06); }
.lit-journal-tabs button:hover { color:var(--c-accent); }
.lit-journal-tabs button:focus-visible,.lit-rename-tabs-toggle:focus-visible { outline:2px solid var(--c-accent); outline-offset:2px; }
.lit-rename-tabs-toggle { border:0; border-bottom:1px solid var(--c-rule-strong); border-radius:0; padding:6px 0; background:none; color:var(--c-ink-soft); font:500 .73rem var(--f-ui); cursor:pointer; }
.lit-tab-label-editor { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; padding:18px 20px; background:var(--c-bg-raised); border:1px solid var(--c-rule); }
.lit-tab-label-editor[hidden] { display:none; }
.lit-tab-label-editor label { display:grid; gap:5px; color:var(--c-ink-soft); font:600 .63rem var(--f-ui); letter-spacing:.08em; }
.lit-tab-label-editor input { width:100%; min-width:0; border:1px solid var(--c-rule-strong); padding:8px; background:var(--c-bg); color:var(--c-ink); font:1rem var(--f-body); }
/* Watercolor rises from the foot of the book; no rectangular top boundary. */
.lit-writing-form form.lit-open-journal::before { content:''; position:absolute; left:0; right:0; bottom:0; height:var(--journal-bottom-height,290px); background:var(--journal-bottom-art,url('../assets/notebook-watercolor-garden.png')) center bottom / 100% auto no-repeat; opacity:var(--journal-bottom-opacity,.38); -webkit-mask-image:linear-gradient(to bottom,transparent,rgba(0,0,0,.6) 27%,#000 65%); mask-image:linear-gradient(to bottom,transparent,rgba(0,0,0,.6) 27%,#000 65%); pointer-events:none; z-index:0; }
.lit-open-journal .lit-journal-frontispiece::after { content:none; }
.lit-writing-form form.lit-open-journal > * { position:relative; z-index:1; }
.lit-open-journal .lit-journal-frontispiece h2 { font-size:calc(3rem * var(--journal-intro-scale,1)); }
.lit-writing-form form.lit-open-journal .lit-left-writing textarea,
.lit-writing-form form.lit-open-journal .lit-right-writing textarea { font-size:calc(1.22rem * var(--journal-writing-scale,1)); }
.lit-open-journal .lit-form-row label { font-size:calc(.68rem * var(--journal-meta-scale,1)); }
.lit-open-journal .lit-form-row select { font-size:calc(1rem * var(--journal-meta-scale,1)); }
.lit-open-journal.lit-hide-details .lit-form-row,.lit-open-journal.lit-hide-details #linked-journal-hint { display:none; }
.lit-journal-appearance { display:none; padding:18px 22px; margin:0 0 25px; border:1px solid var(--c-rule-strong); background:var(--c-bg-raised); }
body.canvas-editing .lit-journal-appearance { display:block; }
.lit-journal-appearance summary { font:600 .78rem var(--f-ui); color:var(--c-accent); cursor:pointer; }
.lit-journal-appearance-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:17px 22px; padding-top:20px; }
.lit-journal-appearance-grid > label { display:grid; gap:7px; font:600 .7rem var(--f-ui); color:var(--c-ink-soft); }
.lit-journal-appearance-grid input:not([type="checkbox"]),.lit-journal-appearance-grid select { min-width:0; max-width:100%; width:100%; padding:9px; border:1px solid var(--c-rule-strong); background:var(--c-bg); color:var(--c-ink); font:1rem var(--f-body); }
.lit-journal-appearance-grid input[type="range"] { accent-color:var(--c-accent); padding:0; }
.lit-journal-appearance-grid .lit-journal-check { display:flex; align-items:center; gap:10px; }
.lit-journal-appearance-grid .lit-journal-check input { width:auto; }
.lit-journal-appearance-grid output { font:400 .75rem var(--f-ui); }
.lit-journal-appearance > p { margin:18px 0 0; font:italic 1rem var(--f-body); color:var(--c-ink-soft); }
@media (max-width:850px) {
  .lit-journal-tab-bar { flex-wrap:wrap; }
  .lit-journal-tabs { max-width:100%; overflow-x:auto; }
  .lit-tab-label-editor { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .lit-writing-form form.lit-open-journal::before { height:var(--journal-bottom-height,210px); background-size:auto 100%; }
  .lit-journal-appearance-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:550px) { .lit-journal-appearance-grid { grid-template-columns:1fr; } }
html:not([data-theme="dark"]) .literary-notebook .lit-writing-card[data-card-paper-tone="ivory"] { background-color: #f9f6ed; }
html:not([data-theme="dark"]) .literary-notebook .lit-writing-card[data-card-paper-tone="rose"] { background-color: #f0e3df; }
html:not([data-theme="dark"]) .literary-notebook .lit-writing-card[data-card-paper-tone="sage"] { background-color: #e6e9df; }
html:not([data-theme="dark"]) .literary-notebook .lit-writing-card[data-card-paper-tone="blue"] { background-color: #e3eaf0; }
html:not([data-theme="dark"]) .literary-notebook .lit-writing-card[data-card-paper-tone="plain"] { background-color: var(--c-bg-raised); }
html:not([data-theme="dark"]) .literary-notebook .lit-writing-card[data-card-paper-tone]:not([data-card-paper-tone="default"]):not([style*="background-image"]) { background-image: none; }
@media (max-width: 760px) {
  .lit-writing-form form { grid-template-columns: 1fr; gap: 22px; padding: 26px 0 35px; }
  .lit-writing-form .lit-form-row, .lit-writing-form #linked-journal-hint,
  .lit-writing-form form > label:has(input[name="title"]),
  .lit-writing-form form > label:has(textarea[name="body"]),
  .lit-writing-form .lit-form-actions { grid-column: 1; grid-row: auto; }
  .lit-writing-form .lit-form-row { grid-template-columns: 1fr 1fr; }
  .lit-writing-form textarea[name="body"] { min-height: 400px; }
  .lit-card-design-list > label { grid-template-columns: 1fr; }
}
/* Carry the same antique paper into solid light sections without touching artwork. */
html:not([data-theme="dark"]) .masthead,
html:not([data-theme="dark"]) .lit-hero {
  background-color: var(--c-bg);
  background-image: url('../assets/paper/antique-cotton-ivory.webp');
  background-size: 768px 768px;
}
.lit-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.lit-form-actions { display: flex; gap: 20px; justify-content: space-between; align-items: center; color: var(--c-ink-faint); font: .76rem var(--f-ui); }
.lit-collection-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.lit-collection-card { min-height: 330px; display: flex; flex-direction: column; }
.lit-collection-card h2 { font: 400 2.5rem/1.1 var(--f-display); }
.lit-collection-card h2 em { font-family: var(--f-body); }
.lit-collection-card small { margin-top: auto; padding-top: 30px; font: 600 .7rem var(--f-ui); color: var(--c-accent); }
/* Collections: an informal editorial cabinet rather than a uniform card grid. */
.lit-cabinet { max-width:1360px; }
.lit-cabinet .lit-cabinet-heading { text-align:left; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(250px,.7fr); gap:12px 65px; padding:20px 0 88px; align-items:end; }
.lit-cabinet-heading .lit-overline { grid-column:1/-1; }
.lit-cabinet-heading h1 { margin:8px 0 0; font-size:clamp(4rem,7.4vw,8.3rem); line-height:.92; }
.lit-cabinet-heading > p:last-child { max-width:34ch; margin:0 0 9px; font-size:1.3rem; }
.lit-cabinet-section-head { display:flex; justify-content:space-between; gap:15px; padding:13px 0; border-top:1px solid var(--c-rule-strong); color:var(--c-ink-soft); font:600 .65rem var(--f-ui); letter-spacing:.17em; }
.lit-cabinet-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:26px clamp(24px,3vw,50px); padding:20px 0 90px; }
.lit-cabinet-piece { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:clamp(18px,3vw,45px); grid-column:span 6; min-height:320px; padding:27px 0 30px; color:var(--c-ink); text-decoration:none; border-top:1px solid var(--c-rule-strong); transition:transform .22s ease; }
.lit-cabinet-piece:nth-child(3n+1) { grid-column:span 7; }
.lit-cabinet-piece:nth-child(3n+2) { grid-column:span 5; grid-template-columns:1fr; }
.lit-cabinet-piece:nth-child(3n+3) { grid-column:span 12; grid-template-columns:minmax(180px,.65fr) minmax(0,1fr); max-width:95%; }
.lit-cabinet-piece:hover { transform:translateY(-3px); }
.lit-cabinet-art { position:relative; min-height:235px; align-self:start; display:grid; place-items:center; background:#e9e8dc url('../assets/paper/antique-cotton-ivory.webp') center / 580px; box-shadow:3px 5px 12px rgba(60,50,42,.08); overflow:hidden; }
.lit-cabinet-art img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; }
.lit-cabinet-ornament { font:italic 400 clamp(4rem,7vw,8rem)/1 var(--f-display); color:rgba(103,82,63,.46); transform:rotate(-10deg); }
.lit-cabinet-piece:nth-child(even) .lit-cabinet-art { transform:rotate(.8deg); }
.lit-cabinet-piece:nth-child(odd) .lit-cabinet-art { transform:rotate(-.6deg); }
.lit-cabinet-copy { display:flex; flex-direction:column; align-items:flex-start; min-width:0; padding:8px 0 0; }
.lit-cabinet-index { color:var(--c-accent); font:600 .63rem var(--f-ui); letter-spacing:.15em; }
.lit-cabinet-copy h2 { font:400 clamp(2.25rem,3.3vw,4.1rem)/1.08 var(--f-display); letter-spacing:-.025em; margin:24px 0 15px; }
.lit-cabinet-copy p { max-width:35ch; color:var(--c-ink-soft); font:1.2rem/1.5 var(--f-body); margin:0 0 35px; }
.lit-cabinet-copy small { margin-top:auto; border-bottom:1px solid var(--c-rule-strong); padding:0 0 8px; color:var(--c-accent); font:600 .68rem var(--f-ui); letter-spacing:.05em; }
.lit-cabinet-copy small span { margin-left:8px; }
.lit-cabinet-piece[data-collection-tone="sage"] .lit-cabinet-art { background-color:#d5ddce; }
.lit-cabinet-piece[data-collection-tone="rose"] .lit-cabinet-art { background-color:#edd9d8; }
.lit-cabinet-piece[data-collection-tone="blue"] .lit-cabinet-art { background-color:#d9e4e6; }
.lit-cabinet-piece[data-collection-tone="ochre"] .lit-cabinet-art { background-color:#e9debe; }
.lit-cabinet-shelf-head { margin-top:15px; }
.lit-cabinet-personal .lit-cabinet-piece { grid-column:span 6; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); }
.lit-cabinet-personal .lit-cabinet-piece:nth-child(even) { grid-template-columns:1fr; }
.lit-cabinet-empty { max-width:530px; padding:50px 0 80px; }
.lit-cabinet-empty > span { color:var(--c-accent); font:3rem var(--f-display); }
.lit-cabinet-empty p { font:italic 1.45rem/1.45 var(--f-body); color:var(--c-ink-soft); }
.lit-cabinet-empty a { color:var(--c-accent); font:.82rem var(--f-ui); text-decoration:none; border-bottom:1px solid currentColor; }
.lit-curation-tools { border-top:1px solid var(--c-rule-strong); padding:16px 0 80px; }
.lit-curation-tools > summary { display:inline-block; cursor:pointer; font:600 .76rem var(--f-ui); letter-spacing:.05em; color:var(--c-accent); list-style:none; }
.lit-curation-tools > summary::-webkit-details-marker { display:none; }
.lit-curation-body { max-width:870px; margin-top:28px; padding:28px clamp(20px,4vw,45px); background:var(--c-bg-raised); border:1px solid var(--c-rule); }
.lit-curation-body > p { margin:0 0 22px; font:italic 1.1rem/1.5 var(--f-body); color:var(--c-ink-soft); }
.lit-curation-body label { display:grid; gap:8px; font:600 .7rem var(--f-ui); color:var(--c-ink-soft); }
.lit-curation-body input,.lit-curation-body select { width:100%; min-width:0; border:1px solid var(--c-rule-strong); background:var(--c-bg); color:var(--c-ink); padding:10px; font:1rem var(--f-body); }
.lit-curation-body button { border:1px solid var(--c-rule-strong); background:var(--c-bg); color:var(--c-ink); padding:10px 15px; cursor:pointer; font:.8rem var(--f-ui); }
#lit-curation-create { padding-bottom:24px; border-bottom:1px solid var(--c-rule); }
#lit-curation-create > div { display:flex; gap:10px; margin-top:9px; }
.lit-curation-item { border-bottom:1px solid var(--c-rule); padding:16px 0; }
.lit-curation-item > summary { cursor:pointer; font:1.3rem var(--f-body); }
.lit-curation-item > summary span { margin-left:10px; font:.68rem var(--f-ui); color:var(--c-ink-soft); }
.lit-curation-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 22px; padding:22px 0 4px; }
.lit-curation-order { display:flex; align-items:end; gap:10px; }
/* Gentle edges only: retain the approved cabinet composition and controls. */
.lit-cabinet-section-head { position:relative; border-top:0; padding-top:19px; }
.lit-cabinet-section-head::before { content:''; position:absolute; left:0; top:0; width:85%; height:1px; background:linear-gradient(90deg,rgba(125,105,84,.32),rgba(125,105,84,.12) 55%,transparent); }
.lit-cabinet-piece { position:relative; border-top:0; padding-top:33px; }
.lit-cabinet-piece::before { content:''; position:absolute; left:0; top:0; width:65%; height:1px; background:linear-gradient(90deg,rgba(125,105,84,.25),rgba(125,105,84,.1) 55%,transparent); }
.lit-cabinet-art { border-radius:9px 13px 8px 12px; box-shadow:3px 6px 17px rgba(60,50,42,.055); }
.lit-cabinet-art img { border-radius:inherit; }
.lit-cabinet-copy small { border-bottom-color:rgba(125,105,84,.25); }
.lit-curation-tools { border-top-color:rgba(125,105,84,.24); }
.lit-curation-body { border-color:rgba(125,105,84,.18); }
/* Reading challenges: one unobtrusive invitation and advanced actions tucked away. */
.lit-challenge-invite { display:flex; align-items:center; justify-content:center; gap:22px; flex-wrap:wrap; max-width:930px; margin:55px auto 105px; padding:24px 18px; border-top:1px solid rgba(125,105,84,.22); }
.lit-challenge-invite p { margin:0; color:var(--c-ink-soft); font:italic 1.3rem var(--f-body); }
.lit-challenge-invite button { padding:7px 0; background:none; border:0; border-bottom:1px solid var(--c-rule-strong); color:var(--c-accent); font:600 .74rem var(--f-ui); cursor:pointer; }
.lit-challenge-invite button:hover { color:var(--c-ink); }
.lit-challenge-more { margin-top:24px; border-top:1px solid var(--c-rule); padding-top:12px; }
.lit-challenge-more summary { cursor:pointer; color:var(--c-ink-soft); font:.8rem var(--f-ui); }
.lit-challenge-more button { margin-top:15px; }
@media (max-width:900px) {
  .lit-cabinet .lit-cabinet-heading { display:block; padding-bottom:55px; }
  .lit-cabinet-heading > p:last-child { margin-top:25px; }
  .lit-cabinet-grid { grid-template-columns:1fr; gap:16px; padding-bottom:70px; }
  .lit-cabinet-piece:nth-child(n), .lit-cabinet-personal .lit-cabinet-piece:nth-child(n) { grid-column:1; grid-template-columns:minmax(130px,.8fr) minmax(0,1fr); max-width:none; min-height:0; }
}
@media (max-width:570px) {
  .lit-cabinet-piece:nth-child(n), .lit-cabinet-personal .lit-cabinet-piece:nth-child(n) { grid-template-columns:1fr; }
  .lit-cabinet-art { min-height:200px; }
  .lit-curation-fields { grid-template-columns:1fr; }
  #lit-curation-create > div { flex-wrap:wrap; }
}
@media (max-width: 850px) {
  .lit-hero { grid-template-columns: 1fr; min-height: unset; padding: 25px 24px; }
  .lit-hero-content { padding: 60px 0 25px; }
  .lit-hero h1 { font-size: clamp(3.8rem,13vw,6rem); }
  .lit-hero-art { width: min(82%,360px); height: 330px; justify-self: center; margin: 22px 0 45px; }
  .lit-art-initial { font-size: 15rem; }
  .lit-art-small { font-size: 7rem; }
  .lit-feature-grid { grid-template-columns: 1fr; }
  .lit-feature { padding: 65px 25px; }
  .lit-books-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .lit-reading-note { grid-template-columns: 1fr; gap: 15px; }
  .lit-reading-note h2 { font-size: 5rem; }
  .lit-collection-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .lit-hero-edition, .lit-hero-foot { font-size: .55rem; }
  .lit-hero .lit-overline { font-size: .62rem; margin-bottom: 25px; }
  .lit-hero-deck { margin: 23px 0; }
  .lit-section-top { font-size: .57rem; margin-bottom: 35px; }
  .lit-section-heading { flex-direction: column; gap: 0; }
  .lit-section-heading p { margin-top: 0; }
  .lit-book-tile h3 { font-size: 1.3rem; }
  .lit-writing-grid, .lit-form-row { grid-template-columns: 1fr; }
  .lit-writing-card { padding: 25px; }
  .lit-form-actions { align-items: flex-start; flex-direction: column; }
}

/* Goodreads-like collection shelves, dressed in Shelf Marks' original ink. */
.literary-shelf { width: 100%; max-width: 1450px; margin: 0 auto; padding: clamp(35px,6vw,85px) clamp(20px,6vw,90px) 100px; }
.lit-shelf-header { display: flex; align-items: end; justify-content: space-between; gap: 25px; padding-bottom: 45px; }
.lit-shelf-header .lit-overline { color: var(--c-accent); }
.lit-shelf-header h1 { font: 400 clamp(3.8rem,6.5vw,7.5rem)/1 var(--f-display); letter-spacing: -.045em; margin: 18px 0; }
.lit-shelf-header h1 em { font-family: var(--f-body); font-weight: 400; }
.lit-shelf-header p:last-child { font: 1.4rem/1.4 var(--f-body); color: var(--c-ink-soft); }
.lit-custom-shelf-header { position:relative; align-items:center; padding-bottom:55px; border-bottom:1px solid var(--c-rule); }
.lit-custom-shelf-header > div:first-child { min-width:0; }
.lit-custom-shelf-header h1 { max-width:18ch; }
.lit-custom-shelf-header p:last-child { max-width:42ch; }
.lit-custom-shelf-art { flex:0 0 clamp(190px,24vw,310px); height:clamp(200px,24vw,305px); margin-right:3%; transform:rotate(1deg); border:9px solid var(--c-bg-raised); box-shadow:4px 6px 16px rgba(50,40,35,.12); overflow:hidden; }
.lit-custom-shelf-art img { width:100%; height:100%; object-fit:cover; }
@media (max-width:700px) { .lit-custom-shelf-art { width:58%; max-width:270px; flex-basis:auto; margin:15px 0 0; } }
.lit-shelf-header>.lit-primary-action { flex: none; margin-bottom: 6px; }
.lit-shelf-tabs { display: flex; align-items: stretch; gap: clamp(15px,2.5vw,40px); border-bottom: 1px solid var(--c-rule-strong); overflow-x: auto; scrollbar-width: thin; }
.lit-shelf-tabs a { flex: none; display: inline-flex; gap: 8px; align-items: center; padding: 15px 0; text-decoration: none; font: 600 .75rem var(--f-ui); color: var(--c-ink-soft); border-bottom: 3px solid transparent; white-space: nowrap; }
.lit-shelf-tabs a.active { color: var(--c-accent); border-color: var(--c-accent); }
.lit-shelf-tabs span { display: inline-flex; align-items: center; justify-content: center; background: var(--c-bg-sunk); min-width: 24px; height: 24px; border-radius: 50%; font: 600 .68rem var(--f-ui); }
.lit-shelf-tools { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 27px 0 13px; }
#shelf-search { display: flex; width: min(470px,100%); border-bottom: 1px solid var(--c-rule-strong); }
#shelf-query { background: transparent; border: 0; flex: 1; min-width: 0; color: var(--c-ink); font: 1.2rem var(--f-body); padding: 10px 0; }
#shelf-search button { border: 0; background: transparent; color: var(--c-ink); font: 2rem var(--f-body); cursor: pointer; }
.lit-shelf-tools>label { font: .72rem var(--f-ui); color: var(--c-ink-faint); white-space: nowrap; }
.lit-shelf-add-link { flex: none; color: var(--c-accent); font: 600 .75rem var(--f-ui); text-decoration: none; white-space: nowrap; }
.lit-shelf-add-link:hover, .lit-shelf-add-link:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
#shelf-sort { border: 0; background: transparent; color: var(--c-ink); font: .78rem var(--f-ui); }
.lit-shelf-count { display: flex; justify-content: space-between; gap: 1rem; font: 600 .67rem var(--f-ui); color: var(--c-ink-faint); letter-spacing: .17em; margin: 26px 0 17px; padding-bottom: 13px; border-bottom: 1px solid var(--c-rule-strong); }
.lit-shelf-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); column-gap: clamp(16px,2.1vw,32px); row-gap: clamp(38px,5vw,75px); }
.lit-shelf-book { display: flex; flex-direction: column; min-width: 0; padding-bottom: 22px; border-bottom: 1px solid var(--c-rule); }
.lit-shelf-book[hidden], .lit-empty-shelf[hidden] { display: none !important; }
.lit-shelf-folio { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; min-height: 25px; color: var(--c-ink-faint); font: 600 .61rem/1.3 var(--f-ui); letter-spacing: .10em; }
.lit-shelf-folio span:first-child { color: var(--c-accent); font-family: var(--f-body); font-size: .88rem; font-style: italic; font-weight: 400; letter-spacing: 0; }
.lit-shelf-cover { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 2/3; overflow: hidden; color: var(--c-ink-soft); text-decoration: none; background: var(--c-bg-sunk); border: 1px solid color-mix(in srgb,var(--c-rule) 65%,transparent); box-shadow: 3px 5px 8px color-mix(in srgb,var(--c-ink) 9%,transparent); transition: transform .28s ease, box-shadow .28s ease; }
.lit-shelf-cover::after { content: ''; position: absolute; inset: 5px; border: 1px solid color-mix(in srgb,var(--c-bg-raised) 50%,transparent); pointer-events: none; }
.lit-shelf-cover:hover, .lit-shelf-cover:focus-visible { transform: translateY(-3px); box-shadow: 4px 10px 15px color-mix(in srgb,var(--c-ink) 13%,transparent); }
.lit-shelf-cover img { width: 100%; height: 100%; object-fit: contain; }
.lit-shelf-cover span { font: italic clamp(3rem,7vw,7rem)/1 var(--f-display); }
.lit-shelf-info { display: flex; flex: 1; flex-direction: column; padding-top: 17px; }
.lit-shelf-bibliography { flex: 1; }
.lit-shelf-bibliography>a { color: inherit; text-decoration: none; }
.lit-shelf-controls { margin-top: auto; padding-top: 14px; }
.lit-shelf-controls .lit-shelf-status { display: block; width: 100%; }
.lit-shelf-info h2 { font: 400 clamp(1.2rem,1.7vw,1.65rem)/1.16 var(--f-display); margin: 0 0 8px; }
.lit-shelf-info p { font: 1rem/1.3 var(--f-body); color: var(--c-ink-soft); margin-bottom: 0; }
.lit-shelf-status, .shelf-status-select { max-width: 100%; border: 1px solid var(--c-rule-strong); background: var(--c-bg-raised); color: var(--c-ink); font: .72rem var(--f-ui); padding: 8px; border-radius: 2px; }
.lit-shelf-status:focus-visible, .lit-shelf-tabs a:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
.lit-shelf-manage-control { flex: none; }
.lit-shelf-manage-control > summary, .lit-book-shelves summary { cursor: pointer; color: var(--c-accent); font: 600 .75rem var(--f-ui); }
.lit-shelf-manage-control > summary { padding: 10px 0; white-space: nowrap; list-style: none; }
.lit-shelf-manage-control > summary::-webkit-details-marker { display: none; }
.lit-shelf-manage-control[open] > summary { text-decoration: underline; text-underline-offset: 5px; }
.lit-shelf-manage-panel { position: absolute; z-index: 25; right: 0; top: calc(100% - 8px); width: min(430px,100%); padding: 12px 22px 16px; border: 1px solid var(--c-rule-strong); background: var(--c-bg-raised); box-shadow: 0 15px 32px #0002; }
@media (max-width: 650px) { .lit-shelf-tools { flex-wrap: wrap; column-gap: 16px; row-gap: 3px; } .lit-shelf-tools #shelf-search { width: 100%; } }
#shelf-create { padding: 14px 0; }
#shelf-create > label { display: block; margin-bottom: 7px; font: .74rem var(--f-ui); color: var(--c-ink-soft); }
#shelf-create > div { display: flex; gap: 8px; }
#shelf-name { flex: 1; min-width: 0; padding: 9px; background: var(--c-bg-raised); color: var(--c-ink); border: 1px solid var(--c-rule-strong); }
#shelf-create button { padding: 9px 13px; border: 0; background: var(--c-accent); color: var(--c-accent-ink); cursor: pointer; font: 600 .73rem var(--f-ui); }
.lit-shelf-manage-list { border-top: 1px solid var(--c-rule); padding-bottom: 10px; }
.lit-shelf-manage-list > div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; font: .9rem var(--f-body); }
.lit-shelf-manage-list button { border: 0; background: transparent; color: var(--c-accent); cursor: pointer; font: .71rem var(--f-ui); }
.lit-book-shelves { margin-top: 9px; }
.lit-book-shelves summary { color: var(--c-ink-soft); }
.lit-book-shelves label, .lit-book-form-shelves label { display: flex; gap: 8px; align-items: center; padding: 7px 0; color: var(--c-ink); font: .78rem var(--f-ui); cursor: pointer; }
.lit-book-shelves input, .lit-book-form-shelves input { accent-color: var(--c-accent); }
.lit-book-form-shelves { margin-top: 18px; border-top: 1px solid var(--c-rule); padding-top: 15px; }
.book-search-filters { display: flex; gap: 16px; flex-wrap: wrap; margin: 2px 0 17px; }
.book-search-filters label { display: flex; align-items: center; gap: 8px; font: .75rem var(--f-ui); color: var(--c-ink-soft); }
.book-search-filters select { background: var(--c-bg-raised); border: 1px solid var(--c-rule-strong); color: var(--c-ink); padding: 7px 9px; border-radius: 3px; font: .79rem var(--f-ui); }
.book-cover-upload { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 12px 0; }
.book-cover-upload > label { cursor: pointer; display: inline-block; margin: 0; }
.book-cover-upload > button { background: transparent; color: var(--c-accent); border: 0; cursor: pointer; text-decoration: underline; font: .76rem var(--f-ui); }
.book-cover-upload > p { width: 100%; margin: 0; }
.book-more-details { margin: 28px 0 10px; border: 1px solid var(--c-rule-strong); background: var(--c-bg-raised); }
.book-more-details > summary { cursor: pointer; padding: 18px 20px; color: var(--c-ink); font: 600 .85rem var(--f-ui); }
.book-more-details > summary span { float: right; font: .72rem var(--f-ui); color: var(--c-ink-soft); }
.book-more-details > .panel { margin: 0; border-top: 1px solid var(--c-rule); }
/* A book's private editorial page: a display surface, not an editing form. */
.book-writing-desk { max-width: 820px; margin: 0 auto; padding: clamp(28px,5vw,65px) clamp(20px,5vw,65px) 100px; }
.book-writing-back { color: var(--c-accent); text-decoration: none; font: 600 .78rem var(--f-ui); }
.book-writing-desk > .lit-overline { margin-top: 55px; color: var(--c-accent); }
.book-writing-desk h1 { font: 400 clamp(3.4rem,7vw,6.5rem)/1.08 var(--f-display); letter-spacing: -.03em; margin: 12px 0 18px; }
.book-writing-book { font: italic 1.65rem var(--f-body); color: var(--c-ink); }
.book-writing-book span { color: var(--c-ink-soft); }
.book-writing-intro { max-width: 52ch; font: 1.16rem/1.6 var(--f-body); color: var(--c-ink-soft); margin: 18px 0 45px; }
.book-writing-field { margin-bottom: 32px; }
.book-writing-field label { display: block; font: 400 1.9rem var(--f-display); margin-bottom: 12px; }
.book-writing-field label span { font: .75rem var(--f-ui); color: var(--c-ink-soft); }
.book-writing-field textarea, .book-writing-field select { display: block; width: 100%; max-width: 100%; box-sizing: border-box; padding: 17px 19px; background: var(--c-bg); border: 1px solid var(--c-rule-strong); color: var(--c-ink); font: 1.12rem/1.6 var(--f-body); border-radius: 2px; }
.book-writing-field textarea:focus-visible, .book-writing-field select:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.book-writing-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.book-writing-footnote { border-top: 1px solid var(--c-rule); padding-top: 25px; margin-top: 45px; color: var(--c-ink-soft); font: .9rem/1.5 var(--f-ui); }
.book-writing-footnote a { color: var(--c-accent); }
.book-writing-art { margin: 50px 0 38px; padding: 32px 0; border-block: 1px solid var(--c-rule); }
.book-writing-art h2 { font: 400 2.5rem var(--f-display); margin: 6px 0 10px; }
.book-writing-art > p:not(.lit-overline) { color: var(--c-ink-soft); font: 1rem/1.5 var(--f-body); }
.book-writing-art-preview { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 185px; max-width: 480px; margin: 22px 0; background: var(--c-bg-sunk); border: 1px dashed var(--c-rule-strong); color: var(--c-ink-soft); }
.book-writing-art-preview img { display: block; width: 100%; max-height: 390px; object-fit: contain; }
.book-writing-art-preview span { font: 3.5rem var(--f-display); }
.book-writing-art-preview small { font: italic 1rem var(--f-body); }
.book-writing-art .btn { display: inline-block; margin-right: 8px; cursor: pointer; }
.book-writing-caption { margin: 22px 0 0; max-width: 480px; }
.book-writing-caption label { font-size: 1.3rem; }
.book-writing-caption input { width: 100%; box-sizing: border-box; padding: 12px; background: var(--c-bg); border: 1px solid var(--c-rule-strong); color: var(--c-ink); font: 1rem var(--f-body); }
.book-archive-art figure { margin: 24px 0; max-width: 650px; }
.book-archive-art img { display: block; max-width: 100%; max-height: 570px; object-fit: contain; }
.book-archive-art figcaption { font: italic 1.05rem var(--f-body); color: var(--c-ink-soft); margin-top: 14px; }
.journal-entry-cards { display: grid; gap: 25px; grid-template-columns: repeat(auto-fit,minmax(min(100%,290px),1fr)); }
.journal-entry-card { display: block; text-decoration: none; color: var(--c-ink); border-top: 1px solid var(--c-rule-strong); padding-top: 15px; }
.journal-entry-visual { height: 215px; display: flex; justify-content: center; align-items: center; background: var(--c-bg-sunk); overflow: hidden; }
.journal-entry-visual img { max-width: 100%; max-height: 100%; object-fit: contain; }
.journal-entry-words { padding: 18px 5px; }
.journal-entry-words h3 { font: 400 2rem/1.12 var(--f-display); margin: 8px 0 12px; }
.journal-entry-words p:not(.lit-overline) { font: italic 1.04rem/1.4 var(--f-body); color: var(--c-ink-soft); }
.journal-entry-words small { color: var(--c-accent); font: 600 .7rem var(--f-ui); letter-spacing: .08em; }
.book-archive-page { max-width: 1420px; margin: 0 auto; padding: clamp(25px,5vw,65px) clamp(20px,7vw,105px) 110px; }
.book-archive-page { position: relative; isolation: isolate; }
.book-archive-page > :not(.book-decor-layer) { position: relative; z-index: 1; }
.book-decor-toolbar { margin-top: 65px; border-top: 1px solid var(--c-rule); padding-top: 24px; }
.book-decor-tools { padding: 22px; margin-top: 12px; border: 1px solid var(--c-rule-strong); background: var(--c-bg-sunk); display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.book-decor-tools[hidden] { display: none; }
.book-decor-add-row { width: 100%; display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.book-decor-selected-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; width: 100%; border-top: 1px solid var(--c-rule); padding-top: 14px; }
.book-decor-selected-tools[hidden] { display: none; }
.book-decor-selected-tools span { font: 600 .72rem var(--f-ui); text-transform: uppercase; letter-spacing: .08em; color: var(--c-accent); margin-right: 12px; }
.book-decor-tools label { color: var(--c-ink-soft); font: .78rem var(--f-ui); }
.book-decor-tools select { display: block; max-width: 220px; margin-top: 6px; padding: 9px; background: var(--c-bg); color: var(--c-ink); border: 1px solid var(--c-rule-strong); }
.book-decor-tools p { flex: 1 1 230px; margin: 0; color: var(--c-ink-soft); font: italic .94rem var(--f-body); }
.book-decor-tools .btn { cursor: pointer; }
.book-decor-layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.book-decor-piece { position: absolute; display: block; height: auto; max-width: 75%; transform: translate(-50%, -50%); pointer-events: none; user-select: none; touch-action: none; filter: drop-shadow(3px 7px 5px rgba(0,0,0,.1)); }
.book-decor-piece > img { display: block; width: 100%; height: auto; user-select: none; pointer-events: none; }
.book-decor-piece.frame-fine { background: var(--c-bg); padding: 6px; border: 1px solid #b6a48d; box-shadow: inset 0 0 0 2px var(--c-bg), inset 0 0 0 3px #b6a48d; }
.book-decor-piece.frame-ornate { border: 23px solid transparent; border-image-source: url('../assets/frames/antique-gilt-rectangle.webp'); border-image-slice: 175; border-image-repeat: stretch; filter: drop-shadow(0 6px 10px rgba(44,28,16,.24)); }
.book-decor-piece.frame-gilded-round, .book-decor-piece.frame-gilded-oval { position: absolute; padding: 0; filter: drop-shadow(0 6px 10px rgba(44,28,16,.24)); }
.book-decor-piece.frame-gilded-round { aspect-ratio: 1 / 1; }
.book-decor-piece.frame-gilded-oval { aspect-ratio: 3 / 4; }
.book-decor-piece.frame-gilded-round > img, .book-decor-piece.frame-gilded-oval > img { position: absolute; width: 64%; height: 64%; inset: 18%; border-radius: 50%; object-fit: cover; }
.book-decor-piece.frame-gilded-oval > img { width: 64%; height: 66%; inset: 17% 18%; }
.book-decor-piece.frame-gilded-round::after, .book-decor-piece.frame-gilded-oval::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-size: 100% 100%; background-repeat: no-repeat; }
.book-decor-piece.frame-gilded-round::after { background-image: url('../assets/frames/antique-gilt-round.webp'); }
.book-decor-piece.frame-gilded-oval::after { background-image: url('../assets/frames/antique-gilt-oval.webp'); }
.book-decor-piece .book-decor-resize { z-index: 5; }
.book-decor-piece.frame-polaroid { background: #fffaf0; padding: 10px 10px 28px; box-shadow: 0 4px 12px rgba(44,28,16,.18); }
.book-decor-resize { display: none; position: absolute; bottom: -13px; right: -13px; width: 28px; height: 28px; padding: 0; border: 1px solid var(--c-accent); border-radius: 50%; background: var(--c-bg); color: var(--c-accent); font: 700 17px var(--f-ui); cursor: nwse-resize; pointer-events: auto; touch-action: none; }
.book-decor-editing .book-decor-layer { pointer-events: none; }
.book-decor-editing .book-decor-piece { pointer-events: auto; cursor: grab; outline: 1px dashed var(--c-accent); outline-offset: 4px; }
.book-decor-editing .book-decor-piece.selected { outline: 2px solid var(--c-accent); }
.book-decor-editing .book-decor-piece.selected .book-decor-resize { display: block; }
.book-decor-editing .book-decor-piece:active { cursor: grabbing; }
@media (max-width: 740px) { .book-decor-piece { max-width: 75%; } .book-decor-tools { align-items: stretch; } }
.book-archive-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 0 28px; border-bottom: 1px solid var(--c-rule); font: 600 .75rem var(--f-ui); }
.book-archive-nav a { color: var(--c-ink-soft); text-decoration: none; }
.book-archive-nav .book-archive-edit { color: var(--c-accent); border: 1px solid var(--c-rule-strong); padding: 10px 14px; }
.book-archive-hero { display: grid; grid-template-columns: minmax(170px,.62fr) minmax(0,1.38fr); align-items: center; gap: clamp(28px,5vw,75px); padding: clamp(26px,4vw,52px) 0; border-bottom: 1px solid var(--c-rule-strong); }
.book-archive-hero::after { content: '❧'; grid-column: 1 / -1; justify-self: center; color: var(--c-accent); font: italic 1.7rem var(--f-body); line-height: 1; margin-bottom: -62px; padding: 0 20px; background: var(--c-bg); }
.book-archive-cover { max-width: 245px; margin: 0 auto; width: 100%; }
.book-archive-cover-art { position: relative; padding: clamp(8px,1vw,14px); border: 1px solid var(--c-rule-strong); background: color-mix(in srgb,var(--c-bg-raised) 70%,transparent); box-shadow: 10px 12px 0 color-mix(in srgb,var(--c-rule) 40%,transparent); }
.book-archive-cover-art::before { content: ''; position: absolute; inset: 4px; border: 1px solid var(--c-rule); pointer-events: none; }
.book-archive-cover-caption { display: flex; justify-content: space-between; gap: 12px; margin: 26px 0 0; padding-top: 9px; border-top: 1px solid var(--c-rule); font: 600 .58rem/1.4 var(--f-ui); letter-spacing: .14em; color: var(--c-ink-faint); }
.book-archive-cover-caption span { color: var(--c-accent); }
.book-archive-cover .cover { display: block; width: 100%; height: auto; max-height: 380px; object-fit: contain; }
.book-archive-cover .cover-ph { aspect-ratio: 2/3; display: grid; place-items: center; background: var(--c-bg-sunk); }
.book-archive-intro .lit-overline { color: var(--c-accent); }
.book-archive-intro .lit-overline span { padding: 0 8px; }
.book-archive-intro h1 { font: 400 clamp(2.8rem,4.5vw,5.5rem)/1.04 var(--f-display); letter-spacing: -.035em; margin: 14px 0 16px; overflow-wrap: anywhere; }
.book-archive-next-step { margin-top: 8px; padding-top: 10px; }
.book-archive-next-step p { max-width: 48ch; margin: 0 0 16px; color: var(--c-ink-soft); font: 1rem/1.5 var(--f-body); }
.book-archive-primary { display: inline-block; padding: 12px 18px; background: var(--c-accent); color: var(--c-bg) !important; text-decoration: none; font: 600 .76rem var(--f-ui); letter-spacing: .05em; }
.book-archive-jump { margin-left: 18px; color: var(--c-accent); font: 600 .76rem var(--f-ui); }
.book-archive-author { font: italic 1.65rem/1.3 var(--f-body); color: var(--c-ink-soft); }
.book-archive-rating { font: 1.5rem/1 var(--f-body); letter-spacing: .12em; color: var(--c-accent); margin: 34px 0 10px; }
.book-archive-rating span { display: inline-block; font: .68rem var(--f-ui); text-transform: uppercase; letter-spacing: .12em; margin-left: 10px; color: var(--c-ink-soft); }
.book-archive-dates { font: italic 1.05rem var(--f-body); color: var(--c-ink-soft); margin: 28px 0 0; }
.book-archive-dates span { padding: 0 8px; }
.book-archive-facts { display: flex; flex-wrap: wrap; gap: 10px 22px; font: .75rem var(--f-ui); color: var(--c-ink-soft); margin-top: 25px; text-transform: capitalize; }
.book-archive-ornamental-rule { display: flex; align-items: center; gap: 16px; max-width: 390px; color: var(--c-accent); margin: 24px 0 4px; }
.book-archive-ornamental-rule::before, .book-archive-ornamental-rule::after { content: ''; height: 1px; flex: 1; background: var(--c-rule-strong); }
.book-archive-ornamental-rule span { font: 1.1rem/1 var(--f-body); }
.book-archive-body { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(230px,.65fr); gap: clamp(45px,8vw,130px); padding-top: clamp(45px,7vw,100px); }
.book-archive-writing section { padding-bottom: clamp(40px,6vw,85px); }
.book-inline-journal { border: 1px solid var(--c-rule-strong); background: var(--c-bg-sunk); padding: clamp(22px,4vw,42px); margin-bottom: 45px; }
.book-inline-journal[hidden], #book-journal-reading[hidden] { display: none; }
.book-inline-heading { margin-bottom: 28px; }
.book-inline-heading h2 { margin: 10px 0 12px; }
.book-inline-heading > p:last-child { color: var(--c-ink-soft); font: italic 1.05rem/1.5 var(--f-body); }
.book-inline-journal label { display: block; margin: 24px 0 10px; color: var(--c-ink); font: 400 1.55rem var(--f-display); }
.book-inline-journal label span { font: .72rem var(--f-ui); color: var(--c-ink-soft); }
.book-inline-journal textarea, .book-inline-journal select { width: 100%; max-width: 100%; box-sizing: border-box; padding: 15px; border: 1px solid var(--c-rule-strong); border-radius: 2px; color: var(--c-ink); background: var(--c-bg); font: 1.05rem/1.55 var(--f-body); }
.book-inline-journal textarea:focus-visible, .book-inline-journal select:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.book-inline-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.book-draft-state { margin: 14px 0 0; color: var(--c-ink-faint); font: italic .88rem/1.4 var(--f-body); }
.book-inline-journal textarea { resize: vertical; min-height: 95px; }
.book-inline-journal label[for="bj-review"] { margin-top: 32px; }
.book-archive-next-step .book-decor-toolbar { display: inline; margin: 0 0 0 14px; padding: 0; border: 0; }
.book-archive-next-step #book-decor-toggle { width: auto; padding: 5px 0; border: 0; border-bottom: 1px solid var(--c-rule-strong); border-radius: 0; background: transparent; box-shadow: none; color: var(--c-ink-soft); font: 500 .77rem/1.4 var(--f-ui); letter-spacing: .035em; text-transform: none; vertical-align: middle; }
.book-archive-next-step #book-decor-toggle:hover, .book-archive-next-step #book-decor-toggle:focus-visible { color: var(--c-accent); border-bottom-color: var(--c-accent); }
.book-archive-next-step .book-decor-tools { position: relative; z-index: 3; margin-top: 10px; padding: 16px; }
.book-inline-preview { margin-top: 32px; padding: 25px clamp(18px,3vw,34px); border: 1px solid var(--c-rule-strong); background: var(--c-bg); }
.book-inline-preview > .lit-overline { margin: 0 0 18px; }
.book-inline-preview [data-preview] + [data-preview] { margin-top: 20px; }
.book-inline-preview [data-preview][hidden], .book-inline-preview-empty[hidden] { display: none; }
.book-inline-preview h3 { margin: 0 0 8px; font: 1.55rem var(--f-display); color: var(--c-ink); }
.book-inline-preview p:not(.lit-overline), .book-inline-preview blockquote { margin: 0; color: var(--c-ink-soft); font: 1.05rem/1.65 var(--f-body); white-space: pre-wrap; overflow-wrap: anywhere; }
.book-inline-preview blockquote { padding-left: 16px; border-left: 2px solid var(--c-rule-strong); font-style: italic; }

/* A real writing spread: the editor and the keepsake sit on facing leaves. */
.book-archive-page.is-editing-journal .book-archive-body { display: block; max-width: 1120px; margin-inline: auto; }
.book-archive-page.is-editing-journal .book-archive-aside { display: none; }
.book-inline-spread { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.88fr); gap: clamp(28px,4vw,68px); align-items: start; }
.book-inline-fields { min-width: 0; }
.book-inline-journal .book-inline-spread label { margin-top: 19px; font-size: clamp(1.2rem,2vw,1.45rem); }
.book-inline-journal .book-inline-spread textarea,
.book-inline-journal .book-inline-spread select { border: 0; border-bottom: 1px solid var(--c-rule-strong); border-radius: 0; padding: 10px 3px; background: transparent; }
.book-inline-journal .book-inline-spread textarea:focus-visible,
.book-inline-journal .book-inline-spread select:focus-visible { outline: none; border-bottom-color: var(--c-accent); box-shadow: 0 1px 0 var(--c-accent); }
.book-inline-journal .book-inline-preview { margin-top: 0; min-height: 425px; padding: clamp(25px,3vw,44px); border: 0; background: color-mix(in srgb,var(--c-bg-sunk) 52%,var(--c-bg)); box-shadow: -9px 0 18px -21px var(--c-ink), 1px 3px 13px color-mix(in srgb,var(--c-ink) 6%,transparent); }
.book-inline-preview > .lit-overline { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--c-rule); }
.book-inline-preview [data-preview] { overflow-wrap: anywhere; }
.book-inline-preview-empty { font-style: italic !important; }
@media (max-width: 790px) {
  .book-inline-spread { grid-template-columns: 1fr; gap: 28px; }
  .book-inline-journal .book-inline-preview { min-height: 160px; }
}
.book-entry-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; }
.book-entry-heading button, .book-inline-start { flex: none; border: 0; border-bottom: 1px solid var(--c-rule-strong); padding: 3px 0; background: transparent; color: var(--c-ink-soft); font: 500 .75rem var(--f-ui); letter-spacing: .04em; cursor: pointer; }
.book-entry-heading button:hover, .book-entry-heading button:focus-visible, .book-inline-start:hover, .book-inline-start:focus-visible { color: var(--c-accent); border-bottom-color: var(--c-accent); }
.book-archive-hero { grid-template-columns: minmax(160px,.67fr) minmax(0,1.33fr); align-items: start; gap: clamp(32px,6vw,100px); }
.book-archive-cover { margin-top: 20px; transform: rotate(-2.3deg); transform-origin: 55% 40%; }
.book-archive-cover-art { box-shadow: 13px 16px 0 color-mix(in srgb,var(--c-rule) 32%,transparent), 0 14px 22px rgba(58,35,24,.08); }
.book-archive-intro { padding: clamp(8px,3.5vw,42px) 0 0; }
.book-archive-intro h1 { max-width: 13ch; }
.book-archive-body { grid-template-columns: minmax(0,1.6fr) minmax(210px,.65fr); gap: clamp(34px,7vw,115px); }
.book-archive-page-marker { display: flex; justify-content: space-between; gap: 18px; margin: 0 0 46px; padding: 0 0 10px; border-bottom: 1px solid var(--c-rule-strong); color: var(--c-ink-faint); font: 600 .63rem var(--f-ui); letter-spacing: .16em; }
.book-archive-page-marker span:last-child { color: var(--c-accent); letter-spacing: .08em; }
.book-archive-writing .book-archive-review { padding-left: clamp(0px,2.7vw,32px); }
.book-archive-passage { position: relative; margin: 22px 0 48px clamp(4px,4vw,58px); padding: 28px 0 42px !important; border: 0; border-top: 1px solid var(--c-rule-strong); border-bottom: 1px solid var(--c-rule); background: none; }
.book-archive-passage::after { content: '”'; position: absolute; top: 12px; right: 0; color: color-mix(in srgb,var(--c-accent) 18%,transparent); font: italic 5rem/1 var(--f-display); pointer-events: none; }
.book-archive-aside { padding-top: clamp(30px,5vw,80px); }
.book-archive-aside section { padding: 14px 0 24px 12px; background: none; border: 0; border-left: 1px solid var(--c-rule-strong); margin-bottom: 66px; }
.book-archive-aside section:nth-child(even) { margin-left: 22px; margin-right: -14px; }
.book-inline-journal { background: transparent; border: 0; border-top: 1px solid var(--c-rule-strong); border-bottom: 1px solid var(--c-rule-strong); box-shadow: none; padding-inline: clamp(4px,2vw,24px); }
@media (max-width: 740px) { .book-archive-cover { transform: rotate(-1deg); } .book-archive-aside { padding-top: 0; } .book-archive-aside section:nth-child(even) { margin-left: 0; margin-right: 0; } .book-archive-passage { margin-left: 0; } }
.book-archive-page.is-unwritten .book-archive-body { display: block; padding-top: clamp(30px,5vw,65px); }
.book-archive-page.is-unwritten .book-archive-writing { max-width: 850px; margin: 0 auto; }
.book-archive-page.is-unwritten .book-archive-page-marker { margin-bottom: 26px; }
.book-archive-page.is-unwritten .book-archive-empty { position: relative; min-height: 340px; margin: 0 10px 70px; padding: clamp(44px,7vw,95px) clamp(26px,8vw,100px) 72px !important; text-align: left; border: 1px solid var(--c-rule); box-shadow: 10px 12px 0 color-mix(in srgb,var(--c-rule) 30%,transparent); background: repeating-linear-gradient(to bottom,transparent 0,transparent 37px,color-mix(in srgb,var(--c-rule) 42%,transparent) 38px,transparent 39px),color-mix(in srgb,var(--c-bg-raised) 38%,var(--c-bg)); transform: rotate(-.35deg); }
.book-archive-page.is-unwritten .book-archive-empty { border-color: #c7baa4; box-shadow: 2px 3px 2px rgba(74,55,33,.08), 8px 11px 16px rgba(74,55,33,.11), inset 0 0 28px rgba(107,89,62,.07); background-image: linear-gradient(rgba(255,255,252,.13),rgba(255,255,252,.13)),url('../assets/victorian-notebook-paper-unruled.webp'); background-color: #f4f0e5; background-size: cover; background-position: center center; }
.book-archive-page.is-unwritten .book-archive-empty { border-color: #ded8cc; box-shadow: 3px 4px 10px rgba(56,48,36,.09), inset 0 0 10px rgba(90,78,60,.025); background: #f8f7f2 url('../assets/regency-writing-paper.webp') center center / cover no-repeat; }
.book-archive-page.is-unwritten .book-empty-dateline { display: block; color: var(--c-accent); font: 600 .68rem var(--f-ui); letter-spacing: .13em; }
.book-archive-page.is-unwritten .book-archive-empty h2 { max-width: 18ch; margin: 38px 0 19px; font: italic 400 clamp(2.5rem,4vw,4.6rem)/1.1 var(--f-display); }
.book-archive-page.is-unwritten .book-archive-empty p { max-width: 46ch; font: 1.18rem/1.7 var(--f-body); }
.book-archive-page.is-unwritten .book-inline-start { margin-top: 20px; color: var(--c-accent); }
.book-empty-ornament { position: absolute; right: 36px; bottom: 20px; color: color-mix(in srgb,var(--c-accent) 48%,transparent); font: italic 2.5rem var(--f-body); }
.book-archive-page.is-unwritten .book-archive-aside { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(25px,7vw,95px); max-width: 850px; margin: 0 auto 45px; padding: 0; }
.book-archive-page.is-unwritten .book-archive-aside section, .book-archive-page.is-unwritten .book-archive-aside section:nth-child(even) { margin: 0; padding: 16px 0; border: 0; border-top: 1px solid var(--c-rule-strong); }
.book-archive-page.is-unwritten .book-archive-aside h3 { font-size: 1.55rem; }
@media (max-width: 740px) { .book-archive-page.is-unwritten .book-archive-aside { grid-template-columns: 1fr; gap: 10px; } .book-archive-page.is-unwritten .book-archive-empty { margin-inline: 0; min-height: 260px; } }
.book-archive-primary { border: 0; cursor: pointer; }
.book-archive-writing .lit-overline, .book-archive-aside .lit-overline { color: var(--c-accent); font-size: .7rem; }
.book-archive-writing h2 { font: 400 clamp(2.6rem,4vw,4.5rem)/1.1 var(--f-display); margin: 17px 0 25px; }
.book-archive-prose { font: 1.28rem/1.8 var(--f-body); color: var(--c-ink); }
.book-archive-review .book-archive-prose::first-letter { float: left; font: 400 3.3rem/.95 var(--f-display); color: var(--c-accent); padding: .12em .12em 0 0; }
.book-archive-passage { border-block: 1px solid var(--c-rule); padding-block: 35px 55px !important; }
.book-archive-passage blockquote { margin: 25px 0 0; padding: 0; border: 0; font: italic 400 clamp(1.9rem,3vw,3.2rem)/1.36 var(--f-body); color: var(--c-ink); }
.book-archive-aside section { padding: 18px 0 30px; border-top: 1px solid var(--c-rule-strong); margin-bottom: 40px; }
.book-archive-aside h3 { font: 400 2rem var(--f-display); margin: 15px 0; }
.book-archive-aside p:not(.lit-overline), .book-archive-aside small { font: 1rem/1.5 var(--f-body); color: var(--c-ink-soft); }
.book-archive-aside ul { list-style: none; padding: 0; margin: 10px 0 16px; }
.book-archive-aside li { padding: 8px 0; font: 1rem/1.3 var(--f-body); }
.book-archive-aside li span { color: var(--c-accent); margin-right: 6px; }
.book-archive-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.book-archive-tags span { padding: 7px 12px; border: 1px solid var(--c-rule-strong); border-radius: 20px; font: .75rem var(--f-ui); }
.book-archive-empty { text-align: center; padding: 35px 10px 75px !important; }
.book-archive-empty .book-archive-ornament { font: 3rem var(--f-body); color: var(--c-accent); }
.book-archive-empty p { font: 1.1rem var(--f-body); color: var(--c-ink-soft); }
.book-archive-empty a { display: inline-block; margin-top: 16px; color: var(--c-accent); font: 600 .75rem var(--f-ui); }
@media (max-width: 740px) {
  .book-decor-toolbar { margin-top: 35px; padding-top: 18px; }
  .book-decor-tools { padding: 14px; }
  .book-decor-add-row > label:first-child { flex: 1 1 100%; }
  .book-decor-tools select { max-width: 100%; width: 100%; }
  .book-decor-selected-tools .btn { flex: 1; }
  .book-archive-hero { grid-template-columns: 1fr; gap: 28px; padding: 25px 0 40px; }
  .book-archive-hero::after { margin-bottom: -48px; }
  .book-archive-cover { max-width: 175px; }
  .book-archive-intro h1 { font-size: clamp(2.6rem,10vw,4.2rem); }
  .book-archive-body { grid-template-columns: 1fr; gap: 10px; }
  .book-archive-nav { font-size: .68rem; }
}
.canvas-section-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.canvas-section-options button { display: grid; gap: 8px; text-align: left; padding: 14px; border: 1px solid #d8c6ae; border-radius: 5px; background: white; color: #4b2828; cursor: pointer; }
.canvas-section-options button:hover { border-color: #a8482a; }
.canvas-section-options strong { font: 600 14px Jost,sans-serif; }
.canvas-section-options span { font: 12px/1.4 Jost,sans-serif; color: #795b54; }

/* Optional additions to the original homepage, not forced default blocks. */
.lit-optional-notebook { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); gap: clamp(30px,6vw,100px); padding: clamp(50px,8vw,130px) clamp(25px,8vw,130px); background: var(--c-bg-raised); }
.lit-optional-intro h2 { font: 400 clamp(3rem,5vw,6rem)/1 var(--f-display); letter-spacing: -.04em; margin: 20px 0; }
.lit-optional-intro p { font: 1.3rem/1.5 var(--f-body); color: var(--c-ink-soft); }
.lit-optional-intro>a { display: inline-block; font: .76rem var(--f-ui); color: var(--c-accent); margin-top: 20px; }
.lit-optional-entries { align-self: center; }
.lit-optional-entry { display: block; color: var(--c-ink); text-decoration: none; padding: 25px 0; border-bottom: 1px solid var(--c-rule-strong); }
.lit-optional-entry>span, .lit-optional-entry small { font: 600 .7rem var(--f-ui); letter-spacing: .1em; color: var(--c-accent); }
.lit-optional-entry h3 { font: italic 2.4rem var(--f-body); margin: 10px 0; }
.lit-optional-entry p { font: 1.1rem/1.5 var(--f-body); color: var(--c-ink-soft); }
.lit-optional-empty { padding: 35px; text-align: center; border: 1px solid var(--c-rule-strong); }
.lit-optional-empty>span { font: 4rem var(--f-body); color: var(--c-accent); }
.lit-optional-empty h3 { font: italic 2rem var(--f-body); }
.lit-optional-empty p { font: 1.1rem var(--f-body); }
.lit-optional-empty a { font: .7rem var(--f-ui); color: var(--c-accent); }
.lit-optional-progress { display: grid; grid-template-columns: 1fr 1fr; gap: 25px 60px; align-items: center; padding: clamp(40px,6vw,90px) clamp(25px,8vw,130px); background: var(--c-sage); color: #fff8ec; }
.lit-optional-progress h2 { font: 400 clamp(2.4rem,4vw,4.5rem)/1.1 var(--f-display); }
.lit-optional-progress-number { display: flex; gap: 13px; align-items: baseline; justify-content: end; flex-wrap: wrap; }
.lit-optional-progress-number strong { font: 400 clamp(3rem,6vw,6rem)/1 var(--f-display); }
.lit-optional-progress-number em { font: italic 1.8rem var(--f-body); }
.lit-optional-progress-number span { flex-basis: 100%; text-align: right; font: .65rem var(--f-ui); letter-spacing: .13em; }
.lit-optional-progress-bar { grid-column: 1/-1; height: 3px; background: #ffffff55; }
.lit-optional-progress-bar span { height: 100%; display: block; background: #fff8ec; }
.lit-optional-progress>a { color: #fff8ec; font: .7rem var(--f-ui); }
@media (max-width: 1050px) { .lit-shelf-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } }

/* The word archive is a little commonplace book, not a data list. */
.word-cabinet { width: min(1180px,100%); margin: 0 auto; padding: clamp(35px,6vw,85px) clamp(22px,5vw,76px) 100px; }
.word-cabinet-head { position: relative; max-width: 780px; margin: 0 auto clamp(55px,7vw,95px); text-align: center; }
.word-cabinet-head .lit-overline { color: var(--c-accent); letter-spacing: .22em; }
.word-cabinet-head h1 { margin: 18px 0 20px; font: 400 clamp(3.7rem,7.6vw,7.6rem)/.98 var(--f-display); letter-spacing: -.045em; color: var(--c-ink); }
.word-cabinet-head h1 em { font-family: var(--f-body); font-weight: 400; }
.word-cabinet-head > p:not(.lit-overline) { max-width: 550px; margin: 0 auto; font: italic clamp(1.1rem,2vw,1.4rem)/1.55 var(--f-body); color: var(--c-ink-soft); }
.word-cabinet-add { margin-top: 29px; padding: 8px 1px; border: 0; border-bottom: 1px solid var(--c-rule-strong); background: transparent; color: var(--c-accent); font: 600 .75rem var(--f-ui); letter-spacing: .08em; cursor: pointer; }
.word-cabinet-add:hover, .word-cabinet-add:focus-visible { border-bottom-color: var(--c-accent); }
.word-cabinet-intro { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 23px; padding-bottom: 13px; border-bottom: 1px solid var(--c-rule); font: 600 .65rem var(--f-ui); letter-spacing: .2em; color: var(--c-ink-faint); }
.word-cabinet-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: clamp(34px,6vw,100px); }
.word-cabinet-entry { min-width: 0; border-bottom: 1px solid var(--c-rule); }
.word-cabinet-entry:nth-child(even) { transform: translateY(38px); }
.word-cabinet-entry a { display: flex; flex-direction: column; min-height: 245px; padding: clamp(20px,3vw,38px) 5px 20px; color: inherit; text-decoration: none; }
.word-cabinet-number { display: flex; justify-content: space-between; font: italic 1rem var(--f-body); color: var(--c-accent); }
.word-cabinet-number span { color: var(--c-rule-strong); }
.word-cabinet-word { margin: 13px 0 7px; font: italic 400 clamp(2.3rem,4vw,4.3rem)/1.05 var(--f-display); overflow-wrap: anywhere; transition: color .2s ease; }
.word-cabinet-entry a:hover .word-cabinet-word, .word-cabinet-entry a:focus-visible .word-cabinet-word { color: var(--c-accent); }
.word-cabinet-label { font: .76rem var(--f-ui); letter-spacing: .09em; color: var(--c-ink-faint); }
.word-cabinet-note { margin-top: 16px; font: italic 1.15rem/1.5 var(--f-body); color: var(--c-ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.word-cabinet-foot { margin-top: auto; padding-top: 22px; font: .76rem var(--f-ui); color: var(--c-ink-soft); }
.word-cabinet-foot > span:not(.word-cabinet-arrow) { padding: 0 6px; color: var(--c-accent); }
.word-cabinet-arrow { float: right; color: var(--c-accent); font-size: 1.05rem; }
.word-cabinet-empty { max-width: 560px; margin: 0 auto; padding: 45px 15px; text-align: center; border-top: 1px solid var(--c-rule); }
.word-cabinet-empty > span { font-size: 2.3rem; color: var(--c-accent); }
.word-cabinet-empty h2 { font: 400 2.5rem var(--f-display); }
.word-cabinet-empty p { font: italic 1.15rem/1.5 var(--f-body); color: var(--c-ink-soft); }
.wrow[hidden] { display: none !important; }
.w-book-search { display: block; width: 100%; margin: 6px 0 14px; padding: 12px 4px; border: 0; border-bottom: 1px solid var(--c-rule-strong); border-radius: 0; background: transparent; color: var(--c-ink); font: 1rem var(--f-body); }
.w-book-search:focus-visible { outline: none; border-bottom-color: var(--c-accent); }
@media (max-width: 680px) { .word-cabinet-grid { grid-template-columns: 1fr; } .word-cabinet-entry:nth-child(even) { transform: none; } .word-cabinet-entry a { min-height: 200px; } }
@media (max-width: 700px) {
  .lit-shelf-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 30px 17px; }
  .lit-shelf-folio { flex-wrap: wrap; gap: 1px 6px; padding-bottom: 5px; font-size: .54rem; }
  .lit-shelf-info h2 { font-size: clamp(1.2rem,5vw,1.55rem); }
  .lit-shelf-info p { font-size: .95rem; }
  .lit-shelf-count { font-size: .58rem; }
  .lit-shelf-header { flex-direction: column; align-items: start; }
  .lit-shelf-tools { align-items: stretch; flex-direction: column; }
  .lit-optional-notebook, .lit-optional-progress { grid-template-columns: 1fr; }
  .lit-optional-progress-number { justify-content: start; }
  .lit-optional-progress-number span { text-align: left; }
  .canvas-section-options { grid-template-columns: 1fr; }
}

/* Settings is a small editorial dashboard, not a stack of unrelated forms. */
.settings-dashboard { width: min(1190px,100%); margin: 0 auto; padding: clamp(36px,6vw,88px) clamp(20px,5vw,65px) 90px; }
.settings-heading { border-bottom: 1px solid var(--c-rule-strong); padding-bottom: 34px; margin-bottom: 35px; }
.settings-heading h1 { font: 400 clamp(3.6rem,7vw,7rem)/1 var(--f-display); letter-spacing: -.045em; margin: 14px 0 18px; }
.settings-heading h1 em { font-family: var(--f-body); font-weight: 400; }
.settings-heading>p:last-child { color: var(--c-ink-soft); font: 1.35rem/1.4 var(--f-body); }
.settings-top-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; margin-bottom: 22px; }
.settings-card { padding: clamp(23px,3vw,40px); background: var(--c-bg-raised); border: 1px solid var(--c-rule); margin-bottom: 22px; min-width: 0; }
.settings-top-grid .settings-card { margin-bottom: 0; }
.settings-card-head { margin-bottom: 25px; }
.settings-card-head>span { color: var(--c-accent); font: 600 .67rem var(--f-ui); letter-spacing: .17em; }
.settings-card-head h2 { font: 400 clamp(2rem,3vw,3.35rem)/1.1 var(--f-display); margin: 10px 0 0; }
.settings-card>p { font: 1.15rem/1.45 var(--f-body); color: var(--c-ink-soft); max-width: 62ch; }
.settings-design-card>.lit-primary-action { display: inline-flex; margin: 20px 0 18px; }
.settings-link-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 26px; margin-top: 8px; }
.settings-link-grid a { display: flex; justify-content: space-between; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--c-rule); color: var(--c-ink); text-decoration: none; font: 600 .78rem/1.3 var(--f-ui); }
.settings-link-grid a:hover { color: var(--c-accent); }
.settings-mode-field { margin-top: 28px; padding-top: 23px; border-top: 1px solid var(--c-rule); }
.settings-mode-field>label { display: block; font: 600 .66rem var(--f-ui); color: var(--c-ink-faint); letter-spacing: .14em; margin-bottom: 11px; }
.settings-mode-field select, .settings-goals-card input { width: 100%; max-width: 100%; background: var(--c-bg-field); border: 1px solid var(--c-rule-strong); color: var(--c-ink); padding: 11px 12px; border-radius: 2px; }
.settings-mode-field .hint { margin: 11px 0 0; font: .76rem/1.5 var(--f-ui); color: var(--c-ink-faint); }
.settings-goals-card>.field { margin: 0 0 20px; }
.settings-goals-card .field>label { display: block; margin-bottom: 8px; }
.settings-disclosure { border-top: 1px solid var(--c-rule-strong); margin-top: 20px; padding-top: 16px; }
.settings-disclosure summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; cursor: pointer; list-style: none; font: 600 .76rem var(--f-ui); color: var(--c-ink); }
.settings-disclosure summary::-webkit-details-marker { display: none; }
.settings-disclosure summary span { font: 1.5rem var(--f-body); color: var(--c-accent); }
.settings-disclosure[open] summary span { transform: rotate(45deg); }
.settings-disclosure>div, .settings-disclosure>.kv { margin-top: 23px; }
.settings-disclosure>.hint { margin-top: 15px; }
.settings-backup-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 10px; }
.settings-backup-card .notice { margin-bottom: 18px; }
.settings-footnote { max-width: 760px; margin: 35px 0 0; font: .73rem/1.65 var(--f-ui); color: var(--c-ink-faint); }
.settings-footnote a { color: inherit; }
/* A typography direction rather than a competing full-site theme. */
.type-direction { margin: 35px 0 28px; padding: clamp(26px,5vw,48px); border: 1px solid var(--c-rule-strong); background: var(--c-bg-raised); }
.type-direction h2 { font: 400 clamp(2.8rem,5vw,5rem)/1.02 'Bodoni Moda',Didot,serif; letter-spacing: -.045em; margin: 14px 0 12px; }
.type-direction h2 em { font: italic 400 1em 'EB Garamond',Georgia,serif; }
.type-direction-sample { font: 400 clamp(1.7rem,3vw,2.8rem)/1.15 'Mrs Saint Delafield',cursive; color: var(--c-accent); margin: 10px 0 28px; }
.type-direction>p:not(.lit-overline):not(.type-direction-sample):not(.hint) { max-width: 55ch; color: var(--c-ink-soft); font: 1.16rem/1.55 'EB Garamond',Georgia,serif; }
.type-direction button { margin: 19px 0 9px; }
.canvas-item.is-full-width { max-width: none; }
.canvas-item.is-full-width .canvas-resize { display: none; }
.canvas-upload-choice { display: block !important; cursor: pointer; text-align: center; border: 1px dashed var(--c-rule-strong); padding: 18px 12px !important; margin: 16px 0 20px !important; font: 600 .85rem var(--f-ui); color: var(--c-accent); background: var(--c-bg-raised); }
.canvas-upload-choice:hover { border-color: var(--c-accent); }
.picture-advanced { margin-top: 1.25rem; border: 1px solid var(--c-rule-strong); border-radius: 5px; background: var(--c-bg-raised); }
.picture-advanced > summary { cursor: pointer; padding: .9rem 1rem; font: 600 .85rem var(--f-ui); color: var(--c-ink); list-style-position: inside; }
.picture-advanced > summary span { float: right; font-size: .75rem; font-weight: 400; color: var(--c-ink-soft); }
.picture-advanced-body { padding: .25rem 1rem 1rem; border-top: 1px solid var(--c-rule); }
.canvas-check { display: flex !important; flex-direction: row !important; align-items: flex-start; gap: 9px !important; line-height: 1.45; }
.canvas-check input { margin-top: 3px; flex: none; }
/* Editor chrome follows the nocturne palette instead of retaining terracotta. */
:root[data-theme="dark"] .canvas-editing .canvas-panel,
:root[data-theme="dark"] .canvas-panel,
:root[data-theme="dark"] .canvas-picker-dialog { background: var(--c-bg-raised); color: var(--c-ink); border-color: var(--c-rule-strong); }
:root[data-theme="dark"] .canvas-panel button,
:root[data-theme="dark"] .canvas-panel input,
:root[data-theme="dark"] .canvas-panel select,
:root[data-theme="dark"] .canvas-panel textarea,
:root[data-theme="dark"] .canvas-picker-grid button,
:root[data-theme="dark"] .canvas-add-card { background: var(--c-bg-field) !important; color: var(--c-ink); border-color: var(--c-rule-strong) !important; }
:root[data-theme="dark"] .canvas-panel-hint,
:root[data-theme="dark"] .canvas-add-card span,
:root[data-theme="dark"] .canvas-panel-tabs button { color: var(--c-ink-soft); }
:root[data-theme="dark"] .canvas-panel-links a,
:root[data-theme="dark"] .canvas-panel-tabs button.active { color: var(--c-accent); }
:root[data-theme="dark"] .canvas-panel-tabs,
:root[data-theme="dark"] .canvas-panel-links { border-color: var(--c-rule); }
:root[data-theme="dark"] .canvas-editing .canvas-item:hover,
:root[data-theme="dark"] .canvas-editing .canvas-item.is-selected { outline-color: var(--c-accent); }

/* Keep the older section settings sheet from appearing behind the canvas
   inspector. A section dialog is a distinct focused task, not a second panel. */
.canvas-editing.sheet-open .canvas-panel { visibility: hidden; pointer-events: none; }
.canvas-editing.sheet-open .canvas-toolbar { visibility: hidden; pointer-events: none; }
.canvas-editing .sheet-host { z-index: 1200; padding-left: 300px; padding-top: calc(var(--h-masthead,68px) + 44px); }
.canvas-editing .sheet { width: min(700px, calc(100% - 36px)); max-height: calc(100dvh - var(--h-masthead,68px) - 75px); border-radius: 5px; }
@media (max-width: 850px) {
  .canvas-editing .sheet-host { padding-left: 0; padding-top: 0; }
  .canvas-editing .sheet { max-height: 86dvh; width: 100%; }
}

/* One contextual inspector: the selected section remains visible in the page. */
@media (min-width: 851px) {
  .canvas-editing .canvas-panel { width: 355px; }
  .canvas-editing #app { margin-left: 355px; }
}
.canvas-editing [data-sec].canvas-section-selected { outline: 3px solid var(--c-accent); outline-offset: -4px; }
.canvas-editing [data-sec].canvas-section-selected > .edit-tools { opacity: 1; }
.canvas-editing .edit-tools { opacity: .75; }
.canvas-section-label { background: var(--c-accent-soft); padding: 14px; border-left: 3px solid var(--c-accent); font: .78rem/1.6 var(--f-ui); margin: 6px 0 15px; }
.canvas-section-label strong { display: block; font: 500 1.65rem/1.15 var(--f-display); color: var(--c-ink); margin-top: 3px; }
.canvas-section-inspector { border-top: 1px solid var(--c-rule); padding-top: 16px; }
.canvas-section-inspector h2 { font: 500 1.6rem/1.1 var(--f-display); margin: 0 0 8px; }
.canvas-section-inspector #sec-fields { margin-top: 16px; }
.canvas-section-inspector .field { margin-bottom: 15px; }
.canvas-section-inspector .field>label { font-size: .75rem; }
.canvas-section-inspector input,
.canvas-section-inspector textarea,
.canvas-section-inspector select { max-width: 100%; }
.canvas-section-inspector .token-row { display: block; }
.canvas-section-inspector .token-control { display: block; width: 100%; }
.canvas-section-inspector .type-pop { max-width: 100%; }
.canvas-section-inspector .small.muted { font-size: .78rem; }
/* The drawer is the editor; don't show a competing button on every section. */
.canvas-editing .edit-tools { display: none; }
.canvas-editing [data-sec]:not(.canvas-section-selected):hover { outline: 1px solid color-mix(in srgb,var(--c-accent) 60%,transparent); outline-offset: -2px; }
.canvas-section-list { display: grid; margin: 15px 0 25px; border-top: 1px solid var(--c-rule); }
.canvas-section-list button { display: grid; grid-template-columns: 30px minmax(0,1fr) 15px; align-items: center; gap: 12px; text-align: left; border: 0; border-bottom: 1px solid var(--c-rule) !important; border-radius: 0 !important; padding: 14px 3px !important; background: transparent !important; color: var(--c-ink) !important; }
.canvas-section-list button:hover { background: var(--c-accent-soft) !important; }
.canvas-section-number { color: var(--c-accent); font: 600 .7rem var(--f-ui); }
.canvas-kind-badge { display: inline-grid; place-items: center; width: 29px; height: 29px; border: 1px solid currentColor; border-radius: 3px; font: 500 1.08rem/1 var(--f-ui); vertical-align: middle; flex: none; }
.canvas-kind-badge.kind-image { color: #52756e; background: #e1eae4; }
.canvas-kind-badge.kind-writing { color: #8e5264; background: #f3e4e9; }
.canvas-kind-badge.kind-reading { color: #a06b35; background: #f5ecdb; }
.canvas-kind-badge.kind-books { color: #5d6390; background: #e8e8f2; }
.canvas-section-list strong { display: block; font: 500 1.18rem/1.2 var(--f-display); }
.canvas-section-list small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: .72rem/1.5 var(--f-ui); color: var(--c-ink-soft); margin-top: 4px; }
.canvas-inspector-tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 3px; border-bottom: 1px solid var(--c-rule-strong); margin: 12px 0; }
.canvas-panel-actions { display: inline-flex; align-items: center; gap: 6px; }
.canvas-panel-actions [data-canvas="section-exit"] { min-width: 34px; min-height: 34px; padding: 4px 8px; font-size: 1.3rem; line-height: 1; }
.canvas-inspector-tabs button { border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; background: transparent !important; color: var(--c-ink-soft) !important; padding: 11px 4px !important; font: 600 .78rem var(--f-ui) !important; }
.canvas-inspector-tabs button.active { color: var(--c-accent) !important; border-bottom-color: var(--c-accent) !important; }
.canvas-field-group { font: 600 .65rem var(--f-ui); letter-spacing: .15em; text-transform: uppercase; color: var(--c-accent); margin: 24px 0 12px; }
.canvas-more-tools { margin: 15px 0; border-top: 1px solid var(--c-rule); border-bottom: 1px solid var(--c-rule); padding: 11px 0; }
.canvas-more-tools summary { cursor: pointer; font: 600 .73rem/1.45 var(--f-ui); letter-spacing: .035em; color: var(--c-ink-soft); padding: 4px 1px; }
.canvas-more-tools[open] summary { color: var(--c-accent); margin-bottom: 15px; }
.canvas-more-tools .canvas-panel-links { margin-top: 8px; }
.canvas-more-tools .canvas-duplicate { width: 100%; margin-top: 12px; padding: 10px; border: 1px solid var(--c-rule-strong); background: var(--c-bg-raised); color: var(--c-accent); font: 600 .75rem var(--f-ui); text-align: center; }
.canvas-more-tools .canvas-duplicate:hover { border-color: var(--c-accent); }
.canvas-more-tools .canvas-panel-row { align-items: end; }
.canvas-lock-action { display: grid; grid-template-columns: 28px minmax(0,1fr); column-gap: 9px; align-items: center; width: 100%; text-align: left; background: var(--c-bg-raised); color: var(--c-ink); border: 1px solid var(--c-rule-strong); border-radius: 3px; padding: 11px 12px; margin: 10px 0 16px; cursor: pointer; }
.canvas-lock-action > span { grid-row: span 2; font: 1.1rem var(--f-ui); color: var(--c-accent); text-align: center; }
.canvas-lock-action strong { font: 600 .78rem/1.4 var(--f-ui); }
.canvas-lock-action small { font: .68rem/1.4 var(--f-ui); color: var(--c-ink-soft); }
.canvas-lock-action.is-locked { background: #e9eee8; border-color: #7a927b; color: #3c5c43; }
.canvas-lock-action.is-locked > span { color: #3c5c43; }
.canvas-more-tools .canvas-opacity-field { display: block; width: 100%; min-width: 0; }
.canvas-more-tools .canvas-opacity-field input[type="range"] { display: block; width: 100%; max-width: none; box-sizing: border-box; margin: 10px 0 4px; }
.canvas-more-tools .canvas-opacity-field input[type="range"] { appearance: none; -webkit-appearance: none; height: 26px; min-height: 26px; cursor: pointer; border: 0; border-radius: 0; background: linear-gradient(to right, var(--c-accent) 0 var(--opacity-fill, 100%), var(--c-rule-strong) var(--opacity-fill, 100%) 100%) center / 100% 5px no-repeat; }
.canvas-opacity-field input[type="range"]::-webkit-slider-runnable-track { height: 5px; background: transparent; border: none; }
.canvas-opacity-field input[type="range"]::-moz-range-track { height: 5px; background: transparent; border: none; }
.canvas-opacity-field input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 17px; height: 17px; margin-top: -6px; border-radius: 50%; background: var(--c-accent); border: 2px solid var(--c-bg-raised); box-shadow: 0 0 0 1px var(--c-accent); }
.canvas-opacity-field input[type="range"]::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: var(--c-accent); border: 2px solid var(--c-bg-raised); box-shadow: 0 0 0 1px var(--c-accent); }
.canvas-opacity-field output { float: right; font: 600 .75rem var(--f-ui); color: var(--c-accent); }
.canvas-section-inspector .rich-input { min-height: 52px; padding: 12px; }
.canvas-section-inspector .rich-bar { margin-bottom: 6px; }
.canvas-section-inspector .type-row { border-bottom: 1px solid var(--c-rule); padding-bottom: 15px; margin-bottom: 12px; }
.canvas-section-inspector .type-row { display: block; padding: 11px 0 14px; }
.canvas-section-inspector .type-row-label { display: block; margin-bottom: 7px; font-size: .72rem; letter-spacing: .07em; }
.canvas-section-inspector .type-row-ctl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.canvas-section-inspector .face-btn { padding: 9px 11px; font-size: .9rem; }
.canvas-section-inspector .ink-dot { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: auto; height: auto; min-height: 42px; padding: 0 10px; border-radius: 3px; background: var(--c-bg-raised); box-shadow: none; font: 600 .74rem var(--f-ui); color: var(--c-ink); }
.canvas-section-inspector .ink-dot::before { content: ''; width: 15px; height: 15px; flex: 0 0 15px; border: 1px solid var(--c-rule-strong); border-radius: 50%; background: var(--sw); }
.canvas-section-inspector .ink-dot.is-auto::before { background: linear-gradient(135deg, transparent 45%, var(--c-ink-faint) 45%, var(--c-ink-faint) 55%, transparent 55%), var(--c-bg); }
/* A phone gets a compact bottom editing tray, not a second full-page form.
   Keep the section and its artwork visible above the tools. */
@media (max-width: 850px) {
  .canvas-editing #app { padding-bottom: 260px; }
  .canvas-editing .canvas-panel {
    height: min(250px, 36dvh);
    max-height: 36dvh;
    padding: 10px 14px;
  }
  .canvas-editing .canvas-panel-head { margin-bottom: 6px; }
  .canvas-editing .canvas-panel-tabs { margin-bottom: 10px; }
  .canvas-editing .canvas-panel-tabs button { padding: 8px 4px; }
  .canvas-section-inspector { padding-top: 9px; }
  .canvas-section-inspector h2 { font-size: 1.28rem; }
  .canvas-section-inspector #sec-fields { margin-top: 8px !important; }
  .canvas-section-inspector .type-row {
    display: grid;
    grid-template-columns: minmax(90px, 30%) minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    margin: 0;
    padding: 7px 0;
  }
  .canvas-section-inspector .type-row-label { margin: 0; font-size: .67rem; }
  .canvas-section-inspector .type-row-ctl { gap: 5px; }
  .canvas-section-inspector .face-btn { padding: 7px 9px; font-size: .8rem; }
  .canvas-section-inspector .ink-dot { min-height: 35px; padding: 0 8px; font-size: .7rem; }
  .canvas-section-inspector .ink-dot::before { width: 12px; height: 12px; flex-basis: 12px; }
  .canvas-section-inspector .type-pop { grid-column: 1 / -1; }
  .canvas-section-inspector .canvas-field-group { margin: 14px 0 6px; }
  .canvas-section-inspector .canvas-panel-hint { margin-bottom: 8px; }
}
.canvas-editing #app [data-edit] { cursor: text; }
.canvas-editing #app [data-edit].canvas-text-target { outline: 2px solid var(--c-accent); outline-offset: 5px; background: color-mix(in srgb,var(--c-accent) 8%,transparent); }
.canvas-inline-text { min-height: 100px; border: 1px solid var(--c-rule-strong); background: var(--c-bg-field); color: var(--c-ink); padding: 17px; font: 1.35rem/1.4 var(--f-body); white-space: pre-wrap; overflow-wrap: anywhere; }
.canvas-inline-text:focus { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.canvas-text-done { width: 100%; margin-top: 15px; background: var(--c-accent) !important; color: var(--c-accent-ink) !important; border-color: var(--c-accent) !important; }
.canvas-section-row { display: grid; grid-template-columns: 39px minmax(0,1fr) 32px; gap: 5px; align-items: center; border-bottom: 1px solid var(--c-rule); padding: 7px 0; cursor: grab; }
.canvas-section-row:active { cursor: grabbing; }
.canvas-section-list .canvas-section-row button.canvas-section-select { display: block; text-align: left; border: 0 !important; padding: 9px 5px !important; min-width: 0; }
.canvas-section-row .canvas-section-number { font-size: .65rem; }
.canvas-section-moves { display: flex; flex-direction: column; gap: 2px; }
.canvas-section-list .canvas-section-moves button { display: block; width: 28px; min-height: 26px; padding: 1px !important; border: 1px solid var(--c-rule) !important; font: 1rem var(--f-ui); }
.canvas-section-moves button:disabled { opacity: .24; cursor: default; }
.canvas-duplicate { display: inline-block; vertical-align: middle; margin-left: 5px; font: 600 .6rem var(--f-ui); color: var(--c-accent); }
.canvas-delete-section { width: 100%; margin-top: 30px; color: var(--c-danger) !important; background: transparent !important; border-color: var(--c-rule-strong) !important; }
.recent-books-empty { border: 1px dashed var(--c-rule-strong); background: color-mix(in srgb,var(--c-bg-sunk) 30%,transparent); text-align: center; padding: clamp(28px,5vw,65px) 20px; }
.recent-books-empty p { font: italic 400 clamp(1.5rem,2.5vw,2.4rem)/1.25 var(--f-body); margin: 0 0 10px; }
.recent-books-empty span { display: block; font: 1rem/1.45 var(--f-body); color: var(--c-ink-soft); }
.recent-books-empty a { display: inline-block; margin-top: 18px; font: 600 .72rem var(--f-ui); color: var(--c-accent); }
.canvas-artwork-cta { margin: 24px 0 10px; padding: 18px 14px; border: 1px dashed var(--c-rule-strong); background: var(--c-bg-raised); }
.canvas-artwork-cta p { margin: 0 0 14px; font: .78rem/1.55 var(--f-ui); color: var(--c-ink-soft); }
.canvas-artwork-cta button { width: 100%; background: var(--c-accent) !important; color: var(--c-accent-ink) !important; border-color: var(--c-accent) !important; }
/* Appearance is chosen in Settings, leaving the reading masthead uncluttered. */
#mode-toggle { display: none !important; }
@media (max-width: 780px) {
  .settings-top-grid { grid-template-columns: 1fr; }
  .settings-link-grid { grid-template-columns: 1fr; }
  .settings-heading h1 { font-size: clamp(3.2rem,13vw,5rem); }
}