/* ARYUN STUDIO — official site, self-hosted on Cloudflare Pages */
:root {
  color-scheme: dark;
  --paper: #eeedeb;
  --muted: rgba(237,237,235,.51);
  --quiet: rgba(237,237,235,.32);
  --line: rgba(255,255,255,.19);
  --inset: clamp(22px, 4.25vw, 75px);
  --max-content: 1180px;
  --transition: cubic-bezier(.19,1,.22,1);
}
*,*::before,*::after { box-sizing:border-box; }
html { background:#050607; scroll-behavior:smooth; }
body { margin:0; min-height:100%; background:#050607; color:var(--paper); font-family:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Noto Sans KR','Malgun Gothic',sans-serif; -webkit-font-smoothing:antialiased; }
body.page { height:100vh; height:100dvh; min-height:420px; overflow:hidden; }
a { color:inherit; text-decoration:none; }
a:focus-visible { outline:1px solid var(--paper); outline-offset:7px; }
button { font:inherit; }
::selection { background:rgba(242,242,240,.26); color:#fff; }
.site { position:relative; width:100%; height:100%; min-height:420px; isolation:isolate; overflow:hidden; }
/* Foreground is near-black; original photograph remains subtly visible. */
.backdrop { position:absolute; inset:0; z-index:-2; background:#060709; overflow:hidden; pointer-events:none; }
.backdrop__photo { position:absolute; inset:-18px; background:url('./background.webp') 50% 54% / cover no-repeat; filter: grayscale(.66) saturate(.35) brightness(.56) contrast(1.12) blur(5px); transform:scale(1.05); }
.backdrop::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 45% 40% at 50% 46%,rgba(0,0,0,.36),rgba(0,0,0,.52) 65%,rgba(0,0,0,.77) 100%),linear-gradient(180deg,rgba(0,0,0,.56),rgba(0,0,0,.22) 35%,rgba(0,0,0,.56) 100%); }
.backdrop::before { content:''; position:absolute; inset:0; background:#000; opacity:.09; }
/* Content pages stay quieter, retaining a subtle trace of the same picture. */
.page--inner .backdrop__photo { filter:grayscale(.8) saturate(.22) brightness(.24) blur(7px); }
.page--inner .backdrop::after { background:rgba(0,0,0,.81); }
/* Framing */
.site-header { position:absolute; z-index:5; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; min-height:110px; padding:28px var(--inset); }
.brand { display:inline-flex; align-items:center; gap:14px; min-height:35px; max-width:220px; }
.brand__mark { display:block; object-fit:contain; width:27px; height:29px; opacity:.86; }
.brand__name { font-family:Georgia,'Times New Roman',serif; font-size:12px; white-space:nowrap; letter-spacing:.21em; color:rgba(248,247,244,.77); }
.nav { display:flex; align-items:center; gap:clamp(22px,3.3vw,55px); }
.nav__link { position:relative; font-size:10px; line-height:2; font-weight:500; letter-spacing:.19em; color:rgba(248,247,245,.62); transition:color .3s; }
.nav__link::after { content:''; position:absolute; left:0; right:100%; height:1px; bottom:-8px; background:#e4e3e1; transition:right .42s var(--transition); }
.nav__link:hover,.nav__link[aria-current='page'] { color:#fff; }
.nav__link:hover::after,.nav__link[aria-current='page']::after { right:0; }
.site-footer { position:absolute; z-index:4; bottom:0; left:0; right:0; display:flex; align-items:end; justify-content:space-between; gap:16px; padding:20px var(--inset) 30px; }
.site-footer__small { font-size:9px; font-weight:500; letter-spacing:.21em; color:var(--quiet); }
.site-footer__rule { height:1px; width:38px; background:rgba(255,255,255,.35); margin-bottom:4px; }
/* Homepage: wordmark is centered on both axes, with no page scroll. */
.hero { position:absolute; inset:0; display:grid; place-items:center; padding:80px var(--inset); }
.hero__center { display:flex; flex-direction:column; align-items:center; text-align:center; transform:translateY(-3px); animation:reveal 1.4s var(--transition) both; }
.hero__wordmark { display:block; width:clamp(260px,38vw,550px); height:auto; max-width:82vw; filter:drop-shadow(0 0 14px rgba(255,255,255,.055)); }
.hero__detail { margin-top:42px; display:flex; flex-direction:column; align-items:center; gap:16px; }
.hero__detail-line { width:24px; height:1px; background:rgba(238,237,235,.36); }
.hero__caption { font-size:10px; font-weight:400; letter-spacing:.33em; color:rgba(243,241,237,.65); }
@keyframes reveal { from {opacity:0; transform:translateY(14px);} to {opacity:1; transform:translateY(-3px);} }
/* Inner pages */
.inner { display:flex; width:100%; height:100%; min-height:420px; align-items:center; justify-content:center; padding:112px var(--inset) 92px; }
.inner__frame { width:min(100%,var(--max-content)); margin:auto; animation:pageReveal .9s var(--transition) both; }
@keyframes pageReveal { from {opacity:0; transform:translateY(18px);} to {opacity:1; transform:translateY(0);} }
.eyebrow { margin:0 0 28px; color:rgba(242,239,235,.54); font-size:10px; line-height:1.5; font-weight:500; letter-spacing:.27em; }
.eyebrow__num { margin-right:20px; color:rgba(245,244,240,.3); }
.about { max-width:890px; margin:0 auto; }
.about__statement { margin:0; font-size:clamp(31px,4.7vw,67px); line-height:1.38; font-weight:400; letter-spacing:-.055em; word-break:keep-all; }
.about__divider { height:1px; width:44px; background:rgba(255,255,255,.44); margin:118px 0 38px; }
.about__copy { max-width:690px; margin:0; color:rgba(241,241,239,.76); font-size:clamp(13px,1.3vw,17px); line-height:2; letter-spacing:-.025em; word-break:keep-all; }
.about__future { margin:38px 0 0; font-size:11px; font-weight:500; letter-spacing:.28em; color:rgba(241,241,239,.65); }
.business { max-width:860px; margin:0 auto; }
.business__title { margin:0 0 45px; font-family:Georgia,'Times New Roman',serif; font-size:clamp(42px,5vw,72px); line-height:1.04; letter-spacing:-.045em; font-weight:400; }
.business__rule { width:100%; height:1px; background:var(--line); }
.business__link { display:flex; width:100%; align-items:center; justify-content:space-between; gap:18px; padding:28px 0; transition:padding-left .4s var(--transition),background .4s; }
.business__link:hover { padding-left:10px; }
.business__sub { display:block; font-size:10px; letter-spacing:.24em; color:var(--muted); margin-bottom:9px; }
.business__name { display:block; font-size:clamp(19px,2.5vw,29px); letter-spacing:-.04em; font-weight:400; }
.business__arrow { display:block; width:20px; height:20px; opacity:.74; flex:0 0 20px; transition:transform .4s var(--transition); }
.business__link:hover .business__arrow { transform:translate(4px,-4px); }
.business__note { font-size:11px; color:var(--quiet); letter-spacing:.07em; }
.work { max-width:830px; margin:0 auto; }
.work__back { display:inline-block; font-size:10px; letter-spacing:.2em; color:var(--muted); margin-bottom:52px; }
.work__back:hover { color:#fff; }
.work__type { margin:0 0 14px; letter-spacing:.24em; font-size:10px; color:var(--muted); }
.work__title { margin:0; font-weight:400; font-size:clamp(38px,6vw,70px); letter-spacing:-.06em; }
.work__status { margin:35px 0 0; font-size:12px; letter-spacing:.13em; color:var(--muted); }
.contact { text-align:center; }
.contact__notice { margin:0; font-size:clamp(28px,4.2vw,57px); font-weight:400; letter-spacing:-.05em; }
/* Tablet + mobile: keep the original viewport-size first screen. */
@media (max-width:700px) {
  .site-header { min-height:84px; padding-top:19px; padding-bottom:19px; }
  .brand { gap:7px; }
  .brand__mark { width:22px; height:23px; }
  .brand__name { display:none; }
  .nav { gap:clamp(14px,4vw,28px); }
  .nav__link { font-size:9px; letter-spacing:.12em; }
  .nav__link::after { bottom:-5px; }
  .hero__wordmark { width:min(77vw,420px); }
  .hero__detail { margin-top:32px; }
  .hero__caption { font-size:8px; letter-spacing:.26em; }
  .site-footer { padding-bottom:23px; }
  .site-footer__small { font-size:8px; letter-spacing:.14em; }
  .inner { padding-top:100px; padding-bottom:72px; }
  .eyebrow { margin-bottom:22px; }
  .about__statement { font-size:clamp(32px,8vw,50px); }
  .about__divider { margin:76px 0 32px; }
  .about__copy { font-size:14px; line-height:1.85; }
  .about__future { font-size:9px; margin-top:26px; }
  .business__title { margin-bottom:28px; }
}
@media (max-width:380px) { .nav {gap:13px;} .nav__link{font-size:8.5px;} .brand__mark{width:20px;} .hero__wordmark{width:76vw;} .site-footer__small {font-size:7px;} }
@media (max-height:650px) {
  .site-header { min-height:68px; padding-top:12px; padding-bottom:12px; }
  .site-footer { padding-bottom:12px; }
  .inner { padding-top:78px; padding-bottom:43px; }
  .eyebrow { margin-bottom:12px; }
  .about__statement { font-size:clamp(26px,4.8vh,42px); line-height:1.25; }
  .about__divider { margin:42px 0 20px; }
  .about__copy { font-size:clamp(11px,2.3vh,15px); line-height:1.7; }
  .about__future { margin-top:17px; }
  .business__title{margin-bottom:25px;}
  .work__back { margin-bottom:22px; }
}
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto;} *,*::before,*::after {animation-duration:.01ms !important; transition-duration:.01ms !important;} }

/* V3: business menu unfolds inline below the navigation tab. */
.nav__dropdown { position:relative; z-index:10; display:block; }
.nav__summary { display:flex; align-items:center; gap:6px; cursor:pointer; list-style:none; user-select:none; }
.nav__summary::-webkit-details-marker { display:none; }
.nav__summary::marker { content:''; }
.nav__chevron { width:10px; height:10px; flex:none; opacity:.65; transition:transform .25s ease; }
.nav__dropdown[open] .nav__chevron { transform:rotate(180deg); }
.nav__dropdown[open] .nav__summary, .nav__dropdown--active .nav__summary { color:#fff; }
.nav__dropdown[open] .nav__summary::after, .nav__dropdown--active .nav__summary::after { right:0; }
.nav__submenu { position:absolute; top:calc(100% + 18px); left:50%; transform:translateX(-50%); min-width:154px; border:1px solid rgba(255,255,255,.17); background:rgba(9,10,12,.96); box-shadow:0 18px 38px rgba(0,0,0,.38); padding:5px; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); animation:submenu-reveal .24s ease both; }
.nav__sublink { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 16px; font-size:10px; font-weight:500; letter-spacing:.18em; color:rgba(248,247,245,.77); transition:background .2s,color .2s; }
.nav__sublink:hover, .nav__sublink:focus-visible { background:rgba(255,255,255,.09); color:#fff; }
.nav__sublink span { font-size:14px; opacity:.55; }
@keyframes submenu-reveal { from {opacity:0;translate:0 -7px;} to {opacity:1;translate:0 0;} }
/* Rendered Korean calligraphy is embedded as image, so every device displays the same strokes. */
.visually-hidden { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.about__calligraphy { display:block; width:clamp(220px,28vw,350px); height:auto; max-width:100%; object-fit:contain; filter:drop-shadow(0 0 10px rgba(246,245,240,.045)); }
.about__copy--second { margin-top:1.25em; }
@media(max-width:700px) {
 .nav__summary { gap:3px; }
 .nav__chevron { width:8px; height:8px; }
 .nav__submenu { top:calc(100% + 15px); min-width:132px; }
 .nav__sublink { font-size:9px; padding:13px 12px; }
 .about__calligraphy { width:clamp(180px,60vw,260px); }
 .about__copy--second { margin-top:1em; }
}
@media(max-height:650px) { .about__calligraphy { max-height:21vh; width:auto; max-width:64vw; } .about__copy--second { margin-top:.7em; } }