/* ============================================================================
   About page.

   No founder portrait, no timeline: the page shows the house instead, read
   from the roof down along one rule, and lets guests' reviews say the rest.
   Loaded after home.css and borrows from it -- the arch, .lead, .band, the
   .close band, the lightbox and the "to confirm" marker -- rather than
   restyling.
   ========================================================================== */

/* ── The house, and the mural ─────────────────────────────────────────────── */
.ahero { padding-block: clamp(2.2rem, 4.5vw, 4rem) clamp(1.5rem, 3vw, 2.5rem); }
.ahero__in {
	display: grid; grid-template-columns: 1.05fr .95fr;
	gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.ahero__say h1 { margin-bottom: .34em; }
.ahero__say .lede { max-width: 44ch; }
.ahero__acts { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.9rem; }

/* The mural is a portrait; the arch stands tall over it like the niche it
   is painted in. */
.arch--mural { max-width: 25rem; margin-inline: auto; }
.arch--mural .arch__frame { aspect-ratio: 3 / 3.9; --cap: 54px; }
.arch--mural img { object-position: 50% 42%; }

/* ── How it started ───────────────────────────────────────────────────────── */
.story { padding-top: clamp(3rem, 5.5vw, 5rem); }
.story__in {
	display: grid; grid-template-columns: 1.05fr .95fr;
	gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
.story__say h2 { margin-bottom: 0; }
.story__say h2::after {
	content: ''; display: block; width: 58px; height: 2px;
	background: var(--gold); margin: .7rem 0 1.15rem;
}
.story__pic { padding-top: .6rem; }
/* The markers sit mid-sentence here; as inline-blocks they took the full
   stop with them onto the next line. */
.apage [data-todo] { display: inline; }

/* A guest's words, as the homepage sets them: on a hairline, in the display
   face, dated underneath. */
.aquote { margin: 0; padding-left: 1.3rem; border-left: 2px solid var(--line-2); }
.aquote p {
	font-family: var(--disp); font-size: var(--t-md); line-height: 1.5;
	font-variation-settings: 'opsz' 28, 'SOFT' 16;
	margin-bottom: .5rem; max-width: 44ch;
}
.aquote cite { font-style: normal; font-size: var(--t-xs); color: var(--ink-50); }
.story__say .aquote { margin-top: 2rem; }

/* ── The house, roof down ─────────────────────────────────────────────────── */
/* One gold rule down the left edge for the whole list and a short tick off
   it at each level's name -- the floor lines of a section drawing. Text
   stays left and the photographs right on every level, as the rooms page
   does, so the four read straight down. */
.levels {
	--ledge: clamp(1.5rem, 3.4vw, 3rem);
	list-style: none; margin: 0; padding: 0;
	border-left: 2px solid var(--gold);
}
.level {
	display: grid; grid-template-columns: 1fr 1fr;
	gap: clamp(1.6rem, 4vw, 3.6rem); align-items: center;
	padding: clamp(1.6rem, 3.2vw, 2.8rem) 0 clamp(1.6rem, 3.2vw, 2.8rem) var(--ledge);
}
.level + .level { border-top: 1px solid var(--line-2); }
/* The tick hangs off the rule at the name's midline, wherever the name
   ends up beside its photograph. */
.level__say h3 { position: relative; margin-bottom: .55em; }
.level__say h3::before {
	content: ''; position: absolute; top: .5em; left: calc(var(--ledge) * -1);
	width: clamp(.9rem, 2vw, 1.4rem); height: 2px;
	background: var(--gold);
}
.level__say p { font-size: var(--t-base); color: var(--ink-70); max-width: 52ch; }

.level__pic { display: block; max-width: 30rem; }
.level__pic .arch__frame { display: block; }
.level__pic img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); transition: transform .5s var(--ease); }
.level__pic:hover img { transform: scale(1.03); }

/* Each photograph's own shape: the roof and the dorm are landscape, the
   rooms portrait, the desk a tall narrow frame. */
.level--roof  .arch__frame { aspect-ratio: 4 / 3.15; --cap: 54px; }
.level--dorm  .arch__frame { aspect-ratio: 4 / 3.15; --cap: 54px; }
.level--rooms .arch__frame { aspect-ratio: 3 / 3.6;  --cap: 50px; }
.level--rooms .level__pic  { max-width: 22rem; }
.level--desk  .arch__frame { aspect-ratio: 3 / 4.2;  --cap: 46px; }
.level--desk  .level__pic  { max-width: 17rem; }

/* ── In guests' words ─────────────────────────────────────────────────────── */
.aq__in {
	display: grid; grid-template-columns: .7fr 1.3fr;
	gap: clamp(2rem, 5vw, 4rem); align-items: start;
}
.aq__say h2 { margin-bottom: 0; }
.aq__say h2::after {
	content: ''; display: block; width: 58px; height: 2px;
	background: var(--gold); margin: .7rem 0 1.15rem;
}
.aq__say > p { color: var(--ink-70); max-width: 30ch; }
.aq__chip { margin-top: 1.5rem; }
.aq__all { font: 600 var(--t-sm)/1 var(--ui); }

.quotes {
	display: grid; grid-template-columns: 1fr 1fr;
	gap: clamp(1.6rem, 3.5vw, 2.8rem) clamp(1.6rem, 3.5vw, 3rem);
	padding-top: .5rem;
}
.quotes .aquote p { font-size: var(--t-md); }

/* ── How we work ──────────────────────────────────────────────────────────── */
.work__in {
	display: grid; grid-template-columns: .8fr 1.2fr;
	gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start;
}
.work__in .lead { margin-bottom: 0; }
/* The rows the room pages use for "Good to know", in two columns. */
.work__list {
	display: grid; grid-template-columns: 1fr 1fr;
	gap: 0 clamp(1.4rem, 3vw, 2.4rem);
	margin: 0;
}
.work__list div { padding: .9rem 0 1rem; border-top: 1px solid var(--line-2); }
.work__list dt { font: 600 var(--t-sm)/1.3 var(--ui); color: var(--ink); margin-bottom: .3rem; }
.work__list dd { margin: 0; font-size: var(--t-sm); line-height: 1.55; color: var(--ink-70); }

/* ── Narrow screens ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
	.ahero__in { grid-template-columns: 1fr; gap: 2rem; }
	/* The mural leads on a phone, as the hero photograph does on the
	   homepage; the h1 stays first in the markup. */
	.ahero__pic { order: -1; }
	.arch--mural { max-width: 20rem; }
	.ahero__say .lede { max-width: 50ch; }

	.story__in { grid-template-columns: 1fr; gap: 2.4rem; }
	.story__pic { padding-top: 0; max-width: 30rem; }

	.level { grid-template-columns: 1fr; gap: 1.4rem; align-items: start; }
	.level__pic { order: -1; max-width: 22rem; }
	.level--rooms .level__pic { max-width: 18rem; }
	.level--desk  .level__pic { max-width: 15rem; }

	.aq__in { grid-template-columns: 1fr; gap: 2rem; }
	.aq__say > p { max-width: 50ch; }
	.work__in { grid-template-columns: 1fr; gap: 1.8rem; }
}

@media (max-width: 700px) {
	.quotes { grid-template-columns: 1fr; }
	.work__list { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
	.ahero__acts .btn { flex: 1 1 100%; justify-content: center; }
	.levels { --ledge: 1.1rem; }
}