/* ==========================================================================
   SALLY GREENHOUSE — ARCHIVE SITE
   v2 · complete stylesheet

   WHERE THIS GOES
   Bricks → Settings → Custom code → Custom CSS,
   or (better) the child theme's style.css so it's version-controlled.

   THE ONE RULE THAT MATTERS
   Every section is two elements, never one:

       <section class="sg-section">      ← background + vertical padding, full bleed
         <div class="sg-wrap">           ← max-width + horizontal padding
           ...content...
         </div>
       </section>

   In Bricks that is a Section element with the class sg-section, holding a
   Container (or Div) with the class sg-wrap. Nothing else needs padding.
   Backgrounds bleed edge to edge; text never touches the edge. This is why
   the earlier single-element approach kept failing — one element cannot both
   bleed and inset.

   THREE THINGS THAT BREAK BRICKS PASTES

   1. Bricks writes per-element CSS keyed to #brxe-xxxx IDs. An ID beats a
      class (specificity 100 vs 10), so the moment you type a value into the
      Style panel for an element, that value wins over everything here and
      nothing in this file can override it. RULE: for any element carrying an
      sg-* class, set the class and leave the Style panel fields empty. If a
      style refuses to apply, that is almost always why — clear the field in
      Bricks rather than adding !important here.

   2. Bricks wraps things in extra divs: every Query Loop iteration, every
      Code element. Selectors using > or :nth-child break the moment a
      wrapper appears. Every selector in this file is written to survive one
      level of unexpected wrapping. If you add rules, use descendant
      selectors, not child selectors.

   3. The Rich Text element strips class and style attributes on paste. Paste
      markup into a Code element; use Rich Text only for body copy with no
      classes on it. Nothing in this file requires an inline style — there is
      a utility class for every case.

   Everything visual is driven by the :root block below. Change those values,
   not the rules underneath.
   ========================================================================== */

/* --------------------------------------------------------------------------
   FONTS — self-hosted
   In WordPress these paths resolve from wherever this stylesheet lives.
   If you paste this into Bricks → Custom CSS instead of the child theme,
   change the url() paths to the full /wp-content/uploads/fonts/... path,
   or upload the files via Bricks → Custom Fonts and delete this block.
   -------------------------------------------------------------------------- */

@font-face{
  font-family: 'Anton';
  src: url('fonts/anton-400.woff2') format('woff2'),
       url('fonts/anton-400.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: 'Special Elite';
  src: url('fonts/special-elite-400.woff2') format('woff2'),
       url('fonts/special-elite-400.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root{
  /* ---- ink & paper ---- */
  --sg-ink:          #111111;
  --sg-ink-soft:     #3a3a3a;
  --sg-paper:        #e4e1d9;   /* page background, newsprint */
  --sg-paper-alt:    #efece4;   /* cards sitting on paper */
  --sg-panel:        #f7f5ef;   /* press clippings, brightest white */

  /* ---- accent: highlighter ---- */
  --sg-accent:       #d9f24b;
  --sg-accent-ink:   #111111;   /* text ON the accent */

  /* ---- halftone ---- */
  --sg-dot:          rgba(0,0,0,.92);
  --sg-dot-light:    #8a8a8a;   /* dots on dark grounds */
  --sg-dot-size:     5px;       /* grid pitch; bigger = coarser */
  --sg-dot-r:        1.1px;     /* dot radius */

  /* ---- video ---- */
  --sg-video-bg:     #2a2a2a;
  --sg-scan:         rgba(255,255,255,.09);

  /* ---- collage ---- */
  --sg-tilt:         .8deg;     /* 0deg straightens everything */
  --sg-rule:         2px;       /* accent underline weight */

  /* ---- type ---- */
  --sg-display:      'Anton', Impact, 'Haettenschweiler', sans-serif;
  --sg-body:         'Special Elite', 'Courier New', Courier, monospace;
  --sg-mono:         ui-monospace, Menlo, Consolas, monospace;

  /* ---- rhythm ---- */
  --sg-gap:          clamp(14px, 2vw, 22px);
  --sg-section-y:    clamp(40px, 6vw, 80px);
  --sg-gutter:       clamp(18px, 3vw, 40px);
  --sg-content:      1180px;
  --sg-content-wide: 1400px;
  --sg-measure:      68ch;
}

/* --------------------------------------------------------------------------
   BASE
   -------------------------------------------------------------------------- */

*, *::before, *::after{ box-sizing: border-box; }

body{
  background: var(--sg-paper);
  color: var(--sg-ink);
  font-family: var(--sg-body);
  font-size: 17px;
  line-height: 1.6;
  margin: 0;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .sg-display{
  font-family: var(--sg-display);
  font-weight: 400;
  letter-spacing: .015em;
  line-height: 1;
  text-wrap: balance;
  margin: 0;
  text-transform: uppercase;
}
h1{ font-size: clamp(30px, 4.6vw, 54px); }
h2{ font-size: clamp(22px, 3vw, 34px); }
h3{ font-size: clamp(16px, 1.5vw, 20px); line-height: 1.15; }

p{ margin: 0 0 1em; max-width: var(--sg-measure); }
p:last-child{ margin-bottom: 0; }

a{ color: var(--sg-ink); text-decoration: underline; text-underline-offset: 3px; }
a:hover{ background: var(--sg-accent); text-decoration: none; }

:focus-visible{
  outline: 3px solid var(--sg-accent);
  outline-offset: 2px;
}

::selection{ background: var(--sg-accent); color: var(--sg-accent-ink); }

img{ max-width: 100%; height: auto; display: block; }

hr{ border: 0; border-top: 1px solid var(--sg-ink); margin: var(--sg-gap) 0; }

/* --------------------------------------------------------------------------
   LAYOUT — the section / wrap pair
   -------------------------------------------------------------------------- */

/* Full-bleed band. Carries the background and the vertical rhythm.
   In Bricks: a Section element with this class. Leave its own padding at 0. */
.sg-section{
  padding-top: var(--sg-section-y);
  padding-bottom: var(--sg-section-y);
  padding-left: 0;
  padding-right: 0;
}
.sg-section--tight{ --sg-section-y: clamp(24px, 3vw, 40px); }
.sg-section--flush{ padding-top: 0; padding-bottom: 0; }
.sg-section--rule{ border-top: 1px solid var(--sg-ink); }

/* The inset. Everything readable lives inside one of these.
   In Bricks: a Container or Div with this class, directly inside the Section. */
.sg-wrap{
  width: 100%;
  max-width: var(--sg-content);
  margin-inline: auto;
  padding-inline: var(--sg-gutter);
}
.sg-wrap--wide{ max-width: var(--sg-content-wide); }
.sg-wrap--narrow{ max-width: 860px; }
/* horizontal gutter only, no max-width — for bands that should stay wide */
.sg-wrap--full{ max-width: none; }

/* --------------------------------------------------------------------------
   HEADER BAR
   -------------------------------------------------------------------------- */

.sg-bar{
  background: var(--sg-ink);
  padding: 14px 0;
}
.sg-bar .sg-wrap{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.sg-wordmark{
  font-family: var(--sg-display);
  font-size: clamp(18px, 2.2vw, 26px);
  letter-spacing: .02em;
  line-height: 1;
  color: var(--sg-accent-ink);
  background: var(--sg-accent);
  padding: 3px 9px 4px;
  text-decoration: none;
  white-space: nowrap;
}
.sg-wordmark:hover{ background: #fff; }

.sg-nav{ display: flex; flex-wrap: wrap; gap: clamp(12px, 1.6vw, 22px); }
.sg-nav ul{
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 1.6vw, 22px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.sg-nav a{
  font-family: var(--sg-body);
  font-size: 12px;
  letter-spacing: .11em;
  color: #fff;
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: var(--sg-rule) solid transparent;
  white-space: nowrap;
}
.sg-nav a:hover,
.sg-nav a[aria-current],
.sg-nav .current-menu-item > a{
  color: var(--sg-accent);
  border-bottom-color: var(--sg-accent);
  background: none;
}

/* --------------------------------------------------------------------------
   HALFTONE GROUNDS
   -------------------------------------------------------------------------- */

.sg-halftone{
  background-color: #c9c6be;
  background-image: radial-gradient(var(--sg-dot) var(--sg-dot-r),
                    transparent calc(var(--sg-dot-r) + .2px));
  background-size: var(--sg-dot-size) var(--sg-dot-size);
}

.sg-halftone--dark{
  background-color: #232323;
  background-image: radial-gradient(var(--sg-dot-light) 1.3px, transparent 1.5px);
  background-size: 6px 6px;
}

/* dotted page ground — used on Press */
.sg-halftone--page{
  background-color: var(--sg-paper);
  background-image: radial-gradient(var(--sg-dot) .6px, transparent .8px);
  background-size: 4px 4px;
}

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */

.sg-hero{
  position: relative;
  min-height: min(78vh, 720px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 18px;
  padding: clamp(48px, 8vw, 96px) var(--sg-gutter);
  color: #fff;
  background-size: cover;
  background-position: center 35%;
  overflow: hidden;
}
.sg-hero::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.42);   /* legibility scrim — tune here */
  z-index: 0;
}
/* Wrapper-tolerant: Bricks nests children inside .brxe-* divs, so a direct-child
   selector here would drop the text behind the scrim. Descendant instead. */
.sg-hero :is(h1, h2, h3, p, a, div, span, blockquote, ul, ol){
  position: relative;
  z-index: 1;
}

.sg-hero-title{
  font-family: var(--sg-display);
  font-size: clamp(40px, 8vw, 104px);
  line-height: .9;
  letter-spacing: .01em;
  color: #fff;
  margin: 0;
}
.sg-hero-sub{
  max-width: 46ch;
  font-size: clamp(14px, 1.4vw, 18px);
  line-height: 1.6;
  margin: 0;
  color: #f2f2f2;
}

/* --------------------------------------------------------------------------
   BITS
   -------------------------------------------------------------------------- */

.sg-btn{
  display: inline-block;
  background: var(--sg-accent);
  color: var(--sg-accent-ink);
  font-family: var(--sg-body);
  font-size: 13px;
  letter-spacing: .1em;
  padding: 13px 26px;
  border: 0;
  text-decoration: none;
}
.sg-btn:hover{ background: var(--sg-ink); color: var(--sg-accent); }

.sg-btn--ghost{
  background: none;
  color: var(--sg-ink);
  border: 1px solid var(--sg-ink);
}
.sg-btn--ghost:hover{ background: var(--sg-accent); color: var(--sg-accent-ink); }

/* small caps-y section label with the accent rule under it */
.sg-label{
  display: block;
  font-family: var(--sg-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-bottom: var(--sg-rule) solid var(--sg-accent);
  padding-bottom: 4px;
  margin-bottom: 12px;
}

.sg-meta{
  font-family: var(--sg-mono);
  font-size: 11px;
  line-height: 1.7;
  color: #555;
  max-width: none;
}

/* highlighter swipe over a phrase */
.sg-mark{
  background: var(--sg-accent);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0 .12em;
}

/* the accent-underlined inline link, e.g. "ALL 24 →" */
.sg-more{
  font-family: var(--sg-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--sg-ink);
  text-decoration: none;
  border-bottom: var(--sg-rule) solid var(--sg-accent);
  padding-bottom: 3px;
  white-space: nowrap;
}
.sg-more:hover{ background: var(--sg-accent); }

.sg-lede{
  font-size: clamp(15px, 1.5vw, 18px);
  max-width: 58ch;
}

/* --------------------------------------------------------------------------
   LAYOUT HELPERS
   -------------------------------------------------------------------------- */

.sg-grid-3{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 30px);
}
.sg-grid-2{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 34px);
}
.sg-grid-4{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sg-gap);
}
.sg-split{
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(24px, 3.4vw, 48px);
}
.sg-split--press{ grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
.sg-split--about{ grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
.sg-split--even{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* keep grid children top-aligned rather than stretched/centred */
.sg-split > *,
.sg-split--about > *,
.sg-split--press > *,
.sg-split--even > *{ align-self: start; min-width: 0; }

.sg-bookend{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--sg-ink);
  padding-bottom: 10px;
  margin-bottom: 14px;
}

.sg-stack > * + *{ margin-top: var(--sg-gap); }

/* --------------------------------------------------------------------------
   UTILITIES
   Every one of these exists so no element needs an inline style attribute.
   Bricks' Rich Text element strips style="" and class="" on paste, and the
   Style panel overrides inline styles anyway — a named class survives both.
   -------------------------------------------------------------------------- */

/* vertical rhythm */
.sg-mt-xs{ margin-top: 10px; }
.sg-mt-s { margin-top: 16px; }
.sg-mt-m { margin-top: 22px; }
.sg-mt-l { margin-top: 34px; }
.sg-mb-s { margin-bottom: 16px; }
.sg-mb-m { margin-bottom: 26px; }
.sg-mb-l { margin-bottom: 38px; }

/* grid-child alignment, applied to the child itself */
.sg-self-center{ align-self: center; }
.sg-self-start { align-self: start; }

/* readable body copy — the bio, the piece description, the access statement */
.sg-prose{ max-width: 66ch; line-height: 1.75; }
.sg-prose--bio{ max-width: 68ch; line-height: 1.8; }

/* the display-face pull quote on the home page */
.sg-quote{
  font-family: var(--sg-display);
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.25;
  text-transform: uppercase;
  margin: 0;
  max-width: none;
}

/* the About portrait */
.sg-portrait{
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid var(--sg-ink);
  filter: grayscale(1) contrast(1.15);
}

/* the CV list */
.sg-cv{
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  line-height: 2.1;
  font-size: 12px;
}

/* credits column on the single */
.sg-credits{ line-height: 1.9; }

/* a link wrapping a whole block (card, video, thumb) */
.sg-block-link{ display: block; text-decoration: none; color: inherit; }
.sg-block-link:hover{ background: none; }

/* filter row with a rule under it, as on the video archive */
.sg-filters--ruled{
  border-bottom: 1px solid var(--sg-ink);
  padding-bottom: 22px;
  margin-bottom: 34px;
}

/* a plain top rule where a section modifier would be overkill */
.sg-rule-top{ border-top: 1px solid var(--sg-ink); padding-top: 30px; }

/* --------------------------------------------------------------------------
   WORK CARDS
   -------------------------------------------------------------------------- */

.sg-work{ display: block; text-decoration: none; color: inherit; }
.sg-work:hover{ background: none; }
.sg-work__img{
  aspect-ratio: 4 / 3;
  border: 1px solid var(--sg-ink);
  object-fit: cover;
  width: 100%;
  filter: grayscale(1) contrast(1.25);
  transition: filter .18s ease;
}
.sg-work:hover .sg-work__img{ filter: grayscale(1) contrast(1.6); }
.sg-work__title{
  font-family: var(--sg-display);
  font-size: clamp(17px, 1.7vw, 21px);
  letter-spacing: .01em;
  line-height: 1.1;
  text-transform: uppercase;
  margin: 12px 0 4px;
}
.sg-work:hover .sg-work__title{ background: var(--sg-accent); }

/* --------------------------------------------------------------------------
   VIDEO
   -------------------------------------------------------------------------- */

.sg-video{ background: var(--sg-ink); padding: 10px; }

.sg-video .sg-frame{
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--sg-video-bg);
  overflow: hidden;
}
/* descendant, not direct child — Bricks wraps its Video and Image elements */
.sg-video .sg-frame img,
.sg-video .sg-frame video,
.sg-video .sg-frame iframe{
  width: 100%; height: 100%; display: block; border: 0; object-fit: cover;
}
/* if Bricks inserts a wrapper, make it fill the frame so the ratio holds */
.sg-video .sg-frame > div,
.sg-video .sg-frame > figure,
.sg-video .sg-frame > a{
  width: 100%; height: 100%; display: block; margin: 0;
}
.sg-video .sg-frame::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, var(--sg-scan) 0 1px, transparent 1px 3px);
}
/* a 16:9 variant for the single-performance player */
.sg-video--wide .sg-frame{ aspect-ratio: 16 / 9; }

.sg-video__bar{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  color: #fff;
  font-family: var(--sg-mono);
  font-size: 11px;
}
.sg-video__track{ flex: 1; height: 3px; background: #555; }
.sg-video__fill{ height: 3px; background: var(--sg-accent); }
.sg-cc{
  border: 1px solid var(--sg-accent);
  color: var(--sg-accent);
  padding: 0 4px;
  font-family: var(--sg-mono);
  font-size: 10px;
}

/* tape cards on the video archive */
.sg-tape{
  border: 1px solid var(--sg-ink);
  background: var(--sg-paper-alt);
  text-decoration: none;
  color: inherit;
  display: block;
  padding: 10px;
}
.sg-tape:hover{ background: var(--sg-paper-alt); border-color: var(--sg-accent); }
.sg-tape__thumb{
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--sg-video-bg);
  overflow: hidden;
}
.sg-tape__thumb img{
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.2);
}
.sg-tape__thumb::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, var(--sg-scan) 0 1px, transparent 1px 3px);
}
.sg-dur{
  position: absolute;
  right: 6px;
  bottom: 6px;
  z-index: 1;
  background: #000;
  color: #fff;
  font-family: var(--sg-mono);
  font-size: 10px;
  padding: 1px 4px;
}
.sg-tape__body{ padding: 10px 2px 2px; }
.sg-tape__title{
  font-family: var(--sg-display);
  font-size: clamp(16px, 1.6vw, 20px);
  text-transform: uppercase;
  line-height: 1.1;
  margin: 0 0 4px;
}
.sg-tape:hover .sg-tape__title{ background: var(--sg-accent); }

/* filter row */
.sg-filters{ display: flex; flex-wrap: wrap; gap: 7px; }
.sg-filters a{
  font-family: var(--sg-mono);
  font-size: 11px;
  letter-spacing: .04em;
  border: 1px solid var(--sg-ink);
  padding: 5px 9px;
  text-decoration: none;
  color: var(--sg-ink);
}
.sg-filters a:hover{ background: var(--sg-accent); }
.sg-filters a[aria-current]{ background: var(--sg-accent); border-color: var(--sg-accent); }

/* --------------------------------------------------------------------------
   SINGLE PERFORMANCE
   -------------------------------------------------------------------------- */

.sg-piece-title{
  font-size: clamp(34px, 6vw, 72px);
  line-height: .95;
  margin: 0;
}

.sg-transcript{
  border-top: 1px solid var(--sg-ink);
  border-bottom: 1px solid var(--sg-ink);
  padding: 16px 0;
}
.sg-transcript > summary{
  font-family: var(--sg-mono);
  font-size: 12px;
  letter-spacing: .12em;
  cursor: pointer;
  text-transform: uppercase;
}
.sg-transcript__body{
  margin-top: 16px;
  max-width: 70ch;
  line-height: 1.75;
  border-left: var(--sg-rule) solid var(--sg-accent);
  padding-left: 14px;
  font-size: 15px;
}

/* scanned document thumbnails */
.sg-doc{
  border: 1px solid var(--sg-ink);
  aspect-ratio: 3 / 4;
  background-color: #d0cdc5;
  background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.12) 0 5px, transparent 5px 10px);
  object-fit: cover;
  width: 100%;
  filter: grayscale(1) contrast(1.15);
}
a:hover .sg-doc{ border-color: var(--sg-accent); }

.sg-postnav{
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-top: 1px solid var(--sg-ink);
  padding-top: 18px;
}
.sg-postnav a{ color: inherit; text-decoration: none; }
.sg-postnav a:hover{ background: var(--sg-accent); }

/* --------------------------------------------------------------------------
   PRESS
   -------------------------------------------------------------------------- */

.sg-clips{ display: grid; gap: 18px; }

.sg-clip{
  background: var(--sg-panel);
  border: 1px solid var(--sg-ink);
  padding: clamp(12px, 1.6vw, 18px);
  transform: rotate(calc(var(--sg-tilt) * -1));
}
.sg-clip:nth-child(even){ transform: rotate(var(--sg-tilt)); }
/* Bricks wraps every Query Loop iteration in its own div, which makes the
   clippings cousins rather than siblings and kills the alternating tilt.
   This catches the wrapped case so the tilt survives either DOM shape. */
:nth-child(even) > .sg-clip{ transform: rotate(var(--sg-tilt)); }
:nth-child(odd) > .sg-clip{ transform: rotate(calc(var(--sg-tilt) * -1)); }
.sg-clip__quote{
  font-size: clamp(16px, 1.8vw, 21px);
  line-height: 1.35;
  margin: 0 0 10px;
  max-width: none;
}
.sg-clip--scan{
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.sg-clip__thumb{
  width: 64px;
  height: 84px;
  object-fit: cover;
  border: 1px solid var(--sg-ink);
  filter: grayscale(1) contrast(1.2);
}

.sg-toplist{
  background: var(--sg-ink);
  color: #fff;
  padding: clamp(18px, 2.2vw, 28px);
  align-self: start;
  position: sticky;
  top: 24px;
}
.sg-toplist h3{
  color: var(--sg-accent);
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.1;
  margin: 0 0 18px;
}
.sg-toplist ol{
  margin: 0;
  padding-left: 1.2em;
  font-size: 14px;
  line-height: 1.7;
  color: #eee;
}
.sg-toplist li{ margin-bottom: 8px; }
.sg-toplist .sg-meta{ color: #999; margin-top: 20px; }

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */

.sg-foot{
  border-top: 1px solid var(--sg-ink);
  padding: 18px 0;
}
.sg-foot .sg-wrap{
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--sg-mono);
  font-size: 11px;
  color: #444;
}
.sg-foot a{ color: inherit; }

/* --------------------------------------------------------------------------
   ACCESSIBILITY
   -------------------------------------------------------------------------- */

.sg-skip{
  position: absolute;
  left: -9999px;
}
.sg-skip:focus{
  left: 12px; top: 12px;
  position: fixed;
  z-index: 999;
  background: var(--sg-accent);
  color: var(--sg-accent-ink);
  padding: 10px 16px;
  text-decoration: none;
}

.sg-visually-hidden{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce){
  .sg-clip,
  .sg-clip:nth-child(even),
  :nth-child(even) > .sg-clip,
  :nth-child(odd) > .sg-clip{ transform: none; }
  *{ animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

@media (prefers-contrast: more){
  :root{ --sg-paper: #f2f0ea; }
  .sg-meta{ color: #333; }
  .sg-hero::after{ background: rgba(0,0,0,.6); }
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 991px){
  .sg-grid-3{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sg-grid-4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sg-split,
  .sg-split--press,
  .sg-split--about,
  .sg-split--even{ grid-template-columns: minmax(0, 1fr); }
  .sg-toplist{ position: static; }
}

@media (max-width: 767px){
  :root{ --sg-tilt: 0deg; }
  body{ font-size: 16px; }
  .sg-bar .sg-wrap{ flex-direction: column; align-items: flex-start; gap: 12px; }
  .sg-grid-3,
  .sg-grid-2{ grid-template-columns: minmax(0, 1fr); }
  .sg-hero{ min-height: 60vh; }
  .sg-btn{ padding: 14px 22px; }   /* keep the tap target ≥ 44px */
  .sg-clip--scan{ grid-template-columns: 52px minmax(0, 1fr); gap: 12px; }
}

/* --------------------------------------------------------------------------
   OPTIONAL — BRICKS ID OVERRIDE GUARD

   Only uncomment this if a layout refuses to apply in Bricks and you have
   already checked the element's Style panel.

   Why it exists: Bricks writes per-element CSS as #brxe-xxxx { ... }. An ID
   selector scores 100, a class scores 10, so anything typed into the Style
   panel silently beats every rule in this file. The correct fix is to clear
   that field in Bricks. This block is the blunt fallback for when a value has
   been set on many elements and hunting them down one at a time is not worth
   the afternoon.

   It forces only the structural properties — the ones that decide whether the
   page holds together. It deliberately does not touch colour, type or
   spacing, so you keep the ability to tune those per element in Bricks.

   Turn it off again once the stray values are cleared.
   -------------------------------------------------------------------------- */

/*
.sg-section{
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.sg-wrap{
  max-width: var(--sg-content) !important;
  margin-inline: auto !important;
  padding-inline: var(--sg-gutter) !important;
  width: 100% !important;
}
.sg-wrap--wide  { max-width: var(--sg-content-wide) !important; }
.sg-wrap--narrow{ max-width: 860px !important; }
.sg-wrap--full  { max-width: none !important; }

.sg-grid-3{ display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.sg-grid-2{ display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.sg-split { display: grid !important; }

.sg-video .sg-frame{ aspect-ratio: 4 / 3 !important; position: relative !important; }
.sg-video--wide .sg-frame{ aspect-ratio: 16 / 9 !important; }

@media (max-width: 991px){
  .sg-grid-3{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .sg-split, .sg-split--press, .sg-split--about, .sg-split--even{
    grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 767px){
  .sg-grid-3, .sg-grid-2{ grid-template-columns: minmax(0, 1fr) !important; }
}
*/

/* --------------------------------------------------------------------------
   PRINT — press kit / CV pages
   -------------------------------------------------------------------------- */

@media print{
  body{ background: #fff; color: #000; }
  .sg-bar, .sg-filters, .sg-foot, .sg-video__bar, .sg-skip{ display: none; }
  .sg-clip, .sg-clip:nth-child(even),
  :nth-child(even) > .sg-clip,
  :nth-child(odd) > .sg-clip{ transform: none; border-color: #000; }
  .sg-halftone, .sg-halftone--page, .sg-halftone--dark{ background-image: none; }
  .sg-toplist{ background: none; color: #000; border: 1px solid #000; }
  .sg-toplist h3, .sg-toplist ol{ color: #000; }
  .sg-section{ padding-block: 18px; }
  a{ text-decoration: underline; }
  .sg-transcript[open] .sg-transcript__body{ display: block; }
}