/* ==========================================================================
   Digital Fusion Photography — base.css
   Reset, design tokens, and typography.

   Everything visual is driven by the custom properties in :root below.
   To restyle the site, change the tokens here — not the rules downstream.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */

:root {
  /* Type families -----------------------------------------------------------
     Taken from the live site. Its builder theme nominally sets Roboto/Lato,
     but every heading and paragraph carries an inline override, so what
     actually renders is a pair of serifs:
       primary   = Times New Roman    — wordmark, headings, display
       secondary = Cormorant Garamond — body copy, labels, buttons
       nav       = Lato               — nav links, the one place the theme
                                        default still shows through
     Times New Roman is a system font, so only Cormorant and Lato load.       */
  --font-primary: "Times New Roman", Times, Georgia, serif;
  --font-secondary: "Cormorant Garamond", "Times New Roman", Times, Georgia, serif;
  --font-nav: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Times New Roman", Times, Georgia, serif;

  /* Type scale --------------------------------------------------------------
     Fluid via clamp(): the minimum matches the original mobile sizes, the
     maximum matches the original desktop sizes. Everything between scales
     smoothly instead of snapping at a breakpoint.                           */
  --step-h1: clamp(2.75rem, 1.60rem + 4.60vw, 5rem);      /* 44px → 80px */
  --step-h2: clamp(2rem, 1.23rem + 3.08vw, 4rem);         /* 32px → 64px */
  --step-h3: clamp(1.5rem, 1.21rem + 1.15vw, 2.25rem);    /* 24px → 36px */
  --step-h4: clamp(1.25rem, 1.15rem + 0.38vw, 1.5rem);    /* 20px → 24px */
  --step-h5: 1.125rem;                                     /* 18px */
  --step-h6: 1rem;                                         /* 16px */

  /* Editorial display sizes — a tier above the heading scale. Display is for
     hero headlines and page titles; giant is reserved for the 404 code and
     ghost index numbers, where type behaves more like a graphic element. */
  --step-display: clamp(3.5rem, 2.2rem + 6.5vw, 8.25rem);  /* 56px → 132px */
  --step-giant: clamp(5rem, 3rem + 10vw, 12rem);           /* 80px → 192px */

  /* Weights — headings are Times New Roman, a system face with only 400 and
     700. The old light display weights (250/300) were a Roboto-variable trick
     and would be faked here, so headings now sit at the regular weight and let
     scale and case carry the emphasis instead. Never pair either font with
     font-style: italic; only normal-style faces ship and the browser would
     synthesise the slant. */
  --weight-display: 400;
  --weight-heading: 400;

  /* Body sizes run a step larger than they did under Lato. Cormorant Garamond
     is an old-style face with a small x-height — set at the old 16px it reads
     nearer 14 and goes spindly. The live site solves this by setting its body
     copy at 24px; these sizes split the difference. The nav is exempt (it is
     still Lato) and pins its own size in layout.css. */
  --text-lg: 1.375rem;  /* 22px */
  --text-md: 1.25rem;   /* 20px */
  --text-sm: 1rem;      /* 16px */
  --text-xs: 0.875rem;  /* 14px */

  --leading-tight: 1.2;
  --leading-snug: 1.4;
  --leading-body: 1.6;  /* 1.8 was tuned for 16px Lato; the larger serif needs less */

  --tracking-wide: 0.08em;
  --tracking-wider: 0.16em;
  --tracking-tight: -0.015em; /* large mixed-case display type */
  --tracking-caps: 0.045em;   /* large uppercase display — 0.08em reads gappy past 100px */
  --tracking-widest: 0.26em;  /* eyebrows, labels, buttons */

  /* Colour ------------------------------------------------------------------
     The original site is monochrome. Kept that way, with named roles so a
     future palette change is a handful of edits.                            */
  --color-ink: #000000;
  --color-ink-soft: #1d1e20;
  --color-ink-muted: #55585c;
  --color-paper: #ffffff;
  --color-paper-warm: #f4f4f4; /* a neutral grey step, not a warm cream */
  --color-line: #e2e2e2;
  --color-line-soft: #ececec;
  --color-line-strong: #000000; /* heavy rules: stuck header, section-head rules */
  /* Ink at 42%. The testimonial deck's own weight — its card rules and its
     arrow buttons — because seven overlapping cards outlined at full strength
     stack into a thicket. Over paper it resolves to a mid grey. */
  --color-card-rule: rgba(0, 0, 0, 0.42);
  --color-overlay-deep: rgba(0, 0, 0, 0.92);
  /* What keeps white copy legible on a full-screen photograph. It is carried
     by the type rather than by the scrim on purpose: a wash big enough to sit
     under a headline is big enough to be seen as a shape, and a hero that
     exists to show the photograph cannot afford a grey oval across the middle
     of it. A wide, soft, low halo reaches only the pixels next to a letter, so
     it buys the contrast and costs nothing anywhere else. Two stops: the wide
     one does the work, the tight one keeps thin serifs from dissolving into
     it. Measured white-on-photograph contrast holds above 4:1 through every
     hero in the set, including the blown-out veil on the first slide.        */
  --copy-halo:
    0 1px 2px rgba(0, 0, 0, 0.34),
    0 2px 28px rgba(0, 0, 0, 0.62);

  /* Spacing scale ----------------------------------------------------------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 8rem;

  /* Vertical rhythm ---------------------------------------------------------
     Two values, and only two. Every seam between major blocks on a page is
     one --section-gap; the shorter value is reserved for interstitial strips
     like the tagline. The .section rules in layout.css do the arithmetic so
     that stacking blocks never doubles a gap up.                            */
  --section-gap: clamp(4rem, 2.5rem + 6vw, 8rem);
  --section-gap-sm: clamp(2.5rem, 1.75rem + 3vw, 4.5rem);

  /* Gaps inside a section ---------------------------------------------------
     Three sizes, one per kind of grid, so every grid on the site lines up
     with the others instead of inventing its own spacing.                   */
  --gap-media: clamp(0.5rem, 0.4rem + 0.4vw, 0.75rem);  /* photo mosaics    */
  --gap-card: clamp(1rem, 0.7rem + 1.2vw, 1.75rem);     /* card grids       */
  --gap-split: clamp(2rem, 1.2rem + 3.2vw, 4.5rem);     /* two-column rows  */

  /* Layout ------------------------------------------------------------------ */
  --container-max: 1240px; /* matches the original theme's content width */
  --container-narrow: 760px;
  --container-pad: clamp(1.25rem, 0.75rem + 2.5vw, 3rem);

  /* Breakpoints ----------------------------------------------------------------
     Custom properties cannot appear in media queries, so this is a convention:
     the ONLY widths allowed in a media query anywhere in assets/css/ are
       640px   small  — multi-column photo grids begin
       860px   mid    — splits, packages, reviews, contact go multi-column
       1080px  wide   — masonry three-up
       1200px  nav    — LOCKED to matchMedia("(min-width: 1200px)") in main.js
     Check with:  grep -rn "min-width" assets/css/                             */

  /* Motion ------------------------------------------------------------------ */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  /* A near-expo curve: leaves fast, lands slowly, almost no overshoot. Used
     where something travels a long way and has to arrive settled rather than
     merely stop — the testimonial deck walking a card to the centre. */
  --ease-glide: cubic-bezier(0.32, 0.72, 0, 1);
  --duration-fast: 180ms;
  --duration-base: 320ms;
  --duration-slow: 620ms;

  /* Scroll motion ------------------------------------------------------------
     How far a hero or band photograph lags the page while it scrolls through
     view. The reveal entrance is no longer tokenised here — GSAP owns its
     duration and stagger in initMotion(), and splitting those numbers across
     two files would only make them drift.                                   */
  --parallax-shift: clamp(2rem, 5vh, 3.5rem);

  /* Elevation -----------------------------------------------------------------
     The chrome is flat: depth comes from contrast blocks and hairlines, never
     box-shadow. The one exception is the lightbox, where a photograph floats
     over a near-black backdrop and needs a shadow to separate from it.      */
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12), 0 32px 64px rgba(0, 0, 0, 0.08);

  /* Chrome ------------------------------------------------------------------ */
  --header-height: 76px;
  --z-header: 100;
  --z-menu: 200;
  --z-lightbox: 300;
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + var(--space-sm));
}

body {
  min-height: 100vh;
  background-color: var(--color-paper);
  color: var(--color-ink-soft);
  font-family: var(--font-secondary);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

ul[class],
ol[class] {
  list-style: none;
  padding: 0;
}

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */

/* Headings are Times New Roman at the regular weight, as on the live site.
   Emphasis comes from scale and case rather than weight — there is no light
   cut to reach for here, and 700 at display sizes would shout. The contrast
   against the Cormorant body copy is what marks them out. */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-primary);
  color: var(--color-ink);
  font-weight: var(--weight-heading);
  line-height: var(--leading-tight);
  text-wrap: balance;
}

h1 { font-size: var(--step-h1); }
h2 { font-size: var(--step-h2); }
h3 { font-size: var(--step-h3); font-weight: 400; line-height: var(--leading-snug); }
/* 700, not the old 500: Times New Roman ships only 400 and 700, and at these
   small sizes scale alone no longer separates a heading from the body text. */
h4 { font-size: var(--step-h4); font-weight: 700; line-height: var(--leading-snug); }
h5 { font-size: var(--step-h5); font-weight: 700; line-height: var(--leading-snug); }
h6 { font-size: var(--step-h6); font-weight: 700; line-height: var(--leading-snug); }

p {
  text-wrap: pretty;
}

p + p {
  margin-top: var(--space-sm);
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

strong,
b {
  font-weight: 700;
  color: var(--color-ink);
}

/* --------------------------------------------------------------------------
   4. Shared type utilities
   -------------------------------------------------------------------------- */

/* The all-caps, wide-tracked label used above section headings throughout.
   Small, black and very widely tracked — it reads as a typographic rule, and
   the contrast against the light-weight heading below it does the work that
   an accent colour would do on a less disciplined site. */
.eyebrow {
  font-family: var(--font-secondary);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-ink);
  line-height: var(--leading-snug);
}

.text-center { text-align: center; }

/* --------------------------------------------------------------------------
   5. Layout utilities
   These exist so that pages carry no inline styles — spacing decisions all
   live here, on the scale, where they can be changed in one place.
   -------------------------------------------------------------------------- */

/* Vertical flow inside a block of copy */
.flow > * + * { margin-top: var(--space-sm); }
.flow--loose > * + * { margin-top: var(--space-md); }

/* One or more buttons sitting under a block of copy */
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.actions--center { justify-content: center; }

/* The single centred link that closes several sections */
.section-foot {
  display: flex;
  justify-content: center;
  margin-top: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
}

/* --------------------------------------------------------------------------
   6. Accessibility helpers
   -------------------------------------------------------------------------- */

.visually-hidden:not(:focus):not(:active) {
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.skip-link {
  position: absolute;
  top: var(--space-2xs);
  left: var(--space-2xs);
  z-index: calc(var(--z-lightbox) + 1);
  padding: var(--space-2xs) var(--space-sm);
  background: var(--color-ink);
  color: var(--color-paper);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform var(--duration-fast) var(--ease-out);
}

.skip-link:focus {
  transform: translateY(0);
}

:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   7. Scroll reveal
   Nothing here any more. The entrance animations used to live in this file as
   three CSS variants keyed on .is-reveal, driven by an IntersectionObserver in
   main.js; both were retired when GSAP took the effect over. The from-state is
   now set by gsap.set() at runtime, deliberately NOT in this stylesheet  a
   stylesheet that hides content is a stylesheet betting the script will arrive.
   See initMotion() in assets/js/main.js.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   8. Motion preferences

   NOTE: the 0.01ms trick below does NOT neutralise scroll-driven animations —
   their duration comes from the timeline and animation-duration is ignored.
   Every animation-timeline rule in layout.css/components.css must therefore
   also be authored inside @media (prefers-reduced-motion: no-preference).
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   9. Print
   -------------------------------------------------------------------------- */

@media print {
  .site-header,
  .site-footer,
  .lightbox {
    display: none !important;
  }

  body {
    color: #000;
  }
}