/* CANONICAL · alexandra.consultiqe.com · Consultiqe family component layer (AVB DS v7) · authority: Consultiqe Decision Log Session 11 · 24 Jul 2026
   Authority: AVB Decision Log Session 06 / Consultiqe Decision Log Session 07 · 19 Jul 2026
   Load-order rule (CDS §5): this file MUST be linked AFTER styles.css and after any
   page-specific inline <style> block. Tokens live once in styles.css :root (CDS §3);
   this file carries the family component layer only, lifted from the v3 alignment. */

/* ============ AVB FAMILY ALIGNMENT v3 (Session 07 decisions) ============ */

/* copper material; standard span */
.cu,.proof-strip .pn,#work .fig,.foot-mega b{
background:linear-gradient(112deg,var(--copper-d) 10%,var(--copper) 36%,var(--copper-l) 50%,var(--copper) 64%,var(--copper-d) 90%);
background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 8s ease-in-out infinite}
/* short-span variant: wider highlight so brief phrases still catch the light (thesis tail; study-headline tail) */
h1.thesis em,h1.study .ser,h2.study .ser,h2.arch-h .ser{background:linear-gradient(112deg,var(--copper-d) 0%,var(--copper) 22%,var(--copper-l) 50%,var(--copper) 78%,var(--copper-d) 100%);
background-size:150% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 6s ease-in-out infinite}
@keyframes sheen{0%,100%{background-position:0% 0}50%{background-position:100% 0}}
@media (prefers-reduced-motion:reduce){.cu,.proof-strip .pn,#work .fig,.foot-mega b,h1.thesis em,h1.study .ser,h2.study .ser,h2.arch-h .ser{animation:none}}
::selection{background:var(--copper);color:var(--porcelain)}
a:focus-visible,button:focus-visible{outline:2px solid var(--copper);outline-offset:3px}
.ser{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0;text-transform:none}

header.site .wordmark{font-weight:600;font-size:15px;letter-spacing:.3em}
.masthead .keyline{background:var(--copper)}
.rule-draw{margin-top:26px;height:1px;background:var(--hairline);position:relative;overflow:hidden}
.rule-draw::after{content:"";position:absolute;inset:0;background:var(--copper);transform:scaleX(0);transform-origin:left;transition:transform 1.1s cubic-bezier(.4,0,.2,1) .15s}
body.in .rule-draw::after{transform:scaleX(1)}

/* monument: tighter clamp (two-row rhythm), serif italic enforced over legacy .thesis em rule */
.hero{text-align:left!important}
h1.thesis{font-family:var(--display);font-weight:500;font-size:clamp(40px,7.2vw,96px);line-height:1.03;letter-spacing:-.025em;color:var(--ink);max-width:1060px;margin:56px 0 0}
h1.thesis em{font-style:italic!important;font-family:var(--serif)!important}
h1.thesis .row{display:block;overflow:hidden;padding-bottom:.2em}
h1.thesis .row:not(:last-child){margin-bottom:-.2em}
h1.thesis .row span{display:inline-block;transform:translateY(130%);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
body.in h1.thesis .row:nth-child(1) span{transition-delay:.2s}
body.in h1.thesis .row:nth-child(2) span{transition-delay:.34s}
body.in h1.thesis .row span{transform:none}
.no-js h1.thesis .row span,.no-js .rule-draw::after{transform:none}
@media (prefers-reduced-motion:reduce){h1.thesis .row span{transform:none!important}body .rule-draw::after{transform:scaleX(1)!important}}
.hero .lede{text-align:left}
.hero .cta-row{justify-content:flex-start}

.proof-strip .pn{font-family:var(--display);font-weight:300;font-size:clamp(32px,3.6vw,50px);letter-spacing:.01em}
.proof-strip .pn b,.proof-strip .pn .cnt{font-weight:300}
.proof-strip .pl{font-family:var(--display);font-weight:500;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--stone);margin-top:8px;line-height:1.6}

/* LABS TICKER (Session 11): the marquee made informative. Scrolling track + fixed
   CTA chip; whole track and chip link to labs.html. Replaces the decorative marquee. */
.mq{display:flex;align-items:stretch;margin-top:52px;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);overflow:hidden}
.mq-scroll{flex:1;display:block;overflow:hidden;white-space:nowrap;padding:15px 0;position:relative}
.mq-scroll::after{content:"";position:absolute;top:0;bottom:0;right:0;width:110px;background:linear-gradient(90deg,transparent,var(--porcelain))}
.mq-track{display:inline-block;width:max-content;animation:mq 34s linear infinite}
.mq:hover .mq-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.mq span{font-family:var(--display);font-weight:500;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--body-1);padding:0 22px;white-space:nowrap}
.mq span b{color:var(--copper)}
.mq span.lab-lead{color:var(--copper-d);font-weight:600}
.mq-cta{flex:0 0 auto;display:flex;align-items:center;font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;background:var(--copper-d);color:var(--porcelain);padding:0 28px;transition:background .2s}
.mq-cta::after{content:"\2192";margin-left:12px;transition:margin .2s}
.mq-cta:hover{background:var(--ink)}
.mq-cta:hover::after{margin-left:18px}
@media(max-width:640px){.mq-cta{padding:0 16px;letter-spacing:.14em}}
@media (prefers-reduced-motion:reduce){.mq-track{animation:none}}

/* field discipline: porcelain + one ink band only; every grey band retired */
.stack-band,.archive,.contact-band{background:transparent!important;border-top:none!important;border-bottom:none!important}
.lens-btn.is-on{color:var(--copper-d);border-bottom-color:var(--copper-d)}
.etag.is-lit{color:var(--copper-d)}

/* SELECTED WORK: the single ink band (home) */
#work{background:var(--ink-band);color:var(--porcelain);padding:88px 0 76px;margin-top:96px}
#work .eyebrow{color:var(--copper-l)}
#work .rail-lede,#work .sum,#work .role{color:var(--mist)}
#work .year{color:var(--mist2)}
#work .era,#work .view-more{color:var(--copper-l)}
#work .view-more:hover{color:var(--porcelain)}
#work .entry{border-bottom-color:var(--seam)}
#work .ledger,#work .ledger-home{border-top-color:var(--seam)}
#work .entry:hover{background:rgba(244,246,245,.05)}
#work h2,#work .entry h2{color:var(--porcelain)}
#work .fig small{color:var(--mist2)}

/* METHOD: family gate anatomy (home) */
.gaterail{position:relative;padding:22px 0 0}
.gline{position:absolute;top:31px;left:7.5px;width:calc((100% + 16px)*4/5);height:1px;background:var(--hairline)}
.gfill{position:absolute;top:31px;left:7.5px;height:1px;width:0;background:var(--copper);transition:width 1.4s cubic-bezier(.2,.7,.2,1) .25s}
#approach.in .gfill{width:calc((100% + 16px)*4/5)}
.no-js .gfill{width:calc((100% + 16px)*4/5)}
@media (prefers-reduced-motion:reduce){#approach .gfill{width:calc((100% + 16px)*4/5)!important;transition:none}}
.gates{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.gate{text-align:left;padding:24px 0 0;position:relative}
.gate .dot{display:none}
.gate:not(:last-child)::after{display:none}
.gate::before{content:"";position:absolute;top:2px;left:0;width:11px;height:11px;border-radius:50%;background:var(--porcelain);border:2px solid var(--copper)}
.gate .gn{font-weight:300;font-size:19px;color:var(--copper)}
.gate .gl{font-size:11.5px;letter-spacing:.1em;margin-top:8px}
@media(max-width:720px){.gates{grid-template-columns:1fr;gap:22px}.gline,.gfill{display:none}.gate{padding-top:0;padding-left:26px;display:block}}
.railcap{font-family:var(--serif);font-style:italic;font-size:clamp(19px,2.1vw,24px);line-height:1.45;color:var(--ink);max-width:760px}
.railcap b{color:var(--copper-d);font-weight:400}

/* principles: family anatomy, outlined numerals (home) */
.principles.rail-breakout{grid-template-columns:1fr 1fr!important;margin-top:22px}
@media(max-width:760px){.principles.rail-breakout{grid-template-columns:1fr!important}}
.principle{padding:34px 30px!important;position:relative;overflow:hidden;transition:background .25s}
.principle:hover{background:var(--fig)}
.principle .num{position:absolute;top:20px;right:22px;margin:0;font-size:58px;color:var(--copper);opacity:.5}
.principle h3{max-width:72%}
.principle p{font-size:15px!important;color:var(--body-1);max-width:88%}

/* DETAIL PAGES: serif tail on the study headline (title tail, §4); the tail carries the
   short-span copper material above (thesis-tail analogue, §5). One per page, rationed.
   Copper marks elsewhere come from the token swap (--accent = deep copper). */
h1.study .ser,h2.study .ser{font-weight:400}

/* footer mega: floats above the fold line (uncropped), ghost you can read */
footer.site{overflow:hidden}
.foot-mega{font-family:var(--display);font-weight:600;font-size:clamp(64px,14.5vw,220px);line-height:.8;letter-spacing:.02em;text-transform:uppercase;text-align:center;width:100%;white-space:nowrap;user-select:none;color:transparent;-webkit-text-stroke:1px color-mix(in srgb, var(--stone) 45%, var(--porcelain));margin:34px 0 44px;transform:none}
.foot-mega b{-webkit-text-stroke:0;font-weight:700}

/* ============ SESSION 11 · RECRUITER JOURNEY (Decision Log Session 11) ============ */

/* nav: darker, heavier; links no longer recede on porcelain */
nav.top a{font-weight:500;font-size:11.5px;color:var(--body-2)}
nav.top a:hover{color:var(--copper-d)}

/* masthead: availability dot replaces the keyline, which read as an em dash */
.avail-dot{width:9px;height:9px;border-radius:50%;background:var(--copper);flex:0 0 auto;position:relative;display:inline-block}
.avail-dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid var(--copper);opacity:0;animation:adot 2.6s ease-out infinite}
@keyframes adot{0%{transform:scale(.5);opacity:.7}70%{transform:scale(1.15);opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.avail-dot::after{animation:none}}

/* SELECTED WORK: full-width two-column era ledger inside the single ink band.
   Explicit grid rows + static rail: Safari mis-places auto-row items that span
   all columns, letting a sticky rail travel over the ledger (DS v7 rule: any
   rail-sect mixing the rail with full-width spans assigns rows explicitly). */
#work .rail{position:static;grid-row:1;grid-column:1}
#work .cols{grid-row:2;grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:0 72px;margin-top:8px}
@media(max-width:900px){#work .cols{grid-template-columns:1fr}}
#work .era{margin:28px 0 4px}
#work .col .era:first-child{margin-top:0}
@media(max-width:900px){#work .col + .col .era:first-child{margin-top:28px}}
.row{display:grid;grid-template-columns:112px minmax(0,1fr) auto;gap:20px;padding:16px 0 15px;border-bottom:1px solid var(--seam);align-items:baseline;transition:background .25s,opacity .25s}
.row:hover{background:rgba(244,246,245,.05)}
.row.is-dim{opacity:.35}
.row .year{font-family:var(--display);font-weight:300;font-size:11.5px;letter-spacing:.1em;color:var(--copper-l);white-space:nowrap}
.row h3{font-family:var(--display);font-weight:400;font-size:16px;letter-spacing:.02em;color:var(--porcelain);line-height:1.4}
.row .role{display:block;font-size:13px;color:var(--mist);font-style:italic;margin-top:3px;line-height:1.5}
.row .fig{text-align:right;font-family:var(--display);font-weight:300;font-size:19px;line-height:1.25;white-space:nowrap}
.row .fig small{display:block;font-family:var(--body);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;margin-top:2px;-webkit-text-fill-color:var(--mist2);color:var(--mist2);white-space:normal;max-width:170px;margin-left:auto}
.row .fig::after{content:"\2192";display:inline-block;margin-left:12px;-webkit-text-fill-color:var(--copper-l);color:var(--copper-l);transition:margin .2s;font-size:14px}
.row:hover .fig::after{margin-left:18px}
@media(max-width:640px){.row{grid-template-columns:minmax(0,1fr) auto}.row .year{grid-column:1/-1}}

/* band buttons */
.btn-band{display:inline-block;font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;padding:15px 30px;border:1px solid var(--copper-l);background:var(--copper-d);color:var(--porcelain);transition:all .2s;margin-top:26px}
.btn-band::after{content:"\2192";margin-left:12px;transition:margin .2s}
.btn-band:hover{background:var(--copper);border-color:var(--copper)}
.btn-band:hover::after{margin-left:18px}
.btn-band.quiet{background:transparent;border-color:var(--seam);color:var(--porcelain)}
.btn-band.quiet:hover{background:var(--porcelain);color:var(--ink-band);border-color:var(--porcelain)}

/* labs strip at the ink-band foot: the Labs stated in the serif register */
#work .labs-strip{grid-row:3;grid-column:1/-1;margin-top:46px;padding-top:26px;border-top:1px solid var(--seam);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 40px;align-items:center}
#work .labs-strip .ls-label{font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--copper-l);display:block;margin-bottom:8px}
#work .labs-strip p{font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.55;color:var(--mist);max-width:680px}
#work .labs-strip .btn-band{margin-top:0}
@media(max-width:760px){#work .labs-strip{grid-template-columns:1fr}}

/* footer (home): icon-only contact, enlarged copper icons */
footer.site .fine{font-size:13.5px;color:var(--body-1);display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap}
footer.site .ico{width:30px;height:30px;fill:var(--copper);transition:fill .2s}
footer.site .fine a{display:inline-flex;align-items:center}
footer.site .fine a:hover .ico{fill:var(--copper-d)}