/* FONTS */
@font-face {
  font-family: 'GT Alpina';
  src: url('../fonts/GT-Alpina-Standard-Light-Italic.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'GT Alpina';
  src: url('../fonts/GT-Alpina-Standard-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GT Standard';
  src: url('../fonts/GT-Standard-M-Standard-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* DESIGN TOKENS */
:root {
  --bg:          #f2ede6;
  --text:        #000000;
  --muted:       rgba(0,0,0,0.55);
  --light-gray:  rgba(0,0,0,0.09);
  --nav-1:       #000000;
  --nav-2:       rgba(0,0,0,0.55);
  --transition:  0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --side:        6rem; /* 96px — wider margins */
  --col-gap:     8.625rem; /* 138px */
  --col:         calc((100vw - 2 * var(--side) - 11 * 1.5rem) / 12); /* 1 column of the 12-col grid */
  --display:     'GT Alpina', serif;
  --base:        'GT Standard', sans-serif;
  --block-gap:   3rem; /* 48px — vertical breathing room between stacked page sections (hero/filter/grid, project header/credits/desc/images, etc.) */

  /* Leading-compensation gaps.
     In engines that don't support text-box-trim, the natural line-box leading
     already provides ~Figma-spec visual space between stacked text, so these
     gaps stay 0. The @supports block below adds explicit values for engines
     that DO trim — where leading is collapsed and an explicit gap is needed
     to recover Figma-spec spacing. Scale tracks the text size at the use site. */
  --gap-stacked-titles-lg: 0;       /* big italic display (project header)  */
  --gap-stacked-titles-sm: 0;       /* small display (card client + title)  */
  --gap-paragraph:         0;       /* 24px display paragraphs              */
  --gap-list-item:         0.375rem; /* 6px base — list items always need a little separation */
}
@supports (text-box-trim: trim-both) {
  :root {
    --gap-stacked-titles-lg: 1.125rem; /* 18px between project header lines       */
    --gap-stacked-titles-sm: 0.375rem; /* 6px between card client + card title    */
    --gap-paragraph:         1.5rem;   /* 24px between project-desc paragraphs    */
    --gap-list-item:         1rem;     /* 16px between travel-grid items          */
  }
}

/* COLOR THEMES */
body[data-theme="colorway-1"] { --bg:#c9919e; --text:#551507; --muted:#874d41; }
body[data-theme="colorway-2"] { --bg:#f4dba1; --text:#113845; --muted:#1b4575; }
body[data-theme="colorway-3"] { --bg:#c0d6d4; --text:#3d292b; --muted:#874d41; }
body[data-theme="colorway-4"] { --bg:#dcffcd; --text:#135421; --muted:#73ad5a; }
body[data-theme="colorway-5"] { --bg:#551507; --text:#c4705f; --muted:#f1b0fc; --nav-1:#ffffff; --nav-2:rgba(255,255,255,0.55); }
body[data-theme="colorway-6"] { --bg:#aa7347; --text:#94d5f7; --muted:#d1efff; }
body[data-theme="colorway-7"] { --bg:#ff5045; --text:#94cdff; --muted:#ffd0cd; --nav-1:#ffffff; --nav-2:rgba(255,255,255,0.55); }
body[data-theme="about"]      { --bg:#232809; --text:#aac0c1; --muted:#ffffff; --nav-1:#ffffff; --nav-2:rgba(255,255,255,0.55); }
body[data-theme="services"]   { --bg:#1d4648; --text:#e6adc9; --muted:#ffffff; --nav-1:#ffffff; --nav-2:rgba(255,255,255,0.55); }

/* RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; text-box: trim-both cap alphabetic; text-box-trim: trim-both; text-box-edge: cap alphabetic; }
html { font-size: 16px; scroll-behavior: smooth; }

/* SKIP LINK */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--side);
  z-index: 200;
  padding: 0.5rem 1rem;
  background: var(--bg);
  color: var(--text);
  font-family: var(--base);
  font-size: 0.875rem;
  text-decoration: none;
  border: 1px solid var(--text);
}
.skip-link:focus-visible { top: 0.5rem; }

/* FOCUS */
:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
}
a:focus-visible,
button:focus-visible { border-radius: 1px; }

/* INLINE LINKS — markdown-generated links inside content fields inherit the
   surrounding text color, no underline. Class-bearing nav/footer/contact links
   keep their own styles (they have .nav-links, .footer-links, .contact-link, .label). */
a:not([class]) {
  color: inherit;
  text-decoration: none;
}

@keyframes page-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--base);
  font-weight: 400;
  min-height: 100dvh;
  overflow-x: hidden;
  transition: background var(--transition), color var(--transition);
  padding-top: 3.875rem;
  hyphens: auto;
  hyphenate-limit-chars: 8 4 3;
  display: flex;
  flex-direction: column;
}
.site-nav, h1, h2, h3,
.row-label, .sidebar-label, .skill-name,
.card-client, .card-title, .card-cat,
.hero-title, .about-headline,
.label, .contact-link, .filter-bar, .filter-select,
.sidebar-bio {
  hyphens: none;
}

/* SHARED DISPLAY HERO — used by hero, project header, and about headline */
.hero-title,
.project-client,
.project-title {
  font-family: var(--display);
  font-size: clamp(2.25rem, 3.9vw, 3.5rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.08;
}
.page-content {
  animation: page-in 0.45s ease both;
  flex: 1; /* pushes footer to bottom when content is short */
}

/* NAV */
.site-nav {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 1.5rem;
  align-items: center;
  padding: 24px var(--side) 0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: background-color var(--transition);
}
.nav-brand { text-decoration: none; grid-column: 1; white-space: nowrap; }
.nav-brand:hover .nav-name { color: var(--nav-2); }
.nav-name {
  font-family: var(--display);
  font-size: 0.875rem; /* 14px */
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--nav-1);
  transition: color var(--transition);
  display: block;
}
.nav-name-short { display: none; }

.nav-links { display: flex; gap: 1.5rem; list-style: none; grid-column: 10 / span 3; }
.nav-links a {
  font-family: var(--display);
  font-size: 0.875rem; /* 14px */
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--nav-2);
  text-decoration: none;
  transition: color .2s;
}
.nav-links a:hover,
.nav-links a.active { color: var(--nav-1); }
.nav-links a.active { cursor: default; }

/* FOOTER */
footer {
  padding: 0 var(--side) 1.5rem;
  color: var(--nav-2);
}
.footer-inner {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 1.5rem;
  align-items: baseline;
}
.footer-inner > .label { grid-column: 1 / 10; }
.footer-links { grid-column: 10 / span 3; }
.footer-links {
  display: flex;
  gap: 1.5rem;
}
.footer-links a { text-decoration: none; color: var(--nav-2); }
.label {
  font-family: var(--base);
  font-size: 0.75rem; /* 12px — Figma label size */
  font-weight: 400;
  line-height: 1.12;
  color: var(--nav-2);
  transition: color var(--transition);
}
.footer-links a.label:hover { color: var(--nav-1); }



/* MOBILE */
@media (max-width: 767px) {
  :root { --side: 1.5rem; --col-gap: 1.5rem; }
  .nav-name-full  { display: none; }
  .nav-name-short { display: block; }
  .site-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem var(--side) 0;
  }
  .nav-links { gap: 1rem; }
  .nav-links a, .nav-name { font-size: 1rem; } /* 16px on mobile (#70) */
  .footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  .footer-links { gap: 0.75rem; }
}