:root{
  --paper:#f5f5f3;
  --paper-2:#efefed;
  --white:#fbfbfa;
  --ink:#101010;
  --graphite:#232323;
  --muted:#73736f;
  --rule:#d8d8d3;
  --signal:#ef5a20;
  --serif:Didot,"Bodoni MT","Times New Roman",serif;
  --sans:Pretendard,"Noto Sans KR",system-ui,-apple-system,sans-serif;
  --page-max:1600px;
}

*{box-sizing:border-box}
html{scroll-behavior:auto;scroll-snap-type:y mandatory;background:var(--paper)}
html.shelf-modal-open{overflow:hidden}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.42;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}

.v4-header{
  position:fixed;z-index:50;left:0;right:0;top:0;height:46px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:0 clamp(16px,2.4vw,38px);
  background:var(--white);backdrop-filter:none;
  border-bottom:1px solid rgba(16,16,16,.08);
}
.v4-brand{display:flex;align-items:center;gap:7px;font-size:.61rem;font-weight:800;letter-spacing:.04em}
.v4-brand img{width:16px;height:16px}
.v4-header nav{display:flex;justify-self:center;gap:26px;font-size:.55rem;text-transform:uppercase;letter-spacing:.03em}
.v4-header nav a{padding:4px 0;border-bottom:1px solid transparent}
.v4-header nav a.is-active{border-color:var(--ink)}
.v4-header nav.is-open{
  position:absolute;z-index:60;top:calc(100% + 1px);right:20px;display:flex;flex-direction:column;gap:0;min-width:150px;
  padding:8px 16px;background:rgba(248,248,246,.98);border:1px solid var(--rule);box-shadow:0 14px 30px rgba(0,0,0,.08)
}
.v4-header nav.is-open a{padding:10px 0;border-bottom:1px solid var(--rule)}
.v4-header nav.is-open a:last-child{border-bottom:0}
.v4-menu{display:none;position:fixed;z-index:100;top:16px;right:16px;justify-self:end;border:0;background:none;font-size:.65rem}
.chapter-indicator{
  position:fixed;z-index:45;left:clamp(16px,2.4vw,38px);top:66px;
  display:flex;gap:6px;font:700 .58rem ui-monospace,monospace;letter-spacing:.06em
}
.chapter-indicator i{font-style:normal;color:var(--muted)}
.chapter-indicator span:first-child{color:var(--ink)}

.magazine{position:relative}
.chapter{
  min-height:100svh;scroll-snap-align:start;scroll-snap-stop:always;
  position:relative;overflow:hidden;
}
.chapter-inner{
  width:min(var(--page-max),100%);height:100svh;margin:auto;
  padding:74px clamp(18px,2.5vw,40px) 36px;
  position:relative;
}
.chapter-meta{margin:0;font:700 .58rem ui-monospace,monospace;letter-spacing:.08em;color:var(--ink)}
.chapter-cover .chapter-meta{display:none}

.chapter-cover{background:#f2f2f0}
.cover-inner{
  display:grid;grid-template-columns:minmax(280px,.58fr) minmax(0,1.42fr);
  gap:32px;align-items:center;
}
.cover-copy{align-self:center;padding-top:10px;z-index:4}
.cover-copy h1{
  margin:24px 0 22px;font-size:clamp(3.5rem,5.5vw,6.2rem);
  line-height:.93;letter-spacing:-.07em;font-weight:800;
}
.cover-copy h1 em{font-style:normal;color:inherit}
.cover-copy>p:not(.chapter-meta){
  max-width:295px;margin:0;color:#5f5f5b;font-size:.82rem;line-height:1.65
}
.cover-actions{display:flex;gap:20px;margin-top:30px;font-size:.68rem;font-weight:750}
.cover-actions a{padding-bottom:3px;border-bottom:1px solid var(--ink)}
.cover-actions span{margin-left:6px}
.shelf-wrap{
  align-self:center;position:relative;height:min(71vh,650px);
}
.shelf-guide{
  position:absolute;left:5%;right:0;top:14%;bottom:8%;
  border-top:1px solid rgba(20,20,20,.13);
  border-right:1px solid rgba(20,20,20,.09);
  transform:skewY(-10deg);opacity:.55
}
.program-shelf{position:relative;width:100%;height:100%;transform-style:preserve-3d}
.shelf-card{
  position:absolute;left:34%;top:55%;width:clamp(150px,15.4vw,250px);aspect-ratio:3/4;
  transform-style:preserve-3d;will-change:transform,opacity;
  transition:transform .78s cubic-bezier(.16,.78,.18,1),opacity .3s ease,filter .3s ease;
}
.shelf-card button{
  display:block;position:relative;width:100%;height:100%;padding:0;overflow:hidden;
  border:1px solid rgba(255,255,255,.28);background:#111;color:#fff;text-align:left;
  box-shadow:0 18px 46px rgba(0,0,0,.2)
}
.shelf-card img{width:100%;height:100%;object-fit:cover;object-position:top;opacity:.88}
.shelf-placeholder{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;width:100%;height:100%;background:linear-gradient(145deg,#343434,#111);color:#fff;font-family:var(--serif);font-size:clamp(1.4rem,2.5vw,2.8rem);letter-spacing:-.05em}
.shelf-placeholder small{font-family:var(--sans);font-size:.58rem;letter-spacing:.08em;color:#d6d6d0}
.shelf-card button::after{content:"";position:absolute;inset:38% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.9))}
.shelf-label{position:absolute;z-index:2;left:14px;right:12px;bottom:13px;display:grid;gap:2px}
.shelf-label b{font-size:1rem;white-space:pre-line}
.shelf-label span{font-size:.58rem;color:#ddd}
.shelf-status{font:700 .52rem ui-monospace,monospace;color:#ff9b74;letter-spacing:.08em}

.program-shelf[data-shelf-state=idle] .shelf-card,
.program-shelf[data-shelf-state=entering] .shelf-card{opacity:0}
.program-shelf[data-shelf-state=ready] .shelf-card{opacity:1}
.shelf-card-detail{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:22px 18px;background:var(--white);color:var(--ink)}
.shelf-card-detail[hidden]{display:none}
.shelf-card-detail>b{font-family:var(--serif);font-size:clamp(2rem,3.5vw,4rem);font-weight:400;line-height:.9;letter-spacing:-.06em}
.shelf-card-detail p{margin:0;color:var(--muted);font-size:.75rem}
.shelf-card-detail a{width:max-content;margin-top:10px;padding-bottom:3px;border-bottom:1px solid var(--ink);font-size:.68rem;font-weight:700}
.shelf-card-close{position:absolute;right:10px;top:8px;border:0;background:none;font-size:1.2rem}
.v4-detail-modal{position:fixed;z-index:320;inset:0;display:grid;place-items:center;padding:clamp(16px,4vw,64px);background:var(--paper);backdrop-filter:none}
.v4-detail-modal__panel{position:relative;width:min(1120px,100%);height:min(760px,100%);display:grid;grid-template-columns:minmax(0,1.32fr) minmax(280px,.68fr);overflow:hidden;background:var(--white);border:1px solid var(--ink);box-shadow:0 30px 75px rgba(0,0,0,.24)}
.v4-detail-modal__visual{min-width:0;min-height:0;background:#111}
.v4-detail-modal__visual img,.v4-detail-modal__placeholder{display:block;width:100%;height:100%;object-fit:contain;object-position:center;background:#111}
.v4-detail-modal__placeholder{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;color:#fff;font-family:var(--serif);font-size:clamp(2rem,5vw,5rem)}
.v4-detail-modal__placeholder small{font-family:var(--sans);font-size:.72rem;letter-spacing:.08em;color:#d6d6d0}
.v4-detail-modal__copy{position:relative;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:clamp(28px,4vw,64px);background:var(--white);color:var(--ink)}
.v4-detail-modal__copy h2{margin:0;font-family:var(--serif);font-size:clamp(3rem,6vw,7rem);font-weight:400;line-height:.88;letter-spacing:-.06em}
.v4-detail-modal__copy p{max-width:28rem;margin:0;color:var(--muted);font-size:clamp(.9rem,1.2vw,1.2rem);line-height:1.55}
.v4-detail-modal__copy a{width:max-content;margin-top:8px;padding-bottom:5px;border-bottom:1px solid var(--ink);font-size:clamp(.76rem,1vw,1rem);font-weight:700}
.v4-detail-modal__back{width:max-content;padding:0;border:0;border-bottom:1px solid var(--muted);background:none;color:var(--muted);font:inherit;font-size:clamp(.76rem,1vw,1rem);cursor:pointer}
.v4-detail-modal__close{position:absolute;right:16px;top:12px;border:0;background:none;color:var(--ink);font-size:1.8rem;line-height:1;cursor:pointer}
.shelf-open{display:none!important}

.shelf-rail-pause{position:absolute;z-index:20;right:10px;bottom:8px;padding:6px 10px;border:1px solid rgba(16,16,16,.32);border-radius:0;background:rgba(251,251,250,.88);color:var(--ink);font-size:.59rem;line-height:1.2}
.shelf-rail-pause[aria-pressed="true"]{background:var(--ink);color:var(--white)}

/* Programs magazine */
.chapter-programs{background:var(--white)}
.editorial-inner{padding-top:62px;padding-bottom:28px}
.editorial-heading{
  display:grid;grid-template-columns:70px 1fr 245px;gap:16px;align-items:start;
  min-height:132px;border-bottom:1px solid var(--ink)
}
.editorial-heading h2{
  margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(4.6rem,7.8vw,8.2rem);
  line-height:.77;letter-spacing:-.075em
}
.editorial-side{padding-top:5px}
.editorial-side strong{display:block;font-size:1rem;line-height:1.15}
.editorial-side p{margin:10px 0;color:var(--muted);font-size:.66rem;line-height:1.55}
.editorial-side a{font-size:.6rem;border-bottom:1px solid var(--ink);padding-bottom:2px}
.program-collage{
  position:relative;height:59vh;min-height:390px;margin-top:14px
}
.program-piece{
  position:absolute;display:block;overflow:hidden;background:#161616;color:#fff;
  border:0;transition:transform .18s ease,box-shadow .18s ease
}
.program-piece:hover,.program-piece:focus-visible{transform:translateY(-4px);box-shadow:0 12px 30px rgba(0,0,0,.14);z-index:8}
.program-piece img{width:100%;height:100%;object-fit:cover;object-position:top;opacity:.94}
.program-piece::after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.84))}
.piece-copy{position:absolute;z-index:2;left:11px;right:10px;bottom:9px;display:grid;gap:2px}
.piece-copy b{font-size:.93rem}
.piece-copy span{font-size:.53rem;color:#eceae5}
.piece-zupzup{left:0;top:0;width:31.5%;height:100%}
.piece-jinto{left:32.6%;top:0;width:22.2%;height:48.5%}
.piece-ppuryo{left:55.8%;top:0;width:22.2%;height:48.5%}
.piece-nakchalro{left:79%;top:0;width:21%;height:100%}
.piece-brunch{left:32.6%;top:51.5%;width:22.2%;height:48.5%}
.piece-quote{left:55.8%;top:51.5%;width:22.2%;height:48.5%}
.program-index{
  display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--rule);margin-top:9px
}
.program-index a{min-height:42px;padding:8px 8px 0 0;border-right:1px solid var(--rule);font-size:.58rem}
.program-index a:last-child{border-right:0}
.program-index b{display:block;color:var(--signal);font:700 .5rem ui-monospace,monospace}
.program-index span{display:block;margin-top:4px}

/* Education spread */
.chapter-education{background:var(--white)}
.education-heading{grid-template-columns:70px 1fr 255px}
.education-collage{position:relative;height:59vh;min-height:390px;margin-top:14px}
.education-piece{
  position:absolute;display:block;overflow:hidden;background:#171717;color:#fff;border:0;
  transition:transform .18s ease
}
.education-piece:hover,.education-piece:focus-visible{transform:translateY(-4px);z-index:7}
.education-piece img{width:100%;height:100%;object-fit:cover;filter:saturate(.94)}
.education-piece::after{content:"";position:absolute;inset:44% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.84))}
.edu-auction{left:0;top:0;width:31.5%;height:100%}
.edu-coding{left:32.6%;top:0;width:31%;height:48.5%}
.edu-car{left:64.7%;top:0;width:35.3%;height:48.5%}
.edu-coaching{left:32.6%;top:51.5%;width:31%;height:48.5%}
.edu-court{left:64.7%;top:51.5%;width:35.3%;height:48.5%}
.education-index{display:none}

/* Contact spread */
.chapter-contact{background:var(--white)}
.contact-inner{
  display:grid;grid-template-columns:1.05fr .62fr;grid-template-rows:auto 1fr auto;
  gap:18px 42px;align-items:start;padding-top:68px
}
.contact-heading h2{
  margin:22px 0 0;font-family:var(--serif);font-size:clamp(4.5rem,7.4vw,8rem);
  font-weight:400;line-height:.72;letter-spacing:-.085em
}
.contact-heading em{font-style:normal;color:inherit}
.contact-copy{padding-top:38px}
.contact-copy h3{margin:0 0 18px;font-size:1.45rem;line-height:1.05;letter-spacing:-.035em}
.contact-copy p{margin:0;max-width:295px;color:var(--muted);font-size:.72rem;line-height:1.7}
.contact-doors{
  grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  align-self:end;margin-top:24px
}
.contact-doors a{
  min-height:0;aspect-ratio:.72;padding:0 0 14px;background:#f1f1ef;border:1px solid var(--rule);
  display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden;
  transition:transform .18s ease
}
.contact-doors figure{margin:0 0 auto;width:100%;height:132px;overflow:hidden;background:#ddd}
.contact-doors figure img{width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.82) contrast(.96)}
.contact-doors .door-dark figure img{filter:grayscale(1) brightness(.55) contrast(1.1)}
.contact-doors a:hover,.contact-doors a:focus-visible{transform:translateY(-4px)}
.contact-doors b{position:absolute;left:12px;top:12px;font:700 .5rem ui-monospace,monospace;color:var(--signal)}
.contact-doors strong{padding:0 12px;font-size:.76rem}
.contact-doors span{padding:5px 12px 0;color:var(--muted);font-size:.54rem}
.contact-doors .door-dark{background:#141414;color:#fff;border-color:#141414}
.contact-doors .door-dark span{color:#c7c7c3}
.v4-footer{
  grid-column:1/-1;align-self:end;min-height:42px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:0 clamp(18px,2.5vw,40px);font-size:.52rem;color:var(--muted);background:var(--white)
}
.v4-footer span:nth-child(2){justify-self:center}
.v4-footer a{justify-self:end;color:var(--ink);font-size:1rem}

/* tablet */
@media(max-width:900px){
  html{scroll-snap-type:y proximity}
  .v4-header{grid-template-columns:1fr auto;height:52px}
  .v4-header nav{display:none;position:absolute;left:0;right:0;top:52px;background:rgba(247,247,245,.98);padding:8px 18px;flex-direction:column;gap:0;border-bottom:1px solid var(--rule)}
  .v4-header nav.is-open{display:flex}
  .v4-header nav a{padding:11px 0;border-bottom:1px solid var(--rule)}
  .v4-menu{display:block;top:16px;right:16px}
  .chapter-indicator{top:69px}
  .chapter-inner{padding-top:82px}
  .cover-inner{grid-template-columns:1fr;align-content:start}
  .cover-copy{padding-top:15px}
  .cover-copy h1{font-size:clamp(3.6rem,10vw,6.2rem)}
  .shelf-wrap{height:55vh;margin-top:8px}
  .editorial-heading,.education-heading{grid-template-columns:55px 1fr}
  .editorial-side{grid-column:2;padding:0 0 10px}
  .program-collage,.education-collage{height:55vh}
  .contact-inner{grid-template-columns:1fr 1fr}
}

/* mobile */
@media(max-width:600px){
  .v4-detail-modal{padding:12px}
  .v4-detail-modal__panel{height:min(82svh,680px);grid-template-columns:1fr;grid-template-rows:minmax(0,1.12fr) minmax(0,.88fr)}
  .v4-detail-modal__copy{justify-content:flex-start;padding:24px 20px 20px;gap:8px}
  .v4-detail-modal__copy h2{font-size:clamp(2.8rem,14vw,5rem)}
  .v4-detail-modal__copy p{font-size:.82rem}
  .v4-detail-modal__close{right:12px;top:10px}
  .chapter{min-height:100svh}
  .chapter-inner{height:auto;min-height:100svh;padding:80px 16px 48px}
  .chapter-indicator{left:auto;right:16px;top:68px}
  .cover-inner{display:block}
  .cover-copy h1{font-size:clamp(3.05rem,14.5vw,4.6rem);line-height:.95;margin:18px 0}
  .cover-copy>p:not(.chapter-meta){font-size:.78rem;max-width:250px}
  .cover-actions{font-size:.65rem;margin-top:20px}
  .shelf-wrap{height:48svh;min-height:365px;margin-top:12px;perspective-origin:70% 45%}
  .shelf-card{left:42%;width:clamp(112px,30vw,150px)}
  .program-shelf[data-shelf-state=open]::before{backdrop-filter:none}
  .shelf-card-detail{padding:14px 14px 16px}
  .editorial-inner{padding-top:78px}
  .editorial-heading,.education-heading{display:block;min-height:0;padding-bottom:10px}
  .editorial-heading h2{font-size:clamp(3.6rem,18vw,6rem);line-height:.8}
  .editorial-side{margin-top:14px}
  .editorial-side strong{font-size:.9rem}
  .editorial-side p{font-size:.62rem}
  .program-collage,.education-collage{
    position:static;height:auto;min-height:0;display:grid;grid-template-columns:1.05fr .95fr;gap:7px;margin-top:12px
  }
  .program-piece,.education-piece{position:relative!important;left:auto;top:auto;width:auto;height:auto;min-height:165px}
  .piece-zupzup,.edu-auction{grid-row:span 2;min-height:338px}
  .piece-nakchalro{grid-column:1/-1;min-height:185px}
  .program-index{grid-template-columns:1fr 1fr}
  .contact-inner{display:block;padding-top:78px}
  .contact-heading h2{font-size:clamp(4rem,18vw,6.3rem)}
  .contact-copy{padding-top:28px}
  .contact-doors{grid-template-columns:1fr 1fr;margin-top:28px}
  .contact-doors a{min-height:150px}
  .v4-footer{grid-template-columns:1fr auto}
  .v4-footer span:nth-child(2){display:none}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .shelf-card,.program-piece,.education-piece,.contact-doors a{transition:none!important}
  .program-shelf[data-shelf-state=idle] .shelf-card,
  .program-shelf[data-shelf-state=entering] .shelf-card{opacity:1}
}


/* === V4 APPROVED REFERENCE LOCK ===
   The uploaded 4-panel artwork is the source of truth.
   These rules intentionally override looser earlier composition rules. */

@media(min-width:901px){
  .chapter-inner{padding-top:58px;padding-bottom:28px}
  .chapter-meta{font-size:.52rem}
  .chapter-indicator{top:57px;font-size:.52rem}
  .v4-header{height:40px;padding-left:14px;padding-right:14px}
  .v4-brand{font-size:.52rem}
  .v4-brand img{width:14px;height:14px}
  .v4-header nav{font-size:.46rem;gap:22px}

  /* Page 01 */
  .cover-inner{
    grid-template-columns:26% 74%;
    gap:0;
    padding-left:18px;
    padding-right:8px;
  }
  .cover-copy{align-self:center;padding-left:4px;padding-top:0}
  .cover-copy h1{
    font-size:clamp(2.85rem,4.45vw,5.15rem);
    line-height:.91;
    letter-spacing:-.065em;
    margin:20px 0 18px;
    max-width:390px;
  }
  .cover-copy>p:not(.chapter-meta){
    max-width:220px;
    font-size:.62rem;
    line-height:1.55;
  }
  .shelf-wrap{
    height:74vh;
    margin-left:-2%;
  }
  .program-shelf{height:82%}
  .shelf-guide{left:3%;right:2%;top:13%;bottom:9%}

  /* Page 02 */
  .editorial-inner{
    padding:52px 14px 20px;
  }
  .editorial-heading{
    min-height:112px;
    grid-template-columns:48px 1fr 220px;
    gap:12px;
    padding-bottom:8px;
  }
  .editorial-heading h2{
    font-size:clamp(4.4rem,7.6vw,8rem);
    line-height:.73;
    letter-spacing:-.085em;
  }
  .editorial-side{padding-top:0}
  .editorial-side strong{font-size:.84rem}
  .editorial-side p{font-size:.51rem;line-height:1.5;margin:7px 0}
  .editorial-side a{font-size:.49rem}
  .program-collage{
    margin-top:8px;
    height:59.5vh;
    min-height:370px;
  }
  .piece-zupzup{left:0;top:0;width:30.3%;height:100%}
  .piece-jinto{left:31.2%;top:0;width:22.5%;height:48.4%}
  .piece-ppuryo{left:54.6%;top:0;width:22.5%;height:48.4%}
  .piece-nakchalro{left:78%;top:0;width:22%;height:100%}
  .piece-brunch{left:31.2%;top:51.6%;width:22.5%;height:48.4%}
  .piece-quote{left:54.6%;top:51.6%;width:22.5%;height:48.4%}
  .piece-copy{left:8px;bottom:7px}
  .piece-copy b{font-size:.8rem}
  .piece-copy span{font-size:.45rem}
  .program-index{
    margin-top:5px;
    min-height:38px;
    grid-template-columns:repeat(5,1fr);
  }
  .program-index a{font-size:.49rem;min-height:36px;padding-top:5px}

  /* Page 03 */
  .education-heading{
    grid-template-columns:48px 1fr 235px;
    min-height:112px;
  }
  .education-collage{
    margin-top:8px;
    height:59.5vh;
    min-height:370px;
  }
  .edu-auction{left:0;top:0;width:30.3%;height:100%}
  .edu-coding{left:31.2%;top:0;width:31.2%;height:48.4%}
  .edu-car{left:63.3%;top:0;width:22.2%;height:48.4%}
  .edu-coaching{left:31.2%;top:51.6%;width:31.2%;height:48.4%}
  .edu-court{left:63.3%;top:51.6%;width:22.2%;height:48.4%}
  .education-quote{
    position:absolute;
    right:2.5%;
    bottom:9.5%;
    width:12.3%;
    margin:0;
    font-family:var(--serif);
    font-size:clamp(.85rem,1.4vw,1.4rem);
    line-height:1.35;
    color:#6c675f;
    font-style:normal;
    text-align:left;
  }

  /* Page 04 */
  .contact-inner{
    padding:54px 14px 10px;
    grid-template-columns:47% 29%;
    grid-template-rows:auto 1fr auto;
    column-gap:14%;
  }
  .contact-heading h2{
    margin-top:16px;
    font-size:clamp(4.2rem,7.2vw,7.7rem);
    line-height:.7;
    letter-spacing:-.09em;
  }
  .contact-copy{padding-top:20px}
  .contact-copy h3{font-size:1.05rem;margin-bottom:14px}
  .contact-copy p{font-size:.58rem;line-height:1.6;max-width:220px}
  .contact-doors{
    grid-column:1/-1;
    margin-top:12px;
    gap:7px;
  }
  .contact-doors a{min-height:190px;padding-bottom:10px}
  .contact-doors figure{height:112px}
  .contact-doors strong{font-size:.68rem}
  .contact-doors span{font-size:.47rem}
  .v4-footer{min-height:28px;font-size:.45rem}
}

/* === Pixel match pass against approved 4-panel reference === */
@media(min-width:901px){
  .v4-header{
    height:64px;
    padding:0 20px;
    background:rgba(248,248,246,.94);
  }
  .v4-brand img{display:none}
  .v4-brand{font-size:.56rem;letter-spacing:.03em}
  .v4-header nav{font-size:.48rem;gap:28px}

  .chapter-inner{
    padding-top:64px;
    padding-left:20px;
    padding-right:20px;
    padding-bottom:20px;
  }
  .chapter-meta{font-size:.5rem}

  /* Page 01 */
  .cover-inner{
    grid-template-columns:26.5% 73.5%;
    align-items:start;
    gap:0;
  }
  .cover-copy{
    align-self:start;
    padding-top:34px;
    padding-left:0;
  }
  .cover-copy h1{
    font-size:clamp(3.1rem,4.1vw,4.8rem);
    line-height:.92;
    margin:17px 0 15px;
    max-width:315px;
  }
  .cover-copy>p:not(.chapter-meta){
    width:205px;
    font-size:.56rem;
    line-height:1.52;
  }
  .shelf-wrap{
    height:calc(100svh - 88px);
    margin:0;
    align-self:start;
  }
  .program-shelf{
    height:100%;
  }
  .shelf-guide{left:0;right:0;top:11%;bottom:11%}

  /* Page 02 + 03 shared heading proportions */
  .editorial-inner{
    padding-top:64px;
    padding-bottom:18px;
  }
  .editorial-heading{
    min-height:250px;
    grid-template-columns:48px 1fr 224px;
    align-items:start;
    padding-top:8px;
    padding-bottom:14px;
  }
  .editorial-heading h2{
    font-size:clamp(6rem,9.2vw,10rem);
    line-height:.75;
    margin-top:6px;
  }
  .editorial-side{
    padding-top:6px;
  }
  .editorial-side strong{
    font-size:.92rem;
    line-height:1.1;
  }
  .editorial-side p{font-size:.5rem}
  .editorial-side a{font-size:.47rem}

  .program-collage,.education-collage{
    height:47.5vh;
    min-height:360px;
    margin-top:0;
  }
  .program-index{
    margin-top:10px;
    min-height:56px;
  }

  /* Page 03 quote placement to match approved mock */
  .education-quote{
    right:1.6%;
    bottom:5.7%;
    width:13%;
    font-size:clamp(.82rem,1.15vw,1.15rem);
    line-height:1.32;
  }

  /* Page 04 */
  .contact-inner{
    padding-top:64px;
    padding-bottom:12px;
    grid-template-columns:47% 29%;
    grid-template-rows:335px 292px 1fr;
    column-gap:14%;
    row-gap:0;
  }
  .contact-heading{
    align-self:start;
  }
  .contact-heading h2{
    margin-top:10px;
    font-size:clamp(4.8rem,7.8vw,8.6rem);
    line-height:.7;
  }
  .contact-copy{
    padding-top:10px;
  }
  .contact-copy h3{
    font-size:1.05rem;
    line-height:1.06;
  }
  .contact-copy p{
    font-size:.56rem;
    line-height:1.6;
  }
  .contact-doors{
    grid-row:2;
    grid-column:1/-1;
    align-self:start;
    margin-top:0;
    gap:8px;
  }
  .contact-doors a{
    min-height:210px;
    max-height:210px;
  }
  .contact-doors figure{height:118px}
  .v4-footer{
    grid-row:3;
    align-self:end;
    min-height:30px;
  }
}


/* === FINAL DESKTOP REFERENCE GEOMETRY ===
   Coordinates are normalized from the approved 4-panel artwork. */
@media(min-width:901px){
  .chapter{height:100svh;min-height:100svh}
  .chapter-inner{height:100svh;min-height:100svh;padding:0 4.8vw}

  .v4-header{
    height:12.2vh;
    max-height:82px;
    min-height:54px;
    padding:0 4.8vw;
    border-bottom:1px solid rgba(16,16,16,.10);
  }
  .v4-brand{font-size:.55rem}
  .v4-header nav{font-size:.47rem}

  .chapter-meta{
    position:absolute;
    left:4.8vw;
    top:15.2vh;
    z-index:12;
    font-size:.5rem;
  }

  /* Chapter 01 exact composition */
  .cover-inner{display:block}
  .cover-copy{
    position:absolute;
    left:4.8vw;
    top:15.2vh;
    width:25%;
    padding:0;
  }
  .cover-copy .chapter-meta{display:none}
  .cover-copy h1{
    margin:0 0 2.5vh;
    max-width:245px;
    font-size:clamp(2.45rem,2.4vw,3.2rem);
    line-height:.91;
    letter-spacing:-.068em;
  }
  .cover-copy>p:not(.chapter-meta){
    width:205px;
    font-size:.55rem;
    line-height:1.55;
  }
  .shelf-wrap{
    position:absolute;
    left:10vw;
    right:1.6vw;
    top:13.5vh;
    bottom:7vh;
    height:auto;
  }
  .program-shelf{height:100%}
  .shelf-card{
    left:24%;
    top:70%;
    width:min(15vw,230px);
    aspect-ratio:.58;
  }
  .shelf-guide{left:0;right:0;top:7%;bottom:1%}
  .shelf-label b{font-size:.82rem}
  .shelf-label span{font-size:.47rem}

  /* Shared magazine title plane */
  .editorial-inner{position:relative;padding:0 4.8vw}
  .editorial-heading{
    position:absolute;
    left:4.8vw;
    right:4.8vw;
    top:16.8vh;
    height:15.5vh;
    min-height:0;
    display:grid;
    grid-template-columns:1fr 24%;
    gap:3%;
    border:0;
    padding:0;
  }
  .editorial-heading .chapter-meta{display:none}
  .editorial-heading h2{
    align-self:start;
    font-size:clamp(5.8rem,8.7vw,9.6rem);
    line-height:.74;
    letter-spacing:-.08em;
    margin:0;
  }
  .editorial-side{
    align-self:start;
    padding-top:0;
  }
  .editorial-side strong{font-size:.87rem;line-height:1.08}
  .editorial-side p{font-size:.49rem;line-height:1.5;margin:.9vh 0}
  .editorial-side a{font-size:.47rem}

  /* Chapter 02 coordinates */
  .chapter-programs .program-collage{
    position:absolute;
    left:4.8vw;
    right:4.8vw;
    top:36.6vh;
    height:47.7vh;
    min-height:0;
    margin:0;
  }
  .piece-zupzup{left:0;top:0;width:25.1%;height:100%}
  .piece-jinto{left:26.2%;top:0;width:28.2%;height:48.4%}
  .piece-ppuryo{left:55.5%;top:0;width:28.2%;height:48.4%}
  .piece-nakchalro{left:84.7%;top:0;width:15.3%;height:100%}
  .piece-brunch{left:26.2%;top:51.6%;width:28.2%;height:48.4%}
  .piece-quote{left:55.5%;top:51.6%;width:28.2%;height:48.4%}
  .chapter-programs .program-index{
    position:absolute;
    left:4.8vw;
    right:4.8vw;
    top:86.4vh;
    height:9.2vh;
    margin:0;
    grid-template-columns:repeat(5,1fr);
    overflow:hidden;
  }
  .program-index a{
    min-height:0;
    padding:.8vh .6vw 0 0;
    font-size:.48rem;
  }

  /* Chapter 03 coordinates */
  .chapter-education .education-collage{
    position:absolute;
    left:4.8vw;
    right:4.8vw;
    top:33.3vh;
    height:56.3vh;
    min-height:0;
    margin:0;
  }
  .edu-auction{left:0;top:0;width:30.5%;height:100%}
  .edu-coding{left:31.6%;top:0;width:29.5%;height:48.4%}
  .edu-car{left:62.2%;top:0;width:37.8%;height:48.4%}
  .edu-coaching{left:31.6%;top:51.6%;width:29.5%;height:48.4%}
  .edu-court{left:62.2%;top:51.6%;width:22.2%;height:48.4%}
  .education-quote{
    right:4.9vw;
    bottom:9.3vh;
    width:13.2%;
    font-size:clamp(.8rem,1.1vw,1.08rem);
  }

  /* Chapter 04 coordinates */
  .contact-inner{
    position:relative;
    display:block;
    padding:0 4.8vw;
  }
  .contact-heading{
    position:absolute;
    left:4.8vw;
    top:18.5vh;
    width:49%;
  }
  .contact-heading .chapter-meta{display:none}
  .contact-heading h2{
    margin:0;
    font-size:clamp(4.5rem,7.25vw,8rem);
    line-height:.70;
  }
  .contact-copy{
    position:absolute;
    right:8.4vw;
    top:18.2vh;
    width:24%;
    padding:0;
  }
  .contact-copy h3{font-size:1.02rem;line-height:1.05}
  .contact-copy p{font-size:.54rem;line-height:1.6}
  .contact-doors{
    position:absolute;
    left:4.8vw;
    right:4.8vw;
    top:48.3vh;
    height:auto;
    margin:0;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:.8vw;
  }
  .contact-doors a{
    min-height:0;
    max-height:none;
    height:auto;
    aspect-ratio:.88;
    padding-bottom:1.1vh;
  }
  .contact-doors figure{
    height:59%;
  }
  .contact-doors strong{font-size:.67rem}
  .contact-doors span{font-size:.46rem}
  .v4-footer{
    position:absolute;
    left:4.8vw;
    right:4.8vw;
    bottom:3.7vh;
    height:3.2vh;
    min-height:0;
    padding:0;
  }
}

/* Cover-only composition: a single 830:560 artboard follows the approved reference. */
@media(min-width:901px){
  .v4-header{
    height:clamp(32px,3.85vw,48px);
    padding:0 1.8vw;
    background:rgba(247,247,245,.72);
    backdrop-filter:none;
  }
  .v4-brand{font-size:clamp(.58rem,.68vw,.82rem);letter-spacing:.02em}
  .v4-header nav{gap:2.8vw;font-size:clamp(.55rem,.62vw,.74rem)}
  .v4-menu{display:block;position:fixed;top:1.4vh;right:1.8vw;justify-self:end;width:18px;height:18px;padding:0;border:0;background:none;font-size:0}
.v4-menu::before{content:"☰";font-size:12px;line-height:18px;color:var(--ink)}
.v4-data-error{position:fixed;z-index:120;left:50%;top:50%;width:min(420px,calc(100vw - 32px));transform:translate(-50%,-50%);padding:24px;background:var(--white);border:1px solid var(--rule);box-shadow:0 20px 50px rgba(0,0,0,.12);text-align:center}
.v4-data-error[hidden]{display:none}
.v4-data-error strong{display:block;font-size:1rem}
.v4-data-error p{margin:10px 0 18px;color:var(--muted);font-size:.82rem}
.v4-data-error button,.v4-data-error a{display:inline-block;padding:8px 12px;border:1px solid var(--ink);background:var(--ink);color:var(--white);font-size:.72rem;cursor:pointer}
.v4-data-error a{margin-left:6px;background:transparent;color:var(--ink)}

  #chapter-01{background:#f2f2f0}
  #chapter-01 .chapter-inner{
    width:min(100vw,148.214svh);
    height:min(100svh,67.47vw);
    aspect-ratio:830 / 560;
    min-height:0;
    padding:0;
    margin:auto;
    position:relative;
    overflow:hidden;
  }
  #chapter-01 .cover-index{
    position:absolute;z-index:12;left:1.8%;top:7.5%;margin:0;
    display:flex;align-items:center;gap:9px;
    font:700 clamp(.56rem,.62vw,.74rem) ui-monospace,monospace;letter-spacing:.04em;
  }
  #chapter-01 .cover-index i{display:block;width:28px;border-top:1px solid #d5d5d1}
  #chapter-01 .cover-copy{position:absolute;z-index:10;left:1.8%;top:14.2%;width:24%;padding:0}
  #chapter-01 .cover-copy .chapter-meta{display:none}
  #chapter-01 .cover-copy h1{
    max-width:240px;margin:0 0 3.5%;
    font-size:clamp(36px,4vw,56px);line-height:.92;letter-spacing:-.075em;
  }
  #chapter-01 .cover-copy h1 span{display:block;white-space:nowrap}
  #chapter-01 .cover-copy>p:not(.chapter-meta){width:240px;font-size:clamp(.72rem,.82vw,.98rem);line-height:1.55}
  #chapter-01 .program-shelf[data-shelf-state=ready] .shelf-card{opacity:1;filter:none}
  #chapter-01 .program-shelf[data-shelf-state=ready]:has(.shelf-card:hover) .shelf-card:not(:hover){opacity:1;filter:none}
  #chapter-01 .shelf-label small{font-size:clamp(.52rem,.58vw,.7rem)}
  #chapter-01 .shelf-label b{font-size:clamp(1.05rem,1.3vw,1.5rem)}
  #chapter-01 .shelf-label span{font-size:clamp(.64rem,.74vw,.88rem);line-height:1.35}
  #chapter-01 .cover-footer{
    position:absolute;z-index:12;left:1.8%;right:1.8%;bottom:2.5%;
    display:flex;align-items:end;justify-content:space-between;
    font:700 clamp(.72rem,.78vw,.94rem) ui-monospace,monospace;letter-spacing:.04em;
  }
  #chapter-01 .cover-footer span:last-child{text-align:right;line-height:1.35}
}

/* Readable supporting copy across the magazine chapters. Headline scale and
   the cover composition stay unchanged; only non-title copy is enlarged. */
#chapter-02 .editorial-side p,
#chapter-03 .editorial-side p{font-size:.86rem;line-height:1.6}
#chapter-02 .editorial-side a,
#chapter-03 .editorial-side a{font-size:.72rem}
#chapter-02 .piece-copy span,
#chapter-03 .piece-copy span{font-size:.68rem;line-height:1.4}
#chapter-02 .piece-copy small,
#chapter-03 .piece-copy small{font-size:.62rem}
#chapter-02 .program-index a{font-size:.68rem}
#chapter-02 .program-index b{font-size:.58rem}
#chapter-04 .contact-copy p{font-size:.86rem;line-height:1.7}
#chapter-04 .contact-doors b{font-size:.58rem}
#chapter-04 .contact-doors strong{font-size:.86rem}
#chapter-04 .contact-doors span{font-size:.68rem;line-height:1.45}

/* Keep the shared chrome and chapter markers identical at every viewport. */
.v4-brand img{display:block!important;width:16px;height:16px}
.v4-menu{
  display:block!important;
  width:20px;height:20px;padding:0;
  font-size:0!important;
  line-height:20px;
}
.v4-menu::before{
  content:"☰";
  display:block;
  color:var(--ink);
  font:400 14px/20px Arial,sans-serif;
  text-align:center;
}
.chapter-meta,
.cover-index{
  font-family:var(--sans)!important;
  font-size:clamp(.56rem,.62vw,.74rem)!important;
  line-height:1.2;
}
#chapter-02 .editorial-heading,
#chapter-03 .editorial-heading,
#chapter-04 .contact-heading{position:relative}
#chapter-02 .editorial-heading .chapter-meta,
#chapter-03 .editorial-heading .chapter-meta,
#chapter-04 .contact-heading .chapter-meta{
  display:block!important;
  position:absolute;
  left:0;
  top:-4.2rem;
  margin:0;
  z-index:12;
}
@media(max-width:900px){
  #chapter-02 .editorial-heading .chapter-meta,
  #chapter-03 .editorial-heading .chapter-meta,
  #chapter-04 .contact-heading .chapter-meta{top:-2.2rem}
}

/* Supporting copy uses one readable voice; editorial chapter headings stay serif. */
.v4-header,
.v4-header nav,
.chapter-meta,
.cover-copy>p:not(.chapter-meta),
.editorial-side,
.editorial-side p,
.editorial-side a,
.piece-copy,
.piece-copy span,
.piece-copy small,
.program-index a,
.program-index b,
.education-quote,
.contact-copy,
.contact-copy p,
.contact-doors,
.v4-footer,
.shelf-label,
.shelf-placeholder,
.shelf-card-detail{font-family:var(--sans)}
.editorial-side p,
.contact-copy p,
.education-quote{color:var(--muted)}
.education-quote{font-style:normal}
.program-index a{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:8px;
  text-align:center;
}
.program-index b{font-family:var(--sans);font-weight:700;letter-spacing:.08em}

@media(max-width:600px){
  #chapter-04 .contact-inner{
    display:block;
    padding:78px 16px 48px;
  }
  #chapter-04 .contact-heading,
  #chapter-04 .contact-copy{
    position:static;
    width:auto;
  }
  #chapter-04 .contact-heading h2{font-size:clamp(4rem,18vw,6.3rem)}
  #chapter-04 .contact-copy{padding-top:28px}
  #chapter-04 .contact-doors{
    position:static;
    height:auto;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
    margin-top:28px;
  }
  #chapter-04 .contact-doors a{
    min-height:0;
    height:auto;
    aspect-ratio:.72;
  }
  #chapter-04 .contact-doors figure{height:58%}
  #chapter-04 .v4-footer{
    position:static;
    height:auto;
    min-height:28px;
    margin-top:32px;
  }
}

@media(max-width:900px){
  /* Keep title, supporting copy, and link in one stable vertical flow. */
  #chapter-02 .editorial-heading,
  #chapter-03 .editorial-heading{
    display:block;
    min-height:0;
    padding-bottom:10px;
  }
  #chapter-02 .editorial-heading .chapter-meta,
  #chapter-03 .editorial-heading .chapter-meta,
  #chapter-04 .contact-heading .chapter-meta{
    position:static!important;
    display:block!important;
    margin:0 0 18px;
  }
  #chapter-02 .editorial-heading h2,
  #chapter-03 .editorial-heading h2{
    margin:0;
  }
  #chapter-02 .editorial-side,
  #chapter-03 .editorial-side{
    display:block;
    width:min(100%,360px);
    margin-top:18px;
    padding:0;
  }
  #chapter-04 .contact-doors{top:42vh}
  #chapter-04 .v4-footer{bottom:8vh}
}

#chapter-01{background:#f2f2f0!important}

/* Mid-width cover: keep the title clear and scale the shelf as one scene. */
@media(min-width:601px) and (max-width:1100px){
  .v4-header nav{display:none}
  .v4-menu{display:block!important}
  #chapter-01 .chapter-inner{
    width:100%;height:100svh;min-height:0;aspect-ratio:auto;padding:0;overflow:hidden;
  }
  #chapter-01 .cover-index{position:absolute;z-index:12;left:4.8vw;top:10vh;font-size:clamp(.56rem,.9vw,.74rem)}
  #chapter-01 .cover-copy{
    position:absolute;z-index:10;left:4.8vw;top:17vh;width:42%;padding:0;
  }
  #chapter-01 .cover-copy h1{
    max-width:360px;margin:0 0 2.4vh;
    font-size:clamp(2.25rem,6.5vw,5.2rem);line-height:.92;
  }
  #chapter-01 .cover-copy>p:not(.chapter-meta){width:240px;font-size:clamp(.68rem,.9vw,.86rem)}
  #chapter-01 .cover-footer{
    position:absolute;z-index:12;left:4.8vw;right:4.8vw;bottom:4vh;
    display:flex;align-items:end;justify-content:space-between;
    font:700 clamp(.72rem,.78vw,.94rem) ui-monospace,monospace;letter-spacing:.04em;
  }
  #chapter-01 .cover-footer span:last-child{text-align:right;line-height:1.35}
}

/* Keep the cover headline as the same three-line composition at every width. */
#chapter-01 .cover-copy h1 span{display:block;white-space:nowrap}

@media(min-width:901px){
  #chapter-01 .cover-copy h1{font-size:clamp(2.2rem,2.4vw,3.2rem);max-width:260px}
}

@media(max-width:600px){
  #chapter-01 .cover-copy h1{max-width:100%;font-size:clamp(2.7rem,14.5vw,4.6rem)}
}

/* Contact spread switches to two columns before the cards become cramped. */
@media(min-width:601px) and (max-width:900px){
  #chapter-04 .contact-inner{
    display:block;
    min-height:100svh;
    padding:7vh 4.8vw 4vh;
  }
  #chapter-04 .contact-heading,
  #chapter-04 .contact-copy{
    position:static;
    width:auto;
  }
  #chapter-04 .contact-heading h2{
    margin:0;
    font-size:clamp(3.8rem,8vw,5.2rem);
    line-height:.72;
  }
  #chapter-04 .contact-copy{
    max-width:380px;
    padding:14px 0 0;
  }
  #chapter-04 .contact-doors{
    position:static;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    height:auto;
    margin-top:clamp(18px,3vh,28px);
  }
  #chapter-04 .contact-doors a{
    min-height:0;
    max-height:none;
    height:clamp(190px,24vw,210px);
    aspect-ratio:auto;
  }
  #chapter-04 .contact-doors figure{height:59%}
  #chapter-04 .v4-footer{
    position:static;
    height:auto;
    min-height:30px;
    margin-top:18px;
    padding:0;
  }
}

/* Keep the actual navigation and the chapter marker anchored on narrow screens. */
@media(max-width:600px){
  .v4-header{grid-template-columns:1fr auto 1fr;padding-left:16px;padding-right:16px}
  .v4-header nav{display:flex!important;position:static;justify-self:center;flex-direction:row;gap:clamp(7px,2.8vw,14px);padding:0;background:transparent;border:0;font-size:clamp(.43rem,2.05vw,.54rem)}
  .v4-header nav a{min-width:0;padding:4px 0;border-bottom:1px solid transparent}
  .v4-menu{display:none!important}
  #chapter-01 .cover-index{left:16px!important;top:124px!important}
  #chapter-01 .shelf-rail-pause{display:none}
  #chapter-01 .cover-footer{left:16px;right:16px;bottom:18px;font-size:10px}
  #chapter-01 .cover-footer span:last-child{max-width:142px}
}

/* Header language swap and cover wordmark. */
.v4-brand{gap:0}
.v4-brand img{width:21px!important;height:21px!important}
.v4-header nav a{position:relative;display:grid;place-items:center;min-width:58px}
.nav-label{grid-area:1/1;transition:opacity .16s ease,transform .16s ease}
.nav-label-ko{opacity:0;transform:translateY(4px)}
.v4-header nav a:hover .nav-label-en,
.v4-header nav a:focus-visible .nav-label-en{opacity:0;transform:translateY(-4px)}
.v4-header nav a:hover .nav-label-ko,
.v4-header nav a:focus-visible .nav-label-ko{opacity:1;transform:translateY(0)}
.v4-menu{display:grid!important;place-items:center;width:42px!important;height:24px!important;font-size:.58rem!important;line-height:1!important}
.v4-menu::before{display:none!important}
.menu-label{grid-area:1/1;transition:opacity .16s ease,transform .16s ease}
.menu-label-ko{opacity:0;transform:translateY(4px)}
.v4-menu:hover .menu-label-en,
.v4-menu:focus-visible .menu-label-en{opacity:0;transform:translateY(-4px)}
.v4-menu:hover .menu-label-ko,
.v4-menu:focus-visible .menu-label-ko{opacity:1;transform:translateY(0)}
#chapter-01 .shelf-wrap{z-index:1}
#chapter-01 .cover-wordmark{
  position:absolute;z-index:0;left:9%;top:6%;margin:0;
  color:rgba(16,16,16,.16);font-family:var(--sans);font-size:clamp(3.1rem,7.6vw,6rem);
  font-weight:900;line-height:.82;letter-spacing:.055em;white-space:nowrap;pointer-events:none;
}
#chapter-01 .cover-services{
  position:absolute;z-index:12;left:9%;top:clamp(128px,15vw,178px);max-width:min(62vw,720px);margin:0;
  color:var(--ink);font:650 clamp(.72rem,.86vw,.96rem)/1.45 var(--sans);letter-spacing:0;
}
#chapter-01 .program-shelf{z-index:1}
@media(max-width:600px){
  .v4-brand img{width:19px!important;height:19px!important}
  .v4-header nav a{min-width:0}
  #chapter-01 .cover-wordmark{left:5%;top:8%;font-size:clamp(2.35rem,12vw,4.2rem);letter-spacing:.03em}
  #chapter-01 .cover-services{left:5%;top:clamp(116px,32vw,156px);max-width:80vw;font-size:clamp(.66rem,2.7vw,.78rem)}
}

@media(max-width:1100px){
  #chapter-01 .cover-wordmark{
    z-index:5;
    left:8vw;
    top:7vh;
  }
  #chapter-01 .cover-index{
    position:absolute!important;
    z-index:12;
    left:8vw;
    top:calc(7vh + clamp(52px,12vw,82px))!important;
  }
}

/* Contact cards: image-led editorial cards with a clear information panel. */
#chapter-04 .contact-doors a{
  aspect-ratio:.72;
  padding:0 12px 12px;
  background:#fff;
  border:1px solid #deded9;
  box-shadow:none;
  justify-content:flex-start;
  transition:transform .18s ease,box-shadow .18s ease;
}
#chapter-04 .contact-doors a:hover,
#chapter-04 .contact-doors a:focus-visible{
  transform:translateY(-4px);
  box-shadow:0 12px 24px rgba(17,17,17,.1);
}
#chapter-04 .contact-doors figure{
  flex:0 0 43%;
  width:calc(100% + 24px);
  height:auto;
  margin:0 -12px;
  border-bottom:1px solid #e4e4df;
}
#chapter-04 .contact-doors figure img{filter:saturate(.9) contrast(.98)}
#chapter-04 .contact-doors b{
  left:20px;
  top:10px;
  padding:5px 7px;
  background:#fff;
  color:#333;
  font-size:.55rem;
  line-height:1;
}
#chapter-04 .contact-doors strong{
  margin-top:22px;
  padding:0;
  font-size:.9rem;
  line-height:1.2;
}
#chapter-04 .contact-doors span{
  margin-top:auto;
  padding:12px 10px;
  background:#f2f2ef;
  color:#55554f;
  font-size:.62rem;
  line-height:1.35;
}
#chapter-04 .contact-doors .door-dark{
  background:#171717;
  border-color:#171717;
  color:#fff;
}
#chapter-04 .contact-doors .door-dark figure{border-color:#303030}
#chapter-04 .contact-doors .door-dark b{background:#fff;color:#111}
#chapter-04 .contact-doors .door-dark span{background:#292929;color:#e2e2dc}

@media(max-width:900px){
  #chapter-04 .contact-doors a{aspect-ratio:auto}
}

/* Anchor the cover footer to the full page, independent of the scaled artboard. */
#chapter-01 .cover-footer{
  position:absolute;z-index:12;left:24px;right:24px;bottom:24px;
  display:flex;align-items:end;justify-content:space-between;gap:16px;
  font:700 12px/1.25 var(--sans);letter-spacing:0;
}
#chapter-01 .cover-footer span:last-child{max-width:190px;text-align:right}
#chapter-01 .cover-tagline{
  position:absolute;z-index:12;right:clamp(52px,10vw,160px);bottom:clamp(104px,16vh,172px);
  width:min(19vw,235px);margin:0;color:var(--ink);font:700 clamp(.8rem,1.05vw,1.1rem)/1.35 var(--sans);
  letter-spacing:0;
}

/* Contact cards are print-sized objects, not full-height panels. */
@media(min-width:901px){
  #chapter-04 .contact-doors{height:300px}
  #chapter-04 .contact-doors a{
    min-height:300px;
    height:300px;
    max-height:300px;
    aspect-ratio:auto;
  }
}

/* The full navigation remains visible through tablet widths. */
@media(min-width:601px) and (max-width:900px){
  .v4-header{grid-template-columns:1fr auto 1fr}
  .v4-header nav{display:flex;position:static;justify-self:center;flex-direction:row;gap:clamp(15px,3.2vw,26px);padding:0;background:transparent;border:0;font-size:clamp(.5rem,.85vw,.62rem)}
  .v4-header nav a{padding:4px 0;border-bottom:1px solid transparent}
  .v4-menu{display:none!important}
  #chapter-01 .cover-index{left:24px!important}
}

@media(max-width:600px){
  .v4-menu{display:none!important}
}

/* One header and one left baseline across every cover width. */
.v4-header{grid-template-columns:1fr auto 1fr}
.v4-header nav{display:flex!important;position:static;justify-self:center;flex-direction:row;gap:clamp(7px,2.8vw,28px);padding:0;background:transparent;border:0;font-size:clamp(.43rem,.72vw,.62rem)}
.v4-header nav a{min-width:0;padding:4px 0;border-bottom:1px solid transparent}
.v4-menu{
  display:grid!important;
  position:fixed;
  z-index:100;
  top:16px;
  right:16px;
  width:42px!important;
  height:24px!important;
  padding:0;
  place-items:center;
  border:0;
  background:none;
  font-size:.58rem!important;
  line-height:1!important;
}
.v4-menu::before{display:none!important}
.v4-header nav.is-open{
  position:fixed!important;
  z-index:99;
  top:53px!important;
  right:16px!important;
  left:auto!important;
  display:flex!important;
  flex-direction:column;
  gap:0;
  min-width:150px;
  padding:8px 16px;
  background:rgba(248,248,246,.98);
  border:1px solid var(--rule);
  box-shadow:0 14px 30px rgba(0,0,0,.08);
}
.v4-header nav.is-open a{padding:10px 0;border-bottom:1px solid var(--rule)}
.v4-header nav.is-open a:last-child{border-bottom:0}
#chapter-01 .cover-index{left:clamp(16px,2.6vw,40px)!important}

@media(max-width:600px){
  #chapter-01 .cover-footer{left:16px;right:16px;bottom:18px;font-size:9px;line-height:1.3}
  #chapter-01 .cover-footer span:last-child{max-width:120px}
  #chapter-01 .cover-tagline{right:16px;bottom:76px;width:132px;font-size:.68rem;line-height:1.4}
}

/* Company information closes the final contact chapter. */
#chapter-04 .v4-footer{
  position:absolute;
  z-index:14;
  left:50%;
  right:auto;
  bottom:0;
  width:100vw;
  height:clamp(124px,15vh,156px);
  min-height:0;
  margin:0;
  padding:clamp(22px,2.2vh,30px) clamp(24px,5vw,64px);
  transform:translateX(-50%);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(260px,.78fr);
  align-items:start;
  gap:clamp(24px,8vw,160px);
  background:#101414;
  color:#e7e7e2;
  font-size:clamp(.72rem,.82vw,.9rem);
  line-height:1.45;
}
#chapter-04 .v4-footer__company,
#chapter-04 .v4-footer__links{display:grid;gap:8px}
#chapter-04 .v4-footer__company span:nth-child(2){display:block!important;justify-self:auto}
#chapter-04 .v4-footer strong,
#chapter-04 .v4-footer a{color:#fff;font-weight:750}
#chapter-04 .v4-footer a{width:max-content}
#chapter-04 .v4-footer a:hover,
#chapter-04 .v4-footer a:focus-visible{text-decoration:underline;text-underline-offset:3px}

@media(min-width:901px) and (max-height:820px){
  #chapter-04 .contact-doors{height:250px;top:45vh}
  #chapter-04 .contact-doors a{min-height:250px;height:250px;max-height:250px}
  #chapter-04 .v4-footer{height:112px;padding-top:17px;padding-bottom:17px;font-size:.68rem}
  #chapter-04 .v4-footer__company,
  #chapter-04 .v4-footer__links{gap:4px}
}

@media(max-width:900px){
  #chapter-04{overflow:visible}
  #chapter-04 .v4-footer{
    position:static!important;
    width:calc(100% + 9.6vw);
    height:auto;
    min-height:0;
    margin:32px -4.8vw 0;
    padding:28px 4.8vw;
    transform:none;
    grid-template-columns:1fr;
    gap:26px;
    font-size:.78rem;
  }
}

@media(max-width:600px){
  #chapter-04 .v4-footer{
    width:calc(100% + 32px);
    margin:32px -16px -48px;
    padding:28px 16px;
  }
}

.v4-dialog{
  position:fixed;
  z-index:400;
  inset:0;
  overflow:auto;
  padding:clamp(16px,5vw,72px);
  background:rgba(16,20,20,.68);
}
.v4-dialog[hidden]{display:none}
.v4-dialog__panel{
  position:relative;
  width:min(680px,100%);
  margin:auto;
  padding:clamp(28px,5vw,56px);
  background:var(--white);
  color:var(--ink);
  box-shadow:0 24px 70px rgba(0,0,0,.28);
}
.v4-dialog__panel--policy{width:min(760px,100%)}
.v4-dialog__close{position:absolute;top:14px;right:16px;border:0;background:none;color:var(--ink);font-size:2rem;line-height:1}
.v4-dialog__eyebrow{margin:0 0 10px;color:var(--signal);font-size:.62rem;font-weight:800;letter-spacing:.08em}
.v4-dialog h2{margin:0;font-family:var(--serif);font-size:clamp(3rem,7vw,5.5rem);font-weight:400;line-height:.88;letter-spacing:-.06em}
.v4-dialog__intro{max-width:34rem;margin:18px 0 26px;color:var(--muted);font-size:.9rem;line-height:1.6}
#v4-contact .contact-form{display:grid;gap:24px}
#v4-contact .hidden-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#v4-contact .contact-form label{display:grid;gap:8px;color:#262d30;font-size:15px;font-weight:900}
#v4-contact .contact-form label>span{color:#8a9296;font-size:12px}
#v4-contact .contact-form input:not([type=checkbox]):not([type=radio]),#v4-contact .contact-form textarea{width:100%;padding:14px 13px;border:1px solid rgba(15,19,20,.14);border-radius:8px;background:#fff;color:var(--ink);font:inherit;resize:vertical}
#v4-contact .contact-form input:focus,#v4-contact .contact-form textarea:focus{outline:none;border-color:rgba(15,19,20,.42);box-shadow:0 0 0 4px rgba(220,194,156,.18)}
#v4-contact .form-section-heading{padding-bottom:12px;border-bottom:1px solid rgba(15,19,20,.2)}
#v4-contact .form-section-heading h2{margin:0;font-family:inherit;font-size:23px;font-weight:900;letter-spacing:0;line-height:1.2}
#v4-contact .form-section-heading p{margin:8px 0 0;color:#778084;font-size:13px}
#v4-contact .form-section-heading-small{margin-top:4px}
#v4-contact .contact-form fieldset{display:grid;gap:12px;margin:0;padding:0;border:0}
#v4-contact .contact-form legend{margin-bottom:2px;color:#262d30;font-size:15px;font-weight:900}
#v4-contact .choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px}
#v4-contact .choice{display:flex;align-items:center;gap:10px;font-weight:700}
#v4-contact .choice input{width:20px;height:20px;margin:0;accent-color:#30393c}
#v4-contact .choice span{color:#262d30!important;font-size:15px!important}
#v4-contact .contact-requirements small,#v4-contact .contact-reference-file small{display:block;margin:7px 0 8px;color:#778084;font-size:12px;font-weight:500}
#v4-contact .contact-reference-file input{padding:12px}
#v4-contact .contact-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:8px}
#v4-contact .contact-choice{display:grid;gap:6px;min-height:76px;padding:16px;color:#3e494d;text-align:left;text-decoration:none;background:#fff;border:1px solid rgba(15,19,20,.15);border-radius:8px;cursor:pointer;font:inherit}
#v4-contact .contact-choice b{font-size:15px}
#v4-contact .contact-choice small{color:#778084;font-size:12px;font-weight:500;line-height:1.5}
#v4-contact .contact-choice-primary{color:#fff;background:#1765dc;border-color:#1765dc}
#v4-contact .contact-choice-primary small{color:rgba(255,255,255,.78)}
#v4-contact .contact-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
#v4-contact .consent{grid-template-columns:auto 1fr;align-items:start;gap:10px;font-weight:700}
#v4-contact .consent input{width:auto;margin-top:3px}
#v4-contact .consent a{color:var(--signal);text-decoration:underline;text-underline-offset:3px}
#v4-contact .form-status{min-height:22px;margin:0;padding:0 2px;color:#5d666a;font-size:14px;font-weight:800;line-height:1.55}
#v4-contact .form-status[data-state=success]{color:#146646}
#v4-contact .form-status[data-state=error]{color:#9c2b2b}
#v4-contact .form-status[data-state=pending]{color:#6e5529}
#v4-contact .contact-choice:disabled{cursor:wait;opacity:.72}
.v4-policy-list{display:grid;gap:16px;margin:0}
.v4-policy-list div{display:grid;grid-template-columns:100px 1fr;gap:16px;padding-top:16px;border-top:1px solid var(--rule)}
.v4-policy-list dt{font-size:.75rem;font-weight:800}
.v4-policy-list dd{margin:0;color:var(--muted);font-size:.82rem;line-height:1.65}
@media(max-width:600px){
  .v4-dialog{padding:12px}
  .v4-dialog__panel{min-height:100%;padding:58px 22px 28px}
  .v4-policy-list div{grid-template-columns:1fr;gap:5px}
  #v4-contact .choice-grid,#v4-contact .contact-choices,#v4-contact .contact-fields{grid-template-columns:1fr}
}

/* Keep the navigation bar visually identical to the cover background at every viewport size. */
.v4-header{background:#f2f2f0!important;backdrop-filter:none!important;border-bottom-color:#f2f2f0!important}
.v4-header nav.is-open{background:#f2f2f0!important}

/* Scale the complete contact spread together in shallow desktop windows. */
@media(min-width:901px) and (max-height:620px){
  #chapter-04 .contact-heading{top:14vh}
  #chapter-04 .contact-heading h2{font-size:clamp(2.8rem,4.2vw,4.5rem);line-height:.7}
  #chapter-04 .contact-doors{top:50vh;height:clamp(104px,calc(50svh - 96px),200px);gap:.65vw}
  #chapter-04 .contact-doors a{min-height:0;height:100%;max-height:none;padding:0 8px 8px}
  #chapter-04 .contact-doors figure{flex-basis:42%;width:calc(100% + 16px);margin:0 -8px}
  #chapter-04 .contact-doors b{left:12px;top:7px;padding:3px 5px;font-size:.46rem}
  #chapter-04 .contact-doors strong{margin-top:8px;font-size:clamp(.62rem,.78vw,.76rem)}
  #chapter-04 .contact-doors span{margin-top:auto;padding:6px;font-size:clamp(.46rem,.55vw,.56rem);line-height:1.25}
  #chapter-04 .v4-footer{height:88px;padding:10px 3vw;font-size:clamp(.56rem,.66vw,.68rem);line-height:1.35}
  #chapter-04 .v4-footer__company,#chapter-04 .v4-footer__links{gap:4px}
}

/* A short browser window still needs to expose the full editorial content.
   The cover remains a contained scene; later chapters continue vertically. */
@media(max-width:900px) and (max-height:620px){
  html{scroll-snap-type:y proximity}
  .chapter:not(.chapter-cover){min-height:0;overflow:visible}
  .chapter:not(.chapter-cover) .chapter-inner{height:auto;min-height:100svh}
  #chapter-02 .editorial-inner,
  #chapter-03 .editorial-inner{padding-top:72px;padding-bottom:36px}
  #chapter-02 .editorial-heading h2,
  #chapter-03 .editorial-heading h2{font-size:clamp(3.15rem,11vw,4.75rem);line-height:.78}
  #chapter-02 .editorial-side,
  #chapter-03 .editorial-side{margin-top:12px}
  #chapter-02 .program-collage,
  #chapter-03 .education-collage{height:clamp(230px,58vw,350px);min-height:0}
  #chapter-02 .program-index{height:auto;min-height:0;overflow:visible}
}

/* Keep the cover's labels in the same scaled scene when the window is short. */
@media(max-height:420px){
  #chapter-01 .cover-wordmark{top:clamp(48px,7vh,62px);font-size:clamp(2rem,8vh,3.15rem)}
  #chapter-01 .cover-services{top:clamp(92px,20vh,118px);font-size:clamp(.54rem,1.8vh,.7rem)}
  #chapter-01 .cover-tagline{right:clamp(18px,5vw,44px);bottom:clamp(48px,14vh,70px);width:clamp(96px,18vw,132px);font-size:clamp(.52rem,1.65vh,.68rem);line-height:1.32}
  #chapter-01 .cover-footer{left:16px;right:16px;bottom:clamp(8px,2vh,14px);font-size:clamp(.46rem,1.35vh,.62rem);line-height:1.22}
  #chapter-01 .cover-footer span:last-child{max-width:112px}
}