/* ==========================================================================
   Johannes Lindqvist — personal portfolio · design mock v1
   Tokens → base → layout → components → motion → responsive
   ========================================================================== */

@font-face { font-family: "Geist"; src: url("fonts/Geist-latin-wght.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-latin-wght.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  /* colour — never #000 / #fff */
  --bg: #141414;
  --bg-raise: #1b1b1a;
  --bg-sunk: #101010;
  --text: #ecebe8;
  --muted: #8f8c87;
  --faint: #5d5b58;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --radius: 6px;               /* one radius for all image frames */
  --accent: #d9a46c;            /* one restrained warm accent: dots, index on hover, slider handle */

  /* type */
  --sans: "Geist", ui-sans-serif, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
  --fs-display: clamp(3rem, 1.4rem + 5.6vw, 7rem);         /* 48 → 112 */
  --fs-h1:      clamp(2.75rem, 1.4rem + 5vw, 6.5rem);       /* 44 → 104 */
    --fs-h2:      clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);    /* 28 → 44 */
  --fs-h3:      clamp(1.125rem, 1rem + 0.4vw, 1.375rem);    /* 18 → 22 */
  --fs-lead:    clamp(1.125rem, 0.95rem + 0.6vw, 1.5rem);   /* 18 → 24 */
  --fs-body:    1rem;                                       /* 16 */
  --fs-small:   0.875rem;                                   /* 14 */
  --fs-mono:    0.75rem;                                    /* 12, uppercase labels */

  /* spacing scale (4px base) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px; --s11: 176px;

  /* grid */
  --cols: 12;
  --gutter: 24px;
  --margin: 40px;
  --section: var(--s10);

  /* motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 200ms;
  --t-med: 450ms;
  --t-reveal: 500ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--sans); font-size: var(--fs-body); line-height: 1.55;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 500; }
::selection { background: var(--accent); color: var(--bg); }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }

.mono { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.muted { color: var(--muted); }

/* ---------- layout ---------- */
.wrap { padding-inline: var(--margin); max-width: 1680px; margin-inline: auto; }
.grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gutter); }
.section { padding-block: var(--section); }
.rule { border-top: 1px solid var(--line); }

.section-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: var(--s5); border-bottom: 1px solid var(--line); }
.section-head .mono { color: var(--muted); }

/* placeholder marker — remove when real content lands */
.ph { display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
      color: var(--accent); border: 1px dashed rgba(217, 164, 108, 0.5); border-radius: 2px; padding: 1px 5px; vertical-align: middle; }

/* ---------- nav ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; }
.nav__inner { display: flex; justify-content: space-between; align-items: center; height: 72px; }
.nav__name { font-weight: 500; letter-spacing: -0.01em; }
.nav__name span { color: var(--muted); font-weight: 400; margin-left: var(--s3); }
.nav__links { display: flex; gap: var(--s6); font-size: var(--fs-small); }
.nav__links a { color: var(--muted); transition: color var(--t-fast) linear; }
.nav__links a:hover, .nav__links a[aria-current] { color: var(--text); }
.nav::before { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--bg) 30%, rgba(20,20,20,0)); pointer-events: none; z-index: -1; }

/* ---------- hero (home) ---------- */
.hero { padding-top: 160px; padding-bottom: 0; }
.hero__title { grid-column: 1 / -1; font-size: var(--fs-display); line-height: 0.92; letter-spacing: -0.05em; font-weight: 500; }
.hero__sub { grid-column: 1 / 8; margin-top: var(--s5); font-size: var(--fs-lead); line-height: 1.4; letter-spacing: -0.01em; color: var(--muted); }
.hero__sub strong { color: var(--text); font-weight: 400; }
.hero__status { grid-column: 1 / -1; justify-self: start; align-self: start; display: inline-flex; align-items: flex-start; gap: var(--s2);
  width: auto; min-width: 0; max-width: 100%; margin: 0 0 var(--s6); padding: 6px 12px 6px 10px; border: 1px solid var(--line-strong); border-radius: 999px;
  color: var(--text); background: rgba(255, 255, 255, 0.02); line-height: 1.3; white-space: normal; overflow-wrap: normal; }
.hero__dot { flex: none; width: 7px; height: 7px; margin-top: calc((1.3em - 7px) / 2); border-radius: 50%; background: #5fbf7a; box-shadow: 0 0 0 3px rgba(95, 191, 122, 0.18); }
@media (max-width: 640px) { .hero__status { margin-bottom: var(--s5); padding: 6px 10px 6px 9px; font-size: 0.6875rem; letter-spacing: 0.02em; } }
@media (max-width: 359px) { .hero__status { border-radius: 14px; } }

.frame { position: relative; overflow: hidden; background: var(--bg-raise); border-radius: var(--radius); }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.caption { display: flex; justify-content: space-between; padding-top: var(--s3); color: var(--muted); }
/* ---------- category cards (home) — same markup on every device ---------- */
.work { padding-top: var(--s8); }
.cards { list-style: none; margin: var(--s6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s8) var(--gutter); }
.card a { display: block; }
.card__media { aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius); background: var(--bg-raise); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
.card__head { display: flex; align-items: baseline; gap: var(--s3); margin-top: var(--s4); }
.card__idx { color: var(--muted); }
.card__name { font-size: var(--fs-h3); font-weight: 500; letter-spacing: -0.015em; transition: color var(--t-fast) linear; }
.card__arrow { margin-left: auto; color: var(--muted); transition: color var(--t-fast) linear; }
.card__desc { color: var(--muted); font-size: var(--fs-small); margin-top: var(--s1); }
.card__count { color: var(--muted); margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); display: flex; gap: var(--s3); align-items: center; }
.tag { color: var(--accent); border: 1px solid rgba(217,164,108,0.35); padding: 1px 6px; border-radius: 2px; }
@media (hover: hover) {
  .card a:hover .card__media img { transform: scale(1.03); }
  .card a:hover .card__name, .card a:hover .card__arrow { color: var(--accent); }
}

/* project card (standard category) */
.projects { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s8) var(--gutter); margin-top: var(--s6); }
.project a { display: block; }
.project__media { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); background: var(--bg-raise); }
.project__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
.project__name { margin-top: var(--s4); font-size: var(--fs-h3); font-weight: 500; letter-spacing: -0.015em; transition: color var(--t-fast) linear; }
.project__meta { display: flex; justify-content: space-between; gap: var(--s4); margin-top: var(--s1); color: var(--muted); font-size: var(--fs-small); }
@media (hover: hover) {
  .project a:hover .project__media img { transform: scale(1.03); }
  .project a:hover .project__name { color: var(--accent); }
}

/* ---------- about / contact footer ---------- */
.about { padding-top: var(--s11); }
.about__label { grid-column: 1 / 3; color: var(--muted); }
.about__text { grid-column: 3 / 10; font-size: var(--fs-h2); line-height: 1.18; letter-spacing: -0.025em; }
.about__text .muted { color: var(--muted); }
.about__cols { grid-column: 1 / 13; margin-top: var(--s8); display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--gutter); }
.about__cols h3, .about__cols h4 { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 400; margin-bottom: var(--s3); }
.about__cols p, .about__cols li { font-size: var(--fs-small); }
.about__cols ul { list-style: none; padding: 0; margin: 0; }
.about__cols h4 { margin-top: var(--s5); }
.about__cols .about__spaced li + li { margin-top: var(--s2); }
@media (max-width: 640px) { .about__cols .nb { white-space: nowrap; } }

.contact { padding-block: var(--s10) var(--s6); }
.contact__mail { display: inline-flex; align-items: baseline; gap: var(--s4); font-size: var(--fs-h1); letter-spacing: -0.045em; line-height: 1; font-weight: 500; }
.contact__mail .arrow { font-size: 0.5em; color: var(--muted); transition: transform var(--t-med) var(--ease-out), color var(--t-fast) linear; }
.contact__mail:hover .arrow { transform: translate(6px, -6px); color: var(--accent); }
.footer-bar { display: flex; justify-content: space-between; gap: var(--s5); margin-top: var(--s9); padding-top: var(--s5); border-top: 1px solid var(--line); color: var(--muted); }
.footer-bar nav { display: flex; gap: var(--s5); }
.footer-bar a:hover { color: var(--text); }

/* ==========================================================================
   Category page
   ========================================================================== */
.crumb { padding-top: 120px; color: var(--muted); display: flex; gap: var(--s3); }
.crumb a:hover { color: var(--text); }
.cat-head { padding-top: var(--s6); padding-bottom: var(--s7); }
.cat-head__title { grid-column: 1 / -1; font-size: var(--fs-h1); line-height: 0.95; letter-spacing: -0.05em; }
.cat-head__idx { grid-column: 1 / -1; color: var(--muted); margin-bottom: var(--s5); display: flex; gap: var(--s4); }

.cat-head__intro { grid-column: 1 / 8; margin-top: var(--s5); font-size: var(--fs-lead); line-height: 1.4; letter-spacing: -0.01em; color: var(--muted); }
.cat-hero { aspect-ratio: 16 / 7; }

/* key facts */
.facts { margin-top: var(--s8); }
.fact { grid-column: span 3; border-top: 1px solid var(--line-strong); padding-top: var(--s4); }
.fact dt { color: var(--muted); margin-bottom: var(--s3); display: flex; justify-content: space-between; align-items: center; }
.fact dd { margin: 0; font-size: var(--fs-h3); line-height: 1.3; letter-spacing: -0.01em; }

/* process steps */
.process__intro { grid-column: 1 / 5; }
.process__intro h2, .block-title { font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -0.035em; }
.process__intro p { margin-top: var(--s4); color: var(--muted); max-width: 34ch; }
.steps { grid-column: 1 / -1; margin-top: var(--s8); display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--gutter); counter-reset: step; list-style: none; padding: 0; }
.step__media { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); background: var(--bg-raise); }
.step__media img { width: 100%; height: 100%; object-fit: cover; }
.step__media--diagram { background: var(--bg-sunk); display: grid; place-items: center; }
.step__media--diagram img { object-fit: contain; height: auto; }
.step__head { display: flex; justify-content: space-between; align-items: baseline; margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line); }
.step__head h3 { font-size: var(--fs-h3); letter-spacing: -0.015em; }
.step__head .mono { color: var(--accent); }
.step p { margin-top: var(--s2); color: var(--muted); font-size: var(--fs-small); line-height: 1.5; max-width: 32ch; }

/* before / after */
.ba__text { grid-column: 1 / 5; display: flex; flex-direction: column; justify-content: space-between; }
.ba__text p { color: var(--muted); margin-top: var(--s4); max-width: 34ch; }
.ba__legend { display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s7); }
.ba__legend div { display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding-top: var(--s3); font-size: var(--fs-small); }
.ba__legend span:last-child { color: var(--muted); }
.ba { grid-column: 5 / 13; position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius); background: var(--bg-raise); user-select: none; touch-action: pan-y; --p: 50; }
.ba__layer { position: absolute; inset: 0; }
.ba__layer img { width: 100%; height: 100%; object-fit: cover; }
/* "after" is revealed with two opposing translates (transform only, no clip-path repaint) */
.ba__after { position: absolute; inset: 0; overflow: hidden; transform: translate3d(calc((var(--p) - 100) * 1%), 0, 0); }
.ba__after .ba__layer { transform: translate3d(calc((100 - var(--p)) * 1%), 0, 0); }
.ba__handle { position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: var(--text); transform: translate3d(calc(var(--p) * 1cqw), 0, 0); pointer-events: none; }
.ba { container-type: inline-size; }
.ba__knob { position: absolute; top: 50%; left: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
            background: rgba(20,20,20,0.78); border: 1px solid var(--line-strong); display: grid; place-items: center; color: var(--text); font-size: 13px; }
.ba__tag { position: absolute; top: var(--s4); padding: 3px 8px; background: rgba(20,20,20,0.78); border-radius: 2px; color: var(--text); pointer-events: none; }
.ba__tag--l { left: var(--s4); } .ba__tag--r { right: var(--s4); }
.ba input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }

/* video slot */
.video { grid-column: 1 / -1; position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius); background: var(--bg-raise); cursor: pointer; border: 0; padding: 0; color: inherit; font: inherit; text-align: left; }
.video img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out), opacity var(--t-med) linear; opacity: 0.78; }
.video:hover img { transform: scale(1.02); opacity: 0.9; }
.video__play { position: absolute; left: 50%; top: 50%; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%;
               border: 1px solid rgba(236,235,232,0.6); display: grid; place-items: center; background: rgba(20,20,20,0.35);
               transition: transform var(--t-med) var(--ease-out); }
.video:hover .video__play { transform: scale(1.06); }
.video__play svg { width: 22px; height: 22px; margin-left: 4px; fill: var(--text); }
.video__meta { position: absolute; left: var(--s5); right: var(--s5); bottom: var(--s5); display: flex; justify-content: space-between; align-items: end; }
.video__meta strong { font-size: var(--fs-h3); font-weight: 500; letter-spacing: -0.015em; display: block; }
.video__meta .mono { color: var(--muted); }
.video::after { content: ""; position: absolute; inset: 50% 0 0 0; background: linear-gradient(rgba(20,20,20,0), rgba(20,20,20,0.75)); pointer-events: none; }
.video__meta, .video__play { z-index: 1; }

/* explanation blocks */
.explain { grid-column: span 4; border-top: 1px solid var(--line-strong); padding-top: var(--s5); }
.explain .mono { color: var(--muted); }
.explain h3 { font-size: var(--fs-h3); letter-spacing: -0.015em; margin: var(--s4) 0 var(--s3); }
.explain p { color: var(--muted); font-size: var(--fs-small); max-width: 38ch; }

/* other scans / project grid */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--gutter); margin-top: var(--s6); }
.tile__media { aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius); background: var(--bg-raise); }
.tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
@media (hover: hover) { .tile:hover .tile__media img { transform: scale(1.03); } }
.tile__cap { display: flex; justify-content: space-between; padding-top: var(--s3); font-size: var(--fs-small); }
.tile__cap span:last-child { color: var(--muted); }

/* next category */
.next { display: grid; grid-template-columns: repeat(var(--cols), minmax(0,1fr)); column-gap: var(--gutter); align-items: center; padding-block: var(--s8); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.next__label { grid-column: 1 / 3; color: var(--muted); }
.next__name { grid-column: 3 / 10; font-size: var(--fs-h1); letter-spacing: -0.05em; line-height: 1; font-weight: 500; display: flex; gap: var(--s5); align-items: baseline; }
.next__name .arrow { font-size: 0.45em; color: var(--muted); transition: transform var(--t-med) var(--ease-out), color var(--t-fast) linear; }
.next:hover .next__name .arrow { transform: translateX(10px); color: var(--accent); }
.next__thumb { grid-column: 10 / 13; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius); }
.next__thumb img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- motion: reveal ---------- */
.js [data-reveal] { opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out); transition-delay: calc(var(--d, 0) * 50ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; transition-delay: 0ms !important; animation: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .card a:hover .card__media img, .project a:hover .project__media img, .tile:hover .tile__media img, .video:hover img { transform: none; }
}

/* ==========================================================================
   Responsive
   iPad (≤1024 or any touch device): 8 col, cards 2 columns
   ========================================================================== */
@media (max-width: 1024px), (hover: none) {
  :root { --cols: 8; --gutter: 20px; --margin: 32px; --section: var(--s9); }
  .hero { padding-top: 136px; }

  .cards, .projects { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s7) var(--gutter); }
  .hero__sub { grid-column: 1 / 8; }

  .about__label { grid-column: 1 / -1; margin-bottom: var(--s5); }
  .about__text { grid-column: 1 / 8; }
  .about__cols { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); row-gap: var(--s7); }

  .cat-head__title { grid-column: 1 / -1; }
  .cat-hero { aspect-ratio: 16 / 9; }
  .fact { grid-column: span 4; margin-bottom: var(--s6); }
  .process__intro { grid-column: 1 / 7; }
  .steps { grid-template-columns: repeat(2, minmax(0,1fr)); row-gap: var(--s7); }
  .step__media { aspect-ratio: 4 / 3; }
  .ba__text { grid-column: 1 / -1; margin-bottom: var(--s6); }
  .ba__legend { flex-direction: row; gap: var(--gutter); margin-top: var(--s5); }
  .ba__legend div { flex: 1; }
  .ba { grid-column: 1 / -1; }
  .explain { grid-column: 1 / -1; display: grid; grid-template-columns: 3fr 5fr; column-gap: var(--gutter); padding-block: var(--s5); }
  .explain h3 { margin-top: 0; }
  .explain .mono { grid-column: 1; grid-row: 1 / 3; }
  .explain h3, .explain p { grid-column: 2; }
  .tiles { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .next__label { grid-column: 1 / -1; margin-bottom: var(--s4); }
  .next__name { grid-column: 1 / 6; }
  .next__thumb { grid-column: 6 / 9; }
}

@media (max-width: 640px) {
  :root { --cols: 4; --gutter: 16px; --margin: 20px; --section: var(--s8); }
  .nav__name span { display: none; }
  .nav__links { gap: var(--s4); }
  .hero { padding-top: 112px; }
  .cards, .projects { grid-template-columns: 1fr; }
  .hero__sub { grid-column: 1 / -1; }
  .about__text, .cat-head__intro, .process__intro { grid-column: 1 / -1; }
  .about__cols { grid-template-columns: 1fr; }
  .fact { grid-column: 1 / -1; }
  .steps, .tiles { grid-template-columns: 1fr; }
  .explain { grid-template-columns: 1fr; }
  .explain .mono, .explain h3, .explain p { grid-column: 1; grid-row: auto; }
  .next__name, .next__thumb { grid-column: 1 / -1; }
  .next__thumb { margin-top: var(--s5); }
  .footer-bar { flex-direction: column; }
  .contact__mail { font-size: var(--fs-h2); }
}
@media (max-width: 640px) { .footer-bar nav { flex-wrap: wrap; row-gap: var(--s2); } }
@media (max-width: 420px) { .nav__inner { gap: var(--s3); } .nav__links { gap: var(--s3); } }
@media (max-width: 359px) { .nav__inner { gap: 10px; } .nav__links { gap: 10px; font-size: 0.8125rem; } }

/* ---------- second project grid for portrait images ---------- */
.projects--portrait { margin-top: var(--s8); }
.projects--portrait .project__media { aspect-ratio: 4 / 5; }

/* ---------- typographic panel where there are no images yet (Automation) ---------- */
.type-panel { display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; padding: var(--s5); border-radius: var(--radius); background-color: var(--bg-raise); background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 32px 32px; background-position: -1px -1px; border: 1px solid var(--line); }
.type-panel__k { font-size: var(--fs-h3); font-weight: 500; letter-spacing: -0.015em; color: var(--text); line-height: 1.2; }
.type-panel__l { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-top: var(--s2); }

/* ==========================================================================
   CV lightbox + contact links
   ========================================================================== */
.contact__links { display: flex; flex-wrap: wrap; gap: var(--s5); color: var(--muted); }
.contact__links a:hover { color: var(--text); }
html.cv-open, html.cv-open body { overflow: hidden; }
.cvbox { position: fixed; inset: 0; z-index: 100; display: flex; justify-content: center; align-items: stretch; padding: var(--s6) var(--s5); background: rgba(10, 10, 10, 0.86); opacity: 0; transition: opacity var(--t-fast) linear; }
.cvbox[hidden] { display: none; }
.cvbox.is-open { opacity: 1; }
.cvbox__panel { width: min(900px, 100%); display: flex; flex-direction: column; background: var(--bg-raise); border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; }
.cvbox__bar { display: flex; align-items: center; gap: var(--s5); padding: var(--s3) var(--s3) var(--s3) var(--s5); border-bottom: 1px solid var(--line); color: var(--muted); }
.cvbox__bar span { margin-right: auto; color: var(--text); }
.cvbox__bar a:hover { color: var(--text); }
.cvbox__close { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--text); background: transparent; border: 1px solid var(--line-strong); border-radius: var(--radius); padding: var(--s2) var(--s4); cursor: pointer; }
.cvbox__close:hover { border-color: var(--muted); }
.cvbox__pages { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; display: grid; gap: var(--s4); align-content: start; padding: var(--s5); }
.cvbox__pages:focus { outline: none; }
.cvbox__pages img { width: 100%; height: auto; border-radius: var(--radius); background: var(--text); }
@media (max-width: 640px) {
  .cvbox { padding: var(--s3); }
  .cvbox__pages { padding: var(--s3); gap: var(--s3); }
  .cvbox__bar { gap: var(--s4); padding-left: var(--s4); }
}