/* FURRELL — v2
   Black, Fraunces, and nothing else on the screen. The register is Apple's
   discipline; the voice is not. Apple is clinical and sans-serif and sells
   objects. This is warm-black, set in a serif with real character, and sells
   judgement — so the type carries the whole thing and ornament is banned. */
:root{
  --bg:#000; --raise:#09090A;
  --ink:#F4F2EE; --dim:#8B8880; --faint:#5E5C57;
  --acc:#DCCFB2; --acc-dim:#9C9280;
  --rule:rgba(244,242,238,.10);
  --ser:'Fraunces',Georgia,serif; --ui:'Inter',system-ui,sans-serif; --mono:'DM Mono',monospace;
}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:auto}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--ui);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;font-size:17px;line-height:1.55}
a{color:inherit}

/* ---------- the bar ---------- */
.bar{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;
  justify-content:space-between;gap:16px;padding:18px clamp(20px,4vw,52px);
  /* Solid for its own height, then a short fade. At 72% the page text showed
     straight through the wordmark on a phone, which read as a glitch. */
  background:linear-gradient(#000 0,#000 64%,rgba(0,0,0,.88) 82%,transparent 100%);
  backdrop-filter:blur(7px);pointer-events:none}
.here{font-family:var(--mono);font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--dim);border-left:1px solid var(--rule);padding-left:14px;margin-left:2px}
.bar a{pointer-events:auto;text-decoration:none}
.mark{display:flex;align-items:center;gap:11px;font-family:var(--ser);font-weight:400;
  font-size:19px;letter-spacing:-.01em}
.mark svg{width:24px;height:24px;display:block}
.barlinks{display:flex;gap:clamp(14px,2.4vw,30px);font-family:var(--mono);font-size:11.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.barlinks a{transition:color .25s}
.barlinks a:hover{color:var(--acc)}
.rail{position:fixed;left:0;top:0;height:2px;width:0;background:var(--acc);z-index:70}

/* ---------- a statement owns a screen ---------- */
.say{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:120px clamp(20px,5vw,40px);gap:clamp(16px,2.4vh,30px)}
.say.left{align-items:flex-start;text-align:left;padding-left:clamp(20px,8vw,120px)}
.kick{font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--acc);margin:0}
.say h1,.say h2{font-family:var(--ser);font-weight:300;letter-spacing:-.034em;line-height:.99;
  margin:0;font-size:clamp(46px,8.6vw,132px);max-width:15ch}
.say h2{font-size:clamp(40px,7.2vw,106px)}
.say .lede{font-size:clamp(17px,1.45vw,21px);color:var(--dim);max-width:48ch;margin:0;line-height:1.5}
.say h1 em,.say h2 em{font-style:normal;color:var(--faint)}

/* words rise as the statement is reached */
.word{display:inline-block;opacity:0;transform:translateY(.42em);
  transition:opacity .9s cubic-bezier(.2,.7,.3,1),transform .9s cubic-bezier(.2,.7,.3,1)}
.in .word{opacity:1;transform:none}
.fade{opacity:0;transform:translateY(14px);transition:opacity .9s .25s,transform .9s .25s}
.in .fade{opacity:1;transform:none}

/* ---------- the product takes the screen ---------- */
.stage{position:relative}
.pin{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:clamp(14px,2.6vh,34px);padding:92px 14px 44px;overflow:hidden}
.beat{font-family:var(--ser);font-weight:300;letter-spacing:-.026em;line-height:1.08;margin:0;
  font-size:clamp(22px,3.4vw,48px);text-align:center;max-width:19ch;
  min-height:2.16em;display:flex;align-items:center;justify-content:center;
  transition:opacity .45s}
.screen{position:relative;
  /* 16:9, but never taller than the room left after the bar, the headline and
     the padding — otherwise the pin overflows and the frame cuts the words. */
  width:min(1380px, 95vw, (100svh - 300px) * 16 / 9)}
/* No container. The reels float on the black; only the objects inside them —
   a phone, a browser window, a card — are allowed a surface. */
/* The reels were framed 16:9 because that is the stage's shape, not the
   content's. Measured across every scene, the furthest anything reaches is
   y 52 and y 698 — so 74px of the 720 is margin that was never going to carry
   anything. Cropping to that band is a 2:1 frame and gains the loosest scenes
   about eleven points of fill, with nothing clipped. */
.screen .r-frame,.screen .b-frame,.screen .p-frame,.screen .d-frame{aspect-ratio:1280/646}
.screen .r-frame,.screen .b-frame,.screen .p-frame,.screen .d-frame{
  border-radius:0;background:transparent;box-shadow:none}   /* clipping stays:
  Dibs runs a 5,920px track inside its frame and must not spill onto the page */
.screen .b-sky,.screen .p-room,.screen .p-room:after{background:none;display:none}
.screen .d-frame{background:none}
/* The stage element itself carries a surface in every reel — that is the
   rectangle that survived killing the frame and the window. */
.screen .r-stage,.screen .b-stage,.screen .p-stage,.screen .d-stage{
  background:none!important;box-shadow:none}
/* Onsite's app window was the last rectangle on the page. The window itself
   goes; what is left is the interface floating on the black — the rail, the
   grid, the chips — which is the thing worth looking at anyway. */
.screen .r-win{background:transparent;box-shadow:none}
.screen .r-pane{background:transparent}
.screen .r-rail{background:transparent;border-right:0;padding-right:26px}
.screen .r-toolbar{background:transparent;border-bottom-color:var(--rule)}
.screen .r-newtab,.screen .r-newtab .r-g{background:transparent}
.screen .r-phone{box-shadow:0 40px 90px -46px #000}

/* ---------- specs: the credibility beat ---------- */
.specs{padding:clamp(80px,14vh,170px) clamp(20px,8vw,120px);max-width:1280px;margin:0 auto}
.specs h3{font-family:var(--ser);font-weight:300;font-size:clamp(28px,3.6vw,52px);letter-spacing:-.025em;
  line-height:1.1;margin:0 0 clamp(36px,6vh,70px);max-width:20ch}
.grid{display:grid;gap:0;border-top:1px solid var(--rule);
  grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
.cell{padding:clamp(24px,3.4vw,38px) clamp(20px,2.6vw,30px);
  border-bottom:1px solid var(--rule);border-right:1px solid var(--rule)}
.cell:last-child{border-right:0}
.cell b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--acc);margin-bottom:13px}
.cell p{margin:0;font-size:15.5px;line-height:1.62;color:var(--dim)}
.cell .big{font-family:var(--ser);font-weight:300;font-size:clamp(34px,4.4vw,56px);
  color:var(--ink);letter-spacing:-.02em;line-height:1;margin-bottom:10px;display:block}

/* ---------- close ---------- */
.close{min-height:88svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:28px;padding:80px 24px}
.pill{font-family:var(--ui);font-size:16.5px;background:var(--acc);color:#101010;
  padding:15px 34px;border-radius:999px;text-decoration:none;transition:transform .25s}
.pill:hover{transform:translateY(-2px)}
.ghost{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:4px}
.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:30px clamp(20px,5vw,52px);border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:11px;letter-spacing:.07em;color:var(--faint)}

@media(prefers-reduced-motion:reduce){
  .stage{height:auto!important}
  .pin{position:static;height:auto;padding:70px 14px}
  .word,.fade{opacity:1;transform:none;transition:none}
}
@media(max-width:760px){
  .barlinks{display:none}
  .say h1,.say h2{max-width:none}
  .beat{font-size:clamp(20px,5.6vw,30px)}
}

/* ---------- the reels lose their own furniture ----------
   Each reel was built to stand alone, so it carries its own headline column
   and caption. On this page the statement above it says that, and the reel
   says it again three inches lower. The page wins; the reel goes quiet. */
.screen .r-aside,.screen .b-aside,.screen .p-aside,
.screen .r-caption,.screen .b-caption,.screen .p-caption,.screen .d-caption{display:none}
/* those two compositions were built around a column that is now gone */
.screen .b-scene{justify-content:center;padding:0}
.screen .r-s4{justify-content:center;gap:0}
.screen .p-win{left:50%}
.screen .p-room:after{display:none}

/* ---------- a cue on the first screen ----------
   Twenty-five screens of page, and the opening one gave no sign there was
   anything below it. */
.cue{position:absolute;bottom:38px;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--faint);display:flex;flex-direction:column;align-items:center;gap:12px;
  opacity:0;animation:cuein 1.2s 1.1s forwards}
.cue i{display:block;width:1px;height:42px;background:linear-gradient(var(--acc),transparent);
  animation:cuedrop 2.6s 2s infinite}
@keyframes cuein{to{opacity:1}}
@keyframes cuedrop{0%{transform:scaleY(.2);transform-origin:top;opacity:0}
  35%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);transform-origin:bottom;opacity:0}}
.say{position:relative}
@media(prefers-reduced-motion:reduce){.cue{opacity:1;animation:none}.cue i{animation:none}}

/* the close should not sit flush against the last reel */
.close{padding-top:clamp(60px,10vh,120px)}

/* ---------- asking for access ----------
   A mailto asks a stranger to compose an email about a product they have just
   met. This asks the four things that make a beta list worth having, and only
   then opens their mail client with the lot already written. */
.ask{width:min(620px,92vw);margin:14px auto 0;text-align:left}
.ask .row{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.ask label{display:block;margin-top:22px}
.ask span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint);margin-bottom:9px}
.ask input,.ask select{width:100%;background:none;border:0;border-bottom:1px solid var(--rule);
  color:var(--ink);font-family:var(--ui);font-size:16.5px;padding:7px 0;border-radius:0;
  transition:border-color .25s}
.ask input:focus,.ask select:focus{outline:0;border-bottom-color:var(--acc)}
.ask select{appearance:none;cursor:pointer}
.ask select option{background:#111;color:var(--ink)}
.ask input::placeholder{color:#4A4844}
.ask .go{margin-top:34px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.ask button{font-family:var(--ui);font-size:16.5px;background:var(--acc);color:#101010;border:0;
  padding:15px 34px;border-radius:999px;cursor:pointer;transition:transform .25s,opacity .25s}
.ask button:hover{transform:translateY(-2px)}
.ask .small{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--faint);
  max-width:34ch;line-height:1.6}
.ask .done{display:none;font-family:var(--ser);font-size:19px;color:var(--acc);margin-top:22px}
.ask.sent .done{display:block}
.ask.sent .row,.ask.sent label,.ask.sent .go{display:none}
@media(max-width:620px){.ask .row{grid-template-columns:1fr;gap:0}}

/* ---------- phones ----------
   A 1280-wide stage at phone width scales to about 0.28, which renders 13px
   interface text at under 4px. Two of the reels are built around a device and
   can be reframed around it; the two wide ones open full screen instead. */
@media(max-width:760px){
  .bar{padding:14px 18px}
  .here{display:none}
  .say{padding:100px 22px 90px}
  .say h1,.say h2{letter-spacing:-.028em}
  .pin{padding:80px 0 34px;gap:18px}
  .beat{padding:0 22px;font-size:clamp(21px,6.2vw,30px);min-height:2.2em}
  .screen{width:100vw;margin-left:calc(50% - 50vw)}

  /* reframed around the device */
  .screen .b-frame,.screen .p-frame{aspect-ratio:3/4}
  .screen .r-frame,.screen .d-frame{aspect-ratio:3/4}
  .screen .b-caption,.screen .p-caption,.screen .r-caption,.screen .d-caption{display:none}

  [data-tap]{display:none!important}
  .reeltap{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:45;
    font:inherit;font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;
    background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.3);color:var(--ink);
    padding:11px 22px;border-radius:999px;backdrop-filter:blur(8px)}
  .specs{padding:70px 22px}
  .grid{grid-template-columns:1fr}
  .cell{border-right:0}
  .ask .go{flex-direction:column;align-items:flex-start;gap:14px}
}
@media(min-width:761px){.reeltap{display:none}}

/* ---------- the full-screen viewer ---------- */
.viewer{position:fixed;inset:0;z-index:900;background:#000;display:none;
  align-items:center;justify-content:center}
.viewer.on{display:flex}
.viewer-slot{width:100%;height:100%;display:grid;place-items:center}
/* A 16:9 frame at phone width is 211px tall — no bigger than it was inline,
   which defeats the point of opening it. Turned on its side it gets the
   screen's long edge, and the interface roughly doubles. */
@media(max-width:760px){
  .viewer-slot .r-frame,.viewer-slot .d-frame{
    width:100svh;height:calc(100svh * 9 / 16);transform:rotate(90deg)}
}
.viewer-x{position:absolute;top:14px;right:16px;z-index:5;font-family:var(--mono);font-size:12px;
  letter-spacing:.09em;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.26);
  color:var(--ink);padding:10px 18px;border-radius:999px}
.viewer-note{position:absolute;bottom:18px;left:0;right:0;text-align:center;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint)}

/* ---------- the opening screen ----------
   No headline. A claim on the first screen is a claim somebody who knows you
   has to read; the work underneath makes it on its own. Just the name, one
   line saying what this is, and a way down. */
.say.open{min-height:100svh;justify-content:center;gap:26px}
.say.open .kick{font-size:12.5px;letter-spacing:.42em;color:var(--ink)}
.orient{font-family:var(--ser);font-weight:300;font-size:clamp(19px,2.3vw,27px);
  line-height:1.45;color:var(--dim);max-width:30ch;margin:0;letter-spacing:-.01em}
@media(max-width:760px){.orient{font-size:19px;max-width:26ch}}