/* Layout: the Ince Castle logo sits alone on white, then the house it depicts fills the screen; below, generous photographs alternate with short passages, and two coloured bands (drawing-room green, wallpaper celadon) hold the history and the stays. */
/* Light by default; dark for visitors whose device is set to dark mode. */
:root {
  --paper: #FFFFFF;
  --stone: #F1F0EB;        /* limestone steps */
  --ink: #23292A;
  --muted: #646B68;
  --line: #74807A;
  --logo-grey: #6E7570;    /* logo tint */
  --btn: #213B2F;
  --drop: #213B2F;
  --foot-bg: #FFFFFF;
  --foot-ink: #23292A;
  --rule: #DEDDD6;
  --green: #213B2F;        /* drawing-room velvet */
  --on-green: #F2F1EA;
  --celadon: #D5E2D6;      /* Chinese wallpaper ground */
  --brass: #B48A3C;        /* used for dates only */
  --display: "Libre Caslon Display", "Big Caslon", Georgia, serif;
  --text: "Libre Caslon Text", "Iowan Old Style", Georgia, serif;
  --measure: 34rem;
  --wide: 84rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --paper: #121614; --stone: #191E1B; --ink: #E9E8E1; --muted: #A4ABA6; --line: #A8B3AD; --rule: #2C3430; --green: #1B3326; --on-green: #ECEBE3; --celadon: #21332A; --brass: #D3AA5C; --btn: #D3AA5C; --drop: #D3AA5C; --foot-bg: #1B3326; --foot-ink: #ECEBE3; color-scheme: dark; }
  :root:not([data-theme="light"]) .logo-light { display: none; }
  :root:not([data-theme="light"]) .logo-dark { display: block; }
}
:root[data-theme="dark"] { --paper: #121614; --stone: #191E1B; --ink: #E9E8E1; --muted: #A4ABA6; --line: #A8B3AD; --rule: #2C3430; --green: #1B3326; --on-green: #ECEBE3; --celadon: #21332A; --brass: #D3AA5C; --btn: #D3AA5C; --drop: #D3AA5C; --foot-bg: #1B3326; --foot-ink: #ECEBE3; color-scheme: dark; }
:root[data-theme="dark"] .logo-light { display: none; }
:root[data-theme="dark"] .logo-dark { display: block; }

* { box-sizing: border-box; }
body { background: var(--paper); color: var(--ink); font-family: var(--text); font-size: 1.05rem; line-height: 1.75; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .25em; text-decoration-thickness: 1px; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.12; margin: 0; text-wrap: balance; }
p { margin: 0; }
figure { margin: 0; }
figcaption { font-size: .82rem; color: var(--muted); margin-top: .6rem; font-style: italic; }

.wrap { max-width: var(--wide); margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
@media (min-width: 760px) { .wrap { padding-left: max(48px, env(safe-area-inset-left, 0px)); padding-right: max(48px, env(safe-area-inset-right, 0px)); } }
.bleed { padding-left: max(0px, env(safe-area-inset-left, 0px)); padding-right: max(0px, env(safe-area-inset-right, 0px)); }

/* Tracked capitals belong to the logo's lettering; they are used only for the logo, the menu and small place labels. */
.caps { font-family: var(--text); text-transform: uppercase; letter-spacing: .22em; font-size: .74rem; }

/* Masthead */
.masthead .wrap { display: grid; justify-items: center; gap: 1.4rem; padding-block: 2rem 1.4rem; }
/* The logo file is used unaltered. The browser tints it: the image is "lightened" over a grey ground,
   so its black lines show as grey and its white stays white. */
.logo { display: block; line-height: 0; }
.logo-light { display: block; background: var(--logo-grey); isolation: isolate; }
.logo-light img { mix-blend-mode: lighten; }
.logo-dark { display: none; opacity: .88; }
.logo img { width: clamp(140px, 15vw, 180px); height: auto; }
.menu { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 2.2rem; border-top: 1px solid var(--rule); padding-top: 1.3rem; width: 100%; }
.menu a { text-decoration: none; color: var(--ink); }
.menu a:hover { color: var(--line); }


/* Front of the house */
.front img { width: 100%; aspect-ratio: 1.9 / 1; object-fit: cover; object-position: 50% 30%; }
.front figcaption { text-align: center; }

.welcome { padding-block: 6rem 6.5rem; display: grid; justify-items: center; gap: 2.4rem; text-align: center; }
.welcome h1 { font-size: clamp(2rem, 4.6vw, 3.6rem); max-width: 22ch; }
.welcome .cols { display: grid; gap: 1.4rem; text-align: left; max-width: 58rem; }
@media (min-width: 820px) { .welcome .cols { grid-template-columns: 1fr 1fr; gap: 3.5rem; } }
.welcome .cols p:first-child::first-letter { font-family: var(--display); float: left; font-size: 3.6em; line-height: .8; padding: .08em .1em 0 0; color: var(--drop); }

/* The house: rooms */
.rooms { padding-block: 0 7rem; display: grid; gap: 3rem; }
.section-head { display: grid; gap: .9rem; max-width: var(--measure); }
.section-head h2 { font-size: clamp(2rem, 4vw, 3.1rem); }
.section-head p { color: var(--muted); }
.room-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.room-grid figure { min-width: 0; }
.room-grid img { width: 100%; object-fit: cover; }
.r-stair { grid-row: span 2; }
.r-stair img { aspect-ratio: 2 / 3; height: 100%; }
.r-draw img, .r-dine img { aspect-ratio: 3 / 2; }
.r-lib img, .r-bed img { aspect-ratio: 4 / 5; }
.r-draw { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .room-grid { grid-template-columns: 5fr 7fr 4fr; grid-template-rows: auto auto; }
  .r-stair { grid-column: 1; grid-row: 1 / span 2; }
  .r-draw { grid-column: 2 / span 2; grid-row: 1; }
  .r-dine { grid-column: 2; grid-row: 2; }
  .r-lib { grid-column: 3; grid-row: 2; }
  .r-lib img { aspect-ratio: auto; height: 100%; }
  .r-bed { display: none; }
}
.more { font-style: italic; }

/* History band */
.history { background: var(--green); color: var(--on-green); }
.history .wrap { padding-block: 6rem; display: grid; gap: 3.5rem; }
.history-top { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .history-top { grid-template-columns: 1fr 1fr; align-items: end; } }
.history h2 { font-size: clamp(2rem, 4vw, 3.1rem); max-width: 16ch; }
.history .lede { color: color-mix(in srgb, var(--on-green) 82%, transparent); max-width: var(--measure); }
.timeline-scroller { overflow-x: auto; scrollbar-width: thin; padding-bottom: .6rem; }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(13.5rem, 1fr); }
.timeline li { border-top: 1px solid color-mix(in srgb, var(--on-green) 30%, transparent); padding: 1.3rem 1.6rem 0 0; position: relative; }
.timeline li::before { content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; background: var(--brass); transform: rotate(45deg); }
.timeline .year { font-family: var(--display); font-size: 2.6rem; line-height: 1; color: var(--brass); display: block; margin-bottom: .7rem; }
.timeline p { font-size: .93rem; line-height: 1.6; color: color-mix(in srgb, var(--on-green) 84%, transparent); max-width: 23ch; }
.history-foot { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .history-foot { grid-template-columns: 1fr 1fr; align-items: center; } }
.legend { font-family: var(--display); font-size: clamp(1.3rem, 2.3vw, 1.75rem); line-height: 1.35; max-width: 30ch; }
.legend span { display: block; font-family: var(--text); font-size: .9rem; margin-top: .9rem; color: color-mix(in srgb, var(--on-green) 70%, transparent); font-style: italic; }
.history-foot img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* Full-width interlude */
.interlude img { width: 100%; aspect-ratio: 2.4 / 1; object-fit: cover; }
.interlude figcaption { text-align: center; }

/* Estate: land and table */
.estate { padding-block: 7rem; display: grid; gap: 5rem; }
@media (min-width: 900px) { .estate { grid-template-columns: 1fr 1fr; gap: 4rem; } .estate .table-col { margin-top: 9rem; } }
.estate article { display: grid; gap: 1.4rem; align-content: start; }
.estate h2 { font-size: clamp(2rem, 4vw, 3.1rem); }
.estate p { max-width: var(--measure); }
.estate img { width: 100%; object-fit: cover; }
.land-img { aspect-ratio: 4 / 5; }
.table-pair { display: grid; grid-template-columns: 3fr 2fr; gap: 14px; align-items: end; }
.table-pair img:first-child { aspect-ratio: 4 / 5; }
.table-pair img:last-child { aspect-ratio: 3 / 4; }

/* Gardens */
.gardens { background: var(--stone); }
.gardens .wrap { padding-block: 7rem; display: grid; gap: 3.5rem; }
.garden-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.garden-grid img { width: 100%; height: 100%; object-fit: cover; }
.g-daff { grid-row: span 2; }
.g-daff img { aspect-ratio: 9 / 16; }
.g-walk img, .g-shell img, .g-tower img, .g-fri img { aspect-ratio: 1 / 1; }
@media (min-width: 900px) {
  .garden-grid { grid-template-columns: 3fr 4fr 3fr 3fr; grid-template-rows: 1fr 1fr; }
  .g-daff { grid-column: 1; grid-row: 1 / span 2; }
  .g-walk { grid-column: 2; grid-row: 1 / span 2; }
  .g-walk img { aspect-ratio: auto; }
  .g-daff img { aspect-ratio: auto; }
}
.garden-text { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .garden-text { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; } }
.open-days { border: 1px solid var(--line); padding: 2rem; display: grid; gap: .8rem; background: var(--paper); }
.open-days h3 { font-size: 1.7rem; }
.open-days p { color: var(--muted); font-size: .97rem; }
.btn { display: inline-block; justify-self: start; font-family: var(--text); text-transform: uppercase; letter-spacing: .18em; font-size: .72rem; color: var(--paper); background: var(--btn); padding: .95rem 1.5rem; text-decoration: none; border: 0; cursor: pointer; margin-top: .4rem; }
.btn:hover { background: var(--ink); color: var(--paper); }

/* Stay */
.stay { background: var(--celadon); }
.stay .wrap { padding-block: 7rem; display: grid; gap: 3.5rem; }
.barton { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .barton { grid-template-columns: 7fr 5fr; align-items: center; gap: 4rem; } }
.barton-imgs { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; }
.barton-imgs img { width: 100%; height: 100%; object-fit: cover; }
.barton-imgs .main { grid-row: span 2; aspect-ratio: 4 / 5; }
.barton-imgs img:not(.main) { aspect-ratio: 1 / 1; }
.barton-text { display: grid; gap: 1.2rem; max-width: var(--measure); }
.barton-text h3 { font-size: clamp(2rem, 3.6vw, 2.8rem); }
.facts { list-style: none; margin: 0; padding: 1rem 0; border-block: 1px solid color-mix(in srgb, var(--ink) 20%, transparent); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem 1rem; font-size: .95rem; }
.cottages { display: grid; gap: 1.5rem; border-top: 1px solid color-mix(in srgb, var(--ink) 20%, transparent); padding-top: 2rem; }
@media (min-width: 700px) { .cottages { grid-template-columns: 1fr 1fr 2fr; } }
.cottages h3 { font-size: 1.5rem; }
.cottages p { font-size: .95rem; color: var(--muted); }

/* Journal */
.journal { padding-block: 7rem; display: grid; gap: 3rem; }
.journal-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 1rem; }
.entries { list-style: none; margin: 0; padding: 0; display: grid; gap: 3rem; }
@media (min-width: 820px) { .entries { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.2rem; } }
.entry { display: grid; gap: .8rem; align-content: start; }
.entry img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.entry .place { color: var(--muted); }
.entry h3 { font-size: 1.6rem; }
.entry h3 a { text-decoration: none; }
.entry h3 a:hover { text-decoration: underline; }
.entry p { font-size: .96rem; color: var(--muted); }

/* Footer */
.foot { background: var(--foot-bg); color: var(--foot-ink); border-top: 1px solid var(--rule); }
.foot .wrap { padding-block: 5rem 3rem; display: grid; gap: 3rem; justify-items: center; text-align: center; }
.foot .logo img { width: clamp(120px, 12vw, 150px); }
.foot address { font-style: normal; font-size: .95rem; color: var(--muted); }
.mock-note { font-size: .78rem; color: var(--muted); }

/* ---------- Inner pages ---------- */
.menu a[aria-current="page"] { color: var(--line); text-decoration: underline; text-underline-offset: .5em; }
.page-head { padding-block: 4.5rem 3rem; display: grid; justify-items: center; gap: 1.2rem; text-align: center; }
.page-head h1 { font-size: clamp(2.3rem, 5vw, 3.8rem); max-width: 20ch; }
.page-head .intro { max-width: 40rem; color: var(--muted); font-size: 1.12rem; }
.page-hero img { width: 100%; aspect-ratio: 2.2 / 1; object-fit: cover; }
.prose { max-width: var(--measure); margin-inline: auto; padding-block: 4.5rem 5rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.3rem; }
.prose h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); margin-top: 1.6rem; }
.prose h3 { font-size: 1.4rem; margin-top: 1rem; }
.prose figure { margin-block: 1.5rem; }
.prose figure.wide { width: min(calc(100vw - 32px), 62rem); margin-left: 50%; transform: translateX(-50%); }
.prose figure img { width: 100%; }
.prose ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .4rem; }
.prose blockquote { margin: 0; font-family: var(--display); font-size: 1.45rem; line-height: 1.35; border-left: 2px solid var(--brass); padding-left: 1.2rem; }
.prose .note { font-size: .9rem; color: var(--muted); font-style: italic; }
.prose .sources { font-size: .85rem; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 1.5rem; margin-top: 2rem; }
.prose .sources ul { padding-left: 1rem; }
.byline { color: var(--muted); }
.split { display: grid; gap: 3rem; padding-block: 5rem; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: 4.5rem; align-items: center; } .split.flip > :first-child { order: 2; } }
.split img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.split .text { display: grid; gap: 1.2rem; max-width: var(--measure); }
.split h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
.band { background: var(--stone); }
.slot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.slot { border: 1px solid var(--rule); background: var(--paper); padding: 1.4rem 1.6rem; display: grid; gap: .5rem; }
@media (min-width: 700px) { .slot { grid-template-columns: 1fr auto; align-items: center; } }
.slot h3 { font-size: 1.5rem; }
.slot p { color: var(--muted); font-size: .95rem; }
.empty { border: 1px dashed var(--line); padding: 2rem; display: grid; gap: .6rem; background: var(--paper); }
.prop-gallery { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: 0 4rem; }
.prop-gallery img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.prop-gallery img:first-child { grid-column: 1 / -1; aspect-ratio: 2 / 1; }
@media (min-width: 900px) { .prop-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.prop-body { display: grid; gap: 3rem; padding-block: 1rem 6rem; }
@media (min-width: 900px) { .prop-body { grid-template-columns: 7fr 4fr; gap: 5rem; align-items: start; } }
.prop-body .prose { padding-block: 0; margin: 0; }
.booking { border: 1px solid var(--line); padding: 2rem; display: grid; gap: 1rem; background: var(--paper); position: sticky; top: 1.5rem; }
.booking h2 { font-size: 1.6rem; }
.booking .facts { grid-template-columns: 1fr; }
.prop-cards { display: grid; gap: 3rem; padding-block: 1rem 6rem; }
@media (min-width: 900px) { .prop-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } }
.prop-card { display: grid; gap: .9rem; align-content: start; }
.prop-card img, .prop-card .ph { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.prop-card .ph { background: var(--celadon); display: grid; place-items: center; color: var(--muted); font-style: italic; }
.prop-card h2 { font-size: 1.8rem; }
.prop-card h2 a { text-decoration: none; }
.prop-card p { color: var(--muted); font-size: .97rem; }
.journal-list { padding-block: 1rem 6rem; }
.crumb { font-style: italic; color: var(--muted); }