/* SafariRate — North Star: soft 3D on cold-pressed paper. Charcoal + warm amber. No green.
   Contrast (WCAG, computed 2026-10-12):
     ink #2A2521 on paper 12.9 · on rice 14.2 · on paper-deep 11.3
     ink-soft #5C534A on paper 6.4 · on paper-deep 5.6
     amber-deep #8A5410 on paper 5.3 (text) · terracotta #A2492A on paper 5.1 (text)
     umber #6B4A2F on paper 6.8
     rice #FAF7F2 on night 15.7 · amber-bright #F2B457 on night 9.1 · ash #B7AC9E on night 7.5
     sky #8DB4CC on night 7.6 · amber #D08A2E on night 5.9
     ink on amber fill #D08A2E 5.3 (primary button)
   amber (#D08A2E) is a FILL on paper (2.4 as text) — never small text on paper. */

@font-face { font-family: "Chakra Petch"; font-weight: 400; font-display: swap; src: url(/fonts/chakrapetch-400.woff2) format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-weight: 500; font-display: swap; src: url(/fonts/chakrapetch-500.woff2) format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-weight: 600; font-display: swap; src: url(/fonts/chakrapetch-600.woff2) format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-weight: 700; font-display: swap; src: url(/fonts/chakrapetch-700.woff2) format("woff2"); }
@font-face { font-family: "Zen Old Mincho"; font-weight: 500; font-display: swap; src: url(/fonts/zenoldmincho-500.woff2) format("woff2"); }
@font-face { font-family: "Zen Old Mincho"; font-weight: 700; font-display: swap; src: url(/fonts/zenoldmincho-700.woff2) format("woff2"); }
@font-face { font-family: "Azeret Mono"; font-weight: 400 700; font-display: swap; src: url(/fonts/azeretmono.woff2) format("woff2"); }

:root {
  --paper: #F2ECE3; --rice: #FAF7F2; --paper-deep: #E6DDD0; --stone: #D3C8B8;
  --ink: #2A2521; --ink-soft: #5C534A; --umber: #6B4A2F;
  --amber: #D08A2E; --amber-deep: #8A5410; --amber-bright: #F2B457; --amber-wash: #F6E3C4;
  --terracotta: #A2492A; --sky: #8DB4CC; --sky-wash: #DCE8EF;
  --night: #211D1A; --night-soft: #302A25; --ash: #B7AC9E;
  --raise: 7px 7px 18px rgba(110, 88, 62, .22), -7px -7px 18px rgba(255, 255, 255, .85);
  --raise-sm: 4px 4px 10px rgba(110, 88, 62, .22), -4px -4px 10px rgba(255, 255, 255, .85);
  --press: inset 4px 4px 9px rgba(110, 88, 62, .22), inset -4px -4px 9px rgba(255, 255, 255, .9);
  --r: 22px; --r-sm: 14px;
  --display: "Zen Old Mincho", Georgia, serif;
  --ui: "Chakra Petch", system-ui, sans-serif;
  --mono: "Azeret Mono", ui-monospace, monospace;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .35 0 0 0 0 .27 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh; color: var(--ink); font: 400 17px/1.6 var(--ui);
  background: var(--grain), radial-gradient(1200px 600px at 15% -10%, var(--rice), transparent 60%), var(--paper);
  background-attachment: fixed;
}
img { max-width: 100%; display: block; }
a { color: var(--amber-deep); text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.12; margin: 0; letter-spacing: -.01em; }
.label { font: 600 14px/1.3 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }
:focus-visible { outline: 3px solid var(--amber-deep); outline-offset: 3px; border-radius: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* buttons — raised; pressed in when active */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px;
  font: 600 17px/1 var(--ui); color: var(--ink); text-decoration: none; cursor: pointer;
  background: var(--paper); border: 0; border-radius: 999px; box-shadow: var(--raise);
  transition: box-shadow .25s ease, transform .25s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active, .btn[aria-pressed="true"] { box-shadow: var(--press); transform: none; }
.btn-amber { background: var(--amber); color: var(--ink); box-shadow: 6px 6px 16px rgba(138, 84, 16, .35), -6px -6px 16px rgba(255, 255, 255, .8); }
.btn-amber:active { box-shadow: inset 4px 4px 10px rgba(110, 60, 8, .4), inset -3px -3px 8px rgba(255, 220, 160, .5); }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: 15px; }
.btn-quiet { box-shadow: none; background: transparent; text-decoration: underline; text-underline-offset: 4px; padding: 0 8px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.icon-btn { width: 44px; height: 44px; padding: 0; border-radius: 50%; display: inline-grid; place-items: center; background: var(--paper); border: 0; box-shadow: var(--raise-sm); color: var(--ink); cursor: pointer; font: 600 18px/1 var(--ui); }
.icon-btn:active { box-shadow: var(--press); }

.card { background: var(--paper); border-radius: var(--r); box-shadow: var(--raise); padding: 28px; }
.well { background: var(--paper); border-radius: var(--r-sm); box-shadow: var(--press); }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 14px; border-radius: 999px; font: 600 14px/1 var(--ui); background: var(--paper-deep); color: var(--ink); }
.chip-draft { background: var(--amber-wash); color: var(--amber-deep); }
.chip-live { background: var(--night); color: var(--amber-bright); }
.chip-sample { background: var(--sky-wash); color: var(--ink); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }

input, select, textarea {
  font: 500 17px/1.3 var(--ui); color: var(--ink); background: var(--paper); border: 0; border-radius: 12px;
  box-shadow: var(--press); padding: 13px 15px; min-height: 48px; width: 100%;
}
input::placeholder { color: var(--ink-soft); }
label.field { display: grid; gap: 8px; font: 600 15px/1.3 var(--ui); color: var(--ink-soft); }

/* top bar */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); font: 700 21px/1 var(--display); }
.brand-mark { width: 40px; height: 40px; border-radius: 12px; background: var(--paper); box-shadow: var(--raise-sm); display: grid; place-items: center; }
.top-links { display: flex; align-items: center; gap: 10px; }

/* hero — SPLIT: words on solid ground, the photograph untouched beside them. No scrim. */
.hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 0; border-radius: 30px; overflow: hidden; box-shadow: var(--raise); background: var(--rice); margin-top: 8px; }
.hero-words { padding: clamp(28px, 5vw, 64px); display: flex; flex-direction: column; justify-content: center; gap: 22px; }
.hero h1 { font-size: clamp(40px, 5.4vw, 72px); color: var(--ink); }
.hero p.lede { font-size: clamp(18px, 1.6vw, 21px); color: var(--ink-soft); margin: 0; max-width: 34ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }
.hero-photo { position: relative; min-height: 520px; }
.hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-note { font-size: 15px; color: var(--ink-soft); }
.credit { position: absolute; right: 12px; bottom: 10px; font: 500 12px/1 var(--ui); color: var(--rice); background: var(--night); padding: 6px 9px; border-radius: 8px; }

/* four verbs */
.verbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin: 56px 0; }
.verb { padding: 26px; }
.verb .n { font: 500 15px/1 var(--mono); color: var(--amber-deep); }
.verb h3 { font-size: 28px; margin: 14px 0 8px; }
.verb p { margin: 0; color: var(--ink-soft); }

/* live calculator */
.calc { display: grid; grid-template-columns: 1fr 1.2fr; gap: 28px; align-items: stretch; margin: 0 0 64px; }
.calc-copy h2 { font-size: clamp(32px, 3.6vw, 48px); margin: 10px 0 14px; }
.calc-copy p { color: var(--ink-soft); margin: 0 0 12px; }
.calc-box { display: grid; gap: 18px; }
.calc-row { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; padding: 12px 18px; }
.calc-row .was { color: var(--ink-soft); text-decoration: line-through; font-size: 17px; }
.calc-row .now { font-size: 22px; font-weight: 700; }
.pct { display: flex; align-items: center; gap: 14px; }
input[type=range] { box-shadow: none; padding: 0; background: transparent; accent-color: var(--amber-deep); min-height: 44px; }
input[type=range]:focus-visible { outline-offset: 6px; }
.pct output { font: 700 28px/1 var(--mono); min-width: 4.5ch; text-align: right; }

/* the dark band */
.band-night { background: var(--night); color: var(--rice); padding: 72px 0; }
.band-night h2 { color: var(--rice); font-size: clamp(32px, 3.6vw, 46px); }
.band-night p { color: var(--ash); }
.band-night .label { color: var(--amber-bright); }
.promises { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 36px; }
.promise { background: var(--night-soft); border-radius: var(--r); padding: 26px; box-shadow: 6px 6px 16px rgba(0,0,0,.35), -4px -4px 12px rgba(255,255,255,.04); }
.promise h3 { color: var(--amber-bright); font-size: 24px; margin-bottom: 8px; }
.promise p { margin: 0; color: var(--ash); }

.photo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 64px 0; }
.photo-card { border-radius: var(--r); overflow: hidden; box-shadow: var(--raise); background: var(--rice); }
.photo-card img { aspect-ratio: 16/10; object-fit: cover; width: 100%; height: auto; }
.photo-card div { padding: 20px 24px; }
.photo-card h3 { font-size: 24px; margin-bottom: 6px; }
.photo-card p { margin: 0; color: var(--ink-soft); }

.cta-end { text-align: center; padding: 72px 0 80px; }
.cta-end h2 { font-size: clamp(34px, 4vw, 54px); margin-bottom: 14px; }
.cta-end p { color: var(--ink-soft); margin: 0 auto 26px; max-width: 46ch; }

footer.foot { background: var(--night); color: var(--ash); padding: 40px 0; font-size: 15px; }
footer.foot a { color: var(--amber-bright); }
footer.foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; }

/* registration */
.start { display: grid; grid-template-columns: 1fr 1fr; min-height: 100dvh; }
.start-photo { position: relative; }
.start-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.start-main { display: flex; flex-direction: column; padding: 24px clamp(16px, 5vw, 64px) 40px; }
.start-form { margin: auto 0; display: grid; gap: 18px; max-width: 460px; width: 100%; }
.start-form h1 { font-size: clamp(34px, 4vw, 48px); }
.progress { display: grid; gap: 10px; }
.progress-track { height: 12px; border-radius: 999px; box-shadow: var(--press); background: var(--paper); overflow: hidden; }
.progress-fill { height: 100%; background: var(--amber); border-radius: 999px; transition: width .6s ease; }
.progress-text { font: 600 15px/1.3 var(--ui); color: var(--ink-soft); }
.code-input { font: 700 30px/1 var(--mono); letter-spacing: .4em; text-align: center; }
.err { color: var(--terracotta); font-weight: 600; margin: 0; min-height: 1.4em; }
.choice-grid { display: grid; gap: 14px; }
.choice { display: grid; gap: 4px; text-align: left; padding: 20px 22px; border-radius: var(--r-sm); background: var(--paper); box-shadow: var(--raise-sm); border: 0; cursor: pointer; font: 500 16px/1.4 var(--ui); color: var(--ink-soft); }
.choice b { font: 700 19px/1.2 var(--ui); color: var(--ink); }
.choice:active { box-shadow: var(--press); }

/* editor */
.ed-top { position: sticky; top: 0; z-index: 20; background: var(--grain), var(--paper); border-bottom: 1px solid var(--stone); }
.ed-top .wrap { display: flex; align-items: center; gap: 14px; padding: 12px 0; flex-wrap: wrap; }
.ed-title { display: grid; gap: 2px; margin-right: auto; min-width: 0; }
.ed-title input { font: 700 24px/1.15 var(--display); padding: 6px 10px; min-height: 40px; box-shadow: none; background: transparent; }
.ed-title input:focus { box-shadow: var(--press); }
.ed-title small { font-size: 14px; color: var(--ink-soft); padding-left: 10px; }
.ed-status { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ed-grid { display: grid; grid-template-columns: 290px 1fr; gap: 26px; padding: 26px 0 120px; align-items: start; }
.ed-side { position: sticky; top: 92px; display: grid; gap: 18px; }
.ed-side .card { padding: 20px; }
.ed-side h2 { font-size: 21px; margin-bottom: 10px; }
.side-btns { display: grid; gap: 12px; }
.side-btns .btn { width: 100%; justify-content: flex-start; }
.ed-doc { display: grid; gap: 26px; min-width: 0; }
.banner { display: flex; gap: 14px; align-items: flex-start; padding: 16px 20px; border-radius: var(--r-sm); background: var(--sky-wash); color: var(--ink); }
.banner.warn { background: var(--amber-wash); }
.banner b { display: block; }

.board { padding: 24px; }
.board-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.board-head input { font: 700 24px/1.2 var(--display); max-width: 360px; box-shadow: none; background: transparent; padding: 6px 8px; }
.board-head input:focus { box-shadow: var(--press); }
.grid-scroll { overflow-x: auto; }
table.rates { border-collapse: separate; border-spacing: 10px 10px; margin: -10px; min-width: 100%; }
table.rates th { text-align: left; vertical-align: bottom; font: 600 15px/1.3 var(--ui); color: var(--ink-soft); }
table.rates th input { font: 700 16px/1.2 var(--ui); padding: 8px 10px; min-height: 42px; color: var(--ink); min-width: 150px; }
table.rates td.occ { white-space: nowrap; }
table.rates td.occ input { font-weight: 600; min-width: 180px; width: calc(100% - 46px); }
table.rates td.price input { font: 600 19px/1 var(--mono); text-align: right; min-width: 118px; }
table.rates td.price input.changed { background: var(--amber-wash); }
table.rates .del { width: 40px; height: 40px; font-size: 18px; box-shadow: none; background: transparent; color: var(--ink-soft); }
table.rates .del:hover { color: var(--terracotta); }
.season-dates { display: block; font: 500 13px/1.3 var(--mono); color: var(--ink-soft); margin-top: 6px; cursor: pointer; text-decoration: underline dotted; background: none; border: 0; padding: 0; text-align: left; }
.board-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }

.tiers { padding: 24px; }
.tier-row { display: grid; grid-template-columns: 1fr 120px 44px; gap: 12px; align-items: center; margin-bottom: 12px; }
.tier-row input.pctin { font-family: var(--mono); text-align: right; }
.list-edit textarea { min-height: 130px; resize: vertical; line-height: 1.5; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* sheets (modal) */
.sheet-back { position: fixed; inset: 0; background: rgba(33, 29, 26, .45); z-index: 50; display: grid; place-items: center; padding: 16px; }
.sheet-back[hidden] { display: none; }
.sheet { background: var(--grain), var(--paper); border-radius: 26px; box-shadow: 0 30px 80px rgba(0,0,0,.35); width: min(860px, 100%); max-height: calc(100dvh - 32px); overflow: auto; padding: 28px; }
.sheet h2 { font-size: 30px; margin-bottom: 8px; }
.sheet-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; margin-top: 22px; position: sticky; bottom: -28px; padding: 16px 0 4px; background: var(--paper); }
.diff { width: 100%; border-collapse: collapse; margin-top: 14px; }
.diff th, .diff td { padding: 10px 8px; border-bottom: 1px solid var(--stone); text-align: left; font-size: 16px; }
.diff td.n { text-align: right; font-family: var(--mono); }
.diff td.up { color: var(--amber-deep); font-weight: 700; }
.diff td.down { color: var(--terracotta); font-weight: 700; }
.drop { display: grid; place-items: center; gap: 10px; text-align: center; padding: 40px 20px; border-radius: var(--r); box-shadow: var(--press); cursor: pointer; }
.drop.over { background: var(--amber-wash); }
.drop b { font: 700 20px/1.2 var(--ui); }
.note-list { margin: 10px 0 0; padding-left: 20px; color: var(--ink-soft); }
.preview-frame { width: 100%; height: 60vh; border: 0; border-radius: var(--r-sm); background: var(--rice); }
.share-doc { background: var(--rice); border-radius: var(--r-sm); padding: 24px; box-shadow: var(--raise-sm); }
.share-doc .addressed { font: 600 14px/1.3 var(--ui); color: var(--terracotta); letter-spacing: .06em; text-transform: uppercase; }
.version-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--stone); flex-wrap: wrap; }
.version-row b { font-family: var(--mono); }
.version-row span { color: var(--ink-soft); font-size: 15px; margin-right: auto; }

.toast { visibility: hidden; opacity: 0; position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(140%); background: var(--night); color: var(--rice); padding: 16px 22px; border-radius: 16px; font-weight: 600; z-index: 60; transition: transform .45s ease; max-width: calc(100% - 32px); box-shadow: 0 16px 40px rgba(0,0,0,.3); }
.toast.show { visibility: visible; opacity: 1; transform: translateX(-50%) translateY(0); }
.toast b { color: var(--amber-bright); }

.dock { display: none; }

@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; }
  .hero-photo { min-height: 300px; order: -1; }
  .verbs { grid-template-columns: 1fr 1fr; }
  .calc, .promises, .photo-pair { grid-template-columns: 1fr; }
  .ed-grid { grid-template-columns: 1fr; }
  .ed-side { position: static; display: none; }
  .dock { display: flex; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 30; gap: 8px; padding: 10px; border-radius: 22px; background: var(--grain), var(--paper); box-shadow: 0 12px 34px rgba(60, 44, 28, .28); padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .dock .btn { flex: 1; min-height: 52px; padding: 0 8px; font-size: 15px; flex-direction: column; gap: 3px; }
  .start { grid-template-columns: 1fr; }
  .start-photo { min-height: 180px; order: -1; }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .verbs { grid-template-columns: 1fr; margin: 36px 0; }
  .two-col { grid-template-columns: 1fr; }
  .card, .board, .tiers { padding: 18px; }
  .top-links .hide-sm { display: none; }
  .ed-title input { font-size: 21px; }
  /* the price grid becomes one card per occupancy row */
  table.rates, table.rates tbody, table.rates tr, table.rates td { display: block; margin: 0; }
  table.rates thead { display: none; }
  table.rates tr { padding: 14px; border-radius: var(--r-sm); box-shadow: var(--raise-sm); margin-bottom: 14px; }
  table.rates td.price { display: grid; grid-template-columns: 1fr 130px; align-items: center; gap: 10px; margin-top: 10px; }
  table.rates td.price::before { content: attr(data-season); font: 600 15px/1.3 var(--ui); color: var(--ink-soft); }
  table.rates td.price input { min-width: 0; }
  table.rates td.occ { display: flex; gap: 8px; align-items: center; }
  table.rates td.occ input { min-width: 0; }
  .ed-top { position: static; }
  .ed-top .wrap { display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; }
  .ed-status { grid-column: 1 / -1; }
  .ed-status .chip { min-height: 30px; font-size: 14px; padding: 0 12px; }
  .ed-status .chip-sample { display: none; }
  .ed-top #undo, .ed-top #redo, .ed-top #publish { display: none; }
  .ed-title small { padding-left: 10px; }
  .tier-row { grid-template-columns: 1fr 96px 44px; }
  .sheet { padding: 20px; border-radius: 22px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }