:root {
  color-scheme: light;
  --paper: #f1f0e8;
  --ink: #212b28;
  --muted: #57665d;
  --green: #164c3b;
  --lime: #ddf17d;
  --line: #263d2d33;
  --soft: #e4e7dc;
  --accent: var(--green);
  --accent-hover: #356849;
  --button-bg: var(--green);
  --button-ink: white;
  --button-hover: #2b6a50;
  --control-border: #81957e;
  --focus: #956007;
  --forest-ink: #f1f0e8;
  --highlight-bg: var(--lime);
  --highlight-ink: #212b28;
  --highlight-muted: #3f513b;
  --highlight-border: #52694b;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #141b18;
  --ink: #edf3e9;
  --muted: #b5c5ba;
  --line: #b9cfbb40;
  --soft: #202c26;
  --accent: #b9dfa1;
  --accent-hover: #d9f2be;
  --button-bg: #cde99f;
  --button-ink: #16221a;
  --button-hover: #def3b9;
  --control-border: #76917d;
  --focus: #f4c566;
  --highlight-bg: #253824;
  --highlight-ink: #edf3e9;
  --highlight-muted: #c6d8c2;
  --highlight-border: #92a982;
}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}img,svg{display:block;max-width:100%}p{line-height:1.75;color:var(--muted)}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--focus);outline-offset:5px}a.text-link{border-bottom:1px solid currentColor;padding-bottom:5px;font-size:13px;display:inline-block}.text-link:hover{color:var(--accent-hover)}.skip{position:fixed;top:-70px;left:15px;padding:14px;background:var(--lime);color:#212b28;z-index:100}.skip:focus{top:12px}header{padding:12px 5%;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;background:var(--paper);gap:25px;position:sticky;top:0;z-index:10}.brand{flex-shrink:0}.brand img{width:66px;height:66px}.site-nav{display:flex;gap:24px;align-items:center;margin-left:auto;font-size:12px}.site-nav a:hover{text-decoration:underline;text-underline-offset:5px}.site-nav .hire-link{border:1px solid var(--line);padding:10px 14px}.menu-button{display:none;border:1px solid var(--line);padding:9px 14px;background:transparent}.wrap{width:90%;max-width:1400px;margin:auto}.section{padding:85px 0}.eyebrow{font:700 10px/1.6 Arial,sans-serif;letter-spacing:2px;text-transform:uppercase}.hero{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:45px;min-height:680px;padding:65px 0}.hero h1{font-size:clamp(62px,6.9vw,102px);letter-spacing:-5px;line-height:.99;font-weight:500;margin:26px 0}.hero h1 em{font-family:Georgia,serif;font-weight:400;color: var(--accent)}.intro{max-width:455px;font-size:17px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:25px}.button{display:inline-flex;align-items:center;justify-content:center;gap:15px;padding:15px 20px;background:var(--button-bg);color:var(--button-ink);border:1px solid var(--button-bg);font-size:12px;line-height:1.5}.button:hover{background:var(--button-hover)}.button.secondary{background:transparent;color: var(--accent);border-color:var(--control-border)}.button.secondary:hover{background:var(--soft)}.hero-art{position:relative;aspect-ratio:1;max-width:560px;border-radius:50% 50% 3px 3px;overflow:hidden;background:var(--green)}.hero-art svg{width:100%;height:100%}.art-label{position:absolute;bottom:24px;left:25px;font:9px/1.7 monospace;color:#e5eccf;letter-spacing:1.5px}.strip{background:var(--highlight-bg);color:var(--highlight-ink);padding:18px 5%;display:flex;justify-content:space-between;gap:18px;font:10px/1.5 monospace;letter-spacing:1px}.section-title{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:35px}h2{font-size:clamp(35px,3.8vw,56px);font-weight:400;letter-spacing:-2px;line-height:1.12;margin:16px 0 24px}h3{font-size:26px;font-weight:500;letter-spacing:-.8px;line-height:1.2;margin:18px 0 12px}.section-title h2{margin-bottom:0}.section-title>p{max-width:370px;font-size:14px}.branches{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);margin-top:38px}.branch{padding:28px 28px 0 0}.branch+.branch{border-left:1px solid var(--line);padding-left:30px}.branch p{font-size:14px}.number{font:12px monospace;color:var(--muted)}.featured{display:grid;grid-template-columns:1fr 1fr;background:var(--green);color:var(--forest-ink);border-radius:3px;overflow:hidden;margin-top:55px}.featured-copy{padding:40px}.featured-copy h3{font-size:39px;letter-spacing:-1.5px}.featured-copy p{color:#d4dfd2;font-size:15px}.featured .button{background:var(--lime);color:var(--green);border:0}.featured-art{position:relative;min-height:340px;overflow:hidden;background:#101e2b;isolation:isolate}.illustration-label{position:absolute;bottom:18px;left:20px;right:20px;font:9px/1.6 monospace;letter-spacing:.7px;color:#e2e6df}.projects{background:var(--soft)}.filters{display:flex;gap:8px;flex-wrap:wrap}.filters button{padding:9px 16px;border:1px solid var(--control-border);background:none;border-radius:30px;font-size:12px}.filters button.active{background:var(--ink);color:var(--paper);border-color:var(--ink)}.project-count{font:11px monospace;color:var(--muted);margin:18px 0 25px}.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px 25px}.project[hidden]{display:none}.visual{height:255px;position:relative;overflow:hidden;background:#122a25}.visual img{width:100%;height:100%;object-fit:cover}.visual.title-art{background:#090b0b;padding:18px;display:flex;align-items:center}.visual.title-art img{object-fit:contain;height:auto;max-height:100%}.visual.space{background:radial-gradient(circle at 76% 25%,#d8bb89 0 3%,transparent 3.2%),radial-gradient(ellipse at 60% 150%,#222634 0 52%,#a6b4bb 52.3%,#43606b 53%,#172633 59%,#101923 70%)}.visual.lake{background:linear-gradient(165deg,#a9c7ba 0 45%,#567b65 45% 53%,#244b3c 53% 60%,#729b98 60%);display:flex;align-items:end;padding:25px;color:white;font:italic 38px Georgia}.project h3{margin:16px 0 10px}.project p{font-size:14px;margin:10px 0 16px}.status{display:inline-block;padding:6px 9px;border:1px solid var(--control-border);color:var(--accent);font:9px/1.5 monospace;letter-spacing:.6px;text-transform:uppercase}.status.dark{border-color:#d5e2bf66;color:var(--lime)}.project .meta{font:10px/1.6 monospace;color:var(--muted);margin:16px 0 0;letter-spacing:.5px}.credit-note{font-size:12px!important;border-left:2px solid var(--control-border);padding-left:12px}.catalog{margin-top:60px;border-top:1px solid var(--line);padding-top:30px}.catalog-heading{display:flex;justify-content:space-between;align-items:end;gap:30px}.catalog-heading p{font-size:13px;max-width:570px}.catalog-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px;margin-top:20px}.catalog-card{padding:22px;border:1px solid var(--line);display:flex;flex-direction:column;align-items:start;gap:12px}.catalog-card img{height:70px;max-width:100%;width:100%;object-fit:contain;object-position:left}.catalog-card h4{margin:0;font-size:19px;font-weight:500}.catalog-card p{font-size:12px;margin:0}.catalog-card a{font-size:12px;border-bottom:1px solid var(--line);padding-bottom:4px}.technical-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px}.technical-layout>div>p{font-size:15px}.tech-list{border-top:1px solid var(--line)}.tech-row{padding:25px 0;border-bottom:1px solid var(--line)}.tech-row h3{font-size:21px;margin:0 0 10px}.tech-row p{font-size:14px;margin:0 0 13px}.tag{font:10px monospace;display:inline-block;border:1px solid var(--line);padding:6px 8px;margin:0 4px 6px 0}.small{font-size:12px!important}.about{background:var(--green);color:var(--forest-ink)}.about-layout{display:grid;grid-template-columns:1fr 1fr;gap:70px}.about h2{font-family:Georgia,serif}.about p{color:#cfdbcd;font-size:15px}.original-brand{display:flex;align-items:center;gap:20px;margin-top:30px;padding-top:25px;border-top:1px solid #ffffff33}.original-brand img{width:75px;height:75px}.original-brand p{font-size:12px;max-width:330px;margin:0}.remembrance{background:var(--soft)}.remembrance-layout{display:grid;grid-template-columns:.75fr 1.25fr;gap:70px}.remembrance .lead{font:italic 23px/1.6 Georgia;color: var(--accent)}.remembrance p{font-size:16px}.signature{font-family:Georgia,serif;color: var(--accent)}.profile{display:grid;grid-template-columns:.95fr 1.05fr;gap:70px}.profile h2{font-size:65px}.role{font:17px/1.7 Georgia,serif;color: var(--accent)}.profile-intro{font-size:15px}.availability{display:flex;align-items:center;gap:8px;font:11px/1.5 monospace;margin:24px 0;color: var(--accent)}.dot{width:7px;height:7px;flex-shrink:0;background:var(--accent);border-radius:50%}.skill-list{margin-top:24px}.skill-list h3{font-size:16px;letter-spacing:0}.skill-list p{font-size:13px}.experience{border-top:1px solid var(--line)}.experience article{padding:20px 0;border-bottom:1px solid var(--line)}.experience h3{font-size:20px;margin:5px 0 8px}.experience p{font-size:13px;margin:0 0 8px}.date{font:10px/1.6 monospace;color:var(--muted)}.credits{margin-top:35px}.credits summary{cursor:pointer;font-size:13px;line-height:1.6;color: var(--accent)}.credits ul{padding-left:18px;font-size:13px;line-height:1.8;color:var(--muted)}.contact{background:var(--highlight-bg);color:var(--highlight-ink)}.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:70px}.contact p{max-width:460px;font-size:15px;color:var(--highlight-muted)}.email-link{font-size:clamp(19px,2.3vw,31px);letter-spacing:-.5px;border-bottom:1px solid var(--highlight-border);padding-bottom:8px;display:inline-block;overflow-wrap:anywhere}.contact-links{display:flex;gap:22px;flex-wrap:wrap;margin-top:28px;font-size:12px}.contact-links a:hover{text-decoration:underline}.copy-button{font-size:12px;border:1px solid var(--highlight-border);padding:11px 15px;background:transparent;color:var(--highlight-ink);margin-top:18px}.copy-status{font-size:11px!important;min-height:18px}.footer{border-top:1px solid var(--line);padding:25px 5%;display:flex;gap:25px;justify-content:space-between;font:10px/1.6 monospace;color:var(--muted)}.footer a{text-decoration:underline}.case-hero{padding:55px 0 45px;border-bottom:1px solid var(--line)}.breadcrumb{font:11px monospace;color:var(--muted);margin-bottom:35px}.breadcrumb a{text-decoration:underline}.case-hero h1{font-size:clamp(42px,5vw,72px);letter-spacing:-2.5px;font-weight:400;margin:20px 0}.case-intro{max-width:750px;font-size:19px}.case-layout{display:grid;grid-template-columns:1fr 2fr;gap:70px}.case-aside{border-top:1px solid var(--line);padding-top:20px}.case-aside dl{margin:0}.case-aside dt{font:10px monospace;text-transform:uppercase;color:var(--muted);margin:25px 0 8px}.case-aside dd{font-size:13px;line-height:1.8;margin:0}.case-body h2{font-size:30px;letter-spacing:-.7px;margin-top:40px}.case-body h2:first-child{margin-top:0}.case-body p,.case-body li{font-size:15px;line-height:1.8;color:var(--muted)}.case-body li{margin:9px 0}.case-body ul{padding-left:20px}.case-media{margin:30px 0 0}.case-media .visual{height:340px}.case-media figcaption{font:10px/1.6 monospace;color:var(--muted);margin:12px 0}.callout{padding:22px;background:var(--soft);border-left:3px solid var(--accent);margin:30px 0}.callout p{font-size:13px;margin:0}.case-next{border-top:1px solid var(--line);padding:30px 0 60px;margin-top:20px}
@media(min-width:1600px){header,.strip,.footer{padding-left:max(5%,calc((100vw - 1400px)/2));padding-right:max(5%,calc((100vw - 1400px)/2))}}
@media(max-width:1050px){.site-nav{gap:15px;font-size:11px}.hero h1{font-size:76px}.hero{gap:30px;min-height:610px}.hero-art{max-width:480px}.technical-layout,.about-layout,.profile,.contact-layout,.remembrance-layout,.case-layout{gap:35px}.profile h2{font-size:52px}.featured-copy{padding:30px}.featured-copy h3{font-size:33px}}
@media(max-width:760px){html{scroll-padding-top:85px}header{padding:10px 6%;flex-wrap:wrap;gap:10px}.brand{margin-right:auto}.brand img{width:56px;height:56px}.menu-button{display:block}.site-nav{display:none;flex-basis:100%;flex-direction:column;align-items:stretch;gap:0;margin-left:0;order:1}.site-nav.is-open{display:flex}.site-nav a{padding:13px 0;font-size:14px;border-top:1px solid var(--line)}.site-nav .hire-link{border:0;border-top:1px solid var(--line);padding:13px 0}.wrap{width:88%}.hero{grid-template-columns:1fr;padding:40px 0;gap:32px}.hero h1{font-size:72px;letter-spacing:-3.5px}.intro{font-size:16px}.hero-art{max-width:420px;width:100%;margin:auto}.art-label{font-size:8px}.strip{flex-wrap:wrap;padding:17px 6%;font-size:9px;gap:8px 20px}.section{padding:57px 0}.section-title{display:block}.section-title .filters{margin-top:24px}h2{font-size:37px;letter-spacing:-1.6px}.branches,.featured,.project-grid,.technical-layout,.about-layout,.profile,.contact-layout,.remembrance-layout,.case-layout{grid-template-columns:1fr}.branch+.branch{border-left:0;border-top:1px solid var(--line);padding-left:0;margin-top:18px}.branch{padding-right:0}.featured{margin-top:35px}.featured-art{min-height:270px;order:-1}.featured-copy{padding:26px}.project-grid{gap:36px}.visual{height:245px}.technical-layout,.about-layout,.profile,.contact-layout,.remembrance-layout,.case-layout{gap:30px}.catalog-heading{display:block}.catalog-grid{grid-template-columns:1fr}.profile h2{font-size:54px}.original-brand{gap:15px}.case-hero{padding-top:30px}.case-hero h1{font-size:45px}.case-intro{font-size:17px}.case-aside dl{display:grid;grid-template-columns:1fr 1fr;gap:10px 20px}.case-aside dt{margin-top:8px}.case-media .visual{height:230px}.footer{padding:25px 6%;flex-direction:column;gap:10px}.actions{gap:10px}.actions .button{font-size:11px;padding:14px 16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.trippendicular-art {
  background: #000;
}

.brand img,
.original-brand img {
  object-fit: contain;
  background: #f1f0e8;
  border-radius: 3px;
  padding: 4px;
}

.theme-toggle:not([hidden]) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 8px 10px;
  border: 1px solid var(--control-border);
  background: var(--paper);
  border-radius: 4px;
  font-size: 12px;
}

.theme-switch {
  position: relative;
  width: 26px;
  height: 16px;
  border: 1px solid var(--control-border);
  border-radius: 999px;
}

.theme-switch::before {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--muted);
  content: "";
}

.theme-toggle[aria-pressed="true"] .theme-switch::before {
  transform: translateX(10px);
  background: var(--accent);
}

.trippendicular-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.case-media .trippendicular-art {
  height: auto;
  aspect-ratio: 512 / 486;
}

.trippendicular-launch {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.featured .trippendicular-launch {
  align-self: center;
  padding: clamp(16px, 2.5vw, 32px);
}

.trippendicular-launch .featured-art {
  min-height: 0;
  aspect-ratio: 512 / 486;
}

.trippendicular-launch .trippendicular-play-button {
  min-height: 56px;
  padding: 14px 18px;
  border-color: var(--lime);
  border-radius: 3px;
  background: var(--lime);
  color: var(--green);
  font-size: clamp(16px, 1.8vw, 20px);
  font-weight: 700;
  text-align: center;
}

.trippendicular-launch .trippendicular-play-button:hover {
  background: #effaa7;
}

.trippendicular-launch figcaption {
  margin: 0;
}

@media (max-width: 760px) {
  .featured .trippendicular-launch {
    order: -1;
    padding-bottom: 0;
  }
}

.featured .actions {
  align-items: center;
}

.featured .gallery-shortcut {
  color: var(--forest-ink);
}

.featured .gallery-shortcut:hover {
  color: var(--lime);
}

.project-gallery {
  background: var(--soft);
}

.project-compact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(22px, 3vw, 36px);
  border: 1px solid var(--line);
  background: var(--paper);
}

.project-compact .meta {
  margin-top: 0;
}

.project-compact h3 a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.project-compact .text-link {
  margin-top: auto;
}

.project-screenshot {
  display: block;
  background: #101923;
}

.project-screenshot img {
  object-fit: contain;
}

.case-screenshot {
  display: block;
}

.case-screenshot img {
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
}

.case-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
}

.case-hero-media {
  width: min(100%, 480px);
  margin: 0;
}

.project-cover {
  display: block;
}

.case-hero-cover {
  width: min(100%, 560px);
}

.case-hero-cover img {
  width: 100%;
  height: auto;
  border-radius: 3px;
}

@media (max-width: 760px) {
  .case-hero-grid {
    grid-template-columns: 1fr;
  }
}

.component-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin: 18px 0 30px;
  font-size: 14px;
  line-height: 1.6;
}

.component-table th,
.component-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  overflow-wrap: break-word;
}

.component-table thead th {
  background: var(--soft);
  color: var(--accent);
}

.component-table thead th:first-child {
  width: 30%;
}

.component-table td {
  color: var(--muted);
}

.asset-layout {
  max-width: 1100px;
}

.asset-group h2 {
  font-size: clamp(25px, 3vw, 34px);
  letter-spacing: -0.7px;
  margin: 0;
}

.asset-group + .asset-group {
  margin-top: 42px;
}

.asset-jumps {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-top: 24px;
  font-size: 13px;
}

.asset-jumps a,
.asset-card-context a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.asset-grid,
.project-asset-list {
  display: grid;
  list-style: none;
  padding: 0;
  margin: 16px 0 26px;
}

.asset-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: 18px;
}

.asset-card {
  min-width: 0;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 4px;
}

.asset-store-link {
  display: block;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.asset-store-link:hover span {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.asset-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  background: #16201b;
  border-radius: 3px 3px 0 0;
}

.asset-card .asset-store-link span {
  display: block;
  padding: 12px 14px 0;
}

.asset-card-context {
  padding: 4px 14px 14px;
}

.asset-card-context p {
  margin: 5px 0 0;
  font-size: 13px;
  line-height: 1.55;
}

.project-assets {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.project-assets h2,
.project-assets h3 {
  margin: 0 0 14px;
}

.project-assets .asset-list-label {
  margin: 18px 0 6px;
  font-size: 13px;
  font-weight: 700;
}

.project-asset-list,
.case-body .project-asset-list {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 8px;
  padding: 0;
  margin: 0 0 12px;
}

.project-asset-list > li,
.case-body .project-asset-list > li {
  margin: 0;
  color: inherit;
}

.project-asset-list .asset-store-link {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  min-height: 52px;
  height: 100%;
  gap: 9px;
  padding: 7px;
  border: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.4;
}

.project-asset-list img {
  width: 54px;
  height: 36px;
  object-fit: contain;
  background: #16201b;
}

.featured .project-assets {
  grid-column: 1 / -1;
  margin: 0;
  padding: clamp(20px, 3vw, 38px);
  border-color: #e5eccf44;
}

.featured .project-assets .asset-list-label {
  color: #d4dfd2;
}

.featured .asset-ownership {
  max-width: 70ch;
  color: #d4dfd2;
  font-size: 14px;
}

.featured .project-asset-list .asset-store-link {
  border-color: #e5eccf44;
}

.featured .asset-store-link:hover span,
.featured .text-link:hover,
.about .text-link:hover,
.featured .project-reference:hover,
.about .project-reference:hover {
  color: var(--lime);
}

.project-reference {
  text-decoration: underline;
  text-underline-offset: .18em;
}

.founders {
  margin: 35px 0 0;
}

.founders img,
.remembrance-photo {
  width: 100%;
  height: auto;
  border-radius: 3px;
}

.founders figcaption {
  margin-top: 9px;
  color: #d3dece;
  font: 12px/1.7 Arial, sans-serif;
}

.remembrance-photo {
  max-width: 360px;
}

.trippendicular-player {
  max-width: 1120px;
  padding: clamp(24px, 4vw, 48px) 0 44px;
}

.trippendicular-player .breadcrumb {
  margin-bottom: 20px;
}

.player-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 22px;
}

.player-heading h1 {
  margin: 0;
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1.05;
}

.player-heading p {
  margin: 10px 0 0;
}

.player-actions {
  margin-top: 0;
}

.player-stage {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #11171d;
}

.player-canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 5;
  background: #11171d url("/projects/trippendicular/Build/WebGL.jpg") center / cover no-repeat;
}

.player-canvas:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: -3px;
}

.player-loading {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  padding: 12px;
  background: #11171d66;
}

.trippendicular-player [hidden] {
  display: none;
}

.player-message {
  max-width: min(100%, 29rem);
  max-height: 100%;
  overflow: auto;
  padding: clamp(12px, 3vw, 24px);
  border: 1px solid #f1f0e84d;
  border-radius: 4px;
  background: #11171ded;
  text-align: center;
}

.player-message p {
  margin: 0;
  color: #f1f0e8;
}

.player-message .player-error-detail {
  margin-top: 8px;
  color: #d4dfd2;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.player-progress {
  width: min(100%, 14rem);
  margin-top: 10px;
  accent-color: #ddf17d;
}

.player-retry {
  margin-top: 10px;
}

.player-note {
  margin-bottom: 0;
}

.capture-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 24px;
}

.capture-figure {
  margin: 0;
  min-width: 0;
}

.capture-frame {
  display: block;
  aspect-ratio: 1;
  background: #000;
}

.capture-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.capture-figure figcaption {
  padding-top: 12px;
  font-size: 15px;
}

.visual.colorado-trail-cover {
  background: #ede3cc;
  padding: 12px;
}

.colorado-trail-cover img {
  object-fit: contain;
}

.colorado-trail-logo {
  display: block;
  width: min(100%, 320px);
}

.colorado-trail-logo img {
  width: 100%;
  height: auto;
}

.colorado-trail-gallery .capture-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr));
  max-width: 1250px;
}

.colorado-trail-gallery .capture-frame {
  background: #ede3cc;
}

.video-gallery {
  border-top: 1px solid var(--line);
}

.video-gallery .capture-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
}

.trippendicular-capture-grid {
  max-width: 1040px;
}

.video-group + .video-group {
  margin-top: 36px;
}

.video-preview,
.video-frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 200px;
  border: 0;
  background: #101923;
}

.video-preview {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.video-preview img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-preview-contained img {
  object-fit: contain;
}

.video-play {
  position: relative;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid #fff8;
  border-radius: 50%;
  background: #101923d9;
  color: white;
  font-size: 18px;
}

.video-preview:hover .video-play,
.video-preview:focus-visible .video-play {
  background: var(--green);
}

.video-card :is(h3, h4) {
  margin: 12px 0 8px;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: normal;
}

.featured-video {
  align-self: center;
  min-width: 0;
  padding: clamp(20px, 3vw, 38px);
}

.featured-video .text-link:hover {
  color: var(--lime);
}

#killer-cows {
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
}

#killer-cows .featured-copy {
  align-self: center;
}

#killer-cows .featured-video {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  align-items: start;
  gap: 18px;
}

@media (max-width: 1000px) {
  #killer-cows {
    grid-template-columns: 1fr;
  }

  #killer-cows .featured-video {
    padding-top: 0;
  }
}

.tsbts-overview {
  max-width: 1080px;
  padding-top: 42px;
}

.slideshow-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px;
  border: 1px solid var(--line);
  background: var(--soft);
}

.slideshow-controls[hidden] {
  display: none;
}

.slide-navigation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.slide-navigation button,
.slide-picker select {
  padding: 9px 12px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}

.slide-navigation button[aria-disabled="true"] {
  opacity: .55;
  cursor: default;
}

.slide-picker {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 300px;
  min-width: 0;
  max-width: 430px;
  font-size: 13px;
}

.slide-picker select {
  flex: 1;
  min-width: 0;
}

.overview-slides {
  display: grid;
  gap: 34px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.overview-slides figure {
  margin: 0;
}

.overview-slides figure > a {
  display: block;
}

.overview-slides img {
  width: 100%;
  height: auto;
  background: #0c1c27;
}

.overview-slides figcaption {
  padding: 12px 0 0;
  font-size: 15px;
}

.overview-slides figcaption .eyebrow {
  margin-right: 10px;
  color: var(--muted);
}

.overview-slides summary {
  width: fit-content;
  margin-top: 8px;
  color: var(--accent);
  font-size: 13px;
  cursor: pointer;
}

.slide-table {
  overflow-x: auto;
}

.slide-table table {
  border-collapse: collapse;
}

.slide-table th,
.slide-table td {
  padding: 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.comparison-gallery {
  margin-top: 55px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}

.comparison-gallery > p {
  max-width: 620px;
}

.comparison-pair > h4 {
  margin: 0 0 12px;
  font-size: 17px;
}

.comparison-pair + .comparison-pair {
  margin-top: 35px;
}

#gallery .capture-grid,
.comparison-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: 880px;
}

.comparison-grid .capture-frame {
  aspect-ratio: 4 / 3;
}

@media (max-width: 600px) {
  #gallery .capture-grid,
  .comparison-grid {
    grid-template-columns: 1fr;
  }
}