/* Original workshop photography, given room and a richer industrial setting. */
.opening {
  --focus: #edb96f;
  background: #102731;
  color: #f4f0e7;
  padding-top: 8px;
}
.hero { grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr); gap: 54px; padding-block: 62px 46px; align-items: center; }
.hero-copy { padding-block: 0 20px; min-width: 0; }
.hero .eyebrow { color: #e4b778; font-size: 10px; letter-spacing: 1.7px; }
.hero h1 { color: #f4f0e7; font-size: clamp(50px, 4.9vw, 76px); line-height: 1.04; letter-spacing: -3.4px; margin-block: 28px; }
.hero h1 span { color: #b3c4b8; }
.hero-copy > p { color: #c4cfcf; font-size: 15px; line-height: 1.85; max-width: 390px; }
.hero-actions { gap: 24px; margin-top: 32px; }
.hero-actions .button-accent { background: #eab26a; color: #112831; }
.hero-actions .text-link { color: #f4f0e7; }
.hero-actions .text-link > span { color: #eab26a; }
.hero-note { color: #aebfc1; border-color: #42565d; padding-top: 23px; margin-top: 42px; max-width: 390px; font-size: 11px; }
.hero-note strong { color: #d8e0dc; }
.hero-note .heritage-year { color: #e8b777; font-size: 39px; }
.hero-showcase { min-width: 0; }
.hero-visual { height: 520px; background: #091b23; box-shadow: 0 20px 42px -20px #02090db3; }
.hero-visual .hero-photo { object-position: 60% center; filter: none; }
.hero-image-caption { display: grid; grid-template-columns: minmax(0, 1fr) auto 38px; gap: 8px 16px; padding: 19px 20px; background: #1b3540; border: 1px solid #38505a; border-top: 0; }
.hero-image-caption > span:first-child { grid-column: 1 / 3; grid-row: 1; min-width: 0; }
.hero-image-caption small { color: #d5b583; font-size: 10px; letter-spacing: 1px; margin-bottom: 3px; }
.hero-image-caption strong { color: #f4f0e7; font-size: 20px; line-height: 1.3; margin-top: 0; }
.hero-image-caption #hero-provenance { display: block; grid-column: 1; grid-row: 2; margin: 0; max-width: none; color: #c0cfd0; text-align: left; font-size: 10px; letter-spacing: .25px; }
.hero-image-caption > button#hero-explore { grid-column: 3; grid-row: 1 / 3; width: 38px; height: 42px; margin: 0; color: #f4f0e7; border-color: #819397; background: transparent; }
.hero-image-caption button.photo-source-toggle,
.family-image-heading button.photo-source-toggle {
  width: auto; height: auto; min-height: 30px; margin: 0; padding: 3px 0;
  border: 0; border-radius: 0; background: transparent; color: #f0c58b;
  font-size: 11px; line-height: 1.5; font-weight: 500; white-space: nowrap;
  text-decoration: underline; text-underline-offset: 4px;
}
.hero-image-caption button.photo-source-toggle { grid-column: 2; grid-row: 2; }
.hero-selector { gap: 18px; margin-top: 19px; }
.hero-selector button { padding-bottom: 13px; border-bottom: 1px solid #3c535b; }
.hero-selector button img { width: 68px; height: 46px; opacity: .65; }
.hero-selector button .hero-choice-copy { color: #afc0c3; font-size: 11px; line-height: 1.4; }
.hero-selector button .hero-choice-copy small { color: #d2b386; font-size: 9px; }
.hero-selector button[aria-pressed=true] .hero-choice-copy { color: #f4f0e7; }
.hero-selector button[aria-pressed=true] { border-color: #e4b778; }
.hero-selector button::after { background: #e4b778; }
.opening .capability-strip { border-color: #40545b; padding-block: 27px; }
.opening .strip-label { color: #acbfc2; font-size: 10px; }
.opening .capability-strip a { color: #d6b580; border-color: #40545b; }
.opening .capability-strip strong { color: #e8edE8; font-size: 14px; }
.opening .capability-strip a > span:last-child { color: #e4b778; }

.component-explorer { border-color: #c0c9c1; }
.family-tabs button { padding-block: 22px; }
.family-tabs button[aria-selected=true] { background: #102731; border-bottom-color: #102731; }
.family-panel { grid-template-columns: minmax(0, 1.65fr) minmax(290px, 1fr); background: #f2f1e9; }
.family-visual { background: #102731; color: #f3f0e7; padding: 25px 32px 24px; min-height: 550px; --focus: #edb96f; }
.family-image-heading { flex-wrap: wrap; gap: 8px 18px; color: #b7c9cd; font-size: 10px; line-height: 1.5; letter-spacing: .4px; }
.family-image-heading > span:last-child { margin-left: auto; }
.family-image-heading #family-provenance { color: #d5bd96; }
.family-image-heading button.photo-source-toggle { margin-left: auto; }
.family-image-button { max-width: min(100%, calc(420px * var(--photo-ratio))); margin: 30px 0; background: #0a1c25; box-shadow: 0 15px 28px -19px #000a; }
.family-image-button img { object-fit: contain; }
.family-image-footer { gap: 16px; align-items: center; }
.family-image-footer > span { color: #b7c9cd; font-size: 10px; letter-spacing: .45px; }
.family-image-footer .text-link { color: #f1cf9c; font-size: 12px; gap: 16px; }
.family-copy { background: #f3f1e9; padding: 37px 32px 30px; border-color: #c0c9c1; }
.family-kicker { font-size: 10px; color: #53665e; }
.family-copy h3 { font-size: clamp(29px, 2.7vw, 40px); margin-top: 17px; }
.family-copy > p { font-size: 13px; line-height: 1.8; }
.family-features { margin-top: 22px; }
.family-features li { font-size: 13px; padding-block: 10px; }
.family-related { margin-top: 22px; }
.family-related > span { font-size: 10px; }
.family-copy > .button { margin-top: 24px; }
.family-copy > p.family-note { font-size: 11px; }
.workshop-photo .photo-credit { position: absolute; top: 17px; left: 17px; right: 17px; width: fit-content; max-width: calc(100% - 34px); padding: 7px 10px; background: #102731e8; color: #e1e9e5; font-size: 10px; line-height: 1.5; letter-spacing: .2px; }

@media (hover: hover) {
  .hero-actions .button-accent:hover { background: #f3c489; }
  .opening .capability-strip a:hover strong { color: #efc38b; }
  .hero-selector button:hover .hero-choice-copy { color: #f4f0e7; }
  .hero-image-caption > button#hero-explore:hover { background: #eab26a; color: #102731; border-color: #eab26a; }
  .hero-image-caption button.photo-source-toggle:hover,
  .family-image-heading button.photo-source-toggle:hover { background: transparent; color: #fff5e5; }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .hero-image-caption button.photo-source-toggle,
  .family-image-heading button.photo-source-toggle { transition: color 180ms ease; }
  .family-image-button:hover { transform: translateY(-2px); box-shadow: 0 19px 32px -19px #000b; }
  .hero-visual.depth-surface.is-tilting { box-shadow: 0 26px 48px -22px #02090dcc; }
}
@media (min-width: 1600px) {
  .hero { gap: 68px; }
  .hero-visual { height: 540px; }
}
@media (max-width: 1150px) {
  .hero { gap: 32px; padding-block: 48px 38px; }
  .hero h1 { font-size: clamp(44px, 5vw, 60px); letter-spacing: -2.7px; }
  .hero-visual { height: 500px; }
  .hero-copy > p { font-size: 14px; }
  .hero-selector { gap: 12px; }
  .hero-selector button { gap: 8px; }
  .hero-selector button img { width: 48px; height: 39px; }
  .hero-selector button .hero-choice-copy { font-size: 10px; }
  .family-panel { grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr); }
  .family-visual { padding-inline: 24px; min-height: 510px; }
  .family-copy { padding: 31px 26px; }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, .9fr) minmax(0, 1.15fr); gap: 26px; }
  .hero h1 { font-size: 46px; letter-spacing: -2.6px; }
  .hero .eyebrow { font-size: 9px; letter-spacing: 1.1px; }
  .hero-visual { height: 450px; }
  .hero-image-caption { gap: 7px 10px; padding: 16px; }
  .hero-image-caption strong { font-size: 18px; }
  .hero-selector { gap: 10px; }
  .hero-selector button { display: block; }
  .hero-selector button img { width: 100%; height: 44px; margin-bottom: 8px; }
  .hero-selector button .hero-choice-copy small { display: inline; margin-right: 4px; }
  .opening .capability-strip strong { font-size: 12px; }
  .family-panel { grid-template-columns: minmax(0, 1.15fr) minmax(265px, 1fr); }
  .family-visual { padding: 22px 20px; min-height: 490px; }
  .family-image-heading { display: flex; }
  .family-image-heading > span:last-child { margin-left: 0; }
  .family-copy { padding: 29px 24px; }
  .family-copy h3 { font-size: 31px; }
  .family-image-footer { display: block; }
  .family-image-footer .text-link { display: flex; margin-top: 12px; }
}
@media (max-width: 680px) {
  .hero-image-caption button.photo-source-toggle,
  .family-image-heading button.photo-source-toggle { min-height: 44px; }
  .hero-image-caption > button#hero-explore { height: 44px; }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 33px; padding-block: 34px; }
  .hero-copy { padding-bottom: 0; }
  .hero h1 { font-size: clamp(44px, 11.9vw, 66px); letter-spacing: -2.6px; margin-block: 25px; }
  .hero-copy > p { font-size: 14px; max-width: 440px; }
  .hero-actions { flex-wrap: wrap; gap: 22px; margin-top: 27px; }
  .hero-note { display: flex; margin-top: 28px; padding-top: 21px; max-width: 440px; }
  .hero-note .heritage-year { font-size: 34px; }
  .hero-visual { height: clamp(300px, 83vw, 440px); }
  .hero-image-caption strong { font-size: 19px; }
  .hero-selector button { display: flex; gap: 9px; }
  .hero-selector button img { width: 42px; height: 36px; margin: 0; }
  .hero-selector button .hero-choice-copy { font-size: 10px; }
  .hero-selector button .hero-choice-copy small { display: block; font-size: 9px; }
  .opening .capability-strip { padding-block: 22px; }
  .opening .capability-strip strong { font-size: 11px; }
  .family-panel { grid-template-columns: minmax(0, 1fr); }
  .family-visual { min-height: 390px; padding: 22px; }
  .family-image-button { max-width: min(100%, calc(310px * var(--photo-ratio))); margin-block: 26px; }
  .family-image-heading { font-size: 10px; gap: 7px 12px; }
  .family-image-footer { display: flex; }
  .family-image-footer > span { font-size: 10px; max-width: 145px; }
  .family-image-footer .text-link { font-size: 11px; margin-top: 0; gap: 10px; }
  .family-copy { padding: 29px 24px; border-left: 0; border-top: 1px solid #c0c9c1; }
  .family-copy h3 { font-size: 34px; max-width: 390px; }
  .family-tabs button { font-size: 12px; padding: 16px 12px; }
  .workshop-photo .photo-credit { top: 13px; left: 13px; right: 13px; max-width: calc(100% - 26px); }
}