/* ============================================================
   ANGULAR PHOTOS — style.css
   Design tokens → Reset → Layout → Components → Pages → Utils
   ============================================================ */

/* ── Design tokens ───────────────────────────────────────── */
:root {
  /* Colours */
  --color-bg:       #0d0d0d;
  --color-surface:  #1a1a1a;
  --color-text:     #e8e6e1;
  --color-muted:    #888;
  --color-border:   #222;
  --color-accent:   #e8e6e1;

  /* Typography */
  --font-main: 'Inter', sans-serif;
  --text-xs:   .75rem;
  --text-sm:   .875rem;
  --text-base: 1rem;
  --text-lg:   1.1rem;
  --text-xl:   1.25rem;
  --text-2xl:  clamp(1.75rem, 4vw, 2.4rem);

  /* Spacing */
  --space-xs:  .5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;

  /* Layout */
  --header-h:        56px;
  --gallery-gap:     clamp(6px, 1.2vw, 14px);
  --gallery-min-col: min(260px, 100%);
  --content-max:     700px;
  --text-max:        55ch;   /* comfortable line length */

  /* Motion */
  --duration-fast: .2s;
  --duration-mid:  .4s;
  --ease-out:      cubic-bezier(.25, .46, .45, .94);

  /* Misc */
  --radius: 4px;
}

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

/* Prevent horizontal scroll without hiding intentional overflow */
html { overflow-x: clip; }

/* Smooth scroll — overridden by reduced-motion below */
html { scroll-behavior: smooth; }

/* ── Base ────────────────────────────────────────────────── */
body {
  font-family:      var(--font-main);
  font-size:        var(--text-base);
  line-height:      1.6;
  background-color: var(--color-bg);
  color:            var(--color-text);
  min-height:       100dvh;          /* dvh = accounts for mobile browser chrome */
  display:          flex;
  flex-direction:   column;
}

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

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

/* ── Focus styles (shared, visible only for keyboard) ────── */
:focus-visible {
  outline:        2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius:  var(--radius);
}

/* ── Skip link ───────────────────────────────────────────── */
.skip-link {
  position:      absolute;
  top:           -999px;
  left:          var(--space-sm);
  padding:       var(--space-xs) var(--space-sm);
  background:    var(--color-accent);
  color:         #000;
  font-size:     var(--text-sm);
  font-weight:   700;
  border-radius: var(--radius);
  z-index:       9999;
}
.skip-link:focus { top: var(--space-xs); }

/* ── Header ──────────────────────────────────────────────── */
.header {
  height:          var(--header-h);
  position:        sticky;
  top:             0;
  z-index:         100;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding-inline:  clamp(var(--space-sm), 4vw, 3rem);
  background:      var(--color-bg);
  border-bottom:   1px solid var(--color-border);
}

/* Logo — always first in flex order, above mobile nav overlay */
.logo {
  font-size:      var(--text-xs);
  font-weight:    700;
  letter-spacing: .12em;
  white-space:    nowrap;
  flex-shrink:    0;
  order:          0;
  position:       relative;   /* establishes stacking context */
  z-index:        200;        /* above the nav overlay (z-index: unset) */
  transition:     opacity var(--duration-fast);
}
.logo:hover { opacity: .65; }

/* Desktop nav */
.nav {
  display:     flex;
  align-items: center;
  gap:         clamp(var(--space-sm), 3vw, 2.5rem);
  order:       1;            /* sits between logo and hamburger */
}
.nav a {
  font-size:      var(--text-xs);
  font-weight:    500;
  letter-spacing: .1em;
  color:          var(--color-muted);
  transition:     color var(--duration-fast);
}
.nav a:hover,
.nav a[aria-current="page"] { color: var(--color-text); }

/* Hamburger button — hidden on desktop, shown on mobile */
.nav-toggle {
  display:         none;
  flex-direction:  column;
  justify-content: center;
  gap:             5px;
  width:           32px;
  height:          32px;
  background:      none;
  border:          none;
  cursor:          pointer;
  padding:         4px;
  border-radius:   var(--radius);
  order:           2;          /* always rightmost in the header flex row */
}
.nav-toggle span {
  display:          block;
  height:           1.5px;
  background:       var(--color-text);
  border-radius:    2px;
  transition:       transform var(--duration-fast),
                    opacity   var(--duration-fast);
  transform-origin: center;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── Gallery — layout handled by JS masonry in index.html ── */
main { flex: 1; }

/* ── About page ──────────────────────────────────────────── */
.about {
  max-width:  var(--content-max);
  margin:     var(--space-2xl) auto;
  padding:    0 clamp(var(--space-sm), 4vw, var(--space-md));
}

.about h1 {
  font-size:     var(--text-2xl);
  font-weight:   700;
  letter-spacing: .04em;
  line-height:   1.15;
  margin-bottom: var(--space-sm);
}

.about-sub {
  font-size:     var(--text-lg);
  font-weight:   500;
  color:         var(--color-muted);
  margin-bottom: var(--space-lg);
  line-height:   1.5;
  max-width:     var(--text-max);
}

.about-text {
  font-size:   var(--text-base);
  line-height: 1.75;
  color:       var(--color-text);
  max-width:   var(--text-max);
}
.about-text + .about-text {
  margin-top: 1.25rem;
}

/* ── Contact page ────────────────────────────────────────── */
.contact {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  text-align:      center;
  padding:         var(--space-xl) var(--space-sm);
  gap:             var(--space-sm);
}

.contact-intro {
  font-size:     var(--text-lg);
  line-height:   1.7;
  color:         var(--color-muted);
  max-width:     var(--text-max);
  margin-bottom: var(--space-sm);
}

.contact a {
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity var(--duration-fast);
}
.contact a:hover { opacity: .65; }

/* ── Footer ──────────────────────────────────────────────── */
.footer {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: space-between;
  align-items:     center;
  gap:             var(--space-xs);
  padding:         var(--space-md) clamp(var(--space-sm), 4vw, 3rem);
  border-top:      1px solid var(--color-border);
  font-size:       var(--text-xs);
  color:           var(--color-muted);
  letter-spacing:  .04em;
}

/* ── Mobile nav overlay ──────────────────────────────────── */
@media (max-width: 600px) {
  .nav-toggle { display: flex; }

  .nav {
    /* Covers viewport below the header */
    position:        fixed;
    inset:           var(--header-h) 0 0 0;
    flex-direction:  column;
    justify-content: center;
    gap:             2rem;
    background:      var(--color-bg);
    opacity:         0;
    pointer-events:  none;
    transition:      opacity var(--duration-fast);
  }
  .nav.is-open {
    opacity:        1;
    pointer-events: auto;
  }
  .nav a {
    font-size:      var(--text-xl);
    letter-spacing: .12em;
  }
}

/* ── Reduced-motion: disable all transitions/animations ─── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:   1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:  1ms !important;
    scroll-behavior:      auto !important;
  }
}