/* ════════════════════════════════════════════════════════════
   Refinement layer — loaded after main.css and premium.css.
   Additive only: tightens type and spacing, calms the heavier
   effects, and styles the components added in this pass.
   ════════════════════════════════════════════════════════════ */

:root{
  /* spacing scale — replaces ad-hoc pixel values in new components */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  /* semantic accents, used by the status review and verdict states */
  --ok:#4ade80; --warn:#fbbf24; --bad:#f87171;
  --measure:68ch;          /* comfortable reading width for prose */
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ── Motion: dial back the heaviest ambient effects ───────── */

/* Film grain was at .04 across the whole viewport, which muddied the
   deep zinc background and softened small text. Halved, and dropped
   entirely for users who ask for reduced motion. */
body::after{opacity:.02}
@media (prefers-reduced-motion:reduce){ body::after{display:none} }

/* The 3D card tilt has been removed entirely; see premium.css for the flat
   hover treatment that replaced it. */

/* ── Typography ───────────────────────────────────────────── */

/* .kick at .4em tracking was wide enough to break word recognition
   at small sizes. Pulled in, and the rule made a touch more present. */
.kick{letter-spacing:.28em;font-size:.7rem}
.kick .bar{width:28px;background:var(--gold);opacity:.9}

/* Prose gets a real measure so long paragraphs stop running edge to edge
   on wide monitors — the single biggest readability win on the case studies. */
.prose p, .report p, .sr-intro{max-width:var(--measure)}
.prose p + p, .report p + p{margin-top:1.05em}

/* Numerals align in tables and stat blocks */
.stat-card .v, .dtable td, .wd-kpi .v, .edu-row b{font-variant-numeric:tabular-nums}

h1,h2,h3,h4{text-wrap:balance}
p,li{text-wrap:pretty}

/* ── Hero ─────────────────────────────────────────────────── */
.hero h1{margin-bottom:var(--s5)}
.avail{margin-bottom:var(--s5)}

/* ── Education card ───────────────────────────────────────── */
.edu-card{
  display:flex;flex-direction:column;gap:var(--s5);
  padding:clamp(24px,3.5vw,40px);
  border:1px solid var(--line);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(24,24,27,.5),rgba(24,24,27,.16));
  margin-bottom:var(--s9);
}
@media (min-width:820px){
  .edu-card{flex-direction:row;gap:var(--s8);align-items:flex-start}
  .edu-main{flex:1 1 auto}
  .edu-side{flex:0 0 232px}
}
.edu-school{
  font-size:clamp(1.35rem,2.6vw,1.85rem);font-weight:700;
  letter-spacing:-.03em;color:#fff;line-height:1.15;
}
.edu-degree{
  font-family:var(--mono);font-size:.76rem;font-weight:400;
  letter-spacing:.06em;color:var(--gold);
  margin-top:var(--s2);
}
.edu-detail{
  color:var(--z400);font-size:.9rem;line-height:1.75;
  margin-top:var(--s4);max-width:56ch;
}
.edu-side{display:flex;flex-direction:column;gap:var(--s1)}
.edu-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);
  padding:var(--s3) 0;border-bottom:1px solid var(--line);
}
.edu-row:last-child{border-bottom:0}
.edu-row span{
  font-size:.6rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.18em;color:var(--z500);flex:none;
}
.edu-row b{font-size:.85rem;font-weight:600;color:var(--z300);text-align:right}

/* ── Status review (Borealis dated addendum) ──────────────── */
.status-review{
  border:1px solid rgba(251,202,23,.22);
  border-radius:18px;
  background:
    radial-gradient(120% 100% at 0% 0%,rgba(251,202,23,.07),transparent 60%),
    rgba(24,24,27,.42);
  padding:clamp(24px,3.5vw,40px);
  margin-bottom:var(--s7);
}
.sr-head{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4)}
.sr-head h2{
  font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.28em;color:var(--gold);margin:0;
}
.sr-pulse{
  width:8px;height:8px;border-radius:50%;background:var(--gold);flex:none;
  animation:sr-beacon 2.6s ease-out infinite;
}
@keyframes sr-beacon{
  0%{box-shadow:0 0 0 0 rgba(251,202,23,.5)}
  70%{box-shadow:0 0 0 10px rgba(251,202,23,0)}
  100%{box-shadow:0 0 0 0 rgba(251,202,23,0)}
}
.sr-intro{color:var(--z300);font-size:.95rem;line-height:1.75;margin-bottom:var(--s6)}

/* These live inside the 768px document column, so three side-by-side
   columns would leave ~195px per paragraph. Stacked rows instead: a
   verdict rail on the left, the finding on the right. */
.sr-grid{display:flex;flex-direction:column;gap:var(--s4)}
.sr-item{
  display:grid;gap:var(--s3);
  border:1px solid var(--line);
  border-left:2px solid var(--z700);
  border-radius:10px;
  padding:var(--s5);
  background:rgba(9,9,11,.4);
}
@media (min-width:680px){
  .sr-item{grid-template-columns:190px 1fr;gap:var(--s5);align-items:start}
  .sr-rail{position:sticky;top:0}
}
.sr-item h3{
  font-size:.95rem;font-weight:600;color:#fff;
  letter-spacing:-.02em;margin:var(--s3) 0 0;line-height:1.35;
}
.sr-item p{color:var(--z400);font-size:.86rem;line-height:1.8;margin:0;max-width:none}
.sr-verdict{
  display:inline-block;font-family:var(--mono);
  font-size:.55rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;padding:4px 9px;border-radius:999px;line-height:1.4;
}
.sr-borne-out{border-left-color:var(--ok)}
.sr-borne-out .sr-verdict{color:var(--ok);background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.28)}
.sr-overtaken{border-left-color:var(--bad)}
.sr-overtaken .sr-verdict{color:var(--bad);background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.28)}
.sr-revised{border-left-color:var(--warn)}
.sr-revised .sr-verdict{color:var(--warn);background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.28)}

.sr-closing{
  margin-top:var(--s6);padding-top:var(--s5);
  border-top:1px solid var(--line);
  color:var(--z500);font-size:.82rem;font-style:italic;line-height:1.7;
}

/* document meta: the "original text retained" note */
.doc-meta .line.dim{color:var(--z500);font-size:.78rem;font-style:italic;margin-top:var(--s2)}
.tag.gold{color:var(--gold);border-color:rgba(251,202,23,.3);background:rgba(251,202,23,.08)}

/* ── Conrad card (Werly) ──────────────────────────────────── */
.conrad-card{
  display:flex;gap:var(--s5);align-items:flex-start;
  margin-top:var(--s5);padding:clamp(20px,3vw,32px);
  border:1px solid var(--line);border-radius:16px;
  background:linear-gradient(135deg,rgba(99,102,241,.09),rgba(24,24,27,.4));
}
.conrad-card .cc-ic{
  width:44px;height:44px;border-radius:12px;flex:none;
  background:#6366f1;color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.conrad-card .cc-ic svg{width:22px;height:22px}
.conrad-card .cc-t{font-size:1.1rem;font-weight:700;color:#fff;letter-spacing:-.02em}
.conrad-card .cc-s{
  font-family:var(--mono);font-size:.6rem;font-weight:400;
  text-transform:uppercase;letter-spacing:.16em;color:#a5b4fc;margin-top:2px;
}
.conrad-card p{color:var(--z400);font-size:.88rem;line-height:1.75;margin-top:var(--s3);max-width:62ch}
@media (max-width:559px){ .conrad-card{flex-direction:column;gap:var(--s4)} }

/* ── Accessibility / interaction polish ───────────────────── */

/* Stronger, more visible focus ring with a dark halo so it reads on
   both the near-black background and the gold buttons. */
:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  box-shadow:0 0 0 6px rgba(251,202,23,.16);
  border-radius:6px;
}
.cta:focus-visible,.connect-btn:focus-visible,.proj-card:focus-visible{outline-offset:4px}

/* The skip link existed but was easy to miss; make it unmistakable. */
.skip-link:focus{
  background:var(--gold);color:#000;font-weight:700;
  padding:12px 20px;border-radius:0 0 10px 0;z-index:9999;
}

/* Touch targets. This was previously scoped to max-width:639px, so phones were
   covered but tablets and touch laptops were not — an iPad in portrait still had
   23px footer links and a 15px-tall "Back to top". Now keyed on pointer:coarse
   (the actual question: is this a finger?) with a width fallback for devices
   that misreport. Mouse-driven desktops above 1024px keep their tighter density.
   Targets follow WCAG 2.5.5 / Apple HIG 44pt / Material 48dp. */
@media (pointer:coarse), (max-width:1024px){
  .mobile-menu a{padding:10px 0;min-height:44px;display:flex;align-items:center}
  .nav-links a{min-height:44px;display:inline-flex;align-items:center}
  .footer-col ul{gap:2px}
  .footer-col li a{min-height:44px;display:flex;align-items:center;gap:8px}
  .contact-card{min-height:64px}
  .view-toggle button{min-height:44px;min-width:44px}
  .back-btn,.top-link{min-height:44px;display:inline-flex;align-items:center}
  .copy-btn{min-height:46px;min-width:46px;justify-content:center}
  /* collapsed to an icon-only circle on small screens — 39px was under the floor */
  .nav-links a{padding-inline:6px}
  .menu-btn{min-width:44px;min-height:44px;align-items:center;justify-content:center}
  .connect-btn{min-height:44px;display:inline-flex;align-items:center}
  .brand{min-height:44px}
  .skip-link{min-height:44px;display:inline-flex;align-items:center}
  .footer-bottom{gap:12px}

  /* The lightbox dots are 9px by design. Rather than inflate the dot, give it
     an invisible hit area and widen the row so neighbours do not overlap. */
  .lb-dots{gap:22px}
  .lb-dots button{position:relative}
  .lb-dots button::after{content:"";position:absolute;inset:-16px}
}

/* Tables scroll rather than squash, with an edge cue that there's more. */
.dtable-wrap{position:relative;-webkit-overflow-scrolling:touch}
.dtable-wrap::after{
  content:"";position:absolute;top:0;right:0;bottom:0;width:36px;
  background:linear-gradient(-90deg,var(--bg),transparent);
  pointer-events:none;opacity:.85;
}

/* ── Engineering drawing gallery ──────────────────────────── */
/* The drawings were effectively invisible: main.css scaled full CAD sheets
   into ~350px thumbnails with object-fit:cover, so hairline linework washed
   out and the landscape sheet was cropped to its middle. The sheets are now
   margin-trimmed (originals kept in sorter-images/original/), and the frame
   uses contain so nothing is cut. Letterboxing is invisible because both the
   frame and the paper are white. */
.gallery{gap:20px}
.g-item{
  aspect-ratio:4/5;
  background:#fff;
  padding:10px;
  display:block;
}
.g-item img{
  width:100%;height:100%;
  object-fit:contain;
  object-position:center;
}
/* the caption sits over white paper, so it needs its own contrast */
.g-item .cap{
  background:linear-gradient(to top,rgba(0,0,0,.86),rgba(0,0,0,.45) 60%,transparent);
  padding:18px 14px 12px;
}
.g-item:hover{border-color:rgba(251,202,23,.75)}

/* One drawing per row on small screens — two columns put a full engineering
   sheet in roughly 160px, which is unreadable at any line weight. */
@media (max-width:700px){
  .gallery{grid-template-columns:1fr}
  .g-item{aspect-ratio:3/4}
}

/* Give the lightbox as much of the viewport as it can take. */
.lightbox img{max-height:82vh;max-width:94vw;padding:8px}

/* ── noscript fallback ────────────────────────────────────── */
.noscript-shell{
  max-width:760px;margin:0 auto;padding:64px 24px;
  color:var(--z300);line-height:1.75;
}
.noscript-shell h1{font-size:2.4rem;letter-spacing:-.04em;color:#fff;margin-bottom:var(--s2)}
.noscript-shell h2{
  font-size:.72rem;text-transform:uppercase;letter-spacing:.28em;
  color:var(--gold);margin:var(--s7) 0 var(--s4);
}
.noscript-shell p{margin-bottom:var(--s4)}
.noscript-shell ul{list-style:none;display:flex;flex-direction:column;gap:var(--s3)}
.noscript-shell li{padding-left:var(--s4);border-left:2px solid var(--z800)}
.noscript-shell a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}

/* ── Print ────────────────────────────────────────────────── */
/* The case studies are documents; they should survive Ctrl+P.
   Chrome, nav, motion and decoration drop out; text goes black on white. */
@media print{
  #loader,#wipe,#progress,.nav,.page-head,.footer,
  .marquee,.hero-glow,.scroll-cue,.view-toggle,.back-btn,
  .demo-shell,.browser-top,.demo-banner,.wd,body::after{display:none!important}

  html,body{background:#fff!important;color:#000!important}
  .doc,.report,.container,.page-hero-inner{max-width:none!important;padding:0!important}
  .page-hero{padding:0 0 18pt!important;min-height:0!important}
  .reveal{opacity:1!important;transform:none!important}

  h1,h2,h3,h4,.edu-school,.sr-item h3{color:#000!important}
  p,li,.prose p,.report p,.sr-item p,.edu-detail{color:#1a1a1a!important;font-size:10.5pt!important;max-width:none!important}
  .kick,.sr-head h2,.page-kick{color:#666!important}

  .status-review,.sr-item,.edu-card,.callout,.mini-card,.box-step,.stat-card{
    background:none!important;border:1px solid #ccc!important;
    break-inside:avoid;page-break-inside:avoid;
  }
  .report section,.figure,.dtable{break-inside:avoid;page-break-inside:avoid}
  .report h2{break-after:avoid;page-break-after:avoid}
  .dtable th,.dtable td{border-color:#ccc!important;color:#000!important}
  .dtable-wrap::after{display:none}

  /* footnote markers stay legible; popups are irrelevant on paper */
  .fn button{color:#666!important}
  .fn-pop{display:none!important}

  a[href^="http"]::after{content:" (" attr(href) ")";font-size:8pt;color:#666}
}

/* ── Small-screen legibility floor ────────────────────────────
   The design language leans on uppercase micro-labels at .55–.66rem.
   On a desktop that reads as precise; on a phone held at arm's length
   it bottoms out around 8.8px, which is below comfortable reading size —
   and .sr-verdict at that size is real content, not a label.
   These rules lift the smallest tiers to a ~10.5–11px floor on narrow
   screens and ease the letter-spacing, which costs legibility fastest
   at small sizes. Desktop rendering is untouched. */
@media (max-width:600px){

  /* smallest tier (was 8.8–9px) */
  .scroll-cue span,
  .copy-btn em,
  .wd-side-foot span,
  .wd-axis span{font-size:10.5px;letter-spacing:.16em}

  /* the status-review verdict is body content, not a label */
  .sr-verdict{font-size:11.5px;letter-spacing:.02em;line-height:1.65}

  /* label tier (was 9.6px) */
  .proj-tags span,
  .footer-col h4,
  .footer-bottom,
  .footer-bottom span,
  .local-time,.local-time b,
  .top-link,
  .tag,
  .chip,
  .g-item .cap,
  .demo-banner span,
  .mini-card .s,
  .edu-row span,
  .cc-s,
  .wd-kpi .b,
  .wd-alert .at{font-size:10.5px;letter-spacing:.14em}

  /* interactive + heading tier (was 9.9–10.2px) */
  .avail,
  .page-head-title,
  .view-toggle button span,
  .page-kick,
  .connect-btn,
  .wd-legend span,
  .wd-mixrows .k,
  .wd-mixrows b{font-size:11px;letter-spacing:.13em}

  /* footnote markers need to stay tappable and readable */
  .fn button{font-size:11px}

  /* content-bearing small text (was 10.6px) */
  .proj-open,
  .callout .cl,
  .figure figcaption,
  .ph-t span,

  /* tables carry data — never shrink these below body-adjacent size */
  .dtable th{font-size:10.5px;letter-spacing:.1em}
  .dtable td{font-size:12px}

  /* These four need extra reach: the first two are outranked by more
     specific rules, and the last two are set by inline styles in the
     template strings, which only !important can beat. */
  .conrad-card .cc-s{font-size:10.5px;letter-spacing:.14em}
  .stat-card .s{font-size:11px;letter-spacing:.02em}
  .page-badge-text{font-size:10.5px!important;letter-spacing:.14em!important}
  .phase .num,.box-step .num{font-size:11px!important}
  .g-item .ovl span{font-size:10.5px;letter-spacing:.14em}
}

/* ── Hero quick-facts strip ───────────────────────────────────
   Answers the recruiter's first-pass questions (current role, education,
   availability, languages) without requiring anyone to read the prose.
   A <dl> because that is what this is: terms and their definitions. */
.fd5{animation-delay:.7s}

.quick-facts{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--s4);
  margin:0 0 var(--s7);
  padding:var(--s5) 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
@media (min-width:600px){ .quick-facts{grid-template-columns:1fr 1fr;gap:var(--s5) var(--s6)} }
@media (min-width:1000px){ .quick-facts{grid-template-columns:repeat(4,1fr);gap:var(--s6)} }

.qf{display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.qf dt{
  font-family:var(--mono);
  font-size:.6rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.22em;
  color:var(--gold);
}
.qf dd{margin:0;display:flex;flex-direction:column;gap:2px}
.qf dd span{
  font-size:.88rem;line-height:1.5;color:var(--z300);
  overflow-wrap:anywhere;
}
.qf dd span + span{color:var(--z500);font-size:.8rem}
/* Where the two lines are concurrent roles rather than a term and its
   qualifier, the second must not read as a sub-item of the first. */
.qf-peers dd{gap:4px}
.qf-peers dd span + span{color:var(--z300);font-size:.88rem}

/* On a phone the four facts read better as a tighter two-up list */
@media (max-width:599px){
  .quick-facts{gap:var(--s5);padding:var(--s5) 0;margin-bottom:var(--s6)}
  .qf dt{font-size:10.5px;letter-spacing:.18em}
  .qf dd span{font-size:.85rem}
}

/* ── Prior education (secondary credential) ───────────────────
   Subordinate to the degree, but present: the bilingual credential is a
   stated qualification for this kind of role and was previously only on
   the CV, where the website could not corroborate it. */
.edu-prior{
  margin-top:var(--s5);
  padding-top:var(--s5);
  border-top:1px solid var(--line);
}
.ep-school{font-size:.95rem;font-weight:600;color:var(--z300);letter-spacing:-.01em}
.ep-meta{
  font-family:var(--mono);font-size:.7rem;color:var(--z500);
  margin-top:3px;letter-spacing:.02em;
}
.ep-meta span{color:var(--z600);margin:0 2px}
.ep-honours{
  display:inline-flex;align-items:flex-start;gap:7px;
  margin-top:var(--s3);
  font-size:.8rem;line-height:1.5;color:var(--gold);
}
.ep-honours svg{width:14px;height:14px;flex:none;margin-top:2px}
@media (max-width:600px){
  .ep-honours{font-size:.78rem}
  .ep-meta{font-size:10.5px}
}

/* ── Bibliography sourcing note ───────────────────────────────
   Sits above the source list, styled as a caveat rather than body copy. */
.bib-note{
  margin:0 0 var(--s5);
  padding:var(--s4) var(--s5);
  border-left:2px solid var(--warn);
  border-radius:0 8px 8px 0;
  background:rgba(251,191,36,.05);
  color:var(--z300);
  font-size:.84rem;line-height:1.75;
  max-width:var(--measure);
}

/* ── Skills: two cards, left and right ────────────────────────
   The grid already goes 1fr 1fr at 900px, so two cards sit side by side.
   But main.css also splits each card's list into two sub-columns at 560px,
   which was fine for four narrow cards and wrong for two half-width ones —
   it would give each item roughly a quarter of the container. Below 900px
   the cards are full width and two sub-columns still reads well, so the
   single column only kicks in once the cards go side by side. */
@media (min-width:900px){
  .skill-card ul{grid-template-columns:1fr;gap:16px}
}
/* Two cards carry more items each; let the list breathe a little. */
.skill-card ul{gap:16px 28px}


/* ── CV page ──────────────────────────────────────────────────
   The document is the page. Sheets render edge to edge on a neutral ground
   with a soft drop shadow so they read as paper rather than as screenshots. */
.cv-page{
  padding:clamp(20px,3vw,40px) clamp(14px,3vw,32px) clamp(56px,7vw,96px);
  max-width:1120px;margin:0 auto;
}
.cv-sheets{display:flex;flex-direction:column;gap:clamp(18px,2.5vw,32px)}
.cv-sheet{margin:0;border-radius:10px;overflow:hidden;background:#fff;
  box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06)}
.cv-sheet img{display:block;width:100%;height:auto}

.cv-note{
  margin:clamp(24px,3vw,36px) 0 0;text-align:center;
  font-family:var(--mono);font-size:.66rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.16em;color:var(--z500);
}
.cv-note a{color:var(--gold)}
.cv-note a:hover{text-decoration:underline}
@media (max-width:600px){ .cv-note{font-size:10.5px;letter-spacing:.12em} }

/* ── Borealis method note ─────────────────────────────────────
   Sits at the foot of both Borealis views. Deliberately built on the same
   rail-and-body grid as the status review directly above it, so the two
   self-assessment blocks read as a pair rather than as two unrelated
   components. Three side-by-side columns would give each pillar ~240px
   inside the 768px document measure, so these stack. */
.bmethod{
  margin:clamp(56px,8vw,104px) 0 clamp(40px,6vw,72px);
  padding-top:clamp(32px,5vw,48px);
  border-top:1px solid var(--line);
}
.bm-head{margin-bottom:var(--s6)}
.bm-head h3{
  font-size:clamp(1.5rem,3.2vw,2.1rem);font-weight:700;color:#fff;
  letter-spacing:-.035em;line-height:1.12;margin:var(--s4) 0 var(--s4);
}
.bm-head p{color:var(--z400);font-size:.95rem;line-height:1.75;margin:0;max-width:56ch}

.bm-list{display:flex;flex-direction:column;gap:var(--s4)}
.bm-item{
  display:grid;gap:var(--s3);
  border:1px solid var(--line);
  border-left:2px solid var(--gold);
  border-radius:10px;
  padding:var(--s5);
  background:rgba(24,24,27,.4);
}
@media (min-width:680px){
  .bm-item{grid-template-columns:64px 1fr;gap:var(--s5);align-items:start}
}
.bm-n{
  font-family:var(--mono);font-size:1.05rem;font-weight:700;
  color:var(--gold);letter-spacing:.02em;line-height:1;
}
.bm-body h4{
  font-size:1.02rem;font-weight:600;color:#fff;
  letter-spacing:-.02em;line-height:1.3;margin:0 0 var(--s3);
}
.bm-body p{color:var(--z400);font-size:.88rem;line-height:1.8;margin:0;max-width:64ch}
.bm-proof{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:var(--s4);
  font-family:var(--mono);font-size:.62rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;color:var(--gold);
  transition:gap .25s var(--ease),color .2s;cursor:pointer;
}
.bm-proof svg{width:13px;height:13px}
.bm-proof:hover{gap:13px;color:#fff}

@media (pointer:coarse), (max-width:1024px){ .bm-proof{min-height:46px} }
@media (max-width:600px){
  .bm-n{font-size:.95rem}
  .bm-proof{font-size:11px;letter-spacing:.13em}
}

/* ── Nav CV actions ───────────────────────────────────────────
   The two CV actions moved out of the hero and into the nav, to the left of
   Connect. They only appear once there is room: below 1024px the nav links
   collapse into the hamburger and these go with them, otherwise the bar would
   carry brand + two buttons + Connect + menu on a 375px screen. */
.nav-actions{display:flex;align-items:center;gap:10px}

.nav-cta{
  display:none;                       /* shown at >=1024px, see below */
  align-items:center;gap:8px;
  padding:9px 16px;border-radius:999px;
  border:1px solid var(--line2);
  font-size:.64rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.13em;
  color:var(--z300);white-space:nowrap;
  transition:border-color .25s,color .25s,background .25s;
}
.nav-cta svg{width:13px;height:13px;flex:none}
@media (min-width:1024px){ .nav-cta{display:inline-flex} }

/* Same two actions inside the collapsed menu, set apart from the section links. */
.mm-cta{
  display:flex;align-items:center;gap:10px;
  margin-top:var(--s3);padding:12px 0;min-height:44px;
  color:var(--gold);
  font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;
}
.mm-cta svg{width:15px;height:15px;flex:none}
.mm-cta:first-of-type{margin-top:var(--s4);border-top:1px solid var(--line);padding-top:var(--s4)}

/* ── Contact: three routes, not four ─────────────────────────
   GitHub is gone, so the 2x2 grid would leave a hole. Three across on
   desktop, stacked below. */
@media (min-width:820px){
  .contact-grid{grid-template-columns:repeat(3,1fr)}
}

/* Footer contacts sit in a row rather than a stacked list. */
.footer-col.footer-connect ul{
  flex-direction:row;flex-wrap:wrap;
  gap:var(--s4) var(--s6);
  align-items:center;
}
.footer-col.footer-connect a{white-space:nowrap}
@media (max-width:559px){
  .footer-col.footer-connect ul{flex-direction:column;gap:2px;align-items:flex-start}
}

/* ── Nav actions: three gold buttons with a soft white halo ───
   View CV, Download CV and Connect are now one visual set. The halo is a
   wide, low-opacity white shadow sitting behind the pill — faint enough to
   read as light coming off the button rather than as a second border. */
.nav-cta,
.connect-btn{
  background:var(--gold);
  color:#000;
  border:1px solid var(--gold);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10),
    0 0 18px rgba(255,255,255,.16),
    0 0 42px rgba(255,255,255,.10);
  transition:background .25s,border-color .25s,color .25s,box-shadow .3s,transform .25s var(--ease);
}
.nav-cta:hover,
.connect-btn:hover{
  background:#fff;
  border-color:#fff;
  color:#000;
  /* the same 2px lift .connect-btn already had from premium.css, now shared
     by all three so the group behaves as one set */
  transform:translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.22),
    0 0 26px rgba(255,255,255,.30),
    0 0 60px rgba(255,255,255,.18);
}
/* premium.css adds a gold-tinted shadow to .connect-btn on hover; that would
   fight the white halo, so the rule above wins on specificity order. */

/* ── Contact cards: one line for the LinkedIn handle ──────────
   The handle needed 274px and had 207px, so it broke mid-word ("alexande /
   rrigas") — word-break:break-all will split anywhere, which reads as a typo.
   Widening the grid and trimming the card chrome buys the 67px back without
   shrinking the type. */
.contact-grid{max-width:1240px}
.contact-card{padding:clamp(22px,2.4vw,30px);gap:18px}
.contact-card span{word-break:normal;overflow-wrap:anywhere;font-size:clamp(.95rem,1.6vw,1.15rem)}

/* main.css goes three-up at 820px, but at that width an equal third cannot hold
   the full LinkedIn handle on one line — the browser was silently widening that
   one track to compensate, leaving cards of 296 / 246 / 353px. Three-up now
   waits until 1180px, where equal columns genuinely fit the handle, and
   minmax(0,1fr) stops any track being stretched by its content. Below that the
   cards stack full width, where the handle has room to spare. */
.contact-grid{grid-template-columns:1fr}
@media (min-width:820px){ .contact-grid{grid-template-columns:1fr} }
@media (min-width:1180px){
  .contact-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .contact-card span{white-space:nowrap;overflow-wrap:normal}
}

/* ── Connect button: now carries the mail mark ────────────────
   Inherited from the floating "Get in touch" pill, which has been removed —
   the nav Connect button was always the same destination, so the pill was a
   second control competing for the same action. */
.connect-btn{
  display:inline-flex;align-items:center;gap:9px;
}
.connect-btn svg{width:14px;height:14px;flex:none}
@media (max-width:399px){
  /* on the narrowest phones the label gives way to the mark */
  .connect-btn span{display:none}
  .connect-btn{padding:10px 14px}
}

/* At exactly 1024px everything arrives at once — the nav links appear, the
   hamburger disappears, and both CV buttons show — which left the row 39px
   over. Compact the actions through to 1140px rather than moving a breakpoint,
   since raising it would strand the CV buttons between 1024 and 1140 with no
   hamburger to hold them. */
@media (min-width:1024px) and (max-width:1139px){
  .nav-actions{gap:7px}
  .nav-cta{padding:9px 11px;gap:6px;font-size:.6rem;letter-spacing:.1em}
  .nav-cta svg{width:12px;height:12px}
  .connect-btn{padding:10px 16px;gap:7px}
  .nav-links{gap:20px}
}

/* ── CV contact hotspots ──────────────────────────────────────
   Transparent anchors sitting over the rendered CV pages, positioned in
   percentages so they stay aligned at any display size. They mirror the
   link annotations embedded in the PDF itself. */
.cv-sheet{position:relative}
.cv-link{
  position:absolute;
  display:block;
  border-radius:3px;
  /* invisible until you go looking for it */
  background:transparent;
  transition:background .18s,box-shadow .18s;
}
.cv-link:hover{
  background:rgba(251,202,23,.22);
  box-shadow:0 0 0 2px rgba(251,202,23,.45);
}
.cv-link:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
  background:rgba(251,202,23,.18);
}

/* Contact row under the CV — the same three routes as the in-page hotspots,
   at a size a thumb can actually hit. */
.cv-contacts{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--s3) var(--s4);
  margin-top:clamp(24px,3vw,36px);
}
.cv-contacts a{
  display:inline-flex;align-items:center;gap:9px;
  min-height:46px;padding:0 18px;
  border:1px solid var(--line2);border-radius:999px;
  color:var(--z300);font-size:.82rem;
  transition:border-color .25s,color .25s,background .25s;
}
.cv-contacts a svg{width:15px;height:15px;flex:none;color:var(--gold)}
.cv-contacts a:hover{border-color:var(--gold);color:var(--gold);background:rgba(251,202,23,.06)}
.cv-note{margin-top:var(--s4)}
@media (max-width:480px){
  .cv-contacts{flex-direction:column;align-items:stretch}
  .cv-contacts a{justify-content:center}
}

/* ── Borealis brief: document furniture ───────────────────────
   The summary used to be built from stat tiles, labelled callout boxes, a
   three-up card grid and a numbered-circle timeline. That reads as generated
   output rather than as something written. Same words, ordinary report
   conventions: numbered sections, captioned tables, definition lists, and a
   recommendation stated as a sentence. */
.report.brief{gap:44px}
.report.brief h2{
  font-size:1.28rem;letter-spacing:-.02em;
  padding-bottom:10px;margin-bottom:20px;
  border-bottom:1px solid var(--line);
}

/* Captioned tables, numbered the way a report numbers them. */
.tbl{margin:26px 0 0}
.tbl figcaption{
  color:var(--z500);font-size:.78rem;font-style:italic;
  margin-bottom:10px;
}

/* Recommendations read as a sentence, not as a boxed banner. */
.report.brief p.rec{
  margin-top:22px;padding-left:16px;
  border-left:2px solid var(--gold);
  color:var(--z200,#e4e4e7);
}
.report.brief p.rec b{color:var(--gold);font-weight:700}

/* Platforms and phases as definition lists rather than tiles. */
.deflist{margin:22px 0 0}
.deflist dt{
  color:#fff;font-weight:600;font-size:.98rem;
  margin-top:20px;
}
.deflist dt:first-of-type{margin-top:0}
.deflist dt span{color:var(--z500);font-weight:400;font-size:.85rem}
.deflist dd{
  margin:6px 0 0;color:var(--z400);
  font-size:.9rem;line-height:1.8;max-width:var(--measure);
}

.report.brief blockquote{
  margin:26px 0 0;padding:0 0 0 20px;
  border-left:2px solid var(--z700);
  color:var(--z300);font-style:italic;
  font-size:1.02rem;line-height:1.8;max-width:var(--measure);
}

/* ── Concept gallery note ─────────────────────────────────────
   In the concept section the "click to enlarge" note follows a prose block
   rather than a heading, so it needs its own space above it. */
.prose + .gal-note{margin-top:clamp(20px,2.6vw,30px)}

/* ── Screen-reader-only text ──────────────────────────────────
   The CV route's title sits in the page-header chrome as a plain div, so the
   document itself had no h1. This gives it one without changing the design. */
.sr-only{
  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;
}

/* ── Design teams & societies ─────────────────────────────────
   Past involvement, so these sit lighter than the .exp-card blocks above
   them: a three-up strip rather than full-width rows. Role and period are
   optional in the data and simply do not render when absent. */
.soc-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.6vw,20px);
  margin-bottom:clamp(48px,6vw,80px);
}
.soc-card{
  padding:clamp(20px,2.2vw,26px);
  border:1px solid var(--z800);
  border-radius:1.1rem;
  background:rgba(255,255,255,.014);
  display:flex;flex-direction:column;gap:7px;
}
.soc-card h4{
  font-size:1rem;font-weight:600;letter-spacing:-.01em;color:var(--z100);margin:0;
}
.soc-card .soc-role{
  font-family:var(--mono);font-size:.64rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;color:var(--gold);
}
.soc-card p{
  color:var(--z400);font-size:.86rem;line-height:1.65;margin:0;
}
.soc-card .soc-period{
  margin-top:auto;padding-top:6px;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--z500);
}
@media (max-width:860px){
  .soc-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .soc-grid{grid-template-columns:1fr}
}

/* The invitation reads as a call to action rather than part of the paragraph
   above it, so it gets its own centred line. */
/* The lede carries a 76px bottom margin meant to clear the contact cards; with
   the invitation between them that space belongs below the invitation, not
   above it. */
#contact .lede{margin-bottom:clamp(12px,1.6vw,18px)}
/* The invitation carries .lede as well, so it inherits that line's exact type
   rather than a copy of it that could drift. This rule only positions it, and
   is scoped to #contact so it outranks the margin above. */
#contact .contact-cta{
  text-align:center;
  margin:0 auto clamp(44px,5.5vw,76px);
}

/* The clubs note qualifies the cards below it, so it sits directly under the
   label rather than at the .proj-note default distance. */
.soc-note{
  max-width:74ch;
  margin-top:-24px;
  margin-bottom:clamp(22px,2.6vw,30px);
  color:var(--z500);            /* .proj-note is gold, which reads as emphasis;
                                   this line qualifies the cards, it does not
                                   advertise them */
  font-size:.86rem;
  line-height:1.7;
  letter-spacing:normal;
  text-transform:none;
  font-family:inherit;
  font-weight:400;
}