/* ============================================================================
   Rooftop café.

   No food photographs and no confirmed menu yet, so the page leans on what the
   roof is for: the view. One drawing of the fort, shown four times across the
   day in four lights, carries the page; everything around it stays quiet.
   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 them.
   ========================================================================== */

/* ── The roof, facing the fort ────────────────────────────────────────────── */
.chero { padding-block: clamp(2.2rem, 4.5vw, 4rem) clamp(.5rem, 1.5vw, 1.2rem); }
.chero__top {
	display: grid; grid-template-columns: 1.05fr .95fr;
	gap: clamp(1.5rem, 4.5vw, 4.5rem); align-items: end;
	margin-bottom: clamp(1.8rem, 3.6vw, 3rem);
}
.chero h1 { margin: 0; max-width: 12ch; }
.chero__say .lede { max-width: 46ch; }
.chero__acts { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }
.chero__hours { margin: 1.15rem 0 0; font-size: var(--t-sm); color: var(--ink-70); }

/* The wide opening in the parapet. The cap is taller than anywhere else on
   the site because the arch is wider than anywhere else; as a mask it only
   ever stretches sideways, so it reads as a broad cusped arch, not a dome. */
.arch--pano .arch__frame { aspect-ratio: 2.1 / 1; --cap: clamp(52px, 7vw, 88px); }
.arch--pano img { object-position: 50% 28%; }

/* ── The day on the roof ──────────────────────────────────────────────────── */
/* Four windows on one view. Each hour sets the light for the drawing inside
   it; the SVG takes every colour from these properties, and custom
   properties inherit through <use>. */
/* The sun comes up behind the fort, so in the morning the wall stands in its
   own shade against a bright sky; by the evening the sun is on its face. */
.hour--morning {
	--sky: #D6E1E6; --keep: #CDB690; --wall: #C4A273; --wall-sh: #B08E62;
	--hill: #DCC6A0; --town: #C7AF86; --coping: #BFA071; --parapet: #D1B584;
	--wire: #8A7A5A; --dawn: 1;
}
.hour--afternoon {
	--sky: #C8DDE5; --keep: #E2BD74; --wall: #D9A441; --wall-sh: #C08C30;
	--hill: #E7CE9A; --town: #CDB079; --coping: #C49D5B; --parapet: #D1AB68;
	--wire: #6D5A3A;
}
.hour--dusk {
	--sky: #EBC3B0; --keep: #DB9870; --wall: #CF7443; --wall-sh: #B9633A;
	--hill: #C58E70; --town: #9C6C57; --coping: #8F5E43; --parapet: #9E6A4C;
	--wire: #5A3A2A; --bulbs: .8;
}
.hour--night {
	--sky: #192A44; --keep: #8E7042; --wall: #D9A441; --wall-sh: #B98730;
	--hill: #22344F; --town: #1B2B45; --coping: #0E1829; --parapet: #132036;
	--wire: #3A4A66; --lit: 1; --bulbs: 1;
}

.day {
	--hgap: clamp(1rem, 2.4vw, 2.2rem);
	display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--hgap);
	list-style: none; margin: 0; padding: 0;
}
.hour__view { aspect-ratio: 4 / 5; --cap: 40px; margin-bottom: 1.4rem; }
.hour__view svg { width: 100%; height: 100%; }

/* The day as a ruler: one gold line runs under all four windows, through
   the gaps between them, with a tick where each hour begins. */
.hour__say { position: relative; padding-top: 1.1rem; }
.hour__say::before {
	content: ''; position: absolute; top: 0; left: 0; right: calc(var(--hgap) * -1);
	height: 2px; background: var(--gold);
}
.hour:last-child .hour__say::before { right: 0; }
.hour__say::after {
	content: ''; position: absolute; top: -5px; left: 0;
	width: 2px; height: 12px; background: var(--gold);
}
.hour h3 { margin-bottom: .4em; }
.hour p { font-size: var(--t-sm); color: var(--ink-70); margin: 0; }
.hour p b { display: block; font-weight: 600; color: var(--ink); margin-bottom: .2rem; }

/* A guest's words, as the homepage and the about page set them. */
.cquote { margin: 0; padding-left: 1.3rem; border-left: 2px solid var(--line-2); }
.cquote 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: 46ch;
}
.cquote cite { font-style: normal; font-size: var(--t-xs); color: var(--ink-50); }

/* The review that says what the four windows say, under them. */
.cday__coda { margin-top: clamp(2.4rem, 4.5vw, 3.6rem); border-left-color: var(--gold); }
.cday__coda p { font-size: var(--t-lg); max-width: 40ch; }

/* ── Before you come up ───────────────────────────────────────────────────── */
.cvisit__in {
	display: grid; grid-template-columns: .8fr 1.2fr;
	gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start;
}
.cvisit__say h2,
.cwords__say h2 { margin-bottom: 0; }
.cvisit__say h2::after,
.cwords__say h2::after {
	content: ''; display: block; width: 58px; height: 2px;
	background: var(--gold); margin: .7rem 0 1.15rem;
}
.cvisit__say p { color: var(--ink-70); max-width: 34ch; margin-bottom: 1.6rem; }

.cvisit__list {
	display: grid; grid-template-columns: 1fr 1fr;
	gap: 0 clamp(1.4rem, 3vw, 2.4rem); margin: 0;
}
.cvisit__list div { padding: .9rem 0 1rem; border-top: 1px solid var(--line-2); }
.cvisit__list dt { font: 600 var(--t-sm)/1.3 var(--ui); color: var(--ink); margin-bottom: .3rem; }
.cvisit__list dd { margin: 0; font-size: var(--t-sm); line-height: 1.55; color: var(--ink-70); }
/* The markers sit mid-sentence; as inline-blocks they took the full stop
   with them onto the next line. */
.cpage [data-todo] { display: inline; }

/* ── The menu, once there is one ──────────────────────────────────────────── */
.cmenu__cols { columns: 3 17rem; column-gap: clamp(1.8rem, 4vw, 3.4rem); }
.cmenu__sec { break-inside: avoid; margin-bottom: 2.2rem; }
.cmenu__sec h3 {
	font-size: var(--t-lg); margin-bottom: .5rem; padding-bottom: .5rem;
	border-bottom: 1px solid var(--line-2);
}
.cmenu__sec ul { list-style: none; margin: 0; padding: 0; }
.cmenu__sec li {
	display: flex; align-items: baseline; gap: .5rem;
	padding: .38rem 0; font-size: var(--t-sm);
}
/* A dotted leader from the dish to its price, as on a printed menu. */
.cmenu__sec li i { flex: 1; border-bottom: 1px dotted var(--line-2); transform: translateY(-.28em); }
.cmenu__sec .rs { font-weight: 600; }

/* ── In guests' words ─────────────────────────────────────────────────────── */
.cwords__in {
	display: grid; grid-template-columns: 1.25fr .75fr;
	gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
.cwords__say > p { color: var(--ink-70); max-width: 52ch; }
.cwords__quotes { display: grid; gap: 1.7rem; margin: 2rem 0 0; }
.cwords__chip { margin-top: 2rem; }

.cwords__pic { max-width: 23rem; justify-self: end; width: 100%; }
.cwords__lb { display: block; }
.cwords__pic .arch__frame { aspect-ratio: 3 / 4; --cap: 50px; }
.cwords__pic img { object-position: 50% 40%; transition: transform .5s var(--ease); }
.cwords__lb:hover img { transform: scale(1.03); }

/* ── Close ────────────────────────────────────────────────────────────────── */
/* On the page's own ground when the band above it is tinted (see the
   template); otherwise the two ran together as one block. */
.close--plain { background: var(--sand); }
/* The mandala is cut off at the band's lower edge; on a tint that edge is the
   band's own, but on the page's ground it showed as a line through it. */
.close--plain::before { display: none; }

/* ── Narrow screens ───────────────────────────────────────────────────────── */
@media (max-width: 1040px) {
	.day { grid-template-columns: repeat(2, 1fr); row-gap: 2.6rem; }
	/* Two to a row: the ruler runs through each pair and stops at its end. */
	.hour:nth-child(2n) .hour__say::before { right: 0; }
	.hour__view { max-width: 17rem; }
}

@media (max-width: 900px) {
	/* The view leads on a phone, as the hero photograph does on the homepage
	   and the about page; the h1 stays first in the markup. */
	.chero .wrap { display: flex; flex-direction: column; }
	.chero .arch--pano { order: -1; margin-bottom: 1.6rem; }
	.chero__top { grid-template-columns: 1fr; gap: 1.1rem; margin-bottom: 0; }
	.chero h1 { max-width: 16ch; }
	.arch--pano .arch__frame { aspect-ratio: 4 / 3.1; }
	.arch--pano img { object-position: 50% 40%; }

	.cvisit__in { grid-template-columns: 1fr; gap: 1.6rem; }
	.cvisit__say p { max-width: 50ch; }

	.cwords__in { grid-template-columns: 1fr; gap: 2.4rem; }
	.cwords__pic { justify-self: start; max-width: 20rem; }
}

/* On a phone the day reads down the screen: a small window beside each
   hour, and the ruler turns to run down the left edge of the text. */
@media (max-width: 640px) {
	.day { grid-template-columns: 1fr; row-gap: 0; }
	.hour {
		display: grid; grid-template-columns: 6.6rem 1fr;
		gap: 1.1rem; align-items: center;
		padding: 1rem 0;
	}
	.hour__view { margin: 0; --cap: 26px; }
	.hour__say { padding: .2rem 0 .2rem 1rem; }
	.hour__say::before,
	.hour:nth-child(2n) .hour__say::before,
	.hour:last-child .hour__say::before { top: 0; bottom: 0; left: 0; right: auto; width: 2px; height: auto; }
	.hour__say::after { top: .7em; left: 0; width: .7rem; height: 2px; }

	.cvisit__list { grid-template-columns: 1fr; }
	.chero__acts .btn { flex: 1 1 100%; justify-content: center; }
}