/* Self-hosted web fonts (SIL Open Font License). Generated by tools/fetch_fonts.py. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(../fonts/archivo-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(../fonts/archivo-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* The Polish letters only (tools/subset_fonts.py): declared after the faces above, so browsers take these
   letters from this 11 KB file instead of downloading the whole latin-ext file for a name like Pacuła. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(../fonts/archivo-normal-pl.woff2) format('woff2');
  unicode-range: U+0104-0107, U+0118-0119, U+0141-0144, U+015A-015B, U+0179-017C;
}
@font-face {
  font-family: 'Libre Caslon Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/libre-caslon-display-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Libre Caslon Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/libre-caslon-display-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Libre Caslon Text';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/libre-caslon-text-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Libre Caslon Text';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/libre-caslon-text-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Libre Caslon Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/libre-caslon-text-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Libre Caslon Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/libre-caslon-text-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* TARA Labs: site styles.
   Direction A ("Cross-section"): white ground so product photographs sit on the page,
   graphite type in Archivo (expanded for display), copper only as a material inside drawings.
   One second voice: the maroon "Nothing like live" band in Libre Caslon, also used for the
   artist pages and for quotations. */

:root {
  color-scheme: light;
  --white: #fff;
  --alu: #eceeef;
  --alu-2: #e2e6e8;
  --line: #d3d8db;
  --line-soft: #e5e8ea;
  --ink: #1e2226;
  --steel: #58626a;
  --steel-2: #6f7980;
  --cu1: #f7c09b;
  --cu2: #d27b4b;
  --cu3: #93451f;
  --cu-edge: #6a2a10;
  --velvet: #3a0b11;
  --garnet: #4c1019;
  --ivory: #f3eadb;
  --rose: #d0b6ab;
  --gilt: #d5b06b;
  --danger: #b3261e;
  --focus: var(--ink);
  --sans: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Libre Caslon Text', ui-serif, Georgia, 'Times New Roman', serif;
  --serif-d: 'Libre Caslon Display', ui-serif, Georgia, 'Times New Roman', serif;
  --cjk: 'PingFang HK', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft JhengHei', 'Microsoft YaHei', 'Noto Sans CJK TC', sans-serif;
  --wrap: 1360px;
  --gut: 56px;
  --header-h: 84px;
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0; background: var(--white); color: var(--ink);
  font-family: var(--sans); font-stretch: 100%; font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
[hidden] { display: none !important; }
:where(h1, h2, h3, h4, p, ol, ul, dl, dd, figure, blockquote, address) { margin: 0; }
:where(ol, ul) { padding: 0; list-style: none; }
:where(img, svg, video) { max-width: 100%; }
img { height: auto; }
a { color: inherit; }
address { font-style: normal; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
main:focus { outline: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; text-decoration: none; }
.skip:focus { top: 12px; }
sup.tm { font-size: .55em; line-height: 0; vertical-align: .62em; font-weight: inherit; margin-left: .04em; }
.nw { white-space: nowrap; }
:lang(zh) { font-family: var(--sans), var(--cjk); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }

/* ---------------------------------------------------------------- type */
.d1 { font-stretch: 122%; font-weight: 600; letter-spacing: -.025em; text-wrap: balance; font-size: clamp(34px, 2.6vw + 22px, 76px); line-height: 1; }
@media (max-width: 420px) { .d1--long { font-stretch: 105%; font-size: min(34px, 9.4vw); } }
.d2 { font-stretch: 122%; font-weight: 600; letter-spacing: -.02em; text-wrap: balance; font-size: clamp(28px, 1.9vw + 20px, 50px); line-height: 1.05; }
.d3 { font-stretch: 120%; font-weight: 600; letter-spacing: -.015em; font-size: 24px; line-height: 1.15; }
.d4 { font-stretch: 112%; font-weight: 600; font-size: 19px; line-height: 1.3; }
.lead { font-size: 19px; line-height: 1.55; max-width: 36em; }
.muted { color: var(--steel); }
.small { font-size: 14.5px; line-height: 1.5; }
.meta { font-size: 14.5px; color: var(--steel); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px;
  background: var(--ink); color: #fff; text-decoration: none; border: 1px solid var(--ink); border-radius: 2px;
  font-stretch: 112%; font-weight: 600; font-size: 15px; line-height: 1.2; cursor: pointer; text-align: center;
}
.btn:hover { background: #000; border-color: #000; }
.btn:disabled { opacity: .6; cursor: progress; }
.btn--light { background: var(--white); color: var(--ink); }
.btn--light:hover { background: var(--alu); color: var(--ink); }
.btn--sm { min-height: 44px; padding: 0 20px; font-size: 14.5px; }
.lnk { font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }
.lnk:hover { text-decoration-thickness: 2px; }
button.lnk { background: none; border: 0; padding: 0; cursor: pointer; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.stack { display: flex; flex-direction: column; gap: 22px; }
.self-start { align-self: flex-start; }
.mt-s { margin-top: 24px; } .mt-m { margin-top: 40px; } .mt-l { margin-top: 64px; }

/* ------------------------------------------------------------- preview */
.preview-bar { background: var(--ink); color: #dfe3e6; font-size: 13px; text-align: center; padding: 7px 16px; }
.provisional { border-left: 2px solid var(--ink); padding: 4px 0 4px 18px; font-size: 14.5px; color: var(--steel); }
.provisional strong { color: var(--ink); display: block; }

/* -------------------------------------------------------------- header */
.site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--line); }
/* the frosted background sits on a pseudo-element: a backdrop-filter on the header itself
   would make it the containing block of the fixed mobile menu */
.site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(255,255,255,.97); }
@supports ((-webkit-backdrop-filter: blur(8px)) or (backdrop-filter: blur(8px))) {
  .site-header::before { background: rgba(255,255,255,.95); -webkit-backdrop-filter: saturate(1.5) blur(20px); backdrop-filter: saturate(1.5) blur(20px); }
}
.menu-open .site-header::before { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
.site-header > .wrap { display: flex; align-items: center; gap: 28px; min-height: var(--header-h); position: relative; }
.brand { display: block; flex: none; width: 150px; color: var(--ink); line-height: 0; }
.brand svg { width: 100%; height: auto; display: block; }
.main-nav { margin-left: auto; }
.nav { display: flex; align-items: center; gap: 2px; }
.nav > li { position: relative; display: flex; align-items: center; }
.nav > li.has-mega { position: static; }
.nav-link { display: flex; align-items: center; padding: 10px 10px; font-size: 15px; font-weight: 500; text-decoration: none; border-radius: 2px; white-space: nowrap; }
.has-drop > .nav-link { padding-right: 4px; }
.drop-btn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 40px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 2px; color: var(--ink); }
.drop-btn .chev { width: 9px; height: 9px; opacity: .6; transition: transform .2s ease; }
.nav > li:hover > .nav-link, .nav > li.is-open > .nav-link { background: var(--alu); }
.nav > li:hover > .drop-btn, .nav > li.is-open > .drop-btn { background: var(--alu); }
.nav > li.is-open .chev { transform: rotate(180deg); }
.nav-link.is-section { box-shadow: inset 0 -2px 0 var(--ink); border-radius: 0; }
.drop {
  position: absolute; left: 0; top: calc(100% - 4px); min-width: 290px; padding: 10px; background: var(--white);
  border: 1px solid var(--line); box-shadow: 0 18px 40px -24px rgba(30,34,38,.35);
  display: none; opacity: 0; transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease, display .16s allow-discrete;
}
.nav > li.is-open > .drop { display: grid; opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .nav > li:hover > .drop { display: grid; opacity: 1; transform: none; }
  .nav > li:hover .chev { transform: rotate(180deg); }
}
@starting-style { .nav > li > .drop { opacity: 0; transform: translateY(6px); } }
.drop a { display: block; padding: 9px 12px; font-size: 15px; text-decoration: none; border-radius: 2px; }
.drop a:hover { background: var(--alu); }
.drop.mega { left: var(--gut); right: var(--gut); top: calc(100% - 1px); grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 12px; padding: 16px; }
/* the panel hangs from the bottom of the header, below its menu item: this strip bridges the gap so the
   pointer can travel from "Products" to the panel without closing it */
.drop.mega::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 22px; }
.mega-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.mega-grid a { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: center; padding: 10px 12px; }
.mega-grid img { width: 112px; height: 70px; object-fit: contain; display: block; background: var(--white); }
.mega-grid .t { display: block; font-weight: 600; font-stretch: 110%; font-size: 15.5px; line-height: 1.25; }
.mega-grid .c { display: block; font-size: 13.5px; color: var(--steel); }
.mega-side { background: var(--alu); padding: 22px; display: flex; flex-direction: column; gap: 14px; font-size: 15px; }
.mega-side p { color: var(--steel); line-height: 1.5; }
.mega-side .d4 { color: var(--ink); }
.drop .mega-side .btn { display: inline-flex; align-self: flex-start; color: #fff; padding: 0 20px; }
.drop .mega-side .btn:hover { background: #000; }
.mega-links { display: grid; gap: 2px; margin-top: 4px; }
.drop .mega-links a { padding: 6px 0; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; background: none; }
.header-cta { display: flex; align-items: center; gap: 20px; flex: none; }
.ext-link { font-size: 15px; font-weight: 500; text-decoration: none; }
.ext-link:hover { text-decoration: underline; text-underline-offset: .35em; }
.search-link { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; margin: 0 -12px 0 -16px; color: inherit; border-radius: 2px; }
.search-link svg { width: 20px; height: 20px; display: block; }
.search-link:hover { background: var(--alu); }
.menu-btn { display: none; margin-left: auto; width: 48px; height: 48px; border: 0; background: none; cursor: pointer; position: relative; }
.menu-icon, .menu-icon::before, .menu-icon::after { position: absolute; left: 13px; width: 22px; height: 2px; background: var(--ink); content: ""; transition: transform .2s ease, top .2s ease, background .2s ease; }
.menu-icon { top: 23px; }
.menu-icon::before { left: 0; top: -7px; }
.menu-icon::after { left: 0; top: 7px; }
.menu-open .menu-icon { background: transparent; }
.menu-open .menu-icon::before { top: 0; transform: rotate(45deg); }
.menu-open .menu-icon::after { top: 0; transform: rotate(-45deg); }
.mobile-menu { display: none; }
.menu-btn.menu-link, .m-close { display: none; }

/* ---------------------------------------------------------- breadcrumbs */
.crumbs-nav { margin-bottom: 40px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 14px; color: var(--steel); }
.crumbs li + li::before { content: "/"; margin: 0 10px; color: #b5bdc2; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; text-underline-offset: .3em; }
.crumbs [aria-current] { color: var(--ink); }

/* ------------------------------------------------------- page heading */
.page-head { padding: 48px 0 64px; }
.page-head h1 { max-width: 15em; }
.page-head .lead { margin-top: 24px; color: var(--steel); }
.page-head .row { margin-top: 32px; }
.page-head .meta { margin-top: 16px; }

/* -------------------------------------------------- cross-section figure */
.xs { margin: 0; overflow: hidden; }
.xs-svg { display: block; width: 100%; height: auto; }
.xs .j-outer { fill: #2a2f34; }
.xs .j-weave { fill: none; stroke: #454c53; stroke-width: 9; stroke-dasharray: 3 5; }
.xs .j-core { fill: #f3f4f5; }
.xs .tube { fill: #fff; stroke: var(--ink); stroke-width: 2.5; }
.xs .tube-sh { fill: none; stroke: #e7eaec; stroke-width: 6; }
.xs .vac { fill: #dde3e7; }
.xs .mol { fill: #97a1a8; }
.xs .cu1 { stop-color: var(--cu1); } .xs .cu2 { stop-color: var(--cu2); } .xs .cu3 { stop-color: var(--cu3); }
.xs .cu-edge { stroke: var(--cu-edge); stroke-width: 1.4; }
.xs .shield { fill: none; stroke: #7d878e; stroke-width: 9; stroke-dasharray: 2 3; }
.xs .shield-gap { fill: none; stroke: #f3f4f5; stroke-width: 5; }
.xs .ld { stroke: var(--steel); stroke-width: 1.3; }
.xs .ld-dot { fill: var(--ink); }
.xs .lb { font-family: var(--sans); font-stretch: 112%; font-weight: 600; font-size: 19px; fill: var(--ink); }
.xs .lb-s { font-family: var(--sans); font-size: 16.5px; fill: var(--steel); }
.xs .st { opacity: 0; transition: opacity .45s ease; }
.xs .st.on { opacity: 1; }
.xs .xs-jacket { transform-origin: 320px 340px; animation: xsJ 1.1s cubic-bezier(.2,.7,.2,1) both; }
.xs .xs-tubes circle { transform-box: fill-box; transform-origin: center; animation: xsT .7s cubic-bezier(.2,.7,.2,1) both; }
.xs .xs-tubes circle:nth-child(1) { animation-delay: .3s; } .xs .xs-tubes circle:nth-child(2) { animation-delay: .38s; }
.xs .xs-tubes circle:nth-child(3) { animation-delay: .46s; } .xs .xs-tubes circle:nth-child(4) { animation-delay: .54s; }
.xs .xs-tubes circle:nth-child(5) { animation-delay: .62s; } .xs .xs-tubes circle:nth-child(6) { animation-delay: .7s; }
.xs .xs-tubes circle:nth-child(7) { animation-delay: .78s; }
.xs .xs-in { animation: xsF .7s ease 1s both; }
.xs .xs-labels { animation: xsF .7s ease 1.35s both; }
@keyframes xsJ { from { opacity: 0; transform: scale(.92) rotate(-10deg); } to { opacity: 1; transform: none; } }
@keyframes xsT { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes xsF { from { opacity: 0; } to { opacity: 1; } }
.xs-legend { display: none; }
.yrs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 8px; border-top: 1px solid var(--line); }
.yr { appearance: none; background: none; border: 0; box-shadow: inset 0 3px 0 transparent; padding: 15px 4px 6px 0; text-align: left; cursor: pointer; color: var(--steel); display: flex; flex-direction: column; gap: 2px; transition: box-shadow .2s ease, color .2s ease; }
.yr:hover { color: var(--ink); }
.yr[aria-pressed="true"] { box-shadow: inset 0 3px 0 var(--ink); color: var(--ink); }
.yr:focus-visible { outline-offset: -2px; }
.yr-n { font-stretch: 118%; font-weight: 600; font-size: 19px; letter-spacing: -.01em; }
.yr-l { font-size: 13.5px; }
.xs-cap { display: grid; gap: 4px; margin-top: 20px; min-height: 112px; max-width: 38em; }
.xs-cap-t { font-stretch: 112%; font-weight: 600; font-size: 19px; }
.xs-cap-d { color: var(--steel); }
.xs-note { font-size: 13px; color: var(--steel); margin-top: 8px; }

/* ---------------------------------------------------------------- home */
.hero { padding: 64px 0 56px; }
.hero-g { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px 56px; align-items: center; }
.hero-copy { display: flex; flex-direction: column; gap: 28px; padding-bottom: 40px; }

/* the homepage opens on a dark stage: brand, flagship, awards */
.hx {
  --hx-bg: #070809; --hx-ink: #f3efe7; --hx-mute: #a6acb1; --hx-gold: #d6b26e; --hx-line: rgba(255,255,255,.13);
  --hx-aw: 124px; --hx-edge: max(var(--gut), calc((100% - var(--wrap)) / 2 + var(--gut))); --focus: #fff;
  --mk: clamp(380px, 16.667vw + 240px, 560px);          /* width of the wordmark, and of the tagline under it */
  position: relative; isolation: isolate; overflow: hidden; display: flex; background: var(--hx-bg); color: var(--hx-ink);
  min-height: max(660px, min(100svh, 1040px)); container-type: inline-size;
}
/* the light on the stage, warm behind the cable; it comes up as the page opens */
.hx::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(46% 60% at 73% 50%, rgba(214,178,110,.13), rgba(214,178,110,.05) 52%, transparent 72%),
    radial-gradient(28% 36% at 90% 10%, rgba(255,255,255,.07), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 34%);
  animation: hx-glow 2.6s cubic-bezier(.3,.1,.2,1) both;
}
@keyframes hx-glow { from { opacity: 0; } }
.hx-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.hx-g {
  flex: 1; display: grid; padding-top: calc(var(--header-h) + 28px);
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  grid-template-rows: 1fr auto auto auto auto 1.2fr auto;
  grid-template-areas: ". media" "kick media" "title media" "lead media" "cta media" ". media" "awards awards";
}
.hx-kick { grid-area: kick; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 28px; font-size: 12.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--hx-gold); }
.hx-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .75; }
.hx-title { grid-area: title; display: flex; flex-direction: column; gap: 24px; margin: 0; font-weight: 400; container-type: inline-size; }
.hx-mark { display: block; width: min(var(--mk), 100%); color: #fff; line-height: 0; }
.hx-mark svg { display: block; width: 100%; height: auto; }
.hx-tag { font-family: var(--serif-d); font-size: clamp(38px, 2.3vw + 20px, 68px); line-height: 1.04; color: var(--hx-ink); text-wrap: balance; }
/* "The Absolute Reference." set exactly as wide as the wordmark above it (its advance width is 9.16 em) */
@media (min-width: 961px) {
  @supports (width: 1cqi) { .hx-tag { font-size: calc(min(var(--mk), 100cqi) / 9.16); white-space: nowrap; } }
}
.hx-lead { grid-area: lead; max-width: 31em; margin-top: 26px; font-size: 18px; line-height: 1.6; color: var(--hx-mute); }
.hx-cta { grid-area: cta; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 30px; margin-top: 36px; }
.hx .lnk { color: #fff; }
.hx .btn--light { border-color: #fff; }
.hx .btn--light:hover { background: var(--hx-gold); border-color: var(--hx-gold); color: #111; }
.hx-media { grid-area: media; display: flex; align-items: flex-end; margin: 0; padding: 0 0 6px 7%; }
.hx-img {
  --hx-k: .9;
  position: absolute; z-index: -1; top: 0; right: calc(var(--hx-edge) - 3vw); height: calc((100% - var(--hx-aw)) * var(--hx-k)); aspect-ratio: 1899 / 1568;
  -webkit-mask-image: linear-gradient(118deg, transparent 6%, #000 30%); mask-image: linear-gradient(118deg, transparent 6%, #000 30%);
}
/* Where container units work: the photo keeps a 64 px margin from the window on wide screens (more on very wide
   ones, so it stays near the text), and it is never so large that the cable runs into the name: its height is
   capped by the room to the right of the wordmark, less a 68 px gap (the cable's visible edge sits about 5%
   into the photo, hence 1.15 = 0.95 x the photo's aspect ratio). */
@supports (width: 1cqw) {
  .hx-img {
    --hx-e: max(var(--gut), calc((100cqw - var(--wrap)) / 2 + var(--gut)));
    --hx-r: clamp(16px, calc(var(--hx-e) - 3vw), max(64px, calc(var(--hx-e) - 300px)));
    right: var(--hx-r);
    height: min(calc((100% - var(--hx-aw)) * var(--hx-k)), calc((100cqw - var(--hx-r) - var(--hx-e) - var(--mk) - 68px) / 1.15));
  }
}
.hx-img img { display: block; width: 100%; height: 100%; object-fit: contain; animation: hx-light 2.2s cubic-bezier(.45,0,.2,1) .15s backwards; }
/* the cable comes up out of the dark as the page opens (only while the animation runs: its resting state is the photo as it is) */
@keyframes hx-light { from { filter: brightness(.06); } }
/* a band of light across the cable, masked to the cable by the photo the browser already loaded (site.js sets
   --hx-mask and .is-lit after the page has settled). .hx-sweep crosses on its own every few seconds; while the
   pointer is on the stage, .hx-glint follows it instead (site.js sets --gx). Each band is a child moved with a
   transform, so it never repaints the photo. */
.hx-sweep, .hx-glint { position: absolute; inset: 0; overflow: hidden; pointer-events: none; mix-blend-mode: overlay; display: none; }
.hx-sweep::before, .hx-glint::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 120%;
  background: linear-gradient(112deg, transparent 30.44%, rgba(255,244,228,var(--hx-a)) 50%, transparent 69.56%);
}
.hx-img.is-lit .hx-sweep, .hx-img.is-lit .hx-glint {
  display: block; -webkit-mask: var(--hx-mask) center / 100% 100% no-repeat; mask: var(--hx-mask) center / 100% 100% no-repeat;
}
.hx-sweep { --hx-a: .95; transition: opacity .4s ease; }
.hx-sweep::before { transform: translateX(-91.667%); animation: hx-sweep 8.5s cubic-bezier(.45,.05,.25,1) 1.6s infinite; }
@keyframes hx-sweep { 0% { transform: translateX(-91.667%); } 42%, 100% { transform: translateX(75%); } }
.hx-img.is-off .hx-sweep::before, .hx.is-near .hx-sweep::before { animation-play-state: paused; }
.hx.is-near .hx-sweep { opacity: 0; }
.hx-glint { --hx-a: .8; opacity: 0; transition: opacity .6s ease; }
.hx-glint::before { transform: translateX(calc(75% - var(--gx, .5) * 166.667%)); will-change: transform; }
.hx.is-near .hx-glint { opacity: 1; }
/* with a mouse, the cable shifts a few pixels against the pointer (site.js sets --px, --py on .hx-img) */
@media (min-width: 961px) {
  .hx-img { translate: calc(var(--px, 0) * -12px) calc(var(--py, 0) * -8px); rotate: calc(var(--px, 0) * -.3deg); }
}
@media (min-width: 961px) and (hover: hover) and (pointer: fine) {
  .hx-img { will-change: transform, translate, rotate; }
}
/* the foot of the stage: one claim between two gold laurels, and the way to the full list */
.hx-awards {
  grid-area: awards; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px 28px;
  min-height: var(--hx-aw); margin-top: 32px; padding: 24px 0 26px; border-top: 1px solid var(--hx-line);
}
.aw-seal { grid-column: 2; display: flex; align-items: center; justify-content: center; gap: 22px; margin: 0; }
.laurel { flex: none; width: 42px; height: 70px; color: var(--hx-gold); }
.laurel--r { transform: scaleX(-1); }
.aw-claim { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.aw-since { font-size: clamp(15px, .5vw + 9.5px, 19px); font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--hx-gold); }
.aw-line { font-family: var(--serif-d); font-size: clamp(24px, 1.1vw + 13px, 34px); line-height: 1.15; color: var(--hx-ink); text-wrap: balance; }
.aw-more { grid-column: 3; justify-self: end; font-size: 14px; white-space: nowrap; }
@keyframes hx-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes hx-in { from { transform: translate(2%, -3%) scale(1.02); } }
.hx-kick, .hx-tag, .hx-lead, .hx-cta, .hx-awards { animation: hx-rise .9s cubic-bezier(.2,.7,.2,1) both; }
.hx-tag { animation-delay: .3s; }
.hx-lead { animation-delay: .38s; }
.hx-cta { animation-delay: .46s; }
.hx-awards { animation-delay: .62s; }
.hx-mark {
  -webkit-mask: linear-gradient(90deg, #000 44%, transparent 56%) 0 0 / 250% 100% no-repeat; mask: linear-gradient(90deg, #000 44%, transparent 56%) 0 0 / 250% 100% no-repeat;
  animation: hx-wipe 1.5s cubic-bezier(.55,.1,.25,1) .08s both;
}
@keyframes hx-wipe { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } }
.hx-img { animation: hx-in 1.6s cubic-bezier(.16,.8,.2,1) both; }

/* the header sits on the stage until the stage scrolls away (site.js adds .is-stuck) */
.site-header--hero { position: absolute; left: 0; right: 0; }
.site-header--hero.is-stuck { position: fixed; top: 0; animation: hdr-drop .32s cubic-bezier(.2,.7,.2,1); }
@keyframes hdr-drop { from { transform: translateY(-100%); } }
.site-header .brand { transition: opacity .25s ease, visibility .25s; }
.site-header--hero .drop { --focus: var(--ink); color: var(--ink); }
html:not(.menu-open) .site-header--hero:not(.is-stuck) { --focus: #fff; color: #fff; border-bottom-color: transparent; }
html:not(.menu-open) .site-header--hero:not(.is-stuck)::before { background: linear-gradient(rgba(7,8,9,.6), rgba(7,8,9,0)); -webkit-backdrop-filter: none; backdrop-filter: none; }
html:not(.menu-open) .site-header--hero:not(.is-stuck) .brand { opacity: 0; visibility: hidden; }
html:not(.menu-open) .site-header--hero:not(.is-stuck) .drop-btn { color: #fff; }
html:not(.menu-open) .site-header--hero:not(.is-stuck) .nav > li:hover > .nav-link,
html:not(.menu-open) .site-header--hero:not(.is-stuck) .nav > li.is-open > .nav-link,
html:not(.menu-open) .site-header--hero:not(.is-stuck) .nav > li:hover > .drop-btn,
html:not(.menu-open) .site-header--hero:not(.is-stuck) .nav > li.is-open > .drop-btn { background: rgba(255,255,255,.12); }
html:not(.menu-open) .site-header--hero:not(.is-stuck) .header-cta .btn { background: #fff; border-color: #fff; color: var(--ink); }
html:not(.menu-open) .site-header--hero:not(.is-stuck) .search-link:hover { background: rgba(255,255,255,.12); }
html:not(.menu-open) .site-header--hero:not(.is-stuck) .header-cta .btn:hover { background: var(--hx-gold, #d6b26e); border-color: #d6b26e; }
html:not(.menu-open) .site-header--hero:not(.is-stuck) .menu-icon,
html:not(.menu-open) .site-header--hero:not(.is-stuck) .menu-icon::before,
html:not(.menu-open) .site-header--hero:not(.is-stuck) .menu-icon::after { background: #fff; }

@media (max-width: 1240px) {
  .hx { --mk: 440px; }
  .hx-img { --hx-k: .84; }
  .hx-kick { flex-direction: column; align-items: flex-start; gap: 4px; }
  .hx-dot { display: none; }
}
@media (max-width: 1140px) and (min-width: 961px) {
  .hx { --mk: 380px; }
  .hx-img { --hx-k: .76; }
}
@media (max-width: 960px) {
  .hx { min-height: 0; }
  .hx-g {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: none; padding-top: calc(var(--header-h) + 30px);
    grid-template-areas: "kick" "title" "media" "lead" "cta" "awards";
  }
  .hx-kick { flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 20px; font-size: 11px; letter-spacing: .18em; }
  .hx-dot { display: none; }
  .hx-title { gap: 18px; }
  .hx-tag { min-height: 2.08em; }
  .hx-mark { width: min(420px, 86%); }
  .hx-media { position: relative; display: block; margin: 22px calc(-1 * var(--gut)) 0; padding: 0; }
  .hx-img {
    position: relative; z-index: 0; top: auto; right: auto; height: auto; width: 112%; margin: 0 0 0 -14%;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 17%); mask-image: linear-gradient(180deg, transparent, #000 17%);
  }
  .hx-lead { margin-top: 30px; font-size: 16.5px; }
  .hx-cta { margin-top: 28px; }
  .hx-awards { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 18px; min-height: 0; margin-top: 44px; padding: 30px 0 34px; }
  .aw-seal, .aw-more { grid-column: 1; }
  .aw-seal { gap: 16px; }
  .aw-more { justify-self: center; }
  .aw-line { max-width: 13em; }
}
@media (max-width: 560px) {
  .aw-seal { gap: 10px; }
  .laurel { width: 30px; height: 50px; }
  .aw-since { font-size: 13.5px; letter-spacing: .2em; }
  .aw-line { font-size: 21px; }
}
@media (max-width: 380px) {
  .hx-kick { font-size: 10.5px; letter-spacing: .13em; }
  .laurel { width: 24px; height: 40px; }
  .aw-line { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) { .hx-img .hx-sweep, .hx-img .hx-glint { display: none; } }
@media print {
  .hx { background: none !important; color: var(--ink); min-height: 0; }
  .hx::before, .hx-sweep, .hx-glint { display: none !important; }
  .hx-img img { animation: none; }
  .hx-mark { -webkit-mask: none; mask: none; }
  .hx-mark, .hx-tag, .aw-line { color: var(--ink); }
  .hx-lead { color: var(--steel); }
  .hx-kick, .aw-since, .laurel { color: #7a5a1c; }
  .hx-img { position: static; height: auto; width: 55%; -webkit-mask-image: none; mask-image: none; }
  .hx .lnk { color: var(--ink); }
  .hx .btn--light { border-color: var(--ink); }
}

.spec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); border-top: 1px solid var(--ink); font-size: 15.5px; margin: 0; }
.spec > div { display: contents; }
.spec dt, .spec dd { padding: 12px 0; border-bottom: 1px solid var(--line); margin: 0; }
.spec dt { color: var(--steel); padding-right: 16px; }
.spec dd { font-weight: 600; font-variant-numeric: tabular-nums; }

.idx { padding: 24px 0 120px; }
.coll { padding: 104px 0 120px; }
.coll .split-head { margin-bottom: 0; }
.coll-grid { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 52px 28px; }
.coll-card { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); }
.coll-img { display: block; aspect-ratio: 3 / 2; margin-bottom: 18px; background: #f2f3f4; overflow: hidden; }
.coll-img img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 5% 6%; mix-blend-mode: multiply; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.coll-card:hover .coll-img img { transform: scale(1.045); }
.coll-name { font-stretch: 118%; font-weight: 600; font-size: 25px; line-height: 1.15; letter-spacing: -.015em; }
.coll-card:hover .coll-name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.coll-n { margin-top: 4px; font-size: 14.5px; color: var(--steel); font-variant-numeric: tabular-nums; }
.coll-desc { margin-top: 10px; font-size: 15px; line-height: 1.55; color: var(--steel); max-width: 34em; }
.coll-more { display: inline-block; margin-top: 56px; }
@media (max-width: 960px) {
  .coll-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 18px; margin-top: 36px; }
  .coll-name { font-size: 21px; }
  .coll-more { margin-top: 40px; }
}
@media (max-width: 560px) {
  .coll-grid { gap: 30px 14px; }
  .coll-img { margin-bottom: 12px; }
  .coll-name { font-size: 17px; letter-spacing: -.01em; }
  .coll-n { font-size: 13.5px; }
  .coll-desc { display: none; }
}
.split-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px 56px; align-items: end; margin-bottom: 48px; }
.split-head .lead { color: var(--steel); }
.idx-list { border-top: 1px solid var(--ink); }
.idx-row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 1.3fr) 200px; gap: 0 32px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.idx-row:hover .idx-name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.idx-name { font-stretch: 122%; font-weight: 600; letter-spacing: -.02em; font-size: 28px; line-height: 1.1; }
.idx-desc { color: var(--steel); font-size: 15.5px; line-height: 1.5; }
.idx-n { font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.idx-row img { width: 200px; height: 110px; object-fit: contain; display: block; }

/* the maroon band: the names, set like the credits on a concert bill. One heading line over a gilt rule, then
   three groups side by side, each three names deep. Every line is either Libre Caslon Display or Caslon
   italic: no line here needs the upright Caslon Text face, so the page never downloads it. */
.live { --focus: var(--ivory); position: relative; background: var(--velvet); color: var(--ivory); overflow: hidden; isolation: isolate; font-family: var(--serif); }
.live a { color: var(--ivory); }
.live-spot { position: absolute; left: -12%; top: -70%; width: 64%; height: 240%; z-index: 0; background: radial-gradient(closest-side, rgba(255,206,160,.16), rgba(255,206,160,.05) 55%, rgba(255,206,160,0)); transition: opacity 1.8s ease .3s; }
.live-g { position: relative; z-index: 1; padding-top: 52px; padding-bottom: 58px; }
.live-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 22px; padding-bottom: 16px; border-bottom: 1px solid rgba(213,176,107,.55); }
.live-h h2 { font-family: var(--serif-d); font-weight: 400; font-size: clamp(30px, 2.3vw, 38px); line-height: 1.1; }
.live-h .sub { font-style: italic; color: var(--rose); }
.live-more { margin-left: auto; font-style: italic; }
.live-go { display: inline-block; font-style: italic; text-decoration: none; border-bottom: 1px solid var(--gilt); padding-bottom: 2px; }
.live-go:hover { border-bottom-color: var(--ivory); }
.js .live:not(.is-lit) .live-spot { opacity: 0; }
.credits { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 18px 40px; margin-top: 24px; }
.credits dt { font-style: italic; color: var(--rose); font-size: 15px; }
.credits dd { margin: 6px 0 0; }
/* names three deep, a column of three per group (the endorsers fill three such columns) */
.names { list-style: none; margin: 0; padding: 0; display: grid; grid-template-rows: repeat(3, auto); grid-auto-flow: column; justify-content: start; gap: 0 clamp(28px, 2.6vw, 44px); font-family: var(--serif-d); font-size: clamp(19px, 1.4vw, 23px); line-height: 1.45; }
.names li { white-space: nowrap; }
/* Devon's line under the names (October 2026), over a gilt rule like the one under the heading */
.live-note { margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(213,176,107,.55); font-style: italic; font-size: clamp(18px, 1.3vw + 2px, 22px); line-height: 1.45; color: var(--ivory); text-wrap: balance; }
@media (max-width: 1100px) {
  .credits { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .credits > div { display: grid; grid-template-columns: 172px minmax(0, 1fr); gap: 0 20px; align-items: baseline; }
  .credits dd { margin: 0; }
  .names { display: flex; flex-wrap: wrap; gap: 0 1em; }
}
@media (max-width: 720px) {
  .live-h { display: block; }
  .live-h .sub { margin-top: 4px; }
  .live-more { margin-top: 12px; }
}
/* "TARA Labs — a legacy of innovation": Devon's industry firsts along one rule, a copper dot at each year
   (homepage and Technology page; content/site.json, legacy) */
.legacy { padding: 104px 0 112px; }
.page-head + .legacy { padding-top: 8px; }
.legacy .split-head { margin-bottom: 60px; }
.legacy-more { margin-top: 20px; }
/* the two labels Devon set in capitals: TARA Labs over the title, Industry firsts over the timeline */
.legacy-kick, .firsts-kick { display: block; font-size: 13px; font-stretch: 100%; font-weight: 600; line-height: 1.3; letter-spacing: .2em; text-transform: uppercase; color: var(--steel); }
.legacy-kick { margin-bottom: 16px; }
.firsts-kick { margin-bottom: 26px; }
.firsts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 36px; border-top: 1px solid var(--line); }
.first { position: relative; padding-top: 34px; }
.first::before { content: ""; position: absolute; left: 0; top: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--cu3); }
.first-yr { font-stretch: 122%; font-weight: 600; font-size: clamp(36px, 1.6vw + 16px, 46px); line-height: 1; letter-spacing: -.02em; color: var(--cu3); font-variant-numeric: lining-nums tabular-nums; }
.first-t { margin-top: 16px; font-size: 18px; font-weight: 600; line-height: 1.3; text-wrap: balance; }
.first-d { margin-top: 10px; font-size: 15.5px; line-height: 1.55; color: var(--steel); }
.first-img { display: block; aspect-ratio: 4 / 3; margin-bottom: 24px; background: #f2f3f4; overflow: hidden; }
.first-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1240px) {
  .firsts { grid-template-columns: minmax(0, 1fr); border-top: 0; }
  .first { display: grid; grid-template-columns: 150px minmax(0, 1fr); column-gap: 32px; align-content: start; padding: 28px 0 30px; border-top: 1px solid var(--line); }
  .first-img, .first-t, .first-d { grid-column: 2; }
  .first-yr { grid-column: 1; grid-row: 1 / span 3; }
  .first-t { margin-top: 0; }
  .first-img { max-width: 320px; }
}
@media (max-width: 600px) {
  .legacy .split-head { margin-bottom: 40px; }
  .first { grid-template-columns: 74px minmax(0, 1fr); column-gap: 16px; padding: 22px 0 24px; }
  .first-yr { font-size: 26px; padding-top: 1px; }
  .first-t { font-size: 17px; }
}
@media (max-width: 600px) {
  .credits { gap: 16px; margin-top: 20px; }
  .credits > div { display: block; }
  .credits dd { margin-top: 2px; }
  .names { font-size: 19px; line-height: 1.4; }
  .live-note { margin-top: 22px; padding-top: 18px; font-size: 18px; }
}

.sig { background: var(--alu); padding: 110px 0; }
.sig-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr)); gap: 72px 64px; margin-top: 56px; }
.sig-c { display: flex; flex-direction: column; gap: 18px; }
.sig-c img { width: 100%; max-width: 560px; height: auto; aspect-ratio: 16 / 10; object-fit: contain; object-position: left center; mix-blend-mode: multiply; display: block; margin-bottom: 8px; }
.sig-q { font-stretch: 108%; font-size: 21px; line-height: 1.4; font-weight: 500; }
.sig .split-head { margin-bottom: 0; }

.craft { padding: 120px 0; }
.craft--page { padding: 8px 0 72px; }
.craft-g { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 56px 72px; align-items: stretch; }
.craft-img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; display: block; }
/* the crafting photo is also the poster of the hand-crafting film */
.craft-film { position: relative; display: block; color: #fff; text-decoration: none; overflow: hidden; }
.craft-film .craft-img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.craft-film:hover .craft-img { transform: scale(1.025); }
.craft-cap { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 16px; padding: 64px 24px 22px;
  font-size: 15px; line-height: 1.4; background: linear-gradient(180deg, rgba(7,8,9,0), rgba(7,8,9,.82)); }
.craft-cap .v-play { position: relative; left: auto; bottom: auto; flex: none; }
.craft-cap b { display: block; font-weight: 600; font-stretch: 112%; font-size: 16px; }
.craft-cap-d { margin-left: 4px; color: rgba(255,255,255,.72); font-variant-numeric: tabular-nums; }
.craft-film:hover .v-play { background: var(--ink); box-shadow: 0 0 0 1px #fff; }
.craft-film:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.steps { counter-reset: s; border-top: 1px solid var(--ink); }
.steps > li { counter-increment: s; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.steps > li::before { content: counter(s); font-stretch: 118%; font-weight: 600; font-size: 19px; line-height: 1.35; }
.steps b { display: block; font-weight: 600; font-stretch: 110%; color: var(--ink); }
.steps span { color: var(--steel); font-size: 15.5px; }
.steps--compact > li { grid-template-columns: 40px minmax(0, 1fr); padding: 12px 0; }
.steps--compact span { color: var(--ink); }
.steps--compact b { display: inline; }

/* a single quotation, set large */
/* the films: a dark band of four Vimeo films after the crafting section */
.films { --focus: #fff; padding: 120px 0; background: #0b0c0e; color: #f3efe7; }
.films-kick { margin: 0 0 18px; font-size: 12.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: #d6b26e; }
.films-h { max-width: 21em; color: #f3efe7; }
.film-strip { list-style: none; margin: 52px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); gap: 36px 24px; }
.film--lead { grid-row: span 2; }
.films .film--lead .v-title { font-size: 22px; }
.films .v-frame { aspect-ratio: 3 / 2; background: #000; }
.films .v-title { font-size: 17px; color: #fff; }
.films .v-link { color: inherit; }
.films .v-meta { color: #a6acb1; font-variant-numeric: tabular-nums; }
.films .vcard:hover .v-play { background: #fff; }
.films .vcard:hover .v-play::after { border-left-color: #111; }
.films-more { display: inline-block; margin-top: 44px; color: #fff; }
@media (max-width: 1100px) { .film-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 20px; } .film--lead { grid-column: 1 / -1; grid-row: auto; } .films .film--lead .v-frame { aspect-ratio: 16 / 9; } }
@media (max-width: 480px) {
  .film-strip { gap: 28px 14px; margin-top: 36px; }
  .films .v-title { font-size: 15px; }
  .films .v-play { left: 10px; bottom: 10px; width: 40px; height: 40px; }
  .films .v-play::after { left: 16px; top: 12px; border-width: 8px 0 8px 12px; }
  .craft-cap { padding: 48px 16px 16px; gap: 12px; font-size: 14px; }
}
/* what reviewers and listeners say: lines from the Evolution reviews page, set like a page of a magazine.
   Eleven quotes in six rows: a large line with a smaller one beside it, the two longest side by side last */
.praise { padding: 128px 0 120px; }
.praise-kick { margin: 0 0 64px; font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--steel); }
.praise-wall { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 76px 32px; align-items: start; }
.pq figure, .pq blockquote { margin: 0; }
.pq .q { margin: 0; text-wrap: balance; }
.pq--xl .q { font-family: var(--serif-d); font-size: clamp(40px, 3.6vw, 60px); line-height: 1.04; letter-spacing: -.012em; text-indent: -.36em; }
.pq--l .q { font-family: var(--serif-d); font-size: clamp(28px, 2.15vw, 36px); line-height: 1.16; letter-spacing: -.006em; text-indent: -.36em; }
.pq--m .q { font-family: var(--serif); font-style: italic; font-size: clamp(19px, 1.3vw, 22px); line-height: 1.5; color: #30363b; text-indent: -.3em; }
.pq figcaption { margin-top: 18px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--steel); }
.pq figcaption b { color: var(--ink); font-weight: 600; }
.pq-1 { grid-column: 1 / 8; }
.pq-2 { grid-column: 8 / 13; align-self: end; }
.pq-3 { grid-column: 2 / 8; }
.pq-4 { grid-column: 9 / 13; align-self: center; }
.pq-5 { grid-column: 3 / 13; }
.pq-6 { grid-column: 1 / 6; align-self: center; }
.pq-7 { grid-column: 7 / 13; }
.pq-8 { grid-column: 1 / 9; }
.pq-9 { grid-column: 9 / 13; align-self: end; }
.pq-10 { grid-column: 2 / 7; }
.pq-11 { grid-column: 8 / 13; }
.praise-more { display: inline-block; margin-top: 72px; }
.pq { transition: opacity 1s ease, transform 1.2s cubic-bezier(.2,.7,.2,1); }
.pq:nth-child(2) { transition-delay: .08s; } .pq:nth-child(3) { transition-delay: .16s; } .pq:nth-child(4) { transition-delay: .24s; }
.pq:nth-child(5) { transition-delay: .32s; } .pq:nth-child(6) { transition-delay: .4s; } .pq:nth-child(7) { transition-delay: .48s; }
.pq:nth-child(8) { transition-delay: .56s; } .pq:nth-child(9) { transition-delay: .64s; } .pq:nth-child(10) { transition-delay: .72s; }
.pq:nth-child(11) { transition-delay: .8s; }
.js .praise-wall:not(.is-lit) .pq { opacity: 0; transform: translateY(18px); }
@media (max-width: 1240px) and (min-width: 961px) {
  .pq-3 { grid-column: 1 / 8; }
  .pq-4 { grid-column: 8 / 13; }
  .pq-5 { grid-column: 2 / 13; }
  .pq-6 { grid-column: 1 / 7; }
  .pq-7 { grid-column: 7 / 13; }
  .pq-8 { grid-column: 1 / 13; }
  .pq-9 { grid-column: 5 / 13; align-self: start; }
  .pq-10 { grid-column: 1 / 7; }
  .pq-11 { grid-column: 7 / 13; }
}
@media (max-width: 960px) {
  .praise-kick { margin-bottom: 40px; }
  .praise-wall { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .praise-wall > .pq { grid-column: 1; align-self: start; }
  .pq:nth-child(even) { margin-left: 12%; }
  .pq--xl .q { font-size: clamp(32px, 8.6vw, 46px); }
  .pq--l .q { font-size: clamp(24px, 6.2vw, 32px); }
  .pq--m .q { font-size: 18px; }
  .praise-more { margin-top: 48px; }
}
.buy { padding: 120px 0 96px; border-top: 1px solid var(--line); }
.buy-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); gap: 72px; }
.ctry { color: var(--steel); font-size: 15px; line-height: 1.7; }
.skrooz { border-top: 1px solid var(--line); }
.skrooz-g { display: grid; grid-template-columns: 180px minmax(0, 1fr) auto; gap: 24px 40px; align-items: center; padding-block: 28px 40px; }
.skrooz img { width: 180px; height: 110px; object-fit: contain; display: block; }
.skrooz-mark { font-stretch: 125%; font-weight: 700; letter-spacing: .06em; font-size: 22px; }

/* -------------------------------------------------------- product grid */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 56px 40px; }
.pitem { display: flex; flex-direction: column; gap: 6px; position: relative; }
.pitem .pimg { aspect-ratio: 16 / 10; background: var(--white); margin-bottom: 12px; overflow: hidden; }
.pitem .pimg img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.pitem:hover .pimg img { transform: scale(1.035); }
.ptitle { font-stretch: 116%; font-weight: 600; font-size: 20px; line-height: 1.2; letter-spacing: -.01em; }
.pitem-link { text-decoration: none; }
.pitem-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pitem-link:focus-visible { outline: none; }
.pitem-link:focus-visible::after { outline: 2px solid var(--focus); outline-offset: 6px; }
.pitem:hover .pitem-link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.pitem .variant { font-size: 14.5px; color: var(--steel); }
.pitem .sum { font-size: 15px; color: var(--steel); line-height: 1.5; }
.pitem .attrs { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13.5px; color: var(--steel); margin-top: 4px; }
.pitem .attrs li { display: inline-flex; align-items: center; gap: 6px; }
.pitem .attrs li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--steel-2); }
.pitem .attrs .ext::before { background: var(--ink); }
.pitem .attrs .ctl::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); }
.pitem .attrs .loan::before { background: var(--steel-2); }
.pitem .attrs .award::before { background: var(--ink); border-radius: 0; width: 6px; height: 6px; transform: rotate(45deg); }
.pitem:has([aria-current="page"]) .pimg { box-shadow: inset 0 0 0 2px var(--ink); }
.pitem .attrs .here { font-weight: 600; color: var(--ink); }
.pitem .attrs .here::before { display: none; }
.pgrid--5 { grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 40px 28px; }
.pgrid--5 .ptitle { font-size: 17px; }
.pgrid--single { grid-template-columns: minmax(0, 560px); }

/* ------------------------------------------------------ category pages */
.cat-head { padding: 48px 0 64px; overflow: hidden; }
.cat-g { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px 64px; align-items: center; }
.cat-g .lead { margin-top: 24px; color: var(--steel); }
.cat-g .meta { margin-top: 20px; }
.cat-img { display: block; max-width: none; width: calc(100% + (100vw - min(100vw, var(--wrap))) / 2 + var(--gut)); }
.toolbar { position: sticky; top: var(--header-h); z-index: 20; background: rgba(255,255,255,.96); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.toolbar .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; min-height: 68px; padding-top: 10px; padding-bottom: 10px; }
.seg { display: inline-flex; border: 1px solid var(--ink); border-radius: 2px; }
.seg button { border: 0; background: var(--white); padding: 10px 18px; font-size: 14.5px; font-weight: 500; cursor: pointer; min-height: 44px; }
.seg button + button { border-left: 1px solid var(--ink); }
.seg button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.seg button:focus-visible { outline-offset: 2px; position: relative; z-index: 1; }
.check { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; cursor: pointer; min-height: 44px; }
.check input { width: 18px; height: 18px; accent-color: var(--ink); margin: 0; flex: none; }
.result-count { margin-left: auto; font-size: 14.5px; color: var(--steel); }
.cat-list { padding: 56px 0 120px; }
.empty-note { padding: 40px 0; color: var(--steel); }
.ctas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); column-gap: 56px; }
.cta { display: flex; flex-direction: column; gap: 10px; padding: 28px 0 32px; border-top: 1px solid var(--ink); }
.cta .d3 { font-size: 22px; }
.cta p { color: var(--steel); }
.cta .lnk { align-self: flex-start; margin-top: 6px; }
.band { padding: 100px 0; }
.band-alu { background: var(--alu); }

/* ---------------------------------------------------- the product list */
.fam { padding: 96px 0; border-top: 1px solid var(--line); }

/* ------------------------------------------------------- product pages */
.p-hero { padding: 40px 0 96px; }
.p-g { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px 72px; align-items: start; }
.gallery { position: sticky; top: calc(var(--header-h) + 24px); }
.g-main { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--white); cursor: zoom-in; display: block; width: 100%; border: 0; padding: 0; }
.g-main img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .35s ease; }
.g-main.zoomed { cursor: zoom-out; }
.g-main.zoomed img { transform: scale(2.1); }
.thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 16px; max-width: 540px; }
.thumbs button { width: 100%; aspect-ratio: 3 / 2; padding: 0; border: 1px solid var(--line); background: var(--white); cursor: pointer; overflow: hidden; }
.thumbs button img { width: 100%; height: 100%; object-fit: contain; display: block; }
.thumbs button[aria-pressed="true"] { border: 2px solid var(--ink); }
.g-hint { font-size: 13px; color: var(--steel); margin-top: 12px; }
.p-info { display: flex; flex-direction: column; gap: 22px; }
.p-kind { font-size: 15px; color: var(--steel); }
.p-info h1 { font-stretch: 122%; font-weight: 600; letter-spacing: -.025em; font-size: clamp(32px, 2.2vw + 20px, 58px); line-height: 1.02; text-wrap: balance; }
.p-variant { font-size: 17px; color: var(--steel); margin-top: -8px; }
.p-intro { font-size: 17px; }
.p-intro p + p { margin-top: 14px; }
.awards { display: grid; gap: 8px; }
.awards li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 15px; font-weight: 500; }
.awards svg { width: 20px; height: 20px; color: var(--ink); margin-top: 1px; }
.p-actions { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; }
.p-note { font-size: 14px; color: var(--steel); }
.p-body { border-top: 1px solid var(--line); }
.p-sec { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px 72px; padding: 72px 0; border-bottom: 1px solid var(--line); }
.p-sec:last-child { border-bottom: 0; }
.p-sec > h2 { font-stretch: 120%; font-weight: 600; letter-spacing: -.015em; font-size: 26px; line-height: 1.15; text-wrap: balance; position: sticky; top: calc(var(--header-h) + 24px); align-self: start; }
.bsm { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 40px 72px; align-items: center; }
.bsm video { width: 100%; height: auto; display: block; background: #000; aspect-ratio: 1; }
.heritage-sec { border-top: 1px solid var(--line); }
.heritage { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px 72px; align-items: start; padding-block: 72px; }
.heritage p { font-size: 19px; line-height: 1.55; max-width: 38em; }
.range { padding: 96px 0 120px; border-top: 1px solid var(--line); }

/* ------------------------------------------------------------ prose */
.prose { font-size: 17.5px; line-height: 1.68; max-width: 68ch; overflow-wrap: break-word; }
.prose--wide { max-width: none; }
.prose--wide > :where(p, h2, h3, h4, ul, ol, blockquote), .prose--wide :where(.setup > p, .levels, .d-note) { max-width: 68ch; }
.prose > * + * { margin-top: 1.05em; }
.prose h2 { font-stretch: 120%; font-weight: 600; letter-spacing: -.015em; font-size: 28px; line-height: 1.15; margin-top: 2em; text-wrap: balance; }
.prose h3 { font-stretch: 114%; font-weight: 600; font-size: 21px; line-height: 1.25; margin-top: 1.8em; }
.prose h4 { font-weight: 600; font-size: 18px; margin-top: 1.6em; }
.prose :is(.lang-sec, .zh-news, .setup-recs, .notes-body, .qa-a, .artist-text, .disc2, .album-main, .carnegie, .tq blockquote) > * + * { margin-top: 1.05em; }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: .6em; }
.prose > :first-child { margin-top: 0; }
.prose ol { padding-left: 1.3em; list-style: decimal; }
.prose ul > li { position: relative; padding-left: 1.3em; }
.prose ul > li::before { content: ""; position: absolute; left: 0; top: .78em; width: .5em; height: 2px; background: var(--ink); }
.prose li + li { margin-top: .5em; }
.prose a { font-weight: 500; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.prose a:hover { text-decoration-thickness: 2px; }
.prose strong, .prose b { font-weight: 600; }
.prose img { display: block; max-width: 100%; height: auto; margin: 1.6em 0; }
.prose p > img:only-child, .prose p > a:only-child > img { margin: 0; }
.prose figure { margin: 1.6em 0; }
.prose figcaption { font-size: 14px; color: var(--steel); margin-top: 8px; }
.prose blockquote { border-left: 2px solid var(--ink); padding: 2px 0 2px 22px; font-stretch: 106%; font-size: 19px; line-height: 1.5; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
.prose iframe { max-width: 100%; border: 0; }
.prose .kicker { font-size: 20px; line-height: 1.5; font-stretch: 106%; font-weight: 500; color: var(--ink); }
.prose .file-meta { display: inline-block; margin-left: .2em; font-weight: 400; font-size: .82em; color: var(--steel); white-space: nowrap; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll:focus-visible { outline-offset: 2px; }
.prose table { border-collapse: collapse; width: 100%; font-size: 15.5px; border-top: 1px solid var(--ink); }
.prose th, .prose td { text-align: left; padding: 11px 14px 11px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { font-weight: 600; }
.prose .price-table { max-width: 560px; table-layout: fixed; }
.prose .price-table th:first-child { width: 62%; }
.prose .price-table th[scope="row"] { font-weight: 500; }
.prose .price-table td { white-space: nowrap; font-variant-numeric: tabular-nums; }
.prose .price-table thead th { font-size: 13.5px; color: var(--steel); font-weight: 500; }
.doc-list > li + li { margin-top: .35em; }
/* the product catalog download: cover beside what's in it */
.catalog { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 40px; align-items: center; }
.prose .cat-cover { margin: 0; padding: 18px; background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 40px -24px rgba(20,22,25,.45); }
.prose .cat-cover img { margin: 0; width: 100%; height: auto; }
.prose .cat-copy h2 { margin-top: 0; }
.prose .cat-copy .lead { font-size: 18px; }
.prose .cat-meta { color: var(--steel); font-size: 14.5px; font-variant-numeric: tabular-nums; }
.prose .cat-copy .row { margin-top: 22px; }
@media (max-width: 640px) { .catalog { grid-template-columns: minmax(0, 1fr); } .prose .cat-cover { max-width: 320px; } }
.prose .award-list { columns: 2 22em; column-gap: 48px; }
.prose .award-list > li { break-inside: avoid; margin: 0 0 .5em; }
.prose .award-list > li + li { margin-top: 0; }

/* numbered instructions */
.prose .steps-list { list-style: none; padding: 0; counter-reset: none; }
.prose .steps-list > li { padding: 16px 0 18px; border-top: 1px solid var(--line); margin: 0; }
.prose .steps-list > li > * + * { margin-top: .7em; }
.prose ol.alpha { list-style: lower-alpha; padding-left: 1.4em; }
.prose ol.alpha > li { padding-left: .3em; }
.sheets { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sheets summary { padding: 16px 0; cursor: pointer; font-weight: 600; }
.sheets-body { padding-bottom: 24px; display: grid; gap: 16px; }
.prose .sheets-body img { margin: 0; }

/* table of contents on long pages */
.toc { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); padding: 16px 0 18px; }
.toc-t { font-size: 14px; color: var(--steel); margin-bottom: 8px; }
.prose .toc ol { list-style: none; padding: 0; columns: 2 16em; column-gap: 32px; }
.prose .toc li { margin: 0 0 4px; break-inside: avoid; }
.prose .toc a { text-decoration: none; font-weight: 500; }
.prose .toc a:hover { text-decoration: underline; }

/* ----------------------------------------------------------- articles */
.article { padding: 8px 0 120px; }
.article-g { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 48px 96px; align-items: start; }
.article-g--solo { grid-template-columns: minmax(0, 1fr); }
.aside { display: flex; flex-direction: column; gap: 36px; }
@media (min-height: 860px) and (min-width: 961px) { .aside { position: sticky; top: calc(var(--header-h) + 24px); } }
.side-title { font-size: 14px; color: var(--steel); margin-bottom: 8px; }
.side-title a { text-decoration: none; }
.side-title a:hover { text-decoration: underline; text-underline-offset: .3em; }
.side-nav { border-top: 1px solid var(--ink); }
.side-nav a { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); text-decoration: none; font-size: 15px; }
.side-nav a:hover { text-decoration: underline; text-underline-offset: .3em; }
.side-nav a[aria-current="page"] { font-weight: 600; box-shadow: inset 3px 0 0 var(--ink); padding-left: 14px; }
.side-cta { background: var(--alu); padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.side-cta .lnk { align-self: flex-start; }
.post-foot { padding: 0 0 96px; }

/* the music voice on artist pages */
.page-head--live { --focus: var(--ivory); background: var(--velvet); color: var(--ivory); padding-bottom: 88px; margin-bottom: 72px; }
.page-head--live a { color: var(--ivory); }
.page-head--live .crumbs, .page-head--live .crumbs [aria-current] { color: var(--rose); }
.page-head--live .crumbs li + li::before { color: rgba(243,234,219,.35); }
.page-head--live h1 { font-family: var(--serif-d); font-weight: 400; font-stretch: 100%; letter-spacing: -.005em; font-size: clamp(44px, 6.4vw, 96px); line-height: 1; }
.page-head--live .meta, .page-head--live .lead { color: var(--rose); font-family: var(--serif); font-style: italic; }

/* ------------------------------------------------- imported page layouts */
/* questions and answers */
.qa { border-top: 1px solid var(--ink); }
.qa-item { padding: 26px 0 30px; border-bottom: 1px solid var(--line); }
.prose .qa-q { margin: 0 0 10px; font-size: 21px; line-height: 1.3; font-stretch: 112%; }
.qa-a > * + * { margin-top: .8em; }

/* artists */
.prose .artists { display: grid; gap: 0; border-top: 1px solid var(--line); }
.prose .artist { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 28px; padding: 32px 0; border-bottom: 1px solid var(--line); margin: 0; }
.prose .artist::before { display: none; }
.prose .artist + .artist { margin-top: 0; }
.artist-img { width: 132px; aspect-ratio: 4 / 5; overflow: hidden; background: var(--alu); }
.prose .artist-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; margin: 0; filter: grayscale(1) contrast(1.05); }
.prose .artist h2 { margin: 0 0 8px; font-family: var(--serif-d); font-weight: 400; font-stretch: 100%; font-size: 30px; letter-spacing: 0; }
.prose .artist-more { margin-top: 12px; font-size: 15.5px; }
.prose .carnegie { margin-top: 64px; }
.prose .carnegie h2 { font-family: var(--serif-d); font-weight: 400; font-stretch: 100%; font-size: 36px; letter-spacing: 0; }
.prose .carnegie figure { max-width: 420px; }

/* photographs */
.prose .photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 32px 24px; margin-top: 8px; }
.prose .photo-grid li { padding: 0; margin: 0; }
.prose .photo-grid li::before { display: none; }
.prose .photo-grid figure { margin: 0; }
.prose .photo-grid img { margin: 0; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.prose .photo-grid a { display: block; }
.prose .photo-grid a:hover img { opacity: .92; }
.prose .scan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 16px; }
.prose .scan-grid img { margin: 0; border: 1px solid var(--line); }

/* videos: a still and a title that open YouTube */
.v-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 36px 28px; margin-top: 1.2em; }
.v-grid--one { grid-template-columns: minmax(0, 520px); }
.prose .v-grid figure, .prose .vcard { margin: 0; }
.vcard { position: relative; display: flex; flex-direction: column; gap: 12px; }
.v-frame { position: relative; display: block; aspect-ratio: 16 / 9; background: #111; overflow: hidden; }
.prose .v-frame img, .v-frame img { margin: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.v-play { position: absolute; left: 14px; bottom: 14px; width: 52px; height: 52px; border-radius: 50%; background: rgba(20,22,25,.78); box-shadow: 0 0 0 1px rgba(255,255,255,.35); transition: background .2s ease; }
.v-play::after { content: ""; position: absolute; left: 21px; top: 16px; border-style: solid; border-width: 10px 0 10px 15px; border-color: transparent transparent transparent #fff; }
.vcard:hover .v-play { background: var(--ink); }
.vcard:hover .v-frame img { transform: scale(1.03); }
.prose .v-text, .v-text { display: flex; flex-direction: column; gap: 2px; margin: 0; font-size: inherit; color: inherit; }
.v-label { font-size: 13.5px; color: var(--steel); }
.prose .v-title, .v-title { font-stretch: 112%; font-weight: 600; font-size: 18px; line-height: 1.3; margin: 0; letter-spacing: 0; }
.prose .v-link, .v-link { font-weight: inherit; text-decoration: none; }
.v-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.v-link:focus-visible { outline: none; }
.v-link:focus-visible::after { outline: 2px solid var(--focus); outline-offset: 4px; }
.vcard:hover .v-link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }

/* the video player window (site.js): the film at its own shape, as large as the screen allows */
.vplayer { --ar: 1.7778; width: min(1180px, 92vw, calc((100vh - 120px) * var(--ar))); max-width: none; max-height: none;
  margin: auto; padding: 0; border: 0; background: transparent; color: #fff; overflow: visible; }
@supports (height: 100dvh) { .vplayer { width: min(1180px, 92vw, calc((100dvh - 120px) * var(--ar))); } }
@media (max-height: 520px) {
  .vplayer { width: min(1180px, 92vw, calc((100vh - 64px) * var(--ar))); }
  @supports (height: 100dvh) { .vplayer { width: min(1180px, 92vw, calc((100dvh - 64px) * var(--ar))); } }
  .vp-bar { margin-bottom: 8px; }
}
.vplayer::backdrop { background: rgba(7, 8, 9, .94); }
.vp-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 12px; }
.vp-title { margin: 0; font-stretch: 112%; font-weight: 600; font-size: 16px; line-height: 1.3; color: #fff; }
.vp-close { flex: none; appearance: none; border: 1px solid rgba(255,255,255,.55); background: transparent; color: #fff;
  font: inherit; font-size: 14px; font-weight: 600; padding: 9px 16px; cursor: pointer; }
.vp-close:hover { background: #fff; color: #111; }
.vp-close:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.vp-frame { position: relative; aspect-ratio: var(--ar); background: #000; }
.vp-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
html.vp-open { overflow: hidden; }
.v-meta { font-size: 13.5px; color: var(--steel); }

/* glossary */
.az { position: sticky; top: var(--header-h); z-index: 5; background: rgba(255,255,255,.96); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); padding: 8px 0; margin-bottom: 8px; }
.prose .az ul { display: flex; flex-wrap: wrap; gap: 0; }
.prose .az li { padding: 0; margin: 0; }
.prose .az li::before { display: none; }
.az a, .az span { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 6px; font-size: 15px; font-weight: 600; text-decoration: none; }
.az a:hover { background: var(--alu); }
.az span { color: #b5bdc2; font-weight: 400; }
.gl-letter { padding-top: 12px; }
.prose .gl-l { font-size: 40px; margin-top: 40px; color: var(--ink); }
.gl { margin-top: 8px; }
.gl-item { padding: 18px 0 20px; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 70px); }
.gl dt { font-stretch: 112%; font-weight: 600; font-size: 19px; line-height: 1.3; }
.gl-also { display: block; font-weight: 400; font-size: 14px; color: var(--steel); font-stretch: 100%; }
.gl dd { margin: 6px 0 0; }
.gl dd > * + * { margin-top: .8em; }
.gl-img { float: right; width: 120px; margin: 4px 0 12px 24px !important; }
.prose .gl-img img { margin: 0; }
.gl dd::after { content: ""; display: block; clear: both; }

/* dealers */
.dealers { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 0 32px; border-top: 1px solid var(--ink); }
.dealer { padding: 22px 0 24px; border-bottom: 1px solid var(--line); }
.dealer--featured { grid-column: 1 / -1; padding: 28px 0 30px; }
.prose .dealer .d-name { margin: 0 0 8px; font-size: 20px; line-height: 1.25; font-stretch: 112%; }
.prose .dealer--featured .d-name { font-size: 28px; }
.d-region { font-size: 13.5px; color: var(--steel); margin-bottom: 2px; text-transform: none; }
.prose .d-lines > li { padding: 0; margin: 0; font-size: 15.5px; line-height: 1.55; }
.prose .d-lines > li::before { display: none; }
.prose .d-note { margin-top: 18px; color: var(--steel); }
.dealers--intl .d-region { font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: .02em; }

/* setups */
.setup { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px 40px; align-items: start; padding: 48px 0 8px; border-top: 1px solid var(--line); margin-top: 48px; scroll-margin-top: calc(var(--header-h) + 16px); }
.prose .setup h2 { grid-column: 1 / -1; margin: 0; }
.prose .setup .diagram { margin: 0; }
.diagram a { display: block; }
.prose .diagram img { margin: 0; border: 1px solid var(--line); }
.prose .diagram figcaption { font-size: 13.5px; }
.setup-recs { min-width: 0; }
.setup-k { font-size: 14px; color: var(--steel); }
.prose .levels { border-top: 1px solid var(--ink); margin-top: 6px; }
.levels > div { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 4px 20px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.levels dt { font-weight: 600; font-size: 15.5px; }
.levels dd { margin: 0; font-size: 16px; }

/* quotations from reviews and owners */
.prose .tq { margin: 0; padding: 30px 0 32px; border-top: 1px solid var(--line); }
.prose .tq + .tq { margin-top: 0; }
.prose .tq blockquote { border: 0; padding: 0; font-family: var(--serif); font-stretch: 100%; font-size: 20px; line-height: 1.55; }
.prose .tq blockquote p + p { margin-top: .8em; }
.prose .tq figcaption { margin-top: 12px; font-size: 14.5px; color: var(--steel); }
.prose .tq figcaption::before { content: "— "; }
.prose .tq figcaption a { color: inherit; }

/* two languages on one page */
.lang-switch { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); padding: 10px 0; }
.prose .lang-switch ul { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.prose .lang-switch li { padding: 0; margin: 0; }
.prose .lang-switch li::before { display: none; }
.lang-sec { scroll-margin-top: calc(var(--header-h) + 16px); }
.prose .lang-sec > h2:first-child { margin-top: 2em; }
.prose .lang-btn .btn { text-decoration: none; color: #fff; font-weight: 600; }

/* the music test tracks */
.album { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.prose .album-cover { margin: 0; }
.prose .album-cover img { margin: 0; width: 100%; }
.album-k { font-size: 14px; color: var(--steel); }
.prose .album h2, .prose .disc2 h2 { margin-top: 4px; font-family: var(--serif-d); font-weight: 400; font-stretch: 100%; letter-spacing: 0; font-size: 38px; }
.prose .album-by { margin-top: 6px; font-family: var(--serif); font-style: italic; color: var(--steel); }
.player { margin-top: 22px; padding: 16px; background: var(--alu); }
.player audio { width: 100%; display: block; }
.player-now { margin-top: 10px !important; font-size: 14.5px; color: var(--steel); }
.prose .tracks { list-style: none; padding: 0; margin-top: 16px; border-top: 1px solid var(--ink); }
.prose .tracks li { margin: 0; }
.trk-a { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 14px; align-items: baseline; padding: 13px 4px; border-bottom: 1px solid var(--line); text-decoration: none; }
.prose .trk-a { font-weight: 400; text-decoration: none; }
.trk-a:hover { background: var(--alu); }
.trk-n { font-variant-numeric: tabular-nums; color: var(--steel); font-size: 15px; }
.trk-t { display: flex; flex-direction: column; }
.trk-name { font-weight: 600; font-stretch: 108%; }
.trk-by { font-size: 14.5px; color: var(--steel); }
.trk-time { font-variant-numeric: tabular-nums; font-size: 14.5px; color: var(--steel); }
.trk.is-current .trk-a { box-shadow: inset 3px 0 0 var(--ink); background: var(--alu); }
.trk.is-current .trk-n { color: var(--ink); font-weight: 600; }
.disc2 { margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--ink); }
.disc-time { font-family: var(--sans); font-size: .5em; color: var(--steel); vertical-align: middle; }
.prose .credits-list { border-top: 1px solid var(--line); margin-top: 18px; }
.credits-list > div { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 4px 20px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; }
.credits-list dt { color: var(--steel); }
.credits-list dd { margin: 0; }
.prose .cred-note { font-size: 14px; color: var(--steel); }
.notes { margin-top: 64px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.notes summary { display: flex; flex-direction: column; gap: 2px; padding: 22px 40px 22px 0; cursor: pointer; list-style: none; position: relative; }
.notes summary::-webkit-details-marker { display: none; }
.notes summary::after { content: "+"; position: absolute; right: 4px; top: 18px; font-size: 30px; font-weight: 300; }
.notes[open] summary::after { content: "\2212"; }
.notes-t { font-family: var(--serif-d); font-size: 30px; line-height: 1.2; }
.notes-s { font-size: 15px; color: var(--steel); }
.notes-body { padding: 8px 0 40px; }
.notes-body > * + * { margin-top: 1.05em; }
.notes-body h4 .disc-time { font-size: .8em; margin-left: 6px; }

/* --------------------------------------------------------------- hubs */
.hub-list { border-top: 1px solid var(--ink); }
.hub-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 8px 56px; padding: 26px 0; border-bottom: 1px solid var(--line); text-decoration: none; align-items: baseline; }
.hub-row .t { font-stretch: 118%; font-weight: 600; font-size: 24px; line-height: 1.2; letter-spacing: -.01em; }
.hub-row .e { color: var(--steel); font-size: 15.5px; }
.hub-row:hover .t { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.hub-body { padding: 0 0 120px; }
/* site search (search.html, search.js) */
.s-head { padding-bottom: 36px; }
.s-form { margin-top: 32px; max-width: 760px; }
.s-label { display: block; font-size: 15px; font-weight: 600; margin-bottom: 10px; }
.s-field { display: flex; gap: 8px; }
.s-field input { flex: 1; min-width: 0; min-height: 56px; padding: 12px 16px; border: 1px solid #8d969c; border-radius: 2px; background: var(--white); font-size: 18px; -webkit-appearance: none; appearance: none; }
.s-field input:focus { outline: 2px solid var(--ink); outline-offset: 0; border-color: var(--ink); }
.s-field .btn { flex: none; min-height: 56px; }
/* the result count's line and the space below the form are kept from the start, so nothing on the page
   moves when results for /search/?q=… appear (the footer starts below the fold) */
.s-status { margin-top: 20px; min-height: 1.6em; max-width: 46em; color: var(--steel); overflow-wrap: anywhere; }
.s-body { min-height: calc(100vh - 300px); padding-bottom: 120px; }
.s-h { display: flex; flex-direction: column; gap: 6px; }
.s-k { font-size: 13.5px; font-weight: 600; letter-spacing: .02em; color: var(--steel); }
.s-results mark { background: rgba(214,178,110,.32); color: inherit; border-radius: 1px; }
.s-start .nf-links { margin: 16px 0 0; }
.prose .world { color: var(--steel); }
.prose .world strong { color: var(--ink); }
.s-noscript { margin: 0 0 28px; color: var(--steel); }
.nf .s-form { margin: 32px 0 8px; max-width: 560px; }
.nf .s-field input, .nf .s-field .btn { min-height: 50px; font-size: 16px; }
.hub-h { margin-bottom: 40px; }
.hub-xs { padding: 0 0 96px; }

/* --------------------------------------------------------------- news */
.news { border-top: 1px solid var(--ink); }
.news li { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 8px 40px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.news li > div:only-child { grid-column: 1 / -1; }
.news .date { font-size: 14.5px; color: var(--steel); font-variant-numeric: tabular-nums; padding-top: 4px; }
.news .t { font-stretch: 116%; font-weight: 600; font-size: 22px; line-height: 1.25; }
.news .t a { text-decoration: none; }
.news .t a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.news p { color: var(--steel); font-size: 15.5px; margin-top: 6px; max-width: 46em; }
.news-archive { margin-top: 88px; }
.news-archive > .small { margin: 6px 0 24px; }
.news-archive .news li { grid-template-columns: minmax(0, 1fr); }

/* -------------------------------------------------------------- forms */
.form-g { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px 80px; align-items: start; padding-block: 8px 120px; }
.form { display: flex; flex-direction: column; gap: 22px; }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 22px 24px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 14.5px; font-weight: 600; }
.field .opt { font-weight: 400; color: var(--steel); }
.f-hint { font-size: 14px; color: var(--steel); }
.field input:where(:not([type="checkbox"]):not([type="radio"])), .field select, .field textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid #8d969c; border-radius: 2px; background: var(--white); font-size: 16px; }
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--ink); outline-offset: 0; border-color: var(--ink); }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.f-err { font-size: 14.5px; color: var(--danger); font-weight: 500; }
.f-err::before { content: "! "; font-weight: 700; }
.field--check { gap: 4px; }
.f-note { font-size: 14.5px; color: var(--steel); min-height: 1.5em; }
.f-note.is-ok { margin-top: 4px; padding: 14px 18px; border-left: 3px solid var(--ink); background: var(--alu); color: var(--ink); font-size: 17px; font-weight: 600; }
.f-note.is-ok::before { content: "\2713\00a0\00a0"; }
.f-note:focus { outline: none; }
.f-note:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.info { background: var(--alu); padding: 32px; display: flex; flex-direction: column; gap: 22px; }
.info dl { display: grid; gap: 18px; margin: 0; }
.info dt { font-size: 14px; color: var(--steel); }
.info dd { margin: 2px 0 0; font-size: 16px; }
.info .lnk { align-self: flex-start; }
.info hr { border: 0; border-top: 1px solid var(--line); margin: 0; width: 100%; }

/* ------------------------------------------------------------- finder */
.finder { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px 80px; align-items: start; padding-block: 8px 120px; }
.f-steps { border-top: 1px solid var(--ink); position: sticky; top: calc(var(--header-h) + 24px); }
.f-steps li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 2px 8px; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--steel); transition: padding .2s ease; }
.f-steps .n { font-stretch: 118%; font-weight: 600; grid-row: span 2; }
.f-steps .s { font-weight: 500; }
.f-steps .a { grid-column: 2; font-size: 14px; color: var(--ink); }
.f-steps .a:empty { display: none; }
.f-steps li.is-on { color: var(--ink); box-shadow: inset 3px 0 0 var(--ink); padding-left: 14px; }
.f-steps li.is-done { color: var(--ink); }
.f-panel { display: flex; flex-direction: column; gap: 24px; }
.f-panel h2 { font-stretch: 120%; font-weight: 600; letter-spacing: -.015em; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.1; }
.f-panel h2:focus { outline: none; }
.f-panel > p { color: var(--steel); max-width: 40em; }
.f-nav { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 8px; }
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 16px; }
.choices--prices { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }
.choice { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 24px; border: 1px solid #8d969c; border-radius: 2px; background: var(--white); cursor: pointer; }
.choice:hover { border-color: var(--ink); }
.choice[aria-pressed="true"] { border: 2px solid var(--ink); padding: 23px; }
.choice .k { font-size: 14px; color: var(--steel); }
.choice .t { font-stretch: 116%; font-weight: 600; font-size: 22px; line-height: 1.2; }
.choice .d { font-size: 15px; color: var(--steel); }
.f-summary { display: flex; flex-wrap: wrap; gap: 8px; }
.f-summary span { font-size: 14px; padding: 6px 12px; background: var(--alu); border-radius: 2px; }

/* --------------------------------------------------------------- 404 */
.nf { padding-bottom: 120px; }
.nf .lead { max-width: 40em; }
.nf-links { display: grid; gap: 10px; margin: 32px 0 40px; font-size: 18px; }

/* -------------------------------------------------------------- footer */
.site-footer { background: var(--alu); padding: 80px 0 40px; font-size: 15px; }
.foot-top { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 48px 64px; }
.foot-brand { display: flex; flex-direction: column; gap: 22px; }
.foot-brand .brand { width: 140px; }
.foot-brand .muted { line-height: 1.6; }
.foot-contact { display: flex; flex-direction: column; gap: 10px; line-height: 1.55; }
.foot-contact a { text-decoration: none; }
.foot-contact a:hover { text-decoration: underline; text-underline-offset: .3em; }
.foot-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(168px, 100%), 1fr)); gap: 36px 32px; }
.foot-col summary { font-size: 15px; font-weight: 600; font-stretch: 110%; margin: 0 0 10px; list-style: none; cursor: default; }
.foot-col summary::-webkit-details-marker { display: none; }
.site-footer li { padding: 3px 0; line-height: 1.4; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: .3em; }
.foot-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 14px; color: var(--steel); }
.foot-bottom p a { margin-left: 12px; }
.social { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.stjude { margin-left: auto; display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.stjude img { width: 56px; height: auto; display: block; }

/* --------------------------------------------------------- responsive */
@media (max-width: 1360px) { .ext-link { display: none; } }
@media (max-width: 1320px) { .drop.mega { grid-template-columns: minmax(0, 1fr); } .mega-side { display: none; } }
/* the header fits brand, menu, Cable Finder and search down to 1201px; below that the menu folds into a button */
@media (max-width: 1280px) {
  .site-header > .wrap { gap: 22px; }
  .nav-link { padding: 10px 7px; }
  .has-drop > .nav-link { padding-right: 2px; }
}
@media (max-width: 1200px) {
  .main-nav, .header-cta { display: none; }
  .search-link { margin: 0 0 0 auto; }
  .menu-btn { display: block; margin-left: 2px; }
  html:not(.js) .menu-btn:not(.menu-link) { display: none; }
  html:not(.js) .menu-btn.menu-link { display: block; }
  html:not(.js) .mobile-menu:target { visibility: visible; opacity: 1; transition-delay: 0s; }
  html:not(.js) .m-close { display: flex; justify-content: flex-end; padding: 12px 0 4px; font-weight: 600; }
  .mobile-menu { display: block; position: fixed; left: 0; right: 0; bottom: 0; top: var(--menu-top, var(--header-h)); overflow-y: auto; overscroll-behavior: contain; background: var(--white); padding: 8px var(--gut) 48px; visibility: hidden; opacity: 0; transition: opacity .2s ease, visibility 0s linear .2s; border-top: 1px solid var(--line); }
  .menu-open .mobile-menu { visibility: visible; opacity: 1; transition-delay: 0s; }
  body.menu-open { overflow: hidden; }
  .mobile-menu details, .mobile-menu .m-top { border-bottom: 1px solid var(--line); }
  .mobile-menu summary, .mobile-menu .m-top { display: flex; justify-content: space-between; align-items: center; min-height: 60px; font-stretch: 116%; font-weight: 600; font-size: 20px; cursor: pointer; list-style: none; text-decoration: none; }
  .mobile-menu summary::-webkit-details-marker { display: none; }
  .mobile-menu summary::after { content: "+"; font-weight: 400; font-size: 24px; }
  .mobile-menu details[open] summary::after { content: "\2212"; }
  .m-links { display: grid; padding: 0 0 16px; }
  .m-links a { display: block; padding: 9px 0; text-decoration: none; color: var(--steel); }
  .m-links a:hover { color: var(--ink); }
  .m-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 28px; }
}
@media (max-width: 960px) {
  :root { --gut: 24px; --header-h: 68px; }
  /* on phones the homepage stage is more than a screen tall: its header stays at the top, so the menu and
     search are always at hand, and turns white below the stage as on wider screens */
  .site-header--hero { position: fixed; top: 0; }
  .brand { width: 124px; }
  .hero { padding: 36px 0 40px; }
  .hero-g, .craft-g, .split-head, .cat-g, .p-g, .article-g, .form-g, .finder, .bsm, .heritage, .foot-top { grid-template-columns: minmax(0, 1fr); }
  .hero-copy { padding-bottom: 0; }
  .xs-svg { width: 150%; max-width: none; }
  .xs .xs-labels { display: none; }
  .xs-legend { display: grid; gap: 6px; margin: 4px 0 8px; font-size: 14.5px; }
  .xs-legend > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; }
  .xs-legend dt { color: var(--steel); }
  .xs-legend dd { margin: 0; }
  .yrs { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 14px; border-top: 0; }
  .yr { border-bottom: 1px solid var(--line); padding: 12px 4px 10px 0; }
  .yr[aria-pressed="true"] { box-shadow: inset 0 -3px 0 var(--ink); }
  .craft, .buy, .praise, .coll, .sig, .band, .range, .fam, .films, .legacy { padding: 72px 0; }
  .craft--page { padding: 8px 0 40px; }
  .idx { padding: 8px 0 72px; }
  .idx-row { grid-template-columns: minmax(0, 1fr) 120px; grid-template-areas: "n i" "d i" "c i"; gap: 4px 16px; }
  .idx-name { grid-area: n; font-size: 22px; } .idx-desc { grid-area: d; font-size: 14.5px; } .idx-n { grid-area: c; font-size: 14px; color: var(--steel); }
  .idx-row img { grid-area: i; width: 120px; height: 80px; }
  .live-g { padding-top: 44px; padding-bottom: 48px; }
  .live-spot { left: -30%; top: -40%; width: 140%; height: 120%; }
  .skrooz-g { grid-template-columns: 120px minmax(0, 1fr); }
  .skrooz-g .btn { grid-column: 1 / -1; justify-self: start; }
  .skrooz img { width: 120px; height: 80px; }
  .gallery, .f-steps, .p-sec > h2 { position: static; }
  .p-sec { padding: 48px 0; grid-template-columns: minmax(0, 1fr); }
  .heritage { padding-block: 48px; }
  .hub-row { grid-template-columns: minmax(0, 1fr); }
  .news li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .result-count { margin-left: 0; width: 100%; }
  .toolbar { position: static; }
  .stjude { margin-left: 0; }
  .page-head { padding: 32px 0 48px; }
  .crumbs-nav { margin-bottom: 28px; }
  .p-hero { padding: 28px 0 64px; }
  .cat-img { width: calc(100% + 2 * var(--gut)); margin-left: calc(-1 * var(--gut)); }
  .page-head--live { margin-bottom: 48px; padding-bottom: 64px; }
  .az { position: static; }
  /* the Cable Finder's steps become one compact row */
  .f-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 0; gap: 6px; }
  .f-steps li { display: block; padding: 10px 0 0; border-bottom: 0; border-top: 3px solid var(--line); font-size: 13px; }
  .f-steps li.is-on { box-shadow: none; padding-left: 0; border-top-color: var(--ink); }
  .f-steps li.is-done { border-top-color: var(--steel-2); }
  .f-steps .n { display: none; }
  .f-steps .s { display: block; line-height: 1.3; }
  .f-steps .a { display: none; }
}
@media (max-width: 720px) {
  .foot-cols { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--line); }
  .foot-col { border-bottom: 1px solid var(--line); }
  .foot-col summary { display: flex; justify-content: space-between; align-items: center; min-height: 52px; margin: 0; cursor: pointer; }
  .foot-col summary::after { content: "+"; font-weight: 400; font-size: 22px; }
  .foot-col[open] summary::after { content: "\2212"; }
  .foot-col ul { padding-bottom: 14px; }
  .prose .artist { grid-template-columns: 96px minmax(0, 1fr); gap: 18px; }
  .artist-img { width: 96px; }
  .levels > div, .credits-list > div { grid-template-columns: minmax(0, 1fr); }
  .setup { grid-template-columns: minmax(0, 1fr); }
  .prose .setup .diagram { max-width: 420px; }
  .gl-img { width: 88px; margin-left: 16px !important; }
}
@media (max-width: 600px) {
  .pgrid, .pgrid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 16px; }
  .ptitle, .pgrid--5 .ptitle { font-size: 16.5px; }
  .pitem .sum { display: none; }
  .pitem .attrs { font-size: 12.5px; gap: 2px 10px; }
  .pitem .pimg { margin-bottom: 6px; }
  .pgrid--single { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .lead { font-size: 17.5px; }
  .p-actions .btn { width: 100%; }
  .thumbs { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}

/* ------------------------------------------------- Windows high contrast */
@media (forced-colors: active) {
  .btn, .seg, .choice, .thumbs button, .field input, .field select, .field textarea { border: 1px solid CanvasText; }
  .seg button[aria-pressed="true"], .choice[aria-pressed="true"], .thumbs button[aria-pressed="true"] { outline: 3px solid Highlight; outline-offset: -3px; }
  .yr[aria-pressed="true"], .f-steps li.is-on { outline: 2px solid Highlight; outline-offset: -2px; }
  .pitem .attrs li::before { forced-color-adjust: none; background: CanvasText; }
  .pitem .attrs .ctl::before { background: Canvas; box-shadow: inset 0 0 0 1.5px CanvasText; }
  .xs-svg { forced-color-adjust: none; }
  .live, .page-head--live { border: 1px solid CanvasText; }
  :focus-visible { outline-color: Highlight; }
}

/* ---------------------------------------------------------------- print */
@media print {
  .site-header, .site-footer, .toolbar, .preview-bar, .live-spot, .skip, .aside, .g-hint, .thumbs, .yrs, .xs-cap, .f-nav, .v-play, .player, .az, .post-foot { display: none !important; }
  body { font-size: 11pt; line-height: 1.45; color: #000; }
  .wrap { padding: 0; max-width: none; }
  .page-head, .cat-head, .p-hero, .article, .band, .range, .fam { padding: 12pt 0 !important; }
  .page-head--live, .live, .band-alu, .info, .side-cta, .sig { background: none !important; color: #000 !important; }
  .live-h h2, .live-h .sub, .credits dt, .credits dd, .live-note, .pq .q { color: #000; }
  .pq { opacity: 1 !important; transform: none !important; }
  .p-g, .article-g, .form-g, .cat-g, .hero-g, .p-sec, .heritage { display: block; }
  .g-main { aspect-ratio: auto; }
  .g-main img { max-height: 9cm; width: auto; margin: 0 auto; }
  .pgrid, .pgrid--5 { grid-template-columns: repeat(3, 1fr); gap: 12pt; }
  .pitem, .tq, .gl-item, .dealer, .qa-item, .artist { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; word-break: break-all; }
  .notes > summary { display: none; }
  .notes:not([open]) > .notes-body { display: block; }
  details > * { display: block; }
  .xs-svg { width: 60%; }
  .xs *, .xs { animation: none !important; transition: none !important; }
  .btn { background: none !important; color: #000 !important; border: 1px solid #000 !important; }
}