/* ═══════════════════════════════════════════════════════════
   Soumyadeep Das — soumyadeep.space
   Editorial layout. Serif display, hairline rules, warm neutrals.
   No cards, no gradients, no glow.
   ═══════════════════════════════════════════════════════════ */

/* ── Local typefaces ─────────────────────────────────────
   Latin subsets are self-hosted to remove the render-blocking Google Fonts
   request chain. Each variable file covers the weights used on this page. */
@font-face{
  font-family:"Cormorant Garamond"; font-style:normal; font-weight:300 400;
  font-display:swap; src:url("../assets/fonts/cormorant-garamond-latin-normal.woff2") format("woff2");
}
@font-face{
  font-family:"Cormorant Garamond"; font-style:italic; font-weight:300 400;
  font-display:swap; src:url("../assets/fonts/cormorant-garamond-latin-italic.woff2") format("woff2");
}
@font-face{
  font-family:"Newsreader"; font-style:normal; font-weight:300 400;
  font-display:swap; src:url("../assets/fonts/newsreader-latin-normal.woff2") format("woff2");
}
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:300 500;
  font-display:swap; src:url("../assets/fonts/inter-latin-normal.woff2") format("woff2");
}
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:700;
  font-display:swap; src:url("../assets/fonts/inter-latin-700.woff2") format("woff2");
}
@font-face{
  font-family:"JetBrains Mono"; font-style:normal; font-weight:400 500;
  font-display:swap; src:url("../assets/fonts/jetbrains-mono-latin-normal.woff2") format("woff2");
}

:root{
  /* Midnight navy + paper, with a repeating plaster grain (BubbleUp-style tile). */
  --ink:      #060b16;
  --paper:    #f4f1ea;

  --bg:       #060b16;
  --plaster:  url("../assets/plaster.png");
  --plaster-wash: rgba(6, 11, 22, .90); /* dark: keep only a hint of grain */
  --fg:       #e8e4dc;
  --fg-dim:   #8f8a82;
  --fg-faint: #8b847b;   /* AA on dark (4.6:1) — was 2.08:1, unreadable */
  --hair:     #1e2a40;   /* borders only, no text */
  --rule:     #121a2c;
  --accent:   #cf644a;   /* terracotta, AA on this bg */
  --label:    #cf644a;   /* section labels share the accent */
  --sel:      #0c1424;

  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --read:  "Newsreader", "Iowan Old Style", Georgia, serif;
  --mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --bar:  69px;                    /* fixed masthead height */
  --gut:  clamp(20px, 5vw, 64px);
  --maxw: 1240px;

  --ease: cubic-bezier(.16,1,.3,1);
}

[data-theme="light"]{
  --bg:       #f4f1ea;
  --plaster-wash: rgba(244, 241, 234, .28);
  --fg:       #17150f;
  --fg-dim:   #6b655c;
  --fg-faint: #736c62;   /* AA on light (4.7:1) — was 1.85:1 */
  --hair:     #c4bdb1;
  --rule:     #ddd8cd;
  --accent:   #a54027;
  --label:    #a54027;
  --sel:      #e4dfd4;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  min-height:100%;
  background-color:var(--bg);
  background-image:linear-gradient(var(--plaster-wash), var(--plaster-wash)), var(--plaster);
  background-repeat:repeat;
  background-position:0 0;
  background-size:auto, 360px 360px;
}

body{
  background:transparent;
  color:var(--fg);
  font-family:var(--sans);
  font-weight:300;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  min-height:100%;
  transition:color .5s var(--ease);
}

::selection{ background:var(--accent); color:#fff; }

a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul,ol{ list-style:none; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.skip{
  position:fixed; top:-60px; left:16px; z-index:200;
  background:var(--accent); color:var(--ink); padding:10px 16px; font-size:14px; font-weight:500;
  transition:top .2s;
}
.skip:focus{ top:16px; }
[data-theme="light"] .skip{ color:#fff; }

/* ── Masthead ───────────────────────────────────────────── */
.masthead{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; gap:28px;
  padding:20px var(--gut);
  color:var(--fg);
}

.masthead::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  opacity:0;
  transition:opacity .35s var(--ease);
  backdrop-filter:blur(12px);
}
.masthead.stuck::before{ opacity:1; }

.masthead__name{
  font-family:var(--serif); font-weight:400; font-size:21px; letter-spacing:.01em;
  margin-right:auto;
}
.masthead__nav{ display:flex; gap:6px; }
.masthead__nav a{
  font-size:13px; letter-spacing:.02em; opacity:.62;
  border:1px solid transparent; border-radius:2px;
  padding:6px 11px;
  transition:opacity .3s var(--ease), color .3s var(--ease);
}
.masthead__nav a:hover,
.masthead__nav a:focus-visible{
  opacity:1; color:var(--fg);
}
.masthead__nav a.on{
  opacity:1; color:var(--accent);
}

/* Sun ⇄ moon. Dark theme shows the sun; light theme shows the crescent.
   The crescent is a real mask cut-out, not a disc painted in --bg — a
   painted disc leaves a visible ghost edge over the blurred masthead. */
.toggle{
  width:30px; height:30px; border-radius:50%;
  position:relative; display:grid; place-items:center;
  flex:none; color:inherit;
  transition:transform .5s var(--ease);
}
.toggle:hover{ transform:rotate(20deg); }
.toggle:active{ transform:scale(.9); }

.toggle__svg{
  width:20px; height:20px; overflow:visible;
  /* full-strength colour: the icon is never faded */
  color:inherit;
}

.toggle__disc{
  fill:currentColor;
}
.toggle__cut{
  /* scaled to nothing in dark mode -> nothing is cut, so it's a full sun */
  transform:translate(3.6px,-3.4px) scale(0);
  transform-origin:12px 12px;
  transition:transform .5s var(--ease);
}

.toggle__rays line{
  stroke:currentColor;
  stroke-width:1.7;          /* identical for every ray            */
  stroke-linecap:round;      /* identical caps, so equal visual length */
  transform-origin:12px 12px;
  transition:transform .5s var(--ease), opacity .35s var(--ease);
}

/* ── light theme: rays retract, crescent appears ── */
[data-theme="light"] .toggle__cut{
  transform:translate(3.6px,-3.4px) scale(1);
}
[data-theme="light"] .toggle__rays line{
  opacity:0;
  transform:scale(.35);
}

@media (prefers-reduced-motion:reduce){
  .toggle:hover{ transform:none; }
  .toggle__disc,.toggle__cut,.toggle__rays line{ transition:none; }
}

.menu-btn{ display:none; font-size:13px; letter-spacing:.02em; }

/* ── Opening ────────────────────────────────────────────── */
.lede{
  /* 100svh minus the fixed masthead, so the name can never slide under it
     on short laptop screens (1366x768, 1280x720). */
  min-height:calc(100svh - var(--bar));
  margin-top:var(--bar);
  padding:0 var(--gut) 56px;
  display:flex; flex-direction:column; justify-content:flex-end;
  max-width:var(--maxw); margin-inline:auto;
  position:relative;
}

.tag{
  font-family:var(--mono); font-size:11px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--fg-dim);
  display:flex; align-items:center; gap:9px; margin-bottom:28px;
}
.tag__dot{
  width:5px; height:5px; border-radius:50%; background:var(--accent);
  animation:breathe 3.2s ease-in-out infinite;
}
@keyframes breathe{ 0%,100%{opacity:1} 50%{opacity:.25} }

.display{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(74px, 19vw, 268px);
  line-height:.84;
  letter-spacing:-.018em;
  margin-bottom:52px;
}
.display em{ font-style:italic; color:var(--accent); }

.doing{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(24px,3.7vw,46px);
  line-height:1.2; letter-spacing:-.008em;
  color:var(--fg-dim);
  margin:-24px 0 46px;
  min-height:1.3em;
}
.doing__type{ color:var(--accent); font-style:italic; }
.doing__caret{
  display:inline-block; width:2px; height:.82em;
  background:var(--accent); vertical-align:-.06em; margin-left:2px;
  animation:blink 1.05s steps(1) infinite;
}

.lede__hero{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(260px, 42vw);
  gap:clamp(20px, 3.2vw, 48px);
  align-items:center;
}
.lede__copy{ min-width:0; position:relative; z-index:2; }
.lede__pix{
  position:relative;
  width:100%;
  max-width:520px;
  justify-self:end;
  isolation:isolate;
  overflow:visible;
  aspect-ratio:720 / 980; /* hold space so the photo never flashes in */
}
.lede__pix canvas{
  position:relative; z-index:1;
  width:100%; height:auto; display:block;
}
.lede__pix-layer{
  position:absolute;
  pointer-events:none;
  z-index:4;
  display:block;
}
.lede__pix-layer.is-live{
  filter:drop-shadow(10px 26px 28px rgba(18,14,10,.42));
}
[data-theme="dark"] .lede__pix-layer.is-live{
  filter:drop-shadow(0 22px 30px rgba(0,0,0,.55));
}
/* Source photo stays invisible unless JS is off or motion is reduced. */
.lede__pix-fallback{
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip:rect(0,0,0,0);
}
.lede__pix.is-static{
  aspect-ratio:auto;
}
.lede__pix.is-static .lede__pix-fallback{
  position:relative; width:100%; height:auto;
  clip:auto; overflow:visible;
  filter:drop-shadow(10px 26px 28px rgba(18,14,10,.42));
}
[data-theme="dark"] .lede__pix.is-static .lede__pix-fallback{
  filter:drop-shadow(0 22px 30px rgba(0,0,0,.55));
}
.lede__pix:not(.is-live) canvas{ display:none; }

.lede__intro{
  margin-top:8px;
  padding-top:22px;
  border-top:1px solid var(--rule);
}
.lede__copy .meta{
  margin-top:28px;
  padding-top:18px;
  border-top:1px solid var(--rule);
}
.lede__bio{
  max-width:54ch; font-family:var(--read); font-weight:300;
  font-size:18px; line-height:1.62; color:var(--fg-dim);
}
.hero-actions{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:22px;
}
.hero-actions a{
  display:grid; place-items:center;
  width:42px; height:42px;
  color:var(--fg);
  border:1px solid var(--rule); border-radius:2px;
  transition:color .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
}
.hero-actions a svg{ width:18px; height:18px; display:block; }
.hero-actions a.is-mail:hover,
.hero-actions a.is-mail:focus-visible{
  background:#EA4335; border-color:#EA4335; color:#fff;
}
.hero-actions a.is-gh:hover,
.hero-actions a.is-gh:focus-visible{
  background:#fff; border-color:#fff; color:#17150f;
}
[data-theme="light"] .hero-actions a.is-gh:hover,
[data-theme="light"] .hero-actions a.is-gh:focus-visible{
  background:#17150f; border-color:#17150f; color:#fff;
}
.hero-actions a.is-li:hover,
.hero-actions a.is-li:focus-visible{
  background:#0A66C2; border-color:#0A66C2; color:#fff;
}
.hero-actions a.is-cv:hover,
.hero-actions a.is-cv:focus-visible{
  background:var(--accent); border-color:var(--accent); color:var(--bg);
}

.meta{ display:flex; gap:clamp(20px,3.4vw,48px); }
.meta dt{
  font-family:var(--mono); font-size:10px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--label); margin-bottom:5px;
}
.meta dd{ font-size:13.5px; white-space:nowrap; }

/* ── Bands ──────────────────────────────────────────────── */
.band{
  max-width:var(--maxw); margin:0 auto;
  padding:0 var(--gut) clamp(64px,7vw,96px);
  border-top:0;
  position:relative;
}
.band__end{
  grid-column:1 / -1;
  height:0;
  border:0;
  border-bottom:1px solid var(--rule);
  margin:clamp(36px, 5vw, 56px) 0 0;
  pointer-events:none;
}
.band__head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:20px;
  margin:clamp(40px, 5.5vw, 72px) 0 clamp(28px, 3.4vw, 44px);
  padding:0 0 14px;
  border-bottom:1px solid var(--rule);
  grid-column:1 / -1;
}
.band__label{
  position:relative; display:inline-block;
  font-family:var(--serif); font-weight:300; font-style:italic;
  font-size:clamp(28px, 4.2vw, 44px);
  line-height:1.32; letter-spacing:-.02em;
  color:var(--fg);
  padding:.08em .18em .34em;
  margin:0 -.18em;
  white-space:nowrap;
  overflow:visible;
  --fill:0%;
}
.band__fill{
  position:absolute; inset:0;
  padding:inherit;
  font:inherit; letter-spacing:inherit; line-height:inherit;
  color:var(--bg);
  background:var(--accent);
  white-space:nowrap;
  pointer-events:none; user-select:none;
  clip-path:inset(0 calc(100% - var(--fill, 0%)) 0 0);
}
.band__no{
  font-family:var(--mono); font-weight:400;
  font-size:11px; letter-spacing:.14em;
  color:var(--accent);
  flex:none; line-height:1; white-space:nowrap;
}

/* ── Project evidence (editorial rows, not cards) ───────── */
.projects{ border-top:0; }
.project{ padding:30px 0; border-bottom:1px solid var(--rule); }
.project__head{
  display:grid; grid-template-columns:56px minmax(0,1fr) 84px;
  align-items:baseline; gap:20px;
}
.project__no,
.project__year{
  font-family:var(--mono); font-size:11px; color:var(--fg-faint);
  letter-spacing:.06em;
}
.project__year{ text-align:right; }
.project__title{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(34px,4.3vw,54px); line-height:1.04;
  letter-spacing:-.01em;
}
.project__title a{ transition:color .35s var(--ease), font-style .35s var(--ease); }
.project:hover .project__title a,
.project__title a:focus-visible{ color:var(--accent); font-style:italic; }
.project__body{
  display:grid; grid-template-columns:minmax(0,1.2fr) minmax(190px,.75fr) auto;
  gap:clamp(24px,4vw,64px); align-items:start;
  margin:24px 84px 0 76px;
}
.project__label{
  display:block; margin-bottom:7px;
  font-family:var(--mono); font-size:10px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--label);
}
.project__body p{ max-width:48ch; font-size:14px; line-height:1.65; color:var(--fg-dim); }
.project__actions{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.project__link{
  display:inline-flex; align-items:center; white-space:nowrap;
  font-family:var(--mono); font-size:10px; font-weight:500;
  letter-spacing:.07em; text-transform:uppercase; color:var(--accent);
  border:1px solid currentColor; border-radius:2px; padding:6px 10px;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.project__link:hover,
.project__link:focus-visible{ background:var(--accent); color:var(--bg); }

/* ── About ──────────────────────────────────────────────── */
.band--split{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  column-gap:clamp(36px,7vw,110px);
  row-gap:0;
  align-items:start;
}
.band--split .band__head{ grid-column:1/-1; }

.prose p{
  font-family:var(--read); font-weight:300;
  font-size:18.5px; line-height:1.68; letter-spacing:.002em;
  color:var(--fg-dim); margin-bottom:20px; max-width:60ch;
}
.prose p.prose__big{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(28px,3.7vw,44px);
  line-height:1.2; color:var(--fg); margin-bottom:32px;
  letter-spacing:-.008em; max-width:26ch;
}
.prose p:last-child{ margin-bottom:0; }

.stack__group{ padding:16px 0; border-top:1px solid var(--rule); }
.stack__group:first-child{ border-top:0; padding-top:0; }
.stack h3{
  font-family:var(--mono); font-size:10px; font-weight:400;
  letter-spacing:.1em; text-transform:uppercase; color:var(--label);
  margin-bottom:7px;
}
.stack p{ font-size:14px; line-height:1.65; }

/* ── Java editor (types itself out) ─────────────────────── */
.editor-wrap{ position:relative; margin:0 0 34px; }

/* floating chips — compact, recruiter-relevant proof points */
.chip{
  position:absolute; z-index:3;
  font-family:var(--mono); font-size:10px; letter-spacing:.07em;
  text-transform:uppercase; white-space:nowrap;
  background:color-mix(in srgb, var(--bg) 82%, transparent); color:var(--fg);
  border:1px solid var(--rule); border-radius:2px;
  padding:7px 11px;
  box-shadow:0 8px 22px rgba(0,0,0,.32);
  backdrop-filter:blur(10px);
}
[data-theme="light"] .chip{ box-shadow:0 8px 22px rgba(23,21,15,.10); }
.chip--a{ top:-14px; right:-12px; color:var(--accent); border-color:var(--accent); }
.chip--b{ bottom:-14px; left:-12px; color:var(--accent); border-color:var(--accent); }
@media (max-width:520px){ .chip{ display:none; } }

.editor{
  border:1px solid var(--rule);
  background:#050914;
  overflow:hidden;
}
[data-theme="light"] .editor{ background:#fbfbfa; }

.editor__bar{
  display:flex; align-items:center; gap:11px;
  padding:10px 13px; border-bottom:1px solid var(--rule);
  background:rgba(255,255,255,.02);
}
[data-theme="light"] .editor__bar{ background:rgba(23,21,15,.03); }

/* traffic lights, warmed to sit inside this palette */
.lights{ display:flex; gap:6px; }
.lights i{ width:9px; height:9px; border-radius:50%; display:block; }
.lights i:nth-child(1){ background:#d3543f; }
.lights i:nth-child(2){ background:#d8a24a; }
.lights i:nth-child(3){ background:#7f9f6a; }

.editor__file{
  font-family:var(--mono); font-size:10px; letter-spacing:.07em;
  text-transform:lowercase; color:var(--fg-faint);
}

.editor__code{
  margin:0; padding:18px 16px 20px;
  font-family:var(--mono); font-size:11.5px; line-height:1.9;
  color:var(--fg-dim); white-space:pre; overflow-x:auto;
  min-height:calc(13 * 1.9em + 38px);
}
.editor__code code{ font:inherit; }

/* syntax palette — warm, matches the site */
.editor .k{ color:#c98bd4; }            /* class, String, int, void, while */
.editor .t{ color:var(--fg); }  /* the class name          */
.editor .s{ color:#8fae72; }            /* strings                          */
.editor .n{ color:var(--accent); }      /* numbers                          */
.editor .f{ color:#7fa6c9; }            /* method names                     */
.editor .c{ color:var(--fg-faint); font-style:italic; }
[data-theme="light"] .editor .k{ color:#8b4a99; }
[data-theme="light"] .editor .s{ color:#4d7038; }
[data-theme="light"] .editor .f{ color:#3f6a92; }

.editor__caret{
  display:inline-block; width:7px; height:13px;
  background:var(--accent); vertical-align:-2px;
  animation:blink 1.05s steps(1) infinite;
}
.editor__caret.done{ animation:none; opacity:0; }
@keyframes blink{ 50%{ opacity:0; } }

@media (max-width:1000px){
  .editor-wrap{ max-width:520px; }
}

/* ── Record (ledger, not timeline) ──────────────────────── */
.ledger{ border-top:1px solid var(--rule); }
.ledger__row{
  display:grid; grid-template-columns:130px minmax(0,1fr) 110px;
  gap:24px; padding:20px 0; border-bottom:1px solid var(--rule);
  align-items:baseline;
}
.ledger__k{
  font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--label); font-weight:400;
}
.ledger__v{ font-size:14px; color:var(--fg-dim); line-height:1.6; }
.ledger__v strong{
  display:block; font-family:var(--serif); font-size:22px; font-weight:400;
  color:var(--fg); letter-spacing:0; margin-bottom:3px;
}
.ledger__v a{ transition:color .3s; }
.ledger__v a:hover strong{ color:var(--accent); }
.ledger__t{
  font-family:var(--mono); font-size:11px; color:var(--fg-dim);
  text-align:right; letter-spacing:.03em;
}

/* Verify button — the whole certificate link lives here, not on the title. */
.verify{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.07em;
  text-transform:uppercase; color:var(--accent);
  border:1px solid currentColor; border-radius:2px;
  padding:6px 11px; white-space:nowrap;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.verify:hover,
.verify:focus-visible{ background:var(--accent); color:var(--bg); }
.verify__arrow{ transition:transform .3s var(--ease); }
.verify:hover .verify__arrow{ transform:translate(2px,-2px); }

/* screen-reader-only text so each button says what it verifies */
.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%);
  white-space:nowrap; border:0;
}

.cv{
  display:inline-flex; align-items:center; gap:12px; margin-top:36px;
  background:transparent; color:var(--accent);
  border:1px solid var(--accent); border-radius:2px;
  padding:10px 14px;
  font-family:var(--sans); font-size:13px; font-weight:400;
  letter-spacing:.01em;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.cv:hover,
.cv:focus-visible{ background:var(--accent); color:var(--bg); }
.cv__ext{
  font-family:var(--mono); font-size:9.5px; color:inherit; opacity:.78;
  border-left:1px solid currentColor; padding-left:12px;
}

/* ── Contact ────────────────────────────────────────────── */
.band--end{ padding-bottom:clamp(28px,4vw,48px); }

/* ── Close / acknowledgement ─────────────────────────────── */
.connect__line{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(32px, 5.4vw, 68px);
  line-height:1.08; letter-spacing:-.02em;
  max-width:14ch;
  margin:0 0 14px;
}
.connect__sub{
  font-family:var(--serif); font-weight:300; font-style:italic;
  font-size:clamp(22px, 3vw, 34px);
  color:var(--fg-dim);
  margin:0 0 32px;
}
.connect{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto auto;
  column-gap:clamp(28px, 5vw, 72px);
  row-gap:14px;
  align-items:center;
}
.connect__social{
  grid-column:1; grid-row:1;
  display:flex; align-items:center; gap:14px;
}
.connect__mark{
  grid-column:2; grid-row:1;
  justify-self:end; width:min(420px, 100%);
}
.connect__links{
  grid-column:1; grid-row:2; justify-self:start;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 22px;
}
.connect__mail,
.connect__cv{
  font-family:var(--mono); font-size:12px; letter-spacing:.02em;
  color:var(--fg-dim); background:none;
  border:0; border-bottom:1px solid var(--rule); border-radius:0;
  padding:0 0 4px; line-height:1.4; text-align:left;
  cursor:pointer;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.connect__cv{ text-decoration:none; }
.connect__mail:hover,
.connect__mail:focus-visible,
.connect__mail.is-copied,
.connect__cv:hover,
.connect__cv:focus-visible{
  color:var(--accent); border-color:var(--accent);
}
.connect__social a{
  display:grid; place-items:center;
  width:48px; height:48px;
  color:var(--fg);
  border:1px solid var(--rule); border-radius:2px;
  transition:color .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
}
.connect__social a svg{ width:22px; height:22px; display:block; }
.connect__social a.is-mail:hover,
.connect__social a.is-mail:focus-visible{
  background:#EA4335; border-color:#EA4335; color:#fff;
}
.connect__social a.is-li:hover,
.connect__social a.is-li:focus-visible{
  background:#0A66C2; border-color:#0A66C2; color:#fff;
}
.connect__social a.is-gh:hover,
.connect__social a.is-gh:focus-visible{
  background:#fff; border-color:#fff; color:#17150f;
}
[data-theme="light"] .connect__social a.is-gh:hover,
[data-theme="light"] .connect__social a.is-gh:focus-visible{
  background:#17150f; border-color:#17150f; color:#fff;
}
.connect__social a.is-wa:hover,
.connect__social a.is-wa:focus-visible{
  background:#25D366; border-color:#25D366; color:#fff;
}
.connect__social a.is-fb:hover,
.connect__social a.is-fb:focus-visible{
  background:var(--accent); border-color:var(--accent); color:var(--bg);
}
.close__sign{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:1400 / 325;
  margin:0;
}
.close__sign img,
.close__sign canvas{
  display:block;
  width:100%;
  height:auto;
}
.close__sign canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
}
.close__sign.is-waiting img,
.close__sign.is-live img{ opacity:0; }
.close__sign.written canvas{ display:none; }
[data-theme="dark"] .close__sign img,
[data-theme="dark"] .close__sign canvas{ filter:invert(1); }
@media (prefers-reduced-motion:reduce){
  .close__sign.is-waiting img,
  .close__sign.is-live img{ opacity:1; }
  .close__sign canvas{ display:none; }
}
@media (max-width:720px){
  .connect{
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto;
    gap:22px;
  }
  .connect__social{ grid-column:1; grid-row:1; }
  .connect__links{ grid-column:1; grid-row:2; }
  .connect__mark{ grid-column:1; grid-row:3; justify-self:start; width:min(380px, 100%); }
}

/* ── Note form ──────────────────────────────────────────── */
.note{ margin-top:56px; max-width:660px; position:relative; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.note__label{
  font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--label); font-weight:400; margin-bottom:18px;
}
.note__grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }

.fld{ display:block; margin-bottom:20px; }
.fld > span{
  display:block; font-family:var(--mono); font-size:10px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--label);
  margin-bottom:7px;
}
.fld input,
.fld textarea{
  width:100%; background:transparent; border:0;
  border-bottom:1px solid var(--rule);
  padding:8px 0; font-family:var(--sans); font-size:15px; color:var(--fg);
  resize:vertical; transition:border-color .3s;
}
.fld input:focus,
.fld textarea:focus{ outline:none; border-bottom-color:var(--accent); }
.fld.bad input,
.fld.bad textarea{ border-bottom-color:var(--accent); }
.err{
  display:block; font-size:11.5px; color:var(--accent);
  margin-top:6px; min-height:1em;
}

/* The verified problem tally — orange, with stable tabular figures. */
.tally{
  color:var(--accent);
  /* Cormorant defaults to old-style figures — digits sit at different
     heights. Force lining + tabular so every digit is aligned. */
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"lnum" 1, "tnum" 1;
  letter-spacing:.005em;
}

/* ── Practice heatmap (Codolio, all platforms) ──────────── */
.heat-wrap{
  margin-top:28px;
  padding-top:22px;
  border-top:1px solid var(--rule);
}
.heat__bar{
  display:flex; flex-wrap:wrap; align-items:baseline;
  justify-content:space-between; gap:10px 18px;
  margin-bottom:12px;
}
.heat__caption{
  font-family:var(--mono); font-size:10px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--fg-faint);
}
.heat__scale{
  display:inline-flex; align-items:center; gap:4px;
  font-family:var(--mono); font-size:10px; letter-spacing:.04em;
  color:var(--fg-faint); text-transform:uppercase;
}
.heat__scale i{
  width:10px; height:10px; border-radius:2px; display:block;
  background:var(--rule);
}
.heat__scale i[data-l="1"]{ background:color-mix(in srgb, var(--accent) 28%, var(--bg)); }
.heat__scale i[data-l="2"]{ background:color-mix(in srgb, var(--accent) 48%, var(--bg)); }
.heat__scale i[data-l="3"]{ background:color-mix(in srgb, var(--accent) 72%, var(--bg)); }
.heat__scale i[data-l="4"]{ background:var(--accent); }

.heat{
  display:flex; gap:14px; align-items:flex-start;
  overflow-x:auto; padding-bottom:6px;
  min-height:122px;
  -webkit-overflow-scrolling:touch;
}
.heat__dows{
  display:grid; grid-template-rows:14px repeat(7, 11px);
  gap:3px;
  font-family:var(--mono); font-size:9px; letter-spacing:.04em;
  color:var(--fg-faint); text-transform:uppercase;
  padding-top:0;
}
.heat__dows span{ display:flex; align-items:center; height:11px; }
.heat__dows span:first-child{ height:14px; }

.heat__weeks{
  display:flex; gap:3px; min-width:min-content;
}
.heat__week{
  display:grid; grid-template-rows:14px repeat(7, 11px);
  gap:3px;
}
.heat__mo{
  font-family:var(--mono); font-size:9px; letter-spacing:.04em;
  color:var(--fg-faint); text-transform:uppercase;
  height:14px; line-height:14px; white-space:nowrap;
  overflow:visible;
}
.heat__cell{
  width:11px; height:11px; border-radius:2px;
  background:var(--rule); display:block;
}
.heat__cell[data-l="1"]{ background:color-mix(in srgb, var(--accent) 28%, var(--bg)); }
.heat__cell[data-l="2"]{ background:color-mix(in srgb, var(--accent) 48%, var(--bg)); }
.heat__cell[data-l="3"]{ background:color-mix(in srgb, var(--accent) 72%, var(--bg)); }
.heat__cell[data-l="4"]{ background:var(--accent); }
.heat__cell:hover,
.heat__cell:focus-visible{
  outline:1px solid var(--fg);
  outline-offset:1px;
}

@media (max-width:720px){
  .heat__dows{ display:none; }
}

/* ── Project case studies ───────────────────────────────── */
.case{
  max-width:var(--maxw); margin:0 auto;
  padding:calc(var(--bar) + clamp(36px,6vw,72px)) var(--gut) clamp(64px,8vw,100px);
}
.case__kicker{
  font-family:var(--mono); font-size:11px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--fg-dim);
  display:flex; align-items:center; gap:9px; margin-bottom:22px;
}
.case__title{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(56px,12vw,148px); line-height:.88;
  letter-spacing:-.02em; margin:0 0 22px;
}
.case__title em{ font-style:italic; color:var(--accent); }
.case__lead{
  font-family:var(--read); font-weight:300;
  font-size:clamp(20px,2.5vw,30px); line-height:1.35;
  color:var(--fg-dim); max-width:28ch; margin-bottom:clamp(28px,4vw,40px);
}
.case__shot{
  margin:0 0 clamp(36px,5vw,56px);
  border:1px solid var(--rule);
  overflow:hidden;
}
.case__shot img{
  width:100%; height:auto; display:block;
}
.case__grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(28px,4vw,48px);
  border-top:1px solid var(--rule); padding-top:clamp(28px,4vw,40px);
}
.case__block h2{
  font-family:var(--mono); font-size:10px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--label);
  margin-bottom:12px;
}
.case__block p{
  font-size:15.5px; line-height:1.65; color:var(--fg-dim); max-width:42ch;
}
.case__note{ margin-top:14px; font-size:14px; }
.case__tech{
  display:flex; flex-wrap:wrap; gap:8px;
}
.case__tech li{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--accent);
  border:1px solid currentColor; border-radius:2px; padding:6px 10px;
}
.case__actions{
  display:flex; flex-wrap:wrap; gap:10px; margin-top:clamp(32px,5vw,52px);
}
.case__more{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px 32px;
  margin-top:clamp(48px,7vw,80px); padding-top:22px;
  border-top:1px solid var(--rule);
  font-family:var(--serif); font-size:22px; font-weight:300;
}
.case__more a{ transition:color .3s var(--ease); }
.case__more a:hover,
.case__more a:focus-visible{ color:var(--accent); font-style:italic; }
.case__more .back{ font-family:var(--mono); font-size:11px; letter-spacing:.07em;
  text-transform:uppercase; font-style:normal; color:var(--fg-dim); align-self:center; }
.case__more .back:hover{ color:var(--accent); font-style:normal; }

@media (max-width:900px){
  .case__grid{ grid-template-columns:1fr; }
}

/* Subject chips — same outlined/filled language as Verify and the cat. */
.topic{ border:0; padding:0; margin-bottom:20px; }
.topic legend{
  padding:0; font-family:var(--mono); font-size:10px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--label);
  margin-bottom:9px;
}
.topic__opts{ display:flex; flex-wrap:wrap; gap:7px; }
.topic__opt{ position:relative; }
.topic__opt input{
  position:absolute; opacity:0; width:100%; height:100%;
  top:0; left:0; margin:0; cursor:pointer;
}
.topic__opt span{
  display:inline-block;
  font-family:var(--mono); font-size:10px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--accent);
  border:1px solid currentColor; border-radius:2px;
  padding:6px 10px; cursor:pointer;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.topic__opt:hover span{ background:color-mix(in srgb, var(--accent) 14%, transparent); }
.topic__opt input:checked + span{ background:var(--accent); color:var(--bg); }
.topic__opt input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:2px; }

.send{
  font-family:var(--mono); font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; border-bottom:1px solid var(--hair);
  padding-bottom:5px; margin-top:6px; transition:color .3s, border-color .3s;
}
.send:hover{ color:var(--accent); border-color:var(--accent); }
.send[disabled]{ opacity:.45; cursor:wait; }
.note__status{ font-size:13px; margin-top:16px; min-height:1.2em; color:var(--fg-dim); }
.note__status.ok{ color:var(--fg); }
.note__status.bad{ color:var(--accent); }

/* ── Colophon ───────────────────────────────────────────── */
.colophon{
  max-width:var(--maxw); margin:0 auto;
  padding:22px var(--gut);
  border-top:1px solid var(--rule);
  display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center; gap:10px 24px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.05em;
  color:var(--fg-faint); text-transform:uppercase;
  position:relative; z-index:2;
}
.colophon > :nth-child(1){ justify-self:start; }
.colophon > :nth-child(2){ justify-self:center; text-align:center; }
.colophon > :nth-child(3){ justify-self:end; text-align:right; }
.colophon__end{
  justify-self:end; display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.dmca-badge{
  display:inline-flex; align-items:center; line-height:0;
  text-transform:none; letter-spacing:0;
}
.dmca-badge img{ height:20px; width:auto; opacity:.9; }
.dmca-badge:hover img,
.dmca-badge:focus-visible img{ opacity:1; }
@media (max-width:720px){
  .colophon{
    grid-template-columns:1fr;
    padding-right:max(var(--gut), 112px);
  }
  .colophon > :nth-child(2),
  .colophon > :nth-child(3){ justify-self:start; text-align:left; }
}
.fb-open{
  font:inherit; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent); background:transparent;
  border:1px solid var(--accent); border-radius:2px;
  padding:8px 14px; text-decoration:none;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.fb-open:hover,
.fb-open:focus-visible{ background:var(--accent); color:var(--bg); }

.leaf .note{
  margin-top:32px;
  max-width:640px;
  padding:clamp(22px, 4vw, 40px);
  border:1px solid var(--rule);
  background:color-mix(in srgb, var(--fg) 4%, var(--bg));
}
.leaf .fld input,
.leaf .fld textarea{
  font-family:var(--sans); font-weight:300;
  font-size:16px; line-height:1.55;
  color:var(--fg);
  background-color:var(--bg);
  border:1px solid var(--rule); border-radius:2px;
  padding:12px 14px;
  color-scheme:inherit;
}
.leaf .fld input:-webkit-autofill,
.leaf .fld input:-webkit-autofill:hover,
.leaf .fld input:-webkit-autofill:focus,
.leaf .fld textarea:-webkit-autofill,
.leaf .fld textarea:-webkit-autofill:hover,
.leaf .fld textarea:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--fg);
  caret-color:var(--fg);
  box-shadow:0 0 0 1000px var(--bg) inset;
  transition:background-color 99999s ease-out;
}
.leaf .fld input:focus,
.leaf .fld textarea:focus{
  outline:none; border-color:var(--accent); border-bottom-color:var(--accent);
}
.leaf .fld.bad input,
.leaf .fld.bad textarea{ border-color:var(--accent); }
.leaf .send{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:10px; padding:12px 22px;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--bg); background:var(--accent);
  border:1px solid var(--accent); border-radius:2px;
  cursor:pointer;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.leaf .send:hover,
.leaf .send:focus-visible{
  background:transparent; color:var(--accent);
}
.leaf .send[disabled]{ opacity:.45; cursor:wait; }
.leaf .case__title{ font-size:clamp(42px, 8vw, 88px); }

/* Real signature, traced from ink to vector. Inherits currentColor,
   so it works in both themes with no second asset.

   It writes itself: the centreline of each stroke is drawn inside an SVG
   mask, and animating stroke-dashoffset uncovers the real outline along
   the path the pen actually took. */
.sign{
  /* © and signature share one baseline-ish row */
  display:flex; flex-direction:row; align-items:center; gap:13px;
}
.sign__mark{
  width:168px; height:auto; display:block;
  color:var(--fg);
  transition:color .4s var(--ease), transform .4s var(--ease);
}
.colophon:hover .sign__mark{ color:var(--accent); }
.sign__c{ display:block; white-space:nowrap; transform:translateY(-2px); }

/* the pen strokes live in the mask; dashoffset 100 = fully hidden */
.sign__pen{
  stroke-dasharray:100;
  stroke-dashoffset:100;
}
/* The surname uses its own centerline guides. A slightly wider reveal keeps
   every edge of the original ink visible without changing the signature. */
.sign__pen--das{ stroke-width:58; }
.sign.writing .sign__pen{
  animation:signWrite var(--dur,1s) linear var(--delay,0s) forwards;
}
@keyframes signWrite{ to{ stroke-dashoffset:0; } }

/* once written, hold it visible for good */
.sign.written .sign__pen{ stroke-dashoffset:0; }

@media (max-width:720px){
  .sign__mark{ width:146px; }
}

@media (prefers-reduced-motion:reduce){
  .sign__pen{ stroke-dashoffset:0; }
  .sign.writing .sign__pen{ animation:none; }
}

/* Content and divider lines remain stationary while the page scrolls. */

/* ── Responsive ─────────────────────────────────────────── */
/* Short laptop screens: shrink the display so the hero fits one screen. */
@media (min-width:721px) and (max-height:820px){
  .display{ font-size:clamp(60px,13vw,162px); }
  .doing{ font-size:clamp(20px,2.6vw,32px); margin:-14px 0 32px; }
  .lede{ padding-bottom:38px; }
  .lede__bio{ font-size:16.5px; }
  .lede__pix{ max-width:380px; }
}
@media (min-width:721px) and (max-height:700px){
  .display{ font-size:clamp(52px,11vw,120px); }
  .doing{ font-size:clamp(18px,2.2vw,26px); margin:-10px 0 24px; }
  .lede__pix{ max-width:380px; }
}
@media (min-width:901px){
  .display{ font-size:clamp(64px, 10vw, 200px); margin-bottom:28px; }
  .doing{ margin:-12px 0 0; }
}
/* Tall windows (Chrome’s extra chrome often leaves height > 820): let the
   portrait fill the right column instead of sitting in a 520px box. Short
   laptops keep 380px above so the name is not covered. */
@media (min-width:901px) and (min-height:821px){
  .lede__hero{ grid-template-columns:minmax(0,1fr) minmax(300px, 46vw); }
  .lede__pix{ max-width:680px; }
}
@media (max-width:900px){
  .lede__hero{ grid-template-columns:1fr; gap:22px; }
  .lede__pix{
    order:-1;
    width:min(78vw, 380px);
    max-width:380px;
    justify-self:center;
  }
}
/* Small phones (SE, 360x640): same problem, narrower. */
@media (max-width:1000px){
  .band--split{ grid-template-columns:1fr; }
  .lede__foot{ grid-template-columns:1fr; align-items:start; }
  .project__body{
    grid-template-columns:minmax(0,1fr) minmax(180px,.7fr);
    margin-right:0;
  }
  .project__actions{ grid-column:1/-1; flex-direction:row; flex-wrap:wrap; }
}

@media (max-width:720px){
  .masthead__nav{
    position:fixed; inset:0; background:var(--bg);
    flex-direction:column; justify-content:center; align-items:center;
    gap:26px; opacity:0; pointer-events:none;
    transition:opacity .4s var(--ease);
  }
  [data-theme="dark"] .masthead{ color:var(--fg); }
  .masthead__nav.open{ opacity:1; pointer-events:auto; }
  .masthead__nav a{ font-family:var(--serif); font-weight:300; font-size:34px; opacity:1; padding:6px 16px; }
  .menu-btn{ display:block; z-index:2; }
  .display{ font-size:clamp(56px,20vw,110px); }
  .hero-actions{ margin-top:17px; gap:9px 16px; }
  .project{ padding:25px 0; }
  .project__head{ grid-template-columns:34px minmax(0,1fr) auto; gap:10px; }
  .project__body{ grid-template-columns:1fr; gap:18px; margin:22px 0 0; }
  .project__actions{ grid-column:auto; }
  .project__title{ font-size:clamp(30px,9vw,42px); }
  .meta{ flex-wrap:wrap; gap:18px 30px; }
  .note__grid{ grid-template-columns:1fr; gap:0; }
  .ledger__row{ grid-template-columns:1fr; gap:6px; padding:18px 0; }
  .ledger__k:empty{ display:none; }
  .ledger__t{ text-align:left; }
  .colophon{ flex-direction:column; gap:8px; }
}

/* Short phones. This follows the general mobile block so its smaller
   display size wins and never collides with the masthead. */
@media (max-width:720px) and (max-height:700px){
  .display{ font-size:clamp(42px,14vw,64px); }
  .doing{ font-size:clamp(17px,4.4vw,22px); margin:-8px 0 22px; }
  .lede{ padding-bottom:32px; }
  .lede__bio{ font-size:16px; }
  .hero-actions{ margin-top:13px; }
  .meta{ gap:12px 22px; }
  .meta dd{ font-size:12.5px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important; }
  html{ scroll-behavior:auto; }
}

@media print{
  .masthead,.note,.toggle,.cat,.hero-actions,.fb,.fb-open,.dock,.rise,.ink{ display:none!important; }
  html,body{ background:#fff; color:#000; }
  .band{ padding:20px 0; border-color:#ccc; page-break-inside:avoid; }
}

/* ── Cat helper ─────────────────────────────────────────── */
.dock{
  position:fixed; right:clamp(16px,2.4vw,30px); bottom:clamp(16px,2.6vh,28px);
  z-index:120; display:flex; flex-direction:column; align-items:flex-end; gap:10px;
}
@media (min-width:721px) and (max-width:1180px){
  .dock{ bottom:clamp(72px, 11vh, 110px); }
}
.rise{
  width:42px; height:42px; padding:0;
  display:grid; place-items:center;
  color:var(--accent);
  background:var(--bg);
  border:1px solid var(--accent); border-radius:2px;
  box-shadow:0 10px 24px rgba(0,0,0,.45);
  position:absolute; right:0; bottom:0;
  opacity:0; pointer-events:none; transform:translateY(8px);
  transition:opacity .3s var(--ease), transform .3s var(--ease),
             color .3s, background .3s, border-color .3s;
}
[data-theme="light"] .rise{ box-shadow:0 10px 24px rgba(23,21,15,.14); }
.rise.is-on{
  position:relative; bottom:auto;
  opacity:1; pointer-events:auto; transform:none;
}
.rise:hover,
.rise:focus-visible{
  color:var(--bg); background:var(--accent); border-color:var(--accent);
}
.rise svg{ width:18px; height:18px; display:block; }
.cat{
  position:absolute; right:0; bottom:0; width:0; height:0; overflow:hidden;
  display:flex; flex-direction:column; align-items:flex-end; gap:12px;
  opacity:0; visibility:hidden; transform:translateY(14px) scale(.94);
  pointer-events:none;
  transition:opacity .45s var(--ease), transform .45s var(--ease), visibility .45s;
}
.cat.ready{
  position:relative; width:auto; height:auto; overflow:visible;
  opacity:1; visibility:visible; transform:none; pointer-events:auto;
}

/* the tab you click */
.cat__tab{
  display:inline-flex; align-items:center;
  background:var(--bg); border:1px solid var(--accent); border-radius:2px;
  padding:10px 16px;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  transition:background .3s var(--ease), color .3s var(--ease),
             border-color .3s var(--ease), transform .3s var(--ease);
}
[data-theme="light"] .cat__tab{ box-shadow:0 10px 30px rgba(23,21,15,.14); }
.cat__tab:hover,
.cat__tab:focus-visible{
  background:var(--accent); transform:translateY(-2px);
}
.cat__hi{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.06em;
  text-transform:none; color:var(--accent); white-space:nowrap;
}
.cat__tab:hover .cat__hi,
.cat__tab:focus-visible .cat__hi{ color:var(--bg); }
.cat.open .cat__tab{ display:none; }

/* the panel */
.cat__box{
  width:min(330px, calc(100vw - 32px));
  background:color-mix(in srgb, var(--bg) 90%, transparent); border:1px solid var(--rule); border-radius:4px;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  backdrop-filter:blur(16px);
  display:flex; flex-direction:column; overflow:hidden;
  transform-origin:bottom right;
  animation:catin .34s var(--ease);
}
[data-theme="light"] .cat__box{ box-shadow:0 24px 60px rgba(23,21,15,.18); }
@keyframes catin{ from{ opacity:0; transform:translateY(10px) scale(.97); } }
.cat__box[hidden]{ display:none; }

.cat__bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:11px 13px; border-bottom:1px solid var(--rule);
}
.cat__title{
  font-family:var(--mono); font-size:10px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--label);
}
.cat__x{ font-size:12px; color:var(--fg-dim); line-height:1; padding:2px 4px; }
.cat__x:hover{ color:var(--accent); }

.cat__log{
  padding:15px 13px; display:flex; flex-direction:column; gap:9px;
  max-height:min(46vh,300px); overflow-y:auto;
}
.msg{
  font-size:13.5px; line-height:1.6; padding:9px 12px; border-radius:3px;
  max-width:88%; animation:msgin .3s var(--ease);
}
@keyframes msgin{ from{ opacity:0; transform:translateY(5px); } }
.msg--cat{ background:var(--sel); color:var(--fg); align-self:flex-start; }
.msg--me { background:var(--accent); color:var(--bg); align-self:flex-end; }
.msg a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.msg--cat a{ color:var(--accent); }

.cat__asks{
  display:flex; flex-wrap:wrap; gap:6px;
  padding:11px 13px; border-top:1px solid var(--rule);
}
.ask{
  font-family:var(--mono); font-size:10px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--accent);
  border:1px solid currentColor; border-radius:2px; padding:5px 9px;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.ask:hover{ background:var(--accent); color:var(--bg); }

/* typing dots */
.dots{ display:inline-flex; gap:3px; }
.dots i{
  width:4px; height:4px; border-radius:50%; background:var(--fg-dim);
  animation:dot 1.1s infinite;
}
.dots i:nth-child(2){ animation-delay:.16s; }
.dots i:nth-child(3){ animation-delay:.32s; }
@keyframes dot{ 0%,60%,100%{opacity:.25} 30%{opacity:1} }

@media (max-width:520px){
  .cat__tab{ padding:9px 14px; }
}
-child(2){ animation-delay:.16s; }
.dots i:nth-child(3){ animation-delay:.32s; }
@keyframes dot{ 0%,60%,100%{opacity:.25} 30%{opacity:1} }

@media (max-width:520px){
  .cat__tab{ padding:9px 14px; }
}