/* Nina Ramsey — portfolio
   Jost (her Futura) carries structure; Cormorant Garamond carries the editorial voice.
   Project spreads mirror the printed portfolio and stay still. Around them, the site is a journey:
   a timeline of the work on the home page, her story on the About page.
   Images are never cropped by the site: every frame takes the image's own proportions. */

@font-face { font-family: "Jost"; src: url("../fonts/jost-latin.woff2") format("woff2"); font-weight: 100 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Jost"; src: url("../fonts/jost-latin-italic.woff2") format("woff2"); font-weight: 100 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-latin.woff2") format("woff2"); font-weight: 300 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-latin-italic.woff2") format("woff2"); font-weight: 300 600; font-style: italic; font-display: swap; }

:root {
  --page: #ffffff;
  --bone: #f3f1ed;
  --tile: #dcd8d3;
  --ink: #161514;
  --text: #3b3835;
  --muted: #6a665f;
  --line: rgba(22, 21, 20, .13);
  --accent: #8c3f2f;

  --sans: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  --serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;

  --pad: clamp(18px, 4.4vw, 72px);
  --gap: clamp(12px, 1.6vw, 28px);
  --gutter: clamp(24px, 5.6vw, 96px);
  --max: 1440px;
  --header-h: 84px;
  --rail: clamp(28px, 3.2vw, 56px);

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
  --intro: .15s;
}
.js:not(.seen) { --intro: 1.75s; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0; background: var(--page); color: var(--ink);
  font-family: var(--sans); font-size: 16.5px; font-weight: 340; line-height: 1.75;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip;
  font-kerning: normal; font-variant-ligatures: common-ligatures;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--ink); color: var(--page); }
:focus-visible { outline: 1.5px solid currentColor; outline-offset: 4px; }
[tabindex="-1"]:focus { outline: none; }
h1, h2, h3, .lockup__title, .menu__w { text-wrap: balance; }
p, li, dd, blockquote { text-wrap: pretty; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 16px; top: 16px; z-index: 100; padding: 12px 18px; background: var(--ink); color: var(--page); text-decoration: none; transform: translateY(-200%); }
.skip:focus { transform: none; }

/* ---------- Page transitions ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-old(root) { animation: vt-out .55s var(--ease-io) both; }
::view-transition-new(root) { animation: vt-in .9s var(--ease-out) .1s both; }
::view-transition-group(project-media) { animation-duration: 1s; animation-timing-function: var(--ease-io); z-index: 50; }
::view-transition-old(project-media), ::view-transition-new(project-media) { width: 100%; height: 100%; object-fit: contain; animation: none; }
::view-transition-old(project-media) { opacity: 0; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-3vh); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(4vh); } }
.vt-media { view-transition-name: project-media; }

/* ---------- Type ---------- */
.label { font-size: 11px; font-weight: 450; letter-spacing: .3em; text-transform: uppercase; line-height: 1.6; }
.label-lg { font-size: 12.5px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; line-height: 1.4; }
.link {
  display: inline-flex; align-items: center; gap: 14px; text-decoration: none;
  font-size: 11.5px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; padding-block: 12px;
}
.link::before { content: ""; width: 34px; height: 1px; background: currentColor; transition: width .7s var(--ease-out); }
.link:hover::before, .link:focus-visible::before { width: 64px; }

/* Headings whose words rise from a mask as they arrive (split by JS only) */
.sw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.sw > span { display: inline-block; transform: translateY(108%); transition: transform 1.2s var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
.is-in .sw > span { transform: none; }

.scroll-cue { display: inline-flex; align-items: center; gap: 16px; text-decoration: none; font-size: 11px; font-weight: 450; letter-spacing: .3em; text-transform: uppercase; }
.scroll-cue__line { position: relative; width: 1px; height: 56px; background: color-mix(in srgb, currentColor 25%, transparent); overflow: hidden; }
.scroll-cue__line::after { content: ""; position: absolute; inset: 0; background: currentColor; transform: translateY(-100%); animation: cue 2.4s var(--ease-io) infinite; }
@keyframes cue { 0% { transform: translateY(-100%); } 50% { transform: translateY(0); } 100% { transform: translateY(100%); } }

/* Her title lockup: number | TITLE */
.lockup { display: grid; grid-template-columns: auto auto 1fr; align-items: start; column-gap: .34em; font-size: clamp(30px, 3.3vw, 54px); line-height: 1.04; font-weight: 400; }
.lockup__num { font-weight: 300; letter-spacing: .02em; }
.lockup__rule { width: 1px; align-self: stretch; background: currentColor; margin-top: .08em; }
.lockup__title { font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.lockup__title .line { display: block; overflow: hidden; padding-bottom: .04em; }
.lockup__title .line > span { display: inline-block; }

/* ---------- Motion, chosen deliberately ----------
   "Moments" fade in once: the opening image, each project's main image on the journey,
   full-bleed renders and story images. Her spreads, image rows and drawings stay still. */
.js .moment { opacity: 0; transform: translateY(22px); transition: opacity 1.5s ease, transform 1.8s var(--ease-out); }
.js .moment.is-in { opacity: 1; transform: none; }
@keyframes fade-in { to { opacity: 1; } }
@keyframes rise { to { transform: none; } }

/* ---------- Loader (first visit per session) ---------- */
.loader { display: none; }
.js:not(.seen) .loader {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  position: fixed; inset: 0; z-index: 95; background: var(--bone);
  animation: loader-out 1s var(--ease-io) 1.35s forwards;
}
.loader__word { display: flex; gap: .7em; font-size: clamp(15px, 1.6vw, 21px); font-weight: 450; letter-spacing: .55em; text-transform: uppercase; margin-right: -.55em; }
.loader__word span { opacity: 0; animation: fade-in .9s ease forwards; }
.loader__word span + span { color: #8f8a84; animation-delay: .2s; }
.loader__line { width: 180px; height: 1px; background: var(--line); position: relative; overflow: hidden; }
.loader__line::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(0); animation: grow 1.1s var(--ease-io) .15s forwards; }
@keyframes grow { to { transform: scaleX(1); } }
@keyframes loader-out { to { transform: translateY(-100%); visibility: hidden; } }

/* ---------- Header (inverts over whatever is beneath it) ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 70; height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; padding-inline: var(--pad);
  color: #fff; mix-blend-mode: difference; pointer-events: none;
  transition: transform .9s var(--ease-out);
}
.site-header > * { pointer-events: auto; }
.site-header.is-hidden { transform: translateY(-110%); }
.wordmark { text-decoration: none; font-size: 12px; font-weight: 500; letter-spacing: .46em; text-transform: uppercase; padding-block: 14px; }
.wordmark span + span { opacity: .55; }
.header__title {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; white-space: nowrap; pointer-events: none;
  font-size: 11px; font-weight: 450; letter-spacing: .3em; text-transform: uppercase;
  opacity: 0; transform: translateY(8px); transition: opacity .6s ease, transform .8s var(--ease-out);
}
.header__title span { opacity: .55; margin-right: .8em; }
.show-title .header__title { opacity: 1; transform: none; }
.menu-btn { display: flex; align-items: center; gap: 16px; font-size: 11px; font-weight: 450; letter-spacing: .3em; text-transform: uppercase; }
.menu-btn__box { position: relative; width: 48px; height: 48px; background: #fff; display: block; }
.menu-btn__box i { position: absolute; left: 15px; width: 18px; height: 1.5px; background: #000; transition: transform .6s var(--ease-out), top .6s var(--ease-out); }
.menu-btn__box i:first-child { top: 20px; }
.menu-btn__box i:last-child { top: 27px; }
.menu-btn[aria-expanded="true"] .menu-btn__box i:first-child { top: 23.5px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__box i:last-child { top: 23.5px; transform: rotate(-45deg); }

.progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 72; pointer-events: none; }
.progress span { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(var(--pr, 0)); }

/* ---------- Menu: a white panel over a softly dimmed page ---------- */
.menu { position: fixed; inset: 0; z-index: 65; }
.menu[hidden] { display: none; }
.js .menu { display: block; visibility: hidden; transition: visibility 0s 1s; }
.js .menu.is-open { visibility: visible; transition: visibility 0s; }
.menu__scrim { position: absolute; inset: 0; background: rgba(22, 21, 20, .26); opacity: 0; transition: opacity .8s ease; }
.menu.is-open .menu__scrim { opacity: 1; }
.menu__inner {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(620px, 100%); overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; justify-content: space-between; gap: 48px;
  padding: calc(var(--header-h) + 7vh) clamp(28px, 4vw, 64px) 32px;
  background: var(--page); box-shadow: -50px 0 90px -50px rgba(40, 30, 20, .3);
  transform: translateX(100%); transition: transform 1s var(--ease-io);
}
.menu.is-open .menu__inner { transform: none; }
.menu__nav { display: grid; gap: clamp(36px, 7vh, 72px); }
.menu__primary li { overflow: hidden; }
.menu__primary a { display: inline-block; text-decoration: none; padding-block: 2px; transition: opacity .5s ease; }
.menu__w { display: inline-block; font-family: var(--serif); font-weight: 300; font-size: clamp(48px, 5.4vw, 88px); line-height: 1.02; transition: transform .7s var(--ease-out); }
.menu__primary a:hover .menu__w, .menu__primary a:focus-visible .menu__w { font-style: italic; transform: translateX(.08em); }
.menu__primary:hover a:not(:hover) { opacity: .35; }
.js .menu .menu__primary li > a { transform: translateY(105%); transition: transform 1s var(--ease-out), opacity .5s ease; }
.js .menu.is-open .menu__primary li > a { transform: none; }
.js .menu.is-open .menu__primary li:nth-child(1) > a { transition-delay: .3s, 0s; }
.js .menu.is-open .menu__primary li:nth-child(2) > a { transition-delay: .38s, 0s; }
.js .menu.is-open .menu__primary li:nth-child(3) > a { transition-delay: .46s, 0s; }
.menu__contents { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; }
.menu__group { font-size: 11px; font-weight: 450; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.menu__contents a { display: flex; gap: .9em; align-items: baseline; text-decoration: none; padding-block: 6px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); transition: color .3s ease; }
.menu__contents a .n { color: var(--ink); font-weight: 500; min-width: 1.6em; letter-spacing: .04em; }
.menu__contents a:hover, .menu__contents a:focus-visible, .menu__contents a[aria-current] { color: var(--ink); }
.menu__foot { display: grid; gap: 10px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.menu__foot .contact a { color: var(--ink); }

/* ---------- Home: statement ---------- */
.intro { background: var(--bone); padding: clamp(120px, 24vh, 280px) var(--pad) clamp(80px, 14vh, 160px); }
.intro__text {
  font-family: var(--serif); font-weight: 300; font-size: clamp(34px, 4.6vw, 84px); line-height: 1.08; letter-spacing: -.01em;
  max-width: 16.5em; text-indent: 2.2em;
}
.intro__text .wd, .overture__quote .wd { transition: opacity .25s linear; }
.intro__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px var(--gutter); margin-top: clamp(80px, 14vh, 160px); padding-top: 28px; border-top: 1px solid var(--line); }
.intro__facts dt { color: var(--muted); margin-bottom: 10px; }
.intro__facts dd { font-size: 16px; line-height: 1.65; max-width: 26em; }

/* Giant words drifting sideways */
.words { background: var(--bone); padding: 2vh 0 clamp(120px, 22vh, 260px); overflow: hidden; }
.words__label { padding-inline: var(--pad); color: var(--muted); margin-bottom: 3vh; }
.words__line {
  display: flex; gap: .32em; white-space: nowrap; margin-left: -18vw;
  font-weight: 200; text-transform: uppercase; font-size: clamp(64px, 11.5vw, 220px); line-height: 1.02; letter-spacing: -.005em;
  transform: translate3d(var(--d, 0px), 0, 0);
}
.words__line .o { color: transparent; -webkit-text-stroke: 1px var(--ink); }

/* ---------- Timelines: the work (home) and her story (about) ---------- */
.story { position: relative; max-width: 1600px; margin-inline: auto; padding: 8vh var(--pad) 14vh; }
.story__rail { position: absolute; left: var(--pad); top: 8vh; bottom: 14vh; width: 1px; background: var(--line); }
.story__rail span { position: absolute; inset: 0; background: var(--accent); transform-origin: top; transform: scaleY(var(--sp, 1)); }
.waypoint { position: relative; padding: clamp(40px, 7vh, 80px) 0 0 var(--rail); color: var(--muted); }
.waypoint .beat__dot { top: calc(clamp(40px, 7vh, 80px) + .2em); left: -6px; }
.beat {
  position: relative; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 4fr); gap: 0 var(--gutter);
  align-items: start; padding: clamp(64px, 12vh, 150px) 0 clamp(64px, 12vh, 150px) var(--rail);
}
.beat__when { position: sticky; top: 24vh; grid-row: 1 / span 2; }
.beat__dot {
  position: absolute; left: calc(-1 * var(--rail) - 6px); top: .9em; width: 13px; height: 13px; border-radius: 50%;
  background: var(--page); border: 1px solid var(--ink); transition: background-color .6s ease, border-color .6s ease, transform .6s var(--ease-out);
}
.beat.is-on .beat__dot { background: var(--accent); border-color: var(--accent); transform: scale(1.15); }
.beat__year { font-weight: 200; font-size: clamp(64px, 7.6vw, 144px); line-height: .9; letter-spacing: -.01em; }
.beat__season { color: var(--muted); margin-top: 14px; }
.beat__body { display: grid; gap: 18px; justify-items: start; padding-top: .8vw; }
.beat__place { color: var(--muted); }
.beat__title { font-family: var(--serif); font-weight: 300; font-size: clamp(36px, 3.4vw, 60px); line-height: 1.04; letter-spacing: -.01em; }
.beat__text { font-size: 17px; line-height: 1.8; color: var(--text); max-width: 32em; }
.beat__stats { display: flex; flex-wrap: wrap; gap: 20px 48px; margin-top: 8px; }
.stat { display: flex; flex-wrap: wrap; align-items: baseline; }
.stat__n, .stat__s { font-weight: 200; font-size: clamp(54px, 4.8vw, 88px); line-height: 1; }
.stat__l { flex-basis: 100%; margin-top: 8px; font-size: 11px; font-weight: 450; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
.beat__media img { width: 100%; }
.beat__media a { display: block; }
.beat__media .cap { margin-top: 12px; }
.beat--l .beat__media { grid-column: 2; grid-row: 1; }
.beat--l .beat__body { grid-column: 3; grid-row: 1; }
.beat--noimg .beat__body { grid-column: 2 / span 2; max-width: 46em; }

/* The path, as a line (home) */
.path { background: var(--bone); padding: clamp(110px, 18vh, 220px) var(--pad) clamp(100px, 16vh, 200px); }
.path__head { display: grid; gap: 18px; max-width: 1600px; margin-inline: auto; }
.path__head .label { color: var(--muted); }
.path__title { font-family: var(--serif); font-weight: 300; font-size: clamp(36px, 4.4vw, 80px); line-height: 1.06; letter-spacing: -.01em; max-width: 15em; }
.path__line { position: relative; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 16px; max-width: 1600px; margin: clamp(56px, 10vh, 110px) auto 0; padding-top: 34px; }
.path__fill { position: absolute; left: 0; right: 0; top: 6px; height: 1px; background: var(--line); }
.path__fill::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(var(--pp, 1)); }
.path__item { position: relative; display: grid; gap: 6px; align-content: start; }
.path__dot { position: absolute; left: 0; top: -34px; width: 13px; height: 13px; border-radius: 50%; background: var(--bone); border: 1px solid var(--ink); transition: background-color .6s ease, border-color .6s ease; }
.path__item.is-on .path__dot { background: var(--accent); border-color: var(--accent); }
.path__year { font-weight: 200; font-size: clamp(30px, 2.8vw, 48px); line-height: 1; }
.path__label { font-size: 13.5px; line-height: 1.45; color: var(--text); max-width: 12em; }
.path__cta { max-width: 1600px; margin: clamp(48px, 8vh, 80px) auto 0; }

/* ---------- Project opener (her divider page) ---------- */
.opener { display: grid; grid-template-columns: 1fr 1fr; background: var(--page); }
.opener__text { position: relative; min-height: 100svh; padding: calc(var(--header-h) + 13vh) clamp(24px, 6vw, 110px) 7vh clamp(24px, 8vw, 140px); display: flex; flex-direction: column; }
.opener__group { display: flex; flex-wrap: wrap; gap: 6px 2.4em; color: var(--muted); margin-bottom: 30px; }
.opener__desc { margin-top: clamp(40px, 8vh, 90px); max-width: 27em; padding-left: 2.25em; color: var(--text); }
.meta { margin-top: 40px; padding-left: 2.25em; display: grid; max-width: 30em; }
.meta div { display: grid; grid-template-columns: 7.5em 1fr; gap: 12px; padding-block: 11px; border-top: 1px solid var(--line); }
.meta dt { font-size: 10.5px; font-weight: 450; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.meta dd { font-size: 15px; }
.opener .scroll-cue { margin-top: auto; padding-top: 48px; color: var(--muted); }
.opener__media { position: relative; align-self: start; }
.opener__media > img { width: 100%; }
.badge { position: absolute; z-index: 2; pointer-events: none; }
.badge img { width: 100%; height: auto; }
.badge--tl { top: 2.4%; left: 5.8%; }
.badge--tr { top: 3.2%; right: 9%; }
.badge--bl { bottom: 3.6%; left: 9.3%; }
.badge--platte { width: 18.3%; max-width: 150px; }
.badge--rockwell { width: 23%; max-width: 170px; left: 1.8%; }
.badge--bhdp { width: 13.7%; max-width: 120px; }
.js .opener__media { opacity: 0; animation: fade-in 1.4s ease .1s forwards; }
.vt-in .opener__media { opacity: 1; animation: none; }
.js .opener .lockup__num, .js .opener .lockup__title .line > span { transform: translateY(105%); animation: rise 1.3s var(--ease-out) .35s forwards; }
.js .opener .lockup__num { overflow: hidden; }
.js .opener .lockup__title .line:nth-child(2) > span { animation-delay: .45s; }
.js .opener__group, .js .opener__desc, .js .opener .meta, .js .opener .scroll-cue { opacity: 0; animation: fade-in 1.4s ease .7s forwards; }

/* Overture: a line of her own words, lit as you read */
.overture { background: var(--bone); padding: clamp(120px, 26vh, 300px) var(--pad); }
.overture__label { color: var(--muted); margin-bottom: clamp(28px, 5vh, 56px); }
.overture__quote p { font-family: var(--serif); font-weight: 300; font-size: clamp(36px, 5.2vw, 96px); line-height: 1.05; letter-spacing: -.01em; max-width: 15em; text-indent: -.36em; }
.overture__quote p::before { content: "“"; }
.overture__quote p::after { content: "”"; }

/* ---------- Spreads (two-page layouts from the portfolio; they stay still) ---------- */
.spreads { padding-block: clamp(120px, 20vh, 240px) 0; background: var(--page); }
.spread {
  display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gutter);
  max-width: var(--max); margin-inline: auto; padding-inline: var(--pad);
  min-height: min(100svh, 64.7vw); margin-bottom: clamp(140px, 24vh, 280px);
}
.page { display: flex; flex-direction: column; justify-content: space-between; gap: clamp(28px, 4.6vh, 56px); min-width: 0; }
.spread__head { display: grid; gap: 12px; }
.spread__title { font-size: 11.5px; font-weight: 450; letter-spacing: .3em; text-transform: uppercase; line-height: 1.5; color: var(--muted); }
.spread__sub { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(28px, 2.6vw, 44px); line-height: 1.1; color: var(--ink); max-width: 16em; }
.body { max-width: 62ch; color: var(--text); font-size: 16px; line-height: 1.85; }
.body.inset { padding-inline: 7.5%; }
.body.small { font-size: 15px; text-align: center; padding-inline: 12%; }
.cap { margin-top: 12px; font-size: 12px; color: var(--muted); letter-spacing: .04em; line-height: 1.5; }
.cap--r { text-align: right; }
.cap--c { text-align: center; }

.fig__media { position: relative; }
.zoom { display: block; width: 100%; cursor: zoom-in; position: relative; }
.zoom img { width: 100%; transition: opacity .4s ease; }
.zoom:hover img { opacity: .9; }
.fig--inset { padding-inline: 9%; }
.fig--narrow { padding-inline: 5% 3%; }
.fig--parti { width: 67%; margin-left: 16%; }
.fig--tall { height: 100%; display: flex; flex-direction: column; justify-content: center; }
.fig--tall .fig__media { width: 84%; margin-inline: auto; }
.row__items { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: clamp(8px, .9vw, 14px); align-items: end; }
.row--tiles .zoom { background: #d8d4d1; aspect-ratio: 181 / 124; }
.row--tiles .zoom img { width: 100%; height: 100%; object-fit: contain; }
.row--insp .row__items { grid-template-columns: 224fr 308fr; }
.row--elev .row__items { grid-template-columns: 308fr 455fr; gap: clamp(16px, 2vw, 32px); }
.legend { position: absolute; left: -1%; bottom: 0; font-size: 11.5px; color: var(--muted); letter-spacing: .04em; }
.legend__title { letter-spacing: .2em; text-transform: uppercase; margin-bottom: 6px; }
.legend li { display: flex; align-items: center; gap: 10px; padding-block: 3px; }
.dot { width: 13px; height: 13px; border-radius: 50%; flex: none; }
.fig--legend .zoom img { width: 92%; margin-left: auto; }
.plankey { position: absolute; left: 0; bottom: 0; font-size: 10.5px; line-height: 1.55; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; }
.plankey ol { list-style: decimal inside; margin-bottom: 8px; }
.plankey dl div { display: flex; gap: .5em; }
.plankey dt::after { content: ":"; }
.plankey .total { margin-top: 6px; }
.plan-label { position: absolute; font-size: clamp(8px, .62vw, 10px); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); pointer-events: none; }
.plans { display: grid; gap: clamp(16px, 3vh, 32px); height: 100%; align-content: space-between; }
.plan { display: grid; grid-template-columns: 3.4em 1fr; align-items: start; gap: 12px; }
.plan__num { font-family: var(--serif); font-weight: 300; font-size: clamp(26px, 2.2vw, 36px); line-height: 1; text-align: right; padding-top: 6px; }
.plan .fig__media { max-width: 92%; }
.fixtures { display: grid; gap: 6px; padding-inline: 13% 6%; }
/* Liquid Persuasion site mosaic keeps the crops Nina chose in the portfolio */
.mosaic { display: grid; grid-template-columns: 270fr 261fr; grid-template-rows: auto auto auto; gap: clamp(8px, 1vw, 12px); height: 100%; }
.mosaic .fig__media, .mosaic .zoom { height: 100%; }
.mosaic .zoom { overflow: hidden; }
.mosaic .zoom img { height: 100%; object-fit: cover; }
.m-silo { grid-row: 1 / 3; }
.m-visit, .m-beer { grid-column: 2; }
.m-cheers { grid-column: 1 / -1; }
.m-silo .zoom img { aspect-ratio: 270 / 454; }
.m-visit .zoom img { aspect-ratio: 261 / 241; }
.m-beer .zoom img { aspect-ratio: 260 / 203; }
.m-cheers .zoom img { aspect-ratio: 540 / 256; }
.split-b { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 32px); align-items: center; }
.split-b .body { font-size: 14.5px; }
.spread--pair { min-height: 0; align-items: start; }
.spread--pair .page { justify-content: flex-start; }

/* Full-bleed spreads, whole */
.full { position: relative; margin-bottom: clamp(140px, 24vh, 280px); }
.full__frame .zoom img { width: 100%; }
.full__label {
  position: absolute; left: var(--pad); top: clamp(18px, 3vw, 44px); color: #fff; pointer-events: none;
  font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(22px, 2.2vw, 36px);
  text-shadow: 0 1px 24px rgba(0, 0, 0, .4);
}

/* ---------- End of a project: continue to the next ---------- */
.next {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 30vw); align-items: end; gap: var(--gutter);
  padding: clamp(110px, 18vh, 200px) var(--pad) clamp(80px, 12vh, 140px);
  background: var(--bone); color: var(--ink); text-decoration: none; border-top: 1px solid var(--line);
}
.next__text { display: grid; gap: 26px; justify-items: start; align-content: end; }
.next__step { color: var(--muted); }
.next__title { font-weight: 200; text-transform: uppercase; font-size: clamp(48px, 7vw, 132px); line-height: .96; letter-spacing: .005em; max-width: 8em; }
.next__kind { font-size: 11.5px; font-weight: 450; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.next__go {
  display: inline-flex; align-items: center; gap: 14px; margin-top: 10px; padding: 18px 30px; background: var(--ink); color: var(--page);
  font-size: 11.5px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; transition: background-color .5s ease, gap .6s var(--ease-out);
}
.next:hover .next__go, .next:focus-visible .next__go { background: var(--accent); gap: 22px; }
.next__frame img { width: 100%; }

/* ---------- About ---------- */
.about__hero {
  min-height: 100svh; display: flex; flex-direction: column; justify-content: space-between; gap: 48px;
  padding: calc(var(--header-h) + 12vh) var(--pad) 7vh; background: var(--page);
}
.about__kicker { color: var(--muted); }
.about__name { font-weight: 200; text-transform: uppercase; font-size: clamp(56px, 11vw, 212px); line-height: .9; letter-spacing: .005em; margin-top: 2vh; }
.about__intro { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gutter); align-items: end; }
.about__lede { font-family: var(--serif); font-weight: 300; font-size: clamp(26px, 2.6vw, 44px); line-height: 1.2; max-width: 20em; }
.about__role { color: var(--muted); text-align: right; }
.about__hero .scroll-cue { color: var(--muted); }
.beyond { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--gutter); align-items: center; background: var(--bone); padding: clamp(110px, 18vh, 220px) var(--pad); }
.beyond__media img { width: 100%; }
.beyond__text { display: grid; gap: 22px; max-width: 34em; }
.beyond__text .label { color: var(--muted); }
.beyond__title { font-family: var(--serif); font-weight: 300; font-size: clamp(40px, 4.6vw, 84px); line-height: 1.02; letter-spacing: -.01em; }
.beyond__body { font-size: 17px; line-height: 1.85; color: var(--text); }

/* The résumé sheet */
.sheet { background: var(--bone); padding: clamp(40px, 6vh, 80px) var(--pad) clamp(110px, 18vh, 220px); border-top: 1px solid var(--line); }
.sheet__bar { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; max-width: 1440px; margin: 0 auto clamp(32px, 6vh, 64px); }
.sheet__title { font-weight: 200; text-transform: uppercase; font-size: clamp(48px, 6.4vw, 120px); line-height: .95; letter-spacing: .005em; }
.sheet__page { max-width: 1440px; margin-inline: auto; background: var(--page); padding: clamp(28px, 5vw, 88px); box-shadow: 0 50px 90px -50px rgba(40, 30, 20, .3); }
.sheet__head { display: flex; justify-content: space-between; align-items: start; gap: 32px; flex-wrap: wrap; }
.sheet__name { font-size: clamp(32px, 3.6vw, 56px); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1; }
.sheet__role { margin-top: 10px; font-size: clamp(15px, 1.4vw, 20px); letter-spacing: .06em; text-transform: uppercase; }
.sheet__contact { text-align: right; }
.sheet__contact .contact { margin-top: 6px; justify-items: end; }
.resume__grid { display: grid; grid-template-columns: 1fr 2fr 1fr; margin-top: clamp(40px, 7vh, 80px); }
.col { padding-inline: clamp(16px, 2.4vw, 40px); display: grid; align-content: start; gap: 18px; }
.col--a { padding-left: 0; }
.col--c { padding-right: 0; }
.col--b { border-inline: 1px solid var(--line); }
.col .label-lg:not(:first-child) { margin-top: 40px; }
.edu { display: grid; gap: 12px; color: var(--text); }
.edu__school { font-family: var(--serif); font-size: 26px; font-weight: 400; line-height: 1.1; color: var(--ink); }
.plain-list { display: grid; gap: 6px; color: var(--text); }
.jobs { display: grid; grid-template-columns: 1fr 1fr; gap: 48px clamp(20px, 2.6vw, 44px); }
.job__firm { font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 1.9vw, 30px); line-height: 1.1; }
.job__meta { font-size: 11px; font-weight: 450; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.job__role { font-style: italic; margin-block: 8px 12px; }
.job ul, .act ul { display: grid; gap: 7px; }
.job li, .act li { position: relative; padding-left: 16px; font-size: 15px; line-height: 1.6; color: var(--text); }
.job li::before, .act li::before { content: ""; position: absolute; left: 0; top: .78em; width: 6px; height: 1px; background: var(--ink); }
.act { display: grid; gap: 6px; }
.act__name { font-size: 12.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; }
.act__name em { text-transform: none; letter-spacing: 0; font-weight: 340; }

/* ---------- Footer: her thank-you page (slim on project pages) ---------- */
.thanks { background: var(--bone); padding: clamp(110px, 18vh, 220px) var(--pad) 28px; border-top: 1px solid var(--line); }
.thanks__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); max-width: var(--max); margin-inline: auto; align-items: start; }
.thanks__word { font-weight: 300; font-size: clamp(96px, 14vw, 260px); line-height: .82; letter-spacing: -.03em; }
.thanks__word > span, .thanks__word .sw { display: block; width: max-content; }
.thanks__word > span + span, .thanks__word .sw + .sw { margin-left: .4em; }
.thanks__lead, .slim__lead { margin-top: clamp(40px, 8vh, 80px); max-width: 22em; font-family: var(--serif); font-weight: 300; font-size: clamp(22px, 1.8vw, 28px); line-height: 1.28; }
.contact { display: grid; gap: 2px; }
.contact a { display: inline-block; text-decoration: none; padding-block: 6px; background: linear-gradient(currentColor, currentColor) left 92% / 0 1px no-repeat; transition: background-size .7s var(--ease-out); }
.contact a:hover { background-size: 100% 1px; }
.contact--lg { margin-top: 28px; }
.contact--lg a { font-size: clamp(22px, 2.2vw, 34px); font-weight: 300; }
.thanks__media img { width: 100%; }
.thanks__name { margin-top: 28px; text-align: center; font-size: clamp(20px, 2.6vw, 42px); font-weight: 320; letter-spacing: .4em; padding-left: .4em; text-transform: uppercase; }
.thanks--slim { padding-top: clamp(64px, 10vh, 120px); background: var(--page); }
.slim { display: flex; justify-content: space-between; align-items: end; gap: 32px 64px; flex-wrap: wrap; max-width: var(--max); margin-inline: auto; }
.slim__lead { margin-top: 0; }
.slim .contact--lg { margin-top: 0; justify-items: end; }
.footbar { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; max-width: var(--max); margin: clamp(64px, 12vh, 140px) auto 0; padding-top: 22px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.footbar nav { display: flex; gap: 8px 30px; flex-wrap: wrap; }
.footbar a { text-decoration: none; letter-spacing: .24em; text-transform: uppercase; font-size: 11px; font-weight: 500; color: var(--ink); padding-block: 12px; }

/* ---------- Cursor ring (fine pointers only; no label, the pointer stays) ---------- */
.cursor { display: none; }
.has-cursor .cursor {
  display: block; position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none;
  width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 1px solid #fff; mix-blend-mode: difference;
  transform: translate3d(var(--cx, -100px), var(--cy, -100px), 0); opacity: 0; scale: .5;
  transition: opacity .35s ease, scale .5s var(--ease-out);
}
.has-cursor .cursor.is-on { opacity: 1; scale: 1; }

/* ---------- Image viewer ---------- */
.lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(243, 241, 237, .985); color: var(--ink); display: none; grid-template-rows: 1fr auto; }
.lightbox[open] { display: grid; animation: fade-in .4s ease; }
.lightbox::backdrop { background: transparent; }
.lightbox__stage { display: grid; place-items: center; padding: clamp(16px, 4vw, 64px); min-height: 0; }
.lightbox__stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.lightbox__bar { display: grid; grid-template-columns: 1fr auto auto; gap: 24px; align-items: center; padding: 12px var(--pad) 22px; }
.lightbox__cap { font-family: var(--serif); font-style: italic; font-size: 20px; line-height: 1.3; }
.lightbox__count { font-size: 12px; color: var(--muted); letter-spacing: .16em; }
.lightbox__ctrls { display: flex; gap: 8px; }
.lightbox__ctrls button { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--line); background: var(--page); transition: background .3s, color .3s; }
.lightbox__ctrls button:hover { background: var(--ink); color: var(--page); }
.lightbox__ctrls svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .beat { grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); }
  .beat__when { grid-row: 1 / span 3; }
  .beat__body, .beat--l .beat__body, .beat--noimg .beat__body { grid-column: 2; grid-row: auto; }
  .beat__media, .beat--l .beat__media { grid-column: 2; grid-row: auto; max-width: 440px; margin-top: 32px; }
  .path__line { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 48px; }
  .path__fill { display: none; }
  .path__dot { top: -22px; }
  .resume__grid { grid-template-columns: 1fr 1fr; row-gap: 64px; }
  .col--b { grid-column: 1 / -1; grid-row: 1; border: 0; padding-inline: 0; }
  .col--a { padding-right: 32px; border-right: 1px solid var(--line); }
  .col--c { padding-left: 32px; }
}

/* ---------- Phone ---------- */
@media (max-width: 860px) {
  :root { --header-h: 70px; --rail: 26px; }
  body { font-size: 16px; }
  .menu-btn__label, .header__title { display: none; }
  .menu__contents { grid-template-columns: 1fr; }


  .intro { padding-block: 120px 72px; }
  .intro__text { text-indent: 1.2em; }
  .intro__facts { grid-template-columns: 1fr; margin-top: 72px; }


  .story { padding-bottom: 10vh; }
  .beat { display: flex; flex-direction: column; gap: 22px; padding-block: 56px; }
  .beat__when { position: relative; top: auto; display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
  .beat__dot { top: .5em; }
  .beat__year { font-size: 64px; }
  .beat__season { margin-top: 0; }
  .beat__media, .beat--l .beat__media { max-width: none; width: 100%; margin-top: 0; }
  .path__line { grid-template-columns: 1fr; row-gap: 28px; padding: 0 0 0 var(--rail); border-left: 1px solid var(--line); }
  .path__dot { top: .5em; left: calc(-1 * var(--rail) - 7px); }
  .path__item { grid-template-columns: 4.2em 1fr; align-items: baseline; gap: 12px; }
  .path__year { font-size: 30px; }
  .path__label { max-width: none; }

  .opener { grid-template-columns: 1fr; }
  .opener__text { min-height: 0; padding: calc(var(--header-h) + 48px) var(--pad) 40px; }
  .opener__desc, .meta { padding-left: 0; }
  .opener__desc { margin-top: 32px; }
  .opener .scroll-cue { display: none; }
  .overture { padding-block: 96px; }
  .overture__quote p { text-indent: 0; }

  .spread { grid-template-columns: 1fr; min-height: 0; row-gap: 44px; margin-bottom: 110px; }
  .page { justify-content: flex-start; gap: 36px; }
  .body.inset, .body.small { padding-inline: 0; text-align: left; }
  .fig--inset, .fig--narrow { padding-inline: 0; }
  .fig--parti { width: 100%; margin-left: 0; }
  .fig--legend .zoom img { width: 100%; }
  .legend, .plankey { position: static; margin-top: 16px; }
  .plankey { display: flex; gap: 32px; }
  .fig--tall .fig__media { width: 100%; }
  .split-b { grid-template-columns: 1fr; }
  .full { margin-bottom: 110px; }
  .next { grid-template-columns: 1fr; }
  .next__frame { order: -1; width: 72%; }
  .next__title { font-size: clamp(36px, 12.4vw, 64px); }

  .about__intro { grid-template-columns: 1fr; gap: 24px; }
  .about__role { text-align: left; }
  .beyond { grid-template-columns: 1fr; }
  .sheet__contact, .sheet__contact .contact { text-align: left; justify-items: start; }
  .thanks__grid { grid-template-columns: 1fr; }
  .slim .contact--lg { justify-items: start; }
  .resume__grid { grid-template-columns: 1fr; }
  .col, .col--a, .col--c { padding: 0; border: 0; }
  .col + .col { margin-top: 56px; }
  .jobs { grid-template-columns: 1fr; }
  .lightbox__bar { grid-template-columns: 1fr auto; }
  .lightbox__cap { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .plankey { flex-direction: column; gap: 8px; }
}

/* ---------- Reduced motion: everything visible, nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .js .loader { display: none !important; }
}

/* ---------- Print: the About page prints only the résumé sheet ---------- */
@media print {
  @page { size: letter; margin: .45in; }
  html, body { background: #fff !important; }
  .page-about > *:not(main), .page-about main > *:not(.sheet), .page-about .sheet__bar { display: none !important; }
  .page-about .sheet { padding: 0; background: #fff; border: 0; }
  .sheet__page { max-width: none; padding: 0; box-shadow: none; font-size: 8.6pt; line-height: 1.4; }
  .sheet__name { font-size: 22pt; }
  .sheet__role { font-size: 11pt; }
  .sheet .resume__grid { grid-template-columns: 1fr 2fr 1fr !important; margin-top: 18pt; }
  .sheet .col { padding-inline: 10pt !important; gap: 8pt; margin-top: 0 !important; }
  .sheet .col--a { padding-left: 0 !important; border: 0 !important; }
  .sheet .col--c { padding-right: 0 !important; border: 0 !important; }
  .sheet .col--b { grid-column: auto !important; grid-row: auto !important; border-inline: 1px solid #999 !important; padding-inline: 10pt !important; }
  .sheet .jobs { grid-template-columns: 1fr 1fr !important; gap: 14pt 12pt; }
  .sheet .label-lg { font-size: 8.6pt; }
  .sheet .col .label-lg:not(:first-child) { margin-top: 14pt; }
  .sheet .job__firm { font-size: 11pt; }
  .sheet .job li, .sheet .act li, .sheet .plain-list li, .sheet .edu p { font-size: 8.2pt; line-height: 1.4; }
  .sheet .edu .edu__school { font-size: 11pt; }
  .sheet .job__meta { font-size: 7.4pt; letter-spacing: .12em; }
  .sheet .act__name { font-size: 8.6pt; }
  .sheet .contact a { font-size: 8.6pt; padding: 0; }
  .sheet__head { flex-direction: row !important; }
  .sheet__contact { text-align: right !important; }
  .sheet__contact .contact { justify-items: end !important; }
}
.menu-open .header__title { opacity: 0; }

/* ---------- Project pages as pages (desktop, landscape) ----------
   Each section fills the screen so a scroll turns one page, like the printed portfolio. */
@media (min-width: 861px) and (orientation: landscape) {
  .page-project .opener { grid-template-columns: minmax(0, 1fr) auto; min-height: 100svh; }
  .page-project .opener__media { height: 100svh; }
  .page-project .opener__media > img { height: 100%; width: auto; max-width: 58vw; object-fit: contain; }
  .page-project .overture { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-block: calc(var(--header-h) + 4vh) 8vh; }
  .page-project .spreads { padding-block: 0; }
  .page-project .spread { min-height: 100svh; margin-bottom: 0; padding-block: calc(var(--header-h) + 3vh) 7vh; }
  .page-project .spread + .spread, .page-project .full + .spread { border-top: 1px solid var(--line); }
  .page-project .full { height: 100svh; margin-bottom: 0; display: flex; align-items: center; justify-content: center; }
  .page-project .full__frame { position: relative; height: 100%; }
  .page-project .full__frame .zoom, .page-project .full__frame .zoom img { height: 100%; width: auto; max-width: 100vw; object-fit: contain; }
  .page-project .next { min-height: 100svh; }
}

/* Page index for project pages (built by JS) */
.pages {
  position: fixed; right: clamp(14px, 1.6vw, 28px); top: 50%; translate: 0 -50%; z-index: 60;
  display: grid; gap: 4px; justify-items: end; color: #fff; mix-blend-mode: difference;
  opacity: 0; transition: opacity .6s ease;
}
.pages.is-visible { opacity: 1; }
.pages__count { font-size: 10.5px; font-weight: 450; letter-spacing: .24em; margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.pages button { display: flex; align-items: center; justify-content: flex-end; gap: 12px; height: 22px; padding-left: 12px; font-size: 10.5px; font-weight: 450; letter-spacing: .22em; text-transform: uppercase; }
.pages button span { opacity: 0; transform: translateX(6px); transition: opacity .4s ease, transform .5s var(--ease-out); white-space: nowrap; }
.pages button i { display: block; width: 14px; height: 1px; background: currentColor; opacity: .45; transition: width .5s var(--ease-out), opacity .4s ease; }
.pages button[aria-current="true"] i { width: 34px; opacity: 1; }
.pages:hover button span, .pages button:focus-visible span { opacity: .9; transform: none; }

.menu-open .pages { opacity: 0; pointer-events: none; }

/* ======================================================================
   Editorial: the site as an issue of a design magazine about Nina's work
   ====================================================================== */

/* ---------- Cover ---------- */
.cover {
  position: relative; min-height: 100svh; background: var(--page);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; column-gap: var(--gap);
  padding: calc(var(--header-h) + 1vh) var(--pad) 5vh;
}
.cover__mast {
  grid-column: 1 / -1; display: flex; justify-content: space-between; gap: .28em; margin: 0;
  font-weight: 200; text-transform: uppercase; font-size: clamp(54px, 12.4vw, 240px); line-height: .8; letter-spacing: .02em;
}
.cover__issue {
  grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 2.2vh 0 4vh; padding: 11px 0; border-block: 1px solid var(--ink);
  font-size: 11px; font-weight: 450; letter-spacing: .3em; text-transform: uppercase;
}
.cover__img { grid-column: 4 / 10; grid-row: 3; justify-self: center; align-self: start; }
.cover__img img { height: min(58vh, 46vw); width: auto; }
.cover__word {
  grid-column: 1 / -1; grid-row: 3; align-self: start; justify-self: center; z-index: 2; pointer-events: none;
  margin-top: calc(min(58vh, 46vw) * .7); white-space: nowrap;
  color: #fff; mix-blend-mode: difference; font-weight: 300; font-size: clamp(48px, 7.6vw, 150px); line-height: .9; letter-spacing: -.02em;
}
.cover__lines { grid-row: 3; align-self: start; display: grid; }
.cover__lines--l { grid-column: 1 / 4; }
.cover__lines--r { grid-column: 10 / -1; text-align: right; }
.cover__lines a { display: grid; gap: 6px; padding: 18px 0 22px; border-top: 1px solid var(--line); text-decoration: none; }
.cover__lines--r a { justify-items: end; }
.cl__n { font-size: 11px; font-weight: 500; letter-spacing: .24em; }
.cl__t { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(24px, 2.2vw, 40px); line-height: 1.05; transition: transform .7s var(--ease-out); }
.cl__d { font-size: 10.5px; font-weight: 450; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.cover__lines--l a:hover .cl__t { transform: translateX(.2em); }
.cover__lines--r a:hover .cl__t { transform: translateX(-.2em); }
.cover__also .cl__n { color: var(--accent); }
.js .cover__mast .cover__first, .js .cover__mast .cover__last { display: inline-block; opacity: 0; transform: translateY(.25em); animation: cover-in 1.4s var(--ease-out) var(--intro) forwards; }
.js .cover__mast .cover__last { animation-delay: calc(var(--intro) + .1s); }
.js .cover__img.moment { transform: none; transition: none; animation: fade-in 1.8s ease calc(var(--intro) + .2s) forwards; }
.js .cover__word, .js .cover__issue, .js .cover__lines { opacity: 0; animation: fade-in 1.4s ease calc(var(--intro) + .7s) forwards; }
@keyframes cover-in { to { opacity: 1; transform: none; } }

/* ---------- Contents (her page 3) ---------- */
.toc { background: var(--bone); padding: clamp(100px, 16vh, 180px) var(--pad); }
.toc__head { display: flex; justify-content: space-between; align-items: end; gap: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--ink); max-width: 1600px; margin-inline: auto; }
.toc__title { font-weight: 200; text-transform: uppercase; font-size: clamp(56px, 8.6vw, 164px); line-height: .9; letter-spacing: .005em; }
.toc__issue { color: var(--muted); padding-bottom: .6em; }
.toc__body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gutter); margin: clamp(32px, 6vh, 72px) auto 0; max-width: 1600px; align-items: start; }
.toc__group { color: var(--muted); margin: 32px 0 6px; }
.toc__group:first-child { margin-top: 0; }
.toc__row { display: grid; grid-template-columns: 3.4em minmax(0, 1fr); column-gap: 18px; align-items: baseline; padding: 18px 0; border-top: 1px solid var(--line); text-decoration: none; }
.toc__pg { grid-row: 1 / span 2; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(38px, 3.4vw, 62px); line-height: .9; }
.toc__t { font-weight: 300; text-transform: uppercase; letter-spacing: .06em; font-size: clamp(18px, 1.6vw, 26px); line-height: 1.2; transition: transform .7s var(--ease-out); }
.toc__d { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 19px; color: var(--muted); }
.toc__row:hover .toc__t, .toc__row:focus-visible .toc__t { transform: translateX(.3em); }
.toc__img img { width: 100%; }

.intro__kicker { color: var(--muted); margin-bottom: clamp(28px, 5vh, 56px); }
.words { padding-top: 0; }

/* ---------- Features ---------- */
.features { background: var(--page); }
.feat {
  position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: clamp(20px, 3.4vh, 40px);
  align-items: start; max-width: 1680px; margin-inline: auto; padding: clamp(36px, 6vh, 72px) var(--pad) clamp(110px, 18vh, 200px);
}
.feat__run {
  grid-column: 1 / -1; grid-row: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 2.6em;
  padding-bottom: 14px; border-bottom: 1px solid var(--ink); margin-bottom: clamp(16px, 4vh, 56px);
  font-size: 11px; font-weight: 450; letter-spacing: .3em; text-transform: uppercase;
}
.feat__pg { margin-left: auto; font-family: var(--serif); font-style: italic; font-size: 18px; letter-spacing: 0; text-transform: none; }
.feat__title { margin: 0; font-weight: 200; text-transform: uppercase; line-height: .82; letter-spacing: -.01em; }
.feat__t { display: block; }
.feat__deck { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(30px, 3.8vw, 68px); line-height: 1; }
.feat__text { display: grid; gap: 18px; justify-items: start; }
.feat__dek { font-size: 16.5px; line-height: 1.8; color: var(--text); max-width: 30em; }
.feat__dek::first-letter { float: left; font-family: var(--serif); font-weight: 300; font-size: 4.4em; line-height: .8; margin: .07em .1em 0 0; color: var(--ink); }
.feat__quote { padding-top: 18px; border-top: 1px solid var(--line); }
.feat__quote p { font-family: var(--serif); font-weight: 300; font-size: clamp(24px, 2.1vw, 38px); line-height: 1.18; }
.feat__quote p::before { content: "“"; color: var(--accent); }
.feat__quote p::after { content: "”"; color: var(--accent); }
.feat__a img, .feat__b img, .feat__c img { width: 100%; }
.feat__a > a, .feat__b > a, .feat__c > a { display: block; }
.feat__cap { margin-top: 10px; font-size: 11.5px; color: var(--muted); letter-spacing: .03em; line-height: 1.4; }
.feat__cap span { font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--ink); margin-right: .35em; letter-spacing: 0; }

/* 01 Orlando: the name spans the page; the axon sits in the text */
.feat--orlando-sales-office .feat__title { grid-column: 1 / -1; grid-row: 2; font-size: clamp(60px, 18.4vw, 330px); }
.feat--orlando-sales-office .feat__deck { grid-column: 8 / -1; grid-row: 3; text-align: right; margin-top: -1.2vw; }
.feat--orlando-sales-office .feat__text { grid-column: 1 / 5; grid-row: 4; }
.feat--orlando-sales-office .feat__quote { grid-column: 1 / 5; grid-row: 5; align-self: end; }
.feat--orlando-sales-office .feat__a { grid-column: 5 / 10; grid-row: 4 / 6; }
.feat--orlando-sales-office .feat__b { grid-column: 10 / -1; grid-row: 4; }
.feat--orlando-sales-office .feat__c { grid-column: 10 / -1; grid-row: 5; align-self: end; }

/* 02 Westwood: the building on the left, the story on the right */
.feat--westwood-town-hall-flats .feat__a { grid-column: 1 / 7; grid-row: 2 / 7; }
.feat--westwood-town-hall-flats .feat__title { grid-column: 7 / -1; grid-row: 2; font-size: clamp(54px, 7.6vw, 146px); }
.feat--westwood-town-hall-flats .feat__deck { grid-column: 7 / -1; grid-row: 3; }
.feat--westwood-town-hall-flats .feat__text { grid-column: 7 / 12; grid-row: 4; }
.feat--westwood-town-hall-flats .feat__quote { grid-column: 7 / -1; grid-row: 5; }
.feat--westwood-town-hall-flats .feat__b { grid-column: 7 / 10; grid-row: 6; align-self: end; }
.feat--westwood-town-hall-flats .feat__c { grid-column: 10 / -1; grid-row: 6; align-self: end; }

/* 03 Dwyer: the name parts around the room */
.feat--dwyer-residence .feat__title { display: contents; }
.feat--dwyer-residence .feat__t { font-size: clamp(60px, 11.4vw, 220px); align-self: center; }
.feat--dwyer-residence .feat__t1 { grid-column: 1 / 5; grid-row: 2; text-align: right; }
.feat--dwyer-residence .feat__t2 { grid-column: 9 / -1; grid-row: 2; }
.feat--dwyer-residence .feat__a { grid-column: 5 / 9; grid-row: 2; }
.feat--dwyer-residence .feat__deck { grid-column: 1 / -1; grid-row: 3; text-align: center; font-family: var(--sans); font-style: normal; font-weight: 200; text-transform: uppercase; letter-spacing: .14em; font-size: clamp(36px, 6.4vw, 120px); padding-left: .14em; }
.feat--dwyer-residence .feat__b { grid-column: 1 / 5; grid-row: 4; }
.feat--dwyer-residence .feat__text { grid-column: 5 / 9; grid-row: 4; justify-items: center; text-align: center; }
.feat--dwyer-residence .feat__dek::first-letter { float: none; font: inherit; margin: 0; }
.feat--dwyer-residence .feat__quote { grid-column: 9 / -1; grid-row: 4; }
.feat--dwyer-residence .feat__c { display: none; }

/* 04 Equinox: the render at full measure, the materials laid over its edge */
.feat--equinox-amaala-resort .feat__title { grid-column: 1 / 9; grid-row: 2; font-size: clamp(56px, 12.4vw, 240px); }
.feat--equinox-amaala-resort .feat__deck { grid-column: 9 / -1; grid-row: 2; align-self: end; text-align: right; padding-bottom: .6vw; }
.feat--equinox-amaala-resort .feat__a { grid-column: 1 / -1; grid-row: 3; }
.feat--equinox-amaala-resort .feat__b { grid-column: 9 / 12; grid-row: 4; margin-top: calc(-1 * clamp(90px, 15vw, 280px)); position: relative; z-index: 2; background: var(--page); padding: 10px 10px 4px; box-shadow: 0 34px 70px -34px rgba(40, 30, 20, .4); }
.feat--equinox-amaala-resort .feat__text { grid-column: 1 / 6; grid-row: 4; }
.feat--equinox-amaala-resort .feat__quote { grid-column: 6 / 9; grid-row: 4; }

/* 05 Biomachina: body and machine side by side */
.feat--biomachina .feat__a { grid-column: 1 / 6; grid-row: 2 / 5; }
.feat--biomachina .feat__title { grid-column: 6 / -1; grid-row: 2; text-align: right; font-size: clamp(56px, 10.4vw, 200px); }
.feat--biomachina .feat__deck { grid-column: 6 / -1; grid-row: 3; text-align: right; }
.feat--biomachina .feat__b { grid-column: 7 / -1; grid-row: 4; align-self: end; }
.feat--biomachina .feat__text { grid-column: 1 / 6; grid-row: 5; }
.feat--biomachina .feat__quote { grid-column: 7 / -1; grid-row: 5; }

/* 06 Liquid Persuasion: the title runs into the ink */
.feat--liquid-persuasion .feat__title { grid-column: 1 / -1; grid-row: 2; position: relative; z-index: 3; color: #fff; mix-blend-mode: difference; font-size: clamp(52px, 10.4vw, 200px); pointer-events: none; }
.feat--liquid-persuasion .feat__t2 { padding-left: 9vw; }
.feat--liquid-persuasion .feat__b { grid-column: 8 / -1; grid-row: 2 / 5; margin-top: 5vw; }
.feat--liquid-persuasion .feat__deck { grid-column: 1 / 7; grid-row: 3; }
.feat--liquid-persuasion .feat__a { grid-column: 1 / 8; grid-row: 4; }
.feat--liquid-persuasion .feat__text { grid-column: 1 / 5; grid-row: 5; }
.feat--liquid-persuasion .feat__quote { grid-column: 5 / 8; grid-row: 5; }
.feat--liquid-persuasion .feat__c { grid-column: 8 / -1; grid-row: 5; }

/* 07 Watercolors: hung like prints */
.feat--watercolor-studies .feat__a { grid-column: 1 / 5; grid-row: 2; align-self: end; }
.feat--watercolor-studies .feat__b { grid-column: 5 / 9; grid-row: 2; align-self: end; }
.feat--watercolor-studies .feat__c { grid-column: 9 / -1; grid-row: 2; align-self: end; }
.feat--watercolor-studies .feat__title { grid-column: 1 / -1; grid-row: 3; text-align: center; font-size: clamp(56px, 12.6vw, 240px); margin-top: 4vh; }
.feat--watercolor-studies .feat__deck { grid-column: 1 / -1; grid-row: 4; text-align: center; margin-top: -.6vw; }
.feat--watercolor-studies .feat__text { grid-column: 4 / 10; grid-row: 5; justify-items: center; text-align: center; }
.feat--watercolor-studies .feat__dek::first-letter { float: none; font: inherit; margin: 0; }
.feat--watercolor-studies .feat__quote { grid-column: 4 / 10; grid-row: 6; text-align: center; }

/* ---------- Running feet and page numbers on project pages ---------- */
.spread { position: relative; }
.runhead, .folio { display: none; }
@media (min-width: 861px) {
  .runhead { position: absolute; left: calc(var(--pad) + 3.4em); right: calc(var(--pad) + 3.4em); bottom: 2.6vh; display: flex; justify-content: space-between; font-size: 10.5px; font-weight: 450; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); }
  .folio { display: block; position: absolute; bottom: 2.2vh; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 19px; }
  .folio--l { left: var(--pad); }
  .folio--r { right: var(--pad); }
  .folio--opener { left: var(--pad); bottom: 3vh; }
}

/* ---------- Editorial on tablet and phone ---------- */
@media (max-width: 1100px) {
  .toc__body { grid-template-columns: 1fr; }
  .toc__img { max-width: 560px; }
}
@media (max-width: 860px) {
  .cover { grid-template-columns: 1fr 1fr; grid-template-rows: none; padding-top: calc(var(--header-h) + 3vh); }
  .cover__mast { font-size: 14.2vw; justify-content: flex-start; }
  .cover__mast { order: 0; } .cover__issue { order: 1; } .cover__img { order: 2; } .cover__word { order: 3; } .cover__lines--l { order: 4; } .cover__lines--r { order: 5; }
  .cover__lines--r { margin-top: 0; }
  .cover__issue { flex-direction: column; gap: 4px; margin-bottom: 28px; }
  .cover__img { grid-column: 1 / -1; grid-row: auto; justify-self: stretch; }
  .cover__img img { width: 100%; height: auto; }
  .cover__word { grid-row: auto; grid-column: 1 / -1; margin-top: -13vw; font-size: 12.6vw; justify-self: start; }
  .cover__lines, .cover__lines--l, .cover__lines--r { grid-column: 1 / -1; grid-row: auto; text-align: left; margin-top: 28px; }
  .cover__lines--r a { justify-items: start; }
  .toc__head { flex-direction: column; align-items: start; gap: 8px; }

  .feat { grid-template-columns: 1fr 1fr; row-gap: 22px; padding-bottom: 110px; }
  .feat > *, .feat .feat__t { grid-column: 1 / -1 !important; grid-row: auto !important; margin: 0 !important; text-align: left !important; justify-items: start !important; }
  .feat .feat__title, .feat--dwyer-residence .feat__title { display: block; font-size: clamp(40px, 14.4vw, 96px) !important; }
  .feat .feat__t { display: inline; font-size: inherit !important; padding: 0 !important; }
  .feat--liquid-persuasion .feat__t { display: block; }
  .feat__run { order: 0; } .feat__title { order: 1; } .feat__deck { order: 2; } .feat__a { order: 3; }
  .feat__text { order: 4; } .feat__quote { order: 5; } .feat__b { order: 6; } .feat__c { order: 7; }
  .feat .feat__b { grid-column: 1 !important; }
  .feat .feat__c { grid-column: 2 !important; }
  .feat:not(:has(.feat__c)) .feat__b, .feat--dwyer-residence .feat__b { grid-column: 1 / -1 !important; }
  .feat--dwyer-residence .feat__deck { font-family: var(--serif); font-style: italic; text-transform: none; letter-spacing: 0; font-weight: 300; font-size: clamp(30px, 8vw, 48px); padding: 0; }
  .feat--equinox-amaala-resort .feat__b { padding: 0; box-shadow: none; }
  .feat__deck { font-size: clamp(28px, 8vw, 46px); }
}

/* ======================================================================
   Severin layer: soft gray paper, Italiana display, rust-bar headings,
   white cards and lifted images, crisp buttons. Built on the magazine.
   ====================================================================== */
@font-face { font-family: "Italiana"; src: url("../fonts/italiana-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
:root {
  --page: #eeeeee;
  --bone: #eeeeee;
  --paper: #fafafa;
  --tile: #dedede;
  --ink: #141414;
  --text: #3a3a3a;
  --muted: #666666;
  --line: rgba(0, 0, 0, .12);
  --accent: #a0461d;
  --display: "Italiana", "Cormorant Garamond", Georgia, serif;
  --lift: 0 42px 70px -44px rgba(0, 0, 0, .45);
  --lift-soft: 0 30px 60px -44px rgba(0, 0, 0, .3);
}
::selection { background: var(--accent); color: #fff; }

/* Section heading: spaced capitals beside a rust bar, tagline at the right */
.sh { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: start; max-width: 1600px; margin: 0 auto clamp(32px, 6vh, 72px); }
.sh__title { position: relative; padding-left: clamp(18px, 1.7vw, 28px); font-family: var(--sans); font-weight: 400; font-size: clamp(30px, 3.3vw, 54px); line-height: 1.1; letter-spacing: .035em; text-transform: uppercase; max-width: 17em; }
.sh__title::before { content: ""; position: absolute; left: 0; top: .1em; bottom: .14em; width: clamp(5px, .42vw, 8px); background: var(--accent); }
.sh__tag { padding-top: .9em; font-size: 11px; font-weight: 500; letter-spacing: .26em; line-height: 1.8; text-transform: uppercase; max-width: 22em; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 17px 30px; border: 0;
  font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; text-decoration: none; line-height: 1;
  transition: background-color .4s ease, transform .6s var(--ease-out);
}
.btn--ink { background: var(--ink); color: #fff; }
.btn--rust { background: var(--accent); color: #fff; }
.btn--ink:hover, .btn--ink:focus-visible { background: #000; }
.btn--rust:hover, .btn--rust:focus-visible { background: #85381a; }
.btn:focus-visible { outline-offset: 3px; outline-color: var(--ink); }

/* Header: inline links on desktop, the black square stays */
.topnav { display: flex; gap: clamp(18px, 2vw, 34px); margin-left: auto; margin-right: clamp(18px, 2vw, 34px); }
.topnav a { text-decoration: none; font-size: 11px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; padding-block: 12px; }
.menu-btn__label { display: none; }
@media (max-width: 860px) { .topnav { display: none; } }

/* Lifted images */
.cover__img img, .toc__img img, .tri__panel img, .feat__a img, .feat__b img, .feat__c img,
.beat__media img, .beyond__media img, .next__frame img, .thanks__media img, .full__frame .zoom img { box-shadow: var(--lift); }

/* ---------- Cover ---------- */
.cover__mast { font-family: var(--display); font-weight: 400; text-transform: none; letter-spacing: -.035em; line-height: .86; font-size: clamp(64px, 14.6vw, 290px); }
.cover__issue { font-weight: 500; }
.cover__word { font-family: var(--display); font-weight: 400; letter-spacing: -.03em; font-size: clamp(52px, 8.4vw, 160px); }
.cover__img { position: relative; }
.seal {
  position: absolute; left: 50%; bottom: 0; translate: -50% 50%; z-index: 3;
  width: clamp(64px, 5.4vw, 88px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: #fff; font-family: var(--display); font-size: clamp(20px, 1.7vw, 28px); letter-spacing: .08em; padding-left: .08em;
  box-shadow: 0 18px 30px -16px rgba(0, 0, 0, .5);
}
.cl__t { font-family: var(--display); font-style: normal; letter-spacing: -.01em; }

/* ---------- Contents ---------- */
.toc__body { margin-top: 0; }
.toc__pg { font-family: var(--display); font-style: normal; font-size: clamp(40px, 3.6vw, 66px); color: var(--ink); }
.toc__d { font-family: var(--display); font-style: normal; font-size: 20px; }

/* ---------- In this issue ---------- */
.intro__text { font-family: var(--display); font-weight: 400; letter-spacing: -.012em; line-height: 1.12; font-size: clamp(34px, 4.4vw, 82px); }

/* ---------- Three panels ---------- */
.tri { padding: clamp(80px, 12vh, 150px) var(--pad) clamp(120px, 20vh, 240px); }
.tri__panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, .9vw, 16px); max-width: 1600px; margin: 0 auto; align-items: start; }
.tri__panel { display: block; text-decoration: none; transition: transform 1.1s var(--ease-out); }
.tri__panel:nth-child(2) { margin-top: 6vw; }
.tri__panel:nth-child(3) { margin-top: 2.4vw; }
.tri__panel:hover { transform: translateY(-8px); }
.tri__panel img { width: 100%; }
.tri__cap { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; font-size: 11px; font-weight: 450; letter-spacing: .26em; text-transform: uppercase; }
.tri__cap span:last-child { color: var(--muted); text-align: right; }
.tri__word { font-weight: 500; }

/* ---------- Features ---------- */
.feat__title { font-family: var(--display); font-weight: 400; text-transform: none; letter-spacing: -.035em; line-height: .86; }
.feat__deck { font-family: var(--sans); font-style: normal; font-weight: 450; font-size: clamp(12px, 1vw, 16px); letter-spacing: .34em; line-height: 1.7; text-transform: uppercase; }
.feat__text { background: var(--paper); padding: clamp(24px, 2.4vw, 42px); box-shadow: var(--lift-soft); gap: 16px; }
.feat__cardhead { display: flex; justify-content: space-between; align-items: baseline; width: 100%; font-size: 11px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; }
.feat__no { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 20px; letter-spacing: 0; color: var(--accent); }
.feat__text .btn { margin-top: 6px; }
.feat__quote p { font-family: var(--display); font-weight: 400; font-size: clamp(26px, 2.3vw, 42px); line-height: 1.16; letter-spacing: -.01em; }
.feat__cap span { font-family: var(--display); font-style: normal; font-size: 17px; }

.feat--orlando-sales-office .feat__title { font-size: clamp(64px, 20.5vw, 380px); }
.feat--orlando-sales-office .feat__deck { margin-top: .8vw; }
.feat--westwood-town-hall-flats .feat__title { font-size: clamp(56px, 9.4vw, 180px); }
.feat--dwyer-residence .feat__t { font-size: clamp(64px, 13.6vw, 260px); }
.feat--dwyer-residence .feat__deck { font-family: var(--display); font-weight: 400; text-transform: none; letter-spacing: -.02em; font-size: clamp(44px, 7vw, 132px); padding-left: 0; line-height: .95; }
.feat--dwyer-residence .feat__text { align-self: start; }
.feat--equinox-amaala-resort .feat__title { font-size: clamp(60px, 14vw, 270px); }
.feat--equinox-amaala-resort .feat__b { background: #fff; }
.feat--biomachina .feat__title { font-size: clamp(60px, 12vw, 230px); }
.feat--liquid-persuasion .feat__title { font-size: clamp(56px, 11.8vw, 230px); }
.feat--watercolor-studies .feat__title { font-size: clamp(60px, 15vw, 290px); }
.feat--watercolor-studies .feat__deck { margin-top: 1vw; }

/* ---------- Path + closing call to action ---------- */
.path__title { font-family: var(--display); font-weight: 400; font-size: clamp(34px, 4.2vw, 78px); line-height: 1.08; letter-spacing: -.012em; max-width: 15em; margin: 0 auto; max-width: 1600px; }
.path__year { font-family: var(--display); font-weight: 400; }
.path__dot { background: var(--page); }
.cta { text-align: center; padding: clamp(120px, 20vh, 240px) var(--pad); border-top: 1px solid var(--line); }
.cta__title { font-weight: 400; text-transform: uppercase; letter-spacing: .04em; font-size: clamp(28px, 3.6vw, 60px); line-height: 1.15; }
.cta__sub { margin-top: 14px; font-size: 11.5px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; }
.cta__btns { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: clamp(32px, 6vh, 56px); }

/* ---------- Project pages ---------- */
.overture__quote p { font-family: var(--display); font-weight: 400; letter-spacing: -.015em; line-height: 1.1; }
.overture__quote p::before, .overture__quote p::after { color: var(--accent); }
.next { border-top: 0; }
.next__title { font-family: var(--display); font-weight: 400; text-transform: none; letter-spacing: -.035em; line-height: .9; font-size: clamp(56px, 8.6vw, 170px); }
.next__go { padding: 17px 30px; margin-top: 10px; gap: 12px; }
.next:hover .next__go { background: #85381a; }
.spread__sub { font-family: var(--display); font-style: normal; font-weight: 400; letter-spacing: -.01em; font-size: clamp(30px, 2.8vw, 48px); }
.spread__title { color: var(--ink); font-weight: 500; letter-spacing: .3em; }
.spread__head { position: relative; padding-left: clamp(16px, 1.4vw, 22px); }
.spread__head::before { content: ""; position: absolute; left: 0; top: .2em; bottom: .3em; width: 5px; background: var(--accent); }
.opener { background: var(--page); }
.lightbox { background: rgba(238, 238, 238, .985); }

/* Spreads lie on the gray desk as white sheets, with a faint center fold (desktop) */
@media (min-width: 861px) and (orientation: landscape) {
  .page-project .spreads { background: var(--page); }
  .page-project .spread { isolation: isolate; padding-inline: calc(var(--pad) * 1.6); padding-bottom: 10vh; }
  .page-project .spread + .spread, .page-project .full + .spread { border-top: 0; }
  .page-project .spread::before {
    content: ""; position: absolute; z-index: -1; inset: calc(var(--header-h) * .6) calc(var(--pad) * .6) 2.6vh;
    background: #fff; box-shadow: 0 50px 80px -50px rgba(0, 0, 0, .35);
  }
  .page-project .spread::after {
    content: ""; position: absolute; z-index: -1; top: calc(var(--header-h) * .6); bottom: 2.6vh; left: 50%; width: 90px; translate: -50% 0;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .045) 48%, rgba(0, 0, 0, .07) 50%, rgba(0, 0, 0, .045) 52%, transparent); pointer-events: none;
  }
  .runhead { bottom: 5.4vh; left: calc(var(--pad) * 1.6 + 3.4em); right: calc(var(--pad) * 1.6 + 3.4em); }
  .folio { bottom: 5vh; }
  .folio--l { left: calc(var(--pad) * 1.6); }
  .folio--r { right: calc(var(--pad) * 1.6); }
}

/* ---------- About ---------- */
.about__name { font-family: var(--display); font-weight: 400; text-transform: none; letter-spacing: -.035em; line-height: .86; font-size: clamp(64px, 13vw, 250px); }
.beat__year, .stat__n, .stat__s { font-family: var(--display); font-weight: 400; letter-spacing: -.02em; }
.beat__title { font-family: var(--sans); font-weight: 400; text-transform: uppercase; letter-spacing: .04em; font-size: clamp(24px, 2.2vw, 38px); line-height: 1.15; }
.beat__dot { background: var(--page); }
.beyond__title { font-family: var(--display); font-weight: 400; letter-spacing: -.02em; }
.sheet__bar { align-items: start; }
.sheet__bar .sh { margin: 0; flex: 1; }

/* ---------- Footer ---------- */
.thanks__word { font-family: var(--display); font-weight: 400; letter-spacing: -.04em; line-height: .84; }
.thanks--slim { background: var(--page); }

@media (max-width: 860px) {
  .sh { grid-template-columns: 1fr; gap: 10px; }
  .sh__tag { padding-top: 0; padding-left: clamp(18px, 1.7vw, 28px); }
  .tri__panels { grid-template-columns: 1fr; gap: 40px; }
  .tri__panel:nth-child(n) { margin-top: 0; }
  .cover__mast { font-size: 17vw; letter-spacing: -.03em; }
  .cover__word { font-size: 14vw; margin-top: -15vw; }
  .feat .feat__title, .feat--dwyer-residence .feat__title { font-size: clamp(48px, 17vw, 110px) !important; }
  .feat--dwyer-residence .feat__deck { font-size: clamp(36px, 11vw, 64px); }
  .next__title { font-size: clamp(44px, 14vw, 80px); }
}
.stat__s { font-family: var(--sans); font-weight: 200; letter-spacing: 0; }
.sheet__page { background: #fff; }

/* ======================================================================
   Pages that fit one screen + real paper + contents preview
   ====================================================================== */

/* Features: the grid lives on the inner wrapper */
.feat { display: block; padding: 0; max-width: none; }
.feat__in {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: clamp(20px, 3.4vh, 40px);
  align-items: start; max-width: 1680px; margin-inline: auto; padding: clamp(36px, 6vh, 72px) var(--pad) clamp(110px, 18vh, 200px);
}
.feat__more { display: contents; }

/* Spreads: the sheet is the inner wrapper */
.spread { display: block; max-width: none; padding: 0; min-height: 0; column-gap: 0; }
.spread__in {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gutter);
  max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); min-height: min(100svh, 64.7vw);
}
.spread--pair .spread__in { min-height: 0; align-items: start; }
.page-project .spread::before, .page-project .spread::after { content: none; }

/* ---------- Contents preview ---------- */
.toc__thumb { display: none; }
.toc__row { transition: opacity .4s ease; }
.toc__row.is-active .toc__t { transform: translateX(.3em); }
.toc__row.is-active .toc__pg { color: var(--accent); }
.toc__preview { position: relative; height: min(64vh, 680px); }
.tp { position: absolute; inset: 0; margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.tp.is-on { opacity: 1; }
.tp img { width: auto; max-width: 100%; max-height: calc(100% - 150px); box-shadow: var(--lift); }
.tp figcaption { display: grid; gap: 6px; max-width: 34em; }
.tp__n { font-size: 11px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
.tp__t { font-family: var(--display); font-size: clamp(30px, 2.6vw, 44px); line-height: 1; letter-spacing: -.02em; }
.tp__d { font-size: 14.5px; line-height: 1.6; color: var(--text); }

/* ---------- Desktop: every page fits the screen; scrolling turns pages ---------- */
@media (min-width: 1000px) and (orientation: landscape) and (min-height: 600px) {
  [data-fit]:not(.cover) {
    height: 100svh; min-height: 0; display: flex; align-items: center; justify-content: center;
    padding: calc(var(--header-h) * .8) var(--pad) 3.4vh; margin: 0; overflow: clip;
  }
  [data-fit] > .fit__in { width: 100%; max-width: 1600px; flex: none; transform: scale(var(--fit, 1)); transform-origin: 50% 50%; }
  .cover { height: 100svh; min-height: 0; }
  .toc, .intro, .tri, .path, .cta { border-top: 0; }
  .toc .sh, .intro .sh, .tri .sh, .path .sh { margin-bottom: clamp(20px, 4vh, 48px); }
  .intro__facts { margin-top: 6vh; }
  .tri__panel img { max-height: 54vh; width: auto; max-width: 100%; }
  .tri__panel:nth-child(2) { margin-top: 4vh; }
  .tri__panel:nth-child(3) { margin-top: 1.6vh; }

  /* Features */
  .feat__in { padding: 0; row-gap: 2.2vh; max-width: 1600px; }
  .feat__run { margin-bottom: 1.2vh; padding-bottom: 1.1vh; }
  .feat__text { padding: 2.6vh clamp(20px, 2vw, 36px); gap: 1.3vh; }
  .feat__dek { font-size: clamp(13.5px, 1.8vh, 16px); line-height: 1.65; }
  .feat__quote { padding-top: 1.4vh; }
  .feat__quote p { font-size: min(2.2vw, 3.7vh); }
  .feat__cap { margin-top: .8vh; }
  .feat .btn { padding-block: 1.7vh; }
  .feat__a img, .feat__b img, .feat__c img { width: auto; max-width: 100%; }

  .feat--orlando-sales-office .feat__title { font-size: min(20.5vw, 27vh); }
  .feat--orlando-sales-office .feat__deck { grid-row: 2; align-self: end; margin: 0 0 2vh; }
  .feat--orlando-sales-office .feat__a img { max-height: 52vh; }
  .feat--orlando-sales-office .feat__b img, .feat--orlando-sales-office .feat__c img { max-height: 22vh; }

  .feat--westwood-town-hall-flats .feat__title { font-size: min(9.4vw, 15vh); }
  .feat--westwood-town-hall-flats .feat__a img { max-height: 74vh; }
  .feat--westwood-town-hall-flats .feat__b img, .feat--westwood-town-hall-flats .feat__c img { max-height: 17vh; }

  .feat--dwyer-residence .feat__t { font-size: min(13.6vw, 21vh); }
  .feat--dwyer-residence .feat__a { justify-self: center; }
  .feat--dwyer-residence .feat__a img { max-height: 44vh; }
  .feat--dwyer-residence .feat__deck { grid-column: 9 / -1; grid-row: 2; align-self: end; text-align: left; font-size: min(6vw, 9vh); margin-bottom: 1vh; }
  .feat--dwyer-residence .feat__b img { max-height: 24vh; }

  .feat--equinox-amaala-resort .feat__title { font-size: min(14vw, 19vh); }
  .feat--equinox-amaala-resort .feat__a { grid-column: 1 / 9; grid-row: 3 / 5; }
  .feat--equinox-amaala-resort .feat__a img { max-height: 56vh; }
  .feat--equinox-amaala-resort .feat__text { grid-column: 9 / -1; grid-row: 3; }
  .feat--equinox-amaala-resort .feat__quote { grid-column: 9 / -1; grid-row: 4; align-self: end; }
  .feat--equinox-amaala-resort .feat__b { grid-column: 6 / 9; grid-row: 4; align-self: end; justify-self: end; margin: 0 -1.2vw -2vh 0; }
  .feat--equinox-amaala-resort .feat__b img { max-height: 30vh; }

  .feat--biomachina .feat__a { grid-column: 1 / 6; grid-row: 2 / 6; }
  .feat--biomachina .feat__a img { max-height: 76vh; }
  .feat--biomachina .feat__title { font-size: min(12vw, 15vh); }
  .feat--biomachina .feat__b { grid-column: 6 / 10; grid-row: 4; }
  .feat--biomachina .feat__b img { max-height: 32vh; }
  .feat--biomachina .feat__text { grid-column: 10 / -1; grid-row: 4; }
  .feat--biomachina .feat__quote { grid-column: 6 / -1; grid-row: 5; }

  .feat--liquid-persuasion .feat__title { font-size: min(11.8vw, 15vh); }
  .feat--liquid-persuasion .feat__b { grid-row: 2 / 6; margin-top: 3vh; }
  .feat--liquid-persuasion .feat__b img { max-height: 72vh; }
  .feat--liquid-persuasion .feat__a { grid-column: 1 / 5; grid-row: 4; }
  .feat--liquid-persuasion .feat__a img { max-height: 30vh; }
  .feat--liquid-persuasion .feat__text { grid-column: 5 / 8; grid-row: 4; }
  .feat--liquid-persuasion .feat__quote { grid-column: 1 / 8; grid-row: 5; }

  .feat--watercolor-studies .feat__a, .feat--watercolor-studies .feat__b, .feat--watercolor-studies .feat__c { justify-self: center; }
  .feat--watercolor-studies .feat__a img, .feat--watercolor-studies .feat__b img, .feat--watercolor-studies .feat__c img { max-height: 33vh; }
  .feat--watercolor-studies .feat__title { font-size: min(15vw, 17vh); margin-top: 1vh; }
  .feat--watercolor-studies .feat__text { grid-column: 2 / 8; grid-row: 5; }
  .feat--watercolor-studies .feat__quote { grid-column: 8 / 12; grid-row: 5; align-self: center; text-align: left; }

  /* Project pages: each spread is a real sheet lying on the desk */
  .page-project .spread[data-fit] { padding: calc(var(--header-h) * .78) var(--pad) 4.6vh; margin: 0; }
  .page-project .spread__in {
    max-width: 1560px; min-height: auto; aspect-ratio: 1224 / 792;
    padding: clamp(28px, 4.6vh, 56px) clamp(34px, 3.4vw, 64px) clamp(58px, 8.4vh, 96px); column-gap: clamp(64px, 6.4vw, 120px);
    border-radius: 3px;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .25 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
      linear-gradient(90deg, rgba(60, 45, 30, .045), rgba(60, 45, 30, 0) 4%, rgba(60, 45, 30, 0) 96%, rgba(60, 45, 30, .045)),
      linear-gradient(90deg,
        transparent calc(50% - 150px), rgba(255, 255, 255, .55) calc(50% - 96px), rgba(80, 60, 40, .035) calc(50% - 44px),
        rgba(80, 60, 40, .1) calc(50% - 12px), rgba(45, 32, 20, .2) calc(50% - 2px), rgba(30, 20, 12, .3) 50%,
        rgba(45, 32, 20, .2) calc(50% + 2px), rgba(80, 60, 40, .1) calc(50% + 12px), rgba(80, 60, 40, .035) calc(50% + 44px),
        rgba(255, 255, 255, .55) calc(50% + 96px), transparent calc(50% + 150px)),
      #fbfaf6;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .07), 0 18px 30px -20px rgba(0, 0, 0, .3), 0 60px 110px -50px rgba(0, 0, 0, .32);
  }
  /* the thin stack of pages along both outer edges */
  .page-project .spread__in::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 3px; pointer-events: none;
    box-shadow:
      -2px 1px 0 0 #f6f4ef, -3px 2px 0 0 #dcd7ce, -5px 3px 0 0 #f3f0ea, -6px 4px 0 0 #d4cec3, -8px 5px 0 0 #efebe4, -9px 6px 0 0 #cfc8bc,
      2px 1px 0 0 #f6f4ef, 3px 2px 0 0 #dcd7ce, 5px 3px 0 0 #f3f0ea, 6px 4px 0 0 #d4cec3, 8px 5px 0 0 #efebe4, 9px 6px 0 0 #cfc8bc;
  }
  /* where the spine presses into the desk */
  .page-project .spread__in::after {
    content: ""; position: absolute; z-index: -1; left: calc(50% - 220px); width: 440px; bottom: -16px; height: 32px; pointer-events: none;
    background: radial-gradient(ellipse at 50% 30%, rgba(0, 0, 0, .22), transparent 70%);
  }
  .page-project .runhead { bottom: clamp(20px, 3.2vh, 34px); left: calc(clamp(34px, 3.4vw, 64px) + 3.4em); right: calc(clamp(34px, 3.4vw, 64px) + 3.4em); }
  .page-project .folio { bottom: clamp(16px, 2.8vh, 30px); }
  .page-project .folio--l { left: clamp(34px, 3.4vw, 64px); }
  .page-project .folio--r { right: clamp(34px, 3.4vw, 64px); }
  .page-project .full[data-fit] { padding: calc(var(--header-h) * .78) var(--pad) 4.6vh; }
  .page-project .full__frame { height: auto; }
  .page-project .full__frame .zoom, .page-project .full__frame .zoom img { height: auto; max-height: calc(100svh - var(--header-h) * .78 - 4.6vh); width: auto; max-width: 100%; }
}

/* ---------- Phone: each piece in a deliberate order ---------- */
@media (max-width: 860px) {
  .feat__in { grid-template-columns: 1fr; row-gap: 20px; padding: 72px var(--pad) 96px; }
  .feat__in > *, .feat__in .feat__t { grid-column: 1 / -1 !important; grid-row: auto !important; margin: 0 !important; text-align: left !important; justify-items: start !important; }
  .feat__in { display: flex; flex-direction: column; }
  .feat .feat__a { margin-inline: calc(-1 * var(--pad)) !important; }
  .feat .feat__a img { box-shadow: none; width: 100%; }
  .feat .feat__a .feat__cap { padding-inline: var(--pad); }
  .feat__more { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-right: calc(-1 * var(--pad)); padding: 6px var(--pad) 18px 0; scrollbar-width: none; order: 7; }
  .feat__more::-webkit-scrollbar { display: none; }
  .feat__more > figure { flex: 0 0 78%; scroll-snap-align: start; margin: 0 !important; }
  .feat__more:has(> figure:only-child) > figure { flex-basis: 100%; }
  .feat .feat__b, .feat .feat__c { grid-column: auto !important; }
  .feat--equinox-amaala-resort .feat__b { padding: 0; box-shadow: none; background: none; }
  .feat__quote p { font-size: clamp(24px, 6.6vw, 32px); }

  .toc__preview { display: none; }
  .toc__pg { font-size: 34px; }

  .spread__in { grid-template-columns: 1fr; min-height: 0; row-gap: 44px; padding-inline: var(--pad); }
}

/* Typographic footer */
.thanks__sign { align-self: end; text-align: right; }
.thanks__sign .thanks__name { margin: 0; font-family: var(--display); font-weight: 400; text-transform: none; letter-spacing: -.03em; font-size: clamp(48px, 6.4vw, 120px); line-height: .9; padding: 0; }
.thanks__role { margin-top: 18px; font-size: 11px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 860px) { .thanks__sign { text-align: left; } }
@media (min-width: 1000px) and (orientation: landscape) and (min-height: 600px) {
  .toc .sh { margin-bottom: 2.6vh; }
  .toc__group { margin: 2vh 0 .4vh; }
  .toc__row { padding: 1.15vh 0; }
  .toc__pg { font-size: min(3.4vw, 5.2vh); }
  .toc__t { font-size: min(1.6vw, 2.5vh); }
  .toc__d { font-size: min(1.4vw, 2.3vh); }
  .toc__preview { height: 62vh; }
}

/* fixes: blend needs a backdrop inside scaled pages; balance the two paintings; keep the seal on the cover */
.feat__in { background: var(--page); }
.cover__img img { height: min(54vh, 44vw); }
@media (min-width: 1000px) and (orientation: landscape) and (min-height: 600px) {
  .feat--watercolor-studies .feat__a { grid-column: 2 / 7; justify-self: end; }
  .feat--watercolor-studies .feat__b { grid-column: 7 / 12; justify-self: start; }
  .feat--watercolor-studies .feat__a img, .feat--watercolor-studies .feat__b img { max-height: 36vh; }
}
/* printed, not pasted: images take on the paper tone like ink on stock */
@media (min-width: 1000px) and (orientation: landscape) and (min-height: 600px) {
  .page-project .spread__in .zoom img { mix-blend-mode: multiply; }
  .page-project .row--tiles .zoom { background: transparent; }
}

/* ======================================================================
   Landing in the spirit of nabilissa.com, in light: a quiet loader,
   tiles that converge into one image, stacked hairline capitals.
   ====================================================================== */
:root { --accent: #9a5d40; }
.js:not(.seen) { --intro: 2.75s; }

/* Loader: a ring, then the seal and the name typing in */
.js:not(.seen) .loader { background: var(--page); animation: loader-fade .9s ease 2.45s forwards; }
@keyframes loader-fade { to { opacity: 0; visibility: hidden; } }
.loader__ring { position: absolute; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .12); border-top-color: var(--ink); animation: spin .9s linear infinite, fade-out .3s ease .7s forwards; }
@keyframes spin { to { rotate: 360deg; } }
@keyframes fade-out { to { opacity: 0; } }
.loader__mark { display: flex; align-items: center; gap: 22px; opacity: 0; animation: fade-in .4s ease .85s forwards; }
.loader__seal { width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-family: var(--display); font-size: 16px; letter-spacing: .06em; padding-left: .06em; }
.loader__name { display: flex; align-items: center; font-size: 13px; font-weight: 400; letter-spacing: .5em; text-transform: uppercase; }
.loader__name span { opacity: 0; animation: fade-in .25s ease calc(1s + var(--i) * 75ms) forwards; }
.loader__name b { display: flex; font-weight: 600; }
.loader__bar { width: 1px; height: 16px; background: var(--ink); margin: 0 .9em 0 .2em; opacity: 0; animation: fade-in .2s ease 1.3s forwards; }

/* Header: round logo, a pill, a two-line menu */
.logo { width: 46px; height: 46px; border-radius: 50%; background: #fff; color: #000; display: grid; place-items: center; text-decoration: none; font-family: var(--display); font-size: 17px; letter-spacing: .06em; padding-left: .06em; }
.pill { margin-left: auto; margin-right: 14px; padding: 14px 24px; border-radius: 999px; background: #fff; color: #000; text-decoration: none; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; transition: transform .5s var(--ease-out); }
.pill:hover { transform: scale(1.04); }
.menu-btn__box { background: transparent; width: 46px; }
.menu-btn__box i { left: 8px; width: 30px; height: 1px; background: #fff; }
.menu-btn__box i:first-child { top: 20px; }
.menu-btn__box i:last-child { top: 26px; }
.menu-btn[aria-expanded="true"] .menu-btn__box i:first-child, .menu-btn[aria-expanded="true"] .menu-btn__box i:last-child { top: 23px; }

/* Landing */
.land[data-fit] { position: relative; display: block; height: 100svh; min-height: 560px; padding: 0; overflow: hidden; background: var(--page); }
.land__media { position: absolute; inset: 0; }
.land__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.land__wash { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(238, 238, 238, .9) 0%, rgba(238, 238, 238, .74) 36%, rgba(238, 238, 238, .38) 68%, rgba(238, 238, 238, .2) 100%); }
.land__wash::after { content: ""; position: absolute; inset: 0; background: var(--page); opacity: var(--hp, 0); }
.land__title {
  position: absolute; z-index: 2; left: 21vw; top: 50%; translate: 0 -50%; margin: 0;
  font-weight: 100; text-transform: uppercase; font-size: min(10.6vw, 16.5vh); line-height: .9; letter-spacing: -.06em; color: var(--ink);
  opacity: calc(1 - var(--hp, 0) * 1.3);
}
.land__l { display: block; overflow: hidden; padding-bottom: .05em; margin-bottom: -.05em; }
.land__l > span { display: inline-block; }
.land__l--accent { color: var(--accent); }
.land__name { position: absolute; z-index: 2; left: var(--pad); top: 50%; translate: 0 -50%; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; }
.land__name b { font-weight: 600; }
.land__roles { position: absolute; z-index: 2; right: 17vw; top: 54%; font-size: 12px; line-height: 1.7; letter-spacing: .08em; text-transform: uppercase; }
.land__cue { position: absolute; z-index: 2; left: 21vw; bottom: 6vh; display: grid; gap: 3px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; }
.land__cue b { font-weight: 600; }
.land__issue { position: absolute; z-index: 2; right: var(--pad); bottom: 6vh; text-align: right; font-size: 11px; line-height: 1.7; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.land__name, .land__roles, .land__cue, .land__issue { opacity: calc(1 - var(--hp, 0) * 1.6); }

/* Opening: three tiles converge into one image, then the words rise */
@property --mw { syntax: '<percentage>'; inherits: false; initial-value: 33.5%; }
@property --h1 { syntax: '<percentage>'; inherits: false; initial-value: 100%; }
@property --h2 { syntax: '<percentage>'; inherits: false; initial-value: 100%; }
@property --h3 { syntax: '<percentage>'; inherits: false; initial-value: 100%; }
@property --x1 { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --x3 { syntax: '<percentage>'; inherits: false; initial-value: 100%; }
@property --y1 { syntax: '<percentage>'; inherits: false; initial-value: 50%; }
@property --y3 { syntax: '<percentage>'; inherits: false; initial-value: 50%; }
.js .land__media {
  -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: var(--mw) var(--h1), var(--mw) var(--h2), var(--mw) var(--h3);
  mask-size: var(--mw) var(--h1), var(--mw) var(--h2), var(--mw) var(--h3);
  -webkit-mask-position: var(--x1) var(--y1), 50% 50%, var(--x3) var(--y3);
  mask-position: var(--x1) var(--y1), 50% 50%, var(--x3) var(--y3);
  animation: tiles 2.1s var(--ease-io) var(--intro) both;
}
@keyframes tiles {
  0% { --mw: 9%; --h1: 22%; --h2: 30%; --h3: 25%; --x1: 41%; --x3: 59%; --y1: 40%; --y3: 62%; opacity: 0; }
  22% { opacity: 1; }
  55% { --mw: 13%; --h1: 36%; --h2: 44%; --h3: 38%; --x1: 37.5%; --x3: 62.5%; --y1: 44%; --y3: 56%; }
  100% { --mw: 33.5%; --h1: 100%; --h2: 100%; --h3: 100%; --x1: 0%; --x3: 100%; --y1: 50%; --y3: 50%; opacity: 1; }
}
.js .land__media img { animation: land-scale 3s var(--ease-out) var(--intro) both; }
@keyframes land-scale { from { scale: 1.16; } to { scale: 1; } }
.js .land__wash { opacity: 0; animation: fade-in 1.2s ease calc(var(--intro) + 1.3s) forwards; }
.js .land__l > span { transform: translateY(105%); animation: rise 1.4s var(--ease-out) calc(var(--intro) + 1.55s) forwards; }
.js .land__l:nth-child(3) > span { animation-delay: calc(var(--intro) + 1.65s); }
.js .land__l:nth-child(4) > span { animation-delay: calc(var(--intro) + 1.75s); }
.js .land__l:nth-child(5) > span { animation-delay: calc(var(--intro) + 1.85s); }
.js .land__name, .js .land__roles, .js .land__cue, .js .land__issue { animation: land-in 1.2s ease calc(var(--intro) + 2.1s) both; }
@keyframes land-in { from { opacity: 0; } }

/* The magazine cover breathes on faint rings */
.cover { position: relative; }
.rings {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: repeating-radial-gradient(circle at 50% 56%, transparent 0 54px, rgba(0, 0, 0, .05) 55px, transparent 56px);
  -webkit-mask-image: radial-gradient(circle at 50% 56%, #000 0 18%, transparent 62%); mask-image: radial-gradient(circle at 50% 56%, #000 0 18%, transparent 62%);
  animation: breathe 8s ease-in-out infinite alternate;
}
@keyframes breathe { to { transform: scale(1.06); } }
.cover > :not(.rings) { position: relative; z-index: 1; }
.cover > .cover__word { z-index: 2; }

@media (max-width: 860px) {
  .land[data-fit] { min-height: 620px; }
  .land__wash { background: linear-gradient(180deg, rgba(238, 238, 238, .55), rgba(238, 238, 238, .86) 55%, rgba(238, 238, 238, .92)); }
  .land__title { left: var(--pad); top: 46%; font-size: 19vw; }
  .land__name { top: calc(var(--header-h) + 3vh); translate: none; }
  .land__roles { right: auto; left: var(--pad); top: auto; bottom: 16vh; }
  .land__cue { left: var(--pad); bottom: 5vh; }
  .land__issue { bottom: 5vh; }
  .pill { padding: 12px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .land__media { -webkit-mask-image: none; mask-image: none; }
  .rings { animation: none; }
}
/* Header in solid ink (the whole site is light now) */
.site-header { mix-blend-mode: normal; color: var(--ink); }
.logo { background: var(--ink); color: #fff; }
.pill { background: rgba(20, 20, 20, .86); color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.menu-btn__box i { background: var(--ink); }
.header__title span { opacity: .5; }
@media (max-width: 860px) { .land__issue { display: none; } }

/* ======================================================================
   Project pages read as the magazine itself (not a photo of one):
   one warm-white page, running head with a rule, folios in the corners.
   ====================================================================== */
.page-project { --page: #f8f7f3; }
.page-project, .page-project .opener, .page-project .spreads, .page-project .overture, .page-project .next, .page-project .thanks--slim { background: var(--page); }
.page-project .overture { border-top: 1px solid var(--line); }
@media (min-width: 1000px) and (orientation: landscape) and (min-height: 600px) {
  .page-project .spread__in {
    background: none; box-shadow: none; border-radius: 0;
    padding: clamp(46px, 7vh, 76px) 0 clamp(46px, 6.6vh, 72px); column-gap: clamp(56px, 6vw, 112px);
  }
  .page-project .spread__in::before, .page-project .spread__in::after { content: none; }
  .page-project .spread + .spread, .page-project .full + .spread { border-top: 0; }
  .page-project .runhead {
    top: 0; bottom: auto; left: 0; right: 0; padding-bottom: 12px; border-bottom: 1px solid var(--ink);
    color: var(--ink); font-size: 10.5px; letter-spacing: .3em;
  }
  .page-project .folio { bottom: 0; font-size: 20px; }
  .page-project .folio--l { left: 0; }
  .page-project .folio--r { right: 0; }
}
@media (min-width: 1000px) and (orientation: landscape) and (min-height: 600px) {
  .page-project .spread__in { background: var(--page); }
  .page-project .full__frame .zoom img { box-shadow: none; }
}

/* ======================================================================
   Project pages move like nabilissa.com: one continuous story.
   Each spread is a scene: its title on faint rings, then the whole
   spread rises into view, holds, and dissolves into the next.
   ====================================================================== */
.scene__label { display: none; }
@media (min-width: 1000px) and (orientation: landscape) and (min-height: 600px) {
  .page-project .scene { position: relative; height: 180svh; margin: 0; }
  .page-project .scene + .scene { border-top: 0; }
  .page-project .scene__stage { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; justify-content: center; overflow: clip; padding-bottom: calc(52px + 3vh); }
  .page-project .scene .fit__in { opacity: var(--so, 1); transform: scale(calc(var(--fit, 1) * var(--ss, 1))); will-change: opacity, transform; }
  .page-project .scene__label {
    display: grid; place-items: center; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: var(--lo, 0);
    font-size: 11px; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; color: var(--ink);
  }
  .page-project .scene__label::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: repeating-radial-gradient(circle at 50% 50%, transparent 0 54px, rgba(0, 0, 0, .05) 55px, transparent 56px);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0 14%, transparent 56%); mask-image: radial-gradient(circle at 50% 50%, #000 0 14%, transparent 56%);
  }
  .scene__sq { display: inline-block; width: 8px; height: 8px; border: 1px solid currentColor; margin-right: 14px; vertical-align: 1px; }

  /* full-page renders grow from a tile to the full image */
  .page-project .scene--full .scene__stage { padding: calc(var(--header-h) * .8) var(--pad) calc(52px + 3vh); }
  .page-project .scene--full .full__frame { position: relative; height: auto; transform: scale(var(--fs, 1)); opacity: var(--so, 1); will-change: transform, opacity; }
  .page-project .scene--full .full__frame .zoom, .page-project .scene--full .full__frame .zoom img { height: auto; max-height: calc(100svh - var(--header-h) * .8 - 52px - 3vh); width: auto; max-width: 100%; }
  .page-project .scene--full .full__label { left: 24px; top: 20px; }

  /* the opening statement in hairline capitals */
  .page-project .overture { min-height: 100svh; }
  .page-project .overture__quote p { font-family: var(--sans); font-weight: 100; text-transform: uppercase; letter-spacing: -.045em; font-size: min(5.4vw, 9.4vh); line-height: .98; max-width: 14em; text-indent: 0; }
  .page-project .overture__quote p::before, .page-project .overture__quote p::after { content: none; }
  .page-project .overture__quote .wd:last-child { color: var(--accent); }

  /* the story bar along the bottom */
  .page-project .progress { display: none; }
  .story-bar {
    position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 18px;
    padding: 22px var(--pad) 16px; background: linear-gradient(to top, var(--page) 55%, rgba(248, 247, 243, 0));
    opacity: 0; transform: translateY(100%); transition: opacity .6s ease, transform .8s var(--ease-out);
  }
  .story-bar.is-visible { opacity: 1; transform: none; }
  .story-bar button { display: grid; gap: 8px; text-align: left; font-size: 10px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); padding: 4px 0; min-width: 0; }
  .story-bar button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .4s ease; }
  .story-bar button[aria-current="true"] span, .story-bar button:hover span { color: var(--ink); }
  .story-bar i { display: block; height: 1px; background: var(--line); position: relative; overflow: hidden; }
  .story-bar i::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(var(--f, 0)); }
  .menu-open .story-bar { opacity: 0; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
  .page-project .scene .fit__in, .page-project .scene--full .full__frame { opacity: 1 !important; transform: scale(var(--fit, 1)) !important; }
  .page-project .scene__label { opacity: 0 !important; }
}
@media (min-width: 1000px) and (orientation: landscape) and (min-height: 600px) {
  .page-project .scene__label { display: flex; align-items: center; justify-content: center; }
}

/* ======================================================================
   Project sections: each spread becomes a set of separate components,
   placed with intent in a staggered gallery. Nothing is scaled, so text
   stays crisp, and images never exceed their native size.
   ====================================================================== */
.part { max-width: 1560px; margin: 0 auto; padding: clamp(110px, 18vh, 220px) var(--pad) 0; }
.part__head { display: grid; gap: 18px; margin-bottom: clamp(56px, 10vh, 120px); }
.part__kicker { font-size: 11px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); padding-bottom: 14px; border-bottom: 1px solid var(--ink); }
.part__title { font-weight: 100; text-transform: uppercase; letter-spacing: -.045em; line-height: .92; font-size: clamp(46px, 7.2vw, 136px); max-width: 12em; }
.part__accent { color: var(--accent); }
.part__sub { font-family: var(--display); font-size: clamp(24px, 2.4vw, 40px); line-height: 1.15; letter-spacing: -.01em; max-width: 22em; }
.part__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: row dense; column-gap: var(--gap); row-gap: clamp(56px, 10vh, 120px); align-items: start; }
.cmp { min-width: 0; }
.cmp[data-drift] { translate: 0 var(--dy, 0px); }
.part .zoom img { width: 100%; max-width: var(--nw, none); mix-blend-mode: multiply; }
.cmp--text { align-self: center; }
.cmp--text .body { padding: 0; margin: 0; text-align: left; font-size: 17px; line-height: 1.85; max-width: 34em; color: var(--text); }
.cmp--text .body::first-letter { float: left; font-family: var(--display); font-size: 3.6em; line-height: .8; margin: .08em .12em 0 0; color: var(--ink); }
.part .fig--inset, .part .fig--narrow { padding-inline: 0; }
.part .fig--parti { width: auto; margin-left: 0; }
.part .fig--tall { height: auto; display: block; }
.part .fig--tall .fig__media { width: 100%; }
.part .fig--legend .zoom img { width: 100%; }
.part .fixtures { padding-inline: 0; }
.part .plans { height: auto; }
.part .mosaic { height: auto; }
.part .cap { margin-top: 14px; font-size: 12px; letter-spacing: .04em; }
.part--full { text-align: center; }
.part--full .part__kicker { text-align: left; }
.cmp--hero { display: inline-block; margin: clamp(32px, 6vh, 64px) auto 0; max-width: 100%; }
.cmp--hero .zoom img { width: auto; max-width: min(100%, var(--nw)); max-height: 84vh; mix-blend-mode: normal; }
.cmp--hero .cap { text-align: left; }
.js .reveal-lead .zoom img { clip-path: inset(100% 0 0 0); transition: clip-path 1.5s var(--ease-io); }
.js .reveal-lead.is-in .zoom img { clip-path: inset(0); }
.page-project .next { margin-top: clamp(120px, 20vh, 240px); }
@media (max-width: 860px) {
  .part__grid { grid-template-columns: 1fr; row-gap: 48px; }
  .cmp { grid-column: 1 / -1 !important; margin-top: 0 !important; translate: none !important; }
  .part__title { font-size: clamp(40px, 13vw, 72px); }
}
@media (prefers-reduced-motion: reduce) { .cmp[data-drift] { translate: none; } }
/* tighter rhythm: no stretches of empty page */
.part { padding-top: clamp(72px, 11vh, 130px); }
.part__head { margin-bottom: clamp(36px, 6vh, 72px); }
.part__grid { row-gap: clamp(40px, 7vh, 84px); }
.page-project .overture { min-height: 0; padding-block: clamp(96px, 16vh, 180px) clamp(40px, 8vh, 96px); }
.page-project .spreads { padding-block: 0; }
.page-project .next { margin-top: clamp(72px, 12vh, 140px); min-height: 0; padding-block: clamp(80px, 12vh, 140px); }
.js .reveal-lead .zoom img { transition-duration: 1.1s; }
/* never enlarge an image past its native size (keeps every picture sharp) */
.page-project .zoom img { max-width: min(100%, var(--nw, 100%)) !important; }
/* site-visit photos at their own proportions, side by side */
.part .mosaic { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; height: auto; }
.part .mosaic > .fig { flex: 0 1 auto; }
.part .mosaic .fig__media, .part .mosaic .zoom { height: auto; }
.part .mosaic .zoom img { height: auto; aspect-ratio: auto !important; object-fit: initial; }
.part .row--tiles .zoom { aspect-ratio: auto; background: none; }
.part .row--tiles .zoom img { height: auto; }
/* images may grow up to 1.6x their export size: the sharpened 2x renditions keep them crisp */
.page-project .zoom img { max-width: min(100%, calc(var(--nw, 100vw) * 1.6)) !important; }
.part .page-project .zoom img { max-width: min(100%, calc(var(--nw, 100vw) * 1.6)) !important; }

/* Landing intro, rebuilt: tiles appear, close into one frame, and that frame expands to the full screen */
.js .land__media { -webkit-mask-image: none; mask-image: none; clip-path: polygon(50% 100%, 0% 100%, 0% 0%, 33.34% 0%, 33.34% 100%, 0% 100%, 50% 100%, 33.33% 100%, 33.33% 0%, 66.67% 0%, 66.67% 100%, 33.33% 100%, 50% 100%, 66.66% 100%, 66.66% 0%, 100% 0%, 100% 100%, 66.66% 100%, 50% 100%); animation: land-build 2.6s cubic-bezier(.65, 0, .25, 1) var(--intro) both; }
@keyframes land-build {
  0% { clip-path: polygon(50% 100%, 40% 60%, 40% 40%, 46% 40%, 46% 60%, 40% 60%, 50% 100%, 46.8% 69%, 46.8% 47%, 53.2% 47%, 53.2% 69%, 46.8% 69%, 50% 100%, 54% 71%, 54% 53%, 60% 53%, 60% 71%, 54% 71%, 50% 100%); opacity: 0; }
  28% { clip-path: polygon(50% 100%, 39% 61%, 39% 38%, 45.6% 38%, 45.6% 61%, 39% 61%, 50% 100%, 46.6% 68%, 46.6% 44%, 53.4% 44%, 53.4% 68%, 46.6% 68%, 50% 100%, 54.4% 70%, 54.4% 50%, 61% 50%, 61% 70%, 54.4% 70%, 50% 100%); opacity: 1; }
  52% { clip-path: polygon(50% 100%, 40% 65%, 40% 37%, 46.67% 37%, 46.67% 65%, 40% 65%, 50% 100%, 46.66% 65%, 46.66% 37%, 53.34% 37%, 53.34% 65%, 46.66% 65%, 50% 100%, 53.33% 65%, 53.33% 37%, 60% 37%, 60% 65%, 53.33% 65%, 50% 100%); }
  64% { clip-path: polygon(50% 100%, 36% 69%, 36% 33%, 45.34% 33%, 45.34% 69%, 36% 69%, 50% 100%, 45.33% 69%, 45.33% 33%, 54.67% 33%, 54.67% 69%, 45.33% 69%, 50% 100%, 54.66% 69%, 54.66% 33%, 64% 33%, 64% 69%, 54.66% 69%, 50% 100%); }
  100% { clip-path: polygon(50% 100%, 0% 100%, 0% 0%, 33.34% 0%, 33.34% 100%, 0% 100%, 50% 100%, 33.33% 100%, 33.33% 0%, 66.67% 0%, 66.67% 100%, 33.33% 100%, 50% 100%, 66.66% 100%, 66.66% 0%, 100% 0%, 100% 100%, 66.66% 100%, 50% 100%); }
}
.js .land__media img { animation: land-scale 3.2s var(--ease-out) var(--intro) both; }
.js .land__wash { animation-delay: calc(var(--intro) + 2s); }
.js .land__l > span { animation-delay: calc(var(--intro) + 2.15s); }
.js .land__l:nth-child(3) > span { animation-delay: calc(var(--intro) + 2.25s); }
.js .land__l:nth-child(4) > span { animation-delay: calc(var(--intro) + 2.35s); }
.js .land__l:nth-child(5) > span { animation-delay: calc(var(--intro) + 2.45s); }
.js .land__name, .js .land__roles, .js .land__cue, .js .land__issue { animation-delay: calc(var(--intro) + 2.7s); }
@media (prefers-reduced-motion: reduce) { .js .land__media { clip-path: none; animation: none; } }

/* ======================================================================
   The magazine builds itself. As a section arrives: column guides draw,
   the running line rules across, headings slide in from their side,
   empty image frames (InDesign-style, with an X) appear and the pictures
   slide into them from the left or right, text flows in top to bottom.
   Then the guides and frames fade, leaving the finished page.
   ====================================================================== */
.build { position: relative; }
.js .build::before {
  content: ""; position: absolute; z-index: 3; pointer-events: none; top: 0; bottom: 0; left: var(--pad); right: var(--pad); opacity: 0;
  background: repeating-linear-gradient(90deg, rgba(154, 93, 64, .22) 0 1px, transparent 1px calc((100% + 1px) / 12));
  transform-origin: top;
}
.js .build.is-built::before { animation: guides 2.8s ease both; }
@keyframes guides { 0% { opacity: 0; transform: scaleY(0); } 18% { opacity: 1; transform: scaleY(1); } 62% { opacity: .9; } 100% { opacity: 0; transform: scaleY(1); } }

.js .build .bi { --t: calc(var(--k, 0) * 120ms + 300ms); transition: transform 1.2s var(--ease-out) var(--t), opacity .9s ease var(--t), clip-path 1.2s var(--ease-io) var(--t); }
.js .build:not(.is-built) .bi:not(.bi--img) { opacity: 0; transform: translateX(calc(var(--dir, -1) * 8vw)); }
.js .build .bi--txt { clip-path: inset(0 0 0 0); }
.js .build:not(.is-built) .bi--txt { clip-path: inset(0 0 100% 0); }

/* image frames: an empty frame with an X, then the picture slides in */
.js .build .bi--img { position: relative; }
.js .build .bi--img > * { --t: calc(var(--k, 0) * 120ms + 650ms); transition: transform 1.3s var(--ease-out) var(--t), opacity .8s ease var(--t), clip-path 1.3s var(--ease-io) var(--t); }
.js .build:not(.is-built) .bi--img > * { opacity: 0; transform: translateX(calc(var(--dir, -1) * 9vw)); clip-path: inset(0 var(--cr, 100%) 0 var(--cl, 0)); }
.js .build .bi--img::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  border: 1px solid rgba(154, 93, 64, .6);
  background:
    linear-gradient(to top right, transparent calc(50% - .6px), rgba(154, 93, 64, .38) 50%, transparent calc(50% + .6px)),
    linear-gradient(to bottom right, transparent calc(50% - .6px), rgba(154, 93, 64, .38) 50%, transparent calc(50% + .6px));
}
.js .build.is-built .bi--img::after { animation: frame 2.6s ease calc(var(--k, 0) * 120ms) both; }
@keyframes frame { 0% { opacity: 0; clip-path: inset(0 100% 100% 0); } 14% { opacity: 1; } 26% { clip-path: inset(0 0 0 0); } 58% { opacity: 1; } 100% { opacity: 0; clip-path: inset(0 0 0 0); } }

/* text frames: an outline, then the words flow in */
.js .build .bi--txt::after { content: ""; position: absolute; inset: -10px; pointer-events: none; border: 1px solid rgba(154, 93, 64, .5); opacity: 0; }
.js .build .bi--txt { position: relative; }
.js .build.is-built .bi--txt::after { animation: frame-soft 2.4s ease calc(var(--k, 0) * 120ms) both; }
@keyframes frame-soft { 0% { opacity: 0; } 15% { opacity: 1; } 55% { opacity: 1; } 100% { opacity: 0; } }

/* the running line rules across */
.js .build .part__kicker, .js .build .feat__run { border-bottom-color: transparent; background: linear-gradient(var(--ink), var(--ink)) left bottom / 0 1px no-repeat; transition: background-size 1.4s var(--ease-io) .1s, opacity .8s ease, transform 1.2s var(--ease-out); }
.js .build.is-built .part__kicker, .js .build.is-built .feat__run { background-size: 100% 1px; }

/* drift: pieces keep sliding sideways a little as you scroll */
.cmp[data-drift], .js .build .bi--img { translate: var(--dx, 0px) 0; }

/* the old vertical reveal is replaced by the build */
.js .reveal-lead .zoom img { clip-path: none !important; }

@media (prefers-reduced-motion: reduce) {
  .js .build::before, .js .build .bi--img::after, .js .build .bi--txt::after { display: none; }
  .js .build .bi, .js .build .bi--img > * { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .js .build .part__kicker, .js .build .feat__run { background-size: 100% 1px; }
}
/* frames hug their pictures exactly */
.part .cmp--fig { width: fit-content; max-width: 100%; }
.part .cmp--fig[data-side="r"] { justify-self: end; }
.part .cmp--fig .zoom img { width: calc(var(--nw, 600px) * 1.6); }
.part .cmp--fig .cap { max-width: calc(var(--nw, 600px) * 1.6); }
@media (max-width: 860px) { .part .cmp--fig { width: auto; } .part .cmp--fig .zoom img { width: 100%; } }

/* fewer lines: no column guides, no X; just a faint frame where a picture is about to land */
.js .build::before, .js .build.is-built::before { display: none; animation: none; }
.js .build .bi--img::after { background: none; border-color: rgba(154, 93, 64, .32); }
.js .build .bi--txt::after { display: none; }

/* some pieces rise forward from the back of the page */
.js .build { perspective: 1600px; }
.js .build:not(.is-built) .bi[data-enter="z"]:not(.bi--img) { opacity: 0; transform: translate3d(0, 0, -480px); }
.js .build:not(.is-built) .bi--img[data-enter="z"] > * { opacity: 0; clip-path: inset(0 0 0 0); transform: translate3d(0, 2vh, -560px) rotateX(5deg); }
.js .build .bi[data-enter="z"], .js .build .bi--img[data-enter="z"] > * { transform-origin: 50% 60%; }

/* ======================================================================
   Visual direction from the NR monogram: indigo watercolor ink on warm paper
   ====================================================================== */
:root { --accent: #22314d; --wash: #c5cbd3; --ink-mid: #647587; --page: #f1efea; --bone: #f1efea; }
.page-project { --page: #f8f7f3; }
::selection { background: var(--accent); color: #fff; }
.btn--rust { background: var(--accent); }
.btn--rust:hover, .btn--rust:focus-visible, .next:hover .next__go { background: #121c30; }
.land__wash { background: linear-gradient(90deg, rgba(241, 239, 234, .9) 0%, rgba(241, 239, 234, .74) 36%, rgba(241, 239, 234, .38) 68%, rgba(241, 239, 234, .2) 100%); }
.js .build .bi--img::after { border-color: rgba(34, 49, 77, .28); }
.rings, .page-project .scene__label::before { filter: hue-rotate(0deg); }
.feat__no, .cover__also .cl__n { color: var(--accent); }

/* header: the monogram itself is the logo */
.logo { width: auto; height: 46px; border-radius: 0; background: none; padding: 0; display: flex; align-items: center; }
.logo img { height: 40px; width: auto; transition: transform .6s var(--ease-out); }
.logo:hover img { transform: rotate(-3deg) scale(1.04); }

/* loader: the monogram paints in like a brush stroke, then the name */
.loader__nr { height: 64px; width: auto; clip-path: inset(0 100% 0 0); animation: brush 1.1s cubic-bezier(.6, 0, .2, 1) .75s forwards; }
@keyframes brush { to { clip-path: inset(0 0 0 0); } }
.loader__mark { gap: 26px; }
.loader__name span { animation-delay: calc(1.5s + var(--i) * 75ms); }
.loader__bar { animation-delay: 1.8s; }
.js:not(.seen) .loader { animation: loader-fade .9s ease 2.75s forwards; }
.js:not(.seen) { --intro: 3.05s; }

/* cover seal: the monogram on a paper disc */
.seal { background: var(--page); width: clamp(76px, 6.4vw, 104px); box-shadow: 0 18px 30px -16px rgba(0, 0, 0, .35); padding: 0; }
.seal img { width: 72%; height: auto; }

/* footer signature */
.thanks__nr { width: clamp(150px, 15vw, 240px); height: auto; margin: 0 0 18px auto; display: block; }
@media (max-width: 860px) { .thanks__nr { margin-left: 0; } .logo img { height: 34px; } .loader__nr { height: 52px; } }

/* calm again: one soft fade for each section's lead image, nothing else moves */
.js .reveal-lead .zoom img { clip-path: none !important; opacity: 0; transition: opacity 1.2s ease; }
.js .reveal-lead.is-in .zoom img { opacity: 1; }
.cmp[data-drift] { translate: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal-lead .zoom img { opacity: 1; } }

/* project pages: the build-up carries the motion, so the lead image needs no separate fade */
.js .build .reveal-lead .zoom img { opacity: 1; transition: none; }

/* ======================================================================
   Project pages, revision 13: her own two-page spreads, set as magazine
   spreads (running head and rule, folios, a faint spine) on a white page.
   Nothing is scaled, so text stays crisp. Motion is transform and opacity
   only, so it stays on the graphics card and scrolling stays smooth.
   ====================================================================== */
.page-project { --page: #fff; }
.page-project .spread__in .zoom img, .page-project .full__frame .zoom img { mix-blend-mode: normal; }
.page-project .spreads { padding-block: clamp(40px, 8vh, 96px) 0; }
.page-project .spread, .page-project .full { padding-inline: var(--pad); margin-bottom: clamp(96px, 16vh, 180px); }
.full__in { position: relative; }
@media (min-width: 1000px) and (orientation: landscape) and (min-height: 600px) {
  .page-project .spread, .page-project .full { min-height: 0; height: auto; display: block; padding-block: 0; border-top: 0; }
  .page-project .spread + .spread, .page-project .full + .spread { border-top: 0; }
  .page-project .spread__in, .page-project .full__in {
    max-width: min(1560px, max(1040px, calc((100svh - 120px) * 1.545)));
    margin-inline: auto; padding: 66px 0 64px; background: none;
  }
  .page-project .spread__in { aspect-ratio: 1224 / 792; min-height: auto; column-gap: clamp(72px, 6.6vw, 124px); }
  /* the spine */
  .page-project .spread__in::before {
    content: ""; position: absolute; z-index: 0; left: 50%; top: 66px; bottom: 64px; width: 1px; inset-inline-end: auto;
    background: linear-gradient(transparent, rgba(34, 49, 77, .16) 10%, rgba(34, 49, 77, .16) 90%, transparent);
    box-shadow: none; border-radius: 0; transform-origin: top;
  }
  .page-project .spread__in::after { content: none; }
  .page-project .runhead { top: 0; bottom: auto; left: 0; right: 0; padding-bottom: 12px; border-bottom: 0; color: var(--ink); }
  .page-project .runhead::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink); transform-origin: left; }
  .page-project .folio { bottom: 0; font-size: 20px; }
  .page-project .folio--l { left: 0; }
  .page-project .folio--r { right: 0; }
  .page-project .full__in { text-align: center; }
  .page-project .full__frame { position: relative; display: inline-block; height: auto; }
  .page-project .full__frame .zoom, .page-project .full__frame .zoom img { width: auto; height: auto; max-width: 100%; max-height: calc(100svh - 190px); object-fit: contain; }
}

/* the build, made light: pieces arrive from their own page's side, headings and
   each spread's lead picture rise forward; no masks, no 3D, no per-frame scripting */
.js .build { perspective: none; }
.js .build .bi--img, .cmp[data-drift] { translate: none; }
.js .build .bi, .js .build .bi--img > * {
  --t: calc(var(--k, 0) * 110ms + 120ms);
  transition: transform 1.1s var(--ease-out) var(--t), opacity .8s ease var(--t);
  clip-path: none;
}
.js .build:not(.is-built) .bi:not(.bi--img) { opacity: 0; transform: translate3d(calc(var(--dir, -1) * 5vw), 0, 0); clip-path: none; }
.js .build:not(.is-built) .bi--img > * { opacity: 0; transform: translate3d(calc(var(--dir, -1) * 7vw), 0, 0); clip-path: none; }
.js .build:not(.is-built) .bi[data-enter="z"]:not(.bi--img) { transform: scale(.94); }
.js .build:not(.is-built) .bi--img[data-enter="z"] > * { transform: scale(.9); }
.js .build:not(.is-built) .bi, .js .build:not(.is-built) .bi--img > * { will-change: transform, opacity; }
.js .build .bi--img::after { animation: none !important; display: none; }
.js .build .runhead::after { transform: scaleX(0); transition: transform 1.3s var(--ease-io); }
.js .build.is-built .runhead::after { transform: scaleX(1); }
.js .build .spread__in::before { transform: scaleY(0); transition: transform 1.4s var(--ease-io) .25s; }
.js .build.is-built .spread__in::before { transform: scaleY(1); }
.js .build .folio { opacity: 0; transition: opacity .8s ease .9s; }
.js .build.is-built .folio { opacity: 1; }
@media (max-width: 860px) {
  .js .build:not(.is-built) .bi:not(.bi--img), .js .build:not(.is-built) .bi--img > * { transform: translate3d(0, 24px, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .js .build .bi, .js .build .bi--img > *, .js .build .folio { opacity: 1 !important; transform: none !important; }
  .js .build .runhead::after, .js .build .spread__in::before { transform: none !important; }
}

/* project statement: readable weight instead of hairlines */
@media (min-width: 1000px) and (orientation: landscape) and (min-height: 600px) {
  .page-project .overture__quote p { font-weight: 350; letter-spacing: -.025em; font-size: min(4.4vw, 7.8vh); line-height: 1.06; max-width: 16em; color: var(--ink); }
}

/* story rail: the project's sections down the left edge, numbered; names show on hover */
@media (min-width: 1000px) and (orientation: landscape) and (min-height: 600px) {
  .story-bar {
    left: clamp(14px, 1.6vw, 26px); right: auto; top: 50%; bottom: auto; display: grid; grid-template-columns: none; gap: 6px;
    padding: 0; background: none; transform: translate(-14px, -50%);
  }
  .story-bar.is-visible { transform: translate(0, -50%); }
  .story-bar button { position: relative; display: flex; align-items: center; gap: 10px; padding: 3px 0; min-width: 0; }
  .story-bar b { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 13px; letter-spacing: 0; color: var(--muted); width: 1.4em; transition: color .4s ease; }
  .story-bar i { width: 1px; height: 34px; background: var(--line); }
  .story-bar i::after { transform-origin: top; transform: scaleY(var(--f, 0)); }
  .story-bar span {
    position: absolute; left: calc(100% + 6px); top: 50%; translate: -6px -50%; opacity: 0; pointer-events: none;
    white-space: nowrap; overflow: visible; max-width: none; padding: 6px 10px; background: var(--page);
    box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .3); transition: opacity .3s ease, translate .3s ease, color .3s ease;
  }
  .story-bar button:hover span, .story-bar button:focus-visible span { opacity: 1; translate: 0 -50%; }
  .story-bar button[aria-current="true"] b, .story-bar button:hover b { color: var(--ink); }
  .story-bar button[aria-current="true"] i { background: rgba(34, 49, 77, .25); }
}

/* "In this issue" as an editor's letter: her collage beside the statement, numbers over the facts */
.intro__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .42fr); gap: clamp(40px, 6vw, 120px); align-items: end; }
.intro__art { margin: 0; justify-self: end; width: 100%; max-width: 440px; }
.intro__art img { width: 100%; height: auto; box-shadow: 0 30px 60px -36px rgba(20, 28, 44, .45); }
.intro__art .cap { margin-top: 12px; }
.intro__n { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(44px, 4.2vw, 76px); line-height: 1; letter-spacing: -.02em; color: var(--accent); margin-bottom: 14px; }
@media (max-width: 860px) {
  .intro__body { grid-template-columns: 1fr; gap: 40px; }
  .intro__art { justify-self: start; max-width: 78%; }
}

/* no sideways shift from off-screen pieces */
html { overflow-x: clip; }

/* story rail as thumb tabs on the right edge, in a strip kept clear of the project */
@media not all and (min-width: 1000px) and (orientation: landscape) and (min-height: 600px) { .story-bar { display: none; } }
@media (min-width: 1000px) and (orientation: landscape) and (min-height: 600px) {
  .page-project { --rail: 64px; }
  .page-project .overture, .page-project .spreads, .page-project .next { padding-right: var(--rail); }
  .story-bar { left: auto; right: clamp(12px, 1.3vw, 20px); transform: translate(14px, -50%); }
  .story-bar.is-visible { transform: translate(0, -50%); }
  .story-bar button { flex-direction: row-reverse; }
  .story-bar b { text-align: right; }
  .story-bar span { left: auto; right: calc(100% + 6px); translate: 6px -50%; }
  .story-bar button:hover span, .story-bar button:focus-visible span { translate: 0 -50%; }
}
@media (min-width: 1000px) and (orientation: landscape) and (min-height: 600px) {
  .page-project .overture, .page-project .next { padding-right: calc(var(--pad) + var(--rail)); }
  .page-project .spread__in, .page-project .full__in { max-width: min(100%, 1560px, max(1040px, calc((100svh - 120px) * 1.545))); }
}
@media (min-width: 1000px) and (orientation: landscape) and (min-height: 600px) {
  .page-project .spread__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
/* entrances stay inside the page, never under the rail */
.js .build:not(.is-built) .bi:not(.bi--img) { transform: translate3d(calc(var(--dir, -1) * min(4vw, 40px)), 0, 0); }
.js .build:not(.is-built) .bi--img > * { transform: translate3d(calc(var(--dir, -1) * min(5vw, 48px)), 0, 0); }
.js .build:not(.is-built) .bi[data-enter="z"]:not(.bi--img) { transform: scale(.94); }
.js .build:not(.is-built) .bi--img[data-enter="z"] > * { transform: scale(.9); }
@media (max-width: 860px) {
  .js .build:not(.is-built) .bi:not(.bi--img), .js .build:not(.is-built) .bi--img > * { transform: translate3d(0, 24px, 0); }
}

/* "In this issue" typography: a book serif for the letter, clear lining figures for the numbers */
.intro .intro__text {
  font-family: var(--serif); font-weight: 400; font-style: normal; text-indent: 0;
  font-size: clamp(30px, 3.5vw, 62px); line-height: 1.16; letter-spacing: -.008em; max-width: 19em; text-wrap: pretty;
}
.intro .sh__tag { white-space: nowrap; }
.intro__facts dt { display: grid; gap: 12px; margin-bottom: 12px; color: var(--muted); }
.intro__n {
  font-family: var(--sans); font-weight: 200; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.03em;
  font-size: clamp(46px, 4.4vw, 80px); line-height: .9; color: var(--accent); margin: 0;
}
.intro .sh__tag { max-width: none; text-align: right; }
.intro__body { align-items: center; }
@media (max-width: 860px) { .intro .sh__tag { text-align: left; white-space: normal; } }

/* loader: her monogram painted in ink (first visit), the name typing in beneath it */
.loader__ink { display: none; }
.js.ink:not(.seen) .loader .loader__ring, .js.ink:not(.seen) .loader .loader__nr { display: none; }
.js.ink:not(.seen) .loader .loader__mark { flex-direction: column; gap: clamp(14px, 2vh, 22px); animation: fade-in .35s ease .05s forwards; }
.js.ink:not(.seen) .loader .loader__ink {
  display: block; width: clamp(240px, 26vw, 380px); height: auto; aspect-ratio: 720 / 472;
  mix-blend-mode: multiply; background: transparent; pointer-events: none;
}
.js.ink:not(.seen) .loader .loader__name { margin-right: -.5em; }
/* the ink blends against the loader's own paper (the fading mark is its own layer) */
.js.ink:not(.seen) .loader .loader__mark { background: var(--page); isolation: isolate; }

/* landing tiles in one continuous motion: fade in while drifting together, close up, flow into the full frame */
.js .land__media {
  animation: land-flow 2.5s linear var(--intro) both, land-in .7s ease var(--intro) both;
}
@keyframes land-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes land-flow {
  0% {
    clip-path: polygon(50% 100%, 40% 60%, 40% 40%, 46% 40%, 46% 60%, 40% 60%, 50% 100%, 46.8% 69%, 46.8% 47%, 53.2% 47%, 53.2% 69%, 46.8% 69%, 50% 100%, 54% 71%, 54% 53%, 60% 53%, 60% 71%, 54% 71%, 50% 100%);
    animation-timing-function: cubic-bezier(.3, 0, .6, .8);
  }
  42% {
    clip-path: polygon(50% 100%, 40% 65%, 40% 37%, 46.67% 37%, 46.67% 65%, 40% 65%, 50% 100%, 46.66% 65%, 46.66% 37%, 53.34% 37%, 53.34% 65%, 46.66% 65%, 50% 100%, 53.33% 65%, 53.33% 37%, 60% 37%, 60% 65%, 53.33% 65%, 50% 100%);
    animation-timing-function: cubic-bezier(.4, .22, .18, 1);
  }
  100% {
    clip-path: polygon(50% 100%, 0% 100%, 0% 0%, 33.34% 0%, 33.34% 100%, 0% 100%, 50% 100%, 33.33% 100%, 33.33% 0%, 66.67% 0%, 66.67% 100%, 33.33% 100%, 50% 100%, 66.66% 100%, 66.66% 0%, 100% 0%, 100% 100%, 66.66% 100%, 50% 100%);
  }
}
@media (prefers-reduced-motion: reduce) { .js .land__media { clip-path: none; animation: none; } }

/* one intro, not two: the ink paints where the image will open, then the image opens out of it */
.js.ink:not(.seen) { --intro: 1.85s; }
.js.ink:not(.seen) .loader { background: transparent; pointer-events: none; animation: ink-out .9s ease 1.75s forwards; }
.js.ink:not(.seen) .loader__mark { background: var(--page); }
.js.ink:not(.seen) .loader__name { display: none; }
.js.ink:not(.seen) .loader__ink { width: clamp(260px, 26vw, 420px); }
@keyframes ink-out { to { opacity: 0; visibility: hidden; transform: scale(1.06); } }
.js.ink:not(.seen) .loader__mark { background: none; isolation: auto; }
.js.ink:not(.seen) .loader__ink { mix-blend-mode: normal; aspect-ratio: 520 / 341; }

/* Experience and affiliations: her studios, school and association, drifting past in black */
.allies { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 64px); margin-top: clamp(28px, 5vh, 56px); padding-top: clamp(20px, 3vh, 30px); border-top: 1px solid var(--line); }
.allies__t { color: var(--muted); white-space: nowrap; }
.allies__view { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.allies__track { display: flex; width: max-content; animation: allies 38s linear infinite; }
.allies__view:hover .allies__track { animation-play-state: paused; }
.allies__set { display: flex; align-items: center; gap: clamp(48px, 5.5vw, 96px); padding-right: clamp(48px, 5.5vw, 96px); list-style: none; margin: 0; }
.allies__set li { flex: none; display: flex; align-items: center; height: 64px; }
.allies__set img { display: block; width: auto; opacity: .86; transition: opacity .3s ease; }
.allies__set li:hover img { opacity: 1; }
@keyframes allies { to { transform: translate3d(-50%, 0, 0); } }
@media (max-width: 860px) {
  .allies { grid-template-columns: 1fr; gap: 14px; }
  .allies__set li { height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .allies__view { -webkit-mask-image: none; mask-image: none; }
  .allies__track { animation: none; width: auto; }
  .allies__set { flex-wrap: wrap; row-gap: 20px; padding-right: 0; }
  .allies__set[aria-hidden="true"] { display: none; }
}

/* ======================================================================
   The intro, as one idea: ink becomes the photograph.
   Her monogram paints on blank paper, the photograph appears inside the
   brushstrokes, then the ink bleeds outward until the photograph fills
   the screen. Return visits simply fade the photograph in.
   ====================================================================== */
.js .land__media { clip-path: none; -webkit-mask-image: none; mask-image: none; animation: ink-fade-in 1.1s ease var(--intro) both; }
@keyframes ink-fade-in { from { opacity: 0; } to { opacity: 1; } }
.land__ink { display: none; }
.js.ink:not(.seen) { --intro: -1.3s; }
.js.ink:not(.seen) .loader { display: none; }
.js.ink:not(.seen) .land__ink {
  display: block; position: absolute; z-index: 2; left: 50%; top: 50%; translate: -50% -50%;
  width: clamp(280px, 30vw, 460px); height: auto; pointer-events: none; opacity: 0; transition: opacity .35s ease;
}
.js.ink.ink-on .land__ink { opacity: 1; }
.js.ink.ink-fill .land__ink { opacity: 0; transition: opacity .8s ease .1s; }
.js.ink:not(.seen) .land__media {
  animation: none; opacity: 0; transition: opacity .7s ease;
  -webkit-mask-image: url("../video/nr-ink-mask.png"); mask-image: url("../video/nr-ink-mask.png");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: var(--mk-size, 0px 0px); mask-size: var(--mk-size, 0px 0px);
  -webkit-mask-position: var(--mk-pos, 50% 50%); mask-position: var(--mk-pos, 50% 50%);
}
.js.ink.ink-fill .land__media { opacity: 1; }
.js.ink.inked .land__media { -webkit-mask-image: none; mask-image: none; }
.js.ink:not(.seen) .land__media img { animation: land-scale 2.8s var(--ease-out) 0s both; }
/* the rest of the landing waits for the ink to open, then arrives */
.js.ink:not(.seen):not(.ink-bleed) .land *, .js.ink:not(.seen):not(.ink-bleed) .site-header { animation-play-state: paused !important; }
.js.ink:not(.seen) .site-header { animation: ink-fade-in .9s ease 1.2s both; }

/* ink drops and watercolor edges: the photograph appears in the ink's shapes, ringed in indigo like drying paint */
.land__rim { display: none; }
.js.ink:not(.seen) .land__media, .js.ink:not(.seen) .land__rim {
  -webkit-mask-image: url("../video/nr-ink-mask.png"), url("../video/bloom-1.png"), url("../video/bloom-2.png"), url("../video/bloom-3.png");
  mask-image: url("../video/nr-ink-mask.png"), url("../video/bloom-1.png"), url("../video/bloom-2.png"), url("../video/bloom-3.png");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: var(--mk-size, 0px 0px); mask-size: var(--mk-size, 0px 0px);
  -webkit-mask-position: var(--mk-pos, 0px 0px); mask-position: var(--mk-pos, 0px 0px);
}
.js.ink:not(.seen) .land__rim { display: block; position: absolute; inset: 0; background: #22314d; opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.js.ink.ink-fill .land__rim { opacity: .62; }
.js.ink.inked .land__rim { opacity: 0; transition-duration: .9s; }
.js.ink:not(.seen) .land__ink { width: clamp(300px, 34vw, 520px); }
/* the headline waits until the ink has nearly filled the page */
.js.ink:not(.seen) { --intro: .1s; }
.js.ink:not(.seen) .site-header { animation-delay: 2.3s; }

/* contents: page number beside the title, the project number stays the big numeral */
.toc__page { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: .72em; letter-spacing: 0; color: var(--muted); margin-left: .5em; white-space: nowrap; }
.story-bar b { min-width: 1.4em; }
.toc__page { text-transform: none; }
.toc__pg { font-family: var(--sans); font-weight: 200; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.03em; }

/* the reel: her projects inside the paint, each fading over the last, then all away to the landing photograph */
.land__reel { display: none; }
.js.ink:not(.seen) .land__reel { display: block; position: absolute; inset: 0; }
.js.ink:not(.seen) .land__reel img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; scale: 1.08;
  transition: opacity .45s ease, scale 1.6s var(--ease-out);
}
.js.ink:not(.seen) .land__reel img.is-on { opacity: 1; scale: 1; }
.js.ink.reel-done .land__reel img { opacity: 0; transition: opacity .7s ease; }
/* the headline after the reel and the bleed */
.js.ink:not(.seen) { --intro: 1.5s; }
.js.ink:not(.seen) .site-header { animation-delay: 3.7s; }
.js.ink:not(.seen) .land__media img:not(.land__reel img) { animation: land-scale 3.2s var(--ease-out) 2.4s both; }
.js.ink.reel-done:not(.seen) .land__reel img { opacity: 0; transition: opacity .7s ease; }
.js.ink:not(.seen) .land__reel img.is-past { visibility: hidden; }
.js.ink.ink-fill:not(.reel-done):not(.seen) .land__media > img { visibility: hidden; }

/* ======================================================================
   Watercolor accents: her indigo, used sparingly as a signature.
   Still images (no motion), behind the content, never over the work.
   ====================================================================== */
.intro__art, .intro__facts, .opener__text, .next, .thanks, .toc .sh, .about__hero { position: relative; isolation: isolate; }
.intro__art::before, .intro__facts::before, .opener__text::before, .next::before, .thanks::before, .toc .sh::after, .about__hero::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none; background: center / contain no-repeat;
}
/* a wash pooling behind her collage, a splatter flung beside the numbers */
.intro__art::before { left: -26%; top: -18%; width: 78%; aspect-ratio: 1; background-image: url("../paint/wash-bloom.png"); opacity: .34; }
.intro__facts::before { left: -64px; top: -56px; width: 200px; aspect-ratio: 1; background-image: url("../paint/splatter-1.png"); opacity: .5; }
/* contents: a splatter beside the heading */
.toc .sh::after { left: clamp(260px, 26vw, 420px); top: -40px; width: 170px; aspect-ratio: 1; background-image: url("../paint/splatter-2.png"); opacity: .42; }
/* project openers: a splatter behind the project number */
.opener__text::before { left: calc(var(--pad) * -.4); top: 6%; width: clamp(180px, 16vw, 260px); aspect-ratio: 1; background-image: url("../paint/splatter-2.png"); opacity: .5; }
/* the next project: a wash behind the invitation */
.next { overflow: hidden; }
.next::before { right: -6%; top: 50%; translate: 0 -50%; width: clamp(320px, 34vw, 560px); aspect-ratio: 1; background-image: url("../paint/wash-bloom.png"); opacity: .22; }
/* footer: a splatter near the signature */
.thanks::before { right: 6%; top: 10%; width: 220px; aspect-ratio: 1; background-image: url("../paint/splatter-1.png"); opacity: .4; }
/* about: a wash behind the opening */
.about__hero::before { left: -8%; top: -10%; width: clamp(300px, 36vw, 560px); aspect-ratio: 1; background-image: url("../paint/wash-bloom.png"); opacity: .26; }
@media (max-width: 860px) {
  .intro__facts::before, .toc .sh::after { width: 130px; }
  .toc .sh::after { left: auto; right: 0; }
  .opener__text::before { width: 150px; }
}
/* placements, refined */
.intro__facts::before { left: auto; right: -70px; top: -96px; width: 190px; }
.opener__text::before { content: none; }
.opener .lockup { position: relative; isolation: isolate; }
.opener .lockup::before { content: ""; position: absolute; z-index: -1; pointer-events: none; left: -.55em; top: -.9em; width: 3.4em; aspect-ratio: 1; background: url("../paint/splatter-2.png") center / contain no-repeat; opacity: .45; font-size: clamp(40px, 4vw, 64px); }
.next::before { right: auto; left: -10%; width: clamp(360px, 38vw, 620px); opacity: .2; }

/* brushstroke: one swipe of indigo paint behind a few big titles */
.next__title, .thanks__word, .about__name { position: relative; isolation: isolate; }
.next__title::before, .thanks__word::before, .about__name::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  background: url("../paint/brush-stroke.png") left center / 100% 100% no-repeat; aspect-ratio: 1468 / 274;
}
.next__title { display: inline-block; }
.next__title::before { left: -4%; bottom: -.02em; width: 92%; opacity: .26; rotate: -1.6deg; }
.thanks__word::before { left: -6%; top: 46%; width: 86%; opacity: .2; rotate: -2.4deg; }
.about__name::before { left: -3%; bottom: .02em; width: 70%; opacity: .2; rotate: -1.2deg; }
.next::before { content: none; }  /* the stroke replaces the wash here */
@media (max-width: 860px) { .thanks::before { top: auto; bottom: 22%; right: 4%; width: 150px; } }
/* about: one paint gesture only, the brushstroke behind her name */
.about__hero::before { content: none; }



/* ======================================================================
   Her mark, holding her work (About page). Still: the monogram is a
   window onto one project; the index beside it chooses which.
   ====================================================================== */
.mono { background: var(--page); padding: clamp(110px, 16vh, 190px) var(--pad); }
.mono__in { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 112px); align-items: center; }
.mono__fig { position: relative; isolation: isolate; }
.mono__fig::before { content: ""; position: absolute; z-index: -1; left: 8%; right: 8%; top: 50%; aspect-ratio: 1; translate: 0 -50%; background: url("../paint/wash-bloom.png") center / contain no-repeat; opacity: .14; pointer-events: none; }
.mono__mark { filter: drop-shadow(0 18px 26px rgba(20, 28, 44, .16)); }
.mono__letters { position: relative; aspect-ratio: 1000 / 674; -webkit-mask: url("../paint/nr-letters-mask.png") center / contain no-repeat; mask: url("../paint/nr-letters-mask.png") center / contain no-repeat; }
.mono__letters img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0; transition: opacity .7s ease; }
.mono__letters img.is-on { opacity: 1; }
.mono__index .label { color: var(--muted); margin-bottom: 18px; }
.mono__list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.mono__list a { display: grid; grid-template-columns: 2.6em minmax(0, 1fr); column-gap: 14px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--line); text-decoration: none; color: var(--muted); transition: color .35s ease; }
.mono__n { grid-row: 1 / span 2; font-weight: 200; font-size: 26px; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.02em; }
.mono__t { font-family: var(--display); font-size: clamp(22px, 1.9vw, 30px); line-height: 1.15; color: var(--ink); opacity: .55; transition: opacity .35s ease; }
.mono__k { margin-top: 4px; font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.mono__list a.is-on, .mono__list a:hover, .mono__list a:focus-visible { color: var(--accent); }
.mono__list a.is-on .mono__t, .mono__list a:hover .mono__t, .mono__list a:focus-visible .mono__t { opacity: 1; }
@media (max-width: 860px) {
  .mono__in { grid-template-columns: 1fr; gap: 36px; }
}
@media (prefers-reduced-motion: reduce) { .mono__letters img { transition: none; } }

/* her mark, as a still moment: the monogram centred, large, holding a contact sheet of her work */
.mono { padding: clamp(100px, 15vh, 180px) var(--pad); }
.mono__fig { max-width: 1120px; margin: 0 auto; }
.mono__fig::before { left: 4%; right: 4%; opacity: .12; }
.mono__mark { filter: drop-shadow(0 22px 30px rgba(20, 28, 44, .16)); }
.mono__letters { display: flex; gap: 5px; background: transparent; }
.mono__band { position: relative; flex: 0 0 calc(var(--w) - 4px); overflow: hidden; }
.mono__band img { position: absolute; inset: -6%; width: 112%; height: 112%; max-width: none; object-fit: cover; opacity: 1;
  translate: calc(var(--mx, 0) * var(--d, 0) * 18px) calc(var(--my, 0) * var(--d, 0) * 12px); transition: translate .9s var(--ease-out); }
.mono__band:nth-child(even) img { translate: calc(var(--mx, 0) * -14px) calc(var(--my, 0) * -10px); }
@media (prefers-reduced-motion: reduce) { .mono__band img { translate: none; transition: none; } }


/* cover: each cover line's picture, shown in the centre while it is pointed at */
.cover__img { position: relative; }
.cover__alts { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.cover__alts img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0; scale: 1.03; transition: opacity .5s ease, scale 1.2s var(--ease-out); }
.cover__alts img.is-on { opacity: 1; scale: 1; }
@media (prefers-reduced-motion: reduce) { .cover__alts img { transition: none; scale: 1; } }

/* ======================================================================
   Phone, made as carefully as the desktop. Everything here is scoped to
   small screens; the desktop layout is untouched.
   ====================================================================== */
@media (max-width: 860px) {
  /* opening screen: a stronger wash behind the hairline capitals, a touch more weight */
  .land__wash { background: linear-gradient(180deg, rgba(241, 239, 234, .25) 0%, rgba(241, 239, 234, .74) 30%, rgba(241, 239, 234, .86) 62%, rgba(241, 239, 234, .94) 100%); }
  .land__title { font-weight: 200; letter-spacing: -.045em; }

  /* cover: the cover picture at its true proportions, a full-width masthead */
  .cover { min-height: 0; padding-bottom: 56px; }
  .cover__img img { width: 100%; height: auto !important; }
  .cover__mast { font-size: 18.6vw; white-space: nowrap; }

  /* homepage projects: less dead air between them */
  .feat__in { padding: 56px var(--pad) 64px; }

  /* project opener: a lockup with presence; the splatter sits behind the title, clear of the number */
  .page-project .opener .lockup { font-size: clamp(34px, 9.4vw, 44px); }
  .opener .lockup::before { left: auto; right: -.2em; top: -1.2em; width: 2.6em; }
  /* the statement reads solid on a phone */
  .overture__quote .wd { opacity: 1 !important; }

  /* project spreads read as magazine pages: a running head with its page numbers, real headings, one margin */
  .page-project .spreads { padding-top: 24px; }
  .page-project .spread { margin-bottom: 80px; }
  .page-project .spread__in { row-gap: 32px; }
  .page-project .runhead { display: flex; position: static; justify-content: space-between; align-items: baseline; gap: 12px; padding: 0 0 10px; border-bottom: 1px solid var(--ink);
    font-size: 9.5px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--ink); }
  .page-project .runhead span:first-child { display: none; }
  .page-project .runhead::after { content: attr(data-pages); font-family: var(--serif); font-style: italic; font-size: 15px; letter-spacing: 0; text-transform: none; }
  .page-project .folio { display: none; }
  .page-project .spread__head { padding-left: 0; gap: 10px; }
  .page-project .spread__head::before { content: none; }
  .page-project .spread__title { font-size: 10.5px; letter-spacing: .3em; color: var(--accent); }
  .page-project .spread__head:not(:has(.spread__sub)) .spread__title { font-family: var(--display); font-weight: 400; font-size: 40px; line-height: 1.02; letter-spacing: -.01em; text-transform: none; color: var(--ink); }
  .page-project .spread__sub { font-size: 30px; line-height: 1.12; max-width: none; }
  .page-project .page { gap: 32px; }
  .page-project .fig--inset, .page-project .fig--narrow, .page-project .fixtures { padding-inline: 0; }
  .page-project .fig--parti { width: 100%; margin-left: 0; }
  .page-project .fig--tall .fig__media { width: 100%; }
  .page-project .fig--legend .zoom img { width: 100%; margin-left: 0; }
  .page-project .spread .zoom img { width: 100%; }
  .page-project .cap, .page-project .cap--r, .page-project .cap--c { text-align: left; }
  .page-project .body, .page-project .body.inset { padding-inline: 0; font-size: 16px; line-height: 1.8; }
  .page-project .page--l > .body:first-of-type::first-letter { float: left; font-family: var(--display); font-size: 3.5em; line-height: .8; margin: .06em .12em 0 0; color: var(--ink); }
  .page-project .full { padding-inline: 0; margin-bottom: 80px; }
  .page-project .full__in .runhead { margin: 0 var(--pad) 18px; }

  /* footers: the splatter sits clear of her name */
  .thanks::before { top: 0; bottom: auto; right: 0; width: 120px; }
}
@media (max-width: 860px) {
  .cover__mast { font-size: 16.4vw; }
  .toc { padding-top: 64px; padding-bottom: 56px; }
  .intro { padding-top: 72px; padding-bottom: 64px; }
  .path { padding-top: 72px; }
}

/* ======================================================================
   Phone: the homepage projects composed like the desktop spreads, not
   stacked. A six-column grid; huge titles; the picture bleeds off one
   edge while the card overlaps it from the other; the supporting figures
   stagger at different sizes. Mirrored project to project, as on desktop.
   ====================================================================== */
@media (max-width: 860px) {
  .feat .feat__in { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 12px; row-gap: 0; padding: 64px var(--pad) 80px; }
  .feat .feat__more { display: contents !important; }
  .feat .feat__run { grid-row: 1 !important; grid-column: 1 / -1 !important; margin: 0 0 26px !important; }
  .feat .feat__title { grid-row: 2 !important; grid-column: 1 / -1 !important; font-size: min(23vw, 132px); line-height: .84; margin: 0 !important; }
  .feat .feat__title .feat__t { display: block; }
  .feat .feat__deck { grid-row: 3 !important; grid-column: 1 / -1 !important; margin: 12px 0 0 !important; }
  .feat .feat__a { grid-row: 4 !important; margin: 30px 0 0 !important; position: relative; z-index: 1; }
  .feat .feat__a img { width: 100%; height: auto; box-shadow: none; }
  .feat .feat__a .feat__cap { padding-inline: 0; }
  .feat .feat__text { grid-row: 5 !important; margin: -72px 0 0 !important; position: relative; z-index: 2; box-shadow: 0 30px 50px -30px rgba(20, 28, 44, .45); }
  .feat .feat__quote { grid-row: 6 !important; margin: 48px 0 0 !important; }
  .feat .feat__quote p { font-size: clamp(26px, 7.4vw, 34px); line-height: 1.12; }
  .feat .feat__b { grid-row: 7 !important; margin: 40px 0 0 !important; position: relative; z-index: 1; }
  .feat .feat__c { grid-row: 8 !important; margin: -36px 0 0 !important; position: relative; z-index: 2; }
  .feat .feat__b img, .feat .feat__c img { width: 100%; height: auto; }
  .feat .feat__b, .feat .feat__c { flex: none; scroll-snap-align: none; }

  /* picture right, words left (Orlando, Equinox, Liquid Persuasion) */
  .feat .feat__a { grid-column: 2 / -1 !important; margin-right: calc(-1 * var(--pad)) !important; }
  .feat .feat__a .feat__cap { padding-right: var(--pad); }
  .feat .feat__text { grid-column: 1 / 6 !important; }
  .feat .feat__quote { grid-column: 1 / 6 !important; }
  .feat .feat__b { grid-column: 3 / -1 !important; }
  .feat .feat__c { grid-column: 1 / 4 !important; }
  .feat .feat__deck { text-align: right !important; justify-self: end !important; }

  /* mirrored: picture left, words right (Westwood, Biomachina) */
  .feat--westwood-town-hall-flats .feat__title, .feat--biomachina .feat__title { text-align: right !important; }
  .feat--westwood-town-hall-flats .feat__deck, .feat--biomachina .feat__deck { text-align: left !important; justify-self: start !important; }
  .feat--westwood-town-hall-flats .feat__a, .feat--biomachina .feat__a { grid-column: 1 / 6 !important; margin-right: 0 !important; margin-left: calc(-1 * var(--pad)) !important; }
  .feat--westwood-town-hall-flats .feat__a .feat__cap, .feat--biomachina .feat__a .feat__cap { padding-right: 0; padding-left: var(--pad); }
  .feat--westwood-town-hall-flats .feat__text, .feat--biomachina .feat__text { grid-column: 2 / -1 !important; }
  .feat--westwood-town-hall-flats .feat__quote, .feat--biomachina .feat__quote { grid-column: 2 / -1 !important; }
  .feat--westwood-town-hall-flats .feat__b, .feat--biomachina .feat__b { grid-column: 1 / 5 !important; }
  .feat--westwood-town-hall-flats .feat__c, .feat--biomachina .feat__c { grid-column: 4 / -1 !important; }
  .feat--biomachina .feat__title .feat__t2 { margin-right: -.04em; }

  /* Dwyer: the title splits around the picture, as on desktop */
  .feat--dwyer-residence .feat__title { display: contents !important; }
  .feat--dwyer-residence .feat__t1 { grid-row: 2; grid-column: 1 / -1; font-size: min(30vw, 160px); line-height: .84; }
  .feat--dwyer-residence .feat__a { grid-row: 3 !important; grid-column: 2 / 6 !important; margin: 4px 0 0 !important; }
  .feat--dwyer-residence .feat__t2 { grid-row: 3; grid-column: 3 / -1; align-self: end; justify-self: end; z-index: 3; font-size: min(30vw, 160px); line-height: .84; margin: 0 -.02em 1.6em 0 !important; color: var(--ink); mix-blend-mode: normal; }
  .feat--dwyer-residence .feat__deck { grid-row: 4 !important; justify-self: end !important; font-family: var(--display); font-size: 34px; letter-spacing: -.01em; text-transform: none; margin-top: 14px !important; }
  .feat--dwyer-residence .feat__text { grid-row: 5 !important; margin-top: 30px !important; grid-column: 1 / -1 !important; }

  /* Watercolor: centred, like the desktop page */
  .feat--watercolor-studies .feat__title { text-align: center !important; }
  .feat--watercolor-studies .feat__deck { justify-self: center !important; text-align: center !important; }
  .feat--watercolor-studies .feat__a { grid-column: 2 / 6 !important; margin-right: 0 !important; }
  .feat--watercolor-studies .feat__text { grid-column: 1 / -1 !important; }
  .feat--watercolor-studies .feat__quote { grid-column: 1 / -1 !important; text-align: center !important; }
}
@media (max-width: 860px) {
  .feat--dwyer-residence .feat__in .feat__t1 { grid-row: 2 !important; grid-column: 1 / -1 !important; text-align: left !important; }
  .feat--dwyer-residence .feat__in .feat__t2 { grid-row: 3 !important; grid-column: 3 / -1 !important; align-self: end !important; justify-self: end !important; text-align: right !important; margin: 0 -.02em .9em 0 !important; }
  .feat .feat__text { margin-top: -44px !important; }
  .feat--dwyer-residence .feat__text { margin-top: 30px !important; }
}
/* phone: the project statement set like the desktop, in capitals with her indigo on the last word */
@media (max-width: 860px) {
  .page-project .overture { padding-block: 80px 72px; }
  .page-project .overture__quote p { font-family: var(--sans); font-weight: 350; text-transform: uppercase; letter-spacing: -.025em; font-size: clamp(30px, 8.6vw, 44px); line-height: 1.04; text-indent: 0; color: var(--ink); }
  .page-project .overture__quote p::before, .page-project .overture__quote p::after { content: none; }
  .page-project .overture__quote .wd:last-child { color: var(--accent); }
}

/* always the light paper look, even when a phone asks for dark mode */
:root { color-scheme: only light; }

/* ======================================================================
   Phone motion: sections are paper cards that stack as you scroll, and
   pieces glide in from the side. Phone only; desktop is unchanged.
   ====================================================================== */
@media (max-width: 860px) {
  .m-stack { position: sticky; top: var(--stick, 0px); z-index: 1; background: var(--page); border-radius: 26px 26px 0 0; isolation: isolate;
    box-shadow: 0 -18px 36px -24px rgba(20, 28, 44, .32); transform-origin: 50% 0; scale: var(--sc, 1); }
  .m-stack::after { content: ""; position: absolute; inset: 0; z-index: 50; border-radius: inherit; background: #141b28; opacity: var(--dim, 0); pointer-events: none; }
  .m-stack:first-child, .land.m-stack { border-radius: 0; box-shadow: none; }
  .page-project .spread.m-stack, .page-project .full.m-stack { margin-bottom: 0; padding-top: 36px; padding-bottom: 72px; }
  .page-project .next.m-stack { margin-top: 0; }

  /* glide in from the side */
  .js .m-rev { opacity: 0; translate: calc(var(--from, 1) * 56px) 0; transition: opacity .8s ease, translate 1.1s var(--ease-out); }
  .js .m-rev.is-in { opacity: 1; translate: 0 0; }

  /* project spreads build piece by piece as each arrives: left pages from the left, right pages from the right */
  .js .build .bi, .js .build .bi--img > * { --t: 40ms; }
  .js .build.is-built .bi:not(.is-in):not(.bi--img) { opacity: 0; transform: translate3d(calc(var(--dir, 1) * 48px), 0, 0); }
  .js .build.is-built .bi--img:not(.is-in) > * { opacity: 0; transform: translate3d(calc(var(--dir, 1) * 64px), 0, 0); }
}
@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .m-stack { position: relative; scale: 1; } .m-stack::after { content: none; }
  .js .m-rev { opacity: 1; translate: none; }
}
@media (max-width: 860px) { .m-stack { overflow: clip; } }

/* ======================================================================
   Phone homepage deck: one composed screen at a time. A swipe up turns
   to the next screen, which slides in from the right.
   ====================================================================== */
@media (max-width: 860px) {
  html.deck-on { scroll-snap-type: y mandatory; }
  html.deck-on .land { scroll-snap-align: start; }
  html.deck-on .thanks { scroll-snap-align: start; }
  .deck { position: relative; height: calc(var(--n) * 100svh); }
  .deck__view { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--page); }
  .deck__track { display: flex; height: 100%; will-change: transform; }
  .deck__snap { position: absolute; left: 0; top: calc(var(--i) * 100svh); width: 1px; height: 1px; scroll-snap-align: start; scroll-snap-stop: always; pointer-events: none; }
  .deck__count { position: fixed; z-index: 40; right: var(--pad); bottom: 18px; margin: 0; font-size: 10px; font-weight: 500; letter-spacing: .26em; color: var(--muted); opacity: 0; transition: opacity .4s ease; pointer-events: none; }
  .deck.is-active .deck__count { opacity: 1; }

  .deck .scr { flex: 0 0 100vw; width: 100vw; height: 100svh; min-height: 0; margin: 0; overflow: hidden; position: relative; box-sizing: border-box;
    padding: 74px var(--pad) 46px; background: var(--page); border-radius: 0; box-shadow: none; display: grid; align-content: center; }
  .deck .scr > * { min-width: 0; }
  .deck [style*="--depth"] { translate: calc(var(--o, 0) * var(--depth, 0) * 100vw) 0; }

  /* cover */
  .deck .scr--cover-a { grid-template-columns: 1fr; grid-template-rows: auto auto minmax(0, 1fr); align-content: stretch; row-gap: 0; }
  .deck .scr--cover-a .cover__issue { margin-bottom: 18px; }
  .deck .scr--cover-a .cover__img { grid-column: 1; min-height: 0; display: flex; justify-content: center; margin: 0; }
  .deck .scr--cover-a .cover__img img { width: auto !important; height: 100% !important; max-width: 100%; object-fit: contain; }
  .deck .scr--cover-a .cover__word { grid-row: 3; grid-column: 1; align-self: end; justify-self: center; margin: 0 0 4% !important; font-size: 13vw; z-index: 3; }
  .deck .scr--cover-b { grid-template-columns: 1fr; row-gap: 0; }
  .deck .scr--cover-b .cover__lines { margin-top: 0; }
  .deck .scr--cover-b .cover__lines--r { text-align: right; }
  .deck .scr--cover-b .cover__lines--r a { justify-items: end; }

  /* contents, all seven at once */
  .deck .scr--toc { align-content: center; }
  .deck .scr--toc .sh { margin-bottom: 14px; }
  .deck .scr--toc .toc__group { margin: 10px 0 2px; }
  .deck .scr--toc .toc__row { padding: min(1.25svh, 11px) 0; }
  .deck .scr--toc .toc__pg { font-size: min(7.2vw, 3.6svh); }
  .deck .scr--toc .toc__t { font-size: min(3.6vw, 1.9svh); }
  .deck .scr--toc .toc__d { font-size: min(3.9vw, 2svh); }

  /* in this issue */
  .deck .scr--intro-a { grid-template-rows: auto minmax(0, 1fr); align-content: stretch; }
  .deck .scr--intro-a .intro__body { min-height: 0; grid-template-rows: auto minmax(0, 1fr); gap: 22px; align-content: start; }
  .deck .scr--intro-a .intro__text { font-size: min(7.6vw, 3.9svh); }
  .deck .scr--intro-a .intro__art { min-height: 0; max-width: none; display: flex; flex-direction: column; align-items: flex-end; }
  .deck .scr--intro-a .intro__art img { min-height: 0; flex: 1 1 auto; width: auto; max-width: 78%; object-fit: contain; }
  .deck .scr--intro-b { align-content: center; }
  .deck .scr--intro-b .intro__facts { margin-top: 0; gap: 18px; }
  .deck .scr--intro-b .intro__n { font-size: min(12vw, 6svh); }

  /* project screens: reuse the composition, one part per screen */
  .deck .scr--feat { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 12px; row-gap: 0; }
  .deck .scr--a { grid-template-rows: auto auto auto minmax(0, 1fr); align-content: stretch; }
  .deck .scr--a .feat__title { font-size: min(23vw, 11.5svh); }
  .deck .scr--a .feat__a { min-height: 0; display: flex; flex-direction: column; margin-top: 22px !important; }
  .deck .scr--a .feat__a > a { flex: 1 1 auto; min-height: 0; display: block; }
  .deck .scr--a .feat__a img { width: 100%; height: 100%; object-fit: contain; object-position: right bottom; }
  .deck .feat--westwood-town-hall-flats.scr--a .feat__a img, .deck .feat--biomachina.scr--a .feat__a img { object-position: left bottom; }
  .deck .feat--watercolor-studies.scr--a .feat__a img { object-position: center bottom; }
  .deck .feat--dwyer-residence.scr--a { grid-template-rows: auto auto minmax(0, 1fr) auto; }
  .deck .feat--dwyer-residence.scr--a .feat__a { margin-top: 4px !important; }
  .deck .feat--dwyer-residence.scr--a .feat__a img { object-position: center top; }
  .deck .feat--dwyer-residence.scr--a .feat__t1, .deck .feat--dwyer-residence.scr--a .feat__t2 { font-size: min(30vw, 13svh); }
  .deck .scr--b { align-content: center; }
  .deck .scr--b .feat__text { grid-row: 1 !important; margin: 0 !important; }
  .deck .scr--b .feat__quote { grid-row: 2 !important; margin: 40px 0 0 !important; }
  .deck .scr--b .feat__quote p { font-size: min(7.6vw, 3.9svh); }
  .deck .scr--c { align-content: center; }
  .deck .scr--c .feat__b { grid-row: 1 !important; margin: 0 !important; }
  .deck .scr--c .feat__c { grid-row: 2 !important; margin: -6svh 0 0 !important; }
  .deck .scr--c .feat__b img, .deck .scr--c .feat__c img { max-height: 36svh; width: 100%; object-fit: contain; object-position: left; }
  .deck .scr--c .feat__c img { object-position: right; }
  .deck .scr--c:not(:has(.feat__c)) .feat__b { grid-column: 1 / -1 !important; }
  .deck .scr--c:not(:has(.feat__c)) .feat__b img { max-height: 62svh; object-position: center; }

  /* path and the closing call */
  .deck .scr--path { align-content: center; padding-top: 70px; }
  .deck .scr--path .sh { margin-bottom: 12px; }
  .deck .scr--path .path__item { padding-block: min(.9svh, 8px); }
  .deck .scr--cta { align-content: center; }
}

/* deck, after Severin and Nabil: titles over pictures, one statement per screen, words lighting up */
@media (max-width: 860px) {
  .deck .scr { isolation: isolate; }
  /* cover: "interior design" sits across the foot of the picture */
  .deck .scr--cover-a .cover__img { grid-row: 3; }

  /* title over picture */
  .deck .scr--a:not(.feat--dwyer-residence) { grid-template-rows: auto minmax(0, 1fr) auto; }
  .deck .scr--a:not(.feat--dwyer-residence) .feat__run { grid-row: 1 !important; margin-bottom: 18px !important; }
  .deck .scr--a:not(.feat--dwyer-residence) .feat__a { grid-row: 2 !important; margin-top: 0 !important; }
  .deck .scr--a:not(.feat--dwyer-residence) .feat__title { grid-row: 2 !important; align-self: end; z-index: 3; margin-bottom: 2.4svh !important;
    color: #fff; mix-blend-mode: difference; font-size: min(25vw, 12.5svh); pointer-events: none; }
  .deck .scr--a:not(.feat--dwyer-residence) .feat__deck { grid-row: 3 !important; margin-top: 14px !important; }
  .deck .scr--a .feat__a .feat__cap { position: absolute; top: 10px; padding: 0 var(--pad); }
  .deck .feat--westwood-town-hall-flats.scr--a .feat__a .feat__cap, .deck .feat--biomachina.scr--a .feat__a .feat__cap { right: 0; text-align: right; }

  /* one statement per screen: hairline capitals, her indigo on the last word, lighting up word by word */
  .deck .scr--b { align-content: center; }
  .deck .scr--b .feat__quote { grid-column: 1 / -1 !important; text-align: left !important; }
  .deck .scr--b .feat__quote p { font-family: var(--sans); font-weight: 200; text-transform: uppercase; letter-spacing: -.045em; line-height: .96;
    font-size: min(11.2vw, 6.2svh); color: var(--ink); text-indent: 0; }
  .deck .scr--b .feat__quote p::before, .deck .scr--b .feat__quote p::after { content: none; }
  .deck .scr--b .qw { opacity: .12; transition: opacity .5s ease calc(var(--k) * 70ms + 250ms); }
  .deck .scr--b.is-cur .qw { opacity: 1; }
  .deck .scr--b .qw--last { color: var(--accent); }
  .deck .scr--b::before { content: "In her words"; position: absolute; left: var(--pad); top: 84px; font-size: 10px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }

  /* the story, with its pictures */
  .deck .scr--c { align-content: center; }
  .deck .scr--c .feat__text { grid-row: 1 !important; margin: 0 !important; }
  .deck .scr--c .feat__b { grid-row: 2 !important; margin: 22px 0 0 !important; }
  .deck .scr--c .feat__c { grid-row: 3 !important; margin: -5svh 0 0 !important; }
  .deck .scr--c .feat__b img, .deck .scr--c .feat__c img { max-height: 24svh; }
  .deck .scr--c:not(.has-c) .feat__b img { max-height: 34svh; }
  .deck .scr--c:not(.has-c) .feat__b { grid-column: 2 / -1 !important; }
}
@media (max-width: 860px) and (prefers-reduced-motion: reduce) { .deck .scr--b .qw { opacity: 1; } }
@media (max-width: 860px) {
  /* the picture sits on the title: anchored to the foot of its space, title overlapping its lower edge */
  .deck .scr--a .feat__a img { object-position: center bottom !important; }
  .deck .scr--a .feat__a .feat__cap { display: none; }
  .deck .scr--a .feat__title { margin-bottom: -1.2svh !important; }
  /* Dwyer joins the same composition in the deck */
  .deck .feat--dwyer-residence.scr--a { grid-template-rows: auto minmax(0, 1fr) auto !important; }
  .deck .feat--dwyer-residence.scr--a .feat__run { grid-row: 1 !important; margin-bottom: 18px !important; }
  .deck .feat--dwyer-residence.scr--a .feat__a { grid-row: 2 !important; grid-column: 1 / -1 !important; margin: 0 !important; }
  .deck .feat--dwyer-residence.scr--a .feat__title { display: block !important; grid-row: 2 !important; grid-column: 1 / -1 !important; align-self: end; z-index: 3;
    color: #fff; mix-blend-mode: difference; font-size: min(25vw, 12.5svh); margin: 0 0 -1.2svh !important; pointer-events: none; }
  .deck .feat--dwyer-residence.scr--a .feat__t1, .deck .feat--dwyer-residence.scr--a .feat__t2 { display: inline !important; grid-row: auto !important; grid-column: auto !important;
    font-size: inherit !important; margin: 0 !important; color: inherit !important; mix-blend-mode: normal !important; }
  .deck .feat--dwyer-residence.scr--a .feat__deck { grid-row: 3 !important; justify-self: end !important; margin-top: 14px !important;
    font-family: var(--sans); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; }
}
@media (max-width: 860px) {
  .deck .scr--a .feat__a { position: relative !important; align-self: stretch !important; min-height: 0; display: block !important; }
  .deck .scr--a .feat__a > a { position: absolute; inset: 0; }
  .deck .scr--a .feat__a img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-height: none !important; object-fit: contain; object-position: center bottom !important; }
  .deck .scr--a.feat--westwood-town-hall-flats .feat__a img, .deck .scr--a.feat--biomachina .feat__a img { object-position: left bottom !important; }
  .deck .scr--a.feat--orlando-sales-office .feat__a img, .deck .scr--a.feat--equinox-amaala-resort .feat__a img, .deck .scr--a.feat--liquid-persuasion .feat__a img { object-position: right bottom !important; }
}
@media (max-width: 860px) {
  /* in the deck, a screen's pieces are shown by the turn itself, not by a separate reveal */
  .deck .moment, .js .deck .moment { opacity: 1 !important; transform: none !important; animation: none !important; }
  .deck .scr--path { align-content: start; padding-top: 84px; }
  .deck .scr--path .sh__title { font-size: 26px; }
  .deck .scr--path .path__lead, .deck .scr--path .path__title { font-size: min(6.4vw, 3.2svh); }
  .deck .scr--path .path__item { padding-block: min(.6svh, 6px); }
  .deck .scr--path .path__cta { margin-top: 14px; }
}
@media (max-width: 860px) { .deck .scr--a .feat__a > .zoom { position: absolute; inset: 0; width: 100%; height: 100%; } }
@media (max-width: 860px) {
  /* the title leads, the picture fills the rest of the screen beneath it */
  .deck .scr--a, .deck .feat--dwyer-residence.scr--a { grid-template-rows: auto auto auto minmax(0, 1fr) !important; }
  .deck .scr--a .feat__run, .deck .feat--dwyer-residence.scr--a .feat__run { grid-row: 1 !important; }
  .deck .scr--a .feat__title, .deck .feat--dwyer-residence.scr--a .feat__title { grid-row: 2 !important; align-self: start !important; color: var(--ink) !important; mix-blend-mode: normal !important; margin: 0 !important; }
  .deck .scr--a .feat__deck, .deck .feat--dwyer-residence.scr--a .feat__deck { grid-row: 3 !important; margin: 10px 0 0 !important; }
  .deck .scr--a .feat__a, .deck .feat--dwyer-residence.scr--a .feat__a { grid-row: 4 !important; margin-top: 22px !important; }
  .deck .scr--a .feat__a img { object-position: center top !important; }
  .deck .scr--a.feat--westwood-town-hall-flats .feat__a img, .deck .scr--a.feat--biomachina .feat__a img { object-position: left top !important; }
  .deck .scr--a.feat--orlando-sales-office .feat__a img, .deck .scr--a.feat--equinox-amaala-resort .feat__a img, .deck .scr--a.feat--liquid-persuasion .feat__a img { object-position: right top !important; }
  /* the path fits its screen */
  .deck .scr--path .sh { margin-bottom: 6px; }
  .deck .scr--path .path__item { padding-block: 0; }
  .deck .scr--path .path__list, .deck .scr--path ol { margin-top: 10px; }
}
@media (max-width: 860px) {
  .deck .scr.scr.scr--a .feat__run { grid-row: 1 !important; }
  .deck .scr.scr.scr--a .feat__title { grid-row: 2 !important; align-self: start !important; color: var(--ink) !important; mix-blend-mode: normal !important; margin: 0 !important; }
  .deck .scr.scr.scr--a .feat__deck { grid-row: 3 !important; margin: 10px 0 0 !important; }
  .deck .scr.scr.scr--a .feat__a { grid-row: 4 !important; margin-top: 22px !important; }
}
@media (max-width: 860px) {
  .deck .scr--c .feat__b img, .deck .scr--c .feat__c img { max-height: 21svh; }
  .deck .scr--c:not(.has-c) .feat__b img { max-height: 30svh; }
}
@media (max-width: 860px) and (max-height: 720px) {
  .deck .scr--path .path__cta { display: none; }
  .deck .scr--c .feat__text { padding: 18px 20px; }
}
@media (max-width: 860px) and (max-height: 720px) { .deck .scr--c .feat__b img, .deck .scr--c .feat__c img { max-height: 19svh; } }