/* design tokens for recklessnymph */

:root {
   color-scheme: light dark;
   --accent-soft: #e9bfb2;
   --accent: #a8302a;
   --paper: #ffffff;
   --paper-soft: #fdfbf9;
   --surface: #f7f2ee;
   --ink: #000000;
   --text: #5c534a;
   --border: #e0d9d2;
   --border-soft: #ede7e1;
   --serif: "Lora", Georgia, "Times New Roman", serif;
   --sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;
   --content-width: 1120px;
}

:root[data-theme="dark"] {
   color-scheme: dark;
   --paper: #14110f;
   --paper-soft: #1a1512;
   --surface: #221a17;
   --ink: #f6f0e7;
   --text: #bdb2a5;
   --border: #3a302b;
   --border-soft: #2e2622;
   --accent: #e27b70;
   --accent-soft: #d9a596;
}

@media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]) {
      color-scheme: dark;
      --paper: #14110f;
      --paper-soft: #1a1512;
      --surface: #221a17;
      --ink: #f6f0e7;
      --text: #bdb2a5;
      --border: #3a302b;
      --border-soft: #2e2622;
      --accent: #e27b70;
      --accent-soft: #d9a596;
   }
}

*,
*::before,
*::after {
   box-sizing: border-box;
}
html {
   scroll-behavior: smooth;
   scroll-padding-top: calc(88px + env(safe-area-inset-top, 0px));
}
body {
   margin: 0;
   padding-top: env(safe-area-inset-top, 0px);
   padding-bottom: env(safe-area-inset-bottom, 0px);
   background: var(--paper);
   color: var(--text);
   font: 16px/1.85 var(--serif);
   -webkit-font-smoothing: antialiased;
}
body::before {
   content: "";
   position: fixed;
   inset: 0 0 auto;
   height: env(safe-area-inset-top, 0px);
   background: var(--paper);
   z-index: 60;
}
img,
svg {
   display: block;
   max-width: 100%;
}
a {
   color: inherit;
}
h1,
h2,
h3 {
   margin: 0;
   color: var(--ink);
   font-family: var(--serif);
   font-weight: 400;
   line-height: 1.25;
}
h1 {
   font-size: clamp(2.1rem, 5vw, 3.4rem);
}
h2 {
   font-size: clamp(1.6rem, 3vw, 2.1rem);
}
h3 {
   font-size: 1.15rem;
}
p {
   margin: 0 0 1em;
}
:focus-visible {
   outline: 2px solid var(--accent);
   outline-offset: 3px;
   border-radius: 4px;
}

.container {
   width: min(100% - 48px, var(--content-width));
   margin-inline: auto;
}
.section {
   padding: 88px 0;
}
.section--soft {
   background: var(--paper-soft);
   border-block: 1px solid var(--border-soft);
}
.section-heading {
   text-align: center;
}
.section-heading .divider {
   margin-inline: auto;
}
.eyebrow,
.button,
.text-link,
.price,
.product-note,
.review-category,
.review-meta,
.footer-legal,
.menu-toggle {
   font-family: var(--sans);
}
.eyebrow {
   color: var(--accent);
   font-size: 0.68rem;
   font-weight: 600;
   letter-spacing: 0.15em;
   text-transform: uppercase;
}

.divider {
   display: block;
   width: 65px;
   height: 1px;
   margin: 18px 0;
   background: var(--ink);
}
.button {
   display: inline-block;
   padding: 14px 28px;
   border: 1px solid var(--ink);
   border-radius: 999px;
   background: var(--ink);
   color: var(--paper);
   cursor: pointer;
   font-size: 0.7rem;
   font-weight: 600;
   letter-spacing: 0.15em;
   text-align: center;
   text-decoration: none;
   text-transform: uppercase;
   transition:
      background 0.2s,
      color 0.2s,
      border-color 0.2s;
}
.button:hover {
   border-color: var(--accent);
   background: var(--accent);
   color: var(--paper);
}
.button--outline {
   background: transparent;
   color: var(--ink);
}
.button--outline:hover {
   border-color: var(--accent-soft);
   background: var(--accent-soft);
   color: #000;
}
.button--small {
   padding: 10px 20px;
}
.text-link {
   padding-bottom: 2px;
   border-bottom: 1px solid var(--accent-soft);
   color: var(--accent);
   font-size: 0.72rem;
   letter-spacing: 0.08em;
   text-decoration: none;
}
.text-link:hover {
   border-color: var(--ink);
   color: var(--ink);
}

/* Header and navigation */
.announcement {
   padding: 8px 16px;
   background: var(--ink);
   color: var(--paper);
   font: 0.62rem/1.5 var(--sans);
   letter-spacing: 0.08em;
   text-align: center;
}
.site-header {
   position: sticky;
   top: env(safe-area-inset-top, 0px);
   z-index: 50;
   border-bottom: 1px solid var(--border-soft);
   background: var(--paper);
}
.header-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   min-height: 76px;
}
.brand {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   color: var(--ink);
   font: 600 0.78rem/1.3 var(--sans);
   letter-spacing: 0.2em;
   text-decoration: none;
   text-transform: lowercase;
   white-space: nowrap;
}
.brand svg {
   width: 14px;
   height: 14px;
}
.navigation ul {
   display: flex;
   gap: 30px;
   margin: 0;
   padding: 0;
   list-style: none;
}
.navigation a {
   padding: 6px 0;
   border-bottom: 1px solid transparent;
   color: var(--text);
   font-size: 0.95rem;
   font-style: italic;
   text-decoration: none;
}
.navigation a:hover {
   border-color: var(--accent-soft);
   color: var(--ink);
}
.header-actions {
   display: flex;
   align-items: center;
   gap: 14px;
}
.menu-toggle {
   display: none;
   padding: 8px 14px;
   border: 1px solid var(--border);
   border-radius: 999px;
   background: transparent;
   color: var(--ink);
   cursor: pointer;
   font-size: 0.65rem;
   letter-spacing: 0.12em;
   text-transform: uppercase;
}

/* Hero */
.hero,
.hero.section {
   padding: 0;
}
.hero-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   min-height: 560px;
}
.hero-image {
   height: 600px;
   overflow: hidden;
   border-right: 1px solid var(--border-soft);
}
.hero-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
}
.hero-copy {
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding: 64px clamp(24px, 6vw, 80px);
   background: var(--paper);
}
.hero-copy p {
   max-width: 44ch;
   margin-top: 18px;
}
.hero-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 14px;
   margin-top: 12px;
}
.benefit-strip {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: clamp(16px, 5vw, 64px);
   padding: 26px 24px;
   border-top: 1px solid var(--border-soft);
   border-bottom: 1px solid var(--border-soft);
   font-style: italic;
}

.benefit-strip span::before {
   content: "✧ ";
   color: var(--accent-soft);
}

/* Product list */
.product-grid {
   display: flex;
   flex-direction: column;
   gap: 18px;
   margin-top: 48px;
}
.product-card {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   align-items: stretch;
   gap: 28px;
   padding: 18px;
   border: 1px solid var(--border);
   background: var(--paper);
}
.product-card:nth-child(even) .product-image {
   order: 2;
}
.product-card:nth-child(even) .product-copy {
   order: 1;
}
.product-image {
   display: grid;
   place-items: center;
   width: 100%;
   aspect-ratio: 1 / 1;
   min-width: 0;
   overflow: hidden;
   border: 1px solid var(--border-soft);
   background: var(--surface);
}
.product-image img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: contain;
}
.product-image svg {
   width: min(90px, 30%);
   height: auto;
}
.product-copy {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   min-width: 0;
   padding: 8px 8px 8px 0;
}
.product-eyebrow {
   color: var(--accent);
   font-size: 0.68rem;
   font-weight: 600;
   letter-spacing: 0.15em;
   text-transform: uppercase;
   display: inline-block;
   margin-bottom: 14px;
}
.product-copy h3 {
   margin-top: 4px;
   font-size: clamp(1.35rem, 2vw, 1.65rem);
}
.product-copy > p {
   margin-top: 8px;
}
.product-footer {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
   width: 100%;
   margin-top: auto;
   padding-top: 1rem;
   border-top: 1px solid var(--border);
}
.product-footer .price {
   margin: 0;
}
.product-symbol {
   color: var(--accent);
   padding-left: 10px;
}
.price {
   color: var(--ink);
   font-size: 1.25rem;
}

/* Reviews */
.reviews-intro {
   max-width: 56ch;
   margin: 16px auto 0;
}
.review-meta {
   margin: 14px auto 0;
   color: var(--accent);
   font-size: 0.6rem;
   letter-spacing: 0.14em;
}
.reviews-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 0 36px;
   margin-top: 48px;
}
.review {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   gap: 24px;
   padding: 28px 0;
   border-top: 1px solid var(--border);
}
.review-quote {
   margin: 0;
   color: var(--ink);
   font-size: 1.02rem;
   line-height: 1.8;
}
.review-byline {
   display: flex;
   flex-direction: column;
   gap: 4px;
}
.review-name {
   color: var(--ink);
   font-size: 0.9rem;
}
.review-category {
   color: var(--accent);
   font-size: 0.6rem;
   font-weight: 600;
   letter-spacing: 0.13em;
}
.review-actions {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 14px;
   margin-top: 32px;
}

/* About */
.about-grid {
   display: grid;
   grid-template-columns: 0.8fr 1.2fr;
   align-items: center;
   gap: clamp(32px, 6vw, 88px);
}
.portrait {
   display: grid;
   place-items: center;
   width: 100%;
   max-width: 340px;
   aspect-ratio: 1;
   margin: auto;
   overflow: hidden;
   border: 1px solid var(--border);
   border-radius: 50%;
   background: var(--surface);
}
.portrait img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}
.about-copy {
   margin-top: 16px;
   max-width: 52ch;
}

/* On narrower layouts, stack the About details below the portrait and let the text use the available width. */
@media (max-width: 1100px) {
   .about-grid {
      grid-template-columns: minmax(0, 1fr);
      gap: 28px;
   }
   .portrait {
      max-width: 300px;
   }
   .about-grid > div:not(.portrait) {
      width: 100%;
      max-width: none;
      min-width: 0;
      margin-inline: auto;
   }
   .about-copy {
      max-width: none;
      width: 100%;
   }
}

/* Center the About content beneath the portrait at intermediate widths */
@media (min-width: 701px) and (max-width: 1100px) {
   .about-grid {
      grid-template-columns: 1fr;
      gap: 28px;
   }
   .portrait {
      max-width: 300px;
   }
   .about-grid > div:not(.portrait) {
      width: 100%;
      max-width: 760px;
      margin-inline: auto;
      text-align: left;
   }
   .about-copy {
      max-width: none;
   }
}

/* Pick-a-card video */
.video-section {
   width: 100%;
   max-width: 900px;
   margin: 40px auto 0;
}
.pile-buttons {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 10px;
   margin-bottom: 22px;
}
.pile-button {
   padding: 16px 8px;
   border: 1px solid var(--border);
   background: var(--paper);
   color: var(--ink);
   cursor: pointer;
   font: 0.7rem var(--sans);
   letter-spacing: 0.12em;
   text-transform: uppercase;
   transition:
      border-color 0.2s,
      background 0.2s;
}
.pile-button:hover {
   border-color: var(--accent);
}
.pile-button[aria-pressed="true"] {
   border-color: var(--accent);
   background: var(--accent-soft);
   color: #000;
}
.video-frame {
   position: relative;
   width: 100%;
   aspect-ratio: 16 / 9;
   overflow: hidden;
   padding: 0;
   border: 1px solid var(--border);
   background: var(--surface);
}
.video-frame iframe {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   border: 0;
}
.video-caption {
   min-height: 1.8em;
   margin: 18px 0 8px;
   font-size: 0.9rem;
   text-align: center;
}
.video-link {
   margin: 0;
   text-align: center;
}

/* FAQ and newsletter */
.faq-list {
   max-width: 720px;
   margin: 44px auto 0;
}
.faq-item {
   padding: 18px 0;
   border-top: 1px solid var(--border-soft);
}
.faq-item:last-child {
   border-bottom: 1px solid var(--border-soft);
}
.faq-item summary {
   display: flex;
   justify-content: space-between;
   gap: 16px;
   color: var(--ink);
   cursor: pointer;
   font-size: 1.05rem;
   list-style: none;
}
.faq-item summary::after {
   content: "+";
   color: var(--accent);
}
.faq-item[open] summary::after {
   content: "–";
}
.faq-item summary::-webkit-details-marker {
   display: none;
}
.faq-item p {
   margin: 10px 0 0;
   font-size: 0.95rem;
}
.newsletter-form {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 20px;
   width: min(100%, 520px);
   margin: 24px auto 0;
}

.newsletter-form label {
   position: absolute;
   left: -9999px;
}

.newsletter-form input {
   box-sizing: border-box;
   width: 100%;
   min-width: 0;
   padding: 13px 16px;
   border: 1px solid var(--border);
   border-radius: 4px;
   background: var(--paper);
   color: var(--ink);
   font: 0.9rem var(--serif);
}

.newsletter-form input:focus {
   outline: 2px solid var(--accent);
   outline-offset: 1px;
}

.newsletter-form button {
   grid-column: 1 / -1;
   justify-self: center;
}

@media (max-width: 520px) {
   .newsletter-form {
      grid-template-columns: minmax(0, 1fr);
   }

   .newsletter-form button {
      grid-column: 1;
   }
}
.form-status {
   min-height: 1.6em;
   margin-top: 14px;
   color: var(--accent);
   font-style: italic;
}
.newsletter .section-heading > svg {
   margin-inline: auto;
}

/* Footer */
.site-footer {
   padding: 64px 0 28px;
   border-top: 1px solid var(--border-soft);
   background: var(--surface);
   font-size: 0.92rem;
}
.footer-grid {
   display: grid;
   grid-template-columns: 1.4fr 1fr 1fr 1fr;
   gap: 32px;
}
.footer-grid ul {
   margin: 12px 0 0;
   padding: 0;
   list-style: none;
}
.footer-grid li {
   margin-bottom: 6px;
}
.footer-grid a {
   text-decoration: none;
}
.footer-grid a:hover {
   color: var(--ink);
   text-decoration: underline;
}
.footer-description {
   max-width: 30ch;
   margin-top: 14px;
   font-style: italic;
}
.footer-legal {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   gap: 8px;
   margin-top: 44px;
   padding-top: 20px;
   border-top: 1px solid var(--border-soft);
   font-size: 0.62rem;
   letter-spacing: 0.1em;
   text-transform: uppercase;
}

@media (max-width: 900px) {
   .hero-grid,
   .about-grid {
      grid-template-columns: 1fr;
   }
   .hero-image {
      height: auto;
      min-height: 300px;
      border-right: 0;
      border-bottom: 1px solid var(--border-soft);
   }
   .hero-image img {
      min-height: 300px;
   }
   .product-grid {
      gap: 14px;
   }
   .product-card {
      gap: 18px;
      padding: 12px;
   }
   .product-copy {
      padding: 4px 2px 4px 0;
   }
   .footer-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
   .section {
      padding: 64px 0;
   }
   .menu-toggle {
      display: block;
   }
   .navigation {
      position: absolute;
      top: 100%;
      right: 0;
      left: 0;
      display: none;
      padding: 12px 24px 20px;
      border-bottom: 1px solid var(--border-soft);
      background: var(--paper);
   }
   .navigation.is-open {
      display: block;
   }
   .navigation ul {
      flex-direction: column;
      gap: 8px;
   }
   .desktop-booking-link {
      display: none;
   }
}
@media (max-width: 700px) {
   .product-card {
      grid-template-columns: minmax(0, 1fr);
      gap: 16px;
      padding: 12px;
   }
   .product-card:nth-child(even) .product-image,
   .product-card:nth-child(even) .product-copy {
      order: initial;
   }
   .product-image {
      width: 100%;
      aspect-ratio: 1 / 1;
   }
   .product-copy {
      padding: 4px;
      font-size: 0.9rem;
   }
}
@media (max-width: 560px) {
   .product-card {
      gap: 12px;
      padding: 9px;
   }
   .product-footer {
      align-items: center;
      flex-direction: row;
      justify-content: space-between;
      gap: 10px;
   }
   .product-footer .button {
      margin-left: auto;
      text-align: center;
   }
   .reviews-grid {
      grid-template-columns: 1fr;
   }
   .review-actions {
      flex-direction: column;
      align-items: stretch;
   }
   .pile-buttons {
      gap: 6px;
   }
   .pile-button {
      padding-inline: 4px;
      font-size: 0.62rem;
   }
   .footer-grid {
      grid-template-columns: 1fr 1fr;
      gap: 24px;
   }
   .header-inner {
      gap: 10px;
   }
   .brand {
      font-size: 0.7rem;
      letter-spacing: 0.14em;
   }
}
@media (prefers-reduced-motion: reduce) {
   *,
   *::before,
   *::after {
      scroll-behavior: auto !important;
      transition: none !important;
   }
}