/* Seoul illustrated: a warm paper ground, generous art and quiet editorial type. */
:root{--paper:#f7f5ef;--ink:#263f49;--accent:#a6553e;--line:#d9dcd2;--soft:#e9eee7}
body{background:var(--paper)}
.shell{max-width:1260px}
.site-header{padding-block:25px}
.brand{letter-spacing:-.6px}
.scene{margin:0;min-width:0}
.scene-frame,.glimpse-image,.alternative-image{overflow:hidden;background:#e7e9df}
.scene-image{display:block;width:100%;height:100%;object-fit:cover}
.scene figcaption{display:flex;align-items:baseline;justify-content:space-between;gap:15px;padding-top:12px;color:var(--muted);font-size:11px;line-height:1.6}
.art-type{font-size:8px;letter-spacing:1.5px;white-space:nowrap}
.intro{padding-top:30px}
.hero{grid-template-columns:.91fr 1.15fr;gap:58px;padding-block:35px 52px;align-items:center}
.hero h1{font-size:clamp(64px,5.7vw,86px);letter-spacing:-2.8px;line-height:1.02}
.hero-copy{padding:0 0 22px}
.hero-copy .eyebrow{margin-bottom:27px}
.hero-deck{font-size:15px;line-height:1.9;max-width:355px;margin-bottom:29px}
.hero-actions{flex-direction:column;align-items:flex-start;gap:14px}
.hero-time{display:flex;gap:14px;font-size:11px}
.hero-time>span+span{border-left:1px solid var(--line);padding-left:14px}
.hero-footnote{font-size:11px;margin-top:11px}
.primary-button{border-radius:2px;font-size:13px;min-height:56px;padding:16px 23px;gap:34px}
.scene-cover .scene-frame{aspect-ratio:1.08;position:relative}
.scene-cover .scene-frame:after,.scene-result .scene-frame:after{content:'';position:absolute;inset:0;border:1px solid rgb(38 63 73 / 10%);pointer-events:none}
.scene-cover .scene-image{object-position:53% 52%!important}
.scene-cover figcaption{border-bottom:1px solid var(--line);padding-bottom:12px}
.city-glimpses{border-top:1px solid var(--line);padding:32px 0 35px}
.glimpses-heading{display:flex;align-items:end;justify-content:space-between;gap:28px;margin-bottom:24px}
.glimpses-heading .eyebrow{margin:0 0 9px}
.glimpses-heading h2{font-size:36px;line-height:1.2;letter-spacing:-.6px;margin:0}
.glimpses-heading>p{font-size:12px;line-height:1.8;color:var(--muted);margin:0}
.glimpses-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.glimpse-image{aspect-ratio:1.65;position:relative}
.glimpse-place{position:absolute;bottom:13px;left:14px;color:#fffaf0;font-size:11px;letter-spacing:.2px;text-shadow:0 1px 8px #162f37}
.glimpse-place span{font-size:9px;margin-left:6px}
.glimpse-image:after{content:'';position:absolute;inset:65% 0 0;background:linear-gradient(transparent,rgb(19 39 47 / 42%))}
.glimpse-place{z-index:1}
.glimpse-copy{display:grid;grid-template-columns:24px 1fr;gap:8px;padding:21px 0 0}
.glimpse-number{font-size:10px;line-height:1.6;color:var(--accent)}
.glimpse-copy .eyebrow{font-size:9px;letter-spacing:1px;margin:0 0 10px}
.glimpse-copy h3{font:25px/1.18 var(--serif);letter-spacing:-.35px;margin:0 0 10px;max-width:270px}
.glimpse-copy p:not(.eyebrow){font-size:12px;line-height:1.85;color:var(--muted);margin:0;max-width:300px}
.guide-note{display:flex;align-items:center;gap:22px;border-top:1px solid var(--line);padding:27px 0 31px}
.guide-note-mark{display:grid;place-items:center;width:49px;height:49px;border:1px solid #b7c3b7;border-radius:50%;font-size:13px;color:#657a67;flex-shrink:0}
.guide-note p{font-size:13px;line-height:1.9;margin:0}
.guide-note p span{font-size:11px;color:var(--muted)}
.guide-note .text-link{margin-left:auto;white-space:nowrap}
/* The illustration marks the chapter; answers alone decide the recommendation. */
.quiz-layout{grid-template-columns:295px minmax(0,1fr);gap:68px;max-width:1080px;margin-block:42px 50px}
.quiz-sidebar{padding-right:31px}
.quiz-sidebar h2{font-size:37px;margin-block:13px}
.quiz-sidebar>p{font-size:12px}
.scene-chapter{width:100%;margin-top:7px}
.scene-chapter .scene-frame{aspect-ratio:1.35}
.scene-chapter figcaption{font-size:10px;padding-top:8px}
.scene-chapter .art-type{display:none}
.chapter-list{padding:17px 0 19px}
.chapter-list li{padding:10px 0;font-size:11px}
.sidebar-note{padding-top:16px}
.scene-question{display:none}
.question-pane{padding-top:6px}
.question-note{font-size:13px}
.option{padding:16px 17px;border-radius:2px}
.option-title{font-size:14px}
.option-detail{font-size:12px;line-height:1.75}
.option-index{font-size:10px}
.answer-context{font-size:12px}
.privacy-note{font-size:10px}
/* The selected neighbourhood is the visual anchor of the guide. */
.result-hero{grid-template-columns:1fr 1.14fr;gap:52px;padding-bottom:37px}
.result-intro h1{font-size:clamp(55px,5.5vw,80px)}
.result-kicker{font-size:12px}
.result-tag{font-size:29px;max-width:450px}
.result-description{font-size:14px;line-height:1.9}
.scene-result .scene-frame{aspect-ratio:1.22;position:relative}
.scene-result figcaption{font-size:11px}
.scene-result .art-type{display:none}
.result-grid{gap:55px;margin-block:36px}
.reason-list strong{font-size:13px}
.reason-list p,.tradeoff p{font-size:13px;line-height:1.85}
.tradeoff strong{font-size:12px}
.essentials{background:#eaf0e8;border-color:#d6dfd4;padding:29px 31px}
.essentials dd{font-size:13px}
.essentials dt{font-size:10px}
.micro-note{font-size:11px}
.places{padding-block:31px}
.places li{font-size:14px;line-height:1.7}
.details-section{padding-block:21px}
.details-section summary{font-size:14px}
.details-content{font-size:13px}
.orientation-content{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;padding-top:24px}
.orientation-content .map-sheet{max-width:610px}
.orientation-content h3{font:30px/1.2 var(--serif);margin:0 0 18px}
.orientation-content p{font-size:13px;line-height:1.9;color:var(--muted)}
.orientation-content strong{font-weight:600;color:var(--ink)}
.alternatives{padding-block:35px}
.alternatives-head p{font-size:11px}
.alternative-grid{gap:22px}
.alternative{padding:0;border-color:var(--line);border-radius:0;background:#faf9f5;overflow:hidden;transition:border-color .18s,background .18s}
.alternative-image{display:block;width:100%;aspect-ratio:1.8;flex-shrink:0}
.alternative-copy{display:flex;flex-direction:column;padding:21px;width:100%;flex:1}
.alternative strong{font-size:30px;margin:8px 0}
.alternative p{font-size:12px;line-height:1.8;margin-bottom:18px}
.alternative-label{font-size:9px;letter-spacing:.9px}
.alternative-bottom{font-size:11px;line-height:1.6;border-top:1px solid var(--line);padding-top:13px}
.alternative[aria-pressed=true]{border-color:var(--ink);background:#e9eee7;box-shadow:inset 0 -3px 0 var(--ink)}
.alternative:hover{border-color:var(--ink);background:#f0f2eb}
.alternative:hover .alternative-bottom{color:var(--accent)}
.more-areas summary{font-size:12px;padding:9px 0}
.method-page p,.method-page li{font-size:14px}
@media(min-width:1450px){.hero{padding-block:42px 57px;gap:74px}.hero-copy{padding-bottom:25px}.hero h1{font-size:86px}}
@media(max-width:1100px){
  .hero{gap:33px;grid-template-columns:.93fr 1fr}.hero h1{font-size:64px}.scene-cover .scene-frame{aspect-ratio:.9}.hero-deck{font-size:14px}.hero-time{font-size:10px;gap:10px}.hero-time>span+span{padding-left:10px}
  .glimpses-grid{gap:19px}.glimpse-copy{grid-template-columns:18px 1fr}.glimpse-copy h3{font-size:23px}.glimpse-copy p:not(.eyebrow){font-size:11px}
  .quiz-layout{grid-template-columns:245px minmax(0,1fr);gap:38px}.quiz-sidebar{padding-right:27px}.result-hero{gap:33px}.scene-result .scene-frame{aspect-ratio:1.03}.alternative-grid{gap:16px}.alternative-copy{padding:17px}.alternative strong{font-size:27px}.alternative-bottom{font-size:10px}
}
@media(max-width:760px){
  .site-header{padding-block:20px}.intro{padding-top:23px}.hero{grid-template-columns:1fr;gap:27px;padding-block:30px 32px}.hero-copy{padding:0}.hero-copy .eyebrow{margin-bottom:20px}.hero h1{font-size:clamp(60px,10.7vw,76px);letter-spacing:-2px;line-height:1.02;margin-bottom:21px}.hero-deck{font-size:14px;line-height:1.85;max-width:450px;margin-bottom:25px}.hero-actions{align-items:stretch;gap:12px}.hero-time{font-size:11px;gap:17px}.hero-time>span+span{padding-left:17px}.hero-footnote{font-size:10px}.primary-button{font-size:13px;min-height:54px}
  .scene-cover .scene-frame{aspect-ratio:1.22}.scene-cover figcaption{font-size:10px;gap:8px}.scene-cover .art-type{font-size:7px;letter-spacing:1px}
  .city-glimpses{padding-block:27px 29px}.glimpses-heading{display:block;margin-bottom:23px}.glimpses-heading .eyebrow{font-size:8px;letter-spacing:1px}.glimpses-heading h2{font-size:29px;letter-spacing:-.5px}.glimpses-heading>p{font-size:12px;margin-top:12px}.glimpses-heading>p br{display:none}.glimpses-grid{grid-template-columns:1fr;gap:27px}.glimpse{display:grid;grid-template-columns:1.04fr 1fr;gap:17px;align-items:center}.glimpse-image{aspect-ratio:.95}.glimpse-copy{display:block;padding:0}.glimpse-number{display:none}.glimpse-copy .eyebrow{font-size:8px;letter-spacing:.65px;margin-bottom:9px}.glimpse-copy h3{font-size:24px;letter-spacing:-.3px;margin-bottom:9px}.glimpse-copy p:not(.eyebrow){font-size:11px;line-height:1.8}.glimpse-place{font-size:10px;left:11px;bottom:11px}.glimpse-place span{display:none}
  .guide-note{gap:14px;flex-wrap:wrap;padding-block:23px 27px}.guide-note-mark{width:42px;height:42px;font-size:12px}.guide-note p{flex:1;font-size:12px}.guide-note p span{font-size:11px}.guide-note .text-link{margin-left:56px;font-size:11px}
  .quiz-layout{grid-template-columns:1fr;gap:0;margin-block:23px 32px}.quiz-sidebar{display:none}.question-pane{padding:0}.scene-question{display:block;margin:0 0 22px}.scene-question .scene-frame{height:117px}.scene-question figcaption{padding-top:7px;font-size:9px}.scene-question .art-type{font-size:7px;letter-spacing:1px}.question-pane .progress{margin-bottom:21px}.question-pane h1{font-size:35px}.question-note{font-size:13px;line-height:1.8}.option{padding:15px 13px}.option-title{font-size:14px}.option-detail{font-size:12px;line-height:1.75}.question-actions .primary-button{min-width:159px}
  .result-hero{grid-template-columns:1fr;gap:25px;padding-bottom:27px}.result-intro h1{font-size:clamp(50px,12.2vw,74px)}.result-tag{font-size:27px}.result-description{font-size:14px}.scene-result .scene-frame{aspect-ratio:1.22}.scene-result figcaption{font-size:10px}.result-grid{gap:27px;margin-block:28px}.essentials{padding:25px}.places{padding-block:26px}.orientation-content{grid-template-columns:1fr;gap:24px}.orientation-content .map-sheet{padding:17px}.orientation-content h3{font-size:27px}.alternatives{padding-block:28px}.alternative-grid{grid-template-columns:1fr;gap:16px}.alternative{display:grid;grid-template-columns:120px minmax(0,1fr)}.alternative-image{height:100%;aspect-ratio:auto}.alternative-copy{padding:17px 16px}.alternative-label{font-size:8px;letter-spacing:.5px}.alternative strong{font-size:27px;margin:5px 0}.alternative p{font-size:11px;margin-bottom:13px;line-height:1.7}.alternative-bottom{font-size:10px;padding-top:10px}.alternatives-head p{line-height:1.8}.details-section summary{font-size:13px}.method-page p,.method-page li{font-size:13px}
}
@media(max-width:380px){
  .hero h1{font-size:56px}
  .scene-cover .art-type,.scene-question .art-type{display:none}
  .glimpse{gap:14px}
  .glimpse-copy h3{font-size:22px}
  .glimpse-copy .eyebrow{font-size:7px}
  .glimpse-copy p:not(.eyebrow){font-size:11px}
  .alternative{grid-template-columns:100px minmax(0,1fr)}
  .alternative-copy{padding:15px 13px}
  .alternative strong{font-size:25px}
  /* Give narrow phones enough room for complete action labels. */
  .result-actions>div{flex-direction:column}
  .result-actions>div button{flex:auto;width:100%;min-height:50px}
}