/* History content layouts. Shared typography, navigation, buttons and footer
   are defined in style.css, the same stylesheet used by the homepage. */
.history-page .history-hero{align-items:center}
.history-page .history-hero h1 em{display:block}
.history-page .company{font-size:14px;color:var(--muted);padding-top:20px;border-top:1px solid var(--line);margin:0}
.history-page .company strong{display:block;font-size:16px;font-weight:500;color:var(--ink);margin-bottom:3px}
.history-page .archive-photo{margin:0;min-width:0}
.history-page .archive-photo img{display:block;width:100%;height:auto;background:var(--paper)}
.history-page .archive-photo figcaption{display:flex;align-items:baseline;gap:12px;padding-top:12px;font-size:13px;color:var(--muted)}
.history-page .photo-number{font-size:11px;color:var(--blue);letter-spacing:1px}
.history-page .story{display:grid;grid-template-columns:1fr 1fr;gap:5%;align-items:center;border-top:1px solid var(--line);max-width:1600px;margin:auto}
.history-page .story p:not(.eyebrow){color:var(--muted);margin:23px 0 0}
.history-page .history-date{display:flex;align-items:baseline;gap:10px;color:var(--blue);font-size:14px;margin-bottom:24px}
.history-page .history-date strong{font-family:Manrope,Arial,sans-serif;font-size:48px;line-height:1;letter-spacing:-2px;font-weight:500}
.history-page .numbers{background:var(--ink);color:#fff;padding-top:76px;padding-bottom:76px}
.history-page .numbers .eyebrow{color:#a5c8e1}
.history-page .numbers-top{display:flex;align-items:baseline;justify-content:space-between;gap:32px}
.history-page .numbers-top>p{font-size:14px;color:#c3d2df;max-width:290px}
.history-page .metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:38px}
.history-page .metric{padding-top:22px;border-top:1px solid #385067}
.history-page .metric strong{display:block;font-family:Manrope,Arial,sans-serif;font-size:clamp(34px,3.6vw,50px);line-height:1.2;font-weight:500;letter-spacing:-1px;margin-bottom:8px}
.history-page .metric span{color:#c3d2df;font-size:14px}
.history-page .monthly{display:grid;grid-template-columns:1fr 1fr;gap:32px;padding-top:38px;margin-top:38px;border-top:1px solid #385067}
.history-page .monthly p{margin:0;font-size:15px;color:#c3d2df}
.history-page .monthly strong{display:block;font-family:Manrope,Arial,sans-serif;font-size:clamp(30px,4vw,52px);font-weight:500;line-height:1.25;letter-spacing:-1px}
.history-page .monthly small{font-size:14px;color:#c3d2df}
.history-page .archive{background:var(--paper)}
.history-page .section-intro{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:38px}
.history-page .section-intro>p{max-width:400px;color:var(--muted);font-size:14px;margin-bottom:0}
.history-page .photos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.history-page .process-label{margin-bottom:22px}
.history-page .process-label h3{margin:0}
.history-page .finishing{padding-top:38px;margin-top:38px;border-top:1px solid var(--line)}
.history-page .legacy{display:grid;grid-template-columns:1fr 1.5fr;gap:5%;max-width:1600px;margin:auto}
.history-page .legacy p:not(.eyebrow){color:var(--muted);margin:0}
.history-page .note{font-size:12px;color:var(--muted);padding-top:24px;padding-bottom:24px;border-top:1px solid var(--line);margin:0 auto;max-width:1600px}
@media(min-width:1600px){.history-page .story,.history-page .legacy,.history-page .note{padding-left:5%;padding-right:5%}}
@media(max-width:800px){
 .history-page .story{grid-template-columns:1fr;gap:30px}
 .history-page .metrics{grid-template-columns:repeat(2,1fr);gap:24px}
 .history-page .numbers{padding-top:48px;padding-bottom:48px}
 .history-page .numbers-top{display:block}
 .history-page .section-intro{align-items:start;flex-direction:column;gap:12px}
 .history-page .photos-grid{gap:22px}
 .history-page .legacy{grid-template-columns:1fr;gap:26px}
}
@media(max-width:600px){.history-page .photos-grid{grid-template-columns:1fr;gap:30px}.history-page .monthly{gap:22px}}
@media print{.history-page .numbers{background:white;color:var(--ink)}.history-page .numbers .eyebrow,.history-page .metric span,.history-page .monthly p,.history-page .monthly small,.history-page .numbers-top>p{color:var(--ink)}.history-page figure{break-inside:avoid}}

/* Alternate the story layout with the text-first opening section. */
@media(min-width:801px){
 .history-page .story>figure{grid-column:1;grid-row:1}
 .history-page .story>div{grid-column:2;grid-row:1}
}