/* ==========================================================================
   IVORY — the redesign preview served at /new (davidbudac.cz/new/).
   Source of truth: mockups/redesign-r5/6b-ivory.html + ivory/*.css (6b).
   Identity: ivory ground, slate ink, hairlines, one clay element per
   section, Geist / Geist Mono (bundled in fonts/, OFL), 2px radii.
   This file = ivory-web.css + the 6b "quiet" overrides, concatenated.
   ========================================================================== */
/* ==========================================================================
   IDENTITY 6 — IVORY
   Idea:    the Ivory slide system (agentic-talks) brought to the web: one
            ivory ground, slate ink, hairlines for every separation, one clay
            element per section, Geist everywhere. No cards, pills, shadows,
            gradients or tints; 2px corners; mono labels in small caps.
   Light:   ivory #FAF9F5 · paper #F0EEE6 (code / figure panels)
            slate #141413 · body #2E2E2B · ink2 #5E5D59 · faint #8A877E
            rule #C9C3B4 · clay #D97757 · clay-ink #C6613F
   Dark:    (Ivory is light-only by spec; this is a derived "night" variant
            so the site keeps its toggle) ground #141413 · panel #1D1C1A
            slate #FAF9F5 · body #E4E1D9 · ink2 #A9A59B · faint #7E7A71
            rule #3B3935 · clay #D97757 · clay-ink #E0906F
   Fonts:   Geist 400/500/600 (display + body), Geist Mono 400/500 (labels,
            counters, numbers, code). Bundled woff2, OFL, no network.
   Mark:    a 10px clay square with a 2px radius (favicon: the same square)
   Details: 2px radii only on panels and buttons, 1px hairlines, 1.5px strong
            rule under table headers and the hero spec header, uppercase
            mono labels tracked .08em, section counters "01 / 07", tags as
            mono labels separated by middle dots, buttons as 2px rectangles,
            figures on paper panels with slate strokes and one clay element,
            no hero circle echo, no crop marks. Uppercase mono only for
            section counters and table heads; nav, kicker, spec labels and
            footer are sentence case. One easing (--ease), two durations.
   ========================================================================== */

@font-face{font-family:"Geist";font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/geist-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Geist";font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/geist-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:400 500;font-display:swap;src:url(fonts/geist-mono-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:400 500;font-display:swap;src:url(fonts/geist-mono-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  /* Ivory tokens (normative values from ivory_design_system/DESIGN.md §3) */
  --ivory:#FAF9F5; --paper:#F0EEE6; --slate:#141413; --body:#2E2E2B;
  --ink2:#5E5D59; --faint:#8A877E; --rule:#C9C3B4; --clay:#D97757; --clay-ink:#C6613F;
  --rule-soft:#E4E1D8; /* web-only: quiet row dividers */

  /* page aliases used by the Spec layout */
  --bg:var(--ivory); --surface:var(--paper);
  --line:var(--rule); --line-2:var(--rule);
  --text:var(--slate); --text-2:var(--body); --text-3:var(--ink2);
  --accent:var(--clay); --accent-ink:var(--clay-ink);
  --diag:var(--rule); --diag-2:var(--slate);
  --btn-bg:var(--slate); --btn-bg-h:var(--body); --btn-fg:var(--ivory);

  --sans:"Geist",system-ui,sans-serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --f-display:var(--sans); --f-body:var(--sans); --f-mono:var(--mono);

  --hair:1px; --strong:1.5px; --stroke:2px; --r:2px;
  --ease:cubic-bezier(.2,.7,.2,1); --t-fast:.15s; --t-mid:.25s;
  --max:1200px; --gut:32px; --rail:240px;
  color-scheme:light;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ivory:#141413; --paper:#1D1C1A; --slate:#FAF9F5; --body:#E4E1D9;
  --ink2:#A9A59B; --faint:#7E7A71; --rule:#3B3935; --rule-soft:#272624; --clay:#D97757; --clay-ink:#E0906F;
  --btn-bg:#FAF9F5; --btn-bg-h:#FFFFFF; --btn-fg:#141413;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  --ivory:#141413; --paper:#1D1C1A; --slate:#FAF9F5; --body:#E4E1D9;
  --ink2:#A9A59B; --faint:#7E7A71; --rule:#3B3935; --rule-soft:#272624; --clay:#D97757; --clay-ink:#E0906F;
  --btn-bg:#FAF9F5; --btn-bg-h:#FFFFFF; --btn-fg:#141413;
}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:72px}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--f-body);font-size:16px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums lining-nums;
  animation:fade .4s var(--ease) both;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
img,svg{display:block;max-width:100%}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
h1,h2,h3{text-wrap:balance;font-family:var(--f-display);font-weight:600}
p{text-wrap:pretty}
ul,ol{padding:0;list-style:none}
b,strong{font-weight:500;color:var(--text)}
a{color:inherit;text-decoration:none;transition:color var(--t-fast) var(--ease)}
:focus-visible{outline:2px solid var(--slate);outline-offset:3px;border-radius:2px}
code{font-family:var(--mono);font-size:.92em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:-9999px;top:8px;background:var(--bg);padding:8px 12px;border:1px solid var(--line);z-index:10}
.skip:focus{left:16px}

/* Ivory mono label: 500, uppercase, tracked .08em */
.mono,.lab{font-family:var(--mono);letter-spacing:0}
.lab,.th,.rail__idx,.kv dt,.spec dt,.post__date,.job__years,.cert__yr,.eng__meta,.pill,.latest,.sub .mono,.talk__topic span,.contact__mail{
  font-family:var(--mono);font-size:12px;line-height:1.4;font-weight:500;
  text-transform:uppercase;letter-spacing:.08em;
}

/* inline links: inherit colour, 1.5px ink2 underline, clay on hover */
.ul{
  color:var(--text);
  background-image:linear-gradient(var(--ink2),var(--ink2));
  background-size:100% 1.5px;background-position:0 100%;background-repeat:no-repeat;
  padding-bottom:1px;transition:color var(--t-fast) var(--ease);
}
.ul:hover,.ul:focus-visible{color:var(--clay-ink);background-image:linear-gradient(var(--clay),var(--clay))}
.ul--accent{color:var(--text)}
.arr{display:inline-block;margin-left:.3em;transition:transform var(--t-mid) var(--ease)}
a:hover .arr,a:focus-visible .arr{transform:translateX(3px)}

/* ---------- top bar: the slide head ---------- */
.bar{position:sticky;top:0;z-index:5;background:var(--bg);border-bottom:var(--hair) solid var(--line)}
.bar__in{min-height:56px;display:flex;align-items:center;gap:24px}
.brand{color:var(--text);font-weight:600;font-size:18px;letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
.brand__mark{width:10px;height:10px;border-radius:var(--r);background:var(--clay);flex:none}
.links{display:flex;align-items:stretch;gap:24px;margin-left:auto;align-self:stretch}
.links a{position:relative;display:flex;align-items:center;font-size:14px;color:var(--ink2)}
.links a:hover{color:var(--text)}
.links a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:var(--strong);background:var(--slate);transform:scaleX(0);transition:transform var(--t-mid) var(--ease)}
.links a.is-active{color:var(--text)}
.links a.is-active::after{transform:scaleX(1)}
.tools{display:flex;align-items:center;gap:4px;padding-left:20px;border-left:var(--hair) solid var(--line);align-self:stretch}
.icon-btn{width:32px;height:32px;display:grid;place-items:center;border-radius:var(--r);color:var(--ink2);background:none;border:0;cursor:pointer;padding:0;transition:color var(--t-fast) var(--ease)}
.icon-btn:hover{color:var(--text)}
.icon-btn svg{width:16px;height:16px}
.btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:var(--r);font-size:14px;font-weight:500;border:var(--hair) solid transparent;transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease)}
.btn:active{transform:scale(.98)}
.btn--solid{background:var(--btn-bg);color:var(--btn-fg);border-color:var(--btn-bg)}
.btn--solid:hover{background:var(--btn-bg-h);border-color:var(--btn-bg-h)}
.btn--line{border-color:var(--slate);color:var(--text);background:transparent}
.btn--line:hover{color:var(--clay-ink);border-color:var(--clay)}
.tools .btn{height:32px;font-size:14px;margin-left:12px;padding:0 12px}

/* ---------- hero: the title slide ---------- */
.hero{padding:72px 0 72px;position:relative}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:96px;align-items:start}
.hero__kicker{color:var(--clay-ink);margin-bottom:28px;font-size:14px;text-transform:none;letter-spacing:0} /* the title slide's one clay label */
.hero h1{font-size:72px;line-height:.96;font-weight:600;letter-spacing:-.04em}
.hero__lead{margin-top:28px;font-size:18px;line-height:1.6;color:var(--body);max-width:36em}
.hero__lead strong{color:var(--text);font-weight:500}
.hero__cta{margin-top:32px;display:flex;gap:12px;flex-wrap:wrap}

/* hero spec table — Ivory definition rows */
.frame{position:relative;padding-top:8px}
.crop{display:none}
.spec{border-top:var(--strong) solid var(--slate)}
.spec__head{display:flex;align-items:center;gap:16px;padding:16px 0;border-bottom:var(--hair) solid var(--line)}
.spec__contact{display:grid;gap:4px;font-size:14px;min-width:0;text-transform:none;letter-spacing:0;font-weight:400}
.spec__contact a{overflow-wrap:anywhere}
.mailrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.copy{font:inherit;font-family:var(--mono);font-size:12px;line-height:1;color:var(--ink2);background:none;border:var(--hair) solid var(--rule);border-radius:var(--r);padding:4px 8px;cursor:pointer;transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.copy:hover{color:var(--text);border-color:var(--slate)}
.copy.is-done{color:var(--clay-ink);border-color:var(--clay)}
.spec dl{display:grid;grid-template-columns:120px 1fr;padding-top:8px}
.spec dl > div{display:contents}
.spec dl > div[hidden]{display:none}
.spec dt,.spec dd{padding:8px 0;font-size:14px;line-height:1.5}
.spec dt{color:var(--ink2);padding-right:12px;font-family:var(--sans);font-size:14px;font-weight:400;text-transform:none;letter-spacing:0}
.spec dd{color:var(--body)}
.status{display:flex;align-items:baseline;gap:8px}
.status b{color:var(--text)}
.dot{flex:none;width:8px;height:8px;border-radius:var(--r);background:var(--slate);transform:translateY(-1px)}

/* ---------- sections: one slide each ---------- */
.sec{border-top:var(--hair) solid var(--line);padding:64px 0 80px}
.sec__grid{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);gap:56px}
.rail{align-self:start;position:sticky;top:84px}
.rail__idx{color:var(--ink2);display:flex;gap:0}
.rail__idx b{font-weight:500;color:var(--ink2)}
.rail__idx b::after{content:"/ 07";margin:0 1.2em 0 .45em;color:var(--faint)}
.rail h2{margin-top:16px;font-size:30px;font-weight:600;letter-spacing:-.034em;line-height:1.1}
.rail p{margin-top:12px;font-size:14px;color:var(--ink2);line-height:1.55;max-width:26ch}
.rail__link{display:inline-block;margin-top:16px;font-size:14px}

.sub{display:flex;align-items:baseline;gap:12px;margin:0;padding:0 0 12px;font-size:16px;font-weight:500;color:var(--text)}
.sub .mono{font-weight:500;color:var(--ink2);padding:0;background:none;border-radius:0}
.group + .group{margin-top:48px}

/* ---------- projects: open grid, plates carry the structure ---------- */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px}
.panel{display:flex;flex-direction:column;background:var(--bg);padding:0}
.plate{
  aspect-ratio:2 / 1;margin:0;border-radius:var(--r);
  background:var(--paper);
  display:flex;align-items:center;justify-content:center;
}
.plate svg{width:100%;height:100%;overflow:visible}
.panel__body{padding:20px 0 0;display:flex;flex-direction:column;flex:1}
.panel h3{font-size:20px;font-weight:500;letter-spacing:-.015em;line-height:1.3}
.panel h3 a{color:var(--text)}
.panel h3 a:hover{color:var(--clay-ink)}
.panel__desc{margin-top:8px;font-size:16px;line-height:1.6;color:var(--body)}
.pills{display:flex;flex-wrap:wrap;gap:0 .6em;margin-top:14px;color:var(--ink2)}
.pill{color:var(--ink2);background:none;border-radius:0;padding:0;white-space:nowrap}
.pill + .pill::before{content:"·";margin-right:.6em;color:var(--faint)}
.kv{margin:auto 0 0;padding-top:16px}
.kv dl{display:flex;flex-wrap:wrap;gap:6px 28px}
.kv dl > div{min-width:0;display:flex;align-items:baseline;gap:10px}
.kv dt{color:var(--faint)}
.kv dd{font-size:14px;line-height:1.5;color:var(--body)}
.kv dd a{margin-right:14px;white-space:nowrap}
.kv dd a:last-child{margin-right:0}
.panel--wide{grid-column:1 / -1;flex-direction:row;padding-bottom:0}
.panel--wide .plate{flex:0 0 46%;aspect-ratio:auto;margin:0;padding:12px 0}
.panel--wide .plate svg{height:auto;aspect-ratio:2 / 1}
.panel--wide .panel__body{padding:4px 0 0 40px}

/* SVG figures — Ivory diagram idiom: slate strokes, rule for dim, one clay */
.d{fill:none;stroke:var(--rule);stroke-width:1.25;stroke-linecap:butt;stroke-linejoin:miter}
.d2{fill:none;stroke:var(--slate);stroke-width:1.25;stroke-linecap:butt;stroke-linejoin:miter}
.da{fill:none;stroke:var(--clay);stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter}
.dash{stroke-dasharray:4 3}
.fbg{fill:var(--paper)}
.fa{fill:var(--clay)}
.fsoft{fill:none;stroke:var(--clay);stroke-width:1.25}
.fline{fill:var(--rule)}
.lbl{font-family:var(--mono);font-size:12px;fill:var(--ink2);letter-spacing:.04em}
.lbl-a{fill:var(--clay-ink)}

/* hover / focus micro-animations, unchanged from Spec */
.redo{stroke-dasharray:6 5}
.obs-b{transition:stroke .3s}
.panel:hover .redo,.panel:focus-within .redo{animation:flow 1.2s linear infinite}
.panel:hover .obs-b,.panel:focus-within .obs-b{stroke:var(--clay)}
@keyframes flow{to{stroke-dashoffset:-22}}
.hot{transform-box:fill-box;transform-origin:center}
.panel:hover .hot,.panel:focus-within .hot{animation:pulse .9s ease-out 1}
@keyframes pulse{0%{opacity:1}35%{opacity:.25}100%{opacity:1}}
.draw{stroke-dasharray:1;stroke-dashoffset:0}
.panel:hover .draw,.panel:focus-within .draw{animation:draw .9s cubic-bezier(.3,.7,.2,1) 1 both}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.panel:hover .pop,.panel:focus-within .pop{animation:pop .9s ease-out 1 both}
@keyframes pop{0%,55%{opacity:0}100%{opacity:1}}
.chain{transition:stroke .2s}
.panel:hover .chain,.panel:focus-within .chain{animation:light 1.4s ease-in-out 1 both}
.chain.c2{animation-delay:.25s!important}
.chain.c3{animation-delay:.5s!important}
@keyframes light{0%{stroke:var(--slate);fill:transparent}30%{stroke:var(--clay);fill:transparent}100%{stroke:var(--slate);fill:transparent}}
.wave path{transform-box:fill-box;transform-origin:center}
.panel:hover .wave path,.panel:focus-within .wave path{animation:talk .7s ease-in-out 2}
.wave path:nth-child(3n+1){animation-delay:.08s!important}
.wave path:nth-child(3n+2){animation-delay:.16s!important}
@keyframes talk{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.35)}}
.panel:hover .caret,.panel:focus-within .caret{animation:blink .5s steps(1) 4}
@keyframes blink{50%{opacity:0}}

/* ---------- tables / rows: Ivory .tbl ---------- */
.th{display:grid;gap:24px;padding:0 0 12px;color:var(--faint);border-bottom:var(--hair) solid var(--line)}
.rows{border-top:0}
.th + .rows{border-top:0}
.row{display:grid;border-bottom:var(--hair) solid var(--rule-soft);padding:20px 0;gap:24px}
.rows > .row:last-child{border-bottom:0}

/* blog */
.post{grid-template-columns:104px 150px minmax(0,1fr);color:inherit;align-items:baseline}
a.post .post__title{transition:color var(--t-fast) var(--ease)}
a.post:hover .post__title,a.post:focus-visible .post__title{color:var(--clay-ink)}
.post__date{color:var(--ink2)}
.post__tag{font-size:14px;color:var(--ink2)}
.post__title{font-size:20px;font-weight:500;color:var(--text);letter-spacing:-.015em;line-height:1.3}
.post__blurb{display:block;margin-top:8px;font-size:16px;color:var(--body);max-width:62ch}
.latest{display:inline-block;margin-left:12px;color:var(--clay-ink);vertical-align:3px} /* the one clay on this slide */

/* talks */
.talk{grid-template-columns:150px minmax(0,1fr) 200px;align-items:baseline}
.talk__topic{font-weight:500;font-size:20px;letter-spacing:-.015em}
.talk__topic span{display:block;margin-top:6px;font-weight:500;color:var(--ink2)}
.talk p{font-size:16px;color:var(--body);max-width:60ch}
.talk__go{font-size:14px;justify-self:end;white-space:nowrap}

/* about */
.prose p{font-size:17px;line-height:1.7;color:var(--body);max-width:64ch}
.prose p + p{margin-top:14px}
.prose p:first-child{color:var(--text);font-size:19px;line-height:1.55}
.sec .prose p{font-size:16px}
.sec .prose p + p{margin-top:16px}
.sec .prose p:first-child{font-size:20px;line-height:1.5;letter-spacing:-.01em}
.cap{margin-top:48px}
.cap .th,.cap .row{grid-template-columns:220px minmax(0,1fr)}
.cap .row{padding:12px 0}
.cap__area{font-size:16px;font-weight:500}
.cap__tech{font-size:16px;color:var(--body)}
.cap__tech span{display:inline-block;white-space:nowrap}
.cap__tech span:not(:last-child)::after{content:"·";margin:0 .5em;color:var(--faint)}

/* experience */
.job{grid-template-columns:150px minmax(0,1fr);padding:24px 0;align-items:baseline}
.job__years{color:var(--ink2)}
.job__role{font-size:20px;font-weight:500;letter-spacing:-.015em}
.job__org{font-size:14px;color:var(--ink2);margin-top:4px}
.job__note{margin-top:8px;font-size:16px;color:var(--body);max-width:66ch}
.eng{margin-top:24px;display:grid;grid-template-columns:1fr 1fr;gap:24px 40px}
.eng li{padding:0}
.eng__meta{display:flex;gap:10px;color:var(--ink2)}
.eng__meta b{font-weight:500;color:var(--text)}
.eng__client{margin-top:4px;font-size:16px;font-weight:500;line-height:1.4}
.eng__desc{font-size:14px;line-height:1.55;color:var(--body);margin-top:4px}

/* certs */
.cert .th,.cert .row{grid-template-columns:104px minmax(0,1fr) minmax(0,.9fr)}
.cert .row{padding:12px 0;align-items:baseline}
.cert__yr{color:var(--ink2)}
.cert__name{font-size:16px;font-weight:500}
.cert__area{font-size:16px;color:var(--body)}

/* contact */
.contact h3{font-size:36px;font-weight:600;letter-spacing:-.034em;line-height:1.1;max-width:20em}
.contact p{margin-top:16px;font-size:18px;color:var(--body);max-width:56ch}
.contact__row{margin-top:28px;display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.contact__mail{text-transform:none;letter-spacing:0;font-weight:400;font-size:14px}

/* footer: the slide footer */
.foot{border-top:var(--hair) solid var(--line);padding:24px 0 40px}
.foot__in{display:flex;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;font-size:14px;color:var(--ink2)}
.foot__links{display:flex;gap:24px;flex-wrap:wrap}
.foot__links a{color:var(--ink2)}
.foot__links a:hover{color:var(--text)}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  :root{--rail:188px}
  .hero__grid{grid-template-columns:minmax(0,1fr) 380px;gap:56px}
  .hero h1{font-size:60px}
  .sec__grid{gap:40px}
  .cap .th,.cap .row{grid-template-columns:190px minmax(0,1fr)}
  .talk{grid-template-columns:130px minmax(0,1fr)}
  .talk__go{grid-column:2;justify-self:start;margin-top:-12px}
}
@media (max-width:980px){
  .hero__grid{grid-template-columns:1fr;gap:48px}
  .frame{max-width:560px}
  .sec__grid{grid-template-columns:1fr;gap:28px}
  .rail{position:static}
  .rail p{max-width:52ch}
  .tools .btn{display:none}
}
@media (max-width:760px){
  :root{--gut:20px}
  .bar__in{flex-wrap:wrap;gap:0 12px}
  .tools{border-left:0;padding-left:0;margin-left:auto}
  .links{order:3;flex:1 0 100%;margin:0 calc(-1 * var(--gut));padding:0 var(--gut);height:40px;border-top:var(--hair) solid var(--line);justify-content:space-between;gap:0}
  html{scroll-padding-top:104px}
  .hero{padding:44px 0 52px}
  .hero__kicker{margin-bottom:20px}
  .hero h1{font-size:44px}
  .hero__lead{font-size:16px;margin-top:20px}
  .grid{grid-template-columns:1fr;gap:44px}
  .panel{padding-bottom:0}
  .plate{margin:0}
  .panel__body{padding:18px 0 0}
  .panel--wide{flex-direction:column}
  .panel--wide .plate{flex:none;margin:0;padding:0}
  .panel--wide .panel__body{padding:18px 0 0}
  .sec{padding:44px 0 52px}
  .th.post{display:none}
  .post{grid-template-columns:auto 1fr;gap:4px 16px}
  .post__main{grid-column:1 / -1;margin-top:4px}
  .talk{grid-template-columns:1fr;gap:8px}
  .talk__go{grid-column:auto;margin-top:4px}
  .cap .th{display:none}
  .cap .row{grid-template-columns:1fr;gap:4px}
  .job{grid-template-columns:1fr;gap:4px}
  .eng{grid-template-columns:1fr}
  .cert .th{display:none}
  .cert .row{grid-template-columns:52px minmax(0,1fr);gap:4px 16px}
  .cert__area{grid-column:2}
  .contact h3{font-size:28px}
  .spec dl{grid-template-columns:112px 1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---------- 6b quiet overrides ---------- */
/* 1. sans meta */
.post__date,.job__years,.cert__yr,.eng__meta,.pill,.talk__topic span,.contact__mail{
  font-family:var(--sans);font-size:14px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink2)
}
.eng__meta{gap:8px}
.eng__meta b{font-weight:500;color:var(--text)}
.eng__meta b::after{content:"·";margin-left:8px;color:var(--faint);font-weight:400}
.job__years{font-variant-numeric:tabular-nums}
.post__date,.cert__yr{font-variant-numeric:tabular-nums}
.post__tag{font-size:14px}
.talk__topic span{margin-top:4px;font-weight:400}

/* 2. project meta: one line, tags left, links right */
.pills{margin-top:16px;align-items:baseline}
.pill + .pill::before{content:"·";margin-right:.6em;color:var(--faint)}
.pill--links{margin-left:auto;display:flex;gap:16px;white-space:nowrap}
.pill--links::before{content:none !important;margin:0}
.pill--links a{font-size:14px;color:var(--text)}
.panel__body{padding-top:20px}

/* 3. Latest in the date column */
.latest{display:block;margin:4px 0 0;vertical-align:baseline;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--clay-ink)}

/* 4. link underline = hairline */
.ul{background-size:100% 1px}
.ul:hover{background-size:100% 1px}

@media (max-width:760px){
  .pill--links{margin-left:0;flex-basis:100%;margin-top:6px}
  .latest{display:inline-block;margin:0 0 0 10px}
}

/* 5. contact: icon row after the email, hairline-separated like the nav tools */
.contact__icons{display:flex;gap:4px;margin-left:8px;padding-left:16px;border-left:var(--hair) solid var(--line);align-self:stretch;align-items:center}
.spec__contact{gap:0}

/* ---------- code copy button (ds/ivory/site.js adds it to .prose pre) ---------- */
.prose pre{position:relative}
.prose pre .copy-btn{position:absolute;top:10px;right:10px;font:inherit;font-family:var(--mono);font-size:10.5px;line-height:1;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);background:var(--paper);border:var(--hair) solid var(--rule);border-radius:var(--r);padding:4px 7px;cursor:pointer;opacity:0;transition:opacity .15s,color .15s,border-color .15s}
.prose pre:hover .copy-btn,.prose pre .copy-btn:focus-visible{opacity:1}
.prose pre .copy-btn:hover{color:var(--text);border-color:var(--slate)}
.prose pre .copy-btn--done{opacity:1;color:var(--clay-ink);border-color:var(--clay)}
/* blog index listing (new/blog/index.html) */
.listing{padding:56px 0 72px}
.listing__head{margin-bottom:40px}
.listing__head h1{font-size:50px;line-height:1.02;letter-spacing:-.034em}
.listing__head p{margin-top:14px;font-size:17px;color:var(--ink2);max-width:52ch}
.listing .rows{max-width:980px}
@media (max-width:760px){.listing{padding:36px 0 52px}.listing__head h1{font-size:34px}}