/* ---- skulp (Skulp — Knysna oyster bar & lagoon counter 326) -----------------
   THE STRUCTURAL MOVE: THE BOOKING STRIP IS SECOND. The reference sets its
   reservation row directly under the hero, before a single word of story, and
   that is the one thing that has to survive the conversion — so the contact
   band is welded to the bottom of the full-viewport cross-fade with no gap and
   no margin, tinted one shade off the ground, and its three fields plus the
   button are laid out in ONE horizontal row like a table widget rather than
   stacked as a form. Every story block on the page then sits below it. The two
   splits mirror each other the way the reference alternates its story bands,
   and the priced grid stands in for a photograph-free printed menu: three
   columns, two rows, left-aligned rows of name-then-price. Ground is oyster
   shell, ink is a cool near-black, captions and prices drop to a mid-grey, and
   one deep lagoon teal is spent on the rand figure, the buy slab and the
   hero's hairline outline — nothing else is coloured, so all the warmth on the
   page comes off the photographs. Nothing here touches the header, the nav, or
   the order or position of a single item inside them. --------------------- */
body.t-skulp {
  background: #f2f0ea;
  color: #1b1d1e;
  --sk-teal: #0f565c;
  --sk-teal-hi: #17727a;
  --bg-flat: #f2f0ea;
  --header-bg: #f2f0ea;
  --surface: #f2f0ea;
  --surface-2: #e7e5dd;
  --line: #dcd9d0;
  --line-strong: #c3bfb4;
  --heading: #121415;
  --text: #1b1d1e;
  --muted: #7b8286;
  --radius: 0;
  --shadow: none;
}

/* a flat shell-coloured bar the same value as the ground, so the first screen
   begins beneath the header rather than behind it. Type and colour only. */
body.t-skulp .sf-head, body.t-skulp .sf-header,
body.t-skulp .sf-foot, body.t-skulp .sf-footer, body.t-skulp .sf-cats {
  background: #f2f0ea; border-color: #dcd9d0;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-skulp .sf-name, body.t-skulp .sf-navlink { text-transform: uppercase; letter-spacing: 0.2em; font-size: 11px; font-weight: 600; }

/* TEAL 1 of 3 — every solid control is a flat lagoon slab with no edge on it */
body.t-skulp .btn.brand { background: var(--sk-teal); border: 0; box-shadow: none; color: #f4f2ec; text-transform: uppercase; letter-spacing: 0.18em; font-size: 10.5px; font-weight: 700; padding: 14px 28px; }
body.t-skulp .btn.brand:hover { background: var(--sk-teal-hi); color: #ffffff; }

/* the whole first screen and nothing else on it: three photographs cross-
   fading, copy held on the vertical midline, and TEAL 2 of 3 as a hairline
   outline rather than a slab */
body.t-skulp .sc-hero { min-height: 100vh; padding: 112px 24px; }
body.t-skulp .sc-hero h1 { font-size: clamp(30px, 5.2vw, 60px); font-weight: 400; line-height: 1.08; letter-spacing: -0.025em; margin: 0 0 20px; }
body.t-skulp .sc-hero p { text-transform: uppercase; letter-spacing: 0.26em; font-size: clamp(9.5px, 1.1vw, 11px); font-weight: 500; margin: 0 0 36px; }
body.t-skulp .sc-hero .btn.brand.sc-hero-ghost { background: transparent; border: 1px solid var(--sk-teal-hi); color: #ffffff; }
body.t-skulp .sc-hero .btn.brand.sc-hero-ghost:hover { background: var(--sk-teal); border-color: var(--sk-teal); color: #f4f2ec; }

/* ★ THE MOVE — the booking strip, SECOND on the page. Welded to the bottom of
   the hero with no gap, tinted one shade off the ground, closed by a hairline,
   and its fields set in ONE horizontal reservation row instead of a stack. */
body.t-skulp .sc-contact-band { background: #e7e5dd; border-bottom: 1px solid #dcd9d0; padding: 40px 0 46px; }
body.t-skulp .sc-contact-band-inner { max-width: 1040px; }
body.t-skulp .sc-contact-band .sc-h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.24em; font-weight: 600; margin: 0 0 10px; }
body.t-skulp .sc-contact-band .sc-contact-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 8px 14px; align-items: end; }
body.t-skulp .sc-contact-band .sc-field label { text-transform: uppercase; letter-spacing: 0.18em; font-size: 9.5px; font-weight: 700; color: var(--muted); }
body.t-skulp .sc-contact-band textarea { height: 42px; min-height: 42px; resize: vertical; }
body.t-skulp .sc-contact-band .sc-contact-form .btn { align-self: end; margin-top: 0; }

/* the two story splits MIRROR: image left / copy right, then copy left /
   image right, exactly the alternation the reference runs its bands on */
body.t-skulp .sc-about-split + .sc-about-split .sc-about-media { order: 2; }

/* the printed menu, priced: three columns and two rows that fill exactly, rows
   left-aligned like type on a card, and TEAL 3 of 3 on the rand figure alone */
body.t-skulp .sc-buy-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 30px; }
body.t-skulp .sc-buy-card { align-items: flex-start; text-align: left; }
body.t-skulp .sc-buy-cat { color: var(--muted); font-weight: 600; letter-spacing: 0.22em; font-size: 9.5px; }
body.t-skulp .sc-buy-p { color: var(--sk-teal); font-weight: 700; font-size: 15.5px; }

/* the jetty band carries one line and nothing else; the statement after the
   menu is the narrowest measure on the page, and the closing tiles are tall */
body.t-skulp .sc-banner { min-height: 52vh; }
body.t-skulp .sc-richtext { max-width: 560px; padding: 78px 20px 82px; }
body.t-skulp .sc-strip { padding: 34px 20px 72px; }
body.t-skulp .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
body.t-skulp .sc-strip-img { aspect-ratio: 4 / 5; border: 0; }
body.t-skulp .sc-strip-label { text-transform: uppercase; letter-spacing: 0.16em; font-size: 10px; font-weight: 600; color: var(--muted); margin-top: 12px; }

@media (max-width: 860px) {
  body.t-skulp .sc-hero { min-height: 82vh; }
  body.t-skulp .sc-contact-band .sc-contact-form { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  body.t-skulp .sc-contact-band textarea { height: auto; min-height: 88px; }
  body.t-skulp .sc-buy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 20px; }
  body.t-skulp .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* NIGHT — the shell goes to wet slate at dusk on the water and the lagoon teal
   lifts to the pale green a torch throws back off the shallows, so the rand
   figure, the buy slab and the booking strip all still carry. The booking band
   stays one shade off the ground, which is the whole point of it. */
html[data-theme="dark"] body.t-skulp {
  background: #14171a;
  color: #d3d6d4;
  --sk-teal: #4fb0b4;
  --sk-teal-hi: #6ecbcf;
  --bg-flat: #14171a;
  --header-bg: #14171a;
  --surface: #14171a;
  --surface-2: #1b1f22;
  --line: #2a2f33;
  --line-strong: #3b4146;
  --heading: #eef1ee;
  --text: #d3d6d4;
  --muted: #848c90;
}
html[data-theme="dark"] body.t-skulp .sf-head, html[data-theme="dark"] body.t-skulp .sf-header,
html[data-theme="dark"] body.t-skulp .sf-foot, html[data-theme="dark"] body.t-skulp .sf-footer,
html[data-theme="dark"] body.t-skulp .sf-cats { background: #14171a; border-color: #2a2f33; }
html[data-theme="dark"] body.t-skulp .btn.brand { background: var(--sk-teal); color: #0b1214; }
html[data-theme="dark"] body.t-skulp .btn.brand:hover { background: var(--sk-teal-hi); color: #0b1214; }
html[data-theme="dark"] body.t-skulp .sc-contact-band { background: #1b1f22; border-bottom-color: #2a2f33; }