/* ===========================================================================
   site.css , shared interior-page primitives for aihd.studio (v2)
   Layered on top of aihd.css (the token spine). Holds the patterns the home
   page proved , the coordinate running head, the corner-anchored page hero,
   the index/list grammar, cards, steps, code blocks, callouts, the video grid
   , so every page reads as one engineered system. Austere, one Klein blue, no glow.
   =========================================================================== */

/* ---- rhythm ---- */
.band{padding:92px 0; border-top:1px solid var(--line)}
.band.tight{padding:64px 0}
.band.last{border-bottom:1px solid var(--line)}
.lead-body{color:var(--ink-2); line-height:1.62; max-width:60ch; margin:0 0 18px; font-size:1.0rem}
.lead-body a,.prose a{color:var(--accent); text-decoration:none; border-bottom:1px solid var(--accent-line)}
.lead-body a:hover,.prose a:hover{border-bottom-color:var(--accent)}

/* ---- coordinate label grammar (the connective tissue) ---- */
.sec-head{display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:baseline;
  padding-bottom:15px; border-bottom:1px solid var(--ink); margin:0 0 48px}
.sec-head .code,.sec-head .name,.sec-head .fol{font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase}
.sec-head .code{color:var(--accent)}
.sec-head .name{color:var(--ink)}
.sec-head .fol{color:var(--muted); text-align:right}

/* ---- corner-anchored page hero (interior pages) ---- */
.page-hero{position:relative; padding:46px 0 40px; overflow:hidden; border-bottom:1px solid var(--line)}
.page-hero .reg{color:var(--ink)}
.ph-stage{position:relative; z-index:2; width:100%; display:grid;
  grid-template-columns:1.5fr 1fr; grid-template-rows:auto 1fr auto; gap:26px;
  min-height:clamp(360px, 56vh, 560px)}
.ph-eyebrow{grid-column:1; grid-row:1; align-self:start; font-family:var(--mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent)}
.ph-meta{grid-column:2; grid-row:1; justify-self:end; align-self:start; text-align:right; display:flex; flex-direction:column; gap:7px; font-family:var(--mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.ph-title{grid-column:1; grid-row:2; align-self:center; margin:.2em 0 0; font-family:var(--font-display); font-weight:600; letter-spacing:-.035em; line-height:1.0;
  font-size:clamp(2.1rem,4.8vw,4.4rem); max-width:18ch}
.ph-title .bluedot{display:inline-block; width:.14em; height:.14em; border-radius:50%; background:var(--accent); margin-left:.05em; margin-bottom:.04em}
.ph-lede{grid-column:1; grid-row:3; align-self:end; color:var(--ink-2); max-width:54ch; line-height:1.55; font-size:1.02rem; margin:0}
.ph-foot{grid-column:2; grid-row:3; justify-self:end; align-self:end; text-align:right; font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}

/* ---- numbered index / list grammar (ref 037) ---- */
.idx{list-style:none; margin:0; padding:0}
.idx-row{position:relative; border-top:1px solid var(--line)}
.idx-row:last-child{border-bottom:1px solid var(--line)}
.idx-row::after{content:""; position:absolute; left:0; bottom:-1px; height:1px; width:0; background:var(--accent); transition:width var(--dur) var(--ease)}
.idx-row:hover::after{width:100%}
.idx-row .r{display:grid; grid-template-columns:clamp(54px,6vw,96px) 1fr auto auto; gap:24px; align-items:baseline;
  padding:24px 0; text-decoration:none; color:inherit; transition:padding-left var(--dur) var(--ease)}
.idx-row a.r:hover{padding-left:16px}
.idx-row .no{font-family:var(--font-display); font-weight:700; font-size:clamp(1.5rem,3vw,2.6rem); letter-spacing:-.03em; color:var(--ink-2); line-height:.9; transition:color var(--dur) var(--ease)}
.idx-row a.r:hover .no{color:var(--accent)}
.idx-row .ti{font-family:var(--font-display); font-weight:600; font-size:clamp(1.02rem,1.7vw,1.32rem); letter-spacing:-.015em; color:var(--ink)}
.idx-row .note{font-family:var(--body); font-size:.94rem; color:var(--muted); line-height:1.45; max-width:46ch}
.idx-row .meta{font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); align-self:center; white-space:nowrap}
.idx-row a.r:hover .meta{color:var(--ink)}

/* ---- card grid ---- */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px}
.cards.two{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.cards.three{grid-template-columns:repeat(3,1fr)}
.card{border:1px solid var(--line); border-radius:12px; background:var(--panel); padding:24px; display:flex; flex-direction:column; gap:10px}
.card .kick{font-family:var(--mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.card h3{font-family:var(--font-display); font-weight:600; font-size:1.18rem; letter-spacing:-.015em; line-height:1.12; margin:0}
.card p{color:var(--ink-2); line-height:1.55; margin:0; font-size:.95rem}
.card.accent{border-color:var(--accent); background:var(--accent-soft)}
.card.accent .kick{color:var(--accent)}
.card.metal{background:var(--chrome); border-color:var(--silver-edge); position:relative; overflow:hidden}
.card.metal::after{content:""; position:absolute; inset:0; background:var(--brush); mix-blend-mode:overlay; opacity:.8; pointer-events:none}
.card.metal>*{position:relative; z-index:2}

/* ---- numbered steps (guide) ---- */
.steps{display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.step{background:var(--panel); padding:26px 26px; display:grid; grid-template-columns:clamp(48px,5vw,76px) 1fr; gap:22px; align-items:start}
.step.accent{background:var(--accent-soft)}
.step .sno{font-family:var(--font-display); font-weight:700; font-size:clamp(1.4rem,2.4vw,2.1rem); letter-spacing:-.03em; color:var(--ink-2); line-height:.9}
.step.accent .sno{color:var(--accent)}
.step h3{font-family:var(--font-display); font-weight:600; font-size:1.1rem; letter-spacing:-.01em; margin:0 0 8px}
.step p{color:var(--ink-2); line-height:1.55; margin:0 0 12px; font-size:.95rem; max-width:62ch}
.step p:last-child{margin-bottom:0}

/* ---- code block (mono, copy affordance) ---- */
.codeblock{position:relative; background:var(--grey-5); border-radius:9px; margin:10px 0; overflow:hidden}
.codeblock pre{margin:0; padding:15px 54px 15px 16px; overflow-x:auto; font-family:var(--mono); font-size:.82rem; line-height:1.5; color:#e8eaee; white-space:pre}
.codeblock .copy{position:absolute; top:8px; right:8px; font-family:var(--mono); font-size:.56rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.6); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:5px; padding:5px 8px; cursor:pointer; transition:var(--dur-fast)}
.codeblock .copy:hover{color:#fff; background:rgba(255,255,255,.16)}
.codeblock .copy.done{color:#8fa0ff; border-color:#8fa0ff}
code.inline{font-family:var(--mono); font-size:.86em; background:var(--paper-2); border:1px solid var(--line); border-radius:5px; padding:1px 6px; color:var(--ink)}

/* ---- callout (blue-tinted) ---- */
.callout{border:1px solid var(--accent-line); background:var(--accent-soft); border-radius:12px; padding:22px 24px}
.callout .kick{font-family:var(--mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin:0 0 8px}
.callout h3{font-family:var(--font-display); font-weight:600; font-size:1.15rem; letter-spacing:-.015em; margin:0 0 6px}
.callout p{color:var(--ink-2); margin:0; line-height:1.5}

/* ---- pipeline chips ---- */
.chips{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:6px 0 26px}
.chip{font-family:var(--mono); font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); border:1px solid var(--line); border-radius:99px; padding:6px 12px; background:var(--panel)}
.chip.on{color:var(--accent); border-color:var(--accent); background:var(--accent-soft)}
.chip-sep{color:var(--muted); font-family:var(--mono); font-size:.7rem}

/* ---- video grid (animations) ---- */
.vidgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:22px}
.vidcard{border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--panel)}
.vidcard.wide{grid-column:1 / -1}
.vidcard .frame{background:var(--grey-5); position:relative; aspect-ratio:16/9; display:block}
.vidcard.wide .frame{aspect-ratio:auto}
.vidcard video{display:block; width:100%; height:100%; object-fit:cover; background:var(--grey-5)}
.vidcard.wide video{max-height:60vh; object-fit:contain}
.vidcard .cap{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:16px 18px}
.vidcard .cap .t{font-family:var(--font-display); font-weight:600; font-size:1.06rem; letter-spacing:-.01em; margin:0 0 4px}
.vidcard .cap .d{font-family:var(--body); font-size:.9rem; color:var(--muted); line-height:1.45; margin:0; max-width:48ch}
.vidcard .cap .fn{font-family:var(--mono); font-size:.58rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); white-space:nowrap; align-self:flex-start}

/* ---- cross-link CTA card ---- */
.cta-card{display:flex; flex-wrap:wrap; gap:18px 28px; align-items:center; justify-content:space-between;
  border:1px solid var(--accent); background:var(--accent-soft); border-radius:14px; padding:28px 30px}
.cta-card .ct-h{font-family:var(--font-display); font-weight:600; font-size:clamp(1.2rem,2.2vw,1.6rem); letter-spacing:-.02em; margin:0; max-width:30ch}
.cta-card .ct-k{font-family:var(--mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin:0 0 6px}

/* ---- two-column prose + sidebar (about) ---- */
.split-prose{display:grid; grid-template-columns:1.4fr .9fr; gap:48px; align-items:start}
.prose p{color:var(--ink-2); line-height:1.65; margin:0 0 18px; font-size:1.04rem; max-width:60ch}
.sidecard{border:1px solid var(--line); border-radius:12px; background:var(--panel); padding:22px; margin-bottom:16px}
.sidecard .kick{font-family:var(--mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0 0 14px}
.sidecard .row{display:grid; grid-template-columns:auto 1fr; gap:8px 16px; padding:9px 0; border-top:1px solid var(--line)}
.sidecard .row:first-of-type{border-top:0}
.sidecard .row .k{font-family:var(--mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.sidecard .row .v{font-size:.92rem; color:var(--ink); line-height:1.4}
.sidecard ol{margin:0; padding-left:0; list-style:none; counter-reset:s}
.sidecard ol li{counter-increment:s; padding:8px 0; border-top:1px solid var(--line); font-size:.95rem; color:var(--ink); display:flex; gap:12px}
.sidecard ol li:first-child{border-top:0}
.sidecard ol li::before{content:"0" counter(s); font-family:var(--mono); font-size:.62rem; color:var(--muted); letter-spacing:.06em}

/* section intro line */
.sec-intro{color:var(--ink-2); line-height:1.6; max-width:62ch; margin:-26px 0 34px; font-size:1.0rem}

/* ---- responsive ---- */
@media(max-width:880px){
  .ph-stage{grid-template-columns:1fr; grid-template-rows:none; gap:20px; min-height:0}
  .ph-eyebrow,.ph-meta,.ph-title,.ph-lede,.ph-foot{grid-column:1; grid-row:auto; justify-self:start; text-align:left}
  .ph-title{align-self:start}
  .ph-meta{flex-direction:row; flex-wrap:wrap; gap:8px 16px}
  .cards.three{grid-template-columns:1fr}
  .vidgrid{grid-template-columns:1fr}
  .split-prose{grid-template-columns:1fr; gap:24px}
}
@media(max-width:560px){
  .idx-row .r{grid-template-columns:40px 1fr; gap:12px; row-gap:4px}
  .idx-row .note{grid-column:2}
  .idx-row .meta{grid-column:2; justify-self:start}
  .step{grid-template-columns:38px 1fr; gap:14px; padding:20px}
}

/* ===========================================================================
   Glass devices, flow diagrams + search , restored from the OG, rebuilt in v2.
   Glass is a sanctioned material here; it refracts what sits behind it (a video,
   a screen), so these live over screens/media, never over flat paper.
   =========================================================================== */

/* ---- computer-screen frame (classic window chrome) ---- */
.screen{border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--panel); box-shadow:0 14px 40px rgba(20,21,26,.10)}
.screen-bar{display:flex; align-items:center; gap:12px; padding:11px 15px; border-bottom:1px solid var(--line);
  background:var(--glass); -webkit-backdrop-filter:blur(10px) saturate(140%); backdrop-filter:blur(10px) saturate(140%)}
.screen-dots{display:flex; gap:7px}
.screen-dots i{width:11px; height:11px; border-radius:50%; background:var(--grey-3); box-shadow:inset 0 0 0 1px rgba(20,21,26,.06)}
.screen-dots i:nth-child(1){background:#e0726a} .screen-dots i:nth-child(2){background:#e5b95a} .screen-dots i:nth-child(3){background:#7fb37a}
.screen-fn{font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.screen-body{position:relative; background:var(--grey-5); display:block}
.screen-body.paper{background:var(--paper)}

/* ---- glass play button (over a video/screen, refracts it) ---- */
.playbtn{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:66px; height:66px; border-radius:50%;
  background:var(--glass-2); -webkit-backdrop-filter:blur(12px) saturate(160%); backdrop-filter:blur(12px) saturate(160%);
  border:1px solid var(--glass-hi); box-shadow:0 10px 26px rgba(20,21,26,.28), inset 0 1px 0 rgba(255,255,255,.8);
  display:grid; place-items:center; cursor:pointer; z-index:4; transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease)}
.playbtn::after{content:""; width:0; height:0; border-left:17px solid var(--ink); border-top:11px solid transparent; border-bottom:11px solid transparent; margin-left:5px}
.playbtn:hover{transform:translate(-50%,-50%) scale(1.06)}
.screen.playing .playbtn{opacity:0; pointer-events:none}

/* ---- pop-up glass panel (floats over a screen) ---- */
.popcard{background:var(--glass-2); -webkit-backdrop-filter:blur(18px) saturate(150%); backdrop-filter:blur(18px) saturate(150%);
  border:1px solid var(--glass-hi); border-radius:14px; box-shadow:0 22px 54px rgba(20,21,26,.20); padding:20px 22px; z-index:5}
.popcard .kick{font-family:var(--mono); font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin:0 0 8px}
.popcard h4{font-family:var(--font-display); font-weight:600; font-size:1.06rem; letter-spacing:-.015em; margin:0 0 6px}
.popcard p{color:var(--ink-2); font-size:.9rem; line-height:1.5; margin:0}
.popcard .pin{position:absolute; width:24px; height:24px; border-radius:50%; background:var(--accent); color:#fff; display:grid; place-items:center; font-family:var(--mono); font-size:.66rem; top:-11px; left:-11px; box-shadow:0 4px 12px rgba(29,43,212,.4)}

/* ---- flow diagram: node primitives ---- */
.node{font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2);
  border:1px solid var(--line); background:var(--panel); border-radius:8px; padding:9px 14px; text-align:center; white-space:nowrap}
.node.dark{background:var(--grey-5); color:#fff; border-color:var(--grey-5)}
.node.accent{background:var(--accent-soft); color:var(--accent); border-color:var(--accent-line)}
.conn{width:1px; background:var(--hair)}
.conn.h{height:1px; width:24px}

/* system-map stack (vertical) */
.stack{display:flex; flex-direction:column; align-items:center; gap:0; padding:8px 0}
.stack .conn{height:14px}
.stack .rowset{display:flex; gap:8px; flex-wrap:wrap; justify-content:center}

/* surfaces branch (top node -> three) */
.branch{display:flex; flex-direction:column; align-items:center}
.branch .top{margin-bottom:4px}
.branch .stem{width:1px; height:16px; background:var(--hair)}
.branch .bar{width:min(560px,80%); height:1px; background:var(--hair)}
.branch .drops{width:min(560px,80%); display:flex; justify-content:space-around}
.branch .drops span{width:1px; height:16px; background:var(--hair)}
.branch .cols{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; width:100%; margin-top:2px}

/* cowork loop (row of nodes + arrows, framed) */
.loop{border:1px solid var(--line); border-radius:14px; background:var(--panel); padding:26px 22px; position:relative}
.loop .row{display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap}
.loop .arw{color:var(--muted); font-family:var(--mono)}
.loop .lbl{text-align:center; font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:16px}
.loop .lbl b{color:var(--accent); font-weight:500}

.diagram{margin:8px 0 28px}
.diagram .cap{font-family:var(--mono); font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); text-align:center; margin-top:12px}

/* ---- search (glass command palette) ---- */
.nav-search{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  border:1px solid var(--line); border-radius:99px; padding:6px 11px; background:var(--panel); cursor:pointer; transition:var(--dur-fast)}
.nav-search:hover{color:var(--ink); border-color:var(--hair)}
.nav-search kbd{font-family:var(--mono); font-size:.9em; background:var(--paper-2); border:1px solid var(--line); border-radius:4px; padding:1px 5px; color:var(--muted)}
.search-overlay{position:fixed; inset:0; z-index:200; display:none; align-items:flex-start; justify-content:center; padding:14vh 20px 20px;
  background:rgba(20,21,26,.28); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px)}
.search-overlay.open{display:flex}
.search-modal{width:min(600px,100%); background:var(--glass-2); -webkit-backdrop-filter:blur(22px) saturate(150%); backdrop-filter:blur(22px) saturate(150%);
  border:1px solid var(--glass-hi); border-radius:16px; box-shadow:0 30px 80px rgba(20,21,26,.32); overflow:hidden}
.search-top{display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid var(--line)}
.search-input{flex:1; border:0; background:transparent; font-family:var(--font); font-size:1.05rem; color:var(--ink); outline:none}
.search-top .esc{font-family:var(--mono); font-size:.56rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line); border-radius:5px; padding:3px 7px}
.search-results{max-height:52vh; overflow-y:auto; padding:8px}
.search-hit{display:block; text-decoration:none; color:inherit; padding:12px 14px; border-radius:10px; transition:background var(--dur-fast)}
.search-hit:hover,.search-hit.sel{background:var(--accent-soft)}
.search-hit .ht{font-family:var(--font-display); font-weight:600; font-size:1rem; letter-spacing:-.01em; margin:0 0 3px}
.search-hit .hp{font-family:var(--mono); font-size:.58rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin:0 0 3px}
.search-hit .hd{font-size:.86rem; color:var(--muted); margin:0; line-height:1.4}
.search-empty{padding:26px 16px; text-align:center; font-size:.9rem; color:var(--muted)}

@media(max-width:560px){
  .branch .cols{grid-template-columns:1fr; gap:10px}
  .branch .bar,.branch .drops{display:none}
  .vidgrid .playbtn{width:54px; height:54px}
}