/* Visual QA polish — homepage and responsive editorial system */

:root{
  --header-h:86px;
  --mobile-gutter:22px;
}

/* Header: lighter footprint, cleaner editorial rhythm */
.site-header{background:linear-gradient(to bottom,rgba(2,7,13,.985),rgba(2,7,13,.94));backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.nav-wrap{height:var(--header-h)}
.brand-name{letter-spacing:.045em}
.site-header.scrolled .nav-wrap{height:72px}
.site-header.scrolled .brand-role{opacity:.72}
.site-header,.nav-wrap,.brand-name,.brand-role{transition:height .28s ease,font-size .28s ease,opacity .28s ease,background .28s ease}

/* Hero: put the journalist first, not the text wall */
.hero{min-height:860px;max-height:980px;align-items:center}
.hero-media img{object-position:68% center;filter:saturate(.72) contrast(1.06) brightness(.72)}
.hero-media:after{background:linear-gradient(90deg,rgba(2,7,13,.985) 0%,rgba(2,7,13,.93) 26%,rgba(2,7,13,.64) 48%,rgba(2,7,13,.14) 76%,rgba(2,7,13,.08) 100%),linear-gradient(0deg,rgba(2,7,13,.82) 0%,rgba(2,7,13,.08) 48%,rgba(2,7,13,.30) 100%)}
.hero-content{padding:150px 0 82px;max-width:760px}
.hero h1{font-size:clamp(5.4rem,8.2vw,8.8rem);line-height:.79;margin:26px 0 30px;max-width:680px}
.hero-copy{max-width:650px;font-size:1.05rem;line-height:1.72}
.hero-kicker{font-size:.74rem;letter-spacing:.2em}

/* Stats: compact visual dashboard */
.hero-stats{background:#030a11}
.stat{padding:22px 24px}
.stat b{font-size:2.2rem}
.stat span{line-height:1.45}

/* Identity block */
.home-intro{background:radial-gradient(circle at 78% 20%,rgba(22,136,248,.075),transparent 34%),linear-gradient(180deg,#07111b,#030911)}
.signature-block h2{letter-spacing:-.01em}
.method-card{transition:transform .28s ease,border-color .28s ease,background .28s ease}
.method-card:hover{transform:translateY(-4px);background:#0a1825}

/* Featured work */
.featured{background:#f4f5f7}
.featured .btn-ghost{background:transparent!important;color:#111!important;border-color:#aab1b8!important}
.featured .btn-ghost:hover{background:#111!important;color:#fff!important;border-color:#111!important}
.work-card{border-radius:20px}
.work-card:after{background:linear-gradient(0deg,rgba(1,7,12,.99) 0%,rgba(1,7,12,.72) 24%,rgba(1,7,12,.12) 70%)}

/* Production pair */
.production-panel:before{background:linear-gradient(0deg,rgba(2,7,13,.98) 0%,rgba(2,7,13,.70) 35%,rgba(2,7,13,.14) 76%)}
.production-panel-content{padding-bottom:8px}
.production-panel .big-number{letter-spacing:-.03em}

/* Academic teaser: show the graduation portrait area, not duplicated poster text */
.academic-teaser{background:#ece9e2}
.academic-teaser-grid{box-shadow:0 24px 70px rgba(29,25,17,.15)}
.academic-img{overflow:hidden;position:relative;background:#efe6d4}
.academic-img img{object-fit:cover;object-position:78% center;transform:scale(1.02)}
.academic-img:after{content:"";position:absolute;inset:0;box-shadow:inset 18px 0 34px rgba(255,255,255,.18);pointer-events:none}

@media (max-width:1100px){
  .nav{gap:18px}
  .nav a{font-size:.82rem}
  .brand{min-width:190px}
  .hero{min-height:820px}
  .hero-content{max-width:650px}
  .split-intro{gap:54px}
}

@media (max-width:900px){
  :root{--header-h:104px}
  .container{width:calc(100% - (var(--mobile-gutter) * 2))}
  .site-header{background:rgba(2,7,13,.97);border-bottom:1px solid rgba(255,255,255,.07)}
  .nav-wrap{height:104px;gap:12px;justify-content:space-between}
  .brand{min-width:0;max-width:calc(100% - 76px)}
  .brand-name{font-size:1.25rem;line-height:1}
  .brand-role{font-size:.58rem;letter-spacing:.14em;white-space:nowrap}
  .menu-btn{display:flex;width:48px;height:48px;border-radius:15px;position:relative;flex:0 0 auto}
  .nav-tools{display:none}
  .nav{display:none;position:fixed;z-index:80;top:84px;left:14px;right:14px;padding:18px;background:rgba(5,14,22,.985);border:1px solid rgba(255,255,255,.10);border-radius:18px;box-shadow:0 24px 70px rgba(0,0,0,.48);flex-direction:column;align-items:stretch;gap:2px}
  .nav.open{display:flex}
  .nav a{font-size:1.2rem;padding:14px 12px;border-bottom:1px solid rgba(255,255,255,.07)}
  .nav a:last-child{border-bottom:0}
  .nav a:after{display:none}
  .site-header.scrolled .nav-wrap{height:76px}
  .site-header.scrolled .brand-role{display:none}
  .site-header.scrolled .brand-name{font-size:1.08rem}
  .site-header.scrolled .nav{top:68px}

  /* Mobile hero composition */
  .hero{min-height:780px;max-height:none;align-items:flex-end}
  .hero-media img{object-position:67% center;filter:saturate(.70) contrast(1.07) brightness(.68)}
  .hero-media:after{background:linear-gradient(90deg,rgba(2,7,13,.98) 0%,rgba(2,7,13,.86) 34%,rgba(2,7,13,.36) 70%,rgba(2,7,13,.20) 100%),linear-gradient(0deg,rgba(2,7,13,.98) 0%,rgba(2,7,13,.72) 42%,rgba(2,7,13,.10) 80%)}
  .hero-content{padding:154px 0 48px;max-width:none}
  .hero-kicker{font-size:.68rem;gap:9px;letter-spacing:.16em}
  .hero-kicker:before{width:30px}
  .hero h1{font-size:clamp(3.9rem,18.5vw,5.25rem);line-height:.80;margin:22px 0 24px;max-width:94%}
  .hero-copy{font-size:1rem;line-height:1.62;max-width:94%;color:#d2d9e0}
  .cta-row{margin-top:28px;gap:10px}
  .hero .btn{width:auto;min-height:52px;padding:0 18px;font-size:.72rem;border-radius:12px}
  .scroll-cue{display:none}

  /* Stats stay 2x2 but consume less scroll */
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .stat{min-height:128px;padding:22px;border-bottom:1px solid var(--line)}
  .stat:nth-child(2n){border-right:0}
  .stat:nth-last-child(-n+2){border-bottom:0}
  .stat b{font-size:2rem}
  .stat span{font-size:.64rem;letter-spacing:.1em}

  /* Identity: horizontal snap cards = dynamic, less long-scroll */
  .section{padding:72px 0}
  .split-intro{display:block}
  .signature-block h2{font-size:clamp(3.1rem,14vw,4.6rem);line-height:.92;margin-top:18px}
  .signature-block p{font-size:1rem;line-height:1.75}
  .pill-row{margin-top:22px}
  .method-grid{display:flex;margin-top:38px;gap:12px;background:transparent;border:0;border-radius:0;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 1px 10px;scrollbar-width:none}
  .method-grid::-webkit-scrollbar{display:none}
  .method-card{flex:0 0 82%;min-height:250px;border:1px solid rgba(255,255,255,.13);border-radius:20px;padding:28px;scroll-snap-align:start}
  .method-card h3{font-size:2rem;margin-top:46px}
  .method-card p{font-size:.94rem;line-height:1.72}

  /* Featured: editorial carousel rather than a giant stacked list */
  .featured{padding:70px 0 62px}
  .featured .section-head{display:block;margin-bottom:28px}
  .featured .section-title{font-size:clamp(3.3rem,15vw,5rem);line-height:.86;margin-top:10px}
  .featured .btn-ghost{margin-top:24px;min-height:46px;padding:0 16px;width:auto!important}
  .featured-grid{display:flex!important;grid-template-columns:none!important;grid-template-rows:none!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding:0 1px 12px;scrollbar-width:none}
  .featured-grid::-webkit-scrollbar{display:none}
  .work-card,.work-card:first-child{flex:0 0 86%;height:470px;min-height:470px;grid-row:auto!important;scroll-snap-align:start;border-radius:20px}
  .work-card:first-child .work-card-content,.work-card-content{padding:24px}
  .work-card:first-child h3,.work-card h3{font-size:2.35rem;line-height:.96;max-width:92%;padding-right:30px}
  .work-card .arrow{width:44px;height:44px}

  /* Production: deliberate two-screen chapter treatment */
  .production-split{display:block;min-height:0}
  .production-panel{min-height:560px;padding:34px 24px}
  .production-panel:first-child{border-right:0;border-bottom:1px solid rgba(255,255,255,.12)}
  .production-panel h2{font-size:clamp(3.7rem,16vw,5rem);line-height:.86}
  .production-panel .big-number{font-size:4.8rem}
  .production-panel p{font-size:1rem;line-height:1.65;max-width:94%}
  .production-panel .btn{width:auto;max-width:100%;font-size:.7rem;padding:0 15px}

  /* Academic: copy first, cropped graduation portrait second */
  .academic-teaser{padding:64px 0}
  .academic-teaser-grid{display:block;border-radius:22px}
  .academic-copy{padding:36px 28px 32px}
  .academic-copy h2{font-size:clamp(3.2rem,14vw,4.8rem);line-height:.92}
  .academic-score{font-size:5rem;margin:20px 0 16px}
  .academic-copy p{font-size:1rem;line-height:1.72}
  .academic-copy .btn{width:100%;min-height:54px;white-space:normal;text-align:center}
  .academic-img{height:500px;min-height:0}
  .academic-img img{object-position:78% center;transform:scale(1.08)}

  .awards-row{grid-template-columns:1fr;gap:12px}
  .cta-band-wrap{display:block;padding:34px 0}
  .cta-band .btn{margin-top:20px}
}

@media (max-width:520px){
  :root{--mobile-gutter:20px}
  .brand-name{font-size:1.16rem}
  .brand-role{font-size:.52rem;letter-spacing:.13em}
  .menu-btn{width:46px;height:46px}
  .hero{min-height:740px}
  .hero-content{padding-top:146px}
  .hero h1{font-size:clamp(3.55rem,18vw,4.6rem);max-width:100%}
  .hero-copy{max-width:100%;font-size:.96rem}
  .hero .btn{width:100%}
  .signature-block h2{font-size:3.7rem}
  .method-card{flex-basis:88%}
  .work-card,.work-card:first-child{flex-basis:88%;height:450px;min-height:450px}
  .work-card:first-child h3,.work-card h3{font-size:2.05rem}
  .production-panel{min-height:520px}
  .production-panel h2{font-size:4rem}
  .academic-img{height:440px}
}

@media (prefers-reduced-motion:reduce){
  .method-card,.work-card img,.production-panel img{transition:none!important}
}