/* ============================================================
TUCU ATELIER — refined natural palette
============================================================ */
 :root {
   /* Warm ivory and pale linen keep the artwork in focus.
  Deep olive anchors navigation and primary actions; warm charcoal
  supplies text and photographic shading. Brass is decorative only. */
   --ivory: #f7f4ed; /* Limestone — main background */
   --sand: #e8e0d2; /* Natural linen — secondary sections */
   --olive: #48513f; /* Olive leaf — buttons / CTAs on white */
   --terracotta: #987546; /* Aged brass — small decorative accents */
   --charcoal: #2d2a26; /* Warm charcoal — text / dark hero */

   /* Same swatches as channel triplets, so they can carry an alpha. */
   --ivory-rgb: 247, 244, 237;
   --sand-rgb: 232, 224, 210;
   --olive-rgb: 72, 81, 63;
   --terracotta-rgb: 152, 117, 70;
   --charcoal-rgb: 45, 42, 38;

   /* Everything below is mixed from the swatches above. */
   --ivory-warm: color-mix(
     in srgb,
     var(--ivory) 72%,
     var(--sand)
   ); /* card ground */
   --rule: rgba(var(--charcoal-rgb), 0.16);

   --ink-soft: rgba(var(--charcoal-rgb), 0.82); /* body copy on ivory */
   --ink-mute: rgba(var(--charcoal-rgb), 0.68);
   --paper-soft: rgba(var(--ivory-rgb), 0.9); /* body copy on charcoal */
   --paper-mute: rgba(var(--ivory-rgb), 0.68);

   --rule-on-dark: rgba(var(--ivory-rgb), 0.18); /* dividers on olive */

   --ink: var(--charcoal); /* body/display text */

   /* Handwritten display face. Body copy and nav stay in Montserrat: Caveat
  is lovely large, but unreadable at 10-13px in long runs. */
   --font-display: "Caveat", "Segoe Script", cursive;
   --font-ui: "Montserrat", "Helvetica Neue", Arial, sans-serif;
   --font-script: "Allura", cursive;

   --maxw: 1180px;
   --gutter: clamp(1.25rem, 4vw, 3.5rem);
   --section: clamp(4rem, 9vw, 7.5rem);
 }

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

 html {
   scroll-behavior: smooth;
 }

 body {
   margin: 0;
   background: var(--ivory);
   color: var(--ink);
   font-family: var(--font-ui);
   font-weight: 300;
   font-size: 16px;
   line-height: 1.75;
   -webkit-font-smoothing: antialiased;
 }

 img {
   display: block;
   max-width: 100%;
 }

 a {
   color: inherit;
   text-decoration: none;
 }

 .wrap {
   width: 100%;
   max-width: var(--maxw);
   margin-inline: auto;
   padding-inline: var(--gutter);
 }

 /* --- shared type ------------------------------------------- */

 .eyebrow {
   font-family: var(--font-ui);
   font-size: 0.6875rem;
   font-weight: 500;
   letter-spacing: 0.32em;
   text-transform: uppercase;
 }

 h1,
 h2,
 h3 {
   font-family: var(--font-display);
   font-weight: 400;
   margin: 0;
   line-height: 1.15;
 }

 .script {
   font-family: var(--font-script);
   font-weight: 400;
   line-height: 1.2;
 }

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

 button, .btn { border-radius: .6rem; }

 .btn {
   display: inline-flex;
   align-items: center;
   gap: 0.75em;
   padding: 0.95em 1.9em;
   border: 1px solid currentColor;
   font-size: 0.6875rem;
   font-weight: 500;
   letter-spacing: 0.22em;
   text-transform: uppercase;
   transition:
     background-color 0.35s ease,
     color 0.35s ease;
 }
 .btn .arrow {
   transition: transform 0.35s ease;
 }
 .btn:hover .arrow {
   transform: translateX(4px);
 }

 .btn--light {
   color: var(--ivory);
 }
 .btn--light:hover {
   background: var(--ivory);
   color: var(--ink);
 }

 .btn--dark {
   background: var(--olive);
   border-color: var(--olive);
   color: var(--ivory);
 }
 .btn--dark:hover {
   background: var(--charcoal);
   border-color: var(--charcoal);
   color: var(--ivory);
 }

 /* ============================================================
HEADER
============================================================ */

 /* Header and footer share the same olive ground and ivory text. */
 .site-header {
   position: sticky;
   top: 0;
   z-index: 50;
   background: var(--olive);
   color: var(--ivory);
   border-bottom: 1px solid var(--rule-on-dark);
 }

 .site-header { transition: transform .22s ease; }
 .site-header.is-scroll-hidden { transform: translateY(-100%); }
 @media (prefers-reduced-motion: reduce) {
   .site-header { transition: none; }
 }

 /* Three-column grid: logo pinned left, nav centered, actions pinned right.
Using grid (not flex) guarantees the nav is centered relative to the
header itself, not relative to the leftover space between logo and icons.
We override .wrap's horizontal padding and go full-bleed so the logo sits
flush to the left edge (just a small gutter) rather than being inset by
the content column's gutter. */
 .site-header__inner,
 .site-footer__inner {
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   align-items: center;
   gap: clamp(1rem, 3vw, 2.5rem);
   padding-block: 0.9rem;
   max-width: none;
   padding-inline: clamp(0.75rem, 2vw, 1.5rem);
 }

 .nav,
 .footer-nav {
   display: flex;
   gap: clamp(1.25rem, 2.5vw, 2.5rem);
   align-items: center;
   justify-content: center;
   justify-self: center;
 }

 .header-actions {
   display: flex;
   align-items: center;
   gap: 0.75rem;
   flex: none;
   justify-self: end;
 }

 .nav a,
 .footer-nav a {
   font-size: clamp(0.875rem, 1.1vw, 1rem);
   font-weight: 500;
   letter-spacing: 0.18em;
   text-transform: uppercase;
   padding-bottom: 4px;
   border-bottom: 1px solid transparent;
   transition: border-color 0.3s ease;
   white-space: nowrap;
   color: var(--ivory);
 }
 /* Sand, not terracotta: terracotta goes muddy against the olive ground. */
 .nav a:hover,
 .nav a[aria-current="location"],
 .footer-nav a:hover {
   border-bottom-color: var(--sand);
 }

 .wordmark {
   display: block;
   line-height: 0;
   flex: none;
 }
 /* Width, not height, drives the lockup: below about 150px the ATELIER
subtitle stops being legible. */
 .wordmark__logo {
   display: block;
   width: clamp(9.5rem, 14vw, 12rem);
   height: auto;
   fill: currentColor;
 }

 .icon-btn {
   display: inline-grid;
   place-items: center;
   width: 2rem;
   height: 2rem;
   opacity: 0.75;
   transition: opacity 0.3s ease;
 }
 .icon-btn:hover {
   opacity: 1;
 }

 /* ============================================================
HERO
============================================================ */

 /* Full-width photograph with shaded text and a solid olive CTA. */
 .hero {
   display: flex;
   flex-direction: column;
   background: var(--ivory);
 }

 /* Single-image hero. The source photograph is 2880 × 1728 (5 : 3), so
we give the container the same aspect ratio and use object-fit: cover
to fill the frame edge-to-edge without any letter-box bars. */
 .hero__media {
   position: relative;
   width: 100%;
   aspect-ratio: 5 / 3;
   max-height: 90vh;
   overflow: hidden;
   background: var(--ivory);
 }
 .hero__media img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
 }

 /* Shade the text side while letting the artwork remain luminous. */
 .hero__media::after {
   content: "";
   position: absolute;
   inset: 0;
   pointer-events: none;
   background: linear-gradient(
     90deg,
     rgba(var(--charcoal-rgb), 0.62) 0%,
     rgba(var(--charcoal-rgb), 0.40) 35%,
     rgba(var(--charcoal-rgb), 0) 70%
   );
 }

 /* Keep the handwriting and CTA above the photographic shading. */
 .hero__overlay {
   position: absolute;
   z-index: 1;
   top: clamp(5rem, 14vw, 10rem);
   left: clamp(1rem, 3vw, 2.5rem);
   right: clamp(1rem, 3vw, 2.5rem);
   max-width: min(42rem, 90%);
   text-align: left;
   pointer-events: none; /* the photo isn't interactive, keep clicks clean */
 }
 .hero__overlay-svg {
   display: block;
   width: 100%;
   height: auto;
   filter: drop-shadow(0 1px 2px rgba(var(--charcoal-rgb), 0.35));
 }

 /* CTA button sits beneath the handwriting SVG and fades in once the
write-on animation finishes. The button is interactive, so re-enable
pointer events on it even though the overlay container is click-neutral.
The button is horizontally centered under the SVG using auto margins
(since the overlay container is left-aligned by default). */
 .hero__overlay .btn {
   display: flex;
   width: fit-content;
   margin: clamp(1rem, 2.5vw, 1.75rem) auto 0;
   color: var(--ivory);
   border-color: var(--olive);
   background: var(--olive);
   pointer-events: auto;
   opacity: 0;
   animation: heroCtaIn 0.6s ease forwards;
   animation-delay: 9s;
   filter: drop-shadow(0 1px 2px rgba(var(--charcoal-rgb), 0.35));
 }
 .hero__overlay .btn:hover {
   background: var(--charcoal);
   border-color: var(--charcoal);
   color: var(--ivory);
 }
 @keyframes heroCtaIn {
   from {
     opacity: 0;
     transform: translateY(0.4rem);
   }
   to {
     opacity: 1;
     transform: none;
   }
 }
 @media (prefers-reduced-motion: reduce) {
   .hero__overlay .btn {
     opacity: 1;
     animation: none;
   }
 }

 /* ============================================================
ART STUDIO — featured pieces grid
============================================================ */

 .art-studio-band {
   background: var(--sand);
   color: var(--ink);
 }

 .art-studio__header {
   text-align: center;
   padding-block: clamp(2.5rem, 6vw, 4rem) clamp(1rem, 2vw, 1.5rem);
 }
 .art-studio__eyebrow {
   font-family: var(--font-ui);
   font-size: 0.6875rem;
   font-weight: 500;
   letter-spacing: 0.32em;
   text-transform: uppercase;
   color: var(--olive);
   margin: 0;
 }
 .art-studio__title {
   font-family: var(--font-display);
   font-size: clamp(2.3rem, 5vw, 3.4rem);
   font-weight: 600;
   letter-spacing: 0.01em;
   margin-top: 0.25em;
 }
 .art-studio__lede {
   font-family: var(--font-ui);
   font-size: 0.9375rem;
   line-height: 1.85;
   color: var(--ink-soft);
   margin: 1.5rem auto 0;
   max-width: 36rem;
   text-align: left;
 }
 .art-studio__lede p {
   margin: 1.25em 0 0;
 }
 .art-studio__lede .art-studio__motto {
   margin-top: 0;
   font-family: var(--font-display);
   font-size: clamp(1.6rem, 3vw, 2rem);
   line-height: 1.3;
   font-weight: 600;
   color: var(--olive);
   text-align: center;
 }
 .art-studio__closing {
   color: var(--olive);
   font-weight: 500;
   text-align: center;
 }

 /* 4-up grid of pieces. Collapses to 2-up (≤900px) and 1-up (≤520px). */
 .studios {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: clamp(1rem, 2vw, 1.75rem);
   padding-block: clamp(1rem, 2.2vw, 1.75rem) clamp(2.5rem, 6vw, 4rem);
 }

 .studio, .studio__media, .studio__media img, .studio__media video, .studio__body, .studio button { border-radius: 0; }

 .studio {
   background: var(--ivory-warm);
   display: flex;
   flex-direction: column;
   text-align: center;
 }

 .studio__media {
   aspect-ratio: 3 / 4;
   overflow: hidden;
 }
 .studio__media img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
 }
 .studio:hover .studio__media img {
   transform: scale(1.045);
 }


 .studio__preview {
   position: relative;
   display: block;
   width: 100%;
   padding: 0;
   border: 0;
   background: var(--ivory-warm);
   cursor: pointer;
   font: inherit;
 }
 .studio__preview:focus-visible {
   outline: 3px solid var(--olive);
   outline-offset: 4px;
 }
 .studio__video {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
   background: var(--charcoal);
   opacity: 0;
   pointer-events: none;
 }
 .studio.is-video-playing .studio__video { opacity: 1; }
 .studio__preview-hint {
   position: absolute;
   right: 0.6rem;
   bottom: 0.6rem;
   padding: 0.35em 0.65em;
   background: var(--olive);
   color: var(--ivory);
   font-size: 0.6875rem;
   font-weight: 500;
   pointer-events: none;
 }

 .studio__body {
   background: var(--olive);
   color: var(--ivory);
   min-height: 8rem;
   padding: 1.5rem clamp(0.9rem, 2vw, 1.4rem);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   flex: 1;
 }

 .studio__title {
   font-family: var(--font-display);
   font-size: clamp(1.4rem, 2.4vw, 1.9rem);
   font-weight: 600;
   letter-spacing: 0.01em;
 }

 /* ============================================================
STORY BAND
============================================================ */

 .story {
   position: relative;
   display: grid;
   place-items: center;
   text-align: center;
   min-height: clamp(19rem, 46vh, 26rem);
   overflow: hidden;
   background: var(--charcoal);
   isolation: isolate;
   margin-top: clamp(1rem, 2.2vw, 1.75rem);
 }
 .story__media {
   position: absolute;
   inset: 0;
   z-index: -2;
 }
 .story__media img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: 50% 30%;
 }
 .story::after {
   content: "";
   position: absolute;
   inset: 0;
   z-index: -1;
   background: linear-gradient(
     180deg,
     rgba(var(--charcoal-rgb), 0.7),
     rgba(var(--charcoal-rgb), 0.84)
   );
 }

 .story__inner {
   color: var(--ivory);
   padding: clamp(3.25rem, 8vw, 5rem) var(--gutter);
   width: 100%;
   max-width: 46rem;
 }
 .story .eyebrow {
   margin: 0;
   color: var(--sand);
 }
 .story h2 {
   font-size: clamp(2.3rem, 5vw, 3.4rem);
   font-weight: 600;
   letter-spacing: 0.01em;
   margin-top: 0.35em;
 }
 .story__copy {
   max-width: 36rem;
   margin: 1.75rem auto 0;
   text-align: left;
 }
 .story__copy p {
   font-family: var(--font-ui);
   font-size: 0.9375rem;
   line-height: 1.95;
   color: var(--paper-soft);
   margin: 1.25em 0 0;
 }
 .story__copy p:first-child {
   margin-top: 0;
 }

 /* ============================================================
GALLERY STRIP + HANDMADE WITH SOUL
============================================================ */

 .strip {
   display: grid;
   grid-template-columns: repeat(3, 1fr) minmax(10rem, 0.85fr);
   gap: clamp(0.75rem, 1.6vw, 1.25rem);
   /* Must NOT be `stretch`: stretching an aspect-ratio tile to the row
  height makes it demand a matching width, which starves the script
  column and pushes its text out from under the images. */
   align-items: center;
   padding-block: clamp(1rem, 2.2vw, 1.75rem);
 }
 /* Let every cell shrink below its content's min-content width. */
 .strip > * {
   min-width: 0;
 }

 .strip__fig {
   position: relative;
   /* Portrait, to match the source photographs — a square crop cut the
  sculptures off at the waist. */
   aspect-ratio: 4 / 5;
   overflow: hidden;
   margin: 0;
   background: var(--ivory-warm);
 }
 .strip__fig img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: 50% 28%; /* favour the top: that's where the heads are */
   transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
 }
 .strip__fig:hover img {
   transform: scale(1.06);
 }

 .strip__fig figcaption {
   position: absolute;
   inset: auto 0 0 0;
   padding: 1.6em 1em 1em;
   background: linear-gradient(
     transparent,
     rgba(var(--charcoal-rgb), 0.8)
   );
   color: var(--ivory);
   font-size: 0.5625rem;
   font-weight: 500;
   letter-spacing: 0.22em;
   text-transform: uppercase;
   opacity: 0;
   transform: translateY(0.5rem);
   transition:
     opacity 0.4s ease,
     transform 0.4s ease;
 }
 .strip__fig:hover figcaption,
 .strip__fig:focus-within figcaption {
   opacity: 1;
   transform: none;
 }

 .soul {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   text-align: center;
   padding: 1.25rem 0.5rem;
 }
 .soul__line {
   font-family: var(--font-script);
   /* Sized to fit the narrow 4th column — Allura is wide for its size. */
   font-size: clamp(1.4rem, 2.5vw, 2.1rem);
   line-height: 1.3; /* room for Allura's long descenders */
   color: var(--ink);
   margin: 0;
   max-width: 100%;
 }
 .soul__heart {
   color: var(--terracotta);
   font-size: 1.1rem;
   margin: 0.5em 0 0;
 }

 /* ============================================================
VALUES ROW (icons & elements)
============================================================ */

 .values {
   border-top: 1px solid var(--rule);
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
   gap: clamp(2rem, 5vw, 3.5rem);
   padding-block: clamp(3rem, 7vw, 5rem);
   text-align: center;
 }
 .value svg {
   margin-inline: auto;
   color: var(--olive);
 }
 .value h3 {
   font-size: 0.75rem;
   font-family: var(--font-ui);
   font-weight: 500;
   letter-spacing: 0.26em;
   text-transform: uppercase;
   margin-top: 1.25em;
 }
 .value p {
   font-size: 0.8125rem;
   line-height: 1.9;
   color: var(--ink-soft);
   margin: 0.9em auto 0;
   max-width: 20rem;
 }

 /* ============================================================
FOOTER
============================================================ */

 .site-footer {
   background: var(--olive);
   color: var(--ivory);
 }

 .social {
   display: flex;
   align-items: center;
   gap: 0.75rem;
   justify-content: flex-end;
   justify-self: end;
 }
 .social a {
   display: inline-grid;
   place-items: center;
   width: 2rem;
   height: 2rem;
   opacity: 0.8;
   transition: opacity 0.3s ease;
 }
 .social a:hover {
   opacity: 1;
 }

 .legal {
   border-top: 1px solid var(--rule-on-dark);
   text-align: center;
   font-size: 0.625rem;
   letter-spacing: 0.1em;
   color: var(--paper-mute);
   padding-block: 1.5rem;
 }

 /* ============================================================
RESPONSIVE
============================================================ */

 @media (max-width: 900px) {
   /* Header and footer: logo + icons on row 1 (logo pinned upper-left,
  icons pinned upper-right), nav centered on row 2 full-width. */
   .site-header__inner,
 .site-footer__inner {
     grid-template-columns: auto 1fr auto;
     grid-template-areas:
       "logo . actions"
       "nav nav nav";
     row-gap: 0.75rem;
     column-gap: 1rem;
   }
   .wordmark {
     grid-area: logo;
     justify-self: start;
   }
   .header-actions,
   .social {
     grid-area: actions;
     justify-self: end;
   }
   .nav,
 .footer-nav {
     grid-area: nav;
     flex-wrap: wrap;
     justify-content: center;
     justify-self: stretch;
     gap: 0.5rem clamp(0.9rem, 3vw, 1.8rem);
   }

   /* Art studio grid collapses from 4 columns to 2 on tablets. */
   .studios {
     grid-template-columns: repeat(2, 1fr);
   }

   /* Keep the three tiles as one row and drop the script line beneath,
  rather than orphaning the third image next to an empty cell. */
   .strip {
     grid-template-columns: repeat(3, 1fr);
   }
   .soul {
     grid-column: 1 / -1;
     padding-block: 1.5rem;
   }

 }

 @media (max-width: 660px) {
   /* Keep both four-link menus in a compact, centered two-row layout. */
   .nav,
 .footer-nav {
     max-width: 17rem;
     margin-inline: auto;
   }
 }

 @media (max-width: 520px) {
   /* Fit the social links beside the logo on narrow phones. */
   .social {
     gap: 0.5rem;
   }
   .social a {
     width: 1.5rem;
   }

   /* Art studio collapses to one card per row on phones. */
   .studios {
     grid-template-columns: 1fr;
   }

   /* Still 3-up, just tighter — it reads as a decorative strip, and
  stacking three portrait tiles would be a long scroll. */
   .strip {
     gap: 0.5rem;
   }
   .soul__line {
     font-size: clamp(1.5rem, 7vw, 2rem);
   }
 }

 /* --- entrance animation ----------------------------------- */

 .reveal {
   opacity: 0;
   transform: translateY(1.5rem);
   transition:
     opacity 0.9s ease,
     transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
 }
 .reveal.is-visible {
   opacity: 1;
   transform: none;
 }

 @media (prefers-reduced-motion: reduce) {
   html {
     scroll-behavior: auto;
   }
   .reveal {
     opacity: 1;
     transform: none;
     transition: none;
   }
   .studio__media img,
   .strip__fig img {
     transition: none;
   }
 }

 /* Expandable artwork details */
 .studio[data-piece-details] { cursor: pointer; }
 .studio__details-toggle { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 0; width: 100%; }
 .studio__details-toggle:focus-visible { outline: 2px solid var(--ivory); outline-offset: 6px; }
 .piece-details[hidden] { display: none; }
 .piece-details { position: relative; min-width: 0; grid-column: 1 / -1; background: #56604c; color: #fff; color-scheme: dark; padding: .5rem clamp(1.25rem, 4vw, 3rem) clamp(1.25rem, 4vw, 3rem); border-top: 3px solid var(--olive); scroll-margin-top: 2rem; }
 .piece-details__top { min-height: 44px; padding-right: 8rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
 .piece-details__top p { margin: 0; color: #fff; font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; }
 .piece-details__close { position: absolute; top: .5rem; right: .5rem; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .5rem .9rem; border: 1px solid rgba(255, 255, 255, .65); border-radius: .6rem; background: ButtonFace; color: #fff; font: 500 .75rem/1.4 var(--font-ui); cursor: pointer; transition: background-color .2s ease, border-color .2s ease; }
 .piece-details__layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
 .piece-details__layout > * { min-width: 0; }
 .piece-gallery__frame { position: relative; }
 .piece-gallery__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%; background: var(--olive); color: #fff; font: 1.75rem/1 var(--font-ui); cursor: pointer; box-shadow: 0 2px 10px #0002; }
 .piece-gallery__arrow:hover { background: var(--charcoal); color: #fff; }
 .piece-gallery__arrow--prev { left: .75rem; }
 .piece-gallery__arrow--next { right: .75rem; }
 .piece-gallery__controls { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: .75rem; }
 .piece-details__close:hover, .piece-gallery__pause:hover { background: var(--charcoal); border-color: #fff; }
 .piece-gallery__pause { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .5rem .9rem; border: 1px solid rgba(255, 255, 255, .65); border-radius: .6rem; background: ButtonFace; color: #fff; font: 500 .75rem/1.4 var(--font-ui); cursor: pointer; transition: background-color .2s ease, border-color .2s ease; }
 .piece-gallery__main { display: block; width: 100%; height: auto; aspect-ratio: auto; background: var(--sand); }
 .piece-gallery__caption { margin: 0; color: #fff; font-size: .75rem; }
 .piece-details h3 { font: 600 clamp(2.5rem, 5vw, 3.5rem)/1.1 var(--font-display); margin-bottom: 1rem; }
 .piece-details__intro { color: #fff; line-height: 1.8; font-size: .9rem; }
 .piece-specs { margin: 1.5rem 0 2rem; }
 .piece-specs > div { display: grid; grid-template-columns: 1fr 1.5fr; gap: 1rem; border-bottom: 1px solid rgba(255, 255, 255, .35); padding: .75rem 0; font-size: .8rem; line-height: 1.6; }
 .piece-specs dt { font-weight: 600; }
 .piece-specs dd { margin: 0; color: #fff; }
 .piece-specs dd span { display: block; }
 .piece-contact[hidden] { display: none; }
 .piece-contact { margin-top: .65rem; }
 .piece-contact-toggle { background: ButtonFace; max-width: 100%; white-space: normal; cursor: pointer; color: #fff; border-color: rgba(255, 255, 255, .65); }
 .piece-contact-toggle:hover { background: var(--charcoal); color: #fff; border-color: #fff; }
 .piece-contact h4 { font: 600 2rem var(--font-display); margin-bottom: .5rem; }
 .piece-contact__status { font-size: .75rem; line-height: 1.7; color: #fff; }
 .piece-contact label { display: block; margin-top: .4rem; font-size: .8rem; }
 .piece-contact input, .piece-contact textarea { display: block; width: 100%; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .65); border-radius: 0; background: transparent; padding: .2rem 0; font: inherit; line-height: 1.4; color: #fff; }
 .piece-contact input { min-height: 2.25rem; }
 .piece-contact textarea { resize: vertical; min-height: 3.5rem; }
 .piece-contact .btn { margin-top: .6rem; cursor: pointer; background: var(--olive); color: #fff; border-color: rgba(255, 255, 255, .65); }
 .piece-contact .btn:hover { background: var(--charcoal); border-color: #fff; }
 .piece-details button:focus-visible, .piece-details input:focus-visible, .piece-details textarea:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
 .piece-contact__status { margin: .5rem 0 0; }
 .piece-contact__status:empty { display: none; }
 @media (max-width: 760px) { .piece-details__layout { grid-template-columns: 1fr; } }
 .contact-section { background-color: var(--charcoal); color: #fff; color-scheme: dark; padding-block: clamp(2rem, 5vw, 4rem); scroll-margin-top: 1rem; }
 .contact-section__inner { max-width: 38rem; margin-inline: auto; }
 .contact-section h2 { margin: 0 0 1rem; font: 600 clamp(2.5rem, 5vw, 3.5rem)/1.1 var(--font-display); }
 .contact-section button:focus-visible, .contact-section input:focus-visible, .contact-section textarea:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
 .about-contact-background {
   margin-top: clamp(1rem, 2.2vw, 1.75rem);
   background: linear-gradient(180deg, rgba(var(--charcoal-rgb), .66), rgba(var(--charcoal-rgb), .8)), url("../assets/images/images/coralia-coastal-background.jpg") 70% center / cover no-repeat;
   background-color: var(--charcoal);
 }
 .about-contact-background .story { background: transparent; margin-top: 0; }
 .about-contact-background .story::after { content: none; }
 .about-contact-background .contact-section { background: transparent; }

.contact-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.piece-contact button:disabled { opacity: .65; cursor: wait; }
.piece-contact__status { overflow-wrap: anywhere; }