:root {
    --bone: #EFEDE6;
    --ink: #141412;
    --bg: var(--bone);
    --fg: var(--ink);
    --rule: rgba(20, 20, 18, 0.16);
    --muted: rgba(20, 20, 18, 0.58);
    --sans: "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --gutter: 16px;
    --max: 1600px;
    --gap: 96px;
    --fgap: 12px;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: var(--ink);
      --fg: var(--bone);
      --rule: rgba(239, 237, 230, 0.18);
      --muted: rgba(239, 237, 230, 0.56);
    }
  }
  :root[data-theme="dark"] {
    --bg: var(--ink);
    --fg: var(--bone);
    --rule: rgba(239, 237, 230, 0.18);
    --muted: rgba(239, 237, 230, 0.56);
  }
  @media (min-width: 760px) { :root { --gutter: 40px; --gap: 120px; --fgap: 20px; } }
  @media (min-width: 1200px) { :root { --gutter: 64px; --gap: 140px; --fgap: 24px; } }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--sans);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  img { display: block; width: 100%; height: 100%; object-fit: cover; }
  svg { display: block; }
  a { color: inherit; text-decoration: none; }
  .wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

  .caps {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .wordmark {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .mark { display: flex; align-items: center; gap: 14px; }
  .mark svg { width: 14px; height: 12px; fill: currentColor; }

  /* Nav */
  .nav { background: var(--bg); color: var(--fg); }
  .nav .wrap {
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .nav .links { display: flex; gap: 28px; }
  .nav .links a { font-size: 12px; letter-spacing: 0.08em; }
  .nav a:hover, .foot a:hover { opacity: 0.6; }

  /* Hero */
  .hero {
    position: relative;
    height: 100vh;
    height: 100svh;
    min-height: 560px;
    background: var(--ink);
    overflow: hidden;
  }
  .hero img, .hero video { position: absolute; inset: 0; width:100%; height:100%; object-fit: cover; object-position: 40% 30%; background: var(--ink); }
  @media (min-width: 760px) { .hero img, .hero video { object-position: 50% 40%; } }
  .hero .brand {
    position: absolute;
    left: var(--gutter);
    top: 28px;
    color: var(--ink);
  }
  .hero .brand .mark { display: none; }
  .hero .brand .caps { color: inherit; margin-top: 0; }
  @media (min-width: 760px) {
    .hero .brand { top: auto; bottom: 40px; color: var(--bone); }
    .hero .brand .mark { display: flex; }
    .hero .brand .caps { margin-top: 16px; }
  }
  .hero .brand .mark { gap: 18px; }
  .hero .brand .mark svg { width: 26px; height: 23px; }

  /* Statement */
  .statement { padding: 120px 0 104px; }
  .statement p.lead {
    max-width: 620px;
    font-size: 28px;
    font-weight: 300;
    line-height: 1.3;
    letter-spacing: -0.005em;
  }
  .statement p.origin {
    max-width: 460px;
    margin-top: 36px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--muted);
  }
  @media (min-width: 760px) {
    .statement { padding: 180px 0 150px; }
    .statement p.lead { font-size: 38px; }
  }

  /* Frames */
  .frames { padding: var(--fgap) 0 0; }
  figure { margin: 0 0 var(--fgap); }
  figcaption { display: none; }
  .frame { overflow: hidden; background: var(--ink); aspect-ratio: 2 / 1; }
  .frame img { display:block; width:100%; height:100%; object-fit: cover; }
  @media (max-width: 759px) { .frame { aspect-ratio: 4 / 3; } }
  .news { margin-top: 0; }

  /* Newsletter */
  .news { background: var(--ink); color: var(--bone); padding: 140px 0; }
  .news .inner { max-width: 420px; margin:0 auto; }
  .news p { font-size: 18px; font-weight: 300; margin-bottom: 36px; }
  .news form { display: flex; align-items: flex-end; gap: 24px; border-bottom: 1px solid rgba(239, 237, 230, 0.4); }
  .news input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: 0;
    color: var(--bone);
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 300;
    padding: 10px 0;
  }
  .news input::placeholder { color: rgba(239, 237, 230, 0.45); }
  .news button {
    background: transparent;
    border: 0;
    color: var(--bone);
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 12px 0;
    cursor: pointer;
  }
  .news .msg { margin-top: 20px; min-height: 18px; color: rgba(239, 237, 230, 0.7); }
  @media (min-width: 760px) { .news { padding: 160px 0; } }

  /* Footer */
  .foot { padding: 56px 0 48px; border-top: 1px solid var(--rule); }
  .foot .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 40px; }
  .foot .mark { gap: 12px; }
  .foot .right { margin-left: auto; display: flex; gap: 32px; }

  /* v5 additions */
  .hero .brand { z-index:2; }
  .hero .cta { position:absolute; z-index:2; right:var(--gutter); bottom:40px; color:var(--bone); width:min(360px, calc(100% - 2*var(--gutter))); display:block; }
  @media (max-width: 759px) { .hero .cta { left:var(--gutter); right:auto; bottom:36px; } .hero .brand { top:24px; } }
  .hero .cta h2 { font-size:22px; font-weight:300; line-height:1.3; margin-bottom:22px; }
  .hero .cta form { display:flex; gap:20px; border-bottom:1px solid rgba(239,237,230,.5); }
  .hero .cta input { flex:1; min-width:0; background:transparent; border:0; outline:0; color:var(--bone); font-family:var(--sans); font-size:14px; font-weight:300; padding:10px 0; }
  .hero .cta input::placeholder { color: rgba(239,237,230,.5); }
  .hero .cta button { background:transparent; border:0; color:var(--bone); font-family:var(--sans); font-size:11px; letter-spacing:.18em; text-transform:uppercase; padding:12px 0; cursor:pointer; }
  .hero .cta .msg { margin-top:14px; min-height:16px; color:rgba(239,237,230,.75); }
  .nav .links a.access { color:inherit; }
  figcaption { display:none; }
    .statement .rule { margin-top:48px; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); display:flex; gap:28px; flex-wrap:wrap; }
  .news .handle { margin-top:26px; }
  .news .msg { min-height:18px; }
.gate { min-height: calc(100svh - 56px); display:flex; align-items:center; justify-content:center; padding: 0 var(--gutter); }
  .gate .inner { width: min(360px, 100%); }
  .gate .mark { justify-content:center; margin-bottom: 56px; }
  .gate form { display:flex; gap:20px; border-bottom:1px solid var(--rule); }
  .gate input { flex:1; min-width:0; background:transparent; border:0; outline:0; color:var(--fg); font-family:var(--sans); font-size:15px; font-weight:300; padding:10px 0; letter-spacing:.08em; }
  .gate input::placeholder { color: var(--muted); letter-spacing:0; }
  .gate button { background:transparent; border:0; color:var(--fg); font-family:var(--sans); font-size:11px; letter-spacing:.18em; text-transform:uppercase; padding:12px 0; cursor:pointer; }
  .gate .msg { margin-top:18px; min-height:16px; text-align:center; }
  .gate .sub { margin-top: 40px; text-align:center; }
  .gate .sub a { border-bottom: 1px solid var(--rule); }
  .gate p.line { text-align:center; font-size:18px; font-weight:300; margin-bottom: 40px; }

.note { font-size: 13px; font-weight: 300; line-height: 1.55; color: rgba(239,237,230,.78); margin-bottom: 18px; max-width: 340px; }
.hero .cta .note { text-shadow: 0 1px 12px rgba(20,20,18,.35); }

/* v6 film hero */
.nav { position: absolute; top:0; left:0; right:0; z-index:5; background: transparent; color: var(--bone); }
.hero { height: 100svh; min-height: 520px; background: var(--ink); }
.hero img, .hero video { object-position: 50% 50%; animation: none; transform: none; }
.hero .line { position:absolute; left:50%; bottom:64px; transform: translateX(-50%); color: var(--bone); opacity:0; transition: opacity 1.4s ease; letter-spacing:.22em; font-size:12px; white-space:nowrap; z-index:3; }
.hero .line.on { opacity: 1; }
.hero .replay { position:absolute; right: var(--gutter); bottom: 28px; background: transparent; border: 0; color: var(--bone); opacity: 0; transition: opacity .8s ease; cursor: pointer; z-index:3; font-family: var(--sans); }
.hero .replay.on { opacity: .55; }
.hero .replay:hover { opacity: 1; }
.access-block { background: var(--ink); color: var(--bone); padding: 112px var(--gutter) 128px; }
.access-block .inner { max-width: 420px; margin: 0 auto; }
.access-block .note { max-width: none; }
.access-block form { display:flex; gap:24px; border-bottom:1px solid rgba(239,237,230,.4); }
.access-block input { flex:1; min-width:0; background:transparent; border:0; outline:0; color:var(--bone); font-family:var(--sans); font-size:15px; font-weight:300; padding:10px 0; }
.access-block input::placeholder { color: rgba(239,237,230,.45); }
.access-block button { background:transparent; border:0; color:var(--bone); font-family:var(--sans); font-size:11px; letter-spacing:.18em; text-transform:uppercase; padding:12px 0; cursor:pointer; }
.access-block .msg { margin-top:20px; min-height:18px; color: rgba(239,237,230,.7); }
@media (min-width: 760px) { .access-block { padding: 140px var(--gutter) 160px; } }
.frames { padding: 0; }
figure { margin: 0 0 var(--fgap); }
.foot { border-top-color: rgba(239,237,230,.18); }
.access-block .drop { display:inline-block; margin-top: 44px; color: rgba(239,237,230,.55); border-bottom: 1px solid rgba(239,237,230,.25); padding-bottom: 3px; }
.access-block .drop:hover { color: var(--bone); }

/* v7: capture inside the film frame */
.hero .line { position: static; transform: none; opacity: 1; margin-bottom: 18px; color: rgba(239,237,230,.85); }
.hero .cta { position:absolute; z-index:3; left:var(--gutter); right:auto; bottom:44px; width:min(380px, calc(100% - 2*var(--gutter))); color:var(--bone); }
.hero .cta .note { color: rgba(239,237,230,.8); max-width: 360px; }
.hero::after { content:""; position:absolute; left:0; right:0; bottom:0; height:46%; background: linear-gradient(to top, rgba(20,20,18,.72), rgba(20,20,18,0)); pointer-events:none; z-index:2; }
@media (max-width: 759px) { .hero .cta { bottom: 40px; } }
.hero .topline { position:absolute; z-index:3; left:var(--gutter); top:56px; color: rgba(239,237,230,.85); letter-spacing:.22em; font-size:11px; }
@media (min-width: 760px) { .hero .topline { top:60px; } }
/* v8: nav legibility + phone */
.hero::before { content:""; position:absolute; left:0; right:0; top:0; height:180px; background: linear-gradient(to bottom, rgba(20,20,18,.62), rgba(20,20,18,0)); pointer-events:none; z-index:2; }
.nav { z-index:6; }
.nav .wrap { height: 64px; }
.hero .topline { top:64px; }
@media (min-width: 760px) { .hero .topline { top:68px; } }
@media (max-width: 759px) { .hero .cta { bottom: 32px; } .hero .cta .note { font-size:12.5px; } }

/* v9: balance */
.hero .topline, .hero .replay { display:none; }
.nav .wrap { height: 64px; }
.nav .links a { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.hero .cta { bottom: 48px; width: min(400px, calc(100% - 2*var(--gutter))); }
.hero .cta .status { color: var(--bone); letter-spacing: .24em; font-size: 11px; margin-bottom: 14px; opacity: .95; }
.hero .cta .note { font-size: 14px; line-height: 1.5; color: rgba(239,237,230,.72); margin-bottom: 22px; max-width: 360px; }
.hero .cta form { gap: 24px; border-bottom-color: rgba(239,237,230,.42); }
.hero .cta .msg { margin-top: 12px; }
.hero::after { height: 52%; background: linear-gradient(to top, rgba(20,20,18,.82) 0%, rgba(20,20,18,.35) 55%, rgba(20,20,18,0) 100%); }
@media (max-width: 759px) {
  .hero .cta { bottom: 36px; }
  .hero .cta .note { font-size: 13px; max-width: 330px; margin-bottom: 18px; }
  .hero .cta .status { font-size: 10px; letter-spacing: .22em; }
}
.foot .wrap { gap: 20px 40px; }