/* Only the cards animate inside the full-width blue strip. */
body.home-page .technical-section { background:transparent; border:0; padding-block:76.5px; }
.home-page #technical > .wrap { width:100%; max-width:none; padding:0; }
.fieldnotes-panel { --fieldnote-gap:clamp(18px,2vw,32px); width:100%; padding:24px var(--gutter); background:var(--accent); color:var(--white); }
.fieldnotes-panel .section-heading { margin-bottom:24px; align-items:flex-end; padding-bottom:16px; border-bottom:1px solid rgb(255 255 255 / .5); }
.fieldnotes-panel .section-heading h2 { font-family:var(--display); font-size:clamp(48px,4vw,64px); line-height:.9; text-transform:uppercase; letter-spacing:-.02em; }
.fieldnotes-panel .section-heading p { font-size:14px; max-width:26ch; margin:0; }
.fieldnotes-index { display:grid; gap:32px; }
.fieldnote { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:clamp(20px,3vw,48px); color:inherit; text-decoration:none; min-width:0; }
.fieldnote-media { min-width:0; min-height:0; display:flex; align-items:center; justify-content:center; background:#ecebe7; overflow:hidden; }
.fieldnote-media img { display:block; width:100%; height:100%; max-height:470px; min-height:0; object-fit:contain; }
.fieldnote-copy { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; min-width:0; padding-block:18px; }
.fieldnote h3,.fieldnote h2 { font-family:Manrope,Arial,sans-serif; font-size:clamp(26px,3vw,48px); line-height:1.1; letter-spacing:-.035em; }
.fieldnote-copy > p { font-size:clamp(14px,1.1vw,17px); line-height:1.65; margin-top:20px; max-width:43ch; }
.fieldnote-copy .fieldnote-role { font-size:12px; line-height:1.5; margin-top:24px; }
.fieldnote-read { display:flex; align-items:center; gap:18px; margin-top:28px; font-size:13px; font-weight:600; }
.fieldnote-read svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5; transition:transform .3s; }
.fieldnote-read svg path { fill:none; }
.fieldnote:hover .fieldnote-read svg { transform:translate(3px,-3px); }
.fieldnotes-panel .technical-all { margin-top:0; min-height:44px; font-size:13px; }
.fieldnotes-film { overflow-x:auto; scrollbar-color:var(--white) rgb(0 0 0 / .22); }
.fieldnotes-film.is-film-running { overflow:hidden; }
.fieldnotes-cards {
  position:relative;
  display:flex;
  gap:var(--fieldnote-gap);
  width:max-content;
}
.fieldnotes-film:not(.is-film-running) .film-copy { display:none; }
.fieldnotes-cards .fieldnote {
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:auto 1fr;
  gap:0;
  flex:0 0 clamp(240px,32vw,390px);
  width:clamp(240px,32vw,390px);
  color:var(--ink);
  background:var(--white);
  border:7px solid var(--white);
}
.fieldnotes-cards .fieldnote-media { aspect-ratio:16 / 10; background:#101014; }
.fieldnotes-cards .fieldnote-media img { object-fit:cover; }
.fieldnotes-cards .fieldnote-copy { flex-direction:row; align-items:center; justify-content:space-between; gap:12px; padding:12px 7px 7px; }
.fieldnotes-cards h3 { font-family:var(--display); font-size:clamp(25px,3vw,38px); text-transform:uppercase; color:var(--accent); }
.fieldnotes-cards .fieldnote-read { margin:0; font-size:0; }
.fieldnotes-cards .fieldnote:focus-visible { outline:2px solid var(--accent); outline-offset:-5px; }
.fieldnotes-panel :is(.technical-all,.film-toggle) { margin-top:16px; }
.film-toggle { min-height:44px; margin-right:24px; padding:0; border:0; background:none; color:inherit; font:inherit; font-size:13px; cursor:pointer; text-decoration:underline; text-underline-offset:4px; }
.fieldnotes-index .fieldnote {
  grid-template-columns:minmax(0,min(42%,460px)) minmax(0,1fr);
  align-items:start;
  gap:clamp(24px,2.5vw,40px);
  padding-block:30px;
  border-top:1px solid rgb(250 249 245 / .3);
}
.fieldnotes-index .fieldnote-media { justify-content:flex-start; background:none; }
.fieldnotes-index .fieldnote-media img { width:auto; height:auto; max-width:100%; max-height:270px; border:7px solid var(--white); }
.fieldnotes-index .fieldnote-media picture {
  position:relative;
  width:min(100%,424px);
  aspect-ratio:424 / 270;
  border:7px solid var(--white);
  background:#000;
}
.fieldnotes-index .fieldnote-media picture img { position:absolute; inset:0; width:100%; height:100%; border:0; object-position:center; }
.case-overview { display:flex; justify-content:space-between; align-items:center; gap:clamp(24px,4vw,64px); margin-bottom:16px; }
.case-intro { min-width:0; }
.case-intro > :last-child { margin-bottom:0; }
.case-cover { flex:0 0 min(28%,320px); border:6px solid var(--paper); background:#090909; }
.case-cover img { width:100%; height:auto; max-height:240px; }
.case-cover picture { width:100%; }
@media(max-width:760px) {
 .case-overview { align-items:flex-start; flex-direction:column; gap:16px; }
 .case-cover { flex:auto; width:min(100%,280px); }
}
.fieldnotes-index .fieldnote-copy { padding-block:0; }
.fieldnotes-index .fieldnote-copy:only-child { grid-column:1/-1; }
.fieldnotes-index .fieldnote-copy .fieldnote-role { color:#d3ccff; margin-top:10px; }
@media(min-width:701px) {
 .fieldnotes-index .fieldnote:nth-child(even):has(.fieldnote-media) { grid-template-columns:minmax(0,1fr) minmax(0,min(42%,460px)); }
 .fieldnotes-index .fieldnote:nth-child(even) .fieldnote-media { grid-area:1 / 2; justify-content:flex-end; }
 .fieldnotes-index .fieldnote:nth-child(even) .fieldnote-media + .fieldnote-copy { grid-area:1 / 1; align-items:flex-end; text-align:right; }
 .fieldnotes-index .fieldnote-copy:only-child { display:grid; grid-template-columns:subgrid; align-items:start; }
 .fieldnotes-index .fieldnote-copy:only-child .fieldnote-role { grid-column:1; }
 .fieldnotes-index .fieldnote-copy:only-child > p:not(.fieldnote-role) { grid-column:2; grid-row:1/span 2; margin-top:0; }
 .fieldnotes-index .fieldnote-copy:only-child .fieldnote-read { grid-column:2; }
}
@media(max-width:700px) {
 .fieldnotes-panel .section-heading { display:block; margin-bottom:18px; }
 .fieldnotes-panel .section-heading h2 { font-size:42px; }
 .fieldnotes-panel .section-heading p { margin-top:9px; max-width:none; }
 .fieldnotes-index .fieldnote { grid-template-columns:1fr; gap:18px; }
 .fieldnotes-index .fieldnote-copy > p { margin-top:12px; font-size:14px; }
 .fieldnotes-index .fieldnote-copy .fieldnote-role { margin-top:10px; font-size:12px; }
 .fieldnotes-index .fieldnote-read { margin-top:16px; font-size:12px; }
}
.home-background-cache { display:none; position:fixed; inset:0; width:100%; height:100%; z-index:-2; pointer-events:none; }
.home-page.home-background-ready::before,.home-page.home-background-ready::after { display:none; }
.home-background-ready .home-background-cache { display:block; }
