/* ==========================================================================
   SEVENTIES REVIVAL — Build with it (Design Completion Campaign, 2026-09-29).
   More bands: each field is a full-width band of flat, grained earth colour
   headed by the room's small arch, tones in turn, warmest leading. Faces and
   grain are the room's ("FrauncesSV", "DMSansSV", --sv-grain-*, declared in
   x-seventies-revival.css). No bright accent. Every class is gsv- or scoped
   to .gm--seventies-revival. Nothing moves.
   Contrast: cream on orange 5.4:1, on avocado 5.6:1, on brown 10.4:1;
   brown on mustard 5.3:1, on cream 10.4:1. Mustard is never text.
   ========================================================================== */
.gm--seventies-revival {
  --gm-tag-inverse: var(--gm-color-brown);
  max-width: none; margin: 0 calc(-1 * var(--sv-bleed, var(--s6))); padding: 0;
  background: var(--sv-grain-dark), var(--gm-color-brown); color: var(--gm-color-cream);
  font: 400 1.125rem/1.6 var(--gm-font-body);
}
.gm--seventies-revival .gm__head { max-width: none; margin: 0; padding: clamp(48px, 8vw, 96px) max(clamp(16px, 5vw, 60px), calc((100% - 900px) / 2)) clamp(32px, 5vw, 56px); grid-template-columns: 1fr; gap: 12px; }
.gm--seventies-revival .gm__title { grid-row: auto; font: 900 clamp(40px, 7vw, 80px)/0.95 var(--gm-font); letter-spacing: -0.01em; }
.gm--seventies-revival .gm__lede { font-size: 1.25rem; max-width: 50ch; }
.gm--seventies-revival .gm__key, .gm--seventies-revival .gm__get { font-size: 0.95rem; opacity: 1; }
.gm--seventies-revival .gm__get a { color: inherit; text-decoration-color: var(--gm-color-mustard); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.gm--seventies-revival .gm-t { border-radius: 999px; padding: 0 0.6rem; }
.gm--seventies-revival .gm-f__head { align-items: center; gap: 12px; }
.gm--seventies-revival .gm-f__n { display: inline-flex; align-items: center; gap: 10px; font: 700 13px/1 var(--gm-font-body); letter-spacing: 0.12em; }
.gm--seventies-revival .gm-f__name { font: 900 clamp(30px, 4.5vw, 48px)/1 var(--gm-font); }
.gm--seventies-revival .gm-f__note { opacity: 1; font-size: 1rem; }
.gm--seventies-revival .gm-more summary { font-size: 0.95rem; }
.gm--seventies-revival .gm-ls li { border-top-color: color-mix(in srgb, currentColor 30%, transparent); }
.gm--seventies-revival :focus-visible { outline: 3px solid currentColor; outline-offset: 3px; border-radius: 8px; }

.gsv-f { padding: clamp(40px, 7vw, 80px) max(clamp(16px, 5vw, 60px), calc((100% - 900px) / 2)); background: var(--sv-grain-dark), var(--gsv-bg); color: var(--gsv-fg); }
.gsv-f--or { --gsv-bg: var(--gm-color-orange); --gsv-fg: var(--gm-color-cream); --gsv-g1: var(--gm-color-mustard); --gsv-g2: var(--gm-color-brown); --gsv-g3: var(--gm-color-cream); --gm-tag-inverse: var(--gm-color-orange); }
.gsv-f--mu { --gsv-bg: var(--gm-color-mustard); --gsv-fg: var(--gm-color-brown); --gsv-g1: var(--gm-color-orange); --gsv-g2: var(--gm-color-brown); --gsv-g3: var(--gm-color-cream); --gm-tag-inverse: var(--gm-color-mustard); background: var(--sv-grain-light), var(--gsv-bg); }
.gsv-f--av { --gsv-bg: var(--gm-color-avocado); --gsv-fg: var(--gm-color-cream); --gsv-g1: var(--gm-color-mustard); --gsv-g2: var(--gm-color-orange); --gsv-g3: var(--gm-color-cream); --gm-tag-inverse: var(--gm-color-avocado); }
.gsv-f--cr { --gsv-bg: var(--gm-color-cream); --gsv-fg: var(--gm-color-brown); --gsv-g1: var(--gm-color-avocado); --gsv-g2: var(--gm-color-mustard); --gsv-g3: var(--gm-color-orange); --gm-tag-inverse: var(--gm-color-cream); background: var(--sv-grain-light), var(--gsv-bg); }
.gsv-f--br { --gsv-bg: var(--gm-color-brown); --gsv-fg: var(--gm-color-cream); --gsv-g1: var(--gm-color-orange); --gsv-g2: var(--gm-color-mustard); --gsv-g3: var(--gm-color-cream); --gm-tag-inverse: var(--gm-color-brown); }
.gsv-glyph { width: 48px; height: auto; }
.gsv-glyph__1 { fill: var(--gsv-g1, var(--gm-color-orange)); }
.gsv-glyph__2 { fill: var(--gsv-g2, var(--gm-color-mustard)); }
.gsv-glyph__3 { fill: var(--gsv-g3, var(--gm-color-cream)); }
.gsv-cap { margin: 14px 0 0; font-size: 1rem; }

.gsv-sws { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; font-size: 0.9rem; }
.gsv-sws li { display: grid; gap: 4px; min-width: 0; }
.gsv-sws span { display: block; height: 72px; border-radius: 72px 72px 0 0; border: 2px solid color-mix(in srgb, currentColor 35%, transparent); }
.gsv-sws code { font-size: 0.8rem; }

.gsv-disp { margin: 0; font: 900 clamp(48px, 8vw, 96px)/0.95 var(--gm-font); letter-spacing: -0.02em; }

.gsv-lay { position: relative; display: grid; max-width: 420px; border-radius: 16px; overflow: hidden; }
.gsv-lay__arch { position: relative; height: 90px; background: var(--gm-color-cream); }
.gsv-lay__arch i { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); border-radius: 999px 999px 0 0; }
.gsv-lay__arch i:nth-child(1) { width: 160px; height: 80px; background: var(--gm-color-orange); }
.gsv-lay__arch i:nth-child(2) { width: 110px; height: 55px; background: var(--gm-color-mustard); }
.gsv-lay__arch i:nth-child(3) { width: 60px; height: 30px; background: var(--gm-color-brown); }
.gsv-lay__b { height: 30px; }
.gsv-lay__b--1 { background: var(--gm-color-brown); }
.gsv-lay__b--2 { background: var(--gm-color-orange); }
.gsv-lay__b--3 { background: var(--gm-color-avocado); }

.gsv-shapes { display: flex; flex-wrap: wrap; gap: 20px; align-items: end; }
.gsv-shapes span { display: block; background: currentColor; }
.gsv-shapes__pill { width: 140px; height: 48px; border-radius: 999px; }
.gsv-shapes__soft { width: 96px; height: 96px; border-radius: 24px; }
.gsv-shapes__arch { width: 120px; height: 60px; border-radius: 120px 120px 0 0; }

.gsv-grain { display: grid; grid-template-columns: 1fr 1fr; max-width: 420px; border-radius: 16px; overflow: hidden; }
.gsv-grain span { padding: 28px 16px; font: 900 28px/1 var(--gm-font); color: var(--gm-color-cream); background: var(--gm-color-orange); }
.gsv-grain span + span { background: var(--sv-grain-dark), var(--sv-grain-dark), var(--gm-color-orange); }

.gsv-nav { display: flex; flex-wrap: wrap; gap: 4px 28px; padding: 10px 24px; border-radius: 999px; background: var(--gm-color-brown); }
.gsv-nav a { display: inline-flex; align-items: center; min-height: 48px; color: var(--gm-color-cream); text-decoration: none; font-weight: 500; }
.gsv-nav a:hover, .gsv-nav a[aria-current] { text-decoration: underline; text-decoration-color: var(--gm-color-mustard); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.gsv-nav a[aria-current]::before { content: ""; width: 22px; height: 11px; margin-right: 8px; border-radius: 22px 22px 0 0; background: var(--gm-color-mustard); }
.gsv-ui { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 28px; margin-top: 28px; align-items: start; }
.gsv-card { display: grid; gap: 6px; padding: 24px; border-radius: 24px; background: var(--sv-grain-dark), var(--gm-color-orange); color: var(--gm-color-cream); text-decoration: none; }
.gsv-card { --gsv-g1: var(--gm-color-mustard); --gsv-g2: var(--gm-color-brown); --gsv-g3: var(--gm-color-cream); }
.gsv-card b { font: 900 30px/1 var(--gm-font); }
.gsv-card:hover b { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--gm-color-mustard); }
.gsv-form { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: end; }
.gsv-form label { flex-basis: 100%; font-weight: 700; }
.gsv-form input { flex: 1 1 12rem; min-width: 0; height: 48px; padding: 0 14px; border: 2px solid var(--gm-color-brown); border-radius: 16px; background: var(--gm-color-cream); color: var(--gm-color-brown); }
.gsv-form input:focus-visible { outline: 3px solid var(--gm-color-orange); outline-offset: 2px; }
.gsv-btn { min-height: 48px; padding: 0 26px; border: 0; border-radius: 999px; background: var(--sv-grain-dark), var(--gm-color-orange); color: var(--gm-color-cream); font: 900 20px/1 var(--gm-font) !important; cursor: pointer; }
.gsv-btn:hover { background: var(--gm-color-brown); }
.gsv-btn:active { background: var(--gm-color-avocado); }
.gsv-still { margin: 0; font: 900 clamp(26px, 3.5vw, 36px)/1.1 var(--gm-font); }

@media (max-width: 700px) {
  .gsv-sws { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gsv-ui { grid-template-columns: 1fr; }
  .gm--seventies-revival .gm-ls li { grid-template-columns: 1fr; gap: 0.25rem; }
}
/* Present, never arriving: the room is motionless. */
.js-reveal .sv-page main > section.gm--seventies-revival { opacity: 1; transform: none; transition: none; will-change: auto; }