/* ==========================================================================
   devanshi jain — paper pages (press, chapters index, terms)
   The bars every paper page shares: the home page's logo (top-left) and footer
   (bottom-left) stay fixed, the page title sits top-right, and the page's own
   content scrolls between them in .page-frame. Each page adds its own stylesheet.
   ========================================================================== */

:root {
  --paper: #fcfcfc;
  --ink: #4a4c4b;
  --ink-soft: #5e605f;
  --font: "Avenir", "Avenir Next", "Nunito Sans DJ", "Nunito Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  /* the home page's measurements (site.css), so the bars sit exactly where they do there */
  --text: 16px;
  --side: clamp(20px, 3.4vw, 64px);
  --right: clamp(20px, 4.2vw, 76px);
  --logo-w: clamp(104px, 7.4vw, 136px);
  --logo-top: clamp(18px, 5.3vh, 60px);
  /* desktop: the footer + sound sit as high off the bottom as on the home page.
     (phones: the last line sits ~4px above the bottom edge, see the phone block) */
  --edge-y: clamp(18px, 5.6vh, 64px);
  --base-gap: 9px;                    /* air under the letters inside a footer line (measured on the ink) */
  --safe-b: env(safe-area-inset-bottom, 0px);   /* iPhone home bar */
  --icon: clamp(18px, 1.45vw, 24px);
  --icon-gap: clamp(12px, 1.6vh, 20px);
  --link-h: calc(1.7 * var(--text));
  --foot-lines: 2;                    /* text links in the footer (content/home.php 'footer') */
  --fade: 28px;                       /* content fades softly under the bars */
  /* where the scrolling area starts and ends */
  --frame-top: calc(var(--logo-top) + var(--logo-w) * 151 / 600 + clamp(20px, 4vh, 44px));
  --frame-bottom: calc(var(--edge-y) + var(--safe-b) + var(--foot-lines) * var(--link-h) + var(--icon-gap) + var(--icon) + clamp(16px, 3vh, 36px));
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0; background: var(--paper); color: var(--ink-soft);
  font-family: var(--font); font-style: italic; font-weight: 300;
  font-size: var(--text); line-height: 1.6; letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow: hidden;                   /* only the content scrolls */
}
h1 { margin: 0; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 1px dotted var(--ink); outline-offset: 4px; }
a, button, summary { touch-action: manipulation; }
.is-soon { cursor: default; }

/* ---------- top bar (fixed) ---------- */
.page-head {
  position: fixed; z-index: 2; top: var(--logo-top); left: var(--side); right: var(--right);
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  -webkit-user-select: none; user-select: none;
}
.page-home { display: block; position: relative; }
/* the original wordmark's ink starts 2/600 in; pull it back so it lines up with the footer */
.page-home img { display: block; width: var(--logo-w); height: auto; margin-left: calc(var(--logo-w) * -2 / 600); }
.page-home::after { content: ""; position: absolute; inset: -8px; }
.page-title { font-size: 1em; font-weight: 300; color: var(--ink); letter-spacing: 0.03em; line-height: 1.45; }
/* a page title that opens the page's text (lab + materials, presentations: 'title_pick' in the head partial) */
.page-title__pick { position: relative; padding: 0; border: 0; background: none; font: inherit; color: inherit; letter-spacing: inherit; cursor: pointer; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.page-title__pick::after { content: ""; position: absolute; inset: -11px -12px; }
.page-title__pick.is-on { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
@media (hover: hover) { .page-title__pick:hover { opacity: .6; } }
@media (hover: none) { .page-title__pick:active { opacity: .55; } }
.page-title__pick:focus-visible { outline: 1px dotted var(--ink); outline-offset: 4px; }

/* ---------- the page's content (scrolls between the bars) ---------- */
.page-frame {
  position: fixed; z-index: 1; left: 0; right: 0; top: var(--frame-top); bottom: var(--frame-bottom);
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
}
.page-frame::-webkit-scrollbar { display: none; }

/* ---------- bottom bar (fixed): the home page's footer, in ink on paper ---------- */
.foot { position: fixed; z-index: 2; left: var(--side); bottom: calc(var(--edge-y) + var(--safe-b)); color: var(--ink); -webkit-user-select: none; user-select: none; }
.foot ul { padding: 0; list-style: none; }
.foot__icons { display: flex; gap: clamp(26px, 2.4vw, 40px); margin: 0 0 var(--icon-gap); }
.foot__links { margin: 0; }
.foot__icons a { display: block; position: relative; opacity: .95; transition: opacity .2s; }
.foot__icons a::after { content: ""; position: absolute; inset: -12px -12px; }
.foot__icons a[aria-disabled="true"] { cursor: default; }
.foot__icons svg { display: block; width: var(--icon); height: auto; }
.foot__links li { font-size: var(--text); line-height: 1.7; letter-spacing: 0.05em; }
.foot__link { display: inline-block; position: relative; }
.foot__link::after { content: ""; position: absolute; inset: -3px -12px; }        /* stacked lines touch, never overlap */
.foot__links li:first-child:last-child .foot__link::after { inset: -11px -14px; }

/* ---------- sound (fixed, bottom-right): the home page's control, level with the footer's last line ---------- */
.sound {
  position: fixed; z-index: 2; right: var(--right); bottom: calc(var(--edge-y) + var(--safe-b));
  display: flex; align-items: center; gap: clamp(16px, 1.7vw, 28px);
  height: var(--link-h);              /* one footer line tall, so 'sound off' shares the baseline of 'terms' (the wave may overhang) */
  margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--text); line-height: 1.7; letter-spacing: 0.12em; word-spacing: 0.25em;
  color: var(--ink); -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
.sound::after { content: ""; position: absolute; inset: -9px -10px; }
/* waveform: five hairline bars that breathe while the music plays */
.sound__wave {
  display: block; width: auto; height: clamp(18px, 1.4vw, 21px); overflow: visible;
  /* the bars stand on the same line as the letters, so even at full height they never drop below
     the text (or, on phones, past the bottom edge) */
  align-self: flex-end; margin-bottom: var(--base-gap);
}
.sound__wave line { stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; transform-box: fill-box; transform-origin: center; }
.sound[aria-pressed="true"] .sound__wave line { animation: wave 1.4s ease-in-out infinite; }
.sound[aria-pressed="true"] .sound__wave line:nth-child(2) { animation-delay: -.5s; }
.sound[aria-pressed="true"] .sound__wave line:nth-child(3) { animation-delay: -.9s; }
.sound[aria-pressed="true"] .sound__wave line:nth-child(4) { animation-delay: -.3s; }
.sound[aria-pressed="true"] .sound__wave line:nth-child(5) { animation-delay: -1.1s; }
.sound[aria-pressed="false"] .sound__wave line { transform: scaleY(.35); transition: transform .4s cubic-bezier(.22, .61, .25, 1); }
@keyframes wave { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.45); } }

@media (hover: hover) { .page-home:hover, .foot__icons a:hover, a.foot__link:hover, .sound:hover { opacity: .6; } }
@media (hover: none) { .foot__icons a:active, .foot__link:active, .page-home:active, .sound:active { opacity: .55; transition: opacity 0s; } }
@media (prefers-reduced-motion: reduce) { .foot__icons a { transition: none; } .sound__wave line { animation: none !important; } }

/* phones: the home page's phone measurements */
@media (max-width: 719px) {
  :root {
    --text: 13px; --side: 24px; --right: 24px; --logo-w: 104px; --logo-top: 22px;
    --icon: 17px; --icon-gap: 10px; --link-h: 24px; --fade: 22px;
    --edge-y: -4px;                   /* the last line's letters sit ~4px above the bottom edge */
    --base-gap: 8px;
  }
  .foot__icons { gap: 26px; }
  .foot__links li { line-height: 24px; }
  .sound { gap: 12px; line-height: 24px; }
  .sound__wave { height: 17px; }
}

/* short landscape screens */
@media (max-height: 520px) and (min-width: 720px) { :root { --icon-gap: 6px; } }