/* Letterbox: a sample design from Brad's mockup library, rewritten by
   scripts/import-designs.py. Do not edit; re-run that instead. */

@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/fraunces-italic-326a7ed2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/fraunces-italic-326a7ed2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/space-grotesk-normal-0e49602d.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/space-grotesk-normal-0e49602d.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/space-mono-normal-7114c271.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; }
img { display:block; max-width:100%; height:auto; }
a { color:inherit; }
h1, h2, h3 { text-wrap:balance; margin:0; font-weight:inherit; }
p { text-wrap:pretty; margin:0; }
ul, ol { margin:0; padding:0; list-style:none; }
figure { margin:0; }
dl, dd { margin:0; }
button { font:inherit; color:inherit; cursor:pointer; }
fieldset { border:0; margin:0; padding:0; min-width:0; }
[hidden] { display:none !important; }
.vh { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* Headers placed over a photo sit within .page, not the window, so anything a host adds above
   the page (the Shift & Shine sample bar) pushes them down instead of hiding under them. */
.page { position:relative; overflow-x:clip; }
.skip { position:absolute; left:12px; top:12px; z-index:100; padding:10px 14px; background:#fff; color:#111; }
.skip:not(:focus) { width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.js-reveal [data-reveal]:not(.in) { opacity:0; transform:translateY(28px); }
[data-reveal] { transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1), filter .9s ease; }
.demo-form { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; }
.demo-form .field { display:grid; gap:6px; min-width:0; }
.demo-form .wide { grid-column:1 / -1; }
.demo-form input, .demo-form select, .demo-form textarea { font:inherit; width:100%; min-width:0; }
@media (max-width:640px) { .demo-form { grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }

:root { --bg:#0E0D0C; --ink:#EEE6D5; --muted:#A79F91; --teal:#84D2C5; --line:rgba(238,230,213,.14); --grade:none; }
body { background:var(--bg); color:var(--ink); font:400 16.5px/1.65 "Space Grotesk", system-ui, sans-serif; }
.mono { font-family:"Space Mono", ui-monospace, monospace; font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .strip:focus-visible { outline:2px solid var(--teal); outline-offset:3px; }
h1, h2, h3 { font-family:"Fraunces", Georgia, serif; font-style:italic; font-weight:300; letter-spacing:-.01em; }
.page.grade-warm { --grade:sepia(.35) saturate(1.25) hue-rotate(-8deg) contrast(1.05); }
.page.grade-bleach { --grade:saturate(.35) contrast(1.35) brightness(1.04); }
.page.grade-night { --grade:hue-rotate(185deg) saturate(.7) brightness(.72) contrast(1.15); }
.page.grade-mono { --grade:grayscale(1) contrast(1.2); }
.graded img { filter:var(--grade); transition:filter .8s ease; }
.hd { position:absolute; top:0; left:0; right:0; z-index:6; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px clamp(16px, 4vw, 48px); }
.nm { font:500 14px/1 "Space Mono", monospace; letter-spacing:.32em; text-decoration:none; }
.hd ul { display:flex; gap:clamp(14px, 2.4vw, 30px); }
.hd nav a { text-decoration:none; font-size:15px; color:var(--muted); }
.hd nav a:hover { color:var(--ink); }
.reel-btn { border:1px solid var(--line); background:rgba(14,13,12,.6); padding:9px 16px; border-radius:999px; font-size:14px; }
.reel-btn:hover { border-color:var(--teal); color:var(--teal); }
.hero { position:relative; min-height:min(100svh, 980px); display:grid; place-items:center; padding:84px 0 70px; overflow:hidden; }
.lbx-hero { position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); aspect-ratio:2.39/1; max-height:calc(100% - 150px); width:100%; overflow:hidden; }
.lbx-hero img { width:100%; height:100%; object-fit:cover; animation:push 24s ease-out both; }
@keyframes push { from { transform:scale(1.12); } to { transform:scale(1); } }
.lbx-hero::after { content:""; position:absolute; inset:0; background:radial-gradient(ellipse at center, rgba(0,0,0,.05) 30%, rgba(0,0,0,.55)); }
.slate { position:absolute; left:clamp(16px, 4vw, 48px); right:clamp(16px, 4vw, 48px); bottom:22px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 20px; color:var(--muted); z-index:2; }
.slate b { color:var(--ink); font-weight:400; }
.rec { display:inline-block; width:8px; height:8px; border-radius:50%; background:#E5483B; margin-right:8px; animation:blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { opacity:0; } }
.title { position:relative; z-index:2; text-align:center; display:grid; gap:14px; justify-items:center; padding:0 16px; text-shadow:0 2px 30px rgba(0,0,0,.6); }
.title h1 { font-size:clamp(64px, 11vw, 190px); line-height:.9; }
.role { color:var(--ink); }
.play { margin-top:14px; display:inline-flex; align-items:center; gap:12px; padding:13px 22px 13px 16px; border-radius:999px; border:1px solid rgba(238,230,213,.5); background:rgba(14,13,12,.45); backdrop-filter:blur(8px); text-shadow:none; font-size:15.5px; }
.play:hover { background:var(--ink); color:var(--bg); }
.play .mono { color:var(--muted); }
.play:hover .mono { color:#4A453D; }
.tri { width:0; height:0; border-left:11px solid currentColor; border-block:7px solid transparent; margin-left:4px; }
section { padding:clamp(70px, 9vw, 130px) clamp(16px, 4vw, 48px); }
.intro p { max-width:24em; margin:0 auto; text-align:center; font:300 italic clamp(26px, 3vw, 44px)/1.25 "Fraunces", serif; }
.sec-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:16px; margin-bottom:28px; }
.sec-head h2, .grade h2, .about h2, .contact h2 { font-size:clamp(40px, 5vw, 76px); line-height:1; }
.strip-ctl { display:flex; align-items:center; gap:8px; }
.strip-ctl .mono { margin-right:10px; color:var(--muted); }
.strip-ctl b { color:var(--ink); font-weight:400; }
.strip-ctl button { width:46px; height:46px; border-radius:50%; border:1px solid var(--line); background:transparent; font-size:18px; }
.strip-ctl button:hover { border-color:var(--teal); color:var(--teal); }
.strip { display:flex; gap:clamp(14px, 2vw, 28px); overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:18px; margin:0 calc(-1 * clamp(16px, 4vw, 48px)); padding-inline:clamp(16px, 4vw, 48px); scrollbar-width:none; }
.strip::-webkit-scrollbar { display:none; }
.film { flex:0 0 min(78vw, 980px); scroll-snap-align:center; display:grid; gap:14px; }
.lbx { position:relative; aspect-ratio:2.39/1; overflow:hidden; background:#000; }
.lbx img { width:100%; height:100%; object-fit:cover; }
.lbx .tc { position:absolute; left:12px; top:10px; color:rgba(238,230,213,.85); }
.f-meta { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 20px; }
.f-meta h3 { font-size:clamp(26px, 2.6vw, 38px); }
.f-meta .mono { color:var(--muted); align-self:center; text-align:right; }
.f-meta .line { grid-column:1 / -1; color:var(--muted); }
.f-link { grid-column:1 / -1; color:var(--teal); width:max-content; }
.scrub { height:2px; background:var(--line); margin-top:10px; }
.scrub i { display:block; height:100%; width:12.5%; background:var(--teal); transform-origin:left; }
.grade { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:clamp(24px, 4vw, 64px); align-items:center; border-block:1px solid var(--line); }
.grade p { color:var(--muted); margin-top:14px; max-width:28em; }
.grades { display:flex; flex-wrap:wrap; gap:10px; }
.grades button { display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:999px; border:1px solid var(--line); background:transparent; font-size:15px; }
.grades button[aria-pressed="true"] { border-color:var(--teal); color:var(--teal); }
.sw { width:16px; height:16px; border-radius:50%; }
.sw-natural { background:linear-gradient(135deg, #F28B3C, #3B7FA8); }
.sw-warm { background:linear-gradient(135deg, #E9A35A, #8C5A2B); }
.sw-bleach { background:linear-gradient(135deg, #C7C1B3, #4E4A42); }
.sw-night { background:linear-gradient(135deg, #3A6C9C, #0F1D33); }
.sw-mono { background:linear-gradient(135deg, #F2F2F2, #222); }
.about { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px, 5vw, 80px); align-items:center; }
.about img { aspect-ratio:2.39/1; width:100%; object-fit:cover; }
.about p { color:var(--muted); margin-top:16px; font-size:18px; }
.rep { color:var(--ink) !important; font-size:12px !important; }
.credits { text-align:center; }
.roll-wrap { height:min(56vh, 460px); overflow:hidden; -webkit-mask-image:linear-gradient(transparent, #000 22%, #000 78%, transparent); mask-image:linear-gradient(transparent, #000 22%, #000 78%, transparent); }
.roll { display:grid; gap:26px; padding:min(56vh, 460px) 0; animation:roll 30s linear infinite; }
.credits.paused .roll, .roll-wrap:hover .roll { animation-play-state:paused; }
@keyframes roll { to { transform:translateY(-50%); } }
.roll li { display:grid; gap:2px; }
.roll span { font-family:"Space Mono", monospace; font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.roll b { font:300 italic clamp(24px, 2.6vw, 36px)/1.2 "Fraunces", serif; }
.roll-btn { margin-top:18px; border:0; background:none; text-decoration:underline; color:var(--muted); padding:8px; }
.contact { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:clamp(24px, 5vw, 80px); border-top:1px solid var(--line); }
.contact a { font-size:22px; color:var(--teal); }
.contact .mono { color:var(--muted); margin-top:12px; }
.demo-form label { font-size:13.5px; color:var(--muted); }
.demo-form input, .demo-form select, .demo-form textarea { padding:12px; border:1px solid var(--line); border-radius:4px; background:#171513; color:var(--ink); }
.demo-form button { justify-self:start; padding:14px 24px; border-radius:999px; border:0; background:var(--ink); color:var(--bg); font-weight:500; }
.form-out { color:var(--teal); min-height:1.4em; }
.reel { width:100vw; max-width:100vw; height:100vh; max-height:100vh; margin:0; padding:0; border:0; background:#000; color:var(--ink); }
.reel::backdrop { background:#000; }
.reel[open] { display:flex; flex-direction:column; justify-content:center; }
.reel-frame { aspect-ratio:2.39/1; width:100%; max-height:calc(100vh - 90px); overflow:hidden; }
.reel-frame img { width:100%; height:100%; object-fit:cover; }
.reel-frame img.kb { animation:kb 4.2s ease-out both; }
@keyframes kb { from { transform:scale(1.08) translateX(1.5%); opacity:.2; } 12% { opacity:1; } to { transform:scale(1) translateX(0); } }
.reel-bar { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px 20px; padding:16px clamp(16px, 4vw, 48px); color:var(--muted); }
.reel-ctl { display:flex; gap:8px; }
.reel-ctl button { border:1px solid var(--line); background:transparent; padding:9px 14px; border-radius:999px; font:inherit; }
.ft { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; padding:26px clamp(16px, 4vw, 48px); border-top:1px solid var(--line); color:var(--muted); }
.ft a { text-decoration:none; color:var(--ink); }
@media (max-width:900px) { .grade, .about, .contact { grid-template-columns:1fr; } .hd nav { display:none; } }
@media (max-width:640px) {
  .hero { min-height:auto; padding:96px 0 80px; }
  .lbx-hero { position:relative; top:auto; transform:none; order:-1; aspect-ratio:4/3; max-height:none; }
  .title { margin-top:-46px; }
  .slate { order:3; }
  .slate { position:relative; left:auto; right:auto; bottom:auto; padding:22px 16px 0; justify-content:flex-start; }
  .film { flex-basis:88vw; }
  .lbx { aspect-ratio:16/9; }
  .f-meta { grid-template-columns:1fr; } .f-meta .mono { text-align:left; }
}
@media (prefers-reduced-motion: reduce) { .roll { animation:none; padding:0; } .roll-wrap { height:auto; -webkit-mask-image:none; mask-image:none; } .roll-btn { display:none; } }


/* ---------- Shift & Shine sample bar (scripts/import-designs.py) ---------- */
@font-face { font-family: "SSD Geist"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("/assets/fonts/geist-latin.woff2") format("woff2"); }
:root { --ssd-bar: 53px; scroll-padding-top: var(--ssd-bar); }
.ssd-bar { position: sticky; top: 0; z-index: 15; display: flex; align-items: center; gap: 8px 14px; margin: 0; padding: 8px clamp(14px, 3vw, 28px); background: #0F1B1B; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.86); font: 400 13.5px/20px "SSD Geist", "Helvetica Neue", Arial, sans-serif; letter-spacing: 0; text-align: left; text-transform: none; }
.ssd-bar .ssd-bar-text { flex: 1; margin: 0; padding: 0; color: inherit; font: inherit; letter-spacing: 0; max-width: none; }
.ssd-bar a { color: #FFFFFF; text-decoration: none; }
.ssd-bar .ssd-bar-home { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0 -8px 0 -10px; border-radius: 6px; }
.ssd-bar .ssd-bar-home svg { display: block; width: 15px; height: 16px; }
.ssd-bar .ssd-bar-back { display: inline-flex; flex: none; align-items: center; min-height: 36px; padding: 6px 12px; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 6px; font: 500 13.5px/1 "SSD Geist", "Helvetica Neue", Arial, sans-serif; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease; }
.ssd-bar .ssd-bar-back:hover { background: #FFFFFF; color: #0F1B1B; }
.ssd-bar a:focus-visible { outline: 3px solid #5AD7D7; outline-offset: 2px; }
/* Fingers get the full 44px. */
@media (pointer: coarse) { .ssd-bar .ssd-bar-back { min-height: 44px; } .ssd-bar .ssd-bar-home { width: 44px; height: 44px; margin: 0 -12px 0 -14px; } }
/* Line heights in whole pixels, so the bar is too, and the sample under it
   doesn't land on half pixels. */
@media (max-width: 520px) { :root { --ssd-bar: 71px; } .ssd-bar { font-size: 12.5px; line-height: 18px; } }