/* ==========================================================================
   Typeface switch.  Set "Typeface" in the admin (Site settings) or "typeface" in
   src/_data/site.json:
     "grotesk"  Eurostile-like heavy headlines (Saira) + clean body text (Inter)
     "mono"     the original look: JetBrains Mono everywhere
   Everything below only applies to "grotesk"; with "mono" this file does nothing.
   ========================================================================== */
/* Fonts live on this site (no Google), preloaded in every <head> and shown only once ready, so text never swaps after the page appears */
@font-face { font-family: "Inter"; src: url("/fonts/inter-latin-wght.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: block; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono-latin-wght.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: block; }
@font-face { font-family: "Eurostile Extended"; src: url("/fonts/EurostileExtendedBlack.ttf") format("truetype"); font-weight: 400 900; font-style: normal; font-display: block; }
html[data-type="grotesk"] {
  --sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  --display: "Eurostile Extended", "Saira", "Arial Black", Arial, sans-serif;
  --display-wdth: 100;       /* 75 = squeezed ... 125 = extended */
  --mono: var(--sans);
}
html[data-type="grotesk"] body, html[data-type="grotesk"] button, html[data-type="grotesk"] .sm { font-family: var(--sans); font-size: 14px; letter-spacing: -.005em; }

/* Display: wide, heavy, capitals */
html[data-type="grotesk"] .word span,
html[data-type="grotesk"] .menu li a, html[data-type="grotesk"] .menu li button,
html[data-type="grotesk"] .sm a,
html[data-type="grotesk"] .info h1,
html[data-type="grotesk"] .center-label b,
html[data-type="grotesk"] .page h1, html[data-type="grotesk"] .project__header h1 {
  font-family: var(--display); font-weight: 400; font-synthesis: none; text-transform: uppercase; letter-spacing: -.01em;
}
html[data-type="grotesk"] .word span { letter-spacing: -.01em; line-height: .95; }
html[data-type="grotesk"] .menu li a, html[data-type="grotesk"] .menu li button, html[data-type="grotesk"] .sm a { font-size: clamp(15px, 4.2vw, 22px); line-height: 1.3; letter-spacing: 0; }
html[data-type="grotesk"] .info h1 { font-size: clamp(15px, 4.2vw, 22px); line-height: 1.15; }
html[data-type="grotesk"] .center-label b { font-size: clamp(12px, 3.2vw, 17px); }

/* Body copy */
html[data-type="grotesk"] .intro { font-size: clamp(12.5px, 3.4vw, 15px); line-height: 1.4; font-weight: 300; }
html[data-type="grotesk"] .panel p { font-size: clamp(17px, 5vw, 23px); line-height: 1.3; font-weight: 400; letter-spacing: -.012em; }
html[data-type="grotesk"] .panel-about p:nth-of-type(n+3) { font-size: clamp(14px, 3.9vw, 17px); line-height: 1.5; font-weight: 300; letter-spacing: 0; }
html[data-type="grotesk"] .contact-list a { font-weight: 400; letter-spacing: -.02em; }
html[data-type="grotesk"] .cv h2 { font-weight: 500; letter-spacing: -.015em; font-size: clamp(16px, 4.6vw, 20px); }
html[data-type="grotesk"] .cv p { font-size: clamp(13px, 3.6vw, 15px); font-weight: 300; line-height: 1.45; }
html[data-type="grotesk"] .statement p { font-weight: 300; font-size: clamp(9px, min(2.55vw, 1.3dvh), 14px); line-height: 1.36; }
html[data-type="grotesk"] .info .desc, html[data-type="grotesk"] .info .sub { font-weight: 300; font-size: 14px; }
@media (min-width: 900px) {
  html[data-type="grotesk"] .panel p { font-size: clamp(19px, 1.7vw, 26px); }
  html[data-type="grotesk"] .panel-about p:nth-of-type(n+3) { font-size: clamp(15px, 1.25vw, 19px); }
  html[data-type="grotesk"] .menu li a, html[data-type="grotesk"] .menu li button, html[data-type="grotesk"] .sm a { font-size: clamp(18px, 2vw, 28px); }
}

/* Eurostile Extended is very wide, so the big "Skills" word is a touch smaller */
html[data-type="grotesk"] .scene-vinyl { --word: min(11vw, 8dvh, 52px); }
@media (min-width: 900px) { html[data-type="grotesk"] .scene-vinyl { --word: min(4.6vw, 8dvh, 72px); } }


/* Work folders use Eurostile Extended for their names */
html[data-type="grotesk"] .wf-title { font-family: var(--display); font-weight: 400; font-synthesis: none; text-transform: uppercase; letter-spacing: -.01em; font-size: clamp(14px, 4vw, 20px); line-height: 1.15; }

/* project name above the "Read more" text keeps the Eurostile look */
html[data-type="grotesk"] .sheet-h { font-family: var(--display); font-weight: 400; font-synthesis: none; text-transform: uppercase; letter-spacing: -.01em; font-size: clamp(15px, 4.2vw, 22px); line-height: 1.15; color: var(--ink); margin-bottom: 26px; }

/* About / Contact section titles in Eurostile */
html[data-type="grotesk"] .panel p.label { font-family: var(--display); font-weight: 400; font-synthesis: none; text-transform: uppercase; letter-spacing: -.01em; font-size: clamp(14px, 3.8vw, 19px); line-height: 1.15; margin-bottom: 20px; color: var(--text); }
@media (min-width: 900px) { html[data-type="grotesk"] .panel p.label { font-size: clamp(16px, 1.5vw, 22px); } }

/* project pages with a picture behind: title in Eurostile */
html[data-type="grotesk"] .hero h1 { font-family: var(--display); font-weight: 400; font-synthesis: none; text-transform: uppercase; letter-spacing: -.01em; font-size: clamp(24px, 7.2vw, 56px); line-height: 1.08; }
html[data-type="grotesk"] .row h2, html[data-type="grotesk"] .hero .sub { font-family: var(--sans); }

/* Art page text panel: same big Eurostile header as the project pages */
html[data-type="grotesk"] .st-h { font-family: var(--display); font-weight: 400; font-synthesis: none; text-transform: uppercase; letter-spacing: -.01em; font-size: clamp(20px, min(6vw, 4dvh), 46px); line-height: 1.08; }

/* About: Eurostile header like the project pages; text sizes follow the Art layout */
html[data-type="grotesk"] .panel-about p.label { font-size: clamp(22px, 6.4vw, 46px); line-height: 1.08; color: var(--text); margin: 0; }
html[data-type="grotesk"] .panel-about .a-sub { font-size: 14px; font-weight: 400; line-height: 1.35; letter-spacing: 0; }
html[data-type="grotesk"] .panel-about .a-desc p { font-size: clamp(14px, 3.9vw, 17px); font-weight: 300; line-height: 1.5; letter-spacing: 0; }
@media (min-width: 900px) { html[data-type="grotesk"] .panel-about .a-desc p { font-size: clamp(15px, 1.25vw, 19px); } html[data-type="grotesk"] .panel-about p.label { font-size: clamp(30px, 3.4vw, 50px); } }

html[data-type="grotesk"] .sheet-h { font-size: clamp(22px, 6.4vw, 46px); line-height: 1.08; margin: 0; }

html[data-type="grotesk"] .panel-about .a-row .more { font-size: clamp(14px, 3.9vw, 17px); }
@media (max-height: 700px) { html[data-type="grotesk"] .panel-about .a-desc p, html[data-type="grotesk"] .panel-about .a-row .more { font-size: 12.5px; } }