/* ═══════════════════════════════════════════════════════════
   ROBIN TIMMERMANS — portfolio
   Rood en wit. Video draagt het beeld, typografie draagt de rest.
   Compositie naar het model van JUNE: full-bleed hero met de naam
   linksonder, rood introvlak, tweekolomsraster met hoeklabels.
   ═══════════════════════════════════════════════════════════ */

:root{
  --brand-red: #C9232C;
  --red-dark:  #A61A22;
  --red-deep:  #7E1219;
  --white:     #FFFFFF;
  --paper:     #FAF9F6;
  --paper-2:   #F1EFEA;
  --text:      #202020;
  --text-mid:  #55585C;
  --text-dim:  #8A8D92;
  --line:      #E3E0DA;
  --ink:       #121212;

  --display: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sans:    "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-hero:   clamp(2.75rem, 7.4vw, 6.5rem);
  --fs-h1:     clamp(2.125rem, 5.2vw, 4.25rem);
  --fs-h2:     clamp(1.75rem, 3.8vw, 3rem);
  --fs-h3:     clamp(1.125rem, 1.8vw, 1.5rem);
  --fs-lead:   clamp(1.0625rem, 1.25vw, 1.1875rem);
  --fs-body:   1rem;
  --fs-small:  0.9375rem;
  --fs-label:  0.75rem;

  --pad-x: clamp(1.25rem, 2.8vw, 2.5rem);   /* ~40px op 1440 */
  --gap:   clamp(1rem, 1.4vw, 1.5rem);       /* ~20px op 1440 */
  --sec-y: clamp(3.5rem, 7vw, 6.5rem);       /* ~100px op 1440 */
  --max:   1600px;
  --ease:  cubic-bezier(.22,.61,.36,1);
}

/* ── RESET ───────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--paper); }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--paper); color:var(--text);
  font-family:var(--sans); font-size:var(--fs-body); line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,video,svg{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4,p,figure,dl,dd,blockquote{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--brand-red); color:var(--white); }
:focus-visible{ outline:3px solid var(--brand-red); outline-offset:3px; }
.on-dark :focus-visible,.hero :focus-visible{ outline-color:var(--white); }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:fixed; top:-120px; left:1rem; z-index:400;
  background:var(--brand-red); color:var(--white);
  padding:.85rem 1.4rem; font-size:var(--fs-small); font-weight:600;
  transition:top .18s var(--ease);
}
.skip:focus{ top:1rem; }

/* ── TYPOGRAFIE ──────────────────────────────────────────── */
.display,.h1,.h2{
  font-family:var(--display);
  font-variation-settings:"wdth" 105,"wght" 800;
  text-transform:uppercase;
  line-height:.92; letter-spacing:-.012em;
}
.display{ font-size:var(--fs-hero); line-height:.88; }
.h1{ font-size:var(--fs-h1); }
.h2{ font-size:var(--fs-h2); }
.h3{
  font-family:var(--display);
  font-variation-settings:"wdth" 100,"wght" 700;
  font-size:var(--fs-h3); line-height:1.2; letter-spacing:-.01em;
  text-transform:none;
}
.label{
  font-family:var(--sans); font-size:var(--fs-label); font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; line-height:1.4;
}
.lead{ font-size:var(--fs-lead); line-height:1.55; }
.prose{ max-width:60ch; }
.prose p{ margin-bottom:1.1em; }
.prose p:last-child{ margin-bottom:0; }
.prose strong{ font-weight:600; }
.prose h2{
  font-family:var(--display); font-variation-settings:"wdth" 100,"wght" 700;
  font-size:1.25rem; text-transform:none; letter-spacing:-.01em;
  margin:2em 0 .6em; line-height:1.25;
}
.prose h2:first-child{ margin-top:0; }

.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--pad-x); }
.section{ padding-block:var(--sec-y); }

/* ── KNOPPEN ─────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.85rem 1.5rem; border-radius:99px;
  font-size:var(--fs-label); font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; line-height:1;
  border:1px solid var(--brand-red); background:var(--brand-red); color:var(--white);
  transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.btn:hover{ background:var(--red-dark); border-color:var(--red-dark); }
.btn--ghost{ background:transparent; color:var(--text); border-color:var(--line); }
.btn--ghost:hover{ background:var(--text); border-color:var(--text); color:var(--white); }
.btn--on-red{ background:var(--white); border-color:var(--white); color:var(--brand-red); }
.btn--on-red:hover{ background:var(--paper); border-color:var(--paper); }
.btn--glass{
  background:rgba(18,18,18,.42); border-color:rgba(255,255,255,.55); color:var(--white);
  backdrop-filter:blur(10px);
}
.btn--glass:hover{ background:var(--brand-red); border-color:var(--brand-red); }

/* ══════════════════════════════════════════════════════════
   HEADER — absoluut over de hero, leesbaar daarbuiten
   ══════════════════════════════════════════════════════════ */
.head{
  position:absolute; top:0; left:0; right:0; z-index:60;
  padding:clamp(1.25rem,2vw,2rem) var(--pad-x);
}
.head--solid{
  position:sticky; background:var(--paper);
  border-bottom:1px solid var(--line);
  padding-block:clamp(.9rem,1.4vw,1.15rem);
}
.head__in{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.head__mark{
  font-family:var(--display); font-variation-settings:"wdth" 105,"wght" 800;
  text-transform:uppercase; font-size:.9375rem; letter-spacing:.01em;
  color:var(--white);
}
.head--solid .head__mark{ color:var(--text); }
.nav{ display:flex; align-items:center; gap:clamp(1.25rem,2.4vw,2.25rem); }
.nav a{
  font-size:var(--fs-label); font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--white); opacity:.88;
  transition:opacity .2s var(--ease), color .2s var(--ease);
}
.nav a:hover,.nav a[aria-current="page"]{ opacity:1; }
.head--solid .nav a{ color:var(--text); opacity:.72; }
.head--solid .nav a:hover,.head--solid .nav a[aria-current="page"]{ opacity:1; color:var(--brand-red); }

/* ══════════════════════════════════════════════════════════
   HERO — één videovlak, alles eroverheen
   ══════════════════════════════════════════════════════════ */
.hero{
  position:relative; width:100%;
  height:100svh; min-height:520px;
  overflow:hidden; background:var(--ink);
  display:flex; align-items:flex-end;
}
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media img,.hero__media video{
  width:100%; height:100%;
  object-fit:cover; object-position:center 45%;
}
.hero__media video{ position:absolute; inset:0; }
.hero.is-playing .hero__poster{ opacity:0; transition:opacity .5s var(--ease); }

/* contrastlaag: alleen waar tekst staat, beeld blijft beeld */
.hero__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to top, rgba(10,10,10,.72) 0%, rgba(10,10,10,.28) 26%, rgba(10,10,10,0) 52%),
    linear-gradient(to bottom, rgba(10,10,10,.42) 0%, rgba(10,10,10,0) 24%);
}

.hero__inner{
  position:relative; z-index:2; width:100%;
  max-width:var(--max); margin-inline:auto;
  padding:0 var(--pad-x) clamp(2rem,3.4vw,3.5rem);
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:2rem; flex-wrap:wrap;
}
.hero__title{
  font-family:var(--display);
  font-variation-settings:"wdth" 105,"wght" 800;
  text-transform:uppercase; color:var(--white);
  font-size:var(--fs-hero); line-height:.86; letter-spacing:-.018em;
  margin-bottom:.45rem;
}
.hero__title span{ display:block; }
.hero__role{
  font-family:var(--sans); font-size:var(--fs-label); font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--white); opacity:.92;
}
.hero__cta{ flex:none; padding-bottom:.35rem; }

.hero__play{
  position:absolute; inset:0; z-index:3; display:grid; place-items:center;
  background:rgba(10,10,10,.22); color:var(--white);
}
.hero__play[hidden]{ display:none; }
.hero__play i{
  display:grid; place-items:center; width:74px; height:74px; border-radius:50%;
  border:1px solid rgba(255,255,255,.7); background:rgba(18,18,18,.35);
  backdrop-filter:blur(8px);
}
.hero__play svg{ width:22px; height:22px; fill:currentColor; margin-left:3px; }

@media (max-width:820px){
  .hero{ height:100svh; }
  .hero__media img,.hero__media video{ object-position:center 38%; }
  .hero__inner{
    padding:0 var(--pad-x) max(1.5rem, env(safe-area-inset-bottom));
    flex-direction:column; align-items:flex-start; gap:1.25rem;
  }
  .hero__cta{ padding-bottom:0; }
}

/* ══════════════════════════════════════════════════════════
   INTRO — rood vlak, twee kolommen
   ══════════════════════════════════════════════════════════ */
.intro{ background:var(--brand-red); color:var(--white); }
.intro__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,4rem); align-items:start;
  padding-block:clamp(3.5rem,6vw,7rem);
}
.intro__grid h2{ color:var(--white); }
.intro__body{ display:grid; gap:1.25rem; justify-items:start; }
.intro__body p{ max-width:46ch; font-size:var(--fs-lead); line-height:1.55; }
.link-arrow{
  font-family:var(--sans); font-size:var(--fs-label); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--white);
  border-bottom:2px solid rgba(255,255,255,.45); padding-bottom:.3rem;
  transition:border-color .2s var(--ease);
}
.link-arrow:hover{ border-color:var(--white); }
@media (max-width:820px){ .intro__grid{ grid-template-columns:1fr; gap:1.5rem; } }

/* ══════════════════════════════════════════════════════════
   WERK — tweekolomsraster met hoeklabels
   ══════════════════════════════════════════════════════════ */
.work{ background:var(--paper); }
.work__head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:1.5rem; flex-wrap:wrap; margin-bottom:clamp(1.5rem,2.4vw,2.25rem);
}
.work__head h2{ color:var(--text); }
.work__head p{ color:var(--text-mid); font-size:var(--fs-small); }

.grid2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--gap); }
@media (max-width:760px){ .grid2{ grid-template-columns:1fr; } }

.tile{
  position:relative; display:block; overflow:hidden;
  aspect-ratio:3/2; border-radius:4px; background:var(--ink);
}
.tile img,.tile video{
  width:100%; height:100%; object-fit:cover;
  transition:transform .55s var(--ease);
}
.tile:hover img,.tile:hover video,.tile:focus-visible img{ transform:scale(1.035); }
@media (prefers-reduced-motion:reduce){ .tile:hover img,.tile:hover video{ transform:none; } }
.tile::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(10,10,10,.62) 0%, rgba(10,10,10,.12) 34%, rgba(10,10,10,0) 58%);
}
.tile__labels{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:clamp(.75rem,1.6vw,1.75rem); padding:clamp(.9rem,1.4vw,1.35rem);
  color:var(--white);
}
.tile__client{
  font-family:var(--display); font-variation-settings:"wdth" 100,"wght" 700;
  text-transform:uppercase; font-size:clamp(.8125rem,1.05vw,1.0625rem);
  letter-spacing:.02em; line-height:1.15;
  flex:1 1 auto; min-width:0;
}
.tile__role{
  font-size:var(--fs-label); font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; opacity:.85; text-align:right; line-height:1.35;
  flex:0 1 auto; min-width:0;
}
/* onder 420px is er geen ruimte voor twee labels naast elkaar */
@media (max-width:420px){
  .tile__labels{ flex-direction:column; align-items:flex-start; gap:.25rem; }
  .tile__role{ text-align:left; }
}

/* Voor 101Barz bestaat geen publiceerbaar beeld, alleen analytics.
   Die tonen we volledig op een donker vlak in plaats van bijgesneden. */
.tile--doc{ background:#141416; display:grid; place-items:center; padding:clamp(.75rem,1.6vw,1.5rem) clamp(.75rem,1.6vw,1.5rem) 3.25rem; }
.tile--doc img{ width:auto; height:100%; object-fit:contain; }
.tile--doc:hover img{ transform:none; }
.tile--doc::after{ background:linear-gradient(to top, rgba(10,10,10,.92) 0%, rgba(10,10,10,.5) 16%, rgba(10,10,10,0) 34%); }
.work__more{ margin-top:clamp(1.5rem,2.4vw,2.25rem); }

/* ══════════════════════════════════════════════════════════
   CONTACTAFSLUITING — rood
   ══════════════════════════════════════════════════════════ */
.outro{ background:var(--brand-red); color:var(--white); }
.outro__in{ padding-block:clamp(3.5rem,6vw,7rem); display:grid; gap:1.5rem; justify-items:start; }
.outro h2{ color:var(--white); }
.outro__mail{
  font-family:var(--display); font-variation-settings:"wdth" 100,"wght" 700;
  font-size:clamp(1.25rem,2.6vw,2.125rem); letter-spacing:-.01em; color:var(--white);
  border-bottom:2px solid rgba(255,255,255,.45); padding-bottom:.12em; word-break:break-word;
  transition:border-color .2s var(--ease);
}
.outro__mail:hover{ border-color:var(--white); }
.outro__row{ display:flex; flex-wrap:wrap; gap:.6rem; }

.foot{ background:var(--brand-red); color:var(--white); padding-block:1.75rem; border-top:1px solid rgba(255,255,255,.22); }
.foot__in{ display:flex; flex-wrap:wrap; gap:.75rem 2rem; align-items:center; justify-content:space-between; }
.foot small,.foot a{ font-size:var(--fs-label); letter-spacing:.1em; color:var(--white); }
.foot nav{ display:flex; flex-wrap:wrap; gap:1.25rem; }
.foot nav a{ text-transform:uppercase; font-weight:600; opacity:.85; }
.foot nav a:hover{ opacity:1; }

/* ══════════════════════════════════════════════════════════
   SUBPAGINA'S
   ══════════════════════════════════════════════════════════ */
.page-head{ background:var(--paper); padding-block:clamp(2.5rem,5vw,4.5rem) clamp(1.5rem,3vw,2.5rem); }
.page-head h1{ color:var(--text); }
.page-head .lead{ color:var(--text-mid); max-width:56ch; margin-top:1rem; }
.crumb{ display:flex; gap:.5rem; align-items:center; font-size:var(--fs-label);
  letter-spacing:.12em; text-transform:uppercase; color:var(--text-dim); margin-bottom:1.25rem; }
.crumb a:hover{ color:var(--brand-red); }

/* case-opening: groot beeld */
.case-hero{ position:relative; width:100%; aspect-ratio:16/9; max-height:74svh; overflow:hidden; background:var(--ink); }
.case-hero img,.case-hero video{ width:100%; height:100%; object-fit:cover; }
@media (max-width:760px){ .case-hero{ aspect-ratio:4/3; } }

.case-intro{ padding-block:clamp(2rem,4vw,3.5rem); }
.case-intro__grid{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(1.5rem,4vw,4rem); align-items:start; }
@media (max-width:820px){ .case-intro__grid{ grid-template-columns:1fr; gap:1.5rem; } }
.meta{ display:grid; gap:0; border-top:1px solid var(--line); }
.meta div{ display:grid; grid-template-columns:minmax(90px,30%) 1fr; gap:1rem; padding:.7rem 0; border-bottom:1px solid var(--line); }
.meta dt{ font-size:var(--fs-label); letter-spacing:.14em; text-transform:uppercase; color:var(--brand-red); font-weight:600; }
.meta dd{ font-size:var(--fs-small); color:var(--text-mid); }

.case-body{ padding-block:clamp(2rem,4vw,3.5rem); }
.case-body .prose{ color:var(--text-mid); }
.case-body .prose h2{ color:var(--text); }

/* resultaten: rustige cijferblokken */
.stats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap); margin:2rem 0; }
@media (max-width:760px){ .stats{ grid-template-columns:1fr; } }
.stat{ border-top:3px solid var(--brand-red); padding-top:1rem; display:grid; gap:.3rem; }
.stat__fig{
  font-family:var(--display); font-variation-settings:"wdth" 100,"wght" 800;
  font-size:clamp(1.75rem,3.2vw,2.5rem); line-height:1; color:var(--brand-red);
  font-variant-numeric:tabular-nums;
}
.stat__lab{ font-size:var(--fs-small); color:var(--text); font-weight:600; }
.stat__ctx{ font-size:var(--fs-label); letter-spacing:.01em; text-transform:none; color:var(--text-dim); line-height:1.5; }

/* videogalerij binnen een case */
.gal{ display:grid; gap:var(--gap); }
.gal--v{ grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); }
.gal--h{ grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); }
.gal figure{ display:grid; gap:.5rem; }
.gal__frame{ position:relative; overflow:hidden; border-radius:4px; background:var(--ink); aspect-ratio:9/16; }
.gal--h .gal__frame{ aspect-ratio:16/9; }
.gal__frame img,.gal__frame video{ width:100%; height:100%; object-fit:cover; }
.gal__frame button{
  position:absolute; inset:0; z-index:2; display:grid; place-items:center;
  color:var(--white); background:rgba(10,10,10,0); transition:background .25s var(--ease);
}
.gal__frame button:hover{ background:rgba(10,10,10,.3); }
.gal__frame button i{
  display:grid; place-items:center; width:48px; height:48px; border-radius:50%;
  border:1px solid rgba(255,255,255,.75); background:rgba(18,18,18,.4);
  opacity:0; transition:opacity .25s var(--ease);
}
.gal__frame button:hover i,.gal__frame button:focus-visible i{ opacity:1; }
.gal__frame svg{ width:16px; height:16px; fill:currentColor; margin-left:2px; }
.gal figcaption{ font-size:var(--fs-label); letter-spacing:.06em; color:var(--text-dim); }

/* uitklapper voor bewijsstukken */
details.disc{ border-top:1px solid var(--line); padding:1rem 0; }
details.disc summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between;
  gap:1rem; font-family:var(--display); font-variation-settings:"wdth" 100,"wght" 700;
  font-size:1.0625rem; color:var(--text);
}
details.disc summary::-webkit-details-marker{ display:none; }
details.disc summary::after{ content:"+"; color:var(--brand-red); font-size:1.4rem; line-height:1; }
details.disc[open] summary::after{ content:"–"; }
details.disc .disc__body{ padding-top:1rem; }
.scene{ display:grid; gap:.25rem; padding:.85rem 0; border-bottom:1px solid var(--line); }
.scene:last-child{ border-bottom:0; }
.scene b{ font-size:var(--fs-label); letter-spacing:.14em; text-transform:uppercase; color:var(--brand-red); }
.scene span{ font-size:var(--fs-small); color:var(--text-mid); }
.scene em{ font-size:var(--fs-small); color:var(--text); }

/* over mij */
.about{ display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr); gap:clamp(1.75rem,4vw,4rem); align-items:start; }
@media (max-width:820px){ .about{ grid-template-columns:1fr; } .about__port{ max-width:300px; } }
.about__port{ overflow:hidden; border-radius:4px; background:var(--paper-2); }
.about__port img{ width:100%; aspect-ratio:3/4; object-fit:cover; object-position:50% 20%; }

/* contactpagina */
.contact-page{ background:var(--brand-red); color:var(--white); min-height:70svh; display:grid; align-content:center; }
.contact-page h1{ color:var(--white); }
.contact-page .lead{ color:rgba(255,255,255,.88); max-width:48ch; }
.contact-list{ display:grid; gap:0; margin-top:2rem; border-top:1px solid rgba(255,255,255,.3); }
.contact-list a,.contact-list span{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:1.1rem 0; border-bottom:1px solid rgba(255,255,255,.3); color:var(--white);
}
.contact-list a:hover{ opacity:.8; }
.contact-list b{ font-family:var(--display); font-variation-settings:"wdth" 100,"wght" 700; font-size:1.125rem; }
.contact-list em{ font-style:normal; font-size:var(--fs-label); letter-spacing:.12em; text-transform:uppercase; opacity:.8; }

/* ── LIGHTBOX / VOLLEDIGE SPELER ─────────────────────────── */
.lb{ border:0; padding:0; margin:0; width:100%; max-width:none; height:100%; max-height:none;
  background:transparent; color:var(--white); overflow:hidden; }
.lb::backdrop{ background:rgba(10,10,10,.94); }
.lb__in{ width:100%; height:100%; display:grid; grid-template-rows:auto minmax(0,1fr) auto;
  padding:clamp(.75rem,2vw,1.5rem); gap:.75rem; }
.lb__top{ display:flex; justify-content:flex-end; }
.lb__stage{ display:flex; align-items:center; justify-content:center; min-height:0; min-width:0; }
/* de volledige, onbesneden video */
.lb__stage video{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; background:#000; }
.lb__cap{ display:grid; gap:.15rem; text-align:center; }
.lb__cap strong{ font-family:var(--display); font-variation-settings:"wdth" 100,"wght" 700; font-size:.9375rem; }
.lb__cap span{ font-size:var(--fs-label); letter-spacing:.12em; text-transform:uppercase; opacity:.7; }

/* ── MOTION: inhoud is standaard zichtbaar ───────────────── */
.js .fade{ opacity:0; transform:translateY(10px); }
.js .fade.is-in{ opacity:1; transform:none; transition:opacity .5s var(--ease), transform .5s var(--ease); }
@media (prefers-reduced-motion:reduce){
  .js .fade{ opacity:1; transform:none; }
  .js .fade.is-in{ transition:none; }
}

/* ── MOBIELE HEADER ──────────────────────────────────────
   Woordmerk en menu moeten op één regel blijven passen. */
@media (max-width:560px){
  .head{ padding:1.15rem var(--pad-x); }
  .head__in{ gap:.75rem; }
  .head__mark{ font-size:.8125rem; white-space:nowrap; }
  .nav{ gap:.9rem; }
  .nav a{ font-size:.6875rem; letter-spacing:.08em; white-space:nowrap; }
}
@media (max-width:380px){
  .head__mark{ font-size:.75rem; }
  .nav{ gap:.7rem; }
  .nav a{ font-size:.625rem; letter-spacing:.05em; }
}