/* ═══════════════════════════════════════════════════════════
   CHABAD BRAND — chabadbrand.com
   Shared shell + content styles. A middle ground between the
   original editorial Squarespace site (Garamond, photo-led,
   uppercase labels) and the chabadlogo tool design system
   (Ideal Sans, burgundy/orange, pills). One continuous brand.
═══════════════════════════════════════════════════════════ */

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

:root {
  --c-primary:    #871a39;
  --c-primary-dk: #5d0b30;
  --c-secondary:  #f27730;
  --c-dark:       #1a1a1a;
  --c-bg:         #ffffff;
  --c-panel:      #f2f2f2;
  --c-border:     #e0e0e0;
  --c-muted:      #888888;
  --radius:       8px;
  --radius-lg:    12px;
  --shadow:       0 2px 16px rgba(0,0,0,0.08);
  --shadow-lg:    0 8px 40px rgba(0,0,0,0.14);
  --transition:   0.2s ease;
  --content-w:    1080px;
  --serif:        'EB Garamond', 'Adobe Garamond Pro', Garamond, Georgia, serif;
  /* Mulish is the brand text face — free on Google Fonts (the logo's
     Ideal Sans lives only in logo artwork, via the generator) */
  --sans:         'Mulish', sans-serif;
}

html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--c-bg);
  color: var(--c-dark);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--c-primary); }
button { cursor: pointer; font-family: inherit; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  /* must end on `none` — a retained transform would trap position:fixed
     children (the gallery lightbox) inside the animated container */
  to   { opacity: 1; transform: none; }
}
.animate-in { animation: fadeUp 0.4s ease-out both; }

/* uppercase letterspaced label — the institutional voice of the
   original site (Proxima) carried by Ideal Sans */
.label {
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* ══════════════════════════════════════════
   HEADER — shared shell across the whole site
══════════════════════════════════════════ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  /* the divider only appears once the page scrolls */
  border-bottom: 1px solid transparent;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.site-header.scrolled { border-bottom-color: var(--c-border); }
.site-header-inner {
  /* nav breathes to the screen edges */
  margin: 0 auto;
  padding: 0 20px;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 12px;
}
/* the official Left lockup — color on white, white over the hero photo */
.site-brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  white-space: nowrap;
  margin-right: auto;
}
.site-brand img {
  height: 38px;
  width: auto;
  display: block;
  /* the wordmark's center sits 54.2% down the lockup (flame above) —
     lift the mark so "Chabad" centers on the nav line; nav stays put */
  transform: translateY(-4.2%);
}
.site-brand .logo-white { display: none; }
/* the wordmark is its own slice so it can fade out independently;
   on the home page, scrolling leaves just the menorah icon.
   flush placement — the icon viewBox ends where the C begins, so the
   original lockup spacing is preserved exactly */
.brand-word { display: flex; transition: opacity 0.3s ease; }
@media (min-width: 900px) {
  .site-header-inner { height: 78px; padding: 0 24px; }
  .site-brand img { height: 48px; }
}

/* over the photo hero: transparent header, white nav, white lockup —
   until the page scrolls (JS adds .scrolled) */
/* over a photo hero the header floats transparent and scrolls away with
   the page — no sticky bar on the home/story pages */
body.has-photo-hero .site-header {
  position: absolute;
  left: 0; right: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
}
body.has-photo-hero .site-header .logo-color { display: none; }
body.has-photo-hero .site-header .logo-white { display: block; }
body.has-photo-hero .site-header .site-nav a { color: rgba(255,255,255,0.85); }
body.has-photo-hero .site-header .site-nav a:hover { color: #fff; }
body.has-photo-hero .site-header .site-nav a.nav-cta { color: #fff; }
/* the dropdown card is always white — its links stay dark over the hero */
body.has-photo-hero .site-header .nav-drop a { color: var(--c-muted); }
body.has-photo-hero .site-header .nav-drop a:hover { color: var(--c-primary); }

.site-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  overflow: visible;   /* dropdowns must escape */
}
/* dropdown wrappers must not add line-box height — keeps every nav item
   sitting on the same centerline */
.site-nav .nav-item { display: flex; align-items: center; }
.site-nav a {
  text-decoration: none;
  color: var(--c-muted);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  text-transform: none;
  white-space: nowrap;
  padding: 6px 0;
  transition: color var(--transition);
}
.site-nav a:hover { color: var(--c-primary); }
.site-nav a.active { color: var(--c-secondary); }

/* hover dropdown under "Brand Guide" — desktop pointers only */
.site-nav .nav-item { position: relative; }
.nav-drop {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  /* JS nudges the card back into the viewport when centering overflows */
  margin-left: var(--drop-shift, 0px);
  flex-direction: column;
  width: max-content;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  z-index: 70;
}
/* invisible bridge keeps hover alive across the 12px offset */
.nav-drop::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}
@media (hover: hover) and (min-width: 900px) {
  .nav-item:hover .nav-drop,
  .nav-item:focus-within .nav-drop { display: flex; }
}
/* touch fallback: the ⋯ button (and any nav-item marked open) toggles */
.nav-item.open .nav-drop { display: flex; }
.nav-more {
  border: none;
  background: none;
  color: var(--c-muted);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  text-transform: none;
  padding: 6px 0;
  transition: color var(--transition);
}
.nav-more:hover { color: var(--c-primary); }
body.has-photo-hero .site-header .nav-more { color: rgba(255,255,255,0.85); }
body.has-photo-hero .site-header .nav-more:hover { color: #fff; }
.nav-drop a {
  padding: 8px 16px 8px 12px;
  border-radius: 7px;
  color: var(--c-muted);
  font-size: 1rem;
  line-height: 1.25;
}
.nav-drop a:hover { background: var(--c-panel); color: var(--c-primary); }
.site-nav a.nav-cta {
  background: var(--c-secondary);
  color: #fff;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 22px;
  border-bottom: none;
  margin-left: 8px;
}
.site-nav a.nav-cta:hover { background: #e0691f; color: #fff; }

/* ══════════════════════════════════════════
   HOME — photographic hero, serif voice
══════════════════════════════════════════ */
.hero-photo {
  position: relative;
  min-height: clamp(480px, 72vh, 720px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-size: cover;
  background-position: center 30%;
  color: #fff;
}
.hero-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;   /* scrim sits over the shader canvas, under the text */
  background: linear-gradient(to bottom, rgba(26,10,16,0.45), rgba(26,10,16,0.25) 45%, rgba(26,10,16,0.55));
}
/* the live shader — painted over the photo fallback, under the scrim */
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.hero-canvas.on { opacity: 1; }
.hero-photo-inner {
  position: relative;
  z-index: 2;
  max-width: 860px;
  padding: 80px 24px;
}
/* corner controls: shuffle (left) and take-into-the-tool download (right) */
.hero-tools { display: contents; }
.hero-shuffle, .hero-dl {
  position: absolute;
  bottom: 16px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 36px;
  border: none;
  border-radius: 18px;
  background: rgba(20,8,12,0.32);
  color: rgba(255,255,255,0.9);
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background var(--transition), transform 0.15s ease;
}
.hero-shuffle { left: 16px; padding: 0 14px; }
.hero-dl { right: 16px; width: 36px; }
.hero-shuffle:hover, .hero-dl:hover { background: rgba(20,8,12,0.55); }
.hero-shuffle:active { transform: scale(0.96); }
.hero-shuffle svg { width: 15px; height: 15px; }
.hero-dl svg { width: 15px; height: 15px; }
.hero-photo h2 {
  /* serif first line above the banner */
  font-family: var(--serif);
  font-weight: 400;
  /* tracks the h1's clamp at ~3/4 scale so the pair shrinks together */
  font-size: clamp(1.8rem, 4.8vw, 3.4rem);
  line-height: 1.15;
  color: rgba(255,255,255,0.95);
  margin-bottom: 10px;
}
.hero-photo h1 {
  /* big sans banner line */
  font-weight: 750;
  font-size: clamp(2.4rem, 6.4vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-wrap: balance;
}
.hero-photo p.sub {
  /* sans over the photo — the serif got lost against the image */
  font-family: var(--sans);
  font-size: clamp(1rem, 1.9vw, 1.15rem);
  line-height: 1.6;
  color: rgba(255,255,255,0.92);
  max-width: 700px;
  margin: 22px auto 0;
  text-wrap: balance;
}
.hero-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-top: 38px;
}
.hero-link {
  color: rgba(255,255,255,0.82);
  font-size: 0.95rem;
  font-family: var(--serif);
  font-style: italic;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.4);
  padding-bottom: 2px;
  transition: color var(--transition), border-color var(--transition);
}
.hero-link:hover { color: #fff; border-bottom-color: #fff; }

/* buttons — pill silhouette from the tools, institutional voice */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: 27px;
  font-size: 1rem;
  font-weight: 600;
  text-transform: none;
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.btn-primary {
  background: var(--c-secondary);
  color: #fff;
}
.btn-primary:hover { background: #e0691f; }
.btn-outline-light {
  border: 1px solid rgba(255,255,255,0.65);
  color: #fff;
}
.btn-outline-light:hover { background: rgba(255,255,255,0.14); }
.btn-ghost {
  background: var(--c-panel);
  color: var(--c-dark);
}
.btn-ghost:hover { background: #e8e8e8; }

/* brand-in-use strip — edge-to-edge scroll of application photos */
.use-strip {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 64px 20px 20px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.use-strip::-webkit-scrollbar { display: none; }
.use-strip img {
  height: 300px;
  width: auto;
  border-radius: var(--radius);
  flex-shrink: 0;
  /* hairline + soft shadow so white-background shots read as cards */
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.use-caption {
  text-align: center;
  color: var(--c-muted);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  padding: 0 20px 20px;
}

/* content sections */
.section {
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 72px 20px;
}
.section-kicker { color: var(--c-secondary); margin-bottom: 12px; }
/* centered variant — the story block on the home page */
.section-center { text-align: center; }
.section-center .lede { margin-left: auto; margin-right: auto; }
.section h2 {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 400;
  color: var(--c-primary);
  margin-bottom: 12px;
}
.section .lede {
  font-family: var(--serif);
  color: #555;
  max-width: 640px;
  font-size: 1.18rem;
  line-height: 1.6;
}

/* hairline break between full-bleed moments and the sections */
.section-rule {
  width: min(calc(100% - 40px), calc(var(--content-w) - 40px));
  margin: 28px auto 0;
  border: none;
  border-top: 1px solid var(--c-border);
}

.text-link {
  display: inline-block;
  margin-top: 18px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--c-primary);
  text-decoration: none;
  border-bottom: 1px solid rgba(135,26,57,0.35);
  padding-bottom: 2px;
  transition: border-color var(--transition);
}
.text-link:hover { border-bottom-color: var(--c-primary); }

/* ══════════════════════════════════════════
   ARTICLE — the story page (editorial serif)
══════════════════════════════════════════ */
.article-hero {
  position: relative;
  min-height: clamp(340px, 52vh, 540px);
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center 35%;
  color: #fff;
}
.article-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(26,10,16,0.35), rgba(26,10,16,0.1) 40%, rgba(26,10,16,0.72));
}
.article-hero-inner {
  /* headline + byline share the body copy's measure and left edge */
  position: relative;
  max-width: 680px;
  margin: 0 auto;
  padding: 110px 22px 46px;
  width: 100%;
}
.article-hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.1;
}
.article-hero .byline {
  margin-top: 12px;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.85);
}
.article-hero .byline a {
  color: rgba(255,255,255,0.95);
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.45);
}
.article-hero .byline a:hover { text-decoration-color: #fff; }

.article {
  max-width: 680px;
  margin: 0 auto;
  padding: 56px 22px 40px;
}
.article p {
  font-family: var(--serif);
  font-size: 1.16rem;
  line-height: 1.72;
  color: #2c2c2c;
  margin: 0 0 26px;
}
.article h2 {
  font-family: var(--serif);
  font-size: 1.75rem;
  font-weight: 400;
  color: var(--c-primary);
  margin: 46px 0 16px;
}
.article h3 {
  font-family: var(--sans);
  font-size: 1.5rem;
  font-weight: 400;
  color: #4a4a4a;
  margin: 40px 0 12px;
}
.article ol, .article ul {
  font-family: var(--serif);
  font-size: 1.12rem;
  line-height: 1.68;
  color: #2c2c2c;
  margin: 0 0 26px;
  padding-left: 26px;
}
.article li { margin-bottom: 14px; }
.article li::marker { color: var(--c-secondary); font-weight: 600; }
/* numbered lists: the numbers sit flush with the content's left edge
   (default markers indent them inward of the paragraphs) */
.article ol {
  list-style: none;
  counter-reset: item;
  padding-left: 0;
}
.article ol > li {
  counter-increment: item;
  position: relative;
  padding-left: 30px;
}
.article ol > li::before {
  content: counter(item) ".";
  position: absolute;
  left: 0;
  color: var(--c-secondary);
  font-weight: 600;
}
.article a { color: var(--c-primary); text-decoration-color: rgba(135,26,57,0.35); }
.article a:hover { text-decoration-color: var(--c-primary); }
.article blockquote {
  border-left: 3px solid var(--c-secondary);
  padding: 4px 0 4px 22px;
  margin: 0 0 26px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.12rem;
  color: #555;
}
.article figure { margin: 34px 0; }
.article figure.wide { margin-left: min(0px, calc((680px - 92vw) / 2)); margin-right: min(0px, calc((680px - 92vw) / 2)); }
.article figure img { width: 100%; border-radius: var(--radius); }
.article figcaption {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--c-muted);
  text-align: center;
  margin-top: 10px;
  line-height: 1.5;
}
.article .fig-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 34px 0;
}
.article .fig-grid img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }
@media (max-width: 560px) { .article .fig-grid { grid-template-columns: 1fr; } }
.article .article-cta {
  padding: 26px 0 10px;
}
/* buttons inside the article keep their own ink (the .article a color
   rule would otherwise paint the label burgundy) */
.article .btn-primary { color: #fff; }

/* responsive video embed */
.video-embed {
  position: relative;
  padding-top: 56.25%;
  margin: 34px 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ══════════════════════════════════════════
   BRAND GUIDE
══════════════════════════════════════════ */
.guide-subnav {
  border-bottom: 1px solid var(--c-border);
  background: var(--c-bg);
}
.guide-subnav-inner {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.guide-subnav-inner::-webkit-scrollbar { display: none; }
.guide-subnav a {
  flex-shrink: 0;
  padding: 12px 0;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.25;
  text-transform: none;
  color: var(--c-muted);
  text-decoration: none;
  transition: color var(--transition);
}
.guide-subnav a:hover { color: var(--c-primary); }
.guide-subnav a.active { color: var(--c-secondary); }

/* desktop: the sections live in a full-height grey column pinned to the
   viewport — top to bottom, flush left, exactly like the generator's
   control panel. The header floats transparent over it (brand icon sits
   on the grey, like the generator), so no white band above the column. */
@media (min-width: 1000px) {
  body:has(.guide-layout) .site-header {
    /* sticky over the guide — floats transparent, no background fill */
    position: fixed;
    top: 0; left: 0; right: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  body:has(.guide-layout) .site-header.scrolled { border-bottom-color: transparent; }
  .guide-layout {
    display: block;
    padding-left: 280px;
    min-height: 100vh;
  }
  .guide-subnav {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 280px;
    border-bottom: none;
    background: var(--c-panel);
    overflow-y: auto;
  }
  .guide-subnav-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    /* left padding matches the header's gutter so the menorah and the
       section list share one left edge; top clears the floating header
       with room to breathe */
    padding: 132px 26px 40px 24px;
    overflow: visible;
  }
  .guide-subnav a { padding: 7px 0; }
  .guide-layout .guide-article {
    margin: 0 auto;
    padding: 132px 48px 60px;
  }
}

.guide-article { max-width: 860px; padding-top: 40px; }

/* small screens: the horizontal section bar is gone — the "Brand Guide"
   kicker above the page title drops the full section list instead
   (site.js clones the sidebar links and adds the arrow) */
.kicker-arrow { display: none; }
.kicker-drop { display: none; }
@media (max-width: 999px) {
  .guide-subnav { display: none; }
  .guide-head { position: relative; }
  .guide-kicker { cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .kicker-arrow { display: inline-block; vertical-align: middle; margin: -2px 0 0 2px; }
  .kicker-drop {
    display: none;
    position: absolute;
    top: 32px;
    left: 0;
    z-index: 60;
    flex-direction: column;
    min-width: 220px;
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 8px;
  }
  .guide-head.open .kicker-drop { display: flex; }
  .article .kicker-drop a {
    padding: 8px 16px 8px 12px;
    border-radius: 7px;
    color: var(--c-muted);
    font-size: 1rem;
    line-height: 1.25;
    text-decoration: none;
  }
  .kicker-drop a:hover { background: var(--c-panel); color: var(--c-primary); }
  .article .kicker-drop a.active { color: var(--c-secondary); }
}
/* the guide speaks in the cleaner sans voice — the serif stays editorial
   (story, ledes, captions) */
.guide-article p,
.guide-article ol,
.guide-article ul,
.guide-article blockquote {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  color: #3f3f3f;
}
.guide-head { margin-bottom: 34px; }
.article .guide-kicker {
  /* the h4/label tier doubles as the breadcrumb */
  font-family: var(--sans);
  font-size: 0.875rem;
  letter-spacing: 0.14em;
  color: var(--c-muted);
  margin-bottom: 10px;
}
.guide-head h1 {
  font-family: var(--serif);
  font-size: clamp(2.1rem, 4.5vw, 2.9rem);
  font-weight: 400;
  line-height: 1.1;
  color: var(--c-primary);
}
.guide-lede { font-family: var(--serif); color: #555; font-size: 1.15rem; margin-top: 12px; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 6px 0 30px;
}
.article .btn-ghost { color: var(--c-dark); }

/* logo sheets & diagrams — full-width, uncropped, no corner rounding */
.article figure.plain { margin: 26px 0; }
.article figure.plain img { border-radius: 0; }

/* image grids */
.fig-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.fig-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.fig-grid .cell { margin: 0; }
.fig-grid .cell img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }
.fig-grid .cell figcaption {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.88rem;
  color: var(--c-muted);
  text-align: center;
  margin-top: 8px;
}
@media (max-width: 640px) {
  .fig-grid.cols-3, .fig-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}

/* guide sections — quiet uppercase labels above a hairline divider
   (direct children only, so nested card headings keep their own style) */
.guide-article > h2 {
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #a9a9af;
  border-top: 1px solid var(--c-border);
  margin: 54px 0 28px;
  padding-top: 50px;
}
.guide-article .guide-head + h2,
.guide-article > h2:first-child { border-top: none; padding-top: 0; margin-top: 8px; }

/* type specimen cards — the font's own name, alphabet, and weights,
   each card set in the face it describes (inline font-family) */
.type-spec {
  background: var(--c-panel);
  border-radius: var(--radius-lg);
  padding: 24px 28px 22px;
  margin: 16px 0 24px;
}
.type-spec .ts-display {
  font-size: clamp(2.2rem, 5vw, 3rem);
  line-height: 1.1;
  color: var(--c-primary);
}
.type-spec .ts-line {
  margin-top: 10px;
  font-size: 1.05rem;
  line-height: 1.6;
  color: #3f3f3f;
  overflow-wrap: anywhere;
}
.type-spec .ts-weights {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin-top: 12px;
  font-size: 0.95rem;
  color: #555;
}

/* hairline divider above an h3 that opens a new sub-section */
.article h3.sec-divide {
  border-top: 1px solid var(--c-border);
  margin-top: 50px;
  padding-top: 44px;
}

/* wide variant — the gallery breathes across the full column */
.guide-article.guide-wide { max-width: 1400px; }

/* color page — quiet labeled sections divided by hairlines */
.color-sec { padding: 8px 0 26px; }
.color-sec + .color-sec {
  border-top: 1px solid var(--c-border);
  margin-top: 30px;
  padding-top: 56px;
}
.article .sec-label {
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #a9a9af;
  margin: 0 0 30px;
}

/* swatch circles with centered names */
.swatch-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 28px;
  margin: 8px 0 10px;
}
.swatch { text-align: center; }
.swatch span {
  display: block;
  aspect-ratio: 1 / 1;
  max-width: 88px;
  margin: 0 auto;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
}
.swatch i {
  display: block;
  margin-top: 16px;
  font-family: var(--serif);
  font-style: normal;
  font-size: 1.02rem;
  color: #333;
}
.swatch b {
  display: block;
  margin-top: 3px;
  font-size: 0.76rem;
  font-weight: 400;
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}

/* color usage: text left, donut right-aligned with the content edge */
.usage-split {
  display: grid;
  gap: 36px;
  align-items: center;
}
@media (min-width: 760px) {
  .usage-split { grid-template-columns: minmax(0, 1fr) 340px; }
  .usage-split .donut { justify-self: end; }
}
.usage-split .donut { width: min(340px, 78vw); height: auto; }
.donut text {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
}
.article code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.95em;
  background: var(--c-panel);
  padding: 1px 7px;
  border-radius: 5px;
}

/* patterns page: featured Backgrounds tool banner */
.tool-feature {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  background: linear-gradient(45deg, #3d072f, #871a39 55%, #f27730 130%);
  border-radius: var(--radius-lg);
  padding: 36px clamp(22px, 4vw, 44px);
  color: #fff;
  margin-bottom: 40px;
}
.tool-feature h2 { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; color: #fff; margin: 0 0 8px; }
.tool-feature p { font-family: var(--serif); color: rgba(255,255,255,0.88); margin: 0; max-width: 480px; }
.tool-feature .btn { margin: 20px 0 0; }

/* ── gallery: filter bar + mosaic + lightbox ── */
.gal-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 30px 0 22px;
}
.gal-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.gal-filters button, .gal-shuffle {
  border: none;
  background: var(--c-panel);
  padding: 9px 16px;
  border-radius: 18px;
  font-size: 0.9rem;
  font-weight: 500;
  text-transform: none;
  color: var(--c-muted);
  transition: color var(--transition), background var(--transition);
}
.gal-filters button:hover:not(.active), .gal-shuffle:hover { color: var(--c-primary); }
.gal-filters button.active { background: var(--c-primary); color: #fff; }
.masonry { columns: 3 220px; column-gap: 14px; }
/* .article figure sets 34px vertical margins — beat it so the vertical
   rhythm matches the 14px column gap and the first row sits flush */
.article figure.gal-item {
  break-inside: avoid;
  margin: 0 0 14px;
  cursor: zoom-in;
}
.gal-item img { width: 100%; display: block; border-radius: var(--radius); transition: opacity 0.2s; }
.gal-item:hover img { opacity: 0.87; }
.gal-item.hide { display: none; }

.lb {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(18,10,14,0.93);
  display: none;
}
.lb.open { display: flex; }
.lb-stage {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 34px;
}
.lb-stage img { max-width: 100%; max-height: 88vh; border-radius: 8px; }
.lb-side {
  width: 290px;
  flex-shrink: 0;
  background: var(--c-bg);
  padding: 40px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lb-side .lb-cat {
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--c-secondary);
}
.lb-side h3 { font-family: var(--serif); font-weight: 400; font-size: 1.4rem; color: var(--c-dark); }
.lb-side .lb-credit { font-family: var(--serif); font-size: 0.98rem; color: var(--c-muted); }
.lb-side .lb-credit a { color: var(--c-primary); }
.lb-side .lb-count { margin-top: auto; font-size: 0.76rem; color: var(--c-muted); font-variant-numeric: tabular-nums; }
/* photography lightbox: the copyable generation prompt */
.lb-side .lb-prompt-label {
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--c-muted);
  margin-top: 10px;
}
.lb-side .lb-prompt {
  font-size: 0.82rem;
  line-height: 1.55;
  color: #555;
  background: var(--c-panel);
  border-radius: 8px;
  padding: 12px 14px;
  max-height: 190px;
  overflow-y: auto;
}
.lb-copy {
  align-self: flex-start;
  border: none;
  background: var(--c-primary);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 15px;
  transition: background var(--transition);
}
.lb-copy:hover { background: var(--c-primary-dk); }
.lb-copy.done { background: var(--c-secondary); }
@media (max-width: 760px) {
  .lb-side .lb-prompt { max-height: 90px; }
}
.lb-btn {
  position: absolute;
  border: none;
  background: rgba(255,255,255,0.12);
  color: #fff;
  width: 42px; height: 42px;
  border-radius: 50%;
  font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.lb-btn:hover { background: rgba(255,255,255,0.24); }
.lb-close { top: 16px; left: 16px; }
.lb-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 306px; top: 50%; transform: translateY(-50%); }
@media (max-width: 760px) {
  .lb.open { flex-direction: column; }
  .lb-stage { padding: 56px 16px 10px; }
  .lb-side { width: 100%; padding: 20px 22px calc(20px + env(safe-area-inset-bottom)); gap: 6px; }
  .lb-next { right: 16px; top: 42%; }
  .lb-prev { top: 42%; }
}

/* prev / next pager */
.guide-pager {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--c-border);
  margin-top: 52px;
  padding-top: 22px;
}
.guide-pager a {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--c-primary);
  text-decoration: none;
}
.guide-pager a:hover { text-decoration: underline; }

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
.site-footer {
  border-top: 1px solid var(--c-border);
  margin-top: 48px;
}
.site-footer-inner {
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 36px 20px 46px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.site-footer a { color: var(--c-muted); text-decoration: none; }
.site-footer a:hover { color: var(--c-dark); }
.site-footer .foot-brand { margin-right: auto; }
.site-footer .foot-brand img { height: 28px; width: auto; }

/* the nav is short enough now (Brand Guide · ⋯ · + Create) to keep the
   CTA at every width */
@media (max-width: 900px) {
  .site-nav { gap: 14px; }
  .site-nav a.nav-cta { padding: 9px 14px; }
}
@media (max-width: 640px) {
  .use-strip { padding-top: 40px; }
  .use-strip img { height: 200px; }
  .why-card .btn { margin-left: 0; }
  .site-brand span { display: none; }   /* mark only; keep nav roomy */
  .site-nav { gap: 14px; }
}