/* MEVAGISSEY V5 — the preview stylesheet.
   Colour is declared ONCE, here. The builder types no hex (the palette ratchet counts hex under
   tools/, and a builder that carries colour is a builder you cannot re-theme).
   The brand: harbour slate and deep water, rope and sail for the paper, a lantern amber for the
   things you can act on. Fraunces for headings because the village signs are serifed; Inter for
   everything that has to be read quickly on a phone at the quayside. */

:root {
  --mv-deep:   #12303c;   /* harbour slate — the bar, the footer, the deep bands */
  --mv-deep-2: #1b4353;   /* a step up from it, for panels on the dark */
  --mv-sea:    #3d7f97;   /* mid water */
  --mv-sea-pale:#d7e7ec;  /* the shallows, for tints on the light */
  --mv-paper:  #faf5ea;   /* sail canvas — the page */
  --mv-paper-2:#f2e9d7;   /* a warmer band */
  --mv-rope:   #c9b48c;   /* rope and harbour stone */
  --mv-lantern:#e08a3c;   /* the watchman's lantern — actions only */
  --mv-lantern-soft:#f6e2cd;
  --mv-ink:    #1d2b31;
  --mv-muted:  #5d6f77;
  --mv-line:   rgba(29,43,49,.14);
  --mv-shadow: 0 10px 30px rgba(18,48,60,.10);
  --mv-shadow-lift: 0 18px 42px rgba(18,48,60,.18);
  --mv-display: "Fraunces", Georgia, "Times New Roman", serif;
  --mv-body: "Inter", -apple-system, system-ui, sans-serif;
}

/* BORDER-BOX, BEFORE ANYTHING ELSE. Several blocks here set width:100% and their own padding —
   the character action list, the lift cards — and without this the padding is added OUTSIDE the
   width and the page scrolls sideways on a 360px screen. check-responsive catches exactly this. */
*, *::before, *::after { box-sizing: border-box; }

/* The engine's blocks.css sets body{padding:2rem} — a demo-gallery default. Left alone it
   draws a paper-coloured border round the whole site, which is most obvious on a phone
   where it costs 4rem of a 390px screen. Zero it here: every band is meant to run edge to
   edge, and the inner wraps (width: min(1180px, 100% - 2.4rem)) already hold the gutter. */
body { margin: 0; padding: 0; background: var(--mv-paper); color: var(--mv-ink); font-family: var(--mv-body); line-height: 1.6; }
.mv-wrap { width: min(1180px, 100% - 2.4rem); margin-inline: auto; }
/* THE SAVE CONTROL (task ee3e98b3; restyled Graham 2026-10-12: "the save pages buttons … are ugly in
   different places, need consistent neater idea"). ONE quiet outlined pill with a star, on the hero's
   own slate, left-aligned with the title, in the same place on every content page: directly under
   the hero text. No band of its own and no second link — the Favourites star in the bar already
   goes to the saved list. The button is the estate favourites.button (account.css gives it the
   account tokens); these rules override that look for this site only. The star is drawn here as
   CSS so the shared object stays untouched: an outline when it can be saved, filled when saved. */
.mv-save { display: flex; flex-direction: column; align-items: flex-start; width: 100%; max-width: none;
  margin: 0; box-sizing: border-box; background: var(--mv-deep);
  padding: .9rem max(1.2rem, calc((100% - 1180px) / 2)) 1.5rem; }
.mv-save .fav { margin: 0; }
.mv-save .fav .fav-save, .mv-save .fav .fav-saved { min-height: 40px; padding: 0 1rem 0 .8rem; gap: .45rem;
  border-radius: 999px; background: transparent; border: 1px solid var(--mv-rope); color: var(--mv-paper);
  font-weight: 600; font-size: .9rem; filter: none; }
.mv-save .fav .fav-save::before, .mv-save .fav .fav-saved::before { content: ""; width: 18px; height: 18px; flex: 0 0 auto;
  background: no-repeat center / contain; }
/* The star: the bar's Favourites star, outlined in lantern (unsaved) / filled in lantern (saved). */
.mv-save .fav .fav-save::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.6l2.64 5.35 5.9.86-4.27 4.16 1.01 5.88L12 17.9l-5.28 2.77 1.01-5.88L3.46 9.81l5.9-.86z' fill='none' stroke='%23e08a3c' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.mv-save .fav .fav-saved { border-color: var(--mv-lantern); color: var(--mv-lantern); }
.mv-save .fav .fav-saved::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.6l2.64 5.35 5.9.86-4.27 4.16 1.01 5.88L12 17.9l-5.28 2.77 1.01-5.88L3.46 9.81l5.9-.86z' fill='%23e08a3c'/%3E%3C/svg%3E"); }
.mv-save .fav .fav-save:hover, .mv-save .fav .fav-save:focus-visible { border-color: var(--mv-lantern); filter: none; }
.mv-save .fav .fav-saved:hover, .mv-save .fav .fav-saved:focus-visible { border-color: var(--mv-paper); color: var(--mv-paper); }
h1, h2, h3 { font-family: var(--mv-display); line-height: 1.12; text-wrap: balance; margin: 0; }
a { color: inherit; }

/* ── THE TOP BAR (qxstrategy header FORMAT, Mevagissey's harbour style). One sticky bar: the mark
      left; a Favourites star and a Menu button right. The Menu is a native <details> that drops a
      panel of the themed columns, EACH its own <details> toggle. No script — crawlable, works on
      every phone, and the links stay in the DOM whether a group is open or shut. ──────────────── */
.qx-html-content.mv-top { position: sticky; top: 0; z-index: 40; display: block;
  background: var(--mv-deep); color: var(--mv-paper); border-bottom: 3px solid var(--mv-rope); }
.mv-top-in { display: flex; flex-direction: row; align-items: center; justify-content: space-between;
  gap: 1rem; width: min(1180px, 100% - 2.4rem); margin-inline: auto; padding-block: .55rem; }
.mv-mark { display: flex; flex-direction: row; align-items: center; gap: .55rem; text-decoration: none; color: var(--mv-paper); padding: .3rem .1rem; }
/* The roundel is the mark at a glance; the word beside it is the mark when you read. */
.mv-mark-badge { display: block; flex: 0 0 auto; line-height: 0; }
.mv-mark-svg { display: block; width: 38px; height: 38px; }
.mv-mark-name { font-family: var(--mv-display); font-weight: 700; font-size: 1.16rem; letter-spacing: .01em; }

.mv-topright { display: flex; flex-direction: row; align-items: center; gap: .3rem; }
/* The Favourites star — an icon-button. The word shows from a small tablet up; on a phone the star
   carries it alone, so the bar never crowds. */
.mv-action { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: 0 .6rem;
  border-radius: 999px; text-decoration: none; color: var(--mv-sea-pale); font-weight: 600; font-size: .9rem; }
.mv-action-ico { display: inline-flex; line-height: 0; }
.mv-action-ico svg { width: 22px; height: 22px; fill: var(--mv-lantern); }
.mv-action-word { display: none; }
@media (min-width: 30rem) { .mv-action-word { display: inline; } }
@media (hover: hover) { .mv-action:hover { background: var(--mv-deep-2); color: var(--mv-paper); } }

/* The Menu disclosure. summary = the button; the panel drops below it, anchored to its right edge. */
.mv-menu { position: relative; }
.mv-menu-button { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .5rem;
  min-height: 44px; padding: 0 .85rem; border-radius: 999px; background: var(--mv-deep-2); color: var(--mv-paper);
  font-family: var(--mv-display); font-weight: 700; font-size: .95rem; }
.mv-menu-button::-webkit-details-marker { display: none; }
.mv-menu-label { line-height: 1; }
/* a hamburger that becomes an × when open — pure CSS off the summary's open state */
.mv-menu-icon { width: 18px; height: 2px; background: currentColor; position: relative; display: inline-block; }
.mv-menu-icon::before, .mv-menu-icon::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; transition: transform .2s, top .2s; }
.mv-menu-icon::before { top: -6px; }
.mv-menu-icon::after { top: 6px; }
.mv-menu[open] .mv-menu-icon { background: transparent; }
.mv-menu[open] .mv-menu-icon::before { top: 0; transform: rotate(45deg); }
.mv-menu[open] .mv-menu-icon::after { top: 0; transform: rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .mv-menu-icon::before, .mv-menu-icon::after { transition: none; } }

.mv-menu-panel { position: absolute; top: calc(100% + .45rem); right: 0; width: min(23rem, 94vw);
  background: var(--mv-deep-2); color: var(--mv-paper); border: 1px solid rgba(250,245,234,.14); border-radius: 12px;
  max-height: min(78vh, 34rem); overflow-y: auto; padding: .4rem 0 .6rem; box-shadow: 0 18px 40px rgba(0,0,0,.4); }
/* a lead link (e.g. What's on) sits above the groups */
.mv-menu-lead { display: block; padding: .7rem 1rem; text-decoration: none; font-family: var(--mv-display);
  font-weight: 700; font-size: .98rem; color: var(--mv-paper); border-bottom: 1px solid rgba(250,245,234,.12); }
@media (hover: hover) { .mv-menu-lead:hover, .mv-col-link:hover { color: var(--mv-lantern); } }

/* each themed column is its own toggle */
.mv-menu-group { border-bottom: 1px solid rgba(250,245,234,.10); }
.mv-menu-gsum { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .7rem 1rem; }
.mv-menu-gsum::-webkit-details-marker { display: none; }
.mv-menu-caret { flex: 0 0 auto; width: .5rem; height: .5rem; border-right: 2px solid var(--mv-rope); border-bottom: 2px solid var(--mv-rope); transform: rotate(45deg); transition: transform .2s; }
.mv-menu-group[open] .mv-menu-caret { transform: rotate(-135deg); }
@media (prefers-reduced-motion: reduce) { .mv-menu-caret { transition: none; } }
/* .mv-col is the column CONTAINER — shared by the menu panel's groups and the FOOTER's columns, so it
   (and the mv-col-* children) stay footer-neutral here; the menu-only indents are scoped under
   .mv-menu-group below. */
.mv-col { display: flex; flex-direction: column; }
.mv-col-name { font-family: var(--mv-display); font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--mv-rope); }
.mv-col-lead { margin: 0; font-size: .84rem; color: var(--mv-sea-pale); }
.mv-col-links { display: flex; flex-direction: column; gap: 0; }
.mv-col-link { display: block; padding: .42rem 0; text-decoration: none; font-size: .93rem; color: var(--mv-paper); border-bottom: 1px solid rgba(250,245,234,.10); }
.mv-col-links .mv-col-link:last-child { border-bottom: 0; }
.mv-col-soon { color: var(--mv-sea-pale); }
.mv-col-soon::after { content: "soon"; margin-left: .5rem; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .1rem .38rem; border-radius: 999px; border: 1px solid rgba(250,245,234,.28); }
/* menu-panel indents (scoped, so the footer's columns stay flush) */
.mv-menu-group .mv-col-lead { padding: 0 1rem .5rem; }
.mv-menu-group .mv-col-links { padding: 0 1rem .4rem; }

/* ── THE FAVOURITES PAGE. Where the star lands until the save mechanism is adopted. ──────────── */
.qx-container.mv-fav { width: min(40rem, 100% - 2.4rem); margin: 2.6rem auto 3rem; display: flex; flex-direction: column; gap: .8rem; }
.mv-fav-h { font-family: var(--mv-display); font-weight: 700; font-size: 1.9rem; color: var(--mv-ink); margin: 0; }
.mv-fav-lede { font-size: 1.05rem; color: var(--mv-ink); margin: 0; }
.mv-fav-soon { font-size: .95rem; color: var(--mv-sea-pale); margin: .2rem 0 .4rem; }
.qx-container.mv-fav-links { display: flex; flex-direction: row; flex-wrap: wrap; gap: .6rem; }
.mv-fav-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border-radius: 999px;
  text-decoration: none; font-weight: 600; font-size: .92rem; color: var(--mv-deep); background: var(--mv-rope); }
@media (hover: hover) { .mv-fav-link:hover { background: var(--mv-lantern); } }

/* ── HERO ──────────────────────────────────────────────────────────────────────────────────── */
.mv-hero { background: linear-gradient(180deg, var(--mv-deep-2), var(--mv-deep)); color: var(--mv-paper); }
.qx-container.mv-hero-in { display: flex; flex-direction: column; gap: 1.6rem; width: min(1180px, 100% - 2.4rem);
  margin-inline: auto; padding-block: clamp(2.2rem, 5vw, 3.8rem); max-width: min(1180px, 100% - 2.4rem); }
.qx-container.mv-hero-words { display: flex; flex-direction: column; gap: .9rem; }
/* The drawing carries the hero on a wide screen and follows the words on a narrow one — it is the
   picture of the place, so it never crops: aspect-ratio holds its shape while the width flexes. */
.qx-html-content.mv-hero-art { display: block; line-height: 0; }
.mv-hero-img { display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: var(--mv-shadow-lift); }
/* TWO COLUMNS ONLY WHEN THERE IS SOMETHING TO PUT IN THE SECOND ONE. Scoped with :has() because
   /soon and /harbour reuse .mv-hero-in without art — unscoped, the grid dealt their paragraphs
   alternately into two columns and the signpost page read as nonsense. */
@media (min-width: 900px) {
  .qx-container.mv-hero-in:has(> .mv-hero-art) {
    display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 2.4rem; }
}
.mv-kicker { font-size: .7rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--mv-rope); margin: 0; }
.mv-hero-h { font-size: clamp(2.2rem, 6vw, 3.9rem); max-width: 16ch; }
.mv-hero-lead { margin: 0; max-width: 62ch; font-size: 1.06rem; color: var(--mv-sea-pale); }
.qx-container.mv-btns { display: flex; flex-direction: row; flex-wrap: wrap; gap: .7rem; margin-top: .5rem; }
.mv-btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.3rem; border-radius: 999px; text-decoration: none; font-weight: 600; }
.mv-btn-solid { background: var(--mv-lantern); color: var(--mv-deep); }
.mv-btn-ghost { border: 1.5px solid var(--mv-rope); color: var(--mv-paper); }
@media (hover: hover) { .mv-btn:hover { box-shadow: var(--mv-shadow-lift); } }

/* ── SECTIONS ──────────────────────────────────────────────────────────────────────────────── */
.mv-band { padding-block: clamp(2.6rem, 6vw, 4.2rem); }
.mv-band-paper { background: var(--mv-paper-2); }
/* Empty deep-link target (menu -> /harbour#crabbing etc.): no box of its own, just an id to land on,
   nudged clear of the top so a section heading is not jammed against the viewport edge. */
.mv-anchor { display: block; height: 0; scroll-margin-top: 4.5rem; }
.mv-band-deep { background: var(--mv-deep); color: var(--mv-paper); }
.mv-band-deep .mv-lead, .mv-band-deep .mv-h { color: var(--mv-paper); }
.mv-h { font-size: clamp(1.7rem, 4vw, 2.5rem); margin: .2rem 0 .4rem; }
.mv-lead { margin: 0 0 1.4rem; max-width: 66ch; color: var(--mv-muted); }
.mv-band-deep .mv-lead { color: var(--mv-sea-pale); }

/* ── THE MAP. The picture is the menu; the pins are real links laid over it. ────────────────── */
.qx-html-content.mv-map-frame { position: relative; display: block; border-radius: 20px; overflow: hidden; box-shadow: var(--mv-shadow); background: var(--mv-sea); }
.mv-map-frame svg { display: block; width: 100%; height: auto; }
.mv-pin { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center;
  gap: .18rem; text-decoration: none; padding: .2rem; }
.mv-pin-dot { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 999px;
  background: var(--mv-lantern); color: var(--mv-deep); font-weight: 700; font-size: .78rem; box-shadow: var(--mv-shadow); }
.mv-pin-label { font-size: .72rem; font-weight: 600; background: var(--mv-paper); color: var(--mv-ink);
  padding: .12rem .45rem; border-radius: 999px; white-space: nowrap; box-shadow: var(--mv-shadow); }
@media (hover: hover) { .mv-pin:hover .mv-pin-dot { transform: scale(1.12); } }
.mv-pin-dot { transition: transform .18s ease; }
@media (prefers-reduced-motion: reduce) { .mv-pin-dot { transition: none; } }
/* On a narrow screen a pinned map is unreadable, so the pins become a list under it. */
.qx-container.mv-pin-list { display: none; }
@media (max-width: 720px) {
  .mv-pin { display: none; }
  .qx-container.mv-pin-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(13rem,100%),1fr)); gap: .5rem; margin-top: 1rem; }
  .qx-link.mv-pin-row { display: flex; flex-direction: column; padding: .6rem .8rem; border-radius: 12px; background: var(--mv-paper);
    box-shadow: var(--mv-shadow); text-decoration: none; }
  .mv-pin-row-l { font-weight: 600; }
  .mv-pin-row-n { font-size: .8rem; color: var(--mv-muted); }
}

/* ── CHARACTERS ────────────────────────────────────────────────────────────────────────────── */
.qx-container.mv-chars { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: 1.2rem; }
.qx-container.mv-char { display: flex; flex-direction: column; align-items: center; gap: .35rem; text-align: center; height: 100%;
  padding: 1.4rem 1.1rem 1.2rem; border-radius: 18px; background: var(--mv-paper); box-shadow: var(--mv-shadow); }
/* THE MEDALLION. A portrait in a rope ring — the motif the whole page repeats, and the thing
   that makes four separate drawings read as one cast. Built from layered backgrounds rather than
   an image, so it costs nothing, recolours with the palette and stays crisp at any size:
     1. the dashed ring is a conic-gradient border drawn by `mv-char-ring::before`
     2. the portrait sits on a dusk ground so light figures keep their edges
   The character inside is an iconkind block, not artwork of ours — see data/site.json `icon`. */
.mv-char-ring { position: relative; display: grid; place-items: center;
  width: 9.2rem; height: 9.2rem; border-radius: 999px;
  background: radial-gradient(circle at 50% 34%, #2b5d72 0%, var(--mv-deep) 72%);
  box-shadow: 0 0 0 3px var(--mv-rope), 0 0 0 9px rgba(201,180,140,.22), var(--mv-shadow);
  overflow: hidden; }
.mv-char-ring::before { content: ""; position: absolute; inset: 6px; border-radius: 999px;
  border: 2px dashed rgba(201,180,140,.55); }
/* A sill of light along the bottom of the medallion, so the figure stands on something. */
.mv-char-ring::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%;
  background: linear-gradient(180deg, rgba(224,138,60,0) 0%, rgba(224,138,60,.20) 100%); }
.mv-char-ring svg { position: relative; z-index: 1; width: 74%; height: 74%; display: block; }
/* A card showing a DRAFT placeholder says so in the frame as well as on the portrait, so it reads
   as provisional at a glance and in a screenshot. Remove `art` from the card in data/site.json and
   this class, the ribbon and the placeholder all go with it. */
.qx-html-content.mv-char-art { position: relative; z-index: 1; display: grid; place-items: center;
  width: 74%; height: 74%; line-height: 0; }
.mv-char-img { display: block; width: 100%; height: 100%; }
.mv-char-ring-draft { box-shadow: 0 0 0 3px var(--mv-lantern), 0 0 0 9px rgba(224,138,60,.22), var(--mv-shadow); }
.mv-char-ring-draft::before { border-color: rgba(224,138,60,.6); }
.mv-char-name { font-family: var(--mv-display); font-size: 1.06rem; font-weight: 700; margin: .5rem 0 0; }
.mv-char-kind { margin: 0; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mv-muted); }
.mv-char-line { margin: .5rem 0 0; font-size: .88rem; color: var(--mv-muted); }
.mv-char-hook { margin: .5rem 0 0; font-size: .78rem; font-weight: 600; color: var(--mv-sea); }
 /* the lines differ in length, so the actions are pushed to the bottom of every card rather than
   sitting wherever the prose happens to end — four cards, one row of actions across them. */
.qx-container.mv-char-acts { display: flex; flex-direction: column; gap: 0; width: 100%; margin-top: auto; padding-top: .8rem; }
.mv-char-act { display: block; padding: .46rem 0; font-size: .82rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; text-decoration: none; color: var(--mv-sea); border-top: 1px solid var(--mv-line); }
@media (hover: hover) { .mv-char-act:hover { color: var(--mv-lantern); } }

/* ── THE HARBOUR PAGE ──────────────────────────────────────────────────────────────────────── */
/* EST. 1774 lives here now, under the kicker, where it can say what it actually marks. */
.mv-hero .mv-mark-since { color: var(--mv-rope); font-size: .72rem; letter-spacing: .26em; }
.qx-container.mv-mark-row { display: flex; flex-direction: row; flex-wrap: wrap; gap: 1.6rem; margin-top: .6rem;
  padding-top: 1rem; border-top: 1px solid rgba(201,180,140,.3); }
.qx-container.mv-mark-item { display: flex; flex-direction: column; gap: .1rem; }
.mv-mark-when { font-family: var(--mv-display); font-size: 1.5rem; font-weight: 700; color: var(--mv-lantern); }
.mv-mark-what { font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mv-sea-pale); }

/* Three sections, each a claim and the thing that grounds it. */
.qx-container.mv-secs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); gap: 1.6rem; }
.qx-container.mv-sec { display: flex; flex-direction: column; gap: .5rem; padding: 1.4rem 1.3rem;
  border-radius: 16px; background: var(--mv-paper-2); box-shadow: var(--mv-shadow); }
.mv-sec-h { font-size: 1.24rem; }
.mv-sec-b { margin: 0; color: var(--mv-muted); }
.mv-sec-n { margin-top: auto; padding-top: .6rem; font-size: .78rem; font-weight: 600; color: var(--mv-sea); }
.qx-container.mv-more-links { display: flex; flex-direction: row; flex-wrap: wrap; gap: .4rem 1.4rem; margin-bottom: 1.2rem; }
.mv-band-paper .mv-col-link { color: var(--mv-ink); border-bottom-color: var(--mv-line); }
/* The ghost button is drawn for a DARK band — rope border, sail-coloured text. On the paper band
   at the foot of /harbour that is cream on cream, i.e. invisible. Re-ink it for light grounds. */
.mv-band-paper .mv-btn-ghost { border-color: var(--mv-ink); color: var(--mv-ink); }

/* ── THE PORTAL. The one place on the page that goes somewhere else entirely. ───────────────── */
.mv-portal { background: linear-gradient(180deg, var(--mv-deep) 0%, var(--mv-sea) 62%, var(--mv-lantern-soft) 100%); color: var(--mv-paper); }
.qx-container.mv-portal-in { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem;
  width: min(1180px, 100% - 2.4rem); margin-inline: auto; padding-block: clamp(3rem, 7vw, 5rem); }
.mv-portal-word { font-family: var(--mv-display); font-size: clamp(3rem, 10vw, 5.6rem); font-weight: 700; letter-spacing: .02em; margin: 0; }
.mv-portal-strap { margin: 0; font-size: .82rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--mv-rope); }
.mv-portal-h { font-size: clamp(1.4rem, 3.4vw, 2rem); margin: .8rem 0 0; }
.mv-portal-lead { margin: .5rem 0 0; max-width: 60ch; color: var(--mv-sea-pale); }
/* The gate. It sits between the invitation and the lifts, because that is the order you meet
   them in: you are told where you are going, you see the threshold, then you pick a lift. */
.qx-html-content.mv-portal-art { display: block; line-height: 0; width: 100%; margin-top: 1.6rem; }
.mv-portal-img { display: block; width: 100%; max-width: 760px; margin-inline: auto; height: auto;
  border-radius: 16px; box-shadow: var(--mv-shadow-lift); }
.qx-container.mv-lifts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); gap: 1rem; margin-top: 1.8rem; width: 100%; }
.qx-link.mv-lift { display: flex; flex-direction: column; gap: .2rem; text-align: left; padding: 1rem 1.1rem;
  border-radius: 14px; background: rgba(18,48,60,.58); border: 1px solid var(--mv-rope); text-decoration: none; color: var(--mv-paper); }
.mv-lift-no { font-size: .66rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--mv-rope); }
.mv-lift-name { font-family: var(--mv-display); font-size: 1.1rem; font-weight: 700; }
.mv-lift-host { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mv-sea-pale); }
.mv-lift-line { margin: .35rem 0 0; font-size: .86rem; color: var(--mv-sea-pale); }

/* ── GIFTS ─────────────────────────────────────────────────────────────────────────────────── */
.qx-container.mv-shelves { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); gap: 1rem; }
.qx-link.mv-shelf { display: flex; flex-direction: column; gap: .3rem; padding: 1.1rem; border-radius: 16px;
  background: var(--mv-paper); box-shadow: var(--mv-shadow); text-decoration: none; color: inherit; }
.mv-shelf-who { font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--mv-muted); }
.mv-shelf-name { font-family: var(--mv-display); font-weight: 700; font-size: 1.02rem; }
.mv-shelf-cta { margin-top: .5rem; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mv-sea); }
.mv-note { margin: 1rem 0 0; padding: .8rem 1rem; border-left: 3px solid var(--mv-rope); background: var(--mv-paper);
  font-size: .86rem; color: var(--mv-muted); border-radius: 0 10px 10px 0; }

/* ── THE YEAR, AND THE LONG ONE BEHIND IT ──────────────────────────────────────────────────── */
.qx-container.mv-time { display: flex; flex-direction: column; gap: 0; border-left: 2px solid var(--mv-rope); padding-left: 1.2rem; }
.qx-container.mv-time-row { display: flex; flex-direction: row; gap: 1.2rem; padding: .85rem 0; border-bottom: 1px solid var(--mv-line); align-items: baseline; }
.mv-time-when { flex: 0 0 9.5rem; font-family: var(--mv-display); font-weight: 700; color: var(--mv-sea); }
.mv-time-what { margin: 0; flex: 1 1 20rem; }
@media (max-width: 560px) { .qx-container.mv-time-row { flex-direction: column; gap: .2rem; } }
.qx-container.mv-tales { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(18rem,100%),1fr)); gap: 1rem; margin-top: 1.6rem; }
.qx-link.mv-tale { display: flex; flex-direction: column; gap: .25rem; padding: 1rem 1.1rem; border-radius: 14px;
  background: var(--mv-paper); box-shadow: var(--mv-shadow); text-decoration: none; color: inherit; }
.mv-tale-l { font-family: var(--mv-display); font-weight: 700; }
.mv-tale-n { font-size: .85rem; color: var(--mv-muted); }

/* ── GALLERY, COMMUNITY, PARTNERS ──────────────────────────────────────────────────────────── */
.qx-container.mv-gal { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(11rem,100%),1fr)); gap: .8rem; }
.qx-container.mv-gal-slot { display: grid; place-items: center; aspect-ratio: 4/3; border-radius: 12px;
  border: 1.5px dashed var(--mv-rope); background: var(--mv-sea-pale); color: var(--mv-muted); font-size: .76rem; }
.qx-container.mv-points { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem,100%),1fr)); gap: 1rem; }
.qx-container.mv-point { display: flex; flex-direction: column; gap: .3rem; padding: 1.1rem 1.2rem; border-radius: 14px; background: var(--mv-deep-2); }
.mv-point-h { font-family: var(--mv-display); font-weight: 700; }
.mv-point-t { margin: 0; font-size: .9rem; color: var(--mv-sea-pale); }

/* ── FOOTER ────────────────────────────────────────────────────────────────────────────────── */
.mv-foot { background: var(--mv-deep); color: var(--mv-sea-pale); padding-block: 2.4rem 1.6rem; }
.qx-container.mv-foot-in { display: flex; flex-direction: column; gap: 1.2rem; width: min(1180px, 100% - 2.4rem); margin-inline: auto; }
.qx-container.mv-foot-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(11rem,100%),1fr)); gap: 1.2rem; }
.mv-foot-line { margin: 0; font-size: .88rem; }

/* THE SPONSORED ADVERT SLOT — the ONE mechanism (tools/lib/sponsor.mjs), skinned for mevagissey.
   Our own cottage is the first paid placement; the slot invites others to /sponsored-listings.
   Clearly set apart as an advert, and clearly labelled 'Sponsored'. */
.qx-sponsor { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.qx-sponsor-ad { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; padding: 1.1rem 1.2rem;
  border-radius: 12px; background: var(--mv-deep-2); border: 1px solid var(--mv-lantern); border-left-width: 4px; }
.qx-sponsor-eyebrow { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--mv-rope); }
.qx-sponsor-name { font-weight: 700; font-size: 1.02rem; color: var(--mv-lantern-soft); letter-spacing: .01em; }
.qx-sponsor-line { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--mv-sea-pale); max-width: 60ch; }
.qx-sponsor-cta { align-self: flex-start; padding: .5rem .9rem; border-radius: 8px; font-weight: 700; font-size: .88rem;
  text-decoration: none; background: var(--mv-lantern); color: var(--mv-deep); }
.qx-sponsor-cta:hover { filter: brightness(1.06); }
.qx-sponsor-more { font-size: .82rem; color: var(--mv-sea-pale); text-decoration: underline; text-underline-offset: 2px; opacity: .85; }
.qx-sponsor-more:hover { opacity: 1; }

/* ── SUBJECT PAGES ─────────────────────────────────────────────────────────────────────────────
   The legacy site's content, rehoused. One template for all of them (tools/build-mevagissey.mjs
   reads data/subjects.json), and the order is the argument: a photograph of the place, then the
   person telling you about it, then the facts. A village explained by nobody is a leaflet.      */
.qx-container.mv-sub-head { position: relative; display: grid; }
.qx-html-content.mv-sub-photo { grid-area: 1 / 1; line-height: 0; }
.mv-sub-photo-img { display: block; width: 100%; height: clamp(15rem, 42vw, 27rem); object-fit: cover; }
/* The scrim is what makes white type legible over an unknown photograph — these came off the old
   site and we do not get to choose how bright they are. */
.qx-container.mv-sub-head-in { grid-area: 1 / 1; position: relative; z-index: 1; align-self: end;
  display: flex; flex-direction: column; gap: .4rem;
  width: min(1180px, 100% - 2.4rem); margin-inline: auto; padding-block: 1.6rem 1.8rem;
  background: linear-gradient(180deg, rgba(18,48,60,0) 0%, rgba(18,48,60,.82) 62%); }
.qx-container.mv-sub-head { background: var(--mv-deep); }
.mv-sub-h { font-size: clamp(2rem, 5.4vw, 3.4rem); color: var(--mv-paper); }
.mv-sub-strap { margin: 0; max-width: 56ch; color: var(--mv-sea-pale); font-size: 1.02rem; }

/* WHO IS TELLING YOU. The medallion, then their own words, before a single fact. */
.qx-container.mv-tell-in { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; text-align: center; }
.mv-tell-ring { flex: 0 0 auto; }
/* The portrait inside the teller's medallion — same job as .mv-char-art on the home page, but the
   two are separate classes because the medallion here sits beside prose rather than above a card. */
.qx-html-content.mv-tell-fig { position: relative; z-index: 1; display: grid; place-items: center;
  width: 74%; height: 74%; line-height: 0; }
.qx-container.mv-tell-text { display: flex; flex-direction: column; gap: .3rem; }
.mv-tell-who { font-size: .68rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--mv-rope); }
.mv-tell-words { margin: 0; max-width: 62ch; font-family: var(--mv-display); font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  line-height: 1.5; color: var(--mv-paper); }
@media (min-width: 760px) {
  .qx-container.mv-tell-in { flex-direction: row; align-items: center; gap: 1.8rem; text-align: left; }
}

.mv-sub-wrap { display: flex; flex-direction: column; gap: 1.8rem; }
.qx-container.mv-sub-sec { display: flex; flex-direction: column; gap: .7rem; }
.mv-sub-sec-h { font-size: clamp(1.35rem, 3vw, 1.85rem); }
.mv-sub-p { margin: 0; max-width: 68ch; color: var(--mv-ink); }
.mv-sub-quote { margin: .2rem 0; padding: .8rem 0 .8rem 1.1rem; max-width: 62ch;
  border-left: 3px solid var(--mv-rope); font-family: var(--mv-display); font-size: 1.05rem;
  line-height: 1.5; color: var(--mv-muted); }
/* Where the page is not history, it says so — in a shape that cannot be mistaken for body copy. */
.mv-sub-note { margin: 0; padding: .8rem 1rem; border-radius: 12px; max-width: 68ch;
  background: var(--mv-lantern-soft); border: 1px solid var(--mv-rope);
  font-size: .9rem; color: var(--mv-ink); }
.qx-html-content.mv-sub-fig { line-height: 0; margin-top: .4rem; }
.mv-sub-fig-img { display: block; width: 100%; max-width: 44rem; height: auto; border-radius: 14px; box-shadow: var(--mv-shadow); }

.qx-container.mv-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr)); gap: .8rem; }
.qx-container.mv-fact { display: flex; flex-direction: column; gap: .1rem; padding: .8rem .9rem;
  border-radius: 12px; background: var(--mv-paper-2); border: 1px solid var(--mv-line); }
.mv-fact-v { font-family: var(--mv-display); font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.mv-fact-k { font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mv-muted); }

.qx-container.mv-sub-nexts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: .8rem; margin-top: .6rem; }
.qx-link.mv-sub-next { display: flex; align-items: center; min-height: 56px; padding: .8rem 1rem;
  border-radius: 14px; background: var(--mv-deep); color: var(--mv-paper); text-decoration: none;
  font-weight: 600; box-shadow: var(--mv-shadow); }
.qx-link.mv-sub-next::after { content: "→"; margin-left: auto; padding-left: .8rem; color: var(--mv-rope); }
@media (hover: hover) { .qx-link.mv-sub-next:hover { box-shadow: var(--mv-shadow-lift); } }

/* ── SHELVES ───────────────────────────────────────────────────────────────────────────────────
   A shelf is meant to BE the shop, not a picture of one. Until the Mevagissey catalogue is loaded
   the goods are drafts and say so on their own artwork (data/goods.json explains why). The same
   object serves the home page, where a shelf belongs to a character, and the foot of a subject
   page, where it holds whatever belongs with what you have just been told.                      */
.qx-container.mv-shelf-goods { display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); }
.qx-link.mv-good { display: flex; flex-direction: column; gap: .18rem; padding: .7rem;
  border-radius: 14px; background: var(--mv-paper); border: 1px solid var(--mv-line);
  text-decoration: none; color: var(--mv-ink); box-shadow: var(--mv-shadow); }
.qx-html-content.mv-good-art { line-height: 0; }
.mv-good-img { display: block; width: 100%; height: auto; border-radius: 10px; }
.mv-good-kind { margin-top: .4rem; font-size: .62rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--mv-muted); }
.mv-good-name { font-family: var(--mv-display); font-size: .98rem; font-weight: 700; line-height: 1.25; }
.mv-good-line { font-size: .78rem; color: var(--mv-muted); line-height: 1.45; }
@media (hover: hover) { .qx-link.mv-good:hover { box-shadow: var(--mv-shadow-lift); } }

/* On the home page the goods sit inside their character's shelf, so they drop the card treatment
   and let the shelf itself be the object — otherwise it is cards inside cards. */
.mv-shelf-owned .qx-link.mv-good { background: transparent; border: 0; box-shadow: none; padding: 0; }
.mv-shelf-owned .mv-good-line { display: none; }

/* A DRAFT good — shown but NOT a link until commerce is wired (no dead CTA). Same card look as
   .mv-good, minus the link affordances (no pointer, no hover lift). */
.mv-good-draft { display: flex; flex-direction: column; gap: .18rem; padding: .7rem;
  border-radius: 14px; background: var(--mv-paper); border: 1px solid var(--mv-line);
  color: var(--mv-ink); box-shadow: var(--mv-shadow); cursor: default; }
.mv-shelf-owned .mv-good-draft { background: transparent; border: 0; box-shadow: none; padding: 0; }

.qx-container.mv-sub-shelf { padding-top: 1.4rem; border-top: 1px solid var(--mv-line); }

/* ── THE YEAR (/the-year) — the recurring year by season, Breeze-framed with a Thrift aside ───── */
.mv-year-more { display: inline-block; margin-top: .2rem; font-weight: 700; font-size: .95rem;
  text-decoration: none; color: var(--mv-lantern); }
.mv-year-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.mv-year-tide { padding: 1.1rem 1.2rem; border-radius: 12px; background: var(--mv-paper-2);
  border: 1px solid var(--mv-line); border-left: 4px solid var(--mv-sea); display: flex; flex-direction: column; gap: .5rem; }
.qx-container.mv-year-season { display: flex; flex-direction: column; gap: 1.3rem; }
.mv-year-span { font-family: var(--mv-display); font-size: .9rem; font-weight: 600; color: var(--mv-sea);
  letter-spacing: .02em; margin-top: -.9rem; }
.mv-band-paper .mv-year-span { color: var(--mv-sea); }
.qx-container.mv-year-entry { display: flex; flex-direction: column; gap: .5rem;
  padding-top: 1.1rem; border-top: 1px solid var(--mv-line); }
.mv-year-when { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mv-rope); }
.mv-year-like { margin: 0; max-width: 68ch; font-family: var(--mv-display); font-style: italic; color: var(--mv-sea); }
.qx-container.mv-year-links { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin-top: .1rem; }
.mv-year-link { font-size: .86rem; font-weight: 600; text-decoration: none; color: var(--mv-lantern); }
.mv-year-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.qx-container.mv-year-aside { padding: 1.2rem; border-radius: 14px; background: var(--mv-paper-2);
  border: 1px solid var(--mv-rope); border-left: 4px solid var(--mv-lantern); }
/* Thrift's words are paper-coloured for the dark tell band on /fishing-trips; on this cream aside
   card they were white on cream (Graham, 2026-10-11, unreadable on mobile). Ink here. */
.qx-container.mv-year-aside .mv-tell-words { color: var(--mv-ink); }

/* ── FISHING TRIPS (/fishing-trips) — trip costs and the neutral operator list ────────────────── */
.mv-fish-cost { margin: 0; max-width: 68ch; font-weight: 700; font-size: .92rem; color: var(--mv-sea); }
.mv-fish-also { font-style: italic; color: var(--mv-ink); }
.qx-container.mv-ops { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); margin-top: .3rem; }
.qx-container.mv-op { display: flex; flex-direction: column; gap: .5rem; padding: 1.1rem 1.2rem;
  border-radius: 12px; background: var(--mv-paper-2); border: 1px solid var(--mv-line); }
.mv-op-name { font-family: var(--mv-display); font-weight: 700; font-size: 1.08rem; color: var(--mv-ink); }
.mv-op-note { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--mv-ink); }
.mv-op-phone { font-size: .86rem; font-weight: 600; color: var(--mv-sea); }

/* a character's kind badge, when it links to the character's home on iconkind.com */
.mv-char-kind-link { color: var(--mv-lantern); text-decoration: none; }
.mv-char-kind-link:hover { text-decoration: underline; text-underline-offset: 2px; }