/* Frame, panels, chapters, grid and rail (HANDOFF section 4). */

:root {
  /* Header height: 24 + 44 control + 24 (Figma Header 95:625). */
  --header-h: calc(var(--space-24) * 2 + var(--space-48) - var(--space-4));
  /* Where content stands when it holds under the header: the header's bottom
     edge plus space/64, the middle of the large spacing steps (review;
     DESIGN-NOTES 74, 75). 180 at desktop: side titles and other sticky parts
     stick there, and chapters that hold at the top start their content there. */
  --below-header: calc(var(--layout-frame) + var(--header-h) + var(--space-64));

  /* Wide screens (DESIGN-NOTES 76): backgrounds stay full width (frame, red
     and ink chapters, films, full images), but the content stops growing at
     --layout-max and sits centred; the side margins grow instead. All side
     spacing uses these two, derived from the Figma tokens: up to a 1600
     screen they equal --layout-margin and --layout-inset exactly, so laptop,
     tablet and mobile are unchanged. --vw is the screen width without the
     scrollbar (site.js); 100vw until it is set. */
  --layout-max: 1440px;
  --page-margin: max(var(--layout-margin), (var(--vw, 100vw) - var(--layout-max)) / 2);
  --page-inset: calc(var(--page-margin) - var(--layout-frame));
}

/* Red frame: the page background is surface/frame; a fixed strip keeps the top edge while scrolling. */
.frame-top {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  height: var(--layout-frame);
  background: var(--surface-frame);
}

/* Off while a [data-no-frame-top] panel is at the top (Home Highlights): its own
   red edge scrolls away with it instead (header.js; DESIGN-NOTES 35). */
.frame-top.is-off {
  visibility: hidden;
}

.frame {
  padding: var(--layout-frame);
}

/* Two ink panels in a row are split by a red Frame gap (Figma 335:1998, 36 at every size). */
.frame-gap {
  height: calc(var(--space-32) + var(--space-4));
  background: var(--surface-frame); /* its own red, so it can pass over a held chapter */
}

/* Ink panel inside the frame: its inset keeps content on the page margin. */
.panel {
  background: var(--surface-canvas);
  color: var(--text-primary);
  padding: var(--layout-section-y) var(--page-inset);
}

/* First panel of a page keeps room under the fixed header: its content
   starts 64 under the header (inside the frame, that is --below-header). */
.panel--first {
  padding-top: calc(var(--header-h) + var(--space-64));
}

@media (max-width: 1199px) {
  .panel--first {
    padding-top: calc(var(--header-h) + var(--space-48));
  }
}

@media (max-width: 767px) {
  .panel--first {
    padding-top: calc(var(--header-h) + var(--space-32));
  }
}

/* Red chapter: full bleed, content on the page margin. */
.chapter {
  background: var(--surface-canvas);
  color: var(--text-primary);
  padding: var(--layout-section-y) var(--page-margin);
}

.frame .chapter {
  padding-inline: var(--page-inset);
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--layout-columns), minmax(0, 1fr));
  column-gap: var(--layout-gutter);
}

.grid > * {
  grid-column: 1 / -1;
  min-width: 0;
}

.grid > .span-1 { grid-column-end: span 1; grid-column-start: auto; }
.grid > .span-2 { grid-column-end: span 2; grid-column-start: auto; }
.grid > .span-3 { grid-column-end: span 3; grid-column-start: auto; }
.grid > .span-4 { grid-column-end: span 4; grid-column-start: auto; }
.grid > .span-5 { grid-column-end: span 5; grid-column-start: auto; }
.grid > .span-6 { grid-column-end: span 6; grid-column-start: auto; }
.grid > .span-7 { grid-column-end: span 7; grid-column-start: auto; }
.grid > .span-8 { grid-column-end: span 8; grid-column-start: auto; }
.grid > .span-9 { grid-column-end: span 9; grid-column-start: auto; }
.grid > .span-10 { grid-column-end: span 10; grid-column-start: auto; }
.grid > .span-11 { grid-column-end: span 11; grid-column-start: auto; }
.grid > .span-12 { grid-column-end: span 12; grid-column-start: auto; }
.grid > .start-1 { grid-column-start: 1; }
.grid > .start-2 { grid-column-start: 2; }
.grid > .start-3 { grid-column-start: 3; }
.grid > .start-4 { grid-column-start: 4; }
.grid > .start-5 { grid-column-start: 5; }
.grid > .start-6 { grid-column-start: 6; }
.grid > .start-7 { grid-column-start: 7; }
.grid > .start-8 { grid-column-start: 8; }
.grid > .start-9 { grid-column-start: 9; }
.grid > .start-10 { grid-column-start: 10; }
.grid > .start-11 { grid-column-start: 11; }
.grid > .start-12 { grid-column-start: 12; }

@media (max-width: 1199px) {
  .grid > .span-9 { grid-column: 1 / -1; }
  .grid > .span-10 { grid-column: 1 / -1; }
  .grid > .span-11 { grid-column: 1 / -1; }
  .grid > .span-12 { grid-column: 1 / -1; }
  .grid > .t-span-1 { grid-column-end: span 1; }
  .grid > .t-span-2 { grid-column-end: span 2; }
  .grid > .t-span-3 { grid-column-end: span 3; }
  .grid > .t-span-4 { grid-column-end: span 4; }
  .grid > .t-span-5 { grid-column-end: span 5; }
  .grid > .t-span-6 { grid-column-end: span 6; }
  .grid > .t-span-7 { grid-column-end: span 7; }
  .grid > .t-span-8 { grid-column-end: span 8; }
  .grid > .start-1 { grid-column-start: auto; }
  .grid > .start-2 { grid-column-start: auto; }
  .grid > .start-3 { grid-column-start: auto; }
  .grid > .start-4 { grid-column-start: auto; }
  .grid > .start-5 { grid-column-start: auto; }
  .grid > .start-6 { grid-column-start: auto; }
  .grid > .start-7 { grid-column-start: auto; }
  .grid > .start-8 { grid-column-start: auto; }
  .grid > .start-9 { grid-column-start: auto; }
  .grid > .start-10 { grid-column-start: auto; }
  .grid > .start-11 { grid-column-start: auto; }
  .grid > .start-12 { grid-column-start: auto; }
  .grid > .t-start-1 { grid-column-start: 1; }
  .grid > .t-start-2 { grid-column-start: 2; }
  .grid > .t-start-3 { grid-column-start: 3; }
  .grid > .t-start-4 { grid-column-start: 4; }
  .grid > .t-start-5 { grid-column-start: 5; }
  .grid > .t-start-6 { grid-column-start: 6; }
  .grid > .t-start-7 { grid-column-start: 7; }
  .grid > .t-start-8 { grid-column-start: 8; }
  .grid > .t-full { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  .grid > [class*="span-"] { grid-column: 1 / -1; }
  .grid > .m-span-1 { grid-column: auto / span 1; }
  .grid > .m-span-2 { grid-column: auto / span 2; }
  .grid > .m-span-3 { grid-column: auto / span 3; }
  .grid > .m-span-4 { grid-column: auto / span 4; }
}

/* Rail: a vertical Display/XL word on columns 1–2, sticky (desktop). Horizontal title below desktop. */
.rail {
  position: sticky;
  top: var(--below-header); /* 64 under the header (DESIGN-NOTES 75) */
  align-self: start;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}

@media (max-width: 1199px) {
  .grid > .rail {
    grid-column: 1 / -1;
  }

  .rail {
    position: static;
    writing-mode: horizontal-tb;
    transform: none;
  }
}

/* 404 */
.not-found {
  min-height: calc(100svh - var(--layout-frame) * 2);
}

.not-found__content {
  grid-column: 3 / -1;
  display: grid;
  align-content: start;
  gap: var(--space-48);
}

.not-found__actions {
  display: flex;
  align-items: center;
  gap: var(--space-24);
}

@media (max-width: 1199px) {
  .not-found .grid {
    row-gap: var(--space-48);
  }

  .not-found__content {
    grid-column: 1 / -1;
  }
}