/* Beaumont Grange Private Office
   Colours, fonts and spacing are set in :root below. Change them there. */

@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/cormorant-garamond-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 300; font-display: swap; src: url("fonts/cormorant-garamond-latin-300-italic.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/geist-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/geist-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/geist-latin-500-normal.woff2") format("woff2"); }

:root {
  --ivory: #F5F2EC;
  --navy: #14212B;
  --gold: #B49A68;        /* rules and ornaments only */
  --gold-deep: #7D6A45;   /* small gold text on ivory */
  --gold-light: #C9B48A;  /* small gold text on navy */
  --stone: #DCD6CB;       /* photo fallback */
  --ink-soft: #2E3A42;
  --muted: #5E5A52;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --gutter: clamp(20px, 5vw, 72px);
  --section: clamp(64px, 9vw, 128px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--ivory); color: var(--navy); font-family: var(--sans); font-weight: 400; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: var(--navy); }
a:hover { color: var(--gold-deep); }
a:focus-visible { outline: 1px solid var(--gold-deep); outline-offset: 4px; }

.skip { position: absolute; left: -9999px; top: 0; background: var(--navy); color: var(--ivory); padding: 12px 16px; z-index: 10; }
.skip:focus { left: 16px; top: 16px; }

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); }

/* Header */
.site-header { display: flex; flex-direction: column; align-items: center; gap: 28px; padding: 48px 0 36px; }
.wordmark { display: flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none; }
.wordmark__name { font-family: var(--serif); font-weight: 500; font-size: clamp(22px, 3vw, 30px); letter-spacing: 0.2em; padding-left: 0.2em; line-height: 1.1; }
.wordmark__desc { font-size: clamp(9px, 1vw, 11px); letter-spacing: 0.42em; padding-left: 0.42em; color: var(--gold-deep); }
/* Four items no longer fit on one line on a phone, so the nav wraps and
   centres rather than overflowing the gold rules. */
.nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 clamp(24px, 3.4vw, 44px); border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); padding: 0 clamp(16px, 3vw, 36px); }
.nav a { display: flex; white-space: nowrap; align-items: center; min-height: 44px; text-decoration: none; font-size: clamp(11px, 1vw, 12px); letter-spacing: 0.2em; text-transform: uppercase; }

/* Photographs. Both bands sit outside .wrap, so they run the full width of
   the viewport; the stone colour shows if an image is ever missing. The set
   runs morning (office) to evening (dining), with the afternoon desk detail
   in the About section between them. */
.photo { background-color: var(--stone); background-size: cover; background-position: center; }
.photo--office { height: clamp(380px, 48vw, 680px); background-image: url("images/office.jpg"); }
.photo--dining { height: clamp(320px, 38vw, 540px); background-image: url("images/dining.jpg"); }

/* Hero */
.hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; padding: var(--section) 0; }
.hero h1 { margin: 0; font-family: var(--serif); font-weight: 300; font-size: clamp(44px, 6.4vw, 96px); line-height: 1.02; }
.hero p { margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(19px, 2vw, 24px); line-height: 1.4; color: var(--muted); max-width: 640px; }

.rule { height: 1px; background: var(--gold); border: 0; margin: 0; }

/* About */
/* About: prose ranged left with the afternoon desk detail alongside. The
   centred treatment is kept for the hero, the statement and the arrangements,
   so this section reads as the editorial break in the rhythm. */
.about { max-width: 1100px; margin: 0 auto; padding: var(--section) 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: clamp(36px, 5vw, 76px); align-items: center; }
.about__text { display: flex; flex-direction: column; gap: 24px; }
.about h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.1; }
.about p { margin: 0; font-size: clamp(15px, 1.3vw, 17px); line-height: 1.8; font-weight: 300; color: var(--ink-soft); }
.about .lede { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.7; color: var(--navy); }
.about__image { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; box-shadow: 0 0 0 1px var(--gold); }
@media (max-width: 860px) {
  .about { grid-template-columns: 1fr; gap: 36px; }
}

/* Small capitalised section labels. --gold-deep on ivory, --gold-light on navy. */
.label { margin: 0; font-size: clamp(10px, 1vw, 11px); letter-spacing: 0.32em; padding-left: 0.32em; text-transform: uppercase; color: var(--gold-deep); }
.label--light { color: var(--gold-light); }

/* Editorial statement: the one full-bleed navy band in the page, so it reads
   as a pause between the About copy and the arrangements. */
.statement { background: var(--navy); color: var(--ivory); }
.statement .wrap { max-width: 860px; padding-top: var(--section); padding-bottom: var(--section); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; }
.statement__quote { margin: 0; max-width: 720px; }
.statement__quote p { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(24px, 3vw, 38px); line-height: 1.35; }
.statement__note { margin: 0; max-width: 560px; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.8; font-weight: 300; color: #C2C7CB; }

/* Arrangements: three columns on the desktop, stacked with hairline rules on
   a phone. Numerals are ornamental, so they are aria-hidden in the markup. */
.arrangements { padding: var(--section) 0; }
.arrangements__intro { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; margin-bottom: clamp(48px, 6vw, 80px); }
.arrangements__intro h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.1; }
.arrangement-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(32px, 4vw, 56px); }
.arrangement { display: flex; flex-direction: column; gap: 14px; }
.arrangement__num { font-family: var(--serif); font-size: 15px; letter-spacing: 0.1em; color: var(--gold-deep); }
.arrangement h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 2.1vw, 27px); line-height: 1.2; }
.arrangement p { margin: 0; font-size: 15px; line-height: 1.8; font-weight: 300; color: var(--ink-soft); }
@media (max-width: 860px) {
  .arrangement-list { grid-template-columns: 1fr; gap: 0; }
  .arrangement { padding: 32px 0; border-top: 1px solid rgba(180, 154, 104, 0.4); }
  .arrangement:first-child { border-top: 0; padding-top: 0; }
}

/* Charlotte: portrait and text side by side, stacking on a narrow screen. */
.profile { padding: var(--section) 0; max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.profile__portrait { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; box-shadow: 0 0 0 1px var(--gold); }
.profile__text { display: flex; flex-direction: column; gap: 20px; }
.profile__text h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.1; }
.profile__role { margin: 0; font-size: clamp(13px, 1.1vw, 14px); letter-spacing: 0.08em; color: var(--muted); }
.profile__text p { margin: 0; font-size: clamp(15px, 1.3vw, 17px); line-height: 1.8; font-weight: 300; color: var(--ink-soft); }
.profile__contact { margin: 0; }
.profile__contact a { font-size: 16px; }
@media (max-width: 860px) {
  .profile { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .profile__portrait { max-width: 280px; }
  .profile__text { align-items: center; }
}

/* Footer */
.site-footer { background: var(--navy); color: var(--ivory); }
.site-footer .wrap { padding-top: clamp(64px, 8vw, 112px); padding-bottom: 40px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.monogram { width: 64px; height: 64px; margin-bottom: 20px; }
.eyebrow { font-size: 12px; letter-spacing: 0.32em; color: var(--gold-light); margin: 0 0 8px; }
.contact-name { font-family: var(--serif); font-size: clamp(26px, 2.6vw, 30px); margin: 0; line-height: 1.2; }
.contact-role { font-size: 14px; color: #C2C7CB; margin: 0; }
.site-footer a { color: #D9C69F; font-size: 16px; padding: 10px 0; display: inline-block; }
.site-footer a:hover { color: #FFFFFF; }
.legal { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(180, 154, 104, 0.35); font-size: 12px; color: #9AA3A9; }
@media (max-width: 640px) { .legal { flex-direction: column; align-items: center; } }