/* ONDO — full site. Static, no CDN. Palette: C2 Hanji + C4 cool hero intro. */

:root{
  --paper:#F7F3EA;        /* page background (hanji white), cool end */
  --paper-warm:#F7EFE0;   /* warmed background, warm end (scroll temperature) */
  --band:#FCFAF4;         /* emphasis band */
  --band-warm:#FBF5EA;    /* warmed band */
  --ink:#26231F;          /* 먹 ink — all text + buttons */
  --hair:rgba(38,35,31,0.12);
  --warmth:0;             /* 0 cool -> 1 warm. main.js interpolates on scroll (rAF). */
  --container:1600px;
  --gap:37px;
  --band-pad:80px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
html,body{
  background:color-mix(in srgb, var(--paper), var(--paper-warm) calc(var(--warmth)*100%));
  color:var(--ink);
}
body{ font-family:'Sentient',Georgia,serif; font-weight:400; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility; overflow-x:hidden; }
img{ display:block; max-width:100%; }
a{ color:inherit; }
.container{ max-width:var(--container); margin:0 auto; padding:0 24px; }

/* typography */
.eyebrow{ font-family:'Archivo',sans-serif; font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--ink); }
.serif-lg{ font-family:'Sentient',serif; font-weight:400; font-size:31px; letter-spacing:.5px; line-height:45px; }
.serif-md{ font-family:'Sentient',serif; font-weight:400; font-size:19.6px; letter-spacing:.98px; line-height:28.42px; }
.body{ font-family:'Sentient',serif; font-weight:400; font-size:14px; letter-spacing:.8px; line-height:20.3px; }
.link{ font-family:'Archivo',sans-serif; font-size:13px; letter-spacing:.42px; text-decoration:none; color:var(--ink);
  display:inline-flex; align-items:center; position:relative; padding-bottom:3px; }
.link::after{ content:''; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--ink);
  transform:scaleX(0); transform-origin:left; transition:transform .3s ease; }
@media (hover:hover) and (pointer:fine){ .link:hover::after{ transform:scaleX(1); } }

/* sticky bar */
.bar{ position:sticky; top:0; z-index:50; height:64px;
  background:color-mix(in srgb, var(--paper), var(--paper-warm) calc(var(--warmth)*100%));
  display:flex; align-items:center; justify-content:space-between; padding:0 24px; border-bottom:1px solid var(--hair); }
.bar .logo{ font-family:'Sentient',serif; font-weight:400; font-size:20px; letter-spacing:4px; color:var(--ink); text-decoration:none; }
.bar nav{ display:flex; gap:30px; }
.bar nav a{ font-family:'Archivo',sans-serif; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--ink); text-decoration:none; opacity:.72; }
.bar nav a:hover{ opacity:1; }
.cta{ font-family:'Archivo',sans-serif; font-size:12px; letter-spacing:1.4px; text-transform:uppercase;
  min-width:140px; height:42px; padding:0 20px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--ink); color:var(--paper); text-decoration:none; border:none; cursor:pointer; }
.cta:hover{ opacity:.9; }
@media (max-width:720px){ .bar nav{ display:none; } .cta{ min-width:0; font-size:11px; padding:0 14px; height:38px; } }

/* ① hero (H4: C4 cool -> C2 warm, load 3s; photo filter is INTRO ONLY, not scroll-linked) */
.hero{ position:relative; width:100%; height:min(1053px,92vh); overflow:hidden; }
/* A2 parallax: 130% tall inside overflow-hidden hero, GSAP drives yPercent (transform); filter intro is separate axis */
.hero .media{ position:absolute; top:-15%; left:0; width:100%; height:130%; object-fit:cover;
  filter:saturate(.4) brightness(.9) sepia(0) hue-rotate(-20deg) contrast(1.05);
  animation:heroWarm 3s 200ms cubic-bezier(.4,0,.2,1) forwards; }
@keyframes heroWarm{
  from{ filter:saturate(.4) brightness(.9) sepia(0) hue-rotate(-20deg) contrast(1.05); }
  to{   filter:saturate(1.12) brightness(1.05) sepia(.32) hue-rotate(12deg) contrast(1.0); }
}
.hero .dim{ position:absolute; inset:0; background:linear-gradient(to bottom, transparent 74%, rgba(0,0,0,.30) 100%); }
.hero .label{ position:absolute; left:32px; bottom:78px; z-index:3; font-family:'Archivo',sans-serif; font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--paper); text-shadow:0 1px 6px rgba(0,0,0,.5); }
.hero .copy{ position:absolute; left:32px; bottom:34px; z-index:3; font-family:'Sentient',serif; font-weight:400; font-size:26px; line-height:1.15; letter-spacing:.3px; color:var(--paper); text-shadow:0 1px 10px rgba(0,0,0,.5); opacity:0; animation:heroCopy 900ms 1600ms cubic-bezier(.22,.61,.36,1) forwards; }
@keyframes heroCopy{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }
@media (max-width:720px){ .hero{ height:70vh; } .hero .label{ left:20px; bottom:64px; } .hero .copy{ left:20px; bottom:26px; font-size:21px; } }

/* ② The House intro */
.intro{ padding:110px 0; text-align:center; }
.intro .inner{ max-width:680px; margin:0 auto; }
.intro .eyebrow{ display:block; margin-bottom:22px; opacity:.85; }
.intro h1{ margin-bottom:24px; }
.intro p{ opacity:.92; }

/* ③ thumbnail strip */
.strip{ padding:var(--band-pad) 0; }
.strip .track{ display:flex; gap:50px; overflow-x:auto; padding:0 24px; scroll-snap-type:x mandatory; scrollbar-width:none; }
.strip .track::-webkit-scrollbar{ display:none; }
.strip figure{ flex:0 0 260px; scroll-snap-align:start; overflow:hidden; align-self:flex-start; }
.strip figure img{ width:260px; object-fit:cover; transition:transform .4s ease-out; }
@media (hover:hover) and (pointer:fine){ .strip figure:hover img{ transform:scale(1.03); } }
.strip .h260 img{ height:260px; } .strip .h160 img{ height:160px; } .strip .h342 img{ height:342px; }

/* ④ rooms */
.rooms{ background:color-mix(in srgb, var(--band), var(--band-warm) calc(var(--warmth)*100%)); padding:83px 0 80px; }
.rooms .head{ max-width:680px; margin:0 auto 54px; text-align:center; }
.rooms .head .eyebrow{ display:block; margin-bottom:18px; opacity:.85; }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); }
.room .ph{ position:relative; overflow:hidden; aspect-ratio:4/5; margin-bottom:22px; }
.room .ph img{ position:absolute; top:-15%; left:0; width:100%; height:130%; object-fit:cover; }
.room .eyebrow{ display:block; margin-bottom:12px; opacity:.8; }
.room h3{ margin-bottom:8px; }
.room .spec{ margin-bottom:14px; opacity:.7; }
.room p{ margin-bottom:18px; opacity:.9; max-width:44ch; }
/* Byeolchae: single card at one column width, left aligned */
.rooms .third{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); margin-top:var(--gap); }
.rooms .third .room .ph{ aspect-ratio:3/2; }

/* ⑤ experience */
.exp{ padding:var(--band-pad) 0; }
.exp .head{ max-width:680px; margin:0 auto 54px; text-align:center; }
.exp .head .eyebrow{ display:block; margin-bottom:18px; opacity:.85; }
.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
.card .ph{ position:relative; overflow:hidden; aspect-ratio:3/2; margin-bottom:20px; }
.card .ph img{ position:absolute; top:-15%; left:0; width:100%; height:130%; object-fit:cover; }
.card .eyebrow{ display:block; margin-bottom:12px; opacity:.8; }
.card h3{ margin-bottom:10px; }
.card p{ margin-bottom:16px; opacity:.9; }

/* ⑥ getting here */
.getting{ padding-top:60px; }
.getting .head{ max-width:680px; margin:0 auto 40px; text-align:center; }
.getting .head h2{ margin-bottom:18px; }
.getting .head p{ opacity:.9; }
.map{ width:100%; background:var(--band); }
.map svg{ width:100%; height:auto; display:block; }
.contact{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); padding:56px 0 0; }
.contact .col .eyebrow{ display:block; margin-bottom:12px; opacity:.75; }
.contact .col p, .contact .col a{ display:block; text-decoration:none; opacity:.9; }

/* ⑦ FAQ */
.faq{ padding:var(--band-pad) 0; }
.faq .head{ max-width:680px; margin:0 auto 40px; text-align:center; }
.faq .list{ max-width:760px; margin:0 auto; }
.faq details{ border-top:1px solid var(--hair); }
.faq details:last-child{ border-bottom:1px solid var(--hair); }
.faq summary{ list-style:none; cursor:pointer; padding:22px 0; display:flex; justify-content:space-between; align-items:center; gap:20px;
  font-family:'Sentient',serif; font-size:18px; letter-spacing:.3px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .plus{ font-family:'Archivo',sans-serif; font-size:18px; opacity:.6; flex:0 0 auto; }
.faq details[open] summary .plus{ transform:rotate(45deg); }
.faq summary .plus{ transition:transform .25s ease; }
.faq .ans{ padding:0 0 24px; opacity:.9; max-width:64ch; }

/* final reserve */
.reserve{ padding:90px 0 100px; text-align:center; }
.reserve .inner{ max-width:560px; margin:0 auto; }
.reserve h2{ margin-bottom:20px; }
.reserve p{ opacity:.9; margin-bottom:14px; }
.reserve .lines{ margin-bottom:30px; }
.reserve .lines a{ text-decoration:none; opacity:.9; display:block; }

/* footer */
.foot{ border-top:1px solid var(--hair); padding:44px 0 60px; }
.foot .row{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px; align-items:start; }
.foot .logo{ font-family:'Sentient',serif; font-size:18px; letter-spacing:4px; }
.foot .eyebrow{ display:block; margin-bottom:10px; opacity:.7; }
.foot a, .foot p{ text-decoration:none; opacity:.85; }
.foot .small{ grid-column:1/-1; margin-top:28px; font-family:'Archivo',sans-serif; font-size:10px; letter-spacing:1.5px; text-transform:uppercase; opacity:.55; }

/* reveal (visible by default; JS hides then animates) */
.reveal{ opacity:1; }

/* responsive */
@media (max-width:900px){
  .grid3{ grid-template-columns:1fr; gap:44px; }
  .grid2{ grid-template-columns:1fr; gap:44px; }
  .rooms .third{ grid-template-columns:1fr; }
  .contact{ grid-template-columns:1fr; gap:28px; }
  .foot .row{ grid-template-columns:1fr; gap:22px; }
  .intro{ padding:70px 0; }
}
@media (max-width:720px){ .intro h1{ font-size:26px; line-height:36px; } }

/* C2 cursor follower — transform-only, native cursor kept. Shown by JS only when hover-capable. */
#cur{ position:fixed; top:0; left:0; width:10px; height:10px; border-radius:50%;
  background:var(--ink, #26231F); opacity:.55; pointer-events:none; z-index:9999; display:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .hero .media{ animation:none; filter:saturate(1.12) brightness(1.05) sepia(.32) hue-rotate(12deg) contrast(1.0); }
  .hero .copy{ animation:none; opacity:1; transform:none; }
  .strip figure img, .room .ph img, .card .ph img{ transition:none; }
}