*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root { --bg:#faf9f7; --ink:#1a1916; --muted:#77736b; --red:#c8392b; --line:rgba(26,25,22,.12); --serif:'EB Garamond',Georgia,serif; --mono:'DM Mono',monospace; }
html { scroll-behavior: smooth; }
body { background:var(--bg); color:var(--ink); font-family:var(--serif); -webkit-font-smoothing:antialiased; }
a { color:inherit; }
img { width:100%; display:block; }
.eyebrow, .section-label, .hero-meta, footer { font-family:var(--mono); font-size:10px; font-weight:300; letter-spacing:.15em; line-height:1.6; text-transform:uppercase; }
.eyebrow, .section-label { color:var(--red); }
.project-hero { min-height:640px; display:grid; grid-template-columns:1fr 1fr; }
.hero-media { min-height:640px; overflow:hidden; background:#ddd5ca; }
.hero-media img { height:100%; object-fit:cover; object-position:center; }
.hero-copy { padding:clamp(62px,6vw,96px) clamp(48px,6vw,96px); display:flex; flex-direction:column; justify-content:space-between; gap:60px; }
.hero-copy h1 { max-width:680px; font-size:clamp(58px,5.6vw,88px); font-weight:400; letter-spacing:-.045em; line-height:.94; }
.hero-story { max-width:650px; margin-top:32px; }
.hero-story p { color:var(--muted); font-size:clamp(18px,1.35vw,22px); line-height:1.55; }
.hero-story p + p { margin-top:16px; }
.hero-meta { display:flex; flex-wrap:wrap; justify-content:space-between; gap:18px; color:var(--muted); }
.editorial-story { width:100%; }
.editorial-scene { width:100%; padding:clamp(76px,7vw,112px) clamp(28px,6vw,96px); border-bottom:1px solid var(--line); }
.scene-inner { width:100%; max-width:1180px; margin:0; }
.editorial-scene .section-label { display:block; margin-bottom:28px; }
.story-grid { display:block; }
.story-title h2 { max-width:1080px; font-size:clamp(42px,4vw,64px); font-weight:400; letter-spacing:-.035em; line-height:1.03; }
.story-copy-wide { max-width:760px; margin-top:clamp(36px,4vw,54px); padding-top:0; }
.story-copy-wide p, .result-copy > p { color:var(--muted); font-size:clamp(20px,1.5vw,23px); line-height:1.68; }
.story-copy-wide p + p, .result-copy > p + p { margin-top:32px; }
.scene-shift { background:#f1efeb; }
.scene-shift blockquote { max-width:1080px; font-size:clamp(48px,4.8vw,76px); font-weight:400; letter-spacing:-.04em; line-height:1.02; }
.scene-shift blockquote em { color:var(--muted); font-weight:400; }
.shift-follow { max-width:760px; margin-top:clamp(38px,4vw,56px); color:var(--red); font-size:clamp(22px,1.8vw,28px); line-height:1.45; }
.scene-result { padding-right:0; padding-left:0; }
.scene-result .scene-inner { max-width:none; }
.result-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch; }
.result-media { min-height:760px; overflow:hidden; background:#ddd5ca; }
.result-media img { width:100%; height:100%; object-fit:cover; object-position:center; }
.result-copy { padding:clamp(70px,7vw,112px) clamp(45px,6vw,96px); }
.result-copy strong { color:var(--ink); font-weight:400; }
.result-copy .result-restraint { margin-top:48px; color:var(--ink); }
.result-copy h2 { margin-top:clamp(62px,6vw,88px); font-size:clamp(38px,3.8vw,58px); font-weight:400; letter-spacing:-.035em; line-height:1; }
.result-shifts { margin-top:42px; }
.result-shifts div { padding:18px 0; display:grid; grid-template-columns:minmax(190px,.9fr) 1.1fr; gap:30px; }
.result-shifts dt, .result-shifts dd { font-size:19px; line-height:1.45; }
.result-shifts dt::after { content:' →'; color:var(--red); }
.result-shifts dd { color:var(--muted); }
.scene-point { min-height:0; }
.scene-point h2 { max-width:none; font-size:clamp(46px,4.6vw,72px); font-weight:400; letter-spacing:-.04em; line-height:1; white-space:nowrap; }
.scene-point > .scene-inner > p { max-width:780px; margin-top:28px; color:var(--muted); font-size:clamp(22px,1.8vw,28px); font-style:italic; line-height:1.45; }
.project-essay { max-width:980px; margin:0 auto; padding:clamp(90px,9vw,145px) 40px; border-bottom:1px solid var(--line); }
.project-essay h2 { max-width:900px; font-size:clamp(48px,5.3vw,78px); font-weight:400; letter-spacing:-.04em; line-height:1; }
.project-essay p { max-width:820px; margin-top:32px; color:var(--muted); font-size:clamp(20px,1.65vw,24px); line-height:1.62; }
.project-essay strong { color:var(--ink); font-weight:400; }
.project-essay .essay-question { margin:58px 0; color:var(--ink); font-size:clamp(25px,2.35vw,34px); line-height:1.45; }
.project-essay h3 { margin-top:76px; font-size:clamp(36px,3.8vw,54px); font-weight:400; letter-spacing:-.03em; line-height:1; }
.essay-shifts { max-width:820px; margin:36px 0 68px; border-top:1px solid var(--line); }
.essay-shifts div { padding:21px 0; display:grid; grid-template-columns:minmax(220px,.9fr) 1.1fr; gap:34px; border-bottom:1px solid var(--line); }
.essay-shifts dt, .essay-shifts dd { font-size:20px; line-height:1.45; }
.essay-shifts dt::after { content:' →'; color:var(--red); }
.essay-shifts dd { color:var(--muted); }
.story-section { padding:clamp(100px,11vw,180px) clamp(40px,8vw,130px); display:grid; grid-template-columns:minmax(150px,.38fr) minmax(0,1fr); gap:clamp(50px,8vw,140px); border-bottom:1px solid var(--line); }
.story-copy { max-width:1030px; }
.story-copy h2 { max-width:900px; font-size:clamp(52px,6vw,94px); font-weight:400; letter-spacing:-.045em; line-height:.95; }
.story-copy p { max-width:850px; margin-top:42px; color:var(--muted); font-size:clamp(21px,1.83vw,25px); line-height:1.68; }
.story-copy .relation { margin-top:58px; color:var(--ink); font-size:clamp(44px,5vw,76px); letter-spacing:-.03em; line-height:1; }
.relation span { padding:0 .25em; color:var(--red); }
.pull-quote { min-height:62vh; padding:clamp(100px,12vw,190px) clamp(40px,8vw,130px); display:flex; align-items:center; border-bottom:1px solid var(--line); }
.pull-quote p { max-width:1500px; font-size:clamp(62px,8vw,138px); letter-spacing:-.05em; line-height:.92; }
.pull-quote em { color:var(--muted); font-weight:400; }
.story-muted { background:#f1efeb; }
.ivo-section { min-height:760px; display:grid; grid-template-columns:.72fr 1.28fr; border-bottom:1px solid var(--line); }
.ivo-mark { display:flex; align-items:center; justify-content:center; background:#161512; color:var(--red); font-size:clamp(180px,25vw,430px); line-height:1; }
.ivo-copy { padding:clamp(90px,10vw,160px) clamp(45px,8vw,125px); display:flex; flex-direction:column; justify-content:center; }
.ivo-copy h2 { max-width:980px; margin-top:34px; font-size:clamp(54px,6vw,96px); font-weight:400; letter-spacing:-.045em; line-height:.95; }
.ivo-copy p { max-width:830px; margin-top:42px; color:var(--muted); font-size:clamp(21px,1.83vw,25px); line-height:1.65; }
.design-section { display:grid; grid-template-columns:.78fr 1.22fr; border-bottom:1px solid var(--line); }
.design-intro, .design-body { padding:clamp(90px,10vw,160px) clamp(42px,7vw,110px); }
.design-intro { border-right:1px solid var(--line); }
.design-intro h2 { max-width:680px; margin-top:34px; font-size:clamp(54px,6vw,94px); font-weight:400; letter-spacing:-.045em; line-height:.95; }
.design-intro h2:first-child { margin-top:0; }
.design-body > p { max-width:830px; color:var(--muted); font-size:clamp(21px,1.83vw,25px); line-height:1.65; }
.design-body > p + p { margin-top:32px; }
.principles { margin-top:70px; border-top:1px solid var(--line); }
.principles div { padding:28px 0; display:grid; grid-template-columns:minmax(150px,.45fr) 1fr; gap:35px; border-bottom:1px solid var(--line); }
.principles dt { font-size:22px; }
.principles dd { color:var(--muted); font-size:18px; line-height:1.55; }
.closing-statement { min-height:70vh; padding:clamp(110px,12vw,190px) clamp(40px,8vw,130px); display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.closing-statement p { max-width:1500px; font-size:clamp(64px,8vw,138px); letter-spacing:-.05em; line-height:.92; }
.closing-statement em { color:var(--red); font-weight:400; }
.closing-statement--water p { max-width:1350px; font-size:clamp(52px,6.4vw,104px); line-height:.98; }
.closing-statement a { margin-top:70px; padding:17px 21px; border:1px solid var(--red); color:var(--red); font:400 10px/1 var(--mono); letter-spacing:.13em; text-decoration:none; text-transform:uppercase; }
.closing-statement a:hover { background:var(--red); color:#fff; }
footer { padding:40px 60px; display:flex; justify-content:space-between; gap:28px; color:var(--muted); }
footer a { text-decoration:none; }
@media (max-width:900px) {
  .project-hero, .ivo-section, .design-section { grid-template-columns:1fr; }
  .hero-media { min-height:0; aspect-ratio:4/3; }
  .hero-copy { min-height:620px; }
  .story-section { grid-template-columns:1fr; gap:34px; }
  .ivo-mark { min-height:420px; }
  .design-intro { border-right:0; border-bottom:1px solid var(--line); }
  .story-grid, .result-grid { grid-template-columns:1fr; }
  .story-grid { gap:42px; }
  .story-copy-wide { padding-top:0; }
  .result-media { min-height:0; aspect-ratio:1 / 1; }
}
@media (max-width:640px) {
  .project-hero { display:flex; flex-direction:column; }
  .hero-copy,
  .hero-copy > div:first-child { display:contents; }
  .hero-copy h1 {
    order:1;
    padding:36px 20px 40px;
    font-size:clamp(42px,12vw,58px);
  }
  .hero-media { order:2; }
  .hero-story { order:3; margin-top:0; padding:48px 20px 0; }
  .hero-meta { order:4; padding:48px 20px 58px; }
  .hero-story p { font-size:18px; }
  .story-section, .pull-quote, .ivo-copy, .design-intro, .design-body, .closing-statement { padding:82px 20px; }
  .story-copy h2, .ivo-copy h2, .design-intro h2 { font-size:clamp(48px,15vw,70px); }
  .story-copy p, .ivo-copy p, .design-body > p { font-size:18px; }
  .pull-quote, .closing-statement { min-height:560px; }
  .pull-quote p, .closing-statement p { font-size:clamp(54px,17vw,82px); }
  .ivo-mark { min-height:340px; font-size:240px; }
  .principles div { grid-template-columns:1fr; gap:10px; }
  footer { padding:36px 20px; flex-direction:column; }
  .project-essay { padding:76px 20px; }
  .project-essay h2 { font-size:clamp(44px,13vw,62px); }
  .project-essay p { font-size:18px; }
  .project-essay .essay-question { margin:46px 0; font-size:24px; }
  .essay-shifts div { grid-template-columns:1fr; gap:6px; }
  .editorial-scene { padding:68px 20px; }
  .story-title h2 { font-size:clamp(40px,12vw,54px); }
  .story-copy-wide p, .result-copy > p { font-size:18px; }
  .scene-shift blockquote { font-size:clamp(40px,12vw,56px); }
  .shift-follow { margin-top:42px; font-size:23px; }
  .scene-result { padding-right:0; padding-left:0; }
  .result-copy { padding:72px 20px; }
  .result-copy h2 { margin-top:64px; font-size:42px; }
  .result-shifts div { grid-template-columns:1fr; gap:6px; }
  .scene-point { min-height:0; }
  .scene-point h2 { font-size:clamp(42px,12vw,56px); white-space:normal; }
  .scene-point > .scene-inner > p { font-size:22px; }
}