/* =========================================================
   anchor point studio — base (shared across public pages)
   ========================================================= */

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

/* APS font 2.002 (SIL OFL 1.1, a modified Inter 4.1; fonts/aps/LICENSE.txt and FONTLOG.txt).
   One variable file, weights 300-600, Latin range; -ext only loads for a page that shows one of its
   characters. partials.php preloads the Latin file: keep its ?v= in step with the url here.
   'APS font fallback' is the system Arial sized like APS font, so nothing moves when it arrives. */
@font-face {
  font-family: 'APS font';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/aps/APSFont-Variable-ext.woff2?v=2.002') format('woff2');
  unicode-range: U+0100-0130,U+0132-0148,U+014A-0151,U+0154-01C3,U+01C5-0254,U+0256-027B,U+027E-0284,U+0286-0290,U+0292-02A4,U+02A6-02BA,U+02BD-02C5,U+02C7-02D9,U+02DB,U+02DD-0303,U+0306-0307,U+0309-030A,U+030C,U+030F,U+0313,U+0315,U+031B,U+0323,U+0326-0328,U+032C,U+0337-0338,U+0342-0343,U+0346-036F,U+0374-0376,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03D7,U+03DC-03DD,U+03F0-03F6,U+03F9-03FA,U+03FC-0479,U+0480-049D,U+04A0-04FF,U+052F,U+0E3F,U+1D00,U+1D0D,U+1D1B,U+1D43,U+1D47-1D49,U+1D4D,U+1D4F-1D50,U+1D52,U+1D56-1D58,U+1D5B,U+1D62-1D65,U+1D9C,U+1DA0,U+1DBB,U+1DBF-1DF5,U+1DFC-1E9B,U+1E9D-1F15,U+1F18-1F1D,U+1F20-1F45,U+1F48-1F4D,U+1F50-1F57,U+1F59,U+1F5B,U+1F5D,U+1F5F-1F7D,U+1F80-1FB4,U+1FB6-1FC4,U+1FC6-1FD3,U+1FD6-1FDB,U+1FDD-1FEF,U+1FF2-1FF4,U+1FF6-1FFE,U+2070-2071,U+2074-208E,U+2090-209C,U+20A0-20AB,U+20AD-20AF,U+20B1-20B5,U+20B8-20BA,U+20BC-20C0,U+20DB-20DE,U+20E8,U+20F0,U+2100-2101,U+2103,U+2105-2106,U+2109,U+2113,U+2116-2117,U+211E-2121,U+2126,U+212A-212B,U+212E,U+2132,U+213B,U+214D,U+2150-217F,U+2183-2186,U+2189,U+21A9-21AA,U+21B0-21B1,U+21B3-21B5,U+21BA-21BB,U+21D0,U+21D2,U+21D4,U+21DE-21DF,U+21E4-21E5,U+21E7,U+21EA,U+2202,U+2205-2206,U+220F,U+2211,U+221A,U+221E,U+222B,U+2236,U+2248,U+2260,U+2264-2265,U+2295-2298,U+2303-2305,U+2318,U+2325-2327,U+232B,U+2380,U+2387,U+238B,U+23CE-23CF,U+2423,U+2460-2468,U+24B6-24CF,U+24EA,U+25A0-25A2,U+25AA,U+25B2-25B3,U+25B6-25B7,U+25BA-25BD,U+25C0-25C1,U+25C4-25C7,U+25CA-25CB,U+25CF,U+25E6,U+25EF,U+2600,U+2605-2606,U+263C,U+2661,U+2665,U+266A-266B,U+26A0,U+2713,U+2717,U+2756,U+2764,U+2780-2788,U+27EF,U+27F5-27FA,U+2913,U+2A38,U+2B06,U+2B12-2B13,U+2B1C,U+2B24,U+2C7C,U+2C7F,U+2DFF,U+2E18,U+A69F,U+A7FF,U+A92E,U+E000,U+E002-E05E,U+E06A-E0BD,U+E0C8-E0CC,U+E0DC-E0E6,U+E0F3-E0F5,U+E106,U+E109-E10A,U+E10C-E10F,U+E111-E113,U+E117-E118,U+E121-E122,U+E124,U+E12A-E15E,U+E163,U+E1C3,U+E1D2-E1DF,U+E1E1-E2DC,U+EE01-EE07,U+EE09-EE0A,U+EE0C-EE12,U+EE14,U+EE17,U+EE1D-EE45,U+EE47-EE84,U+EE87-EED6,U+EED8-EEE1,U+F6C3,U+1F12F-1F149,U+1F16A-1F16B,U+1F850,U+1F852;
}
@font-face {
  font-family: 'APS font';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/aps/APSFont-Variable.woff2?v=2.002') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2190-2199,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'APS font fallback';
  font-style: normal;
  font-weight: 300;
  src: local('Arial'), local('ArialMT'), local('Liberation Sans');
  size-adjust: 99.42%;
  ascent-override: 104.32%;
  descent-override: 29.08%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'APS font fallback';
  font-style: normal;
  font-weight: 400;
  src: local('Arial'), local('ArialMT'), local('Liberation Sans');
  size-adjust: 99.65%;
  ascent-override: 104.08%;
  descent-override: 29.01%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'APS font fallback';
  font-style: normal;
  font-weight: 500;
  src: local('Arial'), local('ArialMT'), local('Liberation Sans');
  size-adjust: 99.95%;
  ascent-override: 103.76%;
  descent-override: 28.92%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'APS font fallback';
  font-style: normal;
  font-weight: 600;
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold');
  size-adjust: 94.13%;
  ascent-override: 110.18%;
  descent-override: 30.71%;
  line-gap-override: 0%;
}

:root {
  /* colour: the brand kit's tokens (aps-brand/tokens/tokens.json 1.1.0). ink, paper, ember,
     and solid support tones; secondary text is --color-muted, never a dimmed paper */
  --color-bg:       #0C0C0D;
  --color-surface:  #141415;
  --color-raised:   #1C1C1E;
  --color-rule:     #2A2A2C;
  --color-edge:     #6B6762;
  --color-text:     #FCF7F1;
  --color-muted:    #9A9590;
  --color-faint:    #5E5A56;
  --color-accent:   #C56A2D;
  --color-ok:       #8FB58A;
  --color-warn:     #D8A657;
  --color-error:    #D9694F;

  /* type: a fixed scale for everything people read; only display type follows the viewport */
  --fs-label:   12px;
  --fs-small:   13px;
  --fs-ui:      14px;
  --fs-body:    16px;
  --fs-sub:     18px;
  --fs-title:   24px;
  --fs-display: clamp(34px, 3.4vw, 80px);
  --fs-hero:    clamp(44px, 5vw, 120px);

  /* space */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  /* motion: nothing bounces */
  --ease:   cubic-bezier(0.2, 0, 0, 1);
  --t-fast: 120ms;
  --t-base: 180ms;
  --t-slow: 280ms;

  --wrap:       233.33vh;   /* the studio site's frame: full width until the window is wider than 21:9 */
  --page-inset: 32px;
}
/* the page is as wide as the window, so on a large one the reading sizes step up once */
@media (min-width: 1600px) {
  :root {
    --fs-label: 13px;
    --fs-small: 14px;
    --fs-ui:    15px;
    --fs-body:  17px;
    --fs-sub:   20px;
    --fs-title: 28px;
  }
}

.grain-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background-image: url('../assets/images/pattern.png');
  background-repeat: repeat;
  background-size: auto;
  mix-blend-mode: hard-light;
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: 'APS font', 'APS font fallback', sans-serif;
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.5;
  text-transform: lowercase;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

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

button {
  font-family: inherit;
  text-transform: lowercase;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

input,
textarea {
  font-family: inherit;
  text-transform: lowercase;
}

.keep-case {
  text-transform: none;   /* view_text(): words written in capitals on purpose ("RAW video") */
}

::placeholder {
  text-transform: lowercase;
}

/* =========================================================
   page wrapper
   ========================================================= */

.page-wrapper {
  width: min(100%, var(--wrap));
  margin: 0 auto;
  padding: 0 var(--page-inset);
  position: relative;
}

/* =========================================================
   utilities
   ========================================================= */

.section-label-wrapper {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 0;
  align-self: flex-start;
}
.section-label {
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  color: var(--color-muted);
  white-space: nowrap;
  font-weight: 300;
}
.section-rule {
  flex: 1;
  height: 1px;
  background: var(--color-rule);
}

.section-content-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}
section[id] {
  scroll-margin-top: 88px;
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================
   nav
   ========================================================= */

.nav {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, var(--wrap));
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px var(--page-inset);
}
.nav::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  z-index: -1;
  pointer-events: none;
  transition: background 0.4s ease, backdrop-filter 0.4s ease;
}
.nav.scrolled::before {
  background: rgba(12, 12, 13, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.nav-logo img {
  height: 28px;
  width: auto;
  filter: invert(1) drop-shadow(0 2px 20px rgba(0, 0, 0, 0.6));
}
/* the studio site's bar, rule for rule (aps-apex css/base.css); only the links differ. The link
   size is the studio's 1.5vh, held at the small step so it stays readable in a short window:
   the one place outside display type that follows the viewport. */
.nav-links {
  display: flex;
  gap: 18px;
  list-style: none;
}
.nav-links a {
  font-size: max(var(--fs-small), 1.5vh);
  font-weight: 400;
  color: var(--color-text);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.55);
  transition: opacity 0.2s ease;
}
.nav-links a:hover {
  opacity: 0.7;
}

.nav-toggle {
  display: none;
  width: 28px;
  height: 18px;
  position: relative;
  padding: 0;
}
.nav-toggle span,
.nav-toggle::before,
.nav-toggle::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-text);
  transition: transform 0.3s ease, opacity 0.3s ease, top 0.3s ease;
}
.nav-toggle::before { top: 0; }
.nav-toggle span    { top: 50%; transform: translateY(-50%); }
.nav-toggle::after  { top: calc(100% - 1px); }

body.menu-open .nav-toggle::before {
  top: 50%;
  transform: rotate(45deg);
}
body.menu-open .nav-toggle::after {
  top: 50%;
  transform: rotate(-45deg);
}
body.menu-open .nav-toggle span {
  opacity: 0;
}

/* =========================================================
   footer — shared by index.php and book.php
   ========================================================= */

.footer {
  color: var(--color-text);
  display: flex;
  flex-direction: column;
}
.footer-columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  padding: 56px 0 48px;
  align-self: stretch;
  border-top: 1px solid var(--color-rule);
}
.footer-col h4 {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: 20px;
}
.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-col a {
  font-size: var(--fs-ui);
  font-weight: 300;
  color: var(--color-muted);
  transition: color var(--t-fast) var(--ease);
}
.footer-col a:hover {
  color: var(--color-text);
}
.footer-bottom {
  border-top: 1px solid var(--color-rule);
  padding: 24px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-small);
  font-weight: 300;
  color: var(--color-muted);
  align-self: stretch;
}
.footer-socials {
  display: flex;
  align-items: center;
  gap: 20px;
}
.footer-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  transition: opacity 0.2s ease;
}
.footer-socials a:hover {
  opacity: 0.7;
}
.footer-socials svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* footer — tablet (kept before the ≤767 block so 767 wins at narrow widths) */
@media (max-width: 1199px) {
  .footer-columns { gap: 32px; }
}

/* =========================================================
   nav — mobile breakpoint
   ========================================================= */

@media (max-width: 767px) {
  /* reduced page inset on phones — frees ~24px of horizontal real estate */
  .page-wrapper { --page-inset: 20px; }

  /* strip the centering transform on phones — the nav is already 100% wide here,
     and an active transform on .nav makes it the containing block for the
     position:fixed .nav-links overlay (so inset:0 would resolve against the
     nav bar, not the viewport) */
  .nav {
    padding: 18px var(--page-inset);
    left: 0;
    width: 100%;
    transform: none;
  }
  .nav-links {
    position: fixed;
    inset: 0;
    z-index: 105;
    background: rgba(12, 12, 13, 0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    transform: translateX(100%);
    transition: transform 0.4s ease;
  }
  .nav-links a { font-size: 4.6vw; }
  body.menu-open .nav-links { transform: translateX(0); }

  /* enlarge hit area to ~44x44 while keeping bars at 28x18 visually */
  .nav-toggle {
    display: block;
    z-index: 110;
    position: relative;
    width: 44px;
    height: 44px;
  }
  .nav-toggle span,
  .nav-toggle::before,
  .nav-toggle::after {
    left: 50%;
    right: auto;
    width: 28px;
    transform: translateX(-50%);
  }
  .nav-toggle::before { top: calc(50% - 9px); }
  .nav-toggle span    { top: 50%; transform: translate(-50%, -50%); }
  .nav-toggle::after  { top: calc(50% + 8px); }
  body.menu-open .nav-toggle::before { top: 50%; transform: translateX(-50%) rotate(45deg); }
  body.menu-open .nav-toggle::after  { top: 50%; transform: translateX(-50%) rotate(-45deg); }

  /* footer */
  .footer-columns {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 24px;
    padding: 48px 0 40px;
  }
  .footer-col h4 { margin-bottom: 16px; }
  .footer-col a  { font-size: 15px; overflow-wrap: break-word; }
  .footer-col ul { gap: 12px; }
  .footer-bottom {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
}

/* footer — small-phone polish */
@media (max-width: 380px) {
  .footer-columns { grid-template-columns: 1fr; }
}

/* the Meta pixel's consent banner (partials.php, js/consent.js): outside the US only */
.consent {
  position: fixed;
  left: var(--page-inset);
  right: var(--page-inset);
  bottom: 16px;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 720px;
  margin: 0 auto;
  padding: 12px 12px 12px 18px;
  background: var(--color-raised);
  border: 1px solid var(--color-rule);
}
.consent[hidden] { display: none; }
.consent-text { font-size: var(--fs-ui); font-weight: 300; line-height: 1.5; }
.consent-text a { text-decoration: underline; text-underline-offset: 3px; }
.consent-actions { display: flex; gap: 10px; flex-shrink: 0; }
@media (max-width: 767px) {
  .consent { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px; bottom: 12px; }
  .consent-actions .btn { flex: 1; }
}