/* ==========================================================================
   AV Acoustics — homepage design review
   Chrome for the landing page and the three sample pages. The designs
   themselves are styled inline, exactly as they come out of the design file,
   so nothing here can alter them.
   ========================================================================== */

:root {
  --ground:   #EAE6E0;
  --panel:    #FAF8F6;
  --panel-2:  #F1EDE8;
  --rule:     #D3CCC3;
  --ink:      #191715;
  --ink-2:    #4E4842;
  --muted:    #766E66;
  --accent:   #BC1A24;
  --accent-in:#ffffff;
  --shadow:   0 24px 48px -18px rgba(30,22,18,.34);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:   #141312;
    --panel:    #1D1B1A;
    --panel-2:  #232120;
    --rule:     #38332F;
    --ink:      #EFEBE5;
    --ink-2:    #B6AEA5;
    --muted:    #918880;
    --accent:   #E8323C;
    --accent-in:#ffffff;
    --shadow:   0 30px 60px -20px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"] {
  --ground:   #141312;
  --panel:    #1D1B1A;
  --panel-2:  #232120;
  --rule:     #38332F;
  --ink:      #EFEBE5;
  --ink-2:    #B6AEA5;
  --muted:    #918880;
  --accent:   #E8323C;
  --accent-in:#ffffff;
  --shadow:   0 30px 60px -20px rgba(0,0,0,.7);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 28px 80px; }
h1, h2 { font-family: Archivo, system-ui, sans-serif; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(30px, 4.4vw, 48px); line-height: 1.05; letter-spacing: -.028em; font-weight: 700; }
h2 { font-size: clamp(22px, 2.8vw, 30px); line-height: 1.15; letter-spacing: -.022em; font-weight: 700; }
p  { margin: 0; }
a  { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}

/* ---------- masthead ---------- */
.masthead { border-bottom: 1px solid var(--rule); background: var(--panel); }
.masthead-inner {
  max-width: 1100px; margin: 0 auto; padding: 14px 28px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  font-family: "IBM Plex Mono", monospace; font-size: 11.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
/* the mark is black and red on transparent, so it always sits on a white
   plaque — the same lock-up the designs themselves use */
.masthead-logo {
  width: 134px; height: 38px; padding: 4px 8px; background-color: #fff;
  background-image: url("avacoustics-logo.png"); background-size: contain;
  background-repeat: no-repeat; background-position: left center;
  background-origin: content-box; border-radius: 2px;
}
.masthead-sep { flex: 1; }
.theme-toggle {
  font: inherit; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  font-family: "IBM Plex Mono", monospace; color: var(--muted);
  background: none; border: 1px solid var(--rule); border-radius: 999px;
  padding: 5px 12px; cursor: pointer;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--muted); }

/* ---------- intro ---------- */
.intro { padding: 60px 0 34px; }
.intro h1 { max-width: 18ch; }
.lede { font-size: 18px; color: var(--ink-2); margin-top: 14px; }

/* ---------- the sample links, grouped by round ---------- */
.round + .round { margin-top: 44px; }
.round-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.round-head h2 { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.round-head span { font-family: "IBM Plex Mono", monospace; font-size: 11.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

.samples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 880px) { .samples { grid-template-columns: 1fr; } }

.card {
  display: flex; flex-direction: column; gap: 10px;
  text-decoration: none; min-height: 300px;
  padding: 30px 30px 28px;
  border: 1px solid var(--rule);
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover, .card:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow); }
.card-id {
  font-family: "IBM Plex Mono", monospace; font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase;
}
.card-name { line-height: 1; margin-top: 2px; }
.card-stance { font-size: 15px; line-height: 1.55; font-family: "IBM Plex Sans", sans-serif; }
.card-go {
  margin-top: auto; padding-top: 18px;
  font-family: "IBM Plex Mono", monospace; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase;
}

/* ---------- sign-off ---------- */
.signoff { margin-top: 64px; border: 1px solid var(--rule); background: var(--panel); }
.signoff-head { padding: 28px 32px 0; }
.signoff-body { padding: 20px 32px 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
@media (max-width: 820px) { .signoff-body { grid-template-columns: 1fr; } }
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; align-content: start; }
@media (max-width: 620px) { .choices { grid-template-columns: 1fr; } }
.choice {
  display: flex; align-items: center; gap: 13px; padding: 14px 16px; cursor: pointer;
  border: 1px solid var(--rule); background: var(--panel-2); text-align: left; width: 100%;
  font: inherit; color: inherit; transition: border-color .14s, background .14s;
}
.choice:hover { border-color: var(--accent); }
.choice[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--panel-2)); }
.choice .mark { width: 16px; height: 16px; border-radius: 999px; border: 1.5px solid var(--muted); flex: none; }
.choice[aria-pressed="true"] .mark { border-color: var(--accent); background: var(--accent);
  box-shadow: inset 0 0 0 3px var(--panel-2); }
.choice b { font-family: Archivo, sans-serif; font-size: 15.5px; font-weight: 600; }
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.field label { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); }
.field input, .field textarea {
  font: inherit; font-size: 14.5px; padding: 11px 13px; background: var(--panel-2);
  border: 1px solid var(--rule); color: var(--ink); border-radius: 0;
}
.field textarea { min-height: 92px; resize: vertical; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.btn {
  font-family: Archivo, sans-serif; font-weight: 600; font-size: 14.5px; letter-spacing: .02em;
  background: var(--accent); color: var(--accent-in); border: 1px solid var(--accent);
  padding: 13px 24px; cursor: pointer; text-decoration: none; display: inline-block;
}
.btn:hover { filter: brightness(1.08); }
.btn.ghost { background: none; color: var(--ink); border-color: var(--rule); }
.btn.ghost:hover { border-color: var(--muted); filter: none; }
.btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; filter: none; }
.hint { font-size: 13.5px; color: var(--muted); margin-top: 13px; }

footer { margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); }

.photo-note { font-size: 13.5px; color: var(--muted); margin-top: 18px; }

/* ==========================================================================
   The three sample pages — real, full-width pages, not framed mock-ups.
   ========================================================================== */
body.site { margin: 0; background: #0B0B0C; }
.site-page { width: 100%; }
.site-page > div { min-height: 100vh; }
.site-page * { box-sizing: border-box; }
.photo { background-size: cover; background-position: center; background-repeat: no-repeat; }

/* The designs are authored at desktop width. These keep them coherent on a
   narrower window without touching the desktop composition. */
@media (max-width: 1040px) {
  .site-page [style*="grid-template-columns: repeat(4"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .site-page [style*="grid-template-columns: repeat(3"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .site-page h1 { font-size: 8.4vw !important; }
  .site-page h2 { font-size: 5vw !important; }
}
@media (max-width: 760px) {
  .site-page [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  .site-page > div > div { padding-left: 22px !important; padding-right: 22px !important; }
  .site-page h1 { font-size: 11vw !important; }
  .site-page h2 { font-size: 7.5vw !important; }
}

/* a discreet way back to the other two, so the page itself stays a real page */
.switcher {
  position: fixed; right: 18px; bottom: 18px; z-index: 100;
  display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 24px);
  background: rgba(15, 14, 13, .92); color: #EFEBE5;
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px;
  padding: 9px 18px; box-shadow: 0 12px 34px rgba(0, 0, 0, .4);
  font-family: "IBM Plex Mono", monospace; font-size: 11.5px;
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; overflow-x: auto;
}
@supports (backdrop-filter: blur(8px)) { .switcher { backdrop-filter: blur(8px); } }
.switcher .sw-now { color: #E8323C; }
.switcher a { color: #b3aca5; text-decoration: none; }
.switcher a:hover, .switcher a:focus-visible { color: #fff; }
.switcher .sw-home { color: #fff; border-left: 1px solid rgba(255, 255, 255, .18); padding-left: 14px; }
@media print { .switcher { display: none; } }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* motifs used inside the designs themselves */
@keyframes eq { 0%,100% { transform: scaleY(0.22); } 50% { transform: scaleY(1); } }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes spinslow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes pulseglow { 0%,100% { opacity: .35; } 50% { opacity: .7; } }