, so the
only break opportunities in the whole row are the spaces INSIDE
the link text. Forbid those and the row becomes one unbreakable
string that runs straight off the screen -- which is exactly what
happened. Flex items give the row break points it never had. */
display:flex; flex-wrap:wrap; justify-content:center;
align-items:baseline; padding:0 14px; }
.fine a{ white-space:nowrap; }
.fine .fine-sep{ margin:0 8px; }
.fine a{ display:inline-flex; min-height:44px; align-items:center; }
}
/* ---- the site forms ------------------------------------------------- */
.form-page h1{ font-family:var(--font-form-hero); font-weight:500;
letter-spacing:.02em; line-height:1.02; text-transform:uppercase; }
.site-form{ margin-top:46px; max-width:30em; display:grid; gap:22px; }
.site-form label{ display:grid; gap:8px; font-family:var(--font-label);
font-size:12px; letter-spacing:.14em; text-transform:uppercase;
color:rgba(242,236,222,.66); }
.site-form input, .site-form textarea{
font-family:var(--font-body); font-size:17px; color:var(--bone);
background:transparent; border:0; border-bottom:1px solid var(--rule);
border-radius:0; padding:8px 0 10px; outline:none; }
.site-form input:focus, .site-form textarea:focus{ border-bottom-color:var(--ember); }
.site-form input::placeholder{ color:rgba(242,236,222,.28); }
.site-form .cta{ justify-self:start; margin-top:8px; }
.site-form .form-note{ min-height:1.4em; margin:0;
font-family:var(--font-label); font-size:12px; letter-spacing:.08em;
color:rgba(242,236,222,.62); }
/* The shared terminal form. Route-specific classes may add behaviour or
layout, but the shell, prompts, fields, focus state and response language
are owned here so Contact, Source Code and Careers cannot drift apart. */
.terminal-console{ position:relative; border:1px solid rgba(242,236,222,.22);
border-radius:2px; padding:48px clamp(20px,3vw,40px) 10px; }
.terminal-console .tui-chrome{ position:absolute; top:0;
left:clamp(16px,2.4vw,30px); transform:translateY(-50%);
padding:0 10px; background:var(--graphite); }
.terminal-console .tui-tab{ display:inline-block; padding:2px 0;
color:rgba(242,236,222,.5); line-height:1;
font-family:var(--font-grid); font-size:10px; letter-spacing:.18em;
text-transform:uppercase; }
.terminal-console > header{ margin-bottom:24px; }
/* The window tab already names the form. A second eyebrow under it repeats
the label and turns the upper-left corner into a stack of metadata. Every
terminal form therefore moves directly from its tab to its real heading. */
.terminal-console > header > .eyebrow{ display:none; }
.terminal-console > header > h2{ margin-top:0; }
.terminal-form{ max-width:none; margin-top:0; gap:0;
font-family:var(--font-grid); }
.terminal-form .term-row{ display:grid; gap:5px; margin-top:16px; }
.terminal-form .term-row:first-of-type{ margin-top:0; }
.terminal-form .term-prompt{ font-family:var(--font-grid); font-size:11px;
letter-spacing:.1em; text-transform:uppercase; color:rgba(242,236,222,.5); }
.terminal-form .term-field{ display:flex; align-items:baseline; gap:8px;
border:1px solid rgba(242,236,222,.2); padding:7px 10px; }
.terminal-form .term-field:focus-within{ border-color:var(--ember); }
.terminal-form .term-arrow{ color:rgba(242,236,222,.4); }
.terminal-form .term-slot{ position:relative; display:block; flex:1 1 auto; min-width:0;
font-family:var(--font-grid); }
.terminal-form .term-slot input,
.terminal-form .term-slot textarea,
.terminal-form .term-slot select{ display:block; width:100%; min-height:44px;
padding:8px 0; border:0; border-radius:0; outline:none;
background:transparent; color:var(--bone); font-family:var(--font-grid);
font-size:15px; letter-spacing:0; }
.terminal-form .term-slot textarea{ resize:vertical; min-height:132px;
line-height:1.5; }
.terminal-form .term-field--message{ align-items:flex-start; }
.terminal-form .term-field--message .term-arrow{ padding-top:10px; }
.terminal-form .form-help{ margin:7px 0 0; max-width:52ch;
font-family:var(--font-grid); font-size:11px; letter-spacing:.04em;
line-height:1.5; color:rgba(242,236,222,.4); }
.terminal-form .cta{ margin-top:22px; font-family:var(--font-label); }
.terminal-form .form-note{ font-family:var(--font-grid); letter-spacing:.04em; }
.terminal-form .form-note:not(:empty)::before{ content:"> "; }
/* One block caret for every shared form. Source Code ships the same element
in its markup and owns its richer validation state; the global form script
adds it to Contact and Careers and keeps it on the actual insertion point.
At rest it invites the first incomplete line instead of blinking below the
fold on the decorative closing prompt. */
.terminal-form:not(.sc-term) .term-slot input,
.terminal-form:not(.sc-term) .term-slot textarea{ caret-color:transparent; }
.terminal-form:not(.sc-term) .term-caret{ position:absolute; z-index:2;
left:0; top:50%; width:1ch; height:1.05em; background:var(--bone);
transform:translate(var(--cursor-left,0px),-50%); opacity:0;
pointer-events:none; font-family:var(--font-grid); font-size:15px; }
.terminal-form:not(.sc-term) .term-caret--textarea{ top:0;
transform:translate(var(--cursor-left,0px),var(--cursor-top,8px)); }
.terminal-form:not(.sc-term) .term-slot input:focus ~ .term-caret,
.terminal-form:not(.sc-term) .term-slot textarea:focus ~ .term-caret,
.terminal-form:not(.sc-term) .terminal-cursor-invite .term-caret{
opacity:1; animation:terminal-cursor-blink 1.06s steps(1,end) infinite; }
@keyframes terminal-cursor-blink{
0%,50%{ opacity:1; }
50.01%,100%{ opacity:0; }
}
@media (prefers-reduced-motion:reduce){
.terminal-form:not(.sc-term) .term-caret{ animation:none !important; }
}
@media (max-width:760px){
.terminal-console{ padding:42px 14px 8px; }
.terminal-console > header{ margin-bottom:18px; }
.terminal-form .term-prompt{ font-size:12px; }
.terminal-form .term-slot input,
.terminal-form .term-slot textarea,
.terminal-form .term-slot select{ font-size:16px; }
.terminal-form:not(.sc-term) .term-caret{ font-size:16px; }
.terminal-form .term-row{ margin-top:12px; }
.terminal-form .term-slot textarea{ min-height:150px; }
}
/* ---- contact -------------------------------------------------------
Two routes, because the page has two jobs: qualified client work goes to
Discovery; every other legitimate reason to reach Regen8 gets a short
note. The rule between them is information architecture, not decoration. */
.contact-page{ padding-top:clamp(76px,9vw,132px); }
.contact-head h1{ margin-top:14px; max-width:none;
font-size:clamp(36px,5.2vw,82px); white-space:nowrap;
overflow-wrap:normal; word-break:normal; }
.contact-head .turn{ max-width:42ch; }
.contact-grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(320px,7fr);
gap:clamp(54px,8vw,132px); margin-top:clamp(76px,10vw,148px);
align-items:start; }
.contact-grid h2{ margin:12px 0 0; font-size:clamp(27px,3vw,42px); max-width:13ch; }
.contact-path{ position:sticky; top:148px; padding-top:2px; }
.contact-path > p:not(.eyebrow):not(.contact-direct){ margin:22px 0 0; max-width:38ch;
font-size:16px; line-height:1.62;
color:rgba(242,236,222,.72); }
.contact-path .read{ display:inline-block; margin-top:26px; }
.contact-direct{ margin:40px 0 0; padding-top:18px; border-top:1px solid var(--rule);
max-width:34ch; font-size:13px; line-height:1.55;
color:rgba(242,236,222,.5); }
.contact-direct a{ color:var(--bone); text-decoration-color:var(--ember);
text-underline-offset:4px; }
.contact-talent{ margin:16px 0 0; max-width:34ch; font-size:13px; line-height:1.55;
color:rgba(242,236,222,.5); }
.contact-talent a{ color:var(--bone); text-decoration-color:var(--ember);
text-underline-offset:4px; }
.contact-note{ padding-left:clamp(28px,4vw,64px); border-left:1px solid var(--rule); }
/* Contact speaks through the same terminal-window component as Source Code,
but remains a general inquiry form. The visual contract is shared; the
Source Code-only LinkedIn requirement, boot sequence, and caret logic are
intentionally not inherited. */
@media (max-width:760px){
.contact-page{ padding-top:64px; }
.contact-head h1{ max-width:none; font-size:clamp(20px,6.2vw,34px);
white-space:nowrap; overflow-wrap:normal; word-break:normal; }
.contact-grid{ grid-template-columns:1fr; gap:64px; margin-top:72px; }
.contact-path{ position:static; }
}
/* The Source Code: intro leads on the left, the form stands in the trail
column, which also keeps its button clear of the fixed wordmark that
owns the page's bottom-left corner. */
/* Static: the whole page is one screen on an ordinary desktop. The doc
padding that gives long pages their air is collapsed here and spacing is
tightened so the form fits beside the intro without a scrollbar.
The bottom padding is NOT zero, though. The wordmark, footer links and
tagline are fixed to the page's bottom edge. On a shallow desktop the
terminal is taller than the viewport, so the last scroll position must
reserve the full footer stack rather than letting the frame end behind its
44px rabbit target. 160px clears that stack and leaves a deliberate gap.
`min-height`, not `height` with `overflow:hidden`: on a short viewport the
locked version does not shrink the form, it CLIPS it, and the clipped part
is the submit button. Scrolling on a small screen is the correct failure. */
body[data-route="source-code"] .route--doc{ padding-top:72px; padding-bottom:160px; }
body[data-route="source-code"]{ min-height:100svh; }
.sc-page{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,30em);
column-gap:clamp(48px,6vw,96px); padding-bottom:0; }
.sc-page h1{ margin-bottom:6px; }
.sc-page .site-form{ gap:16px; }
.sc-page > header{ grid-column:1 / -1; }
.sc-page .jr-body{ grid-column:1; }
.sc-page .site-form{ grid-column:2; grid-row:2; align-self:start; margin-top:8px; }
@media (max-width:1080px){
/* Narrow screens stack, and stacking needs to scroll again. */
body[data-route="source-code"]{ overflow:auto; height:auto; }
body[data-route="source-code"] .route--doc{ padding-bottom:max(170px, var(--foot-clear)); }
.sc-page{ display:block; }
}
/* ---- Let's Talk: the calendar on our ground -------------------------- */
.lt-page{ padding-bottom:max(150px, var(--foot-clear, 0px)); }
.lt-page .jr-body{ max-width:46em; }
.lt-embed{ width:100%; min-width:0; margin-top:40px; max-width:1040px;
border:1px solid var(--rule); background:var(--graphite); }
.lt-stage{ width:100%; min-width:0; height:700px; }
.lt-launch{ width:100%; min-width:0; height:100%; display:grid;
align-content:center; justify-items:start;
padding:clamp(28px,5vw,64px); border:1px solid var(--rule); }
.lt-launch[hidden]{ display:none; }
.lt-launch p:not(.eyebrow){ max-width:38ch; font-size:18px; line-height:1.6; }
.lt-status{ min-height:1.5em; margin:12px 0 0; padding:0 14px;
font-family:var(--font-label); font-size:11px; letter-spacing:.1em;
text-transform:uppercase; color:rgba(242,236,222,.68); }
[data-calendly-host]{ width:100%; min-width:0; height:100%; outline-offset:-3px; }
[data-calendly-shell][data-state="loading"]{ cursor:progress; }
.lt-fallback{ margin:0; padding:10px 14px; border-top:1px solid var(--rule);
font-family:var(--font-label); font-size:11px; letter-spacing:.12em;
text-transform:uppercase; color:rgba(242,236,222,.5); }
.lt-fallback a{ color:var(--ember); text-decoration:none; }
/* Buttons breathe under the pointer: a subtle grow, never a colour change
the palette did not agree to. */
.cta{ transition:transform .18s ease; will-change:transform; }
.cta:hover{ transform:scale(1.045); }
.cta:active{ transform:scale(0.985); }
@media (prefers-reduced-motion:reduce){
.cta, .read, .tag, .fine, .fine-rabbit, .rabbit-line{ transition:none; }
.cta:hover, .cta:active{ transform:none; }
}
.cta:focus-visible, .jr-more:focus-visible, .back:focus-visible,
.fine a:focus-visible, .mnu-foot a:focus-visible,
.lt-fallback a:focus-visible, .fine-rabbit:focus-visible,
.rabbit-line:focus-visible, .jr-rabbit:focus-visible,
.wr-rabbit:focus-visible, [data-rabbit-hopper]:focus-visible{
outline:2px solid var(--ember); outline-offset:4px;
}
/* The calendar page used to drop the wordmark entirely, because its halo glow
sat on the embed panel and read as a smudge. Hiding it was the wrong half
of the fix -- it left the tagline alone in the opposite corner. The glow is
what offended, so the glow is what goes: on this page only, the wordmark
keeps its place and loses the drop-shadow. */
body[data-route="lets-talk"] .mark{ filter:none; }
/* ---- the phone ------------------------------------------------------ *
Everything below exists because a finger is not a pointer. A mouse hits a
10px line of type exactly; a thumb covers roughly 44 physical points and
cannot see what is under it. The rule Apple states, and the one this site
was failing on every page, is that anything tappable must occupy at least
44x44pt.
The furniture is deliberately small type, and growing the type to reach 44
would wreck the page. So the type stays where it is and the HIT AREA grows
underneath it: a transparent ::after, absolutely placed, centred on the
line, 44px tall. It changes nothing visually and nothing about layout,
because an absolutely positioned child takes no space. Hover and focus
styles keep working, since the pseudo-element belongs to the link. */
@media (max-width:760px){
/* .mark and .tag are deliberately NOT in this list. Both are
position:fixed on the home route, and fixed is already a positioning
context, so they need nothing here -- while relative, declared later in
the cascade than home.css, OVERRIDES the fixed and drops them into the
flow. That put the wordmark 3394px down the page and pushed the tagline
20px off the left edge. */
.fine a, .mnu-foot a, .who-link, .read, .back,
.lt-fallback a, .jr-more{ position:relative; }
.fine a::after, .mnu-foot a::after, .who-link::after, .read::after,
.back::after, .lt-fallback a::after, .jr-more::after, .mark::after,
.tag::after{
content:""; position:absolute; left:-8px; right:-8px;
top:50%; height:44px; transform:translateY(-50%);
/* the target only: no paint, and it must never eat the scroll */
background:none; }
/* "X" is one glyph wide -- eight pixels. It needs the room taken sideways
as well, and the row needs the gap to carry it without the two targets
touching. */
.who-links{ gap:36px; }
.who-link::after{ left:-18px; right:-18px; }
/* The wordmark is the persistent way home. 104x37 was under the floor on
the short axis only, so the target grows downward into the inset that
viewport-fit=cover just gave us. */
.mark::after{ height:48px; }
/* Micro-labels: 9 and 10px is print-caption size on a screen held at
arm's length. 11px is the floor for letter-spaced uppercase, which
reads a size larger than its nominal value. */
.tag, .mnu-foot{ font-size:11px; }
/* A form field a thumb can land in. 39px was three short. */
.site-form input, .site-form textarea{ min-height:44px; }
.cta{ min-height:48px; }
}
/* Touch behaviour, all viewports. iOS gives a tapped link a grey box by
default, which on this palette reads as a rendering fault; it becomes the
ember instead, so a tap is acknowledged in the site's own colour. The
text-size-adjust line stops Safari inflating type when the phone turns
landscape, which was silently breaking the measure. Overscroll chaining
is off so a scrub section cannot hand its momentum to the document and
bounce the whole page. */
html{ -webkit-text-size-adjust:100%; overscroll-behavior-y:none; }
a, button, [role="button"], input, textarea, select{
-webkit-tap-highlight-color:rgba(255,90,61,.20); }
/* A long unbreakable URL -- the California Attorney General's complaint
form, 73 characters -- was pushing the privacy page 18px wider than the
phone and giving the whole document a sideways scroll. Legal copy is the
one place bare URLs are unavoidable, so they are allowed to break. */
.jr-body, .doc{ overflow-wrap:anywhere; }
/* The skip link. Off-screen until the keyboard finds it, then it lands
where the eye is already looking. It is the first tab stop on every page,
which on a site with a fixed masthead, a wordmark and a menu button is
the difference between reaching the copy in one key and reaching it in
nine. It is not visually hidden with clip: a clipped link that never
reveals is the defect this is meant to fix. */
.skip{ position:fixed; top:8px; left:8px; z-index:60;
transform:translateY(-160%); transition:transform .18s ease;
padding:12px 18px; min-height:44px; display:inline-flex;
align-items:center; background:var(--ember); color:#121212;
font-family:var(--font-label); font-size:12px; letter-spacing:.14em;
text-transform:uppercase; text-decoration:none; border-radius:2px; }
/* Arriving is instant, leaving eases. A slide-in reads nicely but for 180ms
the link is still above the fold, so the one frame where the user most
needs to know where focus went is the frame that does not show it. Focus
indication is not a place for an entrance. */
.skip:focus{ transform:translateY(0); transition:none;
outline:2px solid var(--bone); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){ .skip{ transition:none; } }
/* ---- the browser's own blue ------------------------------------------
Three things paint a blue the site never declares, all of them browser
chrome rather than anything in these files:
1. Autofill. Chrome repaints a field it has filled -- or is offering to
fill -- with its own pale blue ground and near-black text, which on a
graphite form reads as a lit blue box appearing the moment you click a
name or email field. There is no property that turns this off; the
standard answer is an inset shadow large enough to cover the field,
plus `-webkit-text-fill-color`, because `color` is overridden too. The
long transition is there because the repaint is animated.
2. The focus ring. `outline:none` is already set on these inputs, but
`:focus-visible` is worth naming explicitly so a future browser
default cannot reintroduce it. Focus stays visible: the rule under the
field turns ember, and in the terminal the whole box does.
3. The selection highlight, which defaults to the platform blue.
None of this weakens focus indication; it only stops the browser drawing
a colour that is not ours. */
.site-form input:-webkit-autofill,
.site-form input:-webkit-autofill:hover,
.site-form input:-webkit-autofill:focus,
.site-form textarea:-webkit-autofill{
-webkit-text-fill-color:var(--bone);
caret-color:var(--bone);
-webkit-box-shadow:0 0 0 60px var(--graphite) inset;
box-shadow:0 0 0 60px var(--graphite) inset;
transition:background-color 9999s ease-in-out 0s; }
.site-form input:focus,
.site-form input:focus-visible,
.site-form textarea:focus,
.site-form textarea:focus-visible{ outline:none; box-shadow:none; }
::selection{ background:var(--ember); color:#fff; }
/* ---- the unified Regen8 lockup, top-left -----------------------------
The Stack and wordmark are one masthead signature. The footer no longer
repeats the wordmark, so this lockup is the single persistent way home.
32px is not a round number picked for tidiness -- it is the mark's own
documented floor. Below it the gaps between the four runs approach one
pixel and the interlock, which is the whole idea of the mark, closes into
two blobs. The bar is 46px tall, which leaves 7px above and below.
It follows `bar-paper`, not `floor-paper`. Those are two different
crossings: floor-paper is how far the paper has reached the BOTTOM corners
where the wordmark stands, bar-paper is whether the strip under the top
bar is paper. The mark lives in the bar, so it turns over with the nav
labels beside it and by exactly the same rule they use. */
.glyph{ --masthead-paper:var(--bar-paper,0);
--masthead-ink:clamp(0, (var(--masthead-paper) - .42) / .16, 1);
position:fixed; top:7px; left:32px; z-index:23;
display:flex; align-items:center; gap:5px;
height:32px; text-decoration:none;
/* The crossing, not a switch.
The nav labels beside it flip on a class, and for a line of type
that is fine: it crosses in one step and nobody sees the seam. The
mark is a solid shape holding four one-pixel gaps, and flipping it
bone-to-ink in a single frame while the ground behind is only
halfway across is exactly the flicker that gets noticed. So it
mixes through --bar-paper, which nav.js publishes as how far the
paper has actually crossed the mark's own box, 0 to 1. */
color:color-mix(in srgb, rgba(242,236,222,.92),
rgba(18,18,18,.86) calc(var(--masthead-ink) * 100%));
/* The halo exists only to separate bone from moving film. Paper needs
black ink and no halo; turning the halo white on the way there made
the mark look embossed. Its alpha now decays continuously to zero. */
filter:
drop-shadow(0 1px 2px rgb(13 12 11 / calc(.92 * (1 - var(--masthead-paper)))))
drop-shadow(0 0 10px rgb(13 12 11 / calc(.62 * (1 - var(--masthead-paper)))));
/* No transition on COLOUR: --bar-paper already tracks the hand, and
easing it would only make the ink lag the ground it stands on.
Transform is a different matter -- it never changes while
scrolling, and it is what carries the mark into the takeover. */
transition:transform .32s ease;
/* Where the drawing actually sits inside its 46px tap box, and how
big it is. Written down because the takeover has to land the mark
on a corner, and a corner is a fact about the ART, not about the
padding wrapped round it. */
--art-x:32px; --art-y:7px; --art-w:121px; --art-h:32px; }
body[data-route="home"] .glyph{
--masthead-paper:max(var(--bar-paper,0),var(--film-white,0)); }
.glyph-svg{ display:block; height:84%; width:auto; flex:none; }
.glyph .mark-svg{ display:block; height:100%; width:auto; flex:none; }
.glyph:hover{ color:var(--ember); }
.glyph:focus-visible{ outline:2px solid var(--ember); outline-offset:3px; }
/* A 32px mark is under the 44pt tap minimum, so the hit area grows around it
without moving it: padding pushes the box out to 46x46 and the offsets pull
the drawing back to where it was. `position:fixed` is already a positioning
context, so this needs no `relative` -- the rule that added one to .mark and
.tag is what once dropped both of them out of their corners. */
.glyph{ padding:7px 8px; top:0; left:24px; box-sizing:content-box; }
@media (max-width:760px){
/* Phone: the lockup keeps the same proportions at the tighter masthead
scale while preserving a full-size touch target. */
.glyph{ height:28px; top:0; left:10px; padding:9px 10px;
--art-x:20px; --art-y:9px; --art-w:106px; --art-h:28px; }
}
/* ---- the mark inside the takeover ------------------------------------
With the menu open the mark used to be simply gone: the takeover is
z-index 30 and the mark sits at 23, so the one piece of furniture that
says whose site this is went missing exactly when the site was being
navigated. It rides above the takeover now, in the free corner -- the
menu's own links stack bottom-LEFT and the close button is top-right --
and it turns ember, because in there it is the only mark on a flat ground
and ember is what this site uses for the one thing that matters.
It travels rather than teleports. The distance is computed from the
viewport and the art's own metrics, so the drawing lands on the corner
with the same insets the menu's footer uses on the other side: mirrored,
not approximately mirrored. Transform rather than swapping top/left for
bottom/right, because auto values do not interpolate and a jump across
the screen is the one thing this would not survive.
dvh, not vh: the takeover is fixed to the visual viewport, and on a phone
with the URL bar showing they are not the same number. */
html.mnu-open .glyph{
--mnu-r:clamp(24px, 8vw, 90px); /* mirrors .mnu-foot's left inset */
--mnu-b:22px; /* and its bottom */
z-index:32;
color:var(--ember);
filter:none;
transform:translate(calc(100vw - var(--mnu-r) - var(--art-w) - var(--art-x)),
calc(100dvh - var(--mnu-b) - var(--art-h) - var(--art-y)));
}
html.mnu-open .glyph:hover{ color:var(--ember); }
@media (prefers-reduced-motion:reduce){
.glyph{ transition:none; }
}
/* ---- the journal ----------------------------------------------------
The index is a dated list, not a grid of cards. Cards would make five
entries look like a product catalogue and would need images the writing
does not have; a ruled list says "these are notes, in order", which is
what they are, and it reads the same with two entries or forty.
Everything here uses the tokens the rest of the site already carries, so
an entry inherits the page rather than arriving with its own styling. */
.jr-head{ max-width:52ch; margin:0 0 12px; }
.jr-head h1{ margin:14px 0 0; }
.jr-list{ list-style:none; margin:0; padding:0; counter-reset:none; }
.jr-list li{ border-top:1px solid var(--rule); }
.jr-list li:last-child{ border-bottom:1px solid var(--rule); }
/* Editorial rows. The whole row is the target; the image is a real plate,
not a thumbnail, and the sides alternate down the page. */
.jr-row .stagger{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr);
gap:0 clamp(40px,5vw,84px); align-items:center;
padding:clamp(40px,5vw,64px) 0; text-decoration:none; color:inherit; }
.jr-plate{ grid-column:2; grid-row:1; line-height:0; aspect-ratio:4/3; overflow:hidden; }
.jr-plate img{ width:100%; height:100%; object-fit:cover; display:block;
border:1px solid var(--rule); }
.jr-text{ grid-column:1; grid-row:1; display:block; }
.jr-row.flip .jr-plate{ grid-column:1; }
.jr-row.flip .jr-text{ grid-column:2; }
.jr-text time{ display:block; font-family:var(--font-label); font-size:12px;
letter-spacing:.14em; text-transform:uppercase;
color:rgba(242,236,222,.5); }
.jr-text h2{ margin:14px 0 0; font-size:clamp(24px,2.6vw,36px);
line-height:1.16; letter-spacing:-.018em; color:var(--bone);
max-width:18ch; transition:color .18s ease; }
.jr-text p{ margin:14px 0 0; max-width:46ch;
font-size:16px; line-height:1.55; color:rgba(242,236,222,.62); }
.jr-more{ display:inline-block; margin-top:22px; font-family:var(--font-label);
font-size:12px; letter-spacing:.14em; text-transform:uppercase;
color:var(--ember); border-bottom:1px solid rgba(255,59,24,.4);
padding-bottom:4px; }
.jr-list a:hover h2,
.jr-list a:focus-visible h2{ color:var(--ember); }
.jr-list a:focus-visible{ outline:1px solid var(--ember); outline-offset:6px; }
/* ---- an entry ----------------------------------------------------
A single column at reading width. The film is behind it at the same low
strength every document page uses, so the measure is what keeps prose
comfortable rather than a panel drawn under it. */
.jr-entry{ max-width:none; }
.jr-entry header{ max-width:60ch; padding-bottom:34px; margin-bottom:44px;
border-bottom:1px solid var(--rule); }
/* An entry headline is not a hero. At the page h1 size a title fills the
first screen and the reader arrives at an entry having read nothing. */
.jr-entry h1{ margin:14px 0 18px; max-width:26ch;
font-size:clamp(30px,3.4vw,46px); line-height:1.1; }
.jr-entry header time{ font-family:var(--font-label); font-size:12px;
letter-spacing:.14em; text-transform:uppercase;
color:rgba(242,236,222,.5); }
.jr-entry .eyebrow a{ color:inherit; text-decoration:none;
border-bottom:1px solid var(--ember); padding-bottom:2px; }
.jr-body{ max-width:66ch; font-size:18px; line-height:1.66;
color:rgba(242,236,222,.82); }
.jr-body > * + *{ margin-top:22px; }
/* The rabbit closes every entry: monospace, half-there, warming under the
cursor. It marks the doors in docs/easter-eggs.md. */
.jr-rabbit{ display:inline-flex; min-height:44px; align-items:center;
margin-top:56px; font-family:var(--mono, ui-monospace, Menlo, monospace);
font-size:12px; letter-spacing:.08em; text-transform:uppercase;
color:rgba(242,236,222,.45); text-decoration:none; transition:color .3s; }
.jr-rabbit:hover{ color:var(--ember); }
/* The page's h1 is the entry title, so a heading written as ## in the file
becomes an h3 here and the scale starts one level down. Three levels:
a part break, a section, and a small label. */
.jr-body h2{ margin-top:60px; font-size:clamp(24px,2.2vw,30px); line-height:1.2;
letter-spacing:-.02em; color:var(--bone); }
.jr-body h3{ margin-top:52px; font-size:clamp(20px,1.8vw,24px); line-height:1.28;
letter-spacing:-.015em; color:var(--bone); }
.jr-body h4{ margin-top:40px; font-family:var(--font-label); font-weight:400;
font-size:13px; letter-spacing:.16em; text-transform:uppercase;
color:var(--ember); }
.jr-body a{ color:var(--bone); text-decoration:none;
border-bottom:1px solid var(--ember); }
.jr-body ul, .jr-body ol{ padding-left:0; list-style:none; }
.jr-body li{ position:relative; padding-left:26px; margin-top:10px; }
.jr-body ul li::before{ content:""; position:absolute; left:0; top:.72em;
width:11px; height:1px; background:var(--ember); }
.jr-body ol{ counter-reset:n; }
.jr-body ol li{ counter-increment:n; }
.jr-body ol li::before{ content:counter(n,decimal-leading-zero);
position:absolute; left:0; top:.1em;
font-family:var(--font-label); font-size:11px;
letter-spacing:.12em; color:var(--ember); }
.jr-body blockquote{ margin:34px 0; padding-left:26px;
border-left:1px solid var(--ember); }
.jr-body blockquote p{ margin:0; font-size:clamp(19px,1.7vw,23px);
line-height:1.45; letter-spacing:-.01em; color:var(--bone); }
.jr-body code{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
font-size:.88em; color:var(--bone);
background:rgba(242,236,222,.07); padding:2px 6px; }
.jr-body pre{ overflow-x:auto; padding:20px 22px; border:1px solid var(--rule); }
.jr-body pre code{ background:none; padding:0; line-height:1.5; }
.jr-body hr{ border:0; border-top:1px solid var(--rule); margin:44px 0; }
@media (max-width:760px){
/* Rows stack: plate on top, text under it. */
.jr-row .stagger{ grid-template-columns:1fr; padding:28px 0 32px; }
.jr-plate, .jr-row.flip .jr-plate{ grid-column:1; grid-row:1; margin-bottom:20px; }
.jr-text, .jr-row.flip .jr-text{ grid-column:1; grid-row:2; }
.jr-text h2{ max-width:none; }
.jr-body{ font-size:17px; }
}
/* The entry hero: the article's own image, held to a calm width and the
graphite ground. Old-site heroes vary in ratio, so the frame adapts. */
.jr-entry .jr-hero{ margin:34px 0 0; }
.jr-entry .jr-hero img{ display:block; max-width:100%; max-height:520px;
margin:0; border:1px solid var(--rule); }
/* This file follows site.css in the built stylesheet, so these overrides
must live after the journal's own hover transitions rather than relying on
specificity to win the source-order tie. */
@media (prefers-reduced-motion:reduce){
.jr-text h2, .jr-rabbit{ transition:none; }
}
/* The Source Code terminal.
The page is the end of the site's easter-egg chain: type redpill and it
rains, type regen8 and the page boils into the ramp, sit still and a rabbit
crosses, and every rabbit points toward the hidden architect. So the page a reader
reaches by going looking is not dressed as a document. The whole page is a
terminal session -- heading, copy and form in one fixed-pitch face, on one
even leading, with a block cursor blinking after the title.
The rule the interaction follows: be a terminal at ARRIVAL and at SUBMIT,
where nothing is at stake, and get out of the way in between, where someone
is actually typing. Every delightful form that fails does so by being
clever during data entry.
Nothing here replaces the form. Labels, inputs and reading order are
untouched underneath; this only changes how they are painted. With JS off
the boot line never writes, the caret never shows, and what remains is the
plain form the page has always had. */
/* ---- the face ------------------------------------------------------- */
/* --font-grid, not --font-label.
The label face is Pixotype and Pixotype is PROPORTIONAL -- fonts.css says
so where it declares it: `i` is 202 units wide and `W` is 807. A terminal
is a character grid, and a proportional face cannot make one: columns do
not line up, and a block cursor cannot be placed by counting characters.
--font-grid is IBM Plex Mono, the fixed-pitch face this site already keeps
for exactly this job -- the masthead, the menu and every picture on the
site are drawn in it. It is the terminal face, and using it here is what
makes the cursor below able to sit on the real caret. */
.sc-page,
.sc-page h1,
.sc-page .eyebrow,
.sc-page .jr-body p,
.sc-term{ font-family:var(--font-grid); }
/* One even leading down the page, which is most of what makes a screen read
as a terminal rather than as a document set in a monospace font. */
.sc-page .jr-body p{ font-size:14px; line-height:1.75; letter-spacing:.01em;
max-width:62ch; color:rgba(242,236,222,.72); }
.sc-page .jr-body p.turn{ color:var(--bone); }
.sc-page .eyebrow{ font-size:11px; letter-spacing:.22em; }
/* The title is the session's first line, but it is set in the site's label
face rather than the terminal grid: Pixotype is what the masthead and the
fine print speak, so the page's name arrives in the site's voice and the
terminal takes over from the boot line down. */
.sc-page h1{ font-family:var(--font-label); font-weight:500;
font-size:clamp(26px, 4.4vw, 52px); letter-spacing:.02em; line-height:1.06;
text-transform:uppercase; }
/* The title carries NO cursor. There is exactly one blinking block on this
page and it belongs to the thing you are meant to click. A cursor after
the heading and another on the closing prompt line read as two more places
to type, and both of them sit where nothing can be typed -- the heading,
and the foot of the page beside the wordmark. */
/* ---- the form ------------------------------------------------------- */
/* `.sc-page .sc-term`, not `.sc-term`: site.css sets `.sc-page .site-form
{ gap:16px }` and two classes beat one, so a bare `.sc-term { gap:0 }` lost
and every reserved reply row kept the full form gap -- which is what made
the session read as a loose stack of fields. */
.sc-page .sc-term{
/* The grid gap goes to zero and the rhythm is set per row instead. A
terminal is dense: a reply belongs tight under the line that caused it,
and the air belongs BETWEEN commands, not inside one. With a single form
gap every reserved reply row was pushed as far from its own field as the
next field was, and the whole thing read as a loose stack rather than a
session. */
gap:0; }
.sc-term .term-row{ margin-top:16px; }
.sc-term .term-row:first-of-type{ margin-top:12px; }
.sc-term .term-err{ margin-top:3px; }
.sc-term .cta{ margin-top:22px; font-family:var(--font-label); }
/* The boot line. Three short lines type themselves out on arrival, then the
first field takes focus. Height is reserved from the start so the page does
not jump when they land -- this page is one locked screen on desktop,
`overflow:hidden` and `100svh`, so anything that grows mid-sequence would
push the button off the bottom. */
.sc-term .term-boot{ margin:0 0 4px; min-height:3.9em;
font-size:11px; letter-spacing:.06em; line-height:1.3;
color:rgba(242,236,222,.34); white-space:pre-line; }
.sc-term .term-boot .architect{ color:var(--ember); }
.sc-term .term-row{ display:grid; gap:5px; }
/* The prompt has to name the face explicitly: `.site-form label` sets the
label face, and the prompt is inside a label. */
.sc-term .term-prompt{ font-family:var(--font-grid);
font-size:11px; letter-spacing:.1em;
text-transform:uppercase; color:rgba(242,236,222,.5); }
/* The field and its caret share a positioning context. The caret is placed in
`ch` from the left padding edge, which lands on the real caret only because
the field is fixed pitch: in a monospace face `ch` IS one character. */
/* The wrapper and the caret carry the SAME face and size as the input, and
that is load-bearing rather than tidiness. `ch` resolves against the font
of the element it is written on -- the caret is a span, so it was inheriting
the label face from `.site-form label` and measuring Pixotype's zero while
the text beside it was set in Plex Mono. The block sat 13px short of the
caret after six characters and drifted further with every one. */
.sc-term .term-field,
.sc-term .term-caret{ font-family:var(--font-grid); font-size:15px; }
.sc-term .term-field{ position:relative; display:block; }
.sc-term .term-field input{
font-family:var(--font-grid); font-size:15px; letter-spacing:0;
width:100%; caret-color:transparent; }
.sc-term .term-caret{ position:absolute; left:0; bottom:11px;
width:1ch; height:1.05em; background:var(--bone);
transform:translateX(calc(var(--col, 0) * 1ch));
opacity:0; pointer-events:none; }
.sc-term .term-field input:focus ~ .term-caret{ opacity:1;
animation:sc-blink 1.06s steps(1, end) infinite; }
/* At rest the block sits on the first line still waiting for an answer, so
the one blinking thing on the page is also the one place to type. It is
written by sc-terminal.js and moves down the form as lines are accepted;
the moment a field takes focus, the focus rule above owns the block again
and this one stands down. */
.sc-term .sc-term-invite .term-caret{ opacity:1;
animation:sc-blink 1.06s steps(1, end) infinite; }
@keyframes sc-blink{ 0%,50%{ opacity:1 } 50.01%,100%{ opacity:0 } }
/* The reply. Errors print under the line that caused them, in the terminal's
own voice, rather than appearing as a box. The row keeps its height whether
or not it is holding a message, for the same reason the boot line does. */
.sc-term .term-err{ margin-top:3px; min-height:1.25em;
font-size:11px; letter-spacing:.04em; line-height:1.25;
color:var(--ember); }
.sc-term .term-err:not(:empty)::before{ content:"> "; }
/* The form's own reply, after submit. */
.sc-term .form-note{ font-family:var(--font-grid); letter-spacing:.04em; }
.sc-term .form-note:not(:empty)::before{ content:"> "; }
/* A field the terminal has accepted. Quiet: a colour change on the rule,
never a tick or a colour on its own, which would be the only meaning
carried by colour anywhere on this page. */
.sc-term .term-field input[data-ok]{ border-bottom-color:rgba(242,236,222,.5); }
/* Motion is the one thing here that is decoration, so it is the one thing
that goes. The boot line is written in full immediately and both cursors
hold steady instead of blinking. */
@media (prefers-reduced-motion:reduce){
.sc-term .term-field input:focus ~ .term-caret,
.sc-term .term-field .term-caret{ animation:none; }
}
@media (max-width:760px){
.sc-term .term-boot{ min-height:2.6em; font-size:10px; }
/* 16 stops iOS zooming in on focus. The caret has to follow the size as
well as the face, or `ch` measures a different character than the one
being typed. */
.sc-term .term-field,
.sc-term .term-caret,
.sc-term .term-field input{ font-size:16px; }
.sc-page .jr-body p{ font-size:13px; line-height:1.7; }
}
/* ---- the window ------------------------------------------------------
The two references Javan sent are both terminal UIs rather than terminal
TYPE: a framed window with a tab, panels whose titles sit in their own top
border, rows of glyph state, a boxed input with an arrow in it, and a
prompt line holding a block cursor at the bottom. That is what this section
builds. It is all chrome -- every piece is aria-hidden and none of it
carries content -- so the form inside is unchanged and a screen reader
still meets three labelled fields in reading order. */
.sc-tui{ position:relative;
border:1px solid rgba(242,236,222,.22); border-radius:2px;
padding:28px clamp(20px,3vw,40px) 10px; }
/* The tab, sitting astride the top border the way a window's does. It is
painted over the rule rather than knocking a hole in it, which is why it
carries the page's own ground as a background. */
.sc-tui .tui-chrome{ position:absolute; top:0; left:clamp(16px,2.4vw,30px);
transform:translateY(-50%); }
.sc-tui .tui-tab{ display:inline-block; padding:2px 10px;
background:var(--graphite); color:rgba(242,236,222,.5);
font-family:var(--font-grid); font-size:10px; letter-spacing:.18em;
text-transform:uppercase; }
/* Panels. The title rides its own top border, same trick as the tab. */
.sc-tui [data-panel]{ position:relative;
border:1px solid rgba(242,236,222,.16);
padding:26px clamp(16px,2vw,26px) 18px; }
.sc-tui [data-panel]::before{ content:attr(data-panel);
position:absolute; top:0; left:16px; transform:translateY(-50%);
padding:0 8px; background:var(--graphite);
font-family:var(--font-grid); font-size:10px; letter-spacing:.18em;
text-transform:uppercase; color:rgba(242,236,222,.38); }
/* The task list: three lines of glyph state, written by sc-terminal.js. The
glyphs are ASCII on purpose -- [ ], [>], [x] render in any monospace face,
where box-drawing and checkbox characters are a gamble. */
.sc-tui .term-tasks{ list-style:none; margin:0 0 6px; padding:0;
font-family:var(--font-grid); font-size:11px; letter-spacing:.06em;
line-height:1.85; color:rgba(242,236,222,.34); }
.sc-tui .term-tasks .tk-box{ color:rgba(242,236,222,.28); }
.sc-tui .term-tasks li[data-state="now"]{ color:var(--bone); }
.sc-tui .term-tasks li[data-state="now"] .tk-box{ color:var(--ember); }
.sc-tui .term-tasks li[data-state="done"]{ color:rgba(242,236,222,.55); }
/* The field becomes a box with the arrow inside it, and the input sits in the
space the arrow leaves. The underline goes: a box and a rule together is
two affordances saying the same thing. */
.sc-tui .term-field{ display:flex; align-items:baseline; gap:8px;
border:1px solid rgba(242,236,222,.2); padding:7px 10px; }
.sc-tui .term-field:focus-within{ border-color:var(--ember); }
.sc-tui .term-arrow{ color:rgba(242,236,222,.4); }
.sc-tui .term-field input{ border-bottom:0; padding:0; }
/* The slot is what the caret is measured against.
It exists because the arrow broke the sums: the caret is absolutely
positioned, and an absolutely positioned child of a FLEX container takes
its static position from the container's content box, not from the input
beside it. So `translateX(5ch)` was landing five characters from the left
edge of the BOX, and the arrow plus its gap put the block 19px to the left
of the character it was supposed to be sitting on. Wrapping the input and
the caret in their own positioning context makes the two agree again. */
.sc-tui .term-slot{ position:relative; display:block; flex:1 1 auto;
font-family:var(--font-grid); }
.sc-tui .term-slot input{ display:block; width:100%; }
.sc-tui .term-field input[data-ok]{ border-bottom:0; }
/* The caret is positioned from the input's own left edge now that the arrow
sits before it, so it hangs off the input rather than the box. */
.sc-tui .term-caret{ left:0; bottom:auto; top:50%; margin-top:-.53em; }
/* The status row: dim, factual, live -- what a terminal keeps at the foot. */
.sc-tui .term-meta{ margin:8px 0 0; font-family:var(--font-grid);
font-size:10px; letter-spacing:.1em; color:rgba(242,236,222,.3); }
/* The header sits above both panels, so it needs room for their titles to
ride their top borders without touching the heading's descenders. */
.sc-tui > header{ margin-bottom:16px; }
/* Each panel is as tall as its own contents. Without this the readme is
stretched by the grid to match the form beside it and ends in a long empty
box, which is the one thing a terminal panel never does. */
.sc-tui [data-panel]{ align-self:start; }
@media (max-width:1080px){
/* Stacked, the second panel needs air above it that the grid gap was
giving it while they sat side by side. */
.sc-tui .sc-term{ margin-top:26px; }
}
@media (max-width:760px){
.sc-tui{ padding:30px 16px 16px; }
.sc-tui [data-panel]{ padding:24px 14px 16px; }
}
/* ---- one screen, no scroll ------------------------------------------
A terminal does not scroll, so this page does not either. The page is
built to land inside the viewport at every size it can, rather than to be
scrolled through.
Two things make that hard, and both are furniture rather than content: the
masthead owns the top of every route, and the wordmark, the tagline and the
fine print own the bottom. Measured, that band is 70px on a desktop and
173px on a phone, where the fine print wraps to three lines. Whatever is
left after those is the whole budget, and everything below is spending it.
The rules are keyed on viewport HEIGHT, not width, because height is what
actually runs out. A 1440x760 laptop is as tight as a tablet. */
/* The measured clearance below the terminal. The fine-print row includes a
44px rabbit target above the wordmark; on a shallow desktop, 160px moves
the terminal fully above that row and leaves a visible pause between them. */
body[data-route="source-code"] .route--doc{ padding-bottom:160px; }
/* Shorter than a full desktop: give back the air first, before touching
anything that carries meaning. */
@media (max-height:880px) and (min-width:1081px){
body[data-route="source-code"] .route--doc{ padding-top:56px; }
.sc-tui{ padding-top:22px; padding-bottom:8px; }
.sc-tui > header{ margin-bottom:10px; }
.sc-term .term-row{ margin-top:11px; }
.sc-term .cta{ margin-top:16px; }
}
/* Shorter still. The decorative readouts go before the copy does: the task
list becomes one line instead of three, which keeps the glyphs on screen
at a third of the height. */
@media (max-height:800px){
.sc-tui .term-tasks{ display:flex; gap:14px; margin-bottom:2px; }
.sc-term .term-boot{ min-height:2.7em; line-height:1.22; }
.sc-term .term-err{ min-height:1.05em; }
.sc-tui [data-panel]{ padding-top:22px; padding-bottom:14px; }
}
/* A laptop at 720 or a phone. Everything tightens together: the copy loses a
point and some leading, the fields lose their padding, and the two chrome
readouts at the foot -- the prompt line and the status row -- stand down.
They are the least load-bearing things on the page: one is a decoration,
the other repeats what the task list already shows. */
@media (max-height:740px), (max-width:760px){
.sc-page .jr-body p{ font-size:12px; line-height:1.62; }
.sc-page .jr-body p.turn{ margin-top:14px; }
.sc-tui .term-field{ padding:5px 9px; }
.sc-tui .term-tasks{ font-size:10px; }
.sc-term .term-prompt{ font-size:10px; }
.sc-tui .term-meta{ display:none; }
}
/* Phones. The stack has one column to work with and the fine print takes
three lines of the floor, so this is the tightest the page ever gets.
One number here is NOT spendable: the inputs keep their 44px minimum. That
is the touch target the whole site holds to, it is 132px of a 614px budget,
and shrinking it to win back a scrollbar would be trading a real problem
for a cosmetic one. So the field boxes lose their own padding instead and
let the 44px input be the box. */
@media (max-width:760px){
body[data-route="source-code"] .route--doc{ padding-top:54px;
padding-bottom:176px; }
.sc-tui{ padding:18px 14px 8px; }
.sc-tui [data-panel]{ padding:18px 12px 12px; }
.sc-tui > header{ margin-bottom:8px; }
.sc-tui .sc-term{ margin-top:14px; }
.sc-page .jr-body p{ font-size:11.5px; line-height:1.55; }
.sc-page .jr-body p.turn{ margin-top:12px; }
.sc-term .term-boot{ min-height:2.5em; font-size:9.5px; margin-bottom:2px; }
/* One line, not three: the same glyphs at a third of the height. */
.sc-tui .term-tasks{ display:flex; gap:12px; margin-bottom:2px;
font-size:10px; }
.sc-term .term-row{ margin-top:8px; gap:3px; }
.sc-term .term-row:first-of-type{ margin-top:6px; }
.sc-tui .term-field{ padding:0 9px; }
/* site.css puts a paragraph margin under every form paragraph. In a
terminal the reply belongs tight under its own line. */
.sc-term .term-err{ margin-bottom:0; }
.sc-term .cta{ margin-top:12px; padding:11px 16px; }
}
/* Laptops shorter than 790: one more pass of the same air. */
@media (max-height:790px) and (min-width:1081px){
body[data-route="source-code"] .route--doc{ padding-top:48px; }
.sc-tui{ padding-top:18px; padding-bottom:6px; }
.sc-tui > header{ margin-bottom:6px; }
.sc-term .term-row{ margin-top:9px; }
.sc-term .cta{ margin-top:12px; }
}
/* Tablets and narrow windows: stacked like a phone, but with a desktop's
type and a one-line fine print, so they need their own pass. */
@media (min-width:761px) and (max-width:1080px){
body[data-route="source-code"] .route--doc{ padding-top:56px; }
.sc-tui{ padding-top:22px; padding-bottom:8px; }
.sc-tui > header{ margin-bottom:10px; }
.sc-tui .term-tasks{ display:flex; gap:14px; margin-bottom:2px; }
.sc-tui .sc-term{ margin-top:18px; }
.sc-term .term-row{ margin-top:12px; }
.sc-term .cta{ margin-top:16px; }
}
/* An empty live region should take no room. It is a ``, so it holds a line
box until it is told not to, and that line box was 17px of a phone's
budget for a message that is not there yet. */
.sc-term .form-note:empty{ display:none; }
/* The last things to go on a phone, and only on a phone: the boot line is
the page's one piece of theatre and it is the one piece that carries no
information at all, so it stands down before a word of copy does. */
@media (max-width:760px) and (max-height:900px){
.sc-term .term-boot{ display:none; }
}
/* The last phone pass. Everything here is chrome or air; not one word of
copy moves.
The one structural change: on a phone the three reserved reply rows become
one. A reply still prints, and it still prints in the terminal's voice --
it just prints in a single line under the field group instead of holding
45px of empty floor for messages that are not there. The reply names its
own field ("the email field is empty"), so nothing is lost by moving it. */
@media (max-width:760px){
body[data-route="source-code"] .route--doc{
padding-top:48px;
padding-bottom:calc(220px + env(safe-area-inset-bottom));
}
.sc-tui{ padding:14px 14px 6px; }
.sc-tui [data-panel]{ padding:15px 11px 10px; }
.sc-tui > header{ margin-bottom:6px; }
.sc-tui .sc-term{ margin-top:12px; }
.sc-page .jr-body p{ font-size:11px; line-height:1.5; }
.sc-page .eyebrow{ font-size:10px; }
.sc-term .term-row{ margin-top:6px; }
.sc-term .term-row:first-of-type{ margin-top:4px; }
.sc-term .term-err{ min-height:0; margin-top:0; }
.sc-term .term-err:empty{ display:none; }
.sc-term .cta{ margin-top:10px; padding:10px 15px; }
}
/* Phones scroll before they shrink readable information. The terminal still
keeps its compact composition, but body copy and machine labels hold the
same legibility floor as the rest of the site. */
@media (max-width:760px){
.sc-page .jr-body p{ font-size:16px; line-height:1.6; }
.sc-page .eyebrow,
.sc-term .term-boot,
.sc-tui .term-tasks,
.sc-term .term-prompt{ font-size:12px; }
.sc-tui{ padding-top:12px; }
.sc-tui [data-panel]{ padding:13px 11px 9px; }
/* The takeover menu carries these links on phones. Keeping the fixed fine
print here would lay it directly across the request form. */
body[data-route="source-code"] .fine{ display:none; }
}
/* Careers is a future-team signal, not a live job board. Its visual grammar
is therefore a field and a path: capability lanes establish where the
company expects to build; the numbered packet makes the invitation exact. */
.careers-page{ padding-top:clamp(76px,9vw,132px); }
.careers-head{ position:relative; min-height:min(650px,72vh); display:flex;
flex-direction:column; justify-content:center; padding:94px 0 112px;
border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.careers-head::before{ content:""; position:absolute; inset:0; pointer-events:none;
background-image:linear-gradient(to right,rgba(242,236,222,.055) 1px,transparent 1px),
linear-gradient(to bottom,rgba(242,236,222,.04) 1px,transparent 1px);
background-size:clamp(52px,6vw,88px) clamp(52px,6vw,88px);
mask-image:linear-gradient(to right,transparent,black 16%,black 84%,transparent); }
.careers-head::after{ content:""; position:absolute; width:10px; height:10px;
left:calc(50% - 5px); bottom:-5px; background:var(--ember); transform:rotate(45deg); }
.careers-head .stagger{ position:relative; z-index:1; display:flex;
flex-direction:column; align-items:center; text-align:center; }
.careers-status{ position:absolute; z-index:1; top:22px; left:0; right:0;
display:flex; justify-content:space-between; font-family:var(--font-label);
font-size:11px; letter-spacing:.17em; text-transform:uppercase;
color:rgba(242,236,222,.54); }
.careers-status span:last-child{ color:var(--ember); }
.careers-head h1{ margin:0; max-width:16ch; font-size:clamp(50px,6.4vw,92px);
line-height:.94; letter-spacing:-.035em; }
.careers-head .turn{ max-width:66ch; margin:34px auto 0; font-size:clamp(18px,2vw,24px);
line-height:1.48; color:rgba(242,236,222,.72); }
.career-hiring-note{ display:block; margin-top:18px; color:var(--bone); }
.careers-field{ padding-top:clamp(96px,12vw,176px); }
.careers-intro{ display:block; }
.careers-intro h2{ margin:16px 0 0; max-width:16ch; font-size:clamp(38px,5vw,68px); }
.careers-intro > p:last-child{ max-width:56ch; margin:28px 0 0; font-size:17px;
line-height:1.65; color:rgba(242,236,222,.68); }
.career-lanes{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
margin-top:clamp(68px,8vw,112px); border-top:1px solid var(--rule);
border-bottom:1px solid var(--rule); }
.career-lane{ min-height:330px; padding:28px clamp(22px,2.5vw,38px) 38px; }
.career-lane + .career-lane{ border-left:1px solid var(--rule); }
.career-index{ margin:0; font-family:var(--font-label); font-size:11px;
letter-spacing:.16em; text-transform:uppercase; color:var(--ember); }
.career-lane h3{ margin:62px 0 0; max-width:12ch; font-family:var(--font-display);
font-weight:500; font-size:clamp(25px,2.5vw,36px); line-height:1.08; }
.career-lane ul{ list-style:none; margin:40px 0 0; padding:0; }
.career-lane li{ padding:11px 0; border-top:1px solid rgba(242,236,222,.1);
font-size:14px; line-height:1.4; color:rgba(242,236,222,.7); }
.career-lane-copy{ margin:28px 0 0; max-width:34ch; font-size:13px; line-height:1.6;
color:rgba(242,236,222,.48); }
.careers-standard{ padding-top:clamp(110px,14vw,208px); }
.careers-standard-head{ display:block; }
.careers-standard-head h2{ margin:16px 0 0; max-width:16ch; font-size:clamp(42px,5.5vw,76px); }
.career-principles{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
gap:clamp(30px,4vw,58px); margin-top:clamp(64px,8vw,112px); }
.career-principle{ padding-top:20px; border-top:2px solid var(--bone); }
.career-principle h3{ margin:34px 0 0; max-width:14ch; font-size:clamp(25px,2.5vw,34px); }
.career-principle > p:last-child{ margin:22px 0 0; max-width:38ch; font-size:15px;
line-height:1.68; color:rgba(242,236,222,.66); }
.careers-signal{ position:relative; display:grid;
grid-template-columns:minmax(300px,6fr) minmax(340px,6fr);
column-gap:clamp(44px,5vw,80px); margin-top:clamp(124px,16vw,232px);
padding:clamp(64px,8vw,108px) clamp(24px,4vw,64px); border:1px solid var(--rule);
overflow:hidden; }
.careers-signal::before{ content:"SIGNAL / 2027"; position:absolute; right:-10px; top:14px;
font-family:var(--font-grid); font-size:clamp(56px,8vw,116px); line-height:1;
color:rgba(242,236,222,.035); letter-spacing:-.03em; pointer-events:none; }
.careers-signal-copy,.careers-packet,.careers-action{ position:relative; z-index:1; }
.careers-signal h2{ margin:14px 0 0; max-width:12ch; font-size:clamp(40px,4.2vw,60px); }
.careers-signal-copy > p:last-child{ margin:28px 0 0; max-width:43ch; font-size:16px;
line-height:1.65; color:rgba(242,236,222,.66); }
.careers-packet{ grid-column:2; grid-row:1 / span 2; list-style:none; margin:0; padding:0; }
.careers-packet li{ display:grid; grid-template-columns:42px 1fr; gap:18px;
padding:0 0 28px; margin:0 0 28px; border-bottom:1px solid var(--rule); }
.careers-packet li > span{ font-family:var(--font-label); font-size:11px;
letter-spacing:.16em; color:var(--ember); }
.careers-packet strong{ display:block; font-family:var(--font-display); font-weight:500;
font-size:24px; line-height:1.1; }
.careers-packet p{ margin:12px 0 0; max-width:44ch; font-size:14px;
line-height:1.6; color:rgba(242,236,222,.6); }
.careers-packet p + p{ margin-top:9px; color:rgba(242,236,222,.45); }
.careers-action{ grid-column:1 / -1; display:flex; align-items:flex-end;
justify-content:space-between; gap:32px; margin:54px 0 0;
padding-top:24px; border-top:1px solid var(--rule); }
.careers-action .careers-cta{ flex:0 0 auto; margin-top:0; }
.careers-action p{ max-width:54ch; margin:0; font-size:12px; line-height:1.6;
color:rgba(242,236,222,.48); }
/* General inquiries still have a direct email path elsewhere, but Careers
has one intake channel so applications remain indexed and reviewable. */
body[data-route="careers"] .fine-email,
body[data-route="careers"] .fine-email-sep,
body[data-route="careers/apply"] .fine-email,
body[data-route="careers/apply"] .fine-email-sep{ display:none; }
@media(max-width:1080px) and (min-width:761px){
.career-lanes{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.career-lane:nth-child(3){ border-left:0; border-top:1px solid var(--rule); }
.career-lane:nth-child(4){ border-top:1px solid var(--rule); }
}
@media(max-width:760px){
.careers-page{ padding-top:64px; }
.careers-head{ min-height:620px; padding:104px 0 90px; }
.careers-status{ top:18px; }
.careers-head h1{ max-width:16ch; font-size:clamp(38px,10.1vw,48px); }
.careers-head .turn{ margin-top:30px; font-size:18px; }
.careers-intro > p:last-child{ margin-top:4px; }
.career-lanes,.career-principles{ grid-template-columns:1fr; }
.career-lanes{ margin-top:58px; }
.career-lane{ min-height:0; padding:24px 0 34px; }
.career-lane + .career-lane{ border-left:0; border-top:1px solid var(--rule); }
.career-lane h3{ margin-top:36px; }
.career-lane ul{ margin-top:28px; }
.career-principles{ gap:56px; margin-top:58px; }
.career-principle h3{ margin-top:26px; }
.careers-signal{ grid-template-columns:1fr; padding:54px 22px; }
.careers-packet{ grid-column:1; grid-row:auto; margin-top:56px; }
.careers-action{ grid-column:1; align-items:flex-start; flex-direction:column;
gap:22px; margin-top:42px; }
}
/* Careers application: one calm introduction followed by the shared terminal
shell. The route is deliberately a form page, not a second careers pitch. */
.careers-apply-page{ padding-top:clamp(76px,9vw,132px); }
.careers-apply-head{ max-width:920px; margin:0 auto; text-align:center;
display:flex; flex-direction:column; align-items:center; }
.careers-apply-head h1{ max-width:15ch; font-size:clamp(48px,7vw,96px); }
.careers-apply-head .turn{ max-width:62ch; margin:30px auto 0;
font-size:clamp(18px,2vw,23px); line-height:1.55;
color:rgba(242,236,222,.7); }
.careers-apply-head .read{ margin-top:26px; }
.careers-apply-console{ max-width:980px; margin:clamp(84px,11vw,152px) auto 0; }
.careers-apply-console > header h2{ margin:0; max-width:18ch;
font-size:clamp(30px,4vw,52px); }
.careers-apply-console > header > p:last-child{ max-width:58ch; margin:18px 0 0;
font-size:14px; line-height:1.62; color:rgba(242,236,222,.58); }
.careers-form-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
gap:0 22px; }
.terminal-options{ margin:26px 0 0; padding:22px 18px 18px;
border:1px solid rgba(242,236,222,.16); }
.terminal-options legend{ padding:0 8px; font-family:var(--font-grid);
font-size:11px; letter-spacing:.1em; text-transform:uppercase;
color:rgba(242,236,222,.5); }
.terminal-option-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
gap:9px 18px; }
.terminal-option-grid label,.terminal-check{ display:flex; align-items:flex-start;
gap:10px; min-height:38px; font-family:var(--font-grid); font-size:13px;
line-height:1.45; color:rgba(242,236,222,.7); cursor:pointer; }
.terminal-option-grid input,.terminal-check input{ flex:0 0 auto; width:16px; height:16px;
margin:2px 0 0; accent-color:var(--ember); }
.terminal-option-grid label:focus-within,.terminal-check:focus-within{
color:var(--bone); }
.careers-consents{ display:grid; gap:14px; margin-top:28px; padding-top:22px;
border-top:1px solid rgba(242,236,222,.16); }
.careers-consents .terminal-check{ max-width:72ch; min-height:44px; }
.careers-privacy{ margin:18px 0 0; font-family:var(--font-grid); font-size:11px;
line-height:1.55; color:rgba(242,236,222,.42); }
.careers-privacy a{ color:rgba(242,236,222,.72); text-underline-offset:4px; }
@media(max-width:760px){
.careers-apply-page{ padding-top:64px; }
.careers-apply-head h1{ font-size:clamp(40px,11vw,52px); }
.careers-apply-head .turn{ font-size:17px; }
.careers-apply-console{ margin-top:86px; }
.careers-form-grid,.terminal-option-grid{ grid-template-columns:1fr; }
.terminal-options{ padding:20px 12px 14px; }
}