/* ---------- GLOBAL / VARIABLES ---------- */
:root {
  --bg: #d9eda4;
  /* header layout (compact like the example) */
  --header-pad-y: 16px;     /* vertical padding for the fixed header */
  --header-pad-x: 24px;     /* horizontal padding */
  --row-gap: 8px;           /* space between row 1 & row 2 */

  --fixed-h: 360px;         /* fallback only; JS will measure exact height */
  --row1-h: 260px;
  --row2-h: 100px;

  --gutter: 24px;
  --img-w: 380px;
  --overlay: rgba(0,0,0,0.8);
  --text: #000;
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ---------- FONT IMPORTS FROM EXAMPLE SITE ---------- */
/* Place the font files at: assets/fonts/  */
@font-face {
  font-family: 'Courier Prime';
  src:
    url('../fonts/courier-prime-regular.woff2') format('woff2'),
    url('../fonts/courier-prime-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Modern No. 20';
  src:
    url('../fonts/modern-no20-italic.woff2') format('woff2'),
    url('../fonts/modern-no20-italic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

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

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
}

/* ---------- FIXED UPPER AREA ---------- */
#arodoet-fixed {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--fixed-h);                      /* fallback */
  z-index: 1000;
  background: var(--bg);
  padding: var(--header-pad-y) var(--header-pad-x);
  display: flex;
  flex-direction: column;
}

.fixed-row-1 {
  display: flex;
  gap: var(--gutter);
  height: var(--row1-h);
  margin-bottom: var(--row-gap);               /* mirrors example spacing */
}

.col { width: 50%; overflow: hidden; }
.bio .bio-text { white-space: pre-wrap; margin: 0; }

/* ---------- TOC (ROW 1, COL 2) ---------- */
.toc { display: flex; flex-direction: column; height: 100%; }

.toc-title {
  text-align: center;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 8px 0;                           /* tighter like the example */
}

.toc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;               /* two numbered columns */
  gap: 16px 24px;
  align-items: start;
}

.toc-list {
  margin: 0;
  padding-left: 20px;                           /* compact number gutter */
  list-style: decimal;
}

.toc-list li { margin: 6px 0; }                 /* consistent rhythm */

.toc-list a {
  text-decoration: none;
  color: var(--text);
  text-transform: uppercase;                    /* ALL CAPS */
  font-weight: 700;                             /* bold */
  letter-spacing: 0.02em;
}

.toc-list a:hover { text-decoration: underline; }

/* ---------- ROTATING BANNER (ROW 2) ---------- */
.fixed-row-2 {
  height: var(--row2-h);
  display: flex;
  align-items: center;
  justify-content: flex-start; /* keep it aligned left as before */
  perspective: none;           /* remove 3D zoom distortion */
  overflow: visible;
}

#rotator {
  font-weight: 700;
  font-size: clamp(48px, 7vw, 96px);
  letter-spacing: 0.02em;
  display: inline-block;
  transform-origin: center center;    /* pivot around its vertical center */
  transform-box: fill-box;            /* stable transform anchor */
  animation: spinY 8s linear infinite; /* slow and steady continuous rotation */
  will-change: transform;
}

@keyframes spinY {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}

/* ---------- SCROLLABLE LOWER AREA ---------- */
/* JS will measure header height and override marginTop/height precisely.
   These are fallbacks so the layout looks right before JS runs. */
#arodoet-scroll {
  margin-top: var(--fixed-h);
  height: calc(100vh - var(--fixed-h));
  overflow: auto;
  padding: 32px var(--header-pad-x);
}

/* Section block */
.folio-section {
  text-align: center;
  padding: 48px 0;
}

/* Section title — adapted to example (Courier Prime, all-caps, bold, tracking) */
.folio-section h3,
.section-title {
  margin: 0 0 24px 0;
  font-family: 'Courier Prime', monospace;      /* use imported font */
  font-size: 20px;
  line-height: 1.25;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.03em;
}

/* Image grid */
.folio-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

.folio-img {
  width: var(--img-w);
  height: auto;
  cursor: pointer;
}

/* ---------- VIMEO ---------- */
.video-embed { display: flex; justify-content: center; }
.video-embed iframe { max-width: 100%; aspect-ratio: 16/9; }

/* ---------- LIGHTBOX ---------- */
#lightbox {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}
#lightbox.open { display: flex; }
#lightbox-img { max-width: 90vw; max-height: 90vh; }
#lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 40px;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
}