/* fantasyplanetpainter.com — one stylesheet for every page.
   Colours are the original site's: its green-black ground, sage and khaki, with the brown and slate its feature cards alternated. The same values are in FantasyPlanetPainterWebsiteArt's Palette.cs, which composes the site's pictures, so the art and the page agree. */

@font-face { font-family: "Luxe Uno"; src: url("fonts/LuxeUno-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Luxe Uno"; src: url("fonts/LuxeUno-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Jura"; src: url("fonts/Jura.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Special Elite"; src: url("fonts/SpecialElite.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --ground: #010b00;
  --ground-2: #06110a;
  --surface: #0f130f;
  --raised: #181f17;
  --line: rgba(255, 255, 255, 0.14);
  --text: #b9bdb3;
  --strong: #eef0e8;
  --sage: #6b946a;
  --sage-deep: #4a6b48;
  --khaki: #dcd194;
  --khaki-bright: #ece3ae;
  --brown: #5b4c3e;
  --slate: #3a3e4b;
  --display: "Luxe Uno", "Segoe UI", system-ui, sans-serif;
  --body: "Jura", "Segoe UI", system-ui, sans-serif;
  --label: "Special Elite", "Courier New", monospace;
  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 32px);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--ground); color: var(--text); font: 500 17px/1.7 var(--body); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--khaki); text-underline-offset: 3px; }
a:hover { color: var(--khaki-bright); }
:focus-visible { outline: 2px solid var(--khaki); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); color: var(--strong); font-weight: 400; line-height: 1.15; margin: 0 0 0.5em; letter-spacing: 0.01em; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 5.2vw, 4.1rem); }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }
strong { color: var(--strong); font-weight: 700; }
/* Luxe Uno kerns a full stop 136 units into a following 1, whose foot starts at its left edge, so 1.3.1 in a heading reads as 1.31. Version numbers in headings are set without kerning. */
.num { font-kerning: none; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--khaki); color: var(--ground); padding: 8px 14px; z-index: 10; }
.skip:focus { left: 8px; }

/* Labels and buttons are set in Special Elite, as the original site set them. Its capitals sit 0.13 em above the middle of their line (its ascent is 1,440 of 2,048 units and its capitals about 1,420 tall), so every box that centres them adds that much padding above and takes it from below. */
:root { --cap-shift: 0.13em; }
.eyebrow { font: 400 0.9rem/1.4 var(--label); text-transform: uppercase; letter-spacing: 0.1em; color: var(--khaki); margin: 0 0 0.9rem; }
.lede { font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--text); max-width: 40em; }
.muted { color: #8e9387; font-size: 0.95rem; }
.btn { display: inline-flex; align-items: center; gap: 0.6em; font: 400 1rem/1 var(--label); text-transform: uppercase; letter-spacing: 0.07em; text-decoration: none; padding: calc(16px + var(--cap-shift)) 26px calc(16px - var(--cap-shift)); border: 1.5px solid var(--khaki); transition: background 0.15s, color 0.15s; }
.btn-primary { background: var(--khaki); color: #0e1a0c; }
.btn-primary:hover { background: var(--khaki-bright); color: #0e1a0c; }
.btn-ghost { background: transparent; color: var(--khaki); }
.btn-ghost:hover { background: rgba(220, 209, 148, 0.12); color: var(--khaki-bright); }
.btn-small { padding: calc(11px + var(--cap-shift)) 16px calc(11px - var(--cap-shift)); font-size: 0.85rem; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 5; background: rgba(1, 11, 0, 0.86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.bar { display: flex; align-items: center; gap: 28px; min-height: 68px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--strong); text-decoration: none; font: 400 1.05rem/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; margin-right: auto; }
.brand img { width: 34px; height: 34px; }
.brand:hover { color: var(--strong); }
.nav { display: flex; gap: 26px; }
.nav a { color: var(--text); text-decoration: none; font-weight: 600; font-size: 0.98rem; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--strong); }
.nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--khaki); }
.menu { display: none; position: relative; }
.menu summary { list-style: none; cursor: pointer; font: 400 0.85rem/1 var(--label); text-transform: uppercase; letter-spacing: 0.08em; color: var(--khaki); border: 1.5px solid var(--khaki); padding: calc(10px + var(--cap-shift)) 14px calc(10px - var(--cap-shift)); }
.menu summary::-webkit-details-marker { display: none; }
.menu nav { position: absolute; right: 0; top: calc(100% + 10px); background: var(--surface); border: 1px solid var(--line); display: grid; min-width: 220px; padding: 8px 0; }
.menu nav a { color: var(--strong); text-decoration: none; padding: 12px 20px; }
.menu nav a:hover { background: var(--raised); }

/* Hero */
.hero { position: relative; overflow: hidden; min-height: min(86vh, 900px); display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.hero-art { position: absolute; inset: 0; }
.hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(1, 11, 0, 0.94) 0%, rgba(1, 11, 0, 0.72) 38%, rgba(1, 11, 0, 0) 64%); pointer-events: none; }
.hero .wrap { position: relative; z-index: 1; width: 100%; padding-top: 72px; padding-bottom: 72px; }
.hero-copy { max-width: 560px; }
.hero .note { margin-top: 22px; font-size: 0.95rem; color: #9da294; }

/* Page banner for inner pages */
.banner { border-bottom: 1px solid var(--line); background: radial-gradient(900px 360px at 85% 0%, rgba(74, 107, 72, 0.28), transparent 70%), var(--ground); }
.banner .wrap { padding-top: 84px; padding-bottom: 56px; }
.banner p { max-width: 44em; }

/* Sections */
section { padding: clamp(64px, 9vw, 112px) 0; }
section.alt { background: var(--ground-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { max-width: 46em; margin-bottom: 44px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.split.wide-media { grid-template-columns: 1.35fr 1fr; }
.split + .split { margin-top: clamp(56px, 8vw, 96px); }
.split.flip > :first-child { order: 2; }
.split.top { align-items: start; }
figure { margin: 0; }
.shot { border-radius: 10px; border: 1px solid var(--line); overflow: hidden; background: var(--surface); }
.shot img { width: 100%; }
figcaption { font-size: 0.92rem; color: #9da294; margin-top: 12px; }
.facts { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 12px; }
.facts li { padding-left: 26px; position: relative; }
.facts + p { margin-top: 20px; }
.facts li::before { content: ""; position: absolute; left: 2px; top: 0.72em; width: 10px; height: 10px; border: 1.5px solid var(--khaki); transform: rotate(45deg); }

/* Feature cards: the original site's alternating brown and slate, translucent over the ground. */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
.card img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.card-body { padding: 22px 24px 26px; }
.card:nth-child(4n + 2) { background: rgba(91, 76, 62, 0.34); }
.card:nth-child(4n + 3) { background: rgba(58, 62, 75, 0.5); }
.card h3 { margin-bottom: 0.4em; }
.card p { margin: 0; }
.tag { display: inline-block; font: 400 0.72rem/1 var(--label); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ground); background: var(--khaki); padding: calc(5px + var(--cap-shift)) 8px calc(5px - var(--cap-shift)); margin-bottom: 12px; }

/* Tile grids: projections, palettes and map styles, each captioned. */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; }
.tiles.wide { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.tile { margin: 0; }
.tile img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #000; border-radius: 8px; border: 1px solid var(--line); }
.tiles.wide .tile img { aspect-ratio: 2 / 1; object-fit: cover; }
.tile figcaption { margin-top: 8px; font-size: 0.88rem; color: var(--strong); }
.triptych { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.triptych img { border-radius: 8px; border: 1px solid var(--line); }

/* Steps */
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.steps li { counter-increment: step; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 24px; }
.steps li::before { content: "0" counter(step); display: block; font: 400 0.9rem/1 var(--label); color: var(--khaki); letter-spacing: 0.1em; margin-bottom: 14px; }
.steps h3 { font-size: 1.15rem; }
.steps p { margin: 0; }

/* Videos: a local poster and a button; YouTube is contacted only when a visitor presses play. */
.video { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: #000; }
.video > a { position: absolute; inset: 0; display: block; }
.video img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s, opacity 0.2s; opacity: 0.88; }
.video > a:hover img { transform: scale(1.02); opacity: 1; }
/* In the corner rather than the centre, where most posters carry their own title. */
.play { position: absolute; left: 18px; bottom: 18px; width: 64px; height: 64px; border-radius: 50%; background: rgba(1, 11, 0, 0.78); border: 2px solid var(--khaki); }
.play::after { content: ""; position: absolute; left: 25px; top: 19px; border-style: solid; border-width: 13px 0 13px 21px; border-color: transparent transparent transparent var(--khaki); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 28px; }
.video-item h3 { margin: 16px 0 6px; font-size: 1.2rem; }
.video-item p { margin: 0; font-size: 0.97rem; }
.video-item .video-meta { font: 400 0.8rem/1.4 var(--label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--khaki); margin: 18px 0 0; }

/* Store choices */
.stores { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: stretch; }
.store { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 32px; display: flex; flex-direction: column; }
.store.primary { border-color: rgba(220, 209, 148, 0.55); box-shadow: 0 0 0 1px rgba(220, 209, 148, 0.18) inset; }
.store .actions { margin-top: auto; padding-top: 24px; }
.store ul { margin: 0 0 8px; padding-left: 20px; }
.store li { margin-bottom: 6px; }

/* FAQ */
.faq { max-width: 860px; }
.faq details { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); margin-bottom: 12px; }
.faq summary { cursor: pointer; list-style: none; padding: 20px 56px 20px 24px; position: relative; color: var(--strong); font-weight: 700; font-size: 1.05rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); font: 400 1.5rem/1 var(--label); color: var(--khaki); }
.faq details[open] summary::after { content: "−"; }
.faq details > div { padding: 0 24px 20px; }

/* Timeline */
.timeline { list-style: none; margin: 0; padding: 0; border-left: 1.5px solid var(--line); max-width: 860px; }
.timeline li { position: relative; padding: 0 0 36px 32px; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 0.55em; width: 12px; height: 12px; border: 1.5px solid var(--khaki); background: var(--ground); transform: rotate(45deg); }
.timeline li.now::before { background: var(--khaki); }
.timeline .when { font: 400 0.85rem/1.4 var(--label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--khaki); }
.timeline h3 { margin: 6px 0 8px; }
.timeline p { margin: 0; }

/* Long-form text: policies and the licence */
.prose { max-width: 780px; }
.prose h2 { font-size: 1.5rem; margin-top: 2.2em; padding-top: 1.1em; border-top: 1px solid var(--line); }
.prose h2:first-of-type { margin-top: 1.4em; }
.prose ul { padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.callout { background: var(--surface); border-left: 3px solid var(--khaki); border-radius: 6px; padding: 20px 24px; margin: 8px 0 12px; color: var(--strong); }

/* Closing call to action */
.cta-band { text-align: center; background: radial-gradient(800px 320px at 50% 100%, rgba(107, 148, 106, 0.22), transparent 70%), var(--ground); }
.cta-band .actions { justify-content: center; }
.cta-band p { margin-left: auto; margin-right: auto; max-width: 38em; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); background: var(--ground); padding: 64px 0 28px; font-size: 0.95rem; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 32px; }
.site-footer h2 { font: 400 0.85rem/1.4 var(--label); text-transform: uppercase; letter-spacing: 0.1em; color: var(--khaki); margin: 0 0 14px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.site-footer a { color: var(--text); text-decoration: none; }
.site-footer a:hover { color: var(--strong); text-decoration: underline; }
.footer-brand p { margin: 14px 0 0; max-width: 22em; }
.footer-brand .brand { margin-right: 0; }
.legal { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; color: #868b80; font-size: 0.88rem; }

@media (max-width: 980px) {
  .nav { display: none; }
  .menu { display: block; }
  .bar > .btn { display: none; }
  .split, .split.wide-media, .stores { grid-template-columns: 1fr; }
  .split.flip > :first-child { order: 0; }
  .steps { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  /* The phone backdrop keeps its own proportions above the headline, fading into the ground where the text begins, instead of being cropped to cover the text. */
  .hero { min-height: auto; display: block; }
  .hero-art { bottom: auto; }
  .hero-art img { height: auto; }
  .hero::after { background: linear-gradient(180deg, rgba(1, 11, 0, 0) 58vw, var(--ground) 83vw); }
  .hero .wrap { padding-top: 72vw; padding-bottom: 48px; }
  .tiles.wide { grid-template-columns: 1fr 1fr; gap: 12px; }
  .triptych { grid-template-columns: 1fr; }
  .brand span { font-size: 0.9rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .video img, .btn { transition: none; }
}