/* BASE **********************************************************************
   Dolfin_esque — base stylesheet

   1. RESET    trimmed normalize (modern-browser baseline)
   2. TOKENS   :root custom properties
   3. GLOBALS  page-level defaults

   Everything IE9/10-only has been removed. Vendor prefixes are kept only
   where a shipping browser still needs them (noted inline).
   ========================================================================= */


/* 1. RESET ================================================================= */

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

html {
    font-family: sans-serif;
    line-height: 1.15;

    /* 100%, not 16px: still resolves to 16px by default, but respects a
       user who has changed their browser's font size. Every rem is safe. */
    font-size: 100%;

    /* Stops iOS inflating text after an orientation change. Still needed. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

body {
    margin: 0;
}

/* Margins this site manages itself */
h1, h2, h3, p {
    margin: 0;
}

figure {
    margin: 1em 40px;
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
}

pre,
code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: 1em;
}

abbr[title] {
    text-decoration: underline dotted;
}

b,
strong {
    font-weight: bolder;
}

dfn {
    font-style: italic;
}

small {
    font-size: 80%;
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub { bottom: -0.25em; }
sup { top: -0.5em; }

audio:not([controls]) {
    display: none;
    height: 0;
}

/* --- Forms ---------------------------------------------------------------- */

button,
input,
optgroup,
select,
textarea {
    font: inherit;   /* controls pick up the site's type instead of the UA's */
    margin: 0;
}

button,
select {
    text-transform: none;
}

/* Safari: correct the inability to style clickable types */
button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
}

/* Firefox: remove the inner border and restore the focus ring */
::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

:-moz-focusring {
    outline: 1px dotted ButtonText;
}

legend {
    padding: 0;
}

[type="search"] {
    -webkit-appearance: textfield;   /* Safari */
    outline-offset: -2px;
}

[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}


/* 2. TOKENS ================================================================ */

:root {

    /* Kill the whole-page cross-fade on ordinary navigations — every page swap
       is instant and consistent. Named elements (the release covers) keep
       their own transition groups and still morph as before. The browser
       gives :root the name 'root', which is what snapshots and cross-fades
       the full page — unsetting it opts out.

       TURN ON only when ::view-transition-group(root) in VIEW_TRANSITIONS is OFF. */
    /* view-transition-name: none; */

    /* --- Brand ------------------------------------------------------------ */
    --primary-website-color: #00C365;   /* was only referenced as a fallback */

    /* --- Neutrals --------------------------------------------------------- */
    --d3-black: #202326;
    --d3-light-black: #2a2e33;
    --d3-white: #f0f0f0;

    --d3-darkest-grey: #38404a;
    --d3-grey_1: #4e5861;
    --d3-grey_2: #8b98a6;
    --d3-grey_3: #abb8c8;

    /* --- Accents ---------------------------------------------------------- */
    --d3-green_1: #00795c;
    --d3-green_2: #00995a;
    --d3-green_3: #00C365;

    --d3-blue: #0041c2;
    --d3-light_blue: #278df2;
    --d3-red: #d91e2e;
    --d3-yellow: #dec640;

    --el3-silver: #d9d9d9;
    --el3-blue_1: #020f59;
    --el3-blue_2: #0420bf;
    --el3-blue_3: #0540f2;
    --el3-blue_4: #0461ff;

    --PINK: #F959FF;
    --PURPLE: #7D5CF2;

    /* --- Type ------------------------------------------------------------- */
    --d3-header_1: 'tachyon', sans-serif;
    --d3-header_2: 'Oswald', sans-serif;

    --d3-text_1: 'semplicitapro', sans-serif;
    --d3-text_4: "nimbus-sans-condensed", sans-serif;   /* font-weight: 300 */

    --h3-font-size: 3rem;

    /* --- Layout ----------------------------------------------------------- */
    --nav-underline: 5px;

    /* --- Stacking scale --------------------------------------------------- */
    /* One ladder for the whole site. MasterSlider chrome tops out at 210
       (.ms-tooltip) inside .wrapper, so nav and sidenav must clear that
       ceiling. Vendor slider values (105-213) are left untouched — their
       internal order is load-bearing. */
    --z-nav: 300;       /* sticky navbar; its dropdown rides inside this context */
    --z-sidenav: 400;   /* off-canvas menu beats nav + all slider chrome */
    --z-scroll: 1001;   /* back-to-top button */
    /* --z-notify removed with CP_NOTIFICATIONS (was 9999, toast layer) */
    --z-cookies: 99999; /* cookies banner always wins */
}

/* 3. GLOBALS =============================================================== */

body {
    background-color: var(--d3-grey_1);
}

/* Highlighting any text selects in brand green with dark text — tiny touch,
   but even the browser behaviours feel on-brand. */
::selection {
    background-color: var(--primary-website-color);
    color: var(--d3-black);
}

/* Default type is overridden inside specific grid containers by their own
   font stylings. */
a {
    cursor: pointer;
    text-decoration: none;
}

/* CSS_SITE_STRUCTURE *****************************************************************************************/
/* BODY */
.wrapper {
    min-height: 100vh;   /* fallback for old browsers | set the wrapper to fill at least the full height of the viewport, so a short page still stretches its content to the bottom edge (letting the footer sit at the bottom rather than floating up mid-screen). */
    min-height: 100svh;  /* small viewport height — stable, never resizes mid-scroll */
    display: grid; /* Makes the wrapper a grid container | <header> <main> <footer> are its direct children, grid items. */
    grid-template-rows: auto auto 1fr auto; /* Defines 4rows. auto sizes to its content | y-axis */
    grid-template-areas:
                        "header"
                        "nav"
                        "main"
                        "footer";
    isolation: isolate; /* z-index system */
    overflow-x: clip;   /* nothing can force the page wider than the viewport */
}

.wrapper > header {
    min-width: 0;
    grid-area: header;
}

.wrapper > main {
    min-width: 0;
    grid-area: main;
}

/* body > nav  */
.wrapper > nav {
    grid-area: nav;
    position: sticky;
    top: 0;
    min-width: 0;
    z-index: var(--z-nav);
}

.wrapper > footer {
    min-width: 0;
    grid-area: footer;
}
/* BODY */

/* ===== LOCAL SVG ICONS (replaces Font Awesome) | Nav bar, Side nav, Search bar ===== */

.menu_icon {
    inline-size: 24px; block-size: 24px;
    vertical-align: middle;
    margin: 0 0.35rem;
    color: var(--d3-white);
}

.nav-caret   { inline-size: 1em; block-size: 1em; vertical-align: middle; }

.sidenav_dropdown-caret {
    inline-size: 24px;
    block-size: 24px;
    margin-left: 0.2rem; 
    flex: 0 0 auto;        /* don't let it stretch or shrink */
}

.closebtn svg { inline-size: 2rem; block-size: 2rem; vertical-align: middle; }

.search-icon { inline-size: 1em; block-size: 1em; vertical-align: middle; }

/* Home page popup (.cp-icon / .cp-dismiss svg) removed with CP_NOTIFICATIONS */

/* SELF_HOSTED_FONTS ******************************************************************************/
/* Oswald 200 + 400, self-hosted (woff2 in /fonts/) - replaces the
   render-blocking Google Fonts request: one less third-party connection
   on the critical path (~750ms in Lighthouse). Same family name, so
   --d3-header_2 and every rule using it work unchanged. font-display:
   swap = text paints immediately in the fallback, swaps when ready
   (same behaviour the old Google link requested via &display=swap).
   url() is root-relative so it resolves from any page depth, matching
   the root-relative stylesheet links. */
@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 200;
    font-display: swap;
    src: url('/fonts/oswald-200.woff2') format('woff2');
}
@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/oswald-400.woff2') format('woff2');
}

/* INTRO_GRID **********************************************************************************************************************************************************/
.intro_grid > * {
    width: min(100%, 72rem);
    margin: 0 auto;
    box-sizing: border-box;
}

.intro_grid {
    display: grid;
    background-color: rgba(0, 0, 0, 0.5);
    grid-template-columns: minmax(0, 1fr); /* 1fr is shorthand for minmax(auto, 1fr), so the maximum is "all free space" but the minimum is auto */
    grid-template-rows: auto 400px; /* Row 1 sizes to content (the image). Row 2 is hard-fixed at 400px */
    grid-template-areas: "intro_section_image" "intro_section"; 
}

.intro_section_image {
    display: grid;
    grid-area: intro_section_image;
    background-color: var(--d3-green_3);
}

.intro_section {
    display: grid;
    grid-area: intro_section;
    min-width: 0;
    overflow: hidden;
    /* background-color: var(--d3-grey_1); */
    background-color: color-mix(in srgb, var(--d3-grey_1) 70%, transparent);
    margin: 0 auto; /* Default justify-self is stretch, When an inline margin is auto, stretch is cancelled, the box falls back to its fit-content (shrink-to-fit) width, 
                        and the auto margins split the remainder. So your section is shrink-wrapped to its widest child and centered, not full-bleed. */
    border-left: 10px solid var(--d3-grey_3);
    gap: 2rem;  /* If the auto rows ever total more than 304px, 1fr's auto minimum kicks in and the whole thing overflows the 400px row. */
    grid-template-rows: auto auto auto 1fr; /* default auto → it resolves to roughly the widest child's max-content, capped by available space.
                                            Rows 1–3 hug content. Row 4 is 1fr — it eats all remaining vertical space inside the 400px. */
    grid-template-areas: "cell_1""cell_2""cell_3""cell_4";
    justify-items: start;   /* everything left-aligned */ /* With it, each child shrinks to content and hugs the left edge of the track. Net effect 
                            at 1400px: the widest child sets the section's width (via shrink-to-fit), and everything narrower left-aligns under it. */
}

.cell_1 {
    display: grid;
    grid-area: cell_1;
    margin: 2rem 0 0 2rem;
    align-items: center;
}
.cell_2 {
    display: grid;
    grid-area: cell_2;
    margin: 0 0 0 4rem;
    align-items: center;
}
.cell_3 {
    display: grid;
    grid-area: cell_3;
    margin: 0 0 0 4rem;
    align-items: center;
}
.cell_4 {
    display: grid;
    grid-area: cell_4;
    justify-self: end; /* place-self: end end;     align-self: end; justify-self: end */
    align-self: end;
    margin: 0 2rem 2rem 0;
}

.intro_section  h1 {
    font-family: var(--d3-header_1);
    font-weight: 300;
    font-style: normal;
    color: var(--d3-grey_3);
    font-size: 9rem;
    /* trim top to cap height, bottom to the alphabetic baseline */
    text-box: trim-both cap alphabetic;
}

.intro_section  p {
    font-family: var(--d3-text_4);
    font-weight: 300;
    font-style: normal;
    color: var(--d3-white);
    font-size: 1.25rem;
    letter-spacing: 0.1rem;
    /* trim top to cap height, bottom to the alphabetic baseline */
    text-box: trim-both cap alphabetic;
}

/* contents */

.intro_section_image img {
    width: 100%;
    height: auto;
    margin: 0rem auto;
    display: block;
    box-shadow: none;
}

.index_button_align {
    margin: 0 2rem 2rem 0;
    margin-top: auto;
    align-self: flex-end; 
}

/* Contains the srcset image */
picture {
    color: white;
    text-align: center;
}

/* INTRO_GRID | TABLET *************************************************************************************************************************************************/
@media (max-width:1400px) {

}

/* INTRO_GRID | SMARTPHONE *********************************************************************************************************************************************/
@media (max-width:768px) {

.intro_section_image {
    min-height: 305px;
    justify-content: center;
    align-items: center;
    background: var(--d3-black);
}

.intro_section_image img {
    width: 95%;
    margin: 0rem auto 0rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0);
}

.intro_section {
    margin: 0;
    justify-items: center;
    grid-template-rows: repeat(4, auto); /* Kills the 1fr. Now all four rows are content-sized, so the track group is shorter than the 400px the parent still forces 
                                         on the section. That's the whole point of this change — it manufactures block-axis free space. */
    
    align-content: safe center;  /* this then distributes, centering the four-row group vertically in the 400px. This only works because you dropped the 1fr. 1fr consumes 
                                 free space by definition, and align-content distributes free space — with 1fr present, there's nothing to distribute and align-content is a guaranteed no-op. 
                                 The two lines are coupled; don't change one without the other. */
                }

.intro_section h1 {
    font-size: 4.5rem;
}

.cell_1 {
    margin: 0rem 0 0 0;
}
.cell_2 {
    display: grid;
    grid-area: cell_2;
    margin: 0 0 0 0;
    align-items: center;
}
.cell_3 {
    display: grid;
    grid-area: cell_3;
    margin: 0 0 0 0;
    align-items: center;
}
.cell_4 {
    display: grid;
    grid-area: cell_4;
    justify-self: center; /* place-self: end end;     align-self: end; justify-self: end */
    align-self: auto;   /* self-start is now meaningless in an auto row anyway */
    margin: 0 0 0rem 0;
}
}

/* BACKGROUND_IMAGE ****************************************************************************************************************************************************/

#myBackground {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100lvh;   /* large viewport height — stable while scrolling */
  object-fit: cover;
  z-index: -1;
}

/* SUBGRID_FOOTER *********************************************************************/

/* Local design tokens — one place to change colors/fonts for the footer */
.column_grand_parent {
  --footer-accent:  var(--d3-grey_3);
  --footer-text:    var(--d3-white);
  --footer-divider: var(--d3-green_3);
  --footer-hover:   var(--d3-green_3);
  --footer-icon: var(--d3-white);   /* one knob for all footer icon colors */
  --footer-icon-hover: var(--d3-green_3);   /* hover icon color, all columns */
}

/* Overlay wrapper: centers the footer grid inside an 800px band */
.column_grand_parent {
  display: grid;
  place-items: center;
  background-color: var(--d3-black);
  block-size: 800px;
}

.column_grand_parent_index {
  background-color: color-mix(in srgb, var(--d3-black) 85%, transparent);
}

/* Parent grid: 3 columns, 2 shared rows (header / body) adopted by the cards via subgrid */
.columns_parent {
  display: grid;
  inline-size: 100%;
  block-size: 600px;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* minmax(0,1fr) prevents long-content blowout */
  grid-template-rows: minmax(5rem, auto) minmax(0, 1fr);
  overflow: hidden;                 /* the parent never scrolls; bodies scroll internally */
}

/* Each card spans both parent rows and inherits the tracks */
.column_child {
  display: grid;
  grid-row: 1 / -1;
  grid-template-rows: subgrid;
  row-gap: 0;
  padding-inline: 1rem;
  border-radius: 12px;
  min-height: 0;                    /* critical: lets the card shrink so .body can scroll */
  justify-items: start;
  align-items: stretch;
}

/* Green divider on the inline-start + a thinner green line on top of every column, all sizes */
.columns_parent > .column_child {
  border-inline-start: 5px solid var(--footer-divider);
  border-block-start: 3px solid var(--footer-divider);
}

/* SHARED ROW STYLES ************************************************************************/

.column_child > h3 {
  grid-row: 1;
  place-self: center;
  margin: 0;
  font-family: var(--d3-header_1);
  font-size: var(--h3-font-size);
  font-weight: 300;
  line-height: 1;
  color: var(--d3-grey_3);
  text-align: center;
}

/* Body always fills row 2; min-height:0 + overflow:auto = internal scrolling */
.column_child > .body {
  display: grid;
  grid-row: 2;
  min-height: 0;
  overflow: auto;
  justify-self: stretch;
  align-self: stretch;
  justify-items: center;
  align-items: center;
  align-content: center;
}

.column_child > .body p {
  margin: 0;
  font-family: var(--d3-text_4);
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.5rem;
  letter-spacing: 0.1rem;
  color: var(--d3-white);
}

/* PER-COLUMN OVERRIDES *********************************************************************/

/* All three columns share the same "framed" body treatment */
.column_child--1 > .body,
.column_child--2 > .body,
.column_child--3 > .body {
  justify-items: end;
  align-items: end;
  border-block: 3px solid var(--footer-accent);   /* top + bottom only */
  border-radius: 0rem;
  background: /* linear-gradient(180deg, rgba(255 255 255 / .04), rgba(0 0 0 / .06)) */ none;
}

/* Column 1 (footer.php Internal nav) mirrors column 3 from the left */
.column_child--1 > .body {
  justify-items: start;
  align-items: end;
}

/* index.php contact-form column — add class="column_child--form" on the article.
   Restores the original stretched, fully-bordered look for the form only. */
.column_child--form > .body {
  justify-items: stretch;
  align-items: stretch;
  border: 1px solid var(--footer-accent);
  border-radius: 0;
  background: none;
}

.column_child--2 > .body {
  row-gap: 1rem;
}

.column_child--2 > .body p {
  margin-inline-end: 1rem;
}

.column_child--2 > .body span,
.column_child--2 > .body a {
  color: var(--footer-text);
}

.column_child--2 > .body a {
  transition: color 0.4s;
}

.column_child--2 > .body a:hover {
  color: var(--d3-green_3);
}

/* SOCIAL / NAV LINKS ***********************************************************************/
/* Column 2  = horizontal circular icon buttons (.x-axis_icons)
   Columns 1 & 3 = vertical icon + label lists */

/* --- Column 2: circular icon buttons --- */
.x-axis_icons .footer-links {
  display: flex;
  align-items: center;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.x-axis_icons .footer-links li { margin: 0; }

.x-axis_icons .footer-links a,
.x-axis_icons .footer-links .footer-link--disabled {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: 50%;
  text-decoration: none;
  color: var(--footer-icon); /* column 2 icon color */
  transition: color 0.4s, box-shadow 0.4s;
}

.x-axis_icons .footer-links svg {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  fill: currentColor;
}

.x-axis_icons .footer-links a:hover,
.x-axis_icons .footer-links a:focus-visible {
  outline: none;
  color: var(--footer-icon-hover);
  box-shadow: 0 0 0 2px currentColor inset;
}

/* icon hover — svg-scoped so it out-ranks the resting svg color rule */
:is(.column_child--1, .column_child--3) > .body ul.footer-links a:hover svg,
:is(.column_child--1, .column_child--3) > .body ul.footer-links a:active svg {
  color: var(--footer-icon-hover);
}

/* --- Columns 1 & 3: vertical link lists --- */
:is(.column_child--1, .column_child--3) > .body ul.footer-links {
  list-style: none;
  margin: 0;
  padding-inline-start: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* COLUMN 1 --- */
:is(.column_child--1) > .body ul.footer-links {
  list-style: none;
  margin: 1rem;
  padding-inline-start: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

:is(.column_child--1, .column_child--3) > .body ul.footer-links a,
:is(.column_child--1, .column_child--3) > .body ul.footer-links .footer-link--disabled {
  display: flex;            /* full row per link: icon slot + name align uniformly down the list */
  align-items: center;
  column-gap: 1rem;
  margin-inline-end: 1rem;
  font-family: var(--d3-text_4);
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 2;
  letter-spacing: 0.1rem;
  color: var(--d3-white);
  text-decoration: none;
}

:is(.column_child--1, .column_child--3) > .body ul.footer-links a {
  transition: color 0.4s, transform 0.2s ease-out;
}

:is(.column_child--1, .column_child--3) > .body ul.footer-links a:hover,
:is(.column_child--1, .column_child--3) > .body ul.footer-links a:active {
  color: var(--d3-green_3);
  transform: translateX(6px);
}

/* fixed icon slot so every label starts at the same x;
   fill covers the brand icons, stroke nav icons carry their own stroke */
:is(.column_child--1, .column_child--3) > .body ul.footer-links svg {
  flex: 0 0 1.5rem;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  fill: currentColor;
  color: var(--footer-icon); /* column 1 & 3 icon color */
}

/* fixed icon slot so every label starts at the same x;
   fill covers the brand icons, stroke nav icons carry their own stroke */
:is(.column_child--1) > .body ul.footer-links svg {
    fill: none;
    stroke: currentColor;      /* add this line */
    color: var(--footer-icon); /* Column 1 override */
}

/* active page in the footer nav (column 1) */
.column_child--1 > .body ul.footer-links a.footer_active {
  color: var(--d3-green_3);
}

/* --- shared: disabled placeholders + screen-reader-only labels --- */
.footer-link--disabled {
  opacity: 0.4;
  cursor: default;
}

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

/* SUBGRID_FOOTER | TABLET ***********************************************************************/
@media (max-width: 1400px) {
  .column_grand_parent {
    block-size: auto;
    padding-block: 2rem;
  }

  .columns_parent {
    grid-template-columns:
      minmax(0, 1fr)
      clamp(320px, 90%, 72rem)
      minmax(0, 1fr);
    grid-template-rows: repeat(3, minmax(600px, auto));  /* each row at least 600px */
    block-size: auto;
    overflow: visible;
  }

  .column_child--1 { grid-column: 2; grid-row: 1; padding: 0; }
  .column_child--2 { grid-column: 2; grid-row: 3; padding: 0; }
  .column_child--3 { grid-column: 2; grid-row: 2; padding: 0; }

  .column_child--1,
  .column_child--2,
  .column_child--3 {
    grid-template-rows: minmax(5rem, auto) minmax(0, 1fr);  /* replaces subgrid: own header/body rows */
  }
}

/* SUBGRID_FOOTER | SMARTPHONE *******************************************************************/
@media (max-width: 768px) {
  .column_child--2 {
    background: transparent;
  }

  .column_child--2 > .body {
    justify-items: center;
    align-items: center;
    text-align: center;
  }

  .column_child--2 > .body p {
    font-size: 1.25rem;
    margin: 0;
  }

  .column_child > h3 {
    font-size: 3rem;
  }
}

/* CONTACT_FORM ****************************************************************/
/* Merged from css/contact_form_style.css (that file can now be deleted).
   Structure:
     .contact_form            = shared base (layout + gradient) for BOTH forms
     .contact_form--page      = contact.php variant (centred, max 800px, thick frame)
     .contact_form--footer    = index.php footer variant (fills its column)
   Inner elements (.input-group, .button_style, .status-msg) are shared. */

/* RECAPTCHA_BADGE — bottomleft via data-badge; lift it clear of the cookies banner */
.grecaptcha-badge {
    margin-bottom: 1rem !important;
}

/* contact.php page wrapper only */
.contact_form-container {
    padding: 20px;
    margin: 0 auto;
    max-width: 800px;
    width: 100%;
    box-sizing: border-box;
}

/* the form ID */
#contactForm {
    width: 100%;
    height: 100%;
}

/* --- Shared base --- */
.contact_form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to right, var(--d3-grey_1), rgba(0, 0, 0, 0.1));
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.contact_form form {
    justify-content: center;
    flex-basis: 100%;
    margin-bottom: 0;
    box-sizing: border-box;
}

.contact_form h3 {
    margin: 0rem 0;
    letter-spacing: 1px;
    font-size: 1.5em;
    color: transparent;
    text-align: center;
}

/* --- contact.php variant --- */
.contact_form--page {
    max-width: 800px;
    margin: 0 auto;
}

.contact_form--page form {
    border: 3px solid var(--d3-light-black);
    padding: 0vw 2.5vw;
}

/* --- index.php footer variant: fills the column completely --- */
.contact_form--footer {
    width: 100%;
    max-width: none;
    margin: 0;
    height: 100%;              /* stretch vertically inside .body too */
    align-content: center;     /* keep fields vertically centred in the tall column */
}

.contact_form--footer form {
    width: 100%;
    border: none;              /* .column_child--form > .body already draws the frame */
    padding: 0 1rem;
}

/* INNER BOX TEXT (shared) */
.input-group input,
.input-group textarea {
    font-family: var(--d3-text_4);
    color: var(--d3-white);
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 25px;
    letter-spacing: 0.1rem;
    padding: 8px 15px;
    margin-bottom: 1rem;
    width: 100%;
    outline: none;
    box-sizing: border-box;
    border: none;
    border-bottom: 3px solid var(--d3-grey_3);
    background: var(--d3-grey_1);
    border-radius: 0.25rem;
}

.input-group input:focus,
.input-group textarea:focus {
    border-color: var(--d3-green_3);
    outline: 0;
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--d3-green_3) 37%, transparent);
}

.input-group textarea {
    height: 75px;
}

::-webkit-input-placeholder {
    color: var(--d3-grey_3) !important;
}

:-moz-placeholder {
    /* Firefox 18- */
    color: var(--d3-grey_3) !important;
}

::-moz-placeholder {
    /* Firefox 19+ */
    color: var(--d3-grey_3) !important;
}

:-ms-input-placeholder {
    color: var(--d3-grey_3) !important;
}

/* BUTTON (shared) */
.button_style {
    color: var(--d3-green_3);
    margin: 0rem 0 1rem;
    padding: .5em 3em;
    font-size: 1.25rem;
    font-family: var(--d3-header_2);
    font-weight: 400;
    cursor: pointer;
    border: 0px solid var(--d3-black);
    outline: none;
    background: var(--d3-black);
    transition: 0.5s all ease;
}

.button_style:hover {
    color: var(--d3-white);
    background: var(--d3-green_3);
}

/* STATUS MESSAGE — shared by contact.php and the index.php footer form.
   Scoped as `.contact_form form p.status-msg` (specificity 0,0,2,2) so it
   out-ranks `.column_child > .body p` on index.php. Without that extra weight
   the footer copy inherited that rule's 1.25rem / --d3-white / --d3-text_4 and
   drifted away from the smaller contact.php copy — the mismatch you saw.
   Both states share one panel; only the left accent bar changes colour, so
   success and error read as one visual language. Variables only, no hover. */
.contact_form form p.status-msg {
    display: flex;
    align-items: center;    /* vertical centre */
    min-height: 3.5rem;   /* now there's room to centre within */
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 1rem;
    padding: 0.7rem 0.95rem;
    font-family: var(--d3-text_4);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: 0.03rem;
    color: var(--d3-white);
    background: var(--d3-black);
    border: 1px solid var(--d3-grey_1);
    border-left: 10px solid var(--d3-grey_3);   /* neutral default accent */
    border-radius: 0.25rem;
    overflow-wrap: break-word;
    white-space: pre-line;
    max-height: 8em;
    overflow-y: auto;
}

/* States differ only by the accent bar — panel, type and spacing stay identical */
.contact_form form p.status-msg.success {
    border-left-color: var(--d3-green_3);
    border-color: var(--d3-green_3);
}

.contact_form form p.status-msg.error {
    border-left-color: var(--d3-red);
}

/* Responsive (carried over from contact_form_style.css).
   The h1/h3 rules were global there too, so behaviour is unchanged;
   the 480px side-margin now applies only to the contact.php variant
   so the footer form keeps filling its column on small screens. */
@media screen and (max-width: 768px) {
    h1 { font-size: 2.5em; }
    h3 { font-size: 30px; }
}

@media screen and (max-width: 480px) {
    .contact_form--page { margin: 0 5vw; }
    h1 { font-size: 2em; }
    h3 { font-size: 27px; }
}

@media screen and (max-width: 320px) {
    h1 { letter-spacing: 2px; }
    h3 { font-size: 25px; }
}

/* BACK_TO_TOP_BUTTON **********************************************************/
/* Site-wide — header.php | index.php. #scroll holds an inline SVG chevron
   (svg_icon('chevron-up')); js/main.js adds/removes .active past 100px of scroll.
   Moved here from components.css so every page gets the same button. */

#scroll {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    cursor: pointer;
    width: 50px;
    height: 50px;
    padding: 0;
    border: none;
    background-color: var(--d3-green_3);
    border-radius: 50%;
    /* circular */
    z-index: var(--z-scroll);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Smooth fade + floating effect */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, background-color 0.3s ease, transform 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

#scroll svg {
    inline-size: 2rem;
    block-size: 2rem;
    color: var(--d3-white);                    /* stroke-based icon: stroke="currentColor" */
    transition: transform 0.25s ease;
}

#scroll:hover {
    transform: scale(1.08);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
    /* stronger hover shadow */
}

#scroll:hover svg {
    transform: translateY(-2px);
}

#scroll.active {
    opacity: 1;
    visibility: visible;
}

/* MINIMAL_COOKIES_BANNER ************************************************************************************************/
/* MERGED_COMPONENTS */
/* components.css merged below, unchanged - it was a second render-blocking
   request on every page for 1.4KB; one file = one request. Its own section
   comments (MINIMAL_COOKIES_BANNER etc.) continue as before. Load order
   preserved: it loaded AFTER Dolfin_esque.css, so it sits at the end. */

.cookies-banner {
  --cb-font: 'semplicitapro', sans-serif;
  --cb-fg: #f0f0f0;
  --cb-accent: #00c365;

  position: fixed;
  left: 50%;
  bottom: 70px;                    /* adjust if it clashes with other UI */
  z-index: var(--z-cookies);

  /* pill look */
  padding: 10px 14px;
  min-height: 44px;                /* good tap target */
  max-width: min(560px, calc(100% - 32px));
  border-radius: 9999px;
  border: 2px solid var(--cb-fg);
  background: var(--d3-black); /* rgba(34, 34, 34, 0.9); */
  box-shadow: 0 6px 16px rgba(0, 0, 0, .4);

  /* layout */
  display: flex;
  align-items: center;
  gap: 12px;

  /* show/hide (JS toggles .show) */
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(12px);
  transition: opacity .6s ease, transform .6s ease;
}

.cookies-banner.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.cookies-banner p {
  margin: 0;
  flex: 1 1 auto;
  text-align: center;
  line-height: 1.25;
  font-family: var(--cb-font);
  font-size: 0.6rem;
  letter-spacing: 0.08rem;
  text-transform: uppercase;
  color: var(--cb-fg);
}

.cookies-banner a {
  color: var(--cb-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookies-banner button {
  flex: 0 0 auto;
  appearance: none;
  border: 0;
  border-radius: 9999px;
  padding: 0 14px;
  height: 32px;
  line-height: 32px;
  background: var(--cb-accent);
  color: var(--cb-fg);
  cursor: pointer;
  font-family: var(--cb-font);
  font-size: 0.7rem;
  letter-spacing: 0.08rem;
  text-transform: uppercase;
  transition: transform .08s ease, background-color .25s ease;
}
.cookies-banner button:hover  { background: var(--d3-green_2); }
.cookies-banner button:active { transform: translateY(1px); }

/* Tablet / phone: slightly softer corners, capped width.
   Only the values that actually change go here. */
@media (max-width: 768px) {
  .cookies-banner {
    border-radius: 25px;
    width: 60%;
  }
}

/* Small phones: stack text above a full-width button */
@media (max-width: 768px) {
  .cookies-banner {
    flex-wrap: wrap;
    row-gap: 8px;
    padding: 12px;
    width: 90%;
  }
  .cookies-banner p {
    flex-basis: 100%;
    order: 1;
  }
  .cookies-banner button {
    order: 2;
    width: 100%;
    height: 36px;
    line-height: 36px;
  }
}

/* FOOTER_CREDIT ************************************************************************************************/
/* footer.php — slim "designed by | James Faux" bar under the main footer subgrids */
.footer_credit_parent {
 display: grid;
 height: 300px;
 background: orangered;   

 grid-template-columns: minmax(0, 1fr); /* 1fr is shorthand for minmax(auto, 1fr), so the maximum is "all free space" but the minimum is auto */
    grid-template-rows: 300px; /* Row 1 sizes to content (the image). Row 2 is hard-fixed at 400px */
    grid-template-areas: "footer_credit";
}

.footer_credit {
  display: grid;
  grid-area: footer_credit;
  background: var(--el3-blue_2); 
  color: var(--el3-silver);
  --footer-credit-bg:      var(--el3-blue_4);
  --footer-credit-text:    var(--el3-silver);
  --footer-credit-divider: var(--el3-silver);
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(4, auto);
  grid-template-areas: "footer_cell_1""footer_cell_2""footer_cell_3""footer_cell_4";
  gap: 1rem;
  /* border-top: 3px solid var(--el3-blue_3); */
  margin: 0;
  
}

.footer_cell_1 {
    display: grid;
    min-width: 0;
    grid-area: footer_cell_1;
    margin: 0;
    align-items: center;
}
.footer_cell_2 {
    display: grid;
    min-width: 0;
    grid-area: footer_cell_2;
    margin: 0;
    align-items: center;
}
.footer_cell_3 {
    display: grid;
    min-width: 0;
    grid-area: footer_cell_3;
    margin: 0;
    align-items: center;
}
.footer_cell_4 {
    display: grid;
    min-width: 0;
    grid-area: footer_cell_4;
    align-items: center;
    margin: 0;
}

.footer_credit_text {
  margin: 0;
  font-family: var(--d3-header_2);
  font-size: 1.25rem;
  font-weight: 400;
  /* trim top to cap height, bottom to the alphabetic baseline */
    text-box: trim-both cap alphabetic;
}

.footer_credit_divider {
  color: var(--el3-silver);
  padding-inline: 0.25rem;
}

.footer_credit_logo {
  display: block;
  width: 233.6px;
  height: 67px;
  border: 1px solid var(--el3-blue_4);
}

.whatsapp_logo {
  display: block;
  width: 233.6px;
  height: auto;
}

/* FOOTER_CREDIT | TABLET ************************************************************************************************/
@media (max-width:1400px) {
.footer_credit_text {
    font-size: 1.1rem;
}}

/* FOOTER_CREDIT | SMARTPHONE ************************************************************************************************/
@media (max-width:768px) {
.footer_credit {
    flex-direction: column;
    text-align: center;
}
}

/* HOME.PHP *******************************************************************************************/
.home_grid_parent {
    display: grid;
    min-width: 0;
    gap: 2rem;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
        "home_grid_child_1"
        "home_grid_child_2"
        "home_grid_child_3"
        "home_grid_child_4";
}

.home_grid_child_1 { grid-area: home_grid_child_1; }
.home_grid_child_2 { grid-area: home_grid_child_2; }
.home_grid_child_3 { grid-area: home_grid_child_3; }
.home_grid_child_4 { grid-area: home_grid_child_4; }

/* MAIN_MASTERSLIDER ************************************************************************************************/
/* ==========================================================================
   MASTERSLIDER — consolidated from masterslider.css, style.css (default
   skin) and ms-partialview.css. Covers both instances on home_test.php:
   #masterslider_home (main) and #masterslider_gallery (partial view).

   IMPORTANT: all url() paths below assume the slider assets live in
   /masterslider/style/ . If dolfin_esque.css can't reach them, update the
   /masterslider/style/ prefix — url() paths resolve relative to the CSS
   file, not the page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Core
   -------------------------------------------------------------------------- */

.master-slider {
    position: relative;
    visibility: hidden;
}

.master-slider a {
    transition: none;
}

.master-slider,
.master-slider * {
    box-sizing: content-box;
}

.master-slider.ms-fullheight { height: 100%; }

/* Partial view layout (gallery slider) */
.ms-layout-partialview .ms-view {
    overflow: visible;
    background-color: transparent;
}

.ms-layout-partialview .ms-container {
    overflow: hidden;
    padding: 1rem 0;
    margin: -1rem 0;
}

.master-slider img,
.ms-slide-bgvideocont video { max-width: none; }

.ms-loading-container {
    position: absolute;
    width: 100%;
    top: 0;
}

.ms-slide-auto-height { display: table; }

.ms-loading-container .ms-loading,
.ms-slide .ms-slide-loading {
    width: 36px;
    height: 36px;
    background: url(/masterslider/style/loading-2.gif) no-repeat center white;
    border-radius: 60px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -18px;
    opacity: 0.9;
}

/* Grab cursors */
.ms-no-swipe,
.ms-def-cursor { cursor: auto !important; }
.ms-grab-cursor { cursor: url(/masterslider/style/grab.png), move; }
.ms-grabbing-cursor { cursor: url(/masterslider/style/grabbing.png), move; }

.ms-view {
    margin: 0 auto;
    overflow: hidden;
    background: black;
    position: relative;
    perspective: 2000px;
}

.ms-view .ms-slide-container { position: relative; }

.ms-slide {
    position: absolute;
    height: 100%;
    transform: translateZ(0);
}

.ms-wk .ms-slide {
    transform-style: preserve-3d;
}

.ms-slide .ms-slide-bgcont,
.ms-slide .ms-slide-bgvideocont {
    position: absolute;
    overflow: hidden;
    width: 100%;
}

.ms-slide .ms-slide-link {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 110;
}

.ms-slide .ms-slide-bgvideocont {
    z-index: 105;
    height: 100%;
}

.ms-wk .ms-slide .ms-slide-bgvideocont,
.ms-wk .ms-slide-bgvideocont > video {
    transform: translateZ(0.3px);
}

.ms-slide .ms-slide-bgvideo {
    position: absolute;
    top: 0;
}

.ms-inner-controls-cont,
.ms-container {
    position: relative;
    margin: 0 auto;
}

.ms-slide .ms-slide-bgcont img,
.ms-container,
.ms-inner-controls-cont {
    -webkit-user-select: none;
    user-select: none;
}

.ms-slide .ms-layer,
.ms-fixed-layers .ms-layer {
    position: absolute;
    pointer-events: auto;
}

.ms-slide .ms-slide-layers,
.ms-fixed-layers {
    position: absolute;
    overflow: hidden;
    width: 100%;
    height: 100%;
    z-index: 109;
    top: 0;
    pointer-events: none;
}

.ms-slide .ms-slide-video {
    position: absolute;
    top: 0;
    z-index: 111;
    background: black;
    padding: 0;
    margin: 0;
    border: none;
}

.ms-parallax-layer {
    width: 100%;
    position: absolute;
    top: 0;
}

.ms-scroll-parallax-cont {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}

.ms-wk .ms-scroll-parallax-cont {
    transform: translateZ(0.4px);
}

/* --------------------------------------------------------------------------
   2. Buttons and action layers
   -------------------------------------------------------------------------- */

.ms-action-layer { cursor: pointer; }
.ms-btn-container { position: absolute; }

.ms-btn {
    text-decoration: none;
    display: inline-block;
    color: black;
    position: relative;
    padding: 8px 15px;
    cursor: pointer;
    white-space: nowrap;
}

.ms-default-btn {
    background: #0074A2;
    border-radius: 5px;
    color: #FFF;
}
.ms-default-btn:hover { background-color: #0098D5; }
.ms-default-btn:active { top: 1px; }

.ms-btn-s { padding: 14px 17px; font-size: 80%; line-height: 0; }
.ms-btn-m { padding: 12px 40px; }
.ms-btn-n { padding: 8px 25px; font-size: 95%; }
.ms-btn-l { padding: 17px 50px; font-size: 120%; }

.ms-btn-round,
.ms-btn-outline-round { border-radius: 5px; }
.ms-btn-circle,
.ms-btn-outline-circle { border-radius: 100px; }

/* --------------------------------------------------------------------------
   3. Video layers
   -------------------------------------------------------------------------- */

.ms-layer.video-box { background: black; }
.ms-layer.video-box iframe {
    padding: 0;
    margin: 0;
    border: none;
    position: absolute;
    z-index: 111;
}

.ms-slide .ms-slide-vpbtn,
.ms-slide .ms-video-btn {
    position: absolute;
    cursor: pointer;
    z-index: 112;
}

.ms-slide .ms-slide-vcbtn {
    position: absolute;
    cursor: pointer;
    z-index: 113;
}

.ms-slide-vcbtn-mobile {
    position: relative;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 28px;
    background-color: black;
    color: white;
    text-align: center;
    cursor: pointer;
    z-index: 113;
}

.ms-slide-vcbtn-mobile .ms-vcbtn-txt {
    text-transform: uppercase;
    font-family: sans-serif;
    font-size: 0.75em;
    display: inline-block;
    background: url(/masterslider/style/video-close-btn.png) no-repeat 0 3px;
    padding-left: 15px;
    height: 15px;
    color: #DBDBDB;
    margin-top: 7px;
}

.ms-wk .ms-slide .ms-slide-vcbtn,
.ms-wk .ms-slide .ms-slide-layers,
.ms-wk .ms-slide .ms-slide-vpbtn,
.ms-wk .ms-slide .ms-slide-video,
.ms-wk .ms-slide-link {
    transform: translateZ(0.44px);
}

.ms-video-img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.ms-mask-frame {
    overflow: hidden;
    position: absolute;
    float: left;
}

/* --------------------------------------------------------------------------
   4. Controls: thumbnails, tabs, bullets, scrollbar, timer
   -------------------------------------------------------------------------- */

.ms-thumb-list {
    overflow: hidden;
    position: absolute;
}

.ms-thumb-list.ms-dir-h { width: 100%; }
.ms-thumb-list.ms-dir-v { height: 100%; top: 0; }
.ms-thumbs-cont { position: relative; }
.ms-thumb-frame img { width: 100%; height: auto; }

.ms-thumb-frame {
    cursor: pointer;
    float: left;
    overflow: hidden;
    opacity: 0.5;
    transition: opacity 300ms;
}
.ms-thumb-frame-selected { opacity: 1; }

.ms-tabs .ms-thumb-frame {
    background-color: #F6F6F6;
    text-shadow: 0 1px 1px white;
    color: #222;
    border: solid 1px white;
    border-width: 0 1px 1px 0;
    overflow: visible;
    position: relative;
    opacity: 1;
    transition: all 300ms ease-out;
}

.ms-tabs.ms-dir-h .ms-thumb-frame { margin-top: 12px; }
.ms-tabs.ms-dir-v .ms-thumb-frame { margin-left: 12px; }
.ms-tabs.ms-dir-v.ms-align-left .ms-thumb-frame { margin-left: 0; }
.ms-tabs.ms-dir-h.ms-align-top { z-index: 140; }
.ms-tabs.ms-dir-h.ms-align-top .ms-thumb-frame { margin-top: -12px; }
.ms-tabs .ms-thumb { padding: 20px; }
.ms-tabs .ms-thumb-frame-selected { opacity: 1; background: #EDEDED; }

.ms-tabs .ms-thumb-frame .ms-thumb-ol {
    position: absolute;
    opacity: 0;
    transition: all 300ms ease-out;
}

.ms-tabs.ms-dir-h .ms-thumb-frame .ms-thumb-ol {
    top: 0;
    left: 50%;
    margin-left: -12px;
    border-bottom: solid 12px #F6F6F6;
    border-left: solid 12px transparent;
    border-right: solid 12px transparent;
}

.ms-tabs.ms-dir-h.ms-align-bottom .ms-thumb-frame-selected .ms-thumb-ol {
    opacity: 1;
    top: -12px;
    border-bottom-color: #EDEDED;
}

.ms-tabs.ms-dir-h.ms-align-top .ms-thumb-frame .ms-thumb-ol {
    bottom: 0;
    top: auto;
    border-bottom: 0;
    border-top: solid 12px #F6F6F6;
}

.ms-tabs.ms-dir-h.ms-align-top .ms-thumb-frame-selected .ms-thumb-ol {
    opacity: 1;
    bottom: -12px;
    border-top-color: #EDEDED;
}

.ms-tabs.ms-dir-v .ms-thumb-frame .ms-thumb-ol {
    top: 50%;
    left: 0;
    margin-top: -12px;
    border-right: solid 12px #EDEDED;
    border-top: solid 12px transparent;
    border-bottom: solid 12px transparent;
}

.ms-tabs.ms-dir-v.ms-align-right .ms-thumb-frame-selected .ms-thumb-ol {
    opacity: 1;
    left: -12px;
    border-right-color: #EDEDED;
}

.ms-tabs.ms-dir-v.ms-align-left .ms-thumb-frame .ms-thumb-ol {
    left: auto;
    right: 0;
    border-right: 0;
    border-left: solid 12px #EDEDED;
}

.ms-tabs.ms-dir-v.ms-align-left .ms-thumb-frame-selected .ms-thumb-ol {
    opacity: 1;
    right: -12px;
    border-left-color: #EDEDED;
}

/* Horizontal thumblist arrows */
.ms-thumb-list.ms-dir-h .ms-thumblist-fwd,
.ms-thumb-list.ms-dir-h .ms-thumblist-bwd {
    height: 100%;
    width: 20px;
    position: absolute;
    left: 0;
    cursor: pointer;
    background: rgba(128, 128, 128, 0.5);
    text-align: center;
    color: white;
}

.ms-thumb-list.ms-dir-h .ms-thumblist-bwd {
    right: 0;
    left: auto;
}

.ms-thumb-list.ms-dir-h .ms-thumblist-fwd::after,
.ms-thumb-list.ms-dir-h .ms-thumblist-bwd::after {
    content: close-quote;
    top: 43%;
    position: relative;
    border: solid rgba(0, 0, 0, 0);
    border-width: 5px 5px 5px 0;
    display: block;
    border-right-color: #FFF;
    width: 6px;
    height: 1px;
}

.ms-thumb-list.ms-dir-h .ms-thumblist-bwd::after {
    border-width: 5px 0 5px 5px;
    border-left-color: #FFF;
    left: 7px;
}

/* Vertical thumblist arrows */
.ms-thumb-list.ms-dir-v .ms-thumblist-fwd,
.ms-thumb-list.ms-dir-v .ms-thumblist-bwd {
    width: 100%;
    height: 20px;
    position: absolute;
    top: 0;
    cursor: pointer;
    background: rgba(128, 128, 128, 0.5);
    text-align: center;
    color: white;
}

.ms-thumb-list.ms-dir-v .ms-thumblist-bwd {
    bottom: 0;
    top: auto;
}

.ms-thumb-list.ms-dir-v .ms-thumblist-fwd::after,
.ms-thumb-list.ms-dir-v .ms-thumblist-bwd::after {
    content: close-quote;
    left: 43%;
    position: relative;
    border: solid rgba(0, 0, 0, 0);
    border-width: 0 5px 5px 5px;
    display: block;
    border-bottom-color: #FFF;
    height: 1px;
    top: 5px;
    width: 0;
}

.ms-thumb-list.ms-dir-v .ms-thumblist-bwd::after {
    border-width: 5px 5px 0 5px;
    border-top-color: #FFF;
    top: 7px;
}

/* Bullets */
.ms-bullet { cursor: pointer; float: left; }

.ms-bullets.ms-dir-h {
    position: absolute;
    bottom: 20px;
    right: 50%;
    width: 100px;
}

.ms-bullets.ms-dir-v {
    position: absolute;
    top: 50%;
}

.ms-bullets.ms-dir-v .ms-bullet { float: none; }

.ms-bullets.ms-dir-h .ms-bullets-count {
    position: relative;
    right: -50%;
}

/* Scrollbar */
.ms-sbar { position: absolute; }
.ms-sbar.ms-dir-h { left: 10px; right: 10px; top: 5px; }
.ms-sbar.ms-dir-v { top: 10px; bottom: 10px; right: 5px; }

.ms-sbar .ms-bar {
    height: 4px;
    background: #333;
    border-radius: 4px;
    position: relative;
    transition: opacity 300ms;
}

.ms-sbar.ms-dir-v .ms-bar { width: 4px; }

/* Timer bar */
.ms-timerbar {
    width: 100%;
    bottom: 0;
    position: absolute;
}

.ms-ctimer {
    position: absolute;
    top: 30px;
    left: 30px;
    cursor: pointer;
}

.ms-time-bar {
    transition: width 120ms linear;
}

/* Slide info container (used by the gallery's captions) */
.ms-slide-info { position: absolute; }
.ms-slide-info.ms-dir-v { top: 0; }
.ms-slide-info.ms-dir-h { width: 100%; }

/* Tooltip point pulse */
@keyframes point-anim {
    0%   { transform: scale(0.5); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* Android browsers can crash with CSS animations over the slider */
.ms-android .ms-tooltip-point .ms-point-border {
    animation: none;
}

/* --------------------------------------------------------------------------
   5. Default skin (both sliders use ms-skin-default)
   -------------------------------------------------------------------------- */

.ms-skin-default .ms-slide .ms-slide-vpbtn,
.ms-skin-default .ms-video-btn {
    width: 50px;
    height: 51px;
    background: url(/masterslider/style/light-skin-1.png) no-repeat -14px -150px;
    top: 50%;
    left: 50%;
    margin: -25px 0 0 -25px;
}

.ms-skin-default .ms-slide .ms-slide-vcbtn {
    width: 30px;
    height: 30px;
    background: url(/masterslider/style/light-skin-1.png) no-repeat -24px -28px;
    top: 18px;
    right: 30px;
}

.ms-skin-default .ms-nav-next,
.ms-skin-default .ms-nav-prev {
    width: 30px;
    background: url(/masterslider/style/light-skin-1.png);
    background-position: -89px -26px;
    height: 40px;
    cursor: pointer;
    top: 50%;
    left: 30px;
    margin-top: -20px;
    position: absolute;
    z-index: 110;
}

.ms-skin-default .ms-nav-next {
    right: 30px;
    left: auto;
    background-position: -89px -103px;
}

.ms-skin-default .ms-bullet {
    width: 10px;
    height: 10px;
    background: url(/masterslider/style/light-skin-1.png) no-repeat;
    margin: 4px;
    background-position: -34px -117px;
}

.ms-skin-default .ms-bullet-selected {
    background-position: -34px -84px;
}

.ms-skin-default .ms-time-bar {
    height: 3px;
    background: #FFFFFF;
    border-top: solid 1px rgba(0, 0, 0, 0.41);
}

/* Skin tooltips */
.ms-skin-default .ms-tooltip {
    position: absolute;
    z-index: 210;
    cursor: auto;
    max-width: 200px;
}

.ms-skin-default .ms-tooltip-top .ms-tooltip-arrow,
.ms-skin-default .ms-tooltip-bottom .ms-tooltip-arrow {
    border-left: solid 10px transparent;
    border-right: solid 10px transparent;
    position: absolute;
    left: 50%;
    margin-left: -10px;
}

.ms-skin-default .ms-tooltip-top .ms-tooltip-arrow {
    border-top: solid 10px rgba(240, 240, 240, 0.88);
    bottom: -10px;
}

.ms-skin-default .ms-tooltip-bottom .ms-tooltip-arrow {
    border-bottom: solid 10px rgba(240, 240, 240, 0.88);
    top: -10px;
}

.ms-skin-default .ms-tooltip-right .ms-tooltip-arrow,
.ms-skin-default .ms-tooltip-left .ms-tooltip-arrow {
    border-top: solid 10px transparent;
    border-bottom: solid 10px transparent;
    position: absolute;
    top: 50%;
    margin-top: -10px;
}

.ms-skin-default .ms-tooltip-right .ms-tooltip-arrow {
    border-right: solid 10px rgba(240, 240, 240, 0.88);
    left: -10px;
}

.ms-skin-default .ms-tooltip-left .ms-tooltip-arrow {
    border-left: solid 10px rgba(240, 240, 240, 0.88);
    right: -10px;
}

.ms-skin-default .ms-tooltip-point { cursor: pointer; }

.ms-skin-default .ms-tooltip-point .ms-point-center {
    width: 12px;
    height: 12px;
    border-radius: 15px;
    border: solid 2px #BBB;
    background: white;
    margin: -8px 0 0 -8px;
    position: absolute;
    z-index: 105;
}

.ms-skin-default .ms-tooltip-point .ms-point-border {
    width: 22px;
    height: 22px;
    background: rgba(0, 0, 0, 0.36);
    margin: -11px 0 0 -11px;
    position: absolute;
    border-radius: 15px;
    animation: point-anim 1.5s infinite;
}

.ms-skin-default .ms-tooltip-cont {
    padding: 10px;
    background: rgba(240, 240, 240, 0.88);
    text-shadow: 0 1px 0 white;
    margin-left: -1px;
}

/* Retina sprite */
@media only screen and (min-resolution: 2dppx) {
    .ms-skin-default .ms-slide .ms-slide-vpbtn,
    .ms-skin-default .ms-video-btn,
    .ms-skin-default .ms-slide .ms-slide-vcbtn,
    .ms-skin-default .ms-nav-next,
    .ms-skin-default .ms-nav-prev,
    .ms-skin-default .ms-bullet {
        background-image: url(/masterslider/style/light-skin-1-retina.png);
        background-size: 152px 225px;
    }
}

/* --------------------------------------------------------------------------
   6. Partial view template (gallery slider captions)
   -------------------------------------------------------------------------- */

.ms-partialview-template .ms-slide-info {
    text-align: center;
    font-family: "Lato";
    margin-top: 1rem;
    width: 100%;
    margin-bottom: 0rem;
}

.ms-partialview-template .ms-slide-info h3 {
    text-align: center;
    color: var(--d3-grey_3);
    margin: 1rem 0;
    font-family: var(--d3-header_1);
    font-size: 2rem;
    line-height: 1;
    font-weight: 300;
}

.ms-partialview-template .ms-slide-info h4 {
    text-align: center;
    color: var(--d3-grey_3);
    margin: 0.5rem;
    font-family: var(--d3-header_1);
    font-size: 1.5rem;
    line-height: 1;
    font-weight: normal;
}

.ms-partialview-template .ms-slide-info p {
    text-align: center;
    font-size: 1.1rem;
    font-family: var(--d3-text_4);
    color: var(--d3-white);
    font-weight: 300;
    line-height: 1.5;
    letter-spacing: 0.1rem;
    margin: 1rem auto 0.5rem;
}

/* Video title layers */
.ms-layer.video-title {
    font-family: "Lato", sans-serif;
    color: white;
    font-weight: 600;
    font-size: 42px;
    margin: 0;
    letter-spacing: 0;
}

.ms-layer.video-title.video-top-title {
    font-size: 16px;
    color: #ffffff;
}

.ms-layer.video-title.video-sub-title {
    font-size: 22px;
    font-weight: 300;
}

@media (max-width: 768px) {
    .ms-partialview-template .ms-slide-info h3 {
        font-size: 1.5rem;
    }
}

/* MAIN_MASTERSLIDER | SMARTPHONE ***********************************************/
@media (max-width: 768px) {
    #masterslider_home {
        display: none;
    }
}

/* ========================== END MASTERSLIDER ============================= */


/* GALLERY_MASTERSLIDER ************************************************************************************************/

.masterslider {
    margin: 0rem 0 0rem 0;
}

/* GALLERY_MASTERSLIDER | TABLET ***************************************************************************************/
@media (max-width:1400px) {
.masterslider {
    width: 90%;
    max-width: 90%;
    margin: 0rem auto 0rem;
}
}

/* GALLERY_MASTERSLIDER | SMARTPHONE ***********************************************************************************/
@media (max-width:768px) {
.masterslider {
    width: 100%;
    max-width: 100%;
    margin: 0rem auto 0rem;
}

.ms-partialview-template .ms-slide-info p {
    padding:0.5rem;
}
}

/* YOUTUBE_VIDEO ************************************************************************************************/
/* home.php */

.youtube_video {
    background: linear-gradient(to right, var(--d3-grey_3) 40%, transparent);
    padding: 0.5rem;
    width: 62%;
    max-width: 62%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-gap: 1rem;
    grid-template-areas: "youtube_video_center";
    margin: 0rem auto;
}

.youtube_video_center {
    grid-area: youtube_video_center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: center;
    flex-wrap: nowrap;
    text-align: center;
}

/* 16:9 responsive frame for the home-page YouTube embed */
.aspectRatio_container {
    width: 100%;
    aspect-ratio: 16 / 9;
}

/* YOUTUBE_VIDEO | TABLET ****************************************************************************************************/
@media (max-width:1400px) {   
.youtube_video {
    background: var(--d3-grey_3);
    width: 90%;
    max-width: 90%;
}}

/* YOUTUBE_VIDEO | SMARTPHONE ************************************************************************************************/
@media (max-width:768px) {  
.youtube_video {
    background: var(--d3-grey_3);
    width: 100%;
    max-width: 100%;
    margin: 0rem 0 0rem;
}

.youtube_video_center {
    text-align: justify;
}}

/* BIOGRAPHY ************************************************************************************************/

.biography {
    display: grid;
    --frame: 0.5rem;
    padding: var(--frame);
    gap: var(--frame);
    background: linear-gradient(to right, var(--d3-grey_3) 40%, transparent);
    width: 62%;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 1fr;
    grid-template-areas: "biography_left biography_right";
    margin: 0 auto;
}

.biography a:hover {
    color: var(--d3-white);
}

.biography_left {
    grid-area: biography_left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--d3-black);
    min-width: 0;
}

.biography_right {
    grid-area: biography_right;
    display: flex;
    flex-direction: row;
    justify-content: center; /* x-axis */
    align-items: center;     /* y-axis */
    flex-wrap: wrap;
    background-color: var(--d3-black);
    min-width: 0;
}

.bio_information {
    display: grid;
    gap: 3rem;
    padding: 1rem;
}

.bio_information h3 {
    margin: 0; /* stripd default browser UA em margin from x & y 1 rem from <p> */
    min-width: 0; /* will shrink */
    text-align: center;
    color: var(--d3-grey_3);
    font-family: var(--d3-header_1);
    font-weight: 300;
    font-size: 3rem;
    line-height: 1;
    font-weight: 300;
    overflow-wrap: normal;
}

.bio_information p {
    margin: 0; /* stripd default browser UA em margin from x & y 1 rem from <p> */
    min-width: 0; /* will shrink */
    text-align: left;
    font-size: 1.1rem;
    font-family: var(--d3-text_4);
    color: var(--d3-white);
    font-weight: 300;
    line-height: 1.5;
    letter-spacing: 0.1rem;
    max-width: min(73ch, 100%); /* ties the cap to the track — 73ch on wide screens, but never more than 100% of the available track width, so it can always shrink to fit. */
    text-wrap: pretty;
    justify-self: center;
}

.bio_information a {
    color: var(--d3-green_3);
    font-weight: 400;
}

/* PROFILE_CARD ************************************************************************************************/

.card {
    display: grid;
    gap: 2rem;
    background-color: var(--d3-grey_2);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
    width: 100%;
    max-width: 100%;
    border: 5px solid var(--d3-grey_1);
}

.card img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    border-bottom: 3px solid var(--d3-green_3);
}

.card h3 {
    margin: 0; /* stripd default browser UA em margin from x & y 1 rem from <p> */
    min-width: 0; /* will shrink */
    font-family: var(--d3-header_1);
    text-align: center;
    color: var(--d3-black);
    font-size: 2rem;
    line-height: 1;
    font-weight: 300;

}

.card p {
    margin: 0; /* stripd default browser UA em margin from x & y 1 rem from <p> */
    min-width: 0; /* will shrink */
    font-size: 1.25rem;
    font-family: var(--d3-header_2);
    color: var(--d3-white);
    text-align: center;
    font-weight: 400;
    letter-spacing: 0.1rem;
}

.card_icons {
    text-align: center;
    position: relative;
}

.card_icons a {
    text-align: center;
    margin: 0 0.5rem;
}

.card_icons a svg {
    inline-size: 1.7rem; block-size: 1.7rem;
    fill: currentColor; vertical-align: middle;
    color: var(--d3-white);
    transition: color 0.4s;
}

.card_icons a:hover svg {
    color: var(--d3-green_3);
}

.card h3      { margin: 0; } /* all 3 element margins are stripped, relying on the parents gap rule */
.card p       { margin: 0; }
.card_icons   { margin: 0; }

.card > :last-child {
    margin-bottom: 2rem;
}

/* BIOGRAPHY | TABLET ************************************************************************************************/
  @media (max-width:1400px) { 
    .biography {
        background: var(--d3-grey_3);
        width: 90%;
        max-width: 90%;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        grid-template-areas: "biography_left" "biography_right";
        justify-items: center;   /* each child centered WITHIN its own column track */
    }
    .biography_left {
        flex-direction: row;
        align-self: stretch;
        width: 60%;
        max-width: 60%;
    }
    .biography_right {
        align-self: flex-start;
        text-align: left;
        padding: 0 3rem;
        width: 60%;
        max-width: 60%;
    }

    .bio_information {
    padding: 2rem 0;
    gap: 2rem;
    }
 
    .bio_information h3 {
        font-size: 2rem;
    }

/* PROFILE_CARD | TABLET ************************************************************************************************/
.card h3 {
    font-size: 2rem;  
}
}   

/* BIOGRAPHY | SMARTPHONE ************************************************************************************************/
   @media (max-width:768px) {  
    
    .biography {
        background: var(--d3-grey_3);
        width: 100%;
        max-width: 100%;
        grid-template-rows: auto auto;
    }
    .biography_left {
        justify-content: center;
        margin: 0 0;
        width: 100%;
        max-width: 100%;
    }
    .biography_right {
        align-self: center;
        width: 100%;
        max-width: 100%;
    }
    .bio_information p {
        text-align: justify;
        hyphens: auto;
        font-size: 1rem;
    }
    .bio_information h3 {
        font-size: 2rem;
    }
    /* PROFILE_CARD | SMARTPHONE ************************************************************************************************/
.card h3 {
    font-size: 1.8rem;
}
}

/* CP_NOTIFICATIONS ******************************************************************************************************/
/* REMOVED (v7.x) — the home-page version pop-up toast (home.php) was taken
   off the site, so all .cp-notify / .cp-* rules, both keyframes and the
   --z-notify token are gone with it. The cookies banner (#cp-cookies-close)
   is a SEPARATE feature and is untouched. */

/* GRID_HEADER ************************************************************************************************/
/* header.php */

.d3_header_logo {
    width: 110px;
    height: 110px;
    margin-left: 0.75rem;
}

.grid_header {
    background: var(--d3-grey_1);
    width: 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    grid-template-rows: 120px;
    grid-gap: 1rem;
    grid-template-areas: "header header2 .";
}

.grid_header h1 {
    color: var(--d3-grey_3);
    font-size: 5vw;
    font-family: var(--d3-header_1);
    font-weight: 300;
    line-height: 1;
}

.header_section {
    grid-area: header;
    display: flex;
    justify-content: flex-start;
    align-self: center;
}

.header_section2 {
    grid-area: header2;
    display: flex;
    justify-content: center;
    align-self: center;
}

/* GRID_HEADER | TABLET ************************************************************************************************/
@media (max-width:1400px){

    .d3_header_logo {
        width: 190px;
        height: 190px;
        margin-left: 0rem;
    }
   .grid_header {
        grid-template-columns: 1fr;
        grid-template-rows: 220px 150px;
        grid-gap: 0rem;
        grid-template-areas: "header""header2";
    }
    .grid_header h1 {
        font-size: 10vw;
        margin: 0 auto 1.5rem;
    }
    .header_section {
        justify-content: center;
        align-self: flex-end;
    }
}

/* GRID_HEADER | SMARTPHONE ************************************************************************************************/
@media (max-width:768px){

    .grid_header {
        grid-template-rows: 200px 60px;
    }
    .grid_header h1 {
        font-size: 9vw;
        font-weight: 300;
        line-height: 1;
        margin: 0 auto 0.2rem;
    }
}

/* MAIN_NAVBAR ************************************************************************************************/
/* header.php */

.topnav {
  width: 100%;
  height: 60px;
  background-color: var(--d3-black);
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.3);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "left_zone right_zone";
  align-items: center;
  height: 60px;
  gap: .75rem;
  /* z-index removed: .topnav is statically positioned, so the old z-index: 9 was a no-op; nav's z-index does the layering */
}

.topnav_left_zone {
  grid-area: left_zone;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
  margin: 0;
  background: transparent;
}
.topnav_right_zone {
  grid-area: right_zone;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0;
  margin: 0;
  background: transparent;
}

/* LINKS inside a zone (horizontal row) */
.topnav a {
  color: var(--d3-green_3);
  font-family: var(--d3-text_4);
  text-decoration: none;
  font-size: 1.25rem;
  font-weight: 300;
  letter-spacing: 0.1rem;
  padding: 1.3rem .75rem;
  position: relative;
  background:
  linear-gradient(var(--d3-white), var(--d3-white)) left bottom / 0 5px no-repeat;
  transition: background-size .35s ease, color .35s ease;
  text-align: center;
}

/* expand the underline on hover/focus */
.topnav a:hover,
.topnav a:focus-visible {
  background-size: 100% 5px;
  color: var(--d3-white);
}

/* Current/active page — linkOn_*() echoes "active"; aria-current kept for future markup */
.topnav a.active,
.topnav a[aria-current="page"] {
  background-size: 100% var(--nav-underline);
  color: var(--d3-white);
  background-color: var(--d3-green_3);

}

/* High-contrast users: thicken the underline a touch */
@media (prefers-contrast: more) {
  :root { --nav-underline: 6px; }
}

/* MAIN_NAVBAR | TABLET ************************************************************************************************/
@media (max-width:1400px){

    .topnav {
        border-bottom: solid 0px var(--d3-green_3);
    }
    .topnav a {
        color: var(--d3-green_3);
        padding: 14px 16px;
        font-size: 1rem;
        margin: -0.15em auto;
    }
    .topnav a:hover {
        color: var(--d3-white);
    }
}

/* MAIN_NAVBAR | SMARTPHONE ************************************************************************************************/
@media (max-width:768px){
    .topnav_left_zone_links {
        display: flex;      /* re-show the links the 1400 query hid */
        flex-wrap: wrap;    /* let them wrap so 7 links fit a narrow screen */
        justify-content: center;
    }
    .topnav a {
        color: var(--d3-green_3);
        padding: 1rem 1rem;
        text-decoration: none;
        font-size: 1.5rem;
    }
}

/* NAVBAR_DROPDOWN ************************************************************************************************/
/* header.php */

/* Wrapper anchors the panel */
.navbar_dropdown {
  position: relative;
  margin-left: 0.5rem;
}

/* Button (keeps your look) */
.navbar_dropdown .navbar_dropbtn {
  font-size: 1.25rem;
  border: none;
  outline: none;
  color: var(--d3-green_3);
  font-family: var(--d3-text_4);
  text-align: center;
  text-decoration: none;
  font-weight: 300;
  letter-spacing: 0.1rem;
  transition: 0.4s;
  background-color: transparent;
  height: 60px;
  /* z-index removed: statically positioned, the old 9 never applied */
}

/* Hover styling for the trigger (unchanged visuals) */
.navbar_dropdown:hover .navbar_dropbtn {
  background-color: transparent;
  color: var(--d3-white);
  font-weight: 300;
  letter-spacing: 0.1rem;
  transition: 0.4s;
}

/* Panel – matches your HTML class */
.navbar_dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  left: 0.5rem;
  background-color: var(--d3-black);
  min-width: 250px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.3);
  z-index: 1000; /* local to nav's stacking context — only orders the panel vs. siblings INSIDE nav. If the dropdown ever gets covered by page content, raise --z-nav, not this number. */
  margin-top: 2px;
}

/* Links inside the dropdown (unchanged) */
.navbar_dropdown-content a {
  float: none;
  color: var(--d3-green_3);
  padding: 1rem 1rem;
  text-decoration: none;
  display: block;
  text-align: left;
  font-family: var(--d3-text_4);
  font-weight: 300;
  letter-spacing: 0.1rem;
  border-bottom: 1px solid var(--d3-grey_3);
}

/* Hover state for links (unchanged) */
.navbar_dropdown-content a:hover {
  color: var(--d3-white);
  border-bottom: 1px solid var(--d3-grey_3);
}

/* Show the dropdown on hover (as you had) */
.navbar_dropdown:hover .navbar_dropdown-content {
  display: block;
}

/* Plus keyboard: open when button (or any child) has focus */
.navbar_dropdown:focus-within .navbar_dropdown-content {
  display: block;
}

/* Optional: only keep this if your nav bar had overflow issues elsewhere */
.topnav { overflow: visible; }

/* NAVBAR_DROPDOWN | TABLET ************************************************************************************************/
@media (max-width:1400px) {

  .navbar_dropdown {
    position: relative;
  }

  .navbar_dropdown-content {
    margin-top: 0.2em;
  }

  .navbar_dropdown-content a {
    padding: 12px 16px;
  }

  /* Hide the left link group as you intended */
  .topnav_left_zone_links {
    display: none;
  }
}

/* HEADER_NAVBAR_BUTTON | OFF_CANVAS_MENU_BUTTON ************************************************************************************************/
/* header.php */

.button {
    display: block;
    background-color: rgba(0, 0, 0, 0.0);
    border: none;
    width: 60px;
    height: 60px;
    cursor: pointer;
    outline: none;
    margin-right: 0.3rem;
}

.burger {
    display: block;
    width: 2.188rem;
    height: 5px;
    background-color: var(--d3-green_3);
    margin: 6px auto;
}

/* OFF_CANVAS_MENU ************************************************************************************************/
/* header.php */
/* The side navigation menu */

.sidenav a.off_canvas_active {
    color: var(--d3-white);
    background-color: var(--d3-green_3);
    box-shadow: inset 5px 0px 0px 0px var(--d3-white);
    }

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: var(--z-sidenav); /* was 100 — lost to slider arrows (110) and tooltips (210); now beats nav + slider, stays under scroll/toasts/cookies */
    top: 0;
    right: 0;
    background-color: var(--d3-black);
    overflow-x: hidden;
    padding-top: 3.75rem;
    transition: 0.4s;
    white-space: nowrap;
    box-shadow: inset 5px 0px 0px 0px var(--d3-green_3);
}

/* The navigation menu links */

.sidenav a {
    padding: 0.5rem 0.5rem 0.5rem 2rem;
    text-decoration: none;
    font-size: 1.25rem;
    color: var(--d3-green_3);
    display: block;
    transition: 0.3s;
    font-family: var(--d3-text_4);
    font-weight: 300;
    line-height: 1.5;
    letter-spacing: 0.1rem;
}

/* When you mouse over the navigation links, change their color */

.sidenav a:hover {
    color: var(--d3-white);
}

/* Position and style the close button (top right corner) */

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 1.5rem;
    font-size: 2rem;
    margin-left: 3.125rem;
    color: var(--d3-red);
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */

#canvas_push {
    transition: margin-left .5s;
    padding: 0px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */

@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 1rem;
    }
    .sidenav a {
        font-size: 0.7rem;
    }
}

/* DROPDOWN_IN_SIDENAV ************************************************************************************************/
/* header.php */

/* Style the sidenav links and the dropdown button */

.dropdown-btn {
    padding: 0.5rem 0.5rem 0.5rem 2rem;
    text-decoration: none;
    font-size: 1.25rem;
    color: var(--d3-grey_3);
    font-weight: 300;
    font-family: var(--d3-text_4);
    display: flex;
    align-items: center;   /* centers caret with the text vertically */
    gap: 0.2rem;           /* replaces margin-left on the caret */
    border: none;
    background: var(--d3-grey_1);
    width: 100%;
    text-align: left;
    cursor: pointer;
    outline: none;
    line-height: 1.5;
    letter-spacing: 0.1rem;
    transition: all .4s ease;
    box-shadow: inset 5px 0px 0px 0px var(--d3-grey_2);
}

/* On mouse-over */

.dropdown-btn:hover {
    color: var(--d3-white);
}

/* Dropdown container (hidden by default). */

.dropdown-container {
    display: none;
    background-color: var(--d3-black);
    padding-left: 2rem;
    border: none;
    border-left: 5px solid var(--d3-green_3);
}

button.dropdown-btn.active {
    background-color: var(--d3-green_3);
    color: var(--d3-white);
    box-shadow: inset 5px 0px 0px 0px var(--d3-white);
}

/* PROGRESS_INDICATOR *******************************************************************************************/
/* The progress container (grey background) */

.progress-container {
    width: 100%;
    height: 5px;
    background: var(--d3-green_3);
}

/* The progress bar (scroll indicator) */

.progress-bar {
    height: 5px;
    background: var(--d3-grey_3);
    width: 0%;
}

/* SEARCH_BAR | SEARCH_FORM ************************************************************************************************/
/* header.php */

.search_bar {
    width: 100%;
    background: var(--d3-black);
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "search_bar_box";
    margin: 0 auto;
}

.search_bar_box {
    grid-area: search_bar_box;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- input + button ------------------------------------------------------- */

form.example {
    display: flex;
    width: 100%;
}

form.example input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px;
    font-family: var(--d3-text_4);
    font-size: 1.25rem;
    letter-spacing: 0.01em;
    color: var(--d3-grey_1);
    background: var(--d3-white);
    border: 1px solid var(--d3-grey_3);
}

form.example input[type="text"]:focus-visible {
    outline: 2px solid var(--d3-green_3);
    outline-offset: -1px;
}

form.example button {
    flex: 0 0 auto;
    padding: 10px 1.25rem;
    background: var(--d3-green_3);
    color: var(--d3-white);
    font-size: 1.0625rem;
    border: 1px solid var(--d3-green_3);
    border-left: none;
    cursor: pointer;
}

form.example button:hover,
form.example button:focus-visible {
    background: var(--d3-black);
    color: var(--d3-green_3);
}

/* --- results -------------------------------------------------------------- */
/* Markup: one <table class="search"> = 2 header rows, then 3 rows per result
   (title / blurb / url). Dividers sit under the header row and under each
   result's final row (:has(.table_url)), so a line falls BETWEEN results -
   never between the title/blurb/url inside a single result. */

.search {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    background: var(--d3-grey_1);
    border-collapse: collapse;
}

.search td { padding: 0.12rem 1.25rem; }   /* tight base; rows below add spacing */
.search h3 { margin: 0; }

/* header: result count */
.search td:has(.search_count) { padding-top: 1rem; }

.search_count {
    color: var(--d3-green_3);
    font-family: var(--d3-header_1);
    font-size: 2rem;
    font-weight: 300;
}
.search_count_accent {
    color: var(--d3-white);
    font-style: normal;
    font-weight: 300;
}

/* header: "you searched for <term>" */
.search_label {
    color: var(--d3-white);
    font-style: italic;
    font-size: 1.25rem;
}
.search_terms {
    margin-top: 0.15rem;
    color: hotpink;
    font-size: 2rem;
    font-weight: 400;
    font-family: var(--d3-header_2);
}
.search td:has(.search_terms) {
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--d3-grey_3);   /* separates header from results */
}

/* per-result: title (first row of the group) */
.search td:has(.table_title) { padding-top: 0.85rem; }
.table_title a {
    color: hotpink;
    font-size: 2rem;
    font-weight: 400;
    font-family: var(--d3-header_2);
    line-height: 1.3;
    text-decoration: underline;
}

/* per-result: blurb */
.search_blurb {
    margin: 0.3rem 0 0;
    color: var(--d3-white);
    font-family: var(--d3-text_4);
    font-size: 1.1rem;
    font-weight: 300;
    line-height: 1.5;
    letter-spacing: 0.1rem;
    text-align: left;
}

/* per-result: url (last row of the group - carries the divider) */
.table_url a {
    display: inline-block;
    max-width: 100%;
    margin-top: 0.15rem;
    color: var(--d3-grey_3);
    font-family: var(--d3-text_4);
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.1rem;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search td:has(.table_url) {
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--d3-grey_3);   /* division BETWEEN results */
}

/* header <hr> no longer needed - cell borders handle every division */
.search_bar hr { display: none; }

/* no results */
.left_search { margin-left: 0.5rem; }
.search_none {
    color: hotpink;
    font-family: var(--d3-text_4);
    font-size: 1.25rem;
    font-weight: 400;
    letter-spacing: 0.1rem;
    text-align: left;
    margin: 1rem 0;
}

/* DISCOGRAPHY_GRID (static, no database) ******************************************************************/

.discography_grid_parent {
    display: grid;
    place-items: center;
    width: 100%;
    padding: 1.5rem 0;
}

.discography_grid {
    display: grid;
    width: min(92%, 72rem);
    grid-template-columns: repeat(3, minmax(0, 1fr));   /* 3 across */
    gap: 1.5rem;
}

/* Each card spans 5 stacked rows and adopts them with subgrid, so number,
   type, title, icons and image line up across the three cards in a row. */
.release_card {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    row-gap: 0.5rem;
    min-width: 0;                       /* lets the card shrink instead of overflowing */
    padding: 1rem;
    background: var(--d3-black);
    border: 3px solid var(--d3-green_3);
    border-radius: 12px;
    border-top-right-radius: 30px;
    corner-top-right-shape: bevel;
    text-align: center;
}

.release_number {
    margin: 0;
    font-family: var(--d3-header_1);
    font-size: 2rem;
    font-weight: 300;
    line-height: 1;
    color: var(--d3-green_3);
}

.release_type {
    margin: 0;
    font-family: var(--d3-text_1);
    font-weight: 400;
    font-size: 1.25rem;
    text-transform: uppercase;
    color: var(--d3-grey_3);
}

.release_title {
    margin: 0;
    font-family: var(--d3-header_2);
    font-size: 1.25rem;
    font-weight: 400;
    letter-spacing: 0.1rem;
    color: var(--d3-white);
}

.release_icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.release_icons a {
    display: inline-flex;
    color: var(--d3-white);
    transition: color 0.3s;
}

.release_icons a:hover { color: var(--d3-green_3); }

.release_icons svg {
    inline-size: 1.5rem;
    block-size: 1.5rem;
    fill: currentColor;                 /* brand icons follow the link colour */
}

/* 1000x1000 source shown at up to 400px, square, scales down in narrow columns */
.release_image_link {
    justify-self: center;
    align-self: end;
    display: block;
    width: 100%;
    max-width: 400px;
}

.release_image_link img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 8px;
}

/* Tablet: 2 across */
@media (max-width: 1400px) {
    .discography_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Phone: 1 across */
@media (max-width: 768px) {
    .discography_grid { grid-template-columns: 1fr; }
}

/* PAGINATION ***********************************************************************/
/* discography.php */

.pagination_summary {
    color: var(--d3-grey_3);
    font-family: var(--d3-header_2);
    font-size: 1.25rem;
    font-weight: 400;
    letter-spacing: 0.1rem;
    text-align: center;
    margin: 0 auto 0.5rem;
}

.pagination_grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    min-width: 22rem;          /* keeps the bar from shrinking at the edges */
    margin-inline: auto;
    margin-bottom: 1.5rem;
    padding-inline: 0.25rem;
    background-color: rgba(0, 0, 0, 0.5);
}

.pagination_grid a {
    color: var(--d3-green_3);
    font-family: var(--d3-header_1);
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1;
    padding: 0.5rem 1rem;
    text-decoration: none;
    transition: background-color .4s;
}

.pagination_grid a:hover,
.pagination_grid a:focus-visible {
    background-color: var(--d3-white);
}

.pagination_grid a[aria-current="page"] {
    background-color: var(--d3-green_3);
    color: var(--d3-white);
}

.pagination_gap {
    color: var(--d3-green_3);
    font-family: var(--d3-header_1);
    font-size: 1.5rem;
    line-height: 1;
    padding: 0.5rem 0.5rem;
    opacity: 0.5;
    align-self: center;
}

/* PAGINATION | TABLET ***********************************************************/
@media (max-width: 1400px) {
    .pagination_grid { margin-bottom: 1.5rem; }
}

/* PAGINATION | SMARTPHONE ******************************************************/
@media (max-width: 768px) {
    .pagination_grid {
        min-width: 0;          /* let it shrink on narrow screens */
        width: 90%;
        max-width: 90%;
        margin-bottom: 1.5rem;
    }
}

/* RELEASE_PAGE ****************************************************************/
/* release.php — migrated from the page's inline <style> wireframe block.
   Header-title overrides at the bottom are scoped to body.page-release
   (set via $page_class in release.php) so no other page's header changes. */

.release_page {
    width: min(92%, 72rem);              /* same track width as .discography_grid */
    margin: 0 auto;
    padding: 1.5rem 0;
    display: grid;
    row-gap: 1.5rem;
}

/* --- Breadcrumb / back link --- */

.release_back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    justify-self: start;
    font-family: var(--d3-header_2);
    font-size: 1.25rem;
    font-weight: 400;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
    color: var(--d3-grey_3);
    transition: color 0.3s;
}

.release_back svg {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    fill: currentColor;
}

.release_back:hover { color: var(--primary-website-color, var(--d3-green_3)); }

/* --- Hero panel: cover left, details right --- */

.release_hero {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: 2rem;
    padding: 2rem;
    background: var(--d3-black);
    border: 3px solid var(--primary-website-color, var(--d3-green_3));
    border-radius: 12px;
}

/* Cover art — square, same treatment as .release_image_link img on discography */
.release_hero_cover img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 8px;
    background: var(--d3-grey_1);
}

/* Details column */
.release_hero_details {
    display: grid;
    align-content: start;
    row-gap: 1rem;
    min-width: 0;
    text-align: left;
}

.release_hero_eyebrow {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin: 0;
}

.release_hero_eyebrow .release_number { font-size: 1.5rem; }   /* reuses discography class */
.release_hero_eyebrow .release_type   { font-size: 1rem;   }   /* reuses discography class */

.release_hero_title {
    margin: 0;
    font-family: var(--d3-header_1);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 300;
    line-height: 1.05;
    color: var(--d3-white);
    min-width: 0;                 /* lets the grid item shrink below min-content */
    overflow-wrap: anywhere;      /* unlike break-word, this IS counted in min-content sizing */
}

/* dt/dd meta grid: date, catalogue, genre, bpm, key */
.release_meta {
    margin: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 1.25rem;
    row-gap: 0.35rem;
}

.release_meta dt {
    font-family: var(--d3-header_2);
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
    color: var(--primary-website-color, var(--d3-green_3));
}

.release_meta dd {
    margin: 0;
    font-family: var(--d3-text_1);
    font-size: 1.1rem;
    font-weight: 300;
    color: var(--d3-white);
}

.release_blurb {
    margin: 0;
    font-family: var(--d3-text_1);
    font-size: 1.1rem;
    font-weight: 300;
    line-height: 1.7;
    color: var(--d3-grey_3);
}

/* Streaming pills — icon + label, echoes .release_icons hover behaviour */
.release_stream_links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-self: end;
}

.release_stream_links a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    border: 2px solid var(--primary-website-color, var(--d3-green_3));
    border-radius: 2rem;
    font-family: var(--d3-header_2);
    font-size: 1rem;
    letter-spacing: 0.1rem;
    color: var(--d3-white);
    transition: background-color 0.3s, color 0.3s;
}

.release_stream_links a:hover {
    background-color: var(--primary-website-color, var(--d3-green_3));
    color: var(--d3-black);
}

.release_stream_links svg {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    fill: currentColor;
}

/* --- Shared panel treatment for the sections below the hero --- */

.release_panel {
    padding: 1.5rem 2rem 2rem;
    background: var(--d3-black);
    border: 3px solid var(--d3-darkest-grey);           /* quieter frame than the hero */
    border-radius: 12px;
}

.release_panel > h3 {
    margin: 0 0 1.25rem;
    font-family: var(--d3-header_2);
    font-size: 1.25rem;
    font-weight: 400;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
    color: var(--heading-font-color, var(--d3-grey_3));
    border-bottom: 3px solid var(--primary-website-color, var(--d3-green_3));
    padding-bottom: 0.5rem;
    display: inline-block;
}

/* --- Tracklist --- */

.release_tracklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
}

.release_tracklist li {
    display: grid;
    grid-template-columns: 3rem 1fr max-content;
    align-items: center;
    column-gap: 1rem;
    padding: 0.75rem 0.75rem;
    border-bottom: 1px solid var(--d3-darkest-grey);
    font-family: var(--d3-text_1);
    color: var(--d3-white);
    transition: background-color 0.3s;
}

.release_tracklist li:last-child { border-bottom: none; }

.release_tracklist li:hover { background-color: var(--d3-light-black); }

.release_track_no {
    font-family: var(--d3-header_2);
    font-size: 1.25rem;
    font-weight: 400;
    letter-spacing: 0.1rem;
    color: var(--primary-website-color, var(--d3-green_3));
}

.release_track_title {
    font-size: 1.1rem;
    font-weight: 300;
    min-width: 0;
    overflow-wrap: break-word;
}

.release_track_length {
    font-family: var(--d3-header_2);
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: 0.1rem;
    color: var(--d3-grey_3);
}

/* Total running time — same grid as the track rows, so the time lands
   exactly under the per-track lengths column */
.release_tracklist_total {
    margin: 0;
    display: grid;
    grid-template-columns: 3rem 1fr max-content;
    align-items: center;
    column-gap: 1rem;
    padding: 0.75rem 0.75rem 0;
    border-top: 3px solid var(--primary-website-color, var(--d3-green_3));
}

.release_tracklist_total_label {
    grid-column: 2;                      /* skip the track-number column */
    justify-self: end;
    font-family: var(--d3-header_2);
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
    color: var(--primary-website-color, var(--d3-green_3));
}

.release_tracklist_total .release_track_length { color: var(--d3-white); }

/* --- Player embed placeholder --- */

.release_player_placeholder {
    display: grid;
    place-items: center;
    min-height: 152px;                   /* Spotify embed compact height */
    border: 3px dashed var(--d3-darkest-grey);
    border-radius: 8px;
    font-family: var(--d3-header_2);
    font-size: 1.1rem;
    letter-spacing: 0.1rem;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--d3-grey_2);
}

/* --- Credits --- */

.release_credits {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1rem 2rem;
}

.release_credits div { min-width: 0; }

.release_credits dt {
    font-family: var(--d3-header_2);
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
    color: var(--primary-website-color, var(--d3-green_3));
    margin-bottom: 0.25rem;
}

.release_credits dd {
    margin: 0;
    font-family: var(--d3-text_1);
    font-size: 1.1rem;
    font-weight: 300;
    color: var(--d3-white);
}

/* --- Not-found state (bad/old release link, real 404 status) --- */

.release_not_found {
    display: grid;
    justify-items: center;
    row-gap: 0.75rem;
    padding: 3rem 2rem;
    background: var(--d3-black);
    border: 3px solid var(--d3-red);
    border-radius: 12px;
    text-align: center;
}

.release_not_found h2 {
    margin: 0;
    font-family: var(--d3-header_1);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 300;
    color: var(--d3-white);
}

.release_not_found p {
    margin: 0;
    font-family: var(--d3-text_1);
    font-size: 1.1rem;
    font-weight: 300;
    color: var(--d3-grey_3);
}

.release_not_found a {
    color: var(--primary-website-color, var(--d3-green_3));
    transition: color 0.3s;
    font-weight: 400;
}

.release_not_found a:hover { color: var(--d3-white); }

/* --- Header title overrides — release.php ONLY (body.page-release) ---------
   The shared header title is 8vw from 1400px down, in a row fixed at 60px
   under 768px. Fine for short titles like "Discography"; long release titles
   blow up, wrap and clip. Scoping via the body class set in release.php means
   discography/contact/home headers are untouched. */

   /* Desktop (1401px+): the shared header h1 is 5vw inside a row fixed at
   120px — fine for "Discography", but long release titles wrap and clip
   out of view. Cap the size and let the row grow to fit instead. Wrapped
   in min-width so the tablet/smartphone grid rows below stay untouched. */
   
@media (min-width: 1401px) {
    body.page-release .grid_header {
        grid-template-rows: minmax(120px, auto);   /* row grows if the title wraps */
    }
    body.page-release .grid_header h1 {
        font-size: clamp(3rem, 2.5vw, 4rem);
        line-height: 1.1;
        text-align: center;
        overflow-wrap: break-word;
        padding-inline: 1rem;
    }
}

@media (max-width: 1400px) {
    body.page-release .grid_header h1 {
        font-size: clamp(1.5rem, 4.5vw, 2.75rem);
        text-align: center;
        overflow-wrap: break-word;
        padding-inline: 0.75rem;
        line-height: 1.15;
    }
}

@media (max-width: 768px) {
    body.page-release .grid_header {
        grid-template-rows: 200px minmax(60px, auto);  /* row grows if the title wraps */
    }
    body.page-release .grid_header h1 {
        font-size: clamp(1.1rem, 5vw, 1.5rem);
    }
}

/* --- Responsive (same breakpoints as the discography grid) --- */

/* Tablet: hero stacks, cover centred — text stays left-aligned */
@media (max-width: 1400px) {
    .release_hero {
        grid-template-columns: 1fr;
    }
    .release_hero_cover {
        justify-self: center;
        width: min(100%, 420px);
    }
}

/* Phone: tighter padding, streaming buttons stack vertically */
@media (max-width: 768px) {
    .release_hero,
    .release_panel { padding: 1.25rem 1rem; }
    .release_tracklist li { grid-template-columns: 2rem 1fr max-content; }
    .release_tracklist_total { grid-template-columns: 2rem 1fr max-content; }

    .release_stream_links {
        flex-direction: column;
        align-items: stretch;          /* pills fill the column width */
    }
    .release_stream_links a {
        justify-content: center;       /* icon + label centred inside each pill */
    }

    .release_hero_title {
        font-size: clamp(1.75rem, 8vw, 2.5rem);
    }
}

/* Spotify embed (release page "Listen" panel) */
.release_embed iframe {
    display: block;
    width: 100%;
    border: 0;
    border-radius: 12px;      /* matches Spotify's own corner radius + the panels */
}

/* YouTube embed (release page "Listen" panel) — no fixed height attribute
   like Spotify's 352; the video keeps its 16:9 shape at any panel width */
.release_embed_youtube iframe {
    aspect-ratio: 16 / 9;
    height: auto;
}

/* Breathing room when Spotify + YouTube are stacked in the same panel */
.release_embed + .release_embed { margin-top: 1rem; }

/* ============================================================================
   PASTE-IN ADDITIONS for css/Dolfin_esque.css
   ----------------------------------------------------------------------------
   Paste this whole block at the END of your existing
   /* RELEASE PAGE ***...*/ /* section — i.e. just BEFORE the
   /* VIEW_TRANSITIONS ***...*/ /* section. Nothing here overrides any of
   your existing rules; it only styles the new elements added to release.php
   (share button, per-track feat., story panel, prev/next navigation).
   Delete this instruction comment after pasting if you like.
   ========================================================================= */

/* RELEASE_EXTRAS ************************************************************************************************/
/* release.php — share button, per-track feat., story panel, prev/next nav */

/* --- Share button — a pill matching the streaming links, but a <button> --- */

.release_share_btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    border: 2px solid var(--d3-grey_3);        /* grey frame = "utility", green on hover */
    border-radius: 2rem;
    background: transparent;
    font-family: var(--d3-header_2);
    font-size: 1rem;
    letter-spacing: 0.1rem;
    color: var(--d3-white);
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.release_share_btn:hover {
    border-color: var(--primary-website-color, var(--d3-green_3));
    background-color: var(--primary-website-color, var(--d3-green_3));
    color: var(--d3-black);
}

.release_share_btn svg {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    fill: currentColor;
}

/* Flash state while "Link copied!" is showing (class toggled by the JS) */
.release_share_btn.is_copied {
    border-color: var(--primary-website-color, var(--d3-green_3));
    color: var(--primary-website-color, var(--d3-green_3));
    background: transparent;
}

/* --- Per-track featured artist (tracklist) --- */

.release_track_feat {
    display: inline-block;
    margin-left: 0.5rem;
    font-size: 0.85em;
    font-weight: 400;
    font-style: italic;
    color: var(--PINK);
}

/* --- Story panel — comfortable long-form reading --- */

/* ----------------------------------------------------------------------------
   FIX 2 — Story text width/styling.
   In the RELEASE_EXTRAS block you pasted earlier, FIND this rule:
 
        .release_story p {
            margin: 0 0 1rem;
            max-width: 65ch;
            line-height: 1.7;
            color: var(--d3-white);
        }
 
   and REPLACE it with the rule below. The 65ch max-width was capping the
   line length; this version runs full panel width and matches your
   home.php body text (.column_child > .body p) exactly — same family,
   size, weight, line-height and letter-spacing.
   ---------------------------------------------------------------------------- */
 
.release_story p {
    margin: 0 0 1rem;
    font-family: var(--d3-text_4);
    font-size: 1.1rem;
    font-weight: 300;
    line-height: 1.5rem;
    letter-spacing: 0.1rem;
    color: var(--d3-white);
}

.release_story p:last-child { margin-bottom: 0; }

/* --- Prev / Next release navigation --- */

.release_prevnext {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.release_prevnext_link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: var(--d3-black);
    border: 3px solid var(--d3-darkest-grey);           /* same quiet frame as .release_panel */
    border-radius: 12px;
    transition: border-color 0.3s;
}

.release_prevnext_link:hover { border-color: var(--primary-website-color, var(--d3-green_3)); }

/* Next card: text left, arrow pinned right */
.release_prevnext_next { justify-content: flex-end; text-align: right; }

.release_prevnext_link svg {
    flex-shrink: 0;
    inline-size: 2rem;
    block-size: 2rem;
    fill: var(--d3-grey_3);
    transition: fill 0.3s;
}

.release_prevnext_link:hover svg { fill: var(--primary-website-color, var(--d3-green_3)); }

/* Reuses arrow-circle-left.svg for the "next" side, mirrored */
.release_prevnext_flip { transform: scaleX(-1); }

.release_prevnext_text {
    display: grid;
    row-gap: 0.25rem;
    min-width: 0;                        /* lets long titles ellipsis inside the grid */
}

.release_prevnext_label {
    font-family: var(--d3-header_2);
    font-size: 0.85rem;
    letter-spacing: 0.1rem;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--d3-grey_2);
}

.release_prevnext_title {
    font-family: var(--d3-header_2);
    font-size: 1.1rem;
    letter-spacing: 0.01rem;
    font-weight: 400;
    color: var(--d3-white);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Empty spacer keeps the remaining link on its own side at list ends */
.release_prevnext_spacer { display: block; }

/* RELEASE_EXTRAS | TABLET ************************************************************************************************/
@media (max-width:1400px){
    .release_prevnext_title { font-size: 1.05rem; }
}

/* RELEASE_EXTRAS | SMARTPHONE ************************************************************************************************/
@media (max-width:768px){
    /* Share button stacks and centres with the streaming pills
       (the pills already go flex-direction: column at this width) */
    .release_share_btn { justify-content: center; }

    /* Prev/next stack vertically; hide the empty spacer so a lone
       card takes the full width */
    .release_prevnext { grid-template-columns: 1fr; gap: 1rem; }
    .release_prevnext_spacer { display: none; }

    /* Feat. drops to its own line under the track title */
    .release_track_feat {
        display: block;
        margin-left: 0;
    }
}

/* ----------------------------------------------------------------------------
   BLOCK 2 of 3 — paste at the END of your /* RELEASE PAGE */ /* section,
   AFTER the RELEASE_EXTRAS block (must come after the panel rules so the
   grain layers on top of their background colour in the cascade).
   ---------------------------------------------------------------------------- */
 
/* PANEL_GRAIN ************************************************************************************************/
/* A barely-there film-grain texture over the release-page panels, killing
   the "flat digital rectangle" look. The noise is an inline SVG
   (feTurbulence) so there's no image file and no extra request; it tiles
   at 140px and sits at ~4.5% opacity ON TOP of each panel's existing
   background colour — background-image layers over background-color, so
   the var(--d3-black) panels are untouched underneath. Turn the whole thing off
   by deleting this one rule; tune strength via opacity='0.045' in the URI. */
 
.release_hero,
.release_panel,
.release_not_found,
.release_prevnext_link {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
    background-size: 140px 140px;
}

/* VIEW_TRANSITIONS ************************************************************/
/* discography.php <-> release.php — the cover art morphs between the grid
   card and the release-page hero (cross-document View Transitions API).
   The pairing comes from matching view-transition-name values set inline
   in PHP per release (see both templates) — nothing per-release lives here.
   Browsers without support (Firefox, older Safari) ignore this entire
   section and just do a normal page load, so it's pure enhancement. */

@view-transition {
    navigation: auto;        /* opt-in; must be present on BOTH pages' CSS */
}

/* Timing for every transition group, including the root cross-fade */
::view-transition-group(*) {
    animation-duration: 350ms;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* PAGE into PAGE FADE */
::view-transition-group(root) { animation-duration: 180ms; }  /* quick page fade */

/* Snapshots default to width-stretch while the group box interpolates
   between the two sizes — force the cover to keep its square ratio */
::view-transition-old(*),
::view-transition-new(*) {
    height: 100%;
    object-fit: cover;
}

/* VIEW_TRANSITIONS | REDUCED_MOTION */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-image-pair(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;   /* instant swap, no morph/cross-fade */
    }
}

/* VIEW_TRANSITIONS ************************************************************/

/* ----------------------------------------------------------------------------
   BLOCK 3 of 3 — paste immediately AFTER the closing
   /* VIEW_TRANSITIONS ***...*/ /* comment (it extends that section's setup;
   the @view-transition opt-in already declared there covers this too).
   ---------------------------------------------------------------------------- */
 
/* RELEASE_SLIDE_TRANSITION ************************************************************************************************/
/* Prev/next between release pages slides the whole page like flipping
   through records — next slides left, previous slides right — instead of
   the default 180ms cross-fade. Direction comes from the data-vt-dir
   attribute that release.php's script sets on <html> for the duration of
   the transition only, so every OTHER navigation (grid <-> release cover
   morph included) keeps its existing behaviour. The existing
   VIEW_TRANSITIONS | REDUCED_MOTION block already kills these animations
   (its !important rules outrank these) — nothing extra needed here.
   Browsers without support ignore the section entirely. */
 
@keyframes release_slide_out_left  { to   { opacity: 0; transform: translateX(-40px); } }
@keyframes release_slide_in_right  { from { opacity: 0; transform: translateX(40px);  } }
@keyframes release_slide_out_right { to   { opacity: 0; transform: translateX(40px);  } }
@keyframes release_slide_in_left   { from { opacity: 0; transform: translateX(-40px); } }
 
/* "Next Release" — page travels leftwards */
html[data-vt-dir="next"]::view-transition-old(root) {
    animation: release_slide_out_left 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
html[data-vt-dir="next"]::view-transition-new(root) {
    animation: release_slide_in_right 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
 
/* "Previous Release" — page travels rightwards */
html[data-vt-dir="prev"]::view-transition-old(root) {
    animation: release_slide_out_right 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
html[data-vt-dir="prev"]::view-transition-new(root) {
    animation: release_slide_in_left 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* BUTTONS *****************************************************************************************************************************************************/
/* ===== Brand tokens (Dolfin_esque) ===== */
:root {
  --d3-ring: rgba(0, 195, 101, 0.55); /* keyboard focus ring */
}

/* ===== Shared skin =====
   One class = one look. Appearance + internal icon/label layout only.
   NO outer positioning (margin / justify-self / align-self / width) — that is
   the container's job, so the same button sits bottom-right on index.php and
   centred in the profile card without the two ever fighting. */

   /* Wrapper (.index_button_align) — best when the container's own layout does the work (your flex column pushing to bottom-right). The button stays totally clean. */
.d3btn {
  /* type */
  font-family: var(--d3-header_2);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.1rem;
  color: var(--d3-green_3);

  /* internal layout: icon + label side by side, pill grows with its label */
  display: inline-grid;
  grid-auto-flow: column;
  place-items: center;
  gap: 0.5em;
  block-size: 3rem;
  padding: 0 2rem;

  /* visuals */
  border: none;
  border-radius: 9999px;
  background-color: var(--d3-black);
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent; /* no grey flash on tap */

  transition: background-color 0.25s ease, color 0.25s ease;
}

.d3btn:hover {
  background-color: var(--d3-green_3);
  color: var(--d3-white);
}

.d3btn:focus-visible {
  outline: 3px solid var(--d3-ring);
  outline-offset: 3px;
}

.d3btn:disabled,
.d3btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* ===== Positioning helpers (opt-in, per container) =====
   Add alongside .d3btn only where a container needs it. Position never
   lives on .d3btn itself. */
.d3btn--block {
  inline-size: 80%;
  justify-self: center;   /* only bites in a grid parent; harmless otherwise */
}

/* ===== Size + icon helpers ===== */
.d3btn--sm    { block-size: 2.5rem;  font-size: 0.9rem; padding: 0 1.5rem; }
.d3btn--lg    { block-size: 3.75rem; font-size: 1.4rem; padding: 0 2.5rem; }
.d3btn > .icon { inline-size: 1.25em; block-size: 1.25em; }

/* ===== Variants (optional — keep only what your markup uses) ===== */

/* Outline: transparent fill, brand stroke — for light backgrounds */
.d3btn--outline {
  background-color: transparent;
  color: var(--d3-black);
  border: 2px solid var(--d3-green_3);
}
.d3btn--outline:hover {
  background-color: var(--d3-green_3);
  color: var(--d3-white);
}

/* Ghost: subtle on dark/video backgrounds */
.d3btn--ghost {
  background-color: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.22);
  color: var(--d3-white);
}
.d3btn--ghost:hover {
  background-color: rgba(255, 255, 255, 0.14);
}

/* Reduced motion: drop the colour transition */
@media (prefers-reduced-motion: reduce) {
  .d3btn { transition: none; }
}
/* BUTTONS */