/* CAMPUS RHYTHM
   Responsive styles for Home, Explore, and Library Guide.
   Fluid layouts adapt from narrow phones to desktop screens.
   CSUN Hero Red / Burgundy / Golden Yellow from the supplied brand guide.
   Availability colors are reserved for room numbers, signals, and the key. */

:root {
	--red: #d22030;
	--burgundy: #971b2e;
	--gold: #fdbf56;
	--ink: #242020;
	--muted: #625957;
	--paper: #f8f5ef;
	--warm: #f1ebe2;
	--rose: #faeeeb;
	--line: #d9cfc5;
	--available: #16703b;
	--finishing: #8a6200;
	--radius: 5px;
	--rhythm: url('../images/sun-rhythm.png');
	--section-space: 64px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 120px; background: var(--paper); }
body {
	width: 100%;
	min-height: 100vh;
	min-height: 100svh;
	margin: 0 auto;
	color: var(--ink);
	background: var(--paper);
	font-family: 'Atkinson Hyperlegible', Helvetica, Arial, sans-serif;
	font-size: 20px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { line-height: 1.04; letter-spacing: -.05em; font-weight: 800; }
h1 { font-size: clamp(56px, 5.5vw, 84px); }
h2 { font-size: 42px; }
h3 { font-size: 28px; letter-spacing: -.035em; }
h1 em, h2 em { font-family: Georgia, serif; font-weight: 400; color: var(--burgundy); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .24em; }
a:hover { color: var(--burgundy); }
button, a, summary { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, summary:focus-visible {
	outline: 3px solid var(--burgundy);
	outline-offset: 5px;
}
.container { width: min(1200px, calc(100% - 96px)); margin-inline: auto; }
.section { padding-block: var(--section-space); }
.eyebrow {
	color: var(--burgundy);
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: .13em;
	font-weight: 800;
	margin-bottom: 18px;
}
.body-copy { max-width: 42ch; margin-block: 24px 32px; color: var(--muted); }
.icon { width: 88px; height: 88px; object-fit: contain; }
.feature-icon { width: 100px; height: 100px; margin-bottom: 24px; object-fit: contain; }
.source-note { font-size: 16px; line-height: 1.6; color: var(--muted); margin-top: 22px; }
.sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0;
	margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; top: -100px; left: 16px; z-index: 100; background: white; padding: 16px; }
.skip-link:focus { top: 12px; }

/* One shape, three action roles. Borders stay in place on hover. */
.button {
	--button-color: var(--red);
	--button-text: white;
	--button-hover: var(--burgundy);
	display: inline-flex;
	justify-content: center;
	align-items: center;
	min-height: 52px;
	max-width: 100%;
	border: 2px solid var(--button-color);
	border-radius: var(--radius);
	padding: 13px 23px;
	font-size: 18px;
	font-weight: 750;
	line-height: 1.35;
	text-align: center;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.button-primary { background: var(--button-color); color: var(--button-text); }
.button-primary:hover { background: var(--button-hover); border-color: var(--button-hover); color: var(--button-text); }
.button-secondary, .button-tertiary { background: transparent; color: var(--button-color); }
.button-secondary:hover, .button-tertiary:hover { background: var(--button-color); color: var(--button-text); }
.button-light { --button-color: white; --button-hover: var(--warm); --button-text: var(--burgundy); }
.button-light:focus-visible { outline-color: white; }
.actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 14px; }
.actions > .button { min-width: 0; padding-inline: 12px; }

/* The same visible navigation stays available at every screen size. */
.site-header { background: var(--paper); border-top: 5px solid var(--red); position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--line); }
.header-inner { min-height: 92px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; font-size: 24px; font-weight: 800; text-decoration: none; line-height: 1.1; letter-spacing: -.04em; }
.brand-mark { width: 48px; height: 52px; fill: none; stroke: var(--red); stroke-width: 3.5; stroke-linecap: round; }
.brand small { display: block; margin-top: 7px; color: var(--muted); font-size: 16px; font-weight: 700; letter-spacing: .16em; }
.site-header ul { display: flex; list-style: none; gap: 34px; padding: 0; margin: 0; }
.site-header nav a { display: block; padding: 18px 0; border-bottom: 3px solid transparent; text-decoration: none; font-size: 17px; font-weight: 750; }
.site-header nav a[aria-current] { color: var(--burgundy); border-bottom-color: var(--red); }

/* Full-width photography with a directional reading area. */
.hero { isolation: isolate; position: relative; min-height: 700px; overflow: visible; display: flex; align-items: center; z-index: 1; }
.hero-image { position: absolute; z-index: -3; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 65% 54%; }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, var(--paper) 0%, rgba(248,245,239,.98) 25%, rgba(248,245,239,.90) 40%, rgba(248,245,239,.10) 74%, rgba(248,245,239,0) 100%); }
.hero-content { padding-block: 72px 110px; position: relative; }
.hero-copy { max-width: 670px; position: relative; z-index: 2; }
.hero-copy h1 { max-width: 760px; }
.hero-copy .lead { color: var(--muted); font-size: 22px; line-height: 1.55; max-width: 41ch; margin: 30px 0 34px; }
.hero .photo-caption { position: absolute; bottom: 42px; right: 0; background: rgba(36,32,32,.82); padding: 9px 14px; color: white; font-size: 16px; letter-spacing: .12em; line-height: 1.5; }
.hero-rhythm { position: absolute; z-index: -2; width: 100%; height: auto; aspect-ratio: 3 / 1; bottom: -32px; left: 0; background: var(--rhythm) center / contain no-repeat; opacity: .7; pointer-events: none; }
.hero-explore .hero-image { object-position: 78% 60%; }
.hero-explore::before { background: linear-gradient(90deg, var(--paper) 0%, rgba(248,245,239,.98) 30%, rgba(248,245,239,.91) 43%, rgba(248,245,239,.18) 72%, transparent 100%); }
.hero-library { min-height: 660px; }
.hero-library .hero-image { object-position: 72% 67%; }
.hero-library h1 { font-size: clamp(56px, 5.5vw, 84px); }
.section-nav { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 16px; padding-block: 28px; border-bottom: 1px solid var(--line); }
.section-nav a { font-size: 22px; line-height: 1.35; font-weight: 750; text-decoration: none; padding: 10px 0; min-height: 48px; }
.section-nav span { color: var(--red); font-size: 21px; font-weight: 800; margin-right: 12px; }

/* Repeat the alignment, then vary section pacing. */
.section-heading { display: flex; justify-content: space-between; gap: 60px; align-items: flex-end; margin-bottom: 50px; }
.section-heading h2 { max-width: 760px; }
.section-index { margin-right: 14px; display: inline-block; }
.section-intro { color: var(--muted); max-width: 32ch; flex-basis: 320px; flex-shrink: 0; padding-bottom: 4px; }
.destinations-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 34px; }
.destination { min-width: 0; display: flex; flex-direction: column; }
.destination-image { position: relative; margin-bottom: 26px; overflow: hidden; }
.destination-image > img { width: 100%; aspect-ratio: 1.4; object-fit: cover; }


.destination-copy { display: flex; flex: 1; flex-direction: column; align-items: flex-start; }
.destination-copy .eyebrow { font-size: 16px; margin-bottom: 12px; }
.destination-copy h3 { margin-bottom: 16px; }
.destination-copy p:not(.eyebrow) { margin-bottom: 24px; color: var(--muted); max-width: 34ch; }
.destination-copy .button { margin-top: auto; }
.study-section { background: var(--warm); position: relative; isolation: isolate; overflow: visible; z-index: 1; }
.study-section::before { content: ''; position: absolute; z-index: 0; left: 0; bottom: -24px; width: 100%; height: auto; aspect-ratio: 3 / 1; background: var(--rhythm) center / contain no-repeat; opacity: .08; pointer-events: none; }
.study-modes { display: grid; grid-template-columns: repeat(3,1fr); gap: 36px; margin-block: 30px 52px; }
.study-mode { text-align: center; text-decoration: none; padding: 12px; }
.noise-art { width: 155px; height: 155px; margin-inline: auto; object-fit: contain; }
.mode-title { display: block; font-size: 28px; font-weight: 750; margin: 16px 0 4px; letter-spacing: -.035em; }
.mode-sub { display: block; font-size: 18px; color: var(--muted); }
.study-mode .noise-art { transition: transform .22s ease; }
.study-mode:hover .noise-art { transform: translateY(-5px); }
.section-end { display: flex; align-items: center; justify-content: space-between; gap: 32px; border-top: 1px solid var(--line); padding-top: 30px; }
.section-end > p { color: var(--muted); font-size: 18px; max-width: 50ch; }
.section-end .source-note { margin: 0; }
.photo-feature { position: relative; isolation: isolate; overflow: hidden; min-height: 620px; color: white; display: flex; align-items: center; background: var(--burgundy); }
.feature-photo { width: 100%; height: 100%; position: absolute; inset: 0; z-index: -3; object-fit: cover; }
.photo-feature::before { content: ''; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(113,15,33,.98) 0%, rgba(113,15,33,.94) 29%, rgba(113,15,33,.66) 50%, rgba(36,20,20,.12) 83%); }
.feature-content { padding-block: 76px; }
.feature-content > div { max-width: 480px; }
.photo-feature .eyebrow, .photo-feature em { color: white; }
.photo-feature h2 { font-size: 60px; }
.photo-feature p:not(.eyebrow) { max-width: 38ch; margin-block: 26px 30px; color: white; }


.home-src { background: var(--paper); }
.home-src-grid { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 80px; align-items: center; }
.activity-links { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
.activity-links a { display: flex; align-items: center; gap: 16px; text-decoration: none; }
.activity-links span { font-size: 22px; font-weight: 750; line-height: 1.2; }
.activity-links small { display: block; font-weight: 400; font-size: 16px; color: var(--muted); margin-top: 8px; }
.activity-links .icon { flex-shrink: 0; width: 86px; height: 86px; }
.closing-banner { background: var(--burgundy); color: white; padding-block: 76px; position: relative; isolation: isolate; overflow: visible; z-index: 1; }
.closing-banner::before { content: ''; position: absolute; z-index: 0; width: 100%; height: auto; aspect-ratio: 3 / 1; right: 0; bottom: -24px; background: var(--rhythm) center / contain no-repeat; opacity: .42; pointer-events: none; }
.closing-banner .eyebrow { color: white; }
.closing-banner h2 { max-width: 850px; margin-bottom: 34px; }

/* Explore: photographs, landmarks, coffee, and a weekly recreation journal. */
.editorial-pair { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); gap: 74px; align-items: center; }
.editorial-photo img { width: 100%; aspect-ratio: 1.1; object-fit: cover; object-position: 50% 55%; }
figcaption { margin-top: 14px; font-size: 16px; letter-spacing: .12em; color: var(--muted); line-height: 1.5; }
.editorial-copy h3 { font-size: 42px; margin-bottom: 22px; }
.editorial-copy > p:not(.eyebrow) { max-width: 38ch; color: var(--muted); }
.editorial-actions { width: 100%; margin-top: 28px; }
.editorial-copy .editorial-actions > .button { margin: 0; min-width: 0; padding: 14px 12px; }
.fact-pair { display: flex; gap: 48px; margin: 25px 0; }
.fact-pair span { font-size: 16px; color: var(--muted); }
.fact-pair strong { font-size: 50px; display: block; line-height: 1.2; color: var(--burgundy); letter-spacing: -.04em; }
.landmarks-section { background: var(--warm); position: relative; isolation: isolate; overflow: visible; z-index: 1; }
.landmarks-section::before { content: ''; position: absolute; z-index: 0; left: 0; bottom: -24px; width: 100%; height: auto; aspect-ratio: 3 / 1; background: var(--rhythm) center / contain no-repeat; opacity: .08; pointer-events: none; }
.landmark-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.landmark { display: flex; flex-direction: column; }
.landmark figure img { width: 100%; aspect-ratio: 2; object-fit: cover; }
.landmark > div { position: relative; padding: 40px 0 0; display: flex; flex-direction: column; align-items: flex-start; flex: 1; }
.landmark-letter { font-size: 66px; font-weight: 800; letter-spacing: -.07em; line-height: 1; position: absolute; right: 5px; top: 30px; color: rgba(151,27,46,.16); }
.landmark h3 { padding-right: 55px; margin-bottom: 20px; }
.landmark p:not(.eyebrow) { color: var(--muted); max-width: 43ch; margin-bottom: 28px; }
.landmark .button { margin-top: auto; }
.coffee-feature .feature-photo { object-position: 65% 36%; }
.coffee-feature::before { background: linear-gradient(90deg, rgba(43,24,22,.97) 0%, rgba(43,24,22,.93) 25%, rgba(43,24,22,.68) 45%, rgba(43,24,22,.05) 75%); }
.coffee-feature .feature-icon { filter: brightness(0) invert(1); width: 86px; height: 86px; }
.photo-feature p.full-photo-caption { margin: 0; max-width: none; line-height: 1.5; position: absolute; bottom: 24px; right: 48px; font-size: 16px; letter-spacing: .12em; padding: 8px 12px; background: rgba(36,32,32,.8); }
.coffee-details { background: var(--warm); }
.coffee-detail-grid { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 80px; align-items: center; }
.coffee-detail-grid img { width: 100%; aspect-ratio: 1.5; object-fit: cover; object-position: 65% 50%; }
.src-opening { background: var(--rose); padding: 84px 0 115px; position: relative; isolation: isolate; overflow: visible; z-index: 1; }
.src-opening h2 { font-size: 60px; max-width: 850px; }
.src-intro-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 36px; margin-top: 28px; }
.src-intro-bottom p { max-width: 40ch; color: var(--muted); }
.week-label { display: block; max-width: 100%; color: var(--burgundy); font-size: 22px; line-height: 1.4; letter-spacing: .08em; font-weight: 900; }
.src-rhythm { position: absolute; bottom: -24px; left: 0; width: 100%; height: auto; aspect-ratio: 3 / 1; background: var(--rhythm) center / contain no-repeat; z-index: 0; opacity: .22; pointer-events: none; }
.facilities-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 36px; }
.facility { display: flex; align-items: flex-start; flex-direction: column; min-width: 0; }
.facility-image { position: relative; width: 100%; margin-bottom: 28px; overflow: hidden; }
.facility-image > img:first-child { width: 100%; aspect-ratio: 1; object-fit: cover; }

.facility h3 { margin-bottom: 12px; }
.facility > p:not(.eyebrow) { color: var(--muted); font-size: 18px; margin-bottom: 20px; }
.facility .hours { width: 100%; margin: 0 0 24px; }
.facility .button { margin-top: auto; }
.hours { margin: 0; }
.hours > div { display: flex; justify-content: space-between; gap: 20px; padding-block: 10px; border-bottom: 1px solid var(--line); font-size: 17px; }
.hours dt { color: var(--muted); }
.hours dd { margin: 0; font-weight: 750; text-align: right; }
.building-hours { display: grid; grid-template-columns: minmax(0,1fr) 320px auto; align-items: center; gap: 40px; background: var(--warm); padding: 30px; margin-top: 60px; }
.building-hours > div { display: flex; align-items: center; gap: 18px; }
.building-hours > div > div { min-width: 0; }
.building-hours .eyebrow { margin-bottom: 8px; font-size: 16px; }
.building-hours h3 { font-size: 27px; }
.hours-icon { width: 70px; height: 70px; flex-shrink: 0; }
.programs-section { background: var(--warm); }
.program-list { border-top: 1px solid var(--line); }
.program { display: grid; grid-template-columns: 140px 125px minmax(0,1fr) 180px; align-items: center; gap: 30px; padding-block: 32px; border-bottom: 1px solid var(--line); }
.program-photo { width: 140px; height: 140px; object-fit: cover; }
.program-date strong { display: block; font-size: 30px; letter-spacing: -.04em; color: var(--burgundy); }
.program-date span { font-size: 16px; letter-spacing: .1em; }
.program-copy { position: relative; padding-left: 0; }
.program-icon { position: absolute; top: 0; left: 0; width: 60px; height: 70px; object-fit: contain; }
.program-copy .eyebrow { margin-bottom: 10px; font-size: 16px; }
.program-copy h3 { font-size: 27px; line-height: 1.12; }
.program-copy > p:not(.eyebrow) { font-size: 17px; color: var(--muted); margin-top: 12px; }
.intramural-feature { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); margin-top: 64px; background: var(--burgundy); color: white; }
.intramural-feature > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.intramural-feature > div:not(.photo-window) { padding: 52px; }
.intramural-feature .feature-icon { filter: brightness(0) invert(1); }
.intramural-feature .eyebrow { color: white; }
.intramural-feature h3 { font-size: 47px; margin-bottom: 24px; }
.intramural-feature p:not(.eyebrow) { margin-bottom: 30px; max-width: 44ch; }

/* Library: floor numbers and the approved illustrations carry the hierarchy. */
.noise-legend { display: grid; grid-template-columns: repeat(3,1fr); gap: 36px; text-align: center; padding: 10px 0 38px; }
.noise-legend .noise-art { width: 172px; height: 172px; }
.noise-legend h3 { font-size: 26px; margin-block: 18px 10px; }
.noise-legend p { font-size: 17px; color: var(--muted); }
.zone-guidance { max-width: 95ch; font-size: 17px; color: var(--muted); line-height: 1.6; margin-bottom: 46px; }
.floor-list { border-top: 2px solid var(--burgundy); }
.floor-row { display: grid; grid-template-columns: 110px 350px minmax(0,1fr); gap: 46px; align-items: center; padding-block: 35px; border-bottom: 1px solid var(--line); }
.floor-id { display: flex; flex-direction: column; align-items: flex-start; }
.floor-label { font-size: 16px; font-weight: 750; letter-spacing: .08em; color: var(--burgundy); }
.floor-number { font-size: 138px; line-height: 1; font-weight: 800; letter-spacing: -.06em; color: var(--burgundy); }
.floor-scenes { display: flex; align-items: center; gap: 12px; justify-content: flex-start; }
.floor-scene { width: 170px; height: 170px; object-fit: contain; }
.floor-scenes .floor-scene:only-child { width: 190px; height: 190px; }
.floor-copy .eyebrow { font-size: 16px; margin-bottom: 12px; }
.floor-copy h3 { font-size: 30px; margin-bottom: 14px; }
.floor-copy > p:last-child { color: var(--muted); font-size: 18px; max-width: 48ch; }
.floor-guide .section-end { border-top: 0; }
.study-photo-strip { position: relative; isolation: isolate; height: 370px; display: flex; align-items: center; color: white; overflow: hidden; }
.study-photo-strip > img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 54%; position: absolute; inset: 0; z-index: -3; }
.study-photo-strip::before { content: ''; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(36,24,24,.92), rgba(36,24,24,.75) 35%, rgba(36,24,24,.1) 78%); }
.study-photo-strip .eyebrow { color: white; }
.study-photo-strip h2 { max-width: 680px; font-size: 42px; }
.booking-section { background: var(--warm); position: relative; isolation: isolate; overflow: visible; z-index: 1; }
.booking-section::before { content: ''; position: absolute; z-index: 0; width: min(100%, 1000px); height: auto; aspect-ratio: 3 / 1; top: -24.12px; right: 0; background: var(--rhythm) center / contain no-repeat; opacity: .09; pointer-events: none; }
.availability-legend { display: flex; flex-wrap: wrap; gap: 28px 44px; padding-block: 8px 28px; border-bottom: 1px solid var(--line); }
.availability-legend > span { display: grid; grid-template-columns: 12px 1fr; column-gap: 10px; align-items: center; }
.availability-legend strong { font-size: 16px; line-height: 1.35; font-weight: 700; }
.availability-legend small { grid-column: 2; font-size: 16px; color: var(--muted); }
.key { width: 10px; height: 10px; display: inline-block; border-radius: 50%; }
.key.busy { background: var(--red); }
.key.finishing { background: var(--gold); }
.key.available { background: var(--available); }
.booking-disclosure { font-size: 16px; color: var(--muted); margin-block: 18px 45px; max-width: 100ch; }
.room-board { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); column-gap: 36px; row-gap: 68px; list-style: none; padding: 0; margin: 0; }
/* Room entries have no status boxes, borders, tiles, or panels. */
.room { background: transparent; border: 0; box-shadow: none; padding: 0; min-width: 0; text-align: center; }
.room.available { color: var(--available); }
.room.busy { color: var(--red); }
.room.finishing { color: var(--finishing); }
.room-signal { display: flex; justify-content: center; align-items: center; gap: 15px; min-height: 105px; }
.room-number { font-size: 104px; font-weight: 800; line-height: 1; letter-spacing: -.075em; }
.traffic-light { width: 42px; height: 95px; flex-shrink: 0; }
.traffic-light path { stroke: currentColor; stroke-width: 2; fill: none; }
.traffic-light circle { fill: #d3ccc2; }
.available .signal-green { fill: currentColor; }
.busy .signal-red { fill: currentColor; }
.finishing .signal-yellow { fill: var(--gold); }
.room-status { font-size: 16px; font-weight: 750; line-height: 1.4; min-height: 38px; padding-top: 12px; max-width: 19ch; margin-inline: auto; }
.room-action { min-height: 78px; padding-top: 16px; }
.room-booking { padding: 11px 13px; font-size: 16px; min-height: 52px; max-width: 190px; }
.booking-footer { border-top: 1px solid var(--line); padding-top: 30px; margin-top: 55px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.booking-footer > div { display: flex; align-items: center; gap: 22px; }
.booking-footer p { font-size: 17px; line-height: 1.6; color: var(--muted); }
.booking-footer strong { color: var(--ink); font-weight: 650; }
.booking-icon { width: 64px; height: 64px; flex-shrink: 0; }
.library-help { margin-top: 70px; padding-top: 45px; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 90px; }
.library-help h3 { font-size: 39px; max-width: 360px; }
.help-questions details { border-bottom: 1px solid var(--line); padding: 0 0 20px; margin-bottom: 20px; }
.help-questions summary { cursor: pointer; font-size: 20px; font-weight: 700; padding-right: 14px; }
.help-questions p { color: var(--muted); font-size: 17px; margin-block: 16px; }
.help-questions a { font-size: 17px; }

/* Footer is quieter than the main content and retains all source credits. */
.site-footer { background: #242020; color: #f8f5ef; padding: 65px 0 24px; }
.footer-top { display: flex; justify-content: space-between; gap: 50px; margin-bottom: 48px; }
.footer-brand { font-size: 39px; font-weight: 750; letter-spacing: -.04em; }
.footer-top p:last-child { font-size: 17px; color: #d4ccc9; margin-top: 10px; }
.footer-top nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 40px; align-content: start; font-size: 17px; }
.site-footer a:hover { color: white; }
.site-footer a:focus-visible, .site-footer summary:focus-visible { outline-color: white; }
.credits { font-size: 16px; color: #d4ccc9; border-top: 1px solid #534b49; padding-top: 20px; }
.credits summary { cursor: pointer; }
.credits p { margin-block: 18px; max-width: 100ch; }
.credits ul { padding-left: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 30px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; color: #bfb5b2; font-size: 16px; margin-top: 40px; }

/* PHOTO WINDOWS
   The same oversized icon geometry defines two complementary regions:
   22.5% combined gradient tint inside icons; 4% gradient tint around them.
   A subtle burn accent adds photo texture, with white page marks above it.
   Photo and overlay dimensions change together at each breakpoint. */
.photo-window { position: relative; overflow: hidden; isolation: isolate; }
.photo-window > img:first-child { display: block; }
.destination-symbol { position: absolute; inset: 0; display: block; width: 100%; height: 100%; background: transparent; padding: 0; border-radius: 0; }
.hero::before { z-index: -1; bottom: -32px; }
.feature-photo-window { position: absolute; top: 0; right: 0; width: 64%; height: 100%; z-index: -2; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(90deg,transparent,black 18%); mask-image: linear-gradient(90deg,transparent,black 18%); }
.study-photo-strip .feature-photo-window { width: 100%; }
.photo-feature::before, .study-photo-strip::before { z-index: -1; }
.program-window { width: 140px; height: 140px; }
.intramural-window { min-height: 400px; height: 100%; }
.intramural-window > img:first-child { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
:is(.photo-window, .destination-symbol, .facility-image, .feature-photo-window)
	> :is(.photo-icon-overlay, .photo-icon-burn, .photo-icon-detail, .photo-icon-edge) {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	aspect-ratio: auto;
	object-fit: fill;
	object-position: 50% 50%;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	pointer-events: none;
}
.photo-icon-burn { opacity: .025; mix-blend-mode: color-burn; }
.photo-icon-detail, .photo-icon-edge { mix-blend-mode: normal; }
.destination-image, .facility-image { isolation: isolate; }
.photo-icon-edge { opacity: .375; filter: none; }
main > section > .container, .site-footer > .container { position: relative; z-index: 2; }

/* Grid children can shrink and text can wrap as the window changes. */
.section-heading > div, .section-intro, .hero-copy, .editorial-copy,
.program-copy, .program-date, .building-hours > div, .landmark,
.footer-top > div, .footer-top nav, .floor-copy { min-width: 0; }
.brand-mark { flex-shrink: 0; }
.hero .photo-caption { max-width: 100%; }
.photo-feature p.full-photo-caption { max-width: calc(100% - 40px); }
.button, .credits a { overflow-wrap: anywhere; }

/* Smaller desktop and landscape tablet layouts. */
@media (max-width: 1100px) {
	.container { width: calc(100% - 64px); }
	.hero { min-height: 610px; }
	.hero-copy { max-width: 600px; }
	.hero-copy h1, .hero-library h1 { font-size: 72px; }
	.section-heading { gap: 36px; }
	.section-intro { flex-basis: 280px; }
	.destinations-grid { gap: 25px; }
	.destination-copy h3 { font-size: 28px; }
	.home-src-grid { gap: 40px; }
	.activity-links { gap: 28px; }
	.activity-links a { flex-direction: column; align-items: flex-start; gap: 12px; }
	.editorial-pair, .coffee-detail-grid { gap: 44px; }
	.building-hours { grid-template-columns: 1fr 260px; gap: 25px; }
	.building-hours .button { grid-column: 1/-1; justify-self: start; }
	.program { grid-template-columns: 110px 105px minmax(0,1fr); gap: 22px; }
	.program-photo { width: 110px; height: 110px; }
	.program > .button { grid-column: 3; justify-self: start; }
	.program-copy { padding-left: 0; }
	.floor-row { grid-template-columns: 95px 290px minmax(0,1fr); gap: 26px; }
	.floor-scenes { gap: 6px; }
	.floor-scene { width: 140px; height: 140px; }
	.floor-scenes .floor-scene:only-child { width: 180px; height: 180px; }
	.room-board { column-gap: 20px; }
	.room-number { font-size: 88px; }
	.room-signal { gap: 10px; }


	.program-window { width: 110px; height: 110px; }
}

/* Tablet layouts simplify repeated groups before they get crowded. */
@media (max-width: 900px) {
	.header-inner { min-height: 85px; }
	.brand { font-size: 21px; }
	.brand-mark { width: 40px; }
	.site-header ul { gap: 22px; }
	.hero-copy h1, .hero-library h1 { font-size: 64px; }
	.hero-copy { max-width: 520px; }
	.hero::before, .hero-explore::before { background: linear-gradient(90deg, rgba(248,245,239,.99), rgba(248,245,239,.97) 38%, rgba(248,245,239,.70) 60%, rgba(248,245,239,.15)); }
	.section-heading { display: block; }
	.section-intro { max-width: 54ch; margin-top: 24px; }
	.destinations-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 36px 24px; }
	.destination-copy h3 { font-size: 27px; }
	.destination-copy p:not(.eyebrow) { font-size: 18px; }


	.destination-copy .button { padding-inline: 15px; font-size: 16px; }
	.noise-art { width: 138px; height: 138px; }
	.mode-title { font-size: 25px; }
	.mode-sub { font-size: 16px; }
	.home-src-grid { grid-template-columns: 1fr; }
	.activity-links { grid-template-columns: repeat(4,1fr); }
	.activity-links span { font-size: 19px; }
	.editorial-pair { grid-template-columns: 1fr 1fr; gap: 30px; }
	.editorial-copy .feature-icon { width: 80px; height: 80px; }
	.editorial-copy h3 { font-size: 42px; }
	.coffee-detail-grid { gap: 40px; }
	.src-intro-bottom { align-items: flex-start; flex-direction: column; gap: 20px; }
	.facilities-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 40px 24px; }

	.facility h3 { font-size: 28px; }
	.hours > div { font-size: 16px; gap: 10px; }
	.facility .button { padding: 11px; font-size: 16px; }
	.program-copy { padding-left: 0; }
	.program-icon { width: 54px; height: 65px; }
	.intramural-feature > div:not(.photo-window) { padding: 34px; }
	.intramural-feature h3 { font-size: 40px; }
	.noise-legend { gap: 20px; }
	.noise-legend .noise-art { width: 150px; height: 150px; }
	.noise-legend h3 { font-size: 24px; }
	.floor-row { grid-template-columns: 100px minmax(0,1fr); gap: 22px 36px; padding-block: 32px; }
	.floor-scenes { gap: 22px; }
	.floor-scene { width: 165px; height: 165px; }
	.floor-copy { grid-column: 2; max-width: 510px; }
	.floor-number { font-size: 132px; }
	.room-board { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 44px 32px; }
	.room-number { font-size: 102px; }
	.library-help { gap: 45px; }
	.section-end { align-items: flex-start; }
	.section-nav { flex-wrap: wrap; justify-content: flex-start; gap: 12px 30px; }
	.hero .photo-caption { max-width: 100%; }
	.floor-scenes .floor-scene:only-child { width: 180px; height: 180px; }
	.booking-footer { align-items: flex-start; }
	.booking-footer > div { min-width: 0; }
}

/* Phones use a single reading column and a photo beneath the hero copy. */
@media (max-width: 640px) {
	:root { --section-space: 64px; }
	html { scroll-padding-top: 160px; }
	body { font-size: 18px; }
	.container { width: calc(100% - 40px); }
	.site-header { position: sticky; }
	.header-inner { flex-direction: column; align-items: flex-start; gap: 0; padding-top: 15px; }
	.brand { font-size: 22px; gap: 10px; }
	.brand-mark { width: 35px; height: 40px; }
	.brand small { font-size: 16px; margin-top: 5px; }
	.site-header nav { width: 100%; }
	.site-header ul { justify-content: space-between; gap: 12px; }
	.site-header nav a { font-size: 16px; padding: 12px 0 9px; min-height: 44px; }
	.hero { min-height: 740px; align-items: flex-start; }
	.hero-content { padding-top: 46px; padding-bottom: 330px; }
	.hero-copy { max-width: none; }
	.hero-copy h1, .hero-library h1 { font-size: clamp(48px, 9.8vw, 60px); letter-spacing: -.055em; }
	.hero-copy .eyebrow { font-size: 16px; margin-bottom: 18px; }
	.hero-copy .lead { font-size: 20px; line-height: 1.5; margin-block: 22px 25px; max-width: 36ch; }
	.hero-image { height: 300px; top: auto; bottom: 0; object-position: 50% 55%; }
	.hero::before, .hero-explore::before { background: linear-gradient(180deg, var(--paper) 0%, var(--paper) 56%, rgba(248,245,239,.9) 63%, rgba(248,245,239,.15) 79%, transparent 100%); }
	.hero .photo-caption { right: 0; bottom: 20px; left: 0; width: fit-content; font-size: 16px; padding: 7px 10px; }
	.hero-rhythm { opacity: .35; }
	.hero-explore { min-height: 700px; }
	.hero-library { min-height: 715px; }
	.actions { gap: 10px; }
	.actions .button { min-height: 49px; padding-inline: 17px; font-size: 16px; }
	.section-nav { flex-wrap: wrap; justify-content: flex-start; gap: 10px 24px; padding-block: 22px; }
	.section-nav a { font-size: 19px; min-height: 44px; }
	.section-nav span { font-size: 19px; margin-right: 8px; }
	.section-heading { margin-bottom: 36px; }
	.section-heading h2 { font-size: 42px; }
	.section-intro { font-size: 18px; margin-top: 22px; }
	.eyebrow { font-size: 16px; }
	.destinations-grid { grid-template-columns: 1fr; gap: 44px; }
	.destination-image { margin-bottom: 26px; }
	.destination-image > img { aspect-ratio: 1.6; }


	.destination-copy h3 { font-size: 32px; }
	.destination-copy p:not(.eyebrow) { max-width: 45ch; }
	.destination-copy .button { font-size: 16px; min-height: 50px; }
	.study-modes { grid-template-columns: 1fr; gap: 18px; margin-block: 20px 36px; }
	.study-mode { display: grid; grid-template-columns: 128px minmax(0,1fr); column-gap: 20px; text-align: left; padding: 12px 0; align-items: center; }
	.study-mode .noise-art { grid-row: 1/3; width: 128px; height: 128px; }
	.mode-title { font-size: 26px; margin: 0; align-self: end; }
	.mode-sub { align-self: start; margin-top: 6px; max-width: 22ch; }
	.section-end { flex-direction: column; gap: 24px; }
	.photo-feature { min-height: 730px; align-items: flex-start; }
	.feature-content { padding-block: 52px 360px; }
	.photo-feature h2 { font-size: 64px; }
	.feature-photo { height: 320px; top: auto; bottom: 0; object-position: 65% center; }
	.photo-feature::before { background: linear-gradient(180deg, rgba(113,15,33,1) 0%, rgba(113,15,33,1) 52%, rgba(113,15,33,.85) 61%, rgba(113,15,33,.08) 86%); }
	.photo-feature p:not(.eyebrow) { font-size: 19px; max-width: 35ch; margin-block: 22px 26px; }


	.activity-links { grid-template-columns: 1fr 1fr; gap: 34px 20px; }
	.activity-links .icon { width: 86px; height: 86px; }
	.activity-links span { font-size: 22px; }
	.closing-banner { padding-block: 58px; }
	.closing-banner h2 { font-size: 44px; }
	.closing-banner::before { opacity: .28; }
	.editorial-pair, .coffee-detail-grid { grid-template-columns: 1fr; gap: 32px; }
	.editorial-photo img { aspect-ratio: 1.2; }
	.editorial-copy h3 { font-size: 48px; }
	.editorial-copy .feature-icon { width: 96px; height: 96px; }
	.landmark-grid { grid-template-columns: 1fr; gap: 48px; }
	.landmark h3 { font-size: 31px; }
	.landmark-letter { font-size: 61px; }
	.coffee-feature { background: #2b1816; min-height: 855px; }
	.coffee-feature .feature-photo { height: 310px; object-position: 54% 25%; }
	.coffee-feature::before { background: linear-gradient(180deg, #2b1816 0%, #2b1816 58%, rgba(43,24,22,.9) 65%, rgba(43,24,22,.03) 85%); }
	.coffee-feature .feature-content { padding-bottom: 350px; }
	.coffee-feature .feature-icon { width: 80px; height: 80px; }
	.photo-feature p.full-photo-caption { margin: 0; right: 20px; left: 20px; bottom: 16px; font-size: 16px; width: fit-content; }
	.src-opening { padding: 60px 0 95px; }
	.src-opening h2 { font-size: 48px; }
	.week-label { font-size: 20px; }
	.src-rhythm { opacity: .22; }
	.facilities-grid { grid-template-columns: 1fr; gap: 50px; }
	.facility-image { margin-bottom: 28px; }
	.facility-image > img:first-child { aspect-ratio: 1.1; }

	.facility h3 { font-size: 33px; }
	.facility .hours > div, .hours > div { font-size: 17px; }
	.facility .button { font-size: 16px; padding-inline: 18px; }
	.building-hours { grid-template-columns: 1fr; padding: 24px; margin-top: 45px; gap: 22px; }
	.building-hours .button { grid-column: auto; }
	.hours-icon { width: 60px; }
	.program { grid-template-columns: 90px 1fr; gap: 22px 20px; padding-block: 28px; }
	.program-photo { width: 90px; height: 100px; }
	.program-date { align-self: center; }
	.program-date strong { font-size: 33px; }
	.program-copy { grid-column: 1/-1; padding-left: 0; }
	.program-icon { display: block; width: 60px; height: 72px; }
	.program-copy h3 { font-size: 29px; }
	.program > .button { grid-column: 1/-1; justify-self: start; }
	.intramural-feature { grid-template-columns: 1fr; }
	.intramural-feature > img { aspect-ratio: 1.2; height: auto; object-position: 50% 70%; }
	.intramural-feature > div:not(.photo-window) { padding: 32px 25px; }
	.intramural-feature h3 { font-size: 42px; }
	.noise-legend { grid-template-columns: 1fr; gap: 20px; text-align: left; padding-bottom: 32px; }
	.noise-legend > div { display: grid; grid-template-columns: 128px minmax(0,1fr); gap: 4px 22px; align-items: center; }
	.noise-legend .noise-art { width: 128px; height: 128px; grid-row: 1/3; }
	.noise-legend h3 { font-size: 26px; align-self: end; margin: 0; }
	.noise-legend p { align-self: start; margin-top: 4px; }
	.zone-guidance { font-size: 16px; margin-bottom: 34px; }
	.floor-row { grid-template-columns: 86px minmax(0,1fr); gap: 20px 16px; padding-block: 30px; }
	.floor-number { font-size: 103px; }
	.floor-label { font-size: 16px; }
	.floor-scenes { gap: 6px; justify-content: flex-start; }
	.floor-scene { width: calc((100% - 6px)/2); height: auto; aspect-ratio: 1; max-width: 140px; }
	.floor-scenes .floor-scene:only-child { width: min(100%,160px); height: auto; aspect-ratio: 1; }
	.floor-copy { grid-column: 1/-1; }
	.floor-copy h3 { font-size: 31px; }
	.floor-copy > p:last-child { font-size: 17px; }
	.study-photo-strip { height: 380px; }
	.study-photo-strip > img { object-position: 62% 50%; }
	.study-photo-strip::before { background: linear-gradient(90deg,rgba(36,24,24,.85),rgba(36,24,24,.5)); }
	.study-photo-strip h2 { font-size: 43px; }
	.availability-legend { flex-direction: column; gap: 17px; }
	.availability-legend strong { font-size: 16px; }
	.booking-disclosure { font-size: 16px; margin-block: 20px 40px; }
	.room-board { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 38px 22px; }
	.room-signal { gap: 10px; min-height: 95px; }
	.room-number { font-size: 87px; }
	.traffic-light { width: 34px; height: 82px; }
	.room-status { font-size: 16px; min-height: 45px; max-width: 18ch; }
	.room-booking { font-size: 16px; padding: 10px; min-height: 56px; }
	.room-action { min-height: 75px; padding-top: 12px; }
	.booking-footer { flex-direction: column; align-items: flex-start; gap: 24px; }
	.booking-footer p { font-size: 16px; }
	.booking-footer > div { gap: 16px; }
	.booking-icon { width: 54px; height: 54px; }
	.library-help { grid-template-columns: 1fr; gap: 35px; margin-top: 50px; padding-top: 35px; }
	.library-help h3 { font-size: 37px; }
	.footer-top { flex-direction: column; gap: 32px; margin-bottom: 36px; }
	.footer-brand { font-size: 33px; }
	.footer-top nav { font-size: 16px; gap: 14px 26px; }
	.credits ul { grid-template-columns: 1fr; }
	.footer-bottom { flex-direction: column; gap: 8px; }


	/* Each decorative overlay follows the photo directly beneath it. */
	.feature-photo-window { top: auto; bottom: 0; width: 100%; height: 320px; -webkit-mask-image: none; mask-image: none; }
	.coffee-feature .feature-photo-window { height: 310px; }
	.study-photo-strip .feature-photo-window { top: 0; height: 100%; }
	.program-window { width: 90px; height: 100px; }
	.intramural-window { width: 100%; min-height: 0; height: auto; aspect-ratio: 1.2; }
	/* Paired actions remain readable without fixed button widths. */
	.actions .button { padding-inline: 10px; }
	.editorial-copy .editorial-actions > .button { padding: 12px 10px; }
	.section-nav a, .section-nav span { font-size: 18px; }
}

@media (max-width: 360px) {
	.container { width: calc(100% - 32px); }
	.hero-copy h1, .hero-library h1 { font-size: 47px; }
	.hero { min-height: 785px; }
	.hero-explore { min-height: 730px; }
	.hero-library { min-height: 740px; }
	.hero-copy .lead { font-size: 19px; }
	.actions .button { padding-inline: 13px; font-size: 16px; }
	.section-heading h2 { font-size: 39px; }
	.study-mode { grid-template-columns: 115px minmax(0,1fr); gap: 16px; }
	.study-mode .noise-art { width: 115px; height: 115px; }
	.mode-title { font-size: 22px; }
	.noise-legend > div { grid-template-columns: 116px minmax(0,1fr); gap: 4px 18px; }
	.noise-legend .noise-art { width: 116px; height: 116px; }
	.noise-legend h3 { font-size: 22px; }
	.floor-row { grid-template-columns: 76px minmax(0,1fr); gap: 18px 14px; }
	.floor-number { font-size: 92px; }
	.floor-scenes .floor-scene:only-child { width: min(100%,155px); height: auto; }
	.room-board { column-gap: 16px; }
	.room-number { font-size: 76px; }
	.traffic-light { width: 31px; height: 77px; }
	.room-signal { gap: 7px; }
	.room-booking { font-size: 16px; padding: 10px 8px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition: none !important; animation: none !important; }
}