/* ===========================================================
   palette — everything derived from two colors:
   OG blue #0A3161   |   OG red #B31942
   blue carries structure; red marks the one thing that matters
   (a link, a query cell, a section). edit the two roots and the
   whole page re-tunes.
   =========================================================== */
:root{
  --blue:#0A3161;       /* og blue — structure, headings */
  --red:#B31942;        /* og red — accents, links, the query */
  --blue-400:#3f5d86;   /* lighter blue — separators, muted accents */
  --blue-100:#dbe3ee;   /* hairlines, borders */
  --blue-50:#eef2f8;    /* faint blue wash — the attention panel */
  --ink:#0c1a2e;        /* near-black, blue undertone — body text */
  --muted:#5b6b80;      /* muted blue-grey — secondary text */
  --paper:#ffffff;      /* plain white */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:16px/1.7 ui-monospace,"SF Mono",Menlo,Monaco,"Cascadia Code",Consolas,monospace;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--red);color:#fff}
main{max-width:720px;margin:0 auto;padding:clamp(28px,6vw,72px) 22px 56px}

a{color:var(--red);text-decoration:none;border-bottom:1px solid transparent;
  transition:border-color .15s ease}
a:hover{border-bottom-color:var(--red)}
a:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:1px}

/* ---- header: blue-duotone portrait + name ---- */
header{display:flex;gap:clamp(16px,4vw,26px);align-items:center;flex-wrap:wrap;
  padding-bottom:clamp(18px,4vw,26px);
  border-style:solid;border-width:0 0 2px;        /* hairline that re-introduces the red */
  border-image:linear-gradient(90deg,var(--blue),var(--red)) 1}
.portrait{position:relative;flex:0 0 auto;line-height:0}
.portrait a{display:block;line-height:0;border:0}
.portrait img{
  display:block;width:96px;height:96px;object-fit:cover;border-radius:2px;
  filter:grayscale(1) contrast(1.05);outline:1px solid var(--blue-100);
  transition:filter .35s ease;
}
.portrait::after{                       /* tints the photo into the og blue */
  content:"";position:absolute;inset:0;border-radius:2px;pointer-events:none;
  background:var(--blue);mix-blend-mode:color;opacity:.55;
  transition:opacity .35s ease;
}
/* the portrait rests in og blue and wakes to full colour on attention */
.portrait:hover img,.portrait:focus-within img{filter:none}
.portrait:hover::after,.portrait:focus-within::after{opacity:0}
.id{min-width:0}
h1{margin:0;font-size:clamp(2rem,7vw,3rem);font-weight:700;letter-spacing:-.04em;
  line-height:1.04;color:var(--ink)}
.tag{margin:.5rem 0 0;color:var(--muted);font-size:.9rem}
.tag b{color:var(--red);font-weight:600}

/* ---- signature: the attention mask ---- */
.attn{
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,3vw,26px);
  margin:clamp(26px,5vw,40px) 0;padding:clamp(16px,3vw,22px);
  border:1px solid var(--blue-100);border-radius:3px;background:var(--blue-50);
}
.attn svg{flex:0 0 auto;width:clamp(116px,26vw,156px);height:auto}
.attn figcaption{flex:1 1 12rem;color:var(--blue);font-size:.86rem;line-height:1.5}
.attn figcaption b{color:var(--red);font-weight:600}

/* ---- sections ---- */
section{margin-top:clamp(34px,6vw,48px)}
h2{display:flex;align-items:center;gap:.6em;margin:0 0 1.1rem;
  font-size:1rem;font-weight:700;color:var(--blue)}
h2::before{content:"";flex:0 0 auto;width:.6em;height:.6em;border-radius:1px;
  background:var(--red)}                 /* a query cell, echoing the mask */
p{margin:0 0 1rem;text-align:justify}

/* ---- projects ---- */
.project{margin:0 0 1.3rem;padding-left:1rem;border-left:2px solid var(--blue-100)}
.project h3{margin:0;font-size:1rem;font-weight:700}
.project h3 a{color:var(--ink);border-bottom:1px solid var(--blue-100)}
.project h3 a:hover{color:var(--red);border-bottom-color:var(--red)}
.project .meta{margin:.15rem 0 .35rem;color:var(--muted);font-size:.82rem}
.project p{margin:0}

/* ---- elsewhere: inline row, blue dots between red links ---- */
ul.links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center}
ul.links a{font-size:.94rem}
ul.links li::after{content:"·";color:var(--blue-400);margin:0 .7rem;opacity:.6}
ul.links li:last-child::after{content:""}

/* ---- footer ---- */
footer{margin-top:clamp(40px,7vw,64px);padding-top:1rem;color:var(--muted);font-size:.78rem;
  border-style:solid;border-width:2px 0 0;             /* mirrors the header rule, reversed */
  border-image:linear-gradient(90deg,var(--red),var(--blue)) 1}

/* justified prose rivers on narrow screens (monospace = fixed width); go ragged there */
@media (max-width:600px){p{text-align:left}}

/* honour reduced-motion: keep the end states, drop the animation */
@media (prefers-reduced-motion: reduce){*{transition:none}}