/* Memorium. White with dark accents. Plain CSS, mobile first, no dependencies.
   Motion has two levels, set on <html data-motion>: "quiet" (default) and "showpiece".
   Everything is readable with no JavaScript and with reduced motion. */

:root {
  --white: #fff;
  --ink: #141210;
  --graphite: #5f5a51;
  --quiet: #6e695f;
  --line: #e7e3da;
  --stone: #f6f4ef;
  --linen: #efe9df;
  --brass: #8a6720;
  --brass-soft: #c9a558;
  --on-dark: #fff;
  --on-dark-muted: #b9b3a7;
  --serif: Didot, "Bodoni 72", "Bodoni MT", "Playfair Display", "Iowan Old Style", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gutter: 22px;
  --measure: 1200px;
  --sec: clamp(64px, 11vw, 148px);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --head-h: 68px;
  --svh: 100vh;
}
/* The height of the screen with the browser's bars showing, where the browser can say (phones). */
@supports (height: 100svh) { :root { --svh: 100svh; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 12px); -webkit-tap-highlight-color: rgba(138, 103, 32, 0.14); }
body { margin: 0; background: var(--white); color: var(--ink); font: 17px/1.62 var(--sans); overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: inherit; }
p { margin: 0 0 16px; text-wrap: pretty; }
a, button, summary, label, input { touch-action: manipulation; }
ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.7rem, 10.5vw, 5.6rem); line-height: 1.02; letter-spacing: -0.016em; }
h2 { font-size: clamp(2rem, 6.2vw, 3.5rem); line-height: 1.08; letter-spacing: -0.012em; margin-bottom: 22px; }
h3 { font-size: 1.45rem; line-height: 1.2; margin-bottom: 8px; }

/* On a phone turned on its side the page runs under the camera cut-out, so the gutters grow to clear it. */
.wrap { max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
.sec { padding-block: var(--sec); }
.sec-tight { padding-block: calc(var(--sec) * 0.62); }
.rule-top { border-top: 1px solid var(--line); }
.stone { background: var(--stone); }
.linen { background: var(--linen); }
.dark { background: var(--ink); color: var(--on-dark); }
.dark p, .dark .lede { color: var(--on-dark-muted); }
.center { text-align: center; }
.center .lede, .center p { margin-inline: auto; }

.eyebrow { font: 600 0.75rem/1.2 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass); margin-bottom: 16px; }
.dark .eyebrow { color: var(--brass-soft); }
.lede { font-size: 1.18rem; line-height: 1.56; color: var(--graphite); max-width: 30em; }
.muted { color: var(--graphite); }
.small { font-size: 0.86rem; color: var(--quiet); }
.prose p { color: var(--graphite); max-width: 34em; }
.prose p.big { font-size: 1.18rem; color: var(--ink); }
figcaption { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--quiet); margin-top: 10px; }

.skip { position: absolute; left: -9999px; top: 8px; background: var(--ink); color: var(--white); padding: 10px 14px; z-index: 50; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.dark :focus-visible { outline-color: var(--brass-soft); }

/* Buttons and links */
.button {
  display: inline-block; padding: 16px 30px; border: 1px solid var(--ink); border-radius: 2px;
  background: var(--ink); color: var(--white); font: 500 0.98rem/1.2 var(--sans); letter-spacing: 0.03em;
  text-align: center; text-decoration: none; cursor: pointer; transition: background 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
}
.button:active { transform: translateY(1px); background: #2e2a24; }
.button-ghost { background: transparent; color: var(--ink); }
.dark .button { background: var(--white); color: var(--ink); border-color: var(--white); }
.dark .button:active { background: #ece8df; }
.link { position: relative; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 3px; transition: background-size 0.4s var(--ease), opacity 0.2s; }
.link::after { content: ""; position: absolute; inset: -10px -8px; }   /* a finger-sized area round a line of text */
.link:active { opacity: 0.55; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 30px; }
.center .actions { justify-content: center; }

/* Header */
.site-head { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, 0.94); border-bottom: 1px solid transparent; transition: border-color 0.4s, background 0.4s; view-transition-name: site-head; }
@supports (backdrop-filter: blur(8px)) { .site-head { background: rgba(255, 255, 255, 0.82); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); } }
.site-head.is-stuck { border-bottom-color: var(--line); }
.site-head.is-open { background: rgba(255, 255, 255, 0.97); border-bottom-color: var(--line); }   /* an open menu is read against the page behind it */
.head-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 20px; min-height: var(--head-h); }
.logo { display: inline-block; flex: 0 0 auto; padding-block: 9px; }
.logo img { height: 26px; width: auto; }
@media (max-width: 359px) { .logo { padding-block: 11px; } .logo img { height: 22px; } .head-in { column-gap: 12px; } }   /* the smallest phones: logo and Menu stay on one line */
.site-nav { flex: 1 0 100%; }
.site-nav ul { display: flex; flex-direction: column; padding-block: 2px 20px; }
.site-nav a { display: block; padding: 13px 0; text-decoration: none; font-family: var(--serif); font-size: 1.4rem; line-height: 1.25; border-bottom: 1px solid var(--line); }
.site-nav a[aria-current="page"] { color: var(--brass); }
.site-nav .nav-cta a { margin-top: 20px; padding: 16px 20px; text-align: center; font: 500 0.98rem/1.2 var(--sans); letter-spacing: 0.03em; border: 0; background: var(--ink); color: var(--white); border-radius: 2px; }
.nav-toggle { display: none; min-width: 44px; min-height: 44px; background: none; border: 0; padding: 10px 0 10px 16px; text-align: right; font: 500 0.82rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); cursor: pointer; }
.js .nav-toggle { display: block; }
.js .site-nav { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--ease); }
.js .site-nav > ul { overflow: hidden; min-height: 0; padding-block: 0; visibility: hidden; transition: padding 0.5s var(--ease), visibility 0s 0.5s; }
.js .site-head.is-open .site-nav { grid-template-rows: 1fr; max-height: calc(var(--svh) - var(--head-h)); overflow-y: auto; overscroll-behavior: contain; }
.js .site-head.is-open .site-nav > ul { padding-block: 2px 20px; visibility: visible; transition: padding 0.5s var(--ease), visibility 0s; }

/* Home hero */
.hero { display: grid; gap: 26px; padding-block: 34px var(--sec); }
.hero-copy .lede { margin-top: 22px; }
.hero-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; background: var(--linen); }
.hero-track { display: none; }

/* Page heads on inner pages */
.page-head { padding-block: clamp(48px, 8vw, 104px) clamp(40px, 6vw, 72px); }
.page-head h1 { font-size: clamp(2.5rem, 8.6vw, 4.8rem); max-width: 13em; }
.page-head .lede { margin-top: 22px; }

/* Split: image beside text */
.split { display: grid; gap: 30px; align-items: center; }
.split-media img { width: 100%; border-radius: 2px; background: var(--linen); }
.ratio-32 img { aspect-ratio: 3 / 2; object-fit: cover; }
.ratio-45 img { aspect-ratio: 4 / 5; object-fit: cover; }
.ratio-11 img { aspect-ratio: 1; object-fit: cover; }

/* Coin cut-outs */
.coin { display: block; width: 100%; aspect-ratio: 1; filter: drop-shadow(0 16px 18px rgba(64, 48, 20, 0.26)) drop-shadow(0 3px 4px rgba(64, 48, 20, 0.22)); }

/* Coin rail on the home page */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: 44%; gap: 18px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 12px var(--gutter) 26px; margin-inline: calc(var(--gutter) * -1); scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail li { scroll-snap-align: center; text-align: center; }
.rail span, .tile-cap { display: block; margin-top: 14px; font-family: var(--serif); font-style: italic; font-size: 1.02rem; line-height: 1.25; }

/* Photograph to coin: the still version (quiet level, reduced motion, no script) */
.story-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 18px; margin-bottom: 36px; }
.story-steps li { text-align: center; }
.story-pic { aspect-ratio: 1; display: grid; place-items: center; }
.story-pic img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.story-pic .is-photo { height: 96%; border: 6px solid #fff; box-shadow: 0 16px 28px -12px rgba(64, 48, 20, 0.42); }
.story-pic .is-box { width: 92%; border-radius: 2px; box-shadow: 0 18px 30px -14px rgba(64, 48, 20, 0.42); }
.story-pic .coin { width: 88%; }
.story-steps span { display: block; margin-top: 16px; font-family: var(--serif); font-size: 1.15rem; line-height: 1.25; }

/* Photograph to coin: the moving version, one pinned canvas (story.js) */
.story-stage { display: none; }
.story-canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.story-lines { position: absolute; left: 0; right: 0; bottom: calc(100vh - var(--svh) + clamp(44px, 10vh, 110px)); margin: 0; padding-inline: var(--gutter); display: grid; justify-items: center; text-align: center; pointer-events: none; }
.story-lines .line { grid-area: 1 / 1; font-family: var(--serif); font-size: clamp(1.65rem, 4.4vw, 2.9rem); line-height: 1.12; color: var(--ink); opacity: 0; transform: translateY(12px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), color 0.5s; }
.story-lines .line.is-on { opacity: 1; transform: none; }
.story-stage.is-dark .line { color: #f6f1e7; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.65); }
[data-motion="showpiece"] .story-still { display: none; }
[data-motion="showpiece"] .story-shell { height: 620vh; }
@media (max-width: 719px) { [data-motion="showpiece"] .story-shell { height: calc(var(--svh) * 5.4); } }
/* The pinned stage is as tall as the screen ever gets (on a phone the browser's bar floats over its foot), so no strip
   of the page shows beneath the dark chamber. The words keep clear of that bar: see .story-lines. */
[data-motion="showpiece"] .story { position: sticky; top: 0; height: 100vh; overflow: hidden; }
@supports (height: 100lvh) { [data-motion="showpiece"] .story { height: 100lvh; } }
[data-motion="showpiece"] .story-stage { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

/* While the page is inside the laser chamber, the header goes dark with it */
.logo-dark { display: none; }
.in-chamber .logo-light { display: none; }
.in-chamber .logo-dark { display: block; }
.in-chamber body { background: #0b0a09; }   /* the strip behind a phone's clock takes the page colour */
.in-chamber .site-head { background: rgba(9, 8, 7, 0.55); border-bottom-color: transparent; }
.in-chamber .site-head.is-open { background: rgba(9, 8, 7, 0.94); }
.in-chamber .site-nav a, .in-chamber .nav-toggle { color: #fff; }
.in-chamber .site-nav a { border-bottom-color: rgba(255, 255, 255, 0.16); }
.in-chamber .site-nav .nav-cta a { background: #fff; color: var(--ink); }

/* Flip coin */
.flip-wrap { display: grid; justify-items: center; gap: 14px; }
.flip { position: relative; width: min(100%, 420px); aspect-ratio: 1; padding: 0; border: 0; background: none; cursor: pointer; perspective: 1400px; -webkit-tap-highlight-color: transparent; }
.flip-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 1.15s var(--ease); }
.flip-face { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; filter: drop-shadow(0 18px 20px rgba(64, 48, 20, 0.28)); }
.flip-back { transform: rotateY(180deg); }
.flip[aria-pressed="true"] .flip-inner { transform: rotateY(180deg); }
@media (hover: hover) { .flip:hover .flip-inner { transform: rotateY(14deg); } .flip[aria-pressed="true"]:hover .flip-inner { transform: rotateY(194deg); } }
.flip-hint { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--quiet); margin: 0; }
.no-js .flip { cursor: default; aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: 100%; }
.no-js .flip-inner, .no-js .flip-face { position: static; transform: none; }
.no-js .flip-inner { display: contents; }
.no-js .flip-hint { display: none; }
.sides { display: grid; gap: 22px; margin-top: 26px; }
.sides h3 { font-size: 1.2rem; }
.sides p { color: var(--graphite); margin: 0; }

/* Tier cards */
.tiers { display: grid; gap: 44px; }
.tier { display: flex; flex-direction: column; }
.tier-img { overflow: hidden; border-radius: 2px; margin-bottom: 20px; background: var(--linen); }
.tier-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1.2s var(--ease); }
.tier h3 { font-size: 1.6rem; margin-bottom: 2px; }
.price { font-family: var(--serif); font-size: 1.6rem; margin-bottom: 10px; }
.tier p { color: var(--graphite); }
.tier .link { align-self: flex-start; margin-top: auto; }

/* The collection tray, drawn in CSS and filled with real coin cut-outs */
.tray { background: #cdb590; padding: clamp(10px, 2.4vw, 18px); border-radius: 3px; box-shadow: 0 30px 50px -28px rgba(40, 30, 12, 0.45); max-width: 520px; margin-inline: auto; width: 100%; }
.tray-in { background: var(--linen); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(8px, 2.4vw, 20px); padding: clamp(14px, 4vw, 30px); }
.well { position: relative; aspect-ratio: 1; border-radius: 50%; background: #e3dccf; box-shadow: inset 0 2px 5px rgba(60, 48, 30, 0.22); }
.well img { position: absolute; left: -2%; top: -2%; width: 104%; height: 104%; max-width: none; filter: drop-shadow(0 3px 3px rgba(60, 45, 20, 0.35)); }
.js .well img { opacity: 0; transform: translateY(-16px) scale(1.06); transition: opacity 0.7s var(--ease), transform 0.9s var(--ease); transition-delay: calc(var(--i, 0) * 160ms); }
.js .tray.is-in .well img { opacity: 1; transform: none; }

/* Dark statement */
.statement h2 { font-size: clamp(2.3rem, 7.4vw, 4.4rem); }

/* Gallery */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 34px; }
.chip { min-height: 44px; padding: 9px 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); font: 500 0.86rem/1 var(--sans); color: var(--graphite); cursor: pointer; transition: border-color 0.3s, color 0.3s, background 0.3s; }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
.no-js .filters { display: none; }
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 16px; }
.tile { text-align: center; }
.tile[hidden] { display: none; }
.tile-plate { background: var(--stone); border-radius: 2px; padding: 12%; transition: background 0.5s; }
.tile .coin { transition: transform 0.9s var(--ease); }
.tile-kind { display: block; margin-top: 4px; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--quiet); }

/* Facts list */
.facts { margin: 26px 0 0; border-top: 1px solid var(--line); }
.facts div { display: flex; justify-content: space-between; gap: 18px; padding-block: 13px; border-bottom: 1px solid var(--line); }
.facts dt { color: var(--graphite); font-size: 0.92rem; }
.facts dd { margin: 0; text-align: right; }

/* Photo grid */
.photos { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.photos figure { overflow: hidden; border-radius: 2px; background: var(--linen); }
.photos img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 1.4s var(--ease); }
.photos .wide, .photos .full-sm { grid-column: 1 / -1; }
.photos .wide img { aspect-ratio: 5 / 2; }
.photos .full-sm img { aspect-ratio: 4 / 3; }

/* Steps */
.steps { display: grid; gap: 30px; counter-reset: step; }
.steps > li { counter-increment: step; border-top: 1px solid var(--ink); padding-top: 18px; }
.steps > li::before { content: counter(step, decimal-leading-zero); display: block; font-family: var(--serif); color: var(--brass); letter-spacing: 0.14em; font-size: 0.95rem; margin-bottom: 10px; }
.steps p { color: var(--graphite); margin: 0; }
.dark .steps > li { border-top-color: #4a4538; }
.dark .steps > li::before { color: var(--brass-soft); }

.journey { display: grid; gap: clamp(48px, 8vw, 96px); counter-reset: j; }
.journey > li { counter-increment: j; display: grid; gap: 26px; }
.journey .num::before { content: counter(j, decimal-leading-zero); font-family: var(--serif); color: var(--brass); letter-spacing: 0.14em; font-size: 1rem; }
.journey h2 { font-size: clamp(1.8rem, 5vw, 2.7rem); margin: 10px 0 14px; }
.journey-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 2px; background: var(--linen); }

/* Tag lists (holidays) */
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.tags li { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 0.9rem; background: var(--white); }
.cols { display: grid; gap: 34px; }
/* Who a gift is for: on a phone, a small coin beside each name */
.people > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 20px; align-items: center; }
.people .coin { grid-row: 1 / span 2; }
.people h3 { align-self: end; margin: 0 0 4px; }
.people p { align-self: start; margin: 0; }

/* Compare table. On a phone each row's name sits above its three values, so nothing scrolls sideways. */
table { display: block; font-size: 0.92rem; }
thead, tbody { display: block; }
tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 14px; border-bottom: 1px solid var(--line); }
th, td { display: block; text-align: left; padding: 0 0 16px; font-weight: 400; overflow-wrap: break-word; }
thead tr { border-bottom-color: var(--ink); }
thead th { font-family: var(--serif); font-size: 1.12rem; line-height: 1.2; padding-bottom: 14px; align-self: end; }
thead th:first-child { display: none; }
tbody th { grid-column: 1 / -1; padding: 16px 0 6px; font: 600 0.72rem/1.3 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--quiet); }
td { line-height: 1.4; }

/* Detail blocks on Collections */
.offer { display: grid; gap: 28px; align-items: center; }
.offer + .offer { margin-top: clamp(56px, 9vw, 120px); }
.offer h2 { margin-bottom: 4px; }
.offer .price { font-size: 2rem; margin-bottom: 16px; }
.offer-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 2px; background: var(--linen); }
.offer .button { width: 100%; }
.ticks { margin: 18px 0 26px; }
.ticks li { position: relative; padding: 10px 0 10px 26px; border-bottom: 1px solid var(--line); color: var(--graphite); }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 19px; width: 9px; height: 9px; border-radius: 50%; background: var(--brass); }

/* FAQ */
.faq { max-width: 820px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 40px 22px 0; position: relative; font-family: var(--serif); font-size: 1.28rem; line-height: 1.25; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px; border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: translateY(-70%) rotate(45deg); transition: transform 0.4s var(--ease); }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq .answer { padding: 0 0 24px; color: var(--graphite); max-width: 40em; }
.faq .answer p:last-child { margin-bottom: 0; }
.faq h2 { font: 600 0.74rem/1.2 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass); margin: 48px 0 6px; padding-bottom: 14px; border-bottom: 1px solid var(--ink); }
.faq h2:first-child { margin-top: 0; }

/* Reserve form */
.form { max-width: 720px; }
.form fieldset { border: 0; margin: 0 0 30px; padding: 0; min-width: 0; }
.form legend, .form .label { display: block; font: 600 0.74rem/1.2 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass); margin-bottom: 14px; padding: 0; }
.options { display: grid; gap: 10px; }
.option { position: relative; display: block; }
.option input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.option > span { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 2px; background: var(--white); transition: border-color 0.3s, background 0.3s, box-shadow 0.3s; }
.option b { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; display: block; }
.option i { font-style: normal; color: var(--graphite); font-size: 0.92rem; display: block; margin-top: 2px; }
.option em { font-style: normal; font-family: var(--serif); font-size: 1.3rem; white-space: nowrap; }
.option input:checked + span { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--stone); }
.option input:focus-visible + span { outline: 2px solid var(--brass); outline-offset: 3px; }
.field input { width: 100%; padding: 16px 16px; font: inherit; color: var(--ink); background: var(--white); border: 1px solid #bdb5a4; border-radius: 2px; }
.field input::placeholder { color: var(--quiet); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .button { margin-top: 22px; width: 100%; }
.fine { font-size: 0.86rem; color: var(--quiet); margin: 14px 0 0; }

/* Closing band */
.closing h2 { font-size: clamp(2.2rem, 7vw, 4rem); }

/* Footer */
.site-foot { background: var(--ink); color: var(--on-dark-muted); border-top: 1px solid #2c2822; padding-block: 56px 34px; padding-bottom: calc(34px + env(safe-area-inset-bottom)); font-size: 0.92rem; }
.foot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 20px; }
.foot-grid > div:first-child { grid-column: 1 / -1; }
.foot-logo { height: 22px; width: auto; margin-bottom: 16px; }
.site-foot p { max-width: 24em; }
.site-foot a { display: inline-block; padding-block: 10px; text-decoration: none; }
.site-foot a:active { color: var(--on-dark); }
.site-foot h2 { font: 600 0.72rem/1.2 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass-soft); margin-bottom: 6px; }
.foot-base { margin-top: 34px; padding-top: 22px; border-top: 1px solid #2c2822; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: 0.8rem; color: #8d8676; }

/* Message pages */
.message { min-height: 56vh; display: grid; align-content: center; justify-items: start; padding-block: var(--sec); max-width: 700px; }
.message h1 { font-size: clamp(2.4rem, 8vw, 4rem); margin-bottom: 18px; }
.message .lede { margin-bottom: 30px; }

/* Motion switch (shown in review only) */
.motion-switch { position: fixed; right: max(14px, env(safe-area-inset-right)); bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 40; display: flex; align-items: center; gap: 4px; padding: 5px; background: var(--ink); border-radius: 999px; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5); font: 500 0.76rem/1 var(--sans); }
.motion-switch[hidden] { display: none; }
.motion-switch span { color: var(--on-dark-muted); padding: 0 8px 0 10px; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.66rem; }
.motion-switch button { border: 0; border-radius: 999px; padding: 9px 13px; background: transparent; color: var(--on-dark-muted); font: inherit; cursor: pointer; }
.motion-switch button[aria-pressed="true"] { background: var(--white); color: var(--ink); }

/* ---------- Motion, quiet level (the default) ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); transition-delay: calc(var(--i, 0) * 110ms); }
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal="rise"] { transform: translateY(46px); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js .mask { overflow: hidden; border-radius: 2px; }
.js .mask img { transform: scale(1.08); transition: transform 1.8s var(--ease); }
.js .mask.is-in img { transform: none; }

/* Failsafe: if the script never arrives, nothing stays hidden. */
.no-reveal [data-reveal], .no-reveal .mask img, .no-reveal .well img { opacity: 1 !important; transform: none !important; }

@keyframes settle { from { opacity: 0.2; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero-photo img { animation: settle 1s var(--ease) both; }

@view-transition { navigation: auto; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }
::view-transition-old(root) { animation: vt-out 0.28s ease both; }
::view-transition-new(root) { animation: vt-in 0.5s var(--ease) both; }

/* ---------- Motion, showpiece level ---------- */
/* The hero coin is drawn by coin.js on a canvas a little bigger than the coin, so it has room to lean and tip. */
.hero { --d: min(76vw, 440px); }
.coin3d { position: relative; width: var(--d); aspect-ratio: 1; margin-inline: auto; }
.coin-gl { position: absolute; left: -14%; top: -14%; width: 128%; height: 128%; max-width: none; pointer-events: none; opacity: 0; transition: opacity 0.7s var(--ease); }
.coin-gl.is-on { opacity: 1; }
.coin3d-shadow { --turn: calc(-24deg + var(--p, 0) * 194deg); width: 62%; height: 26px; margin: 26px auto 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(40, 30, 10, 0.3), transparent); }
@supports (width: calc(1px * cos(10deg))) { .coin3d-shadow { transform: scaleX(max(0.14, cos(var(--turn)), -1 * cos(var(--turn)))); } }
.hero-turn { text-align: center; font-size: 0.72rem; line-height: 20px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--quiet); margin: 10px 0 0; opacity: calc(1 - var(--p, 0) * 4); }

/* Where the coin cannot be drawn (no WebGL), coin.js marks the page "no-gl" and the hero stays as the photograph.
   The coin with its shadow and its line of text is --d + 82px tall; the sums below lean on that. */

/* A phone: the words scroll away and only the coin is pinned, in the middle of the screen, while it turns.
   site.js reads how far the coin has travelled down its track and leaves it on the shell as --p. */
@media (max-width: 719px) {
  html[data-motion="showpiece"]:not(.no-gl) .hero-photo { display: none; }
  html[data-motion="showpiece"]:not(.no-gl) .hero { --d: max(150px, min(76vw, 440px, var(--svh) - var(--head-h) - 106px)); padding-bottom: 30px; }
  html[data-motion="showpiece"]:not(.no-gl) .hero-track { display: block; height: calc(var(--d) + 82px + var(--svh) * 1.05); }
  html[data-motion="showpiece"]:not(.no-gl) .hero-stage { position: -webkit-sticky; position: sticky; top: calc(var(--head-h) + max(10px, (var(--svh) - var(--head-h) - var(--d) - 82px) / 2)); }
}
/* A wide screen that is also tall enough: the whole hero is pinned while the coin turns.
   A phone on its side is wide but short, so it keeps the photograph. */
@media (min-width: 720px) and (min-height: 560px) {
  html[data-motion="showpiece"]:not(.no-gl) .hero-photo { display: none; }
  html[data-motion="showpiece"]:not(.no-gl) .hero-track { display: block; }
  html[data-motion="showpiece"]:not(.no-gl) .hero-shell { height: 230vh; }
  html[data-motion="showpiece"]:not(.no-gl) .hero { --d: min(38vw, 500px, var(--svh) - var(--head-h) - 130px); position: sticky; top: var(--head-h); min-height: calc(var(--svh) - var(--head-h)); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-content: center; padding-block: 20px; }
}

[data-motion="showpiece"] [data-par] { transform: translateY(calc((var(--v, 0.5) - 0.5) * var(--amt, -70px))); will-change: transform; }
[data-motion="showpiece"] .js .well img, [data-motion="showpiece"] .well img { transition-delay: 0s; }
[data-motion="showpiece"] .tray .well img { opacity: 0; transform: translateY(-16px) scale(1.06); }
[data-motion="showpiece"] .tray .well img.is-set { opacity: 1; transform: none; }
[data-motion="showpiece"] .words span { display: inline-block; opacity: 0; transform: translateY(0.5em); animation: word 0.9s var(--ease) forwards; animation-delay: calc(var(--w) * 90ms + 150ms); }
@keyframes word { to { opacity: 1; transform: none; } }

/* ---------- Wider screens ---------- */
@media (min-width: 640px) {
  .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 22px; }
  .rail { grid-auto-columns: 27%; }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
  .tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
  .photos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .options.two { grid-template-columns: 1fr 1fr; }
  .photos .full-sm { grid-column: auto; }
  .photos .full-sm img { aspect-ratio: 1; }
  .cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .people > div { display: block; }
  .people .coin { max-width: 220px; }
  .people h3 { margin: 22px 0 8px; }
  .people p { margin: 0 0 16px; }
  .sides { grid-template-columns: 1fr 1fr; }
  .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .foot-grid > div:first-child { grid-column: auto; }
  .form .button, .offer .button { width: auto; }

  /* The compare table as an ordinary table */
  table { display: table; border-collapse: collapse; width: 100%; font-size: 0.95rem; }
  thead { display: table-header-group; }
  tbody { display: table-row-group; }
  tr { display: table-row; border: 0; }
  th, td { display: table-cell; padding: 15px 14px 15px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
  thead th { font-size: 1.2rem; padding-bottom: 15px; }
  thead th:first-child { display: table-cell; }
  tbody th { font: 500 0.95rem/1.62 var(--sans); letter-spacing: 0; text-transform: none; color: var(--graphite); width: 28%; }
  td { line-height: inherit; }
}

@media (min-width: 720px) {
  h1 { font-size: clamp(2.9rem, 6.2vw, 5.6rem); }
  .story-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
  .hero { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(36px, 6vw, 88px); align-items: center; padding-block: 44px var(--sec); }
  .hero-photo { width: min(100%, 540px); margin-left: auto; }

  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 6vw, 96px); }
  .split.wide-media { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .split.flip-order .split-media { order: 2; }
  .offer { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 6vw, 96px); }
  .offer:nth-of-type(even) .offer-media { order: 2; }
  .journey > li { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 6vw, 96px); align-items: center; }
  .journey > li:nth-child(even) .journey-media { order: 2; }
}

@media (min-width: 900px) {
  :root { --gutter: 44px; --head-h: 80px; }
  body { font-size: 18px; }
  .logo img { height: 30px; }
  .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 56px 28px; }
  .rail { overflow: visible; padding-inline: 0; margin-inline: 0; grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 30px; }
  .foot-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
  .site-foot a { padding-block: 5px; }
  .site-foot h2 { margin-bottom: 10px; }
}

@media (min-width: 1024px) {
  .head-in { flex-wrap: nowrap; }
  .nav-toggle, .js .nav-toggle { display: none; }
  .site-nav, .js .site-nav { display: block; flex: 0 1 auto; }
  .js .site-head.is-open .site-nav { max-height: none; overflow: visible; }
  .site-nav ul, .js .site-nav > ul, .js .site-head.is-open .site-nav > ul { flex-direction: row; align-items: center; gap: clamp(16px, 2.4vw, 34px); padding: 0; overflow: visible; visibility: visible; }
  .site-nav a { padding: 8px 0; font: inherit; font-size: 0.95rem; border: 0; position: relative; }
  .site-nav li:not(.nav-cta) a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--ease); }
  .site-nav li:not(.nav-cta) a:hover::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); }
  .site-nav .nav-cta a { margin: 0; padding: 12px 22px; font: inherit; font-size: 0.95rem; letter-spacing: 0; }
}

/* ---------- Touch screens ---------- */
/* A phone browser colours the strip behind the clock from the header, but only when the header is solid
   (measured in the iPhone simulator, November 2026). So on touch screens the header is solid: white, and
   dark inside the laser chamber. It also spares the phone a blur behind the header on every scrolled frame. */
@media (hover: none) {
  .site-head, .site-head.is-open { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .in-chamber .site-head, .in-chamber .site-head.is-open { background: #0b0a09; }
}

/* ---------- Hover, only where there is a pointer: on a touch screen a hover sticks after the tap ---------- */
@media (hover: hover) {
  .button:hover { background: #2e2a24; }
  .button-ghost:hover { background: var(--ink); color: var(--white); }
  .dark .button:hover { background: #ece8df; }
  .link:hover { background-size: 0 1px; background-position: 100% 100%; }
  .tier:hover .tier-img img { transform: scale(1.035); }
  .chip:hover { border-color: var(--ink); color: var(--ink); }
  .chip[aria-pressed="true"]:hover { color: var(--white); }
  .tile:hover .tile-plate { background: var(--linen); }
  .tile:hover .coin { transform: rotate(-4deg) scale(1.04); }
  .photos figure:hover img { transform: scale(1.04); }
  .option input:not(:checked):hover + span { border-color: #bdb5a4; }
  .site-foot a:hover { color: var(--on-dark); }
}

/* ---------- Reduced motion: everything is simply there ---------- */
/* A reviewer can force motion on (data-force-motion) to preview it; the public never gets that. */
@media (prefers-reduced-motion: reduce) {
  html:not([data-force-motion]) { scroll-behavior: auto; }
  html:not([data-force-motion]) *, html:not([data-force-motion]) *::before, html:not([data-force-motion]) *::after { animation: none !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
  html:not([data-force-motion]).js [data-reveal], html:not([data-force-motion]).js .mask img, html:not([data-force-motion]).js .well img { opacity: 1; transform: none; }
  html:not([data-force-motion])::view-transition-old(root), html:not([data-force-motion])::view-transition-new(root) { animation: none; }
}