/* Layout (after Studio Bright): split vertical wordmark pinned to both edges, one small serif size for everything,
   hierarchy from whitespace and grey only. Images carry the page. Single light look by choice. */
:root{
  --ground:#E3E2DD;     /* logo grey */
  --ink:#1F1E1B;        /* text */
  --brand:#DB4A2B;      /* logo orange, wordmark only */
  --grey:#6B6862;       /* category labels, secondary links */
  --rule:#CCCAC3;       /* hairline */
  --stone:#CBC8C0;      /* image placeholder */
  --white:#FFFFFF;
  --mark:"Poppins", "Helvetica Neue", Arial, sans-serif;
  --serif:"Source Serif 4", "Iowan Old Style", Georgia, serif;
  --s:0.9375rem;        /* the one text size */
  --s-lg:1.3rem;        /* hero line, statements */
  --edge:56px;          /* side clearance for the vertical wordmark */
  color-scheme:light;
}
@media (max-width:640px){:root{--edge:46px}}
*{box-sizing:border-box}
body{background:var(--ground);color:var(--ink);font-family:var(--serif);font-size:var(--s);font-weight:300;line-height:1.55;letter-spacing:.02em;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;letter-spacing:inherit}
a:focus-visible,button:focus-visible{outline:1px solid currentColor;outline-offset:4px}
h1,h2,h3{font-weight:400;font-size:var(--s);margin:0}
.grey{color:var(--grey)}
.wrap{padding-left:max(var(--edge), env(safe-area-inset-left, 0px));padding-right:max(var(--edge), env(safe-area-inset-right, 0px))}

/* vertical split wordmark */
.wm{position:fixed;top:50%;z-index:25;font-family:var(--mark);font-weight:400;font-size:clamp(1.05rem,1.8vw,1.45rem);letter-spacing:-.01em;text-transform:none;writing-mode:vertical-rl;white-space:nowrap;line-height:1;transition:color .35s;color:var(--brand)}
.wm-l{left:max(12px, env(safe-area-inset-left, 0px));transform:translateY(-50%) rotate(180deg)}
.wm-r{right:max(12px, env(safe-area-inset-right, 0px));transform:translateY(-50%);font-style:italic}
body.over-image .wm{color:var(--white)}
.wm:hover{opacity:.7}

/* top bar */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--ground)}
.bar{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding-block:18px;transition:background .35s,color .35s}
.bar.solid{background:var(--ground)}
body.over-image .bar{color:var(--white);background:transparent}
.bar .l{justify-self:start}
.bar .c{justify-self:center;text-align:center}
.bar .r{justify-self:end}
.burger{width:30px;height:18px;display:grid;align-content:space-between}
.burger i{display:block;height:1px;background:currentColor}
.back{font-size:1.4rem;line-height:1;font-weight:300}

/* menu overlay */
.menu{position:fixed;inset:0;z-index:40;background:var(--ground);display:flex;flex-direction:column;justify-content:center;gap:10px;opacity:0;pointer-events:none;transition:opacity .35s}
.menu.open{opacity:1;pointer-events:auto}
.menu a{font-size:clamp(1.8rem,5vw,2.8rem);font-weight:300;letter-spacing:0;width:max-content}
.menu a:hover{color:var(--grey)}
.menu .close{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:max(var(--edge), env(safe-area-inset-right, 0px));font-size:1.6rem;font-weight:300}
.menu .info{margin-top:40px;color:var(--grey);font-size:var(--s)}

/* placeholders: the real file covers the label once images/ is published */
.ph{position:relative;background:var(--stone);overflow:hidden;max-width:100%}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ph .fn{position:absolute;left:10px;bottom:8px;font-family:var(--mark);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(31,30,27,.5)}

@media (prefers-reduced-motion:reduce){.slide{transition:none!important}}

/* home hero */
.hero{position:relative;height:100svh;min-height:480px;overflow:hidden;background:#2a2925}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1.6s ease}
.slide.on{opacity:1}
.slide .ph{position:absolute;inset:0}
.slide .ph::after{content:"";position:absolute;inset:0;background:rgba(20,19,16,.18)}
.tagline{position:absolute;inset:0;display:grid;place-items:center;z-index:2;color:var(--white);text-align:center;padding-inline:var(--edge);pointer-events:none}
.tagline p{font-size:var(--s-lg);font-weight:400;margin:0;text-wrap:balance}
.hero-cap{position:absolute;left:max(var(--edge), env(safe-area-inset-left, 0px));bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:3;color:var(--white)}
.hero-cap a:hover{opacity:.75}
.pi{margin:0;background:var(--stone);min-width:0}
.pi img{display:block;width:100%;height:auto}
.pi.land{flex:0 0 100%}
.pi.port{flex:0 0 calc(50% - 12px)}
@media (max-width:640px){.pi.port{flex-basis:100%}}
.p-imgs .tall{width:min(100%,640px);aspect-ratio:3/4;margin-inline:auto}
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:32px 24px}
.person{display:grid;gap:10px;align-content:start}
.person .ph{aspect-ratio:4/5}
.studio-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:56px}
.studio-pair .ph{aspect-ratio:4/5}
.down{position:absolute;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:2;color:var(--white);font-size:1.6rem;font-weight:300;line-height:1}
.statement{padding-block:72px 8px;max-width:calc(46ch + 2 * var(--edge))}
.statement p{margin:0;font-size:var(--s)}

/* filter + grid */
.filters{display:flex;flex-wrap:wrap;gap:6px 22px;padding-block:28px 0}
.filters button{color:var(--grey)}
.filters button[aria-pressed="true"],.filters button:hover{color:var(--ink)}
.filters[hidden]{display:none}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr));gap:48px 32px;padding-block:32px 40px}
.card{display:grid;gap:12px;align-content:start}
.card .ph{aspect-ratio:4/3;transition:opacity .3s}
.card:hover .ph{opacity:.85}
.card .cap{display:grid;gap:2px}
.more{display:block;margin:0 auto 96px;color:var(--grey)}
.more:hover{color:var(--ink)}
.empty{color:var(--grey);padding-block:32px}

/* project page */
.p-imgs{display:flex;flex-wrap:wrap;justify-content:center;gap:24px;padding-top:calc(64px + env(safe-area-inset-top,0px))}
.p-imgs .ph{width:100%}
.p-imgs .full{aspect-ratio:3/2}
.p-imgs .pair{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.p-imgs .pair .ph{aspect-ratio:4/5}
@media (max-width:640px){.p-imgs .pair{grid-template-columns:1fr}}
.p-text{display:grid;gap:32px 48px;padding-block:56px 72px}
@media (min-width:860px){.p-text{grid-template-columns:minmax(220px,1fr) 2fr}}
.p-text>*{min-width:0}
.facts{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 20px;align-content:start}
.facts dt{color:var(--grey)}
.facts dd{margin:0}
.desc{max-width:60ch}
.desc h1{margin-bottom:1.2em}
.desc p{margin:0 0 1em}
.credits{margin-top:2em;display:grid;grid-template-columns:auto 1fr;gap:4px 20px}
.credits dt{color:var(--grey)}
.credits dd{margin:0}
.share{margin-top:2em;color:var(--grey)}
.related{border-top:1px solid var(--rule);padding-block:28px 96px}
.related .grid{padding-block:24px 0}

/* studio */
.studio{padding-top:calc(96px + env(safe-area-inset-top,0px));padding-bottom:96px}
.anchors{display:flex;flex-wrap:wrap;gap:6px 22px;margin-bottom:56px}
.anchors button{color:var(--grey)}
.anchors button:hover{color:var(--ink)}
.sec{display:grid;gap:24px 48px;padding-block:28px 64px;border-top:1px solid var(--rule);scroll-margin-top:80px}
@media (min-width:860px){.sec{grid-template-columns:minmax(220px,1fr) 2fr}}
.sec>*{min-width:0}
.lead{font-size:var(--s-lg);line-height:1.4;max-width:34ch;margin:0 0 1em;text-wrap:balance}
.prose{max-width:60ch}
.prose p{margin:0 0 1em}
.list{list-style:none;margin:0;padding:0}
.list li{display:grid;grid-template-columns:1fr auto;gap:4px 24px;padding-block:12px;border-bottom:1px solid var(--rule)}
.list li:first-child{border-top:1px solid var(--rule)}
.list li span:last-child{color:var(--grey);text-align:right}
@media (max-width:560px){.list li{grid-template-columns:1fr}.list li span:last-child{text-align:left}}
.svc h3{margin:1.6em 0 .6em}
.svc h3:first-child{margin-top:0}
.contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:28px 40px}
.contact p{margin:0}
.tbc{background:rgba(255,255,255,.55);padding:0 .2em}
.copy{color:var(--grey);margin-left:8px;font-size:.8rem}
.studio-img{aspect-ratio:3/2;width:100%;margin-bottom:56px}

/* footer */
.ftr{border-top:1px solid var(--rule);padding-block:32px calc(36px + env(safe-area-inset-bottom,0px));display:grid;gap:24px 40px;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.ftr p{margin:0}
.ftr .ack{grid-column:1/-1;color:var(--grey);max-width:72ch;font-size:.8rem}
.ftr .copy-r{grid-column:1/-1;color:var(--grey);font-size:.8rem}

main{display:block}
.page-top{padding-top:calc(56px + env(safe-area-inset-top,0px))}
.card[hidden]{display:none}
.err{min-height:70vh;display:grid;place-content:center;gap:12px;text-align:center}