/* Page shell: header, nav, sections, skip link. */

.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -3rem;
  background: var(--color-accent);
  color: #fff;
  padding: var(--space-1) var(--space-2);
  border-radius: 0 0 var(--radius) var(--radius);
  z-index: 100;
  transition: top var(--transition);
}
.skip-link:focus { top: 0; }

.site-header {
  /* Fixed (not sticky) so it doesn't reserve space at the top — the hero
     slides up beneath it and its background reaches the very top of the page.
     Anchor jumps stay clear via html { scroll-padding-top }. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: color-mix(in srgb, var(--color-bg) 82%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition), backdrop-filter var(--transition),
    border-color var(--transition), transform var(--transition);
}

/* Hidden while a `hideHeader` section (e.g. the hero) is under the header line;
   slides back in once you scroll into the next section. header.js drives it. */
.site-header[data-hidden="true"] {
  transform: translateY(-100%);
  pointer-events: none;
}

/* Over the hero: drop the background/blur/border so the image reads through.
   Links stay visible; a soft text-shadow keeps them legible over the photo. */
.site-header[data-over-hero="true"] {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
.site-header[data-over-hero="true"] .site-brand,
.site-header[data-over-hero="true"] .site-nav a {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.02em;
}

/* Optional brand mark before the name (manifest `site.brandMark`). Sized in
   `em` so it tracks the brand's font-size instead of needing its own number,
   and painted as a currentColor mask — the same idiom as the footer monogram
   and the logo wall — so it matches the brand text in either theme and over
   the hero. Map a --svg-* token per [data-logo] below. */
.site-brand__mark {
  flex: 0 0 auto;
  width: 1.7em;
  height: 1.7em;
  background-color: currentColor;
  -webkit-mask: var(--logo-src) center / contain no-repeat;
  mask: var(--logo-src) center / contain no-repeat;
}
.site-brand__mark[data-logo="rkr"] { --logo-src: var(--svg-rkr); }

/* Over the hero the brand text gets a text-shadow for legibility; a mask has no
   text to shadow, so give the mark the equivalent. */
.site-header[data-over-hero="true"] .site-brand__mark {
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
}

.site-nav { margin-left: auto; }
.site-nav ul {
  list-style: none;
  display: flex;
  gap: var(--space-3);
  padding: 0;
}
.site-nav a { color: var(--color-muted); }
.site-nav a:hover { color: var(--color-text); text-decoration: none; }

.motion-toggle {
  background: transparent;
  color: var(--color-muted);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  font-size: 0.85rem;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}
.motion-toggle:hover { color: var(--color-text); border-color: var(--color-muted); }

/* Sections stack vertically; each is skippable by plain scrolling. */
.section {
  /* padding: var(--space-6) var(--space-3);
  max-width: 1100px; */
  margin: 0 auto;
  scroll-margin-top: 5rem;
}

/* Hero: full-height top section under the fixed header. A vertically-centered
   text column (`.hero__layout`, flipped to either edge by `data-hero-align`)
   over a full-bleed background, with an optional systems-index strip pinned to
   the bottom. Light-on-image text regardless of theme (it sits on a photo). */
.section--hero {
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  position: relative;
  color: #fff;
}
.hero__layout {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  padding: var(--space-6) var(--space-5);
}
/* Directional scrim behind the text so it stays legible over any background;
   darkens the aligned edge (flips with data-hero-align). */
.hero__layout::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
/*  background: linear-gradient(to right, rgba(10, 12, 16, 0.62), rgba(10, 12, 16, 0) 58%);*/ /*Original mountain*/
/*  background: linear-gradient(90deg,rgba(0, 0, 0, .9) 0%,rgba(0, 0, 0, .7) 35%, rgba(0, 0, 0, .2) 40%, rgba(0, 0, 0, 0) 100%);*/ /* techworld */
  background: linear-gradient(90deg,rgba(0, 0, 0, .5) 0%,rgba(0, 0, 0, .4) 35%, rgba(0, 0, 0, .3) 40%, rgba(0, 0, 0, 0) 100%);
}
.section--hero[data-hero-align="right"] .hero__layout {
  justify-content: flex-end;
}
.section--hero[data-hero-align="right"] .hero__layout::before {
  background: linear-gradient(to left, rgba(10, 12, 16, 0.62), rgba(10, 12, 16, 0) 58%);
}
.hero__inner {
  position: relative;
  z-index: 1;
}

.section__head {
  /* margin: var(--space-4) 0; */
}
/* Opt-in section-title icon (content `titleIcon: true`): the section's glyph
   before the heading text. Sized to the heading via `em`, accent-colored,
   inline so a multi-line heading still wraps naturally beside it. */
.section__head-icon {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  margin-right: 0.55rem;
  vertical-align: -0.22em;
  color: var(--color-text);
}
.section__head-icon .trait__icon {
  display: block;
  width: 100%;
  height: 100%;
  color: inherit; /* override .trait__icon's default accent → follow the span (--color-text) */
}
.section__eyebrow { 
    margin: var(--space-3) 0; 
    width:85%;

    font-size: 1rem;
    color: var(--color-accent);
    font-weight: bold;
}
.section__intro { color: var(--color-muted); }
.section__error { color: #f7768e; }

/* Optional section hero: an image column flush to the viewport edge, filling
   the full height of the section, beside the content column. The section drops
   its max-width + padding (moved onto the content column) so the image bleeds
   to the edge. `section--split` is set by main.js when content has a `hero`. */
.section--split {
  max-width: none;
  padding: 0;
}
.section__split {
  display: flex;
  gap: 0;
  align-items: stretch; /* image column stretches to the content's height */
}
.section__split[data-hero-side="right"] { flex-direction: row-reverse; }

.section__aside {
  flex: 0 0 30%;
  position: relative; /* media fills it absolutely */
  min-height: 0;
}
.section__main {
  flex: 1 1 55%;
  min-width: 0; /* min-width:0 lets cards shrink */
  padding: var(--space-6) var(--space-3);
}

.section__aside-media,
.section__aside img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* fill the column without distortion */
}

.section__aside-atlas{
  object-fit: contain !important;
  background-color:black !important;
}

/* "columns" layout (opt-in via manifest layout:"columns"). The case-studies
   renderer emits a featured card full-width on top, then this grid:
   image (optional) / text rail / cards — 25/25/50 with an image, 25/75 without.
   Unlike section--split, this keeps the section's max-width + padding, so the
   image is an inner column rather than an edge-bleed aside. */
.section__columns {
  /* display: grid;
  gap: var(--space-4);
  align-items: stretch; image column stretches to the tallest column */
 display: grid;
  grid-template-columns:
    minmax(260px, 30vw)
    minmax(260px, 1fr)
    minmax(520px, 2fr);

  align-items: stretch;
  gap: 0;
  /* min-height: 720px; */
}
.section__columns[data-cols="3"] { 
  grid-template-columns: 1.5fr 1.2fr 1.3fr; 

}
.section__columns[data-cols="2"] { 
  grid-template-columns: 1.3fr 2.7fr; 
}


.section__columns[data-cols="3"] {
  display: grid;
  grid-template-columns: 1.5fr 1.2fr 1.3fr; 
  grid-template-areas:
    "media rail cards";
        /* border-top: 1px solid rgba(0, 0, 0, 0.05); */
  margin:85px 0px;
}

.section__columns[data-cols="3"][data-hero-side="right"] {
    grid-template-columns: 1.3fr 1.2fr 1.5fr; 
  grid-template-areas:
    "cards rail media";
}

.section__columns-media {
  grid-area: media;
}

.section__columns-rail {
  grid-area: rail;
}

.section__columns-cards {
  grid-area: cards;
}

/* Third column: prominent featured cards stacked vertically, with the
   "Additional Examples" toggle beneath them. */
.section__columns-featured {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  /* padding: clamp(2rem, 4vw, 4rem); */
  padding: var(--space-2);
  justify-content: flex-start;
}

.section__columns-featured .section__more {
  align-self: flex-start;
  margin-top: var(--space-1);
}

/* "All Projects" + the chip strip on one line; chips wrap under the button when
   there are more than the column is wide. */
.section__more-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-1);
}

.section__more-row .section__more {
  margin-top: 0;
}







/* The image column: media absolute-fills it (see .section__aside-media above).
   align-items:stretch gives it height on desktop; a min-height guards short
   sections. */
.section__columns .section__aside { 
  /* min-height: 260px; */
  position: relative;
  min-height: 100%;
}

.section__overview {
  padding: clamp(2rem, 5vw, 5rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}


/* Section Rail */
.section__rail{
  padding:20px;
}


/* Right project panel */
.section__projects {
  padding: clamp(2rem, 4vw, 4rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.section__projects .cards--supporting {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

@media (min-width: 1500px) {
  .section__projects .cards--supporting {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.section__projects .feature {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(260px, 1.2fr);
  margin-bottom: 0;
}

.section__projects .feature__media {
  width: 100%;
  height: 100%;
  min-height: 260px;
  aspect-ratio: auto;
  object-fit: cover;
}

@media (max-width: 1000px) {
  /* Columns layout collapses to a single stack. Two things MUST be reset, or
     the columns "smash" instead of stacking:
     1. The track list → 1fr (and it must target the [data-cols] selectors, not
        just .section__columns, whose lower specificity loses to them).
     2. The named-area template → a single-column stack. A one-row
        "media rail cards" template forces 3 columns even when the track list is
        1fr, which was the underlying bug. Order stacked: title/intro, image,
        then the featured project. */
  .section__columns,
  .section__columns[data-cols="2"] {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .section__columns[data-cols="3"],
  .section__columns[data-cols="3"][data-hero-side="right"] {
    grid-template-columns: 1fr;
    grid-template-areas:
      "rail"
      "media"
      "cards";
    min-height: auto;
  }

  .section__columns .section__aside {
    min-height: 42vh;
  }

  .section__overview,
  .section__projects {
    padding: var(--space-5) var(--space-3);
  }

  .section__projects .cards--supporting {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}

.section--has-background {
  position: relative;
  isolation: isolate;
  background-color: var(--section-bg-color, transparent);
}

/* Break out of the section's max-width box so the backdrop spans the full
   viewport width (edge to edge) while covering the section's full height.
   `cover` scales the image to fill without distortion (crops the overflow). */
.section--has-background::before,
.section--has-background::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100%;
  transform: translateX(-50%);
}

.section--has-background::before {
  z-index: -2;
  background-image: var(--section-bg-image, none);
  background-position: var(--section-bg-position, center);
  background-size: var(--section-bg-size, cover);
  background-repeat: var(--section-bg-repeat, no-repeat);
}

.section--has-background::after {
  z-index: -1;
  background: var(--section-bg-overlay, transparent);
  pointer-events: none;
}


.section--has-video {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* Overlay wash painted over the video (mirrors .section--has-background::after).
   The video sits at z-index -2, this at -1, content above both. */
.section--has-video::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--section-bg-overlay, transparent);
  pointer-events: none;
}

.section__bg-video {
  position: absolute;
  inset: 0;
  z-index: -2;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: var(--section-bg-position, center);

  pointer-events: none;
}

@media (max-width: 900px) {
  .section__split,
  .section__split[data-hero-side="right"] { flex-direction: column; }
  /* Stacked: the image becomes a top banner. The aside has no in-flow content
     of its own (media is absolute), so give it an explicit height. */
  .section__aside { flex-basis: auto; height: 42vh; }
  .section__main { padding: var(--space-5) var(--space-3); }
  /* (columns-layout stacking is handled authoritatively in the ≤1000px block
     above — it resets both the track list AND the grid-template-areas.) */
}

/* --- boot splash (covers the page until sections render) ---
   Sits above every overlay tier (scrim 190 / detail 200 / shelf 220 /
   lightbox 300). The mark is a currentColor mask of a --svg-* token, same idiom
   as the footer monogram and the brand mark, so it needs no dark variant. */
.boot {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  background: var(--color-bg);
  transition: opacity var(--transition);
}
.boot[data-boot-hidden="true"] { opacity: 0; pointer-events: none; }

.boot__mark {
  width: clamp(120px, 20vw, 220px);
  aspect-ratio: 1 / 1;
  background-color: var(--color-text);
  -webkit-mask: var(--logo-src) center / contain no-repeat;
  mask: var(--logo-src) center / contain no-repeat;
}
.boot__mark[data-logo="rkr"] {
  -webkit-mask: none;
  mask: none;
  background: var(--svg-rkr-color-light) center / contain no-repeat;
}
:root[data-theme="dark"] .boot__mark[data-logo="rkr"] {
  background-image: var(--svg-rkr-color-dark-orange);
}

/* --- footer (dark chrome band: monogram + tagline | nav | copyright + controls) ---
   Always dark regardless of theme. Full-bleed — sections carry no side padding,
   so the band spans the viewport; padding lives on .site-footer itself. */
.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-4) var(--space-3);
  background: #0c0d10;
  color: #b8bcc6;
}
.site-footer__brand {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.site-footer__monogram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  flex: 0 0 auto;
  border: 1.5px solid #ffffff;
  border-radius: 8px;
  color: #fff;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}
/* SVG monogram variant: the mark is a --svg-* data-URI token from base.css,
   painted as a currentColor mask (same idiom as .logo-wall__img--svg) so it
   stays light on the dark band. No frame or letterspacing — the mark carries
   its own nested-square frame. Map a token per [data-logo] below. */
.site-footer__monogram--svg {
  width: 2.6rem;
  height: 2.6rem;
  aspect-ratio: 1 / 1;
  border: 0;
  border-radius: 0;
  font-size: 0;
  background-color: currentColor;
  -webkit-mask: var(--logo-src) center / contain no-repeat;
  mask: var(--logo-src) center / contain no-repeat;
}
.site-footer__monogram--svg[data-logo="rkr"] { --logo-src: var(--svg-rkr); }

.site-footer__tagline {
  margin: 0;
  font-size: 0.95rem;
  color: #9aa0ac;
}
.site-footer__nav { margin-left: auto; }
.site-footer__links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: 0;
  margin: 0;
}
.site-footer__links a { color: #c7ccd6; font-weight: 500; }
.site-footer__links a:is(:hover, :focus-visible) { color: var(--color-accent); text-decoration: none; }
.site-footer__meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.site-footer__copyright {
  margin: 0;
  font-size: 0.85rem;
  color: #858b98;
}
.site-footer__controls {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
}
/* Toggles sit on the dark band → light-on-dark styling. */
.site-footer .motion-toggle { color: #9aa0ac; border-color: #2a2d35; }
.site-footer .motion-toggle:is(:hover, :focus-visible) { color: var(--color-accent); border-color: var(--color-accent); }

@media (max-width: 900px) {
  .site-footer__nav,
  .site-footer__meta { margin-left: 0; }
}

@media (max-width: 640px) {
  .site-nav { display: none; } /* nav collapses; anchors still reachable */
  /*.section { padding: var(--space-5) var(--space-3); }*/
}

.section--traits{
  padding: 35px 10px;
  display: flex;
  justify-content: center;
      background: #0c0d10;
}

/* --- Principles: dark full-bleed band — left intro (glyph + headline + lead)
   | right two-column list. Always dark regardless of theme, like the footer;
   full-bleed because sections carry no side padding (padding lives here). --- */
.section--principles { max-width: none; padding: 0; }
.principles {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: var(--space-5) var(--space-6);
  padding: var(--space-6) var(--space-4);
  background: #0c0d10;
  color: #b8bcc6;
  overflow: hidden;
}

.principles__visual {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  opacity: 1;
}

/* Fixed attachment creates scroll-linked/parallax motion even though no CSS
   animation is running, so honor the resolved motion preference here too. */
[data-motion-resolved="reduced"] .principles__visual {
  background-attachment: scroll;
}

/* Preserve the dark-band identity and readable contrast while letting the
   refresh-random photograph visibly disrupt the otherwise flat page rhythm. */
.principles::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(12, 13, 16, 0.72), rgba(12, 13, 16, 0.48));
  pointer-events: none;
}

.principles__intro {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
/* subtle divider between the intro and the list */
.principles__intro::after {
  content: "";
  position: absolute;
  top: 0.25rem;
  bottom: 0.25rem;
  right: calc(var(--space-6) / -2);
  width: 1px;
  background: rgba(255, 255, 255, 0.09);
}
.principles__glyph {
  flex: 0 0 auto;
  color: #e8eaef;
}
.principles__glyph .trait__icon {
  width: 3.75rem;
  height: 3.75rem;
  color: inherit;
}
.principles__headline {
  margin: 0 0 var(--space-2);
  color: #ffffff;
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
}
.principles__lead p {
  margin: 0 0 0.35rem;
  color: #aeb3bd;
  font-size: 1.02rem;
  line-height: 1.55;
}
.principles__lead p:last-child { margin-bottom: 0; }

.principles__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  gap: var(--space-3) var(--space-5);
}
.principle {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: #d4d8e0;
}
.principle .trait__icon {
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 auto;
  color: #c7ccd6;
}
.principle__label {
  font-size: 0.98rem;
  font-weight: 500;
}

@media (max-width: 900px) {
  .principles {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-3);
  }
  .principles__intro::after { display: none; }
  /* Mobile Safari handles fixed backgrounds inconsistently and may repaint
     them at the wrong scale, so narrow layouts use the same image normally. */
  .principles__visual { background-attachment: scroll; }
  .principles__list {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
}

.contrib{
      padding: var(--space-4) var(--space-5);
}



.project_heading{
  /* color: var(--color-muted); */
  color: var(--color-accent);
  border-bottom: 1px solid var(--color-accent);
  padding-bottom:10px;
      font-weight: 300;
    font-size: 1.5em;
}

.project_paragraph {
  text-indent: 20px;
}


.awardsContainer{
  container-type: inline-size;
  display: inline-block;
    width: 100%;
    margin-bottom: 10px;
}

/* Award copy must wrap within the drawer, including narrow viewports. */
.awardsHeaderTextLine{
    font-size: 18px;
    line-height: 1.35;
    white-space: normal;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.awardsLogoContainer{
    align-self: center;
    margin-inline: 0;
    max-width: 100%;
}

.awardsTable{
    display: grid;
    grid-template-columns: minmax(0, 65px) minmax(0, 1fr);
    column-gap: 10px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.awardsYearContainer{
    grid-column: 1;
    font-weight: bold;
}

.awardsTitle{
    grid-column: 2;
    color: var(--color-accent);
}

.awardsSubTitle{
    grid-column: 2;
    font-size: 14px;
}

.awardsDescription{
    grid-column: 2;
    color: var(--color-text);
    font-size: 12px;
}

/* Follow the award block's available width, rather than the browser width. */
@container (min-width: 640px) {
  .awardsHeaderTextLine {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.5rem;
  }

  .awardsLogoContainer {
    grid-column: 2;
    grid-row: 1;
  }

  .awardsTable {
    grid-column: 1;
    grid-row: 1;
  }
}