/* stepfarer.com: the Stepfarer design system on the web (its Website section). Pages are Cream; the watch band
   and the footer are Slate. Every colour is a token below; components follow the sticker rules. */

@font-face { font-family: "El Messiri"; src: url(/fonts/ElMessiri-Variable.ttf) format("truetype"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url(/fonts/AlegreyaSans-Medium.ttf) format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Cambay"; src: url(/fonts/Cambay-Regular.ttf) format("truetype"); font-weight: 400; font-display: swap; }

:root {
  /* Cream */
  --bg: #faf3dd; --panel: #fffbee; --panel-hi: #f0e7cb; --hairline: #d9cfb0;
  --ink: #2a2e37; --ink-dim: #5e6472; --ink-faint: #a3a6ad;
  --outline: #1c1f26; --shadow: #2a2e37; --on-accent: #faf3dd;
  --gather: #276f51; --craft: #80590c; --combat: #b0433a; --travel: #2b6693;
  /* Slate */
  --s-bg: #1c1f26; --s-ink: #faf3dd; --s-dim: #b4b9c3; --s-travel: #8fc4ec; --s-outline: #0b0c10; --s-hair: #434957;

  --display: "El Messiri", Georgia, serif;
  --ui: "Alegreya Sans", "Trebuchet MS", system-ui, sans-serif;
  --body: Cambay, "Segoe UI", system-ui, sans-serif;
  --gutter: max(24px, env(safe-area-inset-left, 0px));
  --gutter-r: max(24px, env(safe-area-inset-right, 0px));
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 18px; line-height: 28px; }
img { max-width: 100%; }
a { color: var(--travel); }
a:hover { color: var(--outline); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
[hidden] { display: none !important; }

.wrap { max-width: 1120px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter-r); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 10; background: var(--panel); padding: 8px 12px; }

/* Type */
.page-title { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(44px, 6vw, 72px); line-height: 1.05; text-wrap: balance; }
.h2 { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(34px, 4vw, 48px); line-height: 1.1; text-wrap: balance; }
.h2-sm { margin: 0; font-family: var(--display); font-weight: 700; font-size: 36px; line-height: 1.15; }
.eyebrow { font-family: var(--ui); font-weight: 500; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--travel); }
.eyebrow--gather { color: var(--gather); }
.eyebrow--combat { color: var(--combat); }
.lede { margin: 0; max-width: 34em; }
.dim { color: var(--ink-dim); }
.small { font-size: 16px; line-height: 24px; }
.stack { display: flex; flex-direction: column; gap: 20px; }
.stack-sm { display: flex; flex-direction: column; gap: 12px; }

/* Stickers */
.btn { display: inline-flex; align-items: center; height: 52px; padding: 0 24px; border: 3px solid var(--outline); box-shadow: 4px 4px 0 var(--shadow); transform: skewX(-10deg); text-decoration: none; cursor: pointer; background: var(--travel); font: inherit; }
.btn > span { display: inline-block; transform: skewX(10deg); font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--on-accent); }
.btn:active { transform: skewX(-10deg) translate(4px, 4px); box-shadow: none; }
.btn--sm { height: 40px; padding: 0 18px; border-width: 2px; box-shadow: 2px 2px 0 var(--shadow); }
.btn--sm > span { font-size: 15px; }
.btn--combat { background: var(--combat); }
.btn--plain { background: var(--panel-hi); }
.btn--plain > span { color: var(--ink); }
.chip { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border: 2px solid var(--outline); box-shadow: 2px 2px 0 var(--shadow); transform: skewX(-10deg); }
.chip > span { display: inline-flex; align-items: center; gap: 8px; transform: skewX(10deg); font-family: var(--ui); font-weight: 500; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; }
.chip--gather { background: rgba(39, 111, 81, 0.14); color: var(--gather); }
.chip--craft { background: rgba(128, 89, 12, 0.14); color: var(--craft); }
.chip--combat { background: rgba(176, 67, 58, 0.14); color: var(--combat); }
.chip--soon { height: 48px; padding: 0 20px; background: var(--panel-hi); color: var(--ink-dim); }
.chip--soon.on-hi { background: var(--panel); }
.card { background: var(--panel); border: 2px solid var(--outline); border-radius: 4px; box-shadow: 4px 4px 0 var(--shadow); }
.card--thick { border-width: 4px; box-shadow: 6px 6px 0 var(--shadow); }
.dots { background-image: radial-gradient(circle, rgba(28, 31, 38, 0.28) 1.6px, transparent 2px); background-size: 8px 8px; -webkit-mask-image: linear-gradient(225deg, #000 0%, transparent 60%); mask-image: linear-gradient(225deg, #000 0%, transparent 60%); }
.glyph { display: inline-block; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--g) center / contain no-repeat; mask: var(--g) center / contain no-repeat; }
.g-wood { --g: url(/glyphs/woodcutting.png); } .g-fish { --g: url(/glyphs/fishing.png); } .g-mine { --g: url(/glyphs/mining.png); }
.g-forage { --g: url(/glyphs/foraging.png); } .g-tailor { --g: url(/glyphs/tailoring.png); } .g-attack { --g: url(/glyphs/attack.png); }
.g-steps { --g: url(/glyphs/steps.png); }

/* Title sticker, as on the sign-in screen */
.title-sticker { margin: 0; transform: rotate(-4deg); transform-origin: left center; }
.title-sticker > span { position: relative; display: inline-flex; align-items: center; gap: 20px; padding: 20px 36px 20px 24px; background: var(--travel); border: 4px solid var(--outline); box-shadow: 8px 8px 0 var(--outline); transform: skewX(-10deg); }
.title-sticker .dots { position: absolute; right: 0; top: 0; width: 45%; height: 100%; }
.title-sticker img { position: relative; width: 72px; height: 72px; border-radius: 50%; border: 4px solid var(--outline); transform: skewX(10deg); background: var(--bg); }
.title-sticker b { position: relative; display: inline-block; transform: skewX(10deg); font-family: var(--display); font-weight: 700; font-size: clamp(52px, 9vw, 96px); line-height: 1; color: var(--on-accent); }

/* Header */
.site-header { background: var(--panel); border-bottom: 4px solid var(--outline); font-family: var(--ui); }
.site-header .wrap { min-height: 72px; padding-top: 12px; padding-bottom: 12px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.brand img { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--outline); }
.brand span { font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 32px; }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; font-weight: 500; font-size: 17px; }
.nav a:not(.btn) { color: var(--ink); text-decoration: none; }
.nav a:not(.btn):hover, .nav a[aria-current="page"] { color: var(--travel); text-decoration: underline; text-underline-offset: 4px; }

/* Hero: the painted map in four 22 s shots, fading through the page colour between them */
.hero { position: relative; height: 820px; overflow: hidden; border-bottom: 4px solid var(--outline); container-type: size; }
.hero-map { position: absolute; left: 0; top: 0; width: 398.12cqh; height: 175.69cqh; background: url(/map.jpg) 0 0 / 100% 100%; animation: pan 88s linear -3s infinite; will-change: transform; }
.hero-veil { position: absolute; inset: 0; background: var(--bg); animation: veil 88s linear -3s infinite; }
.hero-wash { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(250, 243, 221, 0.3) 0%, rgba(250, 243, 221, 0.3) 42%, rgba(250, 243, 221, 0.9) 64%, var(--bg) 84%); }
.hero .wrap { position: relative; height: 100%; padding-top: 72px; padding-bottom: 56px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 32px; }
.hero-copy { display: flex; flex-direction: column; gap: 24px; max-width: 640px; }
.hero-line { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(30px, 4.4vw, 44px); line-height: 1.12; text-wrap: balance; }
.hero-sub { margin: 0; font-size: 20px; line-height: 30px; max-width: 34em; }
@keyframes pan {
  0% { transform: translate(calc(50cqw - 91.25cqh), calc(50cqh - 123.75cqh)); }
  24.99% { transform: translate(calc(50cqw - 160cqh), calc(50cqh - 111.25cqh)); }
  25% { transform: translate(calc(50cqw - 178.75cqh), calc(50cqh - 123.75cqh)); }
  49.99% { transform: translate(calc(50cqw - 116.25cqh), calc(50cqh - 67.5cqh)); }
  50% { transform: translate(calc(50cqw - 172.5cqh), calc(50cqh - 105cqh)); }
  74.99% { transform: translate(calc(50cqw - 260cqh), calc(50cqh - 55cqh)); }
  75% { transform: translate(calc(50cqw - 235cqh), calc(50cqh - 51.88cqh)); }
  100% { transform: translate(calc(50cqw - 306.88cqh), calc(50cqh - 64.38cqh)); }
}
@keyframes veil {
  0% { opacity: 1; } 1.4% { opacity: 0; } 23.6% { opacity: 0; } 25% { opacity: 1; } 26.4% { opacity: 0; }
  48.6% { opacity: 0; } 50% { opacity: 1; } 51.4% { opacity: 0; } 73.6% { opacity: 0; } 75% { opacity: 1; }
  76.4% { opacity: 0; } 98.6% { opacity: 0; } 100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .hero-map, .hero-veil { animation: none; } .hero-veil { opacity: 0; } }

/* Store buttons */
.get { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.play-badge { display: inline-block; line-height: 0; }
.play-badge img { height: 84px; width: auto; margin: -12px; }

/* Sections */
.section { padding-top: 112px; padding-bottom: 112px; }
.split { display: flex; flex-wrap: wrap; align-items: center; gap: 72px; }
.split > .media { flex: 1 1 300px; display: flex; justify-content: center; }
.split > .text { flex: 1 1 420px; min-width: 0; }
.split--rev { flex-wrap: wrap-reverse; }
.phone-shot { width: 320px; height: auto; border: 4px solid var(--outline); border-radius: 28px; box-shadow: 10px 10px 0 var(--shadow); transform: rotate(-2deg); background: var(--panel); }
.stats { display: flex; flex-wrap: wrap; gap: 16px; padding-top: 8px; }
.stat { flex: 1 1 200px; padding: 16px 20px; display: flex; flex-direction: column; gap: 4px; }
.stat-num { display: flex; align-items: center; gap: 8px; color: var(--travel); font-family: var(--ui); font-weight: 500; font-size: 32px; line-height: 40px; font-variant-numeric: lining-nums tabular-nums; }
.stat-num .glyph { width: 22px; height: 22px; }

.band-slate { background: var(--s-bg); color: var(--s-ink); border-top: 4px solid var(--s-outline); border-bottom: 4px solid var(--s-outline); }
.band-slate .eyebrow { color: var(--s-travel); }
.band-slate .s-dim { color: var(--s-dim); }
.watch { width: 320px; height: 320px; max-width: 100%; border-radius: 50%; background: var(--s-outline); padding: 14px; box-shadow: 8px 8px 0 var(--s-ink); }
.watch-face { width: 100%; height: 100%; border-radius: 50%; border: 14px dashed var(--s-travel); background: var(--s-bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.watch-num { display: flex; align-items: center; gap: 6px; color: var(--s-travel); }
.watch-num b { font-family: var(--ui); font-weight: 500; font-size: 52px; line-height: 56px; color: var(--s-ink); font-variant-numeric: lining-nums tabular-nums; }
.watch-place { font-family: var(--ui); font-weight: 500; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--s-travel); }
.watch-to { font-size: 16px; line-height: 20px; color: var(--s-dim); }

.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px; }
.strip { height: 340px; border: 4px solid var(--outline); border-radius: 4px; box-shadow: 8px 8px 0 var(--shadow); background: url(/map.jpg) 62% 22% / auto 260%; }

.band-hi { background: var(--panel-hi); border-top: 4px solid var(--outline); padding-top: 96px; padding-bottom: 96px; }
.band-hi .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; }
.band-hi .text { flex: 1 1 420px; min-width: 0; }

/* Inner pages */
.page { padding-top: 80px; padding-bottom: 112px; }
.page .wrap { display: flex; flex-direction: column; gap: 48px; }
.page-head { display: flex; flex-direction: column; gap: 16px; max-width: 720px; }
.cols { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 56px; }
.cols > .main { flex: 999 1 560px; min-width: 0; }
.cols > .side { flex: 1 1 280px; max-width: 360px; }

.map-band { background: url(/map.jpg) 30% 70% / auto 240%; border-bottom: 4px solid var(--outline); }
.map-band > div { background: linear-gradient(180deg, rgba(250, 243, 221, 0.25), rgba(250, 243, 221, 0.95) 78%); padding-top: 96px; padding-bottom: 48px; }

.factsheet { padding: 24px; display: flex; flex-direction: column; gap: 20px; }
.factsheet h2 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 28px; line-height: 32px; }
.factsheet dl { margin: 0; display: grid; gap: 16px; font-size: 17px; line-height: 24px; }
.factsheet dt { font-family: var(--ui); font-weight: 500; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); }
.factsheet dd { margin: 2px 0 0; }
.list { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }
.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 20px; }
.shots figure { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.shots img { width: 100%; height: auto; border: 3px solid var(--outline); border-radius: 20px; box-shadow: 4px 4px 0 var(--shadow); }
.shots figcaption, .caption { font-size: 15px; line-height: 20px; color: var(--ink-dim); }
.placeholder { max-width: 100%; border: 3px dashed var(--ink-faint); border-radius: 20px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px; font-family: var(--ui); font-weight: 500; font-size: 14px; color: var(--ink-dim); }
.placeholder--phone { aspect-ratio: 1080 / 2253; }
.placeholder--watch { aspect-ratio: 1; border-radius: 50%; }
.logos { display: flex; flex-wrap: wrap; align-items: center; gap: 32px; }
.logos > div { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.logo-icon { width: 128px; height: 128px; border-radius: 50%; border: 4px solid var(--outline); }
.title-sticker--small > span { padding: 14px 28px; box-shadow: 6px 6px 0 var(--outline); }
.title-sticker--small b { font-size: 52px; }

.faq { display: flex; flex-direction: column; gap: 16px; }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; font-family: var(--ui); font-weight: 500; font-size: 19px; line-height: 26px; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-size: 28px; line-height: 1; color: var(--travel); transition: transform 0.15s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 20px 20px; }
.faq p { margin: 0; }
.panel-slate { background: var(--s-bg); color: var(--s-ink); border: 4px solid var(--s-outline); border-radius: 4px; box-shadow: 6px 6px 0 var(--shadow); padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.panel-slate h2 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 28px; line-height: 32px; }
.panel-slate a { color: var(--s-travel); font-family: var(--ui); font-weight: 500; font-size: 19px; overflow-wrap: anywhere; }

.summary { max-width: 720px; padding: 24px 28px; display: flex; flex-direction: column; gap: 12px; }
.summary h2 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 32px; }
.toc { flex: 1 1 220px; max-width: 260px; display: flex; flex-direction: column; gap: 10px; font-family: var(--ui); font-weight: 500; font-size: 16px; line-height: 22px; }
.toc span { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); }
.toc a { color: var(--ink); text-decoration: none; }
.toc a:hover { color: var(--travel); text-decoration: underline; text-underline-offset: 4px; }
.doc { max-width: 720px; display: flex; flex-direction: column; gap: 20px; }
.doc h2 { margin: 16px 0 0; font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 36px; scroll-margin-top: 24px; }
.doc h2:first-child { margin-top: 0; }
.doc h3 { margin: 0; font-family: var(--ui); font-weight: 500; font-size: 20px; line-height: 28px; }
.doc p, .doc ul { margin: 0; }
.doc ul { padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }

.narrow { max-width: 640px; }
.delete-box { padding: 28px; display: flex; flex-direction: column; gap: 20px; }
.delete-box h2 { margin: 0; font-family: var(--ui); font-weight: 500; font-size: 20px; line-height: 28px; }
.delete-box .done { font-family: var(--display); font-weight: 700; font-size: 28px; line-height: 32px; color: var(--gather); }
.delete-box .who { font-family: var(--ui); font-weight: 500; font-size: 20px; line-height: 28px; overflow-wrap: anywhere; }
.delete-box .error { color: var(--combat); font-family: var(--ui); font-weight: 500; }
.row { display: flex; flex-wrap: wrap; gap: 16px; }
.linkish { align-self: flex-start; background: none; border: none; padding: 0; font: inherit; color: var(--travel); text-decoration: underline; cursor: pointer; }
#gsi-button { min-height: 44px; }

.lost { background: url(/map.jpg) 100% 4% / auto 300%; border-bottom: 4px solid var(--outline); }
.lost > div { min-height: 520px; background: linear-gradient(90deg, var(--bg) 0%, rgba(250, 243, 221, 0.94) 46%, rgba(250, 243, 221, 0.2) 100%); padding-top: 96px; padding-bottom: 96px; }
.lost .wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.lost h1 { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(40px, 6vw, 64px); line-height: 1.08; max-width: 12em; text-wrap: balance; }

/* Footer */
.site-footer { background: var(--s-bg); color: var(--s-ink); border-top: 4px solid var(--s-outline); font-size: 16px; line-height: 24px; }
.site-footer .wrap { padding-top: 56px; padding-bottom: 40px; display: flex; flex-direction: column; gap: 40px; }
.foot-cols { display: flex; flex-wrap: wrap; gap: 40px 48px; }
.foot-cols > div, .foot-cols > nav { display: flex; flex-direction: column; gap: 8px; }
.foot-cols > :first-child { flex: 1 1 260px; gap: 12px; }
.foot-cols > :not(:first-child) { flex: 0 1 220px; }
.foot-cols h2 { margin: 0; font-family: var(--ui); font-weight: 500; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--s-travel); }
.site-footer a { color: var(--s-ink); text-decoration: none; }
.site-footer a:hover { color: var(--s-travel); text-decoration: underline; text-underline-offset: 4px; }
.site-footer .brand { color: var(--s-ink); }
.site-footer .brand img { border-color: var(--s-outline); }
.site-footer .s-dim { color: var(--s-dim); }
.legal { border-top: 2px solid var(--s-hair); padding-top: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: 14px; line-height: 20px; color: var(--s-dim); }

@media (max-width: 600px) {
  .hero { height: 760px; }
  .hero .wrap { padding-top: 48px; }
  .section { padding-top: 80px; padding-bottom: 80px; }
  .split { gap: 48px; }
  .strip { height: 240px; }
  /* On a phone the copy fills more of the hero, so the wash reaches full cream sooner. */
  .hero-wash { background: linear-gradient(180deg, rgba(250, 243, 221, 0.3) 0%, rgba(250, 243, 221, 0.3) 26%, rgba(250, 243, 221, 0.92) 44%, var(--bg) 60%); }
  .lost > div { background: linear-gradient(180deg, rgba(250, 243, 221, 0.94), rgba(250, 243, 221, 0.86)); }
}