.home { overflow: hidden; }

.hero { background: var(--ink); color: var(--paper); min-height: 465px; }

.hero-layout { align-items: center; display: grid; gap: clamp(2rem, 6vw, 7rem); grid-template-columns: minmax(0, 1.12fr) minmax(250px, .62fr); min-height: 465px; padding-block: clamp(2rem, 2.5vw, 3rem); }

.hero-copy { max-width: 48rem; }

.hero h1, .focus-section h2, .about-copy h2, .location-section h2, .focus-card h3 { font-family: var(--display); font-weight: 400; letter-spacing: -.025em; text-transform: uppercase; }

.hero h1 { font-size: clamp(4.6rem, 8vw, 8.5rem); line-height: .89; margin: clamp(1.25rem, 3vw, 2.5rem) 0 1.5rem; }

.hero h1 span { color: var(--red); }

.hero-intro { font-size: clamp(.9rem, 1.25vw, 1.12rem); line-height: 1.55; margin: 0; max-width: 36rem; }

.hero-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.75rem; }

.button { align-items: center; border: 0; display: inline-flex; font: 500 .7rem/1.15 var(--mono); gap: 1.5rem; justify-content: space-between; letter-spacing: .02em; min-height: 48px; padding: .75rem 1rem; text-decoration: none; text-transform: uppercase; transition: transform .2s ease, background .2s ease, color .2s ease; }

.button:hover { transform: translateY(-2px); }

.button-red { background: var(--red); color: var(--on-red); }

.button-paper { background: var(--paper); color: var(--ink); }

.button-ink { background: var(--ink); color: var(--paper); min-width: min(100%, 245px); }

.hero-emblem { align-items: center; display: flex; justify-content: center; padding: 1rem; }

.hero-emblem img { height: auto; max-width: 324px; width: 100%; }

.statement-strip { background: var(--paper); border-block: 1px solid color-mix(in srgb, var(--ink), transparent 82%); color: var(--ink); font-family: var(--display); font-size: clamp(1.2rem, 2vw, 2.05rem); letter-spacing: .01em; line-height: 1; overflow: hidden; padding-block: .8rem; text-transform: uppercase; white-space: nowrap; }

.statement-strip .site-container { overflow: hidden; text-overflow: clip; }

.focus-section { background: var(--paper); color: var(--ink); padding-block: clamp(3rem, 4.45vw, 4.75rem); }

.focus-section h2 { font-size: clamp(3.2rem, 7.3vw, 7.8rem); line-height: .89; margin: clamp(1.5rem, 3vw, 3rem) 0 clamp(1.75rem, 3.5vw, 3.5rem); }

.focus-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }

.focus-card { display: flex; flex-direction: column; min-height: 240px; padding: clamp(1.4rem, 2.35vw, 2.2rem); }

.focus-card-ink { background: var(--ink); color: var(--paper); }

.focus-card-red { background: var(--red); color: var(--on-red); }

.card-label { font: 500 .6rem/1.25 var(--mono); letter-spacing: .08em; margin: 0; text-transform: uppercase; }

.focus-card h3 { font-size: clamp(2.1rem, 3.35vw, 3.75rem); line-height: .88; margin: auto 0 1.25rem; }

.focus-card > p:not(.card-label) { font-size: .82rem; line-height: 1.55; margin: 0 0 1.6rem; max-width: 21rem; }

.focus-card a { border-top: 1px solid currentColor; font: 500 .65rem/1.2 var(--mono); letter-spacing: .04em; padding-top: 1rem; text-decoration: none; text-transform: uppercase; }

.focus-card a span { float: right; }

.about-section { background: var(--ink); color: var(--paper); }

.about-layout { align-items: stretch; display: grid; gap: clamp(2rem, 4.5vw, 4rem); grid-template-columns: minmax(0, .93fr) minmax(0, 1.07fr); }

.about-photo { margin: 0; overflow: hidden; position: relative; }

/* Let the copy determine the grid row.  Combining a stretched grid item with
   aspect-ratio is resolved differently by Chromium and Firefox, which made
   the section height (and the content below it) browser-dependent. */
.about-photo img { height: 100%; inset: 0; object-fit: cover; position: absolute; width: 100%; }

.about-copy { align-self: center; padding: clamp(3.25rem, 8vw, 8rem) clamp(2rem, 7vw, 7rem); }

.about-copy h2 { font-size: clamp(3.35rem, 6.1vw, 6.9rem); line-height: .88; margin: clamp(1.8rem, 4vw, 3.75rem) 0 2rem; }

.about-copy > p:not(.section-label) { font-size: clamp(.88rem, 1.1vw, 1.06rem); line-height: 1.62; margin: 0 0 1.25rem; max-width: 32rem; }

.about-copy > p:last-child { margin-bottom: 0; }

.location-section { background: var(--red); color: var(--on-red); }

.location-layout { align-items: start; display: grid; gap: 3rem; grid-template-columns: minmax(0, 1.2fr) minmax(220px, .8fr); min-height: 525px; padding-block: clamp(4rem, 8vw, 7.5rem); }

.location-section h2 { font-size: clamp(3.5rem, 7vw, 7.5rem); line-height: .88; margin: 1.5rem 0 0; }

.location-details { display: grid; gap: 2rem; }

.location-details address, .location-details p { font: 500 clamp(.8rem, 1.1vw, 1rem)/1.55 var(--mono); letter-spacing: .02em; margin: 0; text-transform: uppercase; }

.location-aside { display: grid; gap: 2rem; justify-self: end; width: min(100%, 25rem); }

.location-map { aspect-ratio: 1; background: var(--paper); border: 2px solid var(--ink); display: block; height: auto; width: 100%; }

@media (max-width: 720px) {
    .hero { min-height: 742px; }

    .hero-layout { align-content: start; gap: 2.25rem; grid-template-columns: 1fr; min-height: 742px; padding-block: 3.9rem 3.1rem; }

    .hero h1 { font-size: clamp(4.1rem, 19.8vw, 5.2rem); margin-block: 1.5rem 1.25rem; }

    .hero-intro { font-size: .85rem; max-width: 21rem; }

    .hero-actions { margin-top: 1.75rem; }

    .hero-actions .button-paper { display: none; }

    .hero-actions .button { width: 100%; }

    .hero-emblem { padding: 0; }

    .hero-emblem img { max-width: 342px; }

    .statement-strip { font-size: 1.15rem; padding-block: 1.25rem; }

    .focus-section { padding-block: 4.3rem; }

    .focus-section h2 { font-size: clamp(3.55rem, 17vw, 4.8rem); margin-block: 1.6rem 2.4rem; }

    .focus-grid { grid-template-columns: 1fr; }

    .focus-card { min-height: 280px; }

    .focus-card h3 { font-size: 3.2rem; }

    .about-layout { gap: 0; grid-template-columns: 1fr; }

    .about-photo { aspect-ratio: 342 / 380; }

    .about-photo img { aspect-ratio: auto; height: 100%; }

    .about-copy { padding: 3.8rem 0 4.6rem; }

    .about-copy h2 { font-size: clamp(3rem, 13.4vw, 3.5rem); margin-block: 1.5rem 1.75rem; }

    .location-layout { align-items: start; gap: 3.25rem; grid-template-columns: 1fr; min-height: 0; padding-block: 4.2rem; }

    .location-section h2 { font-size: clamp(3.55rem, 16.5vw, 4.65rem); }

    .location-details { gap: 1.55rem; }

    .location-aside { gap: 1.55rem; justify-self: stretch; width: 100%; }

    .button-ink { width: 100%; }
}