/* Insights' index: AI Firsthand's front page (Xavi's pick, 15 Oct 2026; README.md beside this file). After record.css.
   Tokens and type are the site's; nothing here is a new colour or size.

   Xavi, 15 Oct: "con el destacado en medio y los demás alrededor, como si fuera literalmente un periódico… sé un poco
   creativo", then "nos gusta la que parece un periódico, haz que sea la única vista". The masthead is a nameplate, the
   name at the book's largest size (the KPI's) over its edition line between two Fathom rules. Under it three columns on
   the page's twelve, 3 · 6 · 3, with a Coastal Grey rule in each gutter: the lead in the middle, its first paragraph in
   two columns under a drop capital, as a story starts on a front page; around it a story with its picture, a brief led
   by its issue's quote, another story, and the box of the columns on Sea Foam, which chooses one. Every word is the
   issue's own. Rules only where a newspaper has them: the edition line's two and the columns' two. index.js lays the
   cards out; without it they stand four to a row under the nameplate. */

/* ---------- the nameplate ---------- */
/* No author: issues may come from different writers, and each issue's page names its own (Xavi, 14 Oct). The page
   already starts under the bar (record.css: .rec main) */
.gc-mast{text-align:center}
.gc-mast .rec-title{font-size:var(--t-kpi);line-height:1;letter-spacing:-.02em}
.gc-mast .lead{max-width:none;margin:16px auto 0;line-height:1.5;color:var(--deep)}
.np-ed{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px 24px;margin-top:32px;padding-block:12px;border-block:1px solid var(--fathom);color:var(--fathom)}
.np-ed>:first-child{justify-self:start}
.np-ed>:last-child{justify-self:end;text-align:right}
.np-ed a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}

/* ---------- the front ---------- */
.gc{margin-top:40px;padding-bottom:var(--sec);transition:opacity .4s ease}
/* unseen until index.js has laid it out (index.html's head sets front-wait, for three seconds at most), so a first visit
   never shows the cards in a row and then the front page (15 Oct 2026: "un flash of unstyled content"). It then comes in
   with a short fade; at once with reduced motion */
html.front-wait .gc{opacity:0;visibility:hidden}
@media (prefers-reduced-motion:reduce){.gc{transition:none}}
.gc-vh,.gc-card[style*="span 3"] .gc-cn{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.np-front{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.np-front ul{list-style:none;margin:0;padding:0}
.np-c{grid-column:4/span 6;grid-row:1;position:relative}
.np-l{grid-column:1/span 3;grid-row:1}
.np-r{grid-column:10/span 3;grid-row:1}
.np-c::before,.np-c::after{content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--edge)}
.np-c::before{left:calc(-.5*var(--gap) - .5px)}
.np-c::after{right:calc(-.5*var(--gap) - .5px)}
.np-front .gc-card{display:block;margin:0}
.np-front .gc-a{display:flex;flex-direction:column}
.np-front .gc-more{display:contents}
.np-front :is(.gc-k,.gc-lead,.gc-q,.gc-go,.gc-photo){display:none}
.np-front .gc-top{min-height:0}
.np-front .gc-t{margin-top:16px}
.np-front .gc-s{margin-top:12px}
.np-front :is(.np-l,.np-rl)>li+li{margin-top:48px}
/* the lead: its column, the number and the time, the title at the display size, its picture, the standfirst, then its
   first paragraph in two columns under a drop capital (three lines tall, Book, Fathom), and the button */
.np-lead .gc-mono{--mono:56px}
.np-lead .gc-k{display:flex;flex-wrap:wrap;gap:8px 12px;order:1;margin-top:20px;color:var(--deep)}
.gc-k span:not(:last-child)::after{content:"·";margin-left:12px}
.np-lead .gc-t{order:2;margin-top:12px;font-size:var(--t-display);line-height:1.06;letter-spacing:-.02em}
.np-lead .gc-photo{display:block;order:3;margin-top:28px;aspect-ratio:3/2}
.np-lead .gc-s{order:4;margin-top:24px;font-size:var(--t-lead);line-height:1.45}
.np-lead .gc-lead{display:block;order:5;margin-top:20px;columns:2;column-gap:var(--gap);font-size:clamp(15px,1.111vw,18px);line-height:1.6;text-wrap:pretty}
.np-lead .gc-lead::first-letter{float:left;margin:.09em .1em 0 0;font-size:3.4em;line-height:.8;color:var(--fathom)}
.np-lead .gc-lead strong{font-weight:500}
.np-lead .gc-go{display:inline-flex;order:6;align-self:flex-start;margin-top:28px}
.gc-a:hover .gc-go{background:var(--fathom);border-color:var(--fathom);color:var(--white)}
/* a story at the side: its column, its title, its picture, its standfirst */
.np-pic .gc-mono,.np-brief .gc-mono{--mono:36px}
.np-pic .gc-photo{display:block;order:2;margin-top:20px;aspect-ratio:4/3}
.np-pic .gc-s{order:3;margin-top:16px}
/* a brief: no picture; its issue's quote first, as large as a side story's title, then the title and standfirst */
.np-brief .gc-q{display:block;order:1;margin-top:20px;font-size:var(--t-h3);line-height:1.3;letter-spacing:-.01em;color:var(--fathom);text-wrap:pretty}
.np-brief .gc-q::before{content:"\201C"}
.np-brief .gc-q::after{content:"\201D"}
.np-brief .gc-t{order:2;margin-top:20px;font-size:clamp(17px,1.25vw,22px);font-weight:500;line-height:1.3;letter-spacing:0}
.np-brief .gc-s{order:3;margin-top:8px}

/* ---------- the box of the columns ---------- */
/* Sea Foam, each column with its code, its name and count, and its line; the one chosen in Fathom. A column with no
   issue yet is only described. No monograms here: their files are on white, and on Sea Foam they'd show it */
.np-box{margin-top:48px;padding:24px;border-radius:var(--r);background:var(--foam)}
.np-rl:empty+.np-box{margin-top:0}   /* a column with too few issues for a story at the right: the box goes up */
.np-box>ul{margin-top:8px}
.np-box li+li{margin-top:4px}
.np-col{display:grid;grid-template-columns:32px minmax(0,1fr) auto;column-gap:8px;padding-block:8px;color:var(--deep);text-decoration:none}
.np-col .np-code{font-size:12px;font-weight:500;letter-spacing:.08em;padding-top:.2em}
.np-col .np-name{grid-column:2;font-size:clamp(16px,1.111vw,20px);line-height:1.3}
.np-col .np-n{grid-column:3;font-size:12px;font-weight:500;letter-spacing:.06em;padding-top:.2em}
.np-col .np-line{grid-column:2/-1;margin-top:4px;font-size:clamp(13px,.972vw,16px);line-height:1.45}
a.np-col:hover .np-name,a.np-col[aria-current] .np-name{color:var(--fathom);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
a.np-col[aria-current] .np-name{font-weight:500}
a.np-col:focus-visible{outline:2px solid var(--deep);outline-offset:2px}

/* ---------- a column's mark ---------- */
/* Gonzalo's monogram, the file the newsletter shows (Xavi's pick, 15 Oct), as it is: set by its height (--mono), its
   width following, every letter that stands past its square kept. Never cropped, recoloured or redrawn (his README) */
.gc-mark{display:inline-flex;flex:none}
.gc-mono{display:block;width:auto;height:var(--mono,44px)}

/* ---------- the earlier issues ---------- */
/* Under the front, once there are more than four. Twelve columns: index.js sets each card's span, four to a row from
   1100 px, where a short row is thirds or halves (never one card alone across), two to a row from 700 px, one on a
   phone. Without it, every card stands here four to a row. Each card spans four rows of the grid and shares them with
   the cards beside it (subgrid), so across a row the marks, the titles, the standfirsts and the pictures start level. */
.np-more{margin-top:var(--sec)}
.np-more[hidden],.gc-grid[hidden]{display:none}
.gc-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);margin-top:32px}
.gc-card{grid-column:span 3;grid-row:span 4;display:grid;grid-template-rows:subgrid;margin-bottom:64px;min-width:0}
@media (max-width:1099px){.gc-card{grid-column:span 6}}
@media (max-width:699px){.gc-card{grid-column:span 12}}
.gc-card[hidden]{display:none}
/* a card: its column's mark and name, the date across from them; the title at the h3 size; the standfirst in Deep Teal;
   the picture under them. No rule over it: the mark starts the card */
.gc-a{grid-row:1/-1;display:grid;grid-template-rows:subgrid;grid-template-columns:minmax(0,1fr);min-width:0;text-decoration:none;color:inherit}
.gc-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
.gc-col{display:inline-flex;align-items:center;gap:12px;min-width:0}
.gc-cn,.gc-date{font-size:var(--t-detail);font-weight:500;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.gc-cn{overflow:hidden;text-overflow:ellipsis;color:var(--fathom)}
.gc-date{color:var(--deep)}
.gc-t{margin-top:20px;font-size:var(--t-h3);font-weight:400;line-height:1.2;letter-spacing:-.01em;text-wrap:balance}
.gc-s{margin-top:12px;font-size:clamp(15px,1.111vw,18px);line-height:1.55;color:var(--deep);text-wrap:pretty}
.gc-photo{margin-top:28px;aspect-ratio:4/3;align-self:start}
.gc-photo img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.gc-more,.gc-lead,.gc-q{display:none}   /* the front's: the lead's number and button, its first paragraph, a brief's quote */
.gc-a:hover .gc-t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em}
.gc-a:hover .gc-photo img{transform:scale(1.03)}
.gc-a:focus-visible{outline:2px solid var(--deep);outline-offset:6px}
.gc-card[style*="span 6"] .gc-photo{aspect-ratio:16/10}

/* ---------- a tablet and a phone ---------- */
/* a tablet: the lead across, the two sides under it; a phone: one under another, newest first, the edition line's
   middle left out */
@media (max-width:1099px){
  .np-c{grid-column:1/-1}
  .np-front .np-l{grid-column:1/span 6;grid-row:2;margin-top:56px}
  .np-front .np-r{grid-column:7/span 6;grid-row:2;margin-top:56px}
  .np-c::before,.np-c::after{display:none}
}
@media (max-width:699px){
  .gc-mast .rec-title{font-size:48px}
  .np-ed{grid-template-columns:1fr 1fr}
  .np-ed>:nth-child(2){display:none}
  .np-front :is(.np-l,.np-r){grid-column:1/-1;grid-row:auto;margin-top:48px}
  .np-lead .gc-lead{columns:1}
  .gc-card{margin-bottom:48px}
  .gc-photo{margin-top:20px;aspect-ratio:16/10}
}

/* ---------- the move between columns ---------- */
/* each card is its own view-transition (index.js gives it a name): it slides and resizes to its new place, a card that
   leaves fades, one that arrives fades in. The page itself doesn't fade. Only where the browser has view transitions,
   and never with reduced motion (index.js) */
::view-transition-group(*){animation-duration:.6s;animation-timing-function:cubic-bezier(.3,.7,.2,1)}
::view-transition-old(*),::view-transition-new(*){animation-duration:.35s}
::view-transition-old(root),::view-transition-new(root){animation:none}