/* ComfyUI for Fashion · one shared stylesheet for every page.
   Calm reading layout: headings, real images, short text. No cards or boxes. */

:root {
  --ink: #252b30;
  --muted: #61686e;
  --paper: #faf9f6;
  --line: #dedbd5;
  --accent: #31556a;
  --gold: #ffbd59;      /* matches the numbered markers on the screenshots */
  --measure: 68ch;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.7 Nunito, Arial, sans-serif; }
a { color: var(--accent); text-underline-offset: .22em; overflow-wrap: anywhere; }
img { max-width: 100%; }

/* ---------- Header and footer ---------- */
.site-header { border-bottom: 1px solid var(--line); background: var(--paper); }
.site-header nav { max-width: 1180px; margin: auto; padding: 1rem 2rem; display: flex; align-items: center; gap: 1.6rem; }
.site-header a { color: var(--ink); text-decoration: none; }
.site-header .brand { margin-right: auto; }
.site-header a:hover { color: var(--accent); }
footer { padding: 2rem; border-top: 1px solid var(--line); color: var(--muted); text-align: center; font-size: .9rem; }

/* ---------- Page and type ---------- */
main { max-width: 1180px; margin: auto; padding: 2.5rem 2rem 4rem; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.3rem); line-height: 1.1; margin: .5rem 0 1.1rem; }
h2 { font-size: clamp(1.6rem, 3vw, 2.05rem); line-height: 1.25; margin: 0 0 1.1rem; }
h3 { font-size: 1.15rem; line-height: 1.4; margin: 1.6rem 0 .45rem; }
p { margin: 0 0 1rem; }
ul, ol { padding-left: 1.2rem; }
.eyebrow { font-size: .8rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin: 0 0 .5rem; }
.lead { font-size: 1.2rem; line-height: 1.6; max-width: 46rem; }
.copy { max-width: var(--measure); }
.muted { color: var(--muted); }
code { font-size: .9em; overflow-wrap: anywhere; }

/* Sections: one thin rule and generous space between ideas */
.section { margin-top: 4.2rem; padding-top: 2.6rem; border-top: 1px solid var(--line); scroll-margin-top: 1rem; }
.section > p, .section > ul, .section > ol:not(.steps):not(.legend) { max-width: var(--measure); }
.section-intro { max-width: var(--measure); margin-bottom: 1.8rem; }

/* ---------- Lesson hero: text left, result right ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hero figure { margin: 0; }
.hero figure img { max-height: 620px; width: auto; max-width: 100%; margin-left: auto; }
.hero .lead { margin-bottom: 1.6rem; }

/* "At a glance" facts — plain definition list, hairlines only */
.glance { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; margin: 0; max-width: 40rem; }
.glance div { padding: .8rem 0; border-top: 1px solid var(--line); }
.glance dt { font-size: .74rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.glance dd { margin: .15rem 0 0; font-size: .98rem; line-height: 1.5; }

/* ---------- Figures ---------- */
figure { margin: 1.6rem 0; }
figure img { height: auto; display: block; border-radius: 4px; }
figure > a > img, figure > img { width: 100%; }
figure a[data-zoom] { display: block; cursor: zoom-in; position: relative; }
figure a[data-zoom]::after { content: "Enlarge"; position: absolute; right: .55rem; bottom: .55rem; padding: .1rem .5rem; border-radius: 3px; background: #252b30cc; color: #fff; font-size: .75rem; font-weight: 700; opacity: 0; transition: opacity .15s; }
figure a[data-zoom]:hover::after, figure a[data-zoom]:focus-visible::after { opacity: 1; }
figcaption { color: var(--muted); font-size: .86rem; line-height: 1.55; margin: .6rem 0 0; }
.hero figcaption { text-align: right; }

/* Image + text side by side (narrow screenshots) */
.media-text { display: grid; grid-template-columns: minmax(260px, .85fr) minmax(0, 1.15fr); gap: clamp(1.8rem, 4vw, 3.4rem); align-items: start; }
.media-text figure { margin: 0; }
.media-text .copy > :first-child { margin-top: 0; }

/* ---------- Recipe: what goes in → what comes out ---------- */
.recipe { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.1rem; margin: 1.4rem 0 .4rem; }
.recipe figure { margin: 0; width: 150px; }
.recipe figure img { width: 100%; height: 190px; object-fit: cover; object-position: top; }
.recipe figure.square img { height: 150px; object-position: center; }
.recipe figure.result { width: 210px; }
.recipe figure.result img { height: 280px; }
.recipe figcaption { margin-top: .4rem; font-size: .82rem; color: var(--ink); font-weight: 700; line-height: 1.35; }
.recipe figcaption span { display: block; font-weight: 400; color: var(--muted); }
.recipe .op { font-size: 1.7rem; font-weight: 300; color: var(--muted); line-height: 1; padding-bottom: 2rem; }
.recipe .brief { width: 200px; margin: 0; padding: .1rem 0 .1rem 1rem; border-left: 3px solid var(--gold); font-size: .92rem; line-height: 1.5; font-style: italic; }
.recipe .brief b { display: block; font-style: normal; font-size: .82rem; margin-bottom: .3rem; }

/* ---------- Numbered steps with a thin connecting line ---------- */
.steps { list-style: none; padding: 0; margin: 0; counter-reset: step; }
.steps > li { counter-increment: step; position: relative; padding: 0 0 1.9rem 3.6rem; }
.steps > li::before { content: counter(step); position: absolute; left: 0; top: .05rem; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--ink); color: var(--paper); font-weight: 800; display: grid; place-items: center; font-size: 1rem; }
.steps > li:not(:last-child)::after { content: ""; position: absolute; left: 1.1rem; top: 2.6rem; bottom: .4rem; width: 1px; background: var(--line); }
.steps > li > h3 { margin: .15rem 0 .4rem; font-size: 1.22rem; }
.steps > li > p, .steps > li > ul { max-width: var(--measure); }
.steps > li > figure { max-width: 860px; }
.steps > li > .media-text { margin-top: 1rem; }

/* Numbered key that matches the gold markers on a screenshot */
.legend { list-style: none; padding: 0; margin: 0; }
.legend > li { position: relative; padding-left: 2.6rem; margin: 0 0 1.1rem; }
.legend > li::before { content: attr(data-n); position: absolute; left: 0; top: .1rem; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--gold); color: var(--ink); font-weight: 800; font-size: .9rem; display: grid; place-items: center; }
.legend b { display: block; }
.legend.compact > li { margin-bottom: .6rem; }
.legend.columns { columns: 2 18rem; column-gap: 2.5rem; }
.legend.columns > li { break-inside: avoid; }

/* Pipeline / on-this-page strip */
.pipeline { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 0; padding: 0; margin: 1.6rem 0 0; font-size: .95rem; }
.pipeline li { display: flex; align-items: center; }
.pipeline li + li::before { content: "→"; color: var(--muted); margin: 0 .7rem; }
.pipeline a, .pipeline span { color: var(--ink); text-decoration: none; font-weight: 700; }
.pipeline a:hover { color: var(--accent); text-decoration: underline; }
.pipeline .n { display: inline-grid; place-items: center; width: 1.45rem; height: 1.45rem; margin-right: .4rem; border-radius: 50%; background: var(--ink); color: var(--paper); font-size: .78rem; }

/* Look-for checklist */
.checklist { list-style: none; padding: 0; margin: 0; max-width: var(--measure); }
.checklist li { position: relative; padding-left: 2rem; margin-bottom: .6rem; }
.checklist li::before { content: ""; position: absolute; left: .25rem; top: .45rem; width: .45rem; height: .8rem; border: solid var(--accent); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }

/* Keep / change experiment */
.keep-change { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .5rem 1.4rem; margin: 0; max-width: var(--measure); }
.keep-change dt { font-weight: 800; font-size: .8rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); padding-top: .2rem; }
.keep-change dd { margin: 0; }

/* Two-column section layout: experiment + checklist side by side */
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem clamp(2rem, 5vw, 4rem); }
.two-col h2 { font-size: 1.5rem; }

/* ---------- Galleries ---------- */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.6rem 1.4rem; align-items: start; }
.gallery figure { margin: 0; }
.gallery img { width: 100%; height: auto; }
.gallery.wide { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/* Simple horizontal bar chart (step timings) */
.bars { list-style: none; padding: 0; margin: 1.2rem 0; max-width: 40rem; }
.bars li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) 4.5rem; align-items: center; gap: .8rem; padding: .25rem 0; font-size: .92rem; }
.bars i { display: block; height: .7rem; width: var(--w); background: var(--ink); border-radius: 0 3px 3px 0; }
.bars li.current i { background: var(--gold); }
.bars li.current b { color: var(--ink); }
.bars span:last-child { text-align: right; color: var(--muted); }

/* A short aside marked with a gold rule (people, rights, cautions) — not a box */
.note { max-width: var(--measure); margin: 2rem 0 0; padding: .1rem 0 .1rem 1.1rem; border-left: 3px solid var(--gold); }
.note b { display: block; margin-bottom: .2rem; }
.steps .note { margin-top: 1rem; }

/* "Explained earlier" line for readers who arrive out of order */
.recap { max-width: var(--measure); margin: -.3rem 0 1.8rem; font-size: .92rem; color: var(--muted); }
.recap b { color: var(--ink); margin-right: .3rem; }

/* "Not quite right?" fixes, in the order to try them */
.fixes { margin: .4rem 0 0; padding-left: 1.3rem; max-width: var(--measure); }
.fixes li { margin-bottom: .55rem; padding-left: .2rem; }
.fixes li::marker { font-weight: 800; color: var(--muted); }
.two-col h3 { margin-top: 1.8rem; }

/* Example brief / quoted prompt */
blockquote { margin: 1rem 0 1.2rem; padding: .1rem 0 .1rem 1.1rem; border-left: 3px solid var(--gold); font-style: italic; max-width: var(--measure); }
blockquote p:last-child { margin-bottom: 0; }
.variant-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; margin: 1rem 0 1.5rem; }
.variant-gallery figure { margin: 0; }
.comparison-primary img { border-radius: 0; }

/* ---------- Simple comparison lists (homepage) ---------- */
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem clamp(2rem, 5vw, 4rem); max-width: 60rem; }
.compare h3 { margin-top: 0; }
.compare ul { margin: 0; padding-left: 1.1rem; }
.compare li { margin-bottom: .45rem; }

/* Reasons: term on the left, explanation on the right */
.reasons { margin: 0; max-width: 62rem; }
.reasons div { display: grid; grid-template-columns: minmax(12rem, 18rem) minmax(0, 1fr); gap: .3rem 2.5rem; padding: 1.1rem 0; border-top: 1px solid var(--line); }
.reasons div:last-child { border-bottom: 1px solid var(--line); }
.reasons dt { font-weight: 800; font-size: 1.05rem; line-height: 1.45; }
.reasons dd { margin: 0; }

/* Glossary */
.glossary { margin: 0; columns: 2 22rem; column-gap: 3rem; }
.glossary div { break-inside: avoid; padding: .7rem 0; border-top: 1px solid var(--line); scroll-margin-top: 1.5rem; }
.glossary div:target { background: #ffbd5933; }
.glossary dt { font-weight: 800; }
.glossary dd { margin: .1rem 0 0; color: var(--ink); }

/* Cable colour key */
.colour-key { list-style: none; padding: 0; margin: 0; columns: 2 17rem; column-gap: 3rem; }
.colour-key li { break-inside: avoid; display: grid; grid-template-columns: 2.4rem 7.5rem minmax(0, 1fr); align-items: center; gap: .6rem; padding: .45rem 0; border-top: 1px solid var(--line); font-size: .95rem; }
.colour-key i { display: block; height: .38rem; border-radius: 3px; background: var(--color); }
.colour-key b { font-size: .82rem; letter-spacing: .04em; }

/* Tables (only for genuinely tabular data) */
.table-scroll { overflow-x: auto; margin: 1.2rem 0; }
table { width: 100%; border-collapse: collapse; text-align: left; font-size: .94rem; }
th, td { border-bottom: 1px solid var(--line); padding: .7rem .65rem .7rem 0; vertical-align: top; }
th { font-weight: 800; font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }

/* ---------- Homepage ---------- */
.home-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.home-hero .actions { display: flex; flex-wrap: wrap; gap: .8rem 1.6rem; align-items: center; margin-top: 1.6rem; }
.button { display: inline-block; padding: .7rem 1.25rem; border-radius: 4px; background: var(--ink); color: var(--paper); text-decoration: none; font-weight: 800; }
.button:hover { background: var(--accent); }
.mosaic { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.mosaic img { width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; border-radius: 3px; }
.mosaic img:nth-child(2) { transform: translateY(1.4rem); }
.mosaic img:nth-child(5) { transform: translateY(1.4rem); }

.chapter { margin-top: 2.8rem; }
.chapter-head { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 0 1rem; align-items: baseline; margin-bottom: 1.2rem; }
.chapter-head .n { font-size: 2rem; font-weight: 800; color: var(--gold); line-height: 1; -webkit-text-stroke: 1px #c98a1f; }
.chapter-head h3 { margin: 0; font-size: 1.35rem; }
.chapter-head p { grid-column: 2; margin: .2rem 0 0; color: var(--muted); max-width: 52rem; }
.lesson-directory { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 1.5rem; }
.lesson-link { display: block; color: var(--ink); text-decoration: none; }
.lesson-link img { width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; object-position: top; display: block; margin-bottom: .7rem; border-radius: 3px; background: #eeebe5; }
.lesson-link .eyebrow { font-size: .72rem; margin-bottom: .15rem; }
.lesson-link h4 { margin: 0 0 .3rem; font-size: 1.04rem; line-height: 1.35; }
.lesson-link p { font-size: .92rem; line-height: 1.55; margin: 0; color: var(--muted); }
.lesson-link:hover h4 { color: var(--accent); text-decoration: underline; text-underline-offset: .2em; }
.tag { display: inline-block; margin-left: .35rem; font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }

/* ---------- Files, details, pager ---------- */
.downloads { list-style: none; padding: 0; margin: 0 0 1rem; }
.downloads li { padding: .55rem 0; border-top: 1px solid var(--line); max-width: 44rem; }
.downloads li:last-child { border-bottom: 1px solid var(--line); }
.downloads a { font-weight: 700; }
.downloads small { display: block; color: var(--muted); font-size: .85rem; }
details { margin: 1rem 0; max-width: 52rem; }
summary { font-weight: 700; cursor: pointer; color: var(--accent); }
details[open] summary { margin-bottom: .6rem; }
details ul { margin: .4rem 0; }
.author-notes { margin-top: 2.4rem; font-size: .9rem; color: var(--muted); }
.author-notes summary { color: var(--muted); font-weight: 600; }

.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 4rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.pager a { text-decoration: none; color: var(--ink); font-weight: 800; line-height: 1.4; }
.pager a span { display: block; font-size: .75rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 800; margin-bottom: .2rem; }
.pager a:hover { color: var(--accent); }
.pager .next { text-align: right; grid-column: 2; }

a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }

/* ---------- Image viewer ---------- */
.image-viewer { width: min(96vw, 1600px); height: 93vh; max-width: none; max-height: none; padding: 0; border: 1px solid #596168; border-radius: 8px; background: #171b1f; color: #fff; }
.image-viewer[open] { display: flex; flex-direction: column; }
.image-viewer::backdrop { background: #000b; }
.viewer-toolbar { display: flex; flex: 0 0 auto; align-items: center; flex-wrap: wrap; gap: .5rem; padding: .65rem 1rem; border-bottom: 1px solid #596168; }
.viewer-toolbar button, .viewer-toolbar a { padding: .4rem .65rem; border: 1px solid #778087; background: transparent; color: white; border-radius: 4px; font: inherit; font-size: .9rem; cursor: pointer; text-decoration: none; }
.viewer-toolbar .viewer-title { flex: 1; font-size: .9rem; margin: 0; min-width: 140px; }
.viewer-toolbar output { font-size: .85rem; min-width: 3.5rem; text-align: center; }
.viewer-stage { flex: 1; min-height: 0; overflow: auto; padding: 1rem; overscroll-behavior: contain; }
.viewer-stage img { display: block; max-width: none; height: auto; margin: 0 auto; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .lesson-directory { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .hero, .home-hero { grid-template-columns: 1fr; }
  .hero figure img { margin: 0 auto; max-height: 460px; }
  .hero figcaption { text-align: center; }
  .two-col, .compare { grid-template-columns: 1fr; }
  .lesson-directory { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reasons div { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  main { padding: 1.6rem 1rem 3rem; }
  .site-header nav { padding: .9rem 1rem; gap: 1rem; font-size: .95rem; }
  .media-text { grid-template-columns: 1fr; gap: 1.4rem; }
  .media-text figure { max-width: 520px; }
  .section { margin-top: 3rem; padding-top: 2rem; }
  .glance { grid-template-columns: 1fr; }
  .steps > li { padding-left: 3rem; }
  .steps > li::before { width: 2rem; height: 2rem; }
  .steps > li:not(:last-child)::after { left: 1rem; }
  .variant-gallery { grid-template-columns: 1fr; }
  .site-header .hide-sm { display: none; }
  .recipe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem 1rem; }
  .recipe .op { display: none; }
  .recipe figure, .recipe figure.result { width: auto; }
  .recipe figure img, .recipe figure.result img { height: 210px; }
  .recipe figure.square img { height: auto; aspect-ratio: 1; }
  .recipe .brief { width: auto; grid-column: 1 / -1; }
  .recipe figure.result { grid-column: 1 / -1; max-width: 300px; }
  .recipe figure.result img { height: 380px; }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem .8rem; }
  .gallery.wide { grid-template-columns: 1fr; }
  .mosaic img:nth-child(n) { transform: none; }
  .colour-key li { grid-template-columns: 2rem 6.5rem minmax(0, 1fr); }
  .viewer-toolbar .viewer-title { flex-basis: 100%; }
}
@media (max-width: 520px) {
  .lesson-directory { grid-template-columns: 1fr; }
  .pager { grid-template-columns: 1fr; }
  .pager .next { grid-column: 1; text-align: left; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print { .site-header, footer, .image-viewer, .pager { display: none; } main { padding: 0; } figure { break-inside: avoid; } figure a[data-zoom]::after { display: none; } }

/* ---------- Feedback round 1 additions ---------- */
/* Single learning-outcome block under the page introduction */
.glance.single { grid-template-columns: minmax(0, 1fr); }
.glance.single div { border-bottom: 1px solid var(--line); }
/* Glossary as one table; rows keep the old term anchors */
.glossary-table tr { scroll-margin-top: 1.5rem; }
.glossary-table tr:target { background: #ffbd5933; }
.glossary-table th[scope="row"] { text-transform: none; letter-spacing: 0; font-size: .94rem; color: var(--ink); width: 14rem; padding-right: 1.5rem; }
/* Model and control tables */
td code, th code { overflow-wrap: anywhere; }
.steps > li > .table-scroll { max-width: 60rem; }
.home-next { margin-top: 3rem; }
/* A term being defined where it first appears (replaces the glossary) */
dfn { font-style: normal; font-weight: 800; }

/* ---------- UX pass, 09/10/2026 ---------- */
/* Group names live in the caption, as inline numbered chips, instead of a list under the image */
.cap-legend { display: block; margin-top: .4rem; color: var(--ink); }
.cap-legend > span { display: inline-block; white-space: nowrap; margin: 0 1.1rem .3rem 0; }
.cap-legend b { display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; padding: 0 .3rem; margin-right: .4rem; border-radius: 999px; background: var(--gold); color: var(--ink); font-size: .74rem; font-weight: 800; }
/* Tall close-ups no longer dominate the page */
.media-text figure > a > img { width: auto; max-width: 100%; max-height: 560px; }
/* One divider under a section heading, not two */
.reasons div:first-child { border-top: 0; padding-top: .2rem; }
/* Connection key: rows keep their width instead of wrapping in narrow columns */
.colour-key { columns: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr)); column-gap: 3rem; max-width: 62rem; }
/* Home cards: one image each, same proportion */
.lesson-link img { aspect-ratio: 4 / 5; object-position: center top; }
/* Show where you are */
.site-header a[aria-current="page"] { font-weight: 800; box-shadow: 0 2px 0 var(--gold); }
@media (max-width: 520px) { .lesson-directory { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 1rem; } }