@font-face { font-family: "Mallory"; src: url("assets/fonts/mallory/woff2/Mallory-Book.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Mallory"; src: url("assets/fonts/mallory/woff2/Mallory-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Mallory"; src: url("assets/fonts/mallory/woff2/Mallory-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Swift Neue"; src: url("assets/fonts/Swift Neue LT Pro/woff2/SwiftNeueLTPro-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

/* ── LAYOUT CONTROLS ─────────────────────────────────────────────────────
   --folder-bottom: more negative moves the closed folder farther down.
   --menu-rise: more negative moves the expanded folder farther up.
   --folder-bottom-overshoot: black continuation past the viewport edge.
   --paper-height / --paper-bottom: increase both depths equally to make
   longer sheets without changing their visible top position.
   --menu-*-lift: more negative moves that open sheet farther up.
   --paper-overlap: horizontal difference between stacked sheets.
   --paper-roll-top-overshoot: how far a scrolled page exits above the viewport.
   --page-side-extension: one gutter outside the eight-column page area.
   --folder-side-extension: two gutters outside the eight-column page area. */
:root {
  --grid-margin: clamp(26px, 4.8vw, 86px);
  --grid-gap: clamp(12px, 1.1vw, 20px);
  --folder-bottom: -250px;
  --folder-height: 600px;
  /* Extra sheet depth stays concealed behind the folder when it moves up. */
  --paper-height: 650px;
  --paper-bottom: -405px;
  --menu-rise: -220px;
  --folder-bottom-overshoot: 360px;
  --page-side-extension: var(--grid-gap);
  --folder-side-extension: calc(var(--grid-gap) * 2);
  /* End-of-page folder and legal text can be positioned independently. */
  --footer-reveal-rise: -180px;
  --footer-legal-bottom: 120px;
  --paper-roll-top-overshoot: 32px;
  /* Empty paper below the last About text. Less = the closing text sits
     lower on screen at the end of the page (the folder covers ~350px). */
  --about-bottom-space: 360px;
  /* Open papers begin below the transparent header banner. */
  --open-page-top: clamp(190px, 21vh, 250px);
  --menu-work-lift: -540px;
  --menu-about-lift: -440px;
  --menu-news-lift: -340px;
  --menu-contact-lift: -240px;
  /* One quarter of the responsive 12–20px column gutter. */
  --paper-overlap: clamp(3px, .275vw, 5px);
  --rhythm-step: 25px;
  --work-sheet-padding-top: clamp(44px, 4vw, 64px);
  --detail-sheet-padding-top: clamp(46px, 6vw, 90px);
  /* The menu paper is the source of truth for every opened-page title. */
  --menu-title-outer-inline: 33px;
  --menu-title-outer-block: 29px;
  background: #f8f8f7;
  color: #090909;
  font-family: "Mallory", Arial, sans-serif;
}
* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; margin: 0; overflow: hidden; }
.prototype { min-height: 100vh; position: relative; overflow: hidden; background: #f8f8f7; }
.grid-guide { position: fixed; z-index: 20; inset: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gap); padding: 0 var(--grid-margin); opacity: 1; visibility: visible; pointer-events: none; transition: opacity 180ms ease, visibility 180ms ease; }
.prototype:not(.show-grid) .grid-guide { opacity: 0; visibility: hidden; }
.grid-guide span { border-right: 1px solid rgba(232, 0, 158, .72); border-left: 1px solid rgba(232, 0, 158, .72); background: rgba(232, 0, 158, .04); }
.grid-guide::before, .grid-guide::after { content: ""; position: absolute; top: 0; bottom: 0; width: var(--grid-margin); background: rgba(232, 0, 158, .09); border-right: 1px solid rgba(232, 0, 158, .72); }
.grid-guide::before { left: 0; }
.grid-guide::after { right: 0; border-right: 0; border-left: 1px solid rgba(232, 0, 158, .72); }

.prototype-header { position: absolute; top: clamp(28px, 5vw, 76px); right: var(--grid-margin); left: var(--grid-margin); z-index: 30; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); align-items: center; }
.prototype-header::before { content: ""; position: absolute; z-index: -1; top: -18px; right: calc(0px - var(--grid-margin)); bottom: -18px; left: calc(0px - var(--grid-margin)); background: rgba(232, 0, 158, .055); border-top: 1px solid rgba(232, 0, 158, .45); border-bottom: 1px solid rgba(232, 0, 158, .45); opacity: 1; transition: opacity 180ms ease; }
.prototype:not(.show-grid) .prototype-header::before { opacity: 0; }
.brand { grid-column: 1 / span 2; display: inline-flex; align-items: center; gap: 11px; color: black; font-size: clamp(12px, 1.1vw, 17px); font-weight: 400; letter-spacing: .045em; text-decoration: none; text-transform: uppercase; white-space: nowrap; }
.brand-mark { width: 42px; height: 42px; object-fit: contain; }
.grid-toggle, .frame-toggle, .rhythm-toggle { justify-self: end; min-width: 48px; padding: 6px 9px; border: 1px solid #111; border-radius: 99px; background: transparent; color: #111; cursor: pointer; font: 400 10px/1 "Mallory", Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.grid-toggle { grid-column: 9; }
.frame-toggle { grid-column: 10; }
.rhythm-toggle { grid-column: 11; }
.grid-toggle[aria-pressed="true"], .frame-toggle[aria-pressed="true"], .rhythm-toggle[aria-pressed="true"] { border-color: #e8009e; background: rgba(232, 0, 158, .08); color: #b9007e; }
.grid-toggle:focus-visible, .frame-toggle:focus-visible, .rhythm-toggle:focus-visible { outline: 1px solid #111; outline-offset: 4px; }
.menu-toggle { position: relative; grid-column: 12; justify-self: end; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.menu-toggle span { position: absolute; right: 3px; width: 37px; height: 2px; background: #101010; transition: transform .35s cubic-bezier(.16, 1, .3, 1), opacity .2s ease; }
.menu-toggle span:first-child { top: 11px; }
.menu-toggle span:nth-child(2) { top: 21px; }
.menu-toggle span:last-child { top: 31px; }
.menu-toggle:focus-visible { outline: 1px solid #111; outline-offset: 5px; }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(10px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-10px) rotate(-45deg); }

.landing { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); min-height: 100vh; margin: 0 var(--grid-margin); padding-top: clamp(185px, 24vh, 330px); }
.landing-copy { grid-column: 4 / 11; opacity: 1; transition: opacity 260ms ease; }
.landing:has(.archive:hover) .landing-copy,
.landing:has(.archive:focus-within) .landing-copy,
.landing:has(.archive.is-open) .landing-copy { opacity: 0; pointer-events: none; }
.contact-open .landing-copy { opacity: 0; visibility: hidden; pointer-events: none; }
.landing h1 { max-width: 840px; margin: 0; font-size: clamp(2.6rem, 4.4vw, 4.65rem); font-weight: 700; letter-spacing: .015em; line-height: 1.18; text-transform: uppercase; }
.rotating-word { display: inline-block; min-width: 4.4em; transition: opacity .19s ease, transform .19s ease; }
.rotating-word.is-changing { opacity: 0; transform: translateY(-.18em); }
.landing-copy p { max-width: 680px; margin: 22px 0 0; font-family: "Swift Neue", Georgia, serif; font-size: clamp(1.25rem, 1.7vw, 1.8rem); line-height: 1.12; }

.archive { position: absolute; z-index: 2; right: var(--grid-margin); bottom: var(--folder-bottom); left: var(--grid-margin); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); height: var(--folder-height); transform: translateY(0); transition: transform 720ms cubic-bezier(.16, 1, .3, 1); }
.archive-stage { position: relative; grid-column: 3 / 11; height: 100%; }
.instruction, .folder-hint { display: none; }
.folder { position: absolute; z-index: 10; right: calc(0px - var(--folder-side-extension)); bottom: 0; left: calc(0px - var(--folder-side-extension)); width: auto; padding: 0; border: 0; background: transparent; cursor: pointer; }
.folder::after { content: ""; position: absolute; z-index: 0; top: calc(100% - 2px); right: 0; left: 0; height: var(--folder-bottom-overshoot); background: #080808; pointer-events: none; }
.folder:focus-visible { outline: 1px solid #111; outline-offset: 10px; }
.folder-svg { position: relative; z-index: 1; display: block; width: 100%; overflow: visible; }
.folder-front { fill: #080808; transform-origin: 50% 100%; transition: transform 750ms cubic-bezier(.16, 1, .3, 1); }

.documents { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.document { position: absolute; right: calc(var(--paper-overlap) - var(--page-side-extension)); bottom: var(--paper-bottom); left: calc(var(--paper-overlap) - var(--page-side-extension)); display: flex; flex-direction: column; justify-content: flex-start; height: var(--paper-height); padding: 28px 32px; border: 0; background: #fff; box-shadow: 0 -5px 14px rgba(0, 0, 0, .07); color: #121212; font-size: clamp(1rem, 1.25vw, 1.35rem); letter-spacing: .04em; text-decoration: none; opacity: 1; transform: translateX(var(--rest-shift)) translateY(var(--rest-lift)); transform-origin: bottom center; transition: transform 680ms cubic-bezier(.16, 1, .3, 1), opacity 250ms ease, background-color 65ms linear; }
.document span { display: none; }
.document strong { font-size: inherit; font-weight: 400; text-transform: uppercase; }
.document:hover, .document:focus-visible { background: #f0f0ed; outline: none; }
.document-work { --rest-lift: -80px; --rest-shift: calc(0px - var(--paper-overlap)); --open-lift: var(--menu-work-lift); --shift: calc(0px - var(--paper-overlap)); z-index: 1; }
.document-about { --rest-lift: -60px; --rest-shift: 0px; --open-lift: var(--menu-about-lift); --shift: 0px; z-index: 2; }
.document-news { --rest-lift: -40px; --rest-shift: var(--paper-overlap); --open-lift: var(--menu-news-lift); --shift: var(--paper-overlap); z-index: 3; }
.document-contact { --rest-lift: -20px; --rest-shift: 0px; --open-lift: var(--menu-contact-lift); --shift: 0px; z-index: 4; }

.archive:hover, .archive:focus-within, .archive.is-open { transform: translateY(var(--menu-rise)); }
.archive:hover .folder-front, .archive:focus-within .folder-front, .archive.is-open .folder-front { transform: scaleY(.985); }
.archive:hover .documents, .archive:focus-within .documents, .archive.is-open .documents { pointer-events: auto; }
.archive:hover .document, .archive:focus-within .document, .archive.is-open .document { opacity: 1; transform: translateX(var(--shift)) translateY(var(--open-lift)); }
.document-work { transition-delay: 40ms; }
.document-about { transition-delay: 110ms; }
.document-news { transition-delay: 180ms; }
.document-contact { transition-delay: 250ms; }

.folder-legal { position: absolute; z-index: 12; right: calc(46px - var(--folder-side-extension)); bottom: var(--footer-legal-bottom); left: calc(46px - var(--folder-side-extension)); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3.6vw, 70px); color: #fff; opacity: 0; pointer-events: none; transform: translateY(18px); transition: transform 520ms cubic-bezier(.16, 1, .3, 1); }
.folder-legal-block { display: flex; flex-direction: column; gap: 18px; min-width: 0; font-size: clamp(.75rem, 1.15vw, 1.1rem); font-weight: 300; line-height: 1.25; }
.folder-legal-title { font-size: clamp(.9rem, 1.35vw, 1.3rem); font-weight: 400; }
.folder-legal a { color: inherit; text-decoration: none; }
.folder-legal a:hover, .folder-legal a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.folder-legal p { margin: 0; }

.prototype-footer { position: absolute; right: 24px; bottom: 20px; left: 24px; margin: 0; color: #7d7d7d; font-size: 10px; letter-spacing: .1em; text-align: center; text-transform: uppercase; }

/* Contact document — aligned to the same invisible twelve-column grid. */
.contact-backdrop { position: fixed; z-index: 5; inset: 0; background: rgba(248,248,247,.38); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); opacity: 0; pointer-events: none; transition: opacity 520ms ease, background-color 520ms ease, -webkit-backdrop-filter 520ms ease, backdrop-filter 520ms ease; }
.contact-layout { position: fixed; z-index: 6; inset: 0 var(--grid-margin); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); pointer-events: none; }
.contact-panel { --paper-roll-offset: 0px; position: relative; top: calc(var(--open-page-top) - var(--paper-roll-offset)); grid-row: 1; grid-column: 3 / 11; height: calc(100vh - var(--open-page-top) + var(--paper-roll-offset)); margin-right: calc(0px - var(--page-side-extension)); margin-left: calc(0px - var(--page-side-extension)); overflow-x: hidden; overflow-y: auto; scrollbar-width: none; background: #f4f4f3; box-shadow: 0 -15px 38px rgba(0,0,0,.14); opacity: 0; pointer-events: none; transform: translateY(105%); transition: transform 720ms cubic-bezier(.16, 1, .3, 1), opacity 220ms ease; }
.contact-panel::-webkit-scrollbar { display: none; }
.contact-sheet { position: relative; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--grid-gap); row-gap: 18px; min-height: 100%; padding: var(--detail-sheet-padding-top) var(--page-side-extension) 340px; transform: translateY(var(--paper-roll-offset)); will-change: transform; }
.simple-sheet { position: relative; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--grid-gap); min-height: 175vh; padding: var(--detail-sheet-padding-top) var(--page-side-extension) 440px; transform: translateY(var(--paper-roll-offset)); will-change: transform; }
.simple-sheet h2 { grid-column: 1; margin: 0; font-size: 20px; font-weight: 400; letter-spacing: .03em; text-transform: uppercase; }

/* Toggleable six-column content frame. The hidden outer tracks reproduce
   overall grid columns 3 and 10; the visible tracks are columns 4–9. */
.content-frame-guide { position: absolute; z-index: 20; inset: 0 var(--page-side-extension); display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--grid-gap); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 160ms ease, visibility 160ms ease; }
.show-content-frame .content-frame-guide { opacity: 1; visibility: visible; }
.content-frame-guide span { border-right: 1px solid rgba(232, 0, 158, .85); border-left: 1px solid rgba(232, 0, 158, .85); background: rgba(232, 0, 158, .07); }
.content-frame-guide span:first-child, .content-frame-guide span:last-child { visibility: hidden; }
.content-rhythm-guide { position: absolute; z-index: 21; inset: 0 var(--page-side-extension); display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--grid-gap); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 160ms ease, visibility 160ms ease; }
.content-rhythm-guide span { grid-column: 2 / 8; }
.show-rhythm .content-rhythm-guide { opacity: 1; visibility: visible; }

/* Work document — reusable rows inside the central six-column content frame. */
.work-sheet { position: relative; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--grid-gap); min-height: 100%; padding: var(--work-sheet-padding-top) var(--page-side-extension) 500px; transform: translateY(var(--paper-roll-offset)); will-change: transform; }
.about-sheet { padding-bottom: var(--about-bottom-space); }
.work-sheet h2, .work-sheet h3, .work-sheet p, .work-sheet blockquote, .work-sheet figure { margin-top: 0; }
.work-content { grid-row: 1; grid-column: 2 / 8; min-width: 0; }
.content-row { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--grid-gap); align-items: start; min-width: 0; margin-top: var(--space-before, 0); }
.show-rhythm .content-row::before { content: ""; position: absolute; z-index: 22; right: 0; bottom: 100%; left: 0; height: var(--space-before, 0); background: repeating-linear-gradient(to bottom, rgba(232, 0, 158, .92) 0 1px, transparent 1px var(--rhythm-step)); pointer-events: none; }

/* JavaScript translates data-cols="1,2,3" into the matching grid lines. */
[data-cols] { min-width: 0; }

/* Presets can be replaced per row with style="--space-before: 80px". */
.space-xs { --space-before: 25px; }
.space-s { --space-before: 50px; }
.space-m { --space-before: 75px; }
.space-l { --space-before: 100px; }
.space-xl { --space-before: 150px; }
.space-five { --space-before: 125px; }

.work-sheet .work-kicker { grid-row: 1; grid-column: 1; margin: 0; font: 400 20px/1.2 "Mallory", Arial, sans-serif; letter-spacing: .03em; text-transform: uppercase; transform: translate(calc(var(--menu-title-outer-inline) - var(--page-side-extension)), calc(var(--menu-title-outer-block) - var(--work-sheet-padding-top))); }
.feature-quote { justify-self: center; max-width: 720px; margin-bottom: 0; font: 400 48px/1.08 "Swift Neue", Georgia, serif; text-align: center; text-wrap: balance; }
.about-opening { justify-self: stretch; max-width: none; text-align: left; text-wrap: pretty; }
.about-aside { margin-bottom: 0; font-size: 14px; font-weight: 300; line-height: 1.38; }
.about-rotating-word { display: inline-block; min-width: 9em; transition: opacity .19s ease, transform .19s ease; }
.about-rotating-word.is-changing { opacity: 0; transform: translateY(-.18em); }
.about-closing-copy { justify-self: center; text-align: center; }
.eyebrow { margin-bottom: 9px; font-family: "Mallory", Arial, sans-serif; font-size: 20px; font-weight: 300; letter-spacing: .035em; text-transform: uppercase; }
.section-heading h3, .statement { margin-bottom: 0; font-size: 32px; font-weight: 400; line-height: 1.18; }
.body-copy, .project-card { font-size: 14px; line-height: 1.38; }
.body-copy p, .project-card p { margin-bottom: 11px; }
.body-copy p:last-child, .project-card p:last-child { margin-bottom: 0; }
.body-emphasis { margin-bottom: 0; font: 400 24px/1.28 "Mallory", Arial, sans-serif; text-wrap: balance; }
.content-image { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.image-placeholder { display: grid; width: 100%; aspect-ratio: 1; margin: 0; background: #bdbdbd; color: rgba(255,255,255,.82); font-size: 10px; letter-spacing: .06em; place-items: center; text-transform: uppercase; }

.project-card { position: relative; }
.evidence-card { color: #333; }
.evidence-card .project-title-row h3 { font-size: 17px; }
.evidence-card .project-meta { color: #6f6f6c; }
.evidence-image { justify-self: stretch; width: 100%; background: #c8c8c6; color: rgba(255,255,255,.68); }
.project-title-row { position: relative; }
.project-title-row h3 { margin: 0; font-size: 20px; font-weight: 400; line-height: 1.12; text-transform: uppercase; }
.project-meta { margin-top: 8px; font-size: .9em; }
.project-more { position: relative; display: grid; width: 36px; height: 36px; margin-top: 14px; padding: 0; border: 1px solid #111; border-radius: 50%; background: #f4f4f3; color: #111; cursor: pointer; opacity: 0; transform: scale(.72); transition: opacity 120ms ease, transform 180ms cubic-bezier(.16, 1, .3, 1), background-color 160ms ease, color 160ms ease; place-items: center; }
.project-card.is-near .project-more, .project-more:focus-visible, .project-more.is-announced { opacity: 1; transform: scale(1); }
.project-more:hover, .project-more:focus-visible { background: #111; color: #fff; outline: none; }
.magnifier-icon { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.project-status { position: absolute; z-index: 3; top: 50%; left: calc(100% + 9px); padding: 7px 10px; border-radius: 99px; background: #111; color: #fff; font-size: 10px; letter-spacing: .04em; opacity: 0; pointer-events: none; transform: translate(5px, -50%); transition: opacity 160ms ease, transform 180ms ease; white-space: nowrap; }
.project-more.is-announced .project-status { opacity: 1; transform: translate(0, -50%); }

.swap-gallery { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; background: #bdbdbd; }
.swap-track { display: flex; width: 100%; height: 100%; transition: transform 620ms cubic-bezier(.16, 1, .3, 1); will-change: transform; }
.swap-image { position: relative; display: grid; flex: 0 0 100%; width: 100%; height: 100%; margin: 0; background: #bdbdbd; color: rgba(255,255,255,.9); font: 400 10px/1 "Mallory", Arial, sans-serif; letter-spacing: .06em; place-items: center; text-align: center; text-transform: uppercase; }
.swap-image:nth-child(2) { background: #bdbdbd; }
.swap-image:nth-child(3) { background: #bdbdbd; }
.swap-controls { position: absolute; z-index: 3; bottom: 14px; left: 14px; display: flex; gap: 7px; }
.swap-arrow { display: grid; width: 34px; height: 34px; padding: 0; border: 1px solid rgba(17,17,17,.75); border-radius: 50%; background: rgba(248,248,247,.88); color: #111; cursor: pointer; place-items: center; transition: background-color 140ms ease, color 140ms ease, transform 140ms ease; }
.swap-arrow:hover, .swap-arrow:focus-visible { background: #111; color: #fff; outline: none; transform: scale(1.04); }
.swap-arrow svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.swap-question { font: 400 28px/1.08 "Swift Neue", Georgia, serif; letter-spacing: 0; text-transform: none; }
.swap-image video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.news-gallery-portrait { aspect-ratio: 4 / 5; }
.swap-image img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.swap-gallery.is-single .swap-controls { display: none; }

/* Real images fill their square; add class="is-diagram" to show one whole.
   Boxes holding an image are transparent, so transparent PNGs sit directly
   on the paper instead of on a second white. */
.evidence-image, .switch-image, .news-image { margin: 0; }
.evidence-image:has(img), .switch-image:has(img), .swap-image:has(img, video), .news-image:has(img),
.swap-gallery:has(.swap-image img, .swap-image video), .photo-shuffle.has-photos { background: transparent; }
.is-diagram { padding: var(--pad, 6%); object-fit: contain !important; }

/* Per-image framing, set on the <img> itself:
   style="--pos: 50% 20%"   which part stays visible (x y; 0% = left/top)
   style="--zoom: 1.2"      enlarge inside the square (1 = normal)
   style="--pad: 0%"        margin around an is-diagram image (default 6%) */
.content-image, .switch-image img, .swap-image img, .news-image img, .photo-shuffle img { object-position: var(--pos, 50% 50%); transform: scale(var(--zoom, 1)); transform-origin: var(--pos, 50% 50%); }
.evidence-image { position: relative; overflow: hidden; }

/* About squares without a photo stay invisible (their space is kept), so
   no grey placeholder is ever shown. Add an <img> and it appears. */
.about-image.image-placeholder:not(:has(img)) { visibility: hidden; }

/* Random photo squares — layers crossfade on top of the placeholder. */
.photo-shuffle { position: relative; overflow: hidden; }
.photo-shuffle.has-photos span { visibility: hidden; }
.photo-shuffle img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 900ms ease; }
.photo-shuffle img.is-visible { opacity: 1; }

/* Guide dots — add class "guide-dot" to any text block. A dot the size of the
   magnifier button pops up under it when it scrolls into view. It sits
   outside the layout, so spacing stays unchanged.
   --guide-dot-gap: distance below the text (default 25px). */
.guide-dot { position: relative; }
.guide-dot::after { content: ""; position: absolute; top: calc(100% + var(--guide-dot-gap, 25px)); left: 0; width: 36px; height: 36px; border-radius: 50%; background: #111; opacity: 0; transform: scale(0); transition: transform 560ms cubic-bezier(.34, 1.56, .64, 1), opacity 180ms ease; pointer-events: none; }
.guide-dot.is-seen::after { opacity: 1; transform: scale(1); }

/* Switchable image set — squares crossfade to the next group; arrows sit
   bottom right of the last square's row. */
.cycle-slot img { transition: opacity 220ms ease; }
.cycle-slot.is-switching img { opacity: 0; }
.cycle-controls { display: flex; align-self: end; justify-self: end; gap: 7px; }
.cycle-controls-start { justify-self: start; }
/* Gallery arrows placed outside the image, e.g. in the first column. */
.swap-controls-outside { position: static; align-self: end; justify-self: start; }

/* Scatter grid — six tiles (two rows of three squares). Tile bottom-left
   holds the arrows; photos appear on random tiles A–E and fade in/out. */
.scatter-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--grid-gap); row-gap: 25px; }
.scatter-slot { position: relative; overflow: hidden; margin: 0; aspect-ratio: 1; opacity: 0; transition: opacity 320ms ease; }
.scatter-slot.is-filled { opacity: 1; }
.scatter-slot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.scatter-slot[data-slot="A"] { grid-column: 1 / 3; grid-row: 1; }
.scatter-slot[data-slot="B"] { grid-column: 3 / 5; grid-row: 1; }
.scatter-slot[data-slot="C"] { grid-column: 5 / 7; grid-row: 1; }
.scatter-slot[data-slot="D"] { grid-column: 3 / 5; grid-row: 2; }
.scatter-slot[data-slot="E"] { grid-column: 5 / 7; grid-row: 2; }
.scatter-controls { display: flex; grid-column: 1 / 3; grid-row: 2; align-self: end; gap: 7px; }

/* Project switcher — one six-column grid per project, arrows bottom right. */
.project-switcher { position: relative; }
.switch-project { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--grid-gap); row-gap: 25px; align-items: start; transition: opacity 220ms ease; }
.switch-project[hidden], .switch-image[hidden] { display: none; }
.switch-project > .project-card { grid-row: 1; }
.project-switcher.is-switching .switch-project { opacity: 0; }
.switch-image { position: relative; overflow: hidden; aspect-ratio: 1; background: #c8c8c6; }
.switch-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.switch-reserve { grid-row: 3; grid-column: 5 / 7; aspect-ratio: 1; pointer-events: none; }
.switch-controls { position: absolute; z-index: 3; right: 0; bottom: 0; display: flex; gap: 7px; }
.project-switcher.is-single .switch-controls { display: none; }
.switch-status { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Imprint and Privacy Policy — plain reading column. */
.legal-copy { color: #222; font-size: 14px; line-height: 1.5; }
.legal-copy h3 { margin-bottom: 10px; font-size: 17px; font-weight: 400; line-height: 1.25; }
.legal-copy p { margin-bottom: 10px; }
.legal-copy p:last-child { margin-bottom: 0; }
.legal-copy a { color: inherit; text-underline-offset: 3px; }
.legal-copy .legal-status { color: #6f6f6c; font-size: 12px; }

/* News filter — outlined pills; the active one is filled, empty ones fade. */
.news-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.news-filter button { display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 13px; border: 1px solid #111; border-radius: 99px; background: transparent; color: #111; cursor: pointer; font: 400 11px/1 "Mallory", Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; transition: background-color 140ms ease, color 140ms ease, opacity 140ms ease; }
.news-filter button[data-count]::after { content: attr(data-count); font-size: 9px; opacity: .55; }
.news-filter button[data-count="0"] { opacity: .45; }
.news-filter button:hover, .news-filter button:focus-visible { background: rgba(17,17,17,.07); outline: none; opacity: 1; }
.news-filter button[aria-pressed="true"] { background: #111; color: #f4f4f3; opacity: 1; }
.news-content .news-filter-note { grid-row: 2; margin: 16px 0 0; color: #6f6f6c; font-size: 13px; line-height: 1.4; }
.news-post[hidden] { display: none; }

/* News — alternating post rows with a foldable full text. */
.news-lede { margin-bottom: 0; font: 400 36px/1.15 "Swift Neue", Georgia, serif; text-wrap: balance; }
.news-post > * { grid-row: 1; }
.news-intro { color: #333; font-size: 14px; line-height: 1.38; }
.news-intro h3 { margin-bottom: 0; font-size: 17px; font-weight: 400; line-height: 1.2; }
.news-intro p { margin-bottom: 0; }
.news-intro p + p { margin-top: 12px; }
.news-intro .news-format { margin-top: 7px; color: #6f6f6c; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.news-intro .news-meta { margin-top: 5px; color: #6f6f6c; font-size: 12px; }
.news-intro .news-format + .news-meta { margin-top: 3px; }
.news-post-flip .news-intro { text-align: right; }
.news-image { position: relative; overflow: hidden; aspect-ratio: 1; }
.news-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.news-body { margin-top: 18px; color: #333; font-size: 13px; line-height: 1.45; }
.news-body:empty { display: none; }
.news-body p { margin-bottom: 10px; }
.news-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 480ms cubic-bezier(.16, 1, .3, 1); }
.news-more.is-open { grid-template-rows: 1fr; }
.news-more-inner { min-height: 0; overflow: hidden; }
.news-toggle { display: inline-flex; align-items: center; gap: 9px; margin-top: 2px; padding: 4px 0; border: 0; background: transparent; color: #111; cursor: pointer; font: 400 12px/1 "Mallory", Arial, sans-serif; letter-spacing: .04em; }
.news-toggle-icon { position: relative; width: 18px; height: 18px; border: 1px solid #111; border-radius: 50%; transition: background-color 140ms ease; }
.news-toggle-icon::before, .news-toggle-icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 1px; background: #111; transform: translate(-50%, -50%); transition: transform 240ms cubic-bezier(.16, 1, .3, 1), background-color 140ms ease; }
.news-toggle-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.news-toggle[aria-expanded="true"] .news-toggle-icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.news-toggle:hover .news-toggle-icon, .news-toggle:focus-visible .news-toggle-icon { background: #111; }
.news-toggle:hover .news-toggle-icon::before, .news-toggle:hover .news-toggle-icon::after,
.news-toggle:focus-visible .news-toggle-icon::before, .news-toggle:focus-visible .news-toggle-icon::after { background: #fff; }
.news-toggle:focus-visible { outline: none; }
.news-toggle:hover .news-toggle-label, .news-toggle:focus-visible .news-toggle-label { text-decoration: underline; text-underline-offset: 4px; }
.is-lower { margin-top: clamp(55px, 6vw, 95px); }
.is-lowest { margin-top: clamp(110px, 12vw, 180px); }

.position-diagram { display: block; justify-self: center; width: 100%; height: auto; overflow: visible; }
.position-circle { fill: none; stroke: #111; stroke-width: 2; vector-effect: non-scaling-stroke; }
/* The paper-coloured outline keeps a label readable where a line runs under it. */
.position-label { fill: #111; font: 300 18px/1 "Mallory", Arial, sans-serif; letter-spacing: .08em; text-anchor: middle; text-transform: uppercase; paint-order: stroke; stroke: #f4f4f3; stroke-width: 6px; stroke-linejoin: round; }
.position-definition h3 { margin-bottom: 8px; font-size: 20px; font-weight: 400; line-height: 1.15; }
.position-definition p { margin-bottom: 0; font-size: 14px; line-height: 1.38; }
.position-copy { justify-self: center; text-align: center; }
.closing-row { --space-before: 250px; }
.closing-statement { justify-self: center; max-width: 680px; margin-bottom: 0; font: 400 48px/1.08 "Swift Neue", Georgia, serif; text-align: center; text-wrap: balance; }
.closing-tagline { margin-bottom: 0; font-size: 14px; line-height: 1.38; text-align: center; }
/* Relative columns 2–7 align to overall grid columns 4–9. */
.contact-panel h2 { grid-column: 1; width: 100%; margin: 0; font-size: 20px; font-weight: 400; letter-spacing: .03em; text-transform: uppercase; transform: translate(calc(var(--menu-title-outer-inline) - var(--page-side-extension)), calc(var(--menu-title-outer-block) - var(--detail-sheet-padding-top))); }
.contact-card-wrap { position: relative; grid-row: 2; grid-column: 2 / 8; align-self: start; justify-self: center; width: min(100%, 520px); margin-top: 130px; }
.contact-card { display: flex; flex-direction: column; justify-content: space-between; width: 100%; aspect-ratio: 85 / 55; padding: 26px 28px; background: #050505; box-shadow: 0 14px 25px rgba(0,0,0,.25); color: #f7f7f4; }
.contact-card-top { display: flex; align-items: center; gap: 20px; font-size: clamp(1.15rem, 2vw, 2rem); letter-spacing: .06em; text-transform: uppercase; }
.contact-card-top img { width: 41px; height: 41px; filter: invert(1); }
.contact-card-bottom { display: flex; justify-content: space-between; color: #d4d4d1; font-size: 12px; line-height: 1.45; }
.contact-card-bottom span:last-child { text-align: right; }
.download-card { position: absolute; z-index: 2; top: var(--download-y, 50%); left: var(--download-x, 50%); padding: 11px 18px; border: 2px solid #101010; border-radius: 99px; background: #f8f8f7; color: #111; cursor: pointer; font: inherit; opacity: 0; transform: translate(-50%, -50%) scale(.94); transition: opacity .18s ease, transform .18s ease; white-space: nowrap; }
.contact-card-wrap:hover .download-card, .contact-card-wrap:focus-within .download-card { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.social-section { grid-column: 2 / 8; grid-row: 3; justify-self: center; width: 100%; margin-top: 85px; }
.social-section h3, .mail-form h3 { margin: 0 0 26px; font-size: 1.1rem; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; }
.social-links { display: flex; gap: 18px; }
.social-links a { display: grid; width: 61px; aspect-ratio: 1; border: 2px solid #161616; border-radius: 50%; color: #111; font-size: 13px; font-weight: 700; place-items: center; text-decoration: none; text-transform: uppercase; transition: background .2s ease, color .2s ease; }
.social-links a:hover, .social-links a:focus-visible { background: #111; color: #f7f7f4; outline: none; }
.mail-form { display: grid; grid-column: 2 / 8; grid-row: 4; justify-self: center; width: 100%; gap: 14px; margin-top: 35px; }
.mail-form h3 { margin-bottom: 2px; }
.mail-form label { display: grid; gap: 7px; font-size: 1rem; }
.mail-form input, .mail-form textarea { width: 100%; padding: 10px 0; border: 0; border-bottom: 1px solid #3c3c3a; background: transparent; color: #111; font: inherit; resize: vertical; }
.mail-form input:focus, .mail-form textarea:focus { outline: none; border-bottom-width: 2px; }
.mail-form button { justify-self: start; margin-top: 8px; padding: 11px 18px; border: 1px solid #111; border-radius: 99px; background: #111; color: #fff; cursor: pointer; font: inherit; }
.mail-form p { margin: 0; color: #696967; font-size: 11px; line-height: 1.4; }
.contact-open .contact-backdrop { opacity: 1; pointer-events: auto; }
.contact-open .contact-panel.is-active { opacity: 1; pointer-events: auto; transform: translateY(0); }
.contact-open .archive { z-index: 7; }
.contact-open .archive { transform: translateY(0); }
.contact-open .archive, .contact-open .folder { pointer-events: none; }
.contact-open .archive .documents { pointer-events: none; }
.contact-open .archive .document { opacity: 0 !important; transform: translateX(0) translateY(110vh) !important; transition-delay: 0ms; }
.contact-open .prototype-footer { display: none; }

/* Content menu: frost the current sheet, then lay the folder over it. */
.contact-open.menu-over-content .contact-backdrop { z-index: 7; background: rgba(248,248,247,.66); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); opacity: 1; pointer-events: auto; }
.contact-open.menu-over-content .contact-panel.is-active { opacity: 1; pointer-events: none; }
.contact-open.menu-over-content .archive { z-index: 8; transform: translateY(var(--menu-rise)); }
.contact-open.menu-over-content .archive,
.contact-open.menu-over-content .folder,
.contact-open.menu-over-content .archive .documents { pointer-events: auto; }
.contact-open.menu-over-content .archive .document { opacity: 1 !important; transform: translateX(var(--shift)) translateY(var(--open-lift)) !important; }
.contact-open.menu-over-content .document-work { transition-delay: 40ms; }
.contact-open.menu-over-content .document-about { transition-delay: 110ms; }
.contact-open.menu-over-content .document-news { transition-delay: 180ms; }
.contact-open.menu-over-content .document-contact { transition-delay: 250ms; }

/* Reverse the frost while the menu folds back into the content page. */
.contact-open.menu-closing .contact-backdrop { z-index: 7; background: rgba(248,248,247,.38); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); opacity: 0; pointer-events: none; }
.contact-open.menu-closing .contact-panel.is-active { opacity: 1; pointer-events: none; }

/* Side-column exit: feed the current paper back behind the folder first. */
.contact-open.returning-home .contact-backdrop { opacity: 0; pointer-events: none; }
.contact-open.returning-home .contact-panel.is-active { opacity: 1; pointer-events: none; transform: translateY(105%); transition: transform 920ms cubic-bezier(.16, 1, .3, 1), opacity 220ms ease; }
.contact-open.returning-home .archive { z-index: 8; transform: translateY(0); }

/* The physical folder rises at the end of a document to expose its footer. */
.contact-open.page-at-bottom:not(.menu-over-content):not(.menu-closing):not(.returning-home) .archive { transform: translateY(var(--footer-reveal-rise)); }
.contact-open.page-at-bottom:not(.menu-over-content):not(.menu-closing):not(.returning-home) .folder-legal { opacity: 1 !important; pointer-events: auto; transform: translateY(0); }

@media (max-width: 800px) {
  :root { --grid-margin: 18px; --grid-gap: 8px; --open-page-top: 104px; --menu-rise: -180px; --work-sheet-padding-top: 42px; --detail-sheet-padding-top: 42px; --menu-title-outer-inline: 25px; --menu-title-outer-block: 25px; --footer-reveal-rise: -260px; --footer-legal-bottom: -65px; --mobile-folder-front-height: 150px; --mobile-folder-bottom-extension: 520px; --mobile-work-bottom-space: 420px; --mobile-contact-bottom-space: 340px; }
  .grid-guide, .content-frame-guide, .content-rhythm-guide, .show-rhythm .content-row::before { display: none !important; }
  .prototype-header::before { display: none; }
  .prototype-header::after { content: ""; position: absolute; z-index: -1; top: -28px; right: calc(0px - var(--grid-margin)); left: calc(0px - var(--grid-margin)); height: 120px; background: linear-gradient(to bottom, #f8f8f7 0 58%, rgba(248,248,247,.96) 72%, rgba(248,248,247,0) 100%); pointer-events: none; }
  .prototype-header { top: 28px; right: var(--grid-margin); left: var(--grid-margin); }
  .brand-mark { width: 32px; height: 32px; }
  .menu-toggle { width: 42px; }
  .menu-toggle span { width: 32px; }
  .grid-toggle, .frame-toggle, .rhythm-toggle { display: none; }
  .landing { margin: 0 24px; padding-top: 16vh; }
  .landing-copy { grid-column: 1 / -1; }
  .landing h1 { font-size: clamp(2.55rem, 11.2vw, 4.3rem); line-height: 1.08; }
  .landing-copy p { max-width: 480px; margin-top: 20px; font-size: clamp(1.25rem, 6vw, 1.7rem); }
  .archive { right: 18px; bottom: 0; left: 18px; height: 570px; }
  .contact-open .archive { bottom: -93px; }
  .archive-stage { grid-column: 1 / -1; }
  .folder-svg { height: var(--mobile-folder-front-height); }
  .folder::after { height: var(--mobile-folder-bottom-extension); }
  /* In the closed mobile state, only the staggered sheet edges peek above
     the 150px folder front. The expanded lifts below remain unchanged. */
  .document { right: calc(9% + var(--paper-overlap)); bottom: -280px; left: calc(9% + var(--paper-overlap)); height: 430px; padding: 24px; font-size: 1rem; }
  .document-work { --rest-lift: -24px; --open-lift: -270px; }
  .document-about { --rest-lift: -16px; --open-lift: -200px; --shift: calc(0px - var(--paper-overlap)); }
  .document-news { --rest-lift: -8px; --open-lift: -130px; --shift: var(--paper-overlap); }
  .document-contact { --rest-lift: 0px; --open-lift: -60px; }
  .prototype-footer { display: none; }
  .contact-layout { inset: 0 18px; }
  .contact-panel { top: calc(var(--open-page-top) - var(--paper-roll-offset)); grid-column: 1 / -1; width: auto; margin-right: 0; margin-left: 0; }
  .contact-sheet { display: block; padding: 42px 27px var(--mobile-contact-bottom-space); }
  .contact-panel h2 { margin-top: 0; }
  .contact-card-wrap { margin-top: 65px; }
  .contact-card { padding: 20px; }
  .contact-card-top { gap: 12px; font-size: 1.13rem; }
  .contact-card-bottom { font-size: 10px; }
  .download-card { top: calc(100% + 14px); left: 0; opacity: 1; transform: none; }
  .social-section { margin-top: 96px; }
  .mail-form { margin-top: 62px; }
  .work-sheet { display: block; min-height: 0; padding: 42px 27px var(--mobile-work-bottom-space); }
  .work-sheet .work-kicker { margin-bottom: 80px; }
  .content-row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
  .content-row > [data-cols] { grid-column: 1 / -1 !important; }
  .feature-quote { font-size: clamp(36px, 9vw, 48px); }
  .eyebrow { font-size: 16px; }
  .section-heading h3, .statement { font-size: 28px; }
  .body-emphasis { font-size: 21px; }
  .body-copy, .project-card { max-width: 34rem; }
  .position-diagram { aspect-ratio: 1; }
  .position-definitions { gap: 38px; }
  .position-copy { text-align: left; }
  .closing-statement { font-size: 38px; }
  .space-xs { --space-before: 25px; }
  .space-s { --space-before: 37.5px; }
  .space-m { --space-before: 50px; }
  .space-l { --space-before: 75px; }
  .space-xl { --space-before: 100px; }
  .space-five { --space-before: 100px; }
  .closing-row { --space-before: 175px; }
  .is-lower, .is-lowest { margin-top: 0; }
  .project-more { opacity: 1; transform: scale(1); }
  .switch-project { display: flex; flex-direction: column; gap: 24px; }
  .switch-reserve { display: none; }
  .switch-controls { position: static; justify-content: flex-end; margin-top: 16px; }
  .swap-controls-outside, .cycle-controls-start { order: 2; }
  .scatter-grid { display: flex; flex-direction: column; gap: 24px; }
  .scatter-slot:not(.is-filled) { display: none; }
  .scatter-controls { order: 2; }
  .news-lede { font-size: 28px; }
  .news-post > * { grid-row: auto; }
  .news-post-flip .news-intro { order: -1; text-align: left; }
  .folder-legal { right: 20px; bottom: var(--footer-legal-bottom); left: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 18px; }
  .folder-legal-block { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { .archive, .folder-front, .document, .landing-copy, .contact-panel, .contact-backdrop, .menu-toggle span, .swap-track, .project-more, .project-status, .switch-project, .news-more, .photo-shuffle img, .guide-dot::after, .scatter-slot { transition-duration: .01ms; } }