/* calderisles.com: one page. The sea and weather of the isles (deep water, shallows, fog, foam) with the menu's
   wax-seal red for Play and the game's own type (Cinzel caps, EB Garamond). Dark sea bands frame light fog pages. */
:root {
  --sea-deep: #0e2229;
  --sea: #173a45;
  --shallow: #3f7f86;
  --fog: #e6ebe7;
  --foam: #f4f6f2;
  --ink: #1b2629;
  --muted: #56676a;
  --rule: #c5cfcb;
  --sail: #a2412e;
  --sail-hi: #b9503a;
  --lantern: #e2c27c;
  --foam-dim: #dfe8e6;
  --mist: #b4c4c4;
  --ink-soft: #2c3a3d;
  --ok: #a6e6b8;
  --warn: #f0c07a;
  --serif: "EB Garamond", "Garamond", "Georgia", serif;
  --caps: "Cinzel", "Trajan Pro", "Georgia", serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { background: var(--sea-deep); }
body { margin: 0; background: var(--fog); color: var(--ink); font: 400 19px/1.6 var(--serif); }
a { color: var(--sea); }
:focus-visible { outline: 2px solid var(--sea); outline-offset: 3px; }
.hero :focus-visible, .island :focus-visible, .last :focus-visible, footer :focus-visible { outline-color: var(--lantern); }
img { max-width: 100%; height: auto; display: block; }
h2 { margin: 0 0 16px; font: 400 clamp(24px, 3.2vw, 36px)/1.2 var(--caps); letter-spacing: .06em; color: var(--sea); text-wrap: balance; }
h3 { margin: 18px 0 6px; font: 600 15px var(--caps); letter-spacing: .18em; text-transform: uppercase; color: var(--sea); }
p { margin: 0 0 1em; max-width: 64ch; }
.eyebrow { margin: 0 0 10px; font: 600 14px var(--caps); letter-spacing: .3em; text-transform: uppercase; color: var(--shallow); }

/* ---- the play button: the menu's red wax */
.play { display: inline-block; padding: 15px 42px 14px calc(42px + .3em); font: 600 17px var(--caps); letter-spacing: .3em; text-transform: uppercase; text-decoration: none; color: var(--foam); background: var(--sail); border-radius: 3px; box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 8px 24px rgba(4, 12, 15, .45); transition: background .15s ease, transform .15s ease; }
.play:hover { background: var(--sail-hi); transform: translateY(-1px); }

/* ---- hero: the in-game footage loop; the sea's own gradient when there is none */
.hero { position: relative; background: linear-gradient(180deg, var(--sea) 0%, var(--sea-deep) 100%); min-height: min(52vh, 500px); display: grid; place-items: center; overflow: hidden; padding: 64px 16px 56px; color: var(--foam); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse at 50% 45%, rgba(14, 34, 41, .35) 0%, rgba(14, 34, 41, .78) 70%), linear-gradient(180deg, rgba(14, 34, 41, .2) 0%, rgba(14, 34, 41, .9) 100%); }
.hero:has(.film) { min-height: min(78vh, 760px); }
/* footage carries the hero: a lighter veil, just enough to read the title over bright sea and sky */
.hero:has(.film)::before { background: radial-gradient(ellipse 52% 46% at 50% 46%, rgba(14, 34, 41, .42) 0%, rgba(14, 34, 41, 0) 100%), linear-gradient(180deg, rgba(14, 34, 41, 0) 55%, rgba(14, 34, 41, .6) 100%); }
/* the capture is hazy: one grade for the poster and the loop alike, so nothing shifts when it starts */
.hero .film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: contrast(1.18) saturate(1.15) brightness(.96); }
.hero-in { position: relative; z-index: 2; text-align: center; max-width: 920px; }
.hero-in p { margin-inline: auto; }
.hero .eyebrow { color: var(--lantern); text-shadow: 0 1px 10px rgba(4, 12, 15, .95); }
.mark { margin: 0; font: 400 clamp(40px, 7.4vw, 88px)/1.05 var(--caps); letter-spacing: .2em; padding-left: .2em; color: var(--foam); text-shadow: 0 2px 24px rgba(4, 12, 15, .8); }
.tag { margin: 12px auto 14px; font: italic 400 clamp(19px, 2.3vw, 25px) var(--serif); color: var(--foam-dim); text-shadow: 0 1px 10px rgba(4, 12, 15, .9); }
.lede { margin: 0 auto 28px; max-width: 600px; font-size: 19px; color: var(--foam); text-shadow: 0 1px 10px rgba(4, 12, 15, .95); text-wrap: balance; }
.nofuss { margin: 18px auto 0; max-width: 560px; color: var(--foam-dim); text-shadow: 0 1px 8px rgba(4, 12, 15, .9); }
.check { display: inline-block; margin: 16px auto 0; max-width: 560px; font-size: 15px; color: var(--foam-dim); text-shadow: 0 1px 8px rgba(4, 12, 15, .9); }
.check::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; vertical-align: 2px; transform: rotate(45deg); border: 1px solid currentColor; }
.check[data-state="ok"] { color: var(--ok); }
.check[data-state="ok"]::before { background: currentColor; }
.check[data-state="warn"] { color: var(--warn); padding: 6px 14px; background: rgba(14, 34, 41, .88); border-radius: 3px; }

/* ---- fog pages */
.page { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.page section { padding-block: 72px; }
.page section + section { border-top: 1px solid var(--rule); }
.intro { text-align: center; }
.intro p { margin-inline: auto; }

.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.pillars article { min-width: 0; padding-top: 18px; border-top: 3px solid var(--shallow); }
.pillars article:has(img) { padding-top: 0; border-top: 0; }
.pillars img { aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; box-shadow: 0 10px 26px rgba(14, 34, 41, .2); }
.pillars p { font-size: 19px; color: var(--ink); }

/* ---- Saltholm, in a band of deep water: a real in-game shot beside the text, or the text alone */
.island { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; padding: 72px max(16px, calc((100% - 1120px) / 2)); background: var(--sea-deep); color: var(--foam-dim); }
.island:not(:has(.shot)) { grid-template-columns: minmax(0, 760px); justify-content: center; }
.island h2 { color: var(--foam); }
.island .eyebrow { color: var(--lantern); }
.shot { margin: 0; min-width: 0; }
.island .shot img { width: 100%; height: auto; }
.shot img { border-radius: 4px; box-shadow: 0 0 0 1px rgba(244, 246, 242, .08), 0 24px 50px rgba(0, 0, 0, .45); }
.shot figcaption { margin-top: 12px; font: italic 18px var(--serif); color: var(--foam-dim); }
.island-tx { min-width: 0; }


/* ---- combat: text beside a fight */
.fight { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; }
.fight:not(:has(.shot)) { grid-template-columns: minmax(0, 760px); justify-content: center; }
.fight .shot img { border-radius: 4px; box-shadow: 0 18px 40px rgba(14, 34, 41, .22); }
.fight p { color: var(--ink); }
.kit { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.kit li { padding: 5px 12px 4px; font: 600 13px var(--caps); letter-spacing: .12em; text-transform: uppercase; color: var(--sea); background: var(--foam); border: 1px solid var(--rule); border-radius: 3px; }

/* ---- the realm: a deep-water band, the war in one paragraph, then the regions */
.realm { padding: 80px 16px; background: linear-gradient(180deg, var(--sea-deep) 0%, #0b1b20 100%); color: var(--foam-dim); }
.realm-in { max-width: 1120px; margin: 0 auto; }
.realm h2 { color: var(--foam); }
.realm .eyebrow { color: var(--lantern); }
.realm-lede { max-width: 70ch; font-size: 20px; margin-bottom: 40px; }
.regions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 32px; }
.regions article { min-width: 0; padding-top: 16px; border-top: 2px solid rgba(226, 194, 124, .45); }
.regions article:has(img) { grid-column: span 2; padding-top: 0; border-top: 0; }
@media (min-width: 1061px) { .regions:not(:has(img)) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.regions img { aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; margin-bottom: 4px; box-shadow: 0 14px 32px rgba(0, 0, 0, .4); }
.regions h3 { color: var(--lantern); }
.regions p { font-size: 18px; color: var(--foam-dim); }
.regions article:not(:has(img)) p { font-size: 17px; }

/* ---- where it's going: the vision, then three lanes from the Chronicle */
.road-lede { max-width: 70ch; font-size: 20px; color: var(--ink); }
.lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 32px; align-items: start; }
.lane { min-width: 0; padding: 20px 22px 8px; background: var(--foam); border: 1px solid var(--rule); border-top: 4px solid var(--shallow); border-radius: 4px; }
.lane.now { border-top-color: var(--sail); }
.lane.later { border-top-color: var(--rule); }
.lane h3 { margin-top: 0; }
.lane ul { margin: 0; padding-left: 18px; }
.lane li { margin: 0 0 10px; font-size: 18px; color: var(--ink); }
.road-note { margin-top: 20px; font-style: italic; color: var(--muted); }

.faq, .news { max-width: 760px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; list-style: none; padding: 16px 0; font: 500 20px var(--serif); color: var(--ink); display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--caps); color: var(--shallow); }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--ink); }
.news article { padding: 14px 0; border-bottom: 1px solid var(--rule); }
.news time { font: 600 14px var(--caps); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums; }
.news h3 { margin: 6px 0; text-transform: none; letter-spacing: .04em; font-size: 18px; }

.last { text-align: center; padding: 72px 16px 88px; background: linear-gradient(180deg, var(--sea) 0%, var(--sea-deep) 100%); }
.last-line { margin: 0 auto 22px; font: italic 400 26px var(--serif); color: var(--foam-dim); }
/* ---- privacy notice and terms: plain reading pages */
.doc { max-width: 760px; padding-block: 56px 72px; }
.doc h1 { margin: 0 0 4px; font: 400 clamp(30px, 4.4vw, 44px)/1.15 var(--caps); letter-spacing: .06em; color: var(--sea-deep); }
.doc .when { color: var(--muted); font-style: italic; }
.doc h2 { margin-top: 44px; font-size: clamp(22px, 2.6vw, 28px); }
.doc h3 { margin-top: 26px; }
.doc ul { max-width: 64ch; padding-left: 1.2em; margin: 0 0 1em; }
.doc li { margin-bottom: .45em; }
.doc .eyebrow a { color: inherit; text-decoration: none; }

footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; padding: 26px 16px 40px; background: var(--sea-deep); border-top: 1px solid rgba(244, 246, 242, .08); font: 600 15px var(--caps); letter-spacing: .18em; text-transform: uppercase; color: var(--foam-dim); }
footer .lore { flex-basis: 100%; margin: 0 0 6px; max-width: none; text-wrap: balance; text-align: center; font: italic 400 17px var(--serif); letter-spacing: 0; text-transform: none; color: var(--mist); }
footer a { color: var(--foam-dim); text-decoration: underline; text-decoration-color: rgba(223, 232, 230, .35); text-underline-offset: 4px; }
footer a:hover { color: var(--foam); }

@media (max-width: 1060px) {
  .regions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .regions article:has(img) { grid-column: auto; }
}
@media (max-width: 860px) {
  .mark { font-size: clamp(30px, 9.4vw, 56px); letter-spacing: .1em; padding-left: .1em; white-space: nowrap; }
  .island { padding-inline: 0; }
  .island-tx { padding-inline: 16px; }
  .island .shot img { border-radius: 0; }
  .island .shot figcaption { padding-inline: 16px; }
  .pillars, .island, .fight, .regions, .lanes { grid-template-columns: minmax(0, 1fr); }
  .page section, .island, .realm { padding-block: 44px; }
  body { font-size: 18px; }
  .pillars, .regions { gap: 28px; }
  .pillars p, .regions p, .lane li { font-size: 17px; }
  .realm-lede, .road-lede { font-size: 18px; }
  .regions article:not(:has(img)) h3 { margin-top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .play { transition: none; }
}