/* Krause Architects — site styles
   Typography and palette carried over from the approved prototype:
   Source Sans 3, warm near-black on white, hairline rules, generous white space. */

:root{
  --ink:#1c1a18;
  --ink-soft:#6e6963;
  --hairline:#e6e3df;
  --paper:#fff;
  --wash:#f3f1ee;
  --max:1380px;
  --pad:clamp(20px,4vw,56px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Source Sans 3',system-ui,-apple-system,Segoe UI,sans-serif;
  font-weight:400;color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;line-height:1.55;
}
img{display:block;width:100%;height:auto}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{transition:none!important;opacity:1!important;transform:none!important}
}

/* ---------- header ---------- */
header{
  position:fixed;inset:0 0 auto 0;z-index:50;display:flex;
  justify-content:space-between;align-items:flex-start;
  padding:26px var(--pad);
  transition:background .35s,box-shadow .35s,color .35s;
}
header.scrolled{background:rgba(255,255,255,.96);backdrop-filter:blur(6px);box-shadow:0 1px 0 var(--hairline)}
/* over the full-bleed hero the header sits on the photograph, so it goes white
   until the page scrolls past it */
body.has-hero header{color:#fff}
body.has-hero header.scrolled{color:var(--ink)}
.wordmark{font-size:clamp(22px,2.4vw,30px);font-weight:400;letter-spacing:.02em;line-height:1.08;text-transform:uppercase}
.wordmark span{display:block;font-weight:400;letter-spacing:.02em}
nav{display:flex;gap:clamp(18px,2.6vw,44px);padding-top:5px}
nav a{font-size:13px;letter-spacing:.22em;text-transform:uppercase;font-weight:400;position:relative;padding-bottom:4px}
nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:currentColor;transition:width .3s}
nav a:hover::after,nav a[aria-current]::after{width:100%}
.nav-toggle{display:none}

/* ---------- shared ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.eyebrow{font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:26px}
section{padding:clamp(72px,9vw,130px) 0}
.rule{border-top:1px solid var(--hairline)}
.page-head{padding:calc(96px + clamp(40px,7vw,90px)) 0 clamp(34px,4.5vw,56px)}
.page-head h1{font-size:clamp(30px,4vw,52px);font-weight:300;letter-spacing:.01em}
.page-head .pd{margin-top:18px;max-width:46em;color:var(--ink-soft);font-size:clamp(15px,1.25vw,17px)}

/* ---------- home hero ---------- */
/* full bleed, edge to edge and the full height of the screen */
.hero{position:relative;height:100svh;min-height:560px;background:var(--wash);padding:0}
.hero-inner{position:relative;width:100%;height:100%}
.hero img{width:100%;height:100%;object-fit:cover;object-position:center 55%}
/* a soft scrim at the top so the white wordmark and nav stay readable
   whatever photograph is used */
.hero-inner::before{
  content:"";position:absolute;inset:0 0 auto 0;height:220px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.38),rgba(0,0,0,0));
}
/* white on photography — the shadow keeps both legible over a light image */
.hero figcaption,.hero .scroll-cue{
  position:absolute;bottom:26px;color:#fff;font-size:12px;text-transform:uppercase;
  opacity:.9;text-shadow:0 1px 4px rgba(0,0,0,.55);
}
.hero figcaption{right:var(--pad);letter-spacing:.14em}
.hero .scroll-cue{left:var(--pad);letter-spacing:.22em}


/* ---------- home selected-work grid ---------- */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(20px,3vw,44px) clamp(18px,2.6vw,40px)}
.frame{overflow:hidden;background:var(--wash)}
.project img{transition:transform .8s cubic-bezier(.2,.6,.2,1)}
.project:hover img{transform:scale(1.025)}
.cap{display:flex;justify-content:space-between;gap:16px;margin-top:12px;font-size:13px}
.cap .t{font-weight:600;letter-spacing:.02em}
.cap .s{color:var(--ink-soft);letter-spacing:.06em;text-transform:uppercase;font-size:11.5px;padding-top:2px;white-space:nowrap}
.span-7{grid-column:span 7}.span-5{grid-column:span 5}.span-6{grid-column:span 6}
.span-4{grid-column:span 4}.span-8{grid-column:span 8}
.project.offset{padding-top:clamp(28px,5vw,90px)}
.all-link{display:inline-block;margin-top:clamp(40px,5vw,70px);font-size:13px;letter-spacing:.22em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:4px}

/* ---------- sectors / studio teaser ---------- */
.sectors .wrap{display:grid;grid-template-columns:minmax(220px,1fr) 2fr;gap:clamp(30px,5vw,90px)}
.sector-list{list-style:none;font-size:clamp(20px,2.4vw,32px);font-weight:300;line-height:1.9}
.sector-list li{border-bottom:1px solid var(--hairline);padding:6px 0}
.sector-list a{display:block}
.sector-list a:hover{color:var(--ink-soft)}
.studio-t .wrap{display:grid;grid-template-columns:5fr 6fr;gap:clamp(30px,5vw,90px);align-items:start}
.studio-t p{max-width:34em;font-size:clamp(15px,1.3vw,17.5px)}
.studio-t p+p{margin-top:1.2em}
.quiet{color:var(--ink-soft)}
.cap-s{margin-top:10px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.text-link{border-bottom:1px solid var(--ink);font-size:13px;letter-spacing:.22em;text-transform:uppercase;padding-bottom:4px}

/* ---------- work index ---------- */
.filters{display:flex;flex-wrap:wrap;gap:8px 22px;margin-bottom:clamp(30px,4vw,50px)}
.filters button{
  background:none;border:none;cursor:pointer;font-family:inherit;font-size:12.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);
  padding:6px 0;border-bottom:1px solid transparent;
}
.filters button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--ink)}
/* Twelve projects lead, shown large; the rest follow as an index. Both react
   to the sector filter, so a filtered view still reads as one list. */
.lgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,3.6vw,56px) clamp(18px,2.6vw,40px)}
.lgrid .frame{aspect-ratio:5/4}
.lgrid .frame img{width:100%;height:100%;object-fit:cover}
.lgrid .cap{font-size:14.5px}
.lgrid .cap .s{text-transform:none;letter-spacing:0;font-size:13.5px;color:var(--ink-soft);
               font-weight:400;padding-top:0}
.lgrid .project.hide{display:none}

.also{margin-top:clamp(56px,7vw,100px)}
.also .eyebrow{margin-bottom:14px}
.ilist{list-style:none;border-top:1px solid var(--hairline)}
.ilist li{border-bottom:1px solid var(--hairline)}
.ilist li.hide{display:none}
.ilist a{display:grid;grid-template-columns:1.5fr 1fr auto;gap:16px;align-items:baseline;
         padding:13px 0;font-size:15px}
.ilist a:hover .it{color:var(--ink-soft)}
.ilist .it{font-weight:600}
.ilist .il{color:var(--ink-soft)}
.ilist .iy{color:var(--ink-soft);font-variant-numeric:tabular-nums;font-size:13.5px}

.empty-note{color:var(--ink-soft);font-size:15px;padding:20px 0}

/* ---------- project page ---------- */
.proj-top{padding-top:calc(26px + 32px + 2.2em)}
.proj-back{
  display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;padding:0 var(--pad) clamp(30px,4vw,50px);
}
.proj-back::before{content:"←";font-size:16px}
.proj-title-block{padding:0 var(--pad) clamp(40px,5vw,60px)}
.proj-title-block .inner{
  display:grid;grid-template-columns:3fr 1fr;gap:clamp(30px,5vw,80px);
  align-items:start;max-width:var(--max);margin:0 auto;
}
.proj-title-block h1{font-size:clamp(28px,3.5vw,52px);font-weight:300;letter-spacing:.01em;margin-bottom:8px}
.proj-sub-line{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:28px}
.proj-desc{font-size:clamp(15px,1.3vw,17.5px);max-width:38em;line-height:1.7}
.proj-desc p+p{margin-top:1.15em}
.proj-facts{list-style:none;font-size:14px;border-top:1px solid var(--hairline)}
.proj-facts li{padding:9px 0;border-bottom:1px solid var(--hairline);display:flex;justify-content:space-between;gap:16px}
.proj-facts .lbl{color:var(--ink-soft);letter-spacing:.1em;text-transform:uppercase;font-size:11.5px;padding-top:2px;white-space:nowrap}
.proj-facts .val{text-align:right}

/* story gallery — the same twelve-column grid as the selected work on the home
   page. A pair sitting side by side is always one gutter apart; the variety
   comes from column spans, which edge the slack falls on, and the drop on
   alternating tiles. Images are never cropped.
   Note: no margin shorthands in here. An earlier `margin:0 auto` on a centred
   tile silently cancelled the bottom margin and made two images touch. */
.proj-story{
  margin:clamp(40px,5vw,70px) auto 0;
  max-width:calc(var(--max) + 2 * var(--pad));
  padding:0 var(--pad);
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(48px,6vw,96px) clamp(20px,2.6vw,40px);
  align-items:start;
}
.ps{grid-column:1 / span 12;min-width:0}
.ps.offset{padding-top:clamp(28px,5vw,90px)}
.proj-story img,
.proj-story video{width:100%;height:auto;display:block;background:var(--wash)}
.proj-story img{cursor:zoom-in}
.proj-story video{background:#000}

/* Plans and sections, gathered at the foot of the page under a quiet heading
   rather than interrupting the photographs. A visitor reads the page for the
   building; an architect or a planning officer reads it for the drawings. */
.dband{max-width:var(--max);margin:clamp(64px,8vw,112px) auto 0;padding:0 var(--pad)}
.dband h2{
  font-size:12px;letter-spacing:.26em;text-transform:uppercase;font-weight:400;
  color:var(--ink-soft);padding-bottom:14px;border-bottom:1px solid var(--hairline);
}
.dband + .proj-story{margin-top:clamp(28px,3vw,44px)}

.proj-credits{
  max-width:var(--max);margin:clamp(60px,7vw,100px) auto 0;padding:0 var(--pad);
}
.proj-credits dl{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:22px clamp(24px,4vw,60px);border-top:1px solid var(--hairline);padding-top:26px;
}
.proj-credits dt{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:5px}
.proj-credits dd{font-size:15px}

.proj-nav-strip{
  border-top:1px solid var(--hairline);margin-top:clamp(60px,7vw,110px);
  padding:clamp(28px,4vw,50px) var(--pad);display:flex;justify-content:space-between;gap:20px;
}
.proj-nav-strip a{font-size:12.5px;letter-spacing:.18em;text-transform:uppercase}
.proj-nav-strip a:hover{border-bottom:1px solid var(--ink)}
.proj-nav-strip .spacer{flex:1}

/* ---------- studio ---------- */
.studio-intro{max-width:52em}
.studio-intro p{font-size:clamp(15px,1.25vw,17px)}
.studio-intro p+p{margin-top:1.1em}
.how{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(30px,4vw,60px) clamp(30px,4vw,70px)}
.how h3{font-size:13px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;margin-bottom:14px}
.how p{font-size:15px;max-width:36em}
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,3.4vw,48px)}
.team h3{font-size:clamp(19px,1.8vw,24px);font-weight:300}
.team .role{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);margin:6px 0 16px}
.team p{font-size:14.5px}
.glance{list-style:none;columns:2;column-gap:clamp(30px,4vw,70px);font-size:15px}
.glance li{padding:9px 0;border-bottom:1px solid var(--hairline);break-inside:avoid}

/* ---------- contact ---------- */
.contact-lead{font-size:clamp(24px,3vw,40px);font-weight:300;line-height:1.35;max-width:22em}
.cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:clamp(44px,6vw,80px)}
.cgrid h3{font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-soft);font-weight:400;margin-bottom:18px}
.cgrid p,.cgrid li{font-size:15px;line-height:1.85}
.cgrid ul{list-style:none}
.cgrid a:hover{border-bottom:1px solid var(--ink)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--hairline);padding:clamp(44px,5vw,70px) 0 36px;margin-top:clamp(40px,6vw,90px)}
footer .wordmark{font-size:15px;letter-spacing:.02em;line-height:1.08}
footer .wordmark span{font-size:15px;letter-spacing:.02em}
.legal{display:flex;justify-content:space-between;gap:20px;font-size:12px;color:var(--ink-soft);flex-wrap:wrap;margin-top:30px;padding-top:20px;border-top:1px solid var(--hairline)}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- lightbox ---------- */
.lb{display:none;position:fixed;inset:0;background:rgba(0,0,0,.93);z-index:200;align-items:center;justify-content:center}
.lb.open{display:flex}
.lb img{max-width:88vw;max-height:88vh;width:auto;height:auto}
.lb button{background:none;border:none;color:#fff;cursor:pointer;position:fixed;z-index:210}
.lb-close{top:14px;right:22px;font-size:30px;line-height:1}
.lb-prev,.lb-next{top:50%;transform:translateY(-50%);font-size:46px;padding:10px 20px;user-select:none}
.lb-prev{left:4px}.lb-next{right:4px}
.lb-counter{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);color:#fff;font-size:13px;letter-spacing:.15em}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .team{grid-template-columns:repeat(2,1fr)}
  .lgrid{grid-template-columns:1fr}
  .ilist a{grid-template-columns:1fr auto}
  .how{grid-template-columns:1fr}
}
@media(max-width:860px){
  .grid{grid-template-columns:1fr}
  .span-7,.span-5,.span-6,.span-4,.span-8{grid-column:auto}
  .project.offset{padding-top:0}
  .sectors .wrap,.studio-t .wrap{grid-template-columns:1fr}
  .glance{columns:1}
  nav{gap:16px}nav a{font-size:11px;letter-spacing:.16em}
  .proj-title-block .inner{grid-template-columns:1fr}
  .proj-story{display:block}
  .ps{margin-bottom:clamp(36px,8vw,64px)}
  .ps:last-child{margin-bottom:0}
  .ps.offset{padding-top:0}
}
@media(max-width:620px){
  .team,.cgrid{grid-template-columns:1fr}
  header{padding:18px var(--pad)}
  .wordmark{font-size:19px}
  .lb-prev,.lb-next{font-size:34px;padding:8px 12px}
}

/* ---------- caption under a gallery image ---------- */
.ps-cap{
  margin-top:10px;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);
}

/* ---------- sub-projects within one scheme ---------- */
.proj-sections{
  max-width:calc(var(--max) + 2 * var(--pad));
  margin:clamp(60px,7vw,110px) auto 0;
  padding:0 var(--pad);
}
.proj-sections .inner{
  border-top:1px solid var(--hairline);padding-top:clamp(30px,4vw,50px);
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(30px,4vw,60px) clamp(30px,4vw,70px);
}
.proj-sections h2{
  font-size:clamp(17px,1.5vw,21px);font-weight:400;letter-spacing:.01em;margin-bottom:10px;
}
.proj-sections p{font-size:15px;line-height:1.7;max-width:38em}
.proj-sections p+p{margin-top:.9em}

/* ---------- privacy / plain prose page ---------- */
.prose{max-width:44em;font-size:clamp(15px,1.25vw,17px);line-height:1.75}
.prose p+p{margin-top:1.1em}
.prose h2{
  font-size:13px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;
  margin:2.2em 0 .8em;
}

/* ---------- contact: map and accreditation ---------- */
.map{margin-top:clamp(50px,6vw,90px);background:var(--wash)}
.map iframe{
  display:block;width:100%;height:clamp(280px,42vw,440px);border:0;
  filter:grayscale(1) contrast(1.06);
}
.lwe{width:120px;height:auto;margin-top:28px}

/* ---------- footer AI note ---------- */
.disclaimer{
  margin-top:16px;font-size:12px;line-height:1.6;color:var(--ink-soft);max-width:52em;
}
.legal a:hover{border-bottom:1px solid var(--ink-soft)}

@media(max-width:860px){
  .proj-sections .inner{grid-template-columns:1fr}
}

/* ---------- a part of a larger scheme: heading, text, then its images ---------- */
.proj-group{
  max-width:calc(var(--max) + 2 * var(--pad));
  margin:clamp(70px,8vw,120px) auto clamp(30px,4vw,50px);
  padding:0 var(--pad);
}
.proj-group .inner{border-top:1px solid var(--hairline);padding-top:clamp(24px,3vw,38px)}
.proj-group h2{
  font-size:clamp(20px,2vw,28px);font-weight:300;letter-spacing:.01em;margin-bottom:12px;
}
.proj-group p{font-size:clamp(15px,1.25vw,17px);line-height:1.7;max-width:42em}
.proj-group p+p{margin-top:1em}

/* ---------- accreditation, on the studio page ---------- */
.lwe-block{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,3vw,48px);align-items:center}
.lwe-block p{font-size:15px;line-height:1.7;max-width:40em;color:var(--ink-soft)}
@media(max-width:620px){.lwe-block{grid-template-columns:1fr}}