, so the card had a box to be. */
.section { padding: clamp(.9rem, .7rem + .9vw, 1.6rem) 1.5rem; }
.section.tight { padding-block: clamp(.5rem, .4rem + .5vw, .9rem); }
.section > .container {
position: relative; /* the beam is an ::before on this */
background: var(--surface);
/* The border earns its place in DARK, where the card is #1D2125 on a #101316 canvas and
needs an edge to be a card at all. In light it is a faint halo around a white card and
costs nothing, so one rule covers both. */
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
padding: clamp(2.25rem, 1.75rem + 2vw, 3.5rem) clamp(1.5rem, 1rem + 2vw, 3rem);
}
/* Sections whose CONTENT is already a card: the three legal documents wrap .prose, and the
contact form wraps .form-wrap. Carding the section too would put a card inside a card. */
.section.bare { padding-block: clamp(2.25rem, 1.75rem + 2vw, 3.5rem); }
.section.bare > .container {
background: none;
border: 0;
border-radius: 0;
box-shadow: none;
/* ZERO, not the .container default of 0 1.5rem. The section already supplies that gutter, so
keeping the container's own padding would inset .prose and .form-wrap by 3rem while every
carded section's card starts at 1.5rem - the cards would not line up down the page. */
padding: 0;
}
/* .alt used to mean "the white one" in the alternating model. Every card is --surface now, so
it decides nothing - kept only because the markup carries it and removing it from four
files buys nothing. Do not hang new meaning on it without renaming it. */
/* ---------------------------------------------------------------- the beam */
/* A lit segment running the card's border, the same idea as the header separator and the
hero traces: same #E8442E, same 11s period.
It is a conic gradient rotated behind the card and masked down to the 1px ring, which is
the only pure-CSS way to light a ROUNDED rectangle's edge - a background-position slide
like the header's works on a straight line and cannot turn a corner.
The angle has to be an @property or it will not interpolate; a plain custom property is a
string to the animation engine and jumps 0 -> 360 in one frame. Where @property is missing
the beam simply sits still and the ordinary border is still there underneath, so nothing
breaks - it just stops moving.
HONEST CAVEAT: a conic sweep is angular, not perimeter-based, so the lit point covers the
short edges faster than the long ones. On a 1180x600 card the unevenness is visible if you
look for it. Fixing it properly needs an SVG path per card size, which is JS this site
does not otherwise need. */
@property --beam-angle {
syntax: '
';
initial-value: 0deg;
inherits: false;
}
.section > .container::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px; /* the ring thickness the mask leaves behind */
pointer-events: none;
background: conic-gradient(from var(--beam-angle),
transparent 0turn, transparent .78turn,
#E8442E .88turn, #E8442E .92turn,
transparent 1turn);
/* Punch the middle out: paint the padding box, subtract the content box, leaving the ring. */
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
animation: beam-run 11s linear infinite;
}
/* Out of phase on purpose. In step they read as one mechanism firing; staggered they read as
several things quietly alive. The offsets are just thirds of the period, negated so every
card is already mid-run on load rather than waiting to start. */
.section:nth-of-type(2) > .container::before { animation-delay: -3.7s; }
.section:nth-of-type(3) > .container::before { animation-delay: -7.3s; }
.section.bare > .container::before { content: none; }
@keyframes beam-run {
to { --beam-angle: 360deg; }
}
/* The section that should absorb any leftover viewport height on a short page. Put this on the
section carrying the most substantial content - on contact.html that is the form. Only one
section per page should have it, or they will split the slack between them. */
.section.stretch { flex: 1 0 auto; }
/* A hairline rule with a short red leader, used above section headings. It replaces the
decorative-icon habit: one line of brand color, no clip art. */
.rule {
display: block;
height: 3px;
width: 46px;
border-radius: 2px;
background: var(--accent);
margin-bottom: 1.25rem;
}
/* ------------------------------------------------------------------ header */
/* The sticky lives on the WRAPPER, not on .site-head. js/site.js injects the header partial into