/* ============================================================
   site.css - this site's own styling.

   Loads after base.css and wins on the cascade. Never replaced by an engine
   update, so anything written here survives every version of Shockwave.

   Most brand work belongs in Settings > Branding rather than here: colours,
   fonts, and type scale are custom properties the engine injects, and base.css
   already wires them to every archetype. Reach for this file when a site needs
   layout or treatment that the token system cannot express.

   Custom colours added under Branding appear here as --color-{name}, so a
   colour named "Warm sand" is callable as var(--color-warm-sand).
   ============================================================ */

/* ---- 1. Tokens ---------------------------------------------------------- */
/* The two palette colours this site reaches for by hand. Named once here so
   every rule that wants one says the same thing, and a palette rename stays
   a one-line change. Both come from Branding; --accent is the engine's
   fallback if the palette ever loses them. */

:root {
  --sg-amber: var(--color-amber, var(--accent));
  --sg-signal: var(--color-signal, var(--accent));
}

/* ---- 2. Site identity --------------------------------------------------- */

.site-logo a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--space-xl);
  block-size: var(--space-xl);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-heading, inherit);
  font-size: var(--step-0);
  font-weight: var(--h1-weight, 700);
  letter-spacing: .02em;
  text-decoration: none;
}

.site-logo a:hover {
  background: var(--sg-amber);
  color: var(--ink);
}

/* ---- 3. Site header ----------------------------------------------------- */

.site-header {
  padding-block: var(--space-l);
  border-block-end: var(--border);
}

.site-logo img {
  block-size: var(--space-xl);
}

.site-nav .nav-item > a,
.site-nav .nav-heading {
  font-family: var(--font-accent, inherit);
  font-size: clamp(.7rem, .68rem + .1vw, .78rem);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.site-nav .nav-item > a:hover {
  color: var(--sg-amber);
}

/* ---- 4. Single entry with related rail ---------------------------------- */
/* Twelve columns across --wrap. Separation is space and alignment, not
   rules: the only hairline in the article closes the byline. */

.entry-single--rail {
  inline-size: min(100% - (var(--gutter) * 2), var(--wrap));
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-l);
  align-items: start;
}

/* base.css sizes and centres every direct child of .block, which fights the
   grid and puts each child on a different left edge. The tracks take over
   here. This also releases .prose's ch-based measure on .entry-body, which
   is intended: the grid governs the column width, not the typeface. */
.entry-single--rail > header,
.entry-single--rail > .entry-hero,
.entry-single--rail > .entry-body,
.entry-single--rail > .entry-rail,
.entry-single--rail > .entry-terms {
  inline-size: auto;
  max-inline-size: none;
  margin-inline: 0;
}

.entry-single--rail > header {
  grid-column: 1 / -1;
  padding-block-start: var(--space-xl);
}

.entry-single--rail > header h1 {
  max-inline-size: 16ch;
}

.entry-single--rail .entry-byline {
  margin-block-start: var(--space-l);
  padding-block-end: var(--space-s);
  border-block-end: var(--border);
  font-family: var(--font-accent, inherit);
  font-size: clamp(.7rem, .68rem + .1vw, .78rem);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.entry-single--rail .entry-sep {
  margin-inline: var(--space-2xs);
}

.entry-single--rail > .entry-hero {
  grid-column: 1 / -1;
  margin-block-start: var(--space-xl);
}

.entry-single--rail > .entry-hero img {
  margin-block: 0;
  border-radius: 0;
}

.entry-single--rail > .entry-body {
  grid-column: 2 / 9;
  margin-block-start: var(--space-block);
  hanging-punctuation: first last;
}

.entry-single--rail > .entry-body > p:first-child {
  font-size: var(--step-1);
  line-height: var(--h3-line, 1.35);
}

/* A section break is a large gap and a shift in position, not a line. The
   h2 sits out to the left of the column it heads. */
.entry-single--rail > .entry-body > h2 {
  margin-block-start: var(--space-block);
  margin-inline-start: calc(var(--space-l) * -1);
}

.entry-single--rail > .entry-body > h3 {
  margin-block-start: var(--space-xl);
}

.entry-single--rail > .entry-body li::marker {
  color: var(--sg-amber);
}

.entry-single--rail > .entry-body a {
  color: var(--ink);
  text-decoration-color: var(--sg-amber);
  text-decoration-thickness: from-font;
  text-underline-offset: var(--space-3xs);
}

.entry-single--rail > .entry-body a:hover {
  text-decoration-color: var(--ink);
}

.entry-single--rail > .entry-rail {
  grid-column: 10 / -1;
  position: sticky;
  inset-block-start: var(--space-l);
  margin-block-start: var(--space-block);
}

.entry-rail-heading {
  font-family: var(--font-accent, inherit);
  font-size: clamp(.7rem, .68rem + .1vw, .78rem);
  font-weight: var(--accent-weight, 500);
  line-height: var(--accent-line, 1.4);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.entry-rail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-block-start: var(--space-l);
}

.entry-rail-item + .entry-rail-item {
  margin-block-start: var(--space-l);
}

.entry-rail-link {
  display: block;
  font-family: var(--font-heading, inherit);
  font-size: var(--step-0);
  font-weight: var(--h3-weight, 600);
  line-height: var(--h3-line, 1.25);
  text-decoration: none;
  text-wrap: balance;
}

.entry-rail-link:hover {
  color: var(--accent);
}

.entry-rail-date {
  display: block;
  margin-block-start: var(--space-2xs);
  font-family: var(--font-accent, inherit);
  font-size: clamp(.7rem, .68rem + .1vw, .78rem);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.entry-single--rail > .entry-terms {
  grid-column: 1 / 9;
  margin-block-start: var(--space-block);
}

@media (max-width: 800px) {
  .entry-single--rail > header,
  .entry-single--rail > .entry-body,
  .entry-single--rail > .entry-rail,
  .entry-single--rail > .entry-terms {
    grid-column: 1 / -1;
  }
  .entry-single--rail > .entry-body > h2 {
    margin-inline-start: 0;
  }
  .entry-single--rail > .entry-rail {
    position: static;
    margin-block-start: var(--space-xl);
  }
  .entry-single--rail > .entry-hero,
  .entry-single--rail > .entry-body {
    margin-block-start: var(--space-l);
  }
}


/* ---- 5. Homepage collection-list ---------------------------------------- */
/* A full-bleed red band carrying a white dot grid, with the rows sitting on
   it as white cards. The grid is a repeating radial gradient, so it costs no
   image and scales with the spacing tokens.

   Band and dots are painted on the block itself rather than on a pseudo of
   the list, which is what makes them cover every pixel of it: the block's own
   padding-block sits outside the list, so a pseudo-element there left a bare
   red margin top and bottom. The list then takes the site's contained width
   back, so the colour runs to the viewport edges while the reading line stops
   at --wrap. The dot radius is the one literal here: the scales describe
   space and type, and nothing in them describes a dot. */

.home-posts {
  background-color: var(--sg-signal);
  background-image: radial-gradient(
    var(--paper) 1.4px,
    transparent 1.4px
  );
  background-size: var(--space-l) var(--space-l);
}

.home-posts .stack-list {
  inline-size: min(100% - (var(--gutter) * 2), var(--wrap));
  margin-inline: auto;
  gap: var(--space-block);
  padding-block: var(--space-l);
}

.home-posts .list-row {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-m);
  padding: var(--space-l);
  border-block-end: 0;
  background: var(--paper);
  color: var(--ink);
}

.home-posts .list-row:not(:last-child) {
  border-block-end: 0;
}

/* Each row rises as it enters. Scroll-driven, so there is no script and no
   observer; the timeline is the row's own progress through the viewport.
   Guarded twice over, and the guards are the whole safety argument: the
   keyframes start at opacity 0, so anywhere this cannot run the rows must
   never be given the animation at all, or they would stay invisible. */
@keyframes sg-row-in {
  from { opacity: 0; transform: translateY(var(--space-l)); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .home-posts .list-row {
      animation: sg-row-in linear both;
      animation-timeline: view();
      animation-range: entry 15% cover 40%;
    }
  }
}

.home-posts .list-media img {
  inline-size: 100%;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  border-radius: 0;
}

.home-posts .list-title {
  font-size: var(--step-2);
  letter-spacing: .02em;
  text-transform: uppercase;
  text-wrap: balance;
}

.home-posts .list-body {
  margin-block-start: var(--space-m);
  max-inline-size: none;
  color: var(--ink);
}

.home-posts .list-cta {
  display: inline-block;
  margin-block-start: var(--space-m);
  font-family: var(--font-accent, inherit);
  font-size: clamp(.7rem, .68rem + .1vw, .78rem);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration-color: var(--sg-amber);
  text-decoration-thickness: from-font;
  text-underline-offset: var(--space-3xs);
}

.home-posts .list-cta:hover {
  text-decoration-color: var(--ink);
}

@media (max-width: 800px) {
  .home-posts .stack-list {
    gap: var(--space-xl);
  }
  .home-posts .list-row {
    padding: var(--space-m);
    gap: var(--space-s);
  }
}

/* ---- 6. Site footer ----------------------------------------------------- */
/* The page's counterweight: a full-bleed navy band under a white page, so
   the document closes with mass rather than trailing off. Amber marks the
   column labels and nothing else. */

.site-footer {
  margin-block-start: var(--space-block);
  border-block-start: 0;
  background: var(--ink);
  color: var(--paper);
}

.site-footer a {
  color: var(--paper);
  text-decoration-thickness: from-font;
  text-underline-offset: var(--space-3xs);
}

.site-footer a:hover {
  color: var(--sg-amber);
}

.footer-inner {
  gap: var(--space-xl);
  padding-block: var(--space-block);
}

.footer-logo--text {
  font-family: var(--font-heading, inherit);
  font-size: var(--step-1);
  font-weight: var(--h1-weight, 700);
  letter-spacing: .02em;
  text-transform: uppercase;
}

.footer-blurb {
  color: var(--paper);
  opacity: .75;
  margin-block-start: var(--space-s);
}

.footer-nav-heading {
  font-family: var(--font-accent, inherit);
  font-size: clamp(.7rem, .68rem + .1vw, .78rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sg-amber);
  margin-block-end: var(--space-s);
}

.footer-list {
  gap: var(--space-2xs);
}

.footer-social {
  gap: var(--space-m);
}

/* Font Awesome brand glyphs in place of the network names. The label is not
   removed, only sized to nothing, so it stays in the accessibility tree and
   the link keeps its name for a screen reader.

   The family is named per major version, and a kit serves whichever version
   it is pinned to, so all three are listed. Font fallback runs per glyph:
   whichever family is actually loaded is the one that answers, and the rest
   cost nothing. Naming a single version is why this did not render first
   time round.

   This still needs the kit to be serving web fonts. A kit set to SVG+JS ships
   no font families at all and rewrites <i> elements instead, and the footer
   emits a plain anchor with a text label, so there would be nothing for it to
   act on. The mode is a Font Awesome dashboard setting, not a CMS one. */
.footer-social a {
  text-decoration: none;
  font-size: 0;
}

.footer-social a::before {
  font-family: "Font Awesome 7 Brands", "Font Awesome 6 Brands", "Font Awesome 5 Brands";
  font-weight: 400;
  font-style: normal;
  font-variant: normal;
  font-size: var(--step-2);
  line-height: 1;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

.footer-social-item--instagram a::before { content: "\f16d"; }
.footer-social-item--facebook a::before  { content: "\f09a"; }
.footer-social-item--linkedin a::before  { content: "\f0e1"; }
.footer-social-item--x a::before         { content: "\e61b"; }

.site-footer .footer-legal {
  border-block-start: 0;
  padding-block: var(--space-l);
  font-family: var(--font-accent, inherit);
  font-size: clamp(.7rem, .68rem + .1vw, .78rem);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--paper);
  opacity: .6;
}

/* ---- 7. Homepage hero --------------------------------------------------- */
/* .hero-media is a sibling of .hero-inner, so the grid goes on the section
   and both land in it. The image starts partway down and to the right, so
   the last line of the heading crosses it. The section re-establishes the
   contained width because .block > * cannot once this is a grid. */

.home-hero {
  inline-size: min(100% - (var(--gutter) * 2), var(--wrap));
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
}

.home-hero > .hero-inner,
.home-hero > .hero-media {
  inline-size: auto;
  max-inline-size: none;
  margin-inline: 0;
}

/* gap and align-items both undo base.css's .hero-inner, and both have to be
   said here. They were harmless while this box sized its own rows to their
   content. Once the rows come from the section they are not: align-items
   centres the heading against a row as tall as the photograph, and the gap
   becomes the subgrid's own gutter, which the section does not have, so the
   body would sit inboard of the image's left edge instead of flush with it. */
.home-hero > .hero-inner {
  grid-column: 1 / -1;
  grid-row: 1;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0;
  align-items: start;
  pointer-events: none;
}

/* The body is a child of .hero-inner and the image is a sibling of it, so no
   arrangement of .hero-inner's own grid can put the body below the image:
   the two sit in unrelated row systems. Subgrid hands .hero-inner the
   section's columns and rows in place of private ones, so the heading takes
   row 1 across the photograph and the body takes row 2 clear of it. The
   column numbers below are unchanged, because .hero-inner spans all twelve.

   Guarded, because the fallback is the point. Where subgrid is unsupported
   both declarations are dropped, .hero-inner keeps the private grid above,
   and the hero renders exactly as it did before this rule: right in every
   respect except that the body sits over the photograph. align-self is here
   rather than above so the box only stretches where subgrid is sizing the
   rows; in the fallback it would stretch the private auto tracks instead. */
@supports (grid-template-rows: subgrid) {
  .home-hero {
    grid-template-rows: auto auto;
  }

  .home-hero > .hero-inner {
    grid-row: 1 / 3;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    align-self: stretch;
  }
}

/* No max-inline-size: the track sets the wrap. The 9ch cap this replaces was
   narrower than the column it sat in, so it, not the grid, was breaking the
   heading, and it broke it into five lines. Seven columns gives three. */
.home-hero .block-heading {
  grid-column: 1 / 8;
  grid-row: 1;
  color: var(--sg-amber);
}

.home-hero .block-body {
  grid-column: 4 / -1;
  grid-row: 2;
  max-inline-size: none;
  margin-block-start: var(--space-m);
  font-family: var(--font-accent, inherit);
  font-size: var(--step-1);
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.35;
  pointer-events: auto;
}

/* The drop is two lines of the heading, measured from the heading's own
   tokens, so the first two lines clear the photograph and only the last
   crosses it. --space-xl came to less than one line, which put lines two and
   three over the image. Derived rather than fixed so the relationship holds
   if Branding changes the h1 size or its leading. */
.home-hero > .hero-media {
  grid-column: 4 / -1;
  grid-row: 1;
  z-index: 0;
  align-self: start;
  margin-block-start: calc(var(--h1-size, var(--step-4)) * var(--h1-line, 1.05) * 2);
}

.home-hero .hero-media img {
  inline-size: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 0;
  filter: grayscale(1);
}

@media (max-width: 800px) {
  .home-hero > .hero-inner,
  .home-hero > .hero-media {
    grid-column: 1 / -1;
  }
  .home-hero > .hero-media {
    grid-row: 3;
    margin-block-start: var(--space-m);
  }
  .home-hero .block-heading,
  .home-hero .block-body {
    grid-column: 1 / -1;
  }
}