/*
  Shared styles for the project pages rebuilt from the Webflow site.
  Measurements come from the Webflow pages at 1440px wide, converted to vw
  so the layout scales. Each page adds its own small overrides in <style>.
*/
:root {
  --ink: #373737;
  --paper: #fff;
  /* Was #ebebeb, the Webflow pages' light grey. Theo asked (2026-09-20) for every
     background to be white or black, so the "grey" sections now paint white. The
     class names are kept, so putting the grey back is this one line. */
  --grey: #fff;
  --black: #000;
  --accent: var(--theo-red);
  --col: min(66.67vw, 960px);          /* Webflow text/media column */
  --wide: calc(100vw - 64px);          /* 1376px at 1440 */
  font-family: akzidenz-grotesk-next-pro, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); overflow-x: clip; }
img, video, iframe { display: block; max-width: 100%; }
img, video { height: auto; }
figure { margin: 0; }
figure > img, figure > video { width: 100%; }
a { color: inherit; }

/* Fixed back-to-home square (matches the Webflow arrow button) */
.home-mark {
  position: fixed; z-index: 20; left: 14px; top: 50%;
  width: 40px; height: 40px; transform: translateY(-50%);
  border: 1px solid var(--accent); display: grid; place-items: center;
  background: #ffffff14; backdrop-filter: blur(2px);
}
.home-mark span { width: 14px; height: 14px; border-top: 1px solid var(--accent); border-left: 1px solid var(--accent); transform: translate(2px, 2px); }
.home-mark::after { content: ''; position: absolute; width: 20px; height: 1px; background: var(--accent); transform: rotate(45deg); }
.home-mark:hover, .home-mark:focus-visible { background: var(--accent); }
.home-mark:hover span, .home-mark:focus-visible span { border-color: #fff; }
.home-mark:hover::after, .home-mark:focus-visible::after { background: #fff; }

/* Heroes */
.p-hero { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 100svh; overflow: hidden; background: var(--grey); }
.p-hero > img, .p-hero > video { width: 100%; height: 100%; object-fit: cover; }
.p-hero--contain > img, .p-hero--contain > video { object-fit: contain; }
.p-hero--black { background: var(--black); }

/* Intro: role line + staggered giant title */
.p-intro { padding: 5.55vw 5vw 4.2vw; background: var(--paper); }
.p-intro--grey { background: var(--grey); }
.p-intro--black { background: var(--black); color: #fff; }
.p-role { margin: 0; font-size: clamp(11px, 1.5vw, 22px); line-height: 1; letter-spacing: -.02em; text-transform: uppercase; }
.p-title { margin: 1.1vw 0 0; font-size: clamp(46px, 10vw, 172px); line-height: .8; font-weight: 700; letter-spacing: -.065em; text-transform: uppercase; }
.p-title span { display: block; width: max-content; max-width: 100%; }
.p-title span:nth-child(1) { margin-left: 11.6vw; }
.p-title span:nth-child(2) { margin-left: 30vw; }
.p-title span:nth-child(3) { margin-left: 8.9vw; }

/* Copy column */
.p-copy { padding: 1.5vw 0 4vw; background: var(--grey); }
.p-copy--white { background: var(--paper); }
.p-copy--black { background: var(--black); color: #fff; }
.p-copy > * { width: var(--col); margin-left: auto; margin-right: auto; }
.p-lead { margin-top: 0; margin-bottom: 2.4vw; font-size: clamp(24px, 3.33vw, 56px); line-height: 1.1; letter-spacing: -.035em; font-weight: 400; }
.p-body { margin-top: 0; margin-bottom: 1.5em; font-size: clamp(15px, 1.27vw, 20px); line-height: 1.5; letter-spacing: -.005em; }
.p-body--small { font-size: clamp(14px, .98vw, 16px); line-height: 1.45; }
.p-copy .p-media-item { margin-top: 2.2vw; }

/* Media blocks */
.p-media { padding: 2.2vw 0; background: var(--black); display: grid; gap: 4.7vw; justify-items: center; }
.p-media--grey { background: var(--grey); }
.p-media--white { background: var(--paper); }
.p-media--tight { gap: 0; padding: 0; }
.p-wide { width: var(--wide); }
.p-full { width: 100%; }
.p-col { width: var(--col); }
.p-inset { width: min(70.8vw, 1020px); }
.p-media img, .p-media video, .p-copy img, .p-copy video { width: 100%; }
.p-media video, .p-copy video, .p-hero video { background: #000; }

/* Older single-column case pages (Clim8, LL, Fabrik) */
.p-stack { display: grid; background: var(--paper); }
.p-stack img { width: 100%; }
.p-note { width: min(65.3vw, 940px); margin: 0 auto; padding: 2.4vw 0 3vw; font-size: clamp(16px, 1.46vw, 22px); line-height: 1.3; letter-spacing: -.015em; color: #333; }
.p-note p { margin: 0 0 1em; }

@media (max-width: 760px) {
  :root { --col: calc(100vw - 40px); --wide: calc(100vw - 20px); }
  .home-mark { left: 8px; width: 34px; height: 34px; top: auto; bottom: 16px; transform: none; }
  .p-hero { aspect-ratio: 4 / 5; }
  .p-hero--keep { aspect-ratio: 16 / 9; }
  .p-intro { padding: 56px 20px 40px; }
  .p-title { margin-top: 14px; font-size: clamp(44px, 14.5vw, 80px); line-height: .82; }
  .p-title span { width: auto; }
  .p-title span:nth-child(1) { margin-left: 0; }
  .p-title span:nth-child(2) { margin-left: 12vw; }
  .p-title span:nth-child(3) { margin-left: 5vw; }
  .p-copy { padding: 36px 0 30px; }
  .p-lead { margin-bottom: 26px; }
  .p-media { padding: 10px 0; gap: 10px; }
  .p-inset, .p-col { width: var(--wide); }
  .p-note { width: auto; padding: 32px 20px 36px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/*
  Embedded in the Profile page's glass tray (page opened with ?embed).
  Only the page itself is transparent, so the glass shows at the edges; every
  section keeps its own solid colour. (Sections used to be faded to 85% here,
  which greyed the whites — removed 2026-09-20 at Theo's request.)
*/
html.is-embed, html.is-embed body { background: transparent; }
.is-embed .home-mark, .is-embed .site-footer { display: none; }