/* ============================================================================
   Your Story Korea — shared site styles (site.css)
   G3 system reflux: extracted verbatim from the approved home (v7-landing) so
   every page shares ONE source for tokens, chrome, nav, the Ask modal, and the
   mobile motion module. Change the nav here once → all pages update.

   What stays INLINE per page:
   - page-specific layout (hero, sections, galleries)
   - page-specific token overrides — e.g. --edge (home/packages 11vw, others 8vw),
     --band (contact), and the mobile --edge/--bar step-downs.
   Load order: this file (<link> in <head>) FIRST, then the page's inline <style>
   so page overrides win the cascade.
   ============================================================================ */

:root{
  /* palette B+ "Airbnb Blossom" — clean warm-white + near-black ink + Rausch-family rose-red */
  --haze:#FCF9F8; --fog:#F5F1F0; --pine:#221C20; --teal:#6B4A52;
  --wine:#F43F5C; --wine-2:#FB5069; --blush:#FAD8DD; --snow:#FFFFFF;
  --ink:#262323; --dim:#7A7270; --line:#E9E4E3;
  /* --edge is a per-page override; 8vw is the common default (home/packages set 11vw inline) */
  --edge:8vw; --bar:6.2vh; --hudx:clamp(24px,2.2vw,40px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scrollbar-width:none}
html::-webkit-scrollbar{display:none}
body{background:var(--haze);color:var(--ink);
  font-family:"Onest","Pretendard Variable",Pretendard,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;scrollbar-width:none}
body::-webkit-scrollbar{display:none}
.grain{position:fixed;inset:0;z-index:70;pointer-events:none;opacity:.08;mix-blend-mode:multiply}
.grain svg{width:100%;height:100%}

/* preloader */
.pre{position:fixed;inset:0;z-index:100;background:var(--pine);color:var(--snow);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px}
.pre .pmark{font-weight:800;letter-spacing:.34em;font-size:12px}
.pre .pmark b{font-weight:200}
.pre .ptrack{width:min(240px,46vw);height:2px;background:rgba(250,251,250,.16);overflow:hidden}
.pre .pbar{height:100%;width:100%;background:var(--wine-2);transform:scaleX(0);transform-origin:left}
.pre .ptag{font-size:10px;letter-spacing:.30em;text-transform:uppercase;color:rgba(250,251,250,.5)}

/* hud — transparent over the hero. unseen.co composition, measured: header uses nearly the FULL width
   (own gutter --hudx, not the content --edge), 82px tall so nothing hugs the ceiling. Right side =
   nav links + circle, and the nav is an overflow mask whose right edge sits exactly at the circle's
   left edge: on scroll the links slide INTO the circle and are clipped as they cross — no fade. */
.hud{position:fixed;top:0;left:0;right:0;z-index:60;height:82px;display:flex;justify-content:space-between;align-items:center;padding:0 var(--hudx);color:#fff}
/* the mark alone keeps the difference blend (stays legible over light sections after scroll);
   the menu renders TRUE white like the circle dots — it only shows at the top, over the film */
.mark{font-weight:800;letter-spacing:.28em;font-size:12px;mix-blend-mode:difference;text-decoration:none;color:inherit}
picture{display:contents}
.mark b{font-weight:200}
/* mask box: right edge = circle left edge (circle width 46 at right:--hudx) */
.hud nav{display:flex;gap:28px;align-items:center;overflow:hidden;margin-right:46px;padding:16px 22px 16px 2px}
/* return (back at top): items pour back OUT of the circle — fast exit, soft settle, no fade */
.hud nav a{color:var(--snow);text-shadow:0 1px 10px rgba(0,0,0,.4);text-decoration:none;font-size:11px;letter-spacing:.2em;font-weight:600;position:relative;
  transition:transform .6s cubic-bezier(.16,1,.3,1)}
.hud nav a:nth-child(1){transition-delay:0s}
.hud nav a:nth-child(2){transition-delay:.05s}
.hud nav a:nth-child(3){transition-delay:.1s}
.hud nav a:nth-child(4){transition-delay:.15s}
.hud nav a:nth-child(5){transition-delay:.2s}
.hud nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:1.5px;background:var(--wine-2);transition:right .35s ease}
.hud nav a:hover::after,.hud nav a.here::after{right:0}
/* collapse: each item travels PAST the circle's far edge (--dx set by JS), queued nearest-first,
   ease-in so it starts slow then rushes. No opacity — the mask swallows them at the circle's edge. */
html.scrolled .hud nav a{transform:translateX(var(--dx,160px));pointer-events:none;
  transition:transform .62s cubic-bezier(.62,0,.9,.4)}
html.scrolled .hud nav a:nth-child(5){transition-delay:0s}
html.scrolled .hud nav a:nth-child(4){transition-delay:.07s}
html.scrolled .hud nav a:nth-child(3){transition-delay:.14s}
html.scrolled .hud nav a:nth-child(2){transition-delay:.21s}
html.scrolled .hud nav a:nth-child(1){transition-delay:.28s}

/* floating message cta */
.msg{position:fixed;right:var(--edge);bottom:26px;z-index:65;background:var(--wine);color:var(--snow);text-decoration:none;
  padding:13px 22px;border-radius:2px;font-size:12px;letter-spacing:.14em;font-weight:700;text-transform:uppercase;
  box-shadow:0 10px 30px rgba(28,20,24,.28);transition:background .3s,transform .3s}
.msg:hover{background:var(--wine-2);transform:translateY(-2px)}

.rise{will-change:transform,opacity,filter}

/* footer — rich end frame: brand + site paths + YOURDAY (sister photo studio) + ghost 이야기.
   G3 shared source (was piloted inline on about; propagated here 2026-07-15). Per-page .here in .fnav. */
footer{position:relative;display:block;background:var(--pine);color:rgba(250,251,250,.6);padding:6.5vh var(--edge) 0;overflow:hidden;font-size:14px;letter-spacing:0}
.fhangul{position:absolute;right:calc(var(--edge)*.4);bottom:-.28em;z-index:1;font-weight:800;font-size:clamp(96px,12vw,178px);line-height:1;color:rgba(255,255,255,.045);letter-spacing:-.02em;pointer-events:none;user-select:none}
.fgrid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.6fr) minmax(0,1fr);column-gap:clamp(30px,5vw,80px);align-items:start;padding-bottom:5.5vh}
.fbrand .fmark{color:var(--snow);font-weight:800;letter-spacing:.3em;font-size:13px}
.fbrand .fmark b{font-weight:200;color:var(--snow)}
.fbrand .fdesc{margin-top:14px;font-size:14.5px;line-height:1.65;color:rgba(250,251,250,.6);max-width:30ch}
.fnav{display:flex;flex-direction:column;gap:11px;align-items:flex-start}
.fnav a{color:rgba(250,251,250,.72);text-decoration:none;font-size:14.5px;font-weight:600;transition:color .3s}
.fnav a:hover,.fnav a.here{color:var(--snow)}
.fsister{display:block;text-decoration:none}
.fsister .lbl{display:block;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:rgba(250,251,250,.44);font-weight:700}
.fsister .nm{display:flex;width:max-content;max-width:100%;align-items:center;gap:8px;margin-top:8px;font-size:16px;font-weight:700;letter-spacing:.05em;color:var(--snow)}
.fsister .nm .arw{color:var(--wine-2);transition:transform .3s}
.fsister:hover .nm{color:var(--wine-2)}
.fsister:hover .nm .arw{transform:translateX(5px)}
.fsister .sub{display:block;margin-top:8px;font-size:13px;line-height:1.55;color:rgba(250,251,250,.55);max-width:32ch}
.fig{display:inline-block;margin-top:16px;font-size:13.5px;color:rgba(250,251,250,.58);text-decoration:none;transition:color .3s}
.fig:hover{color:var(--snow)}
.fbase{position:relative;z-index:2;display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap;gap:6px 18px;border-top:1px solid rgba(255,255,255,.12);padding:18px 0 22px;font-size:11px;letter-spacing:.13em;color:rgba(250,251,250,.42)}
.fbase b{color:rgba(250,251,250,.72);font-weight:700}
@media(max-width:860px){
  footer{padding:6vh var(--edge) 0}
  .fgrid{grid-template-columns:1fr 1fr;column-gap:22px;row-gap:20px;padding-bottom:5vh;align-items:start}
  .fbrand{grid-column:1;grid-row:1}
  .fnav{grid-column:1;grid-row:2;gap:11px}
  .fconnect{grid-column:2;grid-row:1/span 2}
  .fbrand .fdesc{max-width:24ch}
  .fsister .sub{max-width:none}
  .fhangul{font-size:clamp(84px,26vw,150px);right:3vw;bottom:-.2em}
  .fbase{padding:16px 130px 20px 0}
}

/* shared reduced-motion (page-specific bits like the hero caret stay in the page) */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hud nav a,html.scrolled .hud nav a{transition:none;transform:none;pointer-events:auto}
  .burger.gulp,.burger.gulp i:first-child,.burger.gulp i:last-child{animation:none}
}

/* ===== Ask popup (reusable "start the conversation" modal) ===== */
.tcta{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;margin-top:24px}
.tcta .see{margin-top:0}
.see.prim{border:0;background:var(--wine);color:var(--snow);padding:14px 24px;border-radius:2px;cursor:pointer;font-family:inherit;transition:background .3s,transform .3s}
.see.prim:hover{background:var(--wine-2);color:var(--snow);transform:translateY(-2px)}
a.see.prim,a.see.prim:hover{color:var(--snow);border:0;border-radius:2px;padding:14px 24px;transition:background .3s,transform .3s}
.ask{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:5vh 5vw}
.ask.on{display:flex}
.ask-scrim{position:absolute;inset:0;background:rgba(24,17,20,.5);opacity:0;transition:opacity .35s}
.ask.on .ask-scrim{opacity:1}
.ask-card{position:relative;z-index:2;width:min(540px,100%);max-height:90vh;overflow:auto;background:var(--haze);border-radius:6px;box-shadow:0 40px 100px rgba(20,12,14,.4);padding:clamp(28px,4vw,44px);transform:translateY(16px) scale(.98);opacity:0;transition:transform .4s cubic-bezier(.16,1,.3,1),opacity .35s}
.ask.on .ask-card{transform:none;opacity:1}
.ask-x{position:absolute;top:16px;right:16px;width:38px;height:38px;border:1px solid var(--line);background:var(--snow);border-radius:50%;cursor:pointer;font-size:20px;line-height:1;color:var(--ink);display:grid;place-items:center;transition:border-color .2s,color .2s}
.ask-x:hover{border-color:var(--wine);color:var(--wine)}
.ask-k{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--wine);font-weight:700;margin-bottom:14px}
.ask-h{font-size:clamp(23px,3vw,32px);font-weight:700;letter-spacing:-.02em;line-height:1.12}
.ask-sub{margin-top:12px;color:var(--dim);font-size:14px;line-height:1.6;max-width:42ch}
.ask-row{margin-top:22px}
.ask-lb{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:700;margin-bottom:10px}
.ask-lb span{color:#B7ADAB;font-weight:600;text-transform:none;letter-spacing:0}
.ask-chip{display:inline-block;background:rgba(244,63,92,.07);border:1px solid var(--wine);color:var(--ink);font-weight:700;font-size:15px;padding:9px 16px;border-radius:2px}
.ask-in{width:100%;background:transparent;border:0;border-bottom:1.5px solid var(--line);padding:11px 2px;font:inherit;font-size:16px;color:var(--ink);transition:border-color .25s}
.ask-in::placeholder{color:#B0A6A4}
.ask-in:focus{outline:0;border-bottom-color:var(--wine)}
textarea.ask-in{min-height:78px;resize:vertical;line-height:1.5}
/* channel selector (WhatsApp / LINE / KakaoTalk / Email) */
.chsel{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.ch{border:0;background:var(--fog);border-radius:2px;padding:9px 16px;font:inherit;font-size:13px;font-weight:600;color:var(--dim);cursor:pointer;transition:background .2s,color .2s}
.ch:hover{background:#ECE5E3;color:var(--ink)}
.ch.on{background:var(--wine);color:var(--snow)}
/* single-date trigger */
.askdate .datetrigger{width:100%;text-align:left;background:transparent;border:0;border-bottom:1.5px solid var(--line);padding:11px 2px;font:inherit;font-size:16px;color:#B0A6A4;cursor:pointer;transition:border-color .3s,color .3s}
.askdate .datetrigger.has{color:var(--ink)}
.askdate[data-open="1"] .datetrigger{border-bottom-color:var(--wine)}
.ask-send{margin-top:26px;width:100%;justify-content:center;display:inline-flex;align-items:center;gap:10px;background:var(--wine);color:var(--snow);border:0;cursor:pointer;padding:17px 28px;border-radius:2px;font-size:13px;letter-spacing:.14em;font-weight:700;text-transform:uppercase;font-family:inherit;transition:background .3s,transform .3s}
.ask-send:hover{background:var(--wine-2);transform:translateY(-2px)}
.ask-alt{margin-top:16px;text-align:center;font-size:13px;color:var(--dim)}
.ask-alt a{color:var(--ink);font-weight:600;text-decoration:none;border-bottom:1px solid var(--line)}
.ask-alt a:hover{border-color:var(--wine)}
.ask-done{display:none;text-align:center;padding:22px 0}
.ask.showdone .ask-form{display:none}
.ask.showdone .ask-done{display:block}
.ask-done .t{font-size:clamp(22px,2.6vw,30px);font-weight:700;letter-spacing:-.02em}
.ask-done p{margin-top:12px;color:var(--dim);font-size:14px;line-height:1.6;max-width:36ch;margin-left:auto;margin-right:auto}
/* single-date calendar (shared) */
.cal{position:relative;margin-top:14px;background:var(--snow);border:1px solid var(--line);border-radius:8px;box-shadow:0 20px 50px rgba(28,20,24,.1);padding:20px 20px 12px;display:none}
.cal.open{display:block}
.cal-head{position:absolute;top:20px;left:20px;right:20px;display:flex;justify-content:space-between;pointer-events:none}
.cal-nav{pointer-events:auto;width:32px;height:32px;border:1px solid var(--line);background:var(--snow);border-radius:50%;cursor:pointer;font-size:16px;line-height:1;color:var(--ink);display:grid;place-items:center;transition:border-color .2s,color .2s}
.cal-nav:hover{border-color:var(--wine);color:var(--wine)}
.cal-nav:disabled{opacity:.25;cursor:default}
.cal-months{display:flex;gap:30px;justify-content:center}
.cal-month{flex:1;max-width:300px;min-width:0}
.cal-title{text-align:center;font-weight:700;font-size:14px;margin-bottom:14px}
.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:4px}
.cal-dow span{text-align:center;font-size:11px;color:var(--dim);font-weight:600}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr)}
.cal-empty{aspect-ratio:1}
.cal-day{aspect-ratio:1;border:0;background:transparent;padding:0;cursor:pointer;position:relative;font:inherit}
.cal-day .d{width:100%;height:100%;display:grid;place-items:center;font-size:13px;color:var(--ink);border-radius:50%;transition:background .12s,color .12s,box-shadow .12s}
.cal-day:not(.is-off):hover .d{box-shadow:inset 0 0 0 1.5px var(--wine)}
.cal-day.is-sel .d{background:var(--wine);color:var(--snow);box-shadow:none}
.cal-day.is-off{cursor:default}
.cal-day.is-off .d{color:#D3CAC8}
.cal-day.is-today .d{font-weight:700}
.cal-foot{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.cal-clear{background:none;border:0;text-decoration:underline;font:inherit;font-size:13px;color:var(--ink);cursor:pointer}
.cal-ok{background:var(--wine);color:var(--snow);border:0;border-radius:2px;padding:10px 22px;font:inherit;font-size:12px;letter-spacing:.08em;font-weight:700;text-transform:uppercase;cursor:pointer}
button:focus:not(:focus-visible),a:focus:not(:focus-visible),[role="button"]:focus:not(:focus-visible){outline:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--wine);outline-offset:3px;border-radius:2px}

/* ===== circle button (unseen.co anatomy, YSK tokens). At the top: dots only, no border, no fill.
   On scroll: still see-through — just an outlined glass circle (border + faint tint so the ring
   reads on light AND dark backdrops). Hover: fills signature rose to invite the click. ===== */
.burger{position:fixed;top:18px;right:var(--hudx);z-index:64;width:46px;height:46px;border-radius:50%;background:transparent;border:1px solid transparent;display:flex;align-items:center;justify-content:center;gap:5px;padding:0;cursor:pointer;
  transition:background .4s ease .08s,border-color .4s ease .08s,transform .5s cubic-bezier(.16,1,.3,1);-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}
html.scrolled .burger{border-color:rgba(255,255,255,.85);background:rgba(34,28,32,.18);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.burger:hover,html.scrolled .burger:hover{background:var(--wine);border-color:var(--wine);transform:scale(1.07)}
.burger i{display:block;width:4px;height:4px;border-radius:50%;background:var(--snow);filter:drop-shadow(0 1px 4px rgba(0,0,0,.4))}
/* gulp: the circle reacts as the menu streams in — dots get shoved, the whole button rocks, then settles */
.burger.gulp{animation:gulpC .72s cubic-bezier(.36,.07,.19,.97) .34s both}
.burger.gulp i:first-child{animation:gulpD .58s cubic-bezier(.36,.07,.19,.97) .36s both}
.burger.gulp i:last-child{animation:gulpD .58s cubic-bezier(.36,.07,.19,.97) .44s both}
@keyframes gulpC{0%{transform:none}28%{transform:translateX(-4px) rotate(-5deg)}55%{transform:translateX(2.5px) rotate(3deg)}78%{transform:translateX(-1px) rotate(-1deg)}100%{transform:none}}
@keyframes gulpD{0%{transform:none}40%{transform:translateX(-5px)}70%{transform:translateX(2px)}100%{transform:none}}
.navfs{position:fixed;inset:0;z-index:110;background:var(--pine);color:var(--snow);display:flex;flex-direction:column;justify-content:center;padding:0 var(--edge);opacity:0;visibility:hidden;transition:opacity .5s ease,visibility .5s ease}
.navfs.on{opacity:1;visibility:visible}
/* overlay chrome mirrors the new wide header: mark at --hudx, close = a circle in the burger's exact spot */
.navfs .mk{position:absolute;top:33px;left:var(--hudx);font-weight:800;letter-spacing:.26em;font-size:12px;color:var(--snow)}
.navfs .mk b{font-weight:200}
.navfs .cx{position:absolute;top:18px;right:var(--hudx);width:46px;height:46px;border:1px solid rgba(255,255,255,.5);border-radius:50%;background:none;color:var(--snow);font-size:22px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .3s,border-color .3s,transform .4s}
.navfs .cx:hover{background:var(--wine);border-color:var(--wine);transform:scale(1.07)}
.navfs nav{display:flex;flex-direction:column;gap:min(3.4vh,20px)}
.navfs nav a{color:var(--snow);text-decoration:none;font-size:clamp(38px,13vw,72px);font-weight:700;letter-spacing:-.03em;line-height:1;opacity:0;transform:translateY(24px);transition:opacity .55s ease,transform .55s cubic-bezier(.16,1,.3,1),color .3s}
.navfs.on nav a{opacity:1;transform:none}
.navfs.on nav a:nth-child(1){transition-delay:.10s}
.navfs.on nav a:nth-child(2){transition-delay:.16s}
.navfs.on nav a:nth-child(3){transition-delay:.22s}
.navfs.on nav a:nth-child(4){transition-delay:.28s}
.navfs.on nav a:nth-child(5){transition-delay:.34s}
.navfs nav a:hover{color:var(--wine-2)}
.navfs .foot{position:absolute;left:var(--hudx);bottom:5.5vh;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(250,251,250,.5)}

/* nav responsive: mobile HUD is absolute and scrolls away, so the circle escapes it and stays fixed */
@media(max-width:860px){
  .hud{position:absolute}.hud nav{display:none}
  .burger{position:fixed;top:12px;right:4vw;z-index:64}
  .msg{right:5vw;bottom:16px;padding:10px 15px;font-size:10px;letter-spacing:.1em;opacity:.95}
}

/* ===== navdark: opt-in for LIGHT-background pages that have no dark hero behind the nav
   (e.g. contact). The mark keeps its difference blend (already reads dark on the light --haze);
   the nav links and the circle dots flip to ink so they stay legible. Hover still fills wine
   with white dots. Add class="navdark" on <html>. ===== */
html.navdark .hud .mark{mix-blend-mode:normal;color:var(--ink)}
html.navdark .hud nav a{color:var(--ink);text-shadow:none}
html.navdark .burger i{background:var(--ink);filter:none}
html.navdark.scrolled .burger{border-color:rgba(34,28,32,.22);background:rgba(252,249,248,.55)}
html.navdark .burger:hover i,html.navdark.scrolled .burger:hover i{background:var(--snow)}

/* ===== Mobile cinematic scroll — reveal (clip-wipe rise) + image parallax drift. Armed by JS via
   html.mfx (mobile + motion-ok) so if the script never runs nothing is hidden — it can't strand.
   Desktop keeps its GSAP choreography untouched. ===== */
@media(max-width:860px){
  html.mfx [data-reveal],
  html.mfx [data-split]:not([data-hero-h]){
    opacity:0;transform:translateY(24px);clip-path:inset(0 0 12% 0);
    transition:opacity .82s cubic-bezier(.16,1,.3,1),transform .92s cubic-bezier(.16,1,.3,1),clip-path .92s cubic-bezier(.16,1,.3,1);
  }
  html.mfx [data-reveal].in,html.mfx [data-split].in{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
  html.mfx .gmedia,html.mfx .mdeck .sheet,html.mfx .mdeck .ivrow,html.mfx .fposter,html.mfx .chap .inset{
    opacity:0;transform:translateY(30px);clip-path:inset(0 0 24% 0);
    transition:opacity .95s cubic-bezier(.16,1,.3,1),transform 1.05s cubic-bezier(.16,1,.3,1),clip-path 1.1s cubic-bezier(.16,1,.3,1);
  }
  html.mfx .gmedia.in,html.mfx .mdeck .sheet.in,html.mfx .mdeck .ivrow.in,html.mfx .fposter.in,html.mfx .chap .inset.in{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
  html.mfx .gmedia img,html.mfx .sheet img,html.mfx .ivrow img,html.mfx .fposter img,html.mfx .inset img,html.mfx .filmcard img,html.mfx .thumb img,html.mfx .land img,html.mfx .port img,html.mfx .loop img,html.mfx .shot img,html.mfx .por img{will-change:transform}
}

/* story 'You get' bullets (mirrors the packages .get list) */
.aside .ulist{list-style:none;margin:0;padding:0}
.aside .ulist li{position:relative;padding-left:16px;font-size:15px;font-weight:600;line-height:1.5;margin-top:7px}
.aside .ulist li:first-child{margin-top:0}
.aside .ulist li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:1.5px;background:var(--wine)}
.aside .ulist li i{font-style:normal;color:var(--dim);font-weight:600}

/* ── LOGO MORPH (System A · 사이트 전역) · nav .mark = yourstory ⇄ 이야기, 임계 70px 넘으면 전환 ──
   고정 .hud가 스택 컨텍스트라 mix-blend가 격리됨 → 단색 글자/획 색(--mk)을 배경 휘도(site.js)로 스노우↔잉크 전환. 로즈 링은 항상 로즈. */
.mark.morph{mix-blend-mode:normal;position:relative;display:inline-flex;align-items:center;height:1em;font-size:16px;line-height:1;letter-spacing:0;overflow:visible;--mk:var(--snow)}
.mark.morph.mk-ink{--mk:var(--ink)}
.mark.morph .mw{position:relative;display:inline-block;white-space:nowrap;font-weight:800}
.mark.morph .en{display:inline-block}
.mark.morph .en .l{display:inline-block;color:var(--mk);transition:color .35s ease;will-change:transform,opacity;text-shadow:0 1px 9px rgba(0,0,0,.42)}
.mark.morph.mk-ink .en .l{text-shadow:none}                           /* 잉크(밝은 배경)엔 그림자 불필요 */
.mark.morph .en .o{display:inline-block;color:var(--wine)}            /* mobile/no-JS: 로즈 글리프 */
.mark.morph .mw.armed .en .o{color:transparent}                       /* desktop armed: 숨김, 링 div가 대신 */
.mark.morph .ring{position:absolute;border-radius:50%;border-style:solid;border-color:var(--wine);pointer-events:none;will-change:transform}
.mark.morph .kr{position:absolute;left:0;top:0;display:none;overflow:visible;pointer-events:none;filter:drop-shadow(0 1px 6px rgba(0,0,0,.38))}
.mark.morph.mk-ink .kr{filter:none}
.mark.morph .mw.armed .kr{display:block}
.mark.morph .kr .st{fill:var(--mk);transition:fill .35s ease}

/* Mobile: the wordmark persists (fixed) on scroll like the burger, instead of scrolling away
   with the absolute HUD. Vertically centered to match the burger (top:12px · height:46px · 4vw edge). */
@media(max-width:860px){
  .hud .mark.morph{position:fixed;top:12px;left:4vw;height:46px;z-index:64}
}

/* ---- season promo: popup (.szn) — .ask 모달과 같은 카드 문법, z는 navfs(110)·ask(120) 아래 ---- */
.szn{position:fixed;inset:0;z-index:108;display:none;align-items:center;justify-content:center;padding:5vh 5vw}
.szn.on{display:flex}
.szn-scrim{position:absolute;inset:0;background:rgba(24,17,20,.5);opacity:0;transition:opacity .35s}
.szn.on .szn-scrim{opacity:1}
.szn-card{position:relative;z-index:2;width:min(460px,100%);max-height:90vh;overflow:auto;background:var(--haze);border-radius:6px;box-shadow:0 40px 100px rgba(20,12,14,.4);padding:0 0 clamp(24px,3.5vw,36px);transform:translateY(16px) scale(.98);opacity:0;transition:transform .4s cubic-bezier(.16,1,.3,1),opacity .35s}
.szn.on .szn-card{transform:none;opacity:1}
.szn-x{position:absolute;top:14px;right:14px;z-index:3;width:38px;height:38px;border:1px solid rgba(255,255,255,.5);background:rgba(24,17,20,.35);border-radius:50%;cursor:pointer;font-size:20px;line-height:1;color:#fff;display:grid;place-items:center;transition:background .2s}
.szn-x:hover{background:rgba(24,17,20,.6)}
.szn-media{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:6px 6px 0 0;background:var(--pine)}
.szn-media video{width:100%;height:100%;object-fit:cover;display:block}
.szn-ribbon{position:absolute;top:14px;left:14px;z-index:2;background:var(--wine);color:var(--snow);font-size:10px;letter-spacing:.24em;font-weight:800;text-transform:uppercase;padding:7px 12px;border-radius:2px;box-shadow:0 8px 24px rgba(28,20,24,.35)}
.szn-k{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--wine);font-weight:700;margin:22px clamp(24px,3.5vw,36px) 10px}
.szn-h{font-size:clamp(23px,2.9vw,31px);font-weight:800;letter-spacing:-.022em;line-height:1.1;margin:0 clamp(24px,3.5vw,36px)}
.szn-badges{display:flex;flex-wrap:wrap;gap:8px;margin:16px clamp(24px,3.5vw,36px) 0}
.szn-badges b{font-size:10.5px;letter-spacing:.13em;font-weight:800;text-transform:uppercase;color:var(--wine);border:1.5px solid var(--wine);border-radius:2px;padding:6px 10px;background:rgba(244,63,92,.05)}
.szn-sub{margin:14px clamp(24px,3.5vw,36px) 0;color:var(--dim);font-size:14px;line-height:1.6}
/* early-bird line — 앰버×블랙, 브랜드 팔레트 밖(오너 지시: 할인은 확 튀게) */
.szn-eb{margin:16px clamp(24px,3.5vw,36px) 0;background:#FFB423;color:#1A1417;border-radius:4px;padding:12px 14px;font-size:13.5px;line-height:1.45;font-weight:600;box-shadow:0 10px 28px rgba(255,180,35,.35)}
.szn-eb .tag{display:inline-block;background:#1A1417;color:#FFB423;font-size:9.5px;letter-spacing:.18em;font-weight:800;text-transform:uppercase;padding:4px 8px;border-radius:2px;margin-right:6px;transform:rotate(-2deg);vertical-align:2px}
.szn-eb b{font-weight:800}
/* 얼리버드 자동 만료(9/1 KST~) — head.mjs가 <html>에 .eb-over 부여 시 얼리버드 표면 전부 숨김 */
html.eb-over .eb-gate{display:none!important}
.szn-go{display:inline-block;margin:20px 0 0 clamp(24px,3.5vw,36px);background:var(--wine);color:var(--snow);text-decoration:none;padding:13px 22px;border-radius:2px;font-size:12px;letter-spacing:.14em;font-weight:700;text-transform:uppercase;transition:background .3s}
.szn-go:hover{background:var(--wine-2)}
.szn-later{display:inline-block;margin:20px 0 0 14px;background:none;border:0;cursor:pointer;color:var(--dim);font-size:12px;letter-spacing:.08em;text-decoration:underline;text-underline-offset:3px}

/* ---- season promo: fab (.sfab) — 우하단 .msg(bottom:26px) 위 스택. 링 회전은 site.js(gsap ticker) ---- */
.sfab{position:fixed;right:var(--edge);bottom:92px;z-index:65;width:112px;height:112px;display:none;text-decoration:none}
.sfab.on{display:block}
.sfab-orb{position:absolute;inset:19px;border-radius:50%;overflow:hidden;background:var(--pine);box-shadow:0 14px 40px rgba(28,20,24,.35);transition:transform .45s cubic-bezier(.16,1,.3,1)}
.sfab-orb video{width:100%;height:100%;object-fit:cover;display:block}
.sfab:hover .sfab-orb{transform:scale(1.12)}
.sfab-ring{position:absolute;inset:0;will-change:transform}
.sfab-ring text{font-size:8.5px;font-weight:700;letter-spacing:.16em;fill:var(--snow);paint-order:stroke;stroke:rgba(24,17,20,.45);stroke-width:.6px}
.sfab-chip{position:absolute;right:calc(100% + 12px);top:50%;transform:translate(8px,-50%);opacity:0;pointer-events:none;white-space:nowrap;background:var(--haze);color:var(--ink);padding:9px 14px;border-radius:2px;font-size:11px;letter-spacing:.14em;font-weight:700;text-transform:uppercase;box-shadow:0 10px 30px rgba(28,20,24,.28);transition:opacity .3s,transform .45s cubic-bezier(.16,1,.3,1)}
.sfab:hover .sfab-chip{opacity:1;transform:translate(0,-50%)}
@media (max-width:860px){
  .sfab{width:76px;height:76px;bottom:84px}
  .sfab-orb{inset:13px}
  .sfab-ring text{font-size:9.5px}
  .sfab-chip{display:none}
}
