@charset "utf-8";

/*
Theme Name: Raysola - All Day Restaurant & Bar HTML5 Template
Author: Metropolitanthemes
Version: 1.0.0

%%%%%%% Table of CSS %%%%%%%

1. General
   1.1 Typography
   1.2 Spacing & Grounds
   1.3 Section Titles
   1.4 Buttons & Links
   1.5 Forms
   1.6 Shared Pieces
   1.7 Illustrated Icons
   1.8 Photo Shapes
   1.9 Awning Stripe Hover
   1.10 Awning Roll
2. Preloader
3. Header
   3.1 Top Bar
   3.2 Main Bar
   3.3 Day Bar With A Centred Wordmark (Home 2)
   3.4 Main Menu
   3.5 Home Mega Menu
   3.6 Sticky Header
4. Offcanvas Menu
5. Custom Select
6. Language Picker
7. Components
   7.1 Ruled Grid
   7.2 Service Cards
   7.3 Post Cards
   7.4 Event Cards
   7.5 Team Cards
   7.6 Voices
   7.7 Arrows, Dots & Tabs
   7.8 Accordion
   7.9 Controls
   7.10 Wizard
   7.11 Ticker
   7.12 Gallery Strip
8. Home 01 - All Day
   8.1 Split Hero
   8.2 The Day's Services
   8.3 Our Story
   8.4 Book Your Table
   8.5 Dish Accordion
   8.6 Latest Articles
   8.7 Specialties Quote
   8.8 The Dish List
   8.9 Long Tradition
   8.10 Gallery Strip
9. Home 02 - Day & Table
   9.1 Full Hero
   9.2 Order Now
   9.3 Two Menus
   9.4 Our Menu Split
   9.5 Visit Us
   9.6 Hours List
10. Home 03 - Bar & Late
   10.1 Bistro Hero
   10.2 Bistro Menu
   10.3 Video Band
   10.4 Voices Slider
   10.5 Mosaic
   10.6 Bar Team
11. Scroll Moments
   11.1 The Clock
   11.2 The Table
   11.3 The Toast
12. Menu Pages
   12.1 Menu Board
   12.2 Bar Menu
13. Booking & Events
   13.1 Sharing Planner
   13.2 Booking Wizards
   13.3 Event Calendar
   13.4 Event Page
14. Inner Pages
   14.1 Sidebar & Widgets
   14.2 Rows, Choices & Pages
   14.3 Gallery
   14.4 FAQ
   14.5 Contact
   14.6 About & Our Day
   14.7 Team Profile
   14.8 Bare Pages Logo
15. Care Shop
   15.1 Shop Grid
   15.2 Product Page
   15.3 Bag, Checkout & Wishlist
   15.4 Toast
   15.5 Product Grounds
16. Blog & Account
   16.1 Blog List
   16.2 Blog Details
   16.3 Account Pages
   16.4 Coming Soon & 404
17. Subheader
18. Footer
*/

/*======================
1. General
========================*/
:root {
  /* brand: a peach sun over black nights and cream days */
  --dy-peach: #F2C6A0;
  --dy-peach-rgb: 242, 198, 160;
  --dy-peach-soft: #F8E1CC;
  --dy-sunset: #E3936A;
  --dy-sunset-rgb: 227, 147, 106;
  --dy-apricot: #9A4E27;
  --dy-dawn: #69727D;
  --dy-night: #000000;
  --dy-night-rgb: 0, 0, 0;
  --dy-panel: #0F0F0F;
  --dy-cream: #FDF8F4;
  --dy-cream-rgb: 253, 248, 244;
  --dy-paper: #FFFCF9;
  --dy-leaf: #3F7A3A;
  /* the ground baked into the shop's photographs, the same in both themes */
  --dy-product: #F3EAE0;
  /* semantic (the night theme swaps these) */
  --dy-bg: #FDF8F4;
  --dy-bg-rgb: 253, 248, 244;
  --dy-surface: #FFFCF9;
  --dy-surface-rgb: 255, 252, 249;
  --dy-alt: #F7EFE6;
  --dy-alt-rgb: 247, 239, 230;
  --dy-tonal: #F1E6DA;
  --dy-tonal-2: #E8D9C9;
  --dy-heading: #111111;
  --dy-heading-rgb: 17, 17, 17;
  --dy-text: #4A443D;
  --dy-muted: #6E675E;
  --dy-line: #E6DCD0;
  --dy-line-2: #D3C5B5;
  --dy-primary: #000000;
  --dy-on-primary: #FFFFFF;
  --dy-accent: #9A4E27;
  --dy-accent-fill: #F2C6A0;
  --dy-open: #3F7A3A;
  --dy-shadow: 0 18px 44px rgba(17, 12, 6, 0.08);
  --dy-shadow-lg: 0 30px 70px rgba(17, 12, 6, 0.16);
  --dy-ease: cubic-bezier(0.215, 0.61, 0.355, 1);
  /* type: Italiana carries the thin display caps, Inter the body, nav and labels */
  --dy-ff-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --dy-ff-display: 'Italiana', 'Didot', Georgia, serif;
  --dy-fs-h1: clamp(48px, 5.9vw, 100px);
  --dy-fs-h2: clamp(40px, 4.6vw, 80px);
  --dy-fs-h3: clamp(30px, 2.7vw, 46px);
  --dy-fs-h4: 21px;
  --dy-fs-h5: 16px;
  --dy-fs-h6: 13px;
  /* WebGL colours (per band below): ground, the cool morning, the warm evening */
  --gl-1: #FDF8F4;
  --gl-2: #9FB0BF;
  --gl-3: #F2C6A0;
  --gl-alpha: 0.5;
}
[data-theme="dark"] {
  --dy-bg: #000000;
  --dy-bg-rgb: 0, 0, 0;
  --dy-surface: #0F0F0F;
  --dy-surface-rgb: 15, 15, 15;
  --dy-alt: #0A0A0A;
  --dy-alt-rgb: 10, 10, 10;
  --dy-tonal: #1A1A1A;
  --dy-tonal-2: #262626;
  --dy-heading: #FFFFFF;
  --dy-heading-rgb: 255, 255, 255;
  --dy-text: #CCCCCC;
  --dy-muted: #9C9C9C;
  --dy-line: #262626;
  --dy-line-2: #383838;
  --dy-primary: #F2C6A0;
  --dy-on-primary: #000000;
  --dy-accent: #F2C6A0;
  --dy-open: #9CCB8E;
  --dy-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
  --dy-shadow-lg: 0 30px 70px rgba(0, 0, 0, 0.6);
  --gl-1: #000000;
  --gl-2: #69727D;
  --gl-3: #E3936A;
  --gl-alpha: 0.9;
}
/* bands that stay night in both themes */
.is-night {
  --dy-bg: #000000;
  --dy-bg-rgb: 0, 0, 0;
  --dy-surface: #0F0F0F;
  --dy-surface-rgb: 15, 15, 15;
  --dy-alt: #0A0A0A;
  --dy-tonal: #1A1A1A;
  --dy-tonal-2: #262626;
  --dy-heading: #FFFFFF;
  --dy-heading-rgb: 255, 255, 255;
  --dy-text: #CCCCCC;
  --dy-muted: #9C9C9C;
  --dy-line: #262626;
  --dy-line-2: #383838;
  --dy-primary: #F2C6A0;
  --dy-on-primary: #000000;
  --dy-accent: #F2C6A0;
  --dy-open: #9CCB8E;
  --gl-1: #000000;
  --gl-2: #69727D;
  --gl-3: #E3936A;
  --gl-alpha: 0.9;
  background-color: var(--dy-bg);
  color: var(--dy-text);
}
/* a cream card placed inside a night band keeps the day's ink */
.is-night .dy-on-day {
  --dy-bg: #FDF8F4;
  --dy-surface: #FFFCF9;
  --dy-tonal: #F1E6DA;
  --dy-tonal-2: #E8D9C9;
  --dy-heading: #111111;
  --dy-heading-rgb: 17, 17, 17;
  --dy-text: #4A443D;
  --dy-muted: #6E675E;
  --dy-line: #E6DCD0;
  --dy-line-2: #D3C5B5;
  --dy-primary: #000000;
  --dy-on-primary: #FFFFFF;
  --dy-accent: #9A4E27;
  --dy-open: #3F7A3A;
}
[data-theme="dark"] .is-night .dy-on-day {
  --dy-bg: #000000;
  --dy-surface: #0F0F0F;
  --dy-tonal: #1A1A1A;
  --dy-tonal-2: #262626;
  --dy-heading: #FFFFFF;
  --dy-heading-rgb: 255, 255, 255;
  --dy-text: #CCCCCC;
  --dy-muted: #9C9C9C;
  --dy-line: #262626;
  --dy-line-2: #383838;
  --dy-primary: #F2C6A0;
  --dy-on-primary: #000000;
  --dy-accent: #F2C6A0;
  --dy-open: #9CCB8E;
}
html {
  overflow-x: clip;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--dy-bg);
  color: var(--dy-text);
  font-family: var(--dy-ff-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.4s ease;
}
body.oc-open {
  overflow: hidden;
}
img {
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s var(--dy-ease), background-color 0.3s var(--dy-ease);
}
a:hover {
  color: var(--dy-accent);
}
::selection {
  background: var(--dy-peach);
  color: #000000;
}
:focus-visible {
  outline: 2px solid var(--dy-sunset);
  outline-offset: 3px;
}

/*----- 1.1 Typography -----*/
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--dy-heading);
  text-transform: uppercase;
}
h1, h2, h3,
.dy-h1, .dy-h2, .dy-h3, .dy-display {
  font-family: var(--dy-ff-display);
  font-weight: 400;
  letter-spacing: 0.04em;
}
h1,
.dy-h1 {
  font-size: var(--dy-fs-h1);
  line-height: 0.98;
}
h2,
.dy-h2 {
  font-size: var(--dy-fs-h2);
  line-height: 1;
}
h3,
.dy-h3 {
  font-size: var(--dy-fs-h3);
  line-height: 1.05;
}
h4, h5, h6,
.dy-h4, .dy-h5, .dy-h6 {
  font-family: var(--dy-ff-body);
  font-weight: 500;
}
h4,
.dy-h4 {
  font-size: var(--dy-fs-h4);
  line-height: 1.3;
  letter-spacing: 0.04em;
}
h5,
.dy-h5 {
  font-size: var(--dy-fs-h5);
  line-height: 1.4;
  letter-spacing: 0.06em;
}
h6,
.dy-h6 {
  font-size: var(--dy-fs-h6);
  line-height: 1.45;
  letter-spacing: 0.12em;
}
h1 em,
h2 em,
h3 em {
  font-style: normal;
  color: var(--dy-accent);
}
p {
  margin: 0 0 18px;
}
p:last-child {
  margin-bottom: 0;
}
.dy-lead {
  font-size: 17.5px;
  line-height: 1.75;
  color: var(--dy-text);
}
.dy-reset {
  margin: 0;
  padding: 0;
  list-style: none;
}
.dy-caps {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
/* headline lines that break exactly where they were set */
.dy-lines .ln {
  display: block;
  white-space: nowrap;
}

/*----- 1.2 Spacing & Grounds -----*/
.sec-pt-130 {
  padding-top: 130px;
}
.sec-pb-130 {
  padding-bottom: 130px;
}
.sec-pt-90 {
  padding-top: 90px;
}
.sec-pb-90 {
  padding-bottom: 90px;
}
.dy-bg-alt {
  background-color: var(--dy-alt);
}
.dy-bg-surface {
  background-color: var(--dy-surface);
}
.dy-bg-panel {
  background-color: var(--dy-panel);
}
/* hairlines above and below a band, edge to edge (the base's ruled rows) */
.dy-ruled-y {
  border-top: 1px solid var(--dy-line);
  border-bottom: 1px solid var(--dy-line);
}
/* a photo laid under a day section as a texture, washed with the ground (house rhythm) */
.dy-tint {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.dy-tint > .tint-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.5);
}
.dy-tint::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 70% at 0% 0%, rgba(var(--dy-peach-rgb), 0.24), transparent 70%),
    radial-gradient(50% 60% at 100% 100%, rgba(105, 114, 125, 0.16), transparent 70%),
    rgba(var(--dy-bg-rgb), 0.9);
}
/* photo band: one style everywhere (cover photo under a night wash from the left, white copy) */
.dy-photo-band {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: #000000;
  --dy-heading: #FFFFFF;
  --dy-text: rgba(255, 255, 255, 0.86);
  --dy-muted: rgba(255, 255, 255, 0.7);
  --dy-accent: #F2C6A0;
  --dy-primary: #F2C6A0;
  --dy-on-primary: #000000;
  --dy-line: rgba(255, 255, 255, 0.18);
  --dy-tonal: rgba(255, 255, 255, 0.12);
  --dy-tonal-2: rgba(255, 255, 255, 0.2);
  color: var(--dy-text);
}
.dy-photo-band > .band-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dy-photo-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.72) 48%, rgba(0, 0, 0, 0.34) 100%);
}
.dy-photo-band.is-centered::after {
  background: rgba(0, 0, 0, 0.58);
}

/*----- 1.3 Section Titles -----*/
/* the base's section head: a quiet caps eyebrow, the thin display title, three peach stars, a short lead */
.dy-title {
  margin-bottom: 64px;
}
.dy-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  color: var(--dy-accent);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
.dy-eyebrow::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--dy-peach);
  box-shadow: 0 0 0 4px rgba(var(--dy-peach-rgb), 0.22);
}
.dy-title h2,
.dy-title .dy-h2 {
  max-width: 900px;
}
/* the base's three stars under a title */
.dy-stars {
  display: block;
  height: 14px;
  margin-top: 22px;
  color: var(--dy-sunset);
  font-family: var(--dy-ff-body);
  font-size: 22px;
  line-height: 1;
  letter-spacing: 0.42em;
}
.dy-stars::before {
  content: "* * *";
}
.dy-title .dy-lead {
  max-width: 640px;
  margin: 22px 0 0;
}
.dy-title.text-center h2,
.dy-title.text-center .dy-h2,
.dy-title.text-center .dy-lead {
  margin-left: auto;
  margin-right: auto;
}
.dy-title.text-center .dy-stars {
  margin-left: 0.42em;
}
.dy-title.is-split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}
.dy-title.is-split .dy-lead {
  max-width: 480px;
  margin: 0;
}

/*----- 1.4 Buttons & Links -----*/
.dy-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 56px;
  padding: 0 40px;
  border: 0;
  border-radius: 0;
  background: var(--dy-primary);
  color: var(--dy-on-primary);
  font-family: var(--dy-ff-body);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  transition: background-color 0.35s var(--dy-ease), color 0.35s var(--dy-ease);
}
.dy-btn i {
  position: relative;
  font-size: 12px;
  transition: transform 0.4s var(--dy-ease), opacity 0.3s ease;
}
/* house physics: the arrow slides out and a twin slides in */
.dy-btn i.fa-arrow-right::after {
  content: "\f061";
  position: absolute;
  left: -22px;
  top: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.dy-btn:hover {
  background: var(--dy-peach);
  color: #000000;
}
.is-night .dy-btn:hover,
[data-theme="dark"] .dy-btn:hover,
.dy-photo-band .dy-btn:hover {
  background: #FFFFFF;
  color: #000000;
}
.dy-btn:hover i.fa-arrow-right {
  transform: translateX(22px);
}
.dy-btn:hover i.fa-arrow-right::after {
  opacity: 1;
}
.dy-btn:hover i.fa-arrow-right::before {
  opacity: 0;
}
.dy-btn.is-tonal {
  background: var(--dy-tonal);
  color: var(--dy-heading);
}
.dy-btn.is-tonal i {
  color: var(--dy-accent);
}
.dy-btn.is-tonal:hover {
  background: var(--dy-tonal-2);
  color: var(--dy-heading);
}
.dy-btn.is-light {
  background: #FFFFFF;
  color: #000000;
}
.dy-btn.is-light:hover {
  background: var(--dy-peach);
}
.dy-btn.is-sm {
  height: 46px;
  padding: 0 24px;
  font-size: 11.5px;
}
.dy-btn.is-block {
  width: 100%;
}
/* the base's underlined caps "view more" */
.dy-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 5px;
  background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat;
  color: var(--dy-heading);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color 0.3s ease, background-size 0.45s var(--dy-ease);
}
.dy-more:hover {
  color: var(--dy-accent);
  background-size: 40% 1px;
}
.dy-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--dy-heading);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.dy-link i {
  color: var(--dy-accent);
  transition: transform 0.35s var(--dy-ease);
}
.dy-link:hover i {
  transform: translateX(5px);
}
.dy-btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 22px;
}

/*----- 1.5 Forms -----*/
.dy-field {
  position: relative;
  margin-bottom: 20px;
}
.dy-field label,
.dy-label {
  display: block;
  margin-bottom: 9px;
  color: var(--dy-heading);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.dy-input {
  display: block;
  width: 100%;
  height: 58px;
  padding: 0 52px 0 22px;
  border: 1px solid var(--dy-line-2);
  border-radius: 0;
  background: var(--dy-surface);
  color: var(--dy-heading);
  font-family: var(--dy-ff-body);
  font-size: 15px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
textarea.dy-input {
  height: 170px;
  padding-top: 16px;
  resize: vertical;
}
.dy-input::placeholder {
  color: var(--dy-muted);
}
.dy-input:focus {
  border-color: var(--dy-sunset);
  box-shadow: 0 0 0 4px rgba(var(--dy-peach-rgb), 0.24);
  outline: 0;
}
.dy-input.is-invalid {
  border-color: #C0392B;
}
.dy-field > i {
  position: absolute;
  right: 22px;
  top: 52px;
  color: var(--dy-accent);
  font-size: 14px;
  pointer-events: none;
}
.dy-field.is-area > i {
  top: 56px;
}
input[type="date"].dy-input,
input[type="time"].dy-input {
  padding-right: 22px;
}
[data-theme="dark"] input[type="date"].dy-input,
.is-night input[type="date"].dy-input {
  color-scheme: dark;
}
.form-status {
  min-height: 0;
  margin: 14px 0 0;
  font-size: 14.5px;
  color: var(--dy-muted);
}
.form-status.is-ok {
  color: var(--dy-open);
}
.form-status.is-error {
  color: #B53A2C;
}
.is-night .form-status.is-error,
[data-theme="dark"] .form-status.is-error,
.dy-photo-band .form-status.is-error {
  color: #F49A8C;
}
.dy-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14.5px;
  cursor: pointer;
}
.dy-check input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 4px;
  accent-color: var(--dy-sunset);
}

/*----- 1.6 Shared Pieces -----*/
/* buttons start bare; each control draws its own face */
button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.dy-social {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dy-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--dy-tonal);
  color: var(--dy-heading);
  font-size: 13px;
  transition: background-color 0.35s ease, color 0.35s ease, transform 0.35s var(--dy-ease);
}
.dy-social a:hover {
  background: var(--dy-peach);
  color: #000000;
  transform: translateY(-3px);
}
/* a round portrait beside a name */
.dy-face {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}
/* overlapping round faces + a count (the house avatar group) */
.dy-avatars {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.dy-avatars .faces {
  display: inline-flex;
}
.dy-avatars .faces img,
.dy-avatars .faces .more {
  width: 50px;
  height: 50px;
  margin-right: -14px;
  border: 3px solid var(--dy-bg);
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}
.dy-avatars .faces .more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--dy-peach);
  color: #000000;
  font-size: 12px;
  font-weight: 600;
}
.dy-avatars .txt {
  margin-left: 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--dy-muted);
}
.dy-avatars .txt b {
  display: block;
  color: var(--dy-heading);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.dy-photo-band .dy-avatars .faces img,
.dy-photo-band .dy-avatars .faces .more {
  border-color: #000000;
}
.dy-play {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: var(--dy-cream);
  color: #000000;
  font-size: 20px;
  box-shadow: 0 0 0 14px rgba(255, 255, 255, 0.14);
  transition: transform 0.4s var(--dy-ease), box-shadow 0.4s var(--dy-ease), background-color 0.3s ease;
}
.dy-play i {
  margin-left: 4px;
}
.dy-play:hover {
  color: #000000;
  background: var(--dy-peach);
  transform: scale(1.06);
  box-shadow: 0 0 0 24px rgba(var(--dy-peach-rgb), 0.18);
}
/* progress line (seats taken, free delivery) */
.dy-meter {
  position: relative;
  display: block;
  height: 3px;
  background: var(--dy-line);
}
.dy-meter span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--dy-sunset);
  transition: width 1.4s var(--dy-ease);
}
.dy-stars-rate {
  display: inline-flex;
  gap: 3px;
  color: var(--dy-sunset);
  font-size: 12px;
}
/* label / value rows (the house list in place of pill and icon-bullet rows) */
.dy-kv li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid var(--dy-line);
  font-size: 14.5px;
}
.dy-kv li:last-child {
  border-bottom: 0;
}
.dy-kv span {
  color: var(--dy-muted);
}
.dy-kv b {
  color: var(--dy-heading);
  font-weight: 500;
  text-align: right;
}
/* the base's menu line: a caps name, a dotted leader, the price; the notes under it */
.dy-leader {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.dy-leader .ld-name {
  color: var(--dy-heading);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.dy-leader .ld-dots {
  flex: 1;
  min-width: 24px;
  border-bottom: 1px solid var(--dy-line-2);
  transform: translateY(-5px);
}
.dy-leader .ld-price {
  color: var(--dy-heading);
  font-size: 19px;
  font-weight: 400;
}
.dy-menu-list > li {
  padding: 0 0 26px;
}
.dy-menu-list > li:last-child {
  padding-bottom: 0;
}
.dy-menu-list p {
  margin: 6px 0 0;
  color: var(--dy-muted);
  font-size: 14px;
  line-height: 1.6;
}
.dy-diet {
  display: inline-flex;
  gap: 6px;
  margin-left: 8px;
  vertical-align: 2px;
}
.dy-diet abbr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--dy-tonal);
  color: var(--dy-heading);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
}
.dy-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 3000;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 26px;
  background: #000000;
  color: #FFFFFF;
  font-size: 14.5px;
  box-shadow: var(--dy-shadow-lg);
  transform: translate(-50%, 140%);
  transition: transform 0.5s var(--dy-ease);
}
.dy-toast i {
  color: var(--dy-peach);
}
.dy-toast.is-shown {
  transform: translate(-50%, 0);
}
.dy-back-top {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--dy-peach);
  color: #000000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s var(--dy-ease), background-color 0.3s ease;
}
.dy-back-top.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.dy-back-top:hover {
  background: #FFFFFF;
  color: #000000;
}
/* WebGL layers sit under a section's content */
.dy-gl {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.dy-gl.is-on {
  opacity: 1;
}
.has-gl {
  position: relative;
  isolation: isolate;
}
/* the live "on now" dot */
.dy-open {
  display: inline-flex;
  align-items: center;
}
.dy-open::before {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-right: 10px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.45;
}
.dy-open.is-open::before {
  opacity: 1;
  background: var(--dy-open);
  box-shadow: 0 0 0 4px rgba(156, 203, 142, 0.25);
}

/*----- 1.7 Illustrated Icons -----*/
.dy-ico {
  display: inline-flex;
  flex-shrink: 0;
  width: 60px;
  height: 60px;
}
.dy-ico img {
  width: 100%;
  height: 100%;
}
.dy-ico .ico-night,
[data-theme="dark"] .dy-ico .ico-day,
.is-night .dy-ico .ico-day,
.dy-photo-band .dy-ico .ico-day {
  display: none;
}
[data-theme="dark"] .dy-ico .ico-night,
.is-night .dy-ico .ico-night,
.dy-photo-band .dy-ico .ico-night {
  display: block;
}
.is-night .dy-on-day .dy-ico .ico-night {
  display: none;
}
.is-night .dy-on-day .dy-ico .ico-day {
  display: block;
}
[data-theme="dark"] .is-night .dy-on-day .dy-ico .ico-night {
  display: block;
}
[data-theme="dark"] .is-night .dy-on-day .dy-ico .ico-day {
  display: none;
}

/*----- 1.8 Photo Shapes -----*/
/* the base's shapes for photographs: arch, pill, oval, circle, set on any frame */
.dy-shape {
  position: relative;
  display: block;
  overflow: hidden;
}
.dy-shape > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dy-shape.is-arch {
  border-radius: 999px 999px 0 0;
}
.dy-shape.is-pill {
  border-radius: 999px;
}
.dy-shape.is-oval {
  border-radius: 50%;
}

/*----- 1.9 Awning Stripe Hover -----*/
/* a striped band with a scalloped hem slides down over the card's top edge */
.dy-awn-hover {
  position: relative;
  overflow: hidden;
}
.dy-awn-hover::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 5;
  height: 18px;
  background: repeating-linear-gradient(90deg, var(--dy-peach) 0 18px, var(--dy-cream) 18px 36px);
  -webkit-mask: linear-gradient(#000000, #000000) top / 100% 10px no-repeat, radial-gradient(circle 9px at 50% 0, #000000 98%, transparent 100%) 0 10px / 18px 8px repeat-x;
  mask: linear-gradient(#000000, #000000) top / 100% 10px no-repeat, radial-gradient(circle 9px at 50% 0, #000000 98%, transparent 100%) 0 10px / 18px 8px repeat-x;
  pointer-events: none;
  transform: translateY(-101%);
  transition: transform 0.55s var(--dy-ease);
}
.dy-awn-hover:hover::before,
.dy-awn-hover:focus-within::before {
  transform: translateY(0);
}

/*----- 1.10 Awning Roll -----*/
/* the primary reveal: a striped awning with a scalloped hem covers the photo and rolls up off it (JS drives --roll from
   1 to 0); the rolled fabric rides the hem as a shaded cylinder */
.dy-awning {
  position: relative;
  overflow: hidden;
}
.dy-awning.is-rolling::before,
.dy-awning.is-rolling::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 4;
  pointer-events: none;
}
.dy-awning.is-rolling::before {
  top: 0;
  height: calc(var(--roll, 1) * (100% + 16px));
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0) 30%),
    repeating-linear-gradient(90deg, var(--dy-peach) 0 30px, var(--dy-cream) 30px 60px);
  -webkit-mask: linear-gradient(#000000, #000000) top / 100% calc(100% - 15px) no-repeat, radial-gradient(circle 15px at 50% 0, #000000 98%, transparent 100%) 0 100% / 30px 15px repeat-x;
  mask: linear-gradient(#000000, #000000) top / 100% calc(100% - 15px) no-repeat, radial-gradient(circle 15px at 50% 0, #000000 98%, transparent 100%) 0 100% / 30px 15px repeat-x;
}
.dy-awning.is-rolling::after {
  top: calc(var(--roll, 1) * (100% + 16px) - 40px);
  height: 26px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0%, rgba(255, 255, 255, 0.32) 34%, rgba(255, 255, 255, 0) 52%, rgba(0, 0, 0, 0.46) 100%),
    repeating-linear-gradient(90deg, var(--dy-peach) 0 30px, var(--dy-cream) 30px 60px);
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.32);
  border-radius: 13px;
  opacity: var(--roll-on, 1);
}

/*======================
2. Preloader
========================*/
/* Day Cycle: over a dawn sky a sun rises from behind the horizon line under the wordmark, arcs across it while the sky
   passes through day and dusk, sets and turns into a moon as the sky becomes the page's own ground */
.dy-preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #000000;
  --pre-end: #000000;
  --pre-moon: #F3EDE4;
}
.dy-preloader[data-pre-ground="day"] {
  --pre-end: #FDF8F4;
  --pre-moon: #69727D;
}
[data-theme="dark"] .dy-preloader {
  --pre-end: #000000;
  --pre-moon: #F3EDE4;
}
.js .dy-preloader {
  visibility: visible;
}
.pre-sky {
  position: absolute;
  inset: 0;
}
.pre-sky.is-dawn {
  background: linear-gradient(180deg, #232830 0%, #4D5763 38%, #8E8C93 62%, #E7B79C 100%);
}
.pre-sky.is-day {
  opacity: 0;
  background: radial-gradient(70% 60% at 50% 70%, #FFF2E4 0%, #FDF8F4 55%, #F6E8DA 100%);
}
.pre-sky.is-dusk {
  opacity: 0;
  background: linear-gradient(180deg, #2B2230 0%, #6B3B3A 40%, #C66E4C 72%, #F2B48A 100%);
}
.pre-sky.is-end {
  opacity: 0;
  background: var(--pre-end);
}
.pre-stage {
  position: relative;
  width: 560px;
  height: 380px;
}
/* the arc: a quarter-turn wheel whose hub sits on the horizon's middle, clipped above the horizon */
.pre-arcwrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 96px;
  height: 272px;
  overflow: hidden;
}
.pre-arc {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 0;
  transform: rotate(-14deg);
}
.pre-sun {
  position: absolute;
  left: -266px;
  top: -30px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 40% 38%, #FFE6CC 0%, #F2C6A0 46%, #E3936A 100%);
  box-shadow: 0 0 0 10px rgba(242, 198, 160, 0.16), 0 0 46px rgba(242, 166, 120, 0.7);
}
/* the moon: a pale disc that fades in over the sun */
.pre-moon {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--pre-moon);
  opacity: 0;
}
/* the moon's shadow: a disc of sky that slides over the sun to leave a crescent */
.pre-shade {
  position: absolute;
  top: -6px;
  left: 70px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--pre-end);
}
.pre-horizon {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 95px;
  height: 1px;
  background: rgba(255, 255, 255, 0.55);
  transform-origin: center;
}
.dy-preloader[data-pre-ground="day"] .pre-horizon.is-ink {
  background: rgba(0, 0, 0, 0.5);
}
.pre-word {
  position: absolute;
  left: 50%;
  bottom: 118px;
  width: 340px;
  height: 74px;
  transform: translateX(-50%);
}
.pre-word img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.pre-word .w-dark {
  opacity: 0;
}
.pre-time {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 44px;
  color: rgba(255, 255, 255, 0.86);
  font-family: var(--dy-ff-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-align: center;
  text-transform: uppercase;
}

/*======================
3. Header
========================*/
/* The base's header: the wordmark, a small caps menu and one framed call to action. Style one (Home 1, Home 3 and
   the inner pages) is a night bar; style two (Home 2) is the day bar with the menu split round the centred wordmark.
   Both carry the night top bar with the clock: what the kitchen is serving now and the doors. */
.dy-header {
  position: relative;
  z-index: 1000;
  --hd-bar: #000000;
  --hd-ink: #FFFFFF;
  --hd-hover: var(--dy-peach);
  --hd-line: #262626;
  --hd-icon: #1A1A1A;
  --hd-icon-2: #2A2A2A;
}
.dy-header .wide {
  display: flex;
  align-items: center;
  padding: 0 44px;
}
.dy-logo {
  display: inline-flex;
  flex-shrink: 0;
}
.dy-logo img {
  height: 40px;
  width: auto;
}
.dy-logo .logo-dark {
  display: none;
}
.header-style-two .dy-logo .logo-dark {
  display: block;
}
.header-style-two .dy-logo .logo-light {
  display: none;
}
[data-theme="dark"] .header-style-two .dy-logo .logo-dark {
  display: none;
}
[data-theme="dark"] .header-style-two .dy-logo .logo-light {
  display: block;
}

/*----- 3.1 Top Bar -----*/
.header-top {
  height: 40px;
  background: #000000;
  border-bottom: 1px solid #1F1F1F;
  color: rgba(255, 255, 255, 0.84);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  overflow: visible;
  transition: height 0.4s var(--dy-ease), opacity 0.3s ease;
}
.header-top .wide {
  justify-content: space-between;
  height: 100%;
  gap: 30px;
}
.header-top .top-left,
.header-top .top-right {
  display: flex;
  align-items: center;
  gap: 26px;
}
.header-top a:hover {
  color: var(--dy-peach);
}
/* the base's peach asterisk between the top bar's items */
.header-top .sep::before {
  content: "*";
  color: var(--dy-peach);
  font-size: 14px;
}
.header-top a,
.header-top span {
  white-space: nowrap;
}
.header-top .dy-open.is-open::before {
  background: #9CCB8E;
}
.top-golden i {
  margin-right: 8px;
  color: var(--dy-peach);
}
.header-top .dy-lang .lang-btn {
  background: #1A1A1A;
  color: #FFFFFF;
}
.header-top .dy-lang .lang-btn:hover,
.header-top .dy-lang .lang-btn[aria-expanded="true"] {
  background: #2A2A2A;
}

/*----- 3.2 Main Bar -----*/
.header-main {
  position: relative;
  background: var(--hd-bar);
  border-bottom: 1px solid var(--hd-line);
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
}
.header-main .wide {
  height: 92px;
  gap: 36px;
}
.header-style-one .dy-nav {
  margin: 0 auto;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.header-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--hd-icon);
  color: var(--hd-ink);
  font-size: 15px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.header-icon:hover {
  background: var(--dy-peach);
  color: #000000;
}
.header-icon .count {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--dy-peach);
  color: #000000;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 19px;
  text-align: center;
}
.header-icon .count:empty {
  display: none;
}
.dy-theme-toggle .ti-sun,
[data-theme="dark"] .dy-theme-toggle .ti-moon {
  display: none;
}
[data-theme="dark"] .dy-theme-toggle .ti-sun {
  display: inline-block;
}
.header-actions .header-btn {
  display: none;
  height: 50px;
  margin-left: 8px;
  padding: 0 30px;
}
.dy-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 50px;
  height: 44px;
  padding: 0 13px;
  border: 0;
  background: var(--dy-peach);
  cursor: pointer;
}
.dy-menu-toggle span {
  display: block;
  height: 1.5px;
  background: #000000;
  transition: width 0.3s var(--dy-ease);
}
.dy-menu-toggle span:nth-child(2) {
  width: 66%;
}
.dy-menu-toggle:hover span:nth-child(2) {
  width: 100%;
}

/*----- 3.3 Day Bar With A Centred Wordmark (Home 2) -----*/
.header-style-two {
  --hd-bar: var(--dy-bg);
  --hd-ink: var(--dy-heading);
  --hd-hover: var(--dy-accent);
  --hd-line: var(--dy-line);
  --hd-icon: var(--dy-tonal);
  --hd-icon-2: var(--dy-tonal-2);
}
.header-style-two .header-main .wide {
  display: grid;
  grid-template-columns: 1fr auto auto auto 1fr;
  height: 100px;
  gap: 44px;
}
.header-style-two .dy-logo img {
  height: 46px;
}
.header-style-two .header-actions.is-left {
  justify-self: start;
}
.header-style-two .header-actions.is-right {
  justify-self: end;
}
.header-style-two .header-btn {
  display: inline-flex;
}
.header-style-two .dy-nav.is-left > ul,
.header-style-two .dy-nav.is-right > ul {
  gap: 32px;
}

/*----- 3.4 Main Menu -----*/
.dy-nav > ul {
  display: flex;
  align-items: center;
  gap: 38px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dy-nav li {
  position: relative;
}
.dy-nav > ul > li > a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 34px 0;
  color: var(--hd-ink);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.dy-nav > ul > li > a i {
  font-size: 8px;
  opacity: 0.6;
  transition: transform 0.3s var(--dy-ease);
}
.dy-nav > ul > li:hover > a,
.dy-nav > ul > li.active > a {
  color: var(--hd-hover);
}
.dy-nav > ul > li:hover > a i {
  transform: rotate(180deg);
}
.dy-nav .sub-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: -30px;
  z-index: 50;
  min-width: 250px;
  margin: 0;
  padding: 18px 0;
  list-style: none;
  background: #0F0F0F;
  border: 1px solid #262626;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s var(--dy-ease), transform 0.35s var(--dy-ease), visibility 0.3s;
}
/* a bridge over the gap, so the menu stays open while the pointer crosses it */
.dy-nav .sub-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 20px;
}
.dy-nav li:hover > .sub-menu,
.dy-nav li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dy-nav .sub-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 30px;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color 0.3s var(--dy-ease), padding 0.35s var(--dy-ease);
}
.dy-nav .sub-menu a i {
  font-size: 8px;
  color: #9C9C9C;
}
.dy-nav .sub-menu li:hover > a,
.dy-nav .sub-menu li.active > a {
  padding-left: 38px;
  color: var(--dy-peach);
}
.dy-nav .sub-menu .sub-menu {
  top: -19px;
  left: 100%;
}
.dy-nav .sub-menu .sub-menu::before {
  left: -12px;
  right: auto;
  top: 0;
  bottom: 0;
  width: 12px;
  height: auto;
}
/* the third level opens left where a right one would leave the window: under the last three items */
.dy-nav > ul > li:nth-last-child(-n+3) .sub-menu .sub-menu {
  left: auto;
  right: 100%;
}
.dy-nav > ul > li:nth-last-child(-n+3) .sub-menu .sub-menu::before {
  left: auto;
  right: -12px;
}

/*----- 3.5 Home Mega Menu -----*/
.dy-nav .has-mega {
  position: static;
}
.dy-nav .mega-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  z-index: 50;
  width: min(980px, calc(100vw - 60px));
  padding: 30px;
  background: #0F0F0F;
  border: 1px solid #262626;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 12px);
  transition: opacity 0.3s var(--dy-ease), transform 0.35s var(--dy-ease), visibility 0.3s;
}
.dy-nav .mega-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 20px;
}
.dy-nav .has-mega:hover > .mega-menu,
.dy-nav .has-mega:focus-within > .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.mega-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.mega-card {
  display: block;
  color: #FFFFFF;
}
.mega-card .shot {
  display: block;
  overflow: hidden;
  border: 1px solid #262626;
}
.mega-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  transition: transform 0.6s var(--dy-ease);
}
.mega-card:hover img {
  transform: scale(1.04);
}
.mega-meta {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 14px;
}
.mega-meta small {
  color: var(--dy-peach);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.mega-meta b {
  font-family: var(--dy-ff-display);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.mega-card.is-current b,
.mega-card:hover b {
  color: var(--dy-peach);
}

/*----- 3.6 Sticky Header -----*/
.dy-header.is-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  animation: dy-header-in 0.6s var(--dy-ease) both;
}
.dy-header.is-sticky .header-top {
  height: 0;
  opacity: 0;
  overflow: hidden;
}
.dy-header.is-sticky .header-main {
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.18);
}
.dy-header.is-sticky .header-main .wide {
  height: 76px;
}
.dy-header.is-sticky .dy-nav > ul > li > a {
  padding: 26px 0;
}
.header-style-two.is-sticky .dy-logo img {
  height: 38px;
}
.dy-header-spacer {
  display: none;
}
.dy-header-spacer.is-on {
  display: block;
}
@keyframes dy-header-in {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

/*======================
4. Offcanvas Menu
========================*/
.dy-offcanvas {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2100;
  display: flex;
  flex-direction: column;
  width: min(440px, 100vw);
  background: var(--dy-surface);
  box-shadow: var(--dy-shadow-lg);
  visibility: hidden;
  transform: translateX(105%);
  transition: transform 0.6s var(--dy-ease), visibility 0.6s;
  overflow-y: auto;
}
.dy-offcanvas.open {
  visibility: visible;
  transform: none;
}
.dy-offcanvas-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(11, 10, 9, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.dy-offcanvas-overlay.open {
  opacity: 1;
  visibility: visible;
}
.offcanvas-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 32px;
  border-bottom: 1px solid var(--dy-line);
}
.offcanvas-head .dy-logo img {
  height: 30px;
}
.offcanvas-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--dy-tonal);
  color: var(--dy-heading);
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.4s var(--dy-ease);
}
.offcanvas-close:hover {
  background: var(--dy-peach);
  color: var(--dy-night);
  transform: rotate(90deg);
}
.offcanvas-nav {
  flex: 1;
  padding: 14px 32px 30px;
}
.oc-group {
  border-bottom: 1px solid var(--dy-line);
}
.oc-group > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 18px 0;
  border: 0;
  background: none;
  color: var(--dy-heading);
  font-family: var(--dy-ff-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.oc-group > button i {
  color: var(--dy-accent);
  font-size: 12px;
  transition: transform 0.35s var(--dy-ease);
}
.oc-group.is-open > button i {
  transform: rotate(45deg);
}
.oc-group ul {
  display: none;
  padding: 0 0 16px;
}
.oc-group.is-open ul {
  display: block;
}
.oc-group ul a {
  display: block;
  padding: 7px 0 7px 16px;
  border-left: 2px solid var(--dy-line);
  color: var(--dy-text);
  font-size: 16.5px;
}
.oc-group ul a:hover,
.oc-group ul a.is-current {
  border-color: var(--dy-peach);
  color: var(--dy-accent);
}
.offcanvas-foot {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 30px 32px 34px;
}
.offcanvas-foot .label {
  font-family: var(--dy-ff-display);
  font-size: 30px;
  line-height: 1.2;
  color: var(--dy-peach);
}
.oc-phone {
  color: #FFFFFF;
  font-size: 24px;
  font-weight: 500;
}
.oc-mail {
  color: var(--dy-text);
}
.oc-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}
.offcanvas-foot .header-icon {
  --hd-icon: rgba(255, 255, 255, 0.1);
  --hd-ink: #FFFFFF;
}

/*======================
5. Custom Select
========================*/
/* Native selects stay in the form (value, name, submit); a styled button and
   listbox are drawn over them and keep them in sync. */
.dy-select {
  position: relative;
}
.dy-select > select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0 !important;
}
.dy-select .select-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  height: 58px;
  padding: 0 20px;
  border: 1px solid var(--dy-line-2);
  background: var(--dy-surface);
  font-size: 15px;
  text-align: left;
  color: var(--dy-heading);
  transition: border-color 0.3s var(--dy-ease);
}
.dy-select.is-open .select-button,
.dy-select .select-button:hover {
  border-color: var(--dy-peach);
}
.dy-select .select-button .select-value {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.dy-select .select-button i {
  flex-shrink: 0;
  font-size: 10px;
  color: var(--dy-accent);
  transition: transform 0.35s var(--dy-ease);
}
.dy-select.is-open .select-button i {
  transform: rotate(180deg);
}
.dy-select .select-list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  min-width: 100%;
  max-height: 340px;
  margin: 0;
  padding: 10px 0;
  overflow-x: hidden;
  overflow-y: auto;
  list-style: none;
  background-color: var(--dy-surface);
  border-top: 2px solid var(--dy-peach);
  box-shadow: var(--dy-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s var(--dy-ease), transform 0.3s var(--dy-ease), visibility 0.3s;
}
.dy-select.opens-up .select-list {
  top: auto;
  bottom: calc(100% + 8px);
  border-top: 0;
  border-bottom: 2px solid var(--dy-peach);
  transform: translateY(-10px);
}
.dy-select.is-open .select-list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dy-select .select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 20px;
  font-size: 15px;
  color: var(--dy-heading);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s var(--dy-ease), color 0.2s var(--dy-ease);
}
.dy-select .select-option .option-meta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dy-accent);
}
.dy-select .select-option .option-meta.is-none {
  color: var(--dy-muted);
}
.dy-select .select-option.is-focused,
.dy-select .select-option:hover {
  background-color: var(--dy-tonal);
}
.dy-select .select-option.is-disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.dy-select .select-option.is-selected {
  color: var(--dy-accent);
}
.dy-select .select-option.is-selected::after {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 11px;
  color: var(--dy-accent);
}
.dy-select.is-compact .select-button {
  height: 46px;
  border: 0;
  border-radius: 23px;
  background: var(--dy-tonal);
  font-size: 14px;
  font-weight: 600;
}

/*======================
6. Language Picker
========================*/
/* Language picker: a flag and a code; the menu lists the languages that read left to right and right to left.
   The demo copy stays in English, and a right-to-left language turns the layout around. */
.dy-lang {
  position: relative;
  flex-shrink: 0;
}
.dy-lang .lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
  font-family: var(--dy-ff-body);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.dy-lang .lang-btn:hover,
.dy-lang .lang-btn[aria-expanded="true"] {
  background: #FFFFFF;
  color: var(--dy-night);
}
.dy-lang .lang-btn > i {
  font-size: 9px;
  transition: transform 0.3s ease;
}
.dy-lang .lang-btn[aria-expanded="true"] > i {
  transform: rotate(180deg);
}
.dy-lang .flag {
  flex-shrink: 0;
  width: 22px;
  height: 16px;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.dy-lang.is-icon .lang-btn {
  height: 46px;
  padding: 0 15px;
  background: var(--dy-tonal);
  color: var(--dy-heading);
}
.dy-lang.is-icon .lang-btn:hover,
.dy-lang.is-icon .lang-btn[aria-expanded="true"] {
  background: var(--dy-night);
  color: #FFFFFF;
}
.dy-lang .lang-menu {
  position: absolute;
  top: calc(100% + 12px);
  inset-inline-end: 0;
  z-index: 1300;
  width: 248px;
  padding: 10px;
  border-radius: 2px;
  background: var(--dy-surface);
  box-shadow: var(--dy-shadow-lg);
  font-family: var(--dy-ff-body);
  text-align: start;
  white-space: normal;
}
.dy-lang.is-up .lang-menu {
  top: auto;
  bottom: calc(100% + 12px);
}
.dy-lang.is-start .lang-menu {
  inset-inline-start: 0;
  inset-inline-end: auto;
}
.dy-lang .lang-menu[hidden] {
  display: none;
}
.dy-lang .lang-group {
  margin: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dy-muted);
}
.dy-lang .lang-menu ul {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dy-lang .lang-menu ul + .lang-group {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--dy-line);
}
.dy-lang .lang-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--dy-heading);
  font-family: var(--dy-ff-body);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: start;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s ease;
}
.dy-lang .lang-item small {
  margin-inline-start: auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--dy-muted);
}
.dy-lang .lang-item i {
  width: 12px;
  font-size: 11px;
  color: var(--dy-accent);
  opacity: 0;
}
.dy-lang .lang-item:hover,
.dy-lang .lang-item[aria-pressed="true"] {
  background: var(--dy-tonal);
}
.dy-lang .lang-item[aria-pressed="true"] {
  font-weight: 600;
}
.dy-lang .lang-item[aria-pressed="true"] i {
  opacity: 1;
}
.dy-lang .lang-note {
  margin: 10px 10px 4px;
  padding-top: 10px;
  border-top: 1px solid var(--dy-line);
  font-size: 12px;
  line-height: 1.5;
  color: var(--dy-muted);
}

/*======================
7. Components
========================*/
/*----- 7.1 Ruled Grid -----*/
/* the base's card rows: borderless cards between full-width hairlines, a vertical rule between columns */
.dy-ruled {
  border-top: 1px solid var(--dy-line);
  border-bottom: 1px solid var(--dy-line);
}
.dy-ruled > .row {
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
  margin: 0;
}
.dy-ruled > .row > * {
  border-left: 1px solid var(--dy-line);
}
.dy-ruled > .row > *:first-child {
  border-left: 0;
}

/*----- 7.2 Service Cards -----*/
/* the base's four arch cards: a shaped photo, the service in caps, its hours and the clock's word on it */
.service-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 60px 34px 54px;
  text-align: center;
}
.service-card .sc-photo {
  width: min(240px, 100%);
  aspect-ratio: 3 / 4;
  margin-bottom: 36px;
}
.service-card .sc-photo img {
  transition: transform 0.9s var(--dy-ease);
}
.service-card:hover .sc-photo img {
  transform: scale(1.04);
}
.service-card h3 {
  margin-bottom: 8px;
}
.service-card .sc-hours {
  display: block;
  margin-bottom: 4px;
  color: var(--dy-heading);
  font-size: 14.5px;
}
.service-card .sc-state {
  display: block;
  min-height: 26px;
  margin-bottom: 22px;
  color: var(--dy-muted);
  font-size: 13.5px;
}
.service-card.is-on .sc-state {
  color: var(--dy-open);
}
.service-card p {
  max-width: 260px;
  margin: 0 auto 24px;
  font-size: 14.5px;
}
.service-card .dy-more {
  margin-top: auto;
}

/*----- 7.3 Post Cards -----*/
.post-card {
  display: block;
}
.post-card .pc-photo {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  margin-bottom: 26px;
}
.post-card .pc-photo img {
  transition: transform 0.9s var(--dy-ease);
}
.post-card:hover .pc-photo img {
  transform: scale(1.04);
}
.post-card .pc-date {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  padding: 10px 14px;
  background: #000000;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.post-card h3 {
  margin-bottom: 14px;
}
.post-card h3 a:hover {
  color: var(--dy-accent);
}
.post-card .pc-cat {
  display: block;
  margin-bottom: 10px;
  color: var(--dy-accent);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/*----- 7.4 Event Cards -----*/
.event-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 56px 40px 50px;
  text-align: center;
}
.event-card .ec-photo {
  width: min(280px, 100%);
  aspect-ratio: 4 / 5;
  margin: 0 auto 34px;
}
.event-card .ec-kind {
  display: block;
  margin-bottom: 12px;
  color: var(--dy-accent);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.event-card h3 {
  margin-bottom: 14px;
}
.event-card .ec-rule {
  display: block;
  margin-bottom: 18px;
  color: var(--dy-heading);
  font-size: 14.5px;
}
.event-card .dy-kv {
  max-width: 300px;
  margin: 0 auto 28px;
  text-align: left;
}
.event-card .dy-kv li {
  padding: 9px 0;
  font-size: 13.5px;
}
.event-card .ec-meter {
  max-width: 300px;
  margin: -14px auto 30px;
}
.event-card .dy-more {
  align-self: center;
  margin-top: auto;
}
.event-card.is-low [data-ev-seats] {
  color: var(--dy-sunset);
}

/*----- 7.5 Team Cards -----*/
.team-card {
  display: block;
  text-align: center;
}
.team-card .tc-photo {
  display: block;
  aspect-ratio: 4 / 5.4;
  margin-bottom: 26px;
}
.team-card .tc-photo img {
  object-position: center top;
  transition: transform 0.9s var(--dy-ease);
}
.team-card:hover .tc-photo img {
  transform: scale(1.04);
}
.team-card h3 {
  margin-bottom: 6px;
}
.team-card h3 a:hover {
  color: var(--dy-accent);
}
.team-card .tc-role {
  display: block;
  color: var(--dy-muted);
  font-size: 14px;
}

/*----- 7.6 Voices -----*/
/* the base's three quotes between rules, a round face over each */
.voice-cell {
  height: 100%;
  padding: 64px 48px;
  text-align: center;
}
.voice-cell img {
  width: 64px;
  height: 64px;
  margin-bottom: 26px;
  border-radius: 50%;
  object-fit: cover;
}
.voice-cell blockquote {
  margin: 0 0 22px;
}
.voice-cell blockquote p {
  color: var(--dy-heading);
  font-size: 19px;
  line-height: 1.5;
}
.voice-cell cite {
  color: var(--dy-muted);
  font-size: 14px;
  font-style: normal;
}
.voice-slide {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.voice-slide img {
  width: 64px;
  height: 64px;
  margin-bottom: 26px;
  border-radius: 50%;
  object-fit: cover;
}
.voice-slide blockquote p {
  color: var(--dy-heading);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.voice-slide cite {
  display: block;
  margin-top: 22px;
  color: var(--dy-muted);
  font-size: 14px;
  font-style: normal;
}

/*----- 7.7 Arrows, Dots & Tabs -----*/
/* the base's long thin arrows */
.dy-arrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 44px;
  color: var(--dy-heading);
  cursor: pointer;
  transition: color 0.3s ease, transform 0.4s var(--dy-ease);
}
.dy-arrow::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 50%;
  height: 1px;
  background: currentColor;
}
.dy-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  border-top: 1px solid currentColor;
  border-left: 1px solid currentColor;
}
.dy-arrow.is-prev::after {
  left: 9px;
  transform: translateY(-50%) rotate(-45deg);
}
.dy-arrow.is-next::after {
  right: 9px;
  transform: translateY(-50%) rotate(135deg);
}
.dy-arrow.is-prev:hover {
  color: var(--dy-accent);
  transform: translateX(-5px);
}
.dy-arrow.is-next:hover {
  color: var(--dy-accent);
  transform: translateX(5px);
}
.dy-arrow.swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}
.slider-nav {
  display: flex;
  align-items: center;
  gap: 18px;
}
.dy-dots {
  display: flex;
  align-items: center;
  gap: 12px;
}
.dy-dots .swiper-pagination-bullet {
  width: 7px;
  height: 7px;
  margin: 0;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.dy-dots .swiper-pagination-bullet-active {
  background: var(--dy-peach);
  opacity: 1;
  transform: scale(1.5);
}
/* tonal tabs: the active one takes the ground's primary face */
.dy-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.dy-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 24px;
  background: var(--dy-tonal);
  color: var(--dy-heading);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.dy-tabs button:hover {
  background: var(--dy-tonal-2);
}
.dy-tabs button.is-active {
  background: var(--dy-primary);
  color: var(--dy-on-primary);
}
.dy-tabs button small {
  opacity: 0.66;
  font-size: 11px;
}
.is-hidden,
.is-unmatched {
  display: none !important;
}

/*----- 7.8 Accordion -----*/
.dy-accordion .acc-item {
  border-bottom: 1px solid var(--dy-line);
}
.dy-accordion .acc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 24px 0;
  color: var(--dy-heading);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: left;
}
.dy-accordion .acc-head i {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--dy-tonal);
  color: var(--dy-accent);
  font-size: 12px;
  transition: transform 0.35s var(--dy-ease), background-color 0.3s ease;
}
.dy-accordion .acc-item.is-open .acc-head i {
  transform: rotate(45deg);
  background: var(--dy-peach);
  color: #000000;
}
.dy-accordion .acc-body {
  padding: 0 60px 26px 0;
}

/*----- 7.9 Controls -----*/
/* a number with a step either side */
.dy-qty {
  display: inline-flex;
  align-items: center;
  height: 56px;
  background: var(--dy-tonal);
}
.dy-qty button {
  width: 52px;
  height: 100%;
  color: var(--dy-heading);
  font-size: 12px;
  transition: background-color 0.3s ease;
}
.dy-qty button:hover {
  background: var(--dy-tonal-2);
}
.dy-qty input {
  width: 56px;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--dy-heading);
  font-family: var(--dy-ff-display);
  font-size: 26px;
  text-align: center;
  -moz-appearance: textfield;
}
.dy-qty input::-webkit-outer-spin-button,
.dy-qty input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.dy-qty.is-sm {
  height: 44px;
}
.dy-qty.is-sm button {
  width: 40px;
}
.dy-qty.is-sm input {
  width: 40px;
  font-size: 20px;
}
/* radio and checkbox cards: the input stays in the form, visually hidden */
.choice-card,
.date-choice,
.chip-choice,
.slot-choice {
  position: relative;
  cursor: pointer;
}
.choice-card input,
.date-choice input,
.chip-choice input,
.slot-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.choice-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 22px 24px;
  background: var(--dy-tonal);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.choice-card:hover {
  background: var(--dy-tonal-2);
}
.choice-card b {
  color: var(--dy-heading);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.choice-card small {
  color: var(--dy-muted);
  font-size: 13.5px;
  line-height: 1.5;
}
.choice-card .cc-fig {
  margin-top: auto;
  padding-top: 8px;
  color: var(--dy-heading);
  font-family: var(--dy-ff-display);
  font-size: 26px;
  line-height: 1;
}
.choice-card.is-checked {
  background: var(--dy-primary);
  --dy-heading: var(--dy-on-primary);
  --dy-muted: var(--dy-on-primary);
}
.choice-card.is-checked small {
  opacity: 0.8;
}
.choice-card.is-off {
  opacity: 0.45;
  cursor: not-allowed;
}
.choice-card:focus-within,
.date-choice:focus-within,
.chip-choice:focus-within,
.slot-choice:focus-within {
  outline: 2px solid var(--dy-sunset);
  outline-offset: 2px;
}
.chip-choice span {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 20px;
  background: var(--dy-tonal);
  color: var(--dy-heading);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.chip-choice:hover span {
  background: var(--dy-tonal-2);
}
.chip-choice.is-checked span {
  background: var(--dy-primary);
  color: var(--dy-on-primary);
}
.date-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 10px;
}
.date-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 6px 12px;
  background: var(--dy-tonal);
  text-align: center;
  transition: background-color 0.3s ease;
}
.date-choice:hover {
  background: var(--dy-tonal-2);
}
.date-choice .dc-week,
.date-choice .dc-month,
.date-choice .dc-seats {
  color: var(--dy-muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.date-choice .dc-num {
  color: var(--dy-heading);
  font-family: var(--dy-ff-display);
  font-size: 34px;
  font-weight: 400;
  line-height: 1.1;
}
.date-choice .dc-seats {
  margin-top: 6px;
  color: var(--dy-accent);
  letter-spacing: 0.06em;
}
.date-choice.is-checked {
  background: var(--dy-primary);
}
.date-choice.is-checked .dc-week,
.date-choice.is-checked .dc-month,
.date-choice.is-checked .dc-num,
.date-choice.is-checked .dc-seats {
  color: var(--dy-on-primary);
}
.date-choice.is-off {
  opacity: 0.4;
  cursor: not-allowed;
}
.slot-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}
.slot-choice span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  background: var(--dy-tonal);
  color: var(--dy-heading);
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.3s ease;
}
.slot-choice:hover span {
  background: var(--dy-tonal-2);
}
.slot-choice.is-checked span {
  background: var(--dy-primary);
  color: var(--dy-on-primary);
}
.slot-choice.is-off span {
  color: var(--dy-muted);
  text-decoration: line-through;
  opacity: 0.55;
  cursor: not-allowed;
}
.slot-group + .slot-group {
  margin-top: 26px;
}
.slot-group > b {
  display: block;
  margin-bottom: 12px;
  color: var(--dy-heading);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/*----- 7.10 Wizard -----*/
.dy-wizard {
  background: var(--dy-surface);
  padding: 50px 54px;
}
.book-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin: 0 0 42px;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.book-steps.is-four {
  grid-template-columns: repeat(4, 1fr);
}
.book-steps li {
  position: relative;
  padding-top: 18px;
  border-top: 2px solid var(--dy-line);
  color: var(--dy-muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: default;
  counter-increment: step;
}
.book-steps li::before {
  content: "0" counter(step);
  display: block;
  margin-bottom: 4px;
  font-family: var(--dy-ff-display);
  font-size: 22px;
  letter-spacing: 0.04em;
}
.book-steps li.is-done {
  border-color: var(--dy-peach);
  cursor: pointer;
}
.book-steps li.is-active {
  border-color: var(--dy-sunset);
  color: var(--dy-heading);
}
.book-step {
  display: none;
}
.book-step.is-active {
  display: block;
}
.book-step > h2,
.book-step > h3 {
  margin-bottom: 8px;
}
.book-step > .step-lead {
  margin-bottom: 30px;
  color: var(--dy-muted);
}
.book-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--dy-line);
}
.book-nav [data-wiz-back]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.book-error {
  min-height: 0;
  margin: 16px 0 0;
  color: #B53A2C;
  font-size: 14.5px;
}
[data-theme="dark"] .book-error,
.is-night .book-error {
  color: #F49A8C;
}
.book-review li {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 0;
  border-bottom: 1px solid var(--dy-line);
  font-size: 15px;
}
.book-review span {
  color: var(--dy-muted);
}
.book-review b {
  color: var(--dy-heading);
  font-weight: 500;
  text-align: right;
}
.book-done {
  padding: 30px 0 10px;
  text-align: center;
}
.book-done .dy-ico {
  width: 76px;
  height: 76px;
  margin-bottom: 20px;
}
.book-done h2 {
  margin-bottom: 14px;
}
.book-done .ref {
  display: inline-block;
  margin: 18px 0 8px;
  padding: 12px 22px;
  background: var(--dy-tonal);
  color: var(--dy-heading);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.14em;
}
/* the summary beside a wizard */
.dy-summary {
  position: sticky;
  top: 110px;
  background: #000000;
  color: #CCCCCC;
}
.dy-summary .sum-photo {
  display: block;
  aspect-ratio: 16 / 10;
}
.dy-summary .sum-body {
  padding: 34px 34px 36px;
}
.dy-summary .sum-body > h2,
.dy-summary .sum-body > h3 {
  margin-bottom: 18px;
}
.dy-summary .dy-kv li {
  padding: 11px 0;
}
.dy-summary .sum-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #383838;
}
.dy-summary .sum-total span {
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.dy-summary .sum-total b {
  color: var(--dy-peach);
  font-family: var(--dy-ff-display);
  font-size: 40px;
  font-weight: 400;
  line-height: 1;
}
.dy-summary .sum-note {
  margin: 16px 0 0;
  color: #9C9C9C;
  font-size: 13.5px;
}

/*----- 7.11 Ticker -----*/
/* the base's strip of words between hairlines, asterisks between them, drifting slowly */
.dy-ticker {
  overflow: hidden;
  padding: 26px 0;
  border-top: 1px solid var(--dy-line);
  border-bottom: 1px solid var(--dy-line);
}
.dy-ticker .tk-track {
  display: flex;
  width: max-content;
  animation: dy-ticker 46s linear infinite;
}
.dy-ticker ul {
  display: flex;
  align-items: center;
  gap: 34px;
  margin: 0;
  padding: 0 34px 0 0;
  list-style: none;
}
.dy-ticker li {
  display: flex;
  align-items: center;
  gap: 34px;
  color: var(--dy-heading);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.dy-ticker li::after {
  content: "*";
  color: var(--dy-sunset);
  font-size: 22px;
}
.dy-ticker:hover .tk-track {
  animation-play-state: paused;
}
@keyframes dy-ticker {
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .dy-ticker .tk-track {
    animation: none;
  }
}

/*----- 7.12 Gallery Strip -----*/
.insta-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
.insta-row a,
.insta-grid a {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
}
.insta-row img,
.insta-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--dy-ease);
}
.insta-row a::after,
.insta-grid a::after {
  content: "\f16d";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  color: #FFFFFF;
  font-family: "Font Awesome 6 Brands";
  font-size: 26px;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.insta-row a:hover::after,
.insta-grid a:hover::after {
  opacity: 1;
}
.insta-row a:hover img,
.insta-grid a:hover img {
  transform: scale(1.06);
}
.insta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/*======================
8. Home 01 - All Day
========================*/
/*----- 8.1 Split Hero -----*/
/* the base's hero: the photograph on the left half, the copy on the night on the right; one slide per service */
.dy-hero {
  position: relative;
}
.hero-split .hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  height: clamp(640px, calc(100vh - 132px), 900px);
}
.hero-split .hero-photo {
  position: relative;
  height: 100%;
}
.hero-split .hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-split .hero-side {
  display: flex;
  align-items: center;
  padding: 0 clamp(40px, 6vw, 120px) 90px;
  background: var(--dy-bg);
}
.hero-split .hero-copy {
  max-width: 620px;
}
.hero-split .hero-copy h1,
.hero-split .hero-copy .dy-h1 {
  font-size: clamp(44px, 5.2vw, 96px);
}
.hero-copy h1,
.hero-copy .dy-h1 {
  margin-bottom: 28px;
}
.hero-copy p {
  max-width: 520px;
  margin-bottom: 40px;
  font-size: 17px;
}
.hero-split .swiper-slide {
  background: var(--dy-bg);
}
/* the bar under the copy: the slide count, the arrows and the clock's word */
.hero-bar {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 50%;
  height: 90px;
  padding: 0 clamp(40px, 6vw, 120px);
  border-top: 1px solid var(--dy-line);
}
.hero-count {
  color: var(--dy-muted);
  font-size: 13px;
  letter-spacing: 0.1em;
}
.hero-count b {
  color: var(--dy-heading);
  font-family: var(--dy-ff-display);
  font-size: 30px;
  font-weight: 400;
}
.hero-now {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  line-height: 1.4;
}
.hero-now small {
  color: var(--dy-muted);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.hero-now b {
  color: var(--dy-heading);
  font-weight: 500;
}

/*----- 8.2 The Day's Services -----*/
.services-sec .dy-title {
  margin-bottom: 70px;
}

/*----- 8.3 Our Story -----*/
.story-sec .story-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(50px, 8vw, 130px);
}
.story-sec .story-photo {
  aspect-ratio: 4 / 5;
}
.story-sec .story-copy {
  max-width: 560px;
  text-align: center;
  justify-self: center;
}
.story-sec .story-copy .dy-stars {
  margin: 20px 0 28px 0.42em;
}
.story-sign {
  display: block;
  width: 210px;
  margin: 36px auto 0;
}
.story-sign img {
  display: block;
  width: 100%;
  height: auto;
}
.story-sign .sign-light,
[data-theme="dark"] .story-sign .sign-dark,
.is-night .story-sign .sign-dark {
  display: none;
}
[data-theme="dark"] .story-sign .sign-light,
.is-night .story-sign .sign-light {
  display: block;
}
.story-sec .dy-avatars {
  margin-top: 40px;
}
.story-sec.is-oval .story-photo {
  aspect-ratio: 3 / 4.2;
  max-width: 420px;
  border-radius: 50%;
}
.story-sec.is-oval .story-copy {
  text-align: left;
  justify-self: start;
}
.story-sec.is-oval .story-copy .dy-stars {
  margin-left: 0;
}
.story-sec.is-oval .story-sign {
  margin-left: 0;
}

/*----- 8.4 Book Your Table -----*/
/* the base's split: the form on the night panel, a table seen from above on the right */
.book-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--dy-panel);
}
.book-split .bs-form {
  padding: clamp(70px, 8vw, 120px) clamp(30px, 8vw, 130px);
}
.book-split .bs-form h2 {
  margin-bottom: 18px;
}
.book-split .bs-form > p {
  max-width: 460px;
  margin-bottom: 40px;
}
.book-split .bs-photo {
  position: relative;
  min-height: 560px;
}
.book-split .bs-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.quick-book {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 20px;
  max-width: 560px;
}
.quick-book .dy-field {
  margin-bottom: 16px;
}
.quick-book .qb-foot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 30px;
  margin-top: 10px;
}
.quick-book .qb-foot small {
  color: var(--dy-muted);
  font-size: 13.5px;
}
.quick-book .qb-foot small a {
  color: var(--dy-heading);
  border-bottom: 1px solid currentColor;
}

/*----- 8.5 Dish Accordion -----*/
/* the base's dish accordion: closed dishes stand as narrow columns with their names turned upright, one stands open */
.dish-acc {
  display: flex;
  height: 640px;
  border-top: 1px solid var(--dy-line);
  border-bottom: 1px solid var(--dy-line);
}
.dish-acc .da-item {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  border-left: 1px solid var(--dy-line);
  overflow: hidden;
  transition: flex-grow 0.8s var(--dy-ease), background-color 0.4s ease;
}
.dish-acc .da-item:first-child {
  border-left: 0;
}
.dish-acc .da-item:nth-child(even) {
  background: var(--dy-surface);
}
.dish-acc .da-item.is-open {
  flex-grow: 5.6;
  background: var(--dy-bg);
}
.dish-acc .da-tab {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  padding-top: 40px;
  color: var(--dy-heading);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: opacity 0.4s ease;
}
.dish-acc .da-tab span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}
.dish-acc .da-tab:hover {
  color: var(--dy-accent);
}
.dish-acc .da-item.is-open .da-tab {
  opacity: 0;
  pointer-events: none;
}
.dish-acc .da-body {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: min(440px, 80vw);
  padding: 40px 0;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 20px);
  transition: opacity 0.5s ease, transform 0.6s var(--dy-ease), visibility 0.5s;
}
.dish-acc .da-item.is-open .da-body {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0.3s;
}
.dish-acc .da-body h3 {
  margin-bottom: 26px;
}
.dish-acc .da-body .da-photo {
  aspect-ratio: 16 / 9;
  margin-bottom: 26px;
}
.dish-acc .da-body p {
  margin-bottom: 22px;
  font-size: 15px;
}
.dish-acc .da-body .da-price {
  margin-left: 14px;
  color: var(--dy-accent);
  font-family: var(--dy-ff-display);
  font-size: 30px;
  vertical-align: middle;
}

/*----- 8.6 Latest Articles -----*/
.posts-sec .post-card h3 {
  font-family: var(--dy-ff-body);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.04em;
}

/*----- 8.7 Specialties Quote -----*/
.quote-band {
  text-align: center;
}
.quote-band h2 {
  max-width: 1000px;
  margin: 0 auto 40px;
  line-height: 1.05;
}

/*----- 8.8 The Dish List -----*/
/* the base's names set huge in a column; the photo beside them follows the name under the pointer */
.dish-list .dl-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: center;
  gap: 60px;
}
.dish-list .dl-names li + li {
  margin-top: 4px;
}
.dish-list .dl-names a {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 18px;
  color: var(--dy-heading);
  font-family: var(--dy-ff-display);
  font-size: clamp(38px, 4vw, 70px);
  line-height: 1.12;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: color 0.4s ease, padding 0.5s var(--dy-ease);
}
.dish-list .dl-names a::before {
  content: "*";
  position: absolute;
  left: -30px;
  top: 0.05em;
  color: var(--dy-sunset);
  font-family: var(--dy-ff-body);
  font-size: 30px;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.dish-list .dl-names a small {
  color: var(--dy-muted);
  font-family: var(--dy-ff-body);
  font-size: 15px;
  letter-spacing: 0.04em;
}
.dish-list .dl-names li.is-active a {
  padding-left: 14px;
  color: var(--dy-accent);
}
.dish-list .dl-names li.is-active a::before {
  opacity: 1;
}
.dish-list .dl-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  max-width: 470px;
  justify-self: end;
  width: 100%;
}
.dish-list .dl-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.6s ease, transform 1.2s var(--dy-ease);
}
.dish-list .dl-photo img.is-on {
  opacity: 1;
  transform: scale(1);
}

/*----- 8.9 Long Tradition -----*/
.tradition-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--dy-panel);
}
.tradition-split .ts-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(70px, 8vw, 120px) clamp(30px, 6vw, 110px);
}
.tradition-split .ts-copy h2 {
  margin-bottom: 26px;
}
.tradition-split .ts-copy p {
  max-width: 500px;
  margin-bottom: 40px;
}
.tradition-split .dy-kv {
  max-width: 500px;
  margin-bottom: 40px;
}
.tradition-split .ts-photo {
  position: relative;
  min-height: 600px;
}
.tradition-split .ts-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*----- 8.10 Gallery Strip -----*/
.insta-sec .dy-title h2 {
  text-transform: none;
}
.insta-sec .insta-row {
  padding: 0 14px;
}

/*======================
9. Home 02 - Day & Table
========================*/
/*----- 9.1 Full Hero -----*/
/* the base's restaurant hero: one photograph edge to edge, a title over it, long arrows at both sides */
.hero-full .swiper-slide {
  position: relative;
  height: clamp(600px, calc(100vh - 140px), 860px);
  overflow: hidden;
}
.hero-full .hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-full .swiper-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.42) 60%, rgba(0, 0, 0, 0.62) 100%);
}
.hero-full .hero-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 120px;
  text-align: center;
  --dy-heading: #FFFFFF;
  --dy-text: rgba(255, 255, 255, 0.88);
  --dy-accent: #F2C6A0;
  --dy-primary: #F2C6A0;
  --dy-on-primary: #000000;
  --dy-tonal: rgba(255, 255, 255, 0.14);
  --dy-tonal-2: rgba(255, 255, 255, 0.24);
  color: var(--dy-text);
}
.hero-full .hero-copy h1,
.hero-full .hero-copy .dy-h1 {
  font-size: clamp(50px, 6.6vw, 118px);
}
.hero-full .hero-copy p {
  margin-left: auto;
  margin-right: auto;
}
.hero-full .hero-copy .dy-btns {
  justify-content: center;
}
.hero-full .dy-arrow {
  position: absolute;
  top: 50%;
  z-index: 6;
  width: 72px;
  color: #FFFFFF;
  transform: translateY(-50%);
}
.hero-full .dy-arrow.is-prev {
  left: 26px;
}
.hero-full .dy-arrow.is-next {
  right: 26px;
}
.hero-full .dy-arrow.is-prev:hover {
  transform: translate(-5px, -50%);
  color: var(--dy-peach);
}
.hero-full .dy-arrow.is-next:hover {
  transform: translate(5px, -50%);
  color: var(--dy-peach);
}
.hero-full .hero-dots,
.hero-full .hero-dots.swiper-pagination-horizontal {
  position: absolute;
  left: 50%;
  bottom: 34px;
  z-index: 6;
  width: auto;
  justify-content: center;
  color: #FFFFFF;
  transform: translateX(-50%);
}

/*----- 9.2 Order Now -----*/
.order-sec .product-card {
  height: 100%;
}

/*----- 9.3 Two Menus -----*/
/* the base's two menus, zig-zag: an arch photo beside the lunch list, an oval beside the cocktails */
.menu-zig {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(50px, 8vw, 120px);
}
.menu-zig + .menu-zig {
  margin-top: 110px;
}
.menu-zig.is-flip {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
}
.menu-zig.is-flip .mz-photo {
  order: 2;
}
.menu-zig .mz-photo {
  aspect-ratio: 4 / 5.2;
  max-width: 440px;
  width: 100%;
  justify-self: center;
}
.menu-zig .mz-copy h3 {
  margin-bottom: 14px;
}
.menu-zig .mz-copy .mz-hours {
  display: block;
  margin-bottom: 36px;
  color: var(--dy-muted);
  font-size: 14px;
}
.menu-zig .mz-copy .dy-more {
  margin-top: 36px;
}

/*----- 9.4 Our Menu Split -----*/
.menu-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--dy-line);
  border-bottom: 1px solid var(--dy-line);
}
.menu-split .ms-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 90px 30px;
  text-align: center;
}
.menu-split .ms-arch {
  width: min(300px, 70%);
  aspect-ratio: 3 / 4;
  margin-bottom: 36px;
}
.menu-split .ms-left h2 {
  margin-bottom: 18px;
  font-size: clamp(34px, 3vw, 52px);
}
.menu-split .ms-right {
  position: relative;
  min-height: 560px;
}
.menu-split .ms-right img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*----- 9.5 Visit Us -----*/
.visit-sec {
  text-align: center;
}
.visit-sec address {
  margin: 0 0 8px;
  color: var(--dy-text);
  font-size: 16px;
  font-style: normal;
}
.visit-sec .visit-open {
  display: inline-flex;
  margin-bottom: 40px;
  color: var(--dy-heading);
  font-weight: 500;
}
.visit-sec .dy-hours {
  max-width: 520px;
  margin: 0 auto;
  text-align: left;
}
.visit-sec .story-sign {
  margin-top: 46px;
}

/*----- 9.6 Hours List -----*/
.dy-hours li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--dy-line);
  font-size: 14.5px;
}
.dy-hours li:last-child {
  border-bottom: 0;
}
.dy-hours li span {
  color: var(--dy-heading);
  font-weight: 500;
}
.dy-hours li i {
  flex: 1;
}
.dy-hours li b {
  color: var(--dy-text);
  font-weight: 400;
}
.dy-hours li.is-today span,
.dy-hours li.is-today b {
  color: var(--dy-accent);
}
.dy-hours li.is-today span::after {
  content: "Today";
  margin-left: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--dy-peach);
  color: #000000;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  vertical-align: 2px;
}

/*======================
10. Home 03 - Bar & Late
========================*/
/*----- 10.1 Bistro Hero -----*/
/* the base's bistro hero: the name set across the night, a line under it, the photograph full width below */
.hero-bistro .hb-top {
  padding: 70px 0 54px;
  text-align: center;
}
.hero-bistro .hb-top h1,
.hero-bistro .hb-top .dy-h1 {
  font-size: clamp(56px, 9.4vw, 176px);
  line-height: 0.92;
}
.hero-bistro .hb-top p {
  max-width: 560px;
  margin: 26px auto 0;
}
.hero-bistro .hb-photo {
  position: relative;
  height: clamp(360px, 52vh, 560px);
}
.hero-bistro .hb-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-bistro .hb-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 44px;
  border-top: 1px solid var(--dy-line);
}
.hero-bistro .hb-bar .slider-nav {
  gap: 10px;
}

/*----- 10.2 Bistro Menu -----*/
/* the base's menu between two photographs set at different heights */
.bistro-menu .bm-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.1fr) minmax(0, 0.8fr);
  gap: 50px;
}
.bistro-menu .bm-photo {
  aspect-ratio: 4 / 5;
}
.bistro-menu .bm-photo.is-low {
  align-self: end;
}
.bistro-menu .bm-photo.is-mono img {
  filter: grayscale(1);
}
.bistro-menu .bm-groups {
  text-align: center;
}
.bistro-menu .bm-group + .bm-group {
  margin-top: 56px;
}
.bistro-menu .bm-group h3 {
  margin-bottom: 18px;
}
.bistro-menu .bm-group .bm-when {
  display: block;
  margin: -10px 0 16px;
  color: var(--dy-accent);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.bistro-menu .bm-group li {
  padding: 3px 0;
  color: var(--dy-text);
  font-size: 15px;
}
.bistro-menu .bm-group li b {
  color: var(--dy-heading);
  font-weight: 400;
}

/*----- 10.3 Video Band -----*/
.video-band {
  position: relative;
  height: clamp(380px, 52vw, 640px);
  overflow: clip;
}
.video-band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
}
.video-band .dy-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.video-band .dy-play:hover {
  transform: translate(-50%, -50%) scale(1.06);
}

/*----- 10.4 Voices Slider -----*/
.voice-slider-sec .vs-wrap {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 30px;
}
.voice-slider-sec .swiper {
  width: 100%;
  min-width: 0;
  margin: 0;
}

/*----- 10.5 Mosaic -----*/
/* the base's gallery mosaic: small squares round one large photograph, black and white beside colour */
.mosaic {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: clamp(150px, 15vw, 280px);
  gap: 10px;
}
.mosaic a {
  position: relative;
  display: block;
  overflow: hidden;
}
.mosaic a.is-big {
  grid-column: span 2;
  grid-row: span 2;
}
.mosaic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--dy-ease), filter 0.6s ease;
}
.mosaic a.is-mono img {
  filter: grayscale(1);
}
.mosaic a:hover img {
  transform: scale(1.05);
}

/*----- 10.6 Bar Team -----*/
.team-two {
  max-width: 980px;
  margin: 0 auto;
}

/*======================
11. Scroll Moments
========================*/
/*----- 11.1 The Clock -----*/
/* Home 1: the section is tall and its stage stays on screen (CSS sticky); the hands sweep from 8 am to midnight on the
   section's own travel and the menu under them switches with the service */
.clock-sec {
  position: relative;
  height: 340vh;
}
.clock-stick {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
  padding: 96px 0 30px;
}
.clock-sec.is-static {
  height: auto;
}
.clock-sec.is-static .clock-stick {
  position: static;
  height: auto;
  padding: 130px 0;
}
.clock-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(50px, 7vw, 120px);
}
.clock-side {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.clock-face {
  position: relative;
  width: min(440px, 34vw, 52vh);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--dy-surface);
  box-shadow: 0 0 0 1px var(--dy-line), 0 40px 80px rgba(17, 12, 6, 0.1);
  --h: 240deg;
  --m: 0deg;
  --day: 0deg;
}
.is-night .clock-face,
[data-theme="dark"] .clock-face {
  box-shadow: 0 0 0 1px var(--dy-line), 0 40px 80px rgba(0, 0, 0, 0.5);
}
/* sixty minute ticks and twelve hour ticks, cut to a ring */
.cf-ticks {
  position: absolute;
  inset: 5%;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from -1deg, var(--dy-heading) 0 2deg, transparent 2deg 30deg),
    repeating-conic-gradient(from -0.3deg, var(--dy-line-2) 0 0.6deg, transparent 0.6deg 6deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 calc(100% - 16px), #000000 calc(100% - 16px) 100%, transparent 100%);
  mask: radial-gradient(circle closest-side, transparent 0 calc(100% - 16px), #000000 calc(100% - 16px) 100%, transparent 100%);
}
/* the day so far: a peach arc from 8 am round the inner ring */
.cf-day {
  position: absolute;
  inset: 27%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--dy-peach) 0 var(--day), var(--dy-line) var(--day) 360deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 calc(100% - 3px), #000000 calc(100% - 3px) 100%, transparent 100%);
  mask: radial-gradient(circle closest-side, transparent 0 calc(100% - 3px), #000000 calc(100% - 3px) 100%, transparent 100%);
}
.cf-num {
  position: absolute;
  color: var(--dy-heading);
  font-family: var(--dy-ff-display);
  font-size: clamp(24px, 2.4vw, 40px);
  line-height: 1;
  transform: translate(-50%, -50%);
}
.cf-num.n12 {
  left: 50%;
  top: 18%;
}
.cf-num.n3 {
  left: 82%;
  top: 50%;
}
.cf-num.n6 {
  left: 50%;
  top: 82%;
}
.cf-num.n9 {
  left: 18%;
  top: 50%;
}
.cf-hand {
  position: absolute;
  left: 50%;
  bottom: 50%;
  border-radius: 3px;
  transform-origin: 50% 100%;
}
.cf-hand.is-hour {
  width: 6px;
  height: 25%;
  margin-left: -3px;
  background: var(--dy-heading);
  transform: rotate(var(--h));
}
.cf-hand.is-min {
  width: 2px;
  height: 37%;
  margin-left: -1px;
  background: var(--dy-sunset);
  transform: rotate(var(--m));
}
.cf-pin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: var(--dy-peach);
  box-shadow: 0 0 0 4px var(--dy-surface);
}
.clock-read {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 34px;
  color: var(--dy-heading);
}
.clock-read b {
  font-family: var(--dy-ff-display);
  font-size: clamp(44px, 4vw, 66px);
  font-weight: 400;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.clock-read small {
  color: var(--dy-muted);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.clock-panels {
  display: grid;
}
.clock-panel {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.6s var(--dy-ease), visibility 0.5s;
}
.clock-panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.clock-panel h3 {
  margin-bottom: 10px;
  font-size: clamp(40px, 4.2vw, 72px);
}
.clock-panel .cp-hours {
  display: block;
  margin-bottom: 8px;
  color: var(--dy-heading);
  font-size: 15px;
}
.clock-panel .cp-line {
  margin-bottom: 30px;
  color: var(--dy-muted);
}
.clock-panel .dy-menu-list > li {
  padding-bottom: 18px;
}
.clock-panel .dy-more {
  margin-top: 26px;
}
.clock-rail {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: 46px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--dy-line);
}
.clock-rail li {
  position: relative;
  padding-top: 16px;
  color: var(--dy-muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color 0.4s ease;
}
.clock-rail li::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 2px;
  background: var(--dy-sunset);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--dy-ease);
}
.clock-rail li b {
  display: block;
  color: var(--dy-heading);
  font-weight: 500;
}
.clock-rail li.is-past::before,
.clock-rail li.is-active::before {
  transform: scaleX(1);
}
.clock-rail li.is-active {
  color: var(--dy-accent);
}

/*----- 11.2 The Table -----*/
/* Home 2: sharing plates slide in from the edges of a round table and settle round its middle as the section travels */
.share-sec {
  overflow: clip;
}
.share-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(50px, 7vw, 110px);
}
.share-intro h2 {
  margin-bottom: 24px;
}
.share-intro > p {
  max-width: 520px;
  margin-bottom: 34px;
}
.share-mini {
  max-width: 520px;
  padding: 30px;
  background: var(--dy-surface);
}
.share-mini .sm-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}
.share-mini .sm-row .dy-label {
  margin: 0;
}
.share-mini .dy-kv {
  margin-bottom: 26px;
}
.share-mini .dy-kv b {
  font-family: var(--dy-ff-display);
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
}
.share-table {
  position: relative;
  width: 100%;
  max-width: 620px;
  aspect-ratio: 1;
  justify-self: center;
}
.table-top {
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%, rgba(255, 214, 170, 0.22), transparent 55%),
    repeating-linear-gradient(97deg, rgba(0, 0, 0, 0) 0 9px, rgba(0, 0, 0, 0.12) 9px 11px, rgba(255, 255, 255, 0.03) 11px 23px),
    radial-gradient(circle, #6B4429 0%, #4B2E1B 64%, #33200F 100%);
  box-shadow: inset 0 0 0 10px rgba(0, 0, 0, 0.2), inset 0 0 60px rgba(0, 0, 0, 0.5), 0 50px 90px rgba(0, 0, 0, 0.6);
}
.table-runner {
  position: absolute;
  left: 4%;
  right: 4%;
  top: 42%;
  height: 16%;
  background: repeating-linear-gradient(90deg, rgba(253, 248, 244, 0.94) 0 22px, rgba(242, 198, 160, 0.9) 22px 26px);
  transform: rotate(-8deg);
  opacity: 0.85;
}
.table-plate {
  position: absolute;
  z-index: 2;
  display: block;
  border-radius: 50%;
  border: 8px solid #F4EEE6;
  background: #F4EEE6;
  box-shadow: 0 16px 26px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  transform: translate(-50%, -50%);
}
.table-plate img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.table-plate.p1 {
  left: 50%;
  top: 50%;
  width: 34%;
  aspect-ratio: 1;
  z-index: 3;
}
.table-plate.p2 {
  left: 50%;
  top: 18%;
  width: 22%;
  aspect-ratio: 1;
}
.table-plate.p3 {
  left: 79%;
  top: 33%;
  width: 21%;
  aspect-ratio: 1;
}
.table-plate.p4 {
  left: 78%;
  top: 68%;
  width: 23%;
  aspect-ratio: 1;
}
.table-plate.p5 {
  left: 49%;
  top: 83%;
  width: 20%;
  aspect-ratio: 1;
}
.table-plate.p6 {
  left: 21%;
  top: 67%;
  width: 22%;
  aspect-ratio: 1;
}
.table-plate.p7 {
  left: 21%;
  top: 32%;
  width: 20%;
  aspect-ratio: 1;
}
.table-tag {
  position: absolute;
  right: 0;
  bottom: 2%;
  z-index: 5;
  padding: 14px 20px;
  background: var(--dy-peach);
  color: #000000;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/*----- 11.3 The Toast -----*/
/* Home 3: four glasses come in from four sides and tip together over the middle; a burst of light where they meet */
.toast-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(40px, 6vw, 100px);
}
.toast-copy h2 {
  margin-bottom: 22px;
}
.toast-copy > p {
  max-width: 500px;
  margin-bottom: 30px;
}
.toast-copy .toast-state {
  display: inline-flex;
  margin-bottom: 26px;
  color: var(--dy-heading);
  font-weight: 500;
}
.toast-copy .dy-kv {
  max-width: 460px;
  margin-bottom: 36px;
}
.toast-copy .dy-kv b {
  font-family: var(--dy-ff-display);
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
}
.toast-stage {
  position: relative;
  height: clamp(420px, 44vw, 640px);
  overflow: clip;
}
.toast-stage .glass {
  position: absolute;
  bottom: 0;
  height: 84%;
  width: auto;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 26px 30px rgba(0, 0, 0, 0.5));
}
.toast-stage .g1 {
  left: 2%;
  transform: rotate(12deg);
}
.toast-stage .g2 {
  left: 24%;
  transform: rotate(4deg);
}
.toast-stage .g3 {
  right: 24%;
  transform: rotate(-4deg);
}
.toast-stage .g4 {
  right: 2%;
  transform: rotate(-12deg);
}
.toast-spark {
  position: absolute;
  left: 50%;
  top: 12%;
  width: 0;
  height: 0;
  opacity: 0;
}
.toast-spark i {
  position: absolute;
  left: -1px;
  bottom: 14px;
  width: 2px;
  height: 34px;
  border-radius: 2px;
  background: linear-gradient(0deg, rgba(242, 198, 160, 0), var(--dy-peach));
  transform-origin: 50% calc(100% + 14px);
}
.toast-spark i:nth-child(1) {
  transform: rotate(-90deg);
}
.toast-spark i:nth-child(2) {
  transform: rotate(-60deg);
}
.toast-spark i:nth-child(3) {
  transform: rotate(-30deg);
}
.toast-spark i:nth-child(4) {
  transform: rotate(0deg);
}
.toast-spark i:nth-child(5) {
  transform: rotate(30deg);
}
.toast-spark i:nth-child(6) {
  transform: rotate(60deg);
}
.toast-spark i:nth-child(7) {
  transform: rotate(90deg);
}

/*======================
12. Menu Pages
========================*/
/*----- 12.1 Menu Board -----*/
/* the all-day menu: five service tabs as a ruled row, the one on now marked */
.mb-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--dy-line);
  border-bottom: 1px solid var(--dy-line);
}
.mb-tabs button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 26px 26px 24px;
  border-left: 1px solid var(--dy-line);
  text-align: left;
  transition: background-color 0.3s ease;
}
.mb-tabs button:first-child {
  border-left: 0;
}
.mb-tabs button b {
  color: var(--dy-heading);
  font-family: var(--dy-ff-display);
  font-size: clamp(22px, 1.9vw, 32px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.mb-tabs button small {
  color: var(--dy-muted);
  font-size: 13px;
}
.mb-tabs button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--dy-sunset);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--dy-ease);
}
.mb-tabs button:hover {
  background: var(--dy-alt);
}
.mb-tabs button.is-active::after {
  transform: scaleX(1);
}
.mb-tabs .mt-live {
  display: none;
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 3px 10px;
  border-radius: 12px;
  background: var(--dy-peach);
  color: #000000;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.mb-tabs button.is-live .mt-live {
  display: inline-block;
}
.mb-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 34px 0 60px;
}
.mb-search {
  position: relative;
  width: min(340px, 100%);
}
.mb-search i {
  position: absolute;
  right: 20px;
  top: 50%;
  color: var(--dy-accent);
  transform: translateY(-50%);
  pointer-events: none;
}
.mb-search .dy-input {
  height: 50px;
}
.mp-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 56px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--dy-line);
}
.mp-head h2 {
  margin-bottom: 10px;
}
.mp-head .mp-hours {
  display: block;
  margin-bottom: 8px;
  color: var(--dy-heading);
}
.mp-head p {
  color: var(--dy-muted);
}
.mp-photo {
  flex-shrink: 0;
  width: 170px;
  aspect-ratio: 3 / 4;
}
.mp-courses {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 60px 80px;
}
.mp-course h3 {
  margin-bottom: 26px;
  color: var(--dy-accent);
  font-size: 14px;
  letter-spacing: 0.2em;
}
.menu-strip {
  height: clamp(260px, 30vw, 520px);
}
.menu-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.orders-card {
  padding: 40px;
  background: var(--dy-surface);
}
.orders-card .dy-kv {
  margin-bottom: 30px;
}
.orders-now {
  margin-top: 26px;
  color: var(--dy-heading);
  font-weight: 500;
}

/*----- 12.2 Bar Menu -----*/
.bar-sec .dy-title {
  margin-bottom: 44px;
}
.jazz-kv,
.golden-kv {
  padding: 30px 34px;
  background: rgba(0, 0, 0, 0.45);
}
.join-kv {
  padding: 30px 34px;
  background: var(--dy-surface);
}
.private-sec .dy-lead {
  max-width: 620px;
  margin: 0 auto 34px;
}
.jazz-kv b,
.golden-kv b {
  font-size: 16px;
}
.golden-kv b {
  font-family: var(--dy-ff-display);
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
}
.golden-now {
  margin-top: 8px;
  color: var(--dy-heading);
  font-weight: 500;
}
.join-kv {
  margin-bottom: 30px;
}

/*======================
13. Booking & Events
========================*/
/*----- 13.1 Sharing Planner -----*/
.sp-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 10px 0 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--dy-line);
}
.sp-row .dy-label {
  margin: 0;
}
.sp-appetite {
  margin-bottom: 30px;
}
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}
.sp-spread-title {
  margin: 40px 0 10px;
}
.spread-line {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto 70px;
  align-items: center;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--dy-line);
}
.sl-plate {
  width: 64px;
  height: 64px;
  border: 4px solid #F4EEE6;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.18);
}
.sl-plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sl-body small {
  display: block;
  color: var(--dy-accent);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.sl-body b {
  color: var(--dy-heading);
  font-size: 16px;
  font-weight: 500;
}
.sl-price {
  color: var(--dy-heading);
  font-family: var(--dy-ff-display);
  font-size: 24px;
  text-align: right;
}
.sm-course + .sm-course {
  margin-top: 80px;
}
.sm-course > h3 {
  margin-bottom: 34px;
}
.plate-card {
  height: 100%;
  padding: 30px 26px 26px;
  background: var(--dy-surface);
  text-align: center;
}
.plate-card .pl-photo {
  display: block;
  width: 150px;
  height: 150px;
  margin: 0 auto 24px;
  border: 7px solid #F4EEE6;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 16px 26px rgba(0, 0, 0, 0.16);
}
.plate-card .pl-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--dy-ease);
}
.plate-card:hover .pl-photo img {
  transform: scale(1.08) rotate(6deg);
}
.plate-card h4 {
  margin-bottom: 8px;
}
.plate-card p {
  min-height: 52px;
  margin-bottom: 20px;
  color: var(--dy-muted);
  font-size: 14px;
  line-height: 1.6;
}
.pl-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.pl-foot b {
  color: var(--dy-heading);
  font-family: var(--dy-ff-display);
  font-size: 26px;
  font-weight: 400;
}
.pl-foot .dy-btn.is-added {
  background: var(--dy-peach);
  color: #000000;
}

/*----- 13.2 Booking Wizards -----*/
.bk-more-date {
  max-width: 300px;
  margin-top: 26px;
}
.bk-slots {
  margin-top: 30px;
}
.bk-occasion-l,
.gb-arrive-l {
  margin-top: 30px;
}
.bk-agree {
  margin-top: 24px;
}
.gb-rules {
  margin-top: 30px;
}
.dy-wizard .choice-card.is-off small,
.dy-wizard .choice-card.is-off .cc-fig {
  text-decoration: line-through;
}
.sum-open {
  margin-top: 18px;
  color: #FFFFFF;
  font-size: 13px;
}

/*----- 13.3 Event Calendar -----*/
.ev-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 40px;
}
.ev-month {
  width: min(260px, 100%);
}
.ev-month .select-button {
  height: 46px;
}
.ev-list {
  border-top: 1px solid var(--dy-line);
}
.ev-row {
  display: grid;
  grid-template-columns: 110px 96px minmax(0, 1fr) 200px 80px auto;
  align-items: center;
  gap: 26px;
  padding: 18px 0;
  border-bottom: 1px solid var(--dy-line);
  transition: background-color 0.3s ease;
}
.ev-row:hover {
  background: var(--dy-alt);
}
.ev-date b {
  display: block;
  color: var(--dy-heading);
  font-family: var(--dy-ff-display);
  font-size: 46px;
  font-weight: 400;
  line-height: 1;
}
.ev-date small,
.ev-name small,
.ev-seats small {
  display: block;
  color: var(--dy-muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ev-img {
  width: 96px;
  height: 72px;
  overflow: hidden;
  border-radius: 999px;
}
.ev-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ev-name small {
  color: var(--dy-accent);
}
.ev-name b {
  display: block;
  color: var(--dy-heading);
  font-size: 18px;
  font-weight: 500;
}
.ev-name em {
  color: var(--dy-muted);
  font-size: 14px;
  font-style: normal;
}
.ev-seats small {
  margin-bottom: 8px;
}
.ev-price {
  color: var(--dy-heading);
  font-family: var(--dy-ff-display);
  font-size: 28px;
}
.ev-row.is-sold .ev-name b,
.ev-row.is-sold .ev-price {
  color: var(--dy-muted);
}

/*----- 13.4 Event Page -----*/
.ep-photo {
  aspect-ratio: 16 / 10;
  margin-bottom: 50px;
}
.ep-copy h2 {
  margin-bottom: 4px;
}
.ep-copy .dy-lead {
  margin-top: 24px;
}
.ep-copy h3 {
  margin: 40px 0 10px;
}
.ep-courses {
  margin-bottom: 36px;
}
.ep-host {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.ep-host small {
  display: block;
  color: var(--dy-muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.ep-host b {
  color: var(--dy-heading);
  font-weight: 500;
}
.ticket-card {
  --dy-heading: #FFFFFF;
  --dy-text: #CCCCCC;
  --dy-muted: #9C9C9C;
  --dy-line: #262626;
  --dy-line-2: #383838;
  --dy-tonal: #1A1A1A;
  --dy-tonal-2: #262626;
  --dy-surface: #0F0F0F;
  --dy-primary: #F2C6A0;
  --dy-on-primary: #000000;
  --dy-accent: #F2C6A0;
}
.ticket-card .date-row {
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 26px;
}
.tk-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.tk-row .dy-label {
  margin: 0;
}
.ticket-card .sum-total {
  margin: 6px 0 24px;
}
.ticket-card .form-status.is-ok {
  color: #9CCB8E;
}

/*======================
14. Inner Pages
========================*/
/*----- 14.1 Sidebar & Widgets -----*/
/* Raysola's sidebar is quiet: a small heading, a coral stroke, plain lists. Raysola sets each widget on linen */
.dy-sidebar {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.dy-sidebar .widget {
  padding: 34px 32px;
  background: var(--dy-tonal);
}
.dy-sidebar .widget > h2 {
  position: relative;
  margin-bottom: 22px;
  padding-bottom: 16px;
}
.dy-sidebar .widget > h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46px;
  height: 2px;
  background: var(--dy-peach);
}
.widget-search {
  position: relative;
}
.widget-search input {
  display: block;
  width: 100%;
  height: 54px;
  padding: 0 58px 0 18px;
  border: 1px solid var(--dy-line);
  background: var(--dy-surface);
  color: var(--dy-heading);
  font-family: var(--dy-ff-body);
  font-size: 16px;
  outline: 0;
  transition: border-color 0.3s ease;
}
.widget-search input:focus {
  border-color: var(--dy-peach);
}
.widget-search button {
  position: absolute;
  top: 0;
  right: 0;
  width: 54px;
  height: 54px;
  background: var(--dy-peach);
  color: var(--dy-night);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.widget-search button:hover {
  background: var(--dy-night);
  color: #FFFFFF;
}
.widget-cats li a,
.widget-cats li button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 0;
  border-bottom: 1px solid var(--dy-line-2);
  color: var(--dy-text);
  font-size: 16px;
  text-align: start;
  transition: color 0.3s ease, padding 0.3s var(--dy-ease);
}
.widget-cats li:first-child a,
.widget-cats li:first-child button {
  padding-top: 0;
}
.widget-cats li:last-child a,
.widget-cats li:last-child button {
  border-bottom: 0;
  padding-bottom: 0;
}
.widget-cats li span {
  color: var(--dy-muted);
  font-size: 14px;
}
.widget-cats li a:hover,
.widget-cats li button:hover,
.widget-cats li button.is-active {
  color: var(--dy-accent);
}
.widget-cats li button.is-active span {
  color: var(--dy-accent);
}
.widget-nav li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  padding: 15px 20px;
  background: var(--dy-surface);
  color: var(--dy-heading);
  font-weight: 500;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.widget-nav li:last-child a {
  margin-bottom: 0;
}
.widget-nav li a i {
  color: var(--dy-accent);
  font-size: 13px;
  transition: transform 0.3s var(--dy-ease), color 0.3s ease;
}
.widget-nav li a:hover,
.widget-nav li a.is-current {
  background: var(--dy-peach);
  color: var(--dy-night);
}
.widget-nav li a:hover i,
.widget-nav li a.is-current i {
  color: var(--dy-night);
  transform: translateX(4px);
}
.side-posts li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--dy-line-2);
}
.side-posts li:first-child {
  padding-top: 0;
}
.side-posts li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.side-posts .thumb {
  flex: 0 0 78px;
  width: 78px;
  height: 78px;
  overflow: hidden;
}
.side-posts .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--dy-ease);
}
.side-posts li:hover .thumb img {
  transform: scale(1.08);
}
.side-posts .date {
  display: block;
  margin-bottom: 4px;
  color: var(--dy-accent);
  font-size: 13px;
  font-weight: 500;
}
.side-posts h3 a {
  color: var(--dy-heading);
}
.side-posts h3 a:hover {
  color: var(--dy-accent);
}
/* next masterclasses: a gold date tile beside the class and its seats */
.side-classes li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--dy-line-2);
}
.side-classes li:last-child {
  border-bottom: 0;
}
.sc-date {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: var(--dy-peach);
  color: var(--dy-night);
  line-height: 1.05;
}
.sc-date b {
  font-size: 19px;
  font-weight: 600;
}
.sc-date small {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.side-classes h3 {
  margin-bottom: 2px;
}
.side-classes .date {
  color: var(--dy-accent);
  font-size: 12px;
}
.widget-tags {
  margin: 0;
  line-height: 1.9;
}
.widget-tags a {
  color: var(--dy-text);
}
.widget-tags a:hover {
  color: var(--dy-accent);
}
.dy-sidebar .widget.widget-cta,
.faq-side .widget.widget-cta {
  position: relative;
  padding: 44px 34px;
  background: var(--dy-night);
  text-align: center;
}
.widget-cta .dy-script {
  display: block;
  color: var(--dy-peach);
  font-size: 40px;
  line-height: 1;
}
.widget-cta h2 {
  margin: 6px 0 12px;
  color: #FFFFFF;
}
.widget-cta p {
  margin-bottom: 24px;
}
.widget-line .line-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--dy-line-2);
}
.widget-line .line-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.widget-line .dy-ico {
  width: 54px;
  height: 54px;
}
.line-row small {
  display: block;
  color: var(--dy-muted);
  font-size: 13px;
}
.line-row b {
  color: var(--dy-heading);
  font-size: 18px;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.line-row:hover b {
  color: var(--dy-accent);
}

/*----- 14.2 Rows, Choices & Pages -----*/
.sum-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 18px 0 24px;
  color: var(--dy-heading);
  font-size: 18px;
  font-weight: 500;
}
.sum-total b {
  color: var(--dy-accent);
  font-size: 30px;
  font-weight: 400;
}
.dy-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 60px;
}
.dy-pagination a,
.dy-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--dy-tonal);
  color: var(--dy-heading);
  font-weight: 500;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.dy-pagination a i {
  color: var(--dy-accent);
  font-size: 13px;
}
.dy-pagination .is-current,
.dy-pagination a:hover,
.dy-pagination a:hover i {
  background: var(--dy-peach);
  color: var(--dy-night);
}
.dy-zoom {
  display: block;
  overflow: hidden;
}
.dy-zoom img {
  width: 100%;
  transition: transform 0.9s var(--dy-ease);
}
.dy-zoom:hover img {
  transform: scale(1.05);
}
.grid-empty {
  padding: 40px 0;
  color: var(--dy-muted);
  text-align: center;
}
.is-unmatched,
[data-filter-grid] > .is-hidden {
  display: none;
}
.dy-range {
  width: 100%;
  height: 4px;
  margin: 14px 0 10px;
  border-radius: 2px;
  background: var(--dy-line-2);
  accent-color: var(--dy-sunset);
  appearance: none;
  -webkit-appearance: none;
}
.dy-range::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  border: 5px solid var(--dy-surface);
  border-radius: 50%;
  background: var(--dy-peach);
  box-shadow: 0 2px 8px rgba(11, 10, 9, 0.25);
  cursor: pointer;
  -webkit-appearance: none;
}
.dy-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 5px solid var(--dy-surface);
  border-radius: 50%;
  background: var(--dy-peach);
  cursor: pointer;
}
.range-ends {
  display: flex;
  justify-content: space-between;
  color: var(--dy-muted);
  font-size: 14px;
}

/* chips: tonal round faces for amounts, days and times (the input stays in the form, hidden) */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}

/*----- 14.3 Gallery -----*/
.gallery-grid {
  column-count: 4;
  column-gap: 20px;
}
.gallery-col {
  break-inside: avoid;
  margin-bottom: 20px;
}
.gallery-item {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
}
.gallery-col.is-tall .gallery-item {
  aspect-ratio: 3 / 4.2;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--dy-ease);
}
.gi-cap {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 50px 20px 18px;
  background: linear-gradient(180deg, rgba(11, 10, 9, 0) 0%, rgba(11, 10, 9, 0.8) 100%);
  color: #FFFFFF;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.5s var(--dy-ease);
}
.gi-cap b {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.gi-cap small {
  color: var(--dy-peach-soft);
  font-family: var(--dy-ff-display);
  font-size: 22px;
}
.gallery-item:hover img {
  transform: scale(1.05);
}
.gallery-item:hover .gi-cap,
.gallery-item:focus-visible .gi-cap {
  opacity: 1;
  transform: none;
}
.gc-lead {
  max-width: 560px;
  margin: 24px auto 34px;
}

/*----- 14.4 FAQ -----*/
.faq-side {
  position: sticky;
  top: 110px;
}
.faq-side .widget {
  margin-bottom: 40px;
}
.faq-side .widget > h2 {
  margin-bottom: 18px;
}
.faq-side .cf-search {
  width: 100%;
}
.faq-group + .faq-group {
  margin-top: 60px;
}
.faq-group h2 {
  margin-bottom: 14px;
}

/*----- 14.5 Contact -----*/
.info-card {
  height: 100%;
  padding: 44px 34px 38px;
  background: var(--dy-surface);
  border: 1px solid var(--dy-line);
  text-align: center;
  transition: box-shadow 0.45s var(--dy-ease), transform 0.45s var(--dy-ease);
}
.info-card:hover {
  box-shadow: var(--dy-shadow-lg);
  transform: translateY(-6px);
}
.info-card .dy-ico {
  margin-bottom: 18px;
}
.info-card h3 {
  margin-bottom: 12px;
}
.info-card.is-night {
  border-color: var(--dy-night);
}
.info-card .dy-open {
  justify-content: center;
  color: var(--dy-accent);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.dy-reach {
  overflow: clip;
}
.dy-reach .container {
  position: relative;
  z-index: 1;
}
.dy-reach .school-hours {
  margin-top: 10px;
}
.dy-contact-map iframe {
  display: block;
  width: 100%;
  height: 460px;
  border: 0;
  filter: grayscale(1);
}
[data-theme="dark"] .dy-contact-map iframe {
  filter: grayscale(1) invert(0.9) contrast(0.9);
}

/*----- 14.6 About & Our Day -----*/
/* the base's about story: an arch and an oval either side of the centred copy */
.trio-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.2fr) minmax(0, 0.7fr);
  align-items: start;
  gap: clamp(30px, 5vw, 90px);
}
.trio-photo {
  aspect-ratio: 3 / 4;
}
.trio-photo.is-low {
  margin-top: 120px;
}
.trio-copy {
  padding-top: 40px;
  text-align: center;
}
.trio-copy .dy-stars {
  margin: 20px 0 28px 0.42em;
}
.video-band.is-color img {
  filter: none;
}
.facts-kv {
  padding: 30px 34px;
  background: var(--dy-surface);
}
.day-row {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) 270px 150px;
  align-items: center;
  gap: 40px;
  padding: 44px 0;
  border-top: 1px solid var(--dy-line);
}
.day-row:last-child {
  border-bottom: 1px solid var(--dy-line);
}
.dr-time {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dr-time b {
  color: var(--dy-heading);
  font-family: var(--dy-ff-display);
  font-size: 44px;
  font-weight: 400;
  line-height: 1;
}
.dr-body h2 {
  margin-bottom: 10px;
}
.dr-body p {
  margin-bottom: 12px;
  color: var(--dy-muted);
}
.dr-state {
  display: flex;
  margin-bottom: 18px;
  color: var(--dy-heading);
  font-size: 14px;
  font-weight: 500;
}
.day-row.is-on {
  background: linear-gradient(90deg, rgba(var(--dy-peach-rgb), 0.16), transparent 70%);
}
.day-row.is-on .dr-state::before {
  opacity: 1;
  background: var(--dy-open);
}
.dr-week li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 3px 0;
  font-size: 13.5px;
}
.dr-week span {
  color: var(--dy-muted);
}
.dr-week b {
  color: var(--dy-heading);
  font-weight: 500;
}
.dr-photo {
  aspect-ratio: 3 / 4;
}
.doors-now {
  margin: 0 0 24px;
  color: var(--dy-heading);
  font-weight: 500;
}
.doors-sec .dy-panel h3 {
  margin-bottom: 14px;
}
.doors-sec .dy-panel .dy-kv {
  margin-bottom: 28px;
}

/*----- 14.7 Team Profile -----*/
.profile-photo {
  aspect-ratio: 4 / 5.2;
}
.profile-photo img {
  object-position: center top;
}
.profile-copy h2 {
  margin-bottom: 4px;
}
.profile-copy .dy-lead {
  margin-top: 24px;
}
.profile-kv {
  margin: 30px 0 40px;
}
.profile-copy h3 {
  margin-bottom: 20px;
}
.skill-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 40px;
}
.skill > span:first-child {
  display: block;
  margin-bottom: 10px;
  color: var(--dy-heading);
  font-size: 14px;
  font-weight: 500;
}
.dish-photo {
  aspect-ratio: 4 / 5;
}
.dishes-by .dy-menu-list {
  margin: 36px 0;
}

/*----- 14.8 Bare Pages Logo -----*/
.bare-logo .logo-night,
[data-theme="dark"] .bare-logo .logo-day {
  display: none;
}
[data-theme="dark"] .bare-logo .logo-night {
  display: block;
}

/*======================
15. Care Shop
========================*/
/*----- 15.1 Shop Grid -----*/
.side-posts .thumb.is-product {
  background: var(--dy-product);
}
.side-posts .thumb.is-product img {
  object-fit: contain;
}
.tr-price {
  font-size: 16px;
  font-weight: 500;
  color: var(--dy-accent);
}
.shop-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 34px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--dy-line-2);
}
.shop-toolbar p {
  margin: 0;
}
.shop-toolbar p b {
  font-size: 22px;
  font-weight: 500;
  color: var(--dy-heading);
}
.shop-sort {
  width: 230px;
}
[data-shop-grid] > .is-hidden {
  display: none;
}
.product-card {
  height: 100%;
}
.pc-media {
  position: relative;
  overflow: hidden;
  background: var(--dy-product);
}
.pc-img {
  display: block;
}
.pc-img img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform 1s var(--dy-ease);
}
.product-card:hover .pc-img img {
  transform: scale(1.05);
}
.pc-badge {
  position: absolute;
  top: 26px;
  left: 0;
  z-index: 2;
  padding: 6px 14px;
  background: var(--dy-primary);
  color: var(--dy-on-primary);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pc-actions {
  position: absolute;
  top: 26px;
  right: 16px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pc-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 6px 16px rgba(var(--dy-night-rgb), 0.12);
  color: var(--dy-night);
  font-size: 14px;
  opacity: 0;
  transform: translateX(10px);
  transition: opacity 0.35s var(--dy-ease), transform 0.35s var(--dy-ease), background-color 0.3s var(--dy-ease), color 0.3s var(--dy-ease);
}
.pc-act:nth-child(2) {
  transition-delay: 0.05s;
}
.product-card:hover .pc-act,
.pc-act:focus,
.pc-act.is-on {
  opacity: 1;
  transform: none;
}
.pc-act:hover,
.pc-act.is-on {
  background: var(--dy-primary);
  color: var(--dy-on-primary);
}
.pc-add {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  background: var(--dy-primary);
  color: var(--dy-on-primary);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transform: translateY(100%);
  transition: transform 0.45s var(--dy-ease), background-color 0.3s var(--dy-ease);
}
.product-card:hover .pc-add,
.pc-add:focus {
  transform: none;
}
.pc-add:hover {
  background: var(--dy-night);
  color: #FFFFFF;
}
.pc-body {
  padding: 20px 0 6px;
}
.pc-cat {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dy-accent);
}
.pc-body h3 {
  margin: 4px 0 12px;
}
.pc-body h3 a {
  color: var(--dy-heading);
}
.pc-body h3 a:hover {
  color: var(--dy-accent);
}
.pc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.pc-price {
  font-size: 19px;
  font-weight: 400;
  color: var(--dy-heading);
}
.pc-price del {
  margin-left: 6px;
  font-size: 15px;
  color: var(--dy-muted);
}
.pc-stars {
  color: var(--dy-peach);
  font-size: 12px;
  letter-spacing: 1px;
}

/*----- 15.2 Product Page -----*/
.pd-main {
  position: relative;
  padding: 20px;
  background: var(--dy-product);
}
.pd-main img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}
.pd-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 14px;
}
.pd-thumbs button {
  padding: 4px;
  background: var(--dy-product);
  box-shadow: inset 0 0 0 1px var(--dy-line-2);
  transition: box-shadow 0.3s var(--dy-ease);
}
.pd-thumbs button.is-active,
.pd-thumbs button:hover {
  box-shadow: inset 0 0 0 2px var(--dy-peach);
}
.pd-thumbs img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}
.pd-info h2 {
  margin: 6px 0 14px;
}
.pd-rating {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-size: 14px;
}
.pd-price {
  margin-bottom: 20px;
  font-size: 40px;
  font-weight: 400;
  line-height: 1;
  color: var(--dy-accent);
}
.pd-price del {
  margin-left: 10px;
  font-size: 26px;
  color: var(--dy-muted);
}
.pd-info .dy-kv {
  margin: 24px 0 30px;
}
.pd-buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.pd-buy .dy-btn {
  height: 54px;
}
.pd-wish {
  width: 54px;
  height: 54px;
}
.pd-wish.is-on {
  background: var(--dy-primary);
  color: var(--dy-on-primary);
}
.pd-note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
  font-size: 14.5px;
}
.pd-note i {
  font-size: 26px;
  color: var(--dy-accent);
}
.pd-tabs {
  margin-top: 80px;
}
.pd-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  margin-bottom: 34px;
  border-bottom: 1px solid var(--dy-line-2);
}
.pd-tablist button {
  position: relative;
  padding: 0 0 18px;
  font-size: 19px;
  font-weight: 500;
  color: var(--dy-muted);
}
.pd-tablist button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--dy-peach);
  transform: scaleX(0);
  transition: transform 0.4s var(--dy-ease);
}
.pd-tablist button.is-active {
  color: var(--dy-heading);
}
.pd-tablist button.is-active::after {
  transform: scaleX(1);
}
.pd-tabs [role="tabpanel"] {
  max-width: 900px;
}
.review-list li {
  display: flex;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--dy-line);
}
.review-list img {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}
.review-list b {
  margin-right: 12px;
  font-size: 18px;
  font-weight: 500;
  color: var(--dy-heading);
}
.review-list p {
  margin: 6px 0 0;
}

/*----- 15.3 Bag, Checkout & Wishlist -----*/
.bag-lines {
  border-top: 1px solid var(--dy-line-2);
}
.bag-line {
  display: grid;
  grid-template-columns: 110px 1fr auto auto 40px;
  align-items: center;
  gap: 26px;
  padding: 22px 0;
  border-bottom: 1px solid var(--dy-line-2);
}
.bag-lines.is-wish .bag-line {
  grid-template-columns: 110px 1fr auto 40px;
}
.bl-img {
  padding: 4px;
  background: var(--dy-product);
  box-shadow: inset 0 0 0 1px var(--dy-line);
}
.bl-img img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}
.bl-cat {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dy-accent);
}
.bl-body h4 {
  margin: 2px 0 4px;
  font-size: 20px;
}
.bl-body h4 a {
  color: var(--dy-heading);
}
.bl-price {
  font-size: 14px;
  color: var(--dy-muted);
}
.bl-total {
  min-width: 90px;
  font-size: 20px;
  font-weight: 500;
  text-align: right;
  color: var(--dy-heading);
}
.bl-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--dy-tonal);
  color: var(--dy-heading);
  font-size: 13px;
  transition: background-color 0.3s var(--dy-ease), color 0.3s var(--dy-ease);
}
.bl-remove:hover {
  background: var(--dy-primary);
  color: var(--dy-on-primary);
}
.cart-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 30px;
}
.coupon-form {
  position: relative;
  display: flex;
  gap: 10px;
}
.coupon-form input {
  width: 220px;
  height: 54px;
  padding: 0 18px;
  border: 1px solid var(--dy-line-2);
  background: var(--dy-surface);
  color: var(--dy-heading);
  font-family: var(--dy-ff-body);
  font-size: 15px;
  outline: none;
}
.coupon-form input:focus {
  border-color: var(--dy-peach);
}
.coupon-form .form-status {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
  white-space: nowrap;
}
.order-summary {
  position: sticky;
  top: 120px;
}
.ship-meter {
  height: 4px;
  overflow: hidden;
  background: var(--dy-line);
}
.ship-meter span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--dy-peach);
  transition: width 0.8s var(--dy-ease);
}
.ship-note {
  margin: 10px 0 20px;
  font-size: 14px;
}
.ship-note b {
  color: var(--dy-accent);
}
.order-lines li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--dy-line);
  font-size: 15px;
}
.ol-img {
  position: relative;
  flex: 0 0 auto;
  width: 62px;
  padding: 2px;
  background: var(--dy-product);
  box-shadow: inset 0 0 0 1px var(--dy-line);
}
.ol-img img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}
.ol-img b {
  position: absolute;
  top: -8px;
  right: -8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--dy-primary);
  color: var(--dy-on-primary);
  font-size: 11px;
}
.ol-name {
  flex: 1 1 auto;
  color: var(--dy-heading);
}
.order-lines li > b {
  font-weight: 500;
  color: var(--dy-heading);
}
.order-summary .dy-kv {
  margin-top: 18px;
}
.choice-list.is-pay {
  margin: 10px 0 20px;
}
.pay-choice {
  padding: 14px 56px 14px 18px;
}
.co-terms {
  margin-bottom: 20px;
}
.cart-empty,
.order-done {
  max-width: 640px;
  margin: 0 auto;
  padding: 60px 50px;
  text-align: center;
}
.cart-empty > i {
  margin-bottom: 20px;
  font-size: 46px;
  color: var(--dy-accent);
}
.cart-empty h2,
.order-done h2 {
  margin-bottom: 12px;
}
.order-done p b {
  color: var(--dy-accent);
}

/*----- 15.4 Toast -----*/
.dy-toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background: var(--dy-night);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  color: var(--dy-cream);
  font-size: 14.5px;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 20px);
  transition: opacity 0.4s var(--dy-ease), transform 0.4s var(--dy-ease), visibility 0.4s;
}
.dy-toast i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--dy-peach);
  color: var(--dy-night);
  font-size: 11px;
}
.dy-toast.is-shown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/*----- 15.5 Product Grounds -----*/
/* white and porcelain product photographs melt into the product ground */
.pc-img img,
.pd-main img,
.pd-thumbs img,
.side-posts .thumb.is-product img,
.bl-img img,
.ol-img img {
  mix-blend-mode: multiply;
}

/*======================
16. Blog & Account
========================*/
/*----- 16.1 Blog List -----*/
/* Raysola's blog: wide photo posts with a coral date tile, and coloured quote and link posts between them */
.blog-list {
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.post-thumb {
  position: relative;
  display: block;
  overflow: hidden;
}
.post-thumb img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.9s var(--dy-ease);
}
.blog-post:hover .post-thumb img {
  transform: scale(1.04);
}
.post-date {
  position: absolute;
  left: 30px;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 84px;
  background: var(--dy-peach);
  color: var(--dy-night);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
}
.post-date b {
  font-size: 32px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
}
.post-thumb.is-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(11, 10, 9, 0.28);
}
.post-thumb.is-video .dy-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  margin: -45px 0 0 -45px;
}
.post-gallery .swiper-slide img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.mini-nav {
  position: absolute;
  top: 50%;
  left: 20px;
  right: 20px;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  margin-top: -25px;
  pointer-events: none;
}
.mini-nav .slider-arrow {
  pointer-events: auto;
}
.bp-body {
  padding-top: 30px;
}
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 26px;
  margin-bottom: 14px;
  color: var(--dy-muted);
  font-size: 14.5px;
}
.post-meta li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.post-meta .dy-face {
  width: 34px;
  height: 34px;
}
.post-meta a {
  color: var(--dy-accent);
}
.bp-body h3 a {
  color: var(--dy-heading);
}
.bp-body h3 a:hover {
  color: var(--dy-accent);
}
.bp-body .dy-rule {
  margin: 18px 0 20px;
}
.bp-body p {
  margin-bottom: 18px;
}
/* the link post on porcelain marble, the quote post on noir with gold */
.blog-post.is-link,
.blog-post.is-quote {
  position: relative;
  padding: 56px 60px;
  overflow: hidden;
}
.blog-post.is-link {
  background: var(--dy-alt);
  border-left: 3px solid var(--dy-peach);
}
.blog-post.is-quote {
  background: var(--dy-night);
  --dy-heading: #F5F1EA;
  --dy-text: rgba(245, 241, 234, 0.8);
  color: var(--dy-text);
}
.blog-post .nc-meta {
  color: var(--dy-accent);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.blog-post.is-quote .nc-meta,
.blog-post.is-quote .nc-meta a {
  color: var(--dy-peach);
}
.blog-post.is-link h3,
.blog-post.is-quote h3 {
  max-width: 560px;
  margin: 12px 0 14px;
}
.blog-post.is-quote h3 a:hover {
  color: var(--dy-peach);
}
.bp-quote {
  max-width: 600px;
  margin: 0;
  font-size: 17px;
  line-height: 1.8;
}
.bp-url {
  color: var(--dy-accent);
  font-size: 14px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.bp-glyph {
  position: absolute;
  right: 50px;
  bottom: 30px;
  color: rgba(var(--dy-peach-rgb), 0.22);
  font-size: 110px;
}
/* the audio post: a still with a player bar */
.post-audio {
  position: relative;
}
.audio-bar {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 18px;
  background: rgba(11, 10, 9, 0.78);
  color: #FFFFFF;
  font-size: 12px;
}
.dy-play.is-sm {
  width: 40px;
  height: 40px;
  font-size: 13px;
  box-shadow: none;
}
.ab-track {
  position: relative;
  flex: 1;
  height: 2px;
  background: rgba(255, 255, 255, 0.25);
}
.ab-track span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 34%;
  background: var(--dy-peach);
}

/*----- 16.2 Blog Details -----*/
.article-hero {
  position: relative;
  margin-bottom: 30px;
  overflow: hidden;
}
.article-hero img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.article-body > h2 {
  margin-bottom: 0;
}
.article-body > .dy-rule {
  margin: 20px 0 26px;
}
.article-body > h3 {
  margin: 40px 0 16px;
}
.article-quote {
  position: relative;
  margin: 40px 0;
  padding: 44px 50px 40px;
  background: var(--dy-alt);
  border-inline-start: 4px solid var(--dy-peach);
}
.article-quote p {
  margin-bottom: 14px;
  color: var(--dy-heading);
  font-size: 24px;
  line-height: 1.5;
}
.article-quote cite {
  color: var(--dy-accent);
  font-size: 42px;
  font-style: normal;
  line-height: 1;
}
.article-pair {
  margin: 10px 0 0;
}
.article-pair img {
  height: 300px;
  object-fit: cover;
}
.article-rows {
  margin: 26px 0;
}
.article-rows > div {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--dy-line);
}
.article-rows > div:first-child {
  border-top: 1px solid var(--dy-line);
}
.article-rows dt {
  color: var(--dy-heading);
  font-weight: 500;
}
.article-rows dd {
  margin: 0;
}
.article-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 40px;
  padding: 24px 0;
  border-block: 1px solid var(--dy-line);
}
.share-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--dy-peach);
  color: var(--dy-night);
  font-size: 14px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.share-copy:hover,
.share-copy.is-done {
  background: var(--dy-night);
  color: #FFFFFF;
}
.author-box {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-top: 50px;
  padding: 40px;
  background: var(--dy-tonal);
}
.author-box img {
  flex: 0 0 auto;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
}
.author-box .dy-eyebrow {
  display: block;
}
.author-box h3 {
  margin-bottom: 8px;
}
.post-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 50px 0;
}
.post-nav .pn-prev,
.post-nav .pn-next {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 42%;
  color: var(--dy-heading);
}
.post-nav .pn-next {
  text-align: end;
}
.post-nav small {
  display: block;
  color: var(--dy-accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.post-nav b {
  font-weight: 500;
}
.post-nav > a > i {
  display: inline-flex;
  flex: 0 0 46px;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--dy-tonal);
  color: var(--dy-accent);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.post-nav > a:hover > i {
  background: var(--dy-peach);
  color: var(--dy-night);
}
.post-nav .pn-all {
  color: var(--dy-accent);
  font-size: 22px;
}
.comment-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  padding: 26px 0;
  border-bottom: 1px solid var(--dy-line);
}
.comment-list li > img {
  flex: 0 0 auto;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
}
.comment-list li > div {
  flex: 1 1 0;
  min-width: 0;
}
.comment-list b {
  margin-right: 14px;
  color: var(--dy-heading);
  font-size: 18px;
  font-weight: 500;
}
.comment-list li > div > span {
  color: var(--dy-muted);
  font-size: 13.5px;
}
.comment-list p {
  margin: 8px 0 10px;
}
.comment-list ul {
  flex: 1 1 100%;
  padding-inline-start: 92px;
}
.comment-list ul li {
  padding-bottom: 0;
  border-bottom: 0;
}
.comment-form {
  margin-top: 46px;
}

/*----- 16.3 Account Pages -----*/
.account-wrap {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  max-width: 1120px;
  margin: 0 auto;
  background: var(--dy-surface);
  box-shadow: var(--dy-shadow-lg);
}
.account-side {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 600px;
  padding: 46px;
  overflow: hidden;
  background: var(--dy-night);
}
.account-side .as-photo {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.account-side::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(180deg, rgba(11, 10, 9, 0.1) 0%, rgba(11, 10, 9, 0.55) 45%, rgba(11, 10, 9, 0.95) 100%);
}
.account-side > .dy-gl {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  width: 100%;
  height: 140px;
}
.account-side .as-seal {
  width: 96px;
}
.as-copy {
  margin-top: auto;
}
.as-copy .dy-script {
  color: var(--dy-peach);
  font-size: 44px;
  line-height: 1;
}
.as-copy h2 {
  margin: 4px 0 14px;
  color: #FFFFFF;
}
.as-copy p {
  margin-bottom: 26px;
  color: rgba(255, 255, 255, 0.85);
}
.as-copy .dy-avatars .faces img,
.as-copy .dy-avatars .more {
  border-color: var(--dy-night);
}
.account-form {
  padding: 56px 54px;
}
.account-form .dy-eyebrow {
  display: block;
}
.account-form h3 {
  margin-bottom: 26px;
}
.account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 24px;
  font-size: 15px;
}
.account-row a,
.account-switch a {
  color: var(--dy-accent);
  font-weight: 500;
}
.account-terms {
  margin-bottom: 24px;
}
.account-switch {
  margin: 22px 0 0;
  font-size: 15px;
  text-align: center;
}
.pass-toggle {
  position: absolute;
  top: 37px;
  right: 8px;
  width: 42px;
  height: 42px;
  color: var(--dy-accent);
}
.pass-meter {
  height: 4px;
  margin-top: 10px;
  overflow: hidden;
  background: var(--dy-line);
}
.pass-meter span {
  display: block;
  width: 0;
  height: 100%;
  background: #C13A2C;
  transition: width 0.4s var(--dy-ease), background-color 0.4s ease;
}
.pass-meter span[data-score="2"] {
  background: var(--dy-peach-soft);
}
.pass-meter span[data-score="3"],
.pass-meter span[data-score="4"] {
  background: var(--dy-leaf);
}
.pass-hint {
  display: block;
  margin-top: 6px;
  color: var(--dy-muted);
  font-size: 13px;
}

/*----- 16.4 Coming Soon & 404 -----*/
/* a photograph on one side, the page on the other: Raysola's split, with the seal turning on the seam */
.dy-bare-page {
  min-height: 100vh;
  background: var(--dy-bg);
}
.bare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}
.bare-photo-side {
  position: relative;
  z-index: 2;
}
.bare-photo-side .bare-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 30%;
}
.bare-seal {
  position: absolute;
  top: 50%;
  right: -70px;
  z-index: 2;
  width: 140px;
  margin-top: -70px;
}
.bare-inner {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 9% 80px 12%;
  overflow: hidden;
}
.bare-inner > .dy-gl {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}
.bare-logo {
  margin-bottom: 60px;
}
.bare-logo img {
  width: auto;
  height: 58px;
}
.bare-inner h1 {
  max-width: 620px;
}
.bare-inner .dy-rule {
  margin: 24px 0;
}
.bare-inner .dy-lead {
  max-width: 560px;
}
.bare-inner .dy-btns {
  margin-top: 34px;
}
.error-code {
  display: block;
  margin-bottom: 6px;
  color: var(--dy-accent);
  font-family: var(--dy-ff-display);
  font-size: clamp(120px, 13vw, 210px);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.04em;
}
.bare-line {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 50px;
}
.bare-line .dy-ico {
  width: 58px;
  height: 58px;
}
.bare-line small {
  display: block;
  color: var(--dy-muted);
  font-size: 13px;
}
.bare-line b {
  color: var(--dy-heading);
  font-size: 22px;
  font-weight: 500;
}
.launch-count {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  width: 100%;
  max-width: 560px;
  margin: 36px 0;
}
/* the countdown in four framed diamonds' worth of gold hairline: the base's double frame */
.launch-count span {
  display: flex;
  flex-direction: column;
  padding: 20px 10px 16px;
  border: 1px solid rgba(var(--dy-peach-rgb), 0.6);
  box-shadow: inset 0 0 0 4px var(--dy-night), inset 0 0 0 5px rgba(var(--dy-peach-rgb), 0.3);
  color: var(--dy-peach);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-align: center;
  text-transform: uppercase;
}
.launch-count b {
  color: #FFFFFF;
  font-size: 44px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.bare-news {
  position: relative;
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 560px;
  margin-bottom: 40px;
}
.bare-news input {
  flex: 1 1 auto;
  min-width: 0;
  height: 58px;
  padding: 0 20px;
  border: 1px solid var(--dy-line-2);
  background: var(--dy-surface);
  color: var(--dy-heading);
  font-family: var(--dy-ff-body);
  font-size: 16px;
  outline: 0;
}
.bare-news input:focus {
  border-color: var(--dy-peach);
}
.bare-news .form-status {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
}
.mini-nav .slider-arrow {
  border-color: transparent;
  background: #FFFFFF;
  color: #0B0A09;
}

/*======================
17. Subheader
========================*/
/* Inner pages open on the night: the breadcrumb, the thin display title, the three stars and a lead on the left; the
   page's photograph in the base's arch on the right; the Golden Hour light drifting behind. */
.dy-subheader {
  position: relative;
  overflow: clip;
}
.sub-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 60px;
  padding: 80px 0 0;
}
.sub-copy {
  padding-bottom: 90px;
}
.sub-copy h1 {
  font-size: clamp(48px, 5.4vw, 92px);
}
.sub-copy .dy-lead {
  max-width: 540px;
  margin: 24px 0 0;
}
.sub-copy .sub-now {
  margin-top: 28px;
  color: var(--dy-heading);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.sub-photo {
  width: clamp(260px, 26vw, 400px);
  aspect-ratio: 3 / 3.6;
}
.dy-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  color: var(--dy-muted);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.dy-crumbs i {
  color: var(--dy-peach);
  font-size: 8px;
}
.dy-crumbs a:hover {
  color: var(--dy-accent);
}
.dy-crumbs span {
  color: var(--dy-heading);
}

/*======================
18. Footer
========================*/
/* The base's black footer in four columns; above them the footer's object, a disc that turns from sun to moon and back
   (a 2D shader), beside the doors' word for today. The Golden Hour light drifts behind the whole footer. */
.dy-footer {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: 90px 0 0;
  border-top: 1px solid #262626;
  font-size: 14.5px;
}
.footer-sky {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 50px;
  padding-bottom: 70px;
  border-bottom: 1px solid var(--dy-line);
}
.footer-disc {
  display: block;
  width: 220px;
  height: 220px;
}
.fs-copy h2 {
  margin-bottom: 14px;
}
.fs-copy .footer-open {
  color: var(--dy-heading);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.footer-widgets {
  padding-top: 70px;
}
.dy-footer .widget h2 {
  margin-bottom: 26px;
  color: #FFFFFF;
}
.footer-logo img {
  height: 40px;
  width: auto;
}
.widget-about p {
  max-width: 300px;
  margin: 26px 0 26px;
}
.footer-list li {
  margin-bottom: 14px;
}
.footer-list a,
.footer-list span {
  color: #FFFFFF;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.footer-list a:hover {
  color: var(--dy-peach);
}
.footer-news p {
  margin-bottom: 20px;
}
.footer-news form {
  display: flex;
}
.footer-news input {
  flex: 1;
  min-width: 0;
  height: 54px;
  padding: 0 18px;
  border: 1px solid #383838;
  border-right: 0;
  border-radius: 0;
  background: transparent;
  color: #FFFFFF;
  font-family: var(--dy-ff-body);
  font-size: 14px;
}
.footer-news input::placeholder {
  color: #9C9C9C;
}
.footer-news input:focus {
  outline: 0;
  border-color: var(--dy-peach);
}
.footer-news button {
  flex-shrink: 0;
  height: 54px;
  padding: 0 24px;
  background: var(--dy-cream);
  color: #000000;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background-color 0.3s ease;
}
.footer-news button:hover {
  background: var(--dy-peach);
}
.footer-news .form-status {
  margin-top: 10px;
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 30px;
  margin-top: 80px;
  padding: 28px 0;
  border-top: 1px solid var(--dy-line);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.footer-bottom p {
  margin: 0;
}
.footer-bottom a:hover {
  color: var(--dy-peach);
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 30px;
}