/* LookKeep landing, prototype 23 Oct 2026. A contact sheet on a light table: black film, amber edge numbers,
   a yellow grease-pencil circle for the keeper. One typeface (Archivo), its width axis doing the work. */
@font-face{font-family:Archivo;src:url("fonts/archivo.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
:root{
  --table:#ECEEEA;      /* light table, a cool white */
  --table-glow:#F7F8F5;
  --film:#000;          /* film rebate */
  --edge:#D38B3F;       /* amber edge numbers printed on the film */
  --marker:#F2C230;     /* grease pencil */
  --ink:#1D1F1C;        /* text on the table */
  --graphite:#5D615B;   /* quieter text */
  --rule:#CDD1CA;
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --expo:cubic-bezier(.16,1,.3,1);
  --gutter:clamp(16px,4vw,56px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--table) radial-gradient(120% 70% at 70% 0%,var(--table-glow),transparent 70%) no-repeat;color:var(--ink);
  font:400 17px/1.55 Archivo,system-ui,sans-serif;font-variation-settings:"wdth" 100}
img{display:block;max-width:100%}
a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

/* Bar */
.bar{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:14px var(--gutter);
  background:color-mix(in srgb,var(--table) 88%,transparent);backdrop-filter:blur(8px)}
.mark{font-weight:800;font-variation-settings:"wdth" 118;font-size:20px;letter-spacing:-.01em;text-decoration:none}
.bar-join{font-weight:600;font-size:15px;text-decoration:none;padding:9px 16px;border-radius:999px;background:var(--ink);color:var(--table)}

/* Type */
h1,h2{margin:0;font-weight:850;font-variation-settings:"wdth" 116;letter-spacing:-.025em;line-height:.95}
h1{font-size:clamp(44px,6vw,88px)}
h1 .line{display:block}
h2{font-size:clamp(30px,3.6vw,52px);line-height:1.02}
p{margin:0}

/* Hero */
.hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,64px);align-items:start;
  padding:clamp(20px,3.5vw,48px) var(--gutter) clamp(40px,6vw,96px)}
.lede{max-width:36ch;margin-top:20px;font-size:clamp(17px,1.35vw,20px);color:var(--graphite)}
.brief{margin-top:28px;padding-left:16px;border-left:3px solid var(--marker);min-height:7.2em}
.brief-who{font-size:14px;color:var(--graphite)}
.brief-words{margin-top:6px;font-size:clamp(19px,1.6vw,23px);line-height:1.35;font-weight:500;max-width:30ch}
.brief-words span{display:inline-block;opacity:0;transform:translateY(.45em);transition:opacity 260ms var(--ease-out),transform 420ms var(--expo)}
.brief-words span.on{opacity:1;transform:none}

.join-form{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px;max-width:460px}
.join-form input{flex:1 1 220px;min-width:0;font:inherit;font-size:17px;padding:14px 16px;border:1.5px solid var(--ink);border-radius:10px;background:#fff;color:var(--ink)}
.join-form input[aria-invalid="true"]{border-color:#B3261E}
.join-form button{font:inherit;font-weight:700;font-size:17px;padding:14px 22px;border:0;border-radius:10px;background:var(--ink);color:var(--table);cursor:pointer}
.join-form button:hover{background:#000}
.join-form button:disabled{opacity:.6;cursor:default}
.form-note{flex-basis:100%;min-height:1.4em;font-size:15px;color:var(--graphite)}
.form-note.err{color:#B3261E}
.join-form.done input,.join-form.done button{display:none}
.join-form.done .form-note{font-size:18px;color:var(--ink)}

/* The stage: one strip of film, four frames. */
.stage{position:relative}
.sheet-film{position:relative;display:grid;grid-template-columns:1.88fr 1fr;grid-template-rows:1fr 1fr;gap:10px;padding:34px 14px;background:var(--film);border-radius:3px;
  box-shadow:0 30px 60px -30px rgba(29,31,28,.45)}
/* Sprocket holes along both edges of the film. */
.sheet-film::before,.sheet-film::after{content:"";position:absolute;left:10px;right:10px;height:9px;
  background:repeating-linear-gradient(90deg,#E9EBE6 0 9px,transparent 9px 22px);border-radius:2px;opacity:.9;
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 9px,transparent 9px 22px);mask:repeating-linear-gradient(90deg,#000 0 9px,transparent 9px 22px)}
.sheet-film::before{top:6px}.sheet-film::after{bottom:6px}
.frame{position:relative;margin:0;min-height:0;background:#1a1a1a}
.frame.is-sheet{grid-row:1/span 2;aspect-ratio:1920/2720}
.frame img{width:100%;height:100%;object-fit:cover}
.frame.is-sheet img{object-fit:contain;background:#fff}
.frame:not(.is-sheet) figcaption{display:none}
.frame figcaption{position:absolute;left:0;right:0;bottom:-21px;font-size:11px;font-variation-settings:"wdth" 75;font-weight:600;color:var(--edge);letter-spacing:.02em}
/* Develop: empty print, then blur, then sharp. */
.frame img{opacity:0;filter:blur(16px) brightness(1.5) contrast(.7)}
.frame.dev img{opacity:1;filter:none;transition:opacity 500ms var(--ease-out),filter 2200ms var(--expo)}
.frame.out img{opacity:0;filter:none;transition:opacity 260ms var(--ease-out)} /* fade out sharp; no blur flash */
/* The keeper circle, drawn once per cast. */
.keeper{position:absolute;width:var(--kw,20%);height:auto;left:var(--kx,60%);top:12px;overflow:visible;pointer-events:none}
.keeper path{fill:none;stroke:var(--marker);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:.95}
.keeper.draw path{stroke-dashoffset:0;transition:stroke-dashoffset 700ms var(--expo)}
.keeper.out path{opacity:0;transition:opacity 260ms}

.cast-pick{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;margin-top:22px;font-size:15px;color:var(--graphite)}
.cast-pick button{font:inherit;font-weight:600;color:var(--ink);background:none;border:0;padding:4px 0;cursor:pointer;
  text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:3px;text-underline-offset:5px}
.cast-pick button[aria-pressed="true"]{text-decoration-color:var(--marker)}
.cast-pick button:hover{text-decoration-color:var(--rule)}

/* Contact sheet */
.contact{padding:clamp(56px,8vw,120px) var(--gutter) clamp(40px,6vw,80px)}
.contact-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px;align-items:end;margin-bottom:clamp(28px,4vw,48px)}
.contact-head h2{max-width:18ch}
.contact-head p{color:var(--graphite);max-width:40ch}
/* Strips lie side by side where they fit, like cut strips on a light table. */
.strips{display:flex;flex-wrap:wrap;gap:18px;min-width:0}
.strip{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:var(--cell);gap:16px;padding:34px 14px;width:max-content;max-width:100%;background:var(--film);border-radius:3px;
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;--cell:clamp(150px,13.5vw,236px)}
.strip::-webkit-scrollbar{display:none}
.strip::before,.strip::after{content:"";position:absolute;left:10px;width:calc(var(--n)*(var(--cell) + 16px) + 8px);height:7px;
  background:repeating-linear-gradient(90deg,#E9EBE6 0 8px,transparent 8px 20px);opacity:.85}
.strip::before{top:5px}.strip::after{bottom:5px}
.strip figure{position:relative;margin:0;aspect-ratio:3/4;scroll-snap-align:start;background:#111}
.strip figure img{width:100%;height:100%;object-fit:cover}
.strip figure.is-sheet img{object-fit:contain;background:#fff}
.strip figcaption{position:absolute;left:0;bottom:-21px;font-size:11px;font-variation-settings:"wdth" 75;font-weight:600;color:var(--edge);white-space:nowrap}
.strip .name{position:absolute;left:14px;top:15px;font-size:12px;font-variation-settings:"wdth" 75;font-weight:700;color:var(--edge)}
.strip figure svg{position:absolute;left:-6%;top:-4%;width:112%;height:108%;overflow:visible;pointer-events:none}
.strip svg path{fill:none;stroke:var(--marker);stroke-width:2;stroke-linecap:round}

/* How */
.how{padding:clamp(40px,6vw,96px) var(--gutter)}
.how ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,64px);counter-reset:step}
.how li{counter-increment:step;font-size:clamp(17px,1.3vw,19px);color:var(--graphite);padding-top:18px;border-top:1.5px solid var(--ink)}
.how li::before{content:counter(step);display:block;font-weight:850;font-variation-settings:"wdth" 116;font-size:15px;color:var(--ink);margin-bottom:8px}
.how strong{display:block;font-weight:800;font-variation-settings:"wdth" 112;font-size:clamp(24px,2.2vw,32px);line-height:1.05;letter-spacing:-.015em;color:var(--ink);margin-bottom:10px}

/* Terms */
.terms{padding:clamp(40px,6vw,96px) var(--gutter)}
.terms p{margin-top:12px;max-width:44ch;color:var(--graphite);font-size:clamp(17px,1.3vw,19px)}

/* Join */
.join{margin:clamp(24px,4vw,56px) var(--gutter) clamp(48px,6vw,88px);padding:clamp(36px,6vw,84px) clamp(20px,5vw,72px);background:var(--film);color:#EEF0EC;border-radius:4px}
.join h2{max-width:16ch}
.join{position:relative}
/* Two rows of three on the black film: the cast so far, and an empty frame for theirs. */
.join-strip{position:absolute;right:clamp(20px,5vw,72px);top:50%;transform:translateY(-50%);display:grid;grid-template-columns:repeat(3,clamp(84px,8.4vw,124px));gap:10px}
.join-strip figure{margin:0;aspect-ratio:3/4;background:#151515;overflow:hidden}
.join-strip img{width:100%;height:100%;object-fit:cover;display:block;opacity:.92}
.join-strip .yours{display:flex;align-items:flex-end;padding:8px;border:1px dashed #4a4d48;background:transparent}
.join-strip .yours span{font-size:12px;font-weight:600;font-variation-settings:"wdth" 75;color:var(--edge)}
.join > p{margin-top:16px;max-width:42ch;color:#B9BDB6}
.join .join-form input{background:#fff;border-color:#fff}
.join .join-form button{background:var(--marker);color:#000}
.join .join-form button:hover{background:#FFD443}
.join .form-note{color:#B9BDB6}
.join .join-form.done .form-note{color:#EEF0EC}
.join .privacy{margin-top:18px;max-width:52ch;font-size:13.5px;line-height:1.5;color:#9DA19A}
.join .privacy a{color:#EEF0EC}

.foot{display:flex;justify-content:space-between;gap:16px;padding:0 var(--gutter) 36px;font-size:14px;color:var(--graphite)}

/* Phone */
@media (max-width:1100px){
  .join-strip{position:static;transform:none;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin-bottom:28px;max-width:520px}
}
@media (max-width:860px){
  .hero{grid-template-columns:1fr;gap:0}
  /* Phone: the film comes straight after the intro, so the first screen shows the product. */
  .hero-copy{display:contents}
  .hero h1{order:1}.lede{order:2}.stage{order:3;margin-top:24px}.brief{order:4;min-height:8.4em}.hero .join-form{order:5}
  .sheet-film{gap:6px;padding:30px 8px;margin:0 calc(var(--gutter) * -1);border-radius:0}
  .frame figcaption{font-size:10px}
  .contact-head{grid-template-columns:1fr}
  .how ol{grid-template-columns:1fr}
  .strip{--cell:40vw;gap:12px}
  .strip::before,.strip::after{width:calc(var(--n)*(var(--cell) + 12px) + 8px)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .frame img,.frame.dev img{filter:none;transform:none;transition:opacity 200ms linear}
  .brief-words span{transform:none;transition:opacity 200ms linear}
  .keeper.draw path{transition:none}
}