:root{
  --bg: #ffffff;
  --text: #0b0b0b;
  --muted: #6d6d6d;
  --accent: #000000;
  --border: #e9e9e9;
  --max-width: 1100px;
}
*{box-sizing:border-box}
html{min-height:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:hidden}
body{min-height:100%;margin:0;background:var(--bg);color:var(--text);font-family:Inter, "Helvetica Neue", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;overflow-x:hidden}
img{max-width:100%}
a{overflow-wrap:anywhere}
button,a{-webkit-tap-highlight-color:transparent}
.container{max-width:var(--max-width);margin:0 auto;padding:56px 28px}

/* Landing */
.landing-page{
  --landing-gutter:clamp(6px,1vw,14px);
  --display-font:Arial,sans-serif;
  font-family:Arial,sans-serif;
  overflow:hidden;
}
.landing{height:100vh;height:100dvh;padding:var(--landing-gutter);display:grid;place-items:center}
.landing-frame{width:100%;border:1px solid var(--text);background:var(--bg)}
.landing-page .name{margin:0;padding:clamp(24px,5vh,70px) clamp(8px,1.25vw,20px);font-family:Arial,sans-serif;font-size:clamp(72px,15.5vw,250px);font-weight:700;font-stretch:normal;line-height:.72;letter-spacing:-.055em;text-transform:uppercase;overflow:hidden}
.landing-page .name-word{display:block;white-space:nowrap;transition:transform .34s cubic-bezier(.65,0,.35,1),opacity .22s ease}
.landing-page .name-word:last-child{text-align:right;padding-right:.04em}
.landing-page .letter,.color-letter{display:inline-block;transition:color .2s ease}
.landing-page .letter:nth-of-type(6n + 1),.color-letter:nth-of-type(6n + 1){--letter-color:#168aad}
.landing-page .letter:nth-of-type(6n + 2),.color-letter:nth-of-type(6n + 2){--letter-color:#52b788}
.landing-page .letter:nth-of-type(6n + 3),.color-letter:nth-of-type(6n + 3){--letter-color:#f26b4a}
.landing-page .letter:nth-of-type(6n + 4),.color-letter:nth-of-type(6n + 4){--letter-color:#9b5de5}
.landing-page .letter:nth-of-type(6n + 5),.color-letter:nth-of-type(6n + 5){--letter-color:#e9a820}
.landing-page .letter:nth-of-type(6n),.color-letter:nth-of-type(6n){--letter-color:#ef476f}
.landing-page .letter:hover,.color-letter:hover{color:var(--letter-color)}
.site-header .brand{white-space:nowrap}
.nav-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--text)}
.nav-link{min-height:88px;padding:16px 18px;display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:14px;color:var(--text);text-decoration:none;text-transform:uppercase;transition:color .18s ease,background-color .18s ease,transform .32s cubic-bezier(.65,0,.35,1),opacity .22s ease}
.nav-link+.nav-link{border-left:1px solid var(--text)}
.nav-number{align-self:start;font-size:10px;line-height:1;letter-spacing:.1em}
.nav-label{font-size:clamp(14px,1.3vw,19px);font-weight:700;letter-spacing:.055em}
.nav-mark{font-size:16px;line-height:1;transition:transform .18s ease}
.nav-link:hover,.nav-link:focus-visible{color:var(--bg);background:var(--text)}
.nav-link:hover .nav-mark,.nav-link:focus-visible .nav-mark{transform:translate(3px,-3px)}
.nav-link:focus-visible{outline:3px solid var(--text);outline-offset:4px;position:relative;z-index:1}
.landing-page.is-leaving .nav-link:not(.is-selected){opacity:0;transform:translateY(22px)}
.landing-page.is-leaving .nav-link.is-selected{color:var(--bg);background:var(--text)}
.landing-page.is-leaving .name-word:first-child{transform:translateX(-3vw);opacity:0}
.landing-page.is-leaving .name-word:last-child{transform:translateX(3vw);opacity:0}
.landing-page.is-leaving .landing-frame{transition:opacity .12s ease .26s;opacity:0}
.byline{color:var(--muted);font-size:13px;margin-top:12px}

/* Common page layout */
.page{min-height:100vh;padding:72px 28px}
.section-page .section-header.container{max-width:none;margin:clamp(6px,1vw,14px);padding:0;border:1px solid var(--text)}
.section-page .section-header>div{min-height:clamp(92px,14vw,180px);padding:clamp(12px,2vw,28px);display:flex;flex-wrap:wrap;align-items:flex-end!important;column-gap:28px;row-gap:18px}
.section-page .section-header .brand{font-family:Arial,sans-serif;font-size:clamp(42px,8.5vw,132px);font-weight:700;line-height:.78;letter-spacing:-.055em;text-transform:uppercase}
.section-page .section-header .top-nav{display:flex;flex:0 1 auto;max-width:100%;gap:0;border:1px solid var(--text);margin-left:auto}
.section-page .section-header .top-nav a{min-width:0;padding:10px 13px;white-space:nowrap;text-decoration:none;color:var(--text);font-family:Arial,sans-serif;font-size:11px;font-weight:700;letter-spacing:.055em;text-transform:uppercase;transition:color .18s ease,background-color .18s ease}
.top-nav a+a{border-left:1px solid var(--text)}
.top-nav a:hover,.top-nav a:focus-visible{color:var(--bg);background:var(--text)}
.top-nav a:focus-visible{outline:3px solid var(--text);outline-offset:3px}

/* Compact header used by individual case-study pages */
.site-header:not(.section-header)>div{display:flex;justify-content:space-between;align-items:center;gap:24px}
.site-header:not(.section-header) .brand{font-family:Arial,sans-serif;font-size:clamp(24px,4vw,42px);font-weight:700;letter-spacing:-.04em;text-transform:uppercase}
.site-header:not(.section-header) .top-nav{display:flex;border:1px solid var(--text);margin-left:auto}
.site-header:not(.section-header) .top-nav a{padding:10px 14px;color:var(--text);font:700 11px/1 Arial,sans-serif;letter-spacing:.055em;text-decoration:none;text-transform:uppercase}
.hero-media img{display:block}
.page article{line-height:1.6}

/* Projects */
.projects{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:34px}
.project{border-left:4px solid var(--accent);padding:18px;background:#fff}
.project img{width:100%;height:auto;display:block;border:1px solid var(--border)}
.project h3{font-size:18px;margin:12px 0 6px}

/* Case study full-width layout */
.case-study{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start;margin-bottom:56px}
.case-study .case-media{width:100%;height:100%;display:block;position:relative}
/* clean fit: images fill container without bleed */
.case-study .case-media img{width:100%;height:auto;object-fit:contain;display:block;border:1px solid var(--border)}
.case-study.reverse .case-media img{transform:none}
.case-study .case-content{padding:6px 0}
.case-study .case-content h2{margin:0 0 8px;font-size:22px}
.case-study .case-content p{font-size:15px;color:var(--text);line-height:1.6}

@media (max-width:900px){
  .case-study{grid-template-columns:1fr;gap:18px}
  .case-study .case-media img{width:100%;transform:none;height:auto}
}

/* Alternate layout: flip media/content */
.case-study.reverse{direction:ltr}
.case-study.reverse .case-media{order:2}
.case-study.reverse .case-content{order:1}

/* Professional editorial index */
.professional-page .page{max-width:none;padding:clamp(44px,7vw,100px) clamp(6px,1vw,14px)}
.professional-page .page>h1,.collage-page .page>h1{margin:0 0 10px;font-family:Arial,sans-serif;font-size:clamp(48px,8vw,120px);font-weight:700;line-height:.84;letter-spacing:-.06em;text-transform:uppercase}
.collage-page .page>h1{white-space:nowrap}
.image-letter{display:inline-block;background-color:var(--letter-backdrop,#168aad);background-position:center;background-size:cover;background-blend-mode:multiply;background-clip:text;-webkit-background-clip:text;transition:color .2s ease}
.image-letter:hover{color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke:1px rgba(0,0,0,.18)}
.professional-page .page>.byline{max-width:680px;margin:0 0 clamp(38px,6vw,80px);font-size:14px;line-height:1.5}
.professional-page .page>section{counter-reset:project-index}
.professional-page .case-study{counter-increment:project-index;position:relative;grid-template-columns:1fr;gap:0;margin:0 0 clamp(18px,3vw,42px);border:1px solid var(--text);background:var(--bg)}
.professional-page .case-study:nth-child(even){margin-left:clamp(0px,5vw,76px)}
.professional-page .case-study:nth-child(odd){margin-right:clamp(0px,5vw,76px)}
.professional-page .case-study::before{content:none}
.professional-page .case-media{min-height:0;border:0;border-bottom:1px solid var(--text);overflow:hidden;display:block;background:var(--bg)}
.professional-page .case-media a{display:block;width:100%}
.professional-page .case-study .case-media img{width:100%;height:auto;min-height:0;object-fit:contain;border:0;vertical-align:middle}
.professional-page .case-content{padding:clamp(26px,4vw,62px)!important;display:flex;flex-direction:column;justify-content:center;min-height:clamp(340px,42vw,620px)}
.professional-page .case-content::before{content:"0" counter(project-index);align-self:flex-end;order:-1;margin:0 0 clamp(22px,3vw,38px);font:700 11px/1 Arial,sans-serif;letter-spacing:.08em}
.professional-page .case-content h2{max-width:8ch;margin:0 0 clamp(22px,3vw,38px);font-family:Arial,sans-serif;font-size:clamp(42px,5.5vw,84px);font-weight:700;line-height:.84;letter-spacing:-.06em;text-transform:uppercase}
.professional-page .case-meta{padding-top:10px;border-top:1px solid var(--text);font:700 10px/1.5 Arial,sans-serif;letter-spacing:.045em;text-transform:uppercase}
.professional-page .case-content p{font-size:14px;line-height:1.55}
.professional-page .case-quote{margin:20px 0;padding:16px 0;border-top:1px solid var(--text);border-bottom:1px solid var(--text);border-left:0;font-family:Arial,sans-serif;font-size:clamp(20px,2vw,28px);font-weight:700;line-height:1.08;letter-spacing:-.025em}
.professional-page .case-badges{margin-top:18px;gap:6px;border:0;align-self:flex-start}
.professional-page .badge{padding:7px 9px;border:1px solid var(--text);font:700 9px/1 Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--text)}
.professional-page .case-study:nth-child(odd) .case-media{order:1}
.professional-page .case-study:nth-child(odd) .case-content{order:2}
.professional-page .case-study:nth-child(even) .case-content{order:1}
.professional-page .case-study:nth-child(even) .case-media{order:2;border-top:1px solid var(--text);border-bottom:0}
.professional-page .case-study.reverse .case-media{border-left:0}
.professional-page .compact-case{display:grid;grid-template-columns:1fr 1fr}
.professional-page .compact-case .case-media{width:100%;height:auto;min-height:0;align-self:start;margin:0}
.professional-page .compact-case .case-content{display:flex;min-height:0;padding:clamp(18px,2.25vw,34px)!important}
.professional-page .compact-case .case-content h2{font-size:clamp(34px,4vw,60px);margin-bottom:clamp(14px,1.8vw,24px)}
.professional-page .compact-case .case-content p{margin:8px 0;font-size:13px}
.professional-page .compact-case .case-quote{margin:12px 0;padding:10px 0;font-size:clamp(17px,1.7vw,24px)}
.professional-page .compact-case .case-badges{margin-top:10px}
.professional-page .media-left .case-media{grid-column:1;grid-row:1;order:1;border:0;border-right:1px solid var(--text)}
.professional-page .media-left .case-content{grid-column:2;grid-row:1;order:2}
.professional-page .media-right .case-media{grid-column:2;grid-row:1;order:2;border:0;border-left:1px solid var(--text)}
.professional-page .media-right .case-content{grid-column:1;grid-row:1;order:1}
.professional-page .stacked-case .case-media{order:1;border-top:0;border-bottom:1px solid var(--text)}
.professional-page .stacked-case .case-content{order:2}
.professional-page .republic-case{grid-template-columns:minmax(0,1.32fr) minmax(280px,.68fr)}
.professional-page .republic-case .case-content{order:1}
.professional-page .republic-case .case-media{order:2}
.professional-page .case-study.republic-case .case-media{border:0;border-left:1px solid var(--text)}
.professional-page .republic-case .case-media img{margin-top:-2px}
.professional-page .text-case .case-content{min-height:0}
.professional-page .text-case .case-content>p,
.professional-page .text-case .case-meta,
.professional-page .text-case .case-quote{max-width:900px}
.professional-page .playlist-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:22px 0 10px}
.professional-page .playlist-card{display:block;border:1px solid var(--text);color:var(--text);text-decoration:none;transition:background-color .18s ease,color .18s ease}
.professional-page .playlist-card img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-bottom:1px solid var(--text)}
.professional-page .playlist-card>span{display:block;padding:11px 12px;font-family:Arial,sans-serif;text-transform:uppercase}
.professional-page .playlist-card strong{display:block;font-size:12px;letter-spacing:.04em}
.professional-page .playlist-card small{display:block;margin-top:4px;font-size:9px;font-weight:700;letter-spacing:.05em}
.professional-page .playlist-card:hover,.professional-page .playlist-card:focus-visible{background:var(--text);color:var(--bg)}
.professional-page .playlist-card:focus-visible{outline:3px solid var(--text);outline-offset:3px}

@media (max-width:900px){
  .professional-page .case-study{grid-template-columns:1fr;gap:0;margin-left:0;margin-right:0}
  .professional-page .case-content{min-height:0}
  .professional-page .compact-case{display:grid;grid-template-columns:1fr}
  .professional-page .compact-case .case-media{grid-column:1;grid-row:1;order:1;width:100%;margin:0;border:0;border-bottom:1px solid var(--text)}
  .professional-page .compact-case .case-content{grid-column:1;grid-row:2;order:2}
  .professional-page .case-study .case-media img{min-height:0;height:auto;max-height:none;object-fit:contain}
  .professional-page .republic-case{grid-template-columns:1fr}
  .professional-page .case-study.republic-case .case-media{border:0;border-bottom:1px solid var(--text)}
  .professional-page .playlist-grid{grid-template-columns:1fr}
}

.case-meta{font-size:13px;color:var(--muted);margin-bottom:12px}
.case-quote{font-family:Georgia, 'Times New Roman', serif;font-size:20px;color:var(--text);border-left:3px solid var(--accent);padding-left:14px;margin:18px 0;background:#fafafa}
.case-badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.badge{font-size:12px;border:1px solid var(--border);padding:6px 8px;color:var(--muted)}

/* image caption overlay */
.media-caption{font-size:12px;color:#fff;background:rgba(0,0,0,0.45);padding:8px 10px;position:absolute;left:12px;bottom:12px;display:inline-block}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(12px);will-change:opacity,transform}
.reveal.in{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.2,.9,.2,1),transform .6s cubic-bezier(.2,.9,.2,1)}
.reveal .case-media img, .reveal .case-content > *{transition:opacity .45s ease,transform .45s ease}
.case-content .stagger-1{transition-delay:.06s}
.case-content .stagger-2{transition-delay:.12s}
.case-content .stagger-3{transition-delay:.18s}

/* refined quote */
.case-quote{font-family:Georgia, 'Times New Roman', serif;font-size:18px;color:var(--text);border-left:3px solid var(--accent);padding-left:12px;margin:14px 0;background:transparent}

.meta{color:var(--muted);font-size:13px}
.project p{color:var(--text);font-size:15px}

/* Collage gallery */
.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,60px)}
.piece{margin:0;border:0;padding:0;background:transparent}
.piece--landscape{grid-column:span 2}
.piece img{width:100%;height:auto;display:block}
.piece .meta{margin-top:12px;font-family:Arial,sans-serif;font-size:12px;line-height:1.45;letter-spacing:.035em}
.collage-title{display:block;color:var(--text);font-size:13px;font-weight:700;text-transform:uppercase}
.collage-detail{display:block;color:var(--muted);font-weight:400}

/* Lightbox */
.lightbox{display:none;position:fixed;inset:0;background:rgba(10,10,10,0.9);z-index:999;align-items:center;justify-content:center;padding:24px}
.lightbox.open{display:flex}
.lightbox img{max-width:calc(100% - 80px);max-height:calc(100% - 80px);box-shadow:0 18px 40px rgba(0,0,0,0.6)}
.lightbox .lightbox-close{position:absolute;top:22px;right:22px;background:transparent;border:1px solid rgba(255,255,255,0.6);color:#fff;padding:6px 8px;cursor:pointer}

/* About */
.about-grid{max-width:720px}

/* Subtle transitions */
.nav-link, .top-nav a, .project{transition:all .18s ease}

/* small gallery button styles */
.js-open{width:100%;background:none;border:0;padding:0;cursor:pointer}
.js-open img{display:block}

/* Responsive tweaks */
@media (max-width:640px){
  .container{padding:28px 16px}
  .page{min-height:0;padding-top:38px;padding-bottom:56px}
  .section-page .section-header.container{padding:0;margin:6px}
  .section-page .section-header>div{min-height:0;padding:14px;display:block!important}
  .section-page .section-header .brand{font-size:clamp(36px,12vw,58px);line-height:.84;margin-bottom:16px}
  .section-page .section-header .top-nav{width:100%}
  .section-page .section-header .top-nav a{display:flex;flex:1;min-height:44px;padding:8px 5px;align-items:center;justify-content:center;text-align:center;font-size:10px}
  .landing-page{overflow:auto}
  .landing{min-height:100vh;min-height:100svh;height:auto;padding:6px}
  .landing-page .name{font-size:clamp(54px,23vw,104px);line-height:.78;padding:clamp(24px,6vh,52px) 7px}
  .nav-grid{grid-template-columns:1fr}
  .nav-link{min-height:64px;padding:12px 14px;align-items:center}
  .nav-link+.nav-link{border-left:0;border-top:1px solid var(--text)}
  .professional-page .page,.collage-page .page{padding:38px 10px 60px}
  .professional-page .page>h1,.collage-page .page>h1{font-size:clamp(42px,15vw,68px);white-space:normal;overflow-wrap:normal}
  .professional-page .page>.byline{margin-bottom:32px}
  .professional-page .case-content{padding:24px 18px!important}
  .professional-page .compact-case .case-content{padding:24px 18px!important}
  .professional-page .case-content h2,.professional-page .compact-case .case-content h2{max-width:100%;font-size:clamp(34px,12vw,52px);overflow-wrap:anywhere}
  .professional-page .case-meta{font-size:9px;line-height:1.65;overflow-wrap:anywhere}
  .professional-page .case-content p{font-size:15px}
  .professional-page .playlist-grid{margin-top:18px}
  .professional-page .case-badges{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:1px;border:1px solid var(--text);background:var(--text)}
  .professional-page .case-badges .badge{display:flex;min-height:46px;padding:8px;align-items:center;justify-content:center;border:0;background:var(--bg);text-align:center;line-height:1.25}
  .projects{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr;gap:34px}
  .piece--landscape{grid-column:auto}
  .piece .meta{margin-top:9px}
  .js-open{touch-action:manipulation}
  .lightbox{padding:54px 12px 12px}
  .lightbox img{max-width:100%;max-height:calc(100dvh - 78px);object-fit:contain}
  .lightbox .lightbox-close{top:10px;right:10px;min-width:44px;min-height:44px;font-size:18px}
  .about-grid table{table-layout:fixed;font-size:14px}
  .about-grid td{overflow-wrap:anywhere}
  .site-header:not(.section-header){padding-top:18px;padding-bottom:18px}
  .site-header:not(.section-header)>div{gap:12px;align-items:flex-start;flex-direction:column}
  .site-header:not(.section-header) .brand{font-size:30px}
  .site-header:not(.section-header) .top-nav{width:100%;margin-left:0}
  .site-header:not(.section-header) .top-nav a{display:flex;flex:1;min-height:44px;align-items:center;justify-content:center}
  body:not(.section-page):not(.landing-page) .page{padding-top:10px}
  body:not(.section-page):not(.landing-page) .page h1{font-size:clamp(36px,12vw,52px);line-height:1;overflow-wrap:anywhere}
  body:not(.section-page):not(.landing-page) .hero-media{height:auto!important;overflow:visible}
  body:not(.section-page):not(.landing-page) .hero-media img{width:100%!important;height:auto!important;transform:none!important}
}

@media (max-width:380px){
  .section-page .section-header .top-nav{flex-wrap:wrap}
  .section-page .section-header .top-nav a{flex-basis:100%}
  .section-page .top-nav a+a{border-left:0;border-top:1px solid var(--text)}
  .landing-page .name{font-size:22vw}
  .professional-page .case-badges{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}