/* 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; }
h1, h2, h3 { font-family: var(--mv-display); line-height: 1.12; text-wrap: balance; margin: 0; }
a { color: inherit; }

/* ── THE BAR. Four items and a menu button, so it never grows with the site. ────────────────── */
.qx-container.mv-head { display: flex; flex-direction: column; position: sticky; top: 0; z-index: 40; }
.mv-bar { position: relative; top: 0; z-index: 40; background: var(--mv-deep); color: var(--mv-paper); border-bottom: 3px solid var(--mv-rope); }
.qx-container.mv-bar-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; padding: .3rem .1rem; }
/* The roundel. It is the mark at a glance; the word beside it is the mark when you read. On a
   narrow phone the word alone carries it, so the badge steps aside rather than squeezing both. */
.qx-html-content.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; }
/* PARKED with data/site.json harbour.since. The bar no longer carries EST. 1774 — that is a
   fact about the harbour, not the village — but the harbour page will want this exact
   treatment, so the rule stays rather than being reinvented later. */
.mv-mark-since { font-size: .6rem; letter-spacing: .22em; color: var(--mv-rope); }
.qx-container.mv-bar-nav { display: flex; flex-direction: row; align-items: center; gap: .2rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.mv-bar-nav::-webkit-scrollbar { display: none; }
.mv-bar-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .7rem; border-radius: 999px;
  text-decoration: none; font-weight: 500; font-size: .93rem; color: var(--mv-sea-pale); white-space: nowrap; }
@media (hover: hover) { .mv-bar-link:hover { background: var(--mv-deep-2); color: var(--mv-paper); } }
.mv-bar-link-lead { font-weight: 700; color: var(--mv-paper); }
.mv-bar-link-lead::after { content: "▾"; margin-left: .4rem; font-size: .7em; color: var(--mv-rope); }

/* ── THE MEGA MENU. Open on the page rather than on hover: a menu that is a section of the page
      is readable on a phone, crawlable, and needs no script. ──────────────────────────────── */
.mv-menu { background: var(--mv-deep-2); color: var(--mv-paper); border-bottom: 1px solid rgba(250,245,234,.14);
  max-height: 0; overflow: hidden; transition: max-height .28s ease; }
/* OPENS WITHOUT SCRIPT. The bar link is an anchor to #menu and :target does the rest, so the menu
   works with JavaScript off, stays in the DOM for a crawler, and needs no engine capability.
   max-height rather than display:none so the links are always present and the open animates. */
.mv-menu:target { max-height: 120vh; overflow-y: auto; }
@media (prefers-reduced-motion: reduce) { .mv-menu { transition: none; } }
.mv-menu-in { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: 1.6rem 1.4rem;
  width: min(1180px, 100% - 2.4rem); margin-inline: auto; padding-block: 1.6rem 1.9rem; }
.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: .35rem 0 .6rem; font-size: .84rem; color: var(--mv-sea-pale); }
.mv-col { display: flex; flex-direction: column; gap: 0; }
.mv-col-links { display: flex; flex-direction: column; gap: 0; }
.mv-menu-host { display: block; }
.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); }
@media (hover: hover) { .mv-col-link:hover { color: var(--mv-lantern); } }
.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); }

/* ── 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); }
@media (min-width: 900px) {
  .qx-container.mv-hero-in { 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); }
.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; }
.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 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; }
.mv-foot-preview { margin: 0; padding: .7rem .9rem; border-radius: 10px; background: var(--mv-deep-2); border: 1px solid var(--mv-rope);
  font-size: .78rem; letter-spacing: .04em; color: var(--mv-paper); }