/* QUARTERLY SKIN - one source of truth for every page's chrome.
   The page is paper; the works are plates: chrome flips day/night, artifact cards stay dark plates.
   Load AFTER studio.css. Laws: no em dash anywhere · 12px floor · creed has no comma. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..640;1,9..144,300..640&family=Inter:wght@400;500;600&family=Caveat:wght@500;600&display=swap');

:root{
  /* day - cream paper */
  --paper:#f6efe0;--paper2:#f0e7d2;--card:#fbf6ea; /* warmer ivory - Jane's day sweep, 2026-07-29 */
  --plate:#fbf6ea;              /* a card's body - one step off the paper, see THE PLATE BODY */
  /* --faint is the quiet voice: tags, counts, the footer name, the back link.
     It was #84796a and measured 3.72:1 on the paper - under the 4.5:1 AA floor,
     across 44 text runs on 20 pages. Raised here, in the token, so every one of
     them moved in one edit. #756a5a is the smallest step that clears:
     4.62:1 on --paper #f5efe2 and 4.91:1 on --card #fbf6ea, the only two
     surfaces this colour ever sits on (measured, source/a11y_probe.mjs). */
  --ink:#26231d;--soft:#544c3f;--faint:#756a5a;
  --accent:#a1492f;--accent2:#8a3b28;
  --qrule:#cfc5ac;--qrule2:#ddd4bf;
  --qserif:'Fraunces',Georgia,'Times New Roman',serif;
  --qsans:'Inter',system-ui,sans-serif;
  --qhand:'Caveat',cursive;
}
/* Re-base studio.css tokens onto the skin. DECLARED ON BODY, NOT :root, and that is
   the whole point: a custom property resolves its var() in the scope where it is
   declared. The night palette below lands on body.night - so an alias declared up on
   :root could only ever see the day values, and studio.css rendered day tokens on
   night pages no matter which light was on. Measured: the guestbook's "read the whole
   guestbook" link at 3.23:1, day accent on a near-black page. On body, the alias and
   the palette land on the same element and one declaration is right in both lights.
   Fixed 2026-07-20. */
body{
  --bg:var(--paper);--bg2:var(--paper2);
  --mut:var(--faint);--gold:var(--accent);
}
body.night{
  --paper:#0d0e11;--paper2:#14161b;--card:#14161b;
  --plate:#181b21;              /* one step above the room - the value her open panel already uses */
  /* the same quiet voice at night: .40 measured 3.51:1 across 69 text runs.
     .50 is the smallest step that clears AA on all three night surfaces -
     4.86:1 on --paper, 4.81:1 on --card, 4.73:1 on --plate. Still clearly
     subordinate to --ink, which sits near 15:1. The hierarchy is untouched;
     only the floor moved. */
  --ink:#f4f1ea;--soft:rgba(244,241,234,.66);--faint:rgba(244,241,234,.50);
  --accent:#e4c893;--accent2:#f0dcb4;
  --qrule:rgba(228,200,147,.24);--qrule2:rgba(228,200,147,.13);
}
body{
  background:var(--paper);color:var(--ink);
  background-image:radial-gradient(120% 80% at 50% -10%,var(--card) 0%,var(--paper) 60%);
  transition:background-color .7s ease,color .7s ease;
}
/* display text never widows */
h1,h2,h3{text-wrap:balance}

/* Heard, not seen. For the heading a sighted reader does not need because the
   whole page says it, and a screen reader reader does need because otherwise the
   outline jumps h1 straight to h3. Never for anything a mouse can reach: this
   leaves no target and no visible focus ring. */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- shared chrome ---------- */
.qwrap{position:relative;z-index:2;max-width:1100px;margin:0 auto;padding:0 clamp(18px,5vw,54px)}
.label{font-family:var(--qsans);font-weight:600;text-transform:uppercase;letter-spacing:.16em;font-size:12px;color:var(--faint)}
a.label{text-decoration:none;transition:color .3s}
a.label:hover{color:var(--accent)}
.rule{border:0;border-top:1px solid var(--qrule);margin:0}
.rule.double{border-top:3px double var(--qrule)}
.rule.hair{border-top:1px solid var(--qrule2)}

/* utility line - the moon */
.qbar{display:flex;justify-content:flex-end;gap:26px;padding:clamp(12px,2vw,18px) 0 6px}
.mode{
  font-family:var(--qsans);font-weight:600;font-size:15px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint);background:none;border:0;opacity:.8;
  padding:8px 10px;cursor:pointer;transition:color .3s,opacity .3s;
}
.mode:hover{color:var(--accent);opacity:1}

/* slim interior flag - one calm line: back link · page label · moon */
.qflag{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:clamp(20px,3.4vw,32px) 0 14px}
.qright{display:inline-flex;align-items:center;gap:18px}
.qright .mode{padding:2px 4px}
/* the signed-in soul, named beside the moon */
.who-chip{
  font-family:var(--qsans);font-size:12px;letter-spacing:.04em;text-transform:lowercase;
  color:var(--faint);text-decoration:none;opacity:.8;padding-bottom:1px;
  max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .3s;
}
.who-chip:hover{color:var(--accent)}
@media(max-width:600px){.who-chip{max-width:110px}}
/* the signed-in coin - a small sun in the corner, obvious in any light */
.who-coin{
  width:27px;height:27px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--qserif);font-size:14px;font-weight:500;text-decoration:none;
  background:var(--accent);color:var(--paper);border:1px solid var(--accent);
  transition:transform .25s ease,box-shadow .25s ease;
}
.who-coin:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(40,32,20,.25)}
.who-coin{cursor:pointer;border:1px solid var(--accent)}
.who-coin.ghost{background:none;border:1px solid var(--qrule);color:var(--faint)}
.who-coin.ghost::after{content:"·"}
.who-coin.ghost.eye::after{content:"👁";font-size:12px}
.who-coin.ghost:hover{border-color:var(--accent);color:var(--accent)}
/* the curator's small paper menu */
.who-menu{
  position:absolute;top:calc(100% + 12px);right:0;z-index:85;min-width:200px;
  background:var(--card);border:1px solid var(--qrule);box-shadow:0 18px 44px rgba(40,32,20,.18);
  display:flex;flex-direction:column;padding:6px 0;
}
.who-menu a,.who-menu button{
  font-family:var(--qsans);font-size:13px;letter-spacing:.04em;text-align:left;
  color:var(--soft);background:none;border:0;cursor:pointer;text-decoration:none;
  padding:11px 18px;transition:.2s;
}
.who-menu a:hover,.who-menu button:hover{color:var(--accent2);background:var(--paper)}

/* room hero - the interior page head */
.qhead{text-align:center;padding:clamp(26px,4.5vw,46px) 0 clamp(14px,2.6vw,24px)}
.qhead h1{
  margin:0;font-family:var(--qserif);font-weight:330;font-size:clamp(38px,7.5vw,76px);
  line-height:.95;letter-spacing:-.015em;font-variation-settings:"opsz" 144;color:var(--ink);
}
.qhead h1 .num{font-style:italic;color:var(--accent);opacity:.7;font-size:.5em;margin-right:.2em}
.qhead p{
  margin:14px auto 0;max-width:52ch;font-family:var(--qserif);font-style:italic;
  font-size:clamp(16px,2vw,20px);color:var(--soft);line-height:1.5;text-wrap:balance;
}

/* keep-walking band, re-skinned */
.qwalk{border-top:1px solid var(--qrule2);margin-top:clamp(36px,6vh,64px);padding:30px 0 36px}
.qwalk .label{display:block;margin-bottom:14px;color:var(--accent)}
.qwalk .row{display:flex;gap:10px;flex-wrap:wrap}
.qwalk a{
  font-family:var(--qsans);font-size:13px;letter-spacing:.06em;text-decoration:none;
  border:1px solid var(--qrule2);padding:9px 16px;color:var(--soft);transition:.3s;
}
.qwalk a:hover{color:var(--accent2);border-color:var(--accent)}
.qwalk a.home{border-color:var(--qrule);color:var(--accent)}

/* footer creed */
.qfoot{text-align:center;padding:34px 0 52px}
.qfoot .creed{margin:22px 0 0;font-family:var(--qserif);font-style:italic;font-size:20px;color:var(--soft)}
.qfoot .nm{margin:8px 0 0;font-family:var(--qsans);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--faint)}
.qfoot .qlinks{margin-top:14px;font-family:var(--qsans);font-size:13px;color:var(--faint)}
.qfoot .qlinks a{color:var(--faint);text-decoration:none;border-bottom:1px solid var(--qrule2);padding-bottom:1px;transition:color .3s}
.qfoot .qlinks a:hover{color:var(--accent)}

/* the hang - her wall controls, shared by every room (curator.js hangControls).
   phones keep each page's own stacking; the hang speaks above 640px only. */
@media(min-width:641px){
  .hang2{grid-template-columns:repeat(2,1fr)!important}
  .hang3{grid-template-columns:repeat(3,1fr)!important}
  .hang4{grid-template-columns:repeat(4,1fr)!important}
  .hangfull{width:100vw;max-width:none!important;margin-left:calc(50% - 50vw)!important;margin-right:0!important;padding-left:clamp(24px,3.5vw,56px)!important;padding-right:clamp(24px,3.5vw,56px)!important;box-sizing:border-box}
  /* a lone last card centers itself instead of hugging the left edge (2 across w/ 3 cards -> 3rd in the middle) */
  .hang2 > :last-child:nth-child(odd):not(.cur8div){grid-column:1/-1;justify-self:center;width:calc(50% - 13px)}
  .hang3 > :last-child:nth-child(3n-2):not(.cur8div){grid-column:1/-1;justify-self:center;width:calc(33.333% - 18px)}
  .hang4 > :last-child:nth-child(4n-3):not(.cur8div){grid-column:1/-1;justify-self:center;width:calc(25% - 20px)}
}
/* THE HANG LADDER (2026-07-20) - a chosen column count is a WIDE-screen choice, not a law at
   every width. The hang switched on at 641px and then HELD four columns all the way down to
   it, so a 700px screen showed 145px cards whose names broke one word per line - "come" over
   "home", "landing page ·" over "warm" over "· tender". Read at 500px the room looked cured,
   because 500px is below the switch; the fault had only moved up into the 641-1100 band.
   media.html never had it: it steps 4 -> 2 at 980. So the hang now steps the way studio.css's
   own .grid already steps, and the lone-last-card centering follows the count actually in
   force - a rule written for four columns was centering a card at 25% width inside a
   two-column grid. One block here, and every hang room follows in one motion. */
@media(min-width:641px) and (max-width:900px){
  .hang3,.hang4{grid-template-columns:repeat(2,1fr)!important}
  .hang3 > :last-child:nth-child(3n-2):not(.cur8div),
  .hang4 > :last-child:nth-child(4n-3):not(.cur8div){grid-column:auto;justify-self:stretch;width:auto}
}
@media(min-width:901px) and (max-width:1100px){
  .hang4{grid-template-columns:repeat(3,1fr)!important}
  .hang4 > :last-child:nth-child(4n-3):not(.cur8div){grid-column:auto;justify-self:stretch;width:auto}
}
.hangbar{display:flex;justify-content:flex-end;gap:8px;padding:2px 0 10px}
.hangbar button{font-family:var(--qsans);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;background:rgba(251,246,234,.95);border:1px solid rgba(161,73,47,.55);color:#8a3b28;padding:8px 13px;cursor:pointer;transition:.25s;border-radius:2px;box-shadow:0 4px 14px rgba(40,32,20,.18)}
body.night .hangbar button{background:rgba(13,14,17,.92);color:#f0dcb4;border-color:rgba(228,200,147,.5)}
.hangbar button:hover{color:var(--accent);border-color:var(--accent)}

/* plates - dark artifact cards keep a paper mat in day mode */
.plate-mat{background:var(--card);border:1px solid var(--qrule2);padding:8px;box-shadow:0 12px 28px rgba(40,32,20,.12)}
body.night .plate-mat{box-shadow:0 14px 32px rgba(0,0,0,.5)}

/* ---------- THE PLATE BODY ----------
   Jane, 2026-07-20, looking at the live shop: "the cards are a bit dark. How can we make
   the colors pop more and more vibrant so that it's more alluring? Also, the bottom footer
   of every preview card is a little dark, and it matches the background."

   Both notes were one fault. `.card` had no fill at all - computed background was
   rgba(0,0,0,0) - so the caption strip under every preview sat directly on the paper at the
   same value, and the preview read as an image floating in a void rather than an object on
   a shelf. Rooms had each written `.grid .card{background:none;border:0}` by hand, with a
   single keyline standing in for the card's edge.

   One law, here, so every room follows in one motion: a card gets a real body - the house
   --plate fill under the picture AND the caption, a hairline, a small mat around the
   preview, a lift, and a border that warms under the hand. Square, per the square law
   below. A made object under warm light, never a dashboard tile. */
.card{
  /* NO CARD BOX. Jane, 2026-07-20: "put it back to how it was." The plate WAS
     the box - removing the 1px line never helped, because the rectangle she
     kept seeing was the fill, not the border. Her original note was only that
     the previews looked dark and the caption matched the page; the true-colour
     fix answered the first, and she would rather have the second than a box
     around every picture. The preview floats on the page, as it always did. */
  background:none;
  border:0;
  border-radius:0;
  padding:0;
  box-shadow:none;
  transition:transform .35s ease;
}
.card:hover{transform:translateY(-3px)}
/* the caption lives inside the body now, so the keyline that stood in for a card edge retires */
/* the caption keeps the page's own padding - the keyline hangs off its left edge */
/* HER KEYLINE STAYS. This said display:none - added with the plate, because a
   card body turned the line into a stub. The plate is gone; the line is hers
   ("no boxes - a single keyline falls from the preview's edge down past the
   name"). Nothing here may switch it off again. */
/* no widows in a mood line either - the browser evens the lines at every card width
   (a card once read "journey page · cinematic ·" then "awe" alone on the next line) */
.card .cap .tag{text-wrap:balance}
/* a full-bleed poster card - her own offers - keeps its picture edge to edge */
.card.adcard{padding:0}
/* a card is now only as tall as what is on it. While cards were invisible boxes, letting
   them stretch to the tallest in the row cost nothing; with a real body, an ordinary card
   beside a 1x2 plate stretched into a wide expanse of empty plate under its name. Cards
   that grow their own picture to fill the cell (.tall, .adcard) still stretch. */
.grid > .card,.sgrid > .card,.mgrid > .card{align-self:start}
.grid > .card.tall,.grid > .card.adcard{align-self:stretch}

/* TRUE COLOUR. The card does not grade the work, in either direction.
   (Was saturate(1.24) brightness(1.08) contrast(1.02) - added 2026-07-20 while
   answering her "make the colours pop". She had asked for the DIMMING to be
   lifted, which it was; boosting past true was my addition and she did not ask
   for it. A preview of a living website must show what a visitor would really
   see. Warmth comes from the plate around the picture, never a filter over it.)
   .m is spelled out so this still beats studio.css's `.frame img.m`. */
.frame img,.frame video,.frame img.m,.frame video.m{
  filter:none;
  transition:filter .5s ease;
}
.card:hover .frame img,.card:hover .frame video,.card:hover .frame img.m{
  filter:none;   /* true colour on hover too - the card never grades the work */
}
/* the inner vignette studio.css paints on every frame was eating the corners of each
   preview. Kept, because it seats the picture - but a whisper, with a soft warm fall of
   light across the top left instead of a dark pool. */
.frame::after{
  /* NO WASH. Jane, 2026-07-20: "is this true colour to you?" - it was not.
     A filter was not the only thing grading the work: this ::after laid an inset
     dark vignette AND a warm gold gradient over every preview. Not a filter, so
     the sweep missed it, doing the same job by another name. A card shows the
     work; it never tints it. */
  box-shadow:none;
  background:none;
}

/* THE SQUARE LAW - the quarterly is print: every plate sits square on the paper.
   studio.css (the v1 skin underneath) rounds .frame to 14px; this skin loads after it
   and squares every card frame in one place, so no room can drift rounded again.
   (Dialogs/panels may stay rounded - they are furniture, not plates.) */
.frame{border-radius:0}

@media(prefers-reduced-motion:reduce){*{transition:none !important}}

/* KEYBOARD FOCUS - a soft house-amber ring, drawn only on keyboard travel (never on a mouse
   click, thanks to :focus-visible), so the ordinary look never changes. One place, every
   chrome control - moons, hearts, links, fields. Laws: subtle, spaced hyphen, no look change. */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible,[role="button"]:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}