/* Joanna Goodman Design — design tokens
   Derived from patienceharding.com (1024px scaling canvas); see design.md.
   Fluid values = canvas px / 10.24 vw, clamped between a mobile floor and a 1920px-wide ceiling. */

/* Fonts: self-hosted variable fonts (SIL OFL — licences alongside the files) */
@font-face {
  font-family: "Figtree";
  src: url("/assets/fonts/Figtree-Variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Oswald";
  src: url("/assets/fonts/Oswald-Variable.woff2") format("woff2");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colour */
  --color-bg: #000;
  --color-text: #fff;
  --color-text-hover: #818181;
  --color-selection: #a2a2a2;
  --scrim-hero: rgba(0, 0, 0, 0.2);            /* keeps the white wordmark legible over bright reel frames */

  /* Type: Oswald = interface (nav, body, captions); Figtree = brand (wordmark, project titles) */
  --font-family: "Oswald", "Arial Narrow", sans-serif;
  --font-brand: "Figtree", "Helvetica Neue", Arial, sans-serif;
  --weight-body: 400;
  --weight-nav: 550;

  --text-nav: clamp(13px, 1.27vw, 24px);       /* canvas 13 */
  --text-body: clamp(13px, 1.27vw, 24px);      /* canvas 13 */
  --leading-body: clamp(17px, 1.66vw, 32px);   /* canvas 17 */
  --text-caption: clamp(11px, 1.074vw, 21px);  /* canvas 11 */
  --leading-caption: 1;
  --paragraph-gap: var(--leading-body);        /* one blank line: the reference separates paragraphs with <br><br> */

  /* Wordmark: "JOANNA GOODMAN" on one line, Figtree, uppercase (≈ 10.2em wide at these settings).
     Home: centred in the viewport over the reel, after esdevlin.com (40px, medium, tracking-wide).
     Inner pages: top-left, after patienceharding.com. */
  --weight-wordmark: 700;                           /* closest Figtree match to esdevlin.com's stroke weight; 600 = lighter option */
  --leading-wordmark: 1;
  --tracking-wordmark: 0.025em;
  --text-wordmark-home: clamp(28px, 2.78vw, 54px);  /* 40px at 1440 = esdevlin.com's 2.5rem */
  --text-wordmark-inner: clamp(16px, 1.6vw, 31px);  /* ≈ 16vw wide = reference inner logo (165 canvas) */

  /* Work tile name (photos and films) */
  --text-tile-title: clamp(14px, 1.5625vw, 30px);   /* canvas 16 */
  --weight-tile-title: 600;
  --leading-tile-title: 1.1;
  --tracking-tile-title: 0.03em;

  /* About: one text column at the top-left, where page content starts (full width on phones, below) */
  --width-about: min(38.87vw, 746px);               /* canvas 398 */

  /* Contact: the address (a mailto: link) and the copy button, Oswald */
  --text-contact: clamp(22px, 2.6vw, 50px);         /* ≈ 37px at 1440 */
  --text-button: clamp(15px, 1.4vw, 26px);          /* ≈ 20px at 1440 */
  --radius-button: 0.7em;                           /* rounded key (Joanna's exception to "no rounded corners") */
  --color-button-side: #8c8c8c;                     /* the key's visible side: makes it stand up off the page */
  --depth-button: 0.35em;                           /* how far the key stands up; it sinks to 0.1em when pressed */

  /* Spacing */
  --space-margin: clamp(16px, 1.953vw, 38px);       /* canvas 20 */
  --space-gutter: clamp(10px, 1.953vw, 38px);       /* canvas 20 */
  --space-gallery-gutter: max(10px, 1.953vw);       /* Work gallery: no ceiling, because tile heights snap to whole
                                                       gutters and the gutter must stay in proportion to the columns */
  --nav-gap: clamp(16px, 2.6vw, 50px);              /* equal gaps between nav words */
  /* The header sits in the corners: wordmark and nav cap-tops one margin from the top.
     Content starts 40 canvas (3.9vw) below the wordmark. */
  --content-top: calc(var(--space-margin) + var(--text-wordmark-inner) + 3.9vw);

  /* Work gallery columns: work.js counts them (equal widths); landscape films and "(wide)" projects span two */
  --grid-gallery: 1fr 1fr 1fr;                      /* phones: one big column (below) */

  /* Motion */
  --dur-link: 150ms;            /* reference is instant; small softening */
  --dur-fade: 300ms;
  --dur-title: 250ms;           /* tile name fade in/out (the name stays 1s: TITLE_MS in work.js) */
  --dur-slide: 700ms;           /* photo carousel slide */
  --ease-slide: cubic-bezier(0.22, 1, 0.36, 1);  /* starts immediately, settles softly */
}

@media (max-width: 767px) {
  :root {
    --grid-gallery: 1fr;
    --width-about: none;
    --content-top: calc(var(--space-margin) + var(--text-wordmark-inner) + 28px);
  }
}
@media (max-width: 359px) {   /* the smallest phones: keep the wordmark and nav from touching */
  :root {
    --text-wordmark-inner: 14px;
    --nav-gap: 10px;
  }
}

/* Base */
::selection { background: var(--color-selection); }

html { background: var(--color-bg); }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family);
  font-weight: var(--weight-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  text-transform: uppercase;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; transition: color var(--dur-link); }
a:hover { color: var(--color-text-hover); }
a:focus-visible { outline: 1px solid var(--color-text); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}