/* ==========================================================================
   MALSUM FOREST — WEBSITE V2 FULL HOME
   Visual targets: design/V2_DESKTOP_FULL_HOME.png, V2_MOBILE_FULL_HOME.png,
   V2_HERO_REFERENCE.png (layout / hierarchy / breathing — not pixel copies).
   Desktop (>=1024px): every measure is a design unit (1u = 1/1024 of the
   viewport, capped at 1920px) so wraps, crops and rhythm stay as composed.
   Tablet / mobile re-set the same editorial system at fixed, readable sizes;
   mobile follows its own composition (focal scene > title > reading order).
   Accessibility: visible focus, 44px targets on touch, reduced-motion safe.
   ========================================================================== */

:root{
  --s: calc(min(100vw, 1920px) / 1024);   /* 1 design unit */

  --paper:#fbfbfb;        /* hero / books / stories ground */
  --white:#fcfcfc;        /* why panel */
  --beige:#f0e6d9;        /* featured book */
  --cream:#f6ebdd;        /* about */
  --mist:#f4f8fb;         /* visual editorial world */
  --navy:#011e4c;         /* footer */

  --ink:#15171b;
  --ink-2:#33363b;
  --ink-3:#5b5f66;
  --line:#2a2d32;

  /* editorial accents — one dominant accent per view, chosen against its ground */
  /* three small colour planes (why · featured · about) + black hand-drawn lines */
  --plane-yellow:#f0c22c;
  --plane-red:#d9432a;
  --plane-purple:#6f2f8a;
  --focus:#0b4990;

  --sans:"Noto Sans KR","Pretendard","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --serif:"Nanum Myeongjo","Apple Myungjo","Batang",serif;
  --latin:"Cormorant Garamond","Times New Roman",serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-weight:400;line-height:1.5;
  word-break:keep-all;overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,p,figure,blockquote{margin:0}
h3{font-size:inherit;font-weight:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
svg{display:block}

/* ---------- accessibility ---------- */
.skip{position:absolute;left:16px;top:-60px;z-index:100;padding:10px 14px;background:var(--navy);color:#fff;font-weight:700;border-radius:2px}
.skip:focus{top:12px;outline:2px solid #fff;outline-offset:2px}
:focus{outline:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;box-shadow:0 0 0 5px #fff;border-radius:1px}
.footer :focus-visible,.about__media :focus-visible{outline-color:#fff;box-shadow:0 0 0 5px var(--navy)}
main:focus{outline:none}

/* ---------- header: menu + in-page search ---------- */
.nav{position:relative}
.nav__links ul{display:flex}
.nav__links a{display:inline-flex;align-items:center;min-height:28px}
.nav__search,.nav__menu{display:grid;place-items:center;min-width:24px;min-height:24px;border-radius:2px}
.nav__menu-close{display:none}
.nav.is-open .nav__menu-open{display:none}
.nav.is-open .nav__menu-close{display:block}
.search{position:absolute;left:0;right:0;top:100%;z-index:60;background:#fff;border-top:1px solid #e6e8eb;border-bottom:1px solid #e6e8eb;padding:18px 24px 14px;box-shadow:0 14px 30px rgba(0,0,0,.08)}
.search[hidden]{display:none}
.search__label{display:block;font-size:12px;letter-spacing:.08em;color:var(--ink-3);margin-bottom:8px}
.search__row{display:flex;gap:8px;max-width:640px}
.search__input{flex:1;min-width:0;height:44px;padding:0 12px;font:inherit;font-size:16px;color:var(--ink);background:#fbfbfb;border:1px solid #c9cdd3;border-radius:2px}
.search__input:focus-visible{border-color:var(--focus)}
.search__go{height:44px;padding:0 18px;font-weight:700;background:var(--navy);color:#fff;border-radius:2px}
.search__results{max-width:640px;margin-top:6px}
.search__results:empty{display:none}
.search__results li a{display:flex;align-items:baseline;gap:10px;min-height:44px;padding:10px 0;border-top:1px solid #eef0f2;font-size:15px}
.search__results li a small{font-size:12px;color:var(--ink-3);letter-spacing:.06em}
.search__results .search__none{padding:10px 0;font-size:14px;color:var(--ink-3)}
.footer__social a{display:grid;place-items:center;min-width:24px;min-height:24px}

/* ---------- shared type ---------- */
.eyebrow{
  font-family:var(--latin);font-weight:600;text-transform:uppercase;
  letter-spacing:.28em;color:var(--ink-2);line-height:1.5;
}
.h2{font-weight:900;letter-spacing:-.035em;line-height:1.22;color:var(--ink)}
.body{color:var(--ink-2)}
.serif{font-family:var(--serif);font-weight:400;color:var(--ink)}
.cta{display:inline-flex;align-items:center;font-weight:700;color:var(--ink);letter-spacing:-.01em;white-space:nowrap;min-height:24px}
.cta__t{border-bottom:1.5px solid var(--line);padding-bottom:.12em}
.cta__a{color:var(--ink)}
.story__meta em{font-style:normal}
.visual__strip{grid-auto-rows:100%}
.visual__img{min-height:0}
picture{display:block}
/* mobile-only composition pieces — off everywhere else */
.visual__mobile{display:none}
/* hand-drawn marks (black) and colour planes are positioned per breakpoint */
.featured__line,.books__line,.stories__line,.visual__quoteline{position:relative;display:inline-block}
.why__curl,.books__sprout,.stories__arrow,.visual__underline{position:absolute;color:#15171b;pointer-events:none}
.why__plane,.featured__plane,.about__plane{position:absolute;display:block}
.why__plane{background:var(--plane-yellow);transform:rotate(14deg)}
.featured__plane{background:var(--plane-red);transform:rotate(-12deg)}
.about__plane{background:var(--plane-purple);transform:rotate(10deg)}

/* ==========================================================================
   DESKTOP  (>= 1024px)  — proportional to the locked sheet
   ========================================================================== */
@media (min-width:1024px){
  body{max-width:1920px;margin-inline:auto}

  .eyebrow{font-size:calc(7.6 * var(--s));line-height:1.4}
  .body{font-size:calc(11.2 * var(--s));line-height:calc(16 * var(--s))}
  .cta{font-size:calc(11.6 * var(--s));gap:calc(16 * var(--s))}
  .cta__a{width:calc(17 * var(--s));height:calc(10 * var(--s))}
  .cta__t{border-bottom-width:calc(1.4 * var(--s))}

  /* ---------- NAV ---------- */
  .nav{
    position:relative;height:calc(55 * var(--s));background:#fdfdfd;
    display:flex;align-items:center;
    padding-left:calc(60 * var(--s));padding-right:calc(82 * var(--s));
  }
  .wordmark{display:flex;align-items:baseline;gap:calc(12 * var(--s))}
  .wordmark__ko{font-family:var(--serif);font-weight:800;font-size:calc(21 * var(--s));letter-spacing:-.02em;color:var(--ink)}
  .wordmark__en{font-family:var(--latin);font-weight:600;font-size:calc(8 * var(--s));letter-spacing:.3em;color:var(--ink-2)}
  .nav__links{margin-left:auto;font-size:calc(11.5 * var(--s));color:var(--ink);font-weight:500}
  .nav__links ul{gap:calc(28 * var(--s))}
  .nav__search{margin-left:calc(60 * var(--s));padding:6px}
  .nav__search svg{width:calc(14 * var(--s));height:calc(14 * var(--s))}
  .nav__menu{display:none}

  /* ---------- HERO  (h 278u) ---------- */
  .hero{position:relative;height:calc(278 * var(--s));background:var(--paper)}
  .hero__copy{position:absolute;left:calc(108 * var(--s));top:calc(25 * var(--s));z-index:2}
  .hero__title{
    font-size:calc(53 * var(--s));font-weight:900;line-height:calc(57 * var(--s));
    letter-spacing:-.045em;color:var(--ink);white-space:nowrap;
  }
  .hero__sub{margin-top:calc(12 * var(--s));font-size:calc(13.2 * var(--s));line-height:calc(19.5 * var(--s));color:var(--ink-2)}
  .hero .cta{margin-top:calc(11 * var(--s));font-size:calc(13.4 * var(--s))}
  .hero .cta__a{width:calc(19 * var(--s));height:calc(11 * var(--s))}
  .hero__tag{
    margin-top:calc(16 * var(--s));font-family:var(--latin);font-weight:600;text-transform:uppercase;
    font-size:calc(7.2 * var(--s));letter-spacing:.27em;line-height:calc(11 * var(--s));color:var(--ink-2);
  }
  .hero__media{position:absolute;right:0;top:0;width:calc(640 * var(--s));height:100%;margin:0}
  .hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 66%}

  /* ---------- WHY  (h 209u) ---------- */
  .why{position:relative;display:grid;grid-template-columns:calc(412 * var(--s)) 1fr;height:calc(209 * var(--s))}
  .why__media{position:relative;height:100%}
  .why__media img{width:100%;height:100%;object-fit:cover;object-position:center}
  .why__panel{position:relative;background:var(--white);height:100%}
  .why__copy{position:absolute;left:calc(33 * var(--s));top:calc(17 * var(--s))}
  .why__title{margin-top:calc(11 * var(--s));font-size:calc(22.5 * var(--s));line-height:calc(29 * var(--s))}
  .why__body{margin-top:calc(9 * var(--s))}
  .why .cta{margin-top:calc(6 * var(--s))}
  .why__aside{position:absolute;left:calc(446 * var(--s));top:calc(32 * var(--s));width:calc(150 * var(--s));height:calc(160 * var(--s))}
  .why__curl{left:calc(-118 * var(--s));top:calc(22 * var(--s));width:calc(112 * var(--s));height:calc(66 * var(--s))}
  .why__plane{left:calc(-4 * var(--s));top:calc(18 * var(--s));width:calc(17 * var(--s));height:calc(17 * var(--s))}
  .why__quote{position:absolute;left:calc(37 * var(--s));top:calc(60 * var(--s));font-size:calc(13.2 * var(--s));line-height:calc(18.5 * var(--s));white-space:nowrap}

  /* ---------- FEATURED BOOK  (h 198u) ---------- */
  .featured{position:relative;height:calc(198 * var(--s));background:var(--beige);overflow:hidden}
  .featured__copy{position:absolute;left:calc(88 * var(--s));top:calc(11 * var(--s));z-index:2}
  .featured__title{margin-top:calc(11 * var(--s));font-size:calc(33 * var(--s));font-weight:900;line-height:calc(36 * var(--s));letter-spacing:-.045em;color:var(--ink);white-space:nowrap}
  .featured__plane{left:calc(100% + 14 * var(--s));top:calc(6 * var(--s));width:calc(15 * var(--s));height:calc(15 * var(--s))}
  .featured__body{margin-top:calc(10 * var(--s));font-size:calc(11 * var(--s));line-height:calc(15.5 * var(--s))}
  .featured .cta{margin-top:calc(7 * var(--s))}
  .featured__book{position:absolute;left:calc(418 * var(--s));top:calc(8 * var(--s));width:calc(160 * var(--s));height:calc(190 * var(--s));z-index:2}
  .featured__book img{width:100%;height:100%;object-fit:cover}
  .featured__quote{position:absolute;left:calc(651 * var(--s));top:calc(57 * var(--s));width:calc(210 * var(--s));height:calc(112 * var(--s));z-index:2}
  .featured__quote .serif{font-size:calc(15.6 * var(--s));line-height:calc(22.5 * var(--s));white-space:nowrap;letter-spacing:.01em}
  .featured__cite{position:absolute;left:calc(5 * var(--s));top:calc(81 * var(--s));font-size:calc(9.8 * var(--s));color:var(--ink-2);white-space:nowrap}
  .featured__leaves{position:absolute;right:0;top:0;width:calc(172 * var(--s));height:100%;object-fit:cover;object-position:right top;z-index:1;-webkit-mask-image:linear-gradient(to right,transparent,#000 30%);mask-image:linear-gradient(to right,transparent,#000 30%)}

  /* ---------- BOOKS & SERIES  (h 180u) ---------- */
  .books{position:relative;height:calc(180 * var(--s));background:#fdfcfc}
  .books__copy{position:absolute;left:calc(75 * var(--s));top:calc(14 * var(--s))}
  .books__title{margin-top:calc(9 * var(--s));font-size:calc(27 * var(--s));line-height:calc(32 * var(--s))}
  .books__body{margin-top:calc(9 * var(--s));font-size:calc(11 * var(--s));line-height:calc(15.5 * var(--s))}
  .books .cta{margin-top:calc(9 * var(--s))}
  .books__rail{position:absolute;left:calc(430 * var(--s));top:calc(13 * var(--s));display:flex;gap:calc(31 * var(--s))}
  .books__rail li{width:calc(98 * var(--s))}
  .books__rail img{width:100%;height:calc(119 * var(--s));object-fit:contain}
  .books__rail a{display:block}
  .books__rail h3{display:block;margin-top:calc(9 * var(--s));font-size:calc(11.8 * var(--s));font-weight:700;letter-spacing:-.02em;line-height:1.25;white-space:nowrap}
  .books__rail span{display:block;margin-top:calc(2 * var(--s));font-size:calc(10.4 * var(--s));color:var(--ink-3);white-space:nowrap}
  .books__sprout{left:calc(100% + 10 * var(--s));top:calc(-8 * var(--s));width:calc(24 * var(--s));height:calc(33 * var(--s))}

  /* ---------- STORIES  (h 173u) — four images, four different ratios ---------- */
  .stories{position:relative;height:calc(173 * var(--s));background:var(--paper)}
  .stories__copy{position:absolute;left:calc(75 * var(--s));top:calc(6 * var(--s))}
  .stories__title{margin-top:calc(8 * var(--s));font-size:calc(24 * var(--s));line-height:calc(28 * var(--s))}
  .stories__body{margin-top:calc(7 * var(--s));font-size:calc(10.8 * var(--s));line-height:calc(13.6 * var(--s))}
  .stories .cta{margin-top:calc(4 * var(--s))}
  .stories__list{position:absolute;left:0;top:calc(4 * var(--s));right:0;height:calc(96 * var(--s))}
  .story{position:absolute;top:0;height:100%}
  .story a{display:block;height:100%}
  .story img{width:100%;height:100%;object-fit:cover}
  .story--1{left:calc(270 * var(--s));width:calc(162 * var(--s))}
  .story--2{left:calc(449 * var(--s));width:calc(147 * var(--s))}
  .story--3{left:calc(615 * var(--s));width:calc(167 * var(--s))}
  .story--4{left:calc(803 * var(--s));width:calc(168 * var(--s))}
  .stories__arrow{left:calc(100% + 10 * var(--s));top:calc(-2 * var(--s));width:calc(58 * var(--s));height:calc(28 * var(--s))}
  .story h3{display:block;margin-top:calc(9 * var(--s));font-size:calc(11.8 * var(--s));font-weight:700;letter-spacing:-.02em;line-height:calc(15 * var(--s));white-space:nowrap}
  .story__meta{display:flex;align-items:center;justify-content:space-between;margin-top:calc(3 * var(--s));font-size:calc(10.4 * var(--s));color:var(--ink-3)}
  .story__meta svg{width:calc(15 * var(--s));height:calc(9 * var(--s));color:var(--ink)}
  /* arrows sit on the last line of each caption (two-line titles push it down) */
  .story--3 .story__meta,.story--4 .story__meta{margin-top:calc(3 * var(--s))}

  /* ---------- VISUAL EDITORIAL WORLD  (h 172u) ---------- */
  .visual{position:relative;height:calc(172 * var(--s));background:var(--mist);display:grid;grid-template-columns:calc(288 * var(--s)) calc(463 * var(--s)) 1fr}
  .visual__copy{position:absolute;left:calc(75 * var(--s));top:calc(10 * var(--s))}
  .visual__title{margin-top:calc(7 * var(--s));font-size:calc(24 * var(--s));line-height:calc(28 * var(--s))}
  .visual__body{margin-top:calc(6 * var(--s));font-size:calc(10.6 * var(--s));line-height:calc(13.2 * var(--s))}
  .visual .cta{margin-top:calc(4 * var(--s))}
  .visual__strip{grid-column:2;display:grid;grid-template-columns:calc(178 * var(--s)) calc(143 * var(--s)) calc(142 * var(--s));height:100%}
  .visual__img{width:100%;height:100%;object-fit:cover}
  .visual__img--1{object-position:center}
  .visual__img--2{object-position:center}
  .visual__img--3{object-position:center}
  .visual__wall{grid-column:3;position:relative;height:100%;background:#cfd3d8 url("../assets/img/visual-wall.jpg") center/cover no-repeat}
  .visual__quote{position:absolute;left:calc(84 * var(--s));top:calc(41 * var(--s));font-size:calc(13.2 * var(--s));line-height:calc(19.5 * var(--s));white-space:nowrap;color:#1c1f24}
  .visual__underline{left:calc(-2 * var(--s));bottom:calc(-9 * var(--s));width:calc(96 * var(--s));height:calc(8 * var(--s))}

  /* ---------- ABOUT  (h 161u) ---------- */
  .about{position:relative;height:calc(161 * var(--s));display:grid;grid-template-columns:calc(326 * var(--s)) 1fr;background:var(--cream)}
  .about__copy{position:absolute;left:calc(75 * var(--s));top:calc(7 * var(--s))}
  .about__title{margin-top:calc(6 * var(--s));font-size:calc(22.5 * var(--s));line-height:calc(26 * var(--s))}
  .about__body{margin-top:calc(6 * var(--s));font-size:calc(10.6 * var(--s));line-height:calc(13.2 * var(--s))}
  .about .cta{margin-top:calc(6 * var(--s));font-size:calc(11 * var(--s))}
  .about__media{grid-column:2;position:relative;height:100%}
  .about__media img{width:100%;height:100%;object-fit:cover;object-position:center}
  .about__caption{position:absolute;left:calc(455 * var(--s));top:calc(43 * var(--s));padding-left:calc(30 * var(--s));color:#fff}
  .about__caption .serif{font-size:calc(14 * var(--s));line-height:calc(19.5 * var(--s));color:#fff;white-space:nowrap;text-shadow:0 1px 14px rgba(20,10,0,.45)}
  .about__plane{left:0;top:calc(4 * var(--s));width:calc(14 * var(--s));height:calc(14 * var(--s))}

  /* ---------- FOOTER  (h 110u) ---------- */
  .footer{
    position:relative;height:calc(110 * var(--s));background:var(--navy);color:#fff;overflow:hidden;
  }
  .footer::before{
    content:"";position:absolute;inset:0 auto 0 0;width:calc(520 * var(--s));
    background:url("../assets/img/footer-leaves.jpg") left center/cover no-repeat;
    -webkit-mask-image:linear-gradient(to right,#000 55%,transparent);mask-image:linear-gradient(to right,#000 55%,transparent);
    opacity:.9;
  }
  .footer > *{position:relative}
  .footer__brand{position:absolute;left:calc(80 * var(--s));top:calc(18 * var(--s))}
  .footer__wordmark{display:block}
  .footer__ko{display:block;font-family:var(--serif);font-weight:700;font-size:calc(22 * var(--s));line-height:1.1;letter-spacing:-.01em}
  .footer__en{display:block;margin-top:calc(6 * var(--s));font-family:var(--latin);font-weight:600;font-size:calc(7.6 * var(--s));letter-spacing:.32em}
  .footer__copy{margin-top:calc(18 * var(--s));font-size:calc(9.2 * var(--s));white-space:nowrap;color:#fff}
  .footer__tag{position:absolute;left:calc(420 * var(--s));top:calc(17 * var(--s))}
  .footer__tagline{font-size:calc(16 * var(--s));line-height:calc(24 * var(--s));color:#fff;white-space:nowrap}
  .footer__tagen{margin-top:calc(9 * var(--s));font-family:var(--latin);font-weight:600;font-size:calc(7.4 * var(--s));letter-spacing:.3em;text-transform:uppercase}
  .footer__links{position:absolute;left:calc(695 * var(--s));top:calc(18 * var(--s));display:flex;flex-direction:column;font-size:calc(11 * var(--s));line-height:calc(18 * var(--s))}
  .footer__links a{display:inline-flex;align-items:center;min-height:24px;align-self:flex-start}
  .footer__rule{position:absolute;left:calc(793 * var(--s));top:calc(20 * var(--s));width:1px;height:calc(66 * var(--s));background:rgba(255,255,255,.55)}
  .footer__side{position:absolute;left:calc(843 * var(--s));top:calc(19 * var(--s))}
  .footer__note{font-size:calc(10.6 * var(--s));line-height:calc(15.5 * var(--s));color:#fff;white-space:nowrap}
  .footer__social{display:flex;gap:calc(12 * var(--s));margin-top:calc(9 * var(--s))}
  .footer__social a{padding:4px}
  .footer__social svg{width:calc(12.5 * var(--s));height:calc(12.5 * var(--s))}
}

/* ---------- desktop reading floor: 1024–1200px only ----------
   Keeps the locked desktop geometry while preventing body copy from dropping
   below a practical reading size at the narrow edge of the desktop range. */
@media (min-width:1024px) and (max-width:1200px){
  .body{
    font-size:max(12.5px, calc(11.2 * var(--s)));
    line-height:max(17px, calc(16 * var(--s)));
  }
}

/* ==========================================================================
   TABLET  (768–1023px) — the desktop composition, re-set at readable size
   ========================================================================== */
@media (min-width:768px) and (max-width:1023.98px){
  .eyebrow{font-size:10px}
  .body{font-size:14px;line-height:1.6}
  .cta{font-size:14px;gap:14px}
  .cta__a{width:18px;height:10px}

  .nav{height:64px;display:flex;align-items:center;padding:0 40px;background:#fdfdfd}
  .wordmark{display:flex;align-items:baseline;gap:10px}
  .wordmark__ko{font-family:var(--serif);font-weight:800;font-size:22px}
  .wordmark__en{font-family:var(--latin);font-weight:600;font-size:9px;letter-spacing:.3em;color:var(--ink-2)}
  .nav__links{margin-left:auto;font-size:14px;font-weight:500}
  .nav__links ul{gap:26px}
  .nav__links a{padding:8px 2px}
  .nav__search{margin-left:30px;width:44px;height:44px}.nav__search svg{width:18px;height:18px}
  .nav__menu{display:none}

  /* HERO — copy block left, photo right, same two-line wrap */
  .hero{position:relative;height:340px;background:var(--paper)}
  .hero__copy{position:absolute;left:78px;top:34px;z-index:2}
  .hero__title{font-size:56px;font-weight:900;line-height:1.04;letter-spacing:-.045em;white-space:nowrap}
  .hero__sub{margin-top:14px;font-size:14px;line-height:1.5;color:var(--ink-2)}
  .hero .cta{margin-top:12px}
  .hero__tag{margin-top:14px;font-family:var(--latin);font-weight:600;text-transform:uppercase;font-size:8px;letter-spacing:.27em;line-height:1.5;color:var(--ink-2)}
  .hero__media{position:absolute;right:0;top:0;width:52%;height:100%}
  .hero__media img{width:100%;height:100%;object-fit:cover;object-position:55% 45%}

  /* WHY — copy stacked above the serif aside so the locked line breaks hold */
  .why{display:grid;grid-template-columns:38% 1fr;min-height:320px}
  .why__media{position:relative;margin:0}
  .why__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .why__panel{position:relative;background:var(--white);padding:30px 36px 32px 36px}
  .why__title{margin-top:12px;font-size:24px;white-space:nowrap}
  .why__body{margin-top:12px;font-size:13.5px}
  .why .cta{margin-top:12px}
  .why__aside{position:relative;margin-top:40px;padding-left:24px}
  .why__rule{position:absolute;left:0;top:2px;bottom:0;width:1px;background:var(--line)}
  .why__curl{left:150px;top:-6px;width:96px;height:56px}
  .why__plane{left:-8px;top:-18px;width:14px;height:14px}
  .why__quote{font-size:14px;line-height:1.55;white-space:nowrap}

  /* FEATURED */
  .featured{position:relative;background:var(--beige);display:grid;grid-template-columns:1fr 200px 1fr;column-gap:32px;padding:34px 40px 34px 64px;overflow:hidden;min-height:300px}
  .featured__title{margin-top:10px;font-size:38px;font-weight:900;line-height:1.1;letter-spacing:-.045em;white-space:nowrap}
  .featured__plane{left:calc(100% + 12px);top:8px;width:15px;height:15px}
  .featured__body{margin-top:12px}
  .featured .cta{margin-top:10px}
  .featured__book{position:relative;z-index:2;align-self:center}
  .featured__book img{width:100%;height:auto}
  .featured__quote{position:relative;z-index:2;align-self:center;padding-left:8px}
  .featured__quote .serif{font-size:17px;line-height:1.55;white-space:nowrap}
  .featured__cite{margin-top:16px;font-size:12px;color:var(--ink-2)}
  .featured__leaves{position:absolute;right:0;top:0;width:150px;height:100%;object-fit:cover;object-position:right top;z-index:1;-webkit-mask-image:linear-gradient(to right,transparent,#000 30%);mask-image:linear-gradient(to right,transparent,#000 30%)}

  /* BOOKS */
  .books{position:relative;background:#fdfcfc;padding:34px 40px 34px 64px}
  .books__title{margin-top:10px;font-size:27px}
  .books__body{margin-top:10px;font-size:13px}
  .books .cta{margin-top:10px}
  .books__rail{display:flex;gap:28px;margin-top:26px;padding-right:40px}
  .books__rail li{width:132px}
  .books__rail img{width:100%;height:160px;object-fit:contain}
  .books__rail a{display:block}
  .books__rail h3{display:block;margin-top:12px;font-size:14px;font-weight:700;letter-spacing:-.02em}
  .books__rail span{display:block;margin-top:2px;font-size:12px;color:var(--ink-3)}
  .books__sprout{left:calc(100% + 10px);top:-8px;width:24px;height:33px}

  /* STORIES — keep four distinct ratios in one row */
  .stories{background:var(--paper);padding:30px 40px 36px 64px}
  .stories__title{margin-top:8px;font-size:25px}
  .stories__body{margin-top:10px;font-size:13px}
  .stories .cta{margin-top:8px}
  .stories__list{display:grid;grid-template-columns:162fr 147fr 167fr 168fr;gap:20px;margin-top:26px}
  .story img{width:100%;height:128px;object-fit:cover}
  .stories__arrow{left:calc(100% + 10px);top:-2px;width:58px;height:28px}
  .story a{display:block}
  .story h3{display:block;margin-top:12px;font-size:14px;font-weight:700;letter-spacing:-.02em;line-height:1.35}
  .story__meta{display:flex;align-items:center;justify-content:space-between;margin-top:4px;font-size:12px;color:var(--ink-3)}
  .story__meta svg{width:16px;height:10px;color:var(--ink)}

  /* VISUAL */
  .visual{background:var(--mist);display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 240px}
  .visual__copy{grid-column:1;padding:30px 30px 26px 64px}
  .visual__title{margin-top:8px;font-size:25px}
  .visual__body{margin-top:10px;font-size:13px}
  .visual .cta{margin-top:8px}
  .visual__wall{grid-column:2;grid-row:1;position:relative;background:#cfd3d8 url("../assets/img/visual-wall.jpg") center/cover no-repeat}
  .visual__quote{position:absolute;left:34%;top:38px;font-size:15px;line-height:1.6;white-space:nowrap;color:#1c1f24}
  .visual__underline{left:-2px;bottom:-9px;width:96px;height:8px}
  .visual__strip{grid-column:1/-1;grid-row:2;height:240px;display:grid;grid-template-columns:178fr 143fr 142fr}
  .visual__img{width:100%;height:100%;object-fit:cover}

  /* ABOUT */
  .about{display:grid;grid-template-columns:47% 1fr;background:var(--cream);min-height:280px}
  .about__copy{padding:30px 24px 30px 44px}
  .about__title{margin-top:8px;font-size:25px;white-space:nowrap}
  .about__body{margin-top:10px;font-size:12.5px;white-space:nowrap}
  .about .cta{margin-top:10px}
  .about__media{position:relative}
  .about__media img{width:100%;height:100%;object-fit:cover;object-position:35% center}
  .about__caption{position:absolute;left:34px;top:46px;padding-left:30px;color:#fff}
  .about__caption .serif{font-size:15px;line-height:1.55;color:#fff;white-space:nowrap;text-shadow:0 1px 14px rgba(20,10,0,.45)}
  .about__plane{left:0;top:5px;width:14px;height:14px}

  /* FOOTER */
  .footer{position:relative;background:var(--navy);color:#fff;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;gap:26px 40px;padding:36px 40px 34px 64px}
  .footer::before{content:"";position:absolute;inset:0 auto 0 0;width:60%;background:url("../assets/img/footer-leaves.jpg") left center/cover no-repeat;-webkit-mask-image:linear-gradient(to right,#000 50%,transparent);mask-image:linear-gradient(to right,#000 50%,transparent);opacity:.9}
  .footer > *{position:relative}
  .footer__ko{display:block;font-family:var(--serif);font-weight:700;font-size:24px}
  .footer__en{display:block;margin-top:6px;font-family:var(--latin);font-weight:600;font-size:9px;letter-spacing:.32em}
  .footer__copy{grid-column:1/-1;order:9;font-size:11px;color:#fff;margin-top:6px}
  .footer__tagline{font-size:17px;line-height:1.6;color:#fff}
  .footer__tagen{margin-top:8px;font-family:var(--latin);font-weight:600;font-size:8.5px;letter-spacing:.3em;text-transform:uppercase}
  .footer__links{display:flex;gap:22px;font-size:13px}
  .footer__rule{display:none}
  .footer__note{font-size:12px;line-height:1.6;color:#fff}
  .footer__social{display:flex;gap:6px;margin-top:6px}
  .footer__social a{width:44px;height:44px}
  .footer__social svg{width:16px;height:16px}
}

/* ==========================================================================
   MOBILE  (< 768px) — its own composition (design/V2_MOBILE_FULL_HOME.png):
   focal scene > title > reading order > crop > whitespace > metadata.
   Real sizes (body 15px, 44px targets); the copy flows, only headlines keep
   their two-line breaks.
   ========================================================================== */
@media (max-width:767.98px){
  :root{--pad:20px}
  body{overflow-x:hidden}
  .eyebrow{font-size:10px;line-height:1.5;letter-spacing:.32em}
  .h2{font-size:27px;line-height:1.24;letter-spacing:-.03em}
  .body{font-size:15px;line-height:1.66}
  .cta{font-size:15px;gap:14px;min-height:44px}
  .cta__a{width:18px;height:11px}
  .cta__t{border-bottom-width:1.5px;padding-bottom:2px}

  /* HEADER — wordmark, search, menu; the menu opens as a full panel */
  .nav{position:sticky;top:0;z-index:50;height:64px;display:flex;align-items:center;gap:2px;padding:0 6px 0 var(--pad);background:#fdfdfd}
  .wordmark{display:flex;flex-direction:column;justify-content:center;min-height:44px}
  .wordmark__ko{display:block;font-family:var(--serif);font-weight:800;font-size:22px;line-height:1.1;letter-spacing:-.01em}
  .wordmark__en{display:block;margin-top:3px;font-family:var(--latin);font-weight:600;font-size:8px;letter-spacing:.32em;color:var(--ink-2)}
  .nav__search{margin-left:auto}
  .nav__search,.nav__menu{width:44px;height:44px}
  .nav__search svg{width:20px;height:20px}
  .nav__menu svg{width:24px;height:20px}
  .nav__links{display:none}
  .nav.is-open .nav__links{display:block;position:fixed;left:0;right:0;top:64px;bottom:0;z-index:40;background:#fefefe;padding:12px var(--pad) 40px;overflow:auto}
  .nav__links ul{flex-direction:column}
  .nav__links a{display:flex;align-items:center;min-height:56px;padding:12px 0;font-size:24px;font-weight:700;letter-spacing:-.01em;border-bottom:1px solid #e9ebee}
  .search{padding:14px var(--pad) 12px}

  /* 01 HERO — copy over the paper side of the scene, sea to the right */
  .hero{position:relative;background:var(--paper);min-height:540px;display:grid;align-content:start}
  .hero__media{position:absolute;inset:0;margin:0}
  .hero__media img{width:100%;height:100%;object-fit:cover;object-position:60% 42%}
  .hero__media::after{content:"";position:absolute;inset:0;background:
    linear-gradient(180deg,rgba(251,251,251,.94) 0%,rgba(251,251,251,.72) 34%,rgba(251,251,251,.18) 60%,rgba(251,251,251,0) 78%),
    linear-gradient(100deg,rgba(251,251,251,.85) 0%,rgba(251,251,251,.45) 46%,rgba(251,251,251,0) 70%)}
  .hero__copy{position:relative;z-index:2;padding:36px var(--pad) 0;max-width:380px}
  .hero__title{font-size:46px;font-weight:900;line-height:1.08;letter-spacing:-.045em}
  .hero__sub{margin-top:18px;font-size:15.5px;line-height:1.55;color:var(--ink-2)}
  .hero .cta{margin-top:16px}
  .hero__tag{margin-top:96px;padding-bottom:32px;font-family:var(--latin);font-weight:600;text-transform:uppercase;font-size:9.5px;letter-spacing:.3em;line-height:1.7;color:var(--ink-3)}

  /* 02 WHY — photo pause, then the copy panel with the aside */
  .why{display:block;background:var(--white)}
  .why__media{margin:0;height:240px}
  .why__media img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
  .why__panel{position:relative;padding:30px var(--pad) 36px}
  .why__title{margin-top:10px}
  .why__body{margin-top:14px}
  .why .cta{margin-top:10px}
  .why__aside{position:relative;margin-top:52px;padding:4px 0 0 22px;border-left:1px solid var(--line)}
  .why__curl{left:26px;top:-50px;width:96px;height:56px}
  .why__plane{left:-7px;top:-14px;width:14px;height:14px}
  .why__quote{font-size:16px;line-height:1.6}

  /* 03 FEATURED BOOK — copy beside the book, quote as the closing line */
  .featured{position:relative;background:var(--beige);padding:30px var(--pad) 34px;display:grid;grid-template-columns:minmax(0,1fr) 138px;column-gap:18px;overflow:hidden}
  .featured__copy{position:relative;z-index:2}
  .featured__title{margin-top:8px;font-size:34px;font-weight:900;line-height:1.1;letter-spacing:-.045em}
  .featured__plane{left:calc(100% + 10px);top:7px;width:13px;height:13px}
  .featured__body{margin-top:12px}
  .featured .cta{margin-top:8px}
  .featured__book{position:relative;z-index:2;align-self:center;margin:0}
  .featured__book img{width:100%;height:auto;filter:drop-shadow(0 10px 18px rgba(60,40,20,.28))}
  .featured__quote{grid-column:1/-1;position:relative;z-index:2;margin-top:26px;padding-top:18px;border-top:1px solid rgba(21,23,27,.14)}
  .featured__quote .serif{font-size:16px;line-height:1.6}
  .featured__cite{margin-top:8px;font-size:12.5px;color:var(--ink-2)}
  .featured__leaves{position:absolute;right:0;top:0;width:130px;height:52%;object-fit:cover;object-position:right top;z-index:1;opacity:.9;-webkit-mask-image:linear-gradient(to right,transparent,#000 40%);mask-image:linear-gradient(to right,transparent,#000 40%)}

  /* 04 BOOKS & SERIES — four covers in one row, like a shelf */
  .books{background:#fdfcfc;padding:34px var(--pad) 36px}
  .books__title{margin-top:8px}
  .books__sprout{left:calc(100% + 8px);top:-8px;width:20px;height:28px}
  .books__body{margin-top:12px}
  .books .cta{margin-top:8px}
  .books__rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:26px}
  .books__rail a{display:block;min-height:44px}
  .books__rail img{width:100%;height:auto;aspect-ratio:74/122;object-fit:cover;box-shadow:0 3px 8px rgba(0,0,0,.14)}
  .books__rail h3{margin-top:10px;font-size:12px;font-weight:700;line-height:1.3;letter-spacing:-.03em}
  .books__rail span{display:block;margin-top:3px;font-size:11px;line-height:1.3;color:var(--ink-3)}

  /* 05 STORIES — copy, then four stories in two rows (each its own card) */
  .stories{background:var(--paper);padding:34px var(--pad) 38px}
  .stories__title{margin-top:8px}
  .stories__arrow{left:calc(100% + 8px);top:-2px;width:52px;height:26px}
  .stories__body{margin-top:12px}
  .stories .cta{margin-top:8px}
  .stories__list{display:grid;grid-template-columns:1fr 1fr;gap:20px 14px;margin-top:26px}
  .story a{display:block;height:100%;background:#fefefe;padding-bottom:14px;box-shadow:0 2px 10px rgba(0,0,0,.06)}
  .story img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
  .story h3{margin:10px 12px 0;font-size:14.5px;font-weight:700;line-height:1.35;letter-spacing:-.02em}
  .story__meta{display:flex;align-items:center;justify-content:space-between;margin:8px 12px 0;font-size:12.5px;color:var(--ink-3)}
  .story__meta svg{width:16px;height:10px;color:var(--ink)}

  /* 06 VISUAL EDITORIAL WORLD — one sea, one caption */
  .visual{background:var(--mist);display:block}
  .visual__copy{padding:34px var(--pad) 28px}
  .visual__title{margin-top:8px}
  .visual__body{margin-top:12px}
  .visual .cta{margin-top:8px}
  .visual__strip,.visual__wall{display:none}
  .visual__mobile{display:block;position:relative;margin:0;height:240px}
  .visual__mobile img{width:100%;height:100%;object-fit:cover}
  .visual__mcaption{position:absolute;right:var(--pad);bottom:26px;font-family:var(--latin);font-weight:500;font-size:28px;line-height:1.12;color:#fff;text-shadow:0 1px 14px rgba(0,30,70,.55)}

  /* 07 ABOUT — cream copy panel, then the table scene with the white line */
  .about{display:block;background:var(--cream)}
  .about__copy{padding:34px var(--pad) 30px}
  .about__title{margin-top:8px}
  .about__body{margin-top:12px}
  .about .cta{margin-top:8px}
  .about__media{position:relative;margin:0;height:270px}
  .about__media img{width:100%;height:100%;object-fit:cover;object-position:58% center}
  .about__caption{position:absolute;left:var(--pad);top:30px;padding-left:26px;color:#fff}
  .about__caption .serif{font-size:16px;line-height:1.6;color:#fff;text-shadow:0 1px 12px rgba(20,10,0,.55)}
  .about__plane{left:0;top:6px;width:12px;height:12px}

  /* 08 FOOTER — brand, one line, links, social */
  .footer{position:relative;background:var(--navy);color:#fff;overflow:hidden;padding:36px var(--pad) 24px;display:grid;gap:24px}
  .footer::before{content:"";position:absolute;inset:0 auto 0 0;width:70%;background:url("../assets/img/footer-leaves.jpg") left center/cover no-repeat;-webkit-mask-image:linear-gradient(to right,#000 30%,transparent);mask-image:linear-gradient(to right,#000 30%,transparent);opacity:.7}
  .footer > *{position:relative}
  .footer__brand{display:contents}
  .footer__wordmark{display:inline-block;justify-self:start}
  .footer__ko{display:block;font-family:var(--serif);font-weight:700;font-size:24px;line-height:1.1}
  .footer__en{display:block;margin-top:5px;font-family:var(--latin);font-weight:600;font-size:8.5px;letter-spacing:.34em}
  .footer__copy{order:9;font-size:12px;line-height:1.55;color:#fff;opacity:.85}
  .footer__tagline{font-size:16.5px;line-height:1.6;color:#fff}
  .footer__tagen{margin-top:8px;font-family:var(--latin);font-weight:600;font-size:8.5px;letter-spacing:.3em;text-transform:uppercase}
  .footer__links{display:flex;flex-wrap:wrap;gap:0 6px;margin-left:-8px}
  .footer__links a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;padding:0 8px;font-size:14.5px}
  .footer__rule{display:none}
  .footer__note{display:none}
  .footer__social{display:flex;gap:6px;margin-left:-12px}
  .footer__social a{width:44px;height:44px}
  .footer__social svg{width:18px;height:18px}
}

/* small phones: the headline still needs two lines */
@media (max-width:359.98px){
  .hero__title{font-size:40px}
  .body{font-size:14px}
  .featured{grid-template-columns:1fr}
  .featured__book{width:150px;margin-top:20px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}


/* ===== GLOBAL V2 TYPOGRAPHY + DENSITY REFINEMENT v0.1 =====
   Preserve V2 identity and the oversized hero. Reduce repeated section intensity,
   tighten vertical runs, and keep body readability unchanged. */
@media (min-width:1024px){
  .why{height:calc(188 * var(--s))}
  .why__title{font-size:calc(20.5 * var(--s));line-height:calc(26 * var(--s))}
  .why__aside{top:calc(24 * var(--s))}

  .featured{height:calc(176 * var(--s))}
  .featured__title{font-size:calc(28 * var(--s));line-height:calc(31 * var(--s))}
  .featured__book{top:calc(7 * var(--s));height:calc(164 * var(--s));width:calc(138 * var(--s));left:calc(430 * var(--s))}
  .featured__quote{top:calc(47 * var(--s))}

  .books{height:calc(160 * var(--s))}
  .books__title{font-size:calc(23.5 * var(--s));line-height:calc(28 * var(--s))}
  .books__rail{top:calc(10 * var(--s))}
  .books__rail img{height:calc(104 * var(--s))}

  .stories{height:calc(156 * var(--s))}
  .stories__title{font-size:calc(21 * var(--s));line-height:calc(25 * var(--s))}
  .stories__list{height:calc(88 * var(--s))}

  .visual{height:calc(156 * var(--s))}
  .visual__title{font-size:calc(21 * var(--s));line-height:calc(25 * var(--s))}
  .visual__quote{top:calc(34 * var(--s))}

  .about{height:calc(150 * var(--s))}
  .about__title{font-size:calc(20 * var(--s));line-height:calc(24 * var(--s))}
  .about__caption{top:calc(36 * var(--s))}
}

@media (min-width:768px) and (max-width:1023.98px){
  .why__panel{padding:26px 34px 28px}
  .why__title{font-size:22px}
  .why__aside{margin-top:30px}
  .featured{padding:28px 40px 28px 60px;min-height:270px}
  .featured__title{font-size:34px}
  .books{padding:28px 40px 28px 60px}
  .books__title{font-size:24px}
  .books__rail{margin-top:20px}
  .stories{padding:26px 40px 30px 60px}
  .stories__title,.visual__title,.about__title{font-size:23px}
  .visual__copy{padding:26px 30px 22px 60px}
  .about__copy{padding:26px 24px 26px 40px}
}

@media (max-width:767.98px){
  .h2{font-size:24px}
  .why__panel{padding:26px var(--pad) 30px}
  .why__aside{margin-top:40px}
  .featured{padding:26px var(--pad) 28px}
  .featured__title{font-size:30px}
  .featured__quote{margin-top:20px;padding-top:15px}
  .books{padding:28px var(--pad) 30px}
  .books__rail{margin-top:20px}
  .stories{padding:28px var(--pad) 32px}
  .stories__list{margin-top:20px}
  .visual__copy{padding:28px var(--pad) 24px}
  .about__copy{padding:28px var(--pad) 26px}
}


/* ===== GLOBAL V2 PAGE DENSITY REBALANCE v0.2 ===== */
@media (min-width:1024px){
  .why{height:calc(168 * var(--s))}
  .why__copy{top:calc(13 * var(--s))}
  .why__aside{top:calc(18 * var(--s));height:calc(138 * var(--s))}
  .featured{height:calc(154 * var(--s))}
  .featured__copy{top:calc(8 * var(--s))}
  .featured__title{font-size:calc(25.5 * var(--s));line-height:calc(28 * var(--s))}
  .featured__book{height:calc(144 * var(--s));width:calc(122 * var(--s));left:calc(438 * var(--s));top:calc(5 * var(--s))}
  .featured__quote{top:calc(38 * var(--s))}
  .books{height:calc(142 * var(--s))}
  .books__copy{top:calc(10 * var(--s))}
  .books__title{font-size:calc(21 * var(--s));line-height:calc(25 * var(--s))}
  .books__rail{top:calc(8 * var(--s));gap:calc(24 * var(--s))}
  .books__rail img{height:calc(92 * var(--s))}
  .stories{height:calc(140 * var(--s))}
  .stories__copy{top:calc(4 * var(--s))}
  .stories__title{font-size:calc(19.5 * var(--s));line-height:calc(23 * var(--s))}
  .stories__list{height:calc(80 * var(--s))}
  .visual{height:calc(140 * var(--s))}
  .visual__copy{top:calc(7 * var(--s))}
  .visual__title{font-size:calc(19.5 * var(--s));line-height:calc(23 * var(--s))}
  .about{height:calc(136 * var(--s))}
  .about__copy{top:calc(5 * var(--s))}
  .about__title{font-size:calc(18.5 * var(--s));line-height:calc(22 * var(--s))}
}
@media (min-width:768px) and (max-width:1023.98px){
  .why{min-height:270px}
  .featured{min-height:238px;padding:24px 36px 24px 56px}
  .books{padding:24px 36px 24px 56px}
  .stories{padding:22px 36px 26px 56px}
  .visual{grid-template-rows:auto 200px}
  .visual__strip{height:200px}
  .about{min-height:238px}
}
@media (max-width:767.98px){
  .hero{min-height:500px}
  .hero__copy{padding-top:30px}
  .why__media{height:205px}
  .why__panel{padding:22px var(--pad) 25px}
  .why__aside{margin-top:30px}
  .featured{padding:22px var(--pad) 24px}
  .featured__title{font-size:28px}
  .featured__quote{margin-top:16px;padding-top:13px}
  .books{padding:24px var(--pad) 26px}
  .books__rail{margin-top:16px}
  .stories{padding:24px var(--pad) 27px}
  .stories__list{margin-top:16px;gap:16px 12px}
  .visual__copy{padding:24px var(--pad) 20px}
  .visual__mobile{height:210px}
  .about__copy{padding:24px var(--pad) 22px}
  .about__media{height:230px}
}


/* ===== MALSUM FOREST CENTERED DENSITY DIRECTION v0.3 ===== */
:root{--content-max:1280px;--content-gutter:32px}
@media (min-width:1024px){
  :root{--s:calc(min(100vw,1280px)/1024)}
  body{max-width:none;margin:0;background:var(--paper)}
  .nav,.hero,.why,.featured,.books,.stories,.about{width:min(calc(100% - 64px),var(--content-max));margin-inline:auto}
  .visual{width:100%;margin-inline:0}
  .footer{width:100%;margin-inline:0}
}
@media (min-width:768px) and (max-width:1023.98px){
  .nav,.hero,.why,.featured,.books,.stories,.about{width:calc(100% - 48px);margin-inline:auto}
}
@media (max-width:767.98px){
  .nav,.hero,.why,.featured,.books,.stories,.about,.visual,.footer{width:100%}
}

/* ===== RENDERED SCROLL PRESSURE TECHNICAL FIX v0.4 ===== */
@media (min-width:1024px){
  .why__aside{left:auto;right:calc(16 * var(--s));width:calc(142 * var(--s))}
}