/*
 * kora.css, koratemple.com by day. 2026-10-25.
 *
 * Chase chose "The Frosted Window" (design-previews/website-2026-10/
 * board-day.html, direction B) and asked for the website in Day only. These
 * are the app's Lunar Glass tokens from src/ui/kora.css, carried over so the
 * site and the app read as the same hand:
 *  - Glass is for what she reads or touches, and on a photograph it is frosted
 *    ivory, so the words stay readable without darkening the image.
 *  - Gold fills one thing per screen: the App Store door.
 *  - Instrument Serif is the temple's voice; the system sans is everything else.
 *  - Nothing under 14px; body 17px; every target 44px or more.
 * No borders, no hard rules. A division is a light that fades at its edges.
 */
@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/instrument-serif.woff2) format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/instrument-serif-italic.woff2) format('woff2'); }

:root {
  --field: #F5EFE4;            /* moon ivory */
  --surface: #FFFDF8;
  --ink: #1F1D2B;              /* charcoal */
  --ink-2: rgba(31, 29, 43, .84);
  --ink-3: rgba(31, 29, 43, .7);
  --gold: #715411;             /* gold as text, AA on ivory */
  --track: rgba(31, 29, 43, .16);
  --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Helvetica Neue', sans-serif;
  --gutter: 22px;
  color-scheme: light;
}
@media (min-width: 900px) { :root { --gutter: 56px; } }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--field); color: var(--ink); font: 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
img { display: block; max-width: 100%; }
em { font-style: italic; }
:focus-visible { outline: 2px solid #A57C1E; outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.serif { font-family: var(--serif); font-weight: 400; letter-spacing: -.005em; }
.label { font: 650 14px/1.2 var(--sans); letter-spacing: .13em; text-transform: uppercase; color: var(--gold); }

/* ── glass ── */
.window {
  background: linear-gradient(160deg, rgba(255, 253, 248, .74), rgba(255, 250, 240, .5));
  -webkit-backdrop-filter: blur(28px) saturate(115%); backdrop-filter: blur(28px) saturate(115%);
  box-shadow: inset 0 1.5px 1px #fff, inset 0 -1px 1px rgba(255, 255, 255, .5), inset 1px 0 1px rgba(255, 255, 255, .4), 0 30px 70px rgba(60, 40, 10, .18);
}
.pane {
  background: linear-gradient(160deg, rgba(255, 252, 246, .86), rgba(255, 248, 236, .66));
  -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
  box-shadow: inset 0 1px 1px #fff, 0 14px 36px rgba(70, 45, 10, .1);
}
.glass {
  background: linear-gradient(160deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .42));
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 1px #fff, 0 8px 22px rgba(70, 45, 10, .12);
}

/* ── doors ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 56px; padding: 0 26px; border: 0; border-radius: 28px;
  font: 600 17px/1 var(--sans); color: var(--ink); text-decoration: none; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.btn:active { transform: scale(.98); }
.btn.gold { background: linear-gradient(180deg, #F4DC97, #DAB75B 58%, #C49D42); color: #1B1406; box-shadow: inset 0 1px 1px rgba(255, 255, 255, .7), 0 10px 24px rgba(201, 160, 70, .3); }
.btn[disabled] { opacity: .5; cursor: default; }
.doors { display: flex; flex-direction: column; gap: 12px; }
.doors .btn { width: 100%; }
@media (min-width: 900px) { .doors { flex-direction: row; } .doors .btn { width: auto; } }
.price { margin-top: 14px; font-size: 15px; color: var(--ink-3); }
.quiet { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; color: var(--ink-2); text-underline-offset: 4px; text-decoration-color: rgba(31, 29, 43, .3); }

/* ── header and footer ── */
.top { position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: max(18px, env(safe-area-inset-top)) var(--gutter) 0; min-height: 64px; }
.mark { display: inline-flex; align-items: center; min-height: 44px; font: 600 15px/1 var(--sans); letter-spacing: .42em; text-decoration: none; color: var(--ink); }
.top .mark { padding: 0 14px 0 18px; border-radius: 22px; }   /* a glass capsule, so it reads over any photograph */
/* over the busiest water the capsules need more frost than glass elsewhere,
   measured 2026-10-25: the mark fell to 2.1:1 over dark waves at .7 */
.top .glass { background: linear-gradient(160deg, rgba(255, 253, 248, .9), rgba(255, 250, 240, .78)); }
/* small words on a window: the photograph shows through, so they take the
   full ink rather than the softer tones, and the label a deeper gold */
.window .price, .window .quiet { color: var(--ink); }
.window .label { color: #5A4209; }
/* tonight's moon is information, not a control: words with a soft halo, never a glass button */
.top .sky { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; color: var(--ink);
  text-shadow: 0 0 10px rgba(245, 239, 228, .9), 0 0 2px rgba(245, 239, 228, .9); }
.top .sky .moon { flex: none; }
.foot { padding: 56px var(--gutter) max(48px, env(safe-area-inset-bottom)); text-align: center; color: var(--ink-2); }
.foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 8px; margin: 18px 0 14px; }
.foot nav a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 10px; font-size: 15px; text-decoration: none; color: var(--ink-2); }
.foot nav a:hover { color: var(--ink); }
.foot .small { font-size: 14px; color: var(--ink-3); max-width: 34em; margin: 0 auto; }
/* the policy, last on every page (Chase, 2026-10-25) */
.legal { margin-top: 18px; text-align: center; }
.legal a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; font-size: 15px; color: var(--ink-2); text-underline-offset: 4px; }
.glow { height: 1px; width: min(560px, 80%); margin: 0 auto; background: radial-gradient(closest-side, rgba(31, 29, 43, .22), transparent); }

/* ── a photograph, graded by day ── */
.photo { position: absolute; inset: 0; overflow: hidden; }
.photo img, .photo video { width: 100%; height: 100%; object-fit: cover; filter: brightness(1.03) saturate(1.04); }

/* ── an inner page: a short band of the shore, then the words on ivory ── */
.band { position: relative; height: 210px; }
.band .photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(245, 239, 228, .35), rgba(245, 239, 228, 0) 40%, var(--field)); }
@media (min-width: 900px) { .band { height: 300px; } }
.page { position: relative; max-width: 680px; margin: -64px auto 0; padding: 0 var(--gutter) 24px; }
@media (min-width: 900px) { .page { padding: 0 0 24px; } }
.page h1 { font: 400 clamp(46px, 12vw, 76px)/1 var(--serif); letter-spacing: -.01em; }
.page h1 em { font-style: italic; }
.page .meta { margin: 12px 0 26px; color: var(--ink-3); font-size: 15px; }
.page h2 { font: 400 clamp(28px, 6.4vw, 34px)/1.12 var(--serif); margin: 36px 0 10px; }
.page p, .page li { color: var(--ink-2); }
.page .label { color: var(--gold); }
.page p + p { margin-top: 14px; }
.page ul { margin: 12px 0 0 1.1em; }
.page li + li { margin-top: 8px; }
.page ul + p, .page ol + p { margin-top: 16px; }
.page strong, .page b { color: var(--ink); font-weight: 600; }
.page .card { border-radius: 28px; padding: 26px 24px; }
.page .card + .card { margin-top: 14px; }
.page a { text-underline-offset: 3px; }
/* a link inside a sentence keeps its line, and gains a 44pt reach above and below it */
.page p a, .foot .small a, .page .meta a { padding: 14px 0; }

/* ── fields, for the forms that remain ── */
.field { display: block; font: 650 14px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin: 22px 0 8px; }
.input { width: 100%; min-height: 56px; border: 0; border-radius: 18px; padding: 15px 18px; font: 17px/1.4 var(--sans); color: var(--ink);
  background: rgba(255, 255, 255, .78); box-shadow: inset 0 1px 2px rgba(60, 40, 10, .08), 0 1px 0 #fff; outline: none; }
.input:focus { box-shadow: inset 0 1px 2px rgba(60, 40, 10, .08), 0 0 0 2px rgba(165, 124, 30, .55); }
.input::placeholder { color: rgba(31, 29, 43, .5); }
textarea.input { min-height: 120px; resize: vertical; }
select.input { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 24px) 50%, calc(100% - 18px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }

/* motion that breathes, and stills when asked */
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.rise { animation: rise .8s cubic-bezier(.2, .7, .2, 1) both; }
@media (prefers-reduced-motion: reduce) { .rise { animation: none; } .btn:active { transform: none; } }