/* ===== Tokens (from the Photo Capsule style book) ===== */
:root{
  --ink-1:#12100E;--ink-2:#1D1916;--ink-3:#2B2521;--ink-4:#4A403A;--ink-5:#6E625A;
  --paper-1:#FBF7EF;--paper-2:#F4EDE0;--paper-3:#E8DECB;--paper-4:#D6C8B0;
  --amber-1:#FCE9C4;--amber-2:#F5C463;--amber-3:#E8A33D;--amber-4:#B87A26;
  --datestamp-1:#FBD9CC;--datestamp-2:#E2643C;--datestamp-3:#C9421F;--datestamp-4:#8E2B12;
  --lagoon-1:#CFE3DF;--lagoon-2:#3E8A83;--lagoon-3:#1F6F6B;--lagoon-4:#124745;
  --faded-sky-1:#DCE8F0;--faded-sky-2:#9FBED4;--faded-sky-3:#6E96B4;

  --surface-page:var(--paper-1);--surface-card:#fff;--surface-sunk:var(--paper-2);
  --surface-inverse:var(--ink-1);--surface-inverse-2:var(--ink-2);--surface-accent:var(--amber-1);
  --surface-glass:rgba(18,16,14,.55);
  --text-body:var(--ink-2);--text-heading:var(--ink-1);--text-muted:var(--ink-5);
  --text-on-inverse:var(--paper-1);--text-on-inverse-muted:#A79C90;--text-link:var(--lagoon-3);--text-stamp:var(--datestamp-3);
  --line-1:var(--paper-3);--line-2:var(--paper-4);--line-inverse:rgba(251,247,239,.16);--focus-ring:var(--lagoon-3);

  --grain-opacity:.055;
  --vignette:radial-gradient(120% 90% at 50% 45%,transparent 45%,rgba(18,16,14,.38) 100%);
  --emulsion-wash:linear-gradient(160deg,rgba(232,163,61,.16),rgba(31,111,107,.14));

  --font-display:"Instrument Serif",ui-serif,Georgia,serif;
  --font-sans:"Space Grotesk","Helvetica Neue",Helvetica,sans-serif;
  --font-mono:"DM Mono",ui-monospace,Menlo,monospace;

  --size-display-1:76px;--size-display-2:56px;--size-display-3:40px;--size-title-2:24px;
  --size-body-lg:18px;--size-body:16px;--size-body-sm:14px;--size-micro:11px;
  --tracking-stamp:.14em;

  --space-1:4px;--space-3:8px;--space-4:12px;--space-5:16px;--space-6:20px;--space-7:24px;
  --space-8:32px;--space-9:40px;--space-10:56px;--space-11:72px;--space-12:96px;
  --gutter-web:40px;--page-max:1200px;--grid-photo-gap:6px;

  --radius-1:4px;--radius-2:8px;--radius-3:14px;--radius-4:22px;--radius-pill:999px;
  --shadow-1:0 1px 2px rgba(45,34,24,.08);
  --shadow-2:0 2px 8px rgba(45,34,24,.10),0 1px 2px rgba(45,34,24,.06);
  --shadow-3:0 10px 28px rgba(45,34,24,.14),0 2px 6px rgba(45,34,24,.08);
  --inner-emulsion:inset 0 0 0 1px rgba(18,16,14,.06),inset 0 1px 0 rgba(255,255,255,.7);
  --inner-well:inset 0 1px 3px rgba(45,34,24,.14);
  --glow-focus:0 0 0 3px rgba(31,111,107,.34);

  --dur-shutter:90ms;--dur-1:120ms;--dur-2:220ms;
  --ease-standard:cubic-bezier(.2,.6,.2,1);--ease-shutter:cubic-bezier(.6,0,.2,1);
}

/* ===== Base ===== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--surface-page);color:var(--text-body);font:400 var(--size-body)/1.55 var(--font-sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{margin:0;color:var(--text-heading);font-family:var(--font-sans);line-height:1.16}
p{margin:0}
a{color:var(--text-link);text-decoration:none;transition:color var(--dur-1) var(--ease-standard)}
::selection{background:var(--amber-2);color:var(--ink-1)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.wrap{max-width:var(--page-max);margin:0 auto;padding:0 var(--gutter-web)}
.eyebrow{font-family:var(--font-mono);font-size:var(--size-micro);letter-spacing:var(--tracking-stamp);text-transform:uppercase;color:var(--text-muted)}
.display{font-family:var(--font-display);font-weight:400;letter-spacing:-.02em;line-height:.98}
.display em{font-style:italic}
.grain{position:relative}
.grain::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:var(--grain-opacity);mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>")}
[data-lucide]{width:1em;height:1em;stroke-width:1.75}

/* ===== Buttons / badges / tags ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 24px;border-radius:var(--radius-pill);
  font:500 var(--size-body-lg)/1 var(--font-sans);cursor:pointer;border:1px solid transparent;
  transition:transform var(--dur-shutter) var(--ease-shutter),filter var(--dur-1) var(--ease-standard),box-shadow var(--dur-1) var(--ease-standard)}
.btn:hover{transform:translateY(-1px);filter:brightness(.96);box-shadow:var(--shadow-3)}
.btn:active{transform:scale(.975)}
.btn svg{width:18px;height:18px}
.btn.primary{background:var(--amber-3);color:var(--ink-1);border-color:var(--amber-4);box-shadow:var(--shadow-2)}
.btn.inverse{background:var(--paper-1);color:var(--ink-1);box-shadow:var(--shadow-3)}
.btn.ghost{background:transparent;color:var(--paper-1);box-shadow:none}
.btn.ghost:hover{background:rgba(251,247,239,.1);box-shadow:none}
.btn.sm{height:34px;padding:0 14px;font-size:var(--size-body-sm)}
.btn.sm svg{width:16px;height:16px}
.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:var(--radius-1);font:400 var(--size-micro)/1 var(--font-mono);letter-spacing:var(--tracking-stamp);text-transform:uppercase;white-space:nowrap}
.badge.glass{background:var(--surface-glass);color:var(--paper-1);backdrop-filter:blur(10px)}
.badge svg{width:12px;height:12px}
.tag{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:var(--radius-pill);font-size:var(--size-body-sm);background:var(--surface-card);color:var(--text-body);border:1px solid var(--line-2)}
.tag svg{width:14px;height:14px}

/* ===== Nav ===== */
.nav{position:sticky;top:0;z-index:30;background:var(--surface-glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line-inverse)}
.nav .wrap{display:flex;align-items:center;gap:var(--space-8);height:72px}
.wordmark{font-family:var(--font-display);font-size:26px;line-height:1;color:var(--paper-1)}
.wordmark em{color:var(--amber-3)}
.nav nav{display:flex;gap:var(--space-7);flex:1}
.nav nav a,.nav .signin{font:400 var(--size-micro)/1 var(--font-mono);letter-spacing:var(--tracking-stamp);text-transform:uppercase;color:var(--text-on-inverse-muted)}
.nav nav a:hover,.nav .signin:hover{color:var(--paper-1)}

/* ===== Hero ===== */
.hero{background:var(--surface-inverse);overflow:hidden}
.hero .layer{position:absolute;inset:0;pointer-events:none}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:var(--space-11);align-items:center;padding-top:var(--space-12);padding-bottom:var(--space-12)}
.hero h1{font-size:clamp(46px,7vw,var(--size-display-1));color:var(--paper-1);margin:var(--space-5) 0}
.hero h1 em{color:var(--amber-2)}
.hero .lead{font-size:var(--size-body-lg);color:var(--paper-1);opacity:.88;max-width:44ch}
.cta-row{display:flex;align-items:center;gap:var(--space-5);margin-top:var(--space-8);flex-wrap:wrap}
.meta-row{display:flex;align-items:center;gap:var(--space-5);margin-top:var(--space-8)}
.meta-row .eyebrow{color:var(--text-on-inverse-muted)}
.chips{display:flex}
.chips span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:2px solid var(--ink-1);font:400 10.5px/1 var(--font-mono);color:var(--ink-1);margin-left:-8px}
.chips span:first-child{margin-left:0}
.chips span:nth-child(1){background:var(--amber-3)}.chips span:nth-child(2){background:var(--lagoon-3);color:var(--paper-1)}.chips span:nth-child(3){background:var(--datestamp-2)}.chips span:nth-child(4){background:var(--faded-sky-3)}
.stack{display:grid;gap:var(--space-5)}
.sealed-card{border-radius:var(--radius-4);padding:var(--space-7);background:rgba(251,247,239,.06);border:1px solid var(--line-inverse);backdrop-filter:blur(6px)}
.sealed-card .eyebrow{color:var(--text-on-inverse-muted)}
.countdown{font-family:var(--font-mono);color:var(--paper-1);margin-top:var(--space-5)}
.countdown .lbl{font-size:var(--size-micro);letter-spacing:var(--tracking-stamp);text-transform:uppercase;color:var(--amber-2);margin-bottom:6px}
.countdown .row{display:flex;align-items:baseline;gap:16px}
.countdown .cell{display:flex;align-items:baseline;gap:16px}
.countdown .num{font-size:44px;line-height:1;font-variant-numeric:tabular-nums}
.countdown .u{font-size:10px;letter-spacing:var(--tracking-stamp);text-transform:uppercase;color:var(--text-on-inverse-muted);margin-top:5px}
.countdown .sep{font-size:31px;line-height:1;color:var(--text-on-inverse-muted)}

/* film strip */
.strip{background:var(--ink-2);border-radius:var(--radius-2);padding:14px 10px;position:relative;overflow:hidden}
.strip::before,.strip::after{content:"";position:absolute;left:0;right:0;height:8px;background:repeating-linear-gradient(90deg,transparent 0 9px,var(--paper-2) 9px 17px);opacity:.9}
.strip::before{top:5px}.strip::after{bottom:5px}
.strip .frames{display:flex;gap:4px;overflow:hidden}
.strip .frames .tile{height:92px;width:123px;flex:none;border-radius:2px}
.strip .cap{margin-top:8px;font:400 10px/1.4 var(--font-mono);letter-spacing:var(--tracking-stamp);text-transform:uppercase;color:var(--text-on-inverse-muted)}

/* photo tile placeholder (latent emulsion) */
.tile{position:relative;overflow:hidden;border-radius:var(--radius-1);box-shadow:var(--inner-emulsion);aspect-ratio:1/1}
.tile::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:var(--grain-opacity);mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>")}
.w0{background:linear-gradient(150deg,var(--paper-3),var(--paper-4))}
.w1{background:linear-gradient(150deg,var(--lagoon-1),var(--faded-sky-2))}
.w2{background:linear-gradient(150deg,var(--amber-1),var(--amber-2))}
.w3{background:linear-gradient(150deg,var(--datestamp-1),var(--amber-2))}
.w4{background:linear-gradient(150deg,var(--faded-sky-1),var(--lagoon-2))}
.tile.locked{filter:grayscale(.5) brightness(.8)}
.tile .lock{position:absolute;inset:0;display:grid;place-items:center;background:rgba(18,16,14,.28);color:var(--paper-1);z-index:1}
.tile .lock svg{width:18px;height:18px}
.tile .stamp{position:absolute;right:6px;bottom:5px;z-index:1;font:400 10px/1 var(--font-mono);letter-spacing:.08em;color:var(--datestamp-2);text-shadow:0 0 6px rgba(18,16,14,.5)}
.r34{aspect-ratio:3/4}

/* ===== Sections ===== */
.sec{padding:var(--space-12) 0}
.sec.sunk{background:var(--surface-sunk);border-top:1px solid var(--line-1);border-bottom:1px solid var(--line-1);padding:var(--space-11) 0}
.sec h2{font-size:var(--size-display-3);margin:var(--space-4) 0 var(--space-9);max-width:24ch}
.sec h2 em{color:var(--amber-4)}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6)}
.card{background:var(--surface-card);border:1px solid var(--line-1);border-radius:var(--radius-3);padding:var(--space-7);box-shadow:var(--shadow-1);transition:transform var(--dur-2) var(--ease-standard),box-shadow var(--dur-2) var(--ease-standard)}
.card.lift:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.card .top{display:flex;align-items:center;justify-content:space-between}
.ico{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--surface-accent);color:var(--ink-1)}
.ico svg{width:20px;height:20px}
.card .n{font:400 34px/1 var(--font-mono);color:var(--paper-4)}
.card h3{font-family:var(--font-display);font-weight:400;font-size:var(--size-title-2);margin:var(--space-5) 0 var(--space-3)}
.card p{color:var(--text-body)}

.split{display:grid;grid-template-columns:.95fr 1.05fr;gap:var(--space-10);align-items:center}
.split h2{margin-bottom:var(--space-5)}
.points{display:grid;gap:var(--space-6);margin-top:var(--space-8)}
.point{display:flex;gap:var(--space-5)}
.point .ico{flex:none;width:40px;height:40px}
.point b{display:block;font-weight:500;color:var(--text-heading)}
.point span{color:var(--text-body);font-size:var(--size-body-sm);display:block}
.ticket{background:var(--surface-card);border:1px dashed var(--line-2);border-radius:var(--radius-3);padding:var(--space-3) var(--space-7)}
.trow{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:var(--space-4);padding:16px 0;border-bottom:1px solid var(--line-1);align-items:center;font-size:var(--size-body-sm)}
.trow:last-child{border:0}
.trow.h{font:400 var(--size-micro)/1 var(--font-mono);letter-spacing:var(--tracking-stamp);text-transform:uppercase;color:var(--text-muted)}
.trow .y{display:flex;align-items:center;gap:6px;color:var(--lagoon-3);font-weight:500}
.trow .y svg{width:16px;height:16px}
.trow .x{color:var(--ink-5);display:flex;align-items:center;gap:6px}
.trow .x svg{width:16px;height:16px}

.travel{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--space-10);align-items:center}
.travel h2{margin-bottom:var(--space-5)}
.travel p.t{max-width:42ch}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--space-7)}
.sheet{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--grid-photo-gap)}

.uses{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-5)}
.uses .card{padding:var(--space-6)}
.uses h3{font-size:22px;margin:var(--space-5) 0 var(--space-3)}
.uses p{font-size:var(--size-body-sm)}
.uses .eyebrow{color:var(--text-stamp);margin-top:var(--space-5)}

.faq{max-width:760px}
details{border-bottom:1px solid var(--line-2);padding:20px 0}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center;font-weight:500;font-size:var(--size-body-lg);color:var(--text-heading)}
summary::-webkit-details-marker{display:none}
summary svg{flex:none;width:18px;height:18px;color:var(--amber-4);transition:transform var(--dur-2) var(--ease-standard)}
details[open] summary svg{transform:rotate(45deg)}
details p{margin-top:12px;max-width:62ch}

/* CTA */
.cta{position:relative;overflow:hidden;background:linear-gradient(150deg,var(--amber-3),var(--datestamp-3));padding:var(--space-12) 0}
.cta .wrap{position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-9)}
.cta h2{font-size:clamp(40px,5vw,var(--size-display-2));color:var(--ink-1);max-width:20ch;margin:0}
.cta p.sub{color:var(--ink-2);margin-top:var(--space-5);max-width:40ch}
.cta form{display:grid;gap:10px;min-width:340px}
.field label{display:block;font:400 var(--size-micro)/1 var(--font-mono);letter-spacing:var(--tracking-stamp);text-transform:uppercase;color:var(--ink-1);margin-bottom:8px}
.field .in{display:flex;align-items:center;gap:10px;height:48px;padding:0 14px;background:var(--surface-card);border:1px solid var(--line-2);border-radius:var(--radius-2);box-shadow:var(--inner-well);color:var(--ink-5)}
.field .in:focus-within{border-color:var(--lagoon-3);box-shadow:var(--inner-well),var(--glow-focus)}
.field .in svg{width:18px;height:18px;flex:none}
.field input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:400 var(--size-body)/1 var(--font-sans);color:var(--text-heading)}
.done{display:none;font-weight:500;color:var(--ink-1);background:rgba(251,247,239,.55);border-radius:var(--radius-2);padding:14px 16px}

footer{background:var(--surface-inverse);color:var(--text-on-inverse);padding:var(--space-10) 0 var(--space-8)}
footer .grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:var(--space-8)}
footer p.about{color:var(--text-on-inverse-muted);font-size:var(--size-body-sm);margin-top:var(--space-5);max-width:30ch}
footer .eyebrow.h{color:var(--amber-2)}
footer .links{display:grid;gap:9px;margin-top:var(--space-5)}
footer .links a{color:var(--text-on-inverse);opacity:.8;font-size:var(--size-body-sm)}
footer .links a:hover{opacity:1}
footer .base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:var(--space-9);padding-top:var(--space-5);border-top:1px solid var(--line-inverse)}
footer .base .eyebrow{color:var(--text-on-inverse-muted)}

/* ===== Responsive ===== */
@media(max-width:960px){
  :root{--gutter-web:24px}
  .hero .wrap,.split,.travel{grid-template-columns:1fr;gap:var(--space-9)}
  .steps{grid-template-columns:1fr}
  .uses{grid-template-columns:1fr 1fr}
  .nav nav,.nav .signin{display:none}
  .nav .wrap{justify-content:space-between}
  .cta .wrap{flex-direction:column;align-items:stretch}
  .cta form{min-width:0}
  footer .grid{grid-template-columns:1fr 1fr}
  .sec{padding:var(--space-11) 0}
}
@media(max-width:560px){
  .uses{grid-template-columns:1fr}
  .countdown .num{font-size:30px}
  .countdown .row,.countdown .cell{gap:10px}
  .countdown .sep{font-size:21px}
  .sealed-card{padding:var(--space-5)}
  .trow{grid-template-columns:1.3fr .9fr .9fr;font-size:13px}
  .sheet{grid-template-columns:repeat(3,1fr)}
  .sheet .tile:nth-child(n+7){display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}