/* Sam Hagman portfolio. One stylesheet, no framework.
   Design notes: docs/DESIGN.md. The illustrations ("plates") are the one bold element;
   everything around them stays quiet. */

@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('/assets/fonts/schibsted-grotesk-latin-wght-normal.4c8b93f431.woff2') format('woff2-variations');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('/assets/fonts/newsreader-latin-wght-normal.62981321d9.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('/assets/fonts/newsreader-latin-wght-italic.48bc8861b9.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Lichen paper, moss ink, one ochre accent. */
  --paper: #edefe8;
  --paper-raised: #f6f7f2;
  --ink: #22302b;
  --ink-soft: #4f5c56;
  --rule: #c3cabe;
  --accent: #8a5d0f;
  --plate-accent: #b07a16;
  --tone: #dde4d6;
  --moss: #3f6b52;
  --todo-bg: #fbe7a6;
  --todo-ink: #3d2c00;

  --sans: 'Schibsted Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Newsreader', ui-serif, Georgia, 'Times New Roman', serif;

  --gutter: clamp(16px, 4vw, 48px);
  --max: 1180px;
  --measure: 62ch;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #161b19;
    --paper-raised: #1c2320;
    --ink: #e3e8e0;
    --ink-soft: #a9b3ac;
    --rule: #333d38;
    --accent: #e2b65c;
    --plate-accent: #d9a441;
    --tone: #25302b;
    --moss: #8cc2a0;
    --todo-bg: #4a3a12;
    --todo-ink: #fbe7a6;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.6;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1; outline: none; }

img, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

p, ul, ol, dl, figure, h1, h2, h3 { margin: 0; }

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  padding: 0.5rem 0.75rem;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 0.9375rem;
  z-index: 10;
}
.skip:focus { top: 12px; }

/* Masthead ------------------------------------------------------------- */

.masthead,
main > *,
.footer {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.masthead {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  padding-block: 1.75rem 0;
  font-family: var(--sans);
  font-size: 0.9375rem;
}

.wordmark {
  font-weight: 650;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.nav { margin-left: auto; display: flex; gap: 1.5rem; }
.nav a { text-decoration: none; color: var(--ink-soft); padding-block: 0.25rem; }
.nav a:hover { color: var(--ink); text-decoration: underline; }
.nav a[aria-current='page'] { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; }

/* Home ----------------------------------------------------------------- */

.intro { padding-block: clamp(2.5rem, 7vh, 5.5rem) clamp(3.5rem, 7vh, 5.5rem); }

.name {
  font-family: var(--sans);
  font-weight: 680;
  font-size: clamp(3rem, 1.8rem + 4.6vw, 5.25rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
}

.statement {
  margin-top: 1.25rem;
  max-width: 34ch;
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  line-height: 1.42;
  color: var(--ink-soft);
}

.work-title { margin-bottom: 1.5rem; font: 600 clamp(1.25rem, 1.1rem + .4vw, 1.5rem)/1.35 var(--sans); letter-spacing: -.015em; }

.grid {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  /* Keep each caption visually attached to its own illustration, not the next row. */
  gap: clamp(4rem, 7vw, 6rem) clamp(1.25rem, 2.4vw, 2.25rem);
}

.tile { position: relative; grid-column: span 2; }
.tile--feature { grid-column: span 3; }

.plate {
  aspect-ratio: 4 / 3;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  color: var(--ink);
  transition: border-color 160ms ease;
}
.plate-svg { width: 100%; height: 100%; }
.plate-img { width: 100%; height: 100%; object-fit: cover; }
.plate-svg .accent { stroke: var(--plate-accent); }
.plate-svg .accent-fill { fill: var(--plate-accent); }
.plate-svg .tone { fill: var(--tone); }
.plate-svg .faint { opacity: 0.45; }

.tile-name {
  margin-top: 0.9rem;
  font-family: var(--sans);
  font-weight: 620;
  font-size: 1.3125rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.tile-link { text-decoration: none; }
/* The whole tile is clickable, but only the project name is the link's accessible name. */
.tile-link::after { content: ''; position: absolute; inset: 0; }
.tile-link:focus-visible { outline: none; }
.tile:hover .plate,
.tile:focus-within .plate { border-color: var(--ink); }
.tile:hover .tile-link,
.tile:focus-within .tile-link { text-decoration: underline; text-decoration-thickness: 2px; }
.tile:has(.tile-link:focus-visible) .plate { outline: 2px solid var(--accent); outline-offset: 4px; }

.tile-summary {
  margin-top: 0.35rem;
  max-width: 46ch;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.status {
  margin-top: 0.6rem;
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--ink-soft);
}
.status-glyph { flex: none; margin-top: 0.05rem; color: var(--moss); }
.status-explain { color: var(--ink-soft); }

/* Remotion draws the original vector paths. Complete SVGs remain the fallback. */
[data-motion-plate] { position: relative; overflow: hidden; }
.remotion-plate { position: absolute; inset: 0; pointer-events: none; }
.remotion-plate-svg { display: block; width: 100%; height: 100%; }
[data-motion-ready] > .plate-svg { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  .remotion-plate { display: none; }
  [data-motion-ready] > .plate-svg { visibility: visible; }
}

/* Project pages -------------------------------------------------------- */

/* Details lead with the product, not a full-screen cover illustration. */
.is-project .masthead { padding-block: 1.25rem 0; }
.project { padding-block: 1.5rem 0; }
.project-kicker { display:flex; gap:.65rem; align-items:center; margin-bottom:.85rem; color:var(--ink-soft); font: .75rem/1.4 var(--sans); }
.project-kicker a { text-decoration:none; }
.project-kicker a:hover { text-decoration:underline; }
.project-heading { display:flex; align-items:center; flex-wrap:wrap; gap:.75rem 1.5rem; }
.project-name, .page-title { font-family:var(--sans); font-weight:680; font-size:clamp(2.1rem,1.6rem + 2.2vw,3.25rem); line-height:1.05; letter-spacing:-.035em; }
.project-heading .status { margin:0; padding:.35rem .65rem; border:1px solid var(--rule); border-radius:2rem; font-size:.75rem; }
.lede { margin-top:.75rem; max-width:70ch; font-size:clamp(1.125rem,1rem + .4vw,1.35rem); line-height:1.4; color:var(--ink-soft); }
.project-head { margin-bottom:1.5rem; }
.project-plate { min-width:0; }
.project-plate figcaption { margin-top:.4rem; font:.6875rem/1.4 var(--sans); color:var(--ink-soft); }
.project-overview { display:grid; grid-template-columns:minmax(180px, .8fr) minmax(0,2fr); gap:2rem; align-items:start; padding-block:1.5rem; border-top:1px solid var(--rule); }
.project-overview .project-plate { max-width:320px; }
.project-overview .project-capabilities { padding:0; border:0; }
.project-body { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 3rem; margin-top:1.75rem; }
.project-body section { min-width:0; padding-block:1.25rem; border-top:1px solid var(--rule); }
.project-body h2, .project-capabilities h2, .about-section h2 { font:600 .9375rem/1.5 var(--sans); margin-bottom:.65rem; }
.project-body p, .project-capabilities li { font-size:1.0625rem; line-height:1.5; }
.project-capabilities ul { padding-left:1.1em; }
.project-capabilities li + li { margin-top:.45rem; }
.project-body .project-capabilities { grid-row:span 2; }
.project-links { list-style:none; padding:0 !important; margin-top:.9rem; display:flex; flex-wrap:wrap; gap:.75rem; }
.button { display:inline-block; font:560 .875rem/1.4 var(--sans); text-decoration:none; padding:.55rem .85rem; border:1px solid var(--ink); border-radius:2px; }
.button:hover { background:var(--ink); color:var(--paper); }
.facts { margin-top:.5rem; padding-block:1.25rem; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); gap:1rem 2rem; font:.8125rem/1.5 var(--sans); }
.facts dt { color:var(--ink-soft); font-size:.6875rem; text-transform:uppercase; letter-spacing:.06em; }
.facts dd { margin:.3rem 0 0; }
.project-sketch { display:flex; align-items:center; gap:1.25rem; margin-top:1.5rem; color:var(--ink-soft); font:.8125rem/1.5 var(--sans); }
.project-sketch .project-plate { width:140px; flex:none; }
.project-sketch .project-plate figcaption { font-size:.625rem; }
.pager { display:flex; justify-content:space-between; gap:1rem; padding-block:2rem 0; font:1rem/1.5 var(--sans); }
.pager a { text-decoration:none; display:flex; flex-direction:column; }
.pager a[rel='next'] { text-align:right; align-items:flex-end; }
.pager a:hover { text-decoration:underline; }
.pager-dir { font-size:.75rem; color:var(--ink-soft); }
.about-section { display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:.5rem 2rem; padding-block:1.5rem; border-top:1px solid var(--rule); }
.about-section > :not(h2) { grid-column:2; max-width:var(--measure); }
.about-section ul { padding-left:1.1em; }
.about-section li + li { margin-top:.4rem; }
@media(max-width:700px) {
  .project { padding-top:1.25rem; }
  .project-head { margin-bottom:1.1rem; }
  .project-kicker { margin-bottom:.65rem; }
  .project-heading { gap:.6rem; }
  .project-heading .status { font-size:.6875rem; padding:.25rem .5rem; }
  .project-body { grid-template-columns:minmax(0,1fr); margin-top:1.25rem; }
  .project-overview { grid-template-columns:minmax(0,1fr); gap:1.25rem; padding-top:1rem; }
  .project-overview .project-plate { width:180px; max-width:55%; }
  .project-overview .project-capabilities { order:-1; }
  .project-body .project-capabilities { grid-row:auto; }
}

/* About + 404 ---------------------------------------------------------- */

.about, .not-found { padding-block: clamp(2rem, 6vh, 4rem) 0; }
.prose { margin-top: 1.25rem; max-width: var(--measure); }
.prose p + p { margin-top: 1rem; }
.about-section:first-of-type { margin-top: clamp(2rem, 5vh, 3rem); }

.roles { list-style: none; padding: 0; }
.roles li {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  column-gap: 1rem;
  padding-block: 0.45rem;
}
.roles li + li { margin-top: 0 !important; border-top: 1px dotted var(--rule); }
.role-years { grid-row: span 2; font-family: var(--sans); font-size: 0.875rem; color: var(--ink-soft); padding-top: 0.2rem; font-variant-numeric: tabular-nums; }
.role-title { font-family: var(--sans); font-weight: 560; font-size: 1rem; }
.role-org { color: var(--ink-soft); font-size: 1rem; }
.education { margin-top: 1rem; font-size: 1rem; color: var(--ink-soft); }

.earlier { list-style: none; padding: 0 !important; }
.earlier a { font-family: var(--sans); font-weight: 560; font-size: 1rem; }
.earlier-line { display: block; color: var(--ink-soft); font-size: 1rem; }
.earlier-note { margin-top: 0.75rem; font-size: 0.9375rem; color: var(--ink-soft); }

.inline-links { list-style: none; padding: 0 !important; margin-top: 0.75rem; display: flex; gap: 1.25rem; font-family: var(--sans); font-size: 0.9375rem; }

.not-found p:last-child { margin-top: 1.5rem; }

/* Footer --------------------------------------------------------------- */

.footer {
  margin-top: clamp(4rem, 10vh, 7rem);
  padding-block: 1.5rem 2.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--ink-soft);
  /* The rule spans the content column, not the padding. */
  background: linear-gradient(var(--rule), var(--rule)) center top / calc(100% - 2 * var(--gutter)) 1px no-repeat;
}
.footer-links { list-style: none; padding: 0; display: flex; gap: 1.25rem; }
.footer-links a, .inline-links a, .earlier a { display: inline-block; padding-block: 0.3rem; }
.footer-links a { color: var(--ink); }

/* Visible TODO markers (preview builds only; release builds refuse to build with them). */
mark.todo {
  background: var(--todo-bg);
  color: var(--todo-ink);
  font-family: var(--sans);
  font-size: 0.85em;
  padding: 0.05em 0.35em;
  border-radius: 2px;
  outline: 1px dashed currentColor;
  outline-offset: -1px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Responsive ----------------------------------------------------------- */

@media (max-width: 900px) {
  .tile { grid-column: span 3; }
  .tile--feature { grid-column: span 6; }
}

@media (max-width: 600px) {
  body { font-size: 1.0625rem; }
  .tile, .tile--feature { grid-column: span 6; }
  .project-body section,
  .about-section { grid-template-columns: minmax(0, 1fr); }
  .project-body section > :not(h2),
  .about-section > :not(h2) { grid-column: 1; }
  .roles li { grid-template-columns: minmax(0, 1fr); }
  .role-years { grid-row: auto; }
  .pager { flex-direction: column; }
  .pager a[rel='next'] { text-align: left; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Working samples: first-viewport products, progressively enhanced from real HTML. */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.project-demo { padding:1rem 1.25rem .75rem; border:1px solid var(--rule); background:var(--paper-raised); }
.demo-head { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding-bottom:.85rem; }
.demo-head h2 { font:620 1.0625rem/1.3 var(--sans); margin-top:.15rem; }
.demo-eyebrow { font:500 .625rem/1.4 var(--sans); color:var(--moss); letter-spacing:.09em; text-transform:uppercase; }
.demo-eyebrow span { display:inline-block; margin-left:.25rem; }
.demo-hint { font:.8125rem/1.4 var(--sans); max-width:34ch; color:var(--ink-soft); }
.project-demo button { cursor:pointer; min-height:44px; border:1px solid var(--rule); border-radius:3px; padding:.4rem .65rem; background:var(--paper); color:var(--ink); font:500 .75rem/1.4 var(--sans); }
.project-demo button:hover, .project-demo button[aria-pressed='true'] { border-color:var(--moss); background:var(--tone); }
.project-demo button:disabled { opacity:.55; cursor:default; }
.project-demo [hidden] { display:none !important; }
.project-demo fieldset { border:0; padding:0; margin:0; min-width:0; }
.demo-status { margin-top:.65rem; font:.75rem/1.45 var(--sans); color:var(--ink-soft); min-height:1.45em; }
.demo-small { font:.75rem/1.45 var(--sans); color:var(--ink-soft); margin-top:.5rem; }
.demo-caption { border-top:1px solid var(--rule); padding-top:.55rem; margin-top:.65rem; font:.6875rem/1.45 var(--sans); color:var(--ink-soft); }
.demo-caption a { white-space:nowrap; }
.demo-split { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:1.25rem; }
.mesh-wrap { min-width:0; background:var(--paper); border:1px solid var(--rule); padding:.5rem; text-align:center; }
.mesh-wrap svg { width:100%; height:260px; touch-action:pan-y; cursor:grab; }
.mesh-wrap svg:active { cursor:grabbing; }
.mesh-wrap .demo-small { font-size:.6875rem; margin-top:.2rem; }
.demo-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem 1rem; align-content:start; }
.demo-controls label { font:500 .75rem/1.5 var(--sans); }
.demo-controls output { float:right; font-variant-numeric:tabular-nums; color:var(--ink-soft); }
.demo-controls input[type='range'] { width:100%; display:block; accent-color:var(--moss); min-height:36px; margin:0; }
.demo-control-bottom { grid-column:1/-1; display:flex; align-items:center; flex-wrap:wrap; gap:.4rem .75rem; }
.demo-check { display:flex; gap:.4rem; align-items:center; min-height:44px; }
.demo-check input { accent-color:var(--moss); width:16px; height:16px; }
.demo-source { border-top:1px solid var(--rule); margin-top:.65rem; padding-top:.25rem; }
.demo-source summary { cursor:pointer; font:500 .75rem/1.6 var(--sans); min-height:36px; display:list-item; padding-block:.4rem; }
.demo-source pre { overflow:auto; font:.75rem/1.6 ui-monospace,monospace; max-height:24rem; padding:1rem; background:var(--paper); }
.demo-command label { display:block; font:500 .75rem/1.5 var(--sans); margin-bottom:.4rem; }
.demo-command label:not(:first-of-type) { margin-top:.8rem; }
.demo-command textarea, .demo-command select { width:100%; min-width:0; min-height:44px; border:1px solid var(--rule); padding:.55rem; color:var(--ink); background:var(--paper); border-radius:2px; font:.8125rem/1.5 var(--sans); }
.demo-command textarea { resize:vertical; display:block; }
.demo-actions { display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.65rem; }
.demo-actions button:first-child { background:var(--ink); border-color:var(--ink); color:var(--paper); }
.shop-frame { border:1px solid var(--rule); padding:.75rem; background:var(--paper); }
.shop-header { display:flex; justify-content:space-between; gap:.75rem; flex-wrap:wrap; font:.75rem/1.4 var(--sans); }
.shop-header span { color:var(--ink-soft); }
.shop-frame > .demo-small { margin-top:.25rem; font-size:.625rem; }
.shop-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem; margin-top:.65rem; }
.shop-item { padding:.65rem; border:1px solid var(--rule); background:var(--paper-raised); position:relative; }
.shop-item h3 { font:600 .75rem/1.35 var(--sans); margin:.15rem 0 .25rem; }
.shop-item p { font:.6875rem/1.4 var(--sans); color:var(--ink-soft); }
.shop-item strong { display:block; margin-top:.25rem; font:600 .75rem/1.4 var(--sans); }
.shop-badge { display:inline-block; font:.5625rem/1.4 var(--sans); color:var(--ink-soft); border:1px solid var(--rule); padding:.05rem .2rem; margin-bottom:.2rem; }
.shop-item.is-proposed { outline:2px dashed var(--accent); outline-offset:-3px; }
.shop-item.is-collapsed { display:flex; align-items:center; justify-content:space-between; gap:.5rem; font:.6875rem/1.4 var(--sans); color:var(--ink-soft); }
.diagram-wrap { min-width:0; }
.diagram-scroll { overflow-x:auto; border:1px solid var(--rule); background:var(--paper); }
.diagram-scroll svg { width:100%; min-width:550px; min-height:250px; color:var(--ink-soft); }
.diagram-scroll text { font:12px var(--sans); fill:var(--ink); }
.diagram-node > :not(text) { fill:var(--paper-raised); stroke:var(--ink-soft); }
.diagram-node.is-selected > :not(text) { fill:var(--tone); stroke:var(--moss); stroke-width:3; }
.diagram-scroll .has-preview { outline:2px dashed var(--accent); outline-offset:-3px; }
@media(max-width:800px) {
 .demo-split { grid-template-columns:minmax(0,1fr) 210px; gap:1rem; }
 .demo-hint { max-width:27ch; }
}
@media(max-width:600px) {
 .project-demo { padding:.8rem; }
 .demo-head { display:block; padding-bottom:.75rem; }
 .demo-head h2 { font-size:1rem; }
 .demo-hint { max-width:none; font-size:.75rem; margin-top:.35rem; }
 .demo-split { grid-template-columns:minmax(0,1fr); gap:.8rem; }
 .mesh-wrap svg { height:180px; }
 .mesh-wrap .mesh-hint { display:none; }
 .demo-controls { grid-template-columns:repeat(3,minmax(0,1fr)); gap:.35rem .75rem; }
 .demo-controls input[type='range'] { min-height:36px; }
 .demo-control-bottom { grid-column:auto; display:block; }
 .demo-control-bottom button { font-size:.625rem; padding:.2rem .4rem; min-height:36px; }
 .demo-check { min-height:28px; font-size:.625rem !important; gap:.25rem; }
 .demo-check input { width:13px; height:13px; }
 .demo-source { margin-top:.5rem; }
 .shop-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .demo-command textarea { min-height:44px; }
 .demo-command .demo-small { display:none; }
 .demo-actions { margin-top:.5rem; }
 .diagram-scroll svg { min-height:180px; }
 .diagram-wrap > .demo-small { font-size:.625rem; }
 .demo-command label:not(:first-of-type) { margin-top:.5rem; }
}

/* Visual refinement after desktop and phone screenshot review. */
.project-kicker { margin-bottom:.65rem; }
.project-head { margin-bottom:1.1rem; }
.demo-live-dot { width:5px; height:5px; border-radius:50%; background:var(--moss); vertical-align:middle; margin:0 .3rem .1rem 0 !important; }
.shop-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.shop-item { display:grid; grid-template-columns:minmax(0,1fr) auto; align-content:start; align-items:start; column-gap:.5rem; }
.shop-item h3 { grid-column:1; }
.shop-item strong { grid-column:2; grid-row:2; white-space:nowrap; }
.shop-badge { width:fit-content; grid-column:1/-1; }
.shop-item:not(:has(.shop-badge)) h3 { grid-row:1; }
.shop-item:not(:has(.shop-badge)) strong { grid-row:1; }
.shop-item.is-collapsed { display:flex; }
@media(max-width:600px) {
 .project { padding-top:1rem; }
 .project-kicker { font-size:.6875rem; margin-bottom:.6rem; }
 .project-name { font-size:clamp(1.9rem,8vw,2.1rem); }
 .lede { margin-top:.55rem; font-size:1.0625rem; line-height:1.4; }
 .project-head { margin-bottom:1rem; }
 .demo-head { padding-bottom:.6rem; }
 .demo-hint { font-size:.6875rem; }
 .mesh-wrap svg { height:165px; }
 .demo-controls input[type='range'] { min-height:44px; }
 .demo-control-bottom button { min-height:44px; }
 .demo-check { min-height:36px; }
 .shop-grid { grid-template-columns:minmax(0,1fr); gap:.35rem; }
 .shop-item { padding:.45rem .55rem; }
 .shop-item h3 { font-size:.6875rem; margin:0; }
 .shop-item strong { font-size:.6875rem; margin:0; }
 .shop-badge { font-size:.5rem; margin-bottom:.2rem; }
 .diagram-scroll svg { min-width:0; min-height:0; height:205px; }
 .diagram-scroll text { font-size:9px; }
 .diagram-wrap > .demo-small { margin-top:.35rem; }
 .demo-command label:not(:first-of-type) { margin-top:.35rem; }
 .demo-command textarea { font-size:1rem; line-height:1.25; }
 .demo-command select { font-size:1rem; }
 .demo-actions button { font-size:.6875rem; padding-inline:.5rem; }
}

.project-availability { margin-top:.6rem; color:var(--ink-soft); font:.75rem/1.45 var(--sans); }

.project-demo:not([data-enhancing]) .demo-status { display:none; }
.demo-source summary { min-height:44px; }
@media(max-width:600px) { .demo-check { min-height:44px; } }

@media(max-width:600px) { .diagram-wrap > .demo-small { display:none; } }


/* Five compact project compositions. A preview choice changes layout, never content. */
.layout-picker[hidden] { display:none; }
.layout-picker { display:flex; align-items:center; gap:.45rem; margin-left:auto; font:.6875rem/1.2 var(--sans); color:var(--ink-soft); }
.layout-picker select { min-height:36px; padding:.3rem 1.5rem .3rem .5rem; border:1px solid var(--rule); border-radius:3px; background:var(--paper-raised); color:var(--ink); font:500 .75rem/1.2 var(--sans); cursor:pointer; }
.is-project .nav { margin-left:0; }
.is-project .masthead { align-items:center; padding-top:1rem; gap:1.25rem; }
.is-project .wordmark { margin-right:auto; }
.compact-project { padding-top:2.5rem; }
.project-composition { display:grid; grid-template-columns:minmax(230px,.82fr) minmax(0,1.7fr); grid-template-areas:'head stage' 'features stage' 'notes stage'; column-gap:2.5rem; row-gap:1.2rem; align-items:start; }
.compact-project .project-head { grid-area:head; margin:0; }
.compact-project .project-heading { display:block; }
.compact-project .project-name { font-size:clamp(2rem,2.6vw,2.8rem); overflow-wrap:anywhere; }
.compact-project .project-heading .status { display:inline-flex; padding:0; border:0; margin-top:.55rem; font-size:.6875rem; }
.compact-project .lede { margin-top:.65rem; font:450 1.3rem/1.3 var(--serif); color:var(--ink); }
.project-context { margin-top:.7rem; color:var(--ink-soft); font:.8125rem/1.5 var(--sans); max-width:58ch; }
.compact-project .project-capabilities { grid-area:features; padding:0; border:0; }
.compact-project .project-capabilities ul { list-style:none; padding:0; display:grid; gap:.5rem; }
.compact-project .project-capabilities li { position:relative; padding-left:1rem; font:.8125rem/1.45 var(--sans); margin:0; }
.compact-project .project-capabilities li::before { content:'↳'; position:absolute; left:0; color:var(--moss); }
.project-stage { grid-area:stage; min-width:0; }
.compact-project .project-stage > .project-plate { max-width:100%; }
.compact-project .project-plate figcaption { display:flex; align-items:center; justify-content:space-between; min-height:30px; margin:0; font:.625rem/1.3 var(--sans); }
.project-notes { grid-area:notes; display:flex; align-items:flex-start; gap:1rem; min-width:0; color:var(--ink-soft); }
.project-note-copy > p:first-child { font:.9375rem/1.45 var(--serif); }
.compact-facts { margin-top:.75rem; font:.625rem/1.55 var(--sans); color:var(--ink-soft); }
.compact-facts span { padding-inline:.25rem; }
.compact-project .project-sketch { flex:0 0 80px; width:80px; margin:0; display:block; }
.compact-project .project-sketch .project-plate { width:auto; }
.compact-project .project-sketch figcaption { display:block; line-height:1.5; padding-top:.2rem; }
.compact-project .project-links { margin-top:.75rem; }
.compact-project .button { font-size:.75rem; padding:.45rem .65rem; }
.compact-project .pager { border-top:1px solid var(--rule); margin-top:2rem; padding-top:1rem; font-size:.875rem; }
.is-project .footer { margin-top:2.5rem; padding-block:1rem 1.5rem; font-size:.75rem; }
.compact-project .project-demo { padding:1rem; }
.compact-project .demo-head { padding-bottom:.65rem; }
.compact-project .demo-head h2 { display:flex; align-items:baseline; flex-wrap:wrap; gap:.3rem .65rem; margin:0; font-size:.9375rem; }
.compact-project .demo-eyebrow { text-transform:none; letter-spacing:0; font-size:.625rem; }
.compact-project .demo-split { grid-template-columns:minmax(0,1fr) 210px; gap:.85rem; }
.compact-project .mesh-wrap svg { height:245px; }
.compact-project .demo-caption { border:0; margin-top:.4rem; padding:0; font-size:.625rem; }
.compact-project .demo-status { font-size:.6875rem; }
.compact-project .demo-source { margin-top:.4rem; }
.compact-project .demo-source summary { padding-block:.25rem; }
.compact-project .demo-controls { column-gap:.75rem; }

/* 2. Canvas: the work fills the page; the explanation is a compact lower rail. */
[data-layout='canvas'] .project-composition { grid-template-columns:1.15fr 1fr; grid-template-areas:'head head' 'stage stage' 'features notes'; gap:1.25rem 3rem; }
[data-layout='canvas'] .project-head { display:grid; grid-template-columns:1fr 1fr; gap:0 3rem; }
[data-layout='canvas'] .project-heading { grid-row:span 2; }
[data-layout='canvas'] .lede { margin:0; }
[data-layout='canvas'] .project-context { margin-top:.4rem; }
[data-layout='canvas'] .project-demo { border-inline:0; background:none; padding:1rem 0; border-block:1px solid var(--rule); }
[data-layout='canvas'] .demo-split { grid-template-columns:minmax(0,1fr) 300px; }
[data-layout='canvas'] .project-stage > .project-plate .plate { aspect-ratio:auto; height:300px; }
[data-layout='canvas'] .project-stage > .project-plate .plate-svg { object-fit:contain; }
[data-layout='canvas'] .project-capabilities ul { grid-template-columns:repeat(3,minmax(0,1fr)); }
[data-layout='canvas'] .project-capabilities li { padding:0 .5rem 0 0; }
[data-layout='canvas'] .project-capabilities li::before { content:none; }

/* 3. Journal: a full-width heading, main work column and a marginal note. */
[data-layout='journal'] .project-composition { grid-template-columns:minmax(0,3fr) minmax(190px,1fr); grid-template-areas:'head head' 'stage notes' 'features notes'; gap:1.25rem 2rem; }
[data-layout='journal'] .project-head { display:grid; grid-template-columns:1.3fr 1fr; gap:.25rem 3rem; padding-bottom:1rem; border-bottom:1px solid var(--ink); }
[data-layout='journal'] .project-heading { grid-row:span 2; }
[data-layout='journal'] .project-name { font:500 clamp(2.2rem,4vw,3.5rem)/1 var(--serif); letter-spacing:-.025em; }
[data-layout='journal'] .lede { margin:0; }
[data-layout='journal'] .project-context { margin-top:.25rem; }
[data-layout='journal'] .project-notes { display:block; border-left:1px solid var(--rule); padding-left:1.25rem; }
[data-layout='journal'] .project-sketch { width:120px; margin-bottom:1rem; }
[data-layout='journal'] .project-note-copy > p:first-child { font-size:1.125rem; }
[data-layout='journal'] .project-capabilities ul { display:flex; flex-wrap:wrap; column-gap:1.5rem; }
[data-layout='journal'] .project-stage > .project-plate .plate { aspect-ratio:auto; height:340px; }
[data-layout='journal'] .demo-split { grid-template-columns:minmax(0,1fr) 230px; }

/* 4. Index: a compact dossier with metadata and tools sharing one frame. */
[data-layout='index'] .project-composition { grid-template-columns:minmax(220px,.8fr) minmax(0,2fr); grid-template-areas:'head head' 'features stage' 'notes stage'; column-gap:0; row-gap:0; border:1px solid var(--rule); }
[data-layout='index'] .project-head { display:grid; grid-template-columns:1fr 1.5fr; gap:.25rem 2rem; padding:1.25rem 1.5rem; border-bottom:1px solid var(--rule); background:var(--tone); }
[data-layout='index'] .project-heading { grid-row:span 2; }
[data-layout='index'] .project-name { font-size:1.9rem; }
[data-layout='index'] .lede { font:500 1rem/1.4 var(--sans); margin:0; }
[data-layout='index'] .project-context { margin-top:0; font-size:.75rem; }
[data-layout='index'] .project-capabilities { padding:1.5rem 1.25rem .75rem; }
[data-layout='index'] .project-capabilities ul { gap:.75rem; }
[data-layout='index'] .project-capabilities li { border-bottom:1px solid var(--rule); padding:0 0 .75rem; }
[data-layout='index'] .project-capabilities li::before { content:none; }
[data-layout='index'] .project-stage { border-left:1px solid var(--rule); padding:1rem; }
[data-layout='index'] .project-notes { padding:.75rem 1.25rem 1.5rem; display:block; }
[data-layout='index'] .project-sketch { width:72px; float:right; margin:0 0 .5rem .5rem; }
[data-layout='index'] .project-demo { border:0; padding:0; background:none; }
[data-layout='index'] .project-stage > .project-plate .plate { aspect-ratio:auto; height:310px; border:0; background:none; }
[data-layout='index'] .project-note-copy > p:first-child { font:.75rem/1.5 var(--sans); }

/* 5. Feature: a strong editorial opening over an asymmetric lower pair. */
[data-layout='feature'] .project-composition { grid-template-columns:minmax(0,1.6fr) minmax(200px,1fr); grid-template-areas:'head head' 'stage features' 'stage notes'; column-gap:2.5rem; row-gap:1.25rem; }
[data-layout='feature'] .project-head { display:grid; grid-template-columns:1.35fr 1fr; gap:.25rem 3rem; padding-block:.5rem 1rem; }
[data-layout='feature'] .project-heading { grid-row:span 2; }
[data-layout='feature'] .project-name { font:550 clamp(2.3rem,4.3vw,4rem)/.95 var(--serif); letter-spacing:-.045em; }
[data-layout='feature'] .lede { margin:0; font-style:italic; font-size:1.5rem; }
[data-layout='feature'] .project-context { margin-top:.4rem; }
[data-layout='feature'] .project-stage { border-top:3px solid var(--moss); padding-top:1rem; }
[data-layout='feature'] .project-capabilities { padding-top:1rem; border-top:1px solid var(--rule); }
[data-layout='feature'] .project-capabilities li { font:500 1.15rem/1.3 var(--serif); padding-left:1.25rem; }
[data-layout='feature'] .project-capabilities ul { gap:.85rem; }
[data-layout='feature'] .project-notes { display:block; }
[data-layout='feature'] .project-sketch { width:90px; float:right; margin:0 0 .5rem 1rem; }
[data-layout='feature'] .project-demo { padding:.75rem; }
[data-layout='feature'] .demo-split { grid-template-columns:minmax(0,1fr) 190px; gap:.75rem; }
[data-layout='feature'] .project-stage > .project-plate .plate { aspect-ratio:auto; height:330px; }

@media (max-width:950px) and (min-width:601px) {
 .project-composition { column-gap:1.5rem; grid-template-columns:230px minmax(0,1fr); }
 .compact-project .demo-split { grid-template-columns:minmax(0,1fr); }
 .compact-project .demo-controls { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .compact-project .mesh-wrap svg { height:200px; }
 .compact-project .project-sketch { display:none; }
}
@media (max-width:600px) {
 .is-project .masthead { gap:.7rem; padding-top:.55rem; flex-wrap:wrap; font-size:.8125rem; }
 .is-project .wordmark { margin-right:auto; }
 .is-project .nav { gap:1rem; margin-left:auto; }
 .layout-picker { order:3; width:100%; margin:0; padding-block:.25rem; border-bottom:1px solid var(--rule); justify-content:space-between; }
 .layout-picker select { min-height:36px; border:0; background:none; padding-block:.3rem; font-size:.75rem; }
 .compact-project { padding-top:1.1rem; }
 .project-composition { grid-template-columns:minmax(0,1fr) 116px; grid-template-areas:'head stage' 'features features' 'notes notes'; gap:1rem; }
 .compact-project .project-name { font-size:1.8rem; }
 .compact-project .project-heading .status { font-size:.625rem; margin-top:.4rem; }
 .compact-project .lede { font-size:1.125rem; margin-top:.5rem; }
 .project-context { font-size:.75rem; line-height:1.4; margin-top:.5rem; }
 .project-stage > .project-plate { padding-top:.2rem; }
 .compact-project .project-stage .project-plate .plate { height:auto; aspect-ratio:4/3; }
 .compact-project .project-capabilities li { font-size:.75rem; }
 .compact-project .project-capabilities ul { gap:.45rem; }
 .project-note-copy > p:first-child { font-size:.9375rem; }
 .compact-project .project-plate figcaption { min-height:27px; font-size:.5625rem; flex-wrap:wrap; }
 .compact-project .project-sketch { flex-basis:66px; width:66px; }
 .compact-project .pager { margin-top:1.5rem; padding-top:.75rem; flex-direction:row; font-size:.75rem; }
 .compact-project .pager a { max-width:47%; }
 .compact-project .pager a[rel='next'] { text-align:right; align-items:flex-end; }
 .compact-project .pager-dir { font-size:.625rem; }
 .is-project .footer { margin-top:2rem; }
 :is(.has-demo,.has-video) .project-composition { grid-template-columns:minmax(0,1fr); grid-template-areas:'head' 'stage' 'features' 'notes'; gap:1rem; }
 :is(.has-demo,.has-video) .project-heading { display:flex; align-items:center; gap:.45rem .75rem; }
 :is(.has-demo,.has-video) .project-heading .status { margin-top:0; }
 :is(.has-demo,.has-video) .project-context { margin-top:.35rem; }
 .compact-project .project-demo { padding:.65rem; }
 .compact-project .demo-head h2 { font-size:.8125rem; gap:.2rem .5rem; }
 .compact-project .demo-head { padding-bottom:.5rem; }
 .compact-project .demo-split { grid-template-columns:minmax(0,1fr); gap:.65rem; }
 .compact-project .mesh-wrap svg { height:150px; }
 .compact-project .demo-controls { grid-template-columns:repeat(3,minmax(0,1fr)); gap:.25rem .65rem; }
 .compact-project .demo-controls label { font-size:.6875rem; }
 .compact-project .demo-status { font-size:.625rem; margin-top:.4rem; }
 .compact-project .demo-caption { margin-top:.25rem; font-size:.5625rem; }
 .compact-project .demo-source summary { font-size:.6875rem; }
 .compact-project .demo-command label { font-size:.6875rem; margin-bottom:.25rem; }
 .compact-project .diagram-scroll svg { height:175px; }
 .compact-project .demo-small { font-size:.625rem; }
 [data-layout='canvas'] .project-composition { grid-template-columns:minmax(0,1fr); grid-template-areas:'head' 'stage' 'features' 'notes'; gap:.85rem; }
 [data-layout='canvas'] .project-head { display:block; }
 [data-layout='canvas'] .project-heading { display:flex; align-items:center; gap:.5rem .75rem; }
 [data-layout='canvas'] .project-heading .status { margin:0; }
 [data-layout='canvas'] .project-stage > .project-plate .plate { height:190px; aspect-ratio:auto; }
 [data-layout='canvas'] .project-demo { padding:.65rem 0; }
 [data-layout='canvas'] .project-capabilities ul { grid-template-columns:repeat(3,minmax(0,1fr)); gap:.65rem; }
 [data-layout='canvas'] .project-capabilities li { font-size:.6875rem; border-left:1px solid var(--rule); padding-left:.65rem; }
 [data-layout='journal'] .project-composition { grid-template-columns:minmax(0,1fr) 110px; grid-template-areas:'head head' 'features stage' 'notes notes'; gap:1rem; }
 [data-layout='journal'] .project-head { display:block; padding-bottom:.75rem; }
 [data-layout='journal'] .project-name { font-family:var(--serif); font-size:2.3rem; }
 [data-layout='journal'] .project-heading { display:flex; align-items:center; gap:.5rem .75rem; }
 [data-layout='journal'] .project-heading .status { margin:0; }
 [data-layout='journal'] .project-capabilities ul { display:grid; }
 [data-layout='journal'] .project-notes { border-left:2px solid var(--moss); padding-left:.85rem; display:flex; flex-direction:row-reverse; }
 [data-layout='journal'] .project-note-copy > p:first-child { font-size:1rem; }
 [data-layout='journal'] .project-sketch { margin:0; }
 [data-layout='journal'] :is(.has-demo,.has-video) .project-composition { grid-template-columns:minmax(0,1fr); grid-template-areas:'head' 'stage' 'notes' 'features'; }
 [data-layout='index'] .project-composition { grid-template-columns:minmax(0,1fr) 100px; grid-template-areas:'head head' 'features stage' 'notes notes'; gap:0; }
 [data-layout='index'] .project-head { display:block; padding:.85rem; }
 [data-layout='index'] .project-name { font-size:1.7rem; }
 [data-layout='index'] .project-heading { display:flex; gap:.5rem .75rem; align-items:center; }
 [data-layout='index'] .project-heading .status { margin:0; }
 [data-layout='index'] .lede { font-size:.875rem; }
 [data-layout='index'] .project-context { font-size:.6875rem; margin-top:.4rem; }
 [data-layout='index'] .project-capabilities { padding:.85rem; }
 [data-layout='index'] .project-capabilities ul { gap:.5rem; }
 [data-layout='index'] .project-capabilities li { font-size:.6875rem; padding:0 0 .5rem; }
 [data-layout='index'] .project-stage { padding:.75rem .5rem; }
 [data-layout='index'] .project-notes { border-top:1px solid var(--rule); padding:.85rem; }
 [data-layout='index'] .project-note-copy > p:first-child { font-size:.75rem; }
 [data-layout='index'] :is(.has-demo,.has-video) .project-composition { grid-template-columns:minmax(0,1fr); grid-template-areas:'head' 'stage' 'features' 'notes'; }
 [data-layout='index'] :is(.has-demo,.has-video) .project-stage { border:0; padding:.65rem; }
 [data-layout='index'] :is(.has-demo,.has-video) .project-capabilities { border-top:1px solid var(--rule); }
 [data-layout='index'] :is(.has-demo,.has-video) .project-capabilities ul { grid-template-columns:repeat(3,minmax(0,1fr)); }
 [data-layout='index'] :is(.has-demo,.has-video) .project-capabilities li { border:0; padding:0; }
 [data-layout='feature'] .project-composition { grid-template-columns:112px minmax(0,1fr); grid-template-areas:'head head' 'stage features' 'notes notes'; gap:1rem 1.25rem; }
 [data-layout='feature'] .project-head { display:block; padding:0 0 .5rem; }
 [data-layout='feature'] .project-name { font-family:var(--serif); font-size:2.5rem; }
 [data-layout='feature'] .project-heading { display:flex; align-items:center; gap:.5rem .75rem; }
 [data-layout='feature'] .project-heading .status { margin:0; }
 [data-layout='feature'] .lede { font-size:1.25rem; }
 [data-layout='feature'] .project-stage { padding-top:.65rem; }
 [data-layout='feature'] .project-capabilities { padding-top:.65rem; }
 [data-layout='feature'] .project-capabilities ul { gap:.5rem; }
 [data-layout='feature'] .project-capabilities li { font:500 .9375rem/1.3 var(--serif); padding-left:.9rem; }
 [data-layout='feature'] :is(.has-demo,.has-video) .project-composition { grid-template-columns:minmax(0,1fr); grid-template-areas:'head' 'stage' 'features' 'notes'; }
 [data-layout='feature'] :is(.has-demo,.has-video) .project-capabilities ul { grid-template-columns:repeat(3,minmax(0,1fr)); }
 [data-layout='feature'] :is(.has-demo,.has-video) .project-capabilities li { font-size:.875rem; padding-left:0; }
 [data-layout='feature'] :is(.has-demo,.has-video) .project-capabilities li::before { content:none; }
}
@media(max-width:359px) {
 .project-composition { grid-template-columns:minmax(0,1fr) 92px; gap:.85rem; }
 .compact-project .project-name { font-size:1.55rem; }
 .compact-project .lede { font-size:1.05rem; }
 .compact-project .demo-head h2 { font-size:.75rem; }
 .compact-project .mesh-wrap svg { height:135px; }
 [data-layout='journal'] .project-name, [data-layout='feature'] .project-name { font-size:2rem; }
 [data-layout='index'] .project-name { font-size:1.5rem; }
 [data-layout='feature'] .project-composition { grid-template-columns:90px minmax(0,1fr); gap:.85rem; }
}

/* First screenshot review: keep the preview picker in the masthead, and use drawn markers. */
.compact-project .project-capabilities li::before { content:''; width:4px; height:4px; background:var(--moss); border-radius:50%; top:.55em; }
[data-layout='canvas'] .project-capabilities li::before,
[data-layout='index'] .project-capabilities li::before { content:none; }
.compact-project .project-stage > .project-plate .plate { height:340px; aspect-ratio:auto; }
.project-demo[data-ready='true']:not([data-notice]) .demo-status { display:none; }
@media(max-width:600px) {
 .is-project .masthead { flex-wrap:nowrap; gap:.65rem; }
 .layout-picker { order:0; width:auto; flex:none; margin:0; padding:0; border:0; }
 .layout-picker > span { display:none; }
 .layout-picker select { max-width:100px; padding-inline:.25rem; min-height:44px; }
 .is-project .nav { gap:.75rem; margin-left:0; }
 .compact-project .project-stage > .project-plate .plate { height:auto; aspect-ratio:4/3; }
 [data-layout='canvas'] .project-stage > .project-plate .plate { height:190px; aspect-ratio:auto; }
 [data-layout='feature'] :is(.has-demo,.has-video) .project-capabilities li::before { content:none; }
}
@media(max-width:359px) {
 .is-project .masthead { gap:.4rem; font-size:.75rem; }
 .layout-picker select { max-width:88px; font-size:.6875rem; }
 .is-project .nav { gap:.6rem; }
}
/* Optional readable-scale view; the initial diagram stays visible and compact. */
.compact-project .demo-head { gap:.5rem; }
.compact-project .demo-head h2 { flex:1; }
.compact-project .diagram-zoom { font-size:.625rem; padding-inline:.5rem; min-height:36px; }
.diagram-scroll.is-zoomed { max-height:340px; overflow:auto; }
.diagram-scroll.is-zoomed svg { width:1100px; min-width:1100px; height:auto; }
@media(max-width:600px) {
 .compact-project .diagram-zoom { min-height:44px; }
 .compact-project .diagram-scroll.is-zoomed svg { width:648px; min-width:648px; height:auto; }
}


/* Genuine product walkthroughs: explicit playback, with text present in the HTML. */
.project-video { min-width:0; margin:0; }
.project-demo + script + .project-video, .project-demo + .project-video { margin-top:1.25rem; border-top:1px solid var(--rule); padding-top:1rem; }
.video-heading { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:.5rem; color:var(--ink-soft); font:.6875rem/1.4 var(--sans); }
.video-heading h2 { font:600 .8125rem/1.4 var(--sans); color:var(--ink); }
.project-video video { display:block; width:100%; height:auto; max-height:280px; background:#101613; border:1px solid var(--rule); object-fit:contain; }
.project-video > figcaption { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.25rem 1rem; font:.625rem/1.5 var(--sans); color:var(--ink-soft); }
.project-video > figcaption > span { padding-block:.5rem; }
.video-transcript { min-width:0; }
.video-transcript[open] { flex:0 0 100%; }
.video-transcript summary { min-height:36px; padding-block:.5rem; cursor:pointer; text-decoration:underline; text-underline-offset:.2em; }
.video-transcript > p { font-size:.75rem; margin-bottom:.5rem; }
.video-transcript ol { padding:0; list-style:none; display:grid; gap:.5rem; }
.video-transcript li { font-size:.75rem; }
.video-time { font-variant-numeric:tabular-nums; font-weight:600; margin-right:.3rem; }
.video-transcript .video-provenance { font-size:.625rem; margin-top:.75rem; overflow-wrap:anywhere; }
:root:not([data-layout]) .has-video .project-composition,
[data-layout='studio'] .has-video .project-composition,
[data-layout='index'] .has-video .project-composition { grid-template-rows:max-content max-content 1fr; }
[data-layout='canvas'] .project-video video { max-height:320px; }
@media(max-width:600px) {
 .project-video video { max-height:none; }
 .video-transcript summary { min-height:44px; padding-block:.75rem; }
 :root:not([data-layout]) .has-video .project-composition,
 [data-layout='studio'] .has-video .project-composition,
 [data-layout='index'] .has-video .project-composition { grid-template-rows:none; }
 .project-demo + script + .project-video, .project-demo + .project-video { margin-top:1rem; padding-top:.75rem; }
}

/* The selected public portfolio: descriptive pages, no private product demos. */
.tile--text { border: 1px solid var(--rule); padding: clamp(1.25rem, 4vw, 2.5rem); align-self: stretch; display: flex; flex-direction: column; justify-content: center; background: var(--paper-raised); }
.tile--text .tile-name { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.tile-kicker { font: .75rem/1.4 var(--sans); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-soft); }
.tile--text:has(.tile-link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 4px; }
.is-text-project .project-composition { grid-template-areas: none; grid-template-columns: minmax(0, 1fr); max-width: 52rem; }
.is-text-project .project-head, .is-text-project .project-capabilities, .is-text-project .project-notes { grid-column: 1; grid-row: auto; }
.is-text-project .project-notes { display: block; }

.intro-links { margin-top: 1rem; flex-wrap: wrap; }

/* Owner-supplied About copy: exact words with semantic website typography. */
.about-verbatim { max-width: 76ch; margin-block: 1.5rem 3rem; }
.about-verbatim section + section { margin-top: 1.75rem; }
.about-verbatim h2 { font: 600 1rem/1.45 var(--sans); margin-bottom: .65rem; }
.about-verbatim .verbatim-list { list-style: disc; padding-left: 1.2em; }
.about-verbatim .verbatim-list li + li { margin-top: .35rem; }
.about-verbatim .verbatim-list li::marker { color: var(--moss); }