:root{
    --bg:#fff; --fg:#111; --muted:#e9e9e9; --muted-2:#f6f6f6;
    --pad:28px; --radius:16px; --trans:180ms ease;
    --navH:88px; --navH-compact:56px;
    --fade:0;
    --edge-nudge:12px;
    --hero-offset:clamp(8vh,14vh,20vh);
    --scene-sub-w-en:46ch; --scene-sub-w-kr:34ch;
}

/* Base */
*{box-sizing:border-box}
html,body{margin:0;color:var(--fg);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid #000;outline-offset:2px}
html,body{height:100%}
body{min-height:100svh;display:flex;flex-direction:column}
body.no-scroll{overflow:hidden}
main{flex:1 0 auto}

/* Lang visibility */
.lang{display:none}
body[data-lang="kr"] .lang-kr{display:block}
body[data-lang="en"] .lang-en{display:block}

/* Buttons */
.btn{
    border:1px solid var(--fg);background:transparent;color:var(--fg);
    padding:10px 16px;border-radius:999px;font-size:14px;
    transition:transform var(--trans),background var(--trans),color var(--trans)
}
.btn:hover{transform:translateY(-2px);background:var(--fg);color:#fff}
.btn-on-dark{border-color:#fff;color:#fff}
.btn-on-dark:hover{background:#fff;color:#000}
.row{display:flex;gap:10px;flex-wrap:wrap}

/* Layout / type */
.container{max-width:1200px;margin:0 auto;padding:0 var(--pad)}
.section{margin:72px auto}
.hero-title{
    font-family:"Libre Bodoni",serif;
    font-size:clamp(28px,5.2vw,48px);
    line-height:1.06;letter-spacing:.02em;margin:0 0 16px;
}

/* Header (HAY-like) */
.nav{
    position:sticky;top:0;z-index:60;background:rgba(255,255,255,.85);
    backdrop-filter:blur(8px);border-bottom:1px solid var(--muted);
    transition:background .25s ease,border-color .25s ease,transform .25s ease;
}
.nav-inner{
    max-width:1200px;margin:0 auto;padding:0 var(--pad);
    display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:28px;
    min-height:var(--navH);block-size:var(--navH);
    transition:block-size .28s ease,min-height .28s ease;
}
.nav.is-compact{background:#fff}
.nav.is-compact .nav-inner{
    min-height:var(--navH-compact);block-size:var(--navH-compact);grid-template-columns:1fr;
}
.logo{height:var(--navH);width:auto;max-width:none;transition:height .28s ease}
.nav.is-compact .logo{height:var(--navH-compact)}
.logo-white,.logo-black{display:none}
.nav .logo-black{display:block}

.brand,.nav-links,.nav-actions,.nav-social{flex:0 0 auto;min-width:max-content}
.nav-links{display:flex;gap:22px;justify-content:center;flex-wrap:nowrap}
.nav-links a{text-transform:uppercase;letter-spacing:.08em;font-size:14px;padding:6px 0;white-space:nowrap}
.nav-links a.active{border-bottom:1px solid var(--fg)}
.nav-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px}
.nav-social{display:flex;align-items:center;gap:12px}
.nav .icon{width:20px;height:20px}
.nav .icon-btn{padding:6px}
.lang-toggle{min-width:auto}

/* Fade before shrink */
.nav .brand,.nav .nav-links,.nav .lang-toggle,.nav .nav-social{
    opacity:calc(1 - var(--fade,0));
    transform:translateY(calc(-8px * (var(--fade,0))));
    transition:opacity .18s linear,transform .24s ease,visibility .2s ease;
}

/* Compact defaults */
.nav.is-compact .nav-inner{grid-template-columns:1fr}
.nav.is-compact .nav-actions{justify-content:center}
.nav.is-compact .brand,.nav.is-compact .nav-links{display:none}
.nav.is-compact .lang-toggle,.nav.is-overflow .lang-toggle{display:none !important}
.nav.is-compact .nav-social,.nav.is-overflow .nav-social{display:none !important}

/* Hamburger */
.menu-btn{
    display:none;padding:12px 6px;border:0;background:transparent;cursor:pointer;
    color:#111;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;
}
.menu-icon,.menu-icon::before,.menu-icon::after{
    content:"";display:block;width:26px;height:2px;background:currentColor;border-radius:2px;position:relative;
    transition:transform .22s ease,opacity .22s ease,width .22s ease;
}
.menu-icon::before{position:absolute;top:-7px;left:0}
.menu-icon::after{position:absolute;top:7px;left:0}
@media (hover:hover){
    .menu-btn:hover .menu-icon,
    .menu-btn:hover .menu-icon::before,
    .menu-btn:hover .menu-icon::after{width:28px}
}
.menu-btn.is-open .menu-icon{background:transparent}
.menu-btn.is-open .menu-icon::before{transform:translateY(7px) rotate(45deg)}
.menu-btn.is-open .menu-icon::after{transform:translateY(-7px) rotate(-45deg)}
.nav.is-overflow .menu-btn{display:inline-flex}
.nav.is-overflow .nav-links{display:none}
.nav.is-compact .menu-btn{display:inline-flex;margin:0 auto}

/* Overlay menu */
.menu-panel[hidden]{display:none}
.menu-panel{
    position:fixed;inset:0;z-index:70;opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .25s ease,transform .25s ease,visibility .25s ease;
}
.menu-panel.is-open{opacity:1;visibility:visible;transform:none}
.menu-overlay{
    position:absolute;inset:0;background:rgba(255,255,255,.98);backdrop-filter:blur(10px);
    display:grid;grid-template-rows:auto auto 1fr;
}
.menu-bar{
    display:grid;grid-template-columns:1fr auto;align-items:center;min-height:var(--navH);
    border-bottom:1px solid var(--muted);padding:0 var(--pad);
}
.menu-close{
    border:0;background:transparent;cursor:pointer;padding:12px 6px;color:#111;
    -webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;
}
.menu-close .menu-icon,.menu-close .menu-icon::before,.menu-close .menu-icon::after{
    content:"";display:block;width:26px;height:2px;background:currentColor;border-radius:2px;position:relative;
}
.menu-close .menu-icon{transform:rotate(45deg)}
.menu-close .menu-icon::before{position:absolute;top:0;transform:rotate(90deg)}
.menu-close .menu-icon::after{display:none}

.menu-links{
    display:flex;flex-wrap:wrap;gap:22px;align-content:start;align-items:center;
    padding:20px var(--pad) 12px;max-width:1200px;
}
.menu-links a{text-transform:uppercase;letter-spacing:.08em;font-size:14px;padding:6px 0}
.menu-links hr{width:100%;border:0;border-top:1px solid var(--muted);margin:8px 0 4px}

.menu-social{align-self:start;display:flex;gap:12px;align-items:center;padding:0 var(--pad) 24px}
.menu-social .icon{width:20px;height:20px}
.menu-social .icon-btn{padding:6px}

/* Mobile/portrait placement */
@media (orientation:portrait),(max-width:820px){
    .nav .menu-btn{display:inline-flex !important;margin:0 !important;color:#111 !important}
    .nav .nav-actions{justify-content:flex-end !important;justify-self:end !important}
    .nav .nav-links,.nav .lang-toggle,.nav .nav-social{display:none !important}
    .menu-bar{grid-template-columns:1fr auto !important;padding-right:var(--pad) !important}
    .menu-close{justify-self:end !important;padding:12px 0 12px 6px !important;margin-right:0 !important}
    .menu-links{width:100% !important;display:flex !important;flex-direction:column !important;
        align-items:flex-end !important;text-align:right !important;gap:12px !important;padding-right:var(--pad) !important}
    .menu-links a{text-align:right !important}
    .menu-social{width:100% !important;justify-content:flex-end !important;align-self:start !important;padding-right:var(--pad) !important}
}

/* Edge nudges */
.nav:not(.is-compact) .brand{margin-left:calc(-1 * var(--edge-nudge))}
.menu-bar .brand{margin-left:calc(-1 * var(--edge-nudge))}
.menu-bar{padding-right:var(--pad)}
.menu-close{justify-self:end !important;display:flex;align-items:center;justify-content:flex-end;
    padding:12px 0 12px 6px !important;margin-right:calc(-1 * var(--edge-nudge)) !important}
@media (orientation:portrait),(max-width:820px){
    .nav .nav-actions{justify-content:flex-end !important;justify-self:end !important;margin-right:calc(-1 * var(--edge-nudge))}
}

/* Home (full-bleed; no scroll) */
body.home::before{
    content:"";position:fixed;inset:0;z-index:-1;background:url("/assets/main.jpg") center center/cover no-repeat;
}
.hero-blank{
    position:relative;min-height:calc(100svh - var(--navH));display:grid;align-items:start;padding-top:var(--hero-offset);
}
.home .section{margin:0}
.home .nav{border-bottom:0;box-shadow:inset 0 -1px 0 var(--muted)}
.home .hero-title{color:#fff}
.home .hero-content p{color:rgba(255,255,255,.92);max-width:56ch;font-size:clamp(13px,1.9vw,16px)}
.home .site-foot{
    position:fixed;left:0;right:0;bottom:0;background:transparent;
    padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom,0px));
    color:rgba(255,255,255,.85);font-size:11px;letter-spacing:.02em;pointer-events:none;
}
.site-foot .container{display:flex;justify-content:flex-start;align-items:center;text-align:left}

/* Our Story (no scroll) */
body.story{overflow:hidden}
.story .section{margin:0}
.story-hero{min-height:calc(100svh - var(--navH));display:grid;align-items:center;overflow:hidden}
.story-hero .story-grid{display:grid;grid-template-columns:1fr minmax(260px,420px);gap:clamp(24px,4vw,56px);align-items:center}
@media (max-width:900px){.story-hero .story-grid{grid-template-columns:1fr}.story-book{order:2}}
.story-copy .tagline{opacity:.75;text-transform:uppercase;letter-spacing:.08em;font-size:12px}
.story-copy .intro{margin-top:16px}
.story-copy .ctas{margin-top:24px}

/* Book card (crisp) */
.story-book .book-card{
    position:relative;padding:10px;border:1px solid var(--muted);border-radius:12px;background:#fff;
    box-shadow:0 6px 14px rgba(0,0,0,.06);transform:none !important;filter:none !important;
}
.story-book .book-card::before{display:none !important}
.story-book .book-card img{
    width:100%;height:auto;border-radius:8px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.04);transform:none !important;image-rendering:auto;
}
.story-book .book-card:hover{box-shadow:0 10px 24px rgba(0,0,0,.08);border-color:#ddd}

/* Story footer */
.story .site-foot{
    position:fixed;left:0;right:0;bottom:0;background:transparent;
    padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom,0px));
    font-size:11px;letter-spacing:.02em;color:#555;pointer-events:none;
}

/* Collection (no scroll) */
body.collection::before{
    content:"";position:fixed;inset:0;z-index:-1;background:url("/assets/collection.png") center center/cover no-repeat;
}
body.collection{overflow:hidden}
.collection .section{margin:0}
.collection-hero{min-height:calc(100svh - var(--navH));display:block;padding:0}
.collection-hero .container{
    display:flex;justify-content:flex-end;align-items:flex-start;padding-top:clamp(24px,10vh,120px);
}
.collection-panel{
    max-width:760px;background:rgba(255,255,255,.76);border:1px solid rgba(255,255,255,.95);
    box-shadow:0 20px 60px rgba(0,0,0,.18);border-radius:10px;padding:clamp(16px,2.6vw,24px);backdrop-filter:blur(4px);
}
.collection-title{display:flex;gap:12px;align-items:baseline;margin:0 0 10px;line-height:1}
.collection-title .title-en{
    font-family:"Fira Sans Condensed",Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
    font-weight:600;font-size:clamp(20px,4.4vw,28px);letter-spacing:.04em;
}
.collection-title .title-kr{
    font-family:"Sandoll OnGothic","SD OnGothic","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
    font-weight:600;font-size:clamp(18px,3.8vw,24px);letter-spacing:.02em;
}
body[data-lang="kr"] .collection-title .title-en{display:none !important}
body[data-lang="en"] .collection-title .title-kr{display:none !important}
.collection-desc{margin-top:6px}
.collection-desc p{margin:0 0 10px;line-height:1.5}
.collection-desc p.kr{
    font-family:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",Inter,system-ui,sans-serif;
    font-size:clamp(14px,2.2vw,17px);color:#1a1a1a;
}
.collection-desc p.en{
    font-family:"Galvji",ui-rounded,"SF Pro Rounded",Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
    font-size:clamp(13.5px,2.0vw,16px);color:#252525;
}
.btn-store{font-family:"Sandoll OnGothic","SD OnGothic","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;border-color:#111;color:#111;background:transparent}
.btn-store:hover{background:#111;color:#fff}
.collection .nav-links a{white-space:nowrap}
.collection .site-foot{
    position:fixed;left:0;right:0;bottom:0;background:transparent;
    padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom,0px));
    color:rgba(255,255,255,.90);font-size:11px;letter-spacing:.02em;pointer-events:none;
}

/* Scene */
.scene-intro .intro-row{display:flex;align-items:flex-start;gap:clamp(12px,3vw,28px);flex-wrap:nowrap}
.scene-intro .hero-title{margin:0;line-height:1;white-space:nowrap}
.scene-intro .intro-copy{display:inline-block;position:relative;top:4px;font-size:14px;line-height:1.3}
body[data-lang="en"] .scene-intro .intro-copy{inline-size:var(--scene-sub-w-en)}
body[data-lang="kr"] .scene-intro .intro-copy{inline-size:var(--scene-sub-w-kr)}
.scene-intro .intro-copy p{margin:0}
.scene-intro .intro-copy .line1,.scene-intro .intro-copy .line2{display:block;white-space:nowrap;text-wrap:nowrap}

/* Row-major 3-col grid; tight gaps */
.scene-board{
    display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:10px !important;grid-gap:10px !important;max-width:1200px;margin:0 auto;padding:0 var(--pad) 60px;
}
.scene-tile{
    position:relative !important;overflow:hidden !important;border-radius:12px !important;
    box-shadow:0 6px 14px rgba(0,0,0,.06);aspect-ratio:auto !important;margin:0 !important;
}
.scene-tile .media{position:static !important;inset:auto !important;width:100% !important;height:auto !important}
.scene-tile img{position:static !important;display:block !important;width:100% !important;height:auto !important;z-index:0 !important}
.scene-tile video{
    position:absolute !important;inset:0;width:100% !important;height:100% !important;object-fit:cover !important;
    opacity:0;transition:opacity .22s ease;z-index:1;pointer-events:none;
}
.scene-tile:hover video{opacity:1}
@media (hover:none){
    .scene-tile:hover video{opacity:0}
    .scene-tile.is-playing video{opacity:1}
}
/* Lock SCENE title size */
.scene-intro .scene-title{font-size:48px !important;line-height:1.05}

/* Global footer baseline */
.site-foot{
    position:relative;left:0;right:0;background:transparent;
    padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom,0px));
    color:#333;font-size:12px;letter-spacing:.02em;
}
/* Page-flow footers from Scene onward */
.scene .site-foot,.consulting .site-foot,.contact .site-foot{
    position:static !important;left:auto !important;right:auto !important;bottom:auto !important;
    padding:10px var(--pad);color:#555;font-size:11px;letter-spacing:.02em;pointer-events:auto;margin-top:48px;
}

/* Consulting */
.consulting .section{margin:0}
.consulting-hero{position:relative}
.consulting-hero .consulting-bg{display:block;width:100%;height:auto}
.consulting-panel{
    position:absolute;z-index:1;top:clamp(12px,8vw,64px);
    right:clamp(8px,2vw,var(--pad));max-width:min(88vw,480px);
    padding:clamp(12px,2.2vw,18px);border-radius:10px;background:rgba(255,255,255,.76);
    border:1px solid rgba(255,255,255,.95);backdrop-filter:blur(4px);box-shadow:0 20px 60px rgba(0,0,0,.18);
}
.consulting-title{
    margin:0 0 8px;font-family:"Fira Sans Condensed",Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
    font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:clamp(18px,2.8vw,24px);line-height:1.1;
}
.consulting-panel .collection-desc p{margin:0 0 8px;line-height:1.45;font-size:clamp(13px,2.0vw,15px)}
.consulting-grid{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:10px !important;grid-gap:10px !important;margin-top:24px;padding-bottom:60px;
}
.consulting-tile{border-radius:12px;overflow:hidden;box-shadow:0 6px 14px rgba(0,0,0,.06);margin:0 !important}
.consulting-tile img{display:block;width:100%;height:auto;border-radius:inherit}

/* Contact (non-scroll; side-cropped image; footer in flow) */
body.contact{overflow:hidden}
.contact-split{
    display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(16px,3vw,28px);align-items:start;
    padding:12px var(--pad);height:calc(100svh - var(--navH) - 56px);min-height:0;
}
.contact-photo{position:relative;height:100%}
.contact-photo img{
    width:100%;height:100%;object-fit:cover;object-position:53% center;border-radius:12px;box-shadow:0 6px 14px rgba(0,0,0,.06);
}
.contact-panel{display:flex;flex-direction:column;justify-content:flex-start;height:100%;overflow:hidden;padding:4px 0}
.contact-title{
    margin:0 0 6px;font-family:"Fira Sans Condensed",Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
    font-weight:800;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(24px,4.4vw,40px);line-height:1.05;
}
.contact-sub{margin:0 0 14px;font-size:13px;color:#444}
.contact-form{display:grid;gap:8px}
.contact-form input,.contact-form textarea{
    width:100%;font:inherit;padding:12px 14px;border:1px solid var(--muted);border-radius:8px;background:#fff;
}
.contact-form textarea{resize:vertical;min-height:120px}
.btn-primary{border:1px solid #111;background:#111;color:#fff;border-radius:999px;padding:10px 16px;font-weight:600}
.btn-primary:hover{transform:none}
.contact-alt{margin-top:10px;font-size:12px;color:#555}
.visually-hidden{
    position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);
    white-space:nowrap;clip-path:inset(50%);
}
/* Keep two columns even on smaller widths to avoid vertical scroll */
@media (max-width:920px){
    .contact-split{grid-template-columns:1fr 1fr !important;gap:12px}
}

/* Social icons (replace with assets) */
.icon-btn[aria-label="Email"],
.icon-btn[aria-label="Instagram"],
.icon-btn[aria-label="YouTube"]{
    width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;
    background-size:contain;background-repeat:no-repeat;background-position:center;
}
.icon-btn[aria-label="Email"] .icon,
.icon-btn[aria-label="Instagram"] .icon,
.icon-btn[aria-label="YouTube"] .icon{display:none !important}
.icon-btn[aria-label="Email"]{background-image:url("/assets/icon/email.PNG")}
.icon-btn[aria-label="YouTube"]{background-image:url("/assets/icon/youtube.PNG")}
.icon-btn[aria-label="Instagram"]{
    background-image:url("/assets/icon/instagram.GIF");
    filter:grayscale(1) contrast(.9) brightness(.95);transition:filter .2s ease,transform .2s ease;
}
.icon-btn[aria-label="Instagram"]:hover{filter:none;transform:translateY(-1px)}
.icon-btn[aria-label="Email"]:hover,
.icon-btn[aria-label="YouTube"]:hover{transform:translateY(-1px)}

/* ===== Titles: modern & unified ===== */
.hero-title,
.scene-intro .scene-title,
.contact-title,
.consulting-title,
.collection-title .title-en {
    font-family: "Fira Sans Condensed", Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-weight: 800;
    letter-spacing: .01em;
}

/* Korean titles use modern Gothic (fallbacks if Sandoll not present) */
body[data-lang="kr"] .hero-title,
body[data-lang="kr"] .scene-intro .scene-title,
body[data-lang="kr"] .consulting-title,
body[data-lang="kr"] .collection-title .title-kr {
    font-family: "SD OnGothic", "Sandoll OnGothic", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", Inter, system-ui, sans-serif !important;
    font-weight: 800;
}

/* Our Story: cleaner alignment + rhythm (desktop & mobile) */
.story-copy {
    max-width: 62ch;
    line-height: 1.55;
    text-align: left;
    font-feature-settings: "ss01","liga";
}

/* Scene: lock size but keep modern tone */
.scene-intro .scene-title{
    font-size: 48px !important;
    line-height: 1.05;
}

/* Scene subtitle: modern tone (slightly smaller, tighter leading) */
.scene-intro .intro-copy{
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.35;
    color: #222;
}

/* Contact: modern tone across form + microcopy */
.contact-title{
    font-weight: 800;
}
.contact-sub,
.contact-form input,
.contact-form textarea,
.contact-alt{
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    letter-spacing: .01em;
}

/* Collection (mobile): move the translucent panel further DOWN so it feels airier */
@media (max-width: 900px){
    .collection-hero .container{
        justify-content: center;
        padding-top: min(56vh, 440px);  /* push panel lower */
    }
    .collection-panel{ max-width: 92vw; }
}

/* === Mixed-language font routing: Latin uses EN fonts in KR mode === */
:root{
    --font-latin-title: "Fira Sans Condensed", Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-latin-body:  Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-hangul:      "SD OnGothic","Sandoll OnGothic","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
}

/* Global default in KR mode: Latin first; Hangul falls back to KR fonts */
body[data-lang="kr"]{
    font-family: var(--font-latin-body), var(--font-hangul) !important;
}

/* Titles (KR mode): English letters use Fira; Hangul uses KR stack */
body[data-lang="kr"] .hero-title,
body[data-lang="kr"] .scene-intro .scene-title,
body[data-lang="kr"] .consulting-title,
body[data-lang="kr"] .collection-title .title-kr{
    font-family: var(--font-latin-title), var(--font-hangul) !important;
}

/* Body text that previously forced KR fonts first */
body[data-lang="kr"] .collection-desc p.kr,
body[data-lang="kr"] .scene-intro .intro-copy,
body[data-lang="kr"] .story-copy,
body[data-lang="kr"] .contact-sub,
body[data-lang="kr"] .contact-form input,
body[data-lang="kr"] .contact-form textarea{
    font-family: var(--font-latin-body), var(--font-hangul) !important;
}

/* Utility: force English font anywhere if needed */
.en-font{ font-family: var(--font-latin-body) !important; }

/* === COLLECTION: make the panel compact again === */
.collection-panel{
    max-width: 560px !important;              /* was 760px; override to smaller */
    padding: clamp(14px, 2.2vw, 20px) !important;
    border-radius: 10px !important;
}

/* Mobile: keep it small and still push it lower without widening */
@media (max-width: 900px){
    .collection-hero .container{
        justify-content: flex-end !important;    /* don't center; keep right-aligned */
        padding-top: min(56vh, 440px) !important;/* keep the “lower” feel */
    }
    .collection-panel{
        max-width: min(520px, 88vw) !important;  /* compact on small screens */
    }
}

/* Collection: single unified title */
.collection-title .title-any{
    font-family: "Fira Sans Condensed", Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 800;
    font-size: clamp(20px, 4.4vw, 28px);
    letter-spacing: .04em;
    line-height: 1;
}

/* === HOME — horizontal centering + uniform small text === */
/* keeps your existing vertical offset/min-height */
.home .hero-blank .container{
    width: min(92vw, 60ch);
    margin-inline: auto;              /* center horizontally */
    display: flex;
    flex-direction: column;
    align-items: center;              /* center the block */
    text-align: center;               /* center the lines */
}

/* one size for everything on the Home hero */
.home .hero-title,
.home .hero-content,
.home .hero-content p{
    font-size: 14px !important;
    line-height: 1.5;
    letter-spacing: .01em;
    margin: 0;
    color: #fff;                      /* keep white over the photo */
}

/* tiny spacing between lines */
.home .hero-content p + p{ margin-top: 4px; }

/* ===== HARD CENTERING (no vertical change) ===== */

/* HOME: center block horizontally + make all lines same small size */
.home .hero-blank{
    display: flex !important;
    justify-content: center !important;   /* center the inner block */
    align-items: flex-start !important;   /* keep your current vertical height */
}

.home .hero-blank > .container,
.home .hero-blank > *:not(style){       /* catches your inner wrapper even if class changes */
    max-width: 60ch !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
}

/* same small size for all hero text */
.home .hero-title,
.home .hero-content,
.home .hero-content p{
    font-size: 14px !important;
    line-height: 1.5 !important;
    letter-spacing: .01em !important;
    margin: 0 !important;
    color: #fff !important;
}
@font-face{
    font-family: "AndongWolyeonggyoOTF";
    src: url("/assets/fonts/AndongWolyeonggyoOTF.woff2") format("woff2"),
    url("/assets/fonts/AndongWolyeonggyoOTF.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
.home .hero-content p + p{ margin-top: 4px !important; }

/* OUR STORY: center the whole two-column block on the page
   (text inside can stay left; only the block is centered) */
.story .story-hero{
    justify-items: center !important;     /* centers items in the grid */
}
.story .story-hero .story-grid{
    margin-left: auto !important;
    margin-right: auto !important;
    justify-items: center !important;
    width: min(92vw, 1200px) !important;
}
.story .story-copy{ text-align: left !important; }  /* keep body text left */

/* === Scene & Contact titles → Andong === */
.scene-intro .scene-title,
.contact .contact-title{
    font-family: "AndongWolyeonggyoOTF", "Noto Sans KR", system-ui, sans-serif !important;
    font-weight: 400 !important;   /* Andong is typically a display face */
}

/* === Home page text === */
/* Top line/headline */
.home .hero-title{
    font-family: "Gowun Batang", serif !important;
    font-size: clamp(18px, 2.2vw, 24px) !important;  /* a bit bigger */
    line-height: 1.5 !important;
    letter-spacing: 0.01em;
}

/* Bottom copy paragraph(s) */
.home .hero-content p{
    font-family: "Noto Sans KR", system-ui, sans-serif !important;
    font-size: clamp(15px, 2.0vw, 18px) !important;  /* slightly bigger than before */
    line-height: 1.55 !important;
}

/* If you want *all* home text (including any stray spans) to follow that pairing: */
.home .hero-content{
    font-family: "Noto Sans KR", system-ui, sans-serif !important;
}

/* Home hero: top line = Gowun Batang, lines below = Noto Sans KR */
.home .hero-title{
    font-family: "Gowun Batang", serif !important;
    font-weight: 700;
    /* small size but slightly bigger per your request */
    font-size: clamp(18px, 2.1vw, 22px);
}

.home .hero-content p{
    font-family: "Noto Sans KR", "Noto Sans CJK KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif !important;
    font-weight: 400;
    font-size: clamp(14px, 1.8vw, 18px);
}

/* If you have any global rule that forces Inter in KR mode,
   this keeps our Home hero fonts from being overridden */
body[data-lang="kr"] .home .hero-title,
body[data-lang="kr"] .home .hero-content p{
    font-family: inherit !important;
}

/* Home hero: top line = Gowun Batang, lines below = Noto Sans KR */
.home .hero-title{
    font-family: "Gowun Batang", serif !important;
    font-weight: 700;
    /* small size but slightly bigger per your request */
    font-size: clamp(18px, 2.1vw, 22px);
}

.home .hero-content p{
    font-family: "Noto Sans KR", "Noto Sans CJK KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif !important;
    font-weight: 400;
    font-size: clamp(14px, 1.8vw, 18px);
}

/* If you have any global rule that forces Inter in KR mode,
   this keeps our Home hero fonts from being overridden */
body[data-lang="kr"] .home .hero-title,
body[data-lang="kr"] .home .hero-content p{
    font-family: inherit !important;
}

/* === Unify all non-Home titles to match SCENE (48px) === */
:root{ --title-size-nonhome: 48px; }

.story .hero-title,                          /* Our Story */
.collection .collection-title .title-any,    /* Collection (unified title) */
.collection .collection-title .title-en,     /* Collection (fallbacks) */
.collection .collection-title .title-kr,
.consulting .consulting-title,               /* Consulting */
.contact .contact-title,                     /* Contact */
.scene-intro .scene-title {                  /* Scene (kept same for consistency) */
    font-size: var(--title-size-nonhome) !important;
    line-height: 1.05 !important;
}

/* ==== Force non-Home titles to match SCENE (48px) ==== */
:root { --title-size-nonhome: 48px; }

/* Our Story */
.story .story-hero h1,
.story .hero-title,
.story .story-title{
    font-size: var(--title-size-nonhome) !important;
    line-height: 1.05 !important;
}

/* Collection (cover both the wrapper and any inner spans) */
.collection .collection-title,
.collection .collection-title .title-any,
.collection .collection-title .title-en,
.collection .collection-title .title-kr{
    font-size: var(--title-size-nonhome) !important;
    line-height: 1.05 !important;
}

/* Contact */
.contact .contact-title{
    font-size: var(--title-size-nonhome) !important;
    line-height: 1.05 !important;
}

/* Keep SCENE as the reference (already 48px) */
.scene-intro .scene-title{
    font-size: var(--title-size-nonhome) !important;
    line-height: 1.05 !important;
}

/* Default static PNG */
.icon-btn[aria-label="Instagram"]{
    background-image: url("/assets/icon/instagram.png");
    filter: grayscale(1) contrast(.9) brightness(.95);
    transition: filter .2s ease, transform .2s ease, background-image .0s;
}
/* Swap to GIF only on hover */
.icon-btn[aria-label="Instagram"]:hover{
    background-image: url("/assets/icon/instagram.GIF");
    filter: none;
    transform: translateY(-1px);
}

/* === Make Story/Consulting/Collection titles match SCENE & CONTACT === */
/* Andong display face, same size & rhythm as SCENE (48px, 1.05) */
:root { --title-like-scene: 48px; }

.story .hero-title,
.story .story-title, /* use this if your GOOD ONE TABLE is wrapped with class="story-title" */
.consulting .consulting-title,
.collection .collection-title,
.collection .collection-title .title-any,
.collection .collection-title .title-en,
.collection .collection-title .title-kr {
    font-family: "AndongWolyeonggyoOTF", "Noto Sans KR", system-ui, sans-serif !important;
    font-weight: 400 !important;
    font-size: var(--title-like-scene) !important;
    line-height: 1.05 !important;
    letter-spacing: .01em !important;
}

/* Keep SCENE/CONTACT as-is (already Andong @ 48px)
   — included here just to ensure everything matches */
.scene-intro .scene-title,
.contact .contact-title {
    font-family: "AndongWolyeonggyoOTF", "Noto Sans KR", system-ui, sans-serif !important;
    font-weight: 400 !important;
    font-size: var(--title-like-scene) !important;
    line-height: 1.05 !important;
    letter-spacing: .01em !important;
}

/* Our Story title: only "GOOD ONE TABLE" uses the SCENE/CONTACT style */
.story .story-title .story-title-base{
    font-family: var(--font-latin-title, "Fira Sans Condensed"), Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-weight: 800 !important;               /* your usual title weight */
    letter-spacing: .01em;
}

.story .story-title .story-title-andong{
    font-family: "AndongWolyeonggyoOTF", "Noto Sans KR", system-ui, sans-serif !important;
    font-weight: 400 !important;               /* match SCENE/CONTACT feel */
    letter-spacing: .01em;
    /* Size/line-height inherit from the <h1>, which you already set to 48px */
}

/* === HOME — force horizontal center at all widths === */
body.home .hero-blank{
    display: grid !important;
    place-items: start center !important;   /* vertical = start, horizontal = center */
}

/* Catch the actual hero wrapper no matter what it's called */
body.home .hero-blank > .container,
body.home .hero-blank > .section,
body.home .hero-blank > .content,
body.home .hero-blank > .hero,
body.home .hero-blank > div{
    justify-self: center !important;        /* center the block itself */
    width: min(92vw, 60ch) !important;      /* narrow readable width */
    max-width: 60ch !important;
    margin-inline: auto !important;         /* horizontal center */
    padding-left: 16px !important;
    padding-right: 16px !important;
    text-align: center !important;          /* center lines */
}

/* If your markup nests one more <div> inside, center that too */
body.home .hero-blank > div > .container,
body.home .hero-blank > div{
    justify-self: center !important;
    width: min(92vw, 60ch) !important;
    max-width: 60ch !important;
    margin-inline: auto !important;
    text-align: center !important;
}

/* === OUR STORY — center the two-column block; keep text left === */
body.story .story-hero{
    display: grid !important;
    place-items: center start !important;   /* center horizontally, keep top alignment */
}

body.story .story-hero .story-grid{
    margin-inline: auto !important;         /* center the grid wrapper */
    justify-items: center !important;
    width: min(92vw, 1200px) !important;
}

body.story .story-copy{
    text-align: left !important;            /* keep paragraphs left */
}

.scene-modal[hidden]{display:none}
.scene-modal{
    position:fixed; inset:0; z-index:999;
    display:grid; place-items:center;
}
.scene-modal__backdrop{
    position:absolute; inset:0;
    background:rgba(0,0,0,.6); backdrop-filter:blur(2px);
}
.scene-modal__dialog{
    position:relative;
    width:min(96vw, 720px);
    border-radius:12px; overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,.4);
    background:#000;
}
.scene-modal__dialog video{display:block; width:100%; height:auto; background:#000}
.scene-modal__close{
    position:absolute; top:8px; right:8px;
    width:36px; height:36px;
    border:0; border-radius:999px;
    background:rgba(0,0,0,.6); color:#fff;
    font-size:24px; line-height:1; display:grid; place-items:center; cursor:pointer;
}

/* Only used on touch devices; desktop still uses hover-in-grid */
@media (hover:hover){
    .scene-modal{display:none !important}
}

/* === COLLECTION: make the right-side panel narrower === */
.collection-panel{
    max-width: 440px !important;            /* was 560px */
    padding: clamp(12px, 2vw, 18px) !important;
    border-radius: 10px !important;
}

/* Keep it compact on mobile/tablet too */
@media (max-width: 1200px){
    .collection-panel{ max-width: 400px !important; }
}
@media (max-width: 900px){
    .collection-panel{
        max-width: min(360px, 86vw) !important;
    }
}

/* (Optional) limit text line length inside for nicer rhythm */
.collection-panel .collection-desc{
    max-width: 58ch;  /* tweak 52–62ch as you like */
}

/* ==== MOBILE: make Collection & Consulting boxes smaller ==== */
@media (max-width: 680px){
    /* COLLECTION panel */
    .collection-panel{
        max-width: min(320px, 82vw) !important;   /* narrower box */
        padding: 12px 14px !important;            /* tighter padding */
    }
    .collection .collection-title,
    .collection .collection-title .title-any{
        font-size: clamp(22px, 7vw, 34px) !important;  /* prevent title from blowing up the box */
        line-height: 1.05 !important;
    }
    .collection .collection-desc p{
        font-size: clamp(12px, 3.6vw, 14px) !important; /* optional: keep copy compact */
    }

    /* CONSULTING panel (still overlaid on the image, just slimmer) */
    .consulting-panel{
        max-width: min(320px, 86vw) !important;   /* much smaller on phones */
        right: var(--pad) !important;             /* keep pinned to the right edge */
        left: auto !important;                    /* ensure it doesn't stretch */
        padding: 12px 14px !important;            /* tighter padding */
    }
    .consulting-title{
        font-size: clamp(22px, 7vw, 34px) !important;
        line-height: 1.05 !important;
    }
    .consulting-panel .collection-desc p{
        font-size: clamp(12px, 3.6vw, 14px) !important;
    }
}

/* (Optional) even smaller for very narrow screens */
@media (max-width: 360px){
    .collection-panel,
    .consulting-panel{
        max-width: min(300px, 88vw) !important;
    }
}

/* === SCENE: tighten space between intro text and video grid === */
/* The big gap comes from .section { margin:72px auto } */
.scene-intro.section{
    margin-bottom: 14px !important;   /* was ~72px from .section */
}

/* Make sure the grid itself doesn’t add extra space */
.scene-board{
    margin-top: 0 !important;
    padding-top: 0 !important;        /* already 0, just enforcing */
}

/* Slightly tighter rhythm inside the intro block */
.scene-intro .intro-row{ margin-bottom: 6px !important; }
.scene-intro .intro-copy p{ margin: 0 0 4px !important; }

/* Mobile: even tighter */
@media (max-width: 820px){
    .scene-intro.section{ margin-bottom: 10px !important; }
    .scene-board{ gap: 8px !important; padding-bottom: 40px !important; }
}

/* === SCENE — mobile gap fix (robust) === */
@media (max-width: 900px), (orientation: portrait){
    /* If your body is <body class="scene"> or older <body class="film"> */
    body.scene .section:first-of-type,
    body.film .section:first-of-type{
        margin-bottom: 10px !important;   /* was ~72px */
    }

    /* Scene intro block itself */
    body.scene .scene-intro,
    body.film .scene-intro{
        margin-bottom: 10px !important;
        padding-bottom: 0 !important;
    }

    /* Tighter rhythm in the intro text */
    .scene-intro .intro-row{ margin-bottom: 6px !important; }
    .scene-intro .intro-copy p{ margin: 0 0 4px !important; }

    /* Grid right under the intro */
    .scene-board{
        margin-top: 0 !important;
        padding-top: 0 !important;
        gap: 8px !important;              /* a bit tighter on mobile */
    }
}

/* =========================
   MOBILE FIXES — COLLECTION
   ========================= */
@media (max-width: 900px), (orientation: portrait){
    /* Allow scrolling on small screens (the page was locked) */
    body.collection{ overflow: auto !important; }

    /* Pull the panel back INTO view and make it smaller */
    body.collection .collection-hero .container{
        justify-content: flex-end !important;
        align-items: flex-start !important;
        padding-top: 18vh !important;       /* was min(56vh, 440px) pushing it below */
        padding-bottom: 12px !important;
    }

    body.collection .collection-panel{
        max-width: min(340px, 86vw) !important;  /* narrower */
        padding: 12px 14px !important;           /* tighter padding */
        border-radius: 10px !important;
        box-shadow: 0 12px 28px rgba(0,0,0,.16) !important;
    }

    /* Slightly smaller type inside the panel for balance */
    body.collection .collection-title{ margin: 0 0 6px !important; }
    body.collection .collection-title .title-any{ font-size: 18px !important; line-height: 1.1 !important; }
    body.collection .collection-desc p{ font-size: 13px !important; line-height: 1.45 !important; }
}

/* =========================
   MOBILE FIXES — CONSULTING
   ========================= */
@media (max-width: 900px), (orientation: portrait){
    body.consulting .consulting-panel{
        top: 10px !important;
        right: 10px !important;
        max-width: min(340px, 88vw) !important;   /* smaller box */
        padding: 12px 14px !important;            /* tighter padding */
        border-radius: 10px !important;
        box-shadow: 0 12px 28px rgba(0,0,0,.16) !important;
    }

    /* Make the title + copy scale down on phones */
    body.consulting .consulting-title{
        font-size: 22px !important;    /* previously bumped by global 48px rule */
        line-height: 1.12 !important;
        letter-spacing: .01em !important;
    }
    body.consulting .collection-desc p{
        font-size: 13px !important;
        line-height: 1.45 !important;
    }
}

/* CONSULTING — make the overlay panel + text a bit smaller on mobile */
@media (max-width: 900px), (orientation: portrait){
    body.consulting .consulting-panel{
        top: 8px !important;
        right: 8px !important;
        max-width: min(310px, 84vw) !important;   /* narrower than before */
        padding: 10px 12px !important;            /* tighter padding */
        box-shadow: 0 10px 24px rgba(0,0,0,.14) !important;
    }
    body.consulting .consulting-title{
        font-size: 20px !important;               /* down from 22px */
        line-height: 1.12 !important;
        letter-spacing: .005em !important;
    }
    body.consulting .collection-desc p{
        font-size: 12.5px !important;             /* down slightly */
        line-height: 1.45 !important;
    }
}

/* Ultra-small screens: dial it down one more notch */
@media (max-width: 480px){
    body.consulting .consulting-panel{
        max-width: min(300px, 86vw) !important;
    }
    body.consulting .consulting-title{ font-size: 18px !important; }
    body.consulting .collection-desc p{ font-size: 12px !important; }
}

/* CONTACT — hide image on mobile; make form full width */
@media (max-width: 900px), (orientation: portrait){
    body.contact .contact-photo{
        display: none !important;               /* hide the image column */
    }
    body.contact .contact-split{
        grid-template-columns: 1fr !important;  /* single column */
        gap: 12px !important;
        height: auto !important;                /* let content define height */
        min-height: calc(100svh - var(--navH)) !important;
        padding: 12px var(--pad) 0 !important;
    }
    body.contact .contact-panel{
        height: auto !important;
        max-width: 720px !important;
        margin-inline: auto !important;         /* center the form block */
    }
    .contact .site-foot{
        margin-top: 16px !important;
    }
}

/* OUR STORY — hide inline book on mobile and show modal styles */
@media (max-width: 900px), (orientation: portrait){
    /* remove the book card from the layout on mobile */
    body.story .story-book{ display:none !important; }
}

/* Modal (mobile) */
.storybook-modal[hidden]{ display:none !important; }
.storybook-modal{
    position:fixed; inset:0; z-index:999; display:grid; place-items:center;
}
.storybook-modal__backdrop{
    position:absolute; inset:0;
    background:rgba(0,0,0,.65); backdrop-filter:blur(2px);
}
.storybook-modal__dialog{
    position:relative;
    width:min(92vw, 520px);
    border-radius:12px; overflow:hidden;
    background:#000; box-shadow:0 20px 60px rgba(0,0,0,.45);
}
.storybook-modal__img{ display:block; width:100%; height:auto; background:#000; }
.storybook-modal__close{
    position:absolute; top:8px; right:8px;
    width:36px; height:36px; border:0; border-radius:999px;
    background:rgba(0,0,0,.6); color:#fff; font-size:24px; line-height:1;
    display:grid; place-items:center; cursor:pointer;
}

/* OUR STORY — hide inline book on mobile and show modal styles */
@media (max-width: 900px), (orientation: portrait){
    /* remove the book card from the layout on mobile */
    body.story .story-book{ display:none !important; }
}

/* Modal (mobile) */
.storybook-modal[hidden]{ display:none !important; }
.storybook-modal{
    position:fixed; inset:0; z-index:999; display:grid; place-items:center;
}
.storybook-modal__backdrop{
    position:absolute; inset:0;
    background:rgba(0,0,0,.65); backdrop-filter:blur(2px);
}
.storybook-modal__dialog{
    position:relative;
    width:min(92vw, 520px);
    border-radius:12px; overflow:hidden;
    background:#000; box-shadow:0 20px 60px rgba(0,0,0,.45);
}
.storybook-modal__img{ display:block; width:100%; height:auto; background:#000; }
.storybook-modal__close{
    position:absolute; top:8px; right:8px;
    width:36px; height:36px; border:0; border-radius:999px;
    background:rgba(0,0,0,.6); color:#fff; font-size:24px; line-height:1;
    display:grid; place-items:center; cursor:pointer;
}

/* ===== OUR STORY — Mobile reading polish ===== */
@media (max-width: 900px), (orientation: portrait){
    /* one column + comfortable width */
    body.story .story-hero{
        align-items: start !important;
        padding-top: 8px !important;
    }
    body.story .story-hero .story-grid{
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        width: min(94vw, 64ch) !important;
        margin-inline: auto !important;
        justify-items: start !important;
    }

    /* hide inline book on mobile (modal handles it) */
    body.story .story-book{ display:none !important; }

    /* text rhythm */
    body.story .story-copy{
        max-width: 64ch !important;
        font-size: 15.5px !important;
        line-height: 1.7 !important;
        letter-spacing: .01em;
        color: #141414;
        text-align: left !important;
    }
    body.story .story-copy p{
        margin: 0 0 12px !important;
        text-wrap: pretty;
    }
    /* slightly larger first paragraph (lead) */
    body.story .story-copy p:first-of-type{
        font-size: 16.5px !important;
        line-height: 1.75 !important;
        opacity: .95;
    }

    /* small uppercase kicker */
    body.story .story-copy .tagline{
        font-size: 11.5px !important;
        letter-spacing: .12em !important;
        text-transform: uppercase;
        opacity: .7 !important;
        margin: 0 0 8px !important;
    }

    /* balanced headings */
    body.story .story-copy h1,
    body.story .story-copy h2{
        font-size: 24px !important;
        line-height: 1.2 !important;
        text-wrap: balance;
        margin: 0 0 10px !important;
    }

    /* lists & links */
    body.story .story-copy ul,
    body.story .story-copy ol{
        padding-left: 1.1em !important;
        margin: 0 0 12px !important;
    }
    body.story .story-copy li + li{ margin-top: 4px; }
    body.story .story-copy a{
        text-decoration: none;
        border-bottom: 1px solid #ccc;
    }

    /* soft separator if you use <hr> */
    body.story .story-copy hr{
        border: 0;
        border-top: 1px solid var(--muted);
        margin: 12px 0 !important;
    }

    /* images inside the story text */
    body.story .story-copy img{
        display: block;
        width: 100%; height: auto;
        border-radius: 10px;
        margin: 10px 0;
        box-shadow: 0 6px 14px rgba(0,0,0,.06);
    }

    /* equal side padding */
    body.story .container{ padding-inline: 18px !important; }

    /* language-aware breaking */
    body[data-lang="kr"] .story-copy{
        word-break: keep-all !important;
        hyphens: manual !important;
    }
    body[data-lang="en"] .story-copy{
        hyphens: auto !important;
    }
}

/* Our Story — book modal (mobile only) */
.story-modal[hidden]{display:none}
.story-modal{
    position:fixed; inset:0; z-index:1000;
    display:grid; place-items:center;
    opacity:0; transform:translateY(4px);
    transition:opacity .2s ease, transform .2s ease;
}
.story-modal.is-open{opacity:1; transform:none}
.story-modal__backdrop{position:absolute; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(2px)}
.story-modal__dialog{
    position:relative; width:min(92vw, 540px);
    border-radius:12px; overflow:hidden; background:#000;
    box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.story-modal__dialog img{display:block; width:100%; height:auto; background:#000}
.story-modal__close{
    position:absolute; top:8px; right:8px;
    width:36px; height:36px; border:0; border-radius:999px;
    background:rgba(0,0,0,.6); color:#fff; font-size:24px; line-height:1;
    display:grid; place-items:center; cursor:pointer;
}
/* show modal only on touch/mobile; desktop keeps inline layout */
@media (hover:hover){ .story-modal{display:none !important} }
/* hide inline book on mobile since the modal shows it */
@media (hover:none){ body.story .story-book{ display:none !important; } }