/* Before / after cover page. Reuses the tokens of app.css. */
:root { --avant: #f3706c; --apres: #38da96; }
.cover .top-in { gap: var(--space-s); }
.cv-tag { font-size: 13px; color: var(--muted); border-left: 1px solid var(--line); padding-left: var(--space-s); }
.cv-lang { margin-left: auto; }
.cv-lang a { text-decoration: none; font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 999px; color: var(--muted); }
.cv-lang a[aria-current] { background: var(--surface-2); color: var(--ink); }
.cv-top-cta { min-height: 40px; padding: 8px 14px; font-size: 14px; }
@media (max-width: 560px) { .cv-tag, .cv-top-cta { display: none; } }

.cv-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line-soft); }
.cv-hero-img { position: absolute; inset: 0; background: url(assets/brussel.webp) center 40% / cover no-repeat; opacity: .3; }
.cv-hero-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg) 25%, rgba(16, 18, 20, .5) 70%, rgba(16, 18, 20, .25)), linear-gradient(0deg, var(--bg), transparent 55%); }
.cv-hero-in { position: relative; padding-block: var(--space-xl) var(--space-l); }
.cv-kicker { margin: 0 0 var(--space-xs); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.cv-hero h1 { margin: 0; max-width: 18ch; font: 700 var(--step-4)/.98 var(--f-cond); letter-spacing: -.01em; }
.cv-lead { margin: var(--space-s) 0 0; max-width: 62ch; font-size: var(--step-1); line-height: 1.5; color: var(--ink-2); }
.cv-actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-m); }

.cv-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-block: var(--space-l); padding: 0; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--r-l); overflow: hidden; }
.cv-stat { background: var(--bg-2); padding: var(--space-m) var(--space-s); }
.cv-stat p { margin: 0; font-size: 14px; color: var(--ink-2); }
.cv-stat .cv-n { font: 700 var(--step-3)/1 var(--f-cond); color: var(--ink); margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.cv-n s { color: var(--avant); text-decoration-thickness: 2px; font-size: .6em; margin-right: 6px; vertical-align: .2em; }
@media (max-width: 900px) { .cv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.cv-case { padding-block: var(--space-xl) 0; }
.cv-h { display: flex; align-items: baseline; gap: var(--space-s); border-top: 1px solid var(--line); padding-top: var(--space-s); }
.cv-num { font: 700 var(--step-2)/1 var(--f-cond); color: var(--accent); font-variant-numeric: tabular-nums; }
.cv-h h2 { margin: 0; font: 700 var(--step-3)/1.05 var(--f-cond); }
.cv-txt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-l); margin: var(--space-m) 0; }
.cv-txt h3 { margin: 0 0 6px; font: 700 13px/1 var(--f-text); text-transform: uppercase; letter-spacing: .12em; }
.cv-txt p { margin: 0; max-width: 60ch; color: var(--ink-2); }
.cv-txt i { font-style: normal; font-family: ui-monospace, Menlo, monospace; font-size: .9em; color: var(--ink); background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }
.t-avant { color: var(--avant); }
.t-apres { color: var(--apres); }
@media (max-width: 760px) { .cv-txt { grid-template-columns: minmax(0, 1fr); gap: var(--space-s); } }

.cv-pair { display: grid; gap: var(--space-m); align-items: start; }
.cv-pair.wide { grid-template-columns: minmax(0, 1fr); max-width: 1040px; gap: var(--space-l); }
.cv-pair.phone { grid-template-columns: repeat(2, minmax(0, 340px)); justify-content: start; gap: var(--space-l); }
.cv-pair figure { margin: 0; }
.cv-pair figcaption { font-size: 12px; font-weight: 700; letter-spacing: .04em; margin-bottom: 8px; }
.cv-pair figcaption::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; margin-right: 7px; vertical-align: 1px; }
.cv-pair img { width: 100%; height: auto; border-radius: var(--r-m); border: 1px solid var(--line); background: var(--surface); }
.cv-pair figure:first-child img { border-color: rgba(243, 112, 108, .5); }
.cv-pair figure:last-child img { border-color: rgba(56, 218, 150, .55); }
.cv-pair.phone img { border-radius: 22px; border-width: 6px; border-color: #2b2f32 !important; }
.cv-pair.phone figure:first-child img { box-shadow: 0 0 0 1px rgba(243, 112, 108, .5); }
.cv-pair.phone figure:last-child img { box-shadow: 0 0 0 1px rgba(56, 218, 150, .55); }
@media (max-width: 560px) { .cv-pair.phone { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); } .cv-pair.phone img { border-width: 3px; border-radius: 12px; } }

.cv-end { margin-block: var(--space-xl); padding: var(--space-l) var(--gutter); border: 1px solid var(--line); border-radius: var(--r-l); background: radial-gradient(90% 120% at 0% 0%, rgba(117, 212, 250, .12), transparent 60%), var(--bg-2); }
.cv-end h2 { margin: 0 0 8px; font: 700 var(--step-3)/1 var(--f-cond); }
.cv-end p { margin: 0 0 var(--space-m); max-width: 60ch; color: var(--ink-2); }

/* Links to KERN-IT, the studio behind the prototype. */
.kern-link { color: var(--accent); text-decoration: none; font-weight: 700; }
.kern-link:hover { text-decoration: underline; }