/* ============================================================
   Future Tense — deck shell.
   Slide content itself is inline-styled and ported byte-for-byte
   from the Claude Design prototype; nothing here restyles a slide.
   ============================================================ */

/* ── Type scale + link rules, lifted unchanged from the prototype's
      <helmet> block (Future Tense Fundraise Deck.dc.html:14-25). ── */
:root{
  --type-poster:150px; --type-title:78px; --type-head:64px; --type-sub:44px;
  --type-body:34px; --type-small:28px; --type-micro:24px;
  --pad-x:100px; --pad-top:96px; --pad-bottom:80px;
  --gap-title:52px; --gap-item:28px;
}
a{color:var(--ak-blue);text-decoration:none}
a:hover{color:var(--ak-blue);text-decoration:underline}
a[data-wall-tile]:hover .wall-cue{opacity:1}
a[data-wall-tile]:hover{box-shadow:inset 0 0 0 2px rgba(252,252,235,0.55)}

/* ── Deck chrome ── */
:root{ --deck-rail-w:188px; --deck-accent:#ff6350; }

html,body{margin:0;padding:0;height:100%}
body{
  background:#000;color:#fff;overflow:hidden;
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
  -webkit-tap-highlight-color:transparent;
}

/* Zero-specificity wrap defaults, so authored text-wrap always wins. */
:where(h1,h2,h3,h4,h5,h6){text-wrap:balance}
:where(p,li,blockquote,figcaption){text-wrap:pretty}

/* Slide copy balances rather than rags. Most text on a slide is a short block
   in a narrow column, where `pretty` still leaves a two-word last line; `balance`
   evens the lines instead. It also does the right thing whatever face is
   serving, which matters because the Adobe kit is not reachable from every
   environment this gets rendered in. Inline text-wrap still wins. */
.canvas > section :where(p,span){text-wrap:balance}

/* Hide the deck until the engine has laid it out, so slide 1 never
   flashes at authored size before the scale transform lands. */
.deck:not([data-ready]) .stage,
.deck:not([data-ready]) .rail{opacity:0;pointer-events:none}

.stage{position:fixed;inset:0;left:var(--deck-rail-w);
  display:flex;align-items:center;justify-content:center}
.canvas{position:relative;flex-shrink:0;transform-origin:center center;
  background:var(--ak-ink);will-change:transform;
  box-shadow:0 0 0 1.5px rgba(255,255,255,0.12)}

/* Slides stay mounted; only visibility changes, so nothing reloads on nav. */
.canvas > section{
  position:absolute !important;inset:0 !important;
  width:100% !important;height:100% !important;
  box-sizing:border-box !important;overflow:hidden;
  opacity:0;visibility:hidden;pointer-events:none;
}
.canvas > section[data-deck-active]{opacity:1;visibility:visible;pointer-events:auto}

/* ── Thumbnail rail ── */
.rail{position:fixed;left:0;top:0;bottom:0;width:var(--deck-rail-w);
  background:#141414;border-right:1px solid rgba(255,255,255,0.08);
  overflow-y:auto;overflow-x:hidden;padding:12px 10px;box-sizing:border-box;
  display:flex;flex-direction:column;gap:12px;z-index:40;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.18) transparent}
.rail::-webkit-scrollbar{width:8px}
.rail::-webkit-scrollbar-track{background:transparent;margin:2px}
.rail::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.18);border-radius:4px;
  border:2px solid transparent;background-clip:content-box}
.rail::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.28)}

.thumb{position:relative;display:flex;align-items:flex-start;gap:8px;
  cursor:pointer;user-select:none;outline:none;border:0;padding:0;margin:0;
  background:transparent;font:inherit;text-align:left;width:100%}
.thumb .num{width:16px;flex-shrink:0;font-size:11px;font-weight:500;text-align:right;
  color:rgba(255,255,255,0.55);padding-top:2px;font-variant-numeric:tabular-nums}
.thumb .frame{position:relative;flex:1;min-width:0;aspect-ratio:16/9;
  background:var(--ak-ink);border-radius:4px;overflow:hidden;
  outline:2px solid transparent;transition:outline-color 120ms ease}
.thumb:hover .frame{outline-color:rgba(255,255,255,0.25)}
.thumb:focus-visible .frame{outline-color:rgba(255,255,255,0.5)}
.thumb[data-current] .num{color:#fff}
.thumb[data-current] .frame{outline-color:var(--deck-accent);
  box-shadow:0 0 0 4px rgba(255,99,80,0.25)}
/* The clone is a full 1920x1080 slide scaled down from its top-left. */
.thumb .frame > .clone{position:absolute;top:0;left:0;transform-origin:0 0;
  pointer-events:none;box-sizing:border-box;overflow:hidden;
  visibility:visible;opacity:1}

.rail-resize{position:fixed;left:calc(var(--deck-rail-w) - 3px);top:0;bottom:0;
  width:6px;cursor:col-resize;z-index:41;touch-action:none}
.rail-resize:hover,.rail-resize[data-dragging]{background:rgba(255,255,255,0.12)}

/* ── Bottom-centre control pill ── */
.overlay{position:fixed;left:50%;bottom:22px;
  transform:translate(-50%,6px) scale(0.92);filter:blur(6px);
  display:flex;align-items:center;gap:4px;padding:4px;
  background:#000;color:#fff;border-radius:999px;font-size:12px;
  opacity:0;pointer-events:none;transform-origin:center bottom;z-index:50;
  user-select:none;
  transition:opacity 260ms ease,transform 260ms cubic-bezier(.2,.8,.2,1),filter 260ms ease}
.overlay[data-visible]{opacity:1;pointer-events:auto;
  transform:translate(-50%,0) scale(1);filter:blur(0)}
.overlay .btn{appearance:none;background:transparent;border:0;margin:0;padding:0;
  color:rgba(255,255,255,0.72);font:inherit;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  height:28px;min-width:28px;border-radius:999px;
  transition:background 140ms ease,color 140ms ease}
.overlay .btn:hover{background:rgba(255,255,255,0.12);color:#fff}
.overlay .btn:active{background:rgba(255,255,255,0.18)}
.overlay .btn:focus{outline:none}
.overlay .btn svg{width:14px;height:14px;display:block}
.overlay .count{font-variant-numeric:tabular-nums;color:#fff;font-weight:500;
  padding:0 8px;min-width:42px;text-align:center;font-size:12px}
.overlay .count .sep{color:rgba(255,255,255,0.45);margin:0 3px;font-weight:400}
.overlay .count .total{color:rgba(255,255,255,0.55)}
.overlay .divider{width:1px;height:14px;background:rgba(255,255,255,0.18);margin:0 2px}

/* Fullscreen and narrow viewports drop the rail; the stage reclaims the width. */
.deck[data-norail] .rail,.deck[data-norail] .rail-resize{display:none}
.deck[data-norail] .stage{left:0}
/* Below this the rail costs more width than the thumbnails are worth: a
   landscape phone is about 844 wide and an iPad portrait 820, and 188px of
   either is a fifth of the screen given to pictures too small to read. */
@media (max-width:1024px){
  .rail,.rail-resize{display:none}
  .stage{left:0 !important}
}

/* ── Email gate ──
   Antkind idiom: ink ground, cream type, red as the single accent.
   One triad, square corners, hairline rules, no shadows. */
.gate{position:fixed;inset:0;z-index:100;background:var(--ak-ink);color:var(--ak-cream);
  font-family:var(--font-body);display:flex;flex-direction:column;
  justify-content:space-between;box-sizing:border-box;
  padding:clamp(28px,5vh,64px) clamp(28px,6vw,96px)}
.gate[hidden]{display:none}
.gate .grain{position:absolute;inset:0;pointer-events:none;z-index:0}
.gate > *{position:relative;z-index:1}
.gate .eyebrow{font-family:var(--font-mono);font-size:clamp(11px,1vw,14px);
  letter-spacing:0.16em;text-transform:uppercase;color:rgba(252,252,235,0.55)}
.gate h1{margin:0;font-family:var(--font-display);font-weight:900;
  font-size:clamp(56px,10vw,150px);line-height:0.86;letter-spacing:-0.045em;
  text-transform:uppercase}
.gate h1 em{font-style:normal;color:var(--ak-red)}
.gate form{margin:clamp(28px,4vh,48px) 0 0;display:flex;flex-wrap:wrap;
  align-items:flex-end;gap:clamp(16px,2vw,28px)}
.gate .field{display:flex;flex-direction:column;gap:10px;flex:1 1 240px;max-width:360px}
.gate label{font-family:var(--font-mono);font-size:clamp(10px,0.85vw,13px);
  letter-spacing:0.14em;text-transform:uppercase;color:rgba(252,252,235,0.5)}
.gate input{appearance:none;background:transparent;border:0;
  border-bottom:1px solid rgba(252,252,235,0.35);border-radius:0;
  color:var(--ak-cream);font-family:var(--font-body);
  font-size:clamp(16px,1.5vw,24px);padding:8px 0;width:100%;
  transition:border-color 150ms ease}
.gate input::placeholder{color:rgba(252,252,235,0.25)}
.gate input:focus{outline:none;border-bottom-color:var(--ak-red)}
.gate input[aria-invalid="true"]{border-bottom-color:var(--ak-red)}
.gate button{appearance:none;cursor:pointer;border:0;border-radius:0;
  background:var(--ak-red);color:var(--ak-ink);
  font-family:var(--font-mono);font-size:clamp(11px,1vw,15px);
  letter-spacing:0.14em;text-transform:uppercase;
  padding:clamp(12px,1.6vh,18px) clamp(24px,3vw,40px);
  transition:background 150ms ease,color 150ms ease}
.gate button:hover{background:var(--ak-cream);color:var(--ak-ink)}
.gate .error{margin:16px 0 0;min-height:1.4em;font-family:var(--font-mono);
  font-size:clamp(10px,0.85vw,13px);letter-spacing:0.1em;text-transform:uppercase;
  color:var(--ak-red)}
.gate .foot{display:flex;justify-content:space-between;align-items:flex-end;
  gap:32px;flex-wrap:wrap}
.gate .foot img{height:clamp(28px,3vw,44px);width:auto;display:block}
.gate .fine{font-family:var(--font-mono);font-size:clamp(10px,0.85vw,13px);
  letter-spacing:0.12em;text-transform:uppercase;color:rgba(252,252,235,0.28)}

/* ── Print: one slide per page at design size. ── */
@page{size:20in 11.25in;margin:0}
@media print{
  html,body{height:auto;overflow:visible;background:none}
  .rail,.rail-resize,.overlay,.gate,.rotate-hint{display:none !important}
  /* deck.js sets `left` on the stage inline, to clear the rail. An inline style
     beats a plain rule, so without !important every printed slide was pushed
     right by the rail's width and clipped, leaving a white band down the left.
     The rotate layout is a phone thing and has no business in a print. */
  .stage{position:static !important;display:block !important;
    left:0 !important;top:0 !important;right:auto !important;bottom:auto !important;
    width:auto !important;height:auto !important;margin:0 !important}
  .deck[data-rotate] .canvas,.deck[data-rotate] .overlay{
    transform:none !important;width:auto !important;height:auto !important;
    margin:0 !important;position:static !important}
  .canvas{transform:none !important;width:auto !important;height:auto !important;
    background:none;box-shadow:none;will-change:auto}
  .canvas > section{
    position:relative !important;inset:auto !important;
    width:1920px !important;height:1080px !important;
    /* contain:size stops an abs-positioned child past the page edge from
       making Chromium shrink the whole PDF to ~75%. */
    contain:size !important;
    opacity:1 !important;visibility:visible !important;pointer-events:auto;
    overflow:hidden;break-inside:avoid;break-after:page;page-break-after:always}
  .canvas > section:last-child{break-after:auto;page-break-after:auto}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  *,*::before,*::after{transition-duration:0s !important;
    animation-duration:.001s !important;animation-delay:-99s !important}
}


/* ── Portrait phones and small tablets ──
   A 16:9 slide on a 9:19.5 screen fits to a strip: at 390x844 the deck lands
   at 390x219 with body text under 7px, which is not readable by anyone.
   Rotating the canvas a quarter turn runs the slide's long edge down the
   screen's long edge instead, roughly doubling everything.

   This is deliberately done in CSS rather than by asking the viewer to turn
   the phone, because a great many people browse with rotation lock on and
   never see a "please rotate" prompt work. The engine sets --deck-rot-scale
   for this case; see the isPortrait branch in deck.js fit(). */
@media (max-width:900px) and (orientation:portrait){
  .deck[data-rotate] .canvas{
    transform: translate(-50%,-50%) rotate(90deg) scale(var(--deck-rot-scale,1));
    position:absolute;
    top:50%;
    left:50%;
    transform-origin:center center;
  }
  /* The controls turn WITH the slide, so once the phone is turned everything
     reads the same way up. The slide is rotated clockwise, which puts its
     bottom edge against the screen's left edge, so that is where the pill
     goes. */
  .deck[data-rotate] .overlay{
    left:34px;
    right:auto;
    bottom:auto;
    top:50%;
    margin-left:0 !important;
    transform:translate(-50%,-50%) rotate(90deg) scale(0.92);
    filter:blur(6px);
  }
  .deck[data-rotate] .overlay[data-visible]{
    transform:translate(-50%,-50%) rotate(90deg) scale(1);
    filter:blur(0);
  }

  /* The hint is the one thing that stays upright: its whole job is to be
     readable BEFORE the phone is turned. Sits opposite the controls. */
  .deck[data-rotate] .rotate-hint{display:flex}
}

.rotate-hint{
  display:none;
  position:fixed;
  left:auto;
  right:14px;
  bottom:14px;
  transform:none;
  max-width:60vw;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(0,0,0,0.72);
  color:rgba(255,255,255,0.8);
  font-family:var(--font-mono),ui-monospace,monospace;
  font-size:11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  z-index:60;
  pointer-events:none;
  transition:opacity 300ms ease;
}
.rotate-hint[data-gone]{opacity:0}

/* Touch: the control pill needs real tap targets, and the rail is gone so the
   stage has the full width. */
@media (hover:none){
  .overlay{bottom:14px;padding:6px}
  .overlay .btn{height:40px;min-width:40px}
  .overlay .btn svg{width:17px;height:17px}
  .overlay .count{font-size:14px;min-width:52px}
}