/* ROYAL COURT — the editorial and practical surfaces.
   Same ground, same two registers as Our Homes; only the rhythm changes. */

.page { padding: 0 0 clamp(50px, 8vh, 110px); }
.page section[id], .page .faq-group { scroll-margin-top: 124px; }
.page-head { padding: clamp(34px, 6vh, 80px) var(--bumper) clamp(26px, 4vh, 48px); }
.page-head h1 { margin: 0; font: 400 clamp(46px, 6.4vw, 104px)/.9 Georgia, serif; letter-spacing: -.05em; }
.page-head p { max-width: 42ch; margin: 20px 0 0; font: 17px/1.5 Georgia, serif; color: var(--ink-2); }
.kick { display: block; margin-bottom: 16px; font: 9px/1.4 Arial, sans-serif;
  letter-spacing: .2em; color: var(--flame); text-transform: uppercase; }

/* local navigation: anchors, sticky under the bar, never a second menu */
.loc-nav { position: sticky; top: var(--bar-h); z-index: 50; display: flex; gap: clamp(14px, 2.4vw, 34px);
  padding: 14px var(--bumper); overflow-x: auto; scrollbar-width: none;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(14px); border-block: 1px solid var(--hair); }
.loc-nav::-webkit-scrollbar { display: none; }
.loc-nav a { font: 8px/1 Arial, sans-serif; letter-spacing: .18em; white-space: nowrap;
  padding: 5px 0; border-bottom: 1px solid transparent; color: var(--ink-2); }
.loc-nav a:hover { border-color: currentColor; color: var(--ink); }

/* editorial bands: copy on one side, photography running to the edge */
.band { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(12px, 2vw, 32px);
  align-items: start; padding: clamp(46px, 8vh, 110px) var(--bumper); }
.band.alt { background: #e9e0d2; }
.band-copy { grid-column: 1 / 6; }
.band.alt .band-copy { grid-column: 8 / 13; }
.band h2 { margin: 0 0 20px; font: 400 clamp(26px, 3vw, 46px)/1.02 Georgia, serif; letter-spacing: -.04em; }
.band p { margin: 0 0 16px; max-width: 46ch; font: 16px/1.6 Georgia, serif; color: var(--ink-2); }
.band p.fact { font-size: 14px; color: var(--ink-3); }
.band-img { margin: 0; grid-column: 7 / 13; }
.band.alt .band-img { grid-column: 1 / 6; }
.band-img img { aspect-ratio: 4 / 3; filter: saturate(.86) contrast(1.03); }
.band-img.tall img { aspect-ratio: 3 / 4; }
.band-img.wide img { aspect-ratio: 16 / 9; }
.band-img.map { grid-column: 6 / 13; }
.band-img.map img { aspect-ratio: 737 / 377; height: auto; object-fit: contain; }
.property-intro { grid-column: 1 / -1; }
.property-values { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin-top: 28px; }
.property-values dd { line-height: 1.6; }
.property-map { grid-column: 1 / -1; width: 100%; max-width: 1100px; margin: 24px auto 0; }
.property-map .mk:hover { box-shadow: 0 8px 26px rgba(70,52,34,.3); }
.transport-highlights dd { line-height: 1.6; }
.band-img + .band-img { margin-top: clamp(14px, 2vw, 26px); grid-column: 8 / 12; }
.band.alt .band-img + .band-img { grid-column: 2 / 6; }

.plain { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 8px; }
.plain li { font: 14px/1.5 Georgia, serif; color: var(--ink-2);
  padding-top: 8px; border-top: 1px solid var(--hair); }
.dist { margin: 0 0 18px; display: grid; gap: 12px; }
.dist div { display: grid; gap: 4px; padding-top: 11px; border-top: 1px solid var(--hair); }
.dist dt { font: 8px/1.3 Arial, sans-serif; letter-spacing: .16em; color: var(--ink-3); }
.dist dd { margin: 0; font: 15px/1.35 Georgia, serif; }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 18px; }
.steps li { counter-increment: s; display: grid; gap: 5px; padding-top: 12px; border-top: 1px solid var(--hair); }
.steps b { font: 400 17px/1.2 Georgia, serif; }
.steps b::before { content: counter(s, decimal-leading-zero) " "; color: var(--ink-3);
  font: 8px/1 Arial, sans-serif; letter-spacing: .18em; margin-right: 8px; vertical-align: 3px; }
.steps span { font: 15px/1.55 Georgia, serif; color: var(--ink-2); }
.linkish { padding-bottom: 3px; border-bottom: 1px solid; font: inherit; color: inherit; }

/* FAQ: grouping, not search. Nine houses' worth of questions does not need one. */
.faq { padding: clamp(34px, 5vh, 60px) var(--bumper) 0; display: grid; gap: clamp(34px, 5vh, 64px); }
.faq-group h2 { margin: 0 0 6px; font: 400 clamp(22px, 2.4vw, 34px)/1 Georgia, serif; letter-spacing: -.03em; }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary { padding: 17px 0; cursor: pointer; list-style: none;
  font: 16px/1.4 Georgia, serif; display: flex; justify-content: space-between; gap: 20px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 18px/1 Georgia, serif; color: var(--ink-3); }
.faq details[open] summary::after { content: "\2013"; }
.faq .ans { padding: 0 0 18px; }
.faq .ans p { margin: 0; max-width: 62ch; font: 15px/1.6 Georgia, serif; color: var(--ink-2); }

/* Rome: a small collection, never a feed */
.rome-list { display: grid; gap: clamp(30px, 5vh, 64px); padding: clamp(30px, 5vh, 60px) var(--bumper) 0; }
.rome-item { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(20px, 4vw, 60px); align-items: center; }
.rome-item figure { margin: 0; }
.rome-item img { aspect-ratio: 4 / 3; filter: saturate(.86) contrast(1.03); }
.rome-item h2 { margin: 0 0 12px; font: 400 clamp(24px, 3vw, 42px)/1.04 Georgia, serif; letter-spacing: -.04em; }
.rome-item p { margin: 0; max-width: 44ch; font: 16px/1.55 Georgia, serif; color: var(--ink-2); }
.rome-item:hover img { filter: saturate(.95) contrast(1.03); }

.article { max-width: none; }
.art-head { padding: clamp(34px, 6vh, 80px) var(--bumper) clamp(20px, 3vh, 32px); max-width: 68ch; }
.art-head h1 { margin: 0; font: 400 clamp(34px, 4.6vw, 66px)/1.02 Georgia, serif; letter-spacing: -.045em; }
.art-meta { margin: 18px 0 0; font: 8px/1.5 Arial, sans-serif; letter-spacing: .16em; color: var(--ink-3); }
.art-meta a { border-bottom: 1px solid var(--hair); }
.art-hero { margin: 0 0 clamp(26px, 4vh, 46px); padding: 0 var(--bumper); }
.art-hero img { aspect-ratio: 16 / 9; filter: saturate(.86) contrast(1.03); }
.art-body { padding: 0 var(--bumper); max-width: 68ch; display: grid; gap: 18px; }
.art-body p { margin: 0; font: 17px/1.65 Georgia, serif; color: var(--ink-2); }
.art-aside { margin: clamp(34px, 5vh, 60px) var(--bumper) 0; padding: clamp(20px, 3vh, 28px);
  background: #e9e0d2; display: grid; gap: 10px; justify-items: start; max-width: 42ch; }
.art-aside p { margin: 0; font: 15px/1.4 Georgia, serif; }

/* contact */
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 26px);
  padding: clamp(24px, 4vh, 44px) var(--bumper) 0; }
.contact-card { display: grid; gap: 7px; padding: clamp(20px, 3vh, 30px); background: #e9e0d2;
  transition: background .25s ease, color .25s ease; }
.contact-card:hover { background: var(--ink); color: var(--paper); }
.contact-card span { font: 8px/1 Arial, sans-serif; letter-spacing: .2em; color: var(--ink-3); }
.contact-card:hover span, .contact-card:hover em { color: color-mix(in srgb, var(--paper) 62%, transparent); }
.contact-card b { font: 400 clamp(19px, 1.8vw, 26px)/1.1 Georgia, serif; letter-spacing: -.02em; }
.contact-card em { font: 13px/1.4 Georgia, serif; font-style: normal; color: var(--ink-3); }

.cta-band { display: grid; justify-items: center; gap: 22px; text-align: center;
  padding: clamp(50px, 9vh, 120px) var(--bumper); background: var(--ink); color: var(--paper); }
.cta-band h2 { margin: 0; font: 400 clamp(28px, 4vw, 58px)/1 Georgia, serif; letter-spacing: -.04em; }
.cta-band .pill-book { background: var(--paper); color: var(--ink); border-color: var(--paper); min-height: 46px; padding: 0 26px; }
.cta-band .pill-book:hover { background: var(--flame); border-color: var(--flame); color: #fff; }

/* the contact sheet, on every surface */
.sheet { position: fixed; z-index: 85; inset: 0; display: grid; align-items: start;
  background: rgba(33,31,26,.32); backdrop-filter: blur(3px); }
.sheet-in { position: relative; background: var(--paper);
  padding: clamp(26px, 4vh, 46px) var(--bumper) clamp(24px, 4vh, 40px);
  box-shadow: 0 20px 60px rgba(70,52,34,.22); animation: drop .45s cubic-bezier(.2,.8,.3,1); }
.sheet-title { margin: 0 0 22px; font: 400 clamp(24px, 3vw, 40px)/1 Georgia, serif; letter-spacing: -.035em; }
.sheet-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 2vw, 22px); }
.sheet-act { display: grid; gap: 7px; padding: clamp(16px, 2.4vh, 24px); background: #e9e0d2;
  transition: background .25s ease, color .25s ease; }
.sheet-act:hover { background: var(--ink); color: var(--paper); }
.sheet-act b { font: 8px/1 Arial, sans-serif; letter-spacing: .2em; font-weight: 400; }
.sheet-act span { font: 400 clamp(17px, 1.6vw, 23px)/1.1 Georgia, serif; letter-spacing: -.02em; }
.sheet-more { display: inline-block; margin-top: 22px; padding-bottom: 4px; border-bottom: 1px solid;
  font: 8px/1 Arial, sans-serif; letter-spacing: .18em; }
.sheet-close { position: absolute; right: var(--bumper); top: clamp(22px, 3vh, 32px);
  font: 8px/1 Arial, sans-serif; letter-spacing: .18em; color: var(--ink-3); }

/* footer */
.rc-foot { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: clamp(20px, 3vw, 50px);
  padding: clamp(50px, 8vh, 100px) var(--bumper) clamp(26px, 4vh, 40px);
  background: #17140f; color: #ded2c1; }
.rc-foot > div { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.rc-foot span { margin-bottom: 8px; font: 8px/1 Arial, sans-serif; letter-spacing: .2em; color: #9a907e; }
.rc-foot > div > span { color: #9a907e; }
.rc-foot a { font: 14px/1.4 Georgia, serif; }
.rc-foot a:hover { color: var(--paper); }
.foot-brand p { margin: 0; font: 400 34px/1 Georgia, serif; letter-spacing: -.03em; color: var(--paper); }
.foot-brand small { max-width: 34ch; font: 13px/1.5 Georgia, serif; }
.foot-legal { grid-column: 1 / -1; margin: clamp(30px, 5vh, 60px) 0 0; padding-top: 22px;
  border-top: 1px solid rgba(241,234,223,.16); font: 8px/1 Arial, sans-serif;
  letter-spacing: .18em; color: #9a907e; }
.rc-foot .ph { text-decoration: underline dotted rgba(200,85,47,.6); text-underline-offset: 4px; }

@media (max-width: 860px) {
  .property-values { grid-template-columns: 1fr; gap: 18px; }
  .property-map { margin-inline: 0; width: 100%; }
  .band { grid-template-columns: 1fr; gap: 26px; }
  .band-copy, .band.alt .band-copy, .band-img, .band.alt .band-img,
  .band-img + .band-img, .band.alt .band-img + .band-img, .band-img.map { grid-column: 1; }
  .band-img + .band-img { margin-top: 0; }
  .rome-item { grid-template-columns: 1fr; gap: 18px; }
  .contact-grid, .sheet-row { grid-template-columns: 1fr; }
  .rc-foot { grid-template-columns: 1fr 1fr; gap: 30px; }
  .foot-brand { grid-column: 1 / -1; }
  .loc-nav { top: var(--bar-h); }
}
