/* ==========================================================================
   Layout - the containers every page is built from, ported from the static
   site (tomcamau/css/base.css).

   Text styles live in typography.css and buttons in buttons.css; this file
   only owns boxes and spacing.
   ========================================================================== */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Page shell --------------------------------------------------------------- */
/* Sticky footer: .site is every in-flow child of <body> - the fixed/sticky
   header takes no space here, only .site-main and .site-footer do - so
   stretching it to at least the viewport height and letting .site-main grow
   pins the footer to the bottom on pages whose content is shorter than the
   screen, without touching pages that are already taller than it. */
.site {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.site-main {
  flex: 1 0 auto;
}

.container {
  width: 100%;
  max-width: calc(var(--content-max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--small {
  --content-max: 1160px;
}

/* Narrow column for running text - articles, search results, comments. */
.container--reading {
  max-width: calc(var(--measure) + var(--gutter) * 2);
}

.section {
  padding-block: calc(var(--space-section) / 2);
}

/* A section whose content is running text rather than a full-width design. */
.section--narrow {
  max-width: var(--measure);
}

/* --- Section heading ----------------------------------------------------------
   The title and lead typography is in typography.css. */
.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* A heading with a hairline running to the right edge - every section of the
   newsroom page opens with one. The ::after eats the remaining width, so the
   line always ends flush with the container. */
.section-head--rule {
  flex-direction: row;
  align-items: center;
  gap: var(--space-2xl);
}

.section-head--rule::after {
  content: "";
  flex: 1 1 0;
  min-width: 0;
  height: 1px;
  background: var(--c-border-light);
}

/* --- Grid --------------------------------------------------------------------- */
.grid {
  display: grid;
  gap: var(--space-lg);
}

.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* --- Hairline ------------------------------------------------------------------ */
.hairline {
  height: 1px;
  width: 100%;
  background: var(--c-hairline);
  border: 0;
}

/* --- Stacks -------------------------------------------------------------------- */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* --- Media -----------------------------------------------------------------
   Global rule: a photo keeps the aspect ratio it has in the design. Never let
   a flex or grid track stretch it to fill leftover height - declare the ratio
   the design draws and let object-fit crop inside it.

   .media is the shorthand: put it on the <img> and set --media-ratio in the
   component's own rule.

       .seminar__poster { --media-ratio: 1400 / 864; }

   Components that were written before this block (the home page photos in
   home.css) spell the same rule out with their own aspect-ratio declaration -
   that is equally fine, what is not fine is leaving the ratio to the layout.
   Logos are the one exception: they use object-fit: contain inside a box, so
   the box has the ratio and the logo keeps its own. */
.media {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--media-ratio, 16 / 10);
  object-fit: cover;
  background: var(--c-media-placeholder);
}

/* --- Brand lockup -----------------------------------------------------------
   The festival seal with its two lines of wordmark, from Figma node 7129:264
   (header) and 7129:295 (footer). One component, two sizes: `.brand--lg` is
   the footer's, roughly two and a third times the header's.

   The wordmark is Arial Bold Italic in the design, which is the one place on
   this site that is not the body face - so it gets its own family token rather
   than being bent into Be Vietnam Pro.

   The leading is an absolute length shared by both lines, not a multiple of
   each line's own size: the design sets 26px in the header and 56px in the
   footer regardless of which of the two lines is being drawn, which is what
   pulls the pair tight together. */
.brand {
  --brand-title: var(--fs-brand-title);
  --brand-sub: var(--fs-brand-sub);
  --brand-leading: var(--lh-brand);

  /* Block flex, not inline-flex: as an inline box it would sit on a line box
     and collect that line's descender space, which put six phantom pixels
     under the header bar - and the bar's height is a number other sheets
     position against. */
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-width: 0;
}

.brand--lg {
  --brand-title: var(--fs-brand-title-lg);
  --brand-sub: var(--fs-brand-sub-lg);
  --brand-leading: var(--lh-brand-lg);

  gap: clamp(var(--space-md), 1.46vw, 28px);
}

/* The seal is a round raster badge, so it is sized in both directions and left
   to keep its own edges - no object-fit crop, nothing to crop. */
.brand__mark {
  flex: none;
  width: var(--header-logo);
  height: var(--header-logo);
}

.brand--lg .brand__mark {
  width: clamp(72px, 6.875vw, 132px);
  height: clamp(72px, 6.875vw, 132px);
}

.brand__words {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-family: var(--font-wordmark);
  font-weight: var(--fw-bold);
  font-style: italic;
  line-height: var(--brand-leading);
  letter-spacing: var(--ls-nav);
  white-space: nowrap;
}

.brand__title {
  font-size: var(--brand-title);
}

.brand__sub {
  font-size: var(--brand-sub);
}