/* tech-ai skeleton: structure only. Colour, type and ornament are the variant's
   (variants/*.css); everything here paints from --v-* tokens.
   One markup serves both skins: a skin hides what it does not use and places the rest
   through these knobs (never the grid properties themselves, or the phone breakpoint
   below would lose to the skin's later rule):
     --ta-bar-h             chrome bar height
     --ta-hero-cols         hero columns (desktop); --ta-hero-rows its rows (a 1fr row takes
                            the slack when a tall figure spans several)
     --ta-hero-areas        hero grid areas (desktop): boot cmd mast kicker title byline
                            abstract cta fig toc notes live
     --ta-hero-areas-phone  hero grid areas under 760px (one column)
     --ta-hero-areas-solo   hero grid areas when no art was delivered (one column)
     --ta-hero-align        vertical placement of the hero content
     --ta-hero-maxw         hero content width
     --ta-mast-max          largest masthead font size; --ta-mast-ch its glyph advance (em);
                            --ta-mast-h the tallest it may get
     --ta-fig-ratio         hero figure aspect ratio
     --ta-features-cols     capability grid columns (desktop); --ta-features-4 columns for four
     --ta-bar-nav-narrow    the bar's section nav under 1080px (none | flex) */

.ta-app {
  --ta-bar-h: 48px;
  position: relative;
  min-height: 100vh;
}

/* ---- chrome bar (a skin decides where it sits: top rail, bottom status line) */
.ta-bar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 18px;
  height: var(--ta-bar-h);
  padding: 0 var(--v-pad-x);
}
/* a long name gives way (ellipsis) before the bar runs off a narrow screen */
.ta-brand { display: inline-flex; align-items: center; gap: 10px; flex: 0 1 auto; min-width: 0; text-decoration: none; }
.ta-brand__mark { width: 26px; height: 26px; object-fit: cover; flex: none; }
.ta-brand__name, .ta-brand__tick { white-space: nowrap; }
.ta-brand__name { min-width: 0; overflow-x: clip; text-overflow: ellipsis; }
.ta-brand__tick { flex: none; }
.ta-bar__nav { flex: 1; min-width: 0; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.ta-bar__nav::-webkit-scrollbar { display: none; }
.ta-bar__nav .wl-nav__link { flex: none; white-space: nowrap; text-decoration: none; }
.ta-bar__net { flex: none; margin-left: auto; white-space: nowrap; }

/* ---- hero */
.ta-main { min-width: 0; }
.ta-hero {
  position: relative;
  display: grid;
  min-height: calc(100vh - var(--ta-bar-h));
  min-height: calc(100svh - var(--ta-bar-h));
  padding: clamp(28px, 4.5vw, 60px) var(--v-pad-x);
  overflow: hidden;
}
.ta-hero__grid {
  position: relative; z-index: 1;
  width: 100%; max-width: var(--ta-hero-maxw, 1240px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: var(--ta-hero-cols, minmax(0, 1fr));
  grid-template-rows: var(--ta-hero-rows, none);
  grid-template-areas: var(--ta-hero-areas, "boot" "cmd" "mast" "kicker" "title" "byline" "abstract" "cta" "fig" "toc" "notes" "live");
  column-gap: clamp(28px, 4vw, 64px);
  row-gap: 0; /* spacing is each block's margin, so an absent block leaves no gap */
  align-content: var(--ta-hero-align, center);
}
.ta-boot { grid-area: boot; margin: 0; padding: 0; list-style: none; }
.ta-cmd { grid-area: cmd; margin: 0; }
.ta-mast-wrap { grid-area: mast; min-width: 0; container-type: inline-size; }
.ta-kicker { grid-area: kicker; margin: 0; }
.ta-title { grid-area: title; margin: 0; }
.ta-byline { grid-area: byline; margin: 0; }
.ta-abstract { grid-area: abstract; min-width: 0; }
.ta-cta { grid-area: cta; display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; gap: 12px; }
.ta-fig { grid-area: fig; margin: 0; min-width: 0; }
.ta-toc { grid-area: toc; min-width: 0; }
.ta-notes { grid-area: notes; min-width: 0; }
.ta-note { margin: 0; overflow-wrap: anywhere; }
.ta-notes:not(:has(.ta-note)) { display: none; }
.ta-live { grid-area: live; margin: 0; }

.ta-ps1, .ta-cmd__text, .ta-live { white-space: nowrap; }
/* Block art tiles only at the font's own line height; it is sized to fit both the
   column's width and --ta-mast-h (app.js sets --ta-mast-cols/--ta-mast-rows). */
.ta-mast {
  margin: 0;
  width: max-content; max-width: 100%;
  overflow: hidden;
  white-space: pre;
  line-height: normal;
  font-variant-ligatures: none;
  font-size: min(var(--ta-mast-max, 40px),
    calc(100cqi / (var(--ta-mast-cols, 40) * var(--ta-mast-ch, 0.6))),
    calc(var(--ta-mast-h, 240px) / (var(--ta-mast-rows, 6) * 1.2)));
}
.ta-mast--plain { white-space: normal; overflow-wrap: anywhere; }

.ta-subhead { margin: 0; }
.ta-byline__item { white-space: nowrap; }
.ta-fig__frame { position: relative; }
.ta-fig__media { position: relative; overflow: hidden; aspect-ratio: var(--ta-fig-ratio, 2 / 1); }
.ta-fig__media .wl-hero-img { width: 100%; height: 100%; object-fit: cover; }
.ta-ghost { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ta-fig__media.wl-media--pfp, .ta-fig__media.wl-media--pfp-animated { aspect-ratio: 1; max-width: 460px; }
.ta-fig__media.wl-media--post { aspect-ratio: auto; overflow: visible; }
.ta-fig__media .wl-post--giant .wl-post__text { font-size: clamp(1.15rem, 1.9vw, 1.6rem); }
.ta-fig:has(.wl-media--none), .ta-fig:has(.wl-media--post) .ta-fig__cap { display: none; }
.ta-abstract:not(:has(.ta-subhead)) { display: none; }
/* No art delivered at all: the hero closes up to one column (--ta-hero-areas-solo). */
.ta-hero__grid:has(.wl-media--none) {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: none;
  grid-template-areas: var(--ta-hero-areas-solo, "boot" "cmd" "mast" "kicker" "title" "byline" "abstract" "cta" "toc" "notes" "live");
}
/* Capability columns follow the count (a skin may still set --ta-features-cols). */
.wl-features[data-count="1"] { --ta-features-cols: minmax(0, 1fr); }
.wl-features[data-count="2"] { --ta-features-cols: repeat(2, minmax(0, 1fr)); }
.wl-features[data-count="4"] { --ta-features-cols: repeat(var(--ta-features-4, 4), minmax(0, 1fr)); }
.ta-fig__alt:empty { display: none; }
.ta-toc:not(:has(.wl-nav__link)) { display: none; }
.ta-toc__list { display: flex; flex-direction: column; }
.ta-toc__list .wl-nav__link { text-decoration: none; }

/* A headline that falls back to the name is not repeated as "Name: Name". */
.ta-same .ta-title__name, .ta-same .ta-title__sep, .ta-same .ta-bib__name, .ta-same .ta-bib__sep { display: none; }

/* ---- page body */
.ta-tape { overflow: hidden; }
.ta-flow { padding-bottom: clamp(48px, 7vw, 96px); }
.wl-features { grid-template-columns: var(--ta-features-cols, repeat(auto-fit, minmax(min(250px, 100%), 1fr))); }
.ta-cite { padding: 0 var(--v-pad-x) clamp(48px, 7vw, 96px); }
.ta-cite__head, .ta-cite__bib { max-width: var(--v-maxw); margin-left: auto; margin-right: auto; }
.ta-cite__head { margin-top: 0; }
.ta-cite__bib { overflow-x: auto; white-space: pre; }
.ta-foot { padding: 32px var(--v-pad-x) 44px; }

.wl-sec { scroll-margin-top: calc(var(--ta-bar-h) + 12px); }

@media (max-width: 1080px) {
  .ta-bar__nav { display: var(--ta-bar-nav-narrow, none); }
}
@media (max-width: 760px) {
  .ta-hero { min-height: 0; }
  .ta-hero__grid, .ta-hero__grid:has(.wl-media--none) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: var(--ta-hero-areas-phone, "boot" "cmd" "mast" "kicker" "title" "byline" "abstract" "cta" "fig" "toc" "notes" "live");
  }
  .wl-features { grid-template-columns: minmax(0, 1fr); }
}