/* =============================================================
   Words & Photography - Ink theme
   AAA compliant across both light and dark
   Text sizes and text-adjacent spacing use rem so they honour
   the user's preferred base font size. Structural chrome
   (borders, SVG dimensions, chip padding, fixed positioning)
   stays in px.
   ============================================================= */


/* -------------------------------------------------------------
   1. Design tokens
   Uses light-dark() so one declaration covers both themes.
   color-scheme: light dark  -> follow OS preference.
   [data-theme="light|dark"] -> user's explicit override wins.

   The spacing scale is numbered by 4-pixel units - --space-4 is
   16px, --space-14 is 56px, --space-25 is 100px, etc.
   ------------------------------------------------------------- */

:root {
  color-scheme: light dark;

  /* Colour tokens */
  --bg:      light-dark(#fffef6,   #1c130d);   /* light: warm paper  / dark: espresso        */
  --ink:     light-dark(#1a120b,   #ece7d5);   /* light: 18.29:1     / dark: 14.77:1         */
  --mute:    light-dark(#4a453f,   #a5a18f);   /* light: 9.38:1 AAA  / dark: 7.02:1 AAA      */
  --border:  light-dark(#1a120b95, #6a6760);   /* light: ~3.4:1      / dark: 3.24:1 non-text */
  --em:      light-dark(#a72400,   #e39858);   /* light: 7.16:1 AAA  / dark: 7.75:1 AAA      */

  /* Font families */
  --display: "DM Serif Display", "Times New Roman", Georgia, serif;
  --body:    "DM Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  /* Typography */
  --tracking-caps:   0.16em;                             /* shared letter-spacing for small-caps labels */
  --text-eyebrow:    0.625rem;                           /* 10px  toggle labels, WCAG note              */
  --text-meta:       0.6875rem;                          /* 11px  meta lines, figcaption, footer        */
  --text-base:       1.0625rem;                          /* 17px  page default                          */
  --text-body:       1.125rem;                           /* 18px  article body copy                     */
  --text-standfirst: clamp(1.5rem,   2.8vw, 2rem);       /* article standfirst                          */
  --text-mark-word:  clamp(3.5rem,   6vw,   4.75rem);    /* masthead 'Words' / 'Photography' - min matches article title */
  --text-mark-amp:   clamp(3.5rem,   9vw,   6.75rem);    /* masthead ampersand                          */
  --text-title:      clamp(3.5rem,   9.5vw, 8rem);       /* article title                               */

  /* Spacing scale (rem, name = px / 4) */
  --space-2:   0.5rem;      /*   8px */
  --space-3:   0.75rem;     /*  12px */
  --space-4:   1rem;         /*  16px */
  --space-5:   1.25rem;      /*  20px */
  --space-7:   1.75rem;      /*  28px */
  --space-9:   2.25rem;      /*  36px */
  --space-14:  3.5rem;       /*  56px */
  --space-15:  3.75rem;      /*  60px */
  --space-25:  6.25rem;      /* 100px */

  /* Motion */
  --ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-bounce: cubic-bezier(0.33, 0,    0.35, 1);
}

[data-theme="light"] { color-scheme: light; }
[data-theme="dark"]  { color-scheme: dark;  }


/* -------------------------------------------------------------
   2. Reset & base
   ------------------------------------------------------------- */

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

html,
body {
  background:              var(--bg);
  color:                   var(--ink);
  font-family:             var(--body);
  -webkit-font-smoothing:  antialiased;
  overflow-x:              hidden;         /* guard against photo bleed on medium viewports */
}

body {
  font-size:   var(--text-base);
  line-height: 1.55;
}

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

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


/* -------------------------------------------------------------
   3. Focus indicator (always on, WCAG 2.4.7 / 2.4.13)
   ------------------------------------------------------------- */

a:focus-visible,
button:focus-visible {
  outline:        2px solid var(--ink);
  outline-offset: 3px;
  border-radius:  2px;
}


/* -------------------------------------------------------------
   4. Page container
   ------------------------------------------------------------- */

.page {
  max-width: 820px;
  margin:    0 auto;
  padding:   28px 40px 120px;
}


/* -------------------------------------------------------------
   5. Topbar (masthead + toggle group + squiggle)
   ------------------------------------------------------------- */

.topbar {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             var(--space-14);
  padding:         var(--space-5) 0 var(--space-4);
  margin-bottom:   var(--space-5);
  color:           var(--mute);
  text-align:      center;
}

.topbar__mark {
  display:          flex;
  flex-wrap:        wrap;
  align-items:      center;
  justify-content:  center;
  gap:              var(--space-4);
  font-family:      var(--display);
  line-height:      0.94;              /* matches article title so smallest breakpoint aligns */
}
.topbar__mark-word {
  font-size:       var(--text-mark-word);
  letter-spacing:  -0.015em;
  color:           var(--ink);
}
.topbar__mark-amp {
  font-style:  italic;
  font-weight: 400;
  font-size:   var(--text-mark-amp);
  line-height: 0.94;                   /* was 0.9; matches article title */
  color:       var(--em);
}

.topbar__toggle-group {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             0.875rem;         /* 14px - one-off caption gap */
}
.topbar__wcag {
  font-size:       var(--text-eyebrow);
  letter-spacing:  var(--tracking-caps);
  text-transform:  uppercase;
  color:           var(--mute);
}

.topbar__squiggle {
  display:      block;
  width:        100%;
  height:       var(--h, 24px);     /* --h is set by JS per shape */
  align-self:   stretch;
  margin-top:   -20px;
  color:        var(--em);
  overflow:     visible;
}


/* -------------------------------------------------------------
   6. Entry
   ------------------------------------------------------------- */

.entry                { padding: var(--space-15) 0; }
.entry:first-of-type  { padding-top:    var(--space-5); }
.entry:last-of-type   { padding-bottom: var(--space-25); }

.entry__meta {
  display:         flex;
  flex-wrap:       wrap;
  align-items:     center;
  gap:             var(--space-3);   /* 12px - tighter eyebrow rhythm between meta items */
  margin-bottom:   2.125rem;         /* 34px - one-off eyebrow rhythm */
  font-size:       var(--text-meta);
  letter-spacing:  var(--tracking-caps);
  text-transform:  uppercase;
  color:           var(--mute);
}
.entry__meta .sep    { opacity: 0.7; user-select: none; }
.entry__meta .accent { color: var(--ink); font-weight: 500; }

.entry__title {
  font-family:     var(--display);
  font-weight:     400;
  font-size:       var(--text-title);
  line-height:     0.94;
  letter-spacing:  -0.02em;
  margin-bottom:   var(--space-9);
  color:           var(--ink);
}
.entry__title em {
  font-style: italic;
  color:      var(--em);
}

.entry__standfirst {
  font-family:     var(--display);
  font-style:      italic;
  font-weight:     400;
  font-size:       var(--text-standfirst);
  line-height:     1.28;
  max-width:       32ch;
  margin-bottom:   var(--space-14);
  color:           var(--mute);
}

.entry__photo             { margin: 8px -100px 60px; }
.entry__photo img {
  width:       100%;
  filter:      contrast(1.05) brightness(0.95);
  transition:
    transform  500ms var(--ease),
    box-shadow 500ms var(--ease),
    filter     500ms var(--ease);
}
.entry__photo img:hover {
  transform: translateY(-8px);
  filter:    contrast(1.06) brightness(1);
  box-shadow:
    0 8px  16px -6px  rgba(0, 0, 0, 0.4),
    0 24px 48px -12px rgba(0, 0, 0, 0.55),
    0 40px 80px -20px rgba(0, 0, 0, 0.5);
}
.entry__photo figcaption {
  margin-top:      var(--space-4);
  padding:         0 100px;
  font-size:       var(--text-meta);
  letter-spacing:  var(--tracking-caps);
  text-transform:  uppercase;
  color:           var(--mute);
}

.entry__body {
  font-size:   var(--text-body);
  line-height: 1.62;
  max-width:   62ch;
  color:       var(--ink);
}
.entry__body p              { margin-bottom: 1.1em; }
.entry__body p:last-child   { margin-bottom: 0; }
.entry__body em             { font-style: italic; color: var(--em); }
.entry__body strong         { font-weight: 700; }
.entry__body a {
  text-decoration:       underline;
  text-decoration-color: var(--mute);
  text-underline-offset: 3px;
}
.entry__body a:hover        { text-decoration-color: var(--ink); }
.entry__body ol {
  list-style:     none;
  counter-reset:  item;
  padding:        0;
  margin-bottom:  1.1em;
}
.entry__body ol li {
  counter-increment: item;
  padding-left:      2.25em;
  position:          relative;
}
.entry__body ol li::before {
  content:      counter(item) ")";
  position:     absolute;
  left:         0;
  width:        1.75em;
  color:        var(--mute);
}
.entry__body .signoff {
  font-style: italic;
  color:      var(--mute);
  margin-top: 1.4em;
}


/* -------------------------------------------------------------
   7. Between-entry dividers (populated by JS)
   ------------------------------------------------------------- */

.entry-divider {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  padding:          1.875rem 0;      /* 30px - one-off divider rhythm */
  color:            var(--em);
  opacity:          0.85;
}
.entry-divider__svg {
  display:  block;
  width:    220px;
  height:   var(--h, 20px);          /* --h is set by JS per shape */
  overflow: visible;
}


/* -------------------------------------------------------------
   8. Footer
   ------------------------------------------------------------- */

.footer {
  display:          flex;
  justify-content:  space-between;
  align-items:      center;
  flex-wrap:        wrap;
  gap:              var(--space-4);
  margin-top:       var(--space-15);
  padding:          var(--space-7) 0 var(--space-2);
  border-top:       1px solid var(--border);
  font-size:        var(--text-meta);
  letter-spacing:   var(--tracking-caps);
  text-transform:   uppercase;
  color:            var(--mute);
}
.footer a:hover { color: var(--ink); }


/* -------------------------------------------------------------
   9. Theme toggle (sits inside .topbar__toggle-group)
   ------------------------------------------------------------- */

.theme-toggle {
  display:        inline-flex;
  align-items:    center;
  gap:            2px;
  padding:        3px;
  min-height:     24px;
  border:         1px solid var(--mute);
  border-radius:  999px;
  background:     transparent;
  color:          var(--mute);
  cursor:         pointer;
  font:           inherit;
}
.theme-toggle:hover { color: var(--ink); }
.theme-toggle__label {
  font-size:       var(--text-eyebrow);
  letter-spacing:  var(--tracking-caps);
  text-transform:  uppercase;
  padding:         5px 12px;
  border-radius:   999px;
  color:           inherit;
  pointer-events:  none;
  transition:      background 200ms ease, color 200ms ease;
}
.theme-toggle[aria-checked="false"] .theme-toggle__label[data-value="dark"],
.theme-toggle[aria-checked="true"]  .theme-toggle__label[data-value="light"] {
  background: var(--ink);
  color:      var(--bg);
}


/* -------------------------------------------------------------
   10. Back-to-top button
   ------------------------------------------------------------- */

.back-to-top {
  position:         fixed;
  right:            32px;
  bottom:           32px;
  z-index:          40;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  width:            48px;
  height:           56px;
  padding:          0;
  border:           0;
  background:       transparent;
  color:            var(--em);
  cursor:           pointer;
  opacity:          0;
  visibility:       hidden;
  pointer-events:   none;
  transform:        translateY(16px);
  transition:
    opacity     400ms var(--ease),
    visibility  400ms var(--ease),
    transform   400ms var(--ease);
}
.back-to-top.is-visible {
  opacity:        0.85;
  visibility:     visible;
  pointer-events: auto;
  transform:      translateY(0);
}
.back-to-top:hover {
  opacity:   1;
  animation: back-to-top-bounce 700ms var(--ease-bounce);
}
.back-to-top__svg {
  display:  block;
  width:    32px;
  height:   44px;
  overflow: visible;
}

@keyframes back-to-top-bounce {
  0%, 50%, 100% { transform: translateY(0); }
  25%           { transform: translateY(-14px); }
  75%           { transform: translateY(-7px); }
}


/* -------------------------------------------------------------
   11. Responsive
   ------------------------------------------------------------- */

@media (max-width: 900px) {
  .page                    { padding: 24px 24px 80px; }
  .topbar                  { margin-bottom: var(--space-3); gap: var(--space-9); padding: var(--space-3) 0 var(--space-4); }
  .entry:first-of-type     { padding-top: var(--space-4); }
  .entry__photo            { margin: 8px -24px 40px; }
  .entry__photo figcaption { padding: 0 24px; }
  .back-to-top             { right: 20px; bottom: 20px; }
}


/* -------------------------------------------------------------
   12. Reduced motion (WCAG 2.3.3 AAA)
   ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
    scroll-behavior:           auto   !important;
  }
  .entry__photo img:hover { transform: none; box-shadow: none; }
  .back-to-top            { transform: none; }
  .back-to-top:hover      { animation: none; transform: none; }
}