/* ============================================================
   BASE STYLESHEET
   Agency / Studio — Modern & Minimal
   Max viewport: 1920px | Content width: 1420px
   ============================================================ */


/* ------------------------------------------------------------
   FONT IMPORTS
   ------------------------------------------------------------ */

/* Montserrat — Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

/* Dutch801 — place all files in /fonts/ */
@font-face {
  font-family: 'Dutch801';
  src: url('/fonts/dutch801bt_roman.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Dutch801';
  src: url('/fonts/dutch801bt_italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Dutch801';
  src: url('/fonts/dutch801bt_bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Dutch801';
  src: url('/fonts/dutch801bt_bolditalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}


/* ------------------------------------------------------------
   CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ------------------------------------------------------------ */

:root {

  /* --- Fonts --- */
  --font-mont:   'Montserrat', sans-serif;
  --font-dutch:  'Dutch801', Georgia, serif;   /* fallback to serif if font missing */

  /* --- Font sizes (Photoshop 300dpi → CSS px, formula: pt × 4.1667) --- */
  --fs-h1-mont:   68px;
  --fs-h1-dutch:  75px;

  --fs-h2-mont:   52px;
  --fs-h2-dutch:  58px;

  --fs-p:         18px;

  --fs-nav:       14px;   /* nav links, brand name, button */

  /* --- Line heights (unitless ratio) --- */
  --lh-h1-mont:   1.011;   /* 19.41 / 19.2  */
  --lh-h1-dutch:  1;       /* no explicit LH given — matches cap height */
  --lh-h2-mont:   1.084;   /* 16.93 / 15.62 */
  --lh-p:         1.556;   /* 6.72  / 4.32  */

  /* --- Letter spacing (VA -50 → -50/1000 em = -0.05em) --- */
  --ls-default:   -0.05em;

  /* --- Font weights --- */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;

  /* --- Layout --- */
  --max-viewport:    1920px;
  --max-content:     1420px;
  --gutter:          40px;    /* side padding inside content container */

  /* --- Colors (placeholders — defined per section) --- */
  --color-bg:        #ffffff;
  --color-text:      #0d0d0d;
  --color-accent:    #0d0d0d;   /* update per section */

  /* --- Spacing base unit (8px grid) --- */
  --space-1:   8px;
  --space-2:   16px;
  --space-3:   24px;
  --space-4:   32px;
  --space-5:   40px;
  --space-6:   48px;
  --space-8:   64px;
  --space-10:  80px;
  --space-12:  96px;
  --space-16:  128px;
  --space-20:  160px;
  --space-24:  192px;

}


/* ------------------------------------------------------------
   RESET & BASE
   ------------------------------------------------------------ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-mont);
  font-weight: var(--fw-regular);
  color: var(--color-text);
  background-color: var(--color-bg);
  width: 100%;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}


/* ------------------------------------------------------------
   LAYOUT — CONTAINER
   Wraps content inside the 1420px column.
   Use .container on any inner wrapper.
   Use .full-bleed on sections that need to escape to 1920px.
   ------------------------------------------------------------ */

.container {
  width: 100%;
  max-width: var(--max-content);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* Full-bleed: stretches edge-to-edge within the 1920px body */
.full-bleed {
  width: 100%;
  max-width: var(--max-viewport);
}


/* ------------------------------------------------------------
   TYPOGRAPHY — BASE STYLES
   ------------------------------------------------------------ */

/* H1 — Hero heading (Mont + Dutch combo) */
.h1,
h1 {
  display: block;
}

.h1-mont {
  font-family: var(--font-mont);
  font-size: var(--fs-h1-mont);
  font-weight: var(--fw-regular);
  line-height: var(--lh-h1-mont);
  letter-spacing: var(--ls-default);
}

.h1-dutch {
  font-family: var(--font-dutch);
  font-size: var(--fs-h1-dutch);
  font-style: italic;
  line-height: var(--lh-h1-dutch);
  letter-spacing: var(--ls-default);
}

/* H2 — Section heading (Mont + Dutch combo) */
.h2,
h2 {
  display: block;
}

.h2-mont {
  font-family: var(--font-mont);
  font-size: var(--fs-h2-mont);
  font-weight: var(--fw-regular);
  line-height: var(--lh-h2-mont);
  letter-spacing: var(--ls-default);
}

.h2-dutch {
  font-family: var(--font-dutch);
  font-size: var(--fs-h2-dutch);
  font-style: italic;
  letter-spacing: var(--ls-default);
}

/* p / sub — Body / caption text */
.sub,
p {
  font-family: var(--font-mont);
  font-size: var(--fs-p);
  font-weight: var(--fw-medium);
  line-height: var(--lh-p);
  letter-spacing: var(--ls-default);
}


/* ------------------------------------------------------------
   UTILITY CLASSES
   ------------------------------------------------------------ */

.text-upper  { text-transform: uppercase; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

.italic      { font-style: italic; }
.medium      { font-weight: var(--fw-medium); }

/* Visually hide but keep accessible */
.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;
}