/* =====================================================================
   Tyler Locke — Learning Experience Design Portfolio
   styles.css  ·  v2 "Quiet Authority"
   ---------------------------------------------------------------------
   Visual system: warm paper, book-serif headings + system sans body,
   one restrained deep-teal accent, generous whitespace, hairline rules.
   Editorial and document-like — built to read as credible, not flashy.
   No external fonts, no libraries, no CDN. System stacks only.
   ===================================================================== */

:root {
  /* NOT A PALETTE. A MAPPING.

     Every value here comes from overdraft/landing/tokens.css, injected
     ahead of this file. These names survive because about 750 call sites
     below use them and renaming all of them is 750 chances to miss one.
     What matters is that nothing in this file decides a color any more.

     --accent, --accent-deep and --radius are deliberately absent: the
     system declares those exact names, so they cascade through. Aliasing
     a name to itself is a cycle and resolves to nothing. */

  /* Surfaces */
  --paper:      var(--ground);
  --card:       var(--ground-2);
  --card-2:     var(--ground-2);   /* two card fills collapse to one field */
  --line:       var(--hair);
  --line-soft:  var(--hair);

  /* Ink. TWO TIERS, NO FAINT — a token called faint is a token nobody
     computed, and that was true three separate times on this site. */
  --ink:        var(--ink-strong);
  --body:       var(--ink-strong);
  --muted:      var(--ink-mute);
  --faint:      var(--ink-mute);   /* was var(--ink-mute): 2.74 on its own ground */

  /* The accent washes. The system has one accent and no wash tier, so a
     tinted fill becomes the second ground and a tinted border a hairline. */
  --accent-tint: var(--ground-2);
  --accent-line: var(--hair);
  --accent-mid:  var(--ink-mute);  /* was var(--accent): 3.74 on its own ground */

  --radius-sm: var(--radius);
  --shadow:    none;               /* hairlines, not shadows */
  --shadow-sm: none;

  /* Density is where the library earns its difference from /work, so the
     measure stays wide rather than dropping to the system's 1280. */
  --maxw: 1580px;

  --serif: var(--font-display);
  --sans:  var(--font-sans);
  --mono:  var(--font-mono);
}

/* ---- Base ----------------------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-family:var(--serif); color: var(--ink); font-weight: 600; line-height: 1.22; margin: 0 0 .5rem; letter-spacing: .002em; }
h1 { font-size: clamp(2rem, 4vw, 2.7rem); }
h2 { font-size: clamp(1.45rem, 2.6vw, 1.85rem); }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.02rem; font-family: var(--sans); font-weight: 700; color: var(--ink); }
p { margin: 0 0 1rem; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 2px; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

.eyebrow {
  display: block; font-family: var(--sans);
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); font-weight: 700; margin-bottom: 14px;
}
.lead { font-size: 1.16rem; line-height: 1.6; color: var(--body); max-width: 62ch; }
.muted { color: var(--muted); }
.section { padding: 8px 0 72px; }
.divider { height: 1px; background: var(--line-soft); border: 0; margin: 0; }

/* ---- Masthead ------------------------------------------------------- */
.masthead {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.masthead-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 18px 28px 0;
}
/* center, not baseline: the business card is taller than the name block, and
   baseline alignment left ~62px of dead space under the role line. */
.identity { display: flex; align-items: center; justify-content: space-between; gap: 20px 24px; flex-wrap: wrap; }
.identity .name { font-family:var(--font-sans); font-size: 1.45rem; color: var(--ink); font-weight: 600; }
.identity .role { font-size: .92rem; color: var(--muted); }
.identity .contact-line { font-size: .88rem; color: var(--muted); }
.identity .contact-line a { color: var(--accent); }

/* ---- Quiet editorial nav ------------------------------------------- */
.nav {
  display: flex; gap: 26px; flex-wrap: wrap;
  margin-top: 18px;
}
.nav button {
  appearance: none; background: none; border: 0; cursor: pointer;
  font-family: var(--sans); font-size: .92rem; font-weight: 600;
  color: var(--muted); padding: 12px 0 14px; position: relative;
  white-space: nowrap; transition: color .15s;
}
.nav button:hover { color: var(--ink); }
.nav button.active { color: var(--ink); }
.nav button.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--accent); border-radius:var(--radius);
}

/* ---- Panels --------------------------------------------------------- */
.panel { display: none; }
.panel.active { display: block; animation: rise .28s ease; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.section-head { margin-bottom: 34px; }
.section-head h1 { margin-bottom: 10px; }

/* ---- Buttons / links ------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: .9rem; font-weight: 600;
  padding: 10px 18px; border-radius:var(--radius);
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  cursor: pointer; transition: border-color .15s, background .15s, color .15s;
}
.btn:hover { text-decoration: none; border-color: var(--accent-line); background: var(--accent-tint); color: var(--accent-deep); }
.btn-primary {
  background: var(--accent); border-color: var(--accent); color:var(--on-accent);
}
.btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); color:var(--on-accent); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.textlink {
  font-weight: 600; color: var(--accent); display: inline-flex; align-items: center; gap: 6px;
}
/* .textlink was written for <a> and never reset the UA button chrome, so
   every one applied to a <button> rendered with a 2px outset border and a
   grey fill — "Tell me what you need", "Clear it", the tab jump links.
   Measured, not guessed: computed border was `2px outset var(--hair)`. */
button.textlink {
  appearance: none; -webkit-appearance: none;
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; font-weight: 600; cursor: pointer; text-align: left;
  color: var(--accent);
}
button.textlink:hover { color: var(--accent-deep); text-decoration: underline; }
button.textlink:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius:var(--radius); }

.textlink .arr { transition: transform .15s; }
.textlink:hover { text-decoration: none; color: var(--accent-deep); }
.textlink:hover .arr { transform: translateX(3px); }

/* ---- Home / hero ---------------------------------------------------- */
.hero { display: grid; grid-template-columns: 1.55fr 1fr; gap: 56px; align-items: start; padding-top: 16px; }
.hero h1 { margin-bottom: 6px; }
.hero .role-line { font-size: 1.05rem; color: var(--muted); margin-bottom: 22px; }
.statement {
  font-family:var(--font-sans); font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  line-height: 1.45; color: var(--ink); font-style: italic;
  border-left: 2px solid var(--accent); padding-left: 20px; margin: 0 0 22px;
}
.hero p { color: var(--body); }
.hero .btn-row { margin-top: 24px; }

.aside-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius:var(--radius); padding: 26px 28px; box-shadow:none;
}
.aside-card h3 { font-family: var(--sans); font-size: .78rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 16px; }
.focus-list { list-style: none; margin: 0; padding: 0; }
.focus-list li { padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: .95rem; color: var(--ink); }
.focus-list li:last-child { border-bottom: 0; }
.focus-list li span { display: block; font-size: .82rem; color: var(--muted); font-weight: 400; }

/* approach row on home */
.approach { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.approach .item { }
.approach .item .k { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 8px; }
.approach .item h3 { margin-bottom: 6px; }
.approach .item p { font-size: .94rem; color: var(--body); margin: 0; }

/* ---- Case-study cards (Showcase) ----------------------------------- */
.cases { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.case {
  background: var(--card); border: 1px solid var(--line);
  border-radius:var(--radius); padding: 30px 30px 26px;
  box-shadow:none; display: flex; flex-direction: column;
  transition: border-color .15s, box-shadow .15s;
}
.case:hover { border-color: var(--accent-line); box-shadow:none; }
.case .cat {
  font-size: .7rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--accent); font-weight: 700; margin-bottom: 10px;
}
.case h3 { font-size: 1.32rem; margin-bottom: 10px; }
.case .summary { color: var(--body); font-size: .96rem; margin-bottom: 18px; }
.case dl { margin: 0 0 20px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.case dl > div { display: grid; grid-template-columns: 130px 1fr; gap: 6px 16px; padding: 7px 0; }
.case dl dt { font-family: var(--sans); font-size: .74rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; padding-top: 2px; }
.case dl dd { margin: 0; font-size: .92rem; color: var(--ink); }
.case .case-foot { margin-top: auto; padding-top: 6px; display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.case .filetag {
  font-family: var(--mono); font-size: .72rem; color: var(--muted);
  background: var(--card-2); border: 1px solid var(--line); border-radius:var(--radius); padding: 2px 8px;
}

/* ---- Templates: organized library ---------------------------------- */
.lib { border: 1px solid var(--line); border-radius:var(--radius); overflow: hidden; background: var(--card); box-shadow:none; }
.lib-row {
  display: grid; grid-template-columns: 1.6fr 2fr .9fr auto; gap: 20px;
  align-items: center; padding: 20px 26px; border-bottom: 1px solid var(--line-soft);
}
.lib-row:last-child { border-bottom: 0; }
.lib-row:hover { background: var(--card-2); }
.lib-row.head { background: var(--card-2); }
.lib-row.head span { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.lib-row .t-name { font-weight: 700; color: var(--ink); }
.lib-row .t-name small { display: block; font-weight: 400; color: var(--muted); font-size: .82rem; font-family: var(--mono); margin-top: 3px; }
.lib-row .t-use { font-size: .92rem; color: var(--body); }
.lib-row .t-fmt { font-size: .82rem; color: var(--muted); font-family: var(--mono); }
.lib-row .t-act { display: flex; gap: 14px; justify-content: flex-end; align-items: center; }

/* ---- Callout / note ------------------------------------------------- */
.note {
  border-left: 3px solid var(--accent); background: var(--accent-tint);
  border-radius:var(--radius);
  padding: 18px 22px; margin: 22px 0; color: var(--ink);
}
.note strong { color: var(--accent-deep); }

/* ---- AI Lab --------------------------------------------------------- */
.workflow { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 40px; }
.workflow .w {
  display: grid; grid-template-columns: 110px 1fr; gap: 16px;
  padding: 16px 0; border-bottom: 1px solid var(--line-soft);
}
.workflow .w .wk { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); font-weight: 700; padding-top: 3px; }
.workflow .w h4 { margin-bottom: 3px; }
.workflow .w p { font-size: .9rem; color: var(--body); margin: 0; }

.prompts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.prompt-card { background: var(--card); border: 1px solid var(--line); border-radius:var(--radius); padding: 22px 24px; box-shadow:none; }
.prompt-card h4 { margin-bottom: 10px; }
.prompt-card .stub {
  font-family: var(--mono); font-size: .82rem; line-height: 1.55; color: var(--body);
  background: var(--card-2); border: 1px solid var(--line); border-radius:var(--radius);
  padding: 13px 15px; white-space: pre-wrap; margin: 0 0 12px;
}
.copy-btn { font-size: .82rem; padding: 7px 14px; }
.copy-btn.copied { background: var(--accent); border-color: var(--accent); color:var(--on-accent); }

/* ---- How to Customize ---------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 40px; }
.step { display: grid; grid-template-columns: 34px 1fr; gap: 16px; }
.step .n {
  width: 30px; height: 30px; border-radius:var(--radius); display: grid; place-items: center;
  border: 1px solid var(--accent-line); background: var(--accent-tint);
  color: var(--accent-deep); font-weight: 700; font-size: .85rem; font-family: var(--sans);
}
.step h4 { margin-bottom: 4px; }
.step p { font-size: .92rem; margin: 0; color: var(--body); }

details.faq { border-bottom: 1px solid var(--line-soft); }
details.faq summary {
  cursor: pointer; padding: 16px 0; font-weight: 600; color: var(--ink);
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; color: var(--accent); font-size: 1.2rem; line-height: 1; }
details.faq[open] summary::after { content: "\2013"; }
details.faq .inner { padding: 0 0 18px; color: var(--body); font-size: .94rem; max-width: 72ch; }

code.inline { font-family: var(--mono); font-size: .85em; background: var(--card-2);
  border: 1px solid var(--line); border-radius:var(--radius); padding: 1px 6px; color: var(--accent-deep); }

/* ---- Documents & Contact ------------------------------------------- */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius:var(--radius);
  padding: 24px 26px; box-shadow:none;
}
.card .label { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 10px; display: block; }
.card h3 { font-size: 1.12rem; margin-bottom: 8px; }
.card p { font-size: .93rem; color: var(--body); margin-bottom: 16px; }
.card .btn-row { margin-bottom: 0; }

.contact-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: start; }
.factline { display: grid; grid-template-columns: 90px 1fr; gap: 6px 18px; margin: 4px 0 18px; font-size: .95rem; }
.factline dt { color: var(--muted); font-weight: 600; }
.factline dd { margin: 0; color: var(--ink); }
.interests { list-style: none; margin: 0; padding: 0; }
.interests li { padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: .95rem; color: var(--ink); }
.interests li:last-child { border-bottom: 0; }

/* ---- Footer --------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--line); padding: 26px 0 40px; margin-top: 20px; }
.site-footer .container { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: .85rem; }

/* ---- Responsive ----------------------------------------------------- */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 36px; }
  .approach { grid-template-columns: 1fr; gap: 22px; }
  .cases { grid-template-columns: 1fr; }
  .workflow { grid-template-columns: 1fr; }
  .prompts { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .lib-row { grid-template-columns: 1fr; gap: 8px; }
  .lib-row.head { display: none; }
  .lib-row .t-act { justify-content: flex-start; }
  .lib-row .t-fmt::before { content: "Format: "; color: var(--faint); }
}
@media (max-width: 520px) {
  .container, .masthead-inner { padding-left: 20px; padding-right: 20px; }
  .case dl > div { grid-template-columns: 1fr; gap: 2px; }
  .case dl dt { padding-top: 8px; }
}

/* ---- Accessibility -------------------------------------------------- */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius:var(--radius); }
@media (prefers-reduced-motion: reduce) { *, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* ===== Case thumbnails ===== */
.case-thumb{
  display:block; width:100%; height:188px; object-fit:cover; object-position:top center;
  border-radius:var(--radius); border:1px solid var(--line-soft); margin-bottom:18px; background:var(--ground-2);
}
@media (max-width:720px){ .case-thumb{ height:160px; } }

/* ===== Impact line ===== */

/* ===== Screenshot gallery ===== */
.shot{ padding:0 !important; overflow:hidden; }
.shot a{ display:block; }
.shot-img{ display:block; width:100%; height:172px; object-fit:cover; object-position:top center; background:var(--ground-2); }
.shot .shot-cap{ padding:14px 16px 16px; }
.shot .shot-cap h3{ font-size:1.02rem; margin:0 0 4px; }
.shot .shot-cap a{ font-family:var(--sans); font-size:.84rem; }

/* ===== Currently building (Zareli) ===== */
.building{
  margin-top:30px; border:1px solid var(--accent-line); border-radius:var(--radius); overflow:hidden;
  background:linear-gradient(180deg,var(--ground-2) 0%,var(--ground-2) 60%);
}
.building .b-top{ display:flex; align-items:center; gap:12px; padding:20px 26px 0; flex-wrap:wrap; }
.building .b-badge{
  font-family:var(--sans); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--on-accent); background:var(--accent); padding:5px 11px; border-radius:var(--radius);
}
.building .b-status{ font-family:var(--sans); font-size:.8rem; color:var(--muted); }
.building h3{ font-size:1.5rem; margin:14px 26px 4px; }
.building .b-tag{ color:var(--muted); margin:0 26px 14px; font-size:.96rem; }
.building .b-body{ padding:0 26px 8px; color:var(--body); max-width:74ch; }
.building .b-feats{ list-style:none; margin:14px 26px 24px; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:10px 26px; }
.building .b-feats li{ position:relative; padding-left:18px; font-size:.92rem; color:var(--ink); }
.building .b-feats li::before{ content:"›"; position:absolute; left:2px; color:var(--accent); font-weight:700; }
@media (max-width:720px){ .building .b-feats{ grid-template-columns:1fr; } }

/* ===== About ===== */
.about{ display:grid; grid-template-columns:240px 1fr; gap:44px; align-items:start; }
.about-side{ position:sticky; top:24px; }
.avatar{
  width:128px; height:128px; border-radius:var(--radius); background:var(--accent); color:var(--on-accent);
  font-family:var(--serif); font-size:3rem; font-weight:700; display:grid; place-items:center;
  letter-spacing:1px; overflow:hidden;
}
.avatar img{ width:100%; height:100%; object-fit:cover; }
.stat-big{ margin-top:26px; }
.stat-big .num{ display:block; font-family:var(--serif); font-size:2.7rem; font-weight:700; color:var(--accent); line-height:1; }
.stat-big .lbl{ display:block; font-family:var(--sans); font-size:.82rem; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-top:7px; }
.tribute{ margin-top:26px; border-left:3px solid var(--accent-line); padding:6px 0 6px 16px; font-style:italic; color:var(--body); font-size:.96rem; }
.tribute .who{ display:block; font-style:normal; font-size:.82rem; color:var(--muted); margin-top:8px; }
.about-body p{ font-size:1.02rem; color:var(--body); line-height:1.6; margin-bottom:18px; max-width:68ch; }
.about-body p:first-child{ font-size:1.12rem; color:var(--ink); }
@media (max-width:760px){ .about{ grid-template-columns:1fr; gap:28px; } .about-side{ position:static; } }

/* ===== AI Toolkit — comparison ===== */
.cmp{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin-bottom:8px; background:var(--card); }
.cmp-row{ display:grid; grid-template-columns:240px 1fr; border-top:1px solid var(--line-soft); }
.cmp-row:first-child{ border-top:none; }
.cmp-row > div{ padding:14px 18px; }
.cmp-row > div:first-child{ font-weight:600; color:var(--ink); background:var(--accent-tint); border-right:1px solid var(--line-soft); }
.cmp-row > div:last-child{ color:var(--body); font-size:.95rem; line-height:1.5; }
.cmp-head > div{ font-family:var(--sans); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:600; background:var(--faint); }
.cmp-head > div:last-child{ color:var(--muted); }
.cmp-fair > div:first-child{ color:var(--accent-deep); }
.cmp-fair{ background:var(--accent-tint); }
.cmp-fair > div:last-child{ background:var(--accent-tint); }
@media (max-width:680px){
  .cmp-row{ grid-template-columns:1fr; }
  .cmp-row>div:first-child{ border-right:none; border-bottom:1px solid var(--line-soft); }
}

/* ===== Principle callout ===== */
.principle{ margin:26px 0 8px; background:var(--ink); border-radius:var(--radius); padding:24px 28px; }
.principle h3{ font-family:var(--serif); font-size:1.5rem; color:var(--on-accent); margin-bottom:8px; }
.principle p{ color:var(--on-accent); max-width:80ch; font-size:1rem; line-height:1.6; }

/* ===== Featured prompt ===== */
.feature-prompt{ border-color:var(--accent-line); box-shadow:none; }
.feature-prompt h4::after{ content:" ★"; color:var(--accent); font-size:.8em; }

.visually-hidden{ position:absolute!important; width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; }
@keyframes zpulse{ 0%{transform:scale(.9);opacity:.55} 70%{transform:scale(1.5);opacity:0} 100%{opacity:0} }
@keyframes zfade{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none; } }

/* =====================================================================
   MOBILE / TABLET nav — collapsing menu (desktop view is unchanged)
   ===================================================================== */
.nav-toggle{ display:none; }   /* hidden on laptop/desktop */

@media (max-width:900px){
  .masthead-inner{ padding-top:18px; }
  /* tidy the contact block on small screens */
  .identity > div:last-child{ text-align:left !important; }

  .nav-toggle{
    display:inline-flex; align-items:center; gap:11px; margin-top:16px;
    appearance:none; cursor:pointer; font-family:var(--sans); font-weight:600; font-size:.95rem;
    color:var(--ink); background:var(--card); border:1px solid var(--line);
    border-radius:var(--radius); padding:11px 16px;
  }
  .nav-toggle-icon{ position:relative; display:inline-block; width:18px; height:2px; background:currentColor; border-radius:var(--radius); transition:background .15s; }
  .nav-toggle-icon::before, .nav-toggle-icon::after{ content:""; position:absolute; left:0; width:18px; height:2px; background:currentColor; border-radius:var(--radius); transition:transform .2s ease, top .2s ease; }
  .nav-toggle-icon::before{ top:-6px; }
  .nav-toggle-icon::after{ top:6px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-icon{ background:transparent; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-icon::before{ top:0; transform:rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-icon::after{ top:0; transform:rotate(-45deg); }

  .nav{
    display:none; flex-direction:column; gap:0; overflow:visible;
    margin-top:12px; padding:6px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card);
  }
  .nav.open{ display:flex; }
  .nav button{
    width:100%; text-align:left; white-space:normal;
    padding:13px 14px; border-radius:var(--radius); font-size:1rem;
  }
  .nav button:hover{ color:var(--ink); background:var(--accent-tint); }
  .nav button.active{ color:var(--ink); background:var(--accent-tint); }
  .nav button.active::after{ display:none; }
}

/* ===== Templates accordion ===== */
.tmpl-list{ margin-top:6px; }
.tmpl{ border:1px solid var(--line); border-radius:var(--radius); margin-bottom:12px; background:var(--card); overflow:hidden; }
.tmpl[open]{ box-shadow:none; border-color:var(--accent-line); }
.tmpl summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 20px; }
.tmpl summary::-webkit-details-marker{ display:none; }
.tmpl summary:hover .tmpl-name{ color:var(--accent-deep); }
.tmpl-headwrap{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.tmpl-name{ font-family:var(--serif); font-size:1.12rem; color:var(--ink); font-weight:600; transition:color .15s; }
.tmpl-file{ font-family:var(--mono); font-size:.74rem; color:var(--muted); }
.tmpl-meta{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
.tmpl-fmt{ font-family:var(--sans); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-deep); background:var(--accent-tint); padding:4px 10px; border-radius:var(--radius); white-space:nowrap; }
.tmpl-chev{ width:9px; height:9px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg); transition:transform .2s ease; }
.tmpl[open] .tmpl-chev{ transform:rotate(-135deg); }
.tmpl-body{ padding:4px 20px 20px; border-top:1px solid var(--line-soft); }
.tmpl-use{ color:var(--body); margin:14px 0; }
.tmpl-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px; }
.btn-sm{ padding:8px 15px; font-size:.85rem; }
.tmpl-edit h4{ font-size:.95rem; margin-bottom:8px; color:var(--ink); }
.tmpl-steps{ margin:0; padding-left:20px; color:var(--body); font-size:.94rem; line-height:1.55; }
.tmpl-steps li{ margin-bottom:7px; }
.tmpl-note{ color:var(--body); font-size:.94rem; line-height:1.6; max-width:76ch; margin:0; }
@media (max-width:520px){
  .tmpl summary{ padding:14px 16px; }
  .tmpl-body{ padding:4px 16px 18px; }
  .tmpl-actions .btn-sm{ flex:1 1 auto; text-align:center; }
}

/* ===== Selected Work — master/detail ===== */
.work-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:8px; }
.work-card{ text-align:left; cursor:pointer; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; padding:0; font:inherit; color:inherit; transition:transform .15s, box-shadow .15s, border-color .15s; }
.work-card:hover{ transform:translateY(-3px); box-shadow:none; border-color:var(--accent-line); }
.work-card:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.work-card-thumb{ width:100%; height:172px; object-fit:cover; object-position:top center; background:var(--ground-2); border-bottom:1px solid var(--line-soft); }
.work-card-body{ padding:16px 18px 18px; display:flex; flex-direction:column; flex:1; }
.work-card-cat{ font-family:var(--sans); font-size:.68rem; letter-spacing:.07em; text-transform:uppercase; color:var(--accent-2); margin-bottom:6px; }
.work-card-title{ font-size:1.12rem; margin-bottom:8px; line-height:1.25; }
.work-card-blurb{ font-size:.9rem; color:var(--muted); line-height:1.5; margin-bottom:14px; flex:1;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.work-card-cta{ font-family:var(--sans); font-size:.85rem; font-weight:600; color:var(--accent); }
.work-maint{ margin-top:26px; font-size:.92rem; }
@media (max-width:980px){ .work-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .work-grid{ grid-template-columns:1fr; } }

/* detail */
.work-back{ appearance:none; cursor:pointer; background:none; border:0; font-family:var(--sans); font-weight:600; font-size:.9rem; color:var(--accent); padding:6px 0; margin-bottom:18px; }
.work-back:hover{ text-decoration:underline; }
.work-detail-head{ display:grid; grid-template-columns:minmax(0,440px) 1fr; gap:34px; align-items:start; margin-bottom:30px; }
.work-detail-thumb{ width:100%; border-radius:var(--radius); border:1px solid var(--line-soft); display:block; }
.work-detail-title{ font-size:2rem; margin:6px 0 12px; line-height:1.12; }
.work-detail-blurb{ color:var(--body); font-size:1.02rem; line-height:1.6; margin-bottom:18px; max-width:60ch; }
.work-detail-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:36px; }
.work-detail-case dl{ margin:0; }
.work-detail-case dl > div{ display:grid; grid-template-columns:130px 1fr; gap:14px; padding:11px 0; border-top:1px solid var(--line-soft); }
.work-detail-case dl > div:first-child{ border-top:0; }
.work-detail-case dt{ font-family:var(--sans); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); padding-top:2px; }
.work-detail-case dd{ margin:0; color:var(--body); font-size:.96rem; line-height:1.55; }
.work-detail-edit{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px; align-self:start; }
.work-detail-edit h4{ margin-bottom:12px; }
@media (max-width:820px){
  .work-detail-head{ grid-template-columns:1fr; gap:20px; }
  .work-detail-grid{ grid-template-columns:1fr; gap:24px; }
}
@media (max-width:520px){ .work-detail-case dl > div{ grid-template-columns:1fr; gap:3px; } }

/* ---- Business card (header right side) ---------------------------------- */
.biz-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius:var(--radius);
  padding: 10px 14px 8px;
  box-shadow:none;
  min-width: 224px;
  transition: box-shadow .18s, transform .18s;
}
.biz-card:hover {
  box-shadow:none;
  transform: translateY(-1px);
}
.biz-top {
  font-size: .78rem;
  color: var(--muted);
  text-align: center;
  white-space: nowrap;
}
.biz-top a { color: var(--accent); }
.biz-divider {
  height: 1px;
  background: var(--line-soft);
  margin: 7px 0 5px;
}
.biz-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 5px 0 4px;
  text-decoration: none;
  border-radius:var(--radius);
  transition: background .14s;
}
.biz-row:hover { background: var(--ground-2)); }
.biz-row-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-wrap: wrap;
}
.biz-sep {
  font-size: .72rem;
  color: var(--muted);
  opacity: .45;
  user-select: none;
}
.biz-email {
  font-size: .78rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  letter-spacing: .01em;
}
.biz-email:hover { text-decoration: underline; }
.biz-contact-label {
  font-size: .72rem;
  color: var(--muted);
  opacity: .65;
  user-select: none;
}
.biz-tag {

  font-size: .72rem;
  font-style: italic;
  color: var(--muted);
  letter-spacing: .01em;
}
.biz-url {
  font-size: .82rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .01em;
}
@media (max-width: 600px) {
  .biz-card { min-width: unset; width: 100%; }
  .biz-row { align-items: flex-start; }
  .biz-top { text-align: center; }
}


/* =====================================================================
   OVERVIEW — "currently shipping" feature band
   Puts the strongest asset on the landing tab instead of hiding it
   behind a nav click.
   ===================================================================== */
.home-feature{
  display:grid; grid-template-columns:1fr 1.05fr; gap:0; align-items:stretch;
  margin:48px 0 8px; border:1px solid var(--line, var(--line)); border-radius:var(--radius);
  overflow:hidden; background:var(--card-2);
  box-shadow:none;
}
.home-feature-body{ padding:32px 34px; display:flex; flex-direction:column; justify-content:center; }
.home-feature-k{
  display:inline-block; width:fit-content; font-family:var(--sans);
  font-size:.66rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); background:var(--accent-tint); border:1px solid var(--accent-line);
  border-radius:var(--radius); padding:5px 12px; margin-bottom:14px;
}
.home-feature-body h2{ margin:0 0 10px; font-size:1.42rem; line-height:1.26; }
.home-feature-body p{ margin:0 0 20px; color:var(--muted, var(--muted)); line-height:1.62; font-size:.98rem; }
.home-feature-body .btn{ width:fit-content; }
.home-feature-shot{ position:relative; overflow:hidden; background:var(--ink-strong); min-height:280px; }
.home-feature-shot img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:left top;
}
@media (max-width:820px){
  .home-feature{ grid-template-columns:1fr; }
  .home-feature-shot{ min-height:210px; order:-1; }
  .home-feature-body{ padding:26px 22px; }
  .home-feature-body h2{ font-size:1.22rem; }
}

/* =====================================================================
   SELECTED WORK — build & verification standard
   The engineering discipline behind the 21 files. Sits above the grid
   because for technical roles it matters more than any single tool.
   ===================================================================== */
.build-std{
  margin:0 0 46px; padding:28px 32px 26px;
  background:var(--card-2); border:1px solid var(--line, var(--line));
  border-left:3px solid var(--accent); border-radius:var(--radius);
}
.build-std-head h2{ margin:0 0 8px; font-size:1.24rem; }
.build-std-k{
  display:inline-block; font-family:var(--sans); font-size:.65rem; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
  margin-bottom:9px;
}
.build-std-head p{ margin:0 0 18px; color:var(--muted, var(--muted)); max-width:80ch; line-height:1.6; }
.build-std-list{ margin:0; padding:0; list-style:none; display:grid; gap:11px; }
.build-std-list li{
  position:relative; padding-left:26px; line-height:1.6;
  color:var(--muted, var(--muted)); font-size:.96rem; max-width:88ch;
}
.build-std-list li::before{
  content:"\2713"; position:absolute; left:0; top:0;
  color:var(--accent); font-weight:700; font-size:.95rem;
}
.build-std-list strong{ color:var(--ink, var(--ink)); }
.build-std-note{
  margin:20px 0 0; padding-top:16px; border-top:1px solid var(--line, var(--line));
  font-size:.94rem; color:var(--muted, var(--muted)); font-style:italic; max-width:80ch;
}
@media (max-width:640px){
  .build-std{ padding:22px 18px; }
  .build-std-head h2{ font-size:1.1rem; }
}

/* =====================================================================
   OVERVIEW — "What's here" site map
   Answers "where is everything?" before a visitor has to hunt the nav.
   ===================================================================== */
.site-map{ margin:52px 0 8px; }
.site-map h2{ margin:0 0 4px; font-size:1.3rem; }
.site-map-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(258px,1fr));
  gap:16px; margin-top:20px;
}
.map-card{
  appearance:none; cursor:pointer; text-align:left; font-family:inherit;
  background:var(--card-2); border:1px solid var(--line,var(--line)); border-radius:var(--radius);
  padding:22px 22px 18px; display:flex; flex-direction:column; gap:7px;
  transition:transform .16s, box-shadow .16s, border-color .16s;
}
.map-card:hover{
  transform:translateY(-2px); border-color:var(--accent-line);
  box-shadow:none;
}
.map-card:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.map-n{
  font-family:var(--sans); font-size:.7rem; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent); background:var(--accent-tint);
  border:1px solid var(--accent-line); border-radius:var(--radius); padding:3px 10px; width:fit-content;
}
.map-card h3{ margin:4px 0 0; font-size:1.08rem; }
.map-card p{ margin:0; font-size:.93rem; line-height:1.56; color:var(--muted,var(--muted)); flex:1; }
.map-go{
  font-family:var(--sans); font-size:.85rem; font-weight:700; color:var(--accent); margin-top:6px;
}
.map-card-feature{ background:linear-gradient(160deg,var(--card-2) 0%,var(--accent-tint) 100%); border-color:var(--accent-line); }

/* Resume & Contact — single destination layout */
.contact-grid{ display:grid; grid-template-columns:1.35fr 1fr; gap:22px; align-items:start; }
.contact-card{
  background:var(--card-2); border:1px solid var(--line,var(--line));
  border-radius:var(--radius); padding:26px 28px;
}
.contact-dl{ margin:0 0 18px; display:grid; gap:12px; }
.contact-dl > div{ display:grid; grid-template-columns:130px 1fr; gap:12px; align-items:baseline; }
.contact-dl dt{
  font-family:var(--sans); font-size:.68rem; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted,var(--muted)); margin:0;
}
.contact-dl dd{ margin:0; color:var(--ink,var(--ink)); font-size:1rem; }
.contact-note{
  margin:0 0 20px; padding-top:16px; border-top:1px solid var(--line,var(--line));
  color:var(--muted,var(--muted)); line-height:1.62; font-size:.96rem;
}
.contact-live{
  margin-top:40px; padding-top:20px; border-top:1px solid var(--line,var(--line));
  font-size:.92rem; color:var(--muted,var(--muted)); display:flex; gap:9px; flex-wrap:wrap;
}
.contact-live .sep{ opacity:.5 }
@media (max-width:820px){
  .contact-grid{ grid-template-columns:1fr; }
  .contact-dl > div{ grid-template-columns:110px 1fr; }
}

/* =====================================================================
   SELECTED WORK — filter + search
   Replaces stacked group sections, which tiled horizontally inside the
   grid container and could not scale past a couple of dozen items.
   ===================================================================== */
.work-controls{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  flex-wrap:wrap; margin:22px 0 14px;
}
/* Flex/grid children default to min-width:auto, so any nowrap horizontal
   scroller inside one will push its parent wider than the viewport instead of
   scrolling. Every such scroller on this site needs this. */
.work-controls > *{ min-width:0; }
.work-filters{ min-width:0; max-width:100%; }
.work-filters{ display:flex; gap:8px; flex-wrap:wrap; }
.work-filter{
  appearance:none; cursor:pointer; font-family:var(--sans); font-size:.87rem; font-weight:600;
  color:var(--muted,var(--muted)); background:transparent;
  border:1px solid var(--line,var(--line)); border-radius:var(--radius); padding:8px 15px;
  display:inline-flex; align-items:center; gap:8px;
  transition:background .15s, color .15s, border-color .15s;
}
.work-filter:hover{ background:var(--card-2); color:var(--ink,var(--ink)); }
.work-filter.active{ background:var(--ink-strong); border-color:var(--ink-strong); color:var(--on-accent); }
.work-filter:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.work-filter-n{
  font-size:.72rem; font-weight:700; padding:1px 7px; border-radius:var(--radius);
  background:var(--hair); color:var(--ink);
}
.work-filter.active .work-filter-n{ background:var(--ink-strong); color:var(--on-accent); }

.work-search{ position:relative; flex:0 1 268px; }
.work-search input{
  width:100%; font-family:var(--sans); font-size:.9rem; color:var(--ink,var(--ink));
  background:var(--ground); border:1px solid var(--line,var(--line)); border-radius:var(--radius);
  padding:10px 34px 10px 16px; appearance:none;
}
.work-search input:focus{ outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
.work-search-clear{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  appearance:none; border:0; background:none; cursor:pointer;
  font-size:1.15rem; line-height:1; color:var(--muted,var(--muted)); padding:5px 8px;
}
.work-count{
  margin:0 0 16px; font-family:var(--sans); font-size:.84rem; color:var(--muted,var(--muted));
}
.work-card[hidden]{ display:none !important; }
.work-none{
  margin:26px 0; padding:26px; text-align:center; color:var(--muted,var(--muted));
  background:var(--card-2); border:1px dashed var(--line,var(--line)); border-radius:var(--radius);
}

/* Build standard — collapsed by default, below the work */
details.build-std{ margin:38px 0 0; padding:0; border-left-width:3px; }
details.build-std summary{
  cursor:pointer; list-style:none; padding:20px 26px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
details.build-std summary::-webkit-details-marker{ display:none; }
details.build-std summary strong{ font-family:var(--serif); font-size:1.12rem; color:var(--ink,var(--ink)); font-weight:600; }
.build-std-toggle{
  margin-left:auto; font-family:var(--sans); font-size:.82rem; font-weight:700; color:var(--accent);
}
details.build-std[open] .build-std-toggle::after{ content:" \2014 hide"; }
details.build-std .build-std-head,
details.build-std .build-std-list,
details.build-std .build-std-note{ padding-left:26px; padding-right:26px; }
details.build-std .build-std-note{ padding-bottom:24px; }
details.build-std .build-std-head p{ margin-top:0; }
@media (max-width:640px){
  .work-controls{ flex-direction:column; align-items:stretch; }
  .work-search{ flex:1 1 auto; }
  details.build-std summary{ padding:16px 18px; }
}

/* Detail view — back + pager bar */
.work-detail-bar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; margin-bottom:22px;
}
.work-pager{ display:flex; align-items:center; gap:10px; }
.work-pagebtn{
  appearance:none; cursor:pointer; font-family:var(--sans); font-size:.85rem; font-weight:600;
  color:var(--ink,var(--ink)); background:var(--ground); border:1px solid var(--line,var(--line));
  border-radius:var(--radius); padding:8px 15px; transition:background .15s, border-color .15s;
}
.work-pagebtn:hover{ background:var(--card-2); border-color:var(--line); }
.work-pagebtn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.work-pos{
  font-family:var(--sans); font-size:.8rem; color:var(--muted,var(--muted));
  white-space:nowrap; min-width:64px; text-align:center;
}
@media (max-width:560px){
  .work-detail-bar{ flex-direction:column; align-items:stretch; }
  .work-pager{ justify-content:space-between; }
}

/* About — quick facts in the sidebar, headings in the narrative */
.about-facts{ list-style:none; margin:20px 0 0; padding:0; display:grid; gap:11px; }
.about-facts li{
  display:grid; gap:2px; font-size:.92rem; color:var(--ink,var(--ink)); line-height:1.45;
  padding-bottom:11px; border-bottom:1px solid var(--line-soft,var(--ground-2));
}
.about-facts li:last-child{ border-bottom:0; padding-bottom:0; }
.about-facts span{
  font-family:var(--sans); font-size:.65rem; font-weight:800; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted,var(--muted));
}
.about-body h2{
  font-size:1.16rem; margin:34px 0 10px; padding-top:22px;
  border-top:1px solid var(--line-soft,var(--ground-2));
}
.about-body h2:first-of-type{ margin-top:30px; }

/* =====================================================================
   SECTION DIRECTORY — sticky left rail, generated from the section's own H2s
   ===================================================================== */
/* min-width:0 on both children: grid items default to min-width:auto, so the
   nowrap pill strip forced the column wider than the viewport (530px of
   horizontal overflow at 390px before this). */
.dir-layout{ display:grid; grid-template-columns:216px 1fr; gap:40px; align-items:start; }
.dir-layout > *{ min-width:0; }
.dir-rail, .dir-body{ min-width:0; }
.dir-rail{ position:sticky; top:92px; align-self:start; }
.dir-title{
  display:block; font-family:var(--sans); font-size:.64rem; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted,var(--muted));
  margin-bottom:12px; padding-left:14px;
}
.dir-rail ul{ list-style:none; margin:0; padding:0; border-left:2px solid var(--line,var(--line)); }
.dir-rail li{ margin:0; }
.dir-rail a{
  display:block; padding:9px 12px 9px 14px; margin-left:-2px;
  border-left:2px solid transparent;
  font-family:var(--sans); font-size:.87rem; line-height:1.4;
  color:var(--muted,var(--muted)); text-decoration:none;
  transition:color .15s, border-color .15s, background .15s;
}
.dir-rail a:hover{ color:var(--ink,var(--ink)); background:var(--hair); }
.dir-rail a.active{ color:var(--accent); border-left-color:var(--accent); font-weight:700; }
.dir-rail a:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.dir-body > h2:first-child{ margin-top:0 !important; padding-top:0 !important; border-top:0 !important; }
.dir-body > h2{ scroll-margin-top:96px; }

@media (max-width:900px){
  /* Below 900 the rail becomes a horizontal strip that scrolls, so it never
     eats the width the content needs. */
  .dir-layout{ grid-template-columns:1fr; gap:0; }
  .dir-rail{
    position:sticky; top:0; z-index:5; margin:0 -4px 22px;
    background:var(--ground);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line,var(--line)); padding:8px 4px;
  }
  .dir-title{ display:none; }
  .dir-rail ul{
    display:flex; gap:6px; overflow-x:auto; border-left:0;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .dir-rail ul::-webkit-scrollbar{ display:none; }
  .dir-rail a{
    white-space:nowrap; padding:7px 13px; margin-left:0;
    border-left:0; border-radius:var(--radius); font-size:.8rem;
    border:1px solid var(--line,var(--line));
  }
  .dir-rail a.active{ background:var(--ink-strong); border-color:var(--ink-strong); color:var(--on-accent); }
}

/* =====================================================================
   LIVE DEMO — the tool actually runs inside the case study
   The iframe is only created on click, so opening a project never costs
   a second page load nobody asked for.
   ===================================================================== */
.live-demo{
  margin:0 0 34px; border:1px solid var(--line,var(--line)); border-radius:var(--radius);
  overflow:hidden; background:var(--ink-strong);
}
.live-head{
  display:flex; align-items:center; gap:11px; flex-wrap:wrap;
  padding:12px 16px; background:var(--ink-strong); color:var(--on-accent);
}
.live-head strong{ font-family:var(--sans); font-size:.92rem; }
.live-dot{
  width:8px; height:8px; border-radius:var(--radius); background:var(--accent);
  box-shadow:none;
}
.live-note{ font-family:var(--sans); font-size:.8rem; color:var(--ink-mute); }
.live-full{
  margin-left:auto; background:var(--ground); color:var(--on-accent);
  border:1px solid var(--ground);
}
.live-full:hover{ background:var(--ground); color:var(--on-accent); }
.live-frame{ position:relative; }
.live-start{
  appearance:none; border:0; padding:0; cursor:pointer; display:block; width:100%;
  position:relative; background:var(--ink-strong); line-height:0;
}
.live-start img{ width:100%; display:block; opacity:.42; transition:opacity .2s; }
.live-start:hover img{ opacity:.30; }
.live-play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:12px;
  font-family:var(--sans); font-size:1rem; font-weight:700; color:var(--on-accent); line-height:1.3;
  text-shadow:0 2px 14px var(--hair); padding:0 20px; text-align:center;
}
.live-play .tri{
  width:0; height:0; border-left:17px solid var(--ground-2);
  border-top:11px solid transparent; border-bottom:11px solid transparent;
  filter:drop-shadow(0 2px 10px var(--hair)); flex:0 0 auto;
}
.live-start:focus-visible{ outline:3px solid var(--accent); outline-offset:-3px; }
.live-iframe{
  width:100%; height:min(74vh,660px); border:0; display:block; background:var(--ground);
}
@media (max-width:640px){
  .live-iframe{ height:64vh; }
  .live-note{ display:none; }
  .live-play{ font-size:.88rem; }
}


/* =====================================================================
   MOBILE — 360-540px. Everything below is inside a max-width query, so
   the desktop layout is untouched by construction, not by care.
   ===================================================================== */
@media (max-width:540px){
  :root{ --pad: 16px; }

  /* Masthead: name, role, search, then nav. Card drops below. */
  .masthead-inner{ padding:14px var(--pad) 0; }
  .identity{ gap:12px; }
  .identity .name{ font-size:1.24rem; }
  .identity .role{ font-size:.84rem; line-height:1.45; }
  .biz-card{ width:100%; order:3; }/* Section chrome */
  .panel.section{ padding-left:var(--pad); padding-right:var(--pad); }
  .section-head h1{ font-size:1.6rem; line-height:1.2; }
  .section-head .lead{ font-size:.96rem; }
  .eyebrow{ font-size:.62rem; }

  /* Overview */
  .statement{ font-size:1.1rem; line-height:1.42; }
  .site-map-grid{ grid-template-columns:1fr; gap:12px; }
  .map-card{ padding:18px; }
  .aside-card{ padding:20px 18px; }

  /* Selected Work */
  .work-controls{ gap:12px; margin:16px 0 10px; }
  .work-filters{ gap:6px; overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px;
    scrollbar-width:none; -ms-overflow-style:none; }
  .work-filters::-webkit-scrollbar{ display:none; }
  .work-filter{ flex:0 0 auto; font-size:.8rem; padding:7px 12px; }
  .work-grid{ gap:16px; }
  .work-card-body{ padding:16px 16px 18px; }
  .work-detail-head{ grid-template-columns:1fr; gap:14px; }
  .work-detail-thumb{ width:100%; }
  .work-detail-title{ font-size:1.34rem; }
  .tmpl-actions{ gap:7px; }
  .tmpl-actions .btn{ flex:1 1 auto; justify-content:center; }

  /* About */
  .about{ grid-template-columns:1fr; gap:22px; }
  .about-side{ display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:center; }
  .about-side .avatar{ margin:0; }
  .about-facts{ grid-column:1 / -1; }
  .about-body h2{ font-size:1.06rem; margin-top:26px; padding-top:18px; }

  /* Contact */
  .contact-grid{ grid-template-columns:1fr; }
  .contact-card{ padding:20px 18px; }
  .contact-dl > div{ grid-template-columns:1fr; gap:2px; }

  /* Type scale — stop long words breaking layout */
  h1,h2,h3{ overflow-wrap:anywhere; }
  pre, code{ overflow-x:auto; max-width:100%; }
  table{ display:block; overflow-x:auto; }
}

/* Tap targets: 44px minimum on any touch device, at any width. */
@media (hover:none) and (pointer:coarse){
  .nav button, .work-filter, .z-sheet, .dir-rail a, .btn, .work-pagebtn{ min-height:44px; }
}

/* =====================================================================
   WORKING WITH AI — the teaching area
   Written outward. The two-column split IS the argument, so it carries
   the visual weight rather than a decorative header.
   ===================================================================== */
.two-ways{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:8px 0 0; }
.tw-card{ padding:26px 28px; border-radius:var(--radius); border:1px solid var(--line,var(--line)); background:var(--card-2); }
.tw-with{ border-left:3px solid var(--accent); }
.tw-for{ border-left:3px solid var(--accent); }
.tw-k{
  display:inline-block; font-family:var(--sans); font-size:.65rem; font-weight:800;
  letter-spacing:.15em; text-transform:uppercase; margin-bottom:10px;
}
.tw-with .tw-k{ color:var(--accent-deep); }
.tw-for .tw-k{ color:var(--accent); }
.tw-card h2{ font-size:1.2rem; margin:0 0 10px; padding:0; border:0; }
.tw-card p{ margin:0 0 12px; font-size:.97rem; line-height:1.62; color:var(--muted,var(--muted)); }
.tw-note{ padding-top:12px; border-top:1px solid var(--line,var(--line)); margin-bottom:0 !important; }
.tw-note strong{ color:var(--ink,var(--ink)); }
.tw-thesis{
  margin:22px 0 8px; padding:18px 22px; border-radius:var(--radius); background:var(--accent-tint);
  border:1px solid var(--accent-line); font-family:var(--serif); font-size:1.06rem;
  line-height:1.5; color:var(--ink,var(--ink)); text-align:center;
}

/* Packs */
.pack-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); gap:16px; margin-bottom:8px; }
.pack{
  display:flex; flex-direction:column; gap:9px; padding:22px;
  border:1px solid var(--line,var(--line)); border-radius:var(--radius); background:var(--ground);
}
.pack-n{
  font-family:var(--sans); font-size:.64rem; font-weight:800; letter-spacing:.13em;
  text-transform:uppercase; color:var(--accent); background:var(--accent-tint);
  border:1px solid var(--accent-line); border-radius:var(--radius); padding:3px 10px; width:fit-content;
}
.pack h3{ margin:2px 0 0; font-size:1.06rem; }
.pack p{ margin:0; font-size:.9rem; line-height:1.58; color:var(--muted,var(--muted)); flex:1; }
.pack .btn{ width:fit-content; margin-top:4px; }
.pack-key{ border-color:var(--hair); background:var(--ground-2); }
.pack-key .pack-n{ color:var(--accent); background:var(--on-accent); border-color:var(--hair); }
.pack-all{ background:linear-gradient(160deg,var(--card-2) 0%,var(--accent-tint) 100%); border-color:var(--accent-line); }

/* Starter cards */
.starter{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:20px; }
.start-card{
  padding:24px 26px; border:1px solid var(--line,var(--line)); border-radius:var(--radius); background:var(--card-2);
}
.start-card-key{ background:var(--ground-2); border-color:var(--hair); }
.start-n{
  display:inline-block; font-family:var(--sans); font-size:.64rem; font-weight:800;
  letter-spacing:.14em; color:var(--muted,var(--muted)); margin-bottom:8px;
}
.start-card h3{ margin:0 0 10px; font-size:1.1rem; }
.start-why{ margin:0 0 14px; font-size:.94rem; line-height:1.6; color:var(--muted,var(--muted)); }
.start-prompt{
  margin:0 0 12px; padding:16px 18px; background:var(--ground); border:1px solid var(--line,var(--line));
  border-radius:var(--radius); font-family:var(--mono,ui-monospace,Menlo,Consolas,monospace);
  font-size:.82rem; line-height:1.62; color:var(--ink,var(--ink));
  white-space:pre-wrap; overflow-wrap:anywhere; max-height:250px; overflow-y:auto;
}
.defend{ background:var(--ground); border:1px solid var(--hair); border-radius:var(--radius); padding:18px 20px; }
.defend p{ margin:0 0 10px; font-size:.93rem; line-height:1.6; color:var(--muted,var(--muted)); }
.defend p:last-child{ margin-bottom:0; }
.defend-q{
  font-family:var(--serif); font-size:1.08rem !important; color:var(--ink,var(--ink)) !important;
  line-height:1.4 !important; padding-bottom:12px; border-bottom:1px solid var(--ground-2);
}
.defend strong{ color:var(--ink,var(--ink)); }

/* The signed note — the only first-person block in the section */
.signed{
  margin:34px 0 8px; padding:22px 26px; border-left:3px solid var(--line,var(--line));
  background:var(--card-2); border-radius:var(--radius);
}
.signed-k{
  display:block; font-family:var(--sans); font-size:.64rem; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted,var(--muted)); margin-bottom:9px;
}
.signed p{ margin:0 0 10px; font-size:.95rem; line-height:1.65; color:var(--muted,var(--muted)); }
.signed-name{ font-family:var(--serif); font-style:italic; color:var(--ink,var(--ink)); margin-bottom:0 !important; }

@media (max-width:820px){
  .two-ways, .starter{ grid-template-columns:1fr; }
  .tw-card{ padding:20px; }
  .tw-thesis{ font-size:.98rem; padding:15px 17px; text-align:left; }
}
@keyframes zpulse{ 0%{transform:scale(.9);opacity:.55} 70%{transform:scale(1.5);opacity:0} 100%{opacity:0} }
@keyframes zfade{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none; } }

/* =====================================================================
   MOBILE / TABLET nav — collapsing menu (desktop view is unchanged)
   ===================================================================== */
.nav-toggle{ display:none; }   /* hidden on laptop/desktop */

@media (max-width:900px){
  .masthead-inner{ padding-top:18px; }
  /* tidy the contact block on small screens */
  .identity > div:last-child{ text-align:left !important; }

  .nav-toggle{
    display:inline-flex; align-items:center; gap:11px; margin-top:16px;
    appearance:none; cursor:pointer; font-family:var(--sans); font-weight:600; font-size:.95rem;
    color:var(--ink); background:var(--card); border:1px solid var(--line);
    border-radius:var(--radius); padding:11px 16px;
  }
  .nav-toggle-icon{ position:relative; display:inline-block; width:18px; height:2px; background:currentColor; border-radius:var(--radius); transition:background .15s; }
  .nav-toggle-icon::before, .nav-toggle-icon::after{ content:""; position:absolute; left:0; width:18px; height:2px; background:currentColor; border-radius:var(--radius); transition:transform .2s ease, top .2s ease; }
  .nav-toggle-icon::before{ top:-6px; }
  .nav-toggle-icon::after{ top:6px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-icon{ background:transparent; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-icon::before{ top:0; transform:rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-icon::after{ top:0; transform:rotate(-45deg); }

  .nav{
    display:none; flex-direction:column; gap:0; overflow:visible;
    margin-top:12px; padding:6px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card);
  }
  .nav.open{ display:flex; }
  .nav button{
    width:100%; text-align:left; white-space:normal;
    padding:13px 14px; border-radius:var(--radius); font-size:1rem;
  }
  .nav button:hover{ color:var(--ink); background:var(--accent-tint); }
  .nav button.active{ color:var(--ink); background:var(--accent-tint); }
  .nav button.active::after{ display:none; }
}

/* ===== Templates accordion ===== */
.tmpl-list{ margin-top:6px; }
.tmpl{ border:1px solid var(--line); border-radius:var(--radius); margin-bottom:12px; background:var(--card); overflow:hidden; }
.tmpl[open]{ box-shadow:none; border-color:var(--accent-line); }
.tmpl summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 20px; }
.tmpl summary::-webkit-details-marker{ display:none; }
.tmpl summary:hover .tmpl-name{ color:var(--accent-deep); }
.tmpl-headwrap{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.tmpl-name{ font-family:var(--serif); font-size:1.12rem; color:var(--ink); font-weight:600; transition:color .15s; }
.tmpl-file{ font-family:var(--mono); font-size:.74rem; color:var(--muted); }
.tmpl-meta{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
.tmpl-fmt{ font-family:var(--sans); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-deep); background:var(--accent-tint); padding:4px 10px; border-radius:var(--radius); white-space:nowrap; }
.tmpl-chev{ width:9px; height:9px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg); transition:transform .2s ease; }
.tmpl[open] .tmpl-chev{ transform:rotate(-135deg); }
.tmpl-body{ padding:4px 20px 20px; border-top:1px solid var(--line-soft); }
.tmpl-use{ color:var(--body); margin:14px 0; }
.tmpl-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px; }
.btn-sm{ padding:8px 15px; font-size:.85rem; }
.tmpl-edit h4{ font-size:.95rem; margin-bottom:8px; color:var(--ink); }
.tmpl-steps{ margin:0; padding-left:20px; color:var(--body); font-size:.94rem; line-height:1.55; }
.tmpl-steps li{ margin-bottom:7px; }
.tmpl-note{ color:var(--body); font-size:.94rem; line-height:1.6; max-width:76ch; margin:0; }
@media (max-width:520px){
  .tmpl summary{ padding:14px 16px; }
  .tmpl-body{ padding:4px 16px 18px; }
  .tmpl-actions .btn-sm{ flex:1 1 auto; text-align:center; }
}

/* ===== Selected Work — master/detail ===== */
.work-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:8px; }
.work-card{ text-align:left; cursor:pointer; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; padding:0; font:inherit; color:inherit; transition:transform .15s, box-shadow .15s, border-color .15s; }
.work-card:hover{ transform:translateY(-3px); box-shadow:none; border-color:var(--accent-line); }
.work-card:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.work-card-thumb{ width:100%; height:172px; object-fit:cover; object-position:top center; background:var(--ground-2); border-bottom:1px solid var(--line-soft); }
.work-card-body{ padding:16px 18px 18px; display:flex; flex-direction:column; flex:1; }
.work-card-cat{ font-family:var(--sans); font-size:.68rem; letter-spacing:.07em; text-transform:uppercase; color:var(--accent-2); margin-bottom:6px; }
.work-card-title{ font-size:1.12rem; margin-bottom:8px; line-height:1.25; }
.work-card-blurb{ font-size:.9rem; color:var(--muted); line-height:1.5; margin-bottom:14px; flex:1;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.work-card-cta{ font-family:var(--sans); font-size:.85rem; font-weight:600; color:var(--accent); }
.work-maint{ margin-top:26px; font-size:.92rem; }
@media (max-width:980px){ .work-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .work-grid{ grid-template-columns:1fr; } }

/* detail */
.work-back{ appearance:none; cursor:pointer; background:none; border:0; font-family:var(--sans); font-weight:600; font-size:.9rem; color:var(--accent); padding:6px 0; margin-bottom:18px; }
.work-back:hover{ text-decoration:underline; }
.work-detail-head{ display:grid; grid-template-columns:minmax(0,440px) 1fr; gap:34px; align-items:start; margin-bottom:30px; }
.work-detail-thumb{ width:100%; border-radius:var(--radius); border:1px solid var(--line-soft); display:block; }
.work-detail-title{ font-size:2rem; margin:6px 0 12px; line-height:1.12; }
.work-detail-blurb{ color:var(--body); font-size:1.02rem; line-height:1.6; margin-bottom:18px; max-width:60ch; }
.work-detail-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:36px; }
.work-detail-case dl{ margin:0; }
.work-detail-case dl > div{ display:grid; grid-template-columns:130px 1fr; gap:14px; padding:11px 0; border-top:1px solid var(--line-soft); }
.work-detail-case dl > div:first-child{ border-top:0; }
.work-detail-case dt{ font-family:var(--sans); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); padding-top:2px; }
.work-detail-case dd{ margin:0; color:var(--body); font-size:.96rem; line-height:1.55; }
.work-detail-edit{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px; align-self:start; }
.work-detail-edit h4{ margin-bottom:12px; }
@media (max-width:820px){
  .work-detail-head{ grid-template-columns:1fr; gap:20px; }
  .work-detail-grid{ grid-template-columns:1fr; gap:24px; }
}
@media (max-width:520px){ .work-detail-case dl > div{ grid-template-columns:1fr; gap:3px; } }

/* ---- Business card (header right side) ---------------------------------- */
.biz-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius:var(--radius);
  padding: 10px 14px 8px;
  box-shadow:none;
  min-width: 224px;
  transition: box-shadow .18s, transform .18s;
}
.biz-card:hover {
  box-shadow:none;
  transform: translateY(-1px);
}
.biz-top {
  font-size: .78rem;
  color: var(--muted);
  text-align: center;
  white-space: nowrap;
}
.biz-top a { color: var(--accent); }
.biz-divider {
  height: 1px;
  background: var(--line-soft);
  margin: 7px 0 5px;
}
.biz-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 5px 0 4px;
  text-decoration: none;
  border-radius:var(--radius);
  transition: background .14s;
}
.biz-row:hover { background: var(--ground-2)); }
.biz-row-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-wrap: wrap;
}
.biz-sep {
  font-size: .72rem;
  color: var(--muted);
  opacity: .45;
  user-select: none;
}
.biz-email {
  font-size: .78rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  letter-spacing: .01em;
}
.biz-email:hover { text-decoration: underline; }
.biz-contact-label {
  font-size: .72rem;
  color: var(--muted);
  opacity: .65;
  user-select: none;
}
.biz-tag {

  font-size: .72rem;
  font-style: italic;
  color: var(--muted);
  letter-spacing: .01em;
}
.biz-url {
  font-size: .82rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .01em;
}
@media (max-width: 600px) {
  .biz-card { min-width: unset; width: 100%; }
  .biz-row { align-items: flex-start; }
  .biz-top { text-align: center; }
}


/* =====================================================================
   OVERVIEW — "currently shipping" feature band
   Puts the strongest asset on the landing tab instead of hiding it
   behind a nav click.
   ===================================================================== */
.home-feature{
  display:grid; grid-template-columns:1fr 1.05fr; gap:0; align-items:stretch;
  margin:48px 0 8px; border:1px solid var(--line, var(--line)); border-radius:var(--radius);
  overflow:hidden; background:var(--card-2);
  box-shadow:none;
}
.home-feature-body{ padding:32px 34px; display:flex; flex-direction:column; justify-content:center; }
.home-feature-k{
  display:inline-block; width:fit-content; font-family:var(--sans);
  font-size:.66rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); background:var(--accent-tint); border:1px solid var(--accent-line);
  border-radius:var(--radius); padding:5px 12px; margin-bottom:14px;
}
.home-feature-body h2{ margin:0 0 10px; font-size:1.42rem; line-height:1.26; }
.home-feature-body p{ margin:0 0 20px; color:var(--muted, var(--muted)); line-height:1.62; font-size:.98rem; }
.home-feature-body .btn{ width:fit-content; }
.home-feature-shot{ position:relative; overflow:hidden; background:var(--ink-strong); min-height:280px; }
.home-feature-shot img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:left top;
}
@media (max-width:820px){
  .home-feature{ grid-template-columns:1fr; }
  .home-feature-shot{ min-height:210px; order:-1; }
  .home-feature-body{ padding:26px 22px; }
  .home-feature-body h2{ font-size:1.22rem; }
}

/* =====================================================================
   SELECTED WORK — build & verification standard
   The engineering discipline behind the 21 files. Sits above the grid
   because for technical roles it matters more than any single tool.
   ===================================================================== */
.build-std{
  margin:0 0 46px; padding:28px 32px 26px;
  background:var(--card-2); border:1px solid var(--line, var(--line));
  border-left:3px solid var(--accent); border-radius:var(--radius);
}
.build-std-head h2{ margin:0 0 8px; font-size:1.24rem; }
.build-std-k{
  display:inline-block; font-family:var(--sans); font-size:.65rem; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
  margin-bottom:9px;
}
.build-std-head p{ margin:0 0 18px; color:var(--muted, var(--muted)); max-width:80ch; line-height:1.6; }
.build-std-list{ margin:0; padding:0; list-style:none; display:grid; gap:11px; }
.build-std-list li{
  position:relative; padding-left:26px; line-height:1.6;
  color:var(--muted, var(--muted)); font-size:.96rem; max-width:88ch;
}
.build-std-list li::before{
  content:"\2713"; position:absolute; left:0; top:0;
  color:var(--accent); font-weight:700; font-size:.95rem;
}
.build-std-list strong{ color:var(--ink, var(--ink)); }
.build-std-note{
  margin:20px 0 0; padding-top:16px; border-top:1px solid var(--line, var(--line));
  font-size:.94rem; color:var(--muted, var(--muted)); font-style:italic; max-width:80ch;
}
@media (max-width:640px){
  .build-std{ padding:22px 18px; }
  .build-std-head h2{ font-size:1.1rem; }
}

/* =====================================================================
   OVERVIEW — "What's here" site map
   Answers "where is everything?" before a visitor has to hunt the nav.
   ===================================================================== */
.site-map{ margin:52px 0 8px; }
.site-map h2{ margin:0 0 4px; font-size:1.3rem; }
.site-map-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(258px,1fr));
  gap:16px; margin-top:20px;
}
.map-card{
  appearance:none; cursor:pointer; text-align:left; font-family:inherit;
  background:var(--card-2); border:1px solid var(--line,var(--line)); border-radius:var(--radius);
  padding:22px 22px 18px; display:flex; flex-direction:column; gap:7px;
  transition:transform .16s, box-shadow .16s, border-color .16s;
}
.map-card:hover{
  transform:translateY(-2px); border-color:var(--accent-line);
  box-shadow:none;
}
.map-card:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.map-n{
  font-family:var(--sans); font-size:.7rem; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent); background:var(--accent-tint);
  border:1px solid var(--accent-line); border-radius:var(--radius); padding:3px 10px; width:fit-content;
}
.map-card h3{ margin:4px 0 0; font-size:1.08rem; }
.map-card p{ margin:0; font-size:.93rem; line-height:1.56; color:var(--muted,var(--muted)); flex:1; }
.map-go{
  font-family:var(--sans); font-size:.85rem; font-weight:700; color:var(--accent); margin-top:6px;
}
.map-card-feature{ background:linear-gradient(160deg,var(--card-2) 0%,var(--accent-tint) 100%); border-color:var(--accent-line); }

/* Resume & Contact — single destination layout */
.contact-grid{ display:grid; grid-template-columns:1.35fr 1fr; gap:22px; align-items:start; }
.contact-card{
  background:var(--card-2); border:1px solid var(--line,var(--line));
  border-radius:var(--radius); padding:26px 28px;
}
.contact-dl{ margin:0 0 18px; display:grid; gap:12px; }
.contact-dl > div{ display:grid; grid-template-columns:130px 1fr; gap:12px; align-items:baseline; }
.contact-dl dt{
  font-family:var(--sans); font-size:.68rem; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted,var(--muted)); margin:0;
}
.contact-dl dd{ margin:0; color:var(--ink,var(--ink)); font-size:1rem; }
.contact-note{
  margin:0 0 20px; padding-top:16px; border-top:1px solid var(--line,var(--line));
  color:var(--muted,var(--muted)); line-height:1.62; font-size:.96rem;
}
.contact-live{
  margin-top:40px; padding-top:20px; border-top:1px solid var(--line,var(--line));
  font-size:.92rem; color:var(--muted,var(--muted)); display:flex; gap:9px; flex-wrap:wrap;
}
.contact-live .sep{ opacity:.5 }
@media (max-width:820px){
  .contact-grid{ grid-template-columns:1fr; }
  .contact-dl > div{ grid-template-columns:110px 1fr; }
}

/* =====================================================================
   SELECTED WORK — filter + search
   Replaces stacked group sections, which tiled horizontally inside the
   grid container and could not scale past a couple of dozen items.
   ===================================================================== */
.work-controls{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  flex-wrap:wrap; margin:22px 0 14px;
}
/* Flex/grid children default to min-width:auto, so any nowrap horizontal
   scroller inside one will push its parent wider than the viewport instead of
   scrolling. Every such scroller on this site needs this. */
.work-controls > *{ min-width:0; }
.work-filters{ min-width:0; max-width:100%; }
.work-filters{ display:flex; gap:8px; flex-wrap:wrap; }
.work-filter{
  appearance:none; cursor:pointer; font-family:var(--sans); font-size:.87rem; font-weight:600;
  color:var(--muted,var(--muted)); background:transparent;
  border:1px solid var(--line,var(--line)); border-radius:var(--radius); padding:8px 15px;
  display:inline-flex; align-items:center; gap:8px;
  transition:background .15s, color .15s, border-color .15s;
}
.work-filter:hover{ background:var(--card-2); color:var(--ink,var(--ink)); }
.work-filter.active{ background:var(--ink-strong); border-color:var(--ink-strong); color:var(--on-accent); }
.work-filter:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.work-filter-n{
  font-size:.72rem; font-weight:700; padding:1px 7px; border-radius:var(--radius);
  background:var(--hair); color:var(--ink);
}
.work-filter.active .work-filter-n{ background:var(--ink-strong); color:var(--on-accent); }

.work-search{ position:relative; flex:0 1 268px; }
.work-search input{
  width:100%; font-family:var(--sans); font-size:.9rem; color:var(--ink,var(--ink));
  background:var(--ground); border:1px solid var(--line,var(--line)); border-radius:var(--radius);
  padding:10px 34px 10px 16px; appearance:none;
}
.work-search input:focus{ outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
.work-search-clear{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  appearance:none; border:0; background:none; cursor:pointer;
  font-size:1.15rem; line-height:1; color:var(--muted,var(--muted)); padding:5px 8px;
}
.work-count{
  margin:0 0 16px; font-family:var(--sans); font-size:.84rem; color:var(--muted,var(--muted));
}
.work-card[hidden]{ display:none !important; }
.work-none{
  margin:26px 0; padding:26px; text-align:center; color:var(--muted,var(--muted));
  background:var(--card-2); border:1px dashed var(--line,var(--line)); border-radius:var(--radius);
}

/* Build standard — collapsed by default, below the work */
details.build-std{ margin:38px 0 0; padding:0; border-left-width:3px; }
details.build-std summary{
  cursor:pointer; list-style:none; padding:20px 26px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
details.build-std summary::-webkit-details-marker{ display:none; }
details.build-std summary strong{ font-family:var(--serif); font-size:1.12rem; color:var(--ink,var(--ink)); font-weight:600; }
.build-std-toggle{
  margin-left:auto; font-family:var(--sans); font-size:.82rem; font-weight:700; color:var(--accent);
}
details.build-std[open] .build-std-toggle::after{ content:" \2014 hide"; }
details.build-std .build-std-head,
details.build-std .build-std-list,
details.build-std .build-std-note{ padding-left:26px; padding-right:26px; }
details.build-std .build-std-note{ padding-bottom:24px; }
details.build-std .build-std-head p{ margin-top:0; }
@media (max-width:640px){
  .work-controls{ flex-direction:column; align-items:stretch; }
  .work-search{ flex:1 1 auto; }
  details.build-std summary{ padding:16px 18px; }
}

/* Detail view — back + pager bar */
.work-detail-bar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; margin-bottom:22px;
}
.work-pager{ display:flex; align-items:center; gap:10px; }
.work-pagebtn{
  appearance:none; cursor:pointer; font-family:var(--sans); font-size:.85rem; font-weight:600;
  color:var(--ink,var(--ink)); background:var(--ground); border:1px solid var(--line,var(--line));
  border-radius:var(--radius); padding:8px 15px; transition:background .15s, border-color .15s;
}
.work-pagebtn:hover{ background:var(--card-2); border-color:var(--line); }
.work-pagebtn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.work-pos{
  font-family:var(--sans); font-size:.8rem; color:var(--muted,var(--muted));
  white-space:nowrap; min-width:64px; text-align:center;
}
@media (max-width:560px){
  .work-detail-bar{ flex-direction:column; align-items:stretch; }
  .work-pager{ justify-content:space-between; }
}

/* About — quick facts in the sidebar, headings in the narrative */
.about-facts{ list-style:none; margin:20px 0 0; padding:0; display:grid; gap:11px; }
.about-facts li{
  display:grid; gap:2px; font-size:.92rem; color:var(--ink,var(--ink)); line-height:1.45;
  padding-bottom:11px; border-bottom:1px solid var(--line-soft,var(--ground-2));
}
.about-facts li:last-child{ border-bottom:0; padding-bottom:0; }
.about-facts span{
  font-family:var(--sans); font-size:.65rem; font-weight:800; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted,var(--muted));
}
.about-body h2{
  font-size:1.16rem; margin:34px 0 10px; padding-top:22px;
  border-top:1px solid var(--line-soft,var(--ground-2));
}
.about-body h2:first-of-type{ margin-top:30px; }

/* =====================================================================
   SECTION DIRECTORY — sticky left rail, generated from the section's own H2s
   ===================================================================== */
/* min-width:0 on both children: grid items default to min-width:auto, so the
   nowrap pill strip forced the column wider than the viewport (530px of
   horizontal overflow at 390px before this). */
.dir-layout{ display:grid; grid-template-columns:216px 1fr; gap:40px; align-items:start; }
.dir-layout > *{ min-width:0; }
.dir-rail, .dir-body{ min-width:0; }
.dir-rail{ position:sticky; top:92px; align-self:start; }
.dir-title{
  display:block; font-family:var(--sans); font-size:.64rem; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted,var(--muted));
  margin-bottom:12px; padding-left:14px;
}
.dir-rail ul{ list-style:none; margin:0; padding:0; border-left:2px solid var(--line,var(--line)); }
.dir-rail li{ margin:0; }
.dir-rail a{
  display:block; padding:9px 12px 9px 14px; margin-left:-2px;
  border-left:2px solid transparent;
  font-family:var(--sans); font-size:.87rem; line-height:1.4;
  color:var(--muted,var(--muted)); text-decoration:none;
  transition:color .15s, border-color .15s, background .15s;
}
.dir-rail a:hover{ color:var(--ink,var(--ink)); background:var(--hair); }
.dir-rail a.active{ color:var(--accent); border-left-color:var(--accent); font-weight:700; }
.dir-rail a:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.dir-body > h2:first-child{ margin-top:0 !important; padding-top:0 !important; border-top:0 !important; }
.dir-body > h2{ scroll-margin-top:96px; }

@media (max-width:900px){
  /* Below 900 the rail becomes a horizontal strip that scrolls, so it never
     eats the width the content needs. */
  .dir-layout{ grid-template-columns:1fr; gap:0; }
  .dir-rail{
    position:sticky; top:0; z-index:5; margin:0 -4px 22px;
    background:var(--ground);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line,var(--line)); padding:8px 4px;
  }
  .dir-title{ display:none; }
  .dir-rail ul{
    display:flex; gap:6px; overflow-x:auto; border-left:0;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .dir-rail ul::-webkit-scrollbar{ display:none; }
  .dir-rail a{
    white-space:nowrap; padding:7px 13px; margin-left:0;
    border-left:0; border-radius:var(--radius); font-size:.8rem;
    border:1px solid var(--line,var(--line));
  }
  .dir-rail a.active{ background:var(--ink-strong); border-color:var(--ink-strong); color:var(--on-accent); }
}

/* =====================================================================
   LIVE DEMO — the tool actually runs inside the case study
   The iframe is only created on click, so opening a project never costs
   a second page load nobody asked for.
   ===================================================================== */
.live-demo{
  margin:0 0 34px; border:1px solid var(--line,var(--line)); border-radius:var(--radius);
  overflow:hidden; background:var(--ink-strong);
}
.live-head{
  display:flex; align-items:center; gap:11px; flex-wrap:wrap;
  padding:12px 16px; background:var(--ink-strong); color:var(--on-accent);
}
.live-head strong{ font-family:var(--sans); font-size:.92rem; }
.live-dot{
  width:8px; height:8px; border-radius:var(--radius); background:var(--accent);
  box-shadow:none;
}
.live-note{ font-family:var(--sans); font-size:.8rem; color:var(--ink-mute); }
.live-full{
  margin-left:auto; background:var(--ground); color:var(--on-accent);
  border:1px solid var(--ground);
}
.live-full:hover{ background:var(--ground); color:var(--on-accent); }
.live-frame{ position:relative; }
.live-start{
  appearance:none; border:0; padding:0; cursor:pointer; display:block; width:100%;
  position:relative; background:var(--ink-strong); line-height:0;
}
.live-start img{ width:100%; display:block; opacity:.42; transition:opacity .2s; }
.live-start:hover img{ opacity:.30; }
.live-play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:12px;
  font-family:var(--sans); font-size:1rem; font-weight:700; color:var(--on-accent); line-height:1.3;
  text-shadow:0 2px 14px var(--hair); padding:0 20px; text-align:center;
}
.live-play .tri{
  width:0; height:0; border-left:17px solid var(--ground-2);
  border-top:11px solid transparent; border-bottom:11px solid transparent;
  filter:drop-shadow(0 2px 10px var(--hair)); flex:0 0 auto;
}
.live-start:focus-visible{ outline:3px solid var(--accent); outline-offset:-3px; }
.live-iframe{
  width:100%; height:min(74vh,660px); border:0; display:block; background:var(--ground);
}
@media (max-width:640px){
  .live-iframe{ height:64vh; }
  .live-note{ display:none; }
  .live-play{ font-size:.88rem; }
}


/* =====================================================================
   MOBILE — 360-540px. Everything below is inside a max-width query, so
   the desktop layout is untouched by construction, not by care.
   ===================================================================== */
@media (max-width:540px){
  :root{ --pad: 16px; }

  /* Masthead: name, role, search, then nav. Card drops below. */
  .masthead-inner{ padding:14px var(--pad) 0; }
  .identity{ gap:12px; }
  .identity .name{ font-size:1.24rem; }
  .identity .role{ font-size:.84rem; line-height:1.45; }
  .biz-card{ width:100%; order:3; }/* Section chrome */
  .panel.section{ padding-left:var(--pad); padding-right:var(--pad); }
  .section-head h1{ font-size:1.6rem; line-height:1.2; }
  .section-head .lead{ font-size:.96rem; }
  .eyebrow{ font-size:.62rem; }

  /* Overview */
  .statement{ font-size:1.1rem; line-height:1.42; }
  .site-map-grid{ grid-template-columns:1fr; gap:12px; }
  .map-card{ padding:18px; }
  .aside-card{ padding:20px 18px; }

  /* Selected Work */
  .work-controls{ gap:12px; margin:16px 0 10px; }
  .work-filters{ gap:6px; overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px;
    scrollbar-width:none; -ms-overflow-style:none; }
  .work-filters::-webkit-scrollbar{ display:none; }
  .work-filter{ flex:0 0 auto; font-size:.8rem; padding:7px 12px; }
  .work-grid{ gap:16px; }
  .work-card-body{ padding:16px 16px 18px; }
  .work-detail-head{ grid-template-columns:1fr; gap:14px; }
  .work-detail-thumb{ width:100%; }
  .work-detail-title{ font-size:1.34rem; }
  .tmpl-actions{ gap:7px; }
  .tmpl-actions .btn{ flex:1 1 auto; justify-content:center; }

  /* About */
  .about{ grid-template-columns:1fr; gap:22px; }
  .about-side{ display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:center; }
  .about-side .avatar{ margin:0; }
  .about-facts{ grid-column:1 / -1; }
  .about-body h2{ font-size:1.06rem; margin-top:26px; padding-top:18px; }

  /* Contact */
  .contact-grid{ grid-template-columns:1fr; }
  .contact-card{ padding:20px 18px; }
  .contact-dl > div{ grid-template-columns:1fr; gap:2px; }

  /* Type scale — stop long words breaking layout */
  h1,h2,h3{ overflow-wrap:anywhere; }
  pre, code{ overflow-x:auto; max-width:100%; }
  table{ display:block; overflow-x:auto; }
}

/* Tap targets: 44px minimum on any touch device, at any width. */
@media (hover:none) and (pointer:coarse){
  .nav button, .work-filter, .z-sheet, .dir-rail a, .btn, .work-pagebtn{ min-height:44px; }
}

/* =====================================================================
   WORKING WITH AI — the teaching area
   Written outward. The two-column split IS the argument, so it carries
   the visual weight rather than a decorative header.
   ===================================================================== */
.two-ways{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:8px 0 0; }
.tw-card{ padding:26px 28px; border-radius:var(--radius); border:1px solid var(--line,var(--line)); background:var(--card-2); }
.tw-with{ border-left:3px solid var(--accent); }
.tw-for{ border-left:3px solid var(--accent); }
.tw-k{
  display:inline-block; font-family:var(--sans); font-size:.65rem; font-weight:800;
  letter-spacing:.15em; text-transform:uppercase; margin-bottom:10px;
}
.tw-with .tw-k{ color:var(--accent-deep); }
.tw-for .tw-k{ color:var(--accent); }
.tw-card h2{ font-size:1.2rem; margin:0 0 10px; padding:0; border:0; }
.tw-card p{ margin:0 0 12px; font-size:.97rem; line-height:1.62; color:var(--muted,var(--muted)); }
.tw-note{ padding-top:12px; border-top:1px solid var(--line,var(--line)); margin-bottom:0 !important; }
.tw-note strong{ color:var(--ink,var(--ink)); }
.tw-thesis{
  margin:22px 0 8px; padding:18px 22px; border-radius:var(--radius); background:var(--accent-tint);
  border:1px solid var(--accent-line); font-family:var(--serif); font-size:1.06rem;
  line-height:1.5; color:var(--ink,var(--ink)); text-align:center;
}

/* Packs */
.pack-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); gap:16px; margin-bottom:8px; }
.pack{
  display:flex; flex-direction:column; gap:9px; padding:22px;
  border:1px solid var(--line,var(--line)); border-radius:var(--radius); background:var(--ground);
}
.pack-n{
  font-family:var(--sans); font-size:.64rem; font-weight:800; letter-spacing:.13em;
  text-transform:uppercase; color:var(--accent); background:var(--accent-tint);
  border:1px solid var(--accent-line); border-radius:var(--radius); padding:3px 10px; width:fit-content;
}
.pack h3{ margin:2px 0 0; font-size:1.06rem; }
.pack p{ margin:0; font-size:.9rem; line-height:1.58; color:var(--muted,var(--muted)); flex:1; }
.pack .btn{ width:fit-content; margin-top:4px; }
.pack-key{ border-color:var(--hair); background:var(--ground-2); }
.pack-key .pack-n{ color:var(--accent); background:var(--on-accent); border-color:var(--hair); }
.pack-all{ background:linear-gradient(160deg,var(--card-2) 0%,var(--accent-tint) 100%); border-color:var(--accent-line); }

/* Starter cards */
.starter{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:20px; }
.start-card{
  padding:24px 26px; border:1px solid var(--line,var(--line)); border-radius:var(--radius); background:var(--card-2);
}
.start-card-key{ background:var(--ground-2); border-color:var(--hair); }
.start-n{
  display:inline-block; font-family:var(--sans); font-size:.64rem; font-weight:800;
  letter-spacing:.14em; color:var(--muted,var(--muted)); margin-bottom:8px;
}
.start-card h3{ margin:0 0 10px; font-size:1.1rem; }
.start-why{ margin:0 0 14px; font-size:.94rem; line-height:1.6; color:var(--muted,var(--muted)); }
.start-prompt{
  margin:0 0 12px; padding:16px 18px; background:var(--ground); border:1px solid var(--line,var(--line));
  border-radius:var(--radius); font-family:var(--mono,ui-monospace,Menlo,Consolas,monospace);
  font-size:.82rem; line-height:1.62; color:var(--ink,var(--ink));
  white-space:pre-wrap; overflow-wrap:anywhere; max-height:250px; overflow-y:auto;
}
.defend{ background:var(--ground); border:1px solid var(--hair); border-radius:var(--radius); padding:18px 20px; }
.defend p{ margin:0 0 10px; font-size:.93rem; line-height:1.6; color:var(--muted,var(--muted)); }
.defend p:last-child{ margin-bottom:0; }
.defend-q{
  font-family:var(--serif); font-size:1.08rem !important; color:var(--ink,var(--ink)) !important;
  line-height:1.4 !important; padding-bottom:12px; border-bottom:1px solid var(--ground-2);
}
.defend strong{ color:var(--ink,var(--ink)); }

/* The signed note — the only first-person block in the section */
.signed{
  margin:34px 0 8px; padding:22px 26px; border-left:3px solid var(--line,var(--line));
  background:var(--card-2); border-radius:var(--radius);
}
.signed-k{
  display:block; font-family:var(--sans); font-size:.64rem; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted,var(--muted)); margin-bottom:9px;
}
.signed p{ margin:0 0 10px; font-size:.95rem; line-height:1.65; color:var(--muted,var(--muted)); }
.signed-name{ font-family:var(--serif); font-style:italic; color:var(--ink,var(--ink)); margin-bottom:0 !important; }

@media (max-width:820px){
  .two-ways, .starter{ grid-template-columns:1fr; }
  .tw-card{ padding:20px; }
  .tw-thesis{ font-size:.98rem; padding:15px 17px; text-align:left; }
}

/* =====================================================================
   PROMPT LIBRARY — topic previews and topic pages
   The landing view shows a few per topic and never grows; the topic
   pages carry the volume. Built to read the same at 26 or 260.
   ===================================================================== */
.topic{ margin:0 0 34px; padding-bottom:30px; border-bottom:1px solid var(--line,var(--line)); }
.topic:last-child{ border-bottom:0; padding-bottom:6px; }
.topic-h{ display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap; margin-bottom:16px; }
.topic-h > div:first-child{ flex:1 1 320px; min-width:0; }
.topic-h h3{ margin:0 0 5px; font-size:1.18rem; display:flex; align-items:center; gap:10px; }
.topic-n{
  font-family:var(--sans); font-size:.66rem; font-weight:800; letter-spacing:.1em;
  color:var(--accent); background:var(--accent-tint); border:1px solid var(--accent-line);
  border-radius:var(--radius); padding:2px 9px;
}
.topic-h p{ margin:0; font-size:.94rem; line-height:1.58; color:var(--muted,var(--muted)); max-width:70ch; }
.topic-acts{ display:flex; gap:8px; flex-wrap:wrap; }

.pr-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px; }
.pr-grid-full{ grid-template-columns:1fr; gap:16px; max-width:78ch; }
.pr{
  display:flex; flex-direction:column; gap:8px; padding:18px 20px;
  border:1px solid var(--line,var(--line)); border-radius:var(--radius); background:var(--card-2);
}
.pr h4{ margin:0; font-size:1rem; line-height:1.35; }
.pr-use{ margin:0; font-size:.88rem; line-height:1.55; color:var(--muted,var(--muted)); flex:1; }
.pr-use span, .pr-why span{
  font-family:var(--sans); font-size:.62rem; font-weight:800; letter-spacing:.13em;
  text-transform:uppercase; color:var(--accent); margin-right:6px;
}
.pr-open{ width:fit-content; margin-top:2px; }
.pr-full{ background:var(--ground); scroll-margin-top:100px; }
.pr-body{
  margin:6px 0 0; padding:16px 18px; background:var(--card-2);
  border:1px solid var(--line,var(--line)); border-radius:var(--radius);
  font-family:var(--mono,ui-monospace,Menlo,Consolas,monospace);
  font-size:.82rem; line-height:1.62; color:var(--ink,var(--ink));
  white-space:pre-wrap; overflow-wrap:anywhere;
}
.pr-actions{ display:flex; gap:8px; }
.pr-why{
  margin:4px 0 0; padding-top:12px; border-top:1px solid var(--line,var(--line));
  font-size:.88rem; line-height:1.58; color:var(--muted,var(--muted));
}
.pr-why span{ color:var(--accent); }
.pr-flash{ animation:prflash 1.4s ease-out; }
@keyframes prflash{ 0%{ box-shadow:none; } 100%{ box-shadow:none; } }

.topic-more{
  appearance:none; cursor:pointer; margin-top:14px; width:100%;
  background:transparent; border:1px dashed var(--line,var(--line)); border-radius:var(--radius);
  padding:13px; font-family:var(--sans); font-size:.88rem; font-weight:600; color:var(--accent);
  transition:background .14s, border-color .14s;
}
.topic-more:hover{ background:var(--accent-tint); border-color:var(--accent-line); }

.pack-all-row{
  display:flex; gap:20px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  margin:8px 0 0; padding:20px 24px; border-radius:var(--radius);
  background:linear-gradient(160deg,var(--card-2) 0%,var(--accent-tint) 100%); border:1px solid var(--accent-line);
}
.pack-all-row strong{ color:var(--ink,var(--ink)); }

/* Topic page */
.topic-back{ margin-bottom:20px; }
.topic-head{ margin-bottom:26px; padding-bottom:22px; border-bottom:1px solid var(--line,var(--line)); }
.topic-head h2{ margin:6px 0 8px; font-size:1.6rem; }
.topic-head p{ margin:0 0 16px; color:var(--muted,var(--muted)); max-width:74ch; line-height:1.6; }
.kicker-b{
  font-family:var(--sans); font-size:.64rem; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent);
}
@media (max-width:640px){
  .pr-grid{ grid-template-columns:1fr; }
  .topic-acts{ width:100%; }
  .topic-acts .btn{ flex:1 1 auto; justify-content:center; }
  .pack-all-row{ padding:18px; }
  .pack-all-row .btn{ width:100%; justify-content:center; }
}

/* =====================================================================
   OVERVIEW — Zareli banner beneath the four cards
   Full width, its own weight, so the product reads as a destination
   rather than a peer of the portfolio sections.
   ===================================================================== */
.zbanner{
  appearance:none; cursor:pointer; text-align:left; font-family:inherit;
  display:grid; grid-template-columns:260px 1fr auto; align-items:center; gap:26px;
  width:100%; margin-top:16px; padding:0 28px 0 0;
  background:var(--ink-strong); border:1px solid var(--ink-strong); border-radius:var(--radius);
  overflow:hidden; color:var(--on-accent);
  transition:border-color .18s, transform .18s, box-shadow .18s;
}
.zbanner:hover{
  border-color:var(--accent); transform:translateY(-2px);
  box-shadow:none;
}
.zbanner:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.zbanner-img{
  display:block; align-self:stretch; min-height:150px;
  background:url("../assets/zareli/zareli-wall.jpg") center 42% / cover no-repeat;
}
.zbanner-body{ display:block; padding:24px 0; }
.zbanner-k{
  display:block; font-family:var(--sans); font-size:.64rem; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:8px;
}
.zbanner-h{
  display:block; font-family:var(--serif); font-size:1.5rem; font-weight:600;
  color:var(--on-accent); letter-spacing:.02em; margin-bottom:7px;
}
.zbanner-p{
  display:block; font-size:.94rem; line-height:1.58; color:var(--ink-mute); max-width:64ch;
}
.zbanner-cta{
  font-family:var(--sans); font-size:.9rem; font-weight:700; color:var(--accent); white-space:nowrap;
}
@media (max-width:820px){
  .zbanner{ grid-template-columns:1fr; padding:0 0 22px; gap:0; }
  .zbanner-img{ min-height:120px; }
  .zbanner-body{ padding:20px 22px 12px; }
  .zbanner-cta{ padding:0 22px; }
}

/* =====================================================================
   LIBRARY — hub, doors, collections, catalog, facets
   The hub is fixed-size; only the catalog grows. That's what lets this
   scale from 21 resources to 300 without a redesign.
   ===================================================================== */
.lib-search{ position:relative; max-width:520px; margin:0 0 26px; }
.lib-search input{
  width:100%; font-family:var(--sans); font-size:1rem; color:var(--ink);
  background:var(--ground); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 40px 14px 20px; appearance:none;
}
.lib-search input:focus{ outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
.lib-q-clear{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  appearance:none; border:0; background:none; cursor:pointer;
  font-size:1.3rem; line-height:1; color:var(--muted); padding:5px 10px;
}
.lib-search-inline{ margin:0; max-width:340px; }
.lib-search-inline input{ padding:10px 16px; font-size:.92rem; }

.lib-doors{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:44px; }
.lib-door{
  appearance:none; cursor:pointer; text-align:left; font-family:inherit;
  display:flex; flex-direction:column; gap:9px; padding:26px 28px;
  background:var(--card-2); border:1px solid var(--line); border-radius:var(--radius);
  transition:transform .16s, box-shadow .16s, border-color .16s;
}
.lib-door:hover{ transform:translateY(-2px); border-color:var(--accent-line);
  box-shadow:none; }
.lib-door:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.lib-door-n{
  font-family:var(--sans); font-size:1.9rem; font-weight:800; line-height:1;
  color:var(--accent);
}
.lib-door h3{ margin:0; font-size:1.12rem; }
.lib-door p{ margin:0; font-size:.94rem; line-height:1.58; color:var(--muted); flex:1; }
.lib-door-go{ font-family:var(--sans); font-size:.88rem; font-weight:700; color:var(--accent); }

.lib-h2{ margin:0 0 4px; font-size:1.2rem; }
.lib-sub{ margin:0 0 18px; font-size:.94rem; }
.lib-colls{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; margin-bottom:44px; }
.lib-coll{
  appearance:none; cursor:pointer; text-align:left; font-family:inherit;
  display:grid; gap:5px; padding:17px 19px; background:var(--ground);
  border:1px solid var(--line); border-radius:var(--radius);
  transition:border-color .15s, background .15s;
}
.lib-coll:hover{ border-color:var(--accent); background:var(--accent-tint); }
.lib-coll:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.lib-coll-n{
  font-family:var(--sans); font-size:.64rem; font-weight:800; letter-spacing:.1em;
  color:var(--accent); background:var(--accent-tint); border:1px solid var(--accent-line);
  border-radius:var(--radius); padding:2px 9px; width:fit-content;
}
.lib-coll strong{ color:var(--ink); font-size:.99rem; line-height:1.35; }
.lib-coll-note{ font-size:.85rem; color:var(--muted); line-height:1.5; }

.lib-recent{ margin-bottom:38px; }

/* Catalog */
.lib-back{ margin-bottom:18px; }
.lib-cat-head{ margin-bottom:18px; }
.lib-controls{ margin-bottom:22px; padding-bottom:20px; border-bottom:1px solid var(--line); }
.lib-facets{ display:grid; gap:10px; margin-top:14px; }
.lib-facet{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.lib-facet-k{
  flex:0 0 108px; font-family:var(--sans); font-size:.66rem; font-weight:800;
  letter-spacing:.11em; text-transform:uppercase; color:var(--muted);
}
.lib-chip{
  appearance:none; cursor:pointer; font-family:var(--sans); font-size:.79rem; font-weight:600;
  color:var(--muted); background:var(--ground); border:1px solid var(--line);
  border-radius:var(--radius); padding:5px 12px; transition:background .14s, color .14s, border-color .14s;
}
.lib-chip:hover{ background:var(--accent-tint); color:var(--ink); }
.lib-chip.on{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.lib-chip:focus-visible{ outline:2px solid var(--accent-deep); outline-offset:2px; }
.lib-clear{ margin-top:14px; }

.lib-type{
  display:inline-block; font-family:var(--sans); font-size:.6rem; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; padding:3px 9px; border-radius:var(--radius);
  margin-bottom:7px; color:var(--accent); background:var(--accent-tint); border:1px solid var(--accent-line);
}
.lib-type-tool, .lib-type-builder, .lib-type-tracker{ color:var(--accent); background:var(--on-accent); border-color:var(--on-accent); }
.lib-type-template, .lib-type-resource{ color:var(--accent); background:var(--on-accent); border-color:var(--on-accent); }
.lib-meta{
  list-style:none; margin:10px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:5px;
}
.lib-meta li{
  font-family:var(--sans); font-size:.72rem; color:var(--muted);
  background:var(--card-2); border-radius:var(--radius); padding:2px 9px;
}

@media (max-width:760px){
  .lib-doors{ grid-template-columns:1fr; }
  .lib-facet-k{ flex:1 1 100%; }
  .lib-search input{ font-size:.95rem; }
}

/* =====================================================================
   REQUEST FLOW — two entrances, one form
   ===================================================================== */
.lib-req-line{ margin:-12px 0 26px; font-size:.92rem; color:var(--muted); }
.lib-empty{
  text-align:center; padding:44px 26px; margin-top:8px;
  background:var(--card-2); border:1px dashed var(--line); border-radius:var(--radius);
}
.lib-empty h3{ margin:0 0 8px; font-size:1.14rem; }
.lib-empty p{ margin:0 auto 18px; max-width:56ch; color:var(--muted); line-height:1.6; }
.lib-empty .btn-row{ justify-content:center; }

.req{ position:fixed; inset:0; z-index:300; display:flex; align-items:flex-start; justify-content:center; }
.req[hidden]{ display:none; }
.req-scrim{ position:absolute; inset:0; background:var(--hair); backdrop-filter:blur(3px); }
.req-box{
  position:relative; margin:6vh auto; width:min(640px,calc(100vw - 28px));
  max-height:88vh; overflow-y:auto; padding:32px 34px 30px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:none;
}
.req-x{
  position:absolute; top:14px; right:16px; appearance:none; border:0; background:none;
  font-size:1.6rem; line-height:1; cursor:pointer; color:var(--muted); padding:2px 6px;
}
.req-x:hover{ color:var(--ink); }
.req-box h2{ margin:6px 0 8px; font-size:1.36rem; line-height:1.25; }
.req-lead{ margin:0 0 20px; color:var(--muted); line-height:1.6; }
.req-eg{
  margin:0 0 22px; padding:14px 17px; background:var(--accent-tint);
  border:1px solid var(--accent-line); border-radius:var(--radius); display:grid; gap:6px;
}
.req-eg span{
  font-family:var(--sans); font-size:.63rem; font-weight:800; letter-spacing:.13em;
  text-transform:uppercase; color:var(--accent-deep);
}
.req-eg em{ font-size:.9rem; color:var(--ink); line-height:1.5; }
.req-field{ margin-bottom:18px; }
.req-field label{
  display:block; margin-bottom:6px; font-family:var(--sans); font-size:.72rem;
  font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
}
.req-field textarea, .req-field input[type=email]{
  width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:var(--radius);
  font:inherit; font-size:.95rem; color:var(--ink); background:var(--ground); resize:vertical;
}
.req-field textarea:focus, .req-field input:focus{
  outline:0; border-color:var(--accent); box-shadow:none;
}
.req-help{ margin:6px 0 0; font-size:.82rem; color:var(--muted); line-height:1.5; }
.req-chips{ display:flex; gap:7px; flex-wrap:wrap; }
.req-chip{
  appearance:none; cursor:pointer; font-family:var(--sans); font-size:.85rem; font-weight:600;
  color:var(--muted); background:var(--ground); border:1px solid var(--line);
  border-radius:var(--radius); padding:8px 15px; transition:background .14s, color .14s, border-color .14s;
}
.req-chip:hover{ background:var(--accent-tint); color:var(--ink); }
.req-chip.on{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.req-chip:focus-visible{ outline:2px solid var(--accent-deep); outline-offset:2px; }
.req-optional{
  padding:16px 18px; margin-bottom:18px; background:var(--card-2);
  border:1px solid var(--line); border-radius:var(--radius);
}
.req-optional .req-field:last-child{ margin-bottom:0; }
.req-promise{
  margin:0 0 20px; padding:14px 17px; background:var(--ground); border-left:3px solid var(--accent);
  border-radius:var(--radius); font-size:.9rem; line-height:1.6; color:var(--muted);
}
.req-promise strong{ color:var(--ink); }
.req-actions{ display:flex; gap:9px; flex-wrap:wrap; }
.req-err{
  margin:12px 0 0; padding:10px 13px; background:var(--ground-2); border:1px solid var(--ink-mute);
  border-radius:var(--radius); font-size:.88rem; color:var(--accent);
}
@media (max-width:560px){
  .req-box{ margin:0; width:100vw; max-height:100vh; border-radius:var(--radius); padding:26px 18px; }
  .req-actions .btn{ flex:1 1 auto; justify-content:center; }
}

/* =====================================================================
   TOOL LIBRARY — hub
   The tools are the design. Twenty-three of them, each built with its own
   palette, so the front door shows the collection rather than describing
   it. Everything here is scoped to .lib- so it cannot leak into the other
   tabs or fight the Zareli theme.
   ===================================================================== */
.lib-hero{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr);
  gap:52px; align-items:start; padding:6px 0 34px;
}
.lib-hero-copy{ min-width:0; }
.lib-kicker{
  display:inline-flex; align-items:center; gap:9px; font-family:var(--sans);
  font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; color:var(--muted);
  border:1px solid var(--line); border-radius:var(--radius); padding:6px 14px; margin-bottom:24px;
  background:var(--card);
}
.lib-kicker i{ width:7px; height:7px; border-radius:var(--radius); background:var(--accent); font-style:normal; }
.lib-h1{
  font-size:clamp(2.1rem,4.6vw,3.3rem); line-height:1.07; letter-spacing:-.02em;
  margin-bottom:18px; max-width:26ch;
}
/* "today" is the point of the sentence, so it should read as emphasis rather
   than as an afterthought. Muted grey on its own line made it look orphaned;
   the accent underline puts the weight where the meaning is. */
.lib-h1 em{
  font-style:normal; color:var(--ink);
  box-shadow:none;
}
.lib-lead{ font-size:1.04rem; line-height:1.62; color:var(--body); max-width:56ch; margin-bottom:28px; }
.lib-lead strong{ color:var(--ink); }

.lib-find{ display:flex; gap:9px; max-width:600px; margin-bottom:12px; position:relative; }
.lib-find input{
  flex:1; background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:15px 17px; color:var(--ink); font:inherit; font-size:1rem;
}
.lib-find input::placeholder{ color:var(--muted); }
.lib-find input:focus{ outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
.lib-sugg{
  position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:30;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:none;
}
.lib-sugg[hidden]{ display:none; }
.lib-sugg button{
  display:flex; width:100%; gap:12px; align-items:center; text-align:left;
  background:none; border:0; border-bottom:1px solid var(--line-soft);
  padding:10px 13px; color:var(--ink); font:inherit; cursor:pointer;
}
.lib-sugg button:last-child{ border-bottom:0; }
.lib-sugg button:hover{ background:var(--card-2); }
.lib-sugg img{ width:56px; height:35px; object-fit:cover; border-radius:var(--radius); border:1px solid var(--line); flex:0 0 auto; }
.lib-sugg .t{ font-size:.92rem; }
.lib-sugg .m{ margin-left:auto; font-family:var(--sans); font-size:.68rem; color:var(--muted);
  letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
.lib-sugg .none{ padding:14px; color:var(--body); font-size:.9rem; }
.lib-sugg .none strong{ color:var(--ink); }
.lib-ask{ font-size:.9rem; color:var(--muted); }

/* featured tool */
.lib-feat{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.lib-feat img{ width:100%; display:block; border-bottom:1px solid var(--line); }
.lib-feat .b{ padding:19px 21px 21px; }
.lib-feat .k{ font-family:var(--sans); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent-2); display:block; margin-bottom:8px; }
.lib-feat h3{ font-size:1.06rem; margin-bottom:6px; }
.lib-feat p{ color:var(--body); font-size:.9rem; line-height:1.55; margin-bottom:13px; }
.lib-feat .go{ font-size:.88rem; font-weight:700; color:var(--accent); }

/* the drifting wall */
.lib-wall{ display:grid; gap:22px; padding:14px 0 44px;
  /* clip-path on the strips controls painting; this controls layout, so
     off-screen tiles cannot widen the document */
  overflow-x:clip;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
/* Clip sideways only. `overflow:hidden` clips both axes, which cut the top of a
   hovered tile and swallowed its shadow; clip-path lets the tile grow upward and
   downward while still hiding the recycling at the edges. */
/* THE WALL IS TEXTURE, NOT BROWSING, and the sizes follow from that.

   Nobody identifies a tool from a moving tile at any size. Its job is "there
   are a lot of these and they are real screenshots"; its job is not "pick
   one" -- the catalog directly below it does that. So the tile is enlarged
   enough to read as a real interface and no further. Making it browsable
   would duplicate /work on a page that already has that surface.

   THE ASPECT RATIO WAS A BUG INDEPENDENT OF SIZE. Thumbnails are 900x563
   (1.60) and the tile box was 196x108 (1.81), so object-fit:cover cropped
   BOTH axes -- sides off to reach 1.81, then the remainder scaled to a third
   of native width. Matching the box to 1.60 removes the double crop at no
   cost: 300 / (900/563) = 187.7, so 188.

   TW IN script.js IS THIS WIDTH PLUS THE GAP and must move with it. They are
   two halves of one number in two files. */
.lib-strip{ position:relative; height:241px; overflow:visible;
  clip-path:inset(-26px 0 -26px 0); }
.lib-tile{ position:absolute; top:0; left:0; width:300px; will-change:transform;
  cursor:pointer; text-align:left; padding:0; font:inherit; color:inherit;
  background:none; border:0; }
/* No transition on the outer element — it is repositioned instantly when a tile
   wraps around, and any transition on transform turns that jump into a visible
   flight across the screen. */
.lib-tile-in{ display:block; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line); background:var(--card);
  transition:transform .22s ease, border-color .22s, box-shadow .22s; }
.lib-tile img{ width:100%; height:188px; object-fit:cover; display:block;
  filter:saturate(.9) brightness(.98); transition:filter .25s; }
.lib-tile .cap{ padding:8px 10px 9px; display:block; }
.lib-tile .nm{ display:block; font-size:.78rem; line-height:1.25; color:var(--ink); font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  border-left:3px solid var(--tint,transparent); padding-left:7px; }
.lib-tile .ty{ display:block; font-family:var(--sans); font-size:.6rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent-2); margin-top:3px; padding-left:10px; }
.lib-tile:hover, .lib-tile:focus-visible{ z-index:5; }
.lib-tile:hover .lib-tile-in{ transform:translateY(-5px) scale(1.05); border-color:var(--accent);
  box-shadow:none; }
.lib-tile:hover img{ filter:none; }
.lib-tile-in img{ display:block; }
.lib-tile:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.lib-tile.said .lib-tile-in{ display:flex; align-items:center; justify-content:center; height:234px;
  background:var(--card-2); border-style:dashed; padding:14px; text-align:center; cursor:default; }
.lib-tile.said .lib-tile-in > span{ font-size:.85rem; line-height:1.45; color:var(--body); }
.lib-tile.said .lib-tile-in b{ display:block; font-size:.93rem; color:var(--accent); margin-bottom:6px; font-weight:700; }

/* doors */
.lib-doors{ display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin:0 0 60px; }
.lib-door{ background:var(--card); padding:30px 30px 28px; cursor:pointer; text-align:left;
  border:0; color:inherit; font:inherit; display:block; transition:background .18s; }
.lib-door:hover{ background:var(--card-2); }
.lib-door:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.lib-dk{ font-family:var(--sans); font-size:.66rem; letter-spacing:.15em; text-transform:uppercase;
  display:block; margin-bottom:11px; }
.lib-door.g .lib-dk{ color:var(--accent); }
.lib-door.t .lib-dk{ color:var(--accent); }
.lib-door h3{ font-size:1.2rem; margin-bottom:7px; }
.lib-door p{ color:var(--body); font-size:.94rem; line-height:1.6; margin-bottom:16px; max-width:44ch; }
.lib-go{ font-size:.9rem; font-weight:700; color:var(--accent); display:inline-block; transition:transform .2s; }
.lib-door:hover .lib-go{ transform:translateX(4px); }

/* sections */
.lib-sec{ margin-bottom:58px; }
.lib-sec-h{ display:flex; align-items:baseline; gap:15px; flex-wrap:wrap;
  padding-bottom:12px; border-bottom:1px solid var(--line); margin-bottom:22px; }
.lib-sec-h h2{ font-size:1.24rem; }
.lib-sec-h span{ font-family:var(--sans); font-size:.74rem; color:var(--muted);
  letter-spacing:.1em; text-transform:uppercase; }
.lib-sec-h .r{ margin-left:auto; font-size:.86rem; text-transform:none; letter-spacing:0; }

.lib-shelf{ display:flex; gap:12px; overflow-x:auto; padding-bottom:10px; }
.lib-coll2{ flex:0 0 auto; min-width:230px; max-width:262px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--radius); padding:19px; cursor:pointer;
  text-align:left; color:inherit; font:inherit;
  transition:border-color .16s, background .16s, transform .16s; }
.lib-coll2:hover{ border-color:var(--accent); background:var(--card-2); transform:translateY(-2px); }
.lib-coll2:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.lib-coll2 .c{ font-family:var(--sans); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); display:block; margin-bottom:8px; }
.lib-coll2 strong{ display:block; font-size:.99rem; line-height:1.35; margin-bottom:6px; }
.lib-coll2 span:last-child{ font-size:.85rem; color:var(--muted); line-height:1.5; }

.lib-recent{ display:grid; gap:13px; }
.lib-row{ display:grid; grid-template-columns:262px 1fr auto; gap:22px; align-items:center;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:13px;
  cursor:pointer; text-align:left; color:inherit; font:inherit;
  transition:border-color .16s, background .16s; }
.lib-row:hover{ border-color:var(--accent); background:var(--card-2); }
.lib-row:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.lib-row img{ width:100%; height:152px; object-fit:cover; border-radius:var(--radius); display:block; border:1px solid var(--line); }
.lib-row h3{ font-size:1.1rem; margin-bottom:6px; }
.lib-row p{ color:var(--body); font-size:.92rem; line-height:1.56; max-width:62ch; margin-bottom:11px; }
.lib-row .arrow{ font-size:1.3rem; color:var(--muted); padding-right:8px; transition:transform .2s; }
.lib-row:hover .arrow{ transform:translateX(5px); color:var(--accent); }

/* the menu — text only */
.lib-grp{ margin-bottom:28px; }
.lib-grp h3{ font-size:.96rem; font-weight:700; margin-bottom:3px; }
.lib-grp .lead2{ font-size:.86rem; color:var(--muted); margin-bottom:12px; }
.lib-item{ display:grid; grid-template-columns:1fr auto; gap:18px; align-items:baseline;
  width:100%; text-align:left; background:none; border:0; border-top:1px solid var(--line-soft);
  padding:12px 4px; color:inherit; font:inherit; cursor:pointer; transition:background .14s; }
.lib-item:last-child{ border-bottom:1px solid var(--line-soft); }
.lib-item:hover{ background:var(--card); }
.lib-item:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.lib-item .nm2{ display:block; font-size:.98rem; font-weight:600; margin-bottom:3px; }
.lib-item .ds{ display:block; font-size:.87rem; color:var(--body); line-height:1.5; }
.lib-item .r2{ font-family:var(--sans); font-size:.72rem; color:var(--muted); white-space:nowrap; letter-spacing:.03em; }

}

@media (max-width:960px){ .lib-hero{ grid-template-columns:1fr; gap:32px; } }
/* On a narrow screen the headline wraps to two lines with "today" alone on the
   second — which reads as an orphan. Shrink it just enough to fit one line
   rather than forcing a non-breaking space, which overflows a 360px screen. */
@media (max-width:430px){
  .lib-h1{ font-size:clamp(1.55rem,7.4vw,2.1rem); letter-spacing:-.025em; }
}
@media (max-width:820px){
  .lib-doors{ grid-template-columns:1fr; }
  .lib-row{ grid-template-columns:1fr; gap:13px; }
  .lib-row img{ height:180px; }
  .lib-row .arrow{ display:none; }
}
@media (max-width:700px){ .lib-item{ grid-template-columns:1fr; gap:5px; } .lib-item .r2{ white-space:normal; } }
@media (prefers-reduced-motion:reduce){ .lib-tile-in{ transition:none; } }

/* =====================================================================
   READING WIDTH
   The container was widened to fill a 1080p screen, which is right for
   grids and the tool wall — but body prose inherited it and ran to ~193
   characters a line. Anything past ~80 is hard to track back to the start
   of the next line. Cap the prose; leave the layout wide.
   ===================================================================== */
#tab-about p,
#tab-about li,
#tab-home p,
#tab-showcase p,
#tab-showcase li,
#tab-library .lib-sec p:not(.lead2){
  max-width:72ch;
}
/* Cards and grids set their own width; only free-running prose is capped. */
#tab-showcase .work-card p,
#tab-showcase .work-detail-grid p,
#tab-showcase .tmpl-note p{ max-width:none; }
/* Elements that are deliberately full-width keep their own constraint */
#tab-about .card p,
#tab-about .prompt-card p,
#tab-home .map-card p,
#tab-home .zbanner-p{ max-width:none; }

/* On a phone the search field and its button do not fit side by side —
   the button was pushing past the right edge. Stack them. */
@media (max-width:430px){
  .lib-find{ flex-wrap:wrap; }
  .lib-find input{ flex:1 1 100%; }
  .lib-find .btn{ flex:1 1 100%; }
  /* The collection shelf is a horizontal scroller, so its children are meant to
     sit past the edge — but it must not widen the page itself. */
  .lib-shelf{ margin-inline:-18px; padding-inline:18px; }
}

/* Proof strip under the hero headline — three counted facts, no prose. */
.proof{ list-style:none; display:flex; flex-wrap:wrap; gap:34px; margin:26px 0 28px; padding:0; }
.proof li{ display:block; }
.proof b{ display:block; font-size:2.1rem; font-weight:800; line-height:1;
  letter-spacing:-.02em; color:var(--accent); margin-bottom:5px; }
.proof span{ display:block; font-size:.88rem; color:var(--muted); line-height:1.45; max-width:22ch; }
.story{ margin:0 0 46px; }
.story p{ color:var(--body); line-height:1.68; max-width:72ch; }
@media (max-width:600px){ .proof{ gap:22px; } .proof b{ font-size:1.7rem; } }

/* About: the AI lessons read better as a list than as six sub-headings. */
.ai-lessons{ list-style:none; margin:16px 0 0; padding:0; display:grid; gap:13px; }
.ai-lessons li{ padding-left:16px; border-left:2px solid var(--accent-line);
  color:var(--body); line-height:1.62; max-width:72ch; }
.ai-lessons strong{ color:var(--ink); }

/* About: the left rail carries identity and the two things a hiring manager
   wants — email and the resume — so neither is buried under 1,400 words.
   Sticky, so they stay reachable the whole way down. */
@media (min-width:900px){
  .about-side{ position:sticky; top:96px; align-self:start; }
}
.side-reach{ margin-top:22px; padding-top:20px; border-top:1px solid var(--line);
  display:grid; gap:9px; }
.side-reach .btn{ justify-content:center; width:100%; }
.side-note{ margin-top:4px; font-size:.84rem; line-height:1.55; color:var(--muted); }
/* The break is inside the text column now, so it should not span the rail. */
.about-body .z-break{ margin-left:0; margin-right:0; }

/* The circle frame stays; the initials become the photo. A ring in the accent
   keeps it reading as a deliberate frame rather than a cropped snapshot. */
.avatar{
  width:140px; height:140px;
  box-shadow:none;
}
.avatar img{ display:block; }
@media (max-width:900px){ .avatar{ width:112px; height:112px; } }

/* =====================================================================
   FREE TOOLS — separation and intent

   The tab had grown into one undifferentiated stack: two doors, a shelf of
   collections, three recent cards and a 31-row text list, all at the same
   visual weight, one after another. Tyler: "break up this cluster a little
   it's confusing." Each block is now a NUMBERED STEP with real air between
   them, and the flat list is gone — the full list lives in the catalog,
   which is where filtering already works.
   ===================================================================== */
.lib-step{ margin-bottom:74px; }
.lib-step:last-of-type{ margin-bottom:56px; }
.lib-step .lib-sec-h{ align-items:baseline; }
.lib-step-n{
  flex:0 0 auto; width:26px; height:26px; border-radius:var(--radius);
  display:grid; place-items:center; align-self:center;
  background:var(--accent-tint); border:1px solid var(--accent-line);
  color:var(--accent-deep); font-family:var(--sans); font-size:.76rem; font-weight:700;
}
.lib-skip{ font-family:var(--sans); font-size:.84rem; font-weight:600; }
.lib-skip span{ font-size:inherit; letter-spacing:0; text-transform:none; color:inherit; }

/* The closer. A light gradient panel rather than another bordered card, so
   the page ends on something that reads as a destination instead of one more
   item in the stack. */
.lib-closer{
  display:block; width:100%; text-align:left; cursor:pointer; font:inherit; color:inherit;
  border:1px solid var(--accent-line); border-radius:var(--radius);
  padding:44px 46px 40px;
  background:linear-gradient(165deg, var(--ground-2) 0%, var(--card) 34%, var(--accent-tint) 100%);
  transition:border-color .18s, box-shadow .18s, transform .18s;
}
.lib-closer:hover{ border-color:var(--accent-mid); box-shadow:none; transform:translateY(-2px); }
.lib-closer:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.lib-closer-k{
  display:block; font-family:var(--sans); font-size:.72rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--accent-deep); margin-bottom:10px;
}
.lib-closer-h{
  display:block; font-family:var(--serif); font-size:clamp(1.7rem,3.2vw,2.4rem);
  font-weight:700; color:var(--ink); line-height:1.15; margin-bottom:12px;
}
.lib-closer-p{
  display:block; font-family:var(--sans); font-size:.98rem; line-height:1.62;
  color:var(--body); max-width:62ch; margin-bottom:20px;
}
.lib-closer-g{
  display:inline-block; font-family:var(--sans); font-size:.9rem; font-weight:700;
  color:var(--accent-deep);
}
@media (max-width:720px){
  .lib-closer{ padding:30px 24px 28px; border-radius:var(--radius); }
  .lib-step{ margin-bottom:52px; }
}
@media (prefers-reduced-motion:reduce){
  .lib-closer{ transition:none; }
  .lib-closer:hover{ transform:none; }
}

/* =====================================================================
   CATALOG — a directory on the left, results on the right

   Five stacked rows of filter pills above a 3-across grid meant the
   controls pushed the results down and the cards were 493px wide. The rail
   holds search, the directory and the facets in one column; the grid runs
   four across at a size you can actually scan.
   ===================================================================== */
.lib-layout{ display:grid; grid-template-columns:250px minmax(0,1fr); gap:34px; align-items:start; }
.lib-rail{ position:sticky; top:18px; display:flex; flex-direction:column; gap:20px; }
.lib-rail .lib-search-inline input{ width:100%; }

.lib-dir{ display:flex; flex-direction:column; gap:2px; }
.lib-dir-b{
  appearance:none; cursor:pointer; text-align:left; font:inherit; color:inherit;
  background:none; border:0; border-left:2px solid transparent;
  padding:9px 12px; border-radius:var(--radius); transition:background .15s, border-color .15s;
}
.lib-dir-b:hover{ background:var(--card-2); }
.lib-dir-b.on{ background:var(--accent-tint); border-left-color:var(--accent); }
.lib-dir-b:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.lib-dir-t{ display:block; font-family:var(--sans); font-size:.95rem; font-weight:700; color:var(--ink); }
.lib-dir-d{ display:block; font-family:var(--sans); font-size:.78rem; color:var(--muted); margin-top:1px; }

.lib-layout .lib-facets{ display:flex; flex-direction:column; gap:15px; margin:0;
  padding-top:18px; border-top:1px solid var(--line); }
.lib-layout .lib-facet{ display:block; }
.lib-layout .lib-facet-k{ display:block; margin-bottom:7px; }
.lib-facet-o{ display:flex; flex-wrap:wrap; gap:5px; }
.lib-layout .lib-chip{ font-size:.76rem; padding:4px 9px; }

.lib-results{ min-width:0; }
.lib-grid4{ grid-template-columns:repeat(4, minmax(0,1fr)) !important; gap:18px !important; }
.lib-grid4 .work-card h3, .lib-grid4 .card h3{ font-size:1rem; }
.lib-grid4 .work-card p,  .lib-grid4 .card p{ font-size:.86rem; line-height:1.5; }

@media (max-width:1400px){ .lib-grid4{ grid-template-columns:repeat(3, minmax(0,1fr)) !important; } }
@media (max-width:1080px){
  .lib-layout{ grid-template-columns:1fr; gap:22px; }
  .lib-rail{ position:static; }
  .lib-grid4{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width:640px){ .lib-grid4{ grid-template-columns:1fr !important; } }

/* =====================================================================
   LIVE CONFIGURATOR — preview left, options right

   Modelled on how product configurators actually work: the preview is the
   hero, the options sit beside it, and every pick lands in the preview
   instantly rather than after a reload. The rail only appears once the tool
   has answered with what it offers, so it can never advertise a setting a
   tool does not have.
   ===================================================================== */
.live-stage{ display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:0; align-items:stretch; }
.live-demo:not(.has-rail) .live-stage{ grid-template-columns:minmax(0,1fr); }

.live-rail{
  border-left:1px solid var(--line); background:var(--card-2);
  padding:20px 18px; display:flex; flex-direction:column; gap:18px;
  animation:live-rail-in .35s ease both;
}
@keyframes live-rail-in{ from{opacity:0; transform:translateX(10px)} to{opacity:1; transform:none} }
.live-rail-k{
  font-family:var(--sans); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent-deep);
}
.live-rail-note{ font-family:var(--sans); font-size:.82rem; line-height:1.5;
  color:var(--muted); margin:-10px 0 0; }
.live-rail-foot{ font-family:var(--sans); font-size:.76rem; color:var(--muted);
  margin:auto 0 0; padding-top:14px; border-top:1px solid var(--line); }
.live-opt-k{ display:block; font-family:var(--sans); font-size:.68rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.live-opt-row{ display:flex; flex-wrap:wrap; gap:6px; }
.live-chip{
  appearance:none; cursor:pointer; font-family:var(--sans); font-size:.8rem;
  background:var(--card); color:var(--body); border:1px solid var(--line);
  border-radius:var(--radius); padding:6px 12px; transition:border-color .16s,color .16s,background .16s;
}
.live-chip:hover{ border-color:var(--accent-mid); color:var(--ink); }
.live-chip.on{ background:var(--accent-tint); border-color:var(--accent); color:var(--accent-deep); font-weight:700; }
.live-chip:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

@media (max-width:900px){
  .live-stage{ grid-template-columns:minmax(0,1fr); }
  .live-rail{ border-left:0; border-top:1px solid var(--line); }
  .live-rail-foot{ margin-top:6px; }
}
@media (prefers-reduced-motion:reduce){ .live-rail{ animation:none; } }

/* The support line. Deliberately quiet and deliberately last — it sits
   under the way into the library, not above it, because the tools being free
   is the point and the tip jar is an afterthought. */
.lib-support{
  font-family:var(--sans); font-size:.86rem; line-height:1.6;
  color:var(--muted); margin:18px 0 0; max-width:60ch;
}
.lib-support a{ color:var(--accent-deep); font-weight:600; }
.lib-support a:hover{ text-decoration:underline; }

/* ── The offline / live split on Free Tools ───────────────────────────────
   Two panels, deliberately unequal in weight: the downloadable side is the
   promise this library runs on and it leads, while the live side is the one
   exception and is marked as one rather than blended in. Every live entry
   carries its offline stand-in directly underneath it, because the person
   who needs that link is standing in a room with no wifi. */
.lib-split{
  display:grid; grid-template-columns:1.15fr .85fr; gap:18px;
  margin:34px 0 6px;
}
@media (max-width:840px){ .lib-split{ grid-template-columns:1fr; } }

.lib-side{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:22px 24px 24px;
  display:flex; flex-direction:column; align-items:flex-start;
}
.lib-side-off{ border-top:3px solid var(--accent); }
.lib-side-live{ border-top:3px solid var(--ink-mute); background:var(--card-2); }

.lib-side-k{
  font-family:var(--sans); font-size:.7rem; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase; color:var(--accent);
}
.lib-side-k-live{ color:var(--ink-mute); }

.lib-side-h{
  font-family:var(--serif); font-size:1.9rem; font-weight:600;
  color:var(--ink); margin:6px 0 8px; line-height:1.1;
}
.lib-side-h b{ font-weight:700; }

.lib-side-p{
  font-family:var(--sans); font-size:.93rem; line-height:1.6;
  color:var(--body); margin:0 0 10px; max-width:52ch;
}
.lib-side-p strong{ color:var(--ink); }
.lib-side-sub{
  font-family:var(--sans); font-size:.84rem; line-height:1.55;
  color:var(--muted); margin:0 0 14px;
}
.lib-side-go{ margin-top:auto; }

/* ── a live tool, with its fallback attached ──────────────────────────── */
.lib-live-item{ width:100%; margin-top:4px; }
.lib-live-item + .lib-live-item{ margin-top:14px; }

.lib-live-open{
  display:flex; align-items:center; gap:13px; width:100%;
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:10px 12px;
  cursor:pointer; text-align:left; font:inherit; color:inherit;
}
.lib-live-open:hover{ border-color:var(--accent-line); }
.lib-live-open img{
  width:96px; height:60px; object-fit:cover; border-radius:var(--radius);
  border:1px solid var(--line-soft); flex:none;
}
.lib-live-t{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.lib-live-t strong{
  font-family:var(--sans); font-size:.98rem; font-weight:650; color:var(--ink);
}
.lib-live-t em{
  font-style:normal; font-family:var(--sans); font-size:.78rem; color:var(--muted);
}

.lib-live-fb{
  font-family:var(--sans); font-size:.85rem; line-height:1.55;
  color:var(--body); margin:8px 0 0; padding-left:12px;
  border-left:2px solid var(--ink-mute);
}
.lib-live-fbk{ font-weight:700; color:var(--ink-mute); }

/* ── the live marker on a detail page ─────────────────────────────────── */
.live-needs{
  font-family:var(--sans); font-size:.88rem; line-height:1.6;
  color:var(--body); margin:12px 0 0; padding:10px 14px;
  background:var(--card-2); border:1px solid var(--line);
  border-left:3px solid var(--ink-mute); border-radius:var(--radius-sm);
  max-width:64ch;
}
.live-needs strong{ color:var(--ink-mute); }
.filetag-live{ color:var(--ink-mute); font-weight:700; }

/* ===== The library masthead ==========================================
   The old masthead carried an identity block, a business card and five
   tabs. One section is left, so there is nothing to tab between, and the
   identity belongs on the front door. What stays is the way back --
   without it this page is a dead end for anyone arriving from a search
   result or a tool page. */
.lib-masthead .masthead-inner{ display:flex; align-items:center;
  justify-content:space-between; gap:16px; padding:14px 28px; }
.lib-back{ font-family:var(--sans); font-size:.92rem; font-weight:600;
  color:var(--muted); text-decoration:none; display:inline-flex;
  align-items:center; min-height:26px; transition:color .15s; }
.lib-back:hover{ color:var(--ink); }
.lib-where{ font-family:var(--sans); font-size:.82rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted); }

/* The counted size line under the library heading. Written in at build
   time, so it is right with JavaScript off. */
.lib-size{ font-size:.95rem; color:var(--muted); margin:-4px 0 18px; }

/* Catalog cards are anchors now rather than articles listening for a
   click, so they need the one thing an <a> brings with it. */
a.work-card{ text-decoration:none; }
a.work-card:hover .work-card-title{ color:var(--accent-deep); }