/* Self-hosted Google Fonts (latin subset), SIL Open Font License. */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/hanken-grotesk.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/newsreader-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(fonts/newsreader.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Tokens: the LodgeOS product palette (forest, linen, meal hues). */
:root {
  --forest-900: #0f2e22;
  --forest-800: #163a2b;
  --forest-700: #1f4d3a;
  --forest-600: #2a6249;
  --forest-100: #e7efe9;
  --canvas: #f6f3ec;
  --surface: #ffffff;
  --sand-200: #ece6db;
  --border: #e7e1d6;
  --ink-900: #1a221d;
  --ink-700: #384039;
  --ink-500: #5e6b63;
  --breakfast: #d8a13b;
  --lunch: #c0673c;
  --dinner: #6b4a6e;

  --serif: "Newsreader", Georgia, serif;
  --sans: "Hanken Grotesk", system-ui, sans-serif;
  --ease: cubic-bezier(.22, .8, .24, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .5, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink-900);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
h1, h2, h3, h4, .demo-q { text-wrap: balance; }
p, dd, li { text-wrap: pretty; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--breakfast); outline-offset: 3px; border-radius: 4px; }

.wrap { width: min(1160px, 100% - 32px); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--surface); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 16px; }

h2 {
  font: 500 clamp(32px, 4.2vw, 48px)/1.08 var(--serif);
  letter-spacing: -.015em;
  max-width: 18ch;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px;
  border-radius: 999px; font-weight: 600; font-size: 16px; text-decoration: none;
  transition: background .2s, color .2s, border-color .2s;
}
.btn-light { background: var(--canvas); color: var(--forest-800); }
.btn-line { border: 1.5px solid rgba(246, 243, 236, .35); color: var(--canvas); }
.btn-dark { background: var(--forest-700); color: var(--canvas); }
.btn-outline { border: 1.5px solid var(--border); color: var(--forest-700); }

/* Hover only where a real pointer exists; touch gets press feedback instead. */
@media (hover: hover) {
  .btn-light:hover { background: #fff; }
  .btn-line:hover { border-color: var(--canvas); }
  .btn-dark:hover { background: var(--forest-800); }
  .btn-outline:hover { border-color: var(--forest-600); }
  .nav a:hover { opacity: 1; }
  .plans button:hover { border-color: rgba(246, 243, 236, .6); }
}
button, .btn { -webkit-tap-highlight-color: transparent; }
button:active, .btn:active { transform: scale(.97); }

/* Header */
.top { position: absolute; inset: 0 0 auto; z-index: 5; color: var(--canvas); }
.top-in { display: flex; align-items: center; gap: 32px; height: 76px; }
.mark { display: inline-flex; align-items: center; gap: 11px; font: 500 26px/1 var(--serif); letter-spacing: -.01em; text-decoration: none; }
.logo { width: 30px; height: 30px; flex: none; }
.nav { display: flex; gap: 28px; margin-left: auto; font-size: 15px; }
.nav a { text-decoration: none; opacity: .8; }
.lang { display: flex; border: 1px solid rgba(246, 243, 236, .3); border-radius: 999px; padding: 3px; }
.lang button {
  background: none; border: 0; min-width: 40px; min-height: 32px; border-radius: 999px;
  font-size: 13px; font-weight: 700; color: rgba(246, 243, 236, .7);
}
.lang button[aria-pressed="true"] { background: var(--canvas); color: var(--forest-800); }

/* Hero */
.hero {
  background: radial-gradient(120% 90% at 85% 10%, var(--forest-700), var(--forest-900) 70%);
  color: var(--canvas);
  padding: 140px 0 96px;
  overflow: hidden;
}
.hero-in { display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: center; }
h1 {
  font: 400 clamp(44px, 6.4vw, 82px)/1.0 var(--serif);
  letter-spacing: -.025em;
  max-width: 12ch;
}
.lede { margin-top: 28px; max-width: 46ch; font-size: 19px; color: rgba(246, 243, 236, .78); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.status { display: flex; align-items: center; gap: 10px; margin-top: 40px; font-size: 14px; color: rgba(246, 243, 236, .6); }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--breakfast); box-shadow: 0 0 0 0 rgba(216, 161, 59, .6); animation: pulse 2.4s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(216, 161, 59, 0); } 100% { box-shadow: 0 0 0 0 rgba(216, 161, 59, 0); } }

/* Hero entrance: one orchestrated sequence */
.hero-copy > * { opacity: 0; transform: translateY(18px); animation: rise .9s var(--ease) forwards; }
.hero-copy > :nth-child(2) { animation-delay: .12s; }
.hero-copy > :nth-child(3) { animation-delay: .24s; }
.hero-copy > :nth-child(4) { animation-delay: .5s; }
.demo { opacity: 0; transform: translateY(28px) rotate(-1.2deg); animation: rise 1.1s .3s var(--ease) forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* The board-plan demo */
.demo-q { font: italic 400 19px/1.35 var(--serif); color: rgba(246, 243, 236, .85); margin-bottom: 14px; }
.plans { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.plans button {
  border: 1px solid rgba(246, 243, 236, .25); background: transparent; color: var(--canvas);
  min-height: 40px; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 600;
  transition: background .2s, color .2s, border-color .2s;
}
.plans button[aria-pressed="true"] { background: var(--breakfast); border-color: var(--breakfast); color: var(--forest-900); }

.sheet {
  background: var(--canvas); color: var(--ink-900); border-radius: 18px; padding: 18px 18px 14px;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .45), 0 0 0 1px rgba(0, 0, 0, .04);
}
.grid {
  display: grid; grid-template-columns: 92px repeat(4, 1fr);
  grid-auto-rows: minmax(52px, auto); align-items: center; column-gap: 0;
}
.day { font-size: 13px; font-weight: 700; color: var(--ink-500); text-align: center; align-self: end; padding-bottom: 6px; }
.row-lbl { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink-700); }
.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dot.b { background: var(--breakfast); } .dot.l { background: var(--lunch); } .dot.d { background: var(--dinner); }
.grid > :nth-child(n+6) { border-top: 1px dashed var(--sand-200); height: 100%; }
.grid > .row-lbl, .grid > .cell { display: flex; align-items: center; }
.cell { justify-content: center; position: relative; }

.stay-track { grid-column: 2 / 6; position: relative; height: 100%; display: flex; align-items: center; }
.stay {
  position: absolute; left: 12.5%; width: 75%; height: 40px;
  display: flex; flex-direction: column; justify-content: center; padding: 0 12px;
  background: var(--forest-700); color: var(--canvas); border-radius: 10px; line-height: 1.15;
  transform-origin: left center; transform: scaleX(0);
  transition: transform 1s var(--ease), background .4s;
}
.stay strong { font-size: 14px; } .stay span { font-size: 12px; opacity: .75; }
.stay > * { opacity: 0; transition: opacity .4s .7s; }
.demo.play .stay { transform: scaleX(1); }
.demo.play .stay > * { opacity: 1; }

/* A cover chip: dropped from the stay bar into the meal row */
.chip {
  display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px;
  border-radius: 999px; font-size: 12.5px; font-weight: 700; color: #fff;
  background: var(--c); white-space: nowrap;
  opacity: 0; transform: translateY(var(--from, -40px)) scale(.5);
  transition: opacity .25s, transform .3s var(--ease);
}
/* Contrast: dark text on amber, a deeper terracotta behind white text (WCAG AA). */
.cell[data-c^="b"] .chip { color: var(--forest-900); }
.cell.on .chip {
  opacity: 1; transform: none;
  transition: opacity .3s var(--delay, 0s), transform .6s var(--delay, 0s) var(--ease-spring);
}
.count { margin-top: 14px; font-size: 15px; color: rgba(246, 243, 236, .8); min-height: 1.6em; }
.count strong { font: 500 22px/1 var(--serif); color: var(--canvas); }

/* Who */
.who { padding: 120px 0 40px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; }
.who-head p { margin-top: 24px; max-width: 52ch; color: var(--ink-700); font-size: 18px; }
.people { display: grid; gap: 28px; align-content: start; padding-top: 10px; }
.people dt { font: 500 22px/1.2 var(--serif); }
.people dd { color: var(--ink-500); margin-top: 4px; max-width: 46ch; }

/* Features */
.features { padding: 100px 0 40px; }
.group { display: grid; grid-template-columns: 220px 1fr; gap: 32px; padding: 44px 0; }
.group + .group { border-top: 1px solid var(--border); }
.features h2 + .group { margin-top: 32px; }
.group h3 { align-self: start; padding-top: 6px; font: 600 15px/1.4 var(--sans); color: var(--ink-500); display: flex; align-items: center; gap: 10px; }
.group h3::before { content: ""; width: 22px; height: 6px; border-radius: 3px; background: var(--g); }
.group ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.group h4 { font: 500 23px/1.2 var(--serif); letter-spacing: -.005em; margin-bottom: 8px; }
.group p { color: var(--ink-700); font-size: 16px; }

/* Events */
.events { padding: 100px 0 120px; display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: center; }
.ev-copy p { margin-top: 20px; color: var(--ink-700); max-width: 46ch; font-size: 18px; }
.seg { display: inline-flex; margin-top: 32px; padding: 4px; border-radius: 999px; background: var(--sand-200); }
.seg button { border: 0; background: none; min-height: 40px; padding: 0 18px; border-radius: 999px; font-weight: 600; font-size: 15px; color: var(--ink-700); transition: background .2s, color .2s; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink-900); box-shadow: 0 1px 3px rgba(40, 33, 20, .15); }

.floor {
  position: relative; aspect-ratio: 16 / 10; border-radius: 18px;
  background:
    radial-gradient(circle, rgba(31, 77, 58, .12) 1px, transparent 1.5px) 0 0 / 22px 22px,
    var(--surface);
  border: 1px solid var(--border);
  transition: background-color .8s;
  overflow: hidden;
}
.floor::before {
  content: ""; position: absolute; inset: 0; background: var(--dinner); opacity: 0;
  transition: opacity .8s;
}
.floor.wedding::before { opacity: .07; }
.floor-area { position: absolute; left: 16px; bottom: 12px; font-size: 13px; font-weight: 600; color: var(--ink-500); }
.t {
  position: absolute;
  left: calc(var(--x) * 1%); top: calc(var(--y) * 1%);
  width: calc(var(--w) * 1%); height: calc(var(--h) * 1%);
  display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--forest-700);
  background: var(--forest-100); border: 1.5px solid var(--forest-600); border-radius: 8px;
  transition: left .9s var(--ease), top .9s var(--ease), width .9s var(--ease), height .9s var(--ease),
              border-radius .9s, background .6s, border-color .6s, color .6s;
  transition-delay: calc(var(--i, 0) * 70ms);
}
.t.r { border-radius: 50%; }
.floor.wedding .t {
  left: calc(var(--ex) * 1%); top: calc(var(--ey) * 1%);
  width: calc(var(--ew) * 1%); height: calc(var(--eh) * 1%);
  border-radius: 3px; background: color-mix(in srgb, var(--dinner) 14%, white);
  border-color: var(--dinner); color: var(--dinner);
}

/* Principles */
.rules { background: var(--forest-800); color: var(--canvas); padding: 110px 0; }
.rules-in { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; }
.rules h2 { font-size: clamp(36px, 5vw, 60px); }
.rules ul { display: grid; gap: 28px; }
.rules li { font-size: 19px; line-height: 1.5; color: rgba(246, 243, 236, .82); padding-left: 28px; position: relative; max-width: 50ch; }
.rules li::before { content: ""; position: absolute; left: 0; top: .6em; width: 12px; height: 2px; background: var(--breakfast); }

/* Roadmap */
.next { padding: 120px 0; display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; }
.next-head p { margin-top: 20px; color: var(--ink-700); max-width: 40ch; font-size: 18px; }
.path { position: relative; display: grid; gap: 28px; padding-left: 32px; }
.path::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--forest-600), var(--sand-200)); }
.path li { position: relative; }
.path li::before {
  content: ""; position: absolute; left: -32px; top: 7px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--canvas); border: 2px solid var(--forest-600);
}
.path h3 { font: 500 22px/1.25 var(--serif); }
.path p { color: var(--ink-500); margin-top: 4px; max-width: 56ch; }

/* Maker */
.maker { background: var(--surface); border-top: 1px solid var(--border); padding: 110px 0; }
.maker-in { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: end; }
.maker h2 { max-width: 14ch; }
.maker p { color: var(--ink-700); font-size: 18px; max-width: 46ch; margin-bottom: 28px; }
.maker-cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* Footer */
.foot { background: var(--forest-900); color: rgba(246, 243, 236, .7); padding: 36px 0; font-size: 14px; }
.foot-in { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.foot .mark { color: var(--canvas); font-size: 22px; }
.foot a { color: var(--canvas); }
.legal { display: flex; gap: 20px; }
.legal a { color: rgba(246, 243, 236, .7); }

/* Responsive */
@media (max-width: 980px) {
  .hero-in, .who, .events, .rules-in, .next, .maker-in { grid-template-columns: 1fr; gap: 40px; }
  .group { grid-template-columns: 1fr; gap: 20px; }
  .group ul { grid-template-columns: 1fr 1fr; }
  .nav { display: none; }
  .lang { margin-left: auto; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .top-in { height: 68px; }
  .mark { font-size: 23px; gap: 9px; }
  .logo { width: 28px; height: 28px; }
  .lang button { min-height: 38px; min-width: 44px; }

  .hero { padding: 100px 0 56px; }
  .hero-in { gap: 44px; }
  h1 { font-size: clamp(40px, 11.5vw, 52px); }
  .lede { margin-top: 20px; font-size: 17px; line-height: 1.55; }
  .hero-cta { margin-top: 28px; }
  .hero-cta .btn { flex: 1 1 auto; justify-content: center; }
  .status { margin-top: 24px; }
  .demo-q { font-size: 18px; }
  .plans { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .plans button { min-height: 44px; padding: 0 8px; font-size: 13.5px; }

  .who { padding: 72px 0 8px; gap: 36px; }
  .features { padding-top: 64px; }
  .next { padding: 72px 0; gap: 36px; }
  .events { padding: 56px 0 72px; gap: 36px; }
  .rules, .maker { padding: 72px 0; }
  .rules-in, .maker-in { gap: 32px; }
  .who-head p, .ev-copy p, .next-head p, .maker p { font-size: 16.5px; }
  .rules li { font-size: 17px; padding-left: 24px; }
  .group { padding: 36px 0; }
  .group ul { grid-template-columns: 1fr; gap: 24px; }
  .group h4 { font-size: 21px; }
  .people dt, .path h3 { font-size: 20px; }

  .seg { display: flex; margin-top: 28px; }
  .seg button { flex: 1; min-height: 44px; }

  .maker-cta .btn { flex: 1 1 auto; justify-content: center; }
  .foot-in { flex-direction: column; align-items: flex-start; gap: 12px; }
  .legal a { display: inline-flex; align-items: center; min-height: 44px; }

  .sheet { padding: 12px 10px 10px; }
  .grid { grid-template-columns: 74px repeat(4, 1fr); grid-auto-rows: minmax(46px, auto); }
  .row-lbl { font-size: 12.5px; gap: 6px; }
  .chip { padding: 0 7px; font-size: 11.5px; height: 24px; }
  .chip .chip-name { display: none; }
  .stay { padding: 0 8px; }
}
@media (max-width: 360px) {
  .plans button { font-size: 12.5px; padding: 0 4px; white-space: nowrap; }
  .grid { grid-template-columns: 66px repeat(4, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .hero-copy > *, .demo { opacity: 1; transform: none; }
}

/* Secondary pages: legal notes and 404 */
.doc-top { border-bottom: 1px solid var(--border); }
.doc-top .top-in { height: 72px; }
.doc-top .mark { color: var(--ink-900); font-size: 22px; }
.doc-top .back { margin-left: auto; font-size: 15px; color: var(--ink-500); text-decoration: none; }
.doc-top .back:hover { color: var(--ink-900); }
.doc { width: min(720px, 100% - 32px); margin: 0 auto; padding: 72px 0 96px; }
.doc h1 { font-size: clamp(40px, 6vw, 56px); max-width: none; color: var(--ink-900); }
.doc .updated { margin-top: 12px; color: var(--ink-500); font-size: 15px; }
.doc .jump { margin-top: 8px; font-size: 15px; }
.doc h2 { font-size: 28px; max-width: none; margin: 48px 0 12px; }
.doc section + section { margin-top: 88px; padding-top: 56px; border-top: 1px solid var(--border); }
.doc p, .doc ul { margin-bottom: 14px; color: var(--ink-700); }
.doc ul { list-style: disc; padding-left: 22px; }
.doc li { margin-bottom: 6px; }
.doc a { color: var(--forest-700); }
.notfound { min-height: calc(100vh - 73px); display: grid; place-content: center; text-align: center; padding: 48px 16px; }
.notfound h1 { font-size: clamp(44px, 7vw, 72px); color: var(--ink-900); margin: 0 auto; }
.notfound p { margin: 16px auto 32px; color: var(--ink-700); max-width: 40ch; }
.notfound .btn { justify-self: center; }