/* ───────────────────────────────────────────────────────────────────────────── Calendar Jockeys — shared stylesheet for every page. The logo leads. Everything sits under CJ LOGO B rather than competing with it: paper ground (the mark was drawn on white), the mark's own two colors, and a heavy grotesque instead of a serif. An earlier dark, Georgia-set version read as a prestige drama and fought the mark on sight. Motion follows the Form site: one shared --ease, IntersectionObserver reveals that run in and back out, sticky headers, and full-bleed reference art. Every moving thing is disabled under prefers-reduced-motion at the foot of this file. One stylesheet for all five pages, so a change lands everywhere at once. Header and footer markup is repeated in each HTML file — there is no build step, and navigation must never depend on JavaScript to be drawn. ───────────────────────────────────────────────────────────────────────────── */ :root{ --paper:#f6f3ed; --card:#fffdf9; --ink:#16171b; --mid:#5d6068; --faint:#767981; /* Sampled from the dimensional title art (REFERENCES/00-ACTIVE-EP01/Title CLEAN.png): blue #5078A0, orange #DC8C3C. The earlier flat logo's vivid #3f98f8/#f89c00 fought it. --blue-dk / --orange-dk are the darkened variants used for TEXT on paper, because the brand colours themselves do not clear 4.5:1 against #f6f3ed. */ --blue:#5078a0; --blue-dk:#3a6489; --orange:#dc8c3c; --orange-dk:#8f560f; --line:rgba(22,23,27,.13); --ease:cubic-bezier(.22,.9,.24,1); --disp:'Archivo Black','Arial Black',system-ui,sans-serif; --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; } /* Cross-document page transitions where the browser has them. Progressive enhancement: unsupported browsers just navigate, and get the .pagein fallback. */ @view-transition{ navigation:auto } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{background:var(--paper);color:var(--ink);font:16px/1.65 var(--sans);-webkit-font-smoothing:antialiased; display:flex;flex-direction:column;min-height:100vh;overflow-x:hidden} /* height:auto is load-bearing. The width/height attributes are there so the browser reserves the right box before the file arrives, but if CSS sets only width, that height attribute becomes the used height and the picture stretches. It did exactly that. */ img{max-width:100%;display:block;height:auto} a{color:var(--blue-dk)} main{flex:1 0 auto} .wrap{max-width:1140px;margin:0 auto;padding:0 5vw} .sr{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* browsers without view transitions get a plain arrival fade */ html.novt body{animation:pagein .5s var(--ease) both} @keyframes pagein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} /* ── scroll reveals ── Elements rise in as they enter and reset as they leave, the way the Form site's chapters do. --i staggers siblings. 🔴 The hidden state is scoped to html.js, which a one-line inline script in each page's sets. Content must never depend on JavaScript to be VISIBLE — if cj.js fails to load or throws, an unscoped `.rise{opacity:0}` leaves the whole page blank. Reveals are decoration; the words are not. */ .js .rise{opacity:0;transform:translateY(20px); transition:opacity .7s var(--ease),transform .7s var(--ease); transition-delay:calc(var(--i,0) * 70ms)} .js .rise.live{opacity:1;transform:none} /* ── header ── */ header{position:sticky;top:0;z-index:30;background:rgba(246,243,237,.92); backdrop-filter:blur(12px);border-bottom:1px solid transparent; transition:border-color .3s var(--ease),transform .4s var(--ease)} /* On the landing the bar stays out of the way until the reader moves — the title art is the header up there. JS toggles .gone only on pages that have a .hero; without JS the bar is simply always visible, which is the right failure. */ header.gone{transform:translateY(-100%)} /* Landing only: fixed, not sticky. A sticky header keeps its layout slot when translated away, which left a paper-coloured strip above the hero art. Fixed overlays the art, so hiding it leaves nothing behind. Interior pages stay sticky and always visible. */ .hashero header{position:fixed;left:0;right:0;top:0} header.stuck{border-bottom-color:var(--line);box-shadow:0 6px 24px rgba(22,23,27,.06)} .hin{max-width:1140px;margin:0 auto;padding:10px 5vw;display:flex;align-items:center;gap:16px} /* Text wordmark. The dimensional title art does not survive being 40px tall — it turned to mush in the nav — so the bar carries type in the two brand colours. */ .wordmark{display:flex;align-items:baseline;gap:7px;text-decoration:none;flex:none; font:400 17px/1 var(--disp);letter-spacing:-.01em;text-transform:uppercase} .wordmark b{font-weight:400;color:var(--blue-dk)} .wordmark i{font-style:normal;color:var(--orange-dk)} .hin nav{margin-left:auto;display:flex;gap:22px;flex-wrap:wrap;justify-content:flex-end} .hin nav a{position:relative;color:var(--mid);text-decoration:none;font-size:12.5px;letter-spacing:.1em; text-transform:uppercase;font-weight:700;padding:6px 0;transition:color .25s var(--ease)} .hin nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--orange); transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)} .hin nav a:hover{color:var(--ink)} .hin nav a:hover::after,.hin nav a.on::after{transform:scaleX(1)} .hin nav a.on{color:var(--ink)} @media (max-width:820px){ .hin{flex-wrap:wrap;gap:6px;padding:8px 5vw} .wordmark{font-size:15px} .hin nav{width:100%;margin-left:0;justify-content:flex-start;gap:15px;padding-bottom:2px} .hin nav a{font-size:11px;letter-spacing:.06em} } /* ── home hero ───────────────────────────────────────────────────────────────── The poster's own artwork, without its baked-in title, as a full-bleed ground. The wide plate was generated FROM the poster rather than cropped out of it: the poster is 1024x1536, so a hero-shaped crop throws away the towering wall that is the whole point AND still needs a ~2x upscale to cover a desktop viewport. The plate is composed with the two men RIGHT of centre, which is what leaves the left third clean for the logo and the copy. Do not flip or re-centre it. ── */ .hero{position:relative;overflow:hidden;background:#0a0c14;color:#fff;isolation:isolate} .hero .bg{position:absolute;inset:-10% 0 -10% 0;z-index:-2;will-change:transform; background:url('/assets/hero-wall.jpg') center 46%/cover no-repeat} .hero::after{content:"";position:absolute;inset:0;z-index:-1;background: linear-gradient(180deg,rgba(6,8,14,.66) 0%,rgba(6,8,14,.30) 30%,rgba(6,8,14,.14) 58%,rgba(6,8,14,.66) 100%)} .hin2{position:relative;max-width:1140px;margin:0 auto;padding:64px 5vw 200px;text-align:center} .hin2 .copy{max-width:none} .eyebrow{font:700 11.5px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--orange)} .hin2 h1{margin:16px 0 0} .hin2 h1 img{width:min(560px,92%);margin:0 auto;filter:drop-shadow(0 18px 40px rgba(0,0,0,.5))} .logline{margin-top:18px;font-size:17.5px;line-height:1.62;color:rgba(255,255,255,.84)} .logline b{color:#fff;font-weight:600} .cta{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap;justify-content:center} .hero .btn-b{border-color:rgba(255,255,255,.42);color:#fff} .hero .btn-b:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.08)} @media (max-width:900px){ .hin2{padding:64px 5vw 72px} .hin2 h1 img{width:min(330px,88vw)} .logline{margin-top:20px;font-size:17px} .cta{margin-top:26px} .hin2{padding:52px 5vw 150px} } /* ── interior page header: full-bleed reference art ── */ .phead{position:relative;overflow:hidden;background:var(--ink);color:#fff;isolation:isolate} .phead .bg{position:absolute;inset:-12% 0 -12% 0;background-size:cover;background-position:center; will-change:transform;z-index:-2} .phead::after{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(90deg,rgba(12,13,16,.94) 0%,rgba(12,13,16,.74) 46%,rgba(12,13,16,.42) 100%)} .phead .in{max-width:1140px;margin:0 auto;padding:88px 5vw 84px} .phead .kick{color:var(--orange)} .phead h1{font:400 clamp(32px,5.2vw,56px)/1.04 var(--disp);margin-top:14px;letter-spacing:-.02em;color:#fff; max-width:20ch} .phead .lede{margin-top:18px;color:rgba(255,255,255,.86)} @media (max-width:760px){ .phead .in{padding:54px 5vw 52px} .phead::after{background:linear-gradient(180deg,rgba(12,13,16,.72) 0%,rgba(12,13,16,.9) 100%)} } /* ── buttons ── */ .btn{display:inline-block;padding:15px 26px;border-radius:6px;text-decoration:none; font:700 12.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;border:0;cursor:pointer; transition:transform .3s var(--ease),background .25s var(--ease),box-shadow .3s var(--ease),color .25s} .btn-a{background:var(--orange);color:#231703;box-shadow:0 2px 0 var(--orange-dk)} .btn-a:hover{background:#eb9c4a;transform:translateY(-2px);box-shadow:0 6px 16px rgba(248,156,0,.4)} .btn-b{border:1.5px solid var(--line);color:var(--ink);background:none} .btn-b:hover{border-color:var(--blue);color:var(--blue-dk);transform:translateY(-2px)} .phead .btn-b{border-color:rgba(255,255,255,.4);color:#fff} .phead .btn-b:hover{border-color:#fff;color:#fff} /* ── sections ───────────────────────────────────────────────────────────────── 🔴 DO NOT DELETE THIS BLOCK. It was removed once by a careless cut while editing a neighbouring block, and the whole middle of every page silently degraded to unstyled stacked text — no cards, no columns, no kickers — and shipped that way. Everything below is load-bearing for every page. ── */ section{padding:74px 0} .kick{font:700 11.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--blue-dk)} h2{font:400 clamp(28px,4vw,42px)/1.1 var(--disp);margin-top:14px;letter-spacing:-.015em} .lede{max-width:60ch;font-size:18px;line-height:1.6;color:var(--mid);margin-top:16px} /* three cards, one per idea */ .cols{margin-top:42px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px} @media (max-width:860px){ .cols{grid-template-columns:1fr;gap:16px} } .card{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden; box-shadow:0 1px 0 rgba(22,23,27,.05); transition:transform .35s var(--ease),box-shadow .35s var(--ease)} .card:hover{transform:translateY(-5px);box-shadow:0 16px 34px rgba(22,23,27,.1)} .card .tab{height:7px} .card:nth-child(1) .tab{background:var(--blue)} .card:nth-child(2) .tab{background:var(--orange)} .card:nth-child(3) .tab{background:var(--blue)} .card .in{padding:26px 24px 28px} .card h3{font:400 20px/1.3 var(--disp);letter-spacing:-.01em} .card p{margin-top:11px;font-size:15.5px;color:var(--mid);line-height:1.62} /* ── the definition ──────────────────────────────────────────────────────────── IN the hero, not in a section under it — it has to explain the title before the visitor has scrolled anywhere. Sits on the dark plate, so it is a translucent card rather than paper. ⚠️ A calendar jockey is the CLIENT — owner ruling, 24 Aug: "the leads are NOT jockeys and must never say, sing or imply that they are." Keep any rewrite of this copy on the right side of that line. ── */ .entry{margin-top:20px;max-width:520px;position:relative;overflow:hidden;border-radius:11px; padding:22px 24px 24px;background:rgba(10,13,22,.62);backdrop-filter:blur(7px); border:1px solid rgba(255,255,255,.14)} .entry::before{content:"";position:absolute;left:0;right:0;top:0;height:5px; background:linear-gradient(90deg,var(--blue) 0 50%,var(--orange) 50% 100%)} .entry .word{font:400 clamp(21px,2.5vw,28px)/1.06 var(--disp);letter-spacing:-.02em;color:#fff} .entry .word i{font-style:normal;color:var(--orange)} .entry .pron{margin-top:9px;font:italic 14.5px/1.4 Georgia,'Times New Roman',serif; color:rgba(255,255,255,.6)} .entry .pron b{font-style:normal;font-weight:600;color:rgba(255,255,255,.8)} .entry .pron i{font-style:italic;color:rgba(255,255,255,.5)} .entry .sense{margin-top:13px;font-size:19px;line-height:1.45;color:#fff;font-weight:500} @media (max-width:640px){ .entry{padding:18px 18px 20px;margin-top:20px} .entry li{font-size:15px} } /* ── Andy's reel: the whole cast sliding across the bottom of the landing ── Owner call (Andy, 9/9): keep the horizontal scroller. Pauses on hover. The track is duplicated in JS so the -50% loop is seamless. ── */ .marq{position:relative;overflow:hidden;padding:34px 0 34px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)} .marq .track{display:flex;gap:14px;width:max-content;animation:slide 60s linear infinite} /* The reel does NOT pause on hover (owner call) — instead the tile under the cursor grows and lifts while the strip keeps moving. Vertical headroom in .marq's padding is what lets it scale without clipping against overflow:hidden. */ .marq img{width:132px;height:165px;object-fit:cover;border-radius:9px;background:#e9e6e0; border:1px solid var(--line);flex:none; transition:transform .3s var(--ease),box-shadow .3s var(--ease);position:relative} .marq img:hover{transform:scale(1.32);z-index:5; box-shadow:0 14px 34px rgba(22,23,27,.3);border-color:rgba(22,23,27,.3)} @keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ── gus & wendell ───────────────────────────────────────────────────────────── gus.jpg / wendell.jpg are SQUARE HEADSHOTS, matched on head width. Full-body crops were wrong here: each plate is framed to its own subject, so both figures filled their card and Wendell — canonically half a head TALLER — read shorter. ── */ .duo{display:grid;grid-template-columns:1fr 1fr;gap:22px} @media (max-width:760px){ .duo{grid-template-columns:1fr;gap:18px} } .who{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden; transition:transform .4s var(--ease),box-shadow .4s var(--ease)} .who:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(22,23,27,.12)} .who .shot{background:#e9e6e0;overflow:hidden} .who .shot img{width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform 1.1s var(--ease)} .who:hover .shot img{transform:scale(1.045)} .who .txt{padding:24px 24px 28px} .who .wname{font:400 30px/1 var(--disp);letter-spacing:-.02em;margin:0} .who .role{margin-top:10px;font:700 11px/1 var(--sans);letter-spacing:.17em;text-transform:uppercase} .who:nth-child(1) .role{color:var(--blue-dk)} .who:nth-child(2) .role{color:var(--orange-dk)} .who p{margin-top:14px;font-size:15.5px;line-height:1.66;color:var(--mid)} /* a line of theirs, quoted. Lines are from the shipped Episode 1 script. */ .q{margin-top:18px;padding-left:15px;font-size:17px;line-height:1.5;font-style:italic;color:var(--ink)} .q::before{content:'\201C'} .q::after{content:'\201D'} .who:nth-child(1) .q{border-left:3px solid var(--blue)} .who:nth-child(2) .q{border-left:3px solid var(--orange)} /* ── the clients ─────────────────────────────────────────────────────────────── No names on purpose: the row is funny as a lineup, and a name means nothing to someone who has not seen an episode. The tag under each one is the joke. Tiles are crops of the full-body plates — cropped to the upper body because at this size a full figure puts the face at about 35px, and the face is the gag. ── */ .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:14px} .cl{background:var(--card);border:1px solid var(--line);border-radius:9px;overflow:hidden; transition:transform .35s var(--ease),box-shadow .35s var(--ease)} .cl:hover{transform:translateY(-5px);box-shadow:0 14px 28px rgba(22,23,27,.13)} .cl .fr{overflow:hidden} .cl img{width:100%;aspect-ratio:4/5;object-fit:cover;background:#e9e6e0;transition:transform .9s var(--ease)} .cl:hover img{transform:scale(1.06)} .cl .txt{padding:11px 12px 14px} .cl .tag{display:block;font-size:12.5px;line-height:1.4;color:var(--mid)} /* the RSVP line — the second joke, and the one that makes the grid read as an invite list rather than a cast page */ .cl .rsvp{display:block;margin-bottom:6px;font:700 9.5px/1.3 var(--sans);letter-spacing:.11em; text-transform:uppercase;color:var(--faint)} .cl .rsvp::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%; margin-right:6px;vertical-align:1px;background:currentColor} .cl .rsvp.yes{color:#3f8f52} .cl .rsvp.maybe{color:var(--orange-dk)} .cl .rsvp.no{color:#b3564a} .closer{margin-top:34px;font:italic 16px/1.6 Georgia,'Times New Roman',serif;color:var(--faint); max-width:56ch} @media (max-width:520px){ .grid{grid-template-columns:repeat(2,1fr);gap:12px} .cl .txt{padding:9px 10px 12px} .cl .tag{font-size:12px} } /* ── community stories ───────────────────────────────────────────────────────── 🔴 Nothing submitted through this form appears on the page. Submissions are emailed to the team by /api/story; approved ones are pasted by hand into the STORIES array in cj.js. Never wire the form straight into the wall — this is a public box on a comedy site about difficult clients, and unread strangers' words naming real companies would be published on Form Films' domain. ── */ .storyform{max-width:720px;background:var(--card);border:1px solid var(--line);border-radius:12px; padding:30px 30px 32px} .fl{display:block;font:700 11px/1 var(--sans);letter-spacing:.15em;text-transform:uppercase; color:var(--mid);margin-bottom:9px} .fl i{font-style:normal;text-transform:none;letter-spacing:.02em;color:var(--faint);font-weight:500} .storyform textarea,.storyform input{width:100%;background:var(--paper);border:1px solid var(--line); border-radius:6px;color:var(--ink);padding:13px 14px;font:15.5px/1.55 var(--sans);resize:vertical} .storyform textarea:focus,.storyform input:focus{outline:none;border-color:var(--blue); box-shadow:0 0 0 3px rgba(63,152,248,.18)} .storyform .count{margin-top:7px;font-size:12px;color:var(--faint);text-align:right} .storyform .two{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px} @media (max-width:620px){ .storyform{padding:22px 20px 24px} .storyform .two{grid-template-columns:1fr;gap:16px} } .rights{display:flex;gap:11px;align-items:flex-start;margin-top:20px;cursor:pointer} .rights input{margin-top:4px;width:16px;height:16px;flex:none;accent-color:var(--blue)} .rights span{font-size:13px;line-height:1.55;color:var(--faint)} .storyform button{margin-top:22px} .storyform .msg{color:var(--ink)} .storyform .msg.ok{color:#2f7a44} .storyform .msg.err{color:#b3564a} .storyform .note{margin-top:16px;font-size:13px;line-height:1.55;color:var(--faint)} .stories{margin-top:34px;columns:2;column-gap:20px} @media (max-width:760px){ .stories{columns:1} } .st{break-inside:avoid;margin:0 0 20px;background:var(--card);border:1px solid var(--line); border-radius:11px;padding:22px 22px 20px;position:relative} .st::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px; background:var(--blue);border-radius:0 3px 3px 0} .st:nth-child(even)::before{background:var(--orange)} .st p{font:17px/1.62 var(--sans);color:var(--ink)} .st .by{margin-top:12px;font:700 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase; color:var(--faint)} /* reaction chips, comment-section style */ .st .reacts{margin-top:14px;display:flex;gap:8px} .st .r{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px; border:1px solid var(--line);background:var(--paper);cursor:pointer; font:500 13px/1 var(--sans);color:var(--mid); transition:transform .2s var(--ease),border-color .2s,background .2s} .st .r span{font-size:15px} .st .r b{font-weight:600} .st .r:hover{transform:translateY(-2px);border-color:var(--blue)} .st .r.on{background:#e6edf5;border-color:var(--blue);color:var(--blue-dk)} /* ── episodes ── Each episode is a card with a real thumbnail, so the page looks like a place you watch something rather than a list of links. */ .eps{display:grid;grid-template-columns:repeat(auto-fill,minmax(430px,1fr));gap:20px} @media (max-width:560px){ .eps{grid-template-columns:1fr} } .ep{display:grid;grid-template-columns:1fr;background:var(--card);border:1px solid var(--line); border-radius:12px;overflow:hidden;text-decoration:none;color:inherit; transition:transform .35s var(--ease),border-color .3s var(--ease),box-shadow .35s var(--ease)} .ep:hover{border-color:var(--blue);transform:translateY(-5px);box-shadow:0 18px 38px rgba(63,152,248,.18)} .ep .thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:#e9e6e0} .ep .thumb img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)} .ep:hover .thumb img{transform:scale(1.05)} /* play badge, drawn in CSS so there is no icon file to lose */ .ep .play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px; border-radius:50%;background:rgba(22,23,27,.72);backdrop-filter:blur(2px); transition:transform .35s var(--ease),background .3s var(--ease)} .ep .play::after{content:"";position:absolute;left:25px;top:20px; border-left:22px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent} .ep:hover .play{transform:scale(1.1);background:var(--orange)} .ep:hover .play::after{border-left-color:#231703} .ep .meta{padding:20px 22px 22px;display:flex;align-items:baseline;gap:14px} .ep .no{font:400 13px/1 var(--disp);color:var(--blue-dk);flex:none} .ep .t{font:600 18px/1.3 var(--sans)} .ep .s{margin-left:auto;font:700 11.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase; color:var(--orange-dk);flex:none} .ep.soon{cursor:default} .ep.soon:hover{border-color:var(--line);transform:none;box-shadow:none} .ep.soon:hover .thumb img{transform:none} .ep.soon .play{display:none} .ep.soon .s{color:var(--faint)} .ep.soon .thumb img{filter:grayscale(.55) brightness(.92)} .ep .epcr{padding:0 22px 16px;margin-top:-6px;font-size:12px;letter-spacing:.04em;color:var(--faint)} .epnote{margin-top:22px;font-size:16px;color:var(--mid);max-width:52ch} /* the empty state, which is the joke of the show told as a diary. Only rendered when there are no episodes listed at all. */ .diary{margin-top:32px;max-width:640px;background:var(--card);border:1px solid var(--line); border-radius:10px;overflow:hidden} .diary .hd{padding:13px 20px;background:rgba(22,23,27,.035);border-bottom:1px solid var(--line); font:700 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--faint)} .row{display:flex;gap:18px;align-items:baseline;padding:13px 20px;border-bottom:1px solid rgba(22,23,27,.07)} .row:last-child{border-bottom:0} .row .tm{font:700 12px/1.4 var(--sans);letter-spacing:.06em;color:var(--faint);flex:none;min-width:52px} .row .nm{font-size:15.5px;color:var(--mid)} .row.hit{background:rgba(248,156,0,.1)} .row.hit .tm{color:var(--orange-dk)} .row.hit .nm{color:var(--ink);font-weight:600} /* ── the definition, on paper directly under the hero ── */ .defn{position:relative;padding:56px 0 50px;border-bottom:1px solid var(--line);overflow:hidden} /* Gus and Wendell embedded in the page: cutouts standing ON the section's bottom border, flanking the definition. Sized in vw with caps so they scale with the row; hidden under 900px, where they would crowd the words that are the point of the section. */ .peek{position:absolute;bottom:0;height:auto} .peek-g{width:clamp(120px,13vw,190px);left:max(2vw,calc(50% - 620px))} .peek-w{width:clamp(72px,8vw,116px);right:max(2vw,calc(50% - 600px))} @media (max-width:900px){ .peek{display:none} } .entry2{max-width:640px;margin:0 auto;text-align:center} .entry2 .word{font:400 clamp(26px,3.6vw,40px)/1.05 var(--disp);letter-spacing:-.02em} .entry2 .word i{font-style:normal;color:var(--orange-dk)} .entry2 .pron{margin-top:10px;font:italic 15px/1.4 Georgia,'Times New Roman',serif;color:var(--faint)} .entry2 .pron b{font-style:normal;font-weight:600;color:var(--mid)} .entry2 .sense{margin-top:14px;font-size:22px;line-height:1.45;color:var(--ink);font-weight:600} .entry2 .senses{margin:18px auto 0;padding:0;list-style-position:inside;max-width:46ch;text-align:center} .entry2 .senses li{font-size:16.5px;line-height:1.6;margin-top:7px;color:var(--mid)} .entry2 .senses li::marker{color:var(--orange-dk);font-weight:700} .entry2 .usage{margin:20px auto 0;max-width:46ch;font:italic 16px/1.55 Georgia,'Times New Roman',serif; color:var(--faint)} /* ── landing section grounds ── Every landing section was sitting on the same paper and running together — "latest episode blurs right into the clients". Alternate the grounds so each section has a visible edge: card-white, then a blue-tinted wash, then paper again, then the blue signup. The borders are what make the seams read at a glance. ── */ .band-card{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .band-tint{background:#e9eef3;border-bottom:1px solid var(--line)} .band-tint .marq img{border-color:rgba(22,23,27,.18)} /* ── the show: copy laid OVER the buddy two-shot ── The photo is the section. Its subjects stand right of centre, so the copy owns the left and a left-to-right scrim keeps it readable without hiding the men. */ .showhero{position:relative;overflow:hidden;background:#1a1512} /* duo-wide.jpg is 2.5:1 with the pair BAKED into its right end and the office extending left — at band aspect there is nothing for object-fit to recompose, so the pair stays clear of the copy at every viewport width. */ .showhero .shbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:right center} .showhero::after{content:"";position:absolute;inset:0;background: linear-gradient(90deg,rgba(16,12,9,.92) 0%,rgba(16,12,9,.72) 40%,rgba(16,12,9,.18) 72%,rgba(16,12,9,.05) 100%)} .shin{position:relative;z-index:1;padding-top:84px;padding-bottom:84px} .shcopy{max-width:520px;color:#fff} .showhero .kick{color:var(--orange)} .showhero h2{color:#fff} .showhero .lede{color:rgba(255,255,255,.85)} .shquotes{margin-top:30px;display:grid;gap:18px} .shname{font:700 11px/1 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--orange)} .shname i{font-style:normal;color:rgba(255,255,255,.55);letter-spacing:.08em} .shq .q{margin-top:8px;color:rgba(255,255,255,.94);border-left-color:var(--blue)} .shq:nth-child(2) .q{border-left-color:var(--orange)} @media (max-width:820px){ .showhero .shbg{position:static;height:260px;object-position:center 25%} .showhero::after{background:none} .showhero{background:var(--ink)} .shin{padding-top:34px;padding-bottom:44px} .shcopy{max-width:none} } /* ── the latest episode on the landing: copy left, one episode card right ── */ .latest{display:grid;grid-template-columns:1fr 1.05fr;gap:52px;align-items:center} @media (max-width:860px){ .latest{grid-template-columns:1fr;gap:26px} } .latest .ep{max-width:640px} /* ── split: text beside a framed image, used on the Form Films page ── */ .split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center} @media (max-width:860px){ .split{grid-template-columns:1fr;gap:28px} } .split .txt{margin-top:16px;font-size:16.5px;line-height:1.7;color:var(--mid)} .split .txt b{color:var(--ink);font-weight:600} .dark .split .txt{color:#c9c6c0} .dark .split .txt b{color:#fff} .frame{margin:0} .frame img{width:100%;border-radius:12px;box-shadow:0 22px 48px rgba(22,23,27,.22)} .frame figcaption{margin-top:12px;font-size:13px;line-height:1.5;color:var(--faint)} .dark .frame figcaption{color:rgba(255,255,255,.55)} /* four real Form frames, on the Form Films page */ .workgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px} .workgrid img{border-radius:10px;box-shadow:0 14px 30px rgba(22,23,27,.16)} /* ── about (dark band) ── */ .dark{background:var(--ink);color:#efece6} .dark .kick{color:var(--orange)} .dark h2{color:#fff} .dark .ffmark{height:26px;width:auto;margin-top:34px;opacity:.9} .about{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start;margin-top:26px} @media (max-width:860px){ .about{grid-template-columns:1fr;gap:22px} } .about p{color:#c9c6c0;font-size:16px;line-height:1.72} .about p + p{margin-top:14px} .about b{color:#fff;font-weight:600} /* :not(.btn) matters. `.about a` (0,1,1) outranks `.btn-a` (0,1,0), so without it the link color repaints the button's label orange on an orange button — unreadable. */ .about a:not(.btn){color:var(--orange)} /* ── signup band, at the foot of every page ── */ .notify{background:var(--blue);color:#fff;padding:58px 0} .notify .kick{color:rgba(255,255,255,.8)} .notify h2{color:#fff} .notify .lede{color:rgba(255,255,255,.92);font-size:17px;margin-top:16px} .notify .ffmark{height:22px;width:auto;margin-top:30px;opacity:.9} .field{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap;max-width:560px} .field input{flex:1 1 250px;min-width:0;background:#fff;border:0;color:var(--ink); padding:16px;border-radius:6px;font:15.5px var(--sans)} .field input:focus{outline:3px solid rgba(255,255,255,.55);outline-offset:1px} .msg{margin-top:14px;font-size:15px;min-height:1.2em;font-weight:500} .msg.ok{color:#fff} .msg.err{color:#fff2c9} .msg a{color:#fff;text-decoration:underline} .fine{margin-top:14px;font-size:13.5px;color:rgba(255,255,255,.88)} /* honeypot: off-screen, never display:none, which some bots check for */ .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} footer{padding:30px 0 44px;font-size:13.5px;color:var(--faint);background:var(--paper);flex:none} footer .fin{display:flex;gap:16px;flex-wrap:wrap;align-items:center} footer a{color:var(--mid);text-decoration:none;transition:color .25s} footer a:hover{color:var(--blue-dk)} /* ── phone held sideways: the trap the Form site hit on 8/27. Type scales off viewport WIDTH while the scarce axis here is HEIGHT, so a wide short screen gets huge type in no vertical room. Key off height, never a width breakpoint. ── */ @media (orientation:landscape) and (max-height:540px){ .hin2{padding:10px 5vw 18px} .hin2 .copy{max-width:min(560px,100%)} .hin2 h1{margin-top:4px} .hin2 h1 img{width:min(196px,26vw)} /* the definition card at full size is taller than this whole viewport */ .entry{margin-top:9px;padding:10px 13px 12px;border-radius:8px} .entry .word{font-size:16px} .entry .pron{display:none} .entry .sense{font-size:14px;margin-top:8px} .logline{margin-top:7px;font-size:13.5px;line-height:1.42} .cta{margin-top:8px} .btn{padding:11px 18px;font-size:11.5px} /* the secondary button wraps to a second row on a short screen and pushes the real CTA off the fold. Drop it here. */ .cta .btn-b{display:none} section{padding:40px 0} .phead .in{padding:34px 5vw 32px} .notify{padding:40px 0} .hin{padding:6px 5vw} } /* ── motion off, for anyone who asked for it ── */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important; transition-duration:.001ms !important} .rise{opacity:1;transform:none} .marq .track{animation:none} .phead .bg{transform:none !important} }