/* Home: a sideways ride through the case files (vertical scroll drives it), a full index, and how to start. */

/* ---------- The ride ---------- */
.ride { position: relative; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; perspective: 1500px; }
.floor { position: absolute; left: -60vw; right: -60vw; top: 60%; height: 110vh; transform-origin: top center; transform: rotateX(74deg); pointer-events: none;
  background-image: linear-gradient(rgba(184, 196, 127, .15) 1px, transparent 1px), linear-gradient(90deg, rgba(184, 196, 127, .15) 1px, transparent 1px);
  background-size: 90px 90px; background-position: var(--floor-x, 0) 0;
  -webkit-mask-image: linear-gradient(to bottom, #000, rgba(0, 0, 0, .6) 35%, transparent 80%); mask-image: linear-gradient(to bottom, #000, rgba(0, 0, 0, .6) 35%, transparent 80%); }
.glow { position: absolute; inset: auto 0 0; height: 55%; pointer-events: none; background: radial-gradient(60% 70% at 50% 100%, rgba(221, 161, 94, .1), transparent 70%); }
.track { position: absolute; top: 53%; left: 0; display: flex; align-items: center; gap: 5vw; padding: 0 12vw 0 var(--gutter);
  transform: translate3d(var(--x, 0px), -50%, 0); transform-style: preserve-3d; will-change: transform; pointer-events: none; }
/* The folders tilt in 3D, so half of each one sits behind the track's own (invisible) plane. The track lets clicks
   through, so the whole folder opens its case file, not just the link text. */
.track > * { pointer-events: auto; }
.progress { position: absolute; left: 50%; bottom: 28px; width: min(220px, 40vw); height: 2px; background: var(--pine-line); transform: translateX(-50%); overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--earth); transform-origin: left; transform: scaleX(var(--p, 0)); }

.intro-block { flex: 0 0 min(640px, 48vw); padding-left: 3vw; }
.intro-block .label { font-size: .8rem; color: var(--muted); }
.intro-block h1 { margin-top: 14px; font: 400 clamp(2.9rem, 6.2vw, 5.8rem)/.92 var(--display); text-transform: uppercase; letter-spacing: .005em; }
.intro-block h1 em { font-style: normal; color: var(--earth); }
.intro-block p.lede { margin-top: 20px; font: 400 1.3rem/1.5 var(--serif); color: var(--cornsilk-2); max-width: 30em; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; padding: 0; list-style: none; }
.chips li { padding: 6px 14px; border: 1px solid var(--pine-line); border-radius: 999px; font-size: .84rem; color: var(--muted); background: rgba(29, 40, 17, .7); }
.chips b { color: var(--cornsilk); }
.chips-src { margin-top: 10px; font-size: .72rem; color: var(--muted); }
.hint { display: inline-flex; align-items: center; gap: 12px; margin-top: 30px; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--olive-light); }
.hint i { display: block; width: 46px; height: 1px; background: currentColor; position: relative; overflow: hidden; }
.hint i::after { content: ""; position: absolute; inset: 0; background: var(--earth); transform: translateX(-100%); animation: hint 2.2s ease-in-out infinite; }
@keyframes hint { 60%, 100% { transform: translateX(100%); } }

/* ---------- A folder on the ride: tab, folder, and a sheet with the pinned exhibit and the headline number ---------- */
.fp { position: relative; flex: 0 0 min(1040px, 70vw); transform: rotateY(var(--ry, 0deg)) skewY(var(--sk, 0deg)) scale(var(--sc, 1)); will-change: transform; }
.fp-tab { position: absolute; left: 0; bottom: 100%; height: 38px; padding: 0 24px; display: flex; align-items: center; border-radius: 14px 14px 0 0;
  background: var(--folder); color: var(--tab-ink, var(--cornsilk)); font: 400 1.2rem/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.fp-body { background: var(--folder); padding: 18px; border-radius: 0 18px 18px 18px; box-shadow: 0 40px 80px rgba(0, 0, 0, .45); }
.fp-paper { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 34px; height: min(58vh, 540px); padding: 28px 30px 28px 26px;
  background: var(--paper) var(--paper-noise); color: var(--ink); border-radius: 2px; }
.fp-photo { position: relative; align-self: center; background: #fff; padding: 9px 9px 30px; box-shadow: 0 12px 26px rgba(40, 54, 24, .22); transform: rotate(-2deg); }
.fp-photo img { width: 100%; height: min(38vh, 360px); object-fit: cover; transform: scale(1.04) translateX(var(--px, 0px)); }
.fp-photo figcaption { position: absolute; left: 10px; right: 10px; bottom: 7px; font-size: .7rem; font-weight: 500; color: var(--ink-soft); }
.fp-text { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fp-text .kicker { font-size: .74rem; font-weight: 600; letter-spacing: .04em; color: var(--ink-soft); }
.fp-text h2 { font: 400 clamp(1.7rem, 2.6vw, 2.5rem)/1 var(--display); text-transform: uppercase; color: var(--pine); }
.sticky { margin-top: auto; align-self: flex-start; padding: 16px 22px 18px; background: var(--note, var(--note-yellow)); box-shadow: 0 12px 24px rgba(40, 54, 24, .2); transform: rotate(var(--r, -2deg)); }
.sticky b { display: block; font: 400 clamp(2.6rem, 4.6vw, 4.2rem)/.95 var(--display); color: var(--pine); letter-spacing: .01em; }
.sticky span { display: block; margin-top: 6px; font-size: .82rem; font-weight: 600; color: var(--pine); }
.fp-text .sub { font: 400 1.02rem/1.5 var(--serif); color: var(--ink); max-width: 32em; }
.open { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; font-weight: 600; color: var(--pine); text-decoration: none; }
.open::after { content: "→"; transition: transform .25s; }
.open:hover::after { transform: translateX(4px); }
.open::before { content: ""; position: absolute; inset: -40px 0 0; z-index: 3; }   /* the whole folder is the link */
.fp:has(.open:hover) .fp-body { box-shadow: 0 40px 80px rgba(0, 0, 0, .45), 0 0 0 3px var(--earth); }

.end { flex: 0 0 min(560px, 44vw); }
.end h2 { font: 400 clamp(2.4rem, 4.6vw, 4.2rem)/.95 var(--display); text-transform: uppercase; }
.end p { margin-top: 16px; font: 400 1.2rem/1.55 var(--serif); color: var(--cornsilk-2); max-width: 28em; }
.end .btn { margin-top: 22px; }

/* ---------- Full view: every piece of work as a filing index ---------- */
.index-view { position: fixed; inset: 64px 0 0; z-index: 30; overflow-y: auto; padding: 60px var(--gutter) 110px; background: rgba(22, 31, 12, .97);
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
body.full .index-view { opacity: 1; visibility: visible; transition: opacity .3s; }
.index-view h2 { max-width: 1100px; margin: 0 auto; font: 400 clamp(2.4rem, 5vw, 4.4rem)/.95 var(--display); text-transform: uppercase; }
.index-view > p { max-width: 1100px; margin: 12px auto 28px; font: 400 1.15rem var(--serif); color: var(--cornsilk-2); }
.index { list-style: none; padding: 0; max-width: 1100px; margin: 0 auto; }
.index a { display: grid; grid-template-columns: 14px minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) 20px; gap: 16px; align-items: baseline; padding: 18px 4px;
  border-top: 1px solid var(--pine-line); text-decoration: none; transition: padding .25s, color .25s; }
.index li:last-child a { border-bottom: 1px solid var(--pine-line); }
.index a:hover { padding-left: 14px; color: var(--earth); }
.index .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--muted)); align-self: center; }
.index .n { font: 500 clamp(1.1rem, 1.9vw, 1.45rem)/1.25 var(--serif); }
.index .k { font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--olive-light); }
.index .k.other { color: var(--muted); }
.index .v { font-size: .9rem; color: var(--cornsilk-2); }
.index a::after { content: "↗"; color: var(--muted); }

/* ---------- Evidence wall: creatives hanging from a red string that runs along a curve ---------- */
/* Before the script runs (and without it) the photos are a plain grid. The script adds .on and moves them along the path. */
.wall { position: relative; z-index: 2; padding: 120px var(--gutter) 70px; }
.wall-head { max-width: 1100px; margin: 0 auto; }
.wall-head h2 { margin-top: 10px; font: 400 clamp(2.4rem, 5vw, 4.4rem)/.95 var(--display); text-transform: uppercase; }
.wall-head p:not(.label) { margin-top: 16px; font: 400 1.2rem/1.55 var(--serif); color: var(--cornsilk-2); max-width: 40em; }
.wall-board { position: relative; max-width: 1400px; margin: 34px auto 0; }
.wall-items { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 30px 22px; }
.wall-photo { position: relative; display: block; padding: 7px 7px 0; background: #fff; color: var(--ink); text-decoration: none;
  box-shadow: 0 14px 26px rgba(0, 0, 0, .45); transform: rotate(calc(var(--r, 0deg) + var(--swing, 0deg))); transform-origin: 50% 0; transition: box-shadow .25s; }
.wall-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: #e9e5cf; }
.wall-photo span { display: block; padding: 7px 2px 9px; font-size: .62rem; font-weight: 600; line-height: 1.3; color: var(--ink-soft); }
/* The red pushpin that holds each photo to the string */
.wall-photo::before { content: ""; position: absolute; top: -6px; left: 50%; z-index: 1; width: 13px; height: 13px; margin-left: -6.5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #E0705A, #9C3520 55%, #5A140B); box-shadow: 0 2px 3px rgba(0, 0, 0, .5); }
.wall-photo:hover, .wall-photo:focus-visible { box-shadow: 0 0 0 3px var(--earth), 0 18px 34px rgba(0, 0, 0, .55); }
.wall-string { display: none; }
.wall-board.on { overflow: hidden; touch-action: pan-y; -webkit-user-select: none; user-select: none; cursor: grab;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.wall-board.on.dragging { cursor: grabbing; }
.wall-board.on .wall-stage { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.wall-board.on .wall-string { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wall-string path { fill: none; stroke: #A3301E; stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .5)); }
.wall-board.on .wall-items { display: block; }
.wall-board.on .wall-items > li { position: absolute; top: 0; left: 0; width: var(--pw, 124px); offset-anchor: 50% 0; offset-rotate: 0deg; will-change: offset-distance; }
.wall-board.on img, .wall-board.on a { -webkit-user-drag: none; }
@media (max-width: 700px) {
  .wall { padding-top: 80px; }
  .wall-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wall-board.on .wall-items > li { --pw: 136px; }
  .wall-photo span { font-size: .7rem; }
}

/* ---------- After the ride: how to start ---------- */
.after { position: relative; z-index: 2; padding: 110px var(--gutter) 130px; background: rgba(22, 31, 12, .55); border-top: 1px solid var(--pine-line); }
.after .wrap { max-width: 1100px; margin: 0 auto; }
.after .label { font-size: .8rem; color: var(--muted); }
.after h2 { margin-top: 10px; font: 400 clamp(2.4rem, 5vw, 4.4rem)/.95 var(--display); text-transform: uppercase; max-width: 14ch; }
.steps3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; margin-top: 40px; padding: 0; list-style: none; }
.steps3 li { padding: 24px 24px 26px; background: var(--note); color: var(--ink); box-shadow: 0 14px 28px rgba(0, 0, 0, .3); transform: rotate(var(--r)); }
.steps3 .num { font-size: .78rem; font-weight: 700; }
.steps3 b { display: block; margin: 8px 0 8px; font: 400 1.6rem/1 var(--display); text-transform: uppercase; color: var(--pine); }
.steps3 p { font-size: .9rem; line-height: 1.6; }
.after .btn { margin-top: 36px; }
.foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; max-width: 1100px; margin: 80px auto 0; font-size: .8rem; color: var(--muted); }

/* ---------- Phones, tablets and reduced motion: a calm vertical stack ---------- */
@media (max-width: 860px), (prefers-reduced-motion: reduce) {
  .stage { position: static; height: auto; overflow: visible; perspective: none; }
  .floor, .glow, .progress, .hint { display: none; }
  .track { position: static; transform: none !important; flex-direction: column; align-items: stretch; gap: 64px; padding: 110px var(--gutter) 70px; }
  .intro-block, .end { flex: none; padding: 0; }
  .fp { flex: none; transform: none !important; margin-top: 20px; }
  .fp-photo img { transform: none !important; }
}
@media (max-width: 860px) {
  .fp-paper { grid-template-columns: 1fr; height: auto; padding: 24px 18px; gap: 26px; }
  .fp-photo img { height: 56vw; max-height: 340px; }
  .fp-body { padding: 10px; }
  .index a { grid-template-columns: 12px minmax(0, 1fr) 18px; }
  .index .k, .index .v { grid-column: 2; }
  .steps3 { grid-template-columns: 1fr; }
}

/* ---------- Home extras: view switch and the visitor badge sit in the bottom corners ---------- */
.view-switch { position: fixed; left: var(--gutter); bottom: 20px; z-index: 35; display: flex; align-items: center; gap: 6px; padding: 4px 14px; border-radius: 999px;
  background: rgba(22, 31, 12, .85); border: 1px solid var(--pine-line); font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.view-switch button { font: inherit; letter-spacing: inherit; text-transform: inherit; background: none; border: 0; padding: 8px 2px; color: var(--muted); cursor: pointer; }
.view-switch button[aria-pressed="true"] { color: var(--cornsilk); text-decoration: underline; text-underline-offset: 6px; }
.view-switch span { color: var(--pine-line); }
/* The switch steps aside once the footer comes up, so it never covers the footer text */
body.at-foot .view-switch { opacity: 0; visibility: hidden; transform: translateY(12px); }
.view-switch { transition: opacity .3s, transform .3s, visibility 0s linear; }
body.at-foot .view-switch { transition: opacity .3s, transform .3s, visibility 0s linear .3s; }
.testimonials { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 26px; margin-top: 40px; }
.testimonials li { padding: 24px; background: var(--note-cream); color: var(--ink); box-shadow: 0 14px 28px rgba(0, 0, 0, .3); transform: rotate(var(--r, -1deg)); }
.testimonials blockquote { font: 400 1.15rem/1.55 var(--serif); }
.testimonials p { margin-top: 12px; font-size: .8rem; font-weight: 600; }
@media (max-width: 860px) {
  .view-switch { left: 50%; transform: translateX(-50%); bottom: 14px; }
  body.at-foot .view-switch { transform: translate(-50%, 12px); }
}