/* ============================================================
SHARED SECTION GRAMMAR (2026-09-09)
Alex-style feature rows (text one side, one visual the other,
swapping each row), media slots left empty for the shoots, and
glass cards that sit ON the visual with rows that pop in one by
one. Built from the glasscraft dials (frosted dark, desktop
values: half the board blur) and the Alex grammar Mark recorded:
a real person fills the frame, the glass card sits on the empty
side, rows arrive one at a time with an icon, a label, one line
of detail and a check or a cross. Text is always a sibling above
the glass, never inside the filtered layer.
============================================================ */
/* ---------- rows ---------- */
.arow-sec { padding: clamp(60px, 8vh, 110px) 0; }
.arow-sec > .wrap { width: min(1320px, calc(100% - 48px)); margin: 0 auto; }
.arow-sec__head { max-width: 760px; margin: 0 auto clamp(40px, 6vh, 72px); text-align: center; }
.arow-sec__head h2 { font: 900 clamp(30px, 3.9vw, 48px)/1.04 var(--font-display); letter-spacing: -.03em; color: var(--ink); margin: 0; }
.arow-sec__head p { margin: 14px auto 0; font: 500 clamp(15px, 1.5vw, 18px)/1.55 var(--font-body); color: var(--body); max-width: 56ch; }
.arow { display: grid; grid-template-columns: minmax(0, 4.6fr) minmax(0, 8fr); gap: clamp(36px, 5vw, 84px); align-items: center; }
.arow + .arow { margin-top: clamp(64px, 10vh, 120px); }
.arow--flip .arow__txt { order: 2; }
/* a flipped row swaps the sides, never the widths: the media keeps the wide
column or the object gets squeezed into a sliver (Mark, 2026-09-10) */
.arow--flip { grid-template-columns: minmax(0, 8fr) minmax(0, 4.6fr); }
.arow__txt h3 { font: 730 clamp(30px, 3.4vw, 46px)/1.02 var(--font-display); letter-spacing: -.025em; color: var(--ink); margin: 0 0 14px; }
.arow__txt p { font-size: 17px; line-height: 1.58; color: var(--body); max-width: 46ch; margin: 0 0 22px; }
.arow__txt .pts { margin: 0 0 22px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.arow__txt .pts li { display: flex; gap: 10px; align-items: center; font-size: 15px; color: var(--ink); }
.arow__txt .pts .icon { width: 16px; height: 16px; color: var(--emerald, #21a97a); flex: none; }
.arow__go { display: inline-flex; align-items: center; gap: 7px; font: 700 15px/1 var(--font-display); color: var(--cobalt-dp); text-decoration: none; }
.arow__go .icon { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.arow__go:hover .icon { transform: translateX(4px); }
/* the visual box: one radius, clipped, its own stacking context so glass inside never goes blind */
.arow__vis { position: relative; border-radius: 22px; overflow: hidden; isolation: isolate; min-height: clamp(320px, 42vw, 560px); box-shadow: 0 24px 60px rgba(11, 20, 64, .12); }
.arow__vis--tall { min-height: clamp(380px, 48vw, 640px); }
/* PURE-UI GROUND (approved 2026-09-09): clean beige under a thin glass sheet.
Mark chose between this and the dark-glass version and approved both; beige is
the one in use, because the page is a warm light page and a dark block in the
middle of it fights the rest. Swapping to dark is this one rule.
No lines behind the sheet (Mark, 2026-09-09): clean beige and nothing else.
--mint / --blue / --sand are kept as class names so existing markup still works;
they all render this same ground now. */
.arow__vis--panel { display: grid; place-items: center; padding: clamp(26px, 3.4vw, 50px);
background: #F2EADC; box-shadow: var(--shadow-float, 0 24px 60px rgba(11,20,64,.12)), inset 0 0 0 1px rgba(255,255,255,.6); }
.arow__vis--panel::after { content: ""; position: absolute; inset: 14px; border-radius: 18px; z-index: 0; pointer-events: none;
-webkit-backdrop-filter: blur(7px) saturate(112%); backdrop-filter: blur(7px) saturate(112%);
background: linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,.08) 42%, rgba(255,255,255,.22));
box-shadow: inset 0 2px 0 rgba(255,255,255,.9), inset 0 -2px 0 rgba(11,20,64,.05), 0 24px 56px -34px rgba(11,20,64,.4),
inset 0 0 0 1.5px rgba(255,255,255,.5); }
.arow__vis--panel > * { position: relative; z-index: 1; }
.arow__vis--sand, .arow__vis--mint, .arow__vis--blue { }
.arow__vis--navy { background: linear-gradient(160deg, #1B3572 0%, #2C4C93 48%, #35609F 100%); }
@media (max-width: 820px) {
.arow { grid-template-columns: 1fr; gap: 22px; }
.arow--flip .arow__txt { order: 0; }
.arow + .arow { margin-top: clamp(48px, 8vh, 72px); }
.arow__vis { min-height: clamp(260px, 62vw, 420px); }
}
/* ---------- media slots (empty until the shoot) ----------
A slot is the ground a future video or picture will occupy. It is
dark blue with faint hairline beams so a glass card on top of it
has edges to act on, and it carries a small label that says what
will be shot there. Set the ratio on the parent (.arow__vis or any
box with position:relative); the slot fills it. */
.slot { position: absolute; inset: 0; background:
radial-gradient(60% 70% at 78% 18%, rgba(102, 182, 230, .26), transparent 62%),
radial-gradient(50% 60% at 12% 92%, rgba(152, 249, 214, .14), transparent 60%),
linear-gradient(160deg, #1B3572 0%, #2C4C93 46%, #3B67B8 100%); }
.slot::before { content: ""; position: absolute; inset: 0; pointer-events: none;
background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 64px);
-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, .15));
mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, .15)); }
.slot__lab { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max-content; max-width: 32ch;
text-align: center; color: rgba(255, 255, 255, .78); font: 500 13px/1.5 var(--font-body); letter-spacing: .01em; }
.slot__lab b { display: flex; align-items: center; justify-content: center; gap: 7px; color: #fff; font: 700 12px/1 var(--font-display); letter-spacing: .12em; margin-bottom: 9px; }
.slot__lab b .icon { width: 14px; height: 14px; }
/* when a glass card sits over a slot, keep the label out from under it */
.slot--labtl .slot__lab { left: auto; top: auto; right: 22px; bottom: 20px; transform: none; text-align: right; }
.slot--labtl .slot__lab b { justify-content: flex-end; }
.slot--labbl .slot__lab { left: 22px; top: auto; bottom: 20px; transform: none; text-align: left; }
.slot--labbl .slot__lab b { justify-content: flex-start; }
.slot--labtr .slot__lab { left: 22px; top: 20px; transform: none; text-align: left; }
.slot--labtr .slot__lab b { justify-content: flex-start; }
/* ---------- glass cards (frosted dark, from glasscraft K2, desktop radii) ----------
One light source, top-left. Rows are siblings of the backdrop, never its
children. Controls inside are plain fills, never a second glass. */
/* SIZE LAW (Mark, 2026-09-09): the card is at most a third of the frame, it sits to the
left or right of the person, never over them. Default 240px on a 3:2 frame. */
.gcard { position: absolute; width: var(--w, 240px); max-width: min(38%, calc(100% - 32px)); border-radius: var(--r, 16px); --rimA: .30;
box-shadow: 8px 16px 40px rgba(0, 0, 0, .35); z-index: 3; }
.gcard > .bd { position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
-webkit-backdrop-filter: blur(12px) saturate(150%); backdrop-filter: blur(12px) saturate(150%);
background: rgba(10, 12, 16, .46);
box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .28), inset 0 -1px 0 rgba(255, 255, 255, .05); }
.gcard > .rim { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1.5px;
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
background: linear-gradient(135deg, rgba(255, 255, 255, var(--rimA)) 0%, rgba(255, 255, 255, calc(var(--rimA) * .32)) 42%, rgba(255, 255, 255, .03) 100%); }
.gcard > .c { position: relative; z-index: 2; color: #fff; padding: 11px 13px 9px; }
/* thin: chips and bubbles */
.gcard--thin { --rimA: .28; box-shadow: 4px 8px 20px rgba(0, 0, 0, .30); }
.gcard--thin > .bd { -webkit-backdrop-filter: blur(7px) saturate(140%); backdrop-filter: blur(7px) saturate(140%); background: rgba(10, 12, 16, .26); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22); }
/* paper: the light card for Alex's "breakdown" panel, dark ink, dark hairline rim */
.gcard--paper { --rimA: .0; box-shadow: 0 18px 44px -14px rgba(11, 20, 64, .38), 0 1px 0 rgba(255, 255, 255, .6) inset; }
.gcard--paper > .bd { -webkit-backdrop-filter: blur(10px) saturate(120%); backdrop-filter: blur(10px) saturate(120%); background: rgba(248, 243, 233, .88);
box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .75), inset 0 -1px 0 rgba(11, 20, 64, .06); }
.gcard--paper > .rim { background: linear-gradient(135deg, rgba(11, 20, 64, .14) 0%, rgba(11, 20, 64, .06) 45%, rgba(11, 20, 64, .10) 100%); }
.gcard--paper > .c { color: var(--ink); }
/* header line inside a card: avatar + name (the "R" of Radius) */
.gcard__hd { display: flex; align-items: center; gap: 8px; font: 600 12px/1 var(--font-display); letter-spacing: -.01em; opacity: .92; margin-bottom: 6px; }
.gcard__av { width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; font: 800 10px/1 var(--font-display); color: #fff; background: var(--grad-blue); flex: none; }
.gcard__msg { font: 500 13.5px/1.4 var(--font-body); letter-spacing: -.005em; }
.gcard--paper .gcard__msg { color: var(--ink); }
/* rows */
.gcard__row { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-top: 1px solid rgba(255, 255, 255, .10); }
.gcard__row:first-child { border-top: 0; padding-top: 2px; }
.gcard--paper .gcard__row { border-top-color: rgba(11, 20, 64, .08); }
.gcard__ico { width: 18px; height: 18px; flex: none; display: inline-grid; place-items: center; color: rgba(255, 255, 255, .85); }
.gcard__ico .icon { width: 14px; height: 14px; }
.gcard--paper .gcard__ico { color: var(--body); }
.gcard__lab { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gcard__lab b { font: 600 12.5px/1.2 var(--font-display); letter-spacing: -.01em; }
.gcard__lab span { font: 500 11px/1.3 var(--font-body); opacity: .72; }
.gcard--paper .gcard__lab span { color: var(--body); opacity: 1; }
.gcard__st { width: 18px; height: 18px; border-radius: 50%; flex: none; display: inline-grid; place-items: center; color: #fff; }
.gcard__st .icon { width: 11px; height: 11px; }
.gcard__st--ok { background: #21a97a; }
.gcard__st--no { background: #D9534F; }
.gcard__st--wait { background: #E0A83A; }
/* pop-in sequence: rows arrive one by one, hold, leave one by one, loop (12s) */
.gcard[data-seq] .gcard__row, .gcard[data-seq] .gcard__hd { opacity: 0; transform: translateY(6px); animation: gRow 12s var(--ease) infinite; animation-delay: calc(var(--i, 0) * .55s + var(--d0, 0s)); }
@keyframes gRow { 0% { opacity: 0; transform: translateY(6px); } 4% { opacity: 1; transform: none; } 80% { opacity: 1; transform: none; } 86% { opacity: 0; transform: translateY(-4px); } 100% { opacity: 0; } }
/* a whole card that pops as one (bubbles) */
.gcard[data-pop] { opacity: 0; transform: translateY(8px) scale(.985); animation: gPop 12s var(--ease) infinite; animation-delay: var(--d0, 0s); }
@keyframes gPop { 0% { opacity: 0; transform: translateY(8px) scale(.985); } 5% { opacity: 1; transform: none; } 82% { opacity: 1; transform: none; } 88% { opacity: 0; transform: translateY(-4px); } 100% { opacity: 0; } }
/* CYCLE (Mark, 2026-09-09: the talk must change more often, with more lines):
N bubbles stacked in the same spot, each visible in turn, 2.8s per line.
(--i from 0) */
.gcard[data-cycle] { opacity: 0; transform: translateY(6px); animation-timing-function: var(--ease); animation-iteration-count: infinite; animation-delay: calc(var(--i, 0) * 2.8s); }
.gcard[data-cycle="3"] { animation-name: gCyc3; animation-duration: 8.4s; }
.gcard[data-cycle="4"] { animation-name: gCyc4; animation-duration: 11.2s; }
.gcard[data-cycle="5"] { animation-name: gCyc5; animation-duration: 14s; }
.gcard[data-cycle="6"] { animation-name: gCyc6; animation-duration: 16.8s; }
@keyframes gCyc3 { 0% { opacity: 0; transform: translateY(6px); } 4% { opacity: 1; transform: none; } 29% { opacity: 1; transform: none; } 33% { opacity: 0; transform: translateY(-4px); } 100% { opacity: 0; } }
@keyframes gCyc4 { 0% { opacity: 0; transform: translateY(6px); } 3% { opacity: 1; transform: none; } 22% { opacity: 1; transform: none; } 25% { opacity: 0; transform: translateY(-4px); } 100% { opacity: 0; } }
@keyframes gCyc5 { 0% { opacity: 0; transform: translateY(6px); } 2.5% { opacity: 1; transform: none; } 17.5% { opacity: 1; transform: none; } 20% { opacity: 0; transform: translateY(-4px); } 100% { opacity: 0; } }
@keyframes gCyc6 { 0% { opacity: 0; transform: translateY(6px); } 2% { opacity: 1; transform: none; } 14.6% { opacity: 1; transform: none; } 16.6% { opacity: 0; transform: translateY(-4px); } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
.gcard[data-seq] .gcard__row, .gcard[data-seq] .gcard__hd, .gcard[data-pop] { animation: none !important; opacity: 1 !important; transform: none !important; }
.gcard[data-cycle] { animation: none !important; opacity: 0 !important; }
.gcard[data-cycle][style*="--i:0"], .gcard[data-cycle][style*="--i: 0"] { opacity: 1 !important; transform: none !important; }
}
/* ---------- flat requirement list for pure-UI panels (no glass on glass) ----------
The "meets 4 of 5" object: a white card on the tinted panel, rows marked
proven / claimed / missing / not asked. Never a percentage. */
.reqcard { width: min(100%, 460px); background: #fff; border: 1px solid var(--line-soft); border-radius: 16px; padding: 16px 18px 10px; box-shadow: 0 18px 44px -18px rgba(11, 20, 64, .28); }
.reqcard__hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.reqcard__who { display: flex; align-items: center; gap: 10px; }
.reqcard__av { width: 36px; height: 36px; border-radius: 50%; display: inline-grid; place-items: center; font: 800 12px/1 var(--font-display); color: #fff; background: var(--grad-blue); }
.reqcard__who b { display: block; font: 700 15px/1.15 var(--font-display); color: var(--ink); letter-spacing: -.01em; }
.reqcard__who span { display: block; font: 500 12.5px/1.3 var(--font-body); color: var(--body); }
.reqcard__meets { font: 700 13.5px/1 var(--font-display); color: var(--ink); background: var(--paper-2); border-radius: 999px; padding: 8px 12px; white-space: nowrap; }
.reqcard__meets em { font-style: normal; background: var(--grad-blue); -webkit-background-clip: text; background-clip: text; color: transparent; }
.reqcard__row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line-soft); font: 500 14.5px/1.3 var(--font-body); color: var(--ink); }
.reqcard__row small { display: block; font-size: 12.5px; color: var(--body); margin-top: 2px; }
.reqcard__tag { font: 700 11.5px/1 var(--font-display); letter-spacing: .02em; border-radius: 999px; padding: 6px 10px; white-space: nowrap; }
.reqcard__tag--proven { color: #0F6E4E; background: #E3F5EC; }
.reqcard__tag--claimed { color: #7A5A12; background: #FBF0D6; }
.reqcard__tag--missing { color: #8E2D2A; background: #FBE3E1; }
.reqcard__tag--notasked { color: var(--body); background: var(--paper-2); }