/* GetMeLost landing - Landscape + blaze, ratified 2026-10-01 (103_brand tokens.json).
   Blaze lives only in the mark's thread (the SVGs); it is never a CSS colour here. */
:root {
  --coal: #1B1A1C;
  --wet-slate: #374444;
  --lichen: #DBDCCE;
  --fir: #84958C;
  --juniper: #677369;
  --limestone: #C4BAA4;
  --sandstone: #BB9D7A;
  --bark: #94765A;
  --loam: #6A5C47;
  --rust: #67412F;
  --snowfield: #F8FAF7;
  --serif: "Playfair Display", Georgia, serif;
  --sans: "Instrument Sans", system-ui, sans-serif;
  --mono: "Space Mono", ui-monospace, monospace;
  --s1: 5px; --s2: 8px; --s3: 13px; --s4: 21px; --s5: 34px; --s6: 55px; --s7: 89px;
}

* { box-sizing: border-box; }
html { background: var(--lichen); }
body {
  margin: 0;
  background: var(--lichen);
  color: var(--coal);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  overflow-x: hidden;
}
img, svg { max-width: 100%; }
a { color: var(--wet-slate); text-underline-offset: 3px; }
a:hover { color: var(--coal); }
p { margin: 0 0 var(--s3); max-width: 62ch; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--s5); }

/* wordmark: GetMe in Playfair 600, Lost in Playfair italic 400 */
.wm { font-family: var(--serif); font-weight: 600; color: var(--wet-slate); letter-spacing: -.01em; line-height: 1; }
.wm em { font-style: italic; font-weight: 400; }

/* nav */
nav {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--s2) var(--s4);
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--juniper);
}
.nav-brand, .nav-back { font-size: 28px; text-decoration: none; }
.nav-links { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); font-family: var(--mono); font-size: 14px; letter-spacing: .04em; }
.nav-links a { text-decoration: none; }
.nav-links a:hover { text-decoration: underline; }
.stamp {
  font-family: var(--mono); font-size: 14px; letter-spacing: .06em; color: var(--wet-slate);
  border: 2px solid var(--coal); padding: 3px 11px; background: var(--snowfield); display: inline-block;
}
.label { font-family: var(--mono); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--loam); margin: 0 0 var(--s3); }

/* home hero */
.hero { padding: var(--s7) 0 var(--s6); display: grid; grid-template-columns: 1.618fr 1fr; gap: var(--s6); align-items: center; }
.hero h1 { font-family: var(--serif); font-size: clamp(52px, 9vw, 112px); line-height: 1; margin: 0 0 var(--s4); color: var(--wet-slate); font-weight: 600; letter-spacing: -.02em; }
.hero h1 em { font-style: italic; font-weight: 400; }
.hero .lede { font-family: var(--serif); font-size: clamp(22px, 2.6vw, 30px); line-height: 1.3; color: var(--wet-slate); max-width: 28ch; margin-bottom: var(--s4); }
.hero-mark img { width: 100%; height: auto; display: block; }

section { padding: var(--s6) 0; border-top: 1px solid var(--juniper); }
h2 { font-family: var(--serif); font-weight: 600; color: var(--wet-slate); font-size: clamp(32px, 4.4vw, 52px); line-height: 1.08; margin: 0 0 var(--s4); max-width: 22ch; letter-spacing: -.01em; }
h2 em { font-style: italic; font-weight: 400; }

/* product cards */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.card { background: var(--snowfield); padding: var(--s5); border-radius: 3px; display: flex; flex-direction: column; gap: var(--s2); }
.card.hnd { background: var(--limestone); }
.card .mk { width: 120px; height: auto; display: block; margin-bottom: var(--s2); }
.card h3 { font-family: var(--serif); font-weight: 600; font-size: 28px; line-height: 1.1; margin: 0; color: var(--wet-slate); }
.card p { margin: 0; }
.card .tagline { font-family: var(--serif); font-size: 21px; line-height: 1.3; color: var(--wet-slate); }
.card .spec { font-family: var(--mono); font-size: 14px; color: var(--loam); }
.card.hnd .spec { color: var(--coal); }
.card .row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-bottom: var(--s2); }
.status { font-family: var(--mono); font-size: 14px; letter-spacing: .04em; color: var(--coal); }
.more { margin-top: auto; padding-top: var(--s3); font-family: var(--mono); font-size: 14px; letter-spacing: .04em; }

/* voice */
.voice { display: grid; grid-template-columns: 1.618fr 1fr; gap: var(--s6); align-items: start; }
.voice .big { font-family: var(--serif); font-size: clamp(28px, 3.6vw, 44px); line-height: 1.15; color: var(--wet-slate); margin: 0; max-width: 20ch; }
.facts { list-style: none; margin: 0; padding: 0; }
.facts li { padding: var(--s3) 0; border-top: 1px solid var(--juniper); }
.facts li span { display: block; font-family: var(--mono); font-size: 14px; color: var(--loam); letter-spacing: .06em; text-transform: uppercase; }

/* product page */
.product { padding: var(--s7) 0 var(--s6); display: grid; grid-template-columns: 1.618fr 1fr; gap: var(--s6); align-items: center; }
.product h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(44px, 7vw, 84px); line-height: 1.02; margin: 0 0 var(--s3); color: var(--wet-slate); letter-spacing: -.02em; }
.product h1 em { font-style: italic; font-weight: 400; }
.product .tagline { font-family: var(--serif); font-size: clamp(22px, 2.6vw, 30px); line-height: 1.3; color: var(--wet-slate); margin-bottom: var(--s4); max-width: 28ch; }
.product .pm img { width: 100%; height: auto; display: block; }
.soon { display: inline-block; font-family: var(--mono); font-size: 14px; letter-spacing: .06em; border: 2px solid var(--wet-slate); color: var(--wet-slate); padding: 3px 13px; border-radius: 30px; }
.plate { background: var(--snowfield); padding: var(--s5); border-radius: 3px; }
.plate.lichen { background: var(--limestone); }
.plate .ground-note { font-family: var(--mono); font-size: 14px; color: var(--loam); margin: var(--s3) 0 0; }

footer {
  padding: var(--s6) 0 var(--s7);
  border-top: 1px solid var(--juniper);
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: baseline;
  font-family: var(--mono); font-size: 14px; color: var(--wet-slate);
}
footer .wm { font-size: 21px; }
footer { align-items: center; }
.ft-brand { display: inline-flex; align-items: flex-start; gap: 2px; font-size: 21px; }
.ft-mark { width: 3.64em; height: auto; display: block; }
.ft-brand .wm { margin-top: .09em; }

/* header lockup: the mark first, its thread leading into the wordmark */
.lockup { display: inline-flex; align-items: flex-start; gap: 2px; font-size: 28px; text-decoration: none; }
.lk-mark { width: 3.64em; height: auto; display: block; }
.lockup .wm { margin-top: .09em; }
nav { align-items: center; }

/* section break: a rule leaving through the mark's thread */
.voice-sec { border-top: 0; padding-top: 0; }
.thread-rule { display: flex; align-items: flex-start; margin-bottom: var(--s6); }
.thread-rule img { width: 90px; height: auto; flex: none; display: block; }
.thread-rule span { flex: 1; height: 1px; background: var(--juniper); margin-top: 16px; margin-left: var(--s3); }
footer a { text-decoration: none; }
footer a:hover { text-decoration: underline; }

@media (max-width: 860px) {
  .wrap { padding: 0 var(--s4); }
  .hero, .voice, .product { grid-template-columns: 1fr; gap: var(--s5); padding-top: var(--s5); }
  .hero-mark, .product .pm { max-width: 280px; }
  .grid { grid-template-columns: 1fr; }
  .card { padding: var(--s4); }
  section { padding: var(--s5) 0; }
}