/* =========================================================================
   V5 — FEATURED SHOWCASE
   Single project, inline video player as primary action,
   strategy on the right, orthogonal artifact tiles below.
   Loads AFTER v5-styles.css
   ========================================================================= */

.v5-ft{
  position:relative;
  padding:64px 0 140px;
  background:var(--v4-paper);
  border-top:1px solid var(--v4-line-soft);
  overflow:hidden;
}
.v5-ft-outdoorsy{
  background:linear-gradient(180deg,
    var(--v4-paper) 0%,
    var(--v4-paper) 55%,
    color-mix(in oklab, var(--v4-paper-2) 96%, #c0563b 4%) 100%);
}
.v5-ft-container{position:relative}

/* Vertical rail — left edge, mimics the reference's DESIGN · RESEARCH · SYSTEMS · SIGNAL */
.v5-ft-rail{
  position:absolute;
  left:-46px; top:84px;
  display:flex; flex-direction:column; align-items:center; gap:18px;
  pointer-events:none;
}
.v5-ft-rail-tick{
  width:9px; height:9px; border-radius:50%;
  border:1px solid var(--v4-accent);
  background:transparent;
}
.v5-ft-rail-text{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-family:var(--mono);
  font-size:10.5px; letter-spacing:.32em;
  color:var(--v4-mute);
  text-transform:uppercase;
}
@media (max-width:1280px){ .v5-ft-rail{display:none} }

/* Section head ---------------------------------------------------------- */
.v5-ft-head{
  display:grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap:64px;
  align-items:end;
  margin-bottom:72px;
  padding-bottom:32px;
  border-bottom:1px solid var(--v4-line-soft);
}
.v5-ft-head-left{ min-width:0; }
.v5-ft-head-right{
  min-width:0;
  padding-bottom:6px;
}
@media (max-width:1100px){
  .v5-ft-head{ grid-template-columns:1fr; gap:32px; align-items:start; }
  .v5-ft-head-right{ padding-bottom:0; }
}
.v5-ft-eyebrow{
  display:inline-flex; align-items:center; gap:14px;
  margin-bottom:28px;
}
.v5-ft-eyebrow-rule{
  display:inline-block; width:36px; height:1px; background:var(--v4-accent);
}
.v5-ft-eyebrow-num{
  font-family:var(--serif); font-style:italic;
  color:var(--v4-accent);
  font-size:18px; letter-spacing:-.01em;
}
.v5-ft-eyebrow-label{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--v4-mute);
}
.v5-ft-section-title{
  font-family:var(--serif);
  font-size:clamp(48px,7vw,96px);
  line-height:0.96;
  letter-spacing:-.028em;
  color:var(--v4-ink);
  margin:0 0 24px;
  font-variation-settings:"opsz" 60;
  text-wrap:balance;
}
.v5-ft-section-title .emph{ font-style:italic; color:var(--v4-accent); }
.v5-ft-section-title-sep{
  display:inline-block; margin:0 14px;
  color:var(--v4-mute); font-style:normal;
  font-family:var(--mono); font-size:0.55em;
  vertical-align:0.22em;
}
.v5-ft-section-lede{
  font-family:var(--serif);
  font-size:19px; line-height:1.55;
  color:var(--v4-ink-2);
  max-width:64ch;
  margin:0;
}

/* Main row — film | content -------------------------------------------- */
.v5-ft-main{
  display:grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap:64px;
  align-items:start;
  margin-bottom:104px;
  transition:
    grid-template-columns .9s cubic-bezier(.22,.7,.2,1),
    gap .9s cubic-bezier(.22,.7,.2,1);
}
@media (max-width:1100px){
  .v5-ft-main{ grid-template-columns:1fr; gap:56px; }
}

/* ====== EXPANDED PLAYBACK STATE ======
   When the user hits play, collapse the right column and morph the
   player to a full-width 16:9 stage. Reverses smoothly on pause. */
@media (min-width:1101px){
  .v5-ft.is-playing .v5-ft-main{
    grid-template-columns: minmax(0, 1fr) minmax(0, 0fr);
    gap:0;
  }
}
.v5-ft.is-playing .v5-ft-content{
  transform:translateX(80px);
  opacity:0;
  pointer-events:none;
}
.v5-ft.is-playing .v5-ft-chapters{
  opacity:0;
  transform:translateY(8px);
  pointer-events:none;
}

/* ====== INLINE PLAYER ====== */
.v5-ft-film{ position:relative; }
.v5-ft-player{
  position:relative;
  display:flex; flex-direction:column; gap:22px;
}
.v5-ft-player-frame{
  position:relative;
  width:100%;
  height:0;
  padding-bottom:125%; /* 4:5 default */
  border-radius:14px;
  overflow:hidden;
  background:#1a1f1c;
  box-shadow:
    0 32px 80px -28px rgba(14,15,14,0.55),
    0 4px 14px -6px rgba(14,15,14,0.35);
  transform:translateY(20px); opacity:0;
  transition:
    transform .9s cubic-bezier(.22,.7,.2,1),
    opacity .9s ease,
    padding-bottom .95s cubic-bezier(.22,.7,.2,1),
    border-radius .6s ease;
}
.v5-ft.is-in .v5-ft-player-frame{ transform:translateY(0); opacity:1; }
.v5-ft.is-playing .v5-ft-player-frame{
  padding-bottom:56.25%; /* 16:9 */
}
.v5-ft-poster-svg,
.v5-ft-poster-img{
  position:absolute; inset:0;
  display:block; width:100%; height:100%;
  object-fit:cover;
  transition:transform 9s ease, filter .6s ease;
}
.v5-ft-player.is-playing .v5-ft-poster-svg,
.v5-ft-player.is-playing .v5-ft-poster-img{
  transform:scale(1.06) translateX(-1.5%);
  filter:saturate(1.05) contrast(1.03);
}
.v5-ft-video{
  position:absolute; inset:0;
  display:block; width:100%; height:100%;
  object-fit:cover;
  background:#0d100c;
  opacity:0;
  pointer-events:none;
  transition:opacity .5s ease;
  z-index:1;
}
.v5-ft.is-playing .v5-ft-video{
  opacity:1;
  pointer-events:auto;
}

.v5-ft-content{
  transition:
    transform .85s cubic-bezier(.22,.7,.2,1),
    opacity .55s ease;
}
.v5-ft-chapters{
  transition:opacity .45s ease, transform .65s cubic-bezier(.22,.7,.2,1);
}

/* Slate corner — top */
.v5-ft-player-slate{
  position:absolute; top:18px; left:18px; right:18px;
  display:flex; justify-content:space-between; align-items:flex-start;
  font-family:var(--mono);
  font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(244,234,212,0.85);
  pointer-events:none;
  gap:14px;
}
.v5-ft-player-slate-rec{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(13,16,12,0.55);
  padding:6px 10px;
  border-radius:4px;
}
.v5-ft-player-slate-dot{
  width:7px; height:7px; border-radius:50%;
  background:#c0563b;
  box-shadow:0 0 0 3px rgba(192,86,59,0.18);
}
.v5-ft-player.is-playing .v5-ft-player-slate-dot{
  animation:v5-ft-rec 1.2s ease-in-out infinite;
}
@keyframes v5-ft-rec{
  0%, 100%{ opacity:1; box-shadow:0 0 0 3px rgba(192,86,59,0.18); }
  50%{ opacity:.4; box-shadow:0 0 0 5px rgba(192,86,59,0.08); }
}
.v5-ft-player-slate-meta{
  background:rgba(13,16,12,0.45);
  padding:6px 10px; border-radius:4px;
  font-size:9.5px;
  text-align:right;
}

/* Big play button — primary action */
.v5-ft-play{
  position:absolute; left:50%; bottom:14%;
  transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:16px;
  padding:14px 28px 14px 14px;
  background:rgba(13,16,12,0.62);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(244,234,212,0.18);
  border-radius:60px;
  color:#f4ead4;
  cursor:pointer;
  text-align:left;
  transition:background .3s ease, transform .3s cubic-bezier(.22,.7,.2,1), gap .3s ease, padding .3s ease;
  font-family:var(--mono);
  z-index:2;
}
.v5-ft-play:hover{
  background:rgba(13,16,12,0.82);
  transform:translateX(-50%) translateY(-2px);
  gap:20px;
  padding-right:34px;
}
.v5-ft-play-glyph{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:50%;
  background:#c0563b;
  color:#fff;
  flex-shrink:0;
}
.v5-ft-play-glyph::before{
  content:""; position:absolute; inset:-6px;
  border-radius:50%;
  border:1px solid rgba(192,86,59,0.4);
  animation:v5-ft-pulse 2.8s ease-out infinite;
}
.v5-ft-play-glyph::after{
  content:""; position:absolute; inset:-12px;
  border-radius:50%;
  border:1px solid rgba(192,86,59,0.18);
  animation:v5-ft-pulse 2.8s ease-out infinite 1.4s;
}
.v5-ft-player.is-playing .v5-ft-play-glyph::before,
.v5-ft-player.is-playing .v5-ft-play-glyph::after{ display:none; }
@keyframes v5-ft-pulse{
  0%   { transform:scale(1);   opacity:1; }
  100% { transform:scale(1.6); opacity:0; }
}
.v5-ft-play-label{
  display:flex; flex-direction:column; gap:3px;
  font-family:var(--mono);
  line-height:1.1;
}
.v5-ft-play-label-top{
  font-size:13px; letter-spacing:.04em;
  font-weight:500;
  color:#f4ead4;
}
.v5-ft-play-label-meta{
  font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(244,234,212,0.65);
}

/* Scrub bar — only visible while playing */
.v5-ft-player-scrub{
  position:absolute; left:18px; right:18px; bottom:18px;
  display:flex; flex-direction:column; gap:8px;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .35s ease, transform .35s ease;
  pointer-events:none;
}
.v5-ft-player.is-playing .v5-ft-player-scrub{
  opacity:1; transform:translateY(0);
}
.v5-ft-player-scrub-rail{
  position:relative;
  height:2px;
  background:rgba(244,234,212,0.18);
  border-radius:1px;
}
.v5-ft-player-scrub-fill{
  position:absolute; left:0; top:0; bottom:0;
  background:#c0563b;
  border-radius:1px;
  transition:width 1s linear;
}
.v5-ft-player-scrub-mark{
  position:absolute; top:50%; transform:translate(-50%, -50%);
  width:5px; height:5px;
  background:#f4ead4; opacity:0.55;
  border-radius:50%;
}
.v5-ft-player-scrub-time{
  display:flex; justify-content:space-between;
  font-family:var(--mono);
  font-size:9.5px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(244,234,212,0.75);
}

/* Chapter list below the player */
.v5-ft-chapters{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column;
  border-top:1px solid var(--v4-line-soft);
  border-bottom:1px solid var(--v4-line-soft);
}
.v5-ft-chapter{
  display:grid;
  grid-template-columns: 36px 56px 1fr;
  gap:14px;
  align-items:baseline;
  padding:11px 4px;
  border-bottom:1px dashed var(--v4-line-soft);
  font-family:var(--mono);
  font-size:11.5px;
  color:var(--v4-ink-2);
  transition:color .2s ease;
}
.v5-ft-chapter:last-child{ border-bottom:0; }
.v5-ft-chapter:hover{ color:var(--v4-ink); }
.v5-ft-chapter-n{
  color:var(--v4-mute);
  font-size:10px; letter-spacing:.16em;
}
.v5-ft-chapter-t{
  color:var(--v4-accent);
  letter-spacing:.04em;
}
.v5-ft-chapter-l{
  font-family:var(--serif);
  font-size:15px; line-height:1.4;
  color:var(--v4-ink);
  letter-spacing:-.005em;
}

/* ====== RIGHT — META · TITLE · STRATEGY ====== */
.v5-ft-content{
  position:relative;
  padding-top:6px;
  display:flex; flex-direction:column;
  gap:32px;
}

/* Meta tri-column */
.v5-ft-meta-grid{
  display:grid;
  grid-template-columns: 1fr 1fr 2fr;
  gap:24px;
  margin:0;
  padding:0 0 24px 0;
  border-bottom:1px solid var(--v4-line-soft);
}
.v5-ft-meta-cell dt{
  font-family:var(--mono);
  font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--v4-mute);
  margin-bottom:8px;
}
.v5-ft-meta-cell dd{
  margin:0;
  font-family:var(--serif);
  font-size:16px; line-height:1.35;
  color:var(--v4-ink);
  letter-spacing:-.005em;
}
.v5-ft-meta-cell-wide dd{ max-width:44ch; }

.v5-ft-title-rule{ display:none; }
.v5-ft-title-tick{ display:none; }

/* Big editorial title */
.v5-ft-title{
  font-family:var(--serif);
  font-size:clamp(32px, 3.6vw, 48px);
  line-height:1.05;
  letter-spacing:-.022em;
  color:var(--v4-ink);
  margin:0;
  text-wrap:balance;
  font-variation-settings:"opsz" 48;
}

/* Strategy stack */
.v5-ft-strategy{
  display:flex; flex-direction:column;
  border-top:1px solid var(--v4-line-soft);
}
.v5-ft-strat{
  display:grid;
  grid-template-columns: 40px 1fr;
  gap:18px;
  padding:22px 0;
  border-bottom:1px solid var(--v4-line-soft);
  align-items:start;
}
.v5-ft-strat-icon{
  width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid color-mix(in oklab, var(--v4-accent) 35%, transparent);
  border-radius:50%;
  flex-shrink:0;
}
.v5-ft-strat-icon svg{
  width:22px; height:22px;
  display:block;
}
.v5-ft-strat-label{
  font-family:var(--mono);
  font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--v4-accent);
  margin:0 0 8px;
  font-weight:500;
}
.v5-ft-strat-copy{
  font-family:var(--serif);
  font-size:17px; line-height:1.5;
  color:var(--v4-ink);
  margin:0;
  max-width:52ch;
  letter-spacing:-.003em;
}

/* CTA row — bar treatment that spans the column to eat the negative space */
.v5-ft-cta-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; flex-wrap:wrap;
  margin-top:6px;
  padding:18px 0 0;
  width:100%;
}
.v5-ft-cta{
  display:inline-flex; align-items:center; justify-content:space-between; gap:14px;
  padding:16px 22px 16px 24px;
  flex:1 1 280px;
  min-width:0;
  border:1px solid var(--v4-ink);
  background:var(--v4-ink);
  color:var(--v4-paper);
  border-radius:60px;
  text-decoration:none;
  font-family:var(--mono);
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  font-weight:500;
  transition:background .3s ease, color .3s ease, border-color .3s ease, transform .3s cubic-bezier(.22,.7,.2,1);
}
.v5-ft-cta:hover{
  background:var(--v4-accent);
  border-color:var(--v4-accent);
  transform:translateY(-2px);
}
.v5-ft-cta-arr{
  display:inline-block;
  transition:transform .3s ease;
  font-family:var(--mono);
  font-size:14px;
}
.v5-ft-cta:hover .v5-ft-cta-arr{ transform:translateX(4px); }
.v5-ft-cta-aside{
  font-family:var(--mono);
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--v4-mute);
  flex:0 1 auto;
  text-align:right;
  line-height:1.4;
}
.v5-ft-cta-aside-arr{ color:var(--v4-accent); margin-left:4px; }

/* ====== ARTIFACTS ROW ====== */
.v5-ft-artifacts{
  position:relative;
}
.v5-ft-artifacts-head{
  display:flex; align-items:center; gap:18px;
  margin-bottom:28px;
}
.v5-ft-artifacts-eyebrow{
  font-family:var(--mono);
  font-size:11.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--v4-ink);
  font-weight:500;
}
.v5-ft-artifacts-rule{
  flex:1; height:1px; background:var(--v4-line);
}
.v5-ft-artifacts-meta{
  font-family:var(--mono);
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--v4-mute);
}
.v5-ft-artifacts-grid{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:18px;
}
@media (max-width:1100px){
  .v5-ft-artifacts-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width:680px){
  .v5-ft-artifacts-grid{ grid-template-columns: repeat(2, 1fr); }
}
.v5-ft-art{
  position:relative;
  display:flex; flex-direction:column;
  gap:14px;
  text-decoration:none;
  color:inherit;
  padding:12px 12px 16px;
  border:1px solid var(--v4-line-soft);
  border-radius:6px;
  background:var(--v4-paper);
  transition:border-color .3s ease, transform .3s cubic-bezier(.22,.7,.2,1), box-shadow .3s ease;
}
.v5-ft-art:hover{
  border-color:var(--v4-accent);
  transform:translateY(-3px);
  box-shadow:0 14px 30px -18px rgba(14,15,14,0.35);
}
.v5-ft-art-thumb{
  position:relative;
  width:100%;
  aspect-ratio: 10/7;
  border-radius:4px;
  overflow:hidden;
  background:var(--v4-paper-2);
}
.v5-ft-art-thumb svg,
.v5-ft-art-thumb img{
  display:block; width:100%; height:100%;
  object-fit:cover;
}
.v5-ft-art-text{
  display:flex; flex-direction:column;
  gap:4px;
}
.v5-ft-art-n{
  font-family:var(--mono);
  font-size:9.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--v4-mute);
}
.v5-ft-art-label{
  font-family:var(--serif);
  font-size:17px; line-height:1.2;
  color:var(--v4-ink);
  letter-spacing:-.008em;
}
.v5-ft-art-note{
  font-family:var(--mono);
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--v4-mute);
}

/* Decorative crosshair — bottom-right */
.v5-ft-crosshair{
  position:absolute;
  right:24px;
  bottom:24px;
  width:64px; height:64px;
  color:var(--v4-accent);
  opacity:0.45;
  pointer-events:none;
}
@media (max-width:1280px){ .v5-ft-crosshair{ display:none; } }

/* =========================================================================
   FOOTER — In Focus column (replaces old "Recent" list)
   ========================================================================= */
.v5-footer-col-showcase{ }

.v5-footer-feature{
  display:flex; flex-direction:column;
  gap:6px;
  padding:18px 18px 20px;
  margin:6px 0 26px;
  border:1px solid var(--v4-line);
  border-radius:8px;
  background:color-mix(in oklab, var(--v4-paper) 92%, var(--v4-accent) 8%);
  text-decoration:none;
  color:inherit;
  transition:border-color .3s ease, transform .3s cubic-bezier(.22,.7,.2,1), background .3s ease;
  position:relative;
}
.v5-footer-feature::before{
  content:"";
  position:absolute; top:14px; right:14px;
  width:8px; height:8px; border-radius:50%;
  background:var(--v4-accent);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--v4-accent) 22%, transparent);
  animation:v5-ft-rec 2.4s ease-in-out infinite;
}
.v5-footer-feature:hover{
  border-color:var(--v4-accent);
  transform:translateY(-2px);
  background:color-mix(in oklab, var(--v4-paper) 86%, var(--v4-accent) 14%);
}
.v5-footer-feature-meta{
  display:flex; align-items:center; gap:10px;
  font-family:var(--mono);
  font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--v4-mute);
}
.v5-footer-feature-n{ color:var(--v4-accent); font-weight:500; }
.v5-footer-feature-year{ color:var(--v4-mute); }
.v5-footer-feature-name{
  font-family:var(--serif);
  font-size:28px; line-height:1;
  color:var(--v4-ink);
  letter-spacing:-.018em;
  margin-top:4px;
  font-variation-settings:"opsz" 36;
}
.v5-footer-feature-note{
  font-family:var(--serif); font-style:italic;
  font-size:14.5px; line-height:1.35;
  color:var(--v4-ink-2);
  margin-top:2px;
}
.v5-footer-feature-cta{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:10px;
  font-family:var(--mono);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--v4-ink);
}
.v5-footer-feature-arr{
  display:inline-block;
  transition:transform .3s ease;
  color:var(--v4-accent);
}
.v5-footer-feature:hover .v5-footer-feature-arr{ transform:translateX(4px); }

.v5-footer-artifacts{
  list-style:none; padding:0; margin:6px 0 22px;
  display:flex; flex-direction:column;
  border-top:1px solid var(--v4-line-soft);
}
.v5-footer-artifacts li{
  border-bottom:1px solid var(--v4-line-soft);
}
.v5-footer-artifacts a{
  display:grid;
  grid-template-columns:30px 1fr auto;
  gap:14px;
  align-items:baseline;
  padding:11px 2px;
  text-decoration:none;
  color:var(--v4-ink);
  font-family:var(--serif);
  font-size:15.5px; line-height:1.3;
  letter-spacing:-.005em;
  transition:color .25s ease, padding-left .25s ease;
}
.v5-footer-artifacts a:hover{
  color:var(--v4-accent);
  padding-left:6px;
}
.v5-footer-artifact-n{
  font-family:var(--mono);
  font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--v4-mute);
}
.v5-footer-artifact-meta{
  font-family:var(--mono);
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--v4-mute);
  text-align:right;
}
.v5-footer-artifacts a:hover .v5-footer-artifact-meta{ color:var(--v4-ink-2); }
@media (max-width:560px){
  .v5-footer-artifacts a{ grid-template-columns:30px 1fr; }
  .v5-footer-artifact-meta{ grid-column:2; text-align:left; padding-top:2px; }
}