/* ============================================================
ROMAN WEST — design stylesheet
Tokens live in theme.json. This file carries everything theme.json
cannot express: the thorn compositing, the rough edge, scroll-snap,
the fluid clamps and the responsive bands.
THE DESCENT is a body class, not an attribute — WordPress has no
per-page equivalent of . functions.php adds
.rw-bone or .rw-dark via the body_class filter.
DO NOT hardcode a colour to fix contrast. Every mode-dependent value
goes through a token or it breaks in the other mode.
============================================================ */
/* Chosen type system: Remboy display, Auria Sans UI, Karrik body.
Auria replaced Basteleur on 2026-08-12, once Ari supplied the licensed
commercial files. Basteleur was only ever the stand-in — Auria Sans is
the face Ari named for nav and form back in the 2026-08-01 round, and it
could not be used because nothing had been sent.
⚠️ THE FALLBACK STACK CHANGED FROM SERIF TO SANS, and that is not
cosmetic. Basteleur is a serif and fell back to Georgia. Auria is a
sans, so leaving the old fallback would have rendered a serif in the
window before the webfont lands, and permanently for anyone it fails to
reach. The whole UI layer would silently look like the wrong typeface.
Shipped as the VARIABLE font rather than static cuts. One 49.9KB file
covers weights 100-950, against 92.8KB for the two fixed Basteleur cuts
it replaces — smaller and strictly more capable. It also removes the
synthesized-bold risk that Remboy carries: any weight the CSS asks for
is a real instance, so nothing is faked. */
:root{
--body-font: var(--wp--preset--font-family--karrik, 'Karrik', Helvetica, sans-serif);
--ui-font: var(--wp--preset--font-family--auria, 'Auria Sans 2.0', Helvetica, Arial, sans-serif);
/* Regular. A variable so the whole UI layer retunes from one line, which
is worth having on a face this new to the build. Went 500 -> 400 on
2026-08-13 at Ross's call, after the 1.75x size increase had landed —
larger type needs less weight to hold its own.
Either value is a real instance rather than a synthesized one, because
Auria ships variable across 100-950. That is NOT true of Remboy, which
is Regular only; .mode pins its own literal font-weight:400 for exactly
that reason and is unaffected by this line. */
--ui-weight: 400;
/* ⚠️ MULTIPLIES EVERY UI FONT-SIZE. 28 declarations across the file are
written as calc(rem * var(--ui-scale)), so this one number moves
the whole Auria layer. Ross asked for 2.5x on 2026-08-12.
It is a multiplier rather than 28 rewritten literals for two reasons.
Several of these selectors are declared more than once — .rw-arrow-label
five times, .dial .of three, .step label twice — and scaling all copies
by the same factor keeps whichever one currently wins still winning,
just larger. And a face this new to the build will get retuned; the
previous pass had to be corrected twice because edits at source were
silently overridden by later duplicates.
2.5 -> 1.75 on 2026-08-12. Ross: "way too big. Let's cut that increase
in half." Halving the INCREASE, not the scale: 1.0 -> 2.5 is a rise of
1.5, so half of it lands at 1.75. Nav 13px -> 23px rather than 33px.
Whole exercise is now one number, which is the point of the calc(). */
--ui-scale: 1.75;
}
/* ---------- BONE (light) — Home, Lore ---------- */
:root,
body.rw-bone{
--bg:#E9E4DA;
--fg:#17140F;
--accent:#7B2116; /* oxblood */
--muted:rgba(23,20,15,.55);
--rule:#17140F;
--card-bg:#E9E4DA;
--card-bd:#17140F;
--scrim:rgba(233,228,218,.94); /* quiet zone behind reading matter */
/* thorns are now a real alpha cutout — no blend mode, no filter hacks.
Composites cleanly on any colour and keeps its true maroon/olive. */
/* NOTE: the alpha cutout is full-strength maroon with no grey ground to
soften it, so it needs FAR lower opacity than the old blended version.
Raising these buries the copy — see the quiet-zone rule. */
--thorn-filter:none;
--thorn-op-1:.62;
--thorn-op-2:.44;
--hero-blend:normal;
--hero-shadow:13px 16px 0 rgba(23,20,15,.9);
--glow:transparent;
}
/* ---------- DARK (underworld) — Offerings, Submit ---------- */
body.rw-dark{
--bg:#0B0A09;
--fg:#E6E0D4;
--accent:#BF7F7D; /* dusty rose — the thorn plate's own hue family
(sampled: hue 0-20deg, L 5-14%) lifted to 62%
lightness so it survives on near-black. Ari's
reference #5E4241 is the right colour at the
wrong lightness: it scores 2.20:1 and vanishes.
This is 6.19:1 on the page and 5.89:1 on a
card, past the 4.5 floor, which matters because
the accent carries the rates and the pricing
legibility rule is not negotiable. */
--muted:rgba(230,224,212,.6);
--rule:#E6E0D4;
/* Near-solid. Slightly translucent so the card sits IN the page rather
than on top of it — but kept high enough that thorns never read through
the pricing. Do not drop this below ~.85. */
--card-bg:rgba(19,17,15,.88);
--card-bd:rgba(230,224,212,.3);
--scrim:rgba(11,10,9,.93); /* quiet zone behind reading matter */
/* alpha cutout keeps the thorns' real maroon/olive on black — moodier and
more botanical than the old inverted-to-pale trick. Lifted so it reads. */
/* DARK: invert the cutout to pale. The brown reads too dark on black and
the background-removal cut lines show; inverting hides them and gives
back the bone-white thorns. invert() flips RGB but leaves alpha alone,
so the clean edges of the cutout survive — no blend mode needed. */
--thorn-filter:invert(1) hue-rotate(178deg) saturate(1.25) brightness(1.02);
--thorn-op-1:.6;
--thorn-op-2:.42;
--hero-blend:screen;
--hero-shadow:none;
--glow:rgba(240,138,18,.3);
}
/* ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--bg)}
body{
background:var(--bg);color:var(--fg);
font-family:var(--body-font);
min-height:100vh;position:relative;overflow-x:hidden;
transition:background .45s ease,color .45s ease;
}
/* ---------- thorns ---------- */
.thorn{
position:absolute;pointer-events:none;z-index:1;
filter:var(--thorn-filter);
transition:filter .45s ease;
}
.t1{width:1150px;top:-300px;left:-330px;transform:rotate(-16deg);opacity:var(--thorn-op-1)}
.t2{width:900px;bottom:-390px;right:-230px;transform:rotate(158deg) scaleX(-1);opacity:var(--thorn-op-2)}
.glow{
position:absolute;z-index:2;width:820px;height:820px;border-radius:50%;
background:radial-gradient(circle,var(--glow),transparent 66%);
top:-130px;right:-130px;pointer-events:none;
}
/* ---------- nav ---------- */
nav{
position:relative;z-index:40;display:flex;align-items:flex-start;
gap:2.4rem;padding:2.1rem 3.2rem;
}
.mark{
font-family:'Remboy';font-size:2.05rem;line-height:.9;
color:var(--fg);text-decoration:none;margin-right:auto;
}
/* ============================================================
UI LAYER GOES SENTENCE CASE, MEDIUM WEIGHT — 2026-08-12
Ross: "all instances of Auria are uppercase. Let's try normal
typecase and use the medium weight."
⚠️ THE TRACKING HAD TO COME DOWN WITH THE CASE. Every value
here was set for caps, where wide tracking is what makes a
short all-caps run legible: .34em on nav, .3em on the footer,
.26em, .24em, .16em elsewhere. Those same numbers on lowercase
read as broken spacing, because lowercase already carries its
own rhythm from ascenders and descenders. Roughly a fifth of
the cap value is the equivalent optical texture, so .34 → .05,
.3/.26/.24 → .04, .16 → .03.
Dropping text-transform alone would have looked like a bug.
============================================================ */
nav a.lnk{
font-family:var(--ui-font);font-weight:var(--ui-weight);
font-size:calc(.82rem * var(--ui-scale));letter-spacing:.05em;
color:var(--fg);text-decoration:none;padding-bottom:3px;
border-bottom:1px solid transparent;
}
nav a.lnk:hover{border-bottom-color:var(--accent)}
nav a.lnk[aria-current="page"]{color:var(--accent);border-bottom-color:var(--accent)}
.n1{margin-top:.15rem}
.n2{margin-top:1.4rem} /* deliberate broken baseline */
/* ⚠️ The accent used to be hardcoded here and on .rw-nav .n3 a, which made
Submit look permanently selected on every page. It was styling the CTA,
not the current page. Highlighting is now driven by aria-current below. */
.n3{margin-top:.5rem}
/* ---------- PLUMBING FOR OPTION 1 ----------
Visitor toggle. Present and functional now; hide with
display:none for launch and nothing else changes. */
.mode{
margin-left:1.6rem;margin-top:.1rem;background:none;cursor:pointer;
border:1px solid var(--fg);color:var(--fg);
font:inherit;font-size:calc(.62rem * var(--ui-scale));letter-spacing:.05em;
padding:.42rem .7rem;border-radius:0;
}
.mode:hover{background:var(--fg);color:var(--bg)}
/* ---------- type ---------- */
/* Fluid display type. clamp() scales between phone and desktop with no
breakpoint jump — the chaotic size relationships hold at every width
because they're ratios, not fixed pixels. */
h1{font-family:'Remboy';font-weight:400;line-height:.84}
.l1{font-size:clamp(2.7rem, 10.5vw, 7.4rem)}
.l2{font-size:clamp(1.75rem, 6.4vw, 4.4rem);color:var(--accent);
margin-left:clamp(1.4rem, 9vw, 6.4rem);margin-top:-.35rem}
.l3{font-size:clamp(2.9rem, 11.6vw, 8.2rem);
margin-left:clamp(.4rem, 2.2vw, 1.6rem);margin-top:-.7rem}
.stage{position:relative;z-index:30;padding:3.4rem 3.2rem 0}
.rule{width:180px;height:2px;background:var(--rule);margin-bottom:1.1rem;transform:rotate(-1.2deg)}
.sub{max-width:335px;font-size:1rem;line-height:1.64}
.sub em,.sub b{color:var(--accent);font-style:normal;font-weight:400}
.foot{
position:absolute;z-index:30;left:3.2rem;bottom:1.7rem;font-family:var(--ui-font);
font-weight:var(--ui-weight);
font-size:calc(.72rem * var(--ui-scale));letter-spacing:.04em;color:var(--muted);
}
/* ---- Descend / Ascend is Remboy, not the UI face ----
Ross, 2026-08-12: "it's not quite a menu item. I want it to feel
distinct." It sits in the nav bar but does something categorically
different from the three links beside it — it moves you between the
light and dark halves of the descent rather than to a page — so it
takes the display face to say so.
⚠️ font-weight:400 IS LOAD-BEARING, not tidying. --ui-weight is 500 and
Remboy ships Regular only, so inheriting it would make the browser
synthesize a fake bold on a display face. That is the exact failure the
REMBOY IS REGULAR-ONLY block further down this file exists to prevent,
and it would have applied silently — a synthesized weight throws no
error and just looks slightly wrong. Any future rule that puts Remboy on
an element needs the same pairing. */
.mode{
font-family:var(--wp--preset--font-family--remboy),'Remboy',Georgia,serif;
font-weight:400;
}
/* ---------- hero ---------- */
.hero{
position:absolute;z-index:35;width:400px;
mix-blend-mode:var(--hero-blend);box-shadow:var(--hero-shadow);
}
.hero img{width:100%;display:block}
/* ---------- LIVE TYPE OVER IMAGERY ----------
RULE: never use a photo with text burned into it. Every image is a clean
plate; captions are real HTML set in Remboy on top. That keeps them
editable in the Site Editor, readable by screen readers, sharp at any
size, and restylable — none of which a flattened JPEG can do. */
.hero-wrap{position:relative;display:block}
.hero-cap{
position:absolute;left:0;right:0;top:38%;z-index:2;
font-family:'Remboy';font-weight:400;
display:flex;justify-content:center;gap:1.1em;
font-size:1.42rem;line-height:1;color:#17140F;
padding:0 .8rem;pointer-events:none;
/* the plate is bright amber, so a soft light-side shadow keeps the type
readable without a box or scrim sitting on the photograph */
text-shadow:0 1px 0 rgba(255,225,180,.55);
}
.hero-cap span{white-space:nowrap}
/* ---------- rates card: the functional floor ----------
Solid ground, never under the thorns, never rotated far
enough to hurt reading. Chaos lives around it, not on it. */
/* ---------- ROUGH EDGE ----------
The card's ground and border are drawn by a pseudo-element which gets an
SVG turbulence displacement, so the edge wobbles like torn paper or a bad
photocopy. The card's own content is NOT filtered, so text stays crisp.
Ties to her "underground slow media" zine — misprint, not UI chrome.
Requires the