/* Parrotts Perch — structure and behaviour.
   Every colour, font and shape here is a token; the theme stylesheet supplies
   the values. Nothing in this file is theme-specific. */

/* ------------------------------------------------------------------ reset */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--body-size, 1.0625rem);
  font-weight: var(--body-weight, 400);
  line-height: var(--body-lh, 1.65);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  accent-color: var(--accent);
  -webkit-tap-highlight-color: transparent;
}

/* The parts of the page the browser draws still belong to the theme. */
::selection { background: color-mix(in srgb, var(--accent) 26%, var(--bg)); color: var(--ink); }

img, picture, video, svg { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--display-weight, 400);
  line-height: var(--display-lh, 1.06);
  letter-spacing: var(--display-tracking, 0);
  text-transform: var(--display-case, none);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--h1, clamp(2.4rem, 6vw, 4.2rem)); }
h2 { font-size: var(--h2, clamp(1.8rem, 3.6vw, 2.75rem)); }
h3 { font-size: var(--h3, clamp(1.2rem, 1.8vw, 1.5rem)); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }

/* Visible keyboard focus everywhere, on every theme. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Movement goes; the short fades and colour changes that confirm an action
     stay, because feedback that vanishes is a loss, not an accommodation. */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-property: opacity, color, background-color, border-color, text-decoration-color, outline-color !important;
    transition-duration: 0.15s !important;
  }
}

/* ---------------------------------------------------------------- motion */
/* One idea, carried through: the stencil landing. Shannon's own words about
   the job are "a stencil landing perfectly", so the page head settles onto
   the page once, sharpening as it lands, and the editorial rule beneath it is
   drawn in. The same rule is drawn under each section head as it comes into
   view. Nothing else enters on scroll, and everything is visible at rest. */

:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --rule-origin: left;
}

@keyframes pp-land {
  from { opacity: 0; transform: translateY(14px); filter: blur(6px); }
  60%  { filter: blur(0); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes pp-draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes pp-settle {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------- utility */

.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -4rem;
  z-index: 100;
  padding: 0.85rem 1.25rem;
  background: var(--ink);
  color: var(--bg);
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0.5rem; }

.container {
  width: min(100% - 2 * var(--gutter), var(--container, 1180px));
  margin-inline: auto;
}
/* Only the 404 centres itself. Every other page shares one left edge, so a
   heading and the paragraph under it never start in two different places. */
.container--centred { --container: 720px; text-align: center; }

/* The skip link's target takes focus so the next Tab starts inside the page
   in every browser; it is never a control, so it draws no ring. */
main:focus { outline: none; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.section { padding-block: var(--section-y); }
.section--alt { background: var(--bg-alt); }
.section--invert { background: var(--bg-invert); color: var(--ink-invert); }
.section--tight { padding-block: calc(var(--section-y) * 0.6); }
.section--flush { padding-top: 0; }

.lede {
  font-size: clamp(1.06rem, 1.5vw, 1.2rem);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 54ch;
}

/* An inline icon drawn in the text's own weight, never a glyph. */
.icon { width: 1em; height: 1em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------- headings */

/* A page opens with its title and, under it, one line of what to expect. */
.page-head { display: grid; gap: 1rem; margin-bottom: calc(var(--section-y) * 0.42); }
.page-head h1 { max-width: 18ch; }

/* The rule beneath a head. Themes set --head-rule; its drawing is the motif. */
.page-head::after,
.section-head::after {
  content: "";
  grid-column: 1 / -1;
  margin-top: var(--head-rule-gap, 0);
  border-top: var(--head-rule, 0);
  transform-origin: var(--rule-origin) center;
}
.page-head::after { animation: pp-draw 0.8s var(--ease-out) 0.15s both; }
/* The page's first words land once, then the rule is drawn beneath them. */
.page-head > *, .hero-body > * { animation: pp-land 0.7s var(--ease-out) both; }
.page-head > :nth-child(2), .hero-body > :nth-child(2) { animation-delay: 70ms; }
.page-head > :nth-child(3), .hero-body > :nth-child(3) { animation-delay: 140ms; }
/* Further down, each section head lands the same way as it is reached: the
   heading settles and the rule is drawn beneath it, once. enhance.js adds
   is-in when a head below the fold scrolls into view; heads already on screen
   at load are left still, and without the script every head is simply there. */
@keyframes pp-land-soft {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.section-head.is-in > * { animation: pp-land-soft 0.55s var(--ease-out) both; }
.section-head.is-in > :nth-child(2) { animation-delay: 80ms; }
.section-head.is-in::after { animation: pp-draw 0.75s var(--ease-out) 0.18s both; }
@media (prefers-reduced-motion: reduce) {
  .page-head::after, .section-head::after, .page-head > *, .hero-body > *,
  .section-head.is-in > *, .section-head.is-in::after { animation: none; }
}

/* A section opens with its heading and, beside it on a wide screen, a short
   line of context that sits on the heading's baseline rather than above it. */
.section-head {
  display: grid;
  gap: 0.75rem 3rem;
  align-items: end;
  margin-bottom: calc(var(--section-y) * 0.42);
}
.section-head > * { min-width: 0; }
.section-head p { margin: 0; max-width: 38ch; color: var(--ink-soft); }
@media (min-width: 880px) {
  .section-head--split { grid-template-columns: minmax(0, 1fr) minmax(0, 38ch); }
}

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 46px;
  padding: 0.8rem 1.5rem;
  font-family: var(--font-ui);
  font-size: var(--btn-size, 0.9rem);
  font-weight: var(--btn-weight, 500);
  letter-spacing: var(--btn-tracking, 0.01em);
  text-transform: var(--btn-case, none);
  text-decoration: none;
  border: var(--btn-border-w, 1px) solid transparent;
  border-radius: var(--btn-radius, 0);
  box-shadow: var(--btn-shadow, none);
  cursor: pointer;
  transition: transform 0.2s var(--ease-out), background-color 0.15s ease, color 0.15s ease, box-shadow 0.2s var(--ease-out), border-color 0.15s ease;
}
.btn:hover { transform: var(--btn-hover-shift, none); }
.btn:active { transform: translateY(1px); }
.btn--small { min-height: 38px; padding: 0.5rem 1rem; font-size: calc(var(--btn-size, 0.9rem) * 0.92); }

.btn--primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn--primary:hover { background: var(--accent-hover, var(--accent)); border-color: var(--accent-hover, var(--accent)); }

.btn--outline { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn--outline:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.btn--on-dark { background: transparent; color: var(--ink-invert); border-color: color-mix(in srgb, var(--ink-invert) 40%, transparent); }
.btn--on-dark:hover { background: var(--ink-invert); color: var(--bg-invert); }

/* On an inverted surface the primary button flips too. Three themes paint the
   primary in ink, and the CTA band and footer are painted in that same ink, so
   without this the button that asks for the enquiry is invisible exactly where
   it matters. Dark themes keep their accent via the two tokens. */
.section--invert .btn--primary,
.cta-band .btn--primary,
.site-footer .btn--primary {
  background: var(--btn-invert-bg, var(--ink-invert));
  color: var(--btn-invert-ink, var(--bg-invert));
  border-color: var(--btn-invert-bg, var(--ink-invert));
}
.section--invert .btn--primary:hover,
.cta-band .btn--primary:hover,
.site-footer .btn--primary:hover {
  background: var(--btn-invert-hover, var(--accent));
  border-color: var(--btn-invert-hover, var(--accent));
  color: var(--btn-invert-hover-ink, var(--accent-ink));
}

/* The one link style for "there is more of this": a sentence, underlined. */
.link-more {
  display: inline-block;
  min-height: 24px;
  font-family: var(--font-ui);
  font-size: var(--link-size, 0.95rem);
  font-weight: var(--link-weight, 500);
  letter-spacing: var(--link-tracking, 0);
  text-transform: var(--link-case, none);
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
  transition: text-decoration-color 0.2s ease, text-underline-offset 0.2s var(--ease-out);
}
.link-more:hover { text-decoration-color: var(--accent); text-underline-offset: 0.36em; }
/* On a dark band the accent sinks below readable contrast. A theme can name a
   lighter accent for dark grounds; otherwise the link takes the band's ink. */
.section--invert .link-more {
  color: var(--accent-on-dark, var(--ink-invert));
  text-decoration-color: color-mix(in srgb, var(--accent-on-dark, var(--ink-invert)) 45%, transparent);
}
.section--invert .link-more:hover { text-decoration-color: var(--accent-on-dark, var(--ink-invert)); }

/* ---------------------------------------------------------------- header */

/* One quiet line: where the studio is, and whether the books are open. */
.announce {
  background: var(--announce-bg, var(--bg-alt));
  color: var(--announce-ink, var(--ink-soft));
  font-family: var(--font-ui);
  font-size: 0.8rem;
  letter-spacing: var(--announce-tracking, 0.02em);
  text-transform: var(--announce-case, none);
  border-bottom: 1px solid var(--rule);
}
.announce .container {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.55rem;
}
.announce-status { display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; }
.announce-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
/* The words take the line's own ink; the dot carries the colour, so the
   status reads on every theme and always clears the contrast floor. */
.announce-status--open::before { background: var(--announce-dot-ok, var(--status-available)); }
.announce-status--waitlist::before { background: var(--announce-dot-hold, var(--status-hold)); }
@media (max-width: 599px) {
  .announce-place { display: none; }
  .announce .container { justify-content: flex-end; }
}

.site-header {
  position: relative;
  border-bottom: var(--header-border, 1px solid var(--rule));
  background: var(--header-bg, var(--bg));
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding-block: 1.2rem;
}

.wordmark {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  line-height: 1;
  text-decoration: none;
  color: var(--wordmark-color, var(--ink));
}
.wordmark-name {
  font-family: var(--font-wordmark, var(--font-display));
  font-size: var(--wordmark-size, 1.45rem);
  font-weight: var(--wordmark-weight, 400);
  letter-spacing: var(--wordmark-tracking, 0);
  text-transform: var(--wordmark-case, none);
}
.wordmark-sub {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.site-nav ul {
  display: flex;
  gap: clamp(1.1rem, 2.2vw, 2.1rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Plain links only: the booking button in the phone menu keeps its own styling. */
.site-nav a:not(.btn) {
  display: inline-block;
  padding-block: 0.45rem;
  font-family: var(--font-ui);
  font-size: var(--nav-size, 0.9rem);
  letter-spacing: var(--nav-tracking, 0.02em);
  text-transform: var(--nav-case, none);
  text-decoration: none;
  color: var(--ink-soft);
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.2s ease;
}
.site-nav a:not(.btn):hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
.nav-book { display: none; }

.header-actions { display: flex; align-items: center; gap: 0.75rem; }
.header-cta-short { display: none; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  min-width: 44px;
  padding: 0.5rem 0.8rem;
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: var(--btn-radius, 0);
  font-family: var(--font-ui);
  font-size: 0.8rem;
  cursor: pointer;
}
.nav-toggle-bars { display: grid; gap: 4px; }
.nav-toggle-bars span { display: block; width: 18px; height: 1.5px; background: currentColor; transition: transform 0.18s ease, opacity 0.18s ease; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 899px) {
  /* The header stays put, so the menu never scrolls away from the button
     that opened it, and the enquiry button is always one tap away. */
  .site-header { position: sticky; top: 0; z-index: 50; }
  .site-header .container { padding-block: 0.75rem; gap: 0.75rem; }
  .wordmark-sub { display: none; }
  .wordmark-name { font-size: calc(var(--wordmark-size, 1.45rem) * 0.88); }

  .site-nav { display: none; }
  .site-nav.is-open {
    display: block;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    z-index: 40;
    padding: 0.5rem var(--gutter) 1.5rem;
    background: var(--header-bg, var(--bg));
    border-bottom: 1px solid var(--rule-strong);
    box-shadow: 0 24px 40px -28px rgb(0 0 0 / 0.45);
  }
  .site-nav.is-open { animation: pp-settle 0.26s var(--ease-out) both; }
  .site-nav.is-open ul { flex-direction: column; gap: 0; }
  .site-nav.is-open li { border-bottom: 1px solid var(--rule); }
  .site-nav.is-open a:not(.btn) { display: block; font-size: 1.1rem; padding-block: 0.8rem; border-bottom: 0; }
  .site-nav.is-open a[aria-current="page"] { color: var(--accent); }
  .site-nav.is-open .nav-book { display: block; border-bottom: 0; padding-top: 1.1rem; }
  .site-nav.is-open .nav-book .btn { width: 100%; }

  .header-cta { min-height: 40px; padding: 0.5rem 0.85rem; font-size: calc(var(--btn-size, 0.9rem) * 0.92); }
  .header-cta-long { display: none; }
  .header-cta-short { display: inline; }
  .nav-toggle { padding: 0.5rem 0.7rem; }
  .nav-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .site-nav { display: block !important; }
}

/* ------------------------------------------------------------------ hero */

.hero { position: relative; padding-block: var(--hero-y, var(--section-y)); }
.hero .container { position: relative; }

.hero-grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
@media (min-width: 880px) {
  .hero-grid { grid-template-columns: var(--hero-columns, 1.05fr 0.95fr); }
}

.hero-body { display: flex; flex-direction: column; gap: 1.4rem; align-items: flex-start; }
.hero-body > * { margin: 0; }
.hero-body h1 { max-width: 16ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.hero-media {
  position: relative;
  aspect-ratio: var(--hero-media-ratio, 4 / 5);
  overflow: hidden;
  border-radius: var(--radius, 0);
  background: var(--bg-alt);
}
.hero-media img { width: 100%; height: 100%; object-fit: cover; }

/* The homepage slideshow: the photos stacked in the one frame, each fading in
   over the last. Reduced motion keeps the fade, at the short length every
   other fade has there. */
.hero-slideshow .slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s var(--ease-out);
}
.hero-slideshow .slide.is-active { opacity: 1; }
.slideshow-toggle {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(20 16 18 / 0.55);
  color: #fff;
  cursor: pointer;
}
.slideshow-toggle[hidden] { display: none; }
.slideshow-toggle:hover { background: rgb(20 16 18 / 0.75); }
.slideshow-toggle svg { width: 20px; height: 20px; fill: currentColor; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.slideshow-toggle .icon-play { stroke-width: 1.5; }
.slideshow-toggle .icon-play,
.slideshow-toggle.is-paused .icon-pause { display: none; }
.slideshow-toggle.is-paused .icon-play { display: block; }
/* Photo frames and section ghosts are drawn by themes that want them. Without
   one, the frame's wrapper steps out of layout and its extras stay hidden. */
.media-frame { display: contents; }
.frame-line, .section-ghost { display: none; }

/* Centred variant — used by the themes whose signature is a framed panel. */
.hero--centred .hero-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.hero--centred .hero-body { align-items: center; }
.hero--centred .lede { margin-inline: auto; }
.hero--centred .hero-media { width: 100%; margin-top: clamp(2rem, 4vw, 3rem); aspect-ratio: 16 / 7; }

/* A hero with no photograph is a single column, not a half-empty split. */
.hero--no-media .hero-grid { grid-template-columns: 1fr; }
.hero--no-media .hero-body h1 { max-width: 18ch; }

/* ----------------------------------------------------------------- cards */

.grid {
  display: grid;
  gap: var(--grid-gap, 1.5rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--card-min, 250px)), 1fr));
}
/* A phone shows two pieces side by side rather than one very tall column;
   flash cards carry more words, so they pair up only above 480px. */
@media (max-width: 699px) {
  .grid--work { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 0.9rem; }
}
/* On a phone the styles become one swipeable row instead of a long column.
   Each card is about three fifths of the screen, so the next one
   peeks in from the edge and says there is more; the row runs to the screen
   edge, while each card snaps to the page's left margin. */
@media (max-width: 699px) {
  .grid--rail {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    margin-inline: calc(-1 * var(--gutter));
    padding: 0 var(--gutter) 0.5rem;
    scrollbar-width: none;
  }
  .grid--rail::-webkit-scrollbar { display: none; }
  .grid--rail > * { flex: 0 0 60%; scroll-snap-align: start; }
}
@media (min-width: 480px) and (max-width: 699px) {
  .grid--flash { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
}

.card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: var(--card-bg, transparent);
  border: var(--card-border, none);
  border-radius: var(--radius, 0);
  box-shadow: var(--card-shadow, none);
  overflow: hidden;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.card:hover { transform: var(--card-hover-shift, translateY(-2px)); box-shadow: var(--card-hover-shadow, var(--card-shadow, none)); }

.card-media {
  position: relative;
  aspect-ratio: var(--card-ratio, 3 / 4);
  overflow: hidden;
  background: var(--bg-alt);
}
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); }
.card:hover .card-media img { transform: scale(1.03); }

.card-body { padding: var(--card-pad, 1rem 0 0); display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; }
.card-title { font-family: var(--font-display); font-size: var(--card-title-size, 1.2rem); font-weight: var(--display-weight, 400); line-height: 1.2; text-wrap: balance; }
.card-meta {
  font-family: var(--font-ui);
  font-size: var(--meta-size, 0.82rem);
  letter-spacing: var(--meta-tracking, 0);
  text-transform: var(--meta-case, none);
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.card-desc { margin: 0.1rem 0 0; font-size: 0.95rem; line-height: 1.5; color: var(--ink-soft); }
.card-enquire { margin-top: 0.7rem; }

/* Flash availability, on the picture where the eye already is. */
.status {
  position: absolute;
  top: 0.65rem;
  left: 0.65rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.7rem;
  font-family: var(--font-ui);
  font-size: 0.76rem;
  font-weight: var(--label-weight, 600);
  letter-spacing: 0.03em;
  line-height: 1.2;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: var(--badge-radius, 999px);
}
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-soft); }
.status--available::before, .status--open::before { background: var(--status-available); }
.status--on_hold::before, .status--waitlist::before { background: var(--status-hold); }
.status--inline { position: static; }

.card--claimed .card-media img,
.card--claimed .card-media .image-placeholder { filter: grayscale(1); opacity: 0.55; }

/* Filter by style: a row of chips that scrolls sideways on a phone. */
.filters {
  display: flex;
  gap: 0.5rem;
  margin: 0;
  padding: 0 0 0.25rem;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.filters::-webkit-scrollbar { display: none; }
.filter {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0.4rem 0.95rem;
  font-family: var(--font-ui);
  font-size: 0.88rem;
  color: var(--ink-soft);
  border: 1px solid var(--rule-strong);
  border-radius: var(--btn-radius, 0);
  text-decoration: none;
  white-space: nowrap;
}
.filter:hover { color: var(--ink); border-color: var(--ink); }
.filter[aria-current="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* --------------------------------------------------------------- feature */

.feature {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
@media (min-width: 880px) {
  .feature { grid-template-columns: 1fr 1fr; }
  .feature--flip .feature-media { order: -1; }
}
.feature-media { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius, 0); background: var(--bg-alt); }
.feature-media img { width: 100%; height: 100%; object-fit: cover; }
.feature-body > * + * { margin-top: 1.1rem; }
.feature-body h2 + .lede { margin-top: 0.7rem; }

/* With no photograph the feature is an editorial entry: the name and its one
   line on the left, the explanation on the right, a rule above. */
.feature--text {
  align-items: start;
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--rule-strong);
}
@media (min-width: 880px) {
  .feature--text { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 4vw, 5rem); }
}
.feature--text .feature-body > * + * { margin-top: 0.9rem; }
.feature--text .prose { max-width: 60ch; }
.feature-list { display: grid; gap: clamp(2rem, 4vw, 3.25rem); }

/* Styles at a glance: a name and its one line, ruled, three across. */
.styles-list {
  display: grid;
  gap: 2rem 2.5rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.styles-list li { border-top: 1px solid var(--rule-strong); padding-top: 1rem; }
.styles-list h3 { font-size: 1.3rem; margin-bottom: 0.4rem; }
.styles-list p { color: var(--ink-soft); font-size: 0.98rem; }

/* ------------------------------------------------------------------ prose */

.prose { max-width: var(--measure, 68ch); }
.prose h2 { margin-top: 2.2em; margin-bottom: 0.5em; }
.prose h3 { margin-top: 1.8em; margin-bottom: 0.4em; }
.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { margin: 0 0 1.1em; padding-left: 1.3em; }
.prose li { margin-bottom: 0.4em; }
.prose a { color: var(--accent); }
.prose blockquote {
  margin: 1.6em 0;
  padding-left: 1.4em;
  border-left: 1px solid var(--rule-strong);
  font-family: var(--font-display);
  font-size: 1.25em;
  line-height: 1.4;
}

/* A line worth lifting out of the page, set in the display face. */
.pull-quote {
  margin: 0;
  padding-left: clamp(1.25rem, 3vw, 2rem);
  border-left: 1px solid var(--rule-strong);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  line-height: 1.25;
  max-width: 26ch;
  text-wrap: balance;
}
.pull-quote-attr { margin: 1rem 0 0 clamp(1.25rem, 3vw, 2rem); font-family: var(--font-ui); font-size: 0.9rem; color: var(--ink-soft); }

/* -------------------------------------------------------------------- faq */

.faq-group + .faq-group { margin-top: calc(var(--section-y) * 0.8); }
.faq-list { max-width: var(--measure, 68ch); border-top: 1px solid var(--rule); }
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 56px;
  padding-block: 1.05rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .icon { width: 1.1rem; height: 1.1rem; color: var(--accent); transition: transform 0.18s ease; }
.faq-item[open] summary .icon { transform: rotate(45deg); }
.faq-answer { padding-bottom: 1.35rem; color: var(--ink-soft); max-width: 62ch; }
.faq-item[open] .faq-answer { animation: pp-settle 0.28s var(--ease-out) both; }

/* ------------------------------------------------------------------ visit */

.detail-list { display: grid; gap: 1.6rem; margin: 0; }
@media (min-width: 700px) { .detail-list { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
.detail-list dt {
  font-family: var(--font-ui);
  font-size: 0.76rem;
  font-weight: var(--label-weight, 600);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.5rem;
}
.detail-list dd { margin: 0; line-height: 1.75; }
.detail-list a { color: inherit; }
.detail-list .status { margin-bottom: 0.4rem; }
.detail-note { color: var(--ink-soft); }

/* ---------------------------------------------------------------- back */

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 24px;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  color: var(--ink-soft);
  text-decoration: none;
}
.back-link:hover { color: var(--ink); text-decoration: underline; }
.piece-meta { font-family: var(--font-ui); font-size: 0.9rem; color: var(--ink-soft); }

/* Piece photographs, opened full-size on click. */
.piece-images { display: grid; gap: var(--grid-gap, 1.5rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.piece-image { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; text-align: left; }
.piece-image .card-media { display: block; }

/* --------------------------------------------------------------- cta band */

.cta-band { background: var(--bg-invert); color: var(--ink-invert); }
.cta-band .container {
  display: grid;
  gap: 1.75rem;
  align-items: center;
  padding-block: calc(var(--section-y) * 0.8);
}
@media (min-width: 880px) { .cta-band .container { grid-template-columns: minmax(0, 1fr) auto; } }
.cta-band h2 { max-width: 22ch; }
.cta-band .lede { color: var(--ink-invert-soft, color-mix(in srgb, var(--ink-invert) 78%, var(--bg-invert))); margin-top: 0.9rem; }

/* ---------------------------------------------------------------- gallery */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgb(8 7 6 / 0.94);
}
.lightbox[hidden] { display: none; }
.lightbox { transition: opacity 0.25s ease, display 0.25s allow-discrete; }
.lightbox[hidden] { opacity: 0; }
@starting-style { .lightbox:not([hidden]) { opacity: 0; } }
.lightbox img { max-width: 100%; max-height: 85vh; width: auto; object-fit: contain; transition: transform 0.4s var(--ease-out); }
@starting-style { .lightbox:not([hidden]) img { transform: scale(0.97); } }
.lightbox-caption {
  margin-top: 1rem;
  color: #e8e2d7;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  text-align: center;
}
.lightbox-close {
  position: absolute;
  top: clamp(0.75rem, 2vw, 1.5rem);
  right: clamp(0.75rem, 2vw, 1.5rem);
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: transparent;
  color: #e8e2d7;
  border: 1px solid rgb(232 226 215 / 0.35);
  border-radius: 50%;
  cursor: pointer;
}
.lightbox-close .icon { width: 1.1rem; height: 1.1rem; }

/* ----------------------------------------------------------------- footer */

.site-footer { background: var(--footer-bg, var(--bg-invert)); color: var(--footer-ink, var(--ink-invert)); }
.site-footer .container { padding-block: calc(var(--section-y) * 0.9); }
.footer-top {
  display: grid;
  gap: 2.5rem;
  align-items: start;
}
@media (min-width: 780px) { .footer-top { grid-template-columns: 1.3fr 0.8fr auto; } }
.footer-note {
  margin-top: 0.9rem;
  max-width: 32ch;
  font-size: 1rem;
  color: var(--footer-ink-soft, color-mix(in srgb, var(--footer-ink, var(--ink-invert)) 78%, var(--footer-bg, var(--bg-invert))));
}
/* Plain links only: the booking button keeps its own colours. */
.footer-top a:not(.btn) { color: inherit; text-decoration: none; }
.footer-top a:not(.btn):hover { text-decoration: underline; text-underline-offset: 0.25em; }
.footer-links { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.95rem; }
.footer-contact { display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start; }
.footer-contact .btn { margin-top: 0.5rem; }
@media (min-width: 780px) { .footer-contact { align-items: flex-end; text-align: right; } }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--footer-ink, var(--ink-invert)) 20%, transparent);
  font-size: 0.85rem;
  color: var(--footer-ink-soft, color-mix(in srgb, var(--footer-ink, var(--ink-invert)) 78%, var(--footer-bg, var(--bg-invert))));
}
.footer-bottom nav { display: flex; gap: 1.4rem; }

/* WCAG 2.2 target size (2.5.8): every interactive target clears 24px. */
.footer-bottom nav a,
.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  min-width: 24px;
  padding-block: 0.3rem;
  color: inherit;
  text-decoration: none;
}

/* --------------------------------------------------- theme preview switcher */
/* Only rendered when ?theme= is in play, so Shannon's visitors never see it. */

.theme-bar {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  z-index: 80;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.3rem;
  max-width: calc(100% - 2rem);
  padding: 0.4rem;
  background: #16130f;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: 999px;
  box-shadow: 0 20px 50px -20px rgb(0 0 0 / 0.7);
  overflow-x: auto;
}
.theme-bar-label {
  padding-inline: 0.75rem;
  font-family: system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8b8272;
  white-space: nowrap;
}
.theme-bar a {
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  font-family: system-ui, sans-serif;
  font-size: 0.8rem;
  color: #cfc7b8;
  text-decoration: none;
  white-space: nowrap;
}
.theme-bar a:hover { background: rgb(255 255 255 / 0.08); color: #fff; }
.theme-bar a[aria-current="true"] { background: #e8e2d7; color: #16130f; font-weight: 600; }

/* ----------------------------------------------------- image placeholders */
/* Shown until Shannon's photography is loaded. A quiet frame with the studio's
   own mark in it reads as "photo goes here"; a grey box reads as broken. */

.image-placeholder {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100%;
  background:
    repeating-linear-gradient(
      135deg,
      color-mix(in srgb, var(--ink) 4%, transparent) 0 2px,
      transparent 2px 9px
    ),
    var(--bg-alt);
}
.image-placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: clamp(44px, 34%, 88px);
  aspect-ratio: 1;
  background: var(--ink);
  opacity: 0.2;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 8.5c2.6 0 4.6 2 4.6 4.5 0 2.2-1.3 3.4-2.6 4.4-1.1.9-1.9 1.6-1.9 3.1'/%3E%3Cpath d='M17.6 11.5 21 9.8'/%3E%3Cpath d='M8 22h16'/%3E%3Cpath d='M12.6 20.5v1.5M14.4 20.5v1.5'/%3E%3C/g%3E%3Ccircle cx='14.6' cy='11.4' r='1' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 8.5c2.6 0 4.6 2 4.6 4.5 0 2.2-1.3 3.4-2.6 4.4-1.1.9-1.9 1.6-1.9 3.1'/%3E%3Cpath d='M17.6 11.5 21 9.8'/%3E%3Cpath d='M8 22h16'/%3E%3Cpath d='M12.6 20.5v1.5M14.4 20.5v1.5'/%3E%3C/g%3E%3Ccircle cx='14.6' cy='11.4' r='1' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ------------------------------------------------------- instagram strip */
/* A scroll-snapping row rather than a JS carousel: no library, works without
   JavaScript, and swiping is what people do on a phone anyway. */

.ig-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(180px, 1fr);
  gap: var(--grid-gap, 1rem);
  margin: 0;
  padding: 0 0 0.75rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}
@media (min-width: 900px) {
  .ig-strip { grid-auto-columns: minmax(210px, 1fr); }
}
.ig-item { scroll-snap-align: start; }
.ig-item a {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius, 0);
  border: var(--card-border, none);
  box-shadow: var(--card-shadow, none);
}
.ig-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.ig-item a:hover img { transform: scale(1.04); }

/* ------------------------------------------------------------------ print */
/* Aftercare gets printed and screenshotted — it is the one page someone reads
   again days later, often with a wrapped arm and no patience. Give them the
   words without the furniture. */

@media print {
  .announce,
  .site-header,
  .site-footer,
  .cta-band,
  .theme-bar,
  .lightbox,
  .hero-actions,
  .link-more { display: none !important; }

  body { background: #fff; color: #000; font-size: 11pt; }
  main { padding: 0; }
  .section { padding-block: 0.5cm; }
  .container { width: 100%; max-width: none; }

  h1, h2, h3 { color: #000; page-break-after: avoid; }
  .prose { max-width: none; }
  p, li { orphans: 3; widows: 3; }

  /* A printed page cannot be clicked, so show where a link went. */
  .prose a::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #444; }

  /* Questions are useless printed shut. */
  details { display: block; }
  .faq-item summary .icon { display: none; }
  .faq-answer { display: block !important; }

  /* Put the studio's name on the paper, since the header is gone. */
  main::before {
    content: "Parrotts Perch — Worthing, West Sussex";
    display: block;
    margin-bottom: 0.6cm;
    padding-bottom: 0.3cm;
    border-bottom: 1pt solid #000;
    font-size: 10pt;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
}