@import url('/assets/art-is-you/design-tokens.css');

:root {
  --v2-bg: var(--color-paper, #EFEFEA);
  --v2-text: var(--color-text, #695E58);
  --v2-line: var(--color-line, var(--rule));
  --v2-accent: var(--color-accent, #064CFF);
  --v2-gutter: 32px;
  --v2-gap: 24px;
  --v2-section: 48px;
}

html, body { margin:0; padding:0; background:var(--v2-bg); color:var(--v2-text); }
body.v2-clean-page { overflow-x:hidden; font-family:var(--ay-font-sans, 'Source Sans 3', sans-serif); }
body.v2-clean-page *, body.v2-clean-page *::before, body.v2-clean-page *::after { box-sizing:border-box; }

.v2-page,
.programmer-page.v2-page {
  width:100%;
  margin:0;
  padding:0 var(--v2-gutter) 64px;
  background:var(--v2-bg);
  color:var(--v2-text);
}

.v2-grid,
.v2-hero__grid,
.v2-media-text,
.v2-reading,
.v2-gallery-layout,
.v2-split-reading,
.v2-related,
.v2-video-grid {
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--v2-gap);
}

.v2-context {
  display:flex;
  height:32px;
  align-items:center;
  justify-content:space-between;
  gap:var(--v2-gap);
  padding:32px 0 0;
  font-family:var(--ay-font-mono, 'PT Mono', monospace);
  font-size:11px;
  line-height:14px;
  letter-spacing:.025em;
  text-transform:uppercase;
}

.v2-hero__grid { align-items:start; padding:48px 0 32px; }
.v2-hero h1 { grid-column:1 / span 8; margin:0; font-size:40px; line-height:44px; font-weight:400; letter-spacing:-.04em; }
.v2-hero__lead { grid-column:9 / -1; max-width:52ch; margin:0; font-size:18px; line-height:24px; letter-spacing:-.015em; }
.v2-hero__lead p { margin:0 0 16px; }
.v2-hero__meta { display:flex; justify-content:space-between; gap:16px; margin-top:24px; padding-top:12px; border-top:1px solid var(--v2-line); font-family:var(--ay-font-mono,monospace); font-size:11px; line-height:14px; text-transform:uppercase; }

.v2-nav,
.programmer-nav.v2-nav {
  display:flex;
  height:41px;
  min-height:41px;
  align-items:stretch;
  overflow:hidden;
  border-block:1px solid var(--v2-line);
  border-inline:0;
}
.v2-nav a,
.programmer-nav.v2-nav a {
  display:inline-flex;
  height:40px;
  align-items:center;
  padding:0 16px;
  color:var(--v2-text)!important;
  border:0!important;
  border-right:1px solid var(--v2-line)!important;
  background:transparent!important;
  font-size:14px!important;
  line-height:18px!important;
  font-weight:400!important;
  text-decoration:none!important;
  text-transform:none!important;
  white-space:nowrap;
}
.v2-nav a:hover,.v2-nav a:focus-visible,.programmer-nav.v2-nav a:hover { color:var(--v2-accent)!important; }

.v2-sectionbar,
.programmer-sectionbar.v2-sectionbar {
  display:flex;
  height:41px;
  min-height:41px;
  align-items:center;
  justify-content:space-between;
  gap:var(--v2-gap);
  margin:var(--v2-section) 0 24px;
  padding:0;
  border-block:1px solid var(--v2-line)!important;
  border-inline:0!important;
  background:transparent!important;
  font-family:var(--ay-font-mono,monospace);
  font-size:11px!important;
  line-height:14px!important;
  font-weight:500;
  letter-spacing:.025em;
  text-transform:uppercase;
}

.v2-h2 { margin:0 0 20px; font-size:28px; line-height:32px; font-weight:400; letter-spacing:-.03em; }
.v2-h3 { margin:0 0 10px; font-size:22px; line-height:28px; font-weight:400; letter-spacing:-.02em; }
.v2-lead { margin:0 0 20px; font-size:17px; line-height:24px; letter-spacing:-.015em; }
.v2-body { margin:0; font-size:16px; line-height:24px; letter-spacing:-.01em; }
.v2-body p { margin:0 0 16px; }
.v2-meta { font-family:var(--ay-font-mono,monospace); font-size:11px; line-height:14px; letter-spacing:.025em; text-transform:uppercase; }
.v2-caption { display:flex; justify-content:space-between; gap:16px; padding:10px 0 0; font-family:var(--ay-font-mono,monospace); font-size:11px; line-height:14px; }

.v2-reading__body { grid-column:1 / span 7; max-width:64ch; }
.v2-reading__aside { grid-column:9 / -1; align-self:start; }
.v2-aside-rule { padding-top:12px; border-top:1px solid var(--v2-line); }
.v2-aside-code { margin:0; font-family:var(--ay-font-mono,monospace); font-size:14px; line-height:22px; white-space:pre-wrap; }

.v2-media-text { align-items:start; }
.v2-media-text__media { grid-column:1 / span 8; min-width:0; }
.v2-media-text__text { grid-column:9 / -1; min-width:0; max-width:46ch; }
.v2-media-text img,.v2-media img { display:block; width:100%; height:auto; max-height:72vh; object-fit:contain; object-position:left top; }
.v2-media-full img { display:block; width:100%; height:auto; max-height:74vh; object-fit:contain; }

.v2-opening { margin:32px 0 0; }
.v2-opening__frame { overflow:hidden; background:#111; }
.v2-opening__frame img { display:block; width:100%; height:auto; max-height:72vh; object-fit:cover; object-position:center; }

.v2-gallery-layout { align-items:start; }
.v2-gallery-layout > .v2-carousel { grid-column:1 / span 8; }
.v2-gallery-layout > .v2-gallery-aside { grid-column:9 / -1; max-width:46ch; }

.v2-carousel { min-width:0; outline:none; }
.v2-carousel__viewport { position:relative; width:100%; }
.v2-carousel__slide { display:none; margin:0; }
.v2-carousel__slide.is-active { display:block; }
.v2-carousel__media { display:grid; min-height:0; place-items:start; background:transparent; }
.v2-carousel__media img { display:block; width:100%; height:auto; max-height:72vh; object-fit:contain; object-position:left top; }
.v2-carousel__caption { min-height:38px; padding:10px 0 8px; border-bottom:1px solid var(--v2-line); font-family:var(--ay-font-mono,monospace); font-size:11px; line-height:16px; }
.v2-carousel__controls { display:grid; grid-template-columns:48px 1fr 48px; height:41px; align-items:center; border-bottom:1px solid var(--v2-line); }
.v2-carousel__button { height:40px; border:0; background:transparent; color:var(--v2-text); font-size:18px; cursor:pointer; }
.v2-carousel__button:hover { color:var(--v2-accent); }
.v2-carousel__status { justify-self:center; }

.v2-video { grid-column:1 / span 8; aspect-ratio:16/9; background:#111; }
.v2-video iframe { width:100%; height:100%; border:0; }
.v2-video-grid { row-gap:32px; }
.v2-video-grid .v2-video:nth-child(1) { grid-column:1 / span 6; }
.v2-video-grid .v2-video:nth-child(2) { grid-column:7 / -1; }
.v2-video-grid .v2-video:nth-child(3) { grid-column:1 / span 8; }

.v2-split-reading { align-items:start; row-gap:32px; }
.v2-split-reading > article:first-child { grid-column:1 / span 5; }
.v2-split-reading > article:last-child { grid-column:7 / -1; }
.v2-reading-card { padding-top:16px; border-top:1px solid var(--v2-line); }
.v2-reading-card p { margin:0 0 16px; font-size:16px; line-height:24px; }

.v2-pre {
  grid-column:1 / span 8;
  margin:0;
  padding:0;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  color:var(--v2-text);
  background:transparent;
  border:0;
  font-family:var(--ay-font-mono,monospace);
  font-size:14px;
  line-height:22px;
}

.v2-related { row-gap:24px; }
.v2-related-card { grid-column:span 4; min-height:0; padding:16px 0 0; border-top:1px solid var(--v2-line); color:var(--v2-text)!important; text-decoration:none!important; }
.v2-related-card h3 { margin:20px 0 10px; font-size:22px; line-height:28px; font-weight:400; }
.v2-related-card p { margin:0; max-width:36ch; font-size:16px; line-height:22px; }
.v2-related-card:hover h3 { color:var(--v2-accent); }

.v2-testimony-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.v2-quote { margin:0; padding:20px 0 0; border-top:1px solid var(--v2-line); }
.v2-quote p { margin:0 0 16px; font-size:16px; line-height:24px; }
.v2-quote footer { font-family:var(--ay-font-mono,monospace); font-size:11px; line-height:14px; text-transform:uppercase; }

/* PROGRAMMER: keep authored content, replace legacy geometry. */
.programmer-page.v2-page { --programmer-text:var(--v2-text); --programmer-line:var(--v2-line); --programmer-bg:var(--v2-bg); padding:0 var(--v2-gutter) 64px!important; }
.programmer-header { border:0!important; }
.programmer-header__eyebrow { height:32px; padding:32px 0 0!important; border:0!important; font-size:11px!important; line-height:14px!important; }
.programmer-header__grid { display:grid!important; grid-template-columns:repeat(12,minmax(0,1fr))!important; gap:var(--v2-gap)!important; align-items:start!important; padding:48px 0 32px!important; }
.programmer-header__grid > h1 { grid-column:1 / span 8!important; align-self:start!important; margin:0!important; font-size:40px!important; line-height:44px!important; font-weight:400!important; letter-spacing:-.04em!important; }
.programmer-header__lead { grid-column:9 / -1!important; align-self:start!important; max-width:52ch!important; }
.programmer-header__lead > p { margin:0 0 24px!important; max-width:52ch!important; font-size:17px!important; line-height:24px!important; letter-spacing:-.015em!important; }
.programmer-header__meta { margin:0!important; padding-top:12px!important; border-top:1px solid var(--v2-line)!important; font-size:11px!important; line-height:14px!important; }
.programmer-opening { margin:32px 0 0!important; border:0!important; }
.programmer-opening__image { width:100%!important; height:auto!important; max-height:none!important; overflow:hidden!important; background:#111!important; }
.programmer-opening__image img { width:100%!important; height:auto!important; max-height:72vh!important; object-fit:cover!important; }
.programmer-opening__caption,.programmer-hero__caption { padding:10px 0!important; border-bottom:1px solid var(--v2-line)!important; font-size:11px!important; line-height:14px!important; }
.programmer-sectionbar { margin:var(--v2-section) 0 32px!important; }
.programmer-concept,.programmer-material,.programmer-spatial,.programmer-protocol,.programmer-tao,.programmer-credits { border:0!important; min-height:0!important; background:transparent!important; }
.programmer-concept { display:grid!important; grid-template-columns:repeat(12,minmax(0,1fr))!important; gap:var(--v2-gap)!important; align-items:start!important; }
.programmer-concept__quote { grid-column:1 / span 8!important; margin:0!important; padding:0!important; border:0!important; font-size:22px!important; line-height:28px!important; letter-spacing:-.02em!important; }
.programmer-concept__content { grid-column:9 / -1!important; display:block!important; padding:0!important; min-height:0!important; }
.programmer-concept__lead,.programmer-material__lead,.programmer-spatial__lead,.programmer-tao__lead { max-width:52ch!important; margin:0 0 16px!important; font-size:18px!important; line-height:24px!important; letter-spacing:-.015em!important; }
.programmer-concept__content p,.programmer-material__content p,.programmer-spatial__content p,.programmer-tao__content p { max-width:52ch!important; margin:0 0 16px!important; font-size:16px!important; line-height:24px!important; }
.programmer-meta { margin:0 0 24px!important; font-size:11px!important; line-height:14px!important; }
.programmer-concept__formula,.programmer-material__equation,.programmer-spatial__axis,.programmer-tao__equation { margin:24px 0 0!important; padding-top:12px!important; font-size:11px!important; line-height:14px!important; border-top:1px solid var(--v2-line)!important; }
.programmer-hero { margin:0!important; border:0!important; }
.programmer-hero__visual { border:0!important; }
.programmer-material,.programmer-spatial,.programmer-tao { display:grid!important; grid-template-columns:repeat(12,minmax(0,1fr))!important; gap:var(--v2-gap)!important; align-items:start!important; }
.programmer-material__image,.programmer-spatial__image,.programmer-tao__visual { grid-column:1 / span 8!important; grid-row:1!important; min-width:0!important; min-height:0!important; padding:0!important; border:0!important; background:transparent!important; overflow:visible!important; }
.programmer-material__image img,.programmer-spatial__image img,.programmer-board__frame img { display:block!important; width:100%!important; height:auto!important; min-height:0!important; max-height:72vh!important; object-fit:contain!important; object-position:left top!important; }
.programmer-material__content,.programmer-spatial__content,.programmer-tao__content { grid-column:9 / -1!important; grid-row:1!important; display:block!important; min-height:0!important; padding:0!important; border:0!important; }
.programmer-material__content h2,.programmer-spatial__content h2,.programmer-tao__content h2,.programmer-protocol__intro h2 { max-width:none!important; margin:0 0 20px!important; font-size:28px!important; line-height:32px!important; letter-spacing:-.03em!important; }
.programmer-photo-caption { position:static!important; margin-top:10px!important; padding:0!important; background:transparent!important; border:0!important; font-size:11px!important; line-height:14px!important; }
.programmer-system { display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:var(--v2-gap)!important; border:0!important; align-items:start!important; }
.programmer-system__item { min-height:0!important; padding:16px 0 0!important; border:0!important; border-top:1px solid var(--v2-line)!important; }
.programmer-system__item h2 { margin:20px 0 10px!important; font-size:24px!important; line-height:28px!important; letter-spacing:-.03em!important; }
.programmer-system__item p { max-width:32ch!important; margin:0 0 24px!important; font-size:16px!important; line-height:22px!important; }
.programmer-system__footer { margin:0!important; padding-top:12px!important; border-top:1px solid var(--v2-line)!important; font-size:11px!important; line-height:14px!important; }
.programmer-protocol { display:grid!important; grid-template-columns:repeat(12,minmax(0,1fr))!important; gap:var(--v2-gap)!important; }
.programmer-protocol__intro { grid-column:1 / span 4!important; padding:0!important; border:0!important; }
.programmer-protocol__intro p { font-size:16px!important; line-height:24px!important; }
.programmer-protocol__list { grid-column:5 / -1!important; }
.programmer-protocol__step { grid-template-columns:44px minmax(0,1fr) 130px!important; gap:16px!important; padding:16px 0!important; border-top:1px solid var(--v2-line)!important; border-bottom:0!important; }
.programmer-protocol__step h3 { margin:0 0 8px!important; font-size:20px!important; line-height:26px!important; }
.programmer-protocol__step p { max-width:56ch!important; font-size:16px!important; line-height:22px!important; }
.programmer-tao__visual { min-height:0!important; }
.programmer-tao__content { min-height:0!important; }
.programmer-board { margin:0!important; }
.programmer-board__frame { border:0!important; }
.programmer-tao__characters { margin-top:24px!important; display:grid!important; grid-template-columns:repeat(12,1fr)!important; gap:8px!important; }
.programmer-tao__characters span { min-height:32px!important; display:grid!important; place-items:center!important; border:1px solid var(--v2-line)!important; font-size:16px!important; }
.programmer-credits { display:grid!important; grid-template-columns:repeat(12,minmax(0,1fr))!important; gap:var(--v2-gap)!important; }
.programmer-credits__intro { grid-column:1 / span 4!important; padding:0!important; border:0!important; }
.programmer-credits__list { grid-column:5 / -1!important; }
.programmer-credits__row { padding:14px 0!important; border-top:1px solid var(--v2-line)!important; }

@media (max-width:960px) {
  :root { --v2-gutter:20px; --v2-gap:16px; --v2-section:48px; }
  .v2-context { padding-top:24px; }
  .v2-hero__grid,.v2-grid,.v2-media-text,.v2-reading,.v2-gallery-layout,.v2-split-reading,.v2-related,.v2-video-grid { display:block; }
  .v2-hero__grid { padding-top:32px; }
  .v2-hero h1 { font-size:36px; line-height:40px; margin-bottom:24px; }
  .v2-hero__lead,.v2-reading__aside,.v2-media-text__text,.v2-gallery-aside { margin-top:24px; }
  .v2-nav { overflow-x:auto; }
  .v2-sectionbar { margin-top:48px; }
  .v2-related-card,.v2-quote { margin-bottom:24px; }
  .v2-testimony-grid { grid-template-columns:1fr; }
  .v2-video-grid .v2-video { margin-bottom:24px; }
  .programmer-header__grid,.programmer-concept,.programmer-material,.programmer-spatial,.programmer-protocol,.programmer-tao,.programmer-credits { display:block!important; }
  .programmer-header__grid > h1 { margin-bottom:24px!important; }
  .programmer-system { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  .programmer-protocol__list,.programmer-credits__list { margin-top:32px; }
}


/* V3 — restore the authored Programmer performance diagram. */
.programmer-diagram { display:block; width:100%; height:auto; color:#fff; }
.diagram-background { fill:#111; }
.diagram-grid line { stroke:rgba(255,255,255,.08); stroke-width:1; }
.diagram-orbit { fill:none; stroke:rgba(255,255,255,.5); stroke-width:2; stroke-dasharray:7 10; }
.diagram-inner-orbit { fill:none; stroke:rgba(151,199,101,.65); stroke-width:2; }
.diagram-board { fill:#242424; stroke:rgba(255,255,255,.7); stroke-width:2; }
.diagram-board-number,
.diagram-characters,
.diagram-label,
.diagram-axis-label { fill:rgba(255,255,255,.74); font-family:var(--ay-font-mono,'PT Mono', monospace); font-size:16px; }
.diagram-characters { font-size:19px; }
.diagram-trigram { fill:#fff; font-family:sans-serif; font-size:49px; }
.diagram-performer circle,
.diagram-performer path { fill:#97c765; stroke:#fff; stroke-width:3; }
.diagram-performer line { stroke:#fff; stroke-width:5; stroke-linecap:round; }
.diagram-screen rect { fill:#111; stroke:#97c765; stroke-width:3; }
.diagram-screen line { stroke:#97c765; stroke-width:6; stroke-linecap:round; }
.diagram-axis { stroke:rgba(151,199,101,.85); stroke-width:2; stroke-dasharray:10 10; }
.diagram-axis-label { fill:#97c765; }

/* V3 — quiet end-of-page topic hashtags requested in review. */
.v3-tags {
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  margin:48px 0 0;
  padding:14px 0 0;
  border-top:1px solid var(--v2-line);
  font-family:var(--ay-font-mono,'PT Mono', monospace);
  font-size:10px;
  line-height:14px;
  letter-spacing:.025em;
  text-transform:uppercase;
}
.v3-tags span { white-space:nowrap; }