/* ryanlamb.com: the one stylesheet. Ported from the approved mockup, page v8. */

@font-face{font-family:'Bricolage Grotesque';src:url("/fonts/bricolage-grotesque.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url("/fonts/jetbrains-mono.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
/* no text inflation when a phone turns sideways; draws nothing where no text autosizing runs.
   color-scheme: the browser's own scrollbars and autofilled boxes come out dark beside the dark page */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;color-scheme:dark}
html,body{background:#050508}
body{font-family:'Bricolage Grotesque',system-ui,sans-serif;color:#fff;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit;cursor:pointer}
a:focus-visible,button:focus-visible,#rng:focus-visible,[tabindex]:focus-visible{outline:2px solid #b9ff66;outline-offset:3px}

/* =====================================================
   TOP
   ===================================================== */
/* At rest every layer sits in register except the pink outline, 6px down and right.
   register.js overrides these variables while it runs. */
.hero{position:relative;height:100vh;min-height:660px;overflow:hidden;background:#050508;color:#f6f1e7;--c:#00e5ff;--m:#ff1fa8;--y:#ffe600;--cx:0px;--cy:0px;--mx:6px;--my:6px;--yx:0px;--yy:0px;--sx:0px;--sy:0px}
#ink{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero.nogl #ink{display:none}
.hero .fallback{display:none;position:absolute;inset:0}
.hero.nogl .fallback{display:block}
/* Soft pools drawn as gradients, not blurred discs: WebKit at a 3x screen (most iPhones) draws a
   100px blur of discs this size as nothing at all. Scaled up to cover what the blur spread over. */
.hero .fallback i{position:absolute;border-radius:50%;opacity:.7;transform:scale(1.45)}
.hero .fallback i:nth-child(1){background:radial-gradient(closest-side,#ff1fa8 30%,rgba(255,31,168,0) 100%)}
.hero .fallback i:nth-child(2){background:radial-gradient(closest-side,#00e5ff 30%,rgba(0,229,255,0) 100%)}
.hero .fallback i:nth-child(3){background:radial-gradient(closest-side,#ffe600 30%,rgba(255,230,0,0) 100%)}
.shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(5,5,8,.88) 0%,rgba(5,5,8,.6) 40%,rgba(5,5,8,.04) 74%),linear-gradient(0deg,rgba(5,5,8,.75),rgba(5,5,8,0) 30%)}
.nav{position:absolute;top:0;left:0;right:0;height:76px;display:flex;align-items:center;gap:32px;padding:0 64px;font:500 12px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#cfcfda;z-index:5}
.nav nav{display:flex;align-items:center;gap:32px}
.nav b{font:800 20px 'Bricolage Grotesque',sans-serif;color:#fff;letter-spacing:-.02em;text-transform:none}
.nav .sp{flex:1}
.nav .cta{background:#b9ff66;color:#07070a;padding:12px 18px;border-radius:999px;font-weight:700}
.hbody{position:absolute;left:64px;right:64px;top:50%;transform:translateY(-55%);z-index:3}
.kick{font:500 12px 'JetBrains Mono',monospace;letter-spacing:.22em;color:#b9ff66;text-transform:uppercase;margin-bottom:22px;display:flex;align-items:center;gap:12px}
.kick i{width:8px;height:8px;border-radius:50%;background:#b9ff66;box-shadow:0 0 12px #b9ff66;flex:none}
.hbox{position:relative;width:max-content;max-width:100%}
.hx{position:relative;isolation:isolate;font:800 clamp(40px,7.4vw,112px)/.98 'Bricolage Grotesque',sans-serif;letter-spacing:-.022em;width:max-content;max-width:100%}
.ply{display:block;mix-blend-mode:screen;will-change:transform,clip-path}
.ply+.ply{position:absolute;inset:0}
/* --k scales every layer's offset, at rest and moving: 1 unless the phone rules lower it.
   register.js writes plain pixels into --cx to --sy and knows nothing of it. */
.ply.c{color:var(--c);transform:translate(calc(var(--cx) * var(--k,1)),calc(var(--cy) * var(--k,1)))}
/* the pink layer is an outline that always sits a little off */
.ply.m{color:transparent;-webkit-text-stroke:2px var(--m);transform:translate(calc(var(--mx) * var(--k,1)),calc(var(--my) * var(--k,1)))}
.ply.y{color:var(--y);transform:translate(calc(var(--yx) * var(--k,1)),calc(var(--yy) * var(--k,1)))}
.ply.s{mix-blend-mode:normal;color:transparent;transform:translate(calc(var(--sx) * var(--k,1)),calc(var(--sy) * var(--k,1)))}
.ply.s .hid{visibility:hidden}
.ply.s .grad{background:linear-gradient(90deg,#b9ff66,#00e5ff 55%,#ff1fa8);-webkit-background-clip:text;background-clip:text;color:transparent}
.squeegee{position:absolute;top:-4%;bottom:-4%;left:-2%;width:5px;border-radius:3px;opacity:0;pointer-events:none;z-index:4}
.reg{position:absolute;width:28px;height:28px;isolation:isolate;z-index:3;opacity:.85}
.reg svg{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:screen;fill:none;stroke:currentColor;stroke-width:1.6}
.reg .c{color:var(--c);transform:translate(var(--cx),var(--cy))}
.reg .m{color:var(--m);transform:translate(var(--mx),var(--my))}
.reg .y{color:var(--y);transform:translate(var(--yx),var(--yy))}
.hero.snap .reg svg{transition:transform .6s cubic-bezier(.2,1.8,.3,1)}
.reg.tl{left:16px;top:88px}.reg.tr{right:16px;top:88px}.reg.bl{left:16px;bottom:58px}.reg.br{right:16px;bottom:58px}
.row{display:flex;gap:56px;align-items:flex-end;margin-top:28px}
.sub{max-width:560px;font:400 20px/1.5 'Bricolage Grotesque',sans-serif;color:#d6d6e0}
.btns{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
.btn{font:700 15px 'Bricolage Grotesque',sans-serif;padding:15px 22px;border-radius:999px;background:#b9ff66;color:#07070a}
.btn.ghost{background:rgba(5,5,8,.35);color:#fff;border:1px solid #5a5a6a}
.stats{margin-left:auto;display:flex;gap:34px;padding:18px 24px 16px;border-radius:16px;background:rgba(5,5,8,.58);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.stat b{display:block;font:800 42px/1 'Bricolage Grotesque',sans-serif;letter-spacing:-.03em;margin-bottom:9px;white-space:nowrap}
.stat span{display:block;font:500 10.5px/1.5 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#c9c9d6}
.stat:nth-child(1) b{color:var(--c)}.stat:nth-child(2) b{color:var(--m)}.stat:nth-child(3) b{color:var(--y)}
/* the calm ticker: four copies of the same words, so sliding by half has no seam */
.marq{position:absolute;left:0;right:0;bottom:0;height:42px;overflow:hidden;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;z-index:3}
.marq .rowx{display:flex;white-space:nowrap;animation:slide 80s linear infinite;font:500 13px/1 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.2em;color:rgba(246,241,231,.62)}
.marq .set{display:flex}
.marq .set span{padding:0 16px}
.marq .set .st{color:var(--m);padding:0 4px}
@keyframes slide{to{transform:translateX(-50%)}}

/* =====================================================
   HISTORY
   ===================================================== */
/* These rules are the time machine, as in the mockup. They take effect once
   timemachine.js adds tm-on to #history. The block after them is the plain list
   a visitor sees until then, or for good with scripts off. */
.hist{position:relative;background:#07070a;color:#fff;padding:90px 64px;min-height:100vh;display:flex;align-items:center}
.hist-in{width:100%;max-width:1360px;margin:0 auto;display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:52px;align-items:center}
.hr{min-width:0}
.hist .kick{margin-bottom:16px}
.hist h2{font:800 clamp(32px,3.6vw,54px)/1.02 'Bricolage Grotesque',sans-serif;letter-spacing:-.025em}
.hl p{color:#b9b9c6;font-size:17px;line-height:1.5;margin-top:14px}
.yr{font:800 clamp(64px,8vw,120px)/1 'Bricolage Grotesque',sans-serif;font-variant-numeric:tabular-nums;letter-spacing:-.04em;margin-top:34px;width:max-content;background:linear-gradient(90deg,#b9ff66,#00e5ff 55%,#ff1fa8);-webkit-background-clip:text;background-clip:text;color:transparent}
.cap{margin-top:10px;font:500 12px/1.5 'JetBrains Mono',monospace;letter-spacing:.08em;color:#c9c9d2;min-height:38px}
.cap b{color:#b9ff66;font-weight:500}
/* The cap keeps the frame and its slider on one screen. On a short screen it would shrink the frame
   to nothing (21px on a phone held sideways), so it never goes under 520px: the section grows instead. */
.win{width:100%;max-width:max(calc((100vh - 380px)*1.6),520px);margin:0 auto;border-radius:14px;overflow:hidden;border:1px solid #2b2b36;background:#101014;box-shadow:0 30px 120px rgba(255,31,168,.13),0 10px 40px rgba(0,0,0,.6)}
.chrome{height:40px;display:flex;align-items:center;gap:8px;padding:0 14px;background:#17171d;border-bottom:1px solid #2b2b36}
.chrome i{width:11px;height:11px;border-radius:50%;background:#3a3a46;flex:none}
.chrome .url{margin-left:14px;flex:1;max-width:520px;height:24px;border-radius:6px;background:#0e0e12;color:#9a9aa8;font:500 12px 'JetBrains Mono',monospace;display:flex;align-items:center;padding:0 12px;letter-spacing:.02em;white-space:nowrap;overflow:hidden}
/* The frame is a size container: the wall in its last stop rearranges by the frame's own width. */
.view{position:relative;aspect-ratio:16/10;background:#000;overflow:hidden;container:frame/inline-size}
.era{position:absolute;inset:0;overflow:hidden}
.era>img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block}
.edge{position:absolute;top:0;bottom:0;width:3px;margin-left:-1px;background:#fff;box-shadow:0 0 18px 4px rgba(255,255,255,.85),0 0 70px 12px rgba(0,229,255,.6);pointer-events:none;z-index:20;opacity:0}
.time{max-width:max(calc((100vh - 380px)*1.6),520px);margin:0 auto;padding:18px 4px 0}
.time .ticks{display:flex;justify-content:space-between;font:500 11px 'JetBrains Mono',monospace;color:#8a8a8a;letter-spacing:.1em;padding:0 2px}
#rng{-webkit-appearance:none;appearance:none;width:100%;height:34px;background:transparent;cursor:grab;display:block}
#rng:active{cursor:grabbing}
#rng::-webkit-slider-runnable-track{height:4px;background:linear-gradient(90deg,#8c8c8c,#00e5ff 45%,#ff1fa8 75%,#ffe600);border-radius:2px}
#rng::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;border:4px solid #07070a;box-shadow:0 0 0 2px #fff,0 0 18px rgba(255,255,255,.9);margin-top:-11px}
#rng::-moz-range-track{height:4px;background:linear-gradient(90deg,#8c8c8c,#00e5ff 45%,#ff1fa8 75%,#ffe600);border-radius:2px}
#rng::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:4px solid #07070a;box-shadow:0 0 0 2px #fff}
/* each stop's own caption: shown in the plain list, or when its picture failed */
.stop-cap{display:none;font:500 12px/1.5 'JetBrains Mono',monospace;letter-spacing:.08em;color:#c9c9d2}
.stop-cap b{color:#b9ff66;font-weight:500}

/* stop 1994: Motocross Cyber Site, rebuilt from Ryan's description: one bordered console holding a grid of icons */
.e0{z-index:1;background:#c0c0c0}
.pane{height:100%;background:#c0c0c0;display:flex;align-items:center;justify-content:center}
.mod{width:min(60%,620px);aspect-ratio:500/452;position:relative;container-type:inline-size;font-family:Geneva,Verdana,sans-serif;color:#000}
.mod-in{position:absolute;inset:0;background:linear-gradient(#d8d8d8,#bcbcbc);border-radius:3cqw;box-shadow:inset .5cqw .5cqw 0 #f4f4f4,inset -.5cqw -.5cqw 0 #868686,0 .8cqw 1.8cqw rgba(0,0,0,.4);display:grid;grid-template-rows:16% 1fr;padding:2.8cqw;gap:2.2cqw}
.mod-top{display:grid;grid-template-columns:16% 1fr;gap:2.2cqw}
.mod-logo{background:#fff;box-shadow:inset .3cqw .3cqw 0 #888,inset -.3cqw -.3cqw 0 #fff;display:flex;align-items:center;justify-content:center}
.mod-logo svg{width:70%;height:70%;shape-rendering:crispEdges}
.mod-title{display:flex;align-items:center;justify-content:center;background:#000;color:#fc0;font:900 italic 5.6cqw Impact,'Arial Black',sans-serif;letter-spacing:.04em;box-shadow:inset 0 0 0 .45cqw #c00}
.mod-title i{color:#fff;font-style:italic;margin-left:1.6cqw}
.mod-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:1.9cqw}
.ic{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.1cqw;background:#d6d6d6;box-shadow:inset .32cqw .32cqw 0 #fff,inset -.32cqw -.32cqw 0 #808080,0 0 0 .16cqw #000;font:2.45cqw Geneva,Verdana,sans-serif;color:#00c;text-decoration:underline}
.ic svg{width:8.6cqw;height:8.6cqw;shape-rendering:crispEdges}
.e1{z-index:2;background:#fff}
.e2{z-index:3;background:#c9c9de}
.e3{z-index:4;background:#fff}
.e4{z-index:5;background:#e8eef8}
.e5{z-index:6;background:#0d2a52}
/* last stop: everything live right now */
.e6{z-index:7;background:#07070a;display:flex;flex-direction:column;padding:2.4% 2.6% 2.6%}
.e6::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 85% 0%,rgba(255,31,168,.28),transparent 70%),radial-gradient(50% 60% at 0% 100%,rgba(0,229,255,.2),transparent 70%)}
.wall-head{position:relative;display:flex;align-items:baseline;gap:14px;margin-bottom:1.6%}
.wall-head b{font:800 clamp(18px,2.6vw,36px)/1 'Bricolage Grotesque',sans-serif;letter-spacing:-.02em}
.wall-head span{font:500 clamp(11px,1vw,13px) 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#b9ff66}
.wall{position:relative;flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:1.4%}
.wall figure{position:relative;border-radius:8px;overflow:hidden;border:1px solid #33333f;background:#111;opacity:0;transform:translateY(14px) scale(.97);transition:opacity .5s,transform .6s cubic-bezier(.2,.9,.2,1)}
.view.now .wall figure{opacity:1;transform:none}
.wall figure:nth-child(2){transition-delay:.07s}.wall figure:nth-child(3){transition-delay:.14s}.wall figure:nth-child(4){transition-delay:.21s}.wall figure:nth-child(5){transition-delay:.28s}.wall figure:nth-child(6){transition-delay:.35s}
.wall img{width:100%;height:100%;object-fit:cover;object-position:left top;display:block}
.wall figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px 10px 7px;background:linear-gradient(transparent,rgba(0,0,0,.86));font:500 clamp(11px,.9vw,12px) 'JetBrains Mono',monospace;letter-spacing:.08em;color:#fff}
.wall .txt{display:flex;flex-direction:column;justify-content:center;gap:8px;padding:0 9%;background:linear-gradient(135deg,#15151c,#0b0b10)}
.wall .txt figcaption{position:static;padding:0;background:none;font:800 clamp(12px,1.7vw,24px)/1.05 'Bricolage Grotesque',sans-serif;letter-spacing:-.02em;color:#fff}
.wall .txt span{font:400 clamp(11px,.95vw,13px)/1.4 'Bricolage Grotesque',sans-serif;color:#b9b9c6}
/* a stop whose picture failed (timemachine.js adds noimg): its caption, centered on a dark panel */
.era.noimg{background:#101014;display:flex;align-items:center;justify-content:center;padding:0 10%}
.era.noimg>:not(.stop-cap){display:none}
.era.noimg .stop-cap{display:block;text-align:center;font-size:14px}

/* History with no time machine running: the seven stops as a plain list,
   each picture above its caption. The year, the single caption line, the
   address bar, the slider and the glowing edge do nothing without script. */
.hist:not(.tm-on){min-height:0;display:block}
.hist:not(.tm-on) .hist-in{align-items:start}
.hist:not(.tm-on) .hl{position:sticky;top:90px}
.hist:not(.tm-on) .yr,.hist:not(.tm-on) .cap,.hist:not(.tm-on) .chrome,.hist:not(.tm-on) .edge,.hist:not(.tm-on) .time{display:none}
.hist:not(.tm-on) .win{max-width:none;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
.hist:not(.tm-on) .view{aspect-ratio:auto;background:none;overflow:visible;display:flex;flex-direction:column;gap:44px}
.hist:not(.tm-on) .era{position:relative;inset:auto;overflow:visible;background:none;padding:0;display:flex;flex-direction:column}
.hist:not(.tm-on) .era>img{height:auto;aspect-ratio:16/10;border-radius:12px;border:1px solid #2b2b36;background:#101014}
.hist:not(.tm-on) .pane{height:auto;aspect-ratio:16/10;border-radius:12px;border:1px solid #2b2b36;overflow:hidden}
.hist:not(.tm-on) .stop-cap{display:block;order:1;margin-top:12px}
.hist:not(.tm-on) .e6::before{content:none}
/* the stop's own caption below the tiles already says Now and six things live right now */
.hist:not(.tm-on) .wall-head{display:none}
.hist:not(.tm-on) .wall{flex:none;grid-template-rows:auto;gap:14px}
.hist:not(.tm-on) .wall figure{aspect-ratio:16/10;opacity:1;transform:none;transition:none}
.hist:not(.tm-on) .era.noimg{aspect-ratio:16/10;background:#101014;border:1px solid #2b2b36;border-radius:12px;align-items:center;justify-content:center;padding:0 10%}
.hist:not(.tm-on) .era.noimg .stop-cap{margin-top:0}

/* The wall by the frame's own width, whatever the screen. Its words scale with the screen but never
   go under 11px. A frame 480px or under (a phone either way up, or a narrow or short desktop window)
   goes two across and three down, the only way every site name fits whole at 11px. There the time
   machine also drops the heading above the tiles, since the caption under the frame says the same,
   and the text tile keeps just its name. */
@container frame (max-width:480px){
  .wall{grid-template-columns:repeat(2,1fr)}
  .wall figure{border-radius:5px}
  /* a solid strip: over a small tile a fade leaves the name on top of the page's own words */
  .wall figcaption{font-size:11px;letter-spacing:0;padding:5px 7px 4px;background:rgba(7,7,10,.94)}
  .wall .txt{gap:5px;padding:0 8%}
  .wall .txt figcaption{font-size:15px}
  .wall .txt span{font-size:11px;line-height:1.3}
  .hist.tm-on .e6{padding:6px}
  .hist.tm-on .wall-head{display:none}
  .hist.tm-on .wall{grid-template-rows:repeat(3,1fr);gap:5px}
  .hist.tm-on .wall .txt span{display:none}
}

/* =====================================================
   WORK
   ===================================================== */
.work{background:#050508;padding:160px 64px;border-top:1px solid rgba(255,255,255,.07)}
.work-in{max-width:1240px;margin:0 auto}
.work-head{margin-bottom:46px;max-width:760px}
.work .kick,.contact .kick{margin-bottom:16px}
.work h2,.contact h2{font:800 clamp(32px,4.4vw,64px)/1.02 'Bricolage Grotesque',sans-serif;letter-spacing:-.025em}
.work-head p{color:#b9b9c6;font-size:18px;line-height:1.5;margin-top:14px}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tile{display:flex;flex-direction:column;border-radius:16px;overflow:hidden;border:1px solid #26262f;background:#0d0d12;transition:transform .35s cubic-bezier(.2,.9,.2,1),border-color .3s,box-shadow .35s}
/* only the tiles that are links lift; LSP Platform is not one */
a.tile:hover{transform:translateY(-6px);border-color:var(--a);box-shadow:0 22px 60px -22px var(--a)}
.shot{aspect-ratio:16/10;overflow:hidden;background:#111;position:relative}
.shot img{width:100%;height:100%;object-fit:cover;object-position:left top;display:block;transition:transform .6s}
a.tile:hover .shot img{transform:scale(1.04)}
.txtshot{display:flex;flex-direction:column;justify-content:center;gap:8px;padding:0 10%;background:radial-gradient(80% 90% at 80% 10%,rgba(0,229,255,.28),transparent 70%),#0b0b10}
.txtshot b{font:800 28px/1 'Bricolage Grotesque',sans-serif;letter-spacing:-.02em}
.txtshot span{font-size:13px;color:#b9b9c6;line-height:1.4}
.meta{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.meta em{font:500 11px 'JetBrains Mono',monospace;letter-spacing:.16em;color:var(--a);font-style:normal}
.meta h3{font:800 24px/1.1 'Bricolage Grotesque',sans-serif;letter-spacing:-.02em}
.meta p{font-size:15px;line-height:1.45;color:#c2c2ce}
.chip{margin-top:10px;align-self:flex-start;font:500 11px 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;padding:7px 10px;border-radius:999px;border:1px solid var(--a);color:var(--a)}
@media (max-width:1040px){.tiles{grid-template-columns:repeat(2,1fr)}}

/* =====================================================
   ABOUT
   ===================================================== */
.about{background:#07070a;padding:170px 64px;color:#fff;border-top:1px solid rgba(255,255,255,.07)}
.about-in{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:260px 1fr;gap:56px;align-items:center}
.portrait{position:relative}
.portrait::before{content:"";position:absolute;inset:-12px;border-radius:30px;background:linear-gradient(135deg,#b9ff66,#00e5ff 50%,#ff1fa8);filter:blur(28px);opacity:.5}
.portrait img{position:relative;display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:22px;border:1px solid rgba(255,255,255,.2)}
.about .kick{margin-bottom:16px}
.about h2{font:800 clamp(30px,3.6vw,52px)/1.03 'Bricolage Grotesque',sans-serif;letter-spacing:-.025em}
.about p{color:#c9c9d2;font-size:19px;line-height:1.55;margin-top:16px;max-width:620px}
.about .btn{display:inline-block;margin-top:26px}

/* =====================================================
   HIRE ME
   ===================================================== */
.contact{background:radial-gradient(60% 70% at 100% 100%,rgba(255,31,168,.2),transparent 70%),radial-gradient(50% 60% at 0% 0%,rgba(0,229,255,.14),transparent 70%),#07070a;padding:170px 64px 190px;border-top:1px solid rgba(255,255,255,.07)}
.contact-in{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.contact p{color:#c9c9d2;font-size:19px;line-height:1.55;margin-top:16px;max-width:440px}
.offers{max-width:1080px;margin:0 auto 110px}
.offer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px}
.offer{position:relative;overflow:hidden;padding:28px 24px 26px;border-radius:18px;background:rgba(13,13,18,.78);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.offer::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:var(--a)}
.offer em{font:500 11px 'JetBrains Mono',monospace;letter-spacing:.16em;color:var(--a);font-style:normal}
.offer h3{font:800 23px/1.12 'Bricolage Grotesque',sans-serif;letter-spacing:-.02em;margin:12px 0 10px}
.offer p{font-size:15.5px;line-height:1.5;color:#c2c2ce;margin:0;max-width:none}
.shirts{margin-top:24px;font:500 12px 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:#9a9aa8}
.shirts b{color:#b9ff66;font-weight:500}
.contact h2.h2s{font-size:clamp(28px,3.4vw,48px)}
.form{display:flex;flex-direction:column;gap:16px;padding:28px;border-radius:20px;background:rgba(13,13,18,.78);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.form label{display:flex;flex-direction:column;gap:7px;font:500 11px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#b9b9c6}
.form input,.form textarea{font:400 17px 'Bricolage Grotesque',sans-serif;color:#fff;background:#07070a;border:1px solid #33333f;border-radius:10px;padding:13px 14px;outline:none;resize:vertical}
.form input:focus,.form textarea:focus{border-color:#b9ff66;box-shadow:0 0 0 3px rgba(185,255,102,.18)}
/* a box form.js marked as wrong, focused or not, until the visitor edits it */
.form input[aria-invalid="true"],.form textarea[aria-invalid="true"]{border-color:#ff1fa8;box-shadow:0 0 0 3px rgba(255,31,168,.18)}
.form .btn{border:0;cursor:pointer;align-self:flex-start;margin-top:4px}
/* the answer after a send (form.js fills it); it may stand alone once the form is hidden */
.form-status{margin-top:16px;padding:24px 28px;border-radius:20px;background:rgba(13,13,18,.78);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font:400 17px/1.55 'Bricolage Grotesque',sans-serif;color:#f6f1e7}
.form[hidden]+.form-status{margin-top:0}
.form-status a{color:#b9ff66;text-decoration:underline;text-underline-offset:3px}
.form-status a:hover{color:#fff}
.foot{padding:26px 64px 60px;font:500 12px 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:#6d6d7a;background:#07070a;text-align:center}

/* =====================================================
   NOT FOUND PAGE
   ===================================================== */
.lost{min-height:100vh;display:flex;align-items:center;padding:64px;background:radial-gradient(60% 70% at 100% 100%,rgba(255,31,168,.2),transparent 70%),radial-gradient(50% 60% at 0% 0%,rgba(0,229,255,.14),transparent 70%),#050508;color:#f6f1e7}
.lost-in{width:100%;max-width:1080px;margin:0 auto}
.lost h1{font:800 clamp(48px,8vw,112px)/.98 'Bricolage Grotesque',sans-serif;letter-spacing:-.022em;width:max-content;max-width:100%;background:linear-gradient(90deg,#b9ff66,#00e5ff 55%,#ff1fa8);-webkit-background-clip:text;background-clip:text;color:transparent}
.lost p{max-width:560px;font:400 20px/1.5 'Bricolage Grotesque',sans-serif;color:#d6d6e0;margin-top:22px}
.lost .btn{display:inline-block;margin-top:28px}

/* =====================================================
   LESS MOTION
   ===================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .marq .rowx{animation:none}
  .tile,.shot img,.wall figure{transition:none}
}

/* =====================================================
   TOUCH: phones at any width, and narrow screens
   ===================================================== */
/* Every link and button at least 44px tall, without moving anything on a wider layout. */
@media (max-width:760px),(pointer:coarse){
  .nav nav a{display:flex;align-items:center;min-height:44px}
  .shirts a{display:inline-flex;align-items:center;min-height:44px}
  /* inline padding grows the link's touch area and leaves the lines where they are */
  .form-status a{padding:12px 0}
  /* 44px tall in the space of the old 34 */
  #rng{height:44px;margin:-5px 0}
  /* the labels' centers line up with the thumb's, which travels 22px in from each end */
  .time .ticks{padding:0 8px}
  /* The thumb is 44px across to touch and still looks like the 26px disc: the white disc and its
     dark ring sit in the padding box, the glow fills the transparent border and spills past it. */
  #rng::-webkit-slider-thumb{box-sizing:border-box;width:44px;height:44px;margin-top:-20px;border:7px solid transparent;border-radius:50%;background:linear-gradient(#fff,#fff) padding-box,radial-gradient(circle closest-side,rgba(255,255,255,.29) 68%,rgba(255,255,255,.255) 73%,rgba(255,255,255,.19) 82%,rgba(255,255,255,.15) 91%,rgba(255,255,255,.11) 100%) border-box;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 6px #07070a,0 0 14px rgba(255,255,255,.22)}
  #rng::-moz-range-thumb{box-sizing:border-box;width:44px;height:44px;border:7px solid transparent;border-radius:50%;background:linear-gradient(#fff,#fff) padding-box,radial-gradient(circle closest-side,rgba(255,255,255,.29) 68%,rgba(255,255,255,.255) 73%,rgba(255,255,255,.19) 82%,rgba(255,255,255,.15) 91%,rgba(255,255,255,.11) 100%) border-box;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 6px #07070a,0 0 14px rgba(255,255,255,.22)}
}

/* =====================================================
   UP TO 1219 WIDE, OR SHORT: the top section grows with its words
   ===================================================== */
/* The desktop centers the headline block on a fixed-height section, which cannot hold a tall stack:
   on a small phone, or any phone held sideways, it ran over the nav and the ticker. Here the nav,
   the block and the ticker stack, and the section is at least one screen tall.
   Under 1212px the desktop row squeezes the number boxes until their labels take three and four
   lines (and on a tablet held upright, the sentence into a column 175px wide), so up to 1219 the
   row stacks: the sentence at its desktop measure, the buttons, then the three boxes in one row,
   each label on its two lines. */
@media (max-width:1219px),(max-height:500px){
  .hero{height:auto;min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
  .nav{position:relative;flex:none}
  .hbody{position:relative;left:auto;right:auto;top:auto;transform:none;margin:auto 0;padding:24px 64px 44px}
  .marq{position:relative;flex:none}
  .row{flex-direction:column;align-items:flex-start;gap:24px}
  .stats{margin-left:0}
  .stat span{font-size:11px}
  /* The desktop shade darkens the left 40%, where its words sit. Stacked, the sentence runs past the
     middle of the screen (61% at 1024), so the shade runs the full width, lighter toward the right,
     where the ink still shows. */
  .shade{background:linear-gradient(90deg,rgba(5,5,8,.86) 0%,rgba(5,5,8,.58) 55%,rgba(5,5,8,.32) 100%),linear-gradient(0deg,rgba(5,5,8,.75),rgba(5,5,8,0) 30%)}
}

/* A phone held sideways: its headline is near 63px, so the 6px offsets come down to about the share
   of the letter height Ryan approved on the desktop. */
@media (max-height:500px) and (pointer:coarse) and (orientation:landscape){
  .hero{--k:.6}
  /* the corner marks stay hidden on a phone, either way up */
  .reg{display:none}
}

/* =====================================================
   HISTORY IN ONE COLUMN: up to 999 wide, unless the screen is short and held sideways
   ===================================================== */
/* Under 1000px the desktop's two columns leave the frame under 480px (248 on a tablet held upright).
   Here it is one column: the heading and its line, the frame as wide as the column, the year and the
   caption under it, then the slider. The two columns step aside so their pieces can be reordered.
   The column stops at 760. On a screen too short for that it narrows to the width whose frame, year,
   caption and slider fit one screen, but never under 480px (or the screen's own column, if that is
   narrower), so on a short screen the section is simply taller than one screen.
   The condition is the exact complement of the short sideways block further down: inside the same
   width, that block's own query with "not" in front, so no size falls between the two or into both. */
@media (max-width:999px){
@media not all and (max-height:500px) and (orientation:landscape){
    .hist{min-height:0;display:block}
    .hist-in,.hist:not(.tm-on) .hist-in{display:flex;flex-direction:column;align-items:stretch;gap:30px;max-width:min(760px,max(calc((100vh - 300px)*1.6),480px));max-width:min(760px,max(calc((100svh - 300px)*1.6),480px))}
    .hist:not(.tm-on) .hl{position:static}
    .hist.tm-on .hist-in{gap:0}
    .hist.tm-on .hl,.hist.tm-on .hr{display:contents}
    .hist.tm-on .hl .kick{order:1}
    .hist.tm-on .hl h2{order:2}
    .hist.tm-on .hl p{order:3}
    .hist.tm-on .win{order:4;margin-top:30px}
    .hist.tm-on .yr{order:5;margin-top:22px}
    .hist.tm-on .cap{order:6}
    .hist.tm-on .time{order:7}
    .win,.time{max-width:none}
    .time{width:100%}
}
}

/* =====================================================
   UP TO 960 WIDE: the lower sections regroup
   ===================================================== */
/* Under about 950px the three offers squeeze under 260px each, the About words under 480 and the
   form's boxes under 300, so each goes to one column. */
@media (max-width:960px){
  .offer-grid{grid-template-columns:1fr}
  .about-in{grid-template-columns:1fr;gap:36px}
  /* the desktop's grid column held the portrait at 260px; stacked, it keeps that size */
  .portrait{max-width:260px}
  .contact-in{grid-template-columns:1fr;gap:40px}
}

/* =====================================================
   PHONE
   ===================================================== */
@media (max-width:760px){
  /* the headline's offsets at about half: Ryan judged 6px on a desktop headline near 107px tall */
  .hero{--k:.5}
  .nav{padding:0 22px;gap:14px}
  .nav nav{gap:14px}
  .nav a:not(.cta){display:none}
  .nav .cta{display:flex;align-items:center;min-height:44px;padding:0 18px}
  .reg{display:none}
  .hbody{padding:16px 22px 40px}
  .kick{font-size:11px;letter-spacing:.12em;margin-bottom:16px}
  /* sized so the longest line, "real businesses", spans most of the column */
  .hx{font-size:clamp(34px,calc(12.9vw - 5.7px),56px)}
  .row{margin-top:22px}
  .sub{font-size:17px}
  .btns{margin-top:22px}
  /* side by side when both fit, otherwise each the full width */
  .btns .btn{flex:1 1 auto;text-align:center;padding:15px 18px}
  .stats{width:100%;padding:16px 18px}
  .stat b{font-size:30px}
  .stat span{letter-spacing:.08em}

  .hist{padding:64px 22px 56px;min-height:0;display:block}
  .hl p{font-size:16px}
  .hist:not(.tm-on) .view{gap:36px}
  .hist.tm-on .win{margin-top:24px}
  .hist.tm-on .yr{margin-top:14px}
  .yr{font-size:54px}
  .cap{margin-top:4px;letter-spacing:.04em}
  .chrome{height:34px;gap:6px;padding:0 12px}
  .chrome i{width:9px;height:9px}
  .chrome .url{height:22px;margin-left:8px;padding:0 10px;font-size:11px}
  .time{padding:8px 0 0}
  #rng{margin:0}
  .time .ticks{font-size:11px;letter-spacing:.02em}
  /* the 1994 console fits its frame's height */
  .mod{width:64%}

  .work{padding:72px 22px}
  .work-head{margin-bottom:32px}
  .work-head p{font-size:17px}
  .tiles{grid-template-columns:1fr;gap:18px}
  .meta{padding:16px 18px 20px}
  .meta h3{font-size:22px}
  .txtshot b{font-size:26px}

  .about{padding:72px 22px}
  .about-in{grid-template-columns:1fr;gap:30px}
  .portrait{max-width:220px}
  .about p{font-size:17px}
  .about .btn{display:block;text-align:center}

  /* the same two glows, wider than tall, so a narrow section shows corners and not a stripe */
  .contact{padding:72px 22px 80px;background:radial-gradient(150% 45% at 100% 100%,rgba(255,31,168,.2),transparent 70%),radial-gradient(130% 35% at 0% 0%,rgba(0,229,255,.14),transparent 70%),#07070a}
  .offers{margin-bottom:64px}
  .offer-grid{grid-template-columns:1fr;gap:16px;margin-top:28px}
  .offer{padding:24px 20px 22px}
  .offer h3{font-size:22px}
  .offer p{font-size:16px}
  .shirts{line-height:1.6}
  .contact-in{grid-template-columns:1fr;gap:28px}
  .contact p{font-size:17px}
  .form{padding:22px 18px}
  .form .btn{align-self:stretch;text-align:center}
  .form-status{padding:20px}
  .foot{padding:20px 22px 40px}
  .lost{min-height:100vh;min-height:100svh;padding:40px 22px}
}
/* =====================================================
   HISTORY ON A SHORT SCREEN HELD SIDEWAYS, up to 999 wide
   ===================================================== */
/* In one column the year and caption sit between the frame and its slider, and a 375px screen
   cannot show the two together. Here, on a screen 500px tall or less that is wider than it is tall,
   the two columns stay, as on the desktop, and the frame is capped by the screen's height so the
   frame and its slider fit one screen. A short screen held upright (a phone in split screen, or with
   its keyboard open) is too narrow for two columns and keeps the one-column history above. */
@media (max-width:999px) and (max-height:500px) and (orientation:landscape){
  .hist{padding:32px 64px;min-height:0}
  /* both columns start at the top, so the slider stays put while the caption beside it changes length */
  .hist-in{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px;align-items:start}
  .win,.time{max-width:max(calc((100vh - 156px)*1.6),240px);max-width:max(calc((100svh - 156px)*1.6),240px)}
  .hist:not(.tm-on) .hl{top:24px}
}
@media (max-width:760px) and (max-height:500px) and (orientation:landscape){
  .hist{padding:28px 22px}
  .hist h2{font-size:26px}
  .hl p{font-size:14px;margin-top:10px}
  .hist.tm-on .win{margin-top:0}
  .yr{font-size:44px}
}
/* Under 340px the 1994 caption took three lines and broke its year range at the dash. A touch smaller
   and unspaced, every caption fits two lines, so the slider under it never moves while it plays or under
   a finger. Under 320px it can take three again, and the box keeps room for them. */
@media (max-width:339px){
  .cap{font-size:11.5px;letter-spacing:0}
}
@media (max-width:319px){
  .cap{min-height:52px}
}
/* Three number boxes cannot share a row with labels at 11px, so they stack: number, then label. */
@media (max-width:560px){
  .stats{display:grid;grid-template-columns:auto 1fr;gap:0;padding:6px 18px}
  .stat{display:contents}
  /* both cells fill their row, so the rule between rows runs straight across */
  .stat b,.stat span{display:grid;align-content:center;padding:12px 0}
  .stat b{margin:0}
  .stat span{padding-left:18px}
  .stat+.stat b,.stat+.stat span{border-top:1px solid rgba(255,255,255,.09)}
}