@property --paper { syntax: '<color>'; inherits: true; initial-value: #f4f3f1; }
@property --ink { syntax: '<color>'; inherits: true; initial-value: #141414; }
:root{
  /* vertical rhythm scale: every gap between blocks uses one of these four steps.
     sp-1 title to its meta row · sp-2 heading to content · sp-3 between items · sp-4 between sections.
     spacing tighter than sp-1 (6-12px) is component-internal only. */
  --sp-1:16px; --sp-2:24px; --sp-3:32px; --sp-4:64px;
  --ink:#141414; --paper:#f4f3f1; --muted:#78766f; --line:#dedad2;
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-mono:"SF Mono","JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
}
html[data-theme="dark"]{ --ink:#f0efec; --paper:#0a0a0a; --muted:#8c897f; --line:#262622; }
*{box-sizing:border-box;}
html{height:100%;}
html,body{margin:0;}
body{
  min-height:100%;display:flex;flex-direction:column;
  background:var(--paper);color:var(--ink);
  font-family:var(--font-body);font-size:15px;line-height:1.6;letter-spacing:-.01em;
}
@media (prefers-reduced-motion: no-preference){
  body{transition:background .5s cubic-bezier(.4,0,.2,1), color .5s cubic-bezier(.4,0,.2,1);}
}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px;}
a:focus-visible,button:focus-visible{outline:1px solid var(--ink);outline-offset:3px;}
::selection{background:var(--ink);color:var(--paper);}
button{font-family:inherit;background:none;border:none;color:inherit;cursor:pointer;padding:0;}
input,textarea{cursor:text;}

.grain::before{
  content:"";position:fixed;inset:0;z-index:5;pointer-events:none;opacity:.045;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

main.views{flex:1;position:relative;display:flex;flex-direction:column;overflow-x:clip;z-index:1;}
.view{width:100%;max-width:860px;margin:0 auto;padding:24px 28px 90px;position:relative;z-index:1;}
.view[hidden]{display:none;}
#view-home{flex:1;min-height:0;padding:12px 28px 26px;display:flex;flex-direction:column;overflow:hidden;}
#view-home[hidden]{display:none;}
#view-home .hero-block{margin:auto 0;}
@media (max-height:560px){ #view-home{flex:none;overflow:visible;} }

/* page slide: pages live side by side, home -> work -> now -> gratitude,
   and travel the full viewport width so navigation reads as real movement */
@media (prefers-reduced-motion: no-preference){
  .view.slide-enter-r{animation:viewInR .6s cubic-bezier(.22,1,.36,1) both;}
  .view.slide-enter-l{animation:viewInL .6s cubic-bezier(.22,1,.36,1) both;}
  .view.slide-exit-l,.view.slide-exit-r{
    position:absolute;top:0;left:0;right:0;margin:0 auto;
    pointer-events:none;overflow:hidden;z-index:0;
  }
  .view.slide-exit-l{animation:viewOutL .6s cubic-bezier(.22,1,.36,1) both;}
  .view.slide-exit-r{animation:viewOutR .6s cubic-bezier(.22,1,.36,1) both;}
  /* home loses flex sizing while absolute, so pin it to the viewport minus the header */
  #view-home.slide-exit-l,#view-home.slide-exit-r{height:calc(100dvh - 60px);}
}
@keyframes viewInR{from{transform:translateX(100vw);}to{transform:translateX(0);}}
@keyframes viewInL{from{transform:translateX(-100vw);}to{transform:translateX(0);}}
@keyframes viewOutL{from{transform:translateX(0);}to{transform:translateX(-100vw);}}
@keyframes viewOutR{from{transform:translateX(0);}to{transform:translateX(100vw);}}

.topbar{
  width:100%;max-width:860px;margin:0 auto;padding:26px 28px 0;flex:none;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  position:relative;z-index:2;
}
.brand{font-family:var(--font-mono);font-size:.78rem;font-weight:500;text-decoration:none;border-bottom:1px solid transparent;}
a.brand:hover{border-color:var(--ink);}
nav.main-nav{display:flex;gap:22px;font-family:var(--font-mono);font-size:.76rem;color:var(--muted);}
nav.main-nav a{text-decoration:none;}
nav.main-nav a:hover{color:var(--ink);}
nav.main-nav a.active{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;}
.top-controls{display:flex;align-items:center;gap:16px;font-family:var(--font-mono);font-size:.74rem;color:var(--muted);}
.lang-switch span{cursor:pointer;}
.lang-switch .active{color:var(--ink);}
.lang-switch .soon{margin-left:6px;opacity:.6;font-style:italic;}
.theme-toggle{width:26px;height:26px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;}
.theme-toggle svg{width:13px;height:13px;}
.theme-toggle .moon{display:block;} .theme-toggle .sun{display:none;}
html[data-theme="dark"] .theme-toggle .moon{display:none;} html[data-theme="dark"] .theme-toggle .sun{display:block;}

.hero-block{display:flex;gap:44px;align-items:center;flex-wrap:wrap;}
.photo-wrap{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;flex-shrink:0;}
.photo-frame{position:relative;display:inline-block;}
.photo{
  width:clamp(104px,15vh,148px);height:clamp(104px,15vh,148px);border-radius:50%;
  object-fit:cover;display:block;filter:grayscale(.15) contrast(1.03);
}
@media (prefers-reduced-motion: no-preference){ .photo{transition:transform .25s ease;} }
.photo-frame:hover .photo{transform:scale(1.05) rotate(-3deg);}
.status-dot{
  position:absolute;bottom:2px;right:2px;width:14px;height:14px;border-radius:50%;
  background:#3a9d5d;border:2px solid var(--paper);opacity:0;
}
@media (prefers-reduced-motion: no-preference){ .status-dot{transition:opacity .3s ease;} }
.status-dot.online{opacity:1;}
.photo-caption{margin:0;font-size:.76rem;color:var(--muted);text-align:center;white-space:nowrap;}
.time-line{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);margin:6px 0 0;
  font-family:var(--font-mono);font-size:.68rem;color:var(--muted);white-space:nowrap;
}
.hero-text{flex:1;min-width:240px;}

/* phone-only addition: below ~640px there isn't room for photo + text side by side
   without squeezing the text column, so stack the photo above the text instead.
   scoped to max-width so nothing here ever applies above phone widths. */
@media (max-width:640px){
  .hero-block{flex-direction:column;align-items:center;}
  .hero-text{width:100%;min-width:0;}
  footer.home-footer{justify-content:center;text-align:center;}
  footer.home-footer .contact-links{justify-content:center;}
  .photo-wrap{display:none;}
}
.tldr{position:relative;font-family:var(--font-mono);font-size:.76rem;color:var(--muted);letter-spacing:.04em;text-transform:lowercase;margin-bottom:14px;}
#term-growth{font-weight:inherit;text-decoration-thickness:1px;text-underline-offset:2px;}
h1.oneliner{
  position:relative;font-family:var(--font-mono);
  font-size:clamp(1.55rem,3.8vw,2.4rem);font-weight:600;line-height:1.22;letter-spacing:-.04em;
  margin:0 0 18px;max-width:26ch;text-wrap:balance;
}
.term-wrap{display:inline-block;}
.term{
  font:inherit;text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;cursor:pointer;
}
.term:hover{color:var(--muted);}
.term-popover{
  position:absolute;top:calc(100% + 16px);left:0;
  background:var(--ink);color:var(--paper);font-family:var(--font-body);font-size:.86rem;font-weight:400;
  letter-spacing:-.01em;text-decoration:none;line-height:1.6;padding:15px 17px;border-radius:8px;
  width:min(400px,84vw);text-align:left;
  opacity:0;pointer-events:none;z-index:70;
}
#term-build-popover{left:auto;right:0;}
/* the tldr popover opens upward so it never covers the headline below it */
#term-growth-popover{top:auto;bottom:calc(100% + 14px);}
@media (prefers-reduced-motion: no-preference){
  .term-popover{transition:opacity .15s ease, transform .15s ease;transform:translateY(4px);}
}
.term-popover.open{opacity:1;pointer-events:auto;transform:translateY(0);}
@media (hover:hover){
  .term-wrap:hover .term-popover,
  .term-wrap:focus-within .term-popover{opacity:1;pointer-events:auto;transform:translateY(0);}
}
.term-popover ul{margin:0;padding-left:16px;list-style:none;}
.term-popover li{position:relative;margin-bottom:8px;}
.term-popover li::before{content:"-";position:absolute;left:-14px;color:var(--muted);}
.term-popover li:last-child{margin-bottom:0;}
.term-popover .pop-note{margin:12px 0 0 16px;opacity:.65;font-size:.95em;text-wrap:balance;}
p.caption{color:var(--muted);margin:0;max-width:56ch;font-size:1rem;}
.country-wrap{
  position:relative;display:inline-block;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;
}
.country-wrap:hover,.country-wrap:focus-within{z-index:10;}
.country-term{
  font:inherit;color:inherit;text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:2px;cursor:pointer;
}
.country-term:hover{color:var(--ink);}
.country-term.flag{text-decoration:none;}
.country-popover{
  position:fixed;
  background:var(--ink);border-radius:8px;overflow:hidden;
  width:180px;opacity:0;pointer-events:none;z-index:70;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
  text-decoration:none;
}
.country-popover img{width:100%;height:120px;object-fit:cover;display:block;}
.country-popover.portrait{width:120px;}
.country-popover.portrait img{height:180px;}
.country-popover.framed{width:150px;background:var(--paper);}
.country-popover.framed img{height:180px;object-fit:contain;}
.country-popover.text-only{
  width:auto;white-space:nowrap;padding:10px 14px;
  color:var(--paper);font-family:var(--font-mono);font-size:.68rem;
}
@media (prefers-reduced-motion: no-preference){
  .country-popover{transition:opacity .15s ease, transform .15s ease;transform:translateY(4px);}
}
.country-popover.open{opacity:1;pointer-events:auto;transform:translateY(0);}
@media (hover:hover){
  .country-wrap:not(:has(.flag)):hover .country-popover,
  .country-wrap:not(:has(.flag)):focus-within .country-popover{opacity:1;pointer-events:auto;transform:translateY(0);}
}

.quick-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:18px;}
.btn{
  display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:.78rem;
  border:1px solid var(--line);border-radius:999px;padding:8px 15px;text-decoration:none;
}
.btn:hover{border-color:var(--ink);}
.btn svg{width:12px;height:12px;}
.coming-soon{opacity:.5;cursor:default;}
.coming-soon:hover{border-color:var(--line);color:inherit;}
.coming-soon:hover .play{border-color:var(--line);}
nav.main-nav a.coming-soon:hover{color:var(--muted);}
.soon-wrap{position:relative;display:inline-flex;}
.soon-wrap-block{display:block;}
.soon-tip{
  position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);
  background:var(--ink);color:var(--paper);font-family:var(--font-mono);font-size:.68rem;
  padding:6px 10px;border-radius:6px;white-space:nowrap;
  opacity:0;pointer-events:none;z-index:70;
}
@media (prefers-reduced-motion: no-preference){
  .soon-tip{transition:opacity .15s ease, transform .15s ease;}
}
.soon-tip.open{opacity:1;transform:translateX(-50%) translateY(0);}
@media (hover:hover){
  .soon-wrap:hover .soon-tip{opacity:1;transform:translateX(-50%) translateY(0);}
}
.plain-link{font-size:.85rem;border-bottom:1px solid var(--line);padding-bottom:1px;text-decoration:none;}
.plain-link:hover{border-color:var(--ink);}
.plain-link.coming-soon:hover{border-color:var(--line);}

.loom-slot{
  margin-top:20px;border:1px solid var(--line);border-radius:10px;padding:14px 16px;
  display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.82rem;max-width:420px;
  text-align:left;width:auto;
}
.loom-slot:hover{border-color:var(--ink);color:var(--ink);}
.loom-slot .play{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.loom-slot:hover .play{border-color:var(--ink);}
.loom-slot .play svg{width:11px;height:11px;}

.loom-backdrop{
  position:fixed;inset:0;z-index:2000;background:rgba(10,10,10,.72);
  display:flex;align-items:center;justify-content:center;padding:24px;
  opacity:0;pointer-events:none;
}
.loom-backdrop.open{opacity:1;pointer-events:auto;}
@media (prefers-reduced-motion: no-preference){
  .loom-backdrop{transition:opacity .22s ease;}
}
.loom-modal{width:min(760px,100%);position:relative;}
.loom-frame-wrap{aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#000;}
.loom-frame-wrap iframe{width:100%;height:100%;border:0;display:block;}
.loom-close{
  position:absolute;top:-38px;right:0;width:28px;height:28px;color:#f2f1ee;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.loom-close svg{width:16px;height:16px;}

footer.home-footer{
  width:100%;max-width:860px;margin:0 auto;padding:0 28px 34px;flex:none;position:relative;z-index:2;
  display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:.74rem;color:var(--muted);
}
footer.home-footer .contact-links{display:flex;gap:14px;flex-wrap:wrap;position:relative;}
footer.home-footer .contact-links a,
footer.home-footer .contact-links button{font-family:var(--font-mono);font-size:.74rem;color:var(--muted);text-decoration:none;}
footer.home-footer .contact-links a:hover,
footer.home-footer .contact-links button:hover{color:var(--ink);}
footer.home-footer .contact-links a.book-call{color:var(--ink);}

.email-popover-wrap{position:relative;display:inline-flex;}
.email-popover{
  position:fixed;bottom:24px;right:24px;width:380px;max-width:calc(100vw - 48px);
  max-height:calc(100vh - 48px);
  background:var(--paper);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.16);z-index:2100;
  display:flex;flex-direction:column;overflow:hidden;
  transform-origin:bottom right;
}
.email-popover[hidden]{display:none;}
@media (prefers-reduced-motion: no-preference){
  .email-popover:not([hidden]){animation:emailPopIn .16s ease-out;}
}
@keyframes emailPopIn{
  from{opacity:0;transform:scale(.92) translateY(10px);}
  to{opacity:1;transform:scale(1) translateY(0);}
}
.email-popover-head{
  display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
  padding:10px 12px;border-bottom:1px solid var(--line);
  font-family:var(--font-mono);font-size:.76rem;color:var(--muted);
}
.email-popover-controls{display:flex;gap:4px;}
.email-popover-controls button{width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--muted);}
.email-popover-controls button:hover{color:var(--ink);background:rgba(120,118,111,.14);}
.email-popover-controls svg{width:16px;height:16px;}
.email-popover form{display:flex;flex-direction:column;gap:8px;flex:1;min-height:0;padding:12px;}
.email-popover form[hidden]{display:none;}
.email-popover input,
.email-popover textarea{
  font-family:var(--font-body);font-size:.82rem;color:var(--ink);background:transparent;
  border:1px solid var(--line);border-radius:6px;padding:7px 9px;width:100%;
}
.email-popover textarea{resize:none;flex:1;min-height:200px;}
.email-popover input::placeholder,
.email-popover textarea::placeholder{color:var(--muted);}
.email-popover input:focus,
.email-popover textarea:focus{outline:1px solid var(--ink);}
.email-popover .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}
.email-popover button[type="submit"]{
  font-family:var(--font-mono);font-size:.78rem;background:var(--ink);color:var(--paper);
  border-radius:6px;padding:8px 0;margin-top:2px;flex-shrink:0;
}
.email-popover button[type="submit"]:hover:not(:disabled){opacity:.85;}
.email-popover button[type="submit"]:disabled{background:var(--line);color:var(--muted);}
.email-status{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-mono);font-size:.76rem;color:var(--muted);text-align:center;padding:12px;
}
.email-status p{margin:0;}
.email-status #email-again{
  font-family:var(--font-mono);font-size:.74rem;color:var(--muted);
  border-bottom:1px solid var(--line);padding-bottom:1px;
}
.email-status #email-again:hover{color:var(--ink);border-color:var(--ink);}
.email-popover .email-status[hidden]{display:none;}
.email-popover #email-again[hidden]{display:none;}

/* subpages */
.back-link{font-family:var(--font-mono);font-size:.76rem;color:var(--muted);text-decoration:none;display:inline-block;margin-bottom:var(--sp-3);}
.back-link:hover{color:var(--ink);}
h2.page-title{font-family:var(--font-mono);font-size:clamp(1.7rem,3.5vw,2.2rem);font-weight:600;margin:0 0 var(--sp-1);letter-spacing:-.04em;}
p.page-sub{color:var(--muted);margin:0 0 var(--sp-4);max-width:52ch;font-size:1.02rem;}

.exp-list{display:flex;flex-direction:column;gap:var(--sp-3);}
.exp-item{padding-top:0;border-top:none;}
.exp-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:8px;}
.exp-title{font-size:1.08rem;}
.exp-title strong{font-weight:600;}
.exp-dates{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:.78rem;color:var(--muted);white-space:nowrap;text-align:right;line-height:1.7;}
.exp-bullets{margin:0;padding-left:16px;color:var(--muted);font-size:.94rem;list-style:none;}
.exp-bullets li{position:relative;margin-bottom:6px;}
.exp-bullets li::before{content:"-";position:absolute;left:-16px;color:var(--muted);}
.exp-bullets li:last-child{margin-bottom:0;}
.exp-bullets.standalone{margin-top:0;}
.case-link{display:inline-block;margin-top:14px;font-family:var(--font-mono);font-size:.82rem;text-decoration:none;border-bottom:1px solid var(--line);color:var(--ink);}
.case-link:hover{border-color:var(--ink);}

/* sections separate by scale and whitespace: a real heading plus a wide gap,
   no rules, so the faint hairlines stay reserved for items inside a section */
/* a faint hairline sits centered in the section gap; items inside a section
   separate by whitespace alone, so a line always means "new section" */
section.sub{margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid var(--line);}
section.sub:first-of-type{margin-top:0;padding-top:0;border-top:none;}
h3.sub-title{font-family:var(--font-mono);font-size:1.15rem;letter-spacing:-.03em;text-transform:lowercase;color:var(--ink);margin:0 0 var(--sp-2);font-weight:600;}
/* lens chips: pick an angle, matching work stays ink while the rest fades */
.lens-row{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;margin:0 0 var(--sp-4);}
.lens-label{font-family:var(--font-mono);font-size:.74rem;color:var(--muted);margin-right:4px;}
.lens{
  font-family:var(--font-mono);font-size:.72rem;color:var(--muted);cursor:pointer;
  border:1px solid var(--line);border-radius:999px;padding:5px 13px;
}
.lens:hover{color:var(--ink);border-color:var(--ink);}
.lens.active{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.lens.active::after{content:" ×";opacity:.7;}
.lens-clear{font-family:var(--font-mono);font-size:.72rem;color:var(--muted);padding:5px 4px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--line);}
.lens-clear:hover{color:var(--ink);text-decoration-color:var(--ink);}
.lens-clear[hidden]{display:none;}
@media (prefers-reduced-motion: no-preference){
  [data-tags],details.archive summary{transition:opacity .35s ease;}
}
.dimmed{opacity:.22;}
/* dimmed content flattens to one color: ink numbers/names fade exactly like the
   gray text around them. !important so no element-level color rule can outrank
   the dimmed state, whatever its specificity. */
.dimmed,.dimmed *{color:var(--muted) !important;}
/* bold strokes read darker even at the same color, so dimmed numbers also lose their weight */
.dimmed .n{font-weight:400 !important;}

/* tl;dr as prose: quiet muted sentences, loud mono numbers */
.impact-prose{color:var(--muted);font-size:1.02rem;line-height:1.9;max-width:66ch;margin:0;position:relative;}
.impact-prose .n{
  font-family:var(--font-mono);font-style:normal;font-weight:600;color:var(--ink);
  font-size:1.18em;letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}
.impact-prose .co{color:var(--muted);font:inherit;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px;}
.impact-prose button.co:hover{color:var(--ink);text-decoration-color:var(--ink);}
.impact-prose .dot{color:var(--muted);margin:0 6px;}
.tldr-more{
  font:inherit;color:var(--muted);font-size:.94rem;white-space:nowrap;
  position:absolute;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px;
}
.tldr-more:hover{color:var(--ink);text-decoration-color:var(--ink);}
.exp-item[id],section.sub[id]{scroll-margin-top:24px;}

/* "on this page" rail: sticky section guide beside the work column, wide screens only */
.toc-rail{display:none;}
@media (min-width:1370px){
  .toc-rail{display:block;position:absolute;top:24px;bottom:0;right:-226px;width:200px;}
  .toc{position:sticky;top:120px;font-family:var(--font-mono);font-size:.72rem;}
  .toc ul{list-style:none;margin:0;padding:0;border-left:1px solid var(--line);}
  .toc li button{
    display:block;width:100%;text-align:left;font:inherit;color:var(--muted);white-space:nowrap;
    padding:5px 0 5px 14px;border-left:2px solid transparent;margin-left:-1.5px;
  }
  .toc li button:hover{color:var(--ink);}
  .toc li button.active{color:var(--ink);border-left-color:var(--ink);}
}
/* arrival highlight: an ink bar on the target's left edge (same language as the
   toc indicator) that holds briefly, then fades once you've found it */
.flash{position:relative;}
.flash::before{
  content:"";position:absolute;left:-34px;top:6px;bottom:6px;width:2px;background:var(--ink);
  animation:flashBar 2s ease .3s both;
}
.exp-item{position:relative;}
@keyframes flashBar{0%,55%{opacity:1;}100%{opacity:0;}}

.plain-list{font-size:.9rem;}
.plain-list + .plain-list{margin-top:10px;}
.plain-list .sep{color:var(--line);margin:0 8px;}

/* skills & tools as quiet chips; they dim with the lenses like everything else */
.chip-list{display:flex;flex-wrap:wrap;gap:8px;}
.chip-key{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;color:var(--muted);margin:0 0 10px;}
.chip-list + .chip-key{margin-top:var(--sp-3);}
.chip{
  font-family:var(--font-mono);font-size:.72rem;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:4px 12px;white-space:nowrap;
}


details.archive{margin-top:var(--sp-3);}
details.archive summary{font-family:var(--font-mono);font-size:.9rem;letter-spacing:-.02em;text-transform:lowercase;color:var(--muted);font-weight:600;list-style:none;cursor:pointer;user-select:none;}
details.archive summary::-webkit-details-marker{display:none;}
details.archive summary::before{content:"+ ";}
details.archive[open] summary::before{content:"- ";}
details.archive summary:hover{color:var(--ink);}
details.archive[open] summary{margin-bottom:var(--sp-2);}

.meta-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:20px;margin:var(--sp-2) 0 var(--sp-4);padding-top:var(--sp-2);border-top:1px solid var(--line);}
.meta-row .k{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;text-transform:lowercase;color:var(--muted);margin-bottom:6px;}
.meta-row .v{font-size:.92rem;}

article.case section{margin-top:var(--sp-3);}
article.case h4{font-size:.78rem;font-family:var(--font-mono);letter-spacing:.06em;text-transform:lowercase;color:var(--muted);margin:0 0 8px;font-weight:500;}
article.case p{margin:0;max-width:64ch;}

.dotmap{margin:24px 0;position:relative;}
.dotmap svg{width:100%;height:auto;display:block;}
.dotmap .cap{color:var(--muted);font-size:.82rem;margin-top:10px;max-width:48ch;}

.grat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-top:var(--sp-2);}
.grat-card{border:1px dashed var(--line);border-radius:10px;padding:18px;min-height:140px;display:flex;flex-direction:column;justify-content:space-between;}
.grat-card .name{font-weight:600;font-size:.85rem;color:var(--muted);}
.grat-card .quote{font-size:.86rem;color:var(--muted);font-style:italic;margin:10px 0;}
.grat-card .heart{font-family:var(--font-mono);font-size:.74rem;color:var(--line);}
p.grat-note{color:var(--muted);font-size:.84rem;margin-top:18px;}