/* ============================================================
   About Us — page-specific decoration.

   The only first-person page on the site, and the only one that
   carries personal photography. CYAN leads throughout (the story
   accent), with green marking the 2007 founding beat, gold marking
   "today", and Bitcoin orange on its own panel.

   PER-DOG VALUES ARE DATA, NOT STYLING. Each roster card's frame
   colour, accent and photo crop differ per dog, so they arrive as
   inline custom properties (--frame / --accent / --pos) and every
   rule below reads them. That keeps 11 near-identical rule blocks
   out of this file while leaving the actual styling here.

   Keyframes are global, so everything here is `ab`-prefixed.

   NOTE on <p>/<b>/<a>/<i>: the theme and DS style bare elements at
   specificity 0,1,1, which beats any single-class rule here (0,1,0).
   Every rule below that lands on one of those is scoped under
   `.xs-page` for that reason.
   ============================================================ */

@keyframes abFloatA{0%,100%{transform:rotate(5deg) translateY(0)}50%{transform:rotate(5deg) translateY(-8px)}}
@keyframes abFloatB{0%,100%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(-4deg) translateY(-8px)}}

/* ---------- hero ---------- */
.ab-hero{position:relative;min-height:86vh;display:flex;align-items:center;overflow:hidden;color:#fff;
	background:radial-gradient(circle at 74% 30%,#0d1a33,#04070f 64%)}
/* the site header is fixed and transparent over the hero */
.ab-hero__fade{position:absolute;inset:0 0 auto 0;height:300px;pointer-events:none;
	background:linear-gradient(180deg,var(--ink-900) 0,var(--ink-900) 130px,transparent 100%)}
.ab-hero__inner{position:relative;width:100%;padding-top:calc(130px + clamp(1rem,3vw,2.5rem))}
.ab-hero__media{position:relative;min-height:clamp(380px,44vw,500px)}

/* byline under the hero copy */
.ab-byline{display:flex;align-items:center;gap:.8rem;margin-top:1.6rem;
	font-size:.82rem;color:rgba(255,255,255,.55)}
.ab-byline::before{content:"";width:36px;height:1px;background:rgba(255,255,255,.3);flex:none}

/* ---------- polaroids ---------- */
/* Two photos on a diagonal stagger — they must not overlap into each
   other's faces, so the back one is pinned top-right and the front one
   bottom-left rather than being stacked. */
.ab-polaroid{position:absolute;background:#fff;padding:9px 9px 34px;border-radius:4px;
	box-shadow:0 20px 50px rgba(0,0,0,.55)}
.ab-polaroid img{width:100%;height:auto;display:block;object-fit:cover}
.ab-polaroid__cap{position:absolute;left:0;right:0;bottom:9px;text-align:center;
	font-size:.72rem;color:#3a3a3a;font-family:var(--font-body);padding:0 8px}
.ab-polaroid--back{top:0;right:0;width:min(240px,56%);transform:rotate(5deg);
	animation:abFloatA 7s ease-in-out infinite}
.ab-polaroid--back img{aspect-ratio:1/1}
.ab-polaroid--front{bottom:0;left:0;width:min(290px,66%);transform:rotate(-4deg);
	animation:abFloatB 8.5s ease-in-out infinite .6s;z-index:2}
.ab-polaroid--front img{aspect-ratio:4/5}

/* ---------- the story ---------- */
.ab-story{display:flex;flex-direction:column;gap:1.25rem}
.xs-page .ab-story p{font-size:1.12rem;line-height:1.72;color:rgba(255,255,255,.82);margin:0}
.ab-story__last{font-family:var(--font-display);font-size:clamp(1.3rem,2.6vw,1.7rem);color:#fff}

/* timeline */
.ab-tl{margin-top:2.6rem}
.ab-tl__rule{height:1px;background:linear-gradient(90deg,transparent,rgba(0,212,255,.45),transparent);
	margin-bottom:1.6rem}
.ab-tl__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem}
.ab-tl__dot{width:15px;height:15px;border-radius:50%;background:var(--ink-900);
	border:3px solid var(--dot,var(--cyan));box-shadow:0 0 0 4px rgba(0,212,255,.12)}
.ab-tl__year{font-family:var(--font-display);font-size:1.5rem;color:var(--cyan);margin-top:.7rem}
.ab-tl__label{font-size:.92rem;line-height:1.45;color:rgba(255,255,255,.72);margin-top:.2rem}

/* ---------- what xSyte is now ---------- */
.ab-card{background:#0b1120;border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:22px}
.ab-card>i{color:var(--cyan);font-size:1.3rem}
.ab-card__title{font-family:var(--font-display);font-size:1.2rem;color:#fff;margin:.6rem 0 .35rem}
.xs-page .ab-card__body{font-size:.92rem;line-height:1.55;color:rgba(255,255,255,.68);margin:0}
.xs-page .ab-closer{color:rgba(255,255,255,.66);line-height:1.6;margin:0}

/* ---------- mission ---------- */
.ab-mission{background:linear-gradient(150deg,#0d1a33,#0b1120);border:1px solid rgba(0,212,255,.4);
	border-radius:18px;padding:clamp(1.8rem,4vw,2.6rem);text-align:center;
	box-shadow:0 28px 60px rgba(0,212,255,.12)}
.ab-mission__k{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
	color:rgba(255,255,255,.5);margin-bottom:.9rem}
.ab-mission__text{font-family:var(--font-display);font-size:clamp(1.35rem,3vw,2rem);
	line-height:1.25;color:#fff}

/* ---------- house rules ---------- */
.ab-rules{display:flex;flex-direction:column}
.ab-rule{display:flex;align-items:baseline;gap:clamp(1rem,3vw,2rem);flex-wrap:wrap;
	border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:1.4rem;margin-bottom:1.4rem}
.ab-rule:last-child{border-bottom:0;margin-bottom:0}
.ab-rule__n{font-family:var(--font-display);color:rgba(0,212,255,.55);flex:none}
.ab-rule__title{font-family:var(--font-display);font-size:clamp(1.6rem,4vw,2.6rem);color:#fff;flex:none}
.xs-page .ab-rule__sub{font-size:clamp(1rem,1.8vw,1.18rem);line-height:1.5;
	color:rgba(255,255,255,.7);max-width:52ch;margin:0;flex:1 1 260px}

/* ---------- the guide-dog roster ---------- */
.ab-roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.1rem}
/* --frame / --accent / --pos come in per card as inline custom props */
.ab-dog{background:linear-gradient(180deg,#0d1526,#0b1120);border:1px solid var(--frame,rgba(255,255,255,.15));
	border-radius:15px;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.4);
	transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.ab-dog:hover{transform:translateY(-5px);box-shadow:0 26px 54px rgba(0,0,0,.55)}
.ab-dog__shot{position:relative;aspect-ratio:1/1;overflow:hidden}
.ab-dog__shot img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,center 30%);display:block}
.ab-dog__scrim{position:absolute;inset:0;pointer-events:none;
	background:linear-gradient(180deg,rgba(4,7,15,.15) 0%,transparent 30%,transparent 60%,rgba(11,17,32,.85) 100%)}
.ab-dog__num{position:absolute;top:10px;left:10px;font-family:var(--font-display);font-size:1.25rem;
	color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.7)}
.ab-dog__tag{position:absolute;top:10px;right:10px;display:inline-flex;align-items:center;gap:.3rem;
	background:rgba(4,7,15,.66);border:1px solid var(--frame,rgba(255,255,255,.2));border-radius:999px;
	padding:.25rem .55rem;font-size:.62rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
	color:#fff;backdrop-filter:blur(4px)}
/* Rollie's face sits high in frame, so his pill moves out of the way */
.ab-dog__tag--low{top:auto;bottom:10px}
.ab-dog__ribbon{position:absolute;left:10px;bottom:10px;font-family:var(--font-display);font-size:.82rem;
	text-transform:uppercase;letter-spacing:.14em;color:var(--accent,var(--cyan));
	text-shadow:0 2px 8px rgba(0,0,0,.7)}
.ab-dog__body{padding:14px 16px 16px}
.ab-dog__name{font-family:var(--font-display);font-size:1.5rem;color:#fff;line-height:1.1}
.xs-page .ab-dog__outcome{font-size:.92rem;line-height:1.5;color:rgba(255,255,255,.74);margin:.35rem 0 0}
.ab-roster__foot{text-align:center;color:rgba(255,255,255,.4);font-size:.86rem}

/* ---------- bitcoin panel ---------- */
.ab-btc{background:linear-gradient(150deg,#0d1a33,#0b1120);border:1px solid rgba(255,255,255,.1);
	border-radius:20px;padding:clamp(1.8rem,4vw,2.6rem);display:flex;flex-wrap:wrap;
	align-items:center;gap:clamp(1.4rem,3vw,2.2rem)}
.ab-btc__tile{flex:none;width:88px;height:88px;border-radius:20px;background:rgba(247,147,26,.12);
	border:1px solid rgba(247,147,26,.4);display:flex;align-items:center;justify-content:center;
	color:var(--bitcoin);font-size:2.2rem}
.ab-btc__k{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
	color:var(--bitcoin);margin-bottom:.5rem}
.ab-btc__h{font-family:var(--font-display);font-size:clamp(1.3rem,3vw,1.8rem);color:#fff;line-height:1.15}
.xs-page .ab-btc__body{font-size:1rem;line-height:1.6;color:rgba(255,255,255,.72);margin:.6rem 0 0;max-width:52ch}

/* ---------- close ---------- */
.ab-close{position:relative;overflow:hidden;text-align:center;
	background:linear-gradient(150deg,var(--navy-900),#0d1a33)}
.ab-close__glow{position:absolute;top:-120px;left:50%;transform:translateX(-50%);width:640px;height:420px;
	background:radial-gradient(circle,rgba(0,212,255,.3),transparent 65%);filter:blur(26px);pointer-events:none}
.ab-close__statement{font-family:var(--font-display);font-size:clamp(1.15rem,2.2vw,1.5rem);
	color:#fff;line-height:1.4}
/* the sign-off sits between two hairlines */
.ab-signoff{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1.8rem;
	font-size:.92rem;color:rgba(255,255,255,.7)}
.ab-signoff::before,.ab-signoff::after{content:"";height:1px;width:clamp(28px,8vw,70px);
	background:rgba(255,255,255,.25);flex:none}
.xs-page .ab-signoff b{color:var(--cyan)}
.ab-stamp{font-family:var(--font-display);font-size:clamp(1.9rem,4.6vw,3rem);text-transform:uppercase;
	color:#fff;line-height:1.05;margin-top:1.4rem}

@media (prefers-reduced-motion:reduce){
	.ab-polaroid--back,.ab-polaroid--front{animation:none}
	.ab-dog:hover{transform:none}
}