@charset "UTF-8";
:root {
  color-scheme: dark;
  --bg: #100d15;
  --fg: #faf8fc;
  --muted: #b8afc0;
  --line: #3b3043;
  --pink: #f62d99;
  --purple: #542097;
  --brand: linear-gradient(110deg, #6824ae 0%, #f62d99 48%, #cd80ba 100%);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 28px; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: "Helvetica Neue", Arial, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; transition: color .2s, background-color .2s; }
a:focus-visible { outline: 2px solid #e967bb; outline-offset: 6px; }
a:hover { color: #ec88cc; }
h1,h2,h3,p,figure { margin: 0; }
.wrap { width: calc(100% - 112px); max-width: 1680px; margin-inline: auto; }
.eyebrow { font-size: .75rem; letter-spacing: .12em; font-weight: 500; line-height: 1.7; }
.header { min-height: 108px; display: flex; justify-content: space-between; align-items: center; gap: 24px; border-bottom: 1px solid var(--line); }
.header nav { display: flex; gap: 36px; font-size: .875rem; }
.header nav a { padding-block: 16px; }
.brand-image { display: block; position: relative; overflow: hidden; flex-shrink: 0; }
.brand-image img { display: block; position: absolute; height: auto; max-width: none; }
/* Display supplied originals without changing their pixels or proportions. */
.brand-mark { aspect-ratio: 907 / 421; }
.brand-mark img { width: 110.364%; left: -5.954%; top: -69.596%; }
.brand-slogan { aspect-ratio: 780 / 210; }
.brand-slogan img { width: 128.334%; left: -14.102%; top: -186.19%; }
.logo { width: 64px; }
.skip-link { position: absolute; top: -100px; padding: 16px; background: white; color: #100d15; z-index: 3; }
.skip-link:focus { top: 10px; }
.about h2 span:not([data-ko]) { color: #ef71bf; background: linear-gradient(105deg,#b882ef,#fc4baa 48%,#d896c7); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.text-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; font-size: .875rem; padding-block: 14px; border-bottom: 1px solid currentColor; }
.text-link span:not([data-ko]) { font-size: 20px; }
.light { background: #faf9fc; color: #19121e; color-scheme: light; }
.works { padding: 70px 0 44px; }
.section-top { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.section-top .eyebrow { color: #74306e; }
.light a:hover { color: #9d206e; }
.contact a:hover, .footer a:hover { color: #f781c2; }
.section-title { font-size: clamp(38px, 5.8vw, 84px); font-weight: 750; letter-spacing: -.055em; margin: 24px 0 42px; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.works-mark { width: 82px; }
.works-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px; }
.cover { position: relative; aspect-ratio: 1; background: #e7e0ea; overflow: hidden; }
.cover img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.work:hover img { transform: scale(1.035); }
.cover>span { position: absolute; bottom: 12px; left: 12px; background: #26102e; color: white; border-left: 3px solid var(--pink); font-size: .75rem; padding: 6px 9px; }
figcaption { padding-top: 18px; }
figcaption h3 { font-size: 1rem; line-height: 1.6; font-weight: 600; letter-spacing: -.03em; }
figcaption p { font-size: .875rem; margin-top: 7px; color: #645a6b; line-height: 1.6; }
.works-bottom { border-top: 1px solid var(--line); margin-top: 40px; padding-top: 22px; display: flex; justify-content: space-between; align-items: center; gap: 22px; }
.works-bottom p { font-size: .875rem; color: #645a6b; }
.about { padding-block: 96px; }
.about>.eyebrow { color: #e982c7; }
.about-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; margin-top: 40px; align-items: center; }
.about h2 { font-size: clamp(46px, 5.8vw, 84px); letter-spacing: -.055em; line-height: 1.08; font-weight: 750; }
.about-copy { max-width: 450px; }
.lead { font-size: 24px; line-height: 1.65; letter-spacing: -.03em; }
.about-copy>p:not(.lead) { font-size: 1rem; line-height: 1.95; color: var(--muted); margin-top: 22px; word-break: keep-all; }
.about-copy .text-link { margin-top: 24px; }
.services { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 36px; margin-top: 80px; }
.services article { border-top: 1px solid #93466e; padding-top: 22px; }
.services article:nth-child(2) { border-color: #dd389a; }
.services article:nth-child(3) { border-color: #8758b0; }
.services .eyebrow { color: #e588c8; }
.services h3 { font-size: clamp(24px,2.3vw,34px); font-weight: 700; margin: 24px 0 16px; letter-spacing: -.03em; }
.services p { font-size: 1rem; line-height: 1.9; color: var(--muted); word-break: keep-all; }
.contact { padding: 78px 0 62px; background: var(--bg); color: var(--fg); color-scheme: dark; border-top: 4px solid; border-image: var(--brand) 1; }
.contact .eyebrow { color: #d994cb; }
.contact h2 { font-size: clamp(40px,7vw,110px); font-weight: 750; line-height: 1.08; letter-spacing: -.06em; margin-top: 30px; }
.contact h2 > span { color: var(--fg); }
.contact h2 > span > span { color: var(--pink); }
.contact-bottom { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-top: 44px; }
.contact-bottom p { font-size: 1rem; color: var(--muted); line-height: 1.8; }
.email { font-size: clamp(20px,2.7vw,40px); letter-spacing: -.04em; border-bottom: 1px solid #b02b83; padding-bottom: 12px; overflow-wrap: anywhere; }
.email span { margin-left: 20px; }
.footer { background: var(--bg); color: var(--fg); color-scheme: dark; }
.footer-inner { border-top: 1px solid var(--line); padding-block: 30px; display: flex; justify-content: space-between; align-items: center; gap: 25px; font-size: .75rem; letter-spacing: .04em; }
.footer-logo { width: 210px; }
.footer-inner>span { color: var(--muted); }
@media(max-width:1000px) {
  .wrap { width: calc(100% - 64px); }
  .works-grid { grid-template-columns: repeat(2,minmax(0,1fr)); row-gap: 35px; }
  .about-intro { gap: 35px; }
  .contact-bottom { align-items: start; flex-direction: column; }
}
@media(max-width:600px) {
  .wrap { width: calc(100% - 40px); }
  .header { min-height: 86px; gap: 15px; flex-wrap: wrap; }
  .logo { width: 54px; }
  .header nav { gap: 18px; font-size: .875rem; }
  .works { padding: 42px 0 30px; }
  .section-top { align-items: start; flex-wrap: wrap; gap: 8px; }
  .section-top .text-link { padding-top: 0; gap: 14px; }
  .section-title { font-size: clamp(30px,8.2vw,46px); gap: 15px; margin: 24px 0 28px; }
  .works-mark { width: 45px; }
  .works-grid { gap: 28px 16px; }
  figcaption { padding-top: 12px; }
  figcaption h3 { font-size: .875rem; }
  figcaption p { font-size: .8125rem; }
  .works-bottom { margin-top: 28px; flex-wrap: wrap; gap: 4px; }
  .about { padding-block: 58px; }
  .about-intro { grid-template-columns: 1fr; gap: 32px; margin-top: 28px; }
  .about h2 { font-size: clamp(40px,11vw,60px); }
  .lead { font-size: 22px; }
  .services { grid-template-columns: 1fr; gap: 30px; margin-top: 45px; }
  .services article { display: grid; grid-template-columns: 30px 1fr; column-gap: 12px; }
  .services h3 { margin: 0 0 13px; font-size: 28px; }
  .services p { grid-column: 2; }
  .contact { padding: 48px 0 38px; }
  .contact h2 { font-size: 9.5vw; margin-top: 24px; }
  .contact-bottom { margin-top: 26px; gap: 24px; }
  .email { font-size: clamp(18px,5.3vw,30px); }
  .email span { margin-left: 10px; }
  .footer-inner { gap: 24px 15px; flex-wrap: wrap; }
  .footer-logo { width: 185px; margin-right: calc(100% - 185px); }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

/* One original logo lockup carries the studio name and its slogan. */
.hero { padding-top: clamp(50px,7vw,110px); padding-bottom: 58px; }
.hero-logo { width: min(100%, 780px); margin: 0 auto; }
.hero-copy { display: flex; justify-content: space-between; align-items: end; gap: 36px; margin-top: clamp(42px,6vw,90px); padding-top: 30px; border-top: 1px solid var(--line); }
.hero-description { max-width: 660px; }
.hero-description p { font-size: 1rem; line-height: 1.9; color: var(--muted); word-break: keep-all; }
.hero-description .hero-identity { font-size: clamp(1rem,1.7vw,1.375rem); margin-bottom: 16px; line-height: 1.65; color: var(--fg); }
.hero-identity span { color: var(--muted); }
.hero-identity strong { font-weight: 600; color: var(--fg); }
.hero-copy .text-link { flex-shrink: 0; padding: 16px 22px; border: 1px solid #bb3b91; background: #722052; color: white; border-radius: 3px; }
.hero-copy .text-link:hover { background: #8e2868; }
@media(max-width:600px) {
  .hero { padding-top: 48px; padding-bottom: 40px; }
  .hero-copy { flex-direction: column; align-items: start; gap: 24px; margin-top: 38px; padding-top: 24px; }
  .hero-description p { font-size: .9375rem; }
}

.work[hidden] { display: none; }
.work:focus { outline: 2px solid #a92684; outline-offset: 6px; }
.cover a { display: block; height: 100%; }
.listen-tag { position: absolute; right: 12px; bottom: 12px; color: white; background: #26102e; padding: 7px 10px; font-size: .75rem; }
.load-more { color: #24102e; background: transparent; font-family: inherit; border: 0; border-bottom: 1px solid currentColor; cursor: pointer; }
.load-more:hover { color: #9d206e; }
.load-more:focus-visible { outline: 2px solid #a92684; outline-offset: 6px; }
.load-more[hidden] { display: none; }
.listen-button { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; font: inherit; }
.listen-button:focus-visible { outline: 3px solid #f62d99; outline-offset: -3px; }
.player-open { overflow: hidden; }
.video-dialog { width: min(640px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 0; border: 1px solid #60406b; border-radius: 8px; background: #100d15; color: #faf8fc; box-shadow: 0 24px 100px #0008; }
.video-dialog::backdrop { background: #08060ccc; }
.video-heading { display: flex; gap: 16px; align-items: center; justify-content: space-between; padding: 16px 20px; }
.video-heading h2 { font-size: 1rem; line-height: 1.5; font-weight: 500; }
.video-close { flex-shrink: 0; font: inherit; color: white; background: transparent; border: 1px solid #60406b; border-radius: 4px; padding: 9px 12px; cursor: pointer; }
.video-close:focus-visible { outline: 2px solid #ef71bf; outline-offset: 3px; }
.video-frame { aspect-ratio: 16 / 9; min-height: 200px; background: #000; }
.video-frame iframe { display: block; width: 100%; height: 100%; min-height: 200px; border: 0; }
.header-actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; justify-content: flex-end; }
html[lang="ko"] .about h2 { font-size: clamp(32px,4.1vw,60px); line-height: 1.35; letter-spacing: -.04em; }
html[lang="ko"] .contact h2 { font-size: clamp(36px,6.4vw,94px); line-height: 1.25; }
@media(max-width:600px) {
  .header { padding-block: 15px; flex-wrap: nowrap; }
  .header-actions { gap: 4px; flex-direction: column; align-items: flex-end; }
  .header nav { gap: 16px; }
  .header nav a { padding-block: 8px; }
}

.language-toggle { display: inline-flex; align-items: center; gap: 10px; min-width: 116px; padding: 10px 0 10px 18px; border: 0; border-left: 1px solid var(--line); color: var(--fg); background: transparent; font: inherit; font-size: .875rem; cursor: pointer; }
.language-toggle-track { display: block; position: relative; width: 42px; height: 24px; border: 1px solid #73506f; border-radius: 20px; background: #35243d; transition: background .25s, border-color .25s; }
.language-toggle-thumb { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #faf8fc; transition: transform .25s cubic-bezier(.2,.8,.2,1); box-shadow: 0 1px 3px #0005; }
.language-toggle[aria-checked="true"] .language-toggle-track { background: #ad257c; border-color: #ee64bc; }
.language-toggle[aria-checked="true"] .language-toggle-thumb { transform: translateX(18px); }
.language-toggle:active .language-toggle-track { transform: scale(.96); }
.language-toggle:focus-visible { outline: 2px solid #ef71bf; outline-offset: 4px; border-radius: 4px; }
#language-toggle-label { min-width: 48px; text-align: left; }
@media(max-width:600px) { .language-toggle { border-left: 0; padding: 7px 0; min-width: 100px; } }
@media(prefers-reduced-motion:reduce) { .language-toggle-track,.language-toggle-thumb { transition: none; } }

#language-toggle-label { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.language-option-en, .language-option-ko { color: var(--muted); transition: color .25s; }
.language-divider { color: #75697e; }
.language-toggle[aria-checked="false"] .language-option-ko,
.language-toggle[aria-checked="true"] .language-option-en { color: #fff; font-weight: 600; }
@media(prefers-reduced-motion:reduce) { .language-option-en,.language-option-ko { transition: none; } }

/* A single segmented language button; either half toggles the language. */
.language-toggle { min-width: 0; padding: 2px; border: 1px solid #73506f; border-radius: 5px; background: #211827; gap: 0; font-size: .625rem; line-height: 1.4; }
#language-toggle-label { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0; min-width: 96px; text-align: center; isolation: isolate; }
#language-toggle-label::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 50%; border-radius: 4px; background: #9a266f; transform: translateX(100%); transition: transform .25s cubic-bezier(.2,.8,.2,1); z-index: -1; }
.language-toggle[aria-checked="true"] #language-toggle-label::before { transform: translateX(0); }
.language-option-en, .language-option-ko { padding: 4px 6px; font-weight: 600; }
.language-divider { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); color: #a083ae; font-weight: 400; }
.language-toggle:active { transform: scale(.98); }
@media(max-width:600px) { .language-toggle { min-width: 0; padding: 2px; border: 1px solid #73506f; } #language-toggle-label { min-width: 89px; } }
@media(prefers-reduced-motion:reduce) { #language-toggle-label::before { transition: none; } }

/* Original studio photograph connects the hero logo and introduction. */
.hero {
  background-color: var(--bg);
  background-image: linear-gradient(180deg, rgba(16,13,21,.60) 0%, rgba(16,13,21,.52) 38%, rgba(16,13,21,.86) 100%), url("assets/studio-background.jpg");
  background-size: cover;
  background-position: center 48%;
  background-repeat: no-repeat;
}
.hero-copy { border-top-color: rgba(250,248,252,.24); }
.hero-description p, .hero-identity span { color: #e0d9e5; }
.hero-description { text-shadow: 0 2px 12px rgba(0,0,0,.5); }
@media(max-width:600px) { .hero { background-position: center; } }

.contact-actions{display:flex;flex-direction:column;align-items:flex-end;gap:22px}
.request-guide-button{font:inherit;font-size:14px;letter-spacing:.04em;color:#faf8fc;background:transparent;border:1px solid #915078;border-radius:999px;padding:12px 20px;cursor:pointer;transition:background .2s,border-color .2s}
.request-guide-button span{margin-left:18px;color:#ef47a7}
.request-guide-button:hover{background:#342035;border-color:#f781c2}
.guide-dialog{width:min(960px,calc(100% - 24px));max-height:90dvh;padding:0;border:1px solid #58404f;border-radius:12px;background:#000;color:#fff;overflow:auto}
.guide-dialog::backdrop{background:rgba(0,0,0,.82);backdrop-filter:blur(6px)}
.guide-heading{position:sticky;top:0;display:flex;align-items:center;gap:20px;padding:16px 22px;background:#151015;border-bottom:1px solid #3f2938;z-index:1}
.guide-heading h2{font-size:16px;margin:0 auto 0 0}
.guide-heading a,.guide-heading button{font:inherit;font-size:13px;color:#eee;background:none;border:0;cursor:pointer;white-space:nowrap}
.guide-heading a:hover,.guide-heading button:hover{color:#ef47a7}
.guide-dialog img{display:block;width:100%;height:auto}
body:has(.guide-dialog[open]){overflow:hidden}
@media(max-width:700px){.contact-actions{align-items:flex-start;width:100%}.contact-actions .email{font-size:clamp(18px,5vw,28px)}.guide-heading{gap:14px;padding:14px}.guide-heading h2{font-size:14px}}

@media(max-width:650px){.header nav{gap:14px;font-size:12px}.header-actions{flex-wrap:wrap}.header{gap:14px}}

.home-journal { padding: 90px 0 100px; }
.home-journal-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:34px; }
.home-journal-heading .section-title { margin:0; }
.home-journal-heading h2 span { color:var(--pink); }
.home-journal-all { display:inline-flex; align-items:center; gap:16px; border:1px solid #cfc5d3; border-radius:100px; padding:13px 22px; font-size:14px; white-space:nowrap; }
.home-journal-all:hover { background:#f5dfec; }
.home-journal-card { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.home-journal-cover { aspect-ratio:16/10; overflow:hidden; background:#24172d; }
.home-journal-cover img { width:100%; height:100%; object-fit:cover; transition:transform .35s; }
.home-journal-card:hover img { transform:scale(1.025); }
.home-journal-copy h3 { font-size:clamp(24px,3vw,38px); line-height:1.35; letter-spacing:-.04em; margin:20px 0 16px; }
.home-journal-copy p { color:#665e6c; font-size:16px; line-height:1.8; max-width:490px; margin:0 0 28px; }
.home-journal-placeholder { display:flex; height:100%; align-items:center; padding:32px; color:white; font-size:32px; font-weight:700; }
.home-journal-card:focus-visible,.home-journal-all:focus-visible { outline:3px solid var(--pink); outline-offset:6px; }
@media(max-width:650px) { .home-journal { padding:60px 0; } .home-journal-card { grid-template-columns:1fr; gap:25px; } .home-journal-heading { gap:12px; } .home-journal-all { padding:10px 14px; font-size:12px; } }
@media(prefers-reduced-motion:reduce) { .home-journal-cover img { transition:none; } }

/* Homepage: featured story and a separate journal index. */
.home-journal-columns { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:64px; align-items:start; }
.home-journal-columns .home-journal-card { display:flex; flex-direction:column; align-items:stretch; gap:25px; }
.home-journal-columns .home-journal-cover { aspect-ratio:16/9; }
.home-journal-columns .home-journal-copy h3 { font-size:clamp(24px,2.7vw,34px); margin:14px 0; }
.home-journal-columns .home-journal-copy p { margin-bottom:22px; }
.home-journal-archive { border-left:1px solid #d9d1df; padding-left:42px; min-width:0; }
.home-journal-archive h3 { font-size:24px; letter-spacing:-.03em; margin:0 0 24px; }
.home-journal-list { list-style:none; margin:0 0 30px; padding:0; max-height:420px; overflow:auto; }
.home-journal-list li { border-top:1px solid #d9d1df; }
.home-journal-list li:last-child { border-bottom:1px solid #d9d1df; }
.home-journal-list a { position:relative; display:flex; flex-direction:column; gap:10px; padding:23px 30px 23px 0; }
.archive-meta { color:#766b7c; font-size:12px; letter-spacing:.03em; }
.home-journal-list strong { font-size:17px; line-height:1.6; font-weight:500; }
.archive-arrow { position:absolute; right:4px; top:50%; color:var(--pink); }
.home-journal-list a:hover strong { color:var(--pink); }
.home-journal-list a:focus-visible { outline:2px solid var(--pink); outline-offset:-2px; }
@media(max-width:750px) { .home-journal-columns { grid-template-columns:1fr; gap:40px; } .home-journal-archive { border-left:0; border-top:1px solid #d9d1df; padding:28px 0 0; } }

.journal-read-button { display:inline-flex; border:1px solid #cfc5d3; border-radius:100px; padding:13px 22px; font-size:14px; }
.home-journal-card:hover .journal-read-button { background:#f5dfec; }