/* Fionalila site — implements "Fionalila Site v4" (Claude Design) */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--text-body);font-family:var(--font-body);font-size:var(--text-md);line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
h1,h2,h3,p{margin:0}
img{max-width:100%;display:block}
a{color:var(--text-link);text-decoration:none;transition:color var(--dur-fast) var(--ease-out-soft)}
a:hover{color:var(--text-link-hover)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
::selection{background:var(--pink-300);color:var(--teal-900)}

/* primitives */
.wrap{max-width:var(--container-wide);margin:0 auto;padding:0 40px}
.mono{font-family:var(--font-mono);font-size:var(--text-3xs);letter-spacing:.1em;color:var(--text-muted);text-transform:uppercase}
.mono--ink{color:var(--teal-900)}
.mono--link{color:var(--teal-800);cursor:pointer}
.mono--link:hover{color:var(--accent-strong)}
.mono--tight{letter-spacing:.06em}
.mono--accent{color:var(--accent-strong)}
.display{font-family:var(--font-display);color:var(--teal-900);letter-spacing:-.035em;line-height:1}
.hairline{border:1px solid var(--clay-200);border-top:none}
.hairline-x{border-left:1px solid var(--clay-200);border-right:1px solid var(--clay-200)}
.rule-b{border-bottom:1px solid var(--clay-200)}
.rule-r{border-right:1px solid var(--clay-200)}
.rule-l{border-left:1px solid var(--clay-200)}
.rule-t{border-top:1px solid var(--clay-200)}
.cover{width:100%;height:100%;object-fit:cover;display:block}

/* Button (DS: variant secondary, size md) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--control-h-md);padding:0 var(--control-pad-x);font-family:var(--font-core);font-weight:var(--weight-bold);font-size:var(--text-sm);letter-spacing:-.005em;border-radius:var(--radius-control);cursor:pointer;white-space:nowrap;transition:var(--transition-control);background:transparent;color:var(--teal-900);border:1px solid var(--border-ink);text-decoration:none}
.btn:hover{background:var(--teal-900);color:var(--text-inverse)}
.btn:active{transform:scale(var(--press-scale))}
/* Tag */
.tag{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:var(--radius-chip);font-family:var(--font-body);font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--teal-800);border:1px solid var(--border-strong);background:transparent}
.tags{display:flex;flex-wrap:wrap;gap:8px;padding-top:8px}
/* Icon (Lucide, currentColor) */
.icon{display:inline-block;width:22px;height:22px;color:var(--accent-strong)}
.icon svg{width:100%;height:100%}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:var(--surface-glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--clay-200)}
.site-header .wrap{height:72px;display:grid;grid-template-columns:1fr 1fr 1fr 1fr;align-items:center}
.brand{font-family:var(--font-display);font-size:20px;letter-spacing:-.045em;color:var(--teal-900)}
.brand:hover{color:var(--teal-900)}
.header-label{border-left:1px solid var(--clay-200);padding-left:24px;height:100%;display:flex;align-items:center}
.site-nav{display:flex;align-items:center;justify-content:end;gap:28px}
.site-nav a{font-family:var(--font-mono);font-size:var(--text-3xs);letter-spacing:.1em;color:var(--teal-900)}
.site-nav a:hover,.site-nav a[aria-current]{color:var(--accent-strong)}

/* section bar (eyebrow row) */
.bar{display:flex;justify-content:space-between;align-items:center;padding:24px 40px}

/* hero */
.hero{display:grid;grid-template-columns:2fr 1fr}
.hero__title{padding:72px 40px 56px}
.hero__title h1{margin-top:40px;font-size:var(--text-7xl);line-height:.92;letter-spacing:-.04em}
.hero__aside{display:flex;flex-direction:column;justify-content:space-between;gap:56px;padding:72px 40px 56px}
.hero__aside p{font-family:var(--font-mono);font-size:var(--text-2xs);line-height:1.7;letter-spacing:.02em;text-transform:uppercase;color:var(--text-body)}
.hero__image img{width:100%;height:360px;object-fit:cover}
.hero__image--blur img{filter:blur(1.8px)}
.page-hero{padding:72px 40px 56px}
.page-hero h1{margin-top:32px;font-size:var(--text-6xl);line-height:.94;letter-spacing:-.04em}

/* current projects */
.current{display:grid;grid-template-columns:320px 1fr}
.current__mark{padding:40px;display:flex;align-items:center;justify-content:center}
.current__mark svg{width:100%;height:auto;display:block}
.current__body{padding:56px 40px;display:flex;flex-direction:column;gap:20px}
.current__body h2{font-size:var(--text-4xl);line-height:.98;max-width:24ch}
.current__body p{font-size:var(--text-md);line-height:1.55;max-width:56ch}
.steps{display:flex;flex-direction:column;gap:10px;padding-top:8px}
.step{display:flex;gap:16px;align-items:baseline;border-top:1px solid var(--clay-200);padding-top:10px}
.step b{font-family:var(--font-core);font-weight:700;font-size:var(--text-sm);color:var(--teal-900)}

/* what we do */
.cap{display:grid;grid-template-columns:repeat(3,1fr)}
.cap__label{padding:40px;display:flex;align-items:center}
.cap__item{padding:56px 40px}
.cap__item h3{font-family:var(--font-core);font-weight:700;font-size:var(--text-xl);letter-spacing:-.02em;color:var(--teal-900);padding-top:20px}

/* archive rows (home) */
.row{display:grid;grid-template-columns:80px 1fr 260px 200px;gap:32px;align-items:center;padding:28px 40px;color:inherit;transition:background var(--dur-fast) var(--ease-out-soft)}
.row:hover{background:var(--clay-100);color:inherit}
.row__name{font-family:var(--font-display);font-size:var(--text-3xl);line-height:1;letter-spacing:-.035em;color:var(--teal-900)}
.row__period{text-align:right}

/* archive cards (work page) */
.arch{display:grid;grid-template-columns:1fr 1.2fr;color:inherit;transition:background var(--dur-fast) var(--ease-out-soft)}
.arch:hover{background:var(--clay-100);color:inherit}
.arch__meta{padding:40px;display:flex;flex-direction:column;gap:16px}
.arch__name{font-family:var(--font-display);font-size:var(--text-4xl);line-height:1;letter-spacing:-.035em;color:var(--teal-900)}
.arch__cover{height:260px;background-size:cover;background-position:center}

/* studio teaser */
.teaser{display:grid;grid-template-columns:1fr 1fr}
.teaser__text{padding:72px 40px;display:flex;flex-direction:column;justify-content:space-between;gap:40px}
.teaser__text p{font-size:var(--text-4xl);max-width:18ch}
.teaser img{min-height:100%}
.pad-bottom{padding-bottom:128px}

/* studio page */
.studio-hero{display:grid;grid-template-columns:1.3fr .7fr}
.studio-hero h1{max-width:16ch}
.studio-hero__aside{display:flex;align-items:end;padding:72px 40px 56px}
.studio-hero__aside p{font-family:var(--font-mono);font-size:var(--text-2xs);line-height:1.7;letter-spacing:.02em;text-transform:uppercase;color:var(--text-body)}
.studio-hero__image img{width:100%;height:480px;object-fit:cover}
.how{display:grid;grid-template-columns:repeat(3,1fr)}
.how__item{padding:72px 40px}
.how__item .display{font-size:var(--text-4xl);padding-top:20px}
.duo{display:grid;grid-template-columns:1fr 1fr}
.duo img{aspect-ratio:1;object-fit:cover;width:100%;height:100%}

/* case study */
.case-hero{display:grid;grid-template-columns:1.3fr .7fr}
.case-hero__title{padding:72px 40px}
.case-hero__title h1{font-size:var(--text-7xl);line-height:.92;letter-spacing:-.04em}
.case-hero__title p{margin-top:24px;font-family:var(--font-core);font-weight:700;font-size:var(--text-2xl);line-height:1.18;letter-spacing:-.02em;color:var(--teal-900)}
.case-hero__meta{padding:72px 40px;display:flex;flex-direction:column;gap:12px;justify-content:end;font-family:var(--font-mono);font-size:var(--text-3xs);letter-spacing:.06em;color:var(--text-muted);text-transform:uppercase}
.case-hero__meta a{color:var(--text-link)}
.case-hero__image img{width:100%;height:520px;object-fit:cover}
.split{display:grid;grid-template-columns:1fr 1.2fr}
.split--rev{grid-template-columns:1.2fr 1fr}
.split__text{padding:72px 40px}
.split__text p{margin-top:32px;font-size:var(--text-lg);line-height:1.55;max-width:44ch}
.split img{width:100%;height:100%;object-fit:cover}
.split img.white{background:var(--white)}
.quad{display:grid;grid-template-columns:repeat(4,1fr)}
.quad img{width:100%;height:auto;aspect-ratio:1;object-fit:cover}

/* footer */
.site-footer{background:var(--surface-inverse);color:var(--text-inverse)}
.site-footer .wrap{padding:72px 40px 32px}
.footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:56px;padding:0 40px 72px}
.footer__brand{display:flex;flex-direction:column;gap:12px}
.footer__brand .display{font-size:var(--text-4xl);letter-spacing:-.045em;color:var(--paper)}
.footer__hangul{font-family:var(--font-hangul);font-size:var(--text-lg);color:var(--teal-200)}
.footer__col{display:flex;flex-direction:column;gap:12px}
.footer__col .mono{color:var(--teal-300)}
.footer__col a{font-size:var(--text-sm);color:var(--teal-100)}
.footer__col a:hover{color:var(--paper)}
.footer__studios{gap:4px;font-family:var(--font-core);font-weight:700;font-size:var(--text-sm);letter-spacing:.06em;color:var(--teal-100)}
.footer__studios .mono{padding-bottom:8px}
.footer__bottom{display:flex;justify-content:space-between;border-top:1px solid var(--border-inverse);padding:24px 40px 0}
.footer__bottom .mono{color:var(--teal-300)}

/* responsive */
@media (max-width:1100px){
  .hero__title h1{font-size:clamp(56px,9vw,112px)}
  .row{grid-template-columns:60px 1fr 200px 160px;gap:20px}
  .current{grid-template-columns:240px 1fr}
}
@media (max-width:820px){
  .wrap{padding:0 20px}
  .site-header .wrap{grid-template-columns:1fr auto}
  .header-label{display:none}
  .hero,.teaser,.studio-hero,.case-hero,.split,.split--rev,.current,.arch,.duo{grid-template-columns:1fr}
  .hero__title,.hero__aside,.page-hero,.teaser__text,.studio-hero__aside,.case-hero__title,.case-hero__meta,.split__text,.current__body,.how__item,.cap__item,.arch__meta{padding:40px 24px}
  .hero__title h1{font-size:clamp(44px,12vw,80px)}
  .page-hero h1,.case-hero__title h1{font-size:clamp(40px,11vw,84px)}
  .hero__title,.teaser__text,.studio-hero > div:first-child,.case-hero__title,.current__mark,.cap__label,.cap__item.rule-r,.how__item.rule-r,.arch__meta{border-right:none;border-bottom:1px solid var(--clay-200)}
  .current__mark{padding:32px 24px}
  .current__mark svg{max-width:240px}
  .cap,.how{grid-template-columns:1fr}
  .row{grid-template-columns:1fr;gap:6px;padding:24px}
  .row__period{text-align:left}
  .row__name{font-size:var(--text-2xl)}
  .bar{padding:16px 24px}
  .quad{grid-template-columns:repeat(2,1fr)}
  .quad img:nth-child(2){border-right:none!important}
  .quad img:nth-child(1),.quad img:nth-child(2){border-bottom:1px solid var(--clay-200)}
  .hero__image img{height:240px}
  .studio-hero__image img,.case-hero__image img{height:300px}
  .split--rev img{order:-1}
  .split .rule-l{border-left:none;border-top:1px solid var(--clay-200)}
  .teaser__text p,.current__body h2,.arch__name,.how__item .display{font-size:var(--text-2xl)}
  .footer__grid{grid-template-columns:1fr;gap:32px;padding:0 0 40px}
  .footer__bottom{padding:24px 0 0;flex-direction:column;gap:8px}
  .pad-bottom{padding-bottom:64px}
}

/* case-study utilities (v4 revision) */
.case-hero__image--fit{display:flex;justify-content:center;padding:40px}
.case-hero__image--fit img{width:100%;height:auto}
.media-cell{display:flex;align-items:center;justify-content:center;padding:32px}
.media-cell img{width:100%;height:auto}
.half{display:grid;grid-template-columns:1fr 1fr}
.split--wide{grid-template-columns:1fr 1.4fr}
.split--text-wide{grid-template-columns:1.2fr 1fr}
.trio{display:grid;grid-template-columns:1fr 1fr 1fr}
.cell{padding:56px 40px}
.cell--center{display:flex;align-items:center}
.cell--stack{display:flex;flex-direction:column;gap:32px}
.cell--end{display:flex;align-items:end}
.cell p{font-size:var(--text-lg);line-height:1.55;max-width:44ch}
.split__text .tags,.cell .tags{padding-top:0}
.video{width:100%;aspect-ratio:16/9;border:0;display:block;background:var(--teal-950)}
.pair-340 img{width:100%;height:340px;object-fit:cover}
@media (max-width:820px){
  .half,.split--wide,.split--text-wide,.trio{grid-template-columns:1fr}
  .cell,.split__text{padding:40px 24px}
  .half > .rule-r,.trio > .rule-r,.split--wide > .rule-r,.split--text-wide > .rule-r{border-right:none;border-bottom:1px solid var(--clay-200)}
  .case-hero__image--fit{padding:24px}
  .pair-340 img{height:240px}
  .pair-340 img.rule-r{border-right:none;border-bottom:1px solid var(--clay-200)}
}