/* ============================================================
   cosminpop.online
   Light editorial system — Space Grotesk + Inter.
   Built to be SCANNED: short lines, strong hierarchy, high contrast.
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  /* Surfaces — warm off-white, not clinical grey */
  --bg:        #faf7f2;
  --bg-alt:    #f2ece1;
  --surface:   #ffffff;
  --line:      #e4dbcd;
  --line-soft: #efe8dc;

  /* Text. Ratios are measured, and the SECOND number is against
     --bg-alt, which is the tighter constraint — the alternating
     sections use it, so an accent must clear 4.5:1 on both. */
  --ink:       #14110e;   /* 17.6 / 15.9  body + headings */
  --ink-mid:   #57534e;   /*  7.1 /  6.5  secondary copy, AAA on --bg */
  --ink-faint: #6f6862;   /*  5.1 /  4.7  small labels only, never body */

  /* Accents. Text-safe shades and graphic-only shades are kept
     separate — the bright versions fail AA as text on this ground. */
  --rust:      #a63308;   /*  6.3 /  5.8  accent text, clears AA both grounds */
  --rust-lo:   #ea580c;   /*              graphics only, never text */
  --teal:      #115e59;   /*  7.1 /  6.5  accent text, clears AAA on --bg */
  --teal-lo:   #0d9488;   /*              graphics only, never text */

  --grad: linear-gradient(96deg, var(--rust) 0%, #d97706 55%, var(--teal) 100%);

  /* Type */
  --f-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --f-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;

  /* Rhythm */
  --wrap: 1140px;
  --pad: clamp(1.25rem, 5vw, 4rem);

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 22px;

  --shadow:    0 1px 2px rgba(20,17,14,.04), 0 8px 24px -12px rgba(20,17,14,.10);
  --shadow-up: 0 2px 4px rgba(20,17,14,.05), 0 18px 40px -16px rgba(20,17,14,.18);

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .7s;
}

/* 18px base — a notch larger than the usual 16, so it reads without zooming. */
html{ font-size: 18px; scroll-behavior: smooth; background: var(--bg); }
html.big-text{ font-size: 22px; }
@media (max-width: 640px){ html{ font-size: 17px; } html.big-text{ font-size: 20px; } }

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing: border-box; }
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img,svg,canvas,video{ display:block; max-width:100%; }
h1,h2,h3,h4{ font-family: var(--f-display); font-weight:700; line-height:1.05; letter-spacing:-.025em; margin:0; }
p{ margin:0 0 1em; }
a{ color: inherit; }
ul,ol{ margin:0; padding:0; list-style:none; }
button{ font: inherit; color: inherit; }

/* The `hidden` attribute must win over any display rule below. */
[hidden]{ display: none !important; }

/* ---------- Focus ---------- */
:focus-visible{
  outline: 3px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}
.skip-link{
  position:fixed; top:.5rem; left:.5rem; z-index:999;
  transform: translateY(-160%);
  background: var(--ink); color: var(--bg);
  padding:.7rem 1.1rem; border-radius: var(--r-sm);
  font-weight:600; text-decoration:none;
  transition: transform .2s var(--ease);
}
.skip-link:focus{ transform:none; }

.wrap{ width:100%; max-width: var(--wrap); margin-inline:auto; padding-inline: var(--pad); }

/* ============================================================
   MOTION — strictly additive. Nothing is hidden unless JS has
   armed it, and JS only arms what it can prove it can restore.
   ============================================================ */
[data-reveal].armed{
  opacity:0;
  transform: translateY(22px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
[data-reveal].armed.in{ opacity:1; transform:none; }

html.calm [data-reveal],
html.calm [data-reveal].armed,
html.calm [data-reveal].armed.in{
  opacity:1 !important; transform:none !important; transition:none !important;
}
html.calm *,
html.calm *::before,
html.calm *::after{
  animation: none !important;
  transition-duration: .01ms !important;
}
html.calm .grain,
html.calm .cursor-glow,
html.calm .hero__canvas{ display:none !important; }
html.calm{ scroll-behavior:auto; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
  .grain,.cursor-glow{ display:none; }
}

/* ---------- Overlays ---------- */
.grain{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  opacity:.025; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
.cursor-glow{
  position:fixed; z-index:1; pointer-events:none;
  width:460px; height:460px; margin:-230px 0 0 -230px;
  border-radius:50%; opacity:0;
  background: radial-gradient(circle, rgba(234,88,12,.07) 0%, rgba(13,148,136,.04) 45%, transparent 68%);
  transition: opacity .5s var(--ease);
}
@media (hover:hover) and (pointer:fine){ .cursor-glow.on{ opacity:1; } }

/* ---------- Scroll progress ---------- */
.progress{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:60;
  background: rgba(20,17,14,.06);
}
.progress span{
  display:block; height:100%; width:0;
  background: var(--grad);
  transition: width .1s linear;
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; gap:1.25rem;
  padding:.9rem var(--pad);
  background: rgba(250,247,242,.82);
  backdrop-filter: blur(14px) saturate(160%);
  border-bottom:1px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease), padding .3s var(--ease);
}
.nav.stuck{ background: rgba(250,247,242,.96); border-bottom-color: var(--line); padding-block:.6rem; }

.nav__brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; font-weight:700; }
.nav__mark{
  display:grid; place-items:center; width:2rem; height:2rem; flex:none;
  border-radius:8px; background: var(--ink); color: var(--bg);
  font-family: var(--f-display); font-size:.7rem; font-weight:700; letter-spacing:.02em;
}
.nav__name{ font-size:.92rem; font-family: var(--f-display); letter-spacing:-.01em; }

.nav__links{ display:flex; gap:.2rem; margin-left:auto; }
.nav__links a{
  position:relative; text-decoration:none; padding:.5rem .75rem; border-radius:8px;
  font-size:.85rem; font-weight:500; color: var(--ink-mid);
  transition: color .2s var(--ease), background .2s var(--ease);
}
.nav__links a::after{
  content:''; position:absolute; left:.75rem; right:.75rem; bottom:.28rem; height:2px;
  background: var(--rust); transform: scaleX(0); transform-origin:left;
  transition: transform .3s var(--ease);
}
.nav__links a:hover{ color: var(--ink); background: rgba(20,17,14,.04); }
.nav__links a:hover::after,
.nav__links a.active::after{ transform: scaleX(1); }
.nav__links a.active{ color: var(--ink); font-weight:600; }

.nav__tools{ display:flex; align-items:center; gap:.5rem; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:3rem; padding:.8rem 1.5rem;
  border-radius:999px; border:1px solid transparent;
  font-family: var(--f-display); font-weight:600; font-size:.95rem;
  letter-spacing:-.01em; text-decoration:none; cursor:pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn--sm{ min-height:2.5rem; padding:.45rem 1.05rem; font-size:.82rem;
          background: var(--ink); color: var(--bg); }
.btn--sm:hover{ background: var(--rust); }

.btn--outline{ background: transparent; border-color: var(--line); color: var(--ink-mid); }
.btn--outline:hover{ border-color: var(--ink); color: var(--ink); background: var(--surface); }

.btn--primary{ background: var(--ink); color: var(--bg); }
.btn--primary:hover{ transform: translateY(-2px); box-shadow: var(--shadow-up); background: var(--rust); }

.btn--ghost{ border-color: var(--line); color: var(--ink); background: var(--surface); }
.btn--ghost:hover{ border-color: var(--ink); transform: translateY(-2px); }

.btn--palm{ background: var(--teal); color:#fff; }
.btn--palm:hover{ transform: translateY(-2px); box-shadow: var(--shadow-up); background: #0b5f59; }

/* ---------- Mobile menu ---------- */
.nav__burger{
  display:none; width:2.6rem; height:2.6rem; flex:none;
  background: var(--surface); border:1px solid var(--line); border-radius:10px; cursor:pointer;
  padding:.65rem .6rem; gap:4px; flex-direction:column; justify-content:center;
}
.nav__burger span{ display:block; height:2px; background: var(--ink); border-radius:2px; transition: transform .3s var(--ease), opacity .3s var(--ease); }
.nav__burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:45;
  display:flex; flex-direction:column; justify-content:center; gap:.3rem;
  padding: 5rem var(--pad) 2rem;
  background: var(--bg);
}
.mobile-menu a{
  font-family: var(--f-display); font-weight:700; letter-spacing:-.02em;
  font-size: clamp(1.9rem, 8vw, 2.6rem);
  text-decoration:none; padding:.45rem 0; border-bottom:1px solid var(--line-soft);
}

@media (max-width: 1040px){
  .nav__links{ display:none; }
  .nav__burger{ display:flex; }
}
@media (max-width: 560px){ .btn--sm{ display:none; } .nav__name{ display:none; } }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height: 100svh;
  display:flex; align-items:center;
  padding: 7rem var(--pad) 5rem;
  overflow:hidden;
}
.hero__canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.hero__veil{
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(250,247,242,.35) 0%, transparent 30%, rgba(250,247,242,.55) 100%);
}
.hero__inner{ position:relative; z-index:3; width:100%; max-width: var(--wrap); margin-inline:auto; }

.hero__grid{
  display:grid; grid-template-columns: 1.45fr .85fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items:start;
}
@media (max-width: 940px){ .hero__grid{ grid-template-columns:1fr; gap:2rem; } }

.hero__eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family: var(--f-mono); font-size:.75rem; letter-spacing:.12em; text-transform:uppercase;
  color: var(--teal); margin-bottom:1rem;
}
.dot{ width:8px; height:8px; border-radius:50%; background: var(--teal-lo); box-shadow:0 0 0 0 rgba(13,148,136,.5); animation: pulse 2.4s infinite; }
@keyframes pulse{ 70%{ box-shadow:0 0 0 11px rgba(13,148,136,0); } 100%{ box-shadow:0 0 0 0 rgba(13,148,136,0); } }

/* One line, always. The name is short enough that it never needs to wrap,
   and wrapping it looked like a mistake rather than a choice. */
.hero__title{
  font-size: clamp(2.5rem, 7.5vw, 5.6rem);
  line-height:1; letter-spacing:-.04em; margin:0 0 .7rem;
  white-space:nowrap;
  background: var(--grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__title .ch{ display:inline-block; }
.hero__title.armed .ch{
  opacity:0; transform: translateY(.4em);
  animation: chIn .8s var(--ease) forwards;
  animation-delay: calc(var(--n) * 40ms + 110ms);
}
@keyframes chIn{ to{ opacity:1; transform:none; } }
html.calm .hero__title.armed .ch{ opacity:1; transform:none; animation:none; }

.hero__role{
  font-family: var(--f-display); font-weight:600; letter-spacing:-.02em;
  font-size: clamp(1.05rem, 2.4vw, 1.5rem);
  color: var(--ink-mid); margin-bottom:1.5rem;
  padding-bottom:1.5rem; border-bottom:1px solid var(--line);
}

.hero__lede{
  max-width: 58ch; font-size: 1.04rem; color: var(--ink-mid);
  margin-bottom: 1.9rem; line-height:1.65;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:.75rem; }

/* Contact card — the aligned right column of the header */
.hero__card{
  background: var(--surface); border:1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow);
  overflow:hidden;                 /* the portrait bleeds to the edges */
}
.hero__facts{ margin:0; display:grid; gap:.8rem; padding:1.3rem 1.5rem 0; }
.hero__facts > div{ display:grid; gap:.1rem; }
.hero__facts dt{
  font-family: var(--f-mono); font-size:.63rem; letter-spacing:.15em;
  text-transform:uppercase; color: var(--ink-faint);
}
.hero__facts dd{ margin:0; font-size:.95rem; font-weight:500; word-break:break-word; }
.hero__facts a{
  text-decoration:none; border-bottom:1px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.hero__facts a:hover{ color: var(--rust); border-bottom-color: var(--rust); }
.hero__auth{
  margin:1.2rem 0 0; padding:1rem 1.5rem 1.3rem;
  border-top:1px solid var(--line);
  font-size:.8rem; color: var(--ink-faint); line-height:1.5;
}

.scrollcue{
  position:absolute; z-index:3; left:50%; bottom:1.8rem; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  text-decoration:none; color: var(--ink-faint);
}
.scrollcue__text{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; }
.scrollcue__line{ width:1px; height:46px; background:linear-gradient(var(--ink-faint), transparent); position:relative; overflow:hidden; }
.scrollcue__line::after{
  content:''; position:absolute; inset:0; background: var(--rust);
  animation: cue 2.2s var(--ease) infinite;
}
@keyframes cue{ 0%{ transform: translateY(-100%);} 60%,100%{ transform: translateY(100%);} }
@media (max-height: 720px){ .scrollcue{ display:none; } }

/* ============================================================
   SECTION SHELL
   ============================================================ */
.section{ position:relative; padding: clamp(4.5rem, 10vw, 7.5rem) 0; }
.section--palm{ background: var(--bg-alt); border-block:1px solid var(--line); }
.section--aerial{ background: var(--bg-alt); border-block:1px solid var(--line); }
.section--craft{ background: var(--bg-alt); border-block:1px solid var(--line); }

.shead{ max-width: 44rem; margin-bottom: clamp(2.25rem, 5vw, 3.5rem); }
.shead__kicker{
  font-family: var(--f-mono); font-size:.73rem; letter-spacing:.16em; text-transform:uppercase;
  color: var(--rust); margin-bottom:.9rem;
}
.shead__title{ font-size: clamp(2.2rem, 5.5vw, 3.8rem); margin-bottom:1rem; }
.shead__sub{ font-size:1.08rem; color: var(--ink-mid); max-width: 44ch; margin:0; }

/* ============================================================
   CARDS
   ============================================================ */
.cards{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 980px){ .cards{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .cards{ grid-template-columns: 1fr; } }

.card{
  position:relative; overflow:hidden;
  padding: 1.75rem 1.6rem 1.6rem;
  background: var(--surface); border:1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.card::before{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: radial-gradient(380px circle at var(--mx,50%) var(--my,0%), rgba(234,88,12,.06), transparent 62%);
  opacity:0; transition: opacity .4s var(--ease);
}
.card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-up); border-color:#d8ccb8; }
.card:hover::before{ opacity:1; }
.card--hl{ border-color: var(--teal-lo); }
.card--hl::after{ content:''; position:absolute; inset:0 auto 0 0; width:3px; background: var(--teal-lo); }
.card__num{
  font-family: var(--f-mono); font-size:.7rem; letter-spacing:.14em;
  color: var(--ink-faint); display:block; margin-bottom:.9rem;
}
.card h3{ font-size:1.35rem; margin-bottom:.55rem; }
.card p{ font-size:.98rem; color: var(--ink-mid); margin-bottom:1.15rem; line-height:1.55; }

.chips{ display:flex; flex-wrap:wrap; gap:.35rem; }
.chips li{
  font-family: var(--f-mono); font-size:.71rem;
  padding:.28rem .58rem; border:1px solid var(--line);
  border-radius:6px; color: var(--ink-mid); background: var(--bg);
}
.chips--lg li{ font-size:.8rem; padding:.42rem .8rem; border-radius:999px; }

/* ============================================================
   PALMROUTE
   ============================================================ */
.palm{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4rem); align-items:center; }
@media (max-width: 940px){ .palm{ grid-template-columns:1fr; } }

.palm__tag{
  font-family:var(--f-mono); font-size:.78rem; letter-spacing:.09em; text-transform:uppercase;
  color: var(--teal); margin-bottom:1.1rem;
}
.palm__lede{ font-size:1.1rem; color: var(--ink-mid); max-width:40ch; line-height:1.55; }
.palm__feats{ display:grid; gap:.45rem; margin:1.5rem 0; }
.palm__feats li{
  font-size:1rem; color: var(--ink-mid);
  padding-left:1.35rem; position:relative;
}
.palm__feats li::before{
  content:''; position:absolute; left:0; top:.6em;
  width:7px; height:7px; border-radius:50%; background: var(--teal-lo);
}
.palm__feats b{ color: var(--ink); font-weight:600; }

.palm__integ{
  font-size:.85rem; color: var(--ink-faint); line-height:1.6;
  padding-top:1.1rem; border-top:1px solid var(--line);
}
.palm__integ span{
  display:block; font-family:var(--f-mono); font-size:.68rem;
  letter-spacing:.14em; text-transform:uppercase; color: var(--ink-mid); margin-bottom:.35rem;
}
.palm__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:.9rem; margin-top:1.5rem; }
.palm__role{ font-family:var(--f-mono); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); }

/* --- browser mockup --- */
.palm__preview{ perspective: 1400px; }
.browser{
  border-radius: 14px; overflow:hidden;
  border:1px solid var(--line); background:#0a1712;
  box-shadow: 0 30px 60px -24px rgba(20,17,14,.35);
  transform: rotateY(-6deg) rotateX(2deg);
  transition: transform .6s var(--ease);
}
.palm__preview:hover .browser{ transform: rotateY(-2deg) rotateX(1deg) translateY(-5px); }
html.calm .browser{ transform:none; }

.browser__bar{
  display:flex; align-items:center; gap:.4rem;
  padding:.6rem .8rem; background:#0e1a15; border-bottom:1px solid #1c2b23;
}
.browser__bar i{ width:9px; height:9px; border-radius:50%; }
.browser__bar i:nth-child(1){ background:#e05c4a; } .browser__bar i:nth-child(2){ background:#e0b04a; } .browser__bar i:nth-child(3){ background:#4aa87a; }
.browser__url{
  margin-left:.6rem; flex:1; font-family:var(--f-mono); font-size:.64rem;
  color:#7d9a8c; background:#0a1712; padding:.22rem .65rem; border-radius:5px;
}
.browser__view{
  position:relative; padding:0 0 1.3rem;
  background: linear-gradient(165deg, #16362a 0%, #1b4a3d 45%, #123128 100%);
  min-height: 300px;
}
.pr-nav{ display:flex; align-items:center; gap:.7rem; padding:.7rem 1rem; }
.pr-logo{ font-size:.7rem; font-weight:700; color:#e8f3ec; }
.pr-links{ display:flex; gap:.4rem; margin-left:auto; }
.pr-links i{ width:22px; height:4px; border-radius:2px; background:rgba(255,255,255,.22); }
.pr-btn{ font-size:.56rem; padding:.28rem .58rem; border-radius:999px; background:#2d9d9d; color:#02120e; font-weight:700; }
.pr-hero{ text-align:center; padding: 1.5rem 1.2rem .5rem; }
.pr-eyebrow{ font-family:var(--f-mono); font-size:.48rem; letter-spacing:.1em; color:#8fd4bd; margin-bottom:.65rem; }
.pr-hero h4{ font-family:Georgia,serif; font-weight:400; font-size:1.45rem; line-height:1.15; color:#f6faf7; letter-spacing:0; }
.pr-actions{ display:flex; gap:.4rem; justify-content:center; margin-top:.9rem; }
.pr-cta{ font-size:.53rem; padding:.32rem .7rem; border-radius:999px; background:#f5e8d0; color:#1b5252; font-weight:700; }
.pr-cta--o{ background:transparent; border:1px solid rgba(255,255,255,.3); color:#e8f3ec; }

.pr-card{
  display:flex; align-items:center; gap:.6rem;
  margin: 1.3rem 1rem 0; padding:.65rem .75rem;
  background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.13);
  border-radius:10px;
}
.pr-card b{ display:block; font-size:.66rem; color:#f6faf7; }
.pr-card small{ font-size:.56rem; color:#9fc9b8; }
.pr-ring{ width:20px; height:20px; flex:none; border-radius:50%; border:2px solid #45b9b9; position:relative; }
.pr-ring::after{
  content:''; position:absolute; inset:-6px; border-radius:50%;
  border:2px solid #45b9b9; opacity:0; animation: ring 2.2s ease-out infinite;
}
@keyframes ring{ 0%{ transform:scale(.7); opacity:.8; } 100%{ transform:scale(1.3); opacity:0; } }
.pr-live{
  margin-left:auto; font-family:var(--f-mono); font-size:.48rem; letter-spacing:.1em;
  padding:.18rem .42rem; border-radius:4px; background:#e05c4a; color:#fff; font-weight:700;
}

/* ============================================================
   EXPERIENCE / EDUCATION — the CV list
   ============================================================ */
.exps{ display:grid; }
.exp{
  display:grid; grid-template-columns: 190px 1fr; gap: 1.5rem;
  padding: 1.9rem 0; border-top:1px solid var(--line);
}
.exp:last-child{ border-bottom:1px solid var(--line); }
.exp__meta{ padding-top:.2rem; }
.exp__date{
  font-family: var(--f-mono); font-size:.77rem; font-weight:600;
  color: var(--rust); margin:0 0 .25rem;
}
.exp__place{ font-size:.83rem; color: var(--ink-faint); margin:0; line-height:1.4; }
.exp__body h3{ font-size: clamp(1.15rem, 2.4vw, 1.45rem); margin-bottom:.1rem; }
.exp__org{ font-size:.95rem; color: var(--ink-mid); font-weight:500; margin:0 0 .8rem; }
.exp__points{ display:grid; gap:.45rem; }
.exp__points li{
  position:relative; padding-left:1.1rem; max-width:64ch;
  font-size:.98rem; color: var(--ink-mid); line-height:1.55;
}
.exp__points li::before{
  content:''; position:absolute; left:0; top:.6em;
  width:5px; height:5px; border-radius:50%; background: var(--rust); opacity:.5;
}
.exp--now .exp__date::after{
  content:''; display:inline-block; margin-left:.45rem; vertical-align:middle;
  width:7px; height:7px; border-radius:50%; background: var(--teal-lo);
}
@media (max-width: 760px){
  .exp{ grid-template-columns: 1fr; gap:.55rem; padding:1.6rem 0; }
  .exp__place br{ display:none; }
}

/* ============================================================
   AERIAL
   ============================================================ */
.badge{
  display:flex; align-items:center; gap:1.1rem;
  padding:1.25rem 1.4rem; margin-bottom:2.25rem;
  border:1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--shadow);
}
.badge__seal{ flex:none; width:2.9rem; height:2.9rem; color: var(--teal); }
.badge__txt b{ display:block; font-size:1rem; margin-bottom:.15rem; font-family:var(--f-display); }
.badge__txt span{ font-size:.87rem; color: var(--ink-mid); }
@media (max-width:560px){ .badge{ flex-direction:column; align-items:flex-start; gap:.8rem; } }

.tabs{ display:flex; gap:.4rem; margin-bottom:1.5rem; border-bottom:1px solid var(--line); }
.tab{
  background:none; border:none; cursor:pointer;
  padding:.8rem 1.1rem; min-height:3rem;
  font-family: var(--f-display); font-size:.95rem; font-weight:600; color: var(--ink-faint);
  border-bottom:2px solid transparent; margin-bottom:-1px;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.tab:hover{ color: var(--ink); }
.tab.is-on{ color: var(--ink); border-bottom-color: var(--rust); }

.gallery{ display:grid; grid-template-columns: repeat(3, 1fr); gap:.9rem; }
@media (max-width: 900px){ .gallery{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .gallery{ grid-template-columns: 1fr; } }

.shot{
  position:relative; overflow:hidden; border-radius: var(--r-md);
  border:1px solid var(--line); background: var(--surface);
  aspect-ratio: 4/3; cursor:pointer; padding:0;
  display:block; width:100%; text-align:left;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.shot:hover{ transform: translateY(-4px); box-shadow: var(--shadow-up); }
.shot img{ width:100%; height:100%; object-fit:cover; transition: transform .7s var(--ease); }
.shot:hover img{ transform: scale(1.05); }
.shot__cap{
  position:absolute; inset:auto 0 0 0; padding:1.4rem .9rem .8rem;
  background: linear-gradient(transparent, rgba(20,17,14,.88));
  font-size:.87rem; font-weight:600; color:#fff;
}
.shot__cap small{ display:block; font-family:var(--f-mono); font-size:.66rem; font-weight:400; color:rgba(255,255,255,.75); margin-top:.1rem; }
.shot__play{
  position:absolute; inset:0; margin:auto; width:3.4rem; height:3.4rem;
  display:grid; place-items:center; border-radius:50%;
  background: rgba(255,255,255,.95); color: var(--ink);
  box-shadow: var(--shadow-up);
  transition: transform .3s var(--ease);
}
.shot:hover .shot__play{ transform: scale(1.1); }
.gallery--video .shot{ aspect-ratio: 16/9; }

.empty{
  grid-column: 1 / -1;
  border:1px dashed var(--line); border-radius: var(--r-lg);
  padding: clamp(2rem,6vw,3.25rem); text-align:center; background: var(--surface);
}
.empty h3{ font-size:1.3rem; margin-bottom:.5rem; }
.empty p{ color: var(--ink-mid); max-width:46ch; margin-inline:auto; font-size:.95rem; }
.empty code{
  font-family: var(--f-mono); font-size:.85em;
  background: var(--bg-alt); border:1px solid var(--line);
  padding:.12rem .42rem; border-radius:5px; color: var(--teal);
}

/* ============================================================
   TRADE BACKGROUND — deliberately compact.
   A minor topic should not occupy a major section, so this is a
   single band rather than a full two-column spread.
   ============================================================ */
.trade{
  display:grid; grid-template-columns: 220px 1fr; gap: 1.4rem 2.5rem;
  padding: 1.9rem 2rem;
  background: var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--rust);
  border-radius: var(--r-lg); box-shadow: var(--shadow);
}
.trade__head .shead__kicker{ margin-bottom:.5rem; }
.trade__title{ font-size: clamp(1.35rem, 3vw, 1.8rem); }
.trade__body p{
  font-size:1rem; color: var(--ink-mid); line-height:1.65;
  max-width:62ch; margin:0 0 1.1rem;
}
.trade__tags{ display:flex; flex-wrap:wrap; gap:.4rem; }
.trade__tags li{
  font-family: var(--f-mono); font-size:.74rem;
  padding:.35rem .7rem; border-radius:999px;
  border:1px solid var(--line); background: var(--bg); color: var(--ink-mid);
}
@media (max-width: 760px){
  .trade{ grid-template-columns:1fr; gap:1rem; padding:1.6rem 1.35rem; }
}

/* ============================================================
   TOOLKIT
   ============================================================ */
.stack{ display:grid; grid-template-columns: repeat(2,1fr); gap: 2rem 2.75rem; }
@media (max-width: 780px){ .stack{ grid-template-columns:1fr; } }
.stack__group h3{
  font-size:.78rem; font-family: var(--f-mono); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color: var(--rust);
  padding-bottom:.7rem; margin-bottom:1rem; border-bottom:1px solid var(--line);
}

/* ============================================================
   CONTACT
   ============================================================ */
.section--contact{ background: var(--bg); border-top:1px solid var(--line); }
.contact__title{
  font-size: clamp(2.6rem, 9vw, 6rem); line-height:.95; margin:0 0 1.1rem;
  background: var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.contact__sub{ font-size:1.1rem; color: var(--ink-mid); max-width:42ch; margin-bottom:2.5rem; }
.contact__list{ display:grid; grid-template-columns: repeat(2,1fr); gap:1.5rem 3rem; max-width:50rem; }
@media (max-width:640px){ .contact__list{ grid-template-columns:1fr; } }
.contact__lbl{
  display:block; font-family:var(--f-mono); font-size:.68rem;
  letter-spacing:.16em; text-transform:uppercase; color: var(--ink-faint); margin-bottom:.25rem;
}
.contact__val{
  font-family: var(--f-display); font-weight:600; letter-spacing:-.02em;
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  text-decoration:none; word-break: break-word;
  background-image: linear-gradient(var(--rust), var(--rust));
  background-size: 0% 2px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size .35s var(--ease), color .25s var(--ease);
}
a.contact__val:hover{ color: var(--rust); background-size: 100% 2px; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ border-top:1px solid var(--line); padding: 2rem 0; background: var(--bg); }
.foot__in{ display:flex; flex-wrap:wrap; gap:.6rem 2rem; justify-content:space-between; }
.foot p{ margin:0; font-size:.84rem; color: var(--ink-faint); }
.foot__note{ font-family: var(--f-mono); font-size:.75rem !important; }

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox{
  position:fixed; inset:0; z-index:100;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.1rem;
  padding: clamp(1rem,5vw,3rem);
  background: rgba(20,17,14,.93); backdrop-filter: blur(8px);
}
.lightbox__stage{ width:100%; max-width: 1100px; display:flex; align-items:center; justify-content:center; }
.lightbox__stage img{ max-height: 76vh; width:auto; border-radius: var(--r-md); }
.lightbox__stage iframe{ width:100%; aspect-ratio:16/9; border:0; border-radius: var(--r-md); }
.lightbox__cap{ margin:0; color: rgba(255,255,255,.82); font-size:.93rem; text-align:center; max-width:60ch; }
.lightbox__close{
  position:absolute; top:1.1rem; right:1.3rem;
  width:3rem; height:3rem; border-radius:50%; cursor:pointer;
  background: rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); color:#fff;
  font-size:1.7rem; line-height:1; display:grid; place-items:center;
  transition: background .2s var(--ease), transform .25s var(--ease);
}
.lightbox__close:hover{ background: var(--rust); transform: rotate(90deg); }

/* ============================================================
   PRINT — "Save as PDF" produces the sendable CV.
   Strips the chrome, flattens the tinted section bands to white,
   and stops entries from breaking across a page boundary.
   ============================================================ */
@media print{
  html{ font-size: 10.5pt; }
  body{ background:#fff; color:#111; }

  .nav, .mobile-menu, .progress, .grain, .cursor-glow, .scrollcue,
  .hero__canvas, .hero__veil, .lightbox, .tabs, .gallery, .empty,
  .palm__preview, .foot__note, .hero__cta{ display:none !important; }

  .section, .section--palm, .section--aerial,
  .section--craft, .section--contact{
    background:#fff !important; border-color:#ddd !important;
    padding: .9rem 0;
  }

  .hero{ min-height:auto; padding:0 0 1rem; }
  .hero__title, .contact__title{
    color:#111 !important; -webkit-text-fill-color:#111; background:none;
  }
  

  /* Never split an entry across two pages. */
  .exp, .card, .stack__group, .craft__list li, .badge{ break-inside: avoid; }

  a{ text-decoration:none; color:#111; }
  .card, .craft__list li, .badge, .palm__status{
    box-shadow:none !important; border-color:#ccc;
  }
  .card::before, .card--hl::after{ display:none; }
}

/* ============================================================
   ADDITIONS — project header, status, misc
   ============================================================ */
.palm__head{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; margin-bottom:.4rem; }
.palm__name{ font-size: clamp(1.9rem, 4vw, 2.7rem); }
.tag{
  font-family: var(--f-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.3rem .62rem; border-radius:999px; font-weight:600;
}
.tag--wip{ background: rgba(166,51,8,.09); color: var(--rust); border:1px solid rgba(166,51,8,.28); }

.palm__sub{
  font-family: var(--f-mono); font-size:.69rem; letter-spacing:.14em; text-transform:uppercase;
  color: var(--ink-mid); margin:1.7rem 0 .7rem;
}
.palm__feats{ gap:.7rem; margin:0 0 1.5rem; }
.palm__feats li{ font-size:.98rem; line-height:1.55; }

.palm__status{
  font-size:.95rem; color: var(--ink-mid); line-height:1.6;
  background: var(--surface); border:1px solid var(--line);
  border-radius: var(--r-md); padding:1rem 1.15rem; margin:1.3rem 0 0;
}
.palm__status b{ color: var(--ink); }

/* The toolkit grid now sits below the cards in the same section. */
.stack{ margin-top: clamp(3rem, 6vw, 4.5rem); }

.contact__note{
  margin: 2.5rem 0 0; font-size:.88rem; color: var(--ink-faint);
  padding-top:1.25rem; border-top:1px solid var(--line);
}

/* ============================================================
   PALMROUTE — PHONE SIMULATOR
   Frame proportions taken from the PalmRoute site's own mockup.
   ============================================================ */
.phone{
  width:265px; height:530px; margin-inline:auto;
  background:#111; border-radius:46px; position:relative; overflow:hidden;
  box-shadow: 0 34px 70px -22px rgba(20,17,14,.45),
              0 0 0 1.5px rgba(0,0,0,.15), inset 0 0 0 2px #222;
}
.phone__notch{
  position:absolute; top:12px; left:50%; transform:translateX(-50%);
  width:96px; height:26px; background:#111;
  border-radius:0 0 16px 16px; z-index:10;
}
.phone__screen{
  position:absolute; inset:0;
  background: linear-gradient(160deg, #192e1c 0%, #0e2020 100%);
  display:flex; flex-direction:column;
  padding: 3.4rem 1.15rem 1.35rem; overflow:hidden;
}
.phone__cap{ margin:.9rem 0 0; text-align:center; font-size:.78rem; color: var(--ink-faint); }

.call{ display:flex; flex-direction:column; flex:1; min-height:0; }
.call--idle{ align-items:center; justify-content:center; gap:1.1rem; text-align:center; }
.call__who{ color: rgba(255,255,255,.55); font-size:.78rem; line-height:1.6; }
.call__leaf{ display:block; font-size:1.7rem; margin-bottom:.4rem; }
.call__who small{ display:block; color: rgba(255,255,255,.3); font-size:.66rem; margin-top:.2rem; }

.call__ring{
  width:96px; height:96px; border-radius:50%; border:none; cursor:pointer;
  background: linear-gradient(140deg, #4aa87a, #2d9d9d);
  color:#fff; display:grid; place-items:center;
  box-shadow: 0 0 0 0 rgba(74,168,122,.55);
  animation: ringPulse 2.4s infinite;
  transition: transform .25s var(--ease);
}
.call__ring:hover{ transform: scale(1.06); }
@keyframes ringPulse{
  70%{ box-shadow:0 0 0 22px rgba(74,168,122,0); }
  100%{ box-shadow:0 0 0 0 rgba(74,168,122,0); }
}
.call__hint{ color: rgba(255,255,255,.35); font-size:.7rem; line-height:1.5; margin:0; }

.call__status{
  display:flex; align-items:center; gap:.4rem; margin:0 0 .7rem;
  font-family: var(--f-mono); font-size:.6rem; letter-spacing:.08em;
  text-transform:uppercase; color: rgba(255,255,255,.55);
}
.call__dot{ width:6px; height:6px; border-radius:50%; background:#5fd38f; animation: pulse 2s infinite; }

.call__log{
  flex:1; min-height:0; overflow-y:auto;
  display:flex; flex-direction:column; gap:.4rem; padding-right:.15rem;
}
.call__log::-webkit-scrollbar{ width:3px; }
.call__log::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.15); border-radius:3px; }

.bub{
  max-width:88%; padding:.5rem .7rem; border-radius:13px;
  font-size:.73rem; line-height:1.45;
}
.bub--ai{ align-self:flex-start; background: rgba(255,255,255,.11); color:#eaf5ee; border-bottom-left-radius:4px; }
.bub--user{ align-self:flex-end; background:#2d9d9d; color:#03211f; border-bottom-right-radius:4px; }

.call__end{
  margin-top:.7rem; padding:.55rem; border:none; border-radius:999px; cursor:pointer;
  background:#c0392b; color:#fff; font-size:.72rem; font-weight:600;
  font-family: var(--f-display);
}
.call__end:hover{ background:#a5301f; }

/* ============================================================
   PALMROUTE PREVIEW PANEL
   One stage, three views, so the whole section fits a screen.
   ============================================================ */
.pv{ position:sticky; top:5.5rem; }
@media (max-width: 940px){ .pv{ position:static; } }

.pv__tabs{ display:flex; gap:.3rem; margin-bottom:.9rem; border-bottom:1px solid var(--line); }
.pv__tab{
  background:none; border:none; cursor:pointer;
  padding:.6rem .8rem; min-height:2.7rem;
  font-family: var(--f-display); font-size:.85rem; font-weight:600;
  color: var(--ink-faint);
  border-bottom:2px solid transparent; margin-bottom:-1px;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.pv__tab:hover{ color: var(--ink); }
.pv__tab.is-on{ color: var(--ink); border-bottom-color: var(--teal); }

.pv__stage{ display:grid; place-items:center; min-height: 560px; }
.pv__panel{ width:100%; display:flex; flex-direction:column; align-items:center; }
.pv__cap{ margin:.85rem 0 0; text-align:center; font-size:.78rem; color: var(--ink-faint); }

/* Browser frame sits flat here, and is capped so it never dwarfs the phone. */
.pv .browser{ transform:none; width:100%; max-width:520px; }
.pv .browser__view{ min-height:400px; }

@media (max-width: 940px){
  .pv__stage{ min-height:0; }
  .pv .browser{ max-width:100%; }
}

/* The phone and the wide preview are screenshots of a product, not CV
   content — leave them out of the printed document. */
@media print{
  .phone, .phone__cap, .pv{ display:none !important; }
  .trade{ box-shadow:none; border-color:#ccc; border-left-color:#999; }
}

/* Mute toggle inside the call header */
.call__mute{
  margin-left:auto; cursor:pointer;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.8); border-radius:999px;
  padding:.18rem .5rem; font-size:.55rem; letter-spacing:.06em;
  font-family: var(--f-mono); text-transform:uppercase;
}
.call__mute:hover{ background:rgba(255,255,255,.2); color:#fff; }
.call__mute[aria-pressed="true"]{ background:#c0392b; border-color:#c0392b; color:#fff; }
.call__hint span{ color: rgba(255,255,255,.55); font-weight:600; }

.shead--tight{ margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }

/* PalmRoute copy column sits a touch tighter so the pair balances. */
.palm{ align-items:start; }
.palm__lede{ max-width:46ch; }
.palm__feats{ gap:.6rem; }
.palm__feats li{ font-size:.95rem; }
.palm__status{ font-size:.9rem; }

/* ============================================================
   CURRENT PROJECT — sized to sit inside one screen.
   Tighter block padding, a slightly smaller handset, and less
   air between the copy elements than the other sections use.
   ============================================================ */
.section--palm{ padding-block: clamp(2.75rem, 5vw, 3.4rem); }
.shead--tight{ margin-bottom: 1.15rem; }
.shead--tight .shead__kicker{ margin-bottom:.4rem; }
.shead--tight .shead__title{ margin-bottom:0; }

.palm{ gap: clamp(1.75rem, 4vw, 3.25rem); }
.palm__head{ margin-bottom:.25rem; }
.palm__name{ font-size: clamp(1.7rem, 3.4vw, 2.3rem); }
.palm__tag{ margin-bottom:.75rem; font-size:.74rem; }
.palm__lede{ font-size:1rem; line-height:1.55; margin-bottom:1rem; max-width:44ch; }
.palm__feats{ gap:.45rem; margin:0 0 1rem; }
.palm__feats li{ font-size:.92rem; line-height:1.5; padding-left:1.2rem; }
.palm__feats li::before{ width:6px; height:6px; top:.58em; }
.palm__status{ font-size:.87rem; line-height:1.55; padding:.75rem .9rem; margin:0 0 1rem; }
.palm__cta{ margin-top:0; }
.palm__cta .btn{ min-height:2.75rem; padding:.65rem 1.25rem; font-size:.9rem; }

.phone{ width:235px; height:470px; border-radius:40px; }
.phone__notch{ width:86px; height:23px; }
.phone__screen{ padding: 3rem 1rem 1.15rem; }
.call__ring{ width:84px; height:84px; }
.call__leaf{ font-size:1.5rem; }
.bub{ font-size:.7rem; padding:.45rem .62rem; }

.pv__tabs{ margin-bottom:.75rem; }
.pv__tab{ padding:.5rem .7rem; min-height:2.4rem; font-size:.82rem; }
.pv__stage{ min-height:495px; }
.pv__cap{ margin-top:.7rem; font-size:.75rem; }
.pv .browser__view{ min-height:340px; }

@media (max-width: 940px){
  .section--palm{ padding-block: clamp(3rem, 8vw, 4.5rem); }
  .pv__stage{ min-height:0; }
}

/* ============================================================
   PREVIEW SCALING
   A dashboard is a desktop layout. Reflowing it into one phone
   column turns it into nonsense, so the mockup keeps its real
   proportions and is scaled to fit instead. JS sets the factor;
   without JS it simply renders at its natural width.
   ============================================================ */
.pv__fit{ width:100%; overflow:hidden; }
.pv__fit > .browser{ transform-origin: top left; will-change: transform; }

/* ============================================================
   DASHBOARD MOCKUP
   Rebuilt from the PalmRoute dashboard showcase. It keeps this
   desktop layout at every screen size and is scaled down to fit
   by fitPreviews() — reflowing it into one column would stop it
   reading as a dashboard at all.
   ============================================================ */
.browser__view--dash{
  display:grid; grid-template-columns:118px 1fr; gap:0; padding:0;
  background: linear-gradient(160deg, #10251d 0%, #0c1b17 100%);
}
.dv-side{
  display:flex; flex-direction:column; gap:.15rem;
  padding:.8rem .55rem; border-right:1px solid rgba(255,255,255,.07);
}
.dv-brand{ font-size:.66rem; font-weight:700; color:#e8f3ec; margin-bottom:.6rem; padding:0 .3rem; white-space:nowrap; }
.dv-nav{ font-size:.6rem; color: rgba(255,255,255,.45); padding:.32rem .45rem; border-radius:6px; white-space:nowrap; }
.dv-nav.is-on{ background: rgba(69,185,185,.16); color:#9fe4e4; font-weight:600; }

.dv-main{ padding:.85rem .9rem 1rem; min-width:0; }
.dv-hello{ font-size:.64rem; color: rgba(255,255,255,.5); margin:0 0 .7rem; }
.dv-hello b{ color:#e8f3ec; }

.dv-tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem; margin-bottom:.6rem; }
.dv-tile{
  position:relative; padding:.5rem .55rem; border-radius:9px;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.09);
}
.dv-tile b{ display:block; font-family: var(--f-display); font-size:.95rem; color:#f2faf6; line-height:1.15; }
.dv-tile small{ display:block; font-size:.52rem; color: rgba(255,255,255,.45); }
.dv-trend{ position:absolute; top:.45rem; right:.5rem; font-size:.48rem; font-weight:700; color:#7ee0a8; }

.dv-panels{ display:grid; grid-template-columns:1.6fr 1fr; gap:.45rem; }
.dv-panel{
  padding:.6rem .65rem; border-radius:9px;
  background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
}
.dv-panel-h{
  display:flex; align-items:center; gap:.35rem; margin:0 0 .45rem;
  font-size:.56rem; color: rgba(255,255,255,.6); font-weight:600; white-space:nowrap;
}
.dv-chip{ font-size:.46rem; padding:.08rem .28rem; border-radius:4px; background: rgba(126,224,168,.18); color:#7ee0a8; }
.dv-area{ width:100%; height:60px; display:block; }
.dv-days{ display:flex; justify-content:space-between; margin:.25rem 0 0; font-size:.44rem; color: rgba(255,255,255,.3); }

.dv-panel--donut{ display:flex; flex-direction:column; }
.dv-donut{ position:relative; flex:1; display:grid; place-items:center; min-height:74px; }
.dv-donut svg{ width:72px; height:72px; display:block; }
.dv-donut-c{ position:absolute; inset:0; display:grid; place-content:center; text-align:center; }
.dv-donut-c b{ display:block; font-family: var(--f-display); font-size:.9rem; color:#f2faf6; line-height:1; }
.dv-donut-c small{ font-size:.44rem; color: rgba(255,255,255,.45); }

/* ============================================================
   PREVIEW OVERFLOW GUARD
   The mockup frame is laid out at its natural 520px and then
   visually scaled. A transform does NOT reduce layout size, and
   grid/flex children default to min-width:auto (max-content), so
   without these the frame pushed the whole page wider than the
   screen on narrow viewports. Each link in the chain must be
   allowed to shrink, and .pv__fit does the actual clipping.
   ============================================================ */
.palm > *,
.pv, .pv__stage, .pv__panel, .pv__fit{ min-width: 0; }
.pv__stage{ grid-template-columns: minmax(0, 1fr); }
.pv__fit{ max-width: 100%; }

/* ============================================================
   BRAND MARK
   ============================================================ */
.nav__mark{
  display:block; width:2rem; height:2rem; flex:none;
  background:none; border-radius:0; padding:0;
}
.nav__mark .mark{ width:100%; height:100%; display:block; border-radius:8px; }

/* ============================================================
   PREVIEW TABS — read as controls, not as labels.
   A segmented control with real borders and a hover lift, so it
   is obvious these are pressable before anyone tries.
   ============================================================ */
.pv__tabs{
  display:inline-flex; gap:.25rem; margin-bottom:1rem;
  padding:.25rem; border:1px solid var(--line); border-radius:999px;
  background: var(--surface); box-shadow: var(--shadow);
}
.pv__tab{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem .95rem; min-height:2.4rem;
  border:none; border-radius:999px; cursor:pointer;
  font-family: var(--f-display); font-size:.82rem; font-weight:600;
  color: var(--ink-mid); background:transparent;
  transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.pv__tab::before{
  content:''; width:7px; height:7px; border-radius:50%;
  background: currentColor; opacity:.35; transition: opacity .2s var(--ease);
}
.pv__tab:hover{ background: var(--bg-alt); color: var(--ink); transform: translateY(-1px); }
.pv__tab.is-on{
  background: var(--ink); color: var(--bg); box-shadow: var(--shadow);
}
.pv__tab.is-on::before{ opacity:1; background: var(--teal-lo); }
.pv__hint{
  margin:0 0 .9rem; font-size:.75rem; color: var(--ink-faint);
  font-family: var(--f-mono);
}

/* ============================================================
   AERIAL SHOWREEL
   ============================================================ */
.reel{ margin-top:.5rem; }
.reel__frame{
  position:relative; display:block; width:100%; padding:0; cursor:pointer;
  aspect-ratio:16/9; overflow:hidden; border-radius: var(--r-lg);
  border:1px solid var(--line); background: var(--bg-alt);
  box-shadow: var(--shadow);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.reel__frame:hover{ transform: translateY(-3px); box-shadow: var(--shadow-up); }
.reel__thumb{ width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease); }
.reel__frame:hover .reel__thumb{ transform: scale(1.03); }
.reel__btn{
  position:absolute; inset:0; margin:auto;
  width:5rem; height:5rem; display:grid; place-items:center;
  border-radius:50%; background: rgba(255,255,255,.94); color: var(--ink);
  box-shadow: 0 10px 30px -8px rgba(20,17,14,.5);
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.reel__frame:hover .reel__btn{ transform: scale(1.08); background:#fff; }
.reel__player{
  width:100%; aspect-ratio:16/9; border:0;
  border-radius: var(--r-lg); display:block; box-shadow: var(--shadow-up);
}
.reel__cap{ margin:.9rem 0 0; font-size:.85rem; color: var(--ink-faint); }

/* Photographs, when present, sit under the reel. */
#photoGrid:not(:empty){ margin-top:1.75rem; }

@media print{
  .reel, .reel__cap{ display:none !important; }
}

/* Reclaim the few pixels the segmented control added, so the
   Current project section still lands inside one screen. */
.pv__tabs{ margin-bottom:.7rem; }
.pv__stage{ min-height:485px; }

/* ============================================================
   SHOWREEL PLAYER
   YouTube's own chrome carries the video title and channel name
   and cannot be turned off with URL parameters — showinfo was
   retired and modestbranding is deprecated. So the player runs
   with controls=0 through the IFrame API, a shield swallows
   clicks that would summon YouTube's overlay, and the controls
   below are ours: play/pause, skip, seek, mute, full screen.
   ============================================================ */
.reel__stage{
  position:relative; width:100%; aspect-ratio:16/9;
  border-radius: var(--r-lg); overflow:hidden;
  border:1px solid var(--line); background:#0d0b09;
  box-shadow: var(--shadow);
}
.reel__mount, .reel__mount iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0; display:block;
}
.reel__mount iframe{ pointer-events:none; }   /* no YouTube overlay on click */

.reel__shield{
  position:absolute; inset:0; z-index:2;
  background:transparent; border:0; padding:0; cursor:pointer;
}

/* the click-to-start facade */
.reel__frame{
  position:absolute; inset:0; z-index:3;
  display:block; width:100%; height:100%; padding:0; cursor:pointer;
  border:0; background:none; overflow:hidden;
}
.reel__thumb{ width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease); }
.reel__frame:hover .reel__thumb{ transform: scale(1.03); }
.reel__btn{
  position:absolute; inset:0; margin:auto;
  width:5rem; height:5rem; display:grid; place-items:center;
  border-radius:50%; background: rgba(255,255,255,.94); color: var(--ink);
  box-shadow: 0 10px 30px -8px rgba(20,17,14,.5);
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.reel__frame:hover .reel__btn{ transform: scale(1.08); background:#fff; }

.reel__cap{ margin:.9rem 0 0; font-size:.85rem; color: var(--ink-faint); }

/* ---------- our control bar ---------- */
.rc{
  display:flex; align-items:center; gap:.4rem;
  margin-top:.7rem; padding:.5rem .6rem;
  background: var(--surface); border:1px solid var(--line);
  border-radius:999px; box-shadow: var(--shadow);
}
.rc__btn{
  flex:none; width:2.4rem; height:2.4rem; cursor:pointer;
  display:grid; place-items:center;
  border:0; border-radius:50%; background:transparent; color: var(--ink);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.rc__btn:hover{ background: var(--bg-alt); }
.rc__btn[aria-pressed="true"]{ background: var(--ink); color: var(--bg); }

.rc__time{
  flex:none; font-family: var(--f-mono); font-size:.72rem;
  color: var(--ink-mid); padding:0 .3rem; font-variant-numeric: tabular-nums;
}

.rc__seek{
  flex:1; min-width:0; height:4px; margin:0 .35rem;
  -webkit-appearance:none; appearance:none; cursor:pointer;
  background: var(--line); border-radius:3px; outline-offset:6px;
}
.rc__seek::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:14px; height:14px; border-radius:50%;
  background: var(--rust); border:2px solid var(--surface);
  box-shadow:0 1px 3px rgba(20,17,14,.3);
}
.rc__seek::-moz-range-thumb{
  width:14px; height:14px; border-radius:50%;
  background: var(--rust); border:2px solid var(--surface);
}

@media (max-width: 620px){
  /* Seek gets its own full-width row on top, then every button fits on
     one row underneath. Left as-is, the fullscreen button wrapped onto
     a third row by itself. */
  /* 6.8px gaps put the row 5.9px over; 4px brings every control onto one line. */
  .rc{ flex-wrap:wrap; border-radius: var(--r-lg); padding:.6rem .6rem; gap:.22rem; }
  .rc__seek{ order:-1; flex-basis:100%; margin:.15rem .15rem .6rem; }
  .rc__btn{ width:2.3rem; height:2.3rem; }
  /* No auto margin here: in a wrapping flex row it claims all the free
     space and pushes the last button onto a line of its own. */
  .rc__time{ margin-left:0; font-size:.7rem; padding:0 .15rem; }
}

/* ============================================================
   PREVIEW TABS — centred over the panel
   ============================================================ */
.pv{ display:flex; flex-direction:column; align-items:center; }
.pv__tabs{ align-self:center; }
.pv__stage{ width:100%; }

@media print{ .rc{ display:none !important; } }

/* Paused state: our own, drawn over YouTube's title overlay. */
.reel__paused{
  position:absolute; inset:0; z-index:4; pointer-events:none;
  display:grid; place-items:center;
  /* Fully opaque: a translucent scrim still let the title ghost
     through. The poster frame is painted on top so a paused player
     looks deliberate rather than like a black hole. */
  background-color:#0a0907;
  background-size:cover; background-position:center;
}
.reel__paused::after{
  content:''; position:absolute; inset:0;
  background: rgba(10,9,7,.42);
}

.reel__paused .reel__btn{ position:relative; z-index:2; }

/* ============================================================
   HERO PORTRAIT
   The photo is a cut-out with no background of its own, so the
   card supplies one: a warm-to-cool wash that runs the same way
   as the brand gradient, faded into the card at the bottom so
   the shoulders dissolve rather than stop at a hard edge.
   ============================================================ */
.hero__portrait{
  position:relative; aspect-ratio: 3 / 2; overflow:hidden;
  background:
    radial-gradient(88% 74% at 26% 8%,  rgba(217,119,6,.20), transparent 62%),
    radial-gradient(80% 70% at 88% 22%, rgba(17,94,89,.16),  transparent 60%),
    linear-gradient(158deg, #f8ece0 0%, #f1e6d8 52%, #e6ebe6 100%);
  border-bottom:1px solid var(--line);
}
.hero__portrait img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover; object-position: 50% 12%;
}
/* dissolve the bottom edge into the card */
.hero__portrait::after{
  content:''; position:absolute; inset:auto 0 0 0; height:22%;
  background: linear-gradient(transparent, var(--surface));
  pointer-events:none;
}

/* A US résumé conventionally carries no photograph, and some
   applicant-tracking systems reject them, so the printed copy
   leaves it out. Delete this rule to print it. */
@media print{
  .hero__portrait{ display:none !important; }
  .hero__facts{ padding:0; }
  .hero__auth{ padding:1rem 0 0; }
}

/* The hero carries a portrait now; reclaim the height so the header
   still lands inside a single screen. */
.hero{ padding: 6rem var(--pad) 4rem; }
.hero__portrait{ aspect-ratio: 16 / 10; }
.hero__portrait{ aspect-ratio: 16 / 9; }
.hero__facts{ gap:.65rem; }
.hero{ padding-bottom: 2.6rem; }

/* Once the hero stacks, the scroll cue sits on top of the profile
   card instead of below it — and a phone user needs no prompt to
   scroll anyway. */
@media (max-width: 940px){
  .scrollcue{ display:none; }
}

/* ============================================================
   HERO — PORTRAIT AS BACKGROUND
   The photo is scenery, not a headshot in a box: desaturated to a
   warm grey, dropped to a low opacity, and masked out towards the
   left and the bottom so it dissolves into the paper instead of
   ending on an edge. All type stays clear of it on desktop, and it
   drops further back once the layout narrows.
   ============================================================ */
.hero__figure{
  position:absolute; z-index:1; pointer-events:none;
  top:0; bottom:0; right:0;
  width: min(54%, 760px);
}
.hero__figure img{
  width:100%; height:100%; display:block;
  object-fit: cover; object-position: 58% bottom;
  /* warm grey rather than flat grey, so it belongs to the palette */
  filter: grayscale(1) sepia(.3) contrast(1.05) brightness(1.03);
  opacity:.34;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 46%);
          mask-image: linear-gradient(to right, transparent 0%, #000 46%);
}
/* bottom fade, kept as its own layer so no mask-compositing is needed */
.hero__figure::after{
  content:''; position:absolute; inset:auto 0 0 0; height:34%;
  background: linear-gradient(transparent, var(--bg) 88%);
}

.hero__body{ position:relative; z-index:3; max-width: min(58%, 660px); }

/* the contact details, as a strip rather than a card */
.hero__facts{
  display:flex; flex-wrap:wrap; gap:.75rem 2.2rem;
  margin:0 0 1.8rem; padding:1.1rem 0;
  border-block:1px solid var(--line);
}
.hero__facts > div{ display:grid; gap:.05rem; }
.hero__facts dt{
  font-family: var(--f-mono); font-size:.63rem; letter-spacing:.15em;
  text-transform:uppercase; color: var(--ink-faint);
}
.hero__facts dd{ margin:0; font-size:.95rem; font-weight:500; }
.hero__facts a{
  text-decoration:none; border-bottom:1px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.hero__facts a:hover{ color: var(--rust); border-bottom-color: var(--rust); }

.hero__auth{
  margin:1.6rem 0 0; padding:0;
  border:0; font-size:.8rem; color: var(--ink-faint);
}

@media (max-width: 940px){
  /* text runs full width now, so the figure has to sit further back */
  .hero__body{ max-width:100%; }
  .hero__figure{ width: 78%; }
  .hero__figure img{ opacity:0; }
}
@media (max-width: 620px){
  .hero__figure{ width: 100%; }
  .hero__figure img{ opacity:0; }
  .hero__facts{ gap:.7rem 1.6rem; }
}

@media print{
  .hero__figure{ display:none !important; }
  .hero__facts{ border-color:#ddd; }
}

/* cover was cropping the head off the top of the frame; contain keeps the
   whole figure and anchors it to the bottom-right, where the mask wants it */
.hero__figure img{
  object-fit: contain;
  object-position: 100% 100%;
}