* { box-sizing: border-box; }
:root {
  --paper: #f4f4f2;
  --ink: #111110;
  --muted: #73736d;
  --line: #e4e4df;
  --soft: #ecece8;
  --max: 1280px;
  --gutter: 3rem;
  --font: "Outfit", Arial, sans-serif;
  --archive-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--font); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; }
button, input { font: inherit; }
.shell { width: min(100%, calc(var(--max) + (var(--gutter) * 2))); margin-inline: auto; padding-inline: var(--gutter); }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; padding: .6rem .8rem; background: #fff; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.site-header { position: relative; z-index: 20; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--paper) 94%, transparent); }
.header-inner { display: grid; grid-template-columns: auto 1fr auto; gap: 2rem; align-items: center; min-height: 76px; }
.monogram { font-size: 20px; font-weight: 600; letter-spacing: -.03em; }
.desktop-nav { display: flex; justify-content: center; gap: clamp(1rem, 2vw, 2rem); }
.desktop-nav a { color: var(--muted); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; }
.desktop-nav a:hover { color: var(--ink); }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: .65rem 1rem; border: 1px solid var(--ink); font-size: 12px; font-weight: 500; }
.button-dark { color: #fff; background: var(--ink); }
.button-dark:hover { color: var(--ink); background: transparent; }
.menu-toggle, .mobile-menu { display: none; }
.breadcrumbs { display: flex; gap: .55rem; align-items: center; margin-bottom: 72px; color: var(--muted); font-size: 12px; }
.breadcrumbs a:hover { color: var(--ink); }
.eyebrow { margin: 0 0 16px; color: var(--muted); font-family: var(--archive-font); font-size: 12px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; }
.section-line { border-top: 1px solid var(--line); }
.site-footer { margin-top: 64px; padding-block: 36px; color: var(--muted); border-top: 1px solid var(--line); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.footer-mark { color: var(--ink); font-size: 16px; font-weight: 500; }
.footer-inner p { margin: 6px 0 0; font-size: 12px; }
.experiments-noscript { margin: 48px 0 0; padding: 24px 0; border-top: 1px solid var(--line); color: var(--muted); }

.site-experiments {
  --experiment-type-xs: 12px;
  --experiment-type-sm: 16px;
  --experiment-type-md: 20px;
  --experiment-type-lg: 24px;
  --experiment-type-xl: 32px;
  --experiment-type-2xl: 40px;
  --experiment-type-3xl: 48px;
  --experiment-type-display: 128px;
}
.site-experiments .experiments-hero { padding-block: 64px 96px; }
.site-experiments .experiments-hero-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, .75fr); gap: 64px; align-items: end; }
.site-experiments .experiments-hero h1 { max-width: 7ch; margin: 0; font-size: var(--experiment-type-display); font-weight: 600; line-height: .82; letter-spacing: -.07em; }
.site-experiments .experiments-date { margin: 32px 0 0; font-family: var(--archive-font); font-size: var(--experiment-type-md); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.site-experiments .experiments-hero-copy { padding-bottom: 4px; }
.site-experiments .experiments-thesis { max-width: 16ch; margin: 0 0 24px; font-size: var(--experiment-type-2xl); font-weight: 500; line-height: 1; letter-spacing: -.045em; }
.site-experiments .experiments-hero-copy > p:not(.experiments-thesis) { max-width: 40ch; margin: 0; color: var(--muted); font-size: var(--experiment-type-sm); line-height: 1.5; }
.site-experiments .experiments-hero-figure { margin: 80px 0 0; }
.site-experiments .experiments-hero-figure figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 32px; margin-top: 12px; color: var(--muted); font-size: var(--experiment-type-xs); }
.site-experiments .experiments-hero-figure figcaption > span:first-child { color: var(--ink); font-weight: 500; }
.site-experiments .experiment-media { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: #0d0d0c; }
.site-experiments .experiment-media video { display: block; width: 100%; height: 100%; object-fit: cover; background: #0d0d0c; }
.site-experiments .experiment-media-hero { aspect-ratio: 16 / 8.6; }
.site-experiments .experiment-media-hero video { object-position: center 52%; }
.site-experiments .experiment-sound { position: absolute; right: 12px; bottom: 12px; min-height: 36px; padding: 8px 12px; color: #fff; background: rgba(17,17,16,.88); border: 1px solid rgba(255,255,255,.34); border-radius: 0; cursor: pointer; font-size: var(--experiment-type-xs); font-weight: 500; }
.site-experiments .experiment-sound:hover { color: var(--ink); background: #fff; }
.site-experiments .experiments-section { padding-block: 96px; }
.site-experiments .experiments-section-intro { display: grid; grid-template-columns: minmax(0,.9fr) minmax(320px,.55fr); gap: 64px; align-items: end; margin-bottom: 48px; }
.site-experiments .experiments-section-intro h2,
.site-experiments .experiments-practice-intro h2,
.site-experiments .experiments-list-heading h2,
.site-experiments .experiments-early-ar h2 { margin: 0; font-size: var(--experiment-type-3xl); font-weight: 500; line-height: .95; letter-spacing: -.045em; }
.site-experiments .experiments-section-intro > p,
.site-experiments .experiments-practice-intro > p { max-width: 42ch; margin: 0; color: var(--muted); font-size: var(--experiment-type-sm); line-height: 1.5; }
.site-experiments .experiment-feature-grid { border-bottom: 1px solid var(--line); }
.site-experiments .experiment-feature { display: grid; grid-template-columns: minmax(360px,.85fr) minmax(0,1fr); gap: 48px; min-width: 0; padding-block: 48px; border-top: 1px solid var(--line); }
.site-experiments .experiment-feature:first-child { padding-top: 0; border-top: 0; }
.site-experiments .experiment-feature-copy { display: flex; min-width: 0; flex-direction: column; padding-top: 4px; }
.site-experiments .experiment-meta { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: start; color: var(--muted); font-family: var(--archive-font); font-size: var(--experiment-type-xs); letter-spacing: .04em; text-transform: uppercase; }
.site-experiments .experiment-year { color: var(--ink); font-family: var(--font); font-size: var(--experiment-type-xl); font-weight: 600; line-height: .9; letter-spacing: -.04em; }
.site-experiments .experiment-question { max-width: 24ch; margin: 32px 0 8px; font-size: var(--experiment-type-xl); font-weight: 500; line-height: 1.04; letter-spacing: -.035em; }
.site-experiments .experiment-feature h3 { margin: 0; color: var(--muted); font-size: var(--experiment-type-md); font-weight: 500; }
.site-experiments .experiment-summary { max-width: 48ch; margin: 12px 0 0; color: var(--muted); font-size: var(--experiment-type-sm); line-height: 1.5; }
.site-experiments .experiment-transformation-anchor { display: flex; width: 100%; align-items: end; margin-top: auto; padding-top: 20px; border-top: 1px solid var(--line); }
.site-experiments .experiment-transformation { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-family: var(--archive-font); font-size: var(--experiment-type-xs); letter-spacing: .04em; text-transform: uppercase; }
.site-experiments .experiment-transformation span:nth-child(2) { color: var(--ink); }
.site-experiments .experiment-ledger-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); background: var(--line); border: 1px solid var(--line); gap: 1px; }
.site-experiments .experiment-ledger-item { display: flex; min-width: 0; min-height: 100%; flex-direction: column; background: var(--paper); }
.site-experiments .experiment-ledger-item > .experiment-media,
.site-experiments .experiment-media-pending { width: 100%; height: auto; aspect-ratio: 4 / 3; background: var(--soft); }
.site-experiments .experiment-media-pending { display: grid; place-items: center; color: var(--muted); border-bottom: 1px solid var(--line); font-family: var(--archive-font); font-size: var(--experiment-type-xs); letter-spacing: .04em; text-transform: uppercase; }
.site-experiments .experiment-ledger-copy { display: flex; min-height: 320px; flex-direction: column; padding: 24px; }
.site-experiments .experiment-ledger-copy .experiment-year { font-size: var(--experiment-type-lg); }
.site-experiments .experiment-ledger-copy h3 { margin: 32px 0 0; font-size: var(--experiment-type-lg); font-weight: 500; line-height: 1.05; letter-spacing: -.03em; }
.site-experiments .experiment-ledger-copy .experiment-question { margin: 12px 0 0; font-size: var(--experiment-type-md); line-height: 1.2; }
.site-experiments .experiment-ledger-copy .experiment-summary { margin-bottom: 24px; }
.site-experiments .experiment-role { margin: -12px 0 20px; color: var(--muted); font-family: var(--archive-font); font-size: var(--experiment-type-xs); letter-spacing: .04em; text-transform: uppercase; }
.site-experiments .oppo-filmstrip { display: grid; grid-template-columns: repeat(5,minmax(220px,1fr)); gap: 1px; overflow-x: auto; padding-bottom: 8px; background: var(--line); border: 1px solid var(--line); scroll-snap-type: x proximity; }
.site-experiments .oppo-filmstrip-item { min-width: 220px; background: var(--paper); scroll-snap-align: start; }
.site-experiments .oppo-filmstrip-item .experiment-media { aspect-ratio: 4 / 5; }
.site-experiments .oppo-filmstrip-copy { display: flex; min-height: 240px; flex-direction: column; padding: 16px; }
.site-experiments .oppo-sequence { margin: 0; color: var(--muted); font-family: var(--archive-font); font-size: var(--experiment-type-xs); letter-spacing: .04em; text-transform: uppercase; }
.site-experiments .oppo-filmstrip-copy h3 { margin: 24px 0 8px; font-size: var(--experiment-type-md); font-weight: 500; line-height: 1.05; letter-spacing: -.03em; }
.site-experiments .oppo-filmstrip-copy > p:not(.oppo-sequence) { margin: 24px 0; color: var(--muted); font-size: var(--experiment-type-sm); line-height: 1.5; }
.site-experiments .oppo-filmstrip-copy h3 + p { margin-top: 0; }
.site-experiments .experiments-early-ar { display: grid; grid-template-columns: minmax(0,.6fr) minmax(320px,1fr); gap: 64px; }
.site-experiments .experiments-early-ar > div:last-child > p { max-width: 54ch; margin: 0; color: var(--muted); font-size: var(--experiment-type-md); line-height: 1.4; }
.site-experiments .experiments-source-links { display: grid; margin-top: 40px; border-top: 1px solid var(--line); }
.site-experiments .experiments-source-links a { padding: 16px 0; color: var(--muted); border-bottom: 1px solid var(--line); font-size: var(--experiment-type-xs); font-weight: 500; }
.site-experiments .experiments-source-links a:hover { color: var(--ink); }
.site-experiments .experiments-practice { padding-block: 96px; color: #fff; background: var(--ink); }
.site-experiments .experiments-practice-intro { display: grid; grid-template-columns: minmax(0,.75fr) minmax(320px,.45fr); gap: 64px; align-items: end; }
.site-experiments .experiments-practice-intro > p { color: rgba(255,255,255,.62); }
.site-experiments .tenstud-experiment-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin-top: 64px; border-top: 1px solid rgba(255,255,255,.18); border-left: 1px solid rgba(255,255,255,.18); }
.site-experiments .tenstud-experiment-grid > a { display: flex; min-width: 0; min-height: 100%; flex-direction: column; overflow: hidden; border-right: 1px solid rgba(255,255,255,.18); border-bottom: 1px solid rgba(255,255,255,.18); }
.site-experiments .tenstud-experiment-image { aspect-ratio: 4 / 3; overflow: hidden; background: #181817; border-bottom: 1px solid rgba(255,255,255,.18); }
.site-experiments .tenstud-experiment-image img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.82); transition: filter 180ms ease, transform 180ms ease; }
.site-experiments .tenstud-experiment-grid > a:hover .tenstud-experiment-image img { filter: saturate(1); transform: scale(1.012); }
.site-experiments .tenstud-experiment-copy { display: flex; min-height: 320px; flex: 1; flex-direction: column; padding: 20px; }
.site-experiments .tenstud-experiment-grid .eyebrow { color: rgba(255,255,255,.5); }
.site-experiments .tenstud-experiment-grid h3 { margin: 40px 0 12px; font-size: var(--experiment-type-lg); font-weight: 500; line-height: 1; letter-spacing: -.04em; }
.site-experiments .tenstud-experiment-grid p { margin: 0; color: rgba(255,255,255,.62); font-size: var(--experiment-type-sm); line-height: 1.5; }
.site-experiments .tenstud-experiment-grid small { margin-top: 12px; color: rgba(255,255,255,.45); font-size: var(--experiment-type-xs); line-height: 1.5; }
.site-experiments .tenstud-experiment-action { margin-top: auto; padding-top: 16px; color: rgba(255,255,255,.52); border-top: 1px solid rgba(255,255,255,.18); font-size: var(--experiment-type-xs); font-weight: 500; }
.site-experiments .tenstud-experiment-grid > a:hover .tenstud-experiment-action { color: #fff; }
.site-experiments .experiments-evidence { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 64px; }
.site-experiments .experiments-list-heading { margin-bottom: 40px; }
.site-experiments .experiments-list-heading h2 { font-size: var(--experiment-type-2xl); }
.site-experiments .experiments-archive-list { border-top: 1px solid var(--line); }
.site-experiments .experiments-archive-list > a { display: grid; grid-template-columns: 80px minmax(0,1fr) auto; gap: 16px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--line); }
.site-experiments .experiments-archive-year { font-family: var(--archive-font); font-size: var(--experiment-type-sm); font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.site-experiments .experiments-archive-list strong,
.site-experiments .experiments-archive-list b { display: block; font-size: var(--experiment-type-sm); font-weight: 500; line-height: 1.35; }
.site-experiments .experiments-archive-list b { margin-top: 4px; }
.site-experiments .experiments-archive-list small { display: block; margin-top: 8px; color: var(--muted); font-size: var(--experiment-type-xs); line-height: 1.5; }
.site-experiments .experiments-archive-list > a > span:last-child { color: var(--muted); font-size: var(--experiment-type-xs); }
.site-experiments .experiments-archive-list > a:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.site-experiments .experiments-source-index { padding-top: 64px; }
.site-experiments .experiments-source-index details { border-block: 1px solid var(--line); }
.site-experiments .experiments-source-index summary { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 24px 0; cursor: pointer; list-style: none; }
.site-experiments .experiments-source-index summary::-webkit-details-marker { display: none; }
.site-experiments .experiments-source-index summary > span:first-child { display: grid; gap: 4px; }
.site-experiments .experiments-source-index summary strong { font-size: var(--experiment-type-sm); font-weight: 500; }
.site-experiments .experiments-source-index summary small,
.site-experiments .experiments-source-index summary > span:last-child { color: var(--muted); font-family: var(--archive-font); font-size: var(--experiment-type-xs); letter-spacing: .04em; text-transform: uppercase; }
.site-experiments .experiments-source-index summary::after { color: var(--muted); content: "+"; font-family: var(--archive-font); font-size: var(--experiment-type-sm); }
.site-experiments .experiments-source-index details[open] summary::after { content: "−"; }
.site-experiments .experiments-source-index summary > span:last-child { margin-left: auto; }
.site-experiments .experiments-source-index-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); padding-bottom: 24px; border-top: 1px solid var(--line); }
.site-experiments .experiments-source-index-grid a { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 16px; padding: 16px 16px 16px 0; color: var(--muted); border-bottom: 1px solid var(--line); font-size: var(--experiment-type-xs); }
.site-experiments .experiments-source-index-grid a:nth-child(3n+2),
.site-experiments .experiments-source-index-grid a:nth-child(3n+3) { padding-left: 16px; border-left: 1px solid var(--line); }
.site-experiments .experiments-source-index-grid a strong { color: var(--ink); font-weight: 500; line-height: 1.3; }
.site-experiments .experiments-source-index-grid a:hover strong { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 820px) {
  :root { --gutter: 1.5rem; }
  .header-inner { min-height: 64px; display: flex; justify-content: space-between; }
  .desktop-nav, .desktop-cta { display: none; }
  .menu-toggle { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; background: transparent; border: 1px solid var(--line); cursor: pointer; }
  .menu-toggle span { font-size: 20px; line-height: 1; }
  .mobile-menu { display: none; border-top: 1px solid var(--line); }
  .mobile-menu[data-open="true"] { display: block; }
  .mobile-menu nav { display: grid; }
  .mobile-menu a { display: flex; padding: .9rem 0; border-bottom: 1px solid var(--line); font-weight: 500; }
  .site-experiments { --experiment-type-display: 80px; }
  .site-experiments .experiments-hero { padding-block: 32px 72px; }
  .site-experiments .breadcrumbs { margin-bottom: 48px; }
  .site-experiments .experiments-hero-grid,
  .site-experiments .experiments-section-intro,
  .site-experiments .experiments-practice-intro,
  .site-experiments .experiments-early-ar,
  .site-experiments .experiments-evidence { grid-template-columns: 1fr; gap: 32px; }
  .site-experiments .experiments-hero-copy { padding-bottom: 0; }
  .site-experiments .experiments-hero-figure { margin-top: 48px; }
  .site-experiments .experiments-hero-figure figcaption { align-items: flex-start; flex-direction: column; gap: 8px; }
  .site-experiments .experiment-media-hero { aspect-ratio: 4 / 3; }
  .site-experiments .experiments-section,
  .site-experiments .experiments-practice { padding-block: 72px; }
  .site-experiments .experiments-section-intro { margin-bottom: 40px; }
  .site-experiments .experiment-feature { grid-template-columns: 1fr; gap: 24px; }
  .site-experiments .experiment-feature-copy { padding-top: 0; }
  .site-experiments .tenstud-experiment-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .site-experiments .experiments-source-index-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .site-experiments .experiments-source-index-grid a:nth-child(3n+2),
  .site-experiments .experiments-source-index-grid a:nth-child(3n+3) { padding-left: 0; border-left: 0; }
  .site-experiments .experiments-source-index-grid a:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line); }
  .footer-inner { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 560px) {
  .site-experiments {
    --experiment-type-xl: 24px;
    --experiment-type-2xl: 32px;
    --experiment-type-3xl: 40px;
    --experiment-type-display: 64px;
  }
  .site-experiments .experiments-thesis { font-size: var(--experiment-type-xl); }
  .site-experiments .experiments-hero { padding-block: 32px 64px; }
  .site-experiments .experiments-hero-figure { margin-top: 40px; }
  .site-experiments .experiment-media-hero { aspect-ratio: 4 / 5; }
  .site-experiments .experiments-section,
  .site-experiments .experiments-practice { padding-block: 64px; }
  .site-experiments .experiment-feature { gap: 24px; padding-block: 40px; }
  .site-experiments .experiment-ledger-grid,
  .site-experiments .tenstud-experiment-grid { grid-template-columns: 1fr; }
  .site-experiments .experiment-ledger-copy { min-height: 280px; }
  .site-experiments .tenstud-experiment-grid > a { min-height: 300px; }
  .site-experiments .experiments-archive-list > a { grid-template-columns: 72px minmax(0,1fr) auto; }
  .site-experiments .experiments-source-index summary { align-items: flex-start; gap: 16px; }
  .site-experiments .experiments-source-index summary > span:last-child { display: none; }
  .site-experiments .experiments-source-index-grid { grid-template-columns: 1fr; }
  .site-experiments .experiments-source-index-grid a:nth-child(even) { padding-left: 0; border-left: 0; }
}