/* Los Angeles House Time Machine: page-scoped styles. */
.hf-time-machine{--tm-navy:var(--hf-navy,#1e3341);--tm-night:var(--hf-night,#13232e);--tm-cream:var(--hf-cream,#f4f0e8);--tm-gold:var(--hf-gold,#eaca92);--tm-brass:var(--hf-brass,#bb9259);--tm-bronze:#765329;color:var(--tm-navy);background:var(--tm-cream)}
.hf-time-machine *,.hf-time-machine *:before,.hf-time-machine *:after{box-sizing:border-box}
.hf-time-machine button{font:inherit;cursor:pointer}
/* Focus: navy on the light panels, pale gold on the navy ones (both well above 3:1 against their surroundings). */
.hf-site .hf-time-machine :is(button,a):focus-visible{outline:3px solid #1e3341;outline-offset:3px}
.hf-site .tm-hero :is(a,button):focus-visible,.hf-site .tm-research :is(a,button):focus-visible{outline-color:#ffe1ae}
.hf-time-machine .eyebrow{font-size:12px}
/* The era and feature buttons only work with JavaScript; without it the full notes below carry the content. */
.hf-time-machine:not(.tm-ready) :is(.tm-eras,.tm-lenses,.tm-js-only,.tm-status){display:none}
.tm-hero{color:#f4f0e8;background:linear-gradient(120deg,#102633,#1e3341 63%,#375161);overflow:hidden}
.tm-hero-layout{display:grid;grid-template-columns:1.03fr .97fr;gap:7%;padding-block:118px 90px;align-items:center}
.tm-hero .hf-crumb,.tm-hero .hf-crumb a{color:#f4f0e8;font-size:12px}
.tm-hero .eyebrow{color:#eaca92;letter-spacing:.16em;margin-top:42px}
.tm-hero h1{font:500 clamp(52px,6.1vw,94px)/1 Editorial,Georgia,serif;letter-spacing:-.03em;margin:18px 0 26px;text-wrap:balance}
.tm-hero h1 em{font-style:normal;color:#eaca92}
.tm-hero p:not(.eyebrow){font:400 16px/1.8 Manrope,Arial,sans-serif;color:#e7eaeb;max-width:565px;text-wrap:pretty}
.tm-enter{display:inline-flex;gap:42px;align-items:center;text-decoration:none;margin-top:24px;background:#eaca92;border-radius:24px;color:#1e3341;padding:14px 22px;font:700 13px Manrope,Arial,sans-serif;min-height:46px}
.tm-hero-art{height:392px;border:1px solid #dcbf8996;box-shadow:20px 20px 0 #06162366;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:1px;background:#dcbf8966;position:relative;padding-bottom:30px}
.tm-hero-tile{font:500 clamp(24px,2.7vw,38px) Editorial,Georgia,serif;color:#eaca92;display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(90deg,transparent 0,transparent 27px,#ffffff08 28px),#284355}
.tm-hero-tile:nth-child(2){background:#40505b}.tm-hero-tile:nth-child(3){background:#213946}.tm-hero-tile:nth-child(4){background:#334b55}
.tm-hero-art>span{position:absolute;bottom:0;padding:7px 12px;color:#f5e1ba;background:rgba(18,32,43,.78);font:650 12px Manrope,Arial,sans-serif;letter-spacing:.13em}
.tm-premise{display:grid;grid-template-columns:.8fr 1.2fr;gap:20px 9%;padding-block:83px 89px;align-items:start}
.tm-premise .eyebrow{color:var(--tm-bronze);grid-column:1/-1;margin:0}
.tm-premise h2,.tm-gallery-head h2,.tm-notes-header h2,.tm-research h2{font:500 clamp(36px,4vw,58px)/1.08 Editorial,Georgia,serif;letter-spacing:-.025em;margin:15px 0;text-wrap:balance}
.tm-premise h2{margin:0}
.tm-premise-copy p{font:400 16px/1.8 Manrope,Arial,sans-serif;color:#3f505c;margin:0 0 14px;text-wrap:pretty}
.tm-premise-copy p+p{font-size:15px;color:#53616a}
.tm-gallery{background:#eae2d6;padding-block:81px 97px}
.tm-gallery-head{max-width:850px;margin-bottom:30px}.tm-gallery-head .eyebrow{color:var(--tm-bronze)}
.tm-gallery-head>p:not(.eyebrow){font:400 15px/1.8 Manrope,Arial,sans-serif;color:#4c5961}
.tm-eras{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:12px}
.tm-eras button{border:1px solid #c6b9a7;padding:18px;text-align:left;color:#1e3341;min-width:0;min-height:104px;background:#f9f5ee;display:flex;flex-direction:column;gap:10px;transition:background .2s,border-color .2s}
.tm-eras button small{font:700 12px/1.5 Manrope,Arial,sans-serif;letter-spacing:.08em;color:var(--tm-bronze)}
.tm-eras button strong{font:500 23px/1.15 Editorial,Georgia,serif}
.tm-eras button:hover{border-color:#906a3b}
.tm-eras button[aria-pressed=true]{background:#f2e6cf;border-color:#906a3b;box-shadow:inset 0 0 0 2px #bb9259}
.tm-status{font:600 14px/1.6 Manrope,Arial,sans-serif;color:#1e3341;margin:0 0 14px;min-height:1.6em}
.tm-exhibit{display:grid;grid-template-columns:1.03fr .97fr;min-height:540px;border:1px solid #ab976f}
.tm-exhibit-visual{background:linear-gradient(130deg,#213a49,#132a39);padding:23px;display:flex;flex-direction:column;justify-content:space-between;min-width:0}
.tm-folio{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 12px;color:#f2dcb0;font:700 12px/1.6 Manrope,Arial,sans-serif;letter-spacing:.1em;margin:0}
.tm-plates{min-height:300px;display:flex;align-items:center;justify-content:center}
.tm-plate{width:100%;display:none;max-width:580px;box-shadow:13px 14px 0 #051b277d;border:1px solid #d5c6a8}
.tm-plate.is-current{display:block}
.tm-facade{display:block;width:100%;height:auto}
.tm-plate-caption{font:500 28px/1.2 Editorial,Georgia,serif;color:#f2dfb7;margin:12px 0 5px}
.tm-plate-warning{font:500 13px/1.6 Manrope,Arial,sans-serif;color:#e5dfd0;margin:0}
.tm-exhibit-note{background:#f9f5ee;padding:clamp(25px,3vw,44px);min-width:0}
.tm-exhibit-note .eyebrow{color:var(--tm-bronze)}
.tm-exhibit-note h3{font:500 clamp(31px,3vw,44px)/1.1 Editorial,Georgia,serif;margin:14px 0;text-wrap:balance}
.tm-exhibit-note>p:not(.eyebrow){font:400 15px/1.75 Manrope,Arial,sans-serif;color:#3f505c}
.tm-lenses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:22px 0}
.tm-lenses button{border:1px solid #d5c4ad;padding:12px 13px;text-align:left;background:#fffaf3;color:#1e3341;min-height:44px;font:650 13px/1.4 Manrope,Arial,sans-serif}
.tm-lenses button[aria-pressed=true]{background:#f2e6cf;border-color:#9c7744;box-shadow:inset 0 0 0 2px #bb9259}
.tm-insight{background:#ece3d6;border-left:3px solid #bb9259;padding:20px}
.tm-insight h4{font:500 26px/1.2 Editorial,Georgia,serif;margin:10px 0}
.tm-insight p:not(.eyebrow){font:400 15px/1.75 Manrope,Arial,sans-serif;color:#33454f}
.tm-insight a{display:block;margin-top:10px;color:#6b4a22;text-decoration:underline;text-underline-offset:3px;font:650 13px/1.5 Manrope,Arial,sans-serif}
.tm-insight a[hidden]{display:none}
.tm-insight .tm-guide-link{color:#1e3341;font-size:14px}
.tm-feature-limit{font:400 14px/1.7 Manrope,Arial,sans-serif;color:#53616a;margin-top:18px}
.tm-caution{margin-top:18px;background:#fbf8f2;border:1px solid #c9b48f;border-left:4px solid #8a6638;padding:20px 24px;max-width:1000px}
.tm-caution h3{font:700 15px/1.4 Manrope,Arial,sans-serif;margin:0 0 6px;color:#1e3341}
.tm-caution p{font:400 15px/1.7 Manrope,Arial,sans-serif;color:#33454f;margin:0 0 8px}
.tm-caution p:last-child{margin:0}
.tm-caution a{color:#1e3341;font-weight:650;text-decoration:underline;text-underline-offset:3px}
.tm-noscript{background:#fff9e8;padding:20px;color:#1e3341;font:400 15px/1.7 Manrope,Arial,sans-serif;margin-top:16px}
.tm-notes{padding-block:91px 96px}.tm-notes-header{max-width:760px}
.tm-notes-header .eyebrow{color:var(--tm-bronze)}
.tm-notes-header>p:not(.eyebrow){font:400 15px/1.8 Manrope,Arial,sans-serif;color:#53616a}
.tm-notes-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:36px}
.tm-era-card{padding:30px;border:1px solid #d7cfc2;background:#faf7f1;display:flex;flex-direction:column}
.tm-era-card>.tm-card-span{font:700 12px/1.5 Manrope,Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--tm-bronze);margin:0}
.tm-era-card h3{font:500 32px/1.1 Editorial,Georgia,serif;margin:12px 0}
.tm-era-card>p{font:400 15px/1.75 Manrope,Arial,sans-serif;color:#3f505c;margin:0 0 6px}
.tm-card-notes{margin:12px 0 0;display:grid;gap:0}
.tm-card-notes>div{padding:12px 0;border-top:1px solid #e1d8ca}
.tm-card-notes dt{font:700 13px/1.4 Manrope,Arial,sans-serif;color:#1e3341;margin-bottom:4px}
.tm-card-notes dt span{font-weight:600;color:var(--tm-bronze);margin-left:6px}
.tm-card-notes dd{margin:0;font:400 15px/1.7 Manrope,Arial,sans-serif;color:#4c5961}
.tm-era-card>.tm-card-limit{font-size:14px;color:#53616a;border-top:1px solid #e1d8ca;padding-top:12px;margin-top:2px}
.tm-card-source{margin-top:auto;padding-top:12px;color:#6b4a22;font:650 13px/1.5 Manrope,Arial,sans-serif}
.tm-research{background:#13232e;color:#f4f0e8;padding-block:88px 78px}
.tm-research>.hf-wrap>p.eyebrow{color:#eaca92}
.tm-sources{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:36px 0 0;gap:9px}
.tm-sources a{background:#233b49;border:1px solid #c7a9766b;text-decoration:none;color:#f4f0e8;display:grid;gap:10px;padding:22px;height:100%}
.tm-sources strong{font:650 15px/1.5 Manrope,Arial,sans-serif}
.tm-sources span{font:400 13px/1.6 Manrope,Arial,sans-serif;color:#d4dede}
.tm-sources b{color:#eaca92}
.tm-disclaimer{font:400 14px/1.8 Manrope,Arial,sans-serif;color:#ced7d7;max-width:900px;margin-top:30px}
.tm-next{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:26px}.tm-next a{font:650 13px Manrope,Arial,sans-serif;text-decoration:none;color:#eaca92;padding-block:4px}
.tm-research small{display:block;margin-top:27px;color:#d3d8d8;font:400 13px Manrope,Arial,sans-serif}
@media(max-width:1050px){.tm-hero-layout,.tm-exhibit{grid-template-columns:1fr}.tm-hero-layout{padding-block:97px 68px}.tm-hero-art{margin-top:45px;height:310px}.tm-exhibit-note{padding:29px}.tm-eras button strong{font-size:20px}.tm-sources{grid-template-columns:1fr}}
@media(max-width:700px){.tm-hero-layout{padding-block:85px 56px}.tm-hero h1{font-size:clamp(45px,11.5vw,70px)}.tm-hero-art{height:230px}.tm-premise{display:block;padding-block:58px}.tm-premise h2{margin:14px 0}.tm-gallery{padding-block:60px}.tm-eras{grid-template-columns:repeat(2,minmax(0,1fr))}.tm-eras button{min-height:88px;padding:13px;gap:7px}.tm-eras button strong{font-size:19px}.tm-exhibit-visual{padding:14px}.tm-plates{min-height:190px}.tm-exhibit-note{padding:23px}.tm-notes{padding-block:60px}.tm-notes-grid{grid-template-columns:1fr}.tm-era-card{padding:23px}.tm-lenses button{padding:10px}.tm-caution{padding:18px}}
@media(max-width:350px){.tm-eras button strong{font-size:18px}.tm-folio{letter-spacing:.06em}.tm-lenses{gap:5px}.tm-lenses button{font-size:12px}}
@media(prefers-reduced-motion:reduce){.hf-time-machine *,.hf-time-machine *:before,.hf-time-machine *:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media print{.tm-hero,.tm-gallery>.hf-wrap>:not(.tm-caution){display:none!important}.tm-notes-grid{display:block}.tm-era-card{break-inside:avoid;margin-bottom:15px}.tm-research{background:white;color:#111}.tm-sources a{background:white;color:#111}.tm-sources span{color:#333}}
