/* =========================================================================
   PAGE: GLOSSARY (the hub at /glossary/ and a term page at /glossary/<term>/)

   Draft two, November 1, 2026, from the direction Liam approved on October 31
   ("Yes, build draft two"): the glossary answers the way an AI does. Each
   definition is shown as a quoted answer with its source line, the same move
   as the homepage's answer slot ("Cited by Claude"). Report and references:
   docs/glossary/RESEARCH.md.

   The layouts here are not in docs/DESIGN.md yet, on purpose: the design file
   waits for Liam's pick (memory, "DESIGN.md only after a direction"). A term
   page reuses the note layouts in site.css whole; this file adds what a
   glossary needs on top.
   ========================================================================= */

/* --- the hub head ---------------------------------------------------------- */
.gl-head{padding:calc(var(--nav-clear) + var(--s-5)) 0 var(--s-5)}
.gl-head h1{font-family:var(--font-display);font-size:var(--t-2);font-weight:200;letter-spacing:-.035em;line-height:1.02;max-width:14em;margin:0 0 var(--s-4)}
.gl-lede{font-size:var(--t-5);line-height:1.45;letter-spacing:-.012em;color:var(--quiet);max-width:34em;margin:0 0 var(--s-5)}
.gl-by{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);align-items:baseline;border-top:1px solid var(--line);padding-top:var(--s-3);font-size:var(--t-7);color:var(--quiet)}
.gl-by b{font-weight:500;color:var(--ink)}

/* --- featured: one wide plate and two stacked ------------------------------
   The three terms buyers ask about first, each on its AI video render. A bento,
   not three equal cards: the first is twice the size of the other two. */
.gl-feat{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);grid-template-rows:auto auto;gap:var(--s-2);padding:var(--s-5) 0 var(--s-6)}
.gl-fc{position:relative;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-card);background:var(--bg-b);min-height:240px}
.gl-fc:first-child{grid-row:1/3;min-height:520px}
.gl-fc img{display:block;flex:1 1 0;height:auto;min-height:250px;width:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.gl-fc:hover img,.gl-fc:focus-visible img{transform:scale(1.03)}
.gl-fc-t{position:relative;z-index:1;padding:var(--s-4);background:var(--bg-b);border-top:1px solid var(--line)}
.gl-fc h2{font-family:var(--font-display);font-weight:200;font-size:var(--t-4);letter-spacing:-.02em;line-height:1.08;margin:0 0 var(--s-2)}
.gl-fc:not(:first-child) h2{font-size:var(--t-5)}
.gl-fc p{font-size:var(--t-7);line-height:1.5;color:var(--ink-2);margin:0;max-width:44ch}

/* --- the glossary: index on the left, the answer card on the right --------- */
.gl-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:var(--s-6);align-items:start;border-top:1px solid var(--line);padding:var(--s-5) 0 var(--s-6)}
.gl-main>h2{grid-column:1/-1;font-family:var(--font-display);font-weight:200;font-size:var(--t-3);letter-spacing:-.03em;line-height:1.06;margin:0}
.gl-tools{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center;margin-bottom:var(--s-5)}
.gl-search{flex:1 1 280px;display:flex;align-items:center;gap:var(--s-2);background:var(--wash-field);border:1px solid var(--edge-2);border-radius:999px;padding:0 var(--s-4);height:52px;transition:border-color .2s,background .2s}
.gl-search:focus-within{border-color:var(--edge-4);background:var(--wash-nav)}
.gl-search svg{flex:none;width:18px;height:18px;color:var(--quiet)}
.gl-search input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--ink);font:inherit;font-size:var(--t-6)}
.gl-search input::placeholder{color:var(--quiet)}
.gl-search input::-webkit-search-cancel-button{filter:invert(.6)}
.gl-tabs{display:flex;flex-wrap:wrap;gap:var(--s-1)}
.gl-tab{font-family:var(--font-mono);font-size:var(--t-label);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--quiet);background:none;border:1px solid transparent;border-radius:var(--r-sm);padding:var(--s-2) var(--s-3);cursor:pointer;transition:color .2s,border-color .2s,background .2s}
.gl-tab:hover{color:var(--ink)}
.gl-tab[aria-pressed="true"]{color:var(--ink);border-color:var(--edge-3);background:var(--wash-row)}
.gl-tab sup{font-size:var(--t-micro);color:var(--quiet-2);margin-left:2px;vertical-align:top}

/* the compact index: every term on one or two screens, Intercom's index in
   our letters. Text only, so columns flow it; a group never splits. */
.gl-index{columns:2;column-gap:var(--s-5)}
.gl-group{break-inside:avoid;padding:0 0 var(--s-4)}
.gl-group[hidden]{display:none}
.gl-group h3{font-family:var(--font-display);font-weight:200;font-size:var(--t-4);letter-spacing:-.02em;line-height:1;color:var(--quiet);margin:0 0 var(--s-2);padding-bottom:var(--s-2);border-bottom:1px solid var(--line)}
.gl-group ul{list-style:none;margin:0;padding:0}
.gl-term{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);padding:var(--s-2) var(--s-2);margin:0 calc(var(--s-2) * -1);border-radius:var(--r-sm);font-size:var(--t-6);letter-spacing:-.01em;color:var(--ink-2);transition:color .2s,background .2s}
.gl-term[hidden]{display:none}
.gl-term:hover,.gl-term:focus-visible,.gl-term.is-on{color:var(--ink-hi);background:var(--wash-row)}
.gl-empty{font-size:var(--t-6);color:var(--quiet);padding:var(--s-4) 0}
.gl-empty a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* --- the answer card --------------------------------------------------------
   A quoted answer: the term, the definition in full cream, then a hairline
   and the source line, whose dot lights once the sentence is written. Sticky
   beside the index on a wide screen; on the hub it answers the search and
   whatever term the pointer or focus is on. */
.gl-ans{position:sticky;top:calc(var(--nav-clear) + var(--s-3));border:1px solid var(--edge-2);border-radius:var(--r-card);background:radial-gradient(120% 80% at 85% 0%,rgba(237,233,225,.07) 0%,rgba(237,233,225,0) 60%),var(--bg-c);padding:var(--s-5)}
.gl-ans-q{display:flex;align-items:center;gap:var(--s-2);font-size:var(--t-7);color:var(--quiet);margin:0 0 var(--s-4)}
.gl-ans-q svg{width:16px;height:16px;flex:none}
.gl-ans h3,.gl-ans .gl-ans-term{font-family:var(--font-display);font-weight:200;font-size:var(--t-4);letter-spacing:-.02em;line-height:1.08;margin:0 0 var(--s-3)}
.gl-ans-def{font-size:var(--t-6);line-height:1.5;color:var(--ink);margin:0;min-height:6em}
.gl-ans-def .w{transition:opacity .3s var(--ease)}
.gl-ans-def .w.off{opacity:0}
.gl-src{display:flex;align-items:center;gap:var(--s-2);border-top:1px solid var(--line);margin-top:var(--s-4);padding-top:var(--s-3);font-family:var(--font-mono);font-size:var(--t-micro);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--quiet-2);transition:color .6s var(--ease)}
.gl-src i{width:7px;height:7px;border-radius:50%;background:var(--quiet-3);flex:none;transition:background .6s var(--ease),box-shadow .6s var(--ease)}
.gl-src.lit{color:var(--ink-2)}
.gl-src.lit i{background:var(--ink);box-shadow:0 0 10px rgba(237,233,225,.55)}
.gl-src b{font-weight:500;color:inherit;overflow-wrap:anywhere}
.gl-ans-go{display:inline-flex;align-items:center;gap:var(--s-2);margin-top:var(--s-4);font-size:var(--t-7);font-weight:500;color:var(--ink);border-bottom:1px solid var(--quiet);padding-bottom:2px;transition:border-color .2s}
.gl-ans-go:hover{border-color:var(--ink)}

/* the term page carries the same card in its head, in place of the grey
   standfirst: the definition is the sentence we want quoted. */
.note-head .gl-ans{position:static;max-width:880px;margin:0 0 var(--s-5)}
.note-head .gl-ans-def{font-size:var(--t-5);line-height:1.45;min-height:0}

/* arrival */
@media (prefers-reduced-motion:no-preference){
  .gl-fc,.gl-ans,.gl-group{animation:gl-rise .8s var(--ease) both}
  .gl-fc:nth-child(2){animation-delay:.08s}
  .gl-fc:nth-child(3){animation-delay:.16s}
}
@keyframes gl-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* --- term page: the fan-out figure ------------------------------------------
   One question on the left, the searches it splits into in the middle, the
   answer on the right. When it comes on screen the searches go out one at a
   time and three of them light as the answer's sources. */
.gl-fan{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr) minmax(0,.9fr);gap:var(--s-5);align-items:center;background:var(--bg-c);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s-5)}
.gl-fan .gl-fan-k{font-size:var(--t-7);font-weight:500;color:var(--quiet);margin:0 0 var(--s-2)}
.gl-q,.gl-a{border:1px solid var(--edge-3);border-radius:var(--r-inner);padding:var(--s-4);background:var(--bg-a)}
.gl-q p{font-size:var(--t-6);line-height:1.4;color:var(--ink);margin:0}
.gl-subs{list-style:none;margin:0;padding:0 0 0 var(--s-4);display:flex;flex-direction:column;gap:var(--s-2);position:relative;border-left:1px solid var(--edge-3)}
.gl-subs li{position:relative;font-size:var(--t-7);line-height:1.3;color:var(--quiet);border:1px solid var(--edge-2);border-radius:var(--r-sm);padding:var(--s-2) var(--s-3);background:var(--bg-a);transition:color .5s var(--ease),border-color .5s var(--ease)}
.gl-subs li::before{content:"";position:absolute;right:100%;top:50%;width:var(--s-4);height:1px;background:var(--edge-3);transform-origin:left}
.gl-subs li.is-src{color:var(--ink);border-color:var(--edge-4);padding-right:calc(var(--s-3) * 2 + 6px)}
.gl-subs li.is-src::after{content:"";position:absolute;right:var(--s-3);top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--ink)}
.gl-a p{font-size:var(--t-7);line-height:1.55;color:var(--ink-2);margin:0 0 var(--s-3)}
.gl-a ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s-1)}
.gl-a li{display:flex;gap:var(--s-2);align-items:center;font-size:var(--t-7);color:var(--quiet)}
.gl-a li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink);flex:none}
@media (prefers-reduced-motion:no-preference){
  .gl-fan.js .gl-subs li{opacity:0;transform:translateX(-8px);transition:opacity .5s var(--ease),transform .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease)}
  .gl-fan.js .gl-subs li::before{transform:scaleX(0);transition:transform .5s var(--ease)}
  .gl-fan.js .gl-a{opacity:.25;transition:opacity .8s var(--ease)}
  .gl-fan.js .gl-subs li.is-src::after{opacity:0;transition:opacity .5s var(--ease)}
  .gl-fan.is-on .gl-subs li{opacity:1;transform:none;transition-delay:calc(var(--i) * 160ms)}
  .gl-fan.is-on .gl-subs li::before{transform:none;transition-delay:calc(var(--i) * 160ms)}
  .gl-fan.js:not(.is-lit) .gl-subs li.is-src{color:var(--quiet);border-color:var(--edge-2)}
  .gl-fan.is-lit .gl-subs li.is-src::after{opacity:1}
  .gl-fan.is-lit .gl-a{opacity:1}
}

/* the contents rail spans the whole body; site.css's 1/-1 only spans row one
   when the grid has no explicit rows, which stretched the first heading's row */
.note-body>.note-rail{grid-row:1/span 60}

/* --- term page: related terms and sources ---------------------------------- */
.gl-related{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2);margin:0 0 var(--s-4)}
.gl-related a{display:block;border:1px solid var(--line);border-radius:var(--r-inner);padding:var(--s-3) var(--s-4);background:var(--bg-c);transition:background .2s,border-color .2s}
.gl-related a:hover{background:var(--bg-d);border-color:var(--edge-3)}
.gl-related b{display:block;font-size:var(--t-7);font-weight:500;color:var(--ink);margin-bottom:var(--s-1)}
.gl-related span{display:block;font-size:var(--t-7);line-height:1.45;color:var(--quiet)}
.note-body ul.gl-list{margin:0 0 var(--s-4);padding-left:1.1em}
.note-body ul.gl-list li{font-size:var(--t-6);line-height:1.6;color:var(--ink-2);margin-bottom:var(--s-2)}
.note-body ul.gl-list li::marker{color:var(--quiet)}
/* --- term page: the worked example, as code or a small table ----------------
   The code block is the archive's mono on a raised ground; a table reuses the
   note's prose table and keeps to the reading column. */
.note-body>figure.gl-code-fig,.note-body>figure.gl-table-fig{grid-column:2}
@media(max-width:1100px){.note-body>figure.gl-code-fig,.note-body>figure.gl-table-fig{grid-column:1}}
.gl-code{margin:0;background:var(--bg-b);border:1px solid var(--line);border-radius:var(--r-inner);padding:var(--s-4);overflow-x:auto;font-family:var(--font-mono);font-size:var(--t-7);line-height:1.65;color:var(--ink-2);white-space:pre}
.gl-table.note-table{margin:0}
.gl-table table{min-width:0}
.gl-table td:first-child{font-family:inherit;font-weight:500;color:var(--ink);white-space:normal}
.note-body figure.gl-code-fig figcaption,.note-body figure.gl-table-fig figcaption{font-family:inherit;font-size:var(--t-7);font-weight:400;letter-spacing:0;text-transform:none;color:var(--quiet)}
.note-body p code,.note-body li code{font-family:var(--font-mono);font-size:.86em;background:var(--wash-row);border:1px solid var(--line);border-radius:var(--r-sm);padding:1px 5px}

.gl-dates{display:flex;gap:var(--s-4);flex-wrap:wrap;font-size:var(--t-7);color:var(--quiet);margin-left:auto}

/* --- MOBILE COLLAPSE ------------------------------------------------------- */
@media(max-width:1000px){
  .gl-main{grid-template-columns:minmax(0,1fr);gap:var(--s-4)}
  .gl-ans{position:static;order:-1}
  .gl-main>h2{order:-2}
}
@media(max-width:900px){
  .gl-feat{grid-template-columns:minmax(0,1fr)}
  .gl-fc,.gl-fc:first-child{grid-row:auto;min-height:0}
  .gl-fc img{flex:none;aspect-ratio:16/9;min-height:0}
  .gl-fan{grid-template-columns:1fr}
  .gl-dates{margin-left:0}
}
@media(max-width:560px){
  .gl-index{columns:1}
  .gl-related{grid-template-columns:minmax(0,1fr)}
  .gl-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;width:100%}
  .gl-tab{white-space:nowrap}
  .gl-ans{padding:var(--s-4)}
  .gl-ans-def{min-height:0}
}