/* The gutter is the site's single horizontal rhythm. At the desktop 80px it ate
   43% of a 375px phone screen, so it scales down with the viewport. */
:root{--gutter:80px}
@media (max-width:1200px){:root{--gutter:48px}}
@media (max-width:768px){:root{--gutter:28px}}
@media (max-width:420px){:root{--gutter:20px}}

html,body{margin:0;background:var(--community-blue)}
#root{font-family:var(--font-display)}
.wrap{padding:0 var(--gutter)}

/* Type scale. The clamp() floors are what a phone actually gets — they used to sit
   at desktop-ish sizes (64px for .statement) and forced long words off-screen.
   Only the floors changed; the vw slope and desktop maximums are untouched. */
.statement{font-weight:500;letter-spacing:-0.04em;line-height:0.92;margin:0;font-size:clamp(40px,11.9vw,228px);text-wrap:balance}
.d1{font-weight:700;letter-spacing:-0.04em;line-height:0.97;margin:0;font-size:clamp(34px,8.3vw,159.48812866210938px)}
.d2{font-weight:500;letter-spacing:-0.04em;line-height:0.97;margin:0;font-size:clamp(30px,5.7vw,110.12275695800781px)}
.d3{font-weight:700;letter-spacing:-0.04em;line-height:1;margin:0;font-size:clamp(26px,3.4vw,65.96757507324219px)}
.lead{font-weight:400;letter-spacing:-0.04em;line-height:1.05;margin:0;font-size:clamp(19px,2.1vw,40px)}
.rule{font-weight:400;line-height:1.35;margin:0;font-size:clamp(16px,1.2vw,20px)}
.label{font-weight:500;letter-spacing:-0.02em;line-height:1;font-size:clamp(18px,1.6vw,24px)}

/* Long single words (URLs, "atriumdiscovery.co.uk") can't be hyphenated and will
   push the page sideways at display sizes. */
.statement,.d1,.d2,.d3,.lead{overflow-wrap:break-word}

.navlink{background:none;border:none;padding:0;cursor:pointer;text-decoration:none;font-family:inherit;font-weight:500;font-size:clamp(17px,1.6vw,24px);letter-spacing:-0.02em;opacity:.72;transition:opacity var(--dur-base) var(--ease-brand)}
.navlink:hover,.navlink[data-active="true"]{opacity:1}
.navlink:focus-visible{outline:2px solid currentColor;outline-offset:4px;opacity:1}

/* ---- site nav ---------------------------------------------------------- */
.sitenav{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;
  height:clamp(76px,10vw,140px);
  padding:0 var(--gutter);
}
.sitenav > .sitenav-logo{display:block;width:auto;flex-shrink:0;line-height:0}
.footer-logo{display:block;line-height:0}
.sitenav-links{display:flex;gap:clamp(16px,3.4vw,56px);align-items:center}

/* Below this the logo and three links genuinely cannot share a row. Stack the
   links under the logo rather than letting them overflow. */
@media (max-width:520px){
  .sitenav{height:auto;padding-top:20px;padding-bottom:20px;flex-wrap:wrap;row-gap:12px}
  .sitenav-links{width:100%;justify-content:space-between;gap:12px}
  .sitenav-links .navlink{font-size:16px}
}

/* ---- footer ------------------------------------------------------------ */
.footer-main{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:clamp(24px,4vw,48px);margin-top:clamp(48px,8vw,96px);flex-wrap:wrap;
}
.footer-links{display:flex;gap:clamp(20px,3.4vw,56px);flex-wrap:wrap}
.footer-links .navlink{font-size:clamp(16px,1.4vw,20px)}
.footer-contact{opacity:.6}

.footer-legal{
  margin-top:clamp(40px,6vw,64px);padding-top:clamp(24px,3vw,32px);
  border-top:1px solid rgba(236,236,237,0.18);
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:clamp(16px,3vw,32px);flex-wrap:wrap;
}
.footer-legal .rule{font-size:15px;opacity:.5;max-width:620px;line-height:1.6}
.footer-legal-links{display:flex;gap:clamp(20px,3vw,32px);flex-wrap:wrap}
.footer-legal-links .navlink{font-size:15px;opacity:.5;color:var(--houselights)}

/* ---- project cards ----------------------------------------------------- */
.pcard{background:none;border:none;padding:0;text-align:left;cursor:pointer;display:block;width:100%;color:inherit;text-decoration:none}
.pcard:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.pcard .media{overflow:hidden;position:relative;isolation:isolate;aspect-ratio:16/10;background:var(--community-blue)}
.pcard .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;transition:transform var(--dur-slow) var(--ease-brand)}
.pcard:hover .media img{transform:scale(1.03)}

.grain{position:absolute;inset:0;pointer-events:none}
.stat{display:flex;flex-direction:column;gap:8px}
.stat b{font-weight:500;letter-spacing:-0.04em;line-height:1;font-size:clamp(36px,4.5vw,88px)}
.divider{height:1px;background:currentColor;opacity:.28}

/* Touch targets: the design's hairline buttons are fine with a mouse but need
   height on a phone. */
@media (hover:none){
  .navlink{padding:6px 0}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .pcard:hover .media img{transform:none}
}

/* iOS Safari counts the collapsing URL bar in 100vh, so a "full height" hero is
   taller than the visible viewport and its bottom row starts below the fold.
   svh is the stable small-viewport height; the vh line stays as the fallback. */
.screen{min-height:100vh;min-height:100svh}
.media-band{position:relative;overflow:hidden;isolation:isolate}
.media-band--70{height:70vh;height:70svh}
.media-band--72{height:72vh;height:72svh}