/* ============================================================
   JDH Portraits — Base
   Tokens derived from brand marks (Branding JDH Portraits/*.svg)
   ============================================================ */

:root{
  /* ---- Brand colour system (5 colours, restrained) ---- */
  --ink:        #221F1D; /* charcoal — primary dark */
  --paper:      #F4EDE4; /* warm cream — primary light bg */
  --paper-deep: #EDE6DD; /* deeper cream — panels / alternation */
  --rust:       #A33715; /* signature accent — the aperture mark */
  --rust-dim:   #8a2e11;
  --taupe:      #8A7F76; /* muted secondary, on light bg */
  --taupe-on-dark: #907768;

  --ink-70: rgba(34,31,29,.7);
  --ink-45: rgba(34,31,29,.45);
  --paper-70: rgba(244,237,228,.7);
  --paper-45: rgba(244,237,228,.45);

  /* ---- Type ---- */
  --font-display: 'Zen Old Mincho', 'Iowan Old Style', serif;
  --font-body: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --step--1: clamp(0.8rem, 0.78rem + 0.1vw, 0.875rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1:  clamp(1.2rem, 1.13rem + 0.35vw, 1.4rem);
  --step-2:  clamp(1.5rem, 1.38rem + 0.6vw, 1.9rem);
  --step-3:  clamp(2rem, 1.75rem + 1.25vw, 2.75rem);
  --step-4:  clamp(2.75rem, 2.2rem + 2.75vw, 4.5rem);
  --step-5:  clamp(3.4rem, 2.5rem + 4.5vw, 6.5rem);

  /* ---- Space scale ---- */
  --sp-1: 0.5rem;
  --sp-2: 0.75rem;
  --sp-3: 1.25rem;
  --sp-4: 2rem;
  --sp-5: 3.25rem;
  --sp-6: 5.25rem;
  --sp-7: 8.5rem;

  --container: 1320px;
  /* max(), not a bare vw value — some mobile browsers compute vw against a
     layout viewport that's wider than what's actually visible, which was
     shrinking this gutter enough for the header's hamburger icon to sit
     flush against (or past) the real edge on narrow phones. */
  --gutter: max(1.25rem, 6vw);
  --radius: 3px;
  --ease: cubic-bezier(.65,.05,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ---- Reset ---- */
*, *::before, *::after{ box-sizing: border-box; }
* { margin: 0; }
html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@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;
  }
}
body{
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--step-0);
  line-height: 1.55;
  min-height: 100svh;
  overflow-x: clip;
}
img, picture, svg{ display: block; max-width: 100%; }
img{ height: auto; }
input, button, textarea, select{ font: inherit; color: inherit; }
button{ background: none; border: 0; cursor: pointer; }
a{ color: inherit; text-decoration: none; }
ul, ol{ list-style: none; padding: 0; }

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

p{ text-wrap: pretty; }

/* ---- Focus ---- */
:focus-visible{
  outline: 2px solid var(--rust);
  outline-offset: 3px;
}
a:focus-visible, button:focus-visible{
  outline-offset: 4px;
}

/* ---- Selection ---- */
::selection{ background: var(--rust); color: var(--paper); }

/* ---- Utility ---- */
.container{
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.visually-hidden{
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0; padding: 0; margin: -1px;
}
.skip-link{
  position: fixed;
  top: -100%;
  left: var(--sp-3);
  z-index: 999;
  background: var(--ink);
  color: var(--paper);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius);
  transition: top .2s var(--ease-out);
}
.skip-link:focus{ top: var(--sp-3); }

.eyebrow{
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rust);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.eyebrow::before{
  content: '';
  width: 1.6em;
  height: 1px;
  background: currentColor;
  display: inline-block;
}

.section{ padding-block: var(--sp-6); }
.section--tight{ padding-block: var(--sp-5); }
.section--dark{ background: var(--ink); color: var(--paper-deep); }
.section--deep{ background: var(--paper-deep); }

@media (min-width: 900px){
  .section{ padding-block: var(--sp-7); }
}