/* LECTERN — app.css. Design width 1920 (DESIGN.md). Root scales 100vw/1920 -> proportional 1280-2560; fixed 16px + mobile layout below 1024. */
@import url('https://fonts.googleapis.com/css2?family=Vollkorn:wght@500;600&family=Gelasio:wght@400;500;600&family=Kreon:wght@400;500;600&display=swap');

:root{
  --paper:#0A3612;
  --paper-warm:#F1D46C;
  --crimson:#B02441;
  --ink:#F1E6C6;
  --muted:rgba(241,230,198,.7);
  --wood:#4a3627;
  --wood-dark:#3a2418;
  --card:#f4e3cd;
  --hairline:#CFCBAE;

  --nav-bg:#05451c;
  --nav-border:#e9dcc0;
  --footer-border:#7f9b78;

  --font-display:Vollkorn,serif;
  --font-body:Gelasio,serif;
  --font-mono:Kreon,serif;

  --ease:cubic-bezier(.22,.61,.36,1);

  /* border table (mockup/v1/BORDER_TABLE.md, DESIGN.md sec4b) -- widths already css px @1920 */
  --rule-nav-w:max(1px,1.1px);
  --rule-footer-w:max(1px,1.1px);
  --rule-card-w:max(1px,4.5px);
  --rule-card-stamp-w:max(1px,4.7px);
  --rule-index-row-w:max(1px,3.1px);
  --rule-panel-w:max(1px,2.9px);
  --rule-panel-frame-w:max(1px,4.6px);
  --rule-table-row-w:max(1px,2.2px);
  --rule-ask-row-w:max(1px,3.3px);
  --rule-step-row-w:max(1px,2.3px);
  --rule-chip-w:max(1px,2.3px);

  --r-sm:.125rem;
  --r-md:.25rem;
}

html{font-size:calc(100vw / 1920 * 16);scroll-behavior:smooth}
@media (max-width:1023px){html{font-size:16px}}

*,*::before,*::after{box-sizing:border-box}
html,body{background:var(--paper)}
body{color:var(--ink);font-family:var(--font-body);font-size:1rem;line-height:1.5;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.08;margin:0 0 .75em;color:var(--ink)}
.num,[data-cell],.mono,.tab-nums{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
a{color:inherit;text-decoration:none}
:where(button,input,select,textarea){border:0;background:none;font:inherit;color:inherit;-webkit-appearance:none;appearance:none}
button{cursor:pointer}
::selection{background:var(--paper-warm);color:var(--wood-dark)}
img,svg,video,canvas{max-width:100%;display:block}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms !important;transition-duration:.001ms !important}}

/* ---- background grain (DESIGN.md sec4, extremely subtle, never photographic) ---- */
body{background-image:radial-gradient(circle at 6px 6px,rgba(241,230,198,.03) 1px,transparent 1.4px);background-size:14px 14px}

/* ---- one page frame (LUAT 53): one container, one ground, used by every route ---- */
.page{width:100%;padding:0 1.5rem 0 2.75rem;box-sizing:border-box}
main{background:var(--paper)}
main.is-leaving{opacity:.001;transition:opacity .18s var(--ease)}
main .route{padding-top:2rem;padding-bottom:4rem}

/* ---- borders (LUAT 56 rule #23): classes only, zero ad-hoc border/outline in routes ---- */
.rule-card{border:var(--rule-card-w) solid var(--card);border-radius:var(--r-md);background:var(--card);color:var(--wood-dark)}
.rule-card--stamp{border:var(--rule-card-stamp-w) solid var(--paper-warm);border-radius:var(--r-md)}
.rule-index-row{border-bottom:var(--rule-index-row-w) solid var(--hairline)}
.rule-index-row:last-child{border-bottom:0}
.rule-panel{border:var(--rule-panel-w) solid var(--hairline);border-radius:0}
.rule-panel--frame{border:var(--rule-panel-frame-w) solid var(--paper);border-radius:var(--r-md)}
.rule-table-row{border-bottom:var(--rule-table-row-w) solid var(--hairline)}
.rule-table-row:last-child{border-bottom:0}
.rule-ask-row{border:var(--rule-ask-row-w) solid var(--hairline)}
.rule-step-row{border:var(--rule-step-row-w) solid var(--hairline)}
.rule-chip{border:var(--rule-chip-w) solid var(--hairline);border-radius:var(--r-sm)}

/* ---- motion helpers (DESIGN.md sec10 -- pull-and-settle / shelve reveal) ---- */
[data-reveal]{opacity:0;transform:translateY(.75rem);transition:opacity .3s var(--ease),transform .3s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal-group]>*{opacity:0;transform:translateY(.75rem);transition:opacity .28s var(--ease),transform .28s var(--ease)}
[data-reveal-group].is-in>*{opacity:1;transform:none}
[data-reveal-group].is-in>*:nth-child(1){transition-delay:0ms}
[data-reveal-group].is-in>*:nth-child(2){transition-delay:30ms}
[data-reveal-group].is-in>*:nth-child(3){transition-delay:60ms}
[data-reveal-group].is-in>*:nth-child(4){transition-delay:90ms}
[data-reveal-group].is-in>*:nth-child(5){transition-delay:120ms}
[data-reveal-group].is-in>*:nth-child(6){transition-delay:150ms}
[data-reveal-group].is-in>*:nth-child(n+7){transition-delay:180ms}
[data-pull]{transition:transform .32s var(--ease)}
[data-pull].is-pulled{transform:translateY(-.5rem) rotate(-4deg)}
[data-settle]{animation:settle .4s var(--ease)}
@keyframes settle{0%{transform:translateY(-.75rem) rotate(-4deg)}70%{transform:translateY(.1rem) rotate(0deg)}100%{transform:translateY(0) rotate(0deg)}}
@media (prefers-reduced-motion:reduce){[data-reveal],[data-reveal-group]>*{opacity:1!important;transform:none!important;transition:none!important}[data-pull],[data-settle]{animation:none!important;transition:none!important}}

/* ---- N4 nav (verbatim structure/text from mockup/v1/chrome/nav.html, px->rem at build width 1920) ---- */
[data-chrome="nav"]{box-sizing:border-box;height:6rem;background:var(--nav-bg);color:var(--ink);border-top:1px solid var(--nav-border);border-bottom:1px solid var(--nav-border);display:grid;grid-template-columns:1fr 22.5rem 1fr;align-items:center;padding:0 4.75rem;font-family:var(--font-body);font-size:1.0625rem;overflow:hidden;position:sticky;top:0;z-index:40}
[data-chrome="nav"] *{box-sizing:border-box}
[data-chrome="nav"] nav{display:flex;align-items:center;gap:3.25rem;white-space:nowrap}
[data-chrome="nav"] .left{justify-content:flex-start}
[data-chrome="nav"] .right{justify-content:flex-end;gap:2.75rem}
[data-chrome="nav"] a{color:inherit;text-decoration:none}
[data-chrome="nav"] a.is-active{text-decoration:underline;text-underline-offset:.625rem;text-decoration-thickness:1px}
[data-chrome="nav"] .brand{display:flex;align-items:center;justify-content:center;gap:1rem;font:600 2.625rem/1 var(--font-display);letter-spacing:.02em}
[data-chrome="nav"] .brand img{width:3.125rem;height:3.125rem;object-fit:contain}
[data-chrome="nav"] .social{padding-left:1.5rem;border-left:1px solid var(--nav-border)}
.nav-mobile-btn{display:none}
.nav-drawer{display:none}
@media (max-width:1023px){
  [data-chrome="nav"]{grid-template-columns:1fr auto;height:auto;min-height:4.5rem;padding:.75rem 1.25rem}
  [data-chrome="nav"] nav.left,[data-chrome="nav"] nav.right{display:none}
  [data-chrome="nav"] .brand{justify-content:flex-start;font-size:1.75rem}
  [data-chrome="nav"] .brand img{width:2.25rem;height:2.25rem}
  .nav-mobile-btn{display:block;border:1px solid var(--nav-border);border-radius:.25rem;padding:.5rem .75rem;font:600 .8125rem var(--font-body);color:var(--ink)}
  .nav-drawer{display:none;position:fixed;inset:4.5rem 0 0 0;z-index:39;background:var(--nav-bg);padding:1.5rem 1.25rem;flex-direction:column;gap:1.25rem;overflow-y:auto}
  .nav-drawer.is-open{display:flex}
  .nav-drawer a{font:500 1.0625rem var(--font-body);color:var(--ink);padding:.5rem 0;border-bottom:1px solid rgba(233,220,192,.25)}
}

/* ---- F2 footer (user review R1: rebuilt as brand + three link columns + base line, same tokens as the nav) ---- */
[data-chrome="footer"]{box-sizing:border-box;background:var(--nav-bg);color:var(--ink);border-top:var(--rule-footer-w) solid var(--nav-border);padding:3rem 4.75rem 0;font:400 .9375rem/1.5 var(--font-body)}
[data-chrome="footer"] a{color:inherit;text-decoration:none}
.ft-top{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:4rem;align-items:start;padding-bottom:2.5rem}
.ft-mark{display:inline-flex;align-items:center;gap:.875rem;font:600 2rem/1 var(--font-display);letter-spacing:.02em}
.ft-mark img{width:2.75rem;height:2.75rem;object-fit:contain}
.ft-brand p{margin:1rem 0 0;max-width:28rem;color:var(--muted)}
.ft-brand .ft-ca{margin-top:.75rem;font:400 .875rem/1.4 var(--font-mono);letter-spacing:.02em;color:var(--ink)}
.ft-brand .ft-ca b{font-weight:600;color:var(--paper-warm);margin-right:.375rem}
.ft-col{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;padding-top:.375rem}
.ft-col h3{margin:0 0 .5rem;font:500 .8125rem/1.2 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--paper-warm)}
.ft-col a{transition:color .15s var(--ease)}
.ft-col a:hover,.ft-mark:hover{color:var(--paper-warm)}
.ft-col a.is-active{text-decoration:underline;text-underline-offset:.375rem;text-decoration-thickness:1px}
.ft-rooms{display:grid;grid-template-columns:auto auto;column-gap:2.5rem;row-gap:.5rem;justify-content:start}
.ft-rooms h3{grid-column:1/-1}
.ft-base{display:flex;justify-content:space-between;align-items:center;gap:2rem;border-top:var(--rule-footer-w) solid var(--footer-border);padding:1.125rem 0 1.375rem;font:400 .8125rem/1.4 var(--font-mono);letter-spacing:.03em;color:var(--muted)}
.ft-base .set{flex:none}
@media (max-width:1023px){
  [data-chrome="footer"]{padding:2rem 1.25rem 0}
  .ft-top{grid-template-columns:1fr 1fr;gap:2rem 1.5rem}
  .ft-brand{grid-column:1/-1}
  .ft-base{flex-direction:column;align-items:flex-start;gap:.5rem}
}

@media (max-width:389px){
  .page{padding:0 1rem}
  main .route{padding-top:1.25rem}
}