/* PLATE family (round 3): shared tokens, header, menu, slideshow, footer.
   Owner's rules: no decorative lines (footer divider only), no "Book a consultation", featured section aligned right. */
:root {
  --bg: #FFFFFF; --ink: #141210; --mute: #6A655E; --accent: #3E0709; --cream: #F3EEE6; --ph: #E7E2DA;
  --m: 20px; --gap: 20px;
  --f-display: Newsreader, serif; --f-accent: Newsreader, serif; --f-text: Switzer, sans-serif;
  --fs: 13px; --lh: 1.5; --wd: 400; --track: -0.005em; --dur: 1100ms;
  --head-h: 58px;
}
body { font-size: var(--fs); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.serif { font-family: var(--f-display); font-weight: var(--wd); letter-spacing: var(--track); }
.muted { color: var(--mute); }
.ph img { transition: transform 1200ms var(--ease); }

/* header: no rule underneath */
header.top { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--head-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 var(--m); color: var(--ink); background: var(--bg); transition: color 500ms var(--ease), background-color 500ms var(--ease); }
header.top.on-image { color: #fff; background: transparent; text-shadow: 0 1px 14px rgba(0,0,0,.35); }
header.top a, header.top button { font-size: 13px; color: inherit; }
header.top .wm { font-family: var(--f-display); font-size: calc(26px * var(--s)); letter-spacing: .005em; text-transform: lowercase; }
header.top .l { justify-self: start; }
header.top .r { justify-self: end; display: flex; gap: 28px; }

/* menus: shared shell, one design per page (V1 split, V2 drawer, V3 list, V4 sheet, V5 tiles) */
.menu { position: fixed; z-index: 60; }
.menu-backdrop { position: fixed; inset: 0; z-index: 55; background: rgba(12,10,9,.45); opacity: 0; pointer-events: none; transition: opacity 600ms var(--ease); }
body.menu-open .menu-backdrop { opacity: 1; pointer-events: auto; }
body.menu-open { overflow: hidden; }

/* V1: oxblood halves */
.m-split { inset: 0; background: var(--accent); color: var(--cream); display: grid; grid-template-rows: var(--head-h) 1fr var(--head-h); clip-path: inset(0 0 100% 0); transition: clip-path 760ms var(--ease); }
.m-split.is-open { clip-path: inset(0 0 0 0); }
.m-split .row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 var(--m); }
.m-split .row .wm { font-family: var(--f-display); font-size: 26px; text-transform: lowercase; }
.m-split .row .links { justify-self: end; display: flex; gap: 24px; }
.m-split .row.bottom { grid-template-columns: repeat(3, auto) 1fr; gap: 28px; }
.m-split .split { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.m-split .split a { position: relative; display: grid; place-items: center; font: 400 calc(30px * var(--s))/1.1 var(--f-display); overflow: hidden; }
.m-split .split a img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity 700ms var(--ease), transform 1400ms var(--ease); mix-blend-mode: luminosity; }
.m-split .split a:hover img, .m-split .split a:focus-visible img { opacity: .28; transform: scale(1); }
.m-split .split a span { position: relative; }

/* slideshow mechanics (layout per page) */
.show { position: relative; overflow: hidden; background: #1b1714; }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1600ms var(--ease); }
.slide.is-on { opacity: 1; pointer-events: auto; }
.slide { pointer-events: none; }
.slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.07); transition: transform 9000ms linear; filter: var(--img); }
.slide.is-on img { transform: scale(1); }
.count { display: flex; align-items: center; gap: 12px; }
.count i { display: block; width: 120px; height: 1px; background: color-mix(in srgb, currentColor 35%, transparent); position: relative; overflow: hidden; }
.count i::after { content: ''; position: absolute; inset: 0; background: currentColor; transform: scaleX(var(--p, 0)); transform-origin: left; }

/* featured: aligned right (owner's instruction) */
.featured-head { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gap); row-gap: 14px; padding: 0 var(--m); }
.featured-head > * { grid-column: 2; justify-self: start; text-align: left; }
.featured-head .t { font: 400 calc(30px * var(--s))/1.1 var(--f-display); letter-spacing: var(--track); }
.featured-head dl { display: grid; grid-template-columns: repeat(4, auto); column-gap: 40px; row-gap: 2px; margin: 0; justify-content: start; }
.featured-head dt { color: var(--mute); grid-row: 1; }
.featured-head dd { margin: 0; grid-row: 2; max-width: 26ch; }
.feat .note { display: grid !important; grid-template-columns: 1fr 1fr; column-gap: var(--gap); justify-items: start !important; }
.feat .note p { grid-column: 2; text-align: left !important; }

/* footer: oxblood halves, the one line the owner kept */
footer.foot { background: var(--accent); color: var(--cream); display: grid; grid-template-columns: 1fr 1fr; min-height: 420px; }
footer.foot > div { padding: 22px var(--m); display: grid; grid-template-rows: 1fr auto; }
footer.foot p { max-width: 46ch; font: 400 17px/1.45 var(--f-display); }
footer.foot .cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; align-content: start; }
footer.foot form { display: flex; gap: 12px; max-width: 360px; background: rgba(243,238,230,.08); padding: 10px 12px; }
footer.foot input { flex: 1; background: none; border: 0; color: inherit; font: inherit; outline: 0; }
footer.foot input::placeholder { color: rgba(243,238,230,.7); }
footer.foot .legal { display: flex; justify-content: space-between; gap: 20px; color: rgba(243,238,230,.7); }

@media (max-width: 800px) {
  header.top { grid-template-columns: auto 1fr auto; gap: 12px; }
  header.top .wm { font-size: 20px; justify-self: center; }
  header.top .r a:not(:last-child) { display: none; }
  .m-split .split { grid-template-columns: 1fr; }
  .m-split .row .links { display: none; }
  .m-split .row.bottom { grid-template-columns: 1fr; gap: 2px; padding-bottom: 12px; }
  .featured-head { grid-template-columns: 1fr; } .featured-head > *, .feat .note p { grid-column: 1; } .feat .note { grid-template-columns: 1fr; }
  .featured-head dl { grid-template-columns: 1fr 1fr; row-gap: 10px; }
  .featured-head dt, .featured-head dd { grid-row: auto; }
  footer.foot { grid-template-columns: 1fr; }
}

/* no decorative lines: cancel the shared hover underline; hover is shown by colour and opacity instead */
a.cta, nav a, header.top a, .menu a, footer.foot a { background-image: none !important; padding-bottom: 0; }
header.top a:hover, footer.foot a:hover { opacity: .6; }
header.top a, footer.foot a { transition: opacity 300ms var(--ease); }