/* ============================================================
   Marco Greco — Portfolio IA
   Tema: chiaro istituzionale (superfici bianche/grigio-azzurro tenue,
   testo blu-notte, un solo colore di brand: blu "LinkedIn").
   Contrasti WCAG verificati numericamente (testo >= 4.5:1).
   ============================================================ */

:root {
  --bg: #ffffff;
  --bg-alt: #f3f6fa;
  --bg-card: #ffffff;
  --fg: #0f1b2d;
  --fg-dim: #4b5b70;
  --fg-faint: #5f6f85;
  --ink-rgb: 15, 27, 45;
  --line: rgba(15, 27, 45, 0.10);
  --line-strong: rgba(15, 27, 45, 0.20);
  --accent: #0a66c2;
  --accent-ink: #ffffff;

  --font-display: "Bricolage Grotesque", "Manrope", sans-serif;
  --font-body: "Manrope", -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --container: 1240px;
  --radius: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.05;
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
}

p { margin: 0 0 1em; color: var(--fg-dim); }
a { color: inherit; text-decoration: none; }

.kicker {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1em;
}

/* ---------- layout helpers ---------- */
section { position: relative; padding: 7rem 1.5rem; }
.section-head { max-width: 640px; margin: 0 auto 3.5rem; text-align: center; }
.section-sub { font-size: 1.05rem; }

/* ---------- header ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 2rem;
  background: linear-gradient(to bottom, rgba(255,255,255,.92), rgba(255,255,255,0));
  transition: background .3s, backdrop-filter .3s, padding .3s;
}
.site-header.scrolled {
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  padding: .85rem 2rem;
}
.logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
}
.main-nav { display: flex; align-items: center; gap: 2rem; }
.main-nav a {
  font-size: .92rem;
  color: var(--fg-dim);
  transition: color .2s;
}
.main-nav a:hover { color: var(--fg); }
.nav-cv {
  border: 1px solid var(--line-strong);
  padding: .5rem 1rem;
  border-radius: 999px;
  color: var(--fg) !important;
}
.nav-cv:hover { border-color: var(--accent); color: var(--accent) !important; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px; height: 36px;
  background: none; border: none; cursor: pointer;
}
.nav-toggle span {
  display: block; height: 2px; background: var(--fg); border-radius: 2px;
  transition: transform .25s, opacity .25s;
}

/* ---------- hero ---------- */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8rem 1.5rem 4rem;
  overflow: hidden;
  /* wash ambientale statico (CSS puro, zero costo JS/GPU) dietro alla scena 3D */
  background:
    radial-gradient(ellipse 60% 50% at 28% 22%, rgba(10,102,194,0.08), transparent 60%),
    radial-gradient(ellipse 55% 45% at 76% 78%, rgba(10,102,194,0.05), transparent 60%),
    linear-gradient(to bottom, #ffffff, var(--bg-alt));
}
.hero-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.hero-inner { position: relative; z-index: 2; max-width: 1000px; }
.hero .kicker { text-align: center; }
.hero-title {
  font-size: clamp(2.2rem, 4.9vw, 4.1rem);
  line-height: 1.08;
  margin-bottom: .55em;
}
.hero-accent { color: var(--accent); }
.hero-sub {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  max-width: 600px;
  margin: 0 auto 2.2rem;
}
.hero-cta-row { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

.btn {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .95rem;
  padding: .9rem 1.8rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .2s, background .2s, border-color .2s, color .2s;
  display: inline-block;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: #0857a8; }
.btn-ghost { border-color: var(--line-strong); color: var(--fg); background: transparent; }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

.scroll-cue {
  position: absolute; bottom: 2.2rem; left: 50%; transform: translateX(-50%);
  width: 26px; height: 42px; border: 2px solid var(--line-strong); border-radius: 999px;
  display: flex; justify-content: center; padding-top: 8px;
  z-index: 2;
}
.scroll-cue span {
  width: 4px; height: 8px; border-radius: 2px; background: var(--accent);
  animation: cue-bounce 1.6s ease-in-out infinite;
}
@keyframes cue-bounce {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(10px); opacity: .3; }
}

/* reveal-on-scroll: ora gestito da GSAP/ScrollTrigger in main.js (gsap.from imposta lo stato
   di partenza via JS) — niente CSS qui, così senza JS il contenuto resta comunque visibile. */

/* ---------- portfolio ---------- */
.portfolio { background: var(--bg-alt); }
.portfolio-grid {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.5rem;
}
.portfolio-more {
  max-width: var(--container);
  margin: 4.5rem auto 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--fg-dim);
}
/* a riposo le card erano quasi indistinguibili tra loro e dallo sfondo sezione
   (--bg-alt): bordo/ombra troppo deboli, bianco su quasi-bianco. Prima soluzione (wash
   diagonale del --card-accent su tutta la card) scartata: su Fitness, che ha già un suo
   radial-gradient nel .card-visual, i due si sommavano in una macchia sporca. Una barra
   superiore piatta nel colore della card funziona su qualunque accent (tinta solida, non
   una sfumatura che si somma ad altre) e si vede identica a riposo e in hover. */
.project-card {
  background: var(--bg-card);
  border: 1px solid rgba(var(--ink-rgb), .14);
  border-top: 3px solid var(--card-accent, var(--accent));
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .3s, transform .3s, box-shadow .3s;
  color: var(--card-accent, var(--accent));
  box-shadow: 0 1px 2px rgba(var(--ink-rgb), .05), 0 10px 28px -14px rgba(var(--ink-rgb), .16);
}
.project-card:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: 0 2px 4px rgba(var(--ink-rgb), .05), 0 18px 36px -14px rgba(var(--ink-rgb), .18); }

.card-presenthunter { grid-column: span 6; }
.card-tattoo         { grid-column: span 6; }
.card-esp            { grid-column: span 6; }
.card-personal       { grid-column: span 3; }
.card-fitness        { grid-column: span 3; }

.card-visual {
  position: relative;
  height: 200px;
  padding: 18px;
  background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--card-accent, var(--accent)) 14%, transparent), transparent 62%);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.card-canvas { width: 100%; height: 100%; display: block; }

.card-body { padding: 1.6rem 1.8rem 1.9rem; flex: 1; display: flex; flex-direction: column; }
.card-tag {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--card-accent-text, var(--accent));
  margin-bottom: .6em;
}
.project-card h3 { color: var(--fg); font-size: 1.4rem; margin-bottom: .4em; }
.project-card p { font-size: .95rem; }
.card-link {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: .85rem;
  color: var(--card-accent-text, var(--accent));
  border-bottom: 1px solid currentColor;
  align-self: flex-start;
  padding-bottom: 1px;
}

/* accent per card: --card-accent vivace per riempimenti/decorazioni, --card-accent-text
   scurito per il testo (su bianco gli accenti vivaci non passano 4.5:1: arancio 2.9,
   ciano 1.7...). PresentHunter usa i colori reali del brand (presi dal sito live). */
.card-presenthunter { --card-accent: #ff6a00; --card-accent-text: #c2410c; --card-accent-2: #1e8a5a; }
.card-tattoo         { --card-accent: #8b5cf6; --card-accent-text: #6d28d9; }
.card-esp            { --card-accent: #0ea5c6; --card-accent-text: #0e7490; }
.card-personal       { --card-accent: #d99a1e; --card-accent-text: #a16207; }
.card-fitness        { --card-accent: #e11d48; --card-accent-text: #be123c; }

/* personal — vista "settimana" stile Google Calendar: deve leggersi come un vero
   calendario (sfondo bianco piatto, griglia sottile), non come illustrazione astratta —
   per questo niente radial-gradient qui, a differenza delle altre card. Più alta delle
   altre per fare stare header giorni + righe ora senza strizzare il testo. */
.card-personal .card-visual { height: 272px; background: #fff; }

/* fitness — solo il lato nutrizione (tre archi macro che crescono fino al loro
   equilibrio), astratto di proposito — niente mockup UI qui, a differenza delle altre
   card: la variazione di registro rompe la monotonia. Affiancata a .card-personal
   (entrambe span 3, stesso rigo) sopra gli 860px — stessa altezza del visual, altrimenti
   lo stacco fra le due è lo stesso anche se l'altezza totale della card combacia (lo
   stretch del grid pareggia il totale, non la riga di confine visual/corpo). */
.card-fitness .card-visual { height: 272px; }

/* il padding vive sulla regola base .card-visual (sopra), qui serve solo arrotondare
   l'angolo del canvas — altrimenti il bianco/i ring restano con spigoli vivi dentro
   l'inset. *{box-sizing:border-box} più in alto mantiene l'altezza totale invariata
   quando si aggiunge padding: entra nello spazio esistente, non si somma. */
.card-personal .card-canvas,
.card-fitness .card-canvas { border-radius: 8px; }

/* PresentHunter — card in evidenza: registrazione del flusso REALE del sito
   (form -> attesa a 4 step -> risultati), girata in locale con Playwright su dati di esempio. */
.card-presenthunter { flex-direction: row; }
.card-presenthunter .ph-visual {
  flex: 0 0 58%; height: auto; border-bottom: 0; border-right: 1px solid var(--line);
  background: #F3F8F6;
}
.ph-video { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 880 / 600; border-radius: 8px; }
/* tasto schermo intero: il video è la registrazione di un sito a risoluzione desktop,
   il testo dentro è piccolo — utile soprattutto su mobile dove la card occupa poco
   spazio reale, ma lasciato visibile ovunque (coerente, non uno switch nascosto). */
.ph-expand {
  position: absolute; bottom: 12px; right: 12px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; border: none;
  background: rgba(15, 27, 45, .55); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.ph-expand:hover { background: rgba(15, 27, 45, .8); }
.ph-expand svg { width: 16px; height: 16px; }
.project-card .ph-note { margin-top: auto; padding-top: 1rem; font: 500 .74rem var(--font-mono); color: var(--fg-faint); }
.ph-note + .card-link { margin-top: .4rem; }
.card-presenthunter .card-body { justify-content: center; padding: 2.4rem 2.6rem; }
.card-presenthunter h3 { font-size: 1.9rem; }
.card-presenthunter .card-body > p:not(.card-tag):not(.ph-note) { font-size: 1rem; }

/* tattoo — due colonne come PresentHunter ma speculare (testo a sinistra, visual a
   destra): alternando la card larga precedente si rompe la monotonia e si dà ritmo
   allo scroll. Visual: screenshot WhatsApp (prezzo + proposta appuntamento) e
   screenshot Google Calendar dell'evento creato, con la freccia sovrapposta sopra
   entrambe le immagini (position:absolute + z-index), non semplicemente in mezzo. */
.card-tattoo { flex-direction: row; }
.card-tattoo .card-body { justify-content: center; padding: 2.2rem 2rem; }
.card-tattoo h3 { font-size: 1.7rem; }
.card-tattoo .card-visual {
  flex: 0 0 58%;
  height: auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1.75rem;
  border-bottom: 0;
  border-left: 1px solid var(--line);
  background: var(--bg-alt);
}
.tattoo-shot {
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  box-shadow: 0 14px 32px -16px rgba(var(--ink-rgb), .3);
  flex-shrink: 0;
  min-width: 0;
  position: relative;
}
.tattoo-shot-chat { width: 42%; max-width: 290px; margin-right: -22px; }
/* il calendario è avvolto in .tattoo-cal-wrap insieme all'etichetta "Google Calendar":
   serve perché senza wordmark nello screenshot ritagliato (l'ho tolto insieme al resto
   del chrome) non si capiva più di cosa fosse lo screenshot. Le dimensioni che prima
   stavano sull'immagine ora stanno sul contenitore, l'immagine dentro è width:100%. */
.tattoo-cal-wrap {
  width: 58%; max-width: 430px; margin-left: -22px; flex-shrink: 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
}
.tattoo-shot-cal { width: 100%; max-width: none; margin: 0; }
.tattoo-cal-badge {
  align-self: flex-end; /* spostata a destra: a sinistra l'icona finiva sotto lo screenshot WhatsApp */
  display: inline-flex; align-items: center; gap: .6rem;
  font: 700 1.4rem var(--font-display); color: var(--fg-dim); letter-spacing: -0.01em;
}
.tattoo-cal-badge svg { width: 56px; height: 56px; flex-shrink: 0; }
/* freccia creativa: coda e punta calcolate in JS dalle posizioni reali delle due
   immagini (assets/js/animations/tattoo.js) — punta sempre sull'evento in calendario,
   parte sempre dalla bolla giusta in chat, a ogni larghezza. Larghezza/altezza dell'SVG
   impostate via JS (match 1:1 col contenitore); qui solo posizionamento e stile del
   tratto. Gradiente WhatsApp -> Calendar, trattini che scorrono (moto "di segnale"),
   ferma sotto reduced-motion (regola generale già in fondo al file). */
.tattoo-arrow {
  position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: visible;
  filter: drop-shadow(0 3px 6px rgba(var(--ink-rgb), .25));
}
.tattoo-arrow-path { animation: tattoo-flow 1s linear infinite; }
@keyframes tattoo-flow { to { stroke-dashoffset: -24; } }

/* ESP — due colonne come PresentHunter (visual a sinistra, testo a destra: riprende
   l'alternanza dopo Tattoo). Visual: video generato (image-to-video, non screenshot —
   l'ambito resta volutamente non dichiarato) in loop. Niente overlay di onde sonore:
   tentate e tolte — sincronizzazione percepita come sfalsata e troppo a ridosso del
   soggetto/disco, il video pulito da solo comunica meglio la scena. */
.card-esp { flex-direction: row; }
.card-esp .card-body { justify-content: center; padding: 2.2rem 2rem; }
.card-esp h3 { font-size: 1.7rem; }
.esp-visual {
  flex: 0 0 58%; height: auto; position: relative; overflow: hidden;
  border-bottom: 0; border-right: 1px solid var(--line);
  background: #F3F6FA;
}
.esp-video { display: block; width: 100%; height: auto; aspect-ratio: 832 / 480; object-fit: cover; border-radius: 8px; }

/* personal-assistant: ora tutto a canvas (assets/js/animations/personal-assistant.js),
   serve precisione di posizionamento (task che volano nella colonna del giorno giusto)
   che il CSS puro non dava comodamente. */

/* ---------- about ---------- */
.about-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 4rem;
  align-items: start;
}
.about-text h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.about-side { display: grid; gap: 2.2rem; }
.about-photo {
  width: 168px; height: 168px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 6px rgba(76,141,255,0.10), 0 20px 40px -20px rgba(76,141,255,0.35);
}
.about-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; }
.about-facts li {
  border-top: 1px solid var(--line);
  padding-top: 1rem;
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
}
.about-facts strong { font-family: var(--font-display); font-size: 1.6rem; color: var(--accent); white-space: nowrap; }
.about-facts span { color: var(--fg-dim); font-size: .9rem; text-align: right; }
/* le 2 certificazioni sono verificabili (immagine dell'attestato / pagina di verifica
   Adobe live) — diventano link invece di semplice testo, con una freccia che segnala
   "si apre/si verifica altrove" senza bisogno di spiegarlo. */
.about-facts a.fact-link {
  color: var(--fg-dim); font-size: .9rem; text-align: right; text-decoration: none;
  border-bottom: 1px solid transparent; transition: color .2s, border-color .2s;
}
.about-facts a.fact-link:hover { color: var(--accent); border-color: currentColor; }
.about-facts .fact-arrow { font-size: .8em; opacity: .55; }

/* ---------- contact ---------- */
.contact { background: var(--bg-alt); }
.contact-inner {
  max-width: 900px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start;
}
.contact h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.contact-form { display: grid; gap: 1.1rem; }
.field { display: grid; gap: .4rem; }
.field label { font-family: var(--font-mono); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-dim); }
.field input, .field textarea {
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: .8rem .9rem;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: .95rem;
  resize: vertical;
}
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--accent);
}
.field-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { min-height: 1.4em; font-size: .88rem; font-family: var(--font-mono); }
.form-status[data-state="ok"] { color: var(--accent); }
.form-status[data-state="err"] { color: #b42318; }

/* ---------- footer ---------- */
.site-footer { padding: 3.5rem 1.5rem 2.5rem; border-top: 1px solid var(--line); }
.footer-inner {
  max-width: var(--container); margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem;
}
.footer-inner p { margin: 0; color: var(--fg-dim); font-size: .9rem; }
.footer-links { display: flex; align-items: center; gap: 1.4rem; }
.footer-links a { font-size: .88rem; color: var(--fg-dim); }
.footer-links a:hover { color: var(--accent); }
.footer-icon-link { display: flex; }
.footer-icon-link svg { width: 20px; height: 20px; fill: currentColor; }
.footer-copy { width: 100%; text-align: center; margin-top: 1rem !important; font-size: .8rem !important; color: var(--fg-dim) !important; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .card-presenthunter, .card-tattoo, .card-esp { flex-direction: column; }
  .card-presenthunter .ph-visual,
  .card-tattoo .card-visual,
  .esp-visual { flex: none; border-right: 0; border-left: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 640px) {
  /* a tutta larghezza: impilate e con margini stretti, gli screenshot leggono molto
     meglio del 76% che restava prima su schermi piccoli — qui lo spazio è poco e
     serve tutto. */
  .card-tattoo .card-visual { flex-direction: column; gap: 1.4rem; padding: 1rem .9rem; }
  .tattoo-shot-chat, .tattoo-cal-wrap { width: 100%; max-width: none; margin: 0; }
  /* niente override per la freccia: assets/js/animations/tattoo.js ricalcola coda/punta
     dalle posizioni reali (ResizeObserver), corretta da sola anche impilata in colonna. */

  /* PresentHunter: è la registrazione di un sito a risoluzione desktop, il testo
     all'interno è già piccolo di suo — tolto il padding si guadagna qualche pixel
     reale in più, il resto lo fa il tasto schermo intero qui sotto. */
  .card-presenthunter .ph-visual { padding: 0; }
  .ph-video { border-radius: 0; }
}
@media (max-width: 860px) {
  .main-nav { display: none; }
  .nav-toggle { display: flex; }
  .portfolio-grid { grid-template-columns: 1fr; }
  .card-presenthunter, .card-tattoo, .card-esp, .card-personal, .card-fitness {
    grid-column: 1; grid-row: auto;
  }
  .card-presenthunter .card-body { padding: 1.6rem 1.8rem 1.9rem; }
  .card-presenthunter h3 { font-size: 1.5rem; }
  .about-inner, .contact-inner { grid-template-columns: 1fr; }
  section { padding: 5rem 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 860px) {
  .main-nav.open {
    display: flex;
    position: fixed;
    top: 68px; left: 0; right: 0;
    flex-direction: column;
    background: var(--bg-alt);
    padding: 1.5rem 2rem 2rem;
    border-bottom: 1px solid var(--line);
    gap: 1.2rem;
  }
}

/* certificato — modale nativa <dialog>: niente libreria, showModal() dà già focus trap
   e tasto ESC gratis. Click sul backdrop per chiudere gestito in main.js (click sul
   <dialog> stesso, fuori da .cert-modal-close/img, equivale a click sul backdrop). */
.cert-modal {
  border: none; border-radius: 14px; padding: 0; max-width: min(640px, 92vw); max-height: 88vh;
  background: var(--bg-card); box-shadow: 0 24px 60px -20px rgba(var(--ink-rgb), .4);
}
.cert-modal::backdrop { background: rgba(var(--ink-rgb), .55); backdrop-filter: blur(2px); }
.cert-modal img { display: block; width: 100%; height: auto; max-height: 88vh; object-fit: contain; border-radius: 14px; }
.cert-modal-close {
  position: absolute; top: 10px; right: 10px; z-index: 1;
  width: 32px; height: 32px; border-radius: 50%; border: none;
  background: rgba(var(--ink-rgb), .55); color: #fff; font-size: .85rem; line-height: 1;
  cursor: pointer; transition: background .2s;
}
.cert-modal-close:hover { background: rgba(var(--ink-rgb), .8); }
@starting-style { .cert-modal[open] { opacity: 0; transform: scale(.96); } }
.cert-modal[open] { opacity: 1; transform: scale(1); transition: opacity .2s, transform .2s, overlay .2s allow-discrete, display .2s allow-discrete; }
.cert-modal { opacity: 0; transform: scale(.96); }