/* Editorial treatment for the earlier portfolio projects. */
.archive-page { overflow-x: hidden; background: #f6f2ec; }
.archive-page .case-hero {
  width: 100vw;
  margin: -2rem calc((100vw - var(--shell)) / -2) 0;
  padding: clamp(3rem,5vw,5.5rem) calc((100vw - var(--shell)) / 2);
  background: var(--archive-hero, linear-gradient(115deg,#e4e8e2,#e9e1e8,#eddfd8));
}
.archive-page .case-intro h1 { color: var(--archive-title,#756b82); }
.archive-page .case-lead { max-width: 31ch; }
.archive-page .case-facts { border-top: 0; padding-top: 0; }
.archive-page .case-facts > div { grid-template-columns: 5rem minmax(0,1fr); gap: 1rem; }
.archive-page .case-facts dt { color: var(--archive-accent,#756b82); font-weight: 500; }
.archive-page .archive-featured { aspect-ratio: 16/9; }
.archive-page .archive-featured img { width: 100%; height: 100%; object-fit: cover; }
.archive-origin{display:grid;grid-template-columns:minmax(14rem,.72fr) minmax(0,1.28fr);gap:clamp(3rem,6vw,6rem);width:100vw;margin:0 calc((100vw - var(--shell))/-2);padding:clamp(3rem,5vw,4.8rem) calc((100vw - var(--shell))/2 + clamp(2.5rem,6vw,6rem));background:var(--archive-notes,#1e2530);color:#f7f3ed}
.archive-origin .eyebrow{margin:0 0 .75rem;color:var(--archive-note-accent,#c9acd0)}
.archive-origin h2,.archive-process-copy h2{margin:0;font:300 clamp(2rem,3.25vw,3.5rem)/1 var(--serif);letter-spacing:-.035em}
.archive-origin>p{max-width:60ch;margin:0;padding-top:1.15rem;color:rgba(247,243,237,.72);font-size: .98rem;line-height:1.85}
.archive-process-row{display:grid;grid-template-columns:minmax(15rem,.58fr) minmax(0,1.42fr);gap:clamp(2rem,6vw,7rem);align-items:center;min-height:23rem;padding:clamp(2.75rem,5vw,5rem) 0;border-top:1px solid var(--line)}
.archive-process-row--tint{width:100vw;margin-inline:calc((100vw - var(--shell))/-2);padding-inline:calc((100vw - var(--shell))/2);background:var(--archive-tint,linear-gradient(115deg,#e5e1e9,#dfe9e6))}
.archive-process-copy .eyebrow{margin:0 0 1rem;color:var(--archive-accent,#756b82)}
.archive-process-copy>p:not(.eyebrow){max-width:49ch;margin:1.2rem 0 0;color:var(--muted);font-size: .98rem;line-height:1.8}
.archive-orbit,.archive-path,.archive-motifs,.archive-facade,.archive-pressure{position:relative;width:min(100%,38rem);height:15rem;justify-self:center}
.archive-orbit i{position:absolute;inset:50% auto auto 50%;width:3rem;height:3rem;border:1px solid var(--archive-accent);border-radius:50%;transform:translate(-50%,-50%)}
.archive-orbit i:nth-child(2){width:8rem;height:8rem;opacity:.75}.archive-orbit i:nth-child(3){width:13rem;height:13rem;opacity:.5}.archive-orbit i:nth-child(4){width:18rem;height:18rem;opacity:.25}
.archive-path{display:flex;align-items:center;justify-content:space-between}.archive-path:before{content:"";position:absolute;left:5%;right:5%;top:50%;border-top:1px solid var(--archive-accent)}.archive-path span{z-index:1;width:1.15rem;height:1.15rem;border:1px solid var(--archive-accent);border-radius:50%;background:#f6f2ec}.archive-path span:nth-child(2),.archive-path span:nth-child(4){transform:translateY(-2rem)}
.archive-motifs{display:flex;align-items:center;justify-content:space-around}.archive-motifs i{width:2.4rem;height:2.4rem;border:1px solid var(--archive-accent);transform:rotate(45deg)}.archive-motifs i:nth-child(even){border-radius:50%;transform:none}.archive-motifs i:nth-child(3){width:4rem;height:4rem}
.archive-facade{display:flex;align-items:flex-end;justify-content:center;gap:.8rem;border-bottom:1px solid var(--archive-accent)}.archive-facade span{width:14%;height:38%;border:1px solid var(--archive-accent);border-bottom:0;border-radius:3rem 3rem 0 0}.archive-facade span:nth-child(3){height:65%}
.archive-pressure{display:flex;align-items:center;justify-content:center;gap:2rem}.archive-pressure span{width:6rem;height:6rem;border:1px solid var(--archive-accent);border-radius:50%}.archive-pressure i{width:3rem;border-top:1px solid var(--archive-accent)}
.archive-page .case-notes {
  width: 100vw;
  margin: 0 calc((100vw - var(--shell)) / -2);
  padding: clamp(3rem,5vw,5rem) calc((100vw - var(--shell)) / 2 + clamp(2.5rem,6vw,6rem));
  gap: clamp(2rem,5vw,5rem);
  background: var(--archive-notes,#1e2530);
  color: #f7f3ed;
}
.archive-page .archive-note { padding: 0; background: transparent; border-radius: 0; }
.archive-page .archive-note h2 { color: var(--archive-note-accent,#c9acd0); font-size: clamp(1.7rem,2.6vw,2.6rem); }
.archive-page .archive-note p,.archive-page .archive-note li { color: rgba(247,243,237,.72); }
.archive-page .archive-section { padding-block: clamp(3rem,5vw,5rem); }
.archive-page .archive-section > h2 { margin-bottom: 2rem; font: 300 clamp(1.8rem,3vw,3rem)/1 var(--serif); }
.archive-page .archive-section > h2.eyebrow { font: 500 .74rem/1.4 var(--sans); }
.archive-page .archive-gallery { gap: 1rem; padding: 0; background: transparent; }
.archive-page .archive-image { border-radius: .3rem; overflow: hidden; }
.archive-page .archive-gallery img { transition: transform .65s ease; }
.archive-page .archive-gallery a:hover img { transform: scale(1.025); }

.archive-page--reel_2021 {
  --archive-hero: radial-gradient(circle at 82% 20%,rgba(138,156,205,.27),transparent 30%),linear-gradient(115deg,#dce7e8,#e4e0eb 52%,#eadde8);
  --archive-title:#687898; --archive-accent:#6e819d; --archive-notes:linear-gradient(115deg,#182332,#28233c); --archive-note-accent:#aebdd2;
}
.archive-page--reel_2021{--archive-tint:linear-gradient(115deg,#e0e8e8,#e6deea)}
.archive-page--reel_2021 .archive-section { width:100vw; margin-inline:calc((100vw - var(--shell)) / -2); padding-inline:calc((100vw - var(--shell)) / 2); background:#17202d; color:#f7f3ed; }
.archive-page--reel_2021 .archive-gallery figcaption { color:rgba(247,243,237,.72); }

.archive-page--lillemapping {
  --archive-hero: radial-gradient(circle at 80% 18%,rgba(213,133,113,.2),transparent 30%),linear-gradient(115deg,#f0e7d5,#ebe1df 55%,#e3e5da);
  --archive-title:#a06e61; --archive-accent:#a17467; --archive-notes:linear-gradient(115deg,#49362f,#5c4545); --archive-note-accent:#e0b39d;
}
.archive-page--lillemapping{--archive-tint:linear-gradient(115deg,#efe1d5,#e6e3d8)}
.archive-page--lillemapping .archive-section { width:100vw; margin-inline:calc((100vw - var(--shell)) / -2); padding-inline:calc((100vw - var(--shell)) / 2); background:linear-gradient(115deg,#eee3d5,#e7dde5); }

.archive-page--hako {
  --archive-hero: radial-gradient(circle at 84% 18%,rgba(99,155,153,.23),transparent 31%),linear-gradient(115deg,#e6e0ec,#dae7e5 55%,#e8dfd2);
  --archive-title:#6e7195; --archive-accent:#687d91; --archive-notes:linear-gradient(115deg,#20233a,#263a3b); --archive-note-accent:#9fc8c1;
}
.archive-page--hako{--archive-tint:linear-gradient(115deg,#e2e0eb,#dae8e4)}
.archive-page--hako .archive-section:nth-of-type(2) { background:linear-gradient(115deg,#e3e8e4,#e8e0ea); border-radius:.4rem; padding-inline:clamp(1rem,3vw,2rem); }
.archive-page--hako .archive-video-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.5rem,3vw,2.5rem); }

.archive-page--cuddly {
  --archive-hero: radial-gradient(circle at 84% 18%,rgba(231,159,174,.28),transparent 31%),linear-gradient(115deg,#e3eee8,#eee2e7 55%,#f1dfd5);
  --archive-title:#9b707f; --archive-accent:#728f84; --archive-notes:linear-gradient(115deg,#33453f,#4b3d4b); --archive-note-accent:#dfb7c2;
}
.archive-page--cuddly{--archive-tint:linear-gradient(115deg,#e4eee8,#eee0e7)}
.archive-page--cuddly .archive-concept-steps { background:linear-gradient(115deg,#e5eee9,#eee2e8); }
.archive-page--cuddly .archive-gallery--applications { background:linear-gradient(115deg,#f0e5df,#e4ebe7); padding:clamp(1rem,2vw,1.8rem); border-radius:.4rem; }
.archive-page--cuddly .archive-voice { background:linear-gradient(115deg,#e7eee9,#eee0e7); padding-inline:clamp(1.2rem,3vw,2.5rem); border-radius:.4rem; }
.archive-page--cuddly .case-notes:nth-last-of-type(1) { margin-bottom:2rem; }

@media(max-width:800px){
  .archive-page .case-intro h1{font-size:clamp(2.35rem,6vw,2.9rem)}
  .archive-page .case-lead{max-width:none}
  .archive-page .case-notes{grid-template-columns:1fr;padding-inline:calc((100vw - var(--shell))/2);gap:2rem}
  .archive-origin,.archive-process-row{grid-template-columns:1fr}.archive-origin{gap:.8rem;padding-inline:calc((100vw - var(--shell))/2)}.archive-origin>p{max-width:none;padding-top:0}.archive-process-row{min-height:0;gap:1.5rem}.archive-process-row--tint{padding-inline:calc((100vw - var(--shell))/2)}.archive-process-copy>p:not(.eyebrow){max-width:none}.archive-origin h2,.archive-process-copy h2{font-size:clamp(1.6rem,4vw,2rem)}
  .archive-page--hako .archive-video-grid{grid-template-columns:1fr}
}