/*
* desk.css -- the stage the paper sits on (SPEC section 12; owner: desk)
*
* The site is a newspaper lying on a 1970s newsroom desk; the browser
* window is the reader's view of that desk. This file provides:
* 1. .rar-desk fixed, non-scrolling desk surface + CSS vignette
* 2. .rar-prop absolutely positioned continuous-tone props
* 3. breakpoints >=1360px props; 1100-1360px desk only; <1100px gone
*
* MARKUP CONTRACT (integrator):
*
* placed as a direct child of . Props are NOT in the markup; main.js
* (owner: fx) injects them from window.RAR_PROPS only while
* matchMedia('(min-width: 1360px)') matches, and below 1100px it removes
* the .rar-desk node from the DOM entirely (unloaded, not hidden). The
* display rules below are the CSS backstop for the no-JS case.
*
* INLINE SCRIPT SNIPPET the integrator must print before main.js loads
* (RAR_THEME_URI = get_template_directory_uri()):
*
*
*
* EVERY prop is injected as a WRAPPER that carries the className, with
* the ![]()
nested inside it:
*
* with href ![]()
* otherwise ![]()
*
* THE CLASS MUST NEVER LAND ON THE ![]()
ITSELF. That was the shape
* through P4 and it is Gate B defect 1: ![]()
is a replaced element, so
* browsers generate no ::before / ::after for it, so the two steam
* wisps below could not paint on any browser at any viewport. The steam
* is the whole site's only ambient motion at desk widths, so the build
* shipped with none. main.js section 4b now wraps unconditionally.
*
* Geometry is unaffected by the wrapper. A is not replaced and
* has no intrinsic size, so the width clamps below size the WRAPPER,
* and `.rar-prop > img` (section 2) gives the picture back its box with
* width:100%; height:auto; display:block. Wrapper width = the old ![]()
* width; wrapper height = the img's height, because height:auto on the
* absolutely positioned wrapper is content height and display:block on
* the img leaves no inline baseline gap. No object-fit is used or
* wanted anywhere on the desk: the img exactly fills a box built from
* its own intrinsic ratio, so there is nothing to fit or cover.
* The pen was ALREADY a wrapper (its ), so nothing about the pen
* changed. Because .rar-desk is aria-hidden, the pen anchor must carry
* tabindex="-1" (a focusable element inside aria-hidden is an a11y
* failure; the dossier stays keyboard-reachable through the nav, the
* easter egg is pointer-only set dressing).
*
* THE EXCEPTION: everything on the desk is pointer-events: none set
* dressing except the Watergate pen, the one sanctioned easter egg (SPEC
* section 12): clicking it navigates to /record/the-southern-strategy/.
* For those clicks to land, no full-width sibling of .rar-desk may capture
* hits over the gutters (hit-testing targets the topmost painted box; the
* paper wrapper must not span the gutters, or must release them with
* pointer-events: none while re-enabling its own children).
*
* ------------------------------------------------------------------
* THE GUTTER, AND WHY EVERY PROP NUMBER IS DERIVED FROM IT (P4 tune)
* ------------------------------------------------------------------
* The sheet is a centred 1200px box (style.css .rar-paper max-width),
* so the desk shows only in two gutters of
*
* G = (viewport - 1200px) / 2 == 50% - 600px
*
* G is TINY exactly where the desk first appears: 80px at 1360, 120px
* at 1440, 200px at 1600, 360px at 1920. Fixed pixel offsets therefore
* cannot work: the P3 numbers (coffee at 50% + 612px, 180px wide; pen
* pinned to left: 18px, 300px wide; proof at 50% - 750px, 250px wide)
* measured out at 1440 as a cup overrunning the right viewport edge by
* ~65px, a proof scrap hanging 37px off the left edge, and a pen with
* only ~95px of 300px in the gutter and ~205px buried under the sheet.
* The one interactive easter egg was two thirds invisible.
*
* Every prop below is now sized and placed as a FUNCTION of G, via the
* custom property --rar-gutter. Because props are absolutely positioned
* inside .rar-desk (position: fixed; inset: 0), percentages in their
* left / right / width resolve against the SAME box the paper is
* centred in: the layout viewport, EXCLUDING the classic scrollbar.
* That is why the gutter is written as a percentage rather than with
* 100vw, which includes the scrollbar and would drift the right gutter
* by half a scrollbar on Windows.
*
* TWO DIFFERENT BOXES, AND THE P4 COMMENT CONFLATED THEM (Gate B
* defect 12, recomputed 2026-07-27):
*
* PAINTED the axis-aligned box of the non-transparent pixels AFTER
* rotation. This is what the reader sees and the only thing
* that can look clipped by the sheet edge or the viewport.
* BOX the rotated element's own border-box AABB,
* W*cos(t) + H*sin(t) wide. Nothing is painted in its
* transparent corners, but for the pen it IS the anchor's
* clickable rectangle, so it is quoted separately below.
*
* The old comment computed (W*cos36 + H*sin36)/2 and labelled it "the
* painted footprint of 0.546 * width". That expression is the HALF-width
* of the BOX, not a painted footprint; the full BOX is twice it, 1.100 W.
* The two happened to land near each other for the pen by coincidence
* (its true painted footprint measures 0.550 W), so the PLACEMENT
* conclusions survive intact -- but the pen's clickable rectangle is
* twice what the comment implied, and the coffee and proof rows were
* quoted from box maths that overstates both. Everything below is
* remeasured off the shipped artwork instead of assumed: alpha > 12/255,
* rotated by the exact CSS angle, bounding box read back (Pillow; the
* script is recorded in docs/log/desk-fix3.md). Offsets are from the
* prop's box centre, in units of the prop's CSS width W:
*
* pen 420x208 rotate(36deg) painted 0.550 W (-0.281 .. +0.269)
* BOX 1.100 W (+-0.550)
* coffee 360x334 rotate(-7deg) painted 0.978 W (-0.492 .. +0.486)
* BOX 1.106 W (+-0.553)
* proof 380x332 rotate(-6deg) painted 0.966 W (-0.526 .. +0.440)
* BOX 1.086 W (+-0.543)
*
* Note the coffee: the artwork is nearly square with transparent
* corners, so rotating it NARROWS the painted footprint (0.978 W against
* 0.983 W flat) even though it widens the box by 5.3% of W per side. The
* cup's documented clearance was therefore never at risk; the box's was.
*
* PAINTED spans (paper edges: left = G, right = viewport - G). Verified
* at every width the P4 tune covered, plus the two the wrapper change
* had to be re-checked against:
*
* 1360 (G=80) coffee 1285.6..1354.0 gutter 1280..1360 5.6 / 6.0 clear
* pen 5.5..82.5 gutter 0..80 2.5 tuck, 97% out
* proof 11.6..100.4 gutter 0..80 20.4 tuck (23%)
* 1366 (G=83) coffee 1290.1..1358.5 gutter 1283..1366 7.1 / 7.5 clear
* pen 7.1..84.1 gutter 0..83 1.1 tuck, 99% out
* proof 14.6..103.4 gutter 0..83 20.4 tuck (23%)
* 1440 (G=120) coffee 1332.8..1426.7 gutter 1320..1440 12.8 / 13.3 clear
* pen 16.6..115.6 gutter 0..120 fully in gutter
* proof 25.7..139.3 gutter 0..120 19.3 tuck (17%)
* 1500 (G=150) coffee 1366.0..1483.3 gutter 1350..1500 16.0 / 16.7 clear
* pen 20.8..144.5 gutter 0..150 fully in gutter
* proof 38.3..174.5 gutter 0..150 24.5 tuck (18%)
* 1600 (G=200) coffee 1421.3..1577.8 gutter 1400..1600 21.3 / 22.2 clear
* pen 27.7..192.7 gutter 0..200 fully in gutter
* proof 59.3..233.1 gutter 0..200 33.1 tuck (19%)
* 1920 (G=360) coffee 1636.8..1842.1 gutter 1560..1920 76.8 / 77.9 clear
* pen 96.9..294.9 gutter 0..360 fully in gutter
* proof 131.5..406.8 gutter 0..360 46.8 tuck (17%)
* 2560 (G=680) coffee 2116.8..2322.1 gutter 1880..2560 236.8 / 237.9 clear
* pen 256.9..454.9 gutter 0..680 fully in gutter
* proof 451.5..726.8 gutter 0..680 46.8 tuck (17%)
*
* So the pen still FITS the gutter at 1360 under the corrected maths:
* 5.5..82.5 against a 0..80 gutter, i.e. 2.5px of writing tip under the
* sheet, which is the deliberate realism tuck, and 5.5px of clearance
* from the viewport edge. No CSS change was needed; the numbers moved by
* about a pixel. Every clamp below stands exactly as the P4 tune left it.
*
* THE PEN'S HIT RECTANGLE, stated honestly for the next tuner. Rotation
* does not rotate the hit area's contribution to hit-testing: the anchor
* is hit-tested as its rotated border box, 1.100 W wide by 0.988 W tall,
* so at 1360 it spans -32.2..121.8 and at 1920 -0.0..396.0. It is larger
* than the painted pen in every direction, so wherever the pen is
* visible the pen is clickable (the property that matters). The excess
* is only partly reachable: at >=1360 the .wp-site-blocks children take
* their own hits back (amendment 14.7), so everything from the sheet's
* left edge rightward belongs to .rar-paper and the rest is cropped at
* the viewport edge; what remains is the gutter band 0..G. Inside that
* band the dead zone is small at 1360 (the pen paints 5.5..80 of 0..80)
* and grows with the gutter (at 1920 the pen paints 96.9..294.9 of a
* 0..360 clickable band). SPEC section 12 says nothing on the desk
* except the pen responds; a clip-path on the anchor would tighten this
* to the barrel, but it would hard-code the CSS to this exact artwork,
* which amendment 13.10 explicitly leaves open to regeneration. Left as
* is, documented, for the integrator to rule on.
*
* No horizontal overflow is possible at ANY width: .rar-desk is
* position: fixed with overflow: hidden, so nothing it contains can
* extend the document's scrollable area. Props crop at the viewport
* edge as a camera crop, never as a scrollbar.
*
* The pen is rotated 36deg on top of the artwork's own lie (its barrel
* runs corner to corner in a 420x208 box, about 26deg), so the barrel
* ends up at roughly 62deg: that is what buys it its length. Unrotated,
* the artwork paints 0.967 W across (measured); at 62deg it paints
* 0.550 W, so the steeper lie fits nearly twice the pen into the
* same narrow gutter. Rotation is about the box centre, and the
* artwork's barrel midpoint sits on that centre, so the tuck arithmetic
* above holds. Rotation is a static transform, not motion; nothing here
* counts against the tier-1 ambient budget.
*
* STEAM HOOKS: the coffee cup's two steam wisps are pseudo-elements shaped
* and placed here, but their drift animation belongs to fx (tier 1 budget
* lives in components-fx.css). They reference animation-name
* rar-steam-drift, which components-fx.css defines; until fx defines it
* the wisps simply hold still. Steam counts against the two-ambient-
* elements-per-viewport cap; fx owns that accounting.
*/
/* ---------------------------------------------------------------- */
/* 1. The desk surface */
/* ---------------------------------------------------------------- */
.rar-desk {
position: fixed;
inset: 0;
z-index: -1;
overflow: hidden; /* props crop at the viewport edge: camera crop, not layout */
pointer-events: none;
background: var(--wp--preset--color--ink, #1a1712)
url("../img/desk/desk-surface.webp") center / cover no-repeat;
/* inset vignette: deepens toward the edges so the bright newsprint is
unmistakably the subject; sanctioned shadow (DESIGN-SYSTEM section 9) */
box-shadow: inset 0 0 40vmax rgba(0, 0, 0, 0.45);
/* The one measurement every prop is built from. 50% resolves against
.rar-desk (the layout viewport), 600px is half the 1200px sheet, so
this IS the width of one gutter. max() floors it at 0 for the
no-JS/narrow case where the sheet is wider than the desk. */
--rar-gutter: max(0px, calc(50% - 600px));
}
/* ---------------------------------------------------------------- */
/* 2. Props: continuous-tone objects ON the desk, never halftoned */
/* ---------------------------------------------------------------- */
/* The prop is the WRAPPER (, or for the pen), never the ![]()
.
See the markup contract in the header: a bare ![]()
is a replaced
element and generates no pseudo-elements, which is what kept the steam
below from ever painting. Everything the props are placed by -- the
width clamps, left/right/top/bottom, the rotations -- applies to this
wrapper box. */
.rar-prop {
position: absolute;
display: none; /* revealed only at >=1360px, see section 3 */
height: auto; /* content height: the img's, since the img is display:block */
line-height: 0; /* an inline line box would give the wrapper 14px of
phantom height before the injected image loads, and
the steam's percentage height resolves against the
wrapper, so it computed to 0 and never painted */
pointer-events: none; /* set dressing, not UI */
/* Local fallback so a prop is never geometry-less if it is ever
rendered outside .rar-desk. */
--rar-gutter: max(0px, calc(50% - 600px));
}
/* The picture fills its wrapper exactly and keeps its own intrinsic
ratio, so the wrapper's border box is identical to the box the bare
![]()
used to paint and the whole gutter table still holds. No
object-fit: there is no box to fit, the box is derived from the image.
display:block also kills the inline baseline gap that would otherwise
add a few pixels below every prop. */
.rar-prop > img {
display: block;
width: 100%;
height: auto;
}
/* COFFEE -- right gutter, upper third, at NATURAL SIZE (owner-supplied
artwork, 2026-07-28, recalibrated against the phone 2026-07-28: 399x338).
Same scale ruling as the phone and the pen: the cup is no longer
sized by the gutter, the gutter just decides how much of it you see.
MOVED OFF THE SHEET 2026-07-28 (owner): the mug now sits CLEAR of
the paper, its left edge a small gap to the right of the sheet edge,
so it reads as standing on the desk beside the newspaper rather than
under it. The visible slice still grows with the screen:
1360 (G 80): tuck 24, the left rim in frame, the body past the
viewport edge
1920 (G 360): tuck 108, most of the mug on the desk, a sliver of
handle cropped
2560 (G 680): the whole mug, 150px under the sheet
Tuck runs 0.3 G between 24 and 150px. The -7deg turn is kept: this
is top-down artwork, so rotation is legitimate here in a way it is
not on the front-view phone; it just swings the handle a little.
LAYERING WITH THE PEN, which shares this gutter below. At viewport
heights under about 960px a 338px mug and a 490px pen cannot stack,
so they overlap by design and the MUG PAINTS ON TOP: the manifest
order in functions.php is pen before coffee precisely so the cup
sits in front of the pen's upper barrel, the way a mug put down on a
desk lands in front of whatever was already there. The pen stays
clickable through the overlap because every prop except the pen is
pointer-events: none, so hits pass through the mug to the anchor
beneath. The WATERGATE lettering sits low on the barrel and stays
visible below the mug at every height from 768 up.
The steam pseudo-elements below are sized in percentages of this
wrapper, so at natural size the wisps scale up with the cup. */
.rar-prop--coffee {
top: clamp(72px, 12vh, 200px);
left: calc(
50% + 600px + clamp(6px, calc(var(--rar-gutter) * 0.04), 24px)
);
width: 399px;
transform: rotate(-7deg);
}
/* Steam wisps: two soft paper-toned blurs above the cup's rim. Shape and
rest state live here; motion (rar-steam-drift) is defined by fx.
Sized in percentages of the cup, so they scale with it. These generate
boxes ONLY because the prop is now a wrapper (see the markup
contract in the header); on the old bare ![]()
they never existed.
The percentages resolve against the wrapper's padding box, and the
HEIGHT percentages resolve even though the wrapper's height is content
determined, because these wisps are themselves absolutely positioned
(CSS 2.1 10.5: the compute-to-auto escape applies only to
non-absolutely-positioned boxes). Verified in Chrome: at V=1360 the
used values come back 15.39 x 29.86px at top -22.08px, exactly 22% /
46% / -34% of a 70 x 64.94px cup. Motion is transform-only; the blur
and the 4-5% opacity (SPEC section 12 asks for 3-5%) are static. */
.rar-prop--coffee::before,
.rar-prop--coffee::after {
content: "";
position: absolute;
left: 38%;
top: -34%;
width: 22%;
height: 46%;
background: radial-gradient(
ellipse 50% 60% at 50% 60%,
rgba(244, 239, 228, 0.9) 0%,
rgba(244, 239, 228, 0) 70%
);
filter: blur(3px);
/* SPEC section 12 suggested 3-5%. Built at 5% it was invisible on a
dark desk at any size: the owner never once saw it. Raised until it
reads as a wisp rather than a rumour. Still well under the paper's
own contrast, so it never competes with the sheet. */
opacity: 0.28;
}
.rar-prop--coffee::after {
left: 52%;
top: -26%;
width: 16%;
opacity: 0.2;
}
@media (prefers-reduced-motion: no-preference) {
.rar-prop--coffee::before {
animation: rar-steam-drift 7s ease-in-out infinite;
}
.rar-prop--coffee::after {
animation: rar-steam-drift 8.5s ease-in-out infinite;
animation-delay: 2.1s;
}
}
@media (prefers-reduced-motion: reduce) {
/* motionless steam reads as a smudge on the desk; remove it outright */
.rar-prop--coffee::before,
.rar-prop--coffee::after {
content: none;
}
}
/* THE WATERGATE PEN -- right gutter, low, laid against the sheet's
right edge. THE pointer-events exception (see header): the site's
one interactive easter egg, so it is the prop with the hard
visibility floor.
REPLACED AND RE-PLACED 2026-07-28 (owner). New artwork: a black
barrel with gold trim and THE WATERGATE / WASHINGTON D.C. in gold,
drawn upright with its own lean already in the picture. Source is now
105x588 portrait, where the old one was 420x208 landscape; the
owner then recalibrated it against the phone to 91x490.
ROTATION IS GONE, and that is the point of the new art. The old
-36deg lie existed to make a horizontal drawing read as a pen dropped
on a desk, and it cost a lot: the painted box was only 0.550 of the
border box, so the whole placement had to be derived from a measured
fudge factor, and the anchor's hit area was 1.100 W by 0.988 W of
mostly empty rotated box. With the lean drawn in, the border box IS
the barrel. Every number below is therefore a real dimension rather
than a correction, and the easter egg's click target is now the pen
instead of a rectangle around it.
SIDE AND SIZE CORRECTED 2026-07-28 (owner): the pen sits on the
RIGHT of the paper, under the writing hand, and it displays at the
size the artwork was supplied (91x490, recalibrated against the
phone). The natural size matters for
the same reason it does on the phone: a pen scaled down to a gutter
ornament stops reading as a pen lying next to a newspaper and starts
reading as a decoration. At 91px wide against the 1200px sheet it
is simply the size a pen is.
PLACEMENT. MOVED OFF THE SHEET 2026-07-28 (owner): the pen now sits CLEAR of
the paper, its left edge a small gap to the right of the sheet edge:
left edge = sheetR + gap -> left: 50% + 600px + gap
The gap runs 0.03 G between 4 and 16px. At 1360 the barrel spans
1284..1375, so 15px of its right side crops at the viewport edge;
the lettering and the clip stay on screen, and the crop shrinks as
the gutter grows.
VERTICAL. Bottom-anchored, 2vh between 12 and 60px. The coffee holds
the top of this gutter at natural size, and below about 1100px of
viewport height the two overlap by design: the mug paints on top of
the pen's upper barrel (manifest order, see the coffee rule) and the
pen remains clickable through it, since the mug is pointer-events:
none. From about 960px of height upward they separate cleanly
(coffee ends 511, pen starts 921 at 1440-tall screens). */
.rar-prop--pen {
bottom: clamp(12px, 2vh, 60px);
left: calc(
50% + 600px + clamp(4px, calc(var(--rar-gutter) * 0.03), 16px)
);
width: 91px;
}
/* The hit area is now the barrel. With the rotation gone the anchor's
border box is W by 5.600 W with the artwork trimmed to its own alpha
bounds, so the clickable rectangle and the painted pen are the same
object -- no rotated excess, nothing reachable that does not look
like a pen. The picture inside is sized by `.rar-prop > img` in
section 2, same as every other prop.
At natural size the target is 91 by 490, a comfortable click at
every width. It remains set dressing carrying an easter egg, not
navigation -- the Southern Strategy dossier is reachable from the nav
and from every page that cites it. */
a.rar-prop--pen {
pointer-events: auto;
cursor: pointer;
}
/* MARKED-UP PROOF PAGE -- left gutter, upper third, peeking out from
under the newspaper. This is the one prop that is SUPPOSED to run
under the sheet, so it is anchored by its RIGHT edge to a fixed
overlap past the paper's left edge:
right edge = G + overlap -> right: 100% - G - overlap
and 100% - G simplifies to 50% + 600px. Overlap tracks 0.22 G
between 26px and 64px, and the width is tuned so the tuck stays at
a constant-looking share of the scrap at every width while its outer
edge never reaches the viewport edge. Remeasured against the painted
artwork (the header table; the P4 figures came from box maths and
overstated the tuck): the tuck runs 17-23% of the painted width, and
the outer edge clears the viewport by 11.6px at 1360 rising to 131.5px
at 1920. The -6deg lie keeps the sheet's straight left edge
from reading as a second, parallel page border. Source 380x332.
RE-SEATED UNDER THE PHONE 2026-07-28. The phone now displays at
natural size (see its rule) and owns most of this gutter's height,
so the scrap is anchored to the BOTTOM of the viewport and layers
UNDER the phone where the two meet -- the phone is injected after it,
so it paints on top, and a paper scrap pinned under the base of a
telephone is exactly how a desk accumulates. At 1920x1080 the phone
ends near y 800 and the scrap runs 809 to about 1058, so most of it
shows below the phone; at 1360x768 the phone reaches the bottom of
the screen and the scrap is almost entirely under it, which costs
nothing at a width where the gutter is an 80px sliver anyway. The
tuck under the sheet's left edge, the width curve and the lie are
the P4/Gate-B tuned values, untouched. */
.rar-prop--proof {
bottom: clamp(10px, 2vh, 40px);
right: calc(
50% + 600px - clamp(26px, calc(var(--rar-gutter) * 0.22), 64px)
);
width: clamp(92px, calc(var(--rar-gutter) * 0.78 + 24px), 285px);
transform: rotate(-6deg);
}
/* PHONE -- left gutter, top. Placed by how a telephone is actually used
(owner ruling 2026-07-28) rather than by where there happened to be a
gap on the desk.
A desk phone goes on the LEFT. You lift the handset with the left
hand and keep the right one free to write, which is why every
newsroom photograph of the period shows the phone to the left of the
blotter and the notepad in front of it. Place it anywhere else and
the desk still looks arranged; place it here and it looks used. The
pen sitting at the bottom of the same gutter is the other half of
that gesture.
This is the corner the proof scrap used to hold, so the proof moves
down the same gutter (see below). The left gutter therefore carries
three props against the right gutter's one. That is deliberate and it
is not a balance problem: they are spread over the full viewport
height, and a real desk is asymmetric because a person sits at one
side of it.
NATURAL SIZE (owner scale ruling, 2026-07-28: "as a person who was
around when these things existed" -- the phone displays at the size
the artwork was supplied, 716x692, and only a portion of it shows on
most screens). The previous cut scaled the phone to fit inside the
gutter, which made a desk telephone smaller than a coffee mug and
"comically small compared to a newspaper." The correction is the
deep insight of this desk: real objects do not shrink to fit the
space beside a broadsheet. A real phone next to a real newspaper is
LARGE, and most of it would be under the paper or past the edge of
your view. So it is no longer sized by the gutter at all; the gutter
just decides how much of it you see.
RAISED AND PULLED LEFT 2026-07-28 (owner), on the third artwork
(745x844, shipped exactly as supplied, no re-crop). The tuck under
the sheet is now nearly nothing, 0.06 G between 4 and 24px, so the
phone stands beside the paper rather than under it, and the top sits
at clamp(10px, 2.5vh, 56px), high against the viewport edge the way
a phone lives at the back corner of a desk. No rotation: this is a
photographed object seen from the front, and tilting it reads as
falling over, not as casually placed.
The proof scrap (DOM order: injected before the phone) layers UNDER
it where they meet, which is what paper on a desk with a phone on
top of it does; see the proof rule.
No steam, no pseudo-elements, nothing animated: SPEC section 11 caps
a viewport at two moving elements and both slots are spent above
1360px (the lead band's curl and the coffee steam). This one is
still. */
.rar-prop--phone {
top: clamp(10px, 2.5vh, 56px);
right: calc(
50% + 600px - clamp(4px, calc(var(--rar-gutter) * 0.06), 24px)
);
width: 745px;
}
/* ---------------------------------------------------------------- */
/* 3. Where there is desk to see (SPEC section 12 responsive rules) */
/* ---------------------------------------------------------------- */
/* >=1360px: gutters are wide enough to dress; props appear.
main.js injects them only in this range; this rule is the visibility
gate if markup is ever server-rendered. */
@media (min-width: 1360px) {
.rar-prop {
display: block;
}
}
/* Gutter click-path (DESIGN-SYSTEM amendment 14.7): the .wp-site-blocks
wrapper spans the full viewport and, although it paints nothing over
the gutters, it still captures pointer hits there, which would keep
clicks from ever reaching the Watergate pen anchor (the one
pointer-events exception, section 2). At desk widths the wrapper
releases its hits and its direct children take them back; every
template roots a single centered 1200px .rar-paper sheet as the
direct child (plus core's injected skip link), so the restored
children never cover the gutters and clicks there fall through to
the desk pen. pointer-events has no effect on painting: the body
canvas, the desk surface, and the paper all render exactly as
before. */
@media (min-width: 1360px) {
.wp-site-blocks {
pointer-events: none;
}
.wp-site-blocks > * {
pointer-events: auto;
}
}
/* 1100px-1360px: desk texture shows, props are dropped (the .rar-prop
default display: none already covers this band; no rule needed). */
/* <1100px: the paper fills the viewport edge to edge; the desk layer is
gone. main.js removes the node entirely (unloaded, not hidden); this
is the CSS backstop, and it also keeps the desk-surface WebP from ever
being fetched in the no-JS case, since the element generates no box. */
@media (max-width: 1099.98px) {
.rar-desk {
display: none;
}
}
/* Props are continuous-tone objects on the desk, not printed matter:
override the global 1px ink img border from style.css (integrator,
Gate A finding; material rule, SPEC section 12). The second selector
is the legacy bare-![]()
shape; it can no longer be emitted, but it
costs nothing and keeps a browser holding a cached copy of the old
main.js from painting an ink border around the props. */
.rar-desk .rar-prop img,
.rar-desk img.rar-prop {
border: 0;
}