/* Patterns ---------------------------------------------------------------------
   Layout patterns shared by every page on the site. These rules were written
   for the M21 page (they came out of its sections sheet, unchanged) and are
   promoted here so the Xhek pages can build on the same pieces: the section
   opening, the display title, the facts card, the quote, the horizontal rail
   and the footer. Anything that is still M21-specific stays in m21.css.

   Sheet order: tokens → fonts → base → components → patterns → header →
   (m21 | xhek) → motion.
   -------------------------------------------------------------------------- */

/* Section wrapper: the padding every full-bleed section uses. The M21 sheet
   applies the same values by section name; new pages can reach for this. */
.section { padding: var(--space-section) var(--pad); }

/* Images carry width and height attributes so the page can lay out before
   they load. Left alone, the height attribute would hold once a rule sets the
   width and the aspect-ratio rules below would be ignored; this keeps every
   image following its width. Rules that pin an image to a box (the hero, the
   bands) set their own height and win by specificity. */
img { height: auto; }

/* The reveals are hidden by base.css and shown by site.js. Without scripting
   there is nothing to show them, so they stay visible: .m-js is only ever set
   by the inline head script, which is to say only when scripts run. */
html:not(.m-js) .reveal { opacity: 1; transform: none; }
html:not(.m-js) .image-reveal img { transform: none; }

/* Display headings ----------------------------------------------------------
   Every section title shares the light serif, uppercase, with a little air in
   the tracking. */
.display-title {
  margin: 0 0 clamp(18px, 2vw, 28px) -.02em;
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: clamp(34px, 3.8vw, 60px);
  letter-spacing: var(--track-display);
  line-height: var(--lead-display);
  text-transform: uppercase;
  font-variant-numeric: lining-nums;
  white-space: nowrap;
}

/* Sections open the conventional way: label, heading, then a body-size
   paragraph, stacked in one column. */
.section-opening { margin-bottom: var(--space-intro); }

.opening-copy { margin: 0; max-width: 52ch; color: var(--ink-2); }
.section-dark .opening-copy { color: var(--cream-2); }

/* Facts card: a dark card of large serif figures over tracked labels. ------ */
.facts-card {
  position: relative;
  z-index: 2;
  align-self: stretch;
  margin-bottom: var(--caption-h);
  padding: clamp(28px, 3vw, 50px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: var(--charcoal-2);
  color: var(--cream);
}

.facts-kicker { position: absolute; top: 32px; left: 36px; margin: 0; font-size: 10px; text-transform: uppercase; letter-spacing: .22em; color: var(--cream-2); }
.facts-card dl { margin: 0 0 30px; display: grid; gap: 18px; }
.facts-card dl div { display: flex; align-items: end; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--line-light); }
.facts-card dt { font-size: 11px; text-transform: uppercase; letter-spacing: .16em; color: var(--cream-2); }
.facts-card dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(34px, 3.2vw, 56px);
  font-weight: var(--w-light);
  line-height: .8;
  letter-spacing: 0;
  font-variant-numeric: lining-nums tabular-nums;
}
.facts-card dd small { font-size: .38em; letter-spacing: .04em; }
.facts-note { margin: 0; max-width: 36ch; font-size: 12px; line-height: 1.6; letter-spacing: .01em; color: var(--cream-2); }

/* A quiet blockquote: italic serif at reading size, marked by a single rule. */
.quote { margin: 0; max-width: 32ch; padding-left: clamp(20px, 2vw, 32px); border-left: 1px solid var(--ink); }
.quote p { margin: 0; font-family: var(--font-display); font-weight: var(--w-light); font-style: italic; font-size: clamp(22px, 1.9vw, 30px); line-height: 1.35; letter-spacing: 0; font-variant-numeric: lining-nums; }
.section-dark .quote { border-left-color: var(--cream); }

/* Slider ----------------------------------------------------------------------
   A native scroll-snap rail of fixed-width cards, cut at the column's edge so
   the next card always shows a little of itself. The browser owns the scroll
   — a drag with the mouse, a swipe on a phone — and nothing else moves: no
   pinning, no drift inside the frame, no zoom on hover and no per-slide
   entrance, each of which read as a jump under the finger on a phone. The
   script only adds the mouse drag and fades the cards that are part-way off.
   -------------------------------------------------------------------------- */
.slider { min-width: 0; }

.slider-track {
  display: flex;
  gap: clamp(28px, 3vw, 48px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.slider-track::-webkit-scrollbar { display: none; }
.slider-track.is-dragging { scroll-snap-type: none; cursor: grabbing; }
.slider-track:focus-visible { outline: 1px solid var(--ink); outline-offset: 10px; }

.slide { flex: 0 0 clamp(240px, 22vw, 340px); margin: 0; scroll-snap-align: start; transition: opacity .5s var(--ease); }
/* Only part of it is on screen: the peek at the edge of the rail. */
.slide.is-off { opacity: .4; }
.slide img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: var(--focus, 50% 50%); background: var(--paper-2); -webkit-user-drag: none; }

/* The card's caption is a kicker over a title, not the two-ended figure line. */
.slide figcaption, .slide-caption { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 20px; }
.slide-kicker { font-size: 10px; line-height: 1.3; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-3); }
.slide-title {
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: clamp(22px, 1.9vw, 30px);
  line-height: 1.1;
  letter-spacing: var(--track-title);
  text-transform: none;
  font-variant-numeric: lining-nums;
  transition: color .3s ease;
}

/* A card that is a link — the project rail on the home page. The whole card
   is the target, its caption a span where a figure's would be. Hover only
   lifts the title's colour: the rail's rule that nothing moves still holds.
   These cards run a little wider than the rail's default, and their caption
   is the other way up from a figure's: the project's name leads, set at the
   size of a section's h3, and its facts follow in one quiet caption line. */
.slide-project { display: block; flex-basis: clamp(260px, 24vw, 380px); }
.slide-project .slide-caption { gap: 12px; padding-top: 22px; }
.slide-project .slide-title { font-size: clamp(28px, 2.4vw, 38px); line-height: 1.05; letter-spacing: 0; }
.slide-project .slide-kicker { letter-spacing: var(--track-caption); }
/* The card closes on a call to action: the tracked label over a hairline, the
   same mark as the page's text links. It is a span, since the card around it
   is already the link, and the card's hover is what lights its rule. */
.slide-cta { margin-top: 10px; padding-bottom: 5px; border-bottom: 1px solid var(--line); font-size: 11px; letter-spacing: .14em; line-height: 1; text-transform: uppercase; transition: border-color .3s ease; }
.slide-project:hover .slide-title, .slide-project:focus-visible .slide-title { color: var(--ink-2); }
.slide-project:hover .slide-cta, .slide-project:focus-visible .slide-cta { border-color: currentColor; }
.slide-project:focus-visible { outline: 1px solid var(--ink); outline-offset: 8px; }
.slider-track.is-dragging .slide-project { cursor: grabbing; }

/* A card whose photograph is still to come: the image's ground, kept to the
   image's proportion, with a note in the corner where the picture will be. */
.slide-placeholder {
  display: flex;
  align-items: flex-end;
  width: 100%;
  aspect-ratio: 4 / 5;
  padding: 18px;
  border: 1px solid var(--line);
  background: var(--paper-2);
  font-size: 10px;
  line-height: 1.3;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Footer ---------------------------------------------------------------------
   A contact band, link columns and a legal base bar on one dark ground.
   -------------------------------------------------------------------------- */
.site-footer { padding: clamp(64px, 8vw, 112px) var(--pad) clamp(24px, 3vw, 40px); background: var(--charcoal-2); color: var(--cream); }
.footer-lead { padding-bottom: clamp(44px, 5vw, 80px); }
.footer-mail { display: inline-block; padding-bottom: 4px; border-bottom: 1px solid rgba(var(--paper-rgb), .35); font-size: clamp(18px, 1.5vw, 22px); font-weight: var(--w-light); letter-spacing: .005em; transition: border-color .3s ease; }
.footer-mail:hover, .footer-mail:focus-visible { border-color: currentColor; }

.footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(30px, 4vw, 60px); padding: clamp(40px, 5vw, 64px) 0; border-top: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light); }
.footer-col h3 { margin: 0 0 20px; font-size: 10px; font-weight: var(--w-regular); text-transform: uppercase; letter-spacing: .22em; color: var(--cream-3); }
.footer-col ul { margin: 0; padding: 0; list-style: none; }
.footer-col a, .footer-col button { display: flex; align-items: center; padding: 6px 0; border: 0; background: transparent; font-size: 16px; font-weight: var(--w-light); letter-spacing: .01em; text-align: left; color: rgba(var(--paper-rgb), .84); cursor: pointer; transition: color .3s ease; }
.footer-col a:hover, .footer-col a:focus-visible, .footer-col button:hover, .footer-col button:focus-visible { color: var(--milk); }
.footer-col address { margin: 0; font-style: normal; font-size: 16px; font-weight: var(--w-light); line-height: 1.6; letter-spacing: .01em; color: rgba(var(--paper-rgb), .84); }

.footer-base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px; padding-top: clamp(20px, 3vw, 30px); }
.footer-base p { margin: 0; font-size: 10px; text-transform: uppercase; letter-spacing: .16em; color: var(--cream-3); }
.footer-coords { font-variant-numeric: tabular-nums; }
.footer-top-link { font-size: 10px; text-transform: uppercase; letter-spacing: .16em; color: var(--cream-2); transition: color .3s ease; }
.footer-top-link:hover, .footer-top-link:focus-visible { color: var(--milk); }

/* Responsive ------------------------------------------------------------- */
@media (max-width: 960px) {
  .display-title { white-space: normal; }
  /* The rail runs edge to edge here, its cards starting on the section's own
     margin. */
  .slider-track { margin: 0 calc(var(--pad) * -1); padding: 0 var(--pad); scroll-padding-inline: var(--pad); }
  .slide { flex-basis: min(72vw, 360px); }
  /* Stacked under a photograph rather than pulled up over it. */
  .facts-card { margin: clamp(22px, 3vw, 34px) 0 0; min-height: 420px; }
  .footer-cols { grid-template-columns: repeat(2, 1fr); row-gap: 44px; }
  .footer-col a, .footer-col button { min-height: 44px; padding: 6px 0; }
  .site-footer { padding-bottom: calc(clamp(24px, 3vw, 40px) + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 680px) {
  .section { padding-top: 92px; padding-bottom: 92px; }
  .section-opening { margin-bottom: 72px; }
  .display-title { font-size: clamp(30px, 8.5vw, 40px); margin-bottom: 18px; }
  .facts-card { margin: 20px 0 0; padding: 26px; min-height: 400px; }
  .facts-kicker { left: 26px; }
  .quote p { font-size: 22px; }
  .footer-cols { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
  .footer-base { flex-direction: column; align-items: flex-start; gap: 16px; }
}