@charset "UTF-8";
@font-face { font-family: Pretendard; src: url('assets/fonts/PretendardVariable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
:root { --ink:#161819; --paper:#f5f4f0; --muted:#737571; --line:#d6d7d1; --gutter:clamp(24px,4.5vw,88px); --content:1680px; font-family:Pretendard,"Apple SD Gothic Neo",sans-serif; color:var(--ink); background:var(--paper); font-synthesis:none; -webkit-font-smoothing:antialiased; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:28px; }
body { margin:0; }
button,input { font:inherit; }
button,a,input { -webkit-tap-highlight-color:transparent; }
button { padding:0; border:0; border-radius:0; color:inherit; background:none; cursor:pointer; }
a { color:inherit; text-decoration:none; }
button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible { outline:2px solid currentColor; outline-offset:6px; }
img { display:block; max-width:100%; }
svg { fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
[hidden] { display:none!important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; z-index:20; top:14px; left:20px; padding:12px 16px; color:var(--ink); background:var(--paper); transform:translateY(-180%); }
.skip-link:focus { transform:translateY(0); }
.site-header { height:100px; padding:0 var(--gutter); display:flex; align-items:center; justify-content:space-between; gap:30px; color:var(--paper); background:#111718; }
.wordmark { font-size:29px; font-weight:800; letter-spacing:-1.5px; line-height:1; }
.header-description { margin:0 auto 0 46px; color:#a3aaa8; font-size:12px; letter-spacing:.02em; }
.site-header nav { display:flex; gap:46px; align-items:center; font-size:14px; font-weight:500; }
.site-header nav a,.site-header nav button { position:relative; padding:14px 0; }
.site-header nav a::after,.site-header nav button::after { content:''; position:absolute; bottom:5px; left:0; right:0; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .25s; }
.site-header nav a:hover::after,.site-header nav button:hover::after { transform:scaleX(1); }
.hero { position:relative; isolation:isolate; height:690px; max-height:calc(100svh - 100px); min-height:580px; color:var(--paper); background:#111718; overflow:hidden; }
.hero-artworks { position:absolute; z-index:-2; inset:0 0 100px; }
.hero-art { position:absolute; inset:0 0 0 40%; opacity:0; overflow:hidden; transition:opacity .75s ease; background:radial-gradient(ellipse at 65% 50%,#2a4247 0%,#17272b 42%,#111718 72%); }
.hero-art { mask-image:linear-gradient(90deg,transparent,#000 24%); }
.hero-art.is-active { opacity:1; }
.hero-art img { position:absolute; max-width:none; width:100%; height:auto; bottom:0; right:-2%; }
.hero-art .art-front { width:90%; max-height:100%; object-fit:contain; object-position:bottom right; }
.hero-art .art-back { width:110%; height:100%; object-fit:cover; opacity:.32; mask-image:linear-gradient(90deg,transparent,#000 35%); }
.hero-art .art-object { width:105%; opacity:.55; }
.hero-art[data-art="club"] { background:radial-gradient(ellipse at 65% 50%,#292c59,#181d30 45%,#111718 75%); }
.hero-art[data-art="club"] .art-front { width:98%; right:-2%; }
.hero-art[data-art="farm"] { background:radial-gradient(ellipse at 65% 50%,#365749,#172e2a 45%,#111718 75%); }
.hero-art[data-art="farm"] .art-back { opacity:.27; }
.hero-art[data-art="farm"] .art-front { width:92%; right:-2%; }
.hero-art[data-art="spooky"] { background:radial-gradient(ellipse at 65% 50%,#503c4b,#24232c 45%,#111718 75%); }
.hero-art[data-art="spooky"] .art-front { width:95%; right:-3%; }
.hero-art[data-art="spooky"] .art-back { opacity:.22; }
.hero-shade { position:absolute; z-index:-1; inset:0 0 100px; pointer-events:none; background:linear-gradient(90deg,#111718 18%,rgba(17,23,24,.94) 30%,rgba(17,23,24,.45) 45%,transparent 62%); }
.hero-copy { position:absolute; left:var(--gutter); top:12%; width:49%; max-width:710px; }
.eyebrow { margin:0 0 28px; font-size:10px; font-weight:550; letter-spacing:.16em; line-height:1.4; }
.hero-copy .eyebrow { display:flex; align-items:center; gap:13px; color:#b9c5c2; }
.eyebrow-line { width:28px; height:1px; background:#b9c5c2; }
.hero h1 { margin:0; font-size:clamp(64px,6.8vw,110px); font-weight:650; line-height:1.12; letter-spacing:-.065em; word-break:keep-all; text-wrap:balance; }
.hero h1.long-title { max-width:580px; font-size:clamp(58px,5.2vw,84px); line-height:1.16; }
.hero-description { margin:24px 0 0; color:#dce0dc; font-size:16px; font-weight:400; letter-spacing:-.025em; line-height:1.7; word-break:keep-all; }
.hero-credits { margin:12px 0 0; color:#96a39f; font-size:12px; line-height:1.7; word-break:keep-all; }
.hero-credits span { margin:0 6px; color:#60716c; }
.text-link { display:inline-flex; align-items:center; gap:15px; font-size:14px; font-weight:500; line-height:1.5; }
.text-link > span[aria-hidden] { display:grid; place-items:center; width:30px; height:30px; font-family:Arial,sans-serif; font-size:21px; transition:transform .25s; }
.text-link:hover > span[aria-hidden] { transform:translate(3px,-3px); }
.hero-link { flex-direction:row-reverse; gap:16px; margin-top:32px; }
.hero-link > span[aria-hidden] { width:46px; height:46px; border:1px solid #6a7773; border-radius:50%; }
.hero-copy.copy-enter { animation:copy-enter .6s both; }
@keyframes copy-enter { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
.carousel-controls { position:absolute; right:var(--gutter); top:21px; display:flex; align-items:center; gap:28px; }
.slide-counter { display:flex; gap:12px; margin:0; font-size:11px; color:#758783; font-variant-numeric:tabular-nums; }
.slide-counter #slide-number { color:#eee; }
.counter-divider { color:#5b6b67; }
.carousel-arrows { display:flex; align-items:center; gap:8px; }
.icon-button { display:grid; place-items:center; width:36px; height:36px; color:#d1d8d3; border:1px solid #3a4945; border-radius:50%; transition:background .2s; }
.icon-button:hover { background:#3b4845; }
.icon-button svg { width:18px; height:16px; }
.play-toggle { border-color:transparent; margin-left:4px; }
.play-toggle svg { width:16px; height:16px; }
.play-toggle .play-icon { display:none; }
.play-toggle.is-paused .pause-icon { display:none; }
.play-toggle.is-paused .play-icon { display:block; }
.hero-pagination { position:absolute; left:var(--gutter); right:var(--gutter); bottom:0; height:100px; display:flex; align-items:center; justify-content:space-between; gap:32px; border-top:1px solid #3d4a46; }
.hero-pagination::before { content:''; position:absolute; left:0; right:0; top:-1px; height:1px; background:#c6d1cb; transform:scaleX(0); transform-origin:left; }
.is-running .hero-pagination::before { animation:slide-progress 6s linear both; }
@keyframes slide-progress { from { transform:scaleX(0); } to { transform:scaleX(1); } }
.shuffle-label { display:flex; align-items:center; gap:12px; font-size:12px; color:#c4cec9; white-space:nowrap; }
.shuffle-label svg { width:18px; height:18px; }
#shuffle-count { color:#7f918a; padding-left:8px; }
.up-next { display:flex; align-items:center; justify-content:flex-end; gap:22px; min-width:0; max-width:55%; font-size:13px; text-align:left; }
.up-next-label { color:#7f918a; font-size:11px; white-space:nowrap; }
#up-next-title { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.up-next > span:last-child { font-size:20px; color:#adbbb3; }
.hero-cover { background:#1c2929; }
.hero-cover .art-ambience { inset:-10%; width:120%; height:120%; object-fit:cover; filter:blur(42px); opacity:.28; }
.hero-cover .art-cover { bottom:4%; right:16%; width:auto; height:88%; max-width:70%; object-fit:contain; box-shadow:0 24px 60px #0007; }
.hero h1.extra-long-title { font-size:clamp(38px,4vw,64px); line-height:1.25; overflow-wrap:anywhere; }
.hero-description[hidden] + .hero-credits { margin-top:24px; }
.works-section { max-width:var(--content); margin:0 auto; padding:100px var(--gutter) 112px; scroll-margin-top:20px; }
.works-header { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:42px; }
.section-title .eyebrow { margin-bottom:14px; color:var(--muted); }
.works-header h2 { margin:0; font-size:54px; line-height:1.1; letter-spacing:-.055em; font-weight:600; }
.works-navigation { display:flex; align-items:center; gap:70px; padding-bottom:4px; }
.tabs { display:flex; gap:30px; }
.tab { padding:13px 0; border-bottom:1px solid transparent; font-size:15px; white-space:nowrap; color:var(--muted); }
.tab span { margin-left:5px; font-size:10px; vertical-align:super; font-variant-numeric:tabular-nums; }
.tab.is-active { border-bottom-color:var(--ink); color:var(--ink); }
.all-works { white-space:nowrap; font-size:13px; }
.all-works > span[aria-hidden] { border:1px solid var(--line); border-radius:50%; width:36px; height:36px; font-size:19px; }
.works-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:54px 28px; }
.work-card { min-width:0; }
.work-card a { display:block; }
.work-art { position:relative; aspect-ratio:1.48; overflow:hidden; background:#e6e5df; }
.work-art img { width:100%; height:100%; object-fit:cover; object-position:center; transition:transform .65s cubic-bezier(.2,.6,.2,1); }
.work-card a:hover .work-art img { transform:scale(1.035); }
.works-section:not(.is-expanded) .work-card:nth-child(1) .work-art img { object-position:center 42%; }
.works-section:not(.is-expanded) .work-card:nth-child(2) .work-art img { object-position:center 94%; }
.works-section:not(.is-expanded) .work-card:nth-child(3) .work-art img { object-position:center 20%; }
.works-section:not(.is-expanded) .work-card:nth-child(4) .work-art img { object-position:center 33%; }
.work-caption { position:relative; padding-top:19px; padding-right:40px; }
.work-medium { display:block; color:var(--muted); font-size:9px; letter-spacing:.12em; margin-bottom:8px; }
.work-card h3 { margin:0; font-size:23px; line-height:1.4; font-weight:550; letter-spacing:-.04em; word-break:keep-all; overflow-wrap:anywhere; }
.work-arrow { position:absolute; right:0; bottom:1px; font-size:25px; font-weight:300; transition:transform .25s; }
.work-card a:hover .work-arrow { transform:translate(3px,-3px); }
.work-card .participation { display:block; margin-top:6px; font-size:12px; color:var(--muted); }
.works-section.is-expanded .works-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:44px 24px; }
.works-section.is-expanded .work-art { aspect-ratio:690/1000; }
.works-section.is-expanded .work-card h3 { font-size:18px; }
.works-section.is-expanded .work-medium { display:none; }
.works-section.is-expanded .work-caption { padding-top:15px; padding-right:24px; }
.works-section.is-expanded .work-arrow { font-size:18px; bottom:auto; top:16px; }
.catalog-toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:32px; padding-top:20px; border-top:1px solid var(--line); }
.result-count { margin:0; color:var(--muted); font-size:13px; }
.search-field { display:flex; align-items:center; gap:10px; width:280px; padding:8px 0; border-bottom:1px solid var(--line); }
.search-field:focus-within { border-color:var(--ink); }
.search-field svg { width:18px; height:18px; flex:0 0 18px; color:var(--muted); }
.search-field input { width:100%; min-width:0; padding:5px 0; border:0; border-radius:0; background:transparent; color:var(--ink); font-size:14px; }
.search-field input:focus-visible { outline:none; }
.search-field input::-webkit-search-cancel-button { -webkit-appearance:none; }
.search-field button { min-width:30px; min-height:30px; font-size:22px; color:var(--muted); }
.empty-state { padding:90px 0 110px; text-align:center; }
.empty-state p { margin:0 0 12px; font-size:23px; letter-spacing:-.03em; }
.empty-state > span { color:var(--muted); font-size:15px; }
.empty-state .text-link { display:flex; width:fit-content; margin:30px auto 0; border-bottom:1px solid var(--ink); }
.site-footer { padding:72px var(--gutter) 28px; background:#e7e8e1; }
.footer-top { display:flex; align-items:flex-end; justify-content:flex-end; gap:30px; padding-bottom:40px; max-width:1504px; margin:auto; }
.footer-contact { display:flex; flex-direction:column; align-items:flex-start; gap:16px; padding-bottom:6px; }
.footer-contact .email { font-size:17px; letter-spacing:-.02em; }
.footer-contact .text-link { color:#686e66; font-size:12px; }
.footer-wordmark { display:block; font-size:clamp(70px,16.2vw,290px); line-height:1; letter-spacing:-.075em; font-weight:750; white-space:nowrap; padding-bottom:36px; }
.footer-bottom { border-top:1px solid #c4c8be; padding-top:26px; display:grid; grid-template-columns:1fr 1.6fr auto; gap:28px; font-size:11px; line-height:1.8; color:#6c7169; }
.footer-slogan { margin:0; }
.company-info p { margin:0; }
.company-info p:first-child { display:flex; flex-wrap:wrap; gap:4px 18px; color:#434b42; }
.company-info address { font-style:normal; margin:6px 0 2px; word-break:keep-all; }
.company-info .copyright { margin-top:10px; font-size:10px; color:#82887e; }
.back-to-top { white-space:nowrap; justify-self:end; align-self:start; }
.mobile-break { display:none; }
@media(min-width:1680px) { .hero-copy { left:max(var(--gutter),calc((100vw - 1528px)/2)); } .hero-art .art-front { max-width:950px; right:5%; } }
@media(max-width:1000px) {
 .header-description { display:none; } .site-header { height:86px; } .hero { height:660px; min-height:600px; max-height:none; } .hero-art { left:33%; } .hero-art .art-front { width:112%; right:-8%; } .hero-art[data-art="club"] .art-front,.hero-art[data-art="farm"] .art-front,.hero-art[data-art="spooky"] .art-front { width:112%; right:-8%; }
 .hero-copy { top:17%; width:52%; } .hero h1 { font-size:72px; } .hero h1.long-title { font-size:60px; max-width:380px; } .hero h1.extra-long-title { font-size:42px; } .hero-description { max-width:280px; font-size:14px; } .hero-credits { max-width:290px; }
 .works-navigation { gap:30px; } .works-section { padding-top:76px; } .work-card h3 { font-size:21px; } .works-section.is-expanded .works-grid { gap:36px 18px; } .works-section.is-expanded .work-card h3 { font-size:16px; }
}
@media(max-width:680px) {
 :root { --gutter:22px; } .site-header { height:78px; gap:16px; } .site-header .wordmark { font-size:24px; letter-spacing:-1.2px; } .site-header nav { gap:21px; font-size:12px; }
 .hero { height:820px; min-height:0; max-height:none; } .hero-artworks { inset:0 0 286px; } .hero-art { left:0; mask-image:none; } .hero-art .art-front,.hero-art[data-art="club"] .art-front,.hero-art[data-art="farm"] .art-front,.hero-art[data-art="spooky"] .art-front { width:124%; max-height:100%; right:-11%; }
 .hero-art .art-front,.hero-art[data-art="club"] .art-front,.hero-art[data-art="farm"] .art-front,.hero-art[data-art="spooky"] .art-front { width:auto; height:100%; right:50%; transform:translateX(50%); }
 .hero-art .art-back { width:130%; } .hero-shade { inset:0; background:linear-gradient(0deg,#111718 0%,#111718 29%,rgba(17,23,24,.96) 35%,rgba(17,23,24,.08) 59%,transparent 75%); }
 .hero-copy { top:auto; left:var(--gutter); right:var(--gutter); bottom:149px; max-width:none; width:auto; }
 .hero-copy .eyebrow { margin-bottom:18px; font-size:9px; } .hero h1 { font-size:52px; letter-spacing:-.055em; } .hero h1.long-title { max-width:100%; font-size:44px; text-wrap:initial; }
 .hero-description { margin-top:17px; max-width:none; font-size:13px; } .hero-credits { margin-top:8px; font-size:11px; max-width:none; } .hero-link { margin-top:22px; gap:12px; font-size:12px; } .hero-link > span[aria-hidden] { width:36px; height:36px; font-size:18px; }
 .carousel-controls { top:7px; right:var(--gutter); gap:20px; } .carousel-arrows { gap:6px; } .icon-button { width:34px; height:34px; } .slide-counter { font-size:10px; }
 .hero-pagination { height:106px; align-items:flex-start; justify-content:center; flex-direction:column; gap:12px; }
 .shuffle-label { font-size:10px; gap:9px; } .shuffle-label svg { width:14px; height:14px; } #shuffle-count { padding-left:0; }
 .up-next { justify-content:flex-start; max-width:100%; width:100%; gap:14px; font-size:11px; } .up-next-label { font-size:10px; } .up-next > span:last-child { margin-left:auto; }
 .hero-cover .art-cover { top:60px; bottom:auto; height:58%; right:50%; transform:translateX(50%); max-width:74%; }
 .hero-cover .art-ambience { height:120%; width:120%; }
 .hero h1.extra-long-title { font-size:34px; line-height:1.28; }
 .hero-description[hidden] + .hero-credits { margin-top:16px; }
 .works-section { padding-top:64px; padding-bottom:72px; } .works-header { align-items:stretch; flex-direction:column; gap:28px; margin-bottom:28px; } .section-title .eyebrow { font-size:9px; margin-bottom:12px; } .works-header h2 { font-size:42px; } .works-navigation { justify-content:space-between; gap:12px; padding:0; } .tabs { gap:23px; } .tab { font-size:14px; padding:10px 0; } .all-works { font-size:12px; gap:8px; } .all-works > span[aria-hidden] { width:28px; height:28px; font-size:17px; }
 .works-grid { grid-template-columns:1fr; gap:34px; } .work-art { aspect-ratio:1.35; } .work-caption { padding-top:14px; } .work-medium { font-size:8px; margin-bottom:6px; } .work-card h3 { font-size:20px; } .work-arrow { font-size:23px; }
 .works-section.is-expanded .works-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px 14px; } .works-section.is-expanded .work-card h3 { font-size:14px; } .works-section.is-expanded .work-caption { padding-right:15px; padding-top:12px; } .works-section.is-expanded .work-arrow { font-size:15px; top:12px; }
 .catalog-toolbar { gap:20px; margin-bottom:26px; padding-top:15px; } .result-count { font-size:11px; white-space:nowrap; } .search-field { width:min(225px,70%); } .search-field input { font-size:16px; }
 .site-footer { padding-top:36px; padding-bottom:24px; } .footer-top { justify-content:flex-start; padding-bottom:36px; } .footer-contact { gap:8px; } .footer-contact .email { font-size:15px; } .footer-wordmark { font-size:15.8vw; padding-bottom:24px; }
 .footer-bottom { grid-template-columns:1fr auto; gap:20px 12px; font-size:10px; padding-top:20px; } .footer-slogan { grid-column:1; grid-row:1; } .company-info { grid-column:1 / -1; } .back-to-top { grid-column:2; grid-row:1; } .footer-slogan { padding-right:0; } .mobile-break { display:block; }
}
@media(max-width:360px) { .site-header nav { gap:15px; } .site-header .wordmark { font-size:21px; } .hero h1.long-title { font-size:39px; } .hero h1.extra-long-title { font-size:30px; } .all-works { font-size:11px; } .tabs { gap:16px; } .hero { height:780px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; } }
/* Representative artwork uses the publisher's separate background/character assets. */
.work-stage { isolation:isolate; background:#dce5e3; }
.work-stage img { position:absolute; bottom:0; right:0; width:100%; height:100%; object-fit:contain!important; object-position:bottom center!important; }
.work-stage .stage-back { object-fit:cover!important; opacity:.7; }
.work-stage .stage-object { opacity:.8; }
.work-stage .stage-front { z-index:1; height:98%; }
.stage-club { background:radial-gradient(ellipse at 55% 70%,#62529f,#29223f); }
.stage-farm { background:#cedcc4; }
.stage-spooky { background:#d8cad4; }
.stage-goblin { background:#dbc8b8; }