/* ============================================================
   octn — shared design system
   Palette, base reset, nav, eyebrow, footer, reveal animation.
   Page-specific styles live in each page's inline <style>.
   ============================================================ */

:root{
  --paper:#efe9dc;
  --paper-2:#e7e0d1;
  --ink:#2a2520;
  --ink-soft:#5c5346;
  --haze:#8f8576;
  --bronze:#9a7635;
  --bronze-deep:#7d5f29;
  --wine:#8c4a52;
  --line:rgba(42,37,32,.14);
  --max:1180px;
}

/* ── reset / base ── */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter','Noto Serif TC',sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  line-height:1.6;
}
body::before{
  content:"";
  position:fixed; inset:0;
  background:
    radial-gradient(900px 600px at 80% 6%, rgba(154,118,53,.07), transparent 62%),
    radial-gradient(820px 700px at 10% 94%, rgba(140,74,82,.06), transparent 62%);
  pointer-events:none; z-index:0;
}
.wrap{max-width:var(--max); margin:0 auto; padding:0 32px; position:relative; z-index:1}

/* floating golden motes canvas (driven by octn.js) */
#motes{ position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none }

/* ── nav ── */
nav{
  position:fixed; top:0; left:0; right:0; z-index:5;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 32px; transition:background .4s ease, backdrop-filter .4s ease, border-color .4s ease;
  border-bottom:1px solid transparent;
}
nav.scrolled{ background:rgba(239,233,220,.8); backdrop-filter:blur(14px); border-bottom:1px solid var(--line) }
.brand{
  font-family:'Cormorant Garamond',serif; font-size:24px; font-weight:600;
  letter-spacing:.02em; color:var(--ink); text-decoration:none;
}
.brand i{ color:var(--bronze); font-style:normal }

/* ── eyebrow (small uppercase label; .kw keeps wordmarks lowercase) ── */
.eyebrow{ font-size:12px; letter-spacing:.42em; text-transform:uppercase; color:var(--bronze-deep); margin-bottom:30px }
.eyebrow .kw{ text-transform:none }

/* ── footer ── */
footer{ border-top:1px solid var(--line); padding:40px 0 60px; text-align:center }
footer .fb{ font-family:'Cormorant Garamond',serif; font-size:26px; color:var(--ink) }
footer .fb i{ color:var(--bronze); font-style:normal }

/* ── reveal on scroll (driven by octn.js) ── */
.rv{ opacity:0; transform:translateY(34px); filter:blur(7px); transition:opacity 1.1s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1), filter 1.1s cubic-bezier(.16,1,.3,1) }
.rv.in{ opacity:1; transform:none; filter:blur(0) }
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}

@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;filter:none;transition:none}
  html{scroll-behavior:auto}
}

/* ── shared responsive ── */
@media(max-width:760px){
  .wrap{ padding:0 24px }
  nav{ padding:18px 22px }
}

:focus-visible{ outline:2px solid var(--bronze); outline-offset:3px; border-radius:4px }