/* =====================================================================
   Azkali — CV / Résumé page styles  (Lunar Editorial · CV zone = blue)
   Auto-enqueued ONLY on /cv/ after style.css, so these rules override
   the generic CV styling safely. Everything is scoped under .cv-page
   so it can never leak to other zones.

   Goal: a CENTERED, editorial, beautifully typeset résumé — single
   narrow column, generous whitespace, a soft timeline spine, an
   elegant language feature, and smooth scroll-reveal motion (the
   global IntersectionObserver toggles .in/.is-visible on .reveal).
   Colours come from the theme's CSS custom properties, so both the
   default "Deep Space" dark mode and the "Daybreak" light toggle work.
   ===================================================================== */

/* ---- local CV tokens (a touch tighter rhythm than the global wrap) ---- */
.cv-page{
  --cv-col:860px;          /* the centered résumé column width */
  --cv-pad:clamp(1.25rem,5vw,2.5rem);
  --cv-sec-gap:clamp(3rem,6vw,4.75rem);
}

/* =====================================================================
   CENTERED COLUMN — never touches the screen edges
   ===================================================================== */
.cv-page .cv-wrap{
  max-width:var(--cv-col);
  margin-inline:auto;
  padding-inline:var(--cv-pad);
  padding-block:clamp(1.5rem,4vw,3rem) clamp(4rem,8vw,6rem);
}

/* every major section gets even vertical rhythm, centered content */
.cv-page .section{padding:0;margin-top:var(--cv-sec-gap)}
.cv-page .rule{margin-block:var(--cv-sec-gap) 0;
  background:linear-gradient(90deg,transparent,var(--line-strong),transparent)}

/* section heads, centered & airy */
.cv-page .sec-head{justify-content:center;align-items:baseline;gap:14px;margin-bottom:clamp(1.5rem,3vw,2.25rem)}
.cv-page .sec-head .num{color:var(--zone-link,var(--cv));opacity:.9}
.cv-page .sec-head h2{text-align:center}

/* =====================================================================
   HEADER / HERO — centered name block with a small contained moon
   ===================================================================== */
.cv-page .cv-hero{padding:clamp(2.5rem,6vw,4.5rem) 0 .5rem;text-align:center}
.cv-page .cv-hero::before{display:none}

.cv-page .cv-hero .zkick{justify-content:center;margin-bottom:1.5rem}

/* small, tasteful contained moon between kicker and name */
.cv-page .cv-hero .moon-mini{width:clamp(86px,12vw,116px);max-width:116px;margin:0 auto 1.25rem}
.cv-page .cv-hero .moon-mini figure{width:80%;height:80%}

.cv-page .cv-hero h1{font-size:clamp(2.6rem,7vw,4.4rem);line-height:1;margin-inline:auto;max-width:18ch}
.cv-page .cv-hero .role{max-width:54ch;margin-inline:auto;margin-top:1.1rem}

.cv-page .cv-hero .meta-row{justify-content:center;margin-top:1.1rem;gap:8px 20px}

/* tidy contact row under the meta */
.cv-page .contact-row{justify-content:center;align-items:center;gap:0 .5rem;row-gap:.35rem;
  margin-top:1.4rem;flex-wrap:wrap}
.cv-page .contact-row p{margin:0;position:relative;font-family:var(--mono);font-size:.82rem}
.cv-page .contact-row p + p::before{content:"·";position:absolute;left:-.55rem;color:var(--muted)}
.cv-page .contact-row a{color:var(--zone-link,var(--link-cv));text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--zone-link,var(--cv)) 35%,transparent);
  padding-bottom:1px;transition:border-color .25s var(--ease),color .25s var(--ease)}
.cv-page .contact-row a:hover{color:var(--text);border-color:var(--zone-link,var(--cv))}

.cv-page .cv-hero .cta-row{justify-content:center;margin-top:1.9rem}

/* =====================================================================
   PROFILE — centered editorial lede + body, scannable public list
   ===================================================================== */
.cv-page .profile{max-width:100%;text-align:center}
.cv-page .profile .lede{font-size:clamp(1.22rem,2.4vw,1.6rem);line-height:1.4;max-width:30ch;
  margin-inline:auto}
.cv-page .profile .profile-body{margin:1.4rem auto 0;max-width:64ch;text-align:center}

.cv-page .profile .profile-sub{justify-content:center;margin:2.4rem 0 1.4rem}

/* public-work highlights — tidy two-up grid, dot markers, left-aligned text */
.cv-page .profile-list{text-align:left;max-width:66ch;margin-inline:auto;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:.7rem 2rem;justify-items:start}
.cv-page .profile .profile-close{margin:2rem auto 0;max-width:60ch;text-align:center}

/* =====================================================================
   EXPERIENCE — refined centered vertical timeline (soft spine)
   The column itself is centered; the spine sits on the left of the
   content block, which is centered as a whole.
   ===================================================================== */
.cv-page .timeline{max-width:720px;margin-inline:auto;padding-left:34px;text-align:left}
.cv-page .timeline::before{
  left:5px;top:6px;bottom:6px;width:1px;
  background:linear-gradient(180deg,
    transparent 0,
    var(--zone,var(--cv)) 6%,
    color-mix(in srgb,var(--zone,var(--cv)) 28%,transparent) 70%,
    transparent 100%);
}
.cv-page .tl-item{padding:0 0 clamp(1.75rem,3vw,2.4rem) 4px}
.cv-page .tl-item:last-child{padding-bottom:0}
.cv-page .tl-item::before{
  left:-34px;top:.45rem;width:9px;height:9px;
  background:var(--bg);
  border:2px solid var(--zone,var(--cv));
  box-shadow:0 0 0 4px color-mix(in srgb,var(--zone,var(--cv)) 14%,transparent),
             0 0 14px -2px var(--zone,var(--cv));
}
.cv-page .tl-head{align-items:baseline;gap:8px 18px}
.cv-page .tl-item h3{font-size:1.18rem;line-height:1.2}
.cv-page .tl-item .org{margin-top:.35rem}
.cv-page .tl-item .when{
  font-size:.74rem;letter-spacing:.04em;color:var(--zone-link,var(--cv));
  background:color-mix(in srgb,var(--zone,var(--cv)) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--zone,var(--cv)) 30%,transparent);
  border-radius:var(--r-pill);padding:3px 11px}
.cv-page .tl-item .summary{margin-top:.85rem;font-size:.95rem}
.cv-page .tl-item ul{margin-top:.85rem}

/* =====================================================================
   SKILLS — airy grouped lists, no heavy nested boxes
   ===================================================================== */
.cv-page .skill-stack{max-width:760px;margin-inline:auto;display:flex;flex-direction:column;
  gap:clamp(1.5rem,3vw,2.25rem)}
.cv-page .skill-row{border:0;background:none;box-shadow:none;padding:0;
  border-top:1px solid var(--line);padding-top:clamp(1.25rem,2.5vw,1.75rem)}
.cv-page .skill-row:first-child{border-top:0;padding-top:0}
.cv-page .skill-row h3{
  font-family:var(--display-alt);font-weight:700;font-size:.74rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--zone-link,var(--cv));margin:0 0 1rem}
.cv-page .skill-row ul{margin:0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:.6rem 2rem}
.cv-page .skill-row ul li{position:relative;padding-left:1.1rem;font-size:.9rem;
  color:var(--muted);line-height:1.5}
.cv-page .skill-row ul li::before{content:"";position:absolute;left:.1rem;top:.62em;
  width:5px;height:5px;border-radius:50%;background:var(--zone,var(--cv));opacity:.7}

/* =====================================================================
   LANGUAGES — the personality feature.
   An elegant set of refined level bars; warm, centered, on-brand.
   The .lvl-N class on each .lang drives the meter fill width.
   ===================================================================== */
.cv-page .lang-intro{max-width:56ch;margin:0 auto clamp(1.75rem,3.5vw,2.5rem);text-align:center;
  color:var(--muted);font-size:1.02rem;text-wrap:pretty}

.cv-page .lang-set{max-width:560px;margin-inline:auto;display:flex;flex-direction:column;gap:1.25rem}
.cv-page .lang{display:grid;grid-template-columns:1fr;gap:.5rem;text-align:left}
.cv-page .lang p{margin:0}
.cv-page .lang-name{font-family:var(--display);font-weight:400;letter-spacing:.04em;
  font-size:1.18rem;line-height:1}
.cv-page .lang-tag{font-family:var(--mono);font-size:.76rem;color:var(--muted);letter-spacing:.02em}

/* the meter: soft track + gradient fill that animates in on reveal */
.cv-page .lang-meter{position:relative;height:6px;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--text) 9%,transparent);overflow:hidden}
.cv-page .lang-meter .fill{position:absolute;inset:0;width:0;border-radius:inherit;
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--zone,var(--cv)) 55%,transparent),
    var(--zone,var(--cv)));
  box-shadow:0 0 14px -3px var(--zone,var(--cv));
  transition:width 1s var(--ease) .15s}

/* levels 1..5 — default (pre-reveal) collapsed; revealed widths below */
.cv-page .lang.lvl-1 .fill{--w:20%}
.cv-page .lang.lvl-2 .fill{--w:38%}
.cv-page .lang.lvl-3 .fill{--w:58%}
.cv-page .lang.lvl-4 .fill{--w:78%}
.cv-page .lang.lvl-5 .fill{--w:100%}

/* fill animates to its level once the section reveals into view */
.cv-page .reveal.is-visible .lang .fill,
.cv-page .reveal.in .lang .fill{width:var(--w)}

/* =====================================================================
   BEYOND THE KERNEL — short human section, classy & centered
   ===================================================================== */
.cv-page .beyond{max-width:62ch;margin-inline:auto;text-align:center}
.cv-page .beyond .beyond-lede{font-family:var(--display);font-weight:400;letter-spacing:.03em;
  font-size:clamp(1.3rem,2.6vw,1.7rem);line-height:1.25;margin:0 0 1.1rem;
  background:var(--moon-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.cv-page .beyond p{color:var(--muted);font-size:1.02rem;text-wrap:pretty}

/* =====================================================================
   EDUCATION + CERTIFICATIONS — compact two-up, light cards
   ===================================================================== */
.cv-page .edu-cols{max-width:720px;margin-inline:auto;gap:1.25rem}
.cv-page .edu-cols .wp-block-column{flex-basis:0;flex-grow:1;margin:0}
.cv-page .info-card{padding:clamp(1.25rem,2.5vw,1.6rem)}
.cv-page .info-card .top-head{margin-top:1.5rem}
@media(max-width:680px){
  .cv-page .edu-cols{flex-direction:column}
}

/* =====================================================================
   CONTACT — centered link grid, tighter
   ===================================================================== */
.cv-page .links{max-width:760px;margin-inline:auto;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}

/* =====================================================================
   MOTION — let the global .reveal handle fade-up; just add a gentle
   stagger feel by easing. Honour reduced-motion (global also resets).
   ===================================================================== */
.cv-page .reveal{transition:opacity .7s var(--ease),transform .7s var(--ease)}

@media (prefers-reduced-motion:reduce){
  .cv-page .lang .fill{transition:none;width:var(--w)}
  .cv-page .cv-hero .moon-mini img{animation:none}
}

/* =====================================================================
   RESPONSIVE polish
   ===================================================================== */
@media(max-width:560px){
  .cv-page .tl-head{flex-direction:column;align-items:flex-start}
  .cv-page .tl-item .when{margin-top:.4rem}
  .cv-page .contact-row{gap:0 .4rem}
}