:root {

    --white:            #ffffff;
    --black:            #000000;

    /* colour ramps */
    --gray-050: #F6F4F2;
    --gray-100: #E6E4E3;
    --gray-150: #D7D5D4;
    --gray-200: #C7C5C4;
    --gray-300: #B7B5B5;
    --gray-400: #A8A5A6;
    --gray-500: #898688;
    --gray-600: #696669;
    --gray-700: #4A474B;
    --gray-800: #383538;
    --gray-900: #252426;
    --gray-950: #131213;

    --accent-050: #FFF3EF;
    --accent-100: #FEE9E4;
    --accent-150: #FCDAD2;
    --accent-200: #F8C3BB;
    --accent-300: #F5ABA3;
    --accent-400: #f1948b; 
    --accent-500: #E5857E;
    --accent-600: #d87670;
    --accent-700: #C8645F;
    --accent-800: #B9514D;
    --accent-900: #a93f3c;
    --accent-950: #681613;

    --base-050: #FDF7F2;
    --base-100: #F8E8D8;
    --base-150: #f3d9be;
    --base-200: #e5c5a8;
    --base-300: #D3B297;
    --base-400: #c09f86;
    --base-500: #AC8A71;
    --base-600: #99765B;
    --base-700: #856146;
    --base-800: #724D30;
    --base-900: #5e381b;
    --base-950: #3c210e;
    
    --blush-050: #FBF5EE;
    --blush-100: #F7E8D9;
    --blush-150: #EFD4BD;
    --blush-200: #E8BFA0;
    --blush-300: #e0ab84;
    --blush-400: #d39871;
    --blush-500: #B57A59;
    --blush-600: #A46B4F;
    --blush-700: #945D46;
    --blush-800: #834e3c;
    --blush-900: #703D2A;
    --blush-950: #451b0b;
    
    --neutral-050: #f7f0ea;
    --neutral-100: #f0e6de;
    --neutral-150: #E1D6CD;
    --neutral-200: #D2C6BD;
    --neutral-300: #C2B6AC;
    --neutral-400: #b2a69b;
    --neutral-500: #9F9387;
    --neutral-600: #8b7f73;
    --neutral-700: #766A5F;
    --neutral-800: #60554A;
    --neutral-900: #4b4036;
    --neutral-950: #2b2621;

    /* semantic colours */
    --site-bg:          var(--blush-050);
    --color-text:       var(--black);
    --border-default:   var(--blush-100);
    --btn-bg-light:     var(--white);
    --btn-bg:           var(--accent-200);
    --btn-bg-hover:     var(--accent-300);

    --link:             var(--blush-600);
    --link-hover:       var(--black);
    --link-active:      var(--accent-600);

    --border:                   2px solid var(--black);
    --cta-background:           var(--black);
    --page-title-background:    var(--neutral-100);
    --footer-bg:                var(--white);
    --footer-link:              var(--black);
    --blurb-divider:            var(--black);
    --nav-active:               var(--black);



    /* @link https://utopia.fyi/clamp/calculator?a=448,1344,3—4|6—8|12—16|16—20|20—24|28—32|36—48|42—64|48—96|64—128&p=space */
    /* 448px --> 1344px */
    --space-tiny: clamp(0.1875rem, 0.1563rem + 0.1116vw, 0.25rem);  /* 3-4px */
    --space-xs: clamp(0.375rem, 0.3125rem + 0.2232vw, 0.5rem);      /* 6-8px */
    --space-sm: clamp(0.75rem, 0.625rem + 0.4464vw, 1rem);          /* 12-16px */
    --space-base: clamp(1rem, 0.875rem + 0.4464vw, 1.25rem);        /* 16-20px */
    --space-md: clamp(1.25rem, 1.125rem + 0.4464vw, 1.5rem);        /* 20-24px */
    --space-lg: clamp(1.75rem, 1.625rem + 0.4464vw, 2rem);          /* 28-32px */
    --space-xl: clamp(2.25rem, 1.875rem + 1.3393vw, 3rem);          /* 36-48px */
    --space-xxl: clamp(2.625rem, 1.9375rem + 2.4554vw, 4rem);       /* 42-64px */
    --space-huge: clamp(3rem, 1.5rem + 5.3571vw, 6rem);             /* 48-96px */
    --space-mega: clamp(4rem, 2rem + 7.1429vw, 8rem);               /* 64-128px */

    /* @link https://utopia.fyi/clamp/calculator?a=400,1440,10—14|15—17|17—20|20—24|24—36|36—54|48—72&p=text */
    /* 400px --> 1440px */
    --text-xs: clamp(0.625rem, 0.5288rem + 0.3846vw, 0.875rem);      /* 10-14 */
    --text-sm: clamp(0.9375rem, 0.8894rem + 0.1923vw, 1.0625rem);    /* 15-17 */
    --text-base: clamp(1.0625rem, 0.9904rem + 0.2885vw, 1.25rem);    /* 17-20 */
    --text-md: clamp(1.25rem, 1.1538rem + 0.3846vw, 1.5rem);         /* 20-24 */
    --text-lg: clamp(1.5rem, 1.2115rem + 1.1538vw, 2.25rem);         /* 24-36 */
    --text-xl: clamp(2.25rem, 1.8173rem + 1.7308vw, 3.375rem);       /* 36-54 */
    --text-xxl: clamp(3rem, 2.4231rem + 2.3077vw, 4.5rem);           /* 48-72 */

    --font-weight-thin: 240;
    --font-weight-regular: 340;
    --font-weight-semibold: 480;
    --font-weight-bold: 560;
    
    --max-narrow:   36rem; /* 576px */
    --max-post:     48rem; /* 768px */
    --max-content:  60rem; /* 960px */
    --max-wide:     84rem; /* 1344px */

    --shadow-sm: 0 0 var(--space-xs) rgba(60, 33, 14, 0.05);
    --shadow-md: 0 var(--space-xs) var(--space-base) rgba(60, 33, 14, 0.05);

    --shadow-card: var(--shadow-sm);
    --shadow-card-hover: var(--shadow-md);

    --radius-sm: var(--space-tiny);
    --radius-base: var(--space-xs);
    --radius-md: var(--space-sm);
    --radius-lg: var(--space-md);
    --radius-xl: var(--space-lg);

    --radius-card: var(--space-xs);

    --gutter: clamp(1rem, -1.5rem + 8.9286vw, 6rem); /* 16px->96px */

    --lh-tighter: 1;
    --lh-tight: 1.154;
    --lh-default: 1.309;
    --lh-loose: 1.618;

    --ls-looser: 0.10em;
    --ls-loose:  0.05em;

    --header-variant-on: 40rem;
    --header-variant-off: 30rem;


}

/*--------------------------------------------------------------------------- */
/* MARK: THEMES
*/

.theme-is-natural {

    --site-bg:                  var(--white);
    --page-title-background:    var(--accent-050);
    --color-text:               var(--neutral-800);
    --nav-active:               var(--neutral-150);
    --blurb-divider:            var(--neutral-150);
    --cta-background:           var(--neutral-150);
    --border:                   2px solid var(--neutral-150);
    .brands-block .logo         { filter: brightness(0) grayscale(1) opacity(0.5); }
    .blurb .icon                { fill: var(--base-600); }
    .cta-block .copy            { color: var(--color-text); }
    hr                          { background-color:   var(--neutral-300); }

}

.theme-is-night-out {

    --site-bg:               var(--gray-950);
    --page-title-background: var(--gray-900);
    --link-active:           var(--gray-150);
    --link:                  var(--gray-150);
    --color-text:            var(--white);
    --link-hover:            var(--white);
    --cta-background:        var(--accent-600);
    --nav-active:            var(--accent-600);
    --blurb-divider:         var(--gray-800);
    --footer-bg:             var(--gray-950);
    --footer-link:           var(--white);
    --border:                2px solid var(--gray-700);

    hr                      { background-color:   var(--accent-300); }
    .site-header .logo      { fill: white }
    .site-footer .logo      { fill: white }
    .cta-block.inline-cta .logo { fill: var(--gray-800); }
    .blurb .icon            { fill: var(--accent-600); }
    .brands-block .logo     { filter: invert(1) grayscale(1) brightness(10) opacity(0.5); }
    .btn.outline            { --borderAndBackground: var(--white); }
    

    .row[style*="--bg:var(--white)"] { --bg: var(--gray-950) !important; }

}

/*--------------------------------------------------------------------------- */
/* MARK: FONTS
*/



/* Outfit Var */
@font-face {
    font-family: 'font-primary';
    src:    url('/assets/fonts/outfit-var/outfit-var.woff2') format('woff2-variations'),
            url('/assets/fonts/outfit-var/outfit-var.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-display: swap;
     
}
.font-primary { font-family: 'font-primary', sans-serif; font-style: normal; }
.font-primary-100 { font-family: 'font-primary', sans-serif; font-style: normal; font-weight: 100; }
.font-primary-200 { font-family: 'font-primary', sans-serif; font-style: normal; font-weight: 200; }
.font-primary-300 { font-family: 'font-primary', sans-serif; font-style: normal; font-weight: 300; }
.font-primary-400 { font-family: 'font-primary', sans-serif; font-style: normal; font-weight: 400; }
.font-primary-500 { font-family: 'font-primary', sans-serif; font-style: normal; font-weight: 500; }
.font-primary-600 { font-family: 'font-primary', sans-serif; font-style: normal; font-weight: 600; }
.font-primary-700 { font-family: 'font-primary', sans-serif; font-style: normal; font-weight: 700; }
.font-primary-800 { font-family: 'font-primary', sans-serif; font-style: normal; font-weight: 800; }
.font-primary-900 { font-family: 'font-primary', sans-serif; font-style: normal; font-weight: 900; }



/* Briallen 400 */
@font-face { font-family: 'font-secondary'; src: url('/assets/fonts/briallen/briallen-400.woff2') format('woff2'), url('/assets/fonts/briallen/briallen-400.woff') format('woff'), url('/assets/fonts/briallen/briallen-400.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
.font-secondary-400 { font-family: 'font-secondary', sans-serif; font-style: normal; font-weight: 400; }

/* Briallen 400-italic */
@font-face { font-family: 'font-secondary'; src: url('/assets/fonts/briallen/briallen-400-italic.woff2') format('woff2'), url('/assets/fonts/briallen/briallen-400-italic.woff') format('woff'), url('/assets/fonts/briallen/briallen-400-italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
.font-secondary-400i { font-family: 'font-secondary', sans-serif; font-style: italic; font-weight: 400; }



/*--------------------------------------------------------------------------- */
/* MARK: RESET
*/

/* heavily based on https://www.joshwcomeau.com/css/custom-css-reset/ */
*, *::before, *::after {
    box-sizing: border-box;
}
* {
    margin: 0;
}
*:focus {
    outline: 3px solid var(--base-300);
    outline-offset: 2px;
}
@media (prefers-reduced-motion: no-preference) {
    html {
        interpolate-size: allow-keywords;
        scroll-behavior: smooth;
    }
    @view-transition {
        navigation: auto;
    }
}
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}
input, button, textarea, select {
    font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}
h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
}
p {
    text-wrap: pretty;
}
strong {
    font-weight: var(--font-weight-bold);
}

/*--------------------------------------------------------------------------- */
/* MARK: HTML/BODY
*/

html {
    padding: 0;
}

body {
    background-color: var(--site-bg);
    color: var(--color-text);
    font-family: 'font-primary', ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; 
    font-size: var(--text-base);
    font-weight: var(--font-weight-regular);
    line-height: var(--lh-loose);
    transition: background-color 0.2s ease-in;
    -webkit-font-smoothing: antialiased;
}

.page {
    /* border: var(--space-xs) solid white; */
}

.page > * {
    width: 100%;
}

rtb-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-base);
}

[data-max-width] {
    margin-inline: auto;
}


[data-max-width="md"] {
    max-width: var(--max-narrow);
}

[data-max-width="lg"] {
    max-width: var(--max-content);
}

[data-gap="xs"]     { gap: var(--space-xs) }
[data-gap="sm"]     { gap: var(--space-sm) }
[data-gap="base"]   { gap: var(--space-base) }
[data-gap="md"]     { gap: var(--space-md) }
[data-gap="lg"]     { gap: var(--space-lg) }
[data-gap="xl"]     { gap: var(--space-xl) }
[data-gap="xxl"]    { gap: var(--space-xxl) }
[data-gap="huge"]   { gap: var(--space-huge) }

/*--------------------------------------------------------------------------- */
/* MARK: Site HEADER
*/

.site-header {
    align-items: center;
    background-color: var(--site-bg);
    border-bottom: var(--border);
    display: grid;
    grid-template-areas:
        "logo btns"
    ;
    justify-content: space-between;
    padding: var(--space-xs) var(--gutter);
    text-align: center;
    position: sticky;
    left: 0; right: 0; top: 0;
    transition: background-color 0.3s ease-in-out;
    z-index: 98;
    width: 100%;
}

.site-header.is-scrolled {
    background: var(--white);
}
.site-header.is-scrolled .btn.book {
    background: var(--black);
    color: var(--white);
}

.site-header .btns {
    grid-area: btns;
    gap: var(--space-sm);
}
.site-header .logo {
    display: block;
    height: 4rem;
    justify-self: start;
}
.site-header .logo svg {
    height: 100%;
    width: auto;
}

/* booking btn */

.site-header .btn {
    align-items: center;
    border: 0;
    display: flex;
    font-size: var(--text-xs);
    grid-area: book;
    height: 3rem;
    justify-content: center;
    padding: var(--space-sm);
}

.site-header .btn.book {
    margin-left: auto;
    transition: all 0.3s ease-in-out;
}

/* navigation starts here */

.site-nav {
    display: none; /* for mobile */
    font-size: var(--text-xs);
    grid-area: nav;
    z-index: 5;
}

.mobile-nav-toggle {
    align-self: center;
    align-items: center;
    background: var(--black);
    border: 0;
    border-radius: 0;
    color: var(--white);
    cursor: pointer;
    display: flex; /* for mobile */
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    height: 3rem;
    justify-self: end;
    line-height: var(--lh-tighter);
    padding: 0 var(--space-sm);
    text-transform: uppercase;
    width: 3rem;
}

/* the parent menu and primary nav items */
.site-nav > .menu {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    justify-content: center;
    list-style: none;
    padding: 0;
}
.site-nav > .menu.omega-btn > li:last-of-type {
    background-color: var(--accent);
    color: var(--white);
}
.site-nav > .menu > li {
    display: flex;
}
.site-nav > .menu > li.has-submenu {
    /* position: relative; */
}
.site-nav > .menu > li > a {
    border: 0;
    color: var(--link-hover);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--ls-loose);
    padding: var(--space-md) var(--space-tiny);
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
}

.site-nav > .menu > li > a:hover {
    color: var(--link);
}

.site-nav > .menu > li > a.active::after {
    background-color: var(--nav-active);
    content: '';
    height: 2px;
    left: var(--space-tiny);
    position: absolute;
    right: var(--space-tiny);
    bottom: var(--space-xs);
    width: auto;
}

/* the drop-down menu and kids */
.site-nav .submenu {
    background-color: var(--black);
    display: none;
    flex-direction: row;
    gap: var(--space-xs);
    justify-content: center;
    left: 0;
    list-style: none;
    padding: var(--space-tiny);
    position: absolute;
    right: 0;
    text-align: center;
    top: 100%;
}

.site-nav .submenu a {
    color: white;
    display: block;
    font-size: var(--text-sm);
    padding: var(--space-sm) var(--space-base);
    position: relative;
    text-wrap: nowrap;
    text-decoration: none;
    z-index: 2;
}


/*--------------------------------------------------------------------------- */
/* MARK: Page Title
*/

.page-title {
    background-color: var(--page-title-background);
    border-bottom: var(--border);
}

.page-title.no-image {
    text-align: center;
}

.page-title.no-image hr {
    margin-inline: auto;
}

.page-title.no-image .lede {
    max-width: var(--max-narrow);
    margin-inline: auto;
}

.page-title.no-image .btn {
    margin-inline: auto;
}

.page-title .copy {
    padding: var(--space-huge) var(--gutter);
}

/* kicker! */
.page-title .kicker {
    font-family: 'font-primary';
    font-size: var(--text-sm);
    letter-spacing: var(--ls-loose);
    line-height: var(--lh-tight);
    text-transform: uppercase;
    font-weight: var(--font-weight-semibold);
}

.page-title .headline {
    font-family: 'font-secondary';
    font-size: calc(1.25 * var(--text-xxl));
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: var(--lh-tighter);
    text-wrap: balance;
    text-transform: uppercase;
}

.page-title .lede {
    font-size: var(--text-base);
}

.page-title .image img {
    aspect-ratio: 5/4;
    object-fit: cover;
}

/*--------------------------------------------------------------------------- */
/* MARK: Site MAIN
*/

main {
    display: flex;
    flex-direction: column;
}
main > * {
    margin-block: 0;
}


/*--------------------------------------------------------------------------- */
/* MARK: CTA BLOCK
*/

.cta-block {
    background-color: var(--cta-background);
    color: var(--white);
    display: grid;
    gap: var(--space-xl);
    padding: var(--space-xxl) var(--gutter);
    text-align: center;
    transition: background-color 0.2s ease-in;
}

.cta-block .title {
    font-size: var(--text-base);
    font-family: 'font-primary';
    text-transform: uppercase;
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--ls-loose);
}
.cta-block .teaser {
    font-family: 'font-secondary';
    font-size: var(--text-xl);
    line-height: var(--lh-tighter);
    text-wrap: balance;
}
.cta-block .btns {
    justify-content: center;
}


.cta-block.inline-cta {
    background-color: transparent;
    border: var(--border);
    border-radius: var(--radius-base);
    color: var(--color-text);
    padding-inline: var(--space-xxl);
    position: relative;
    rotate: -2deg;
}

.cta-block.inline-cta .logo {
    align-items: center;
    aspect-ratio: 1;
    background-color: var(--site-bg);
    border: var(--border);
    border-radius: 50%;
    display: grid;
    min-width: 10%;
    padding: var(--space-sm);
    pointer-events: none;
    position: absolute;
    rotate: 12deg;
    right: calc(-1 * var(--space-base));
    top: calc(-1 * var(--space-xl));
    width: var(--space-huge);
}
.rotate-center {
	-webkit-animation: rotate-center 10s linear infinite both;
	        animation: rotate-center 10s linear infinite both;
}
.pulsate-bck {
	-webkit-animation: pulsate-bck 1s ease-in-out infinite both;
	        animation: pulsate-bck 1s ease-in-out infinite both;
}
/* ----------------------------------------------
 * Generated by Animista on 2026-5-3 23:41:22
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation pulsate-bck
 * ----------------------------------------
 */
 @-webkit-keyframes pulsate-bck {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes pulsate-bck {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

/* ----------------------------------------------
 * Generated by Animista on 2026-5-3 23:37:3
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation rotate-center
 * ----------------------------------------
 */
@-webkit-keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------------------- */
/* MARK: Site FOOTER
*/

.site-footer {
    background-color: var(--footer-bg);
    display: grid;
    font-size: var(--text-sm);
    gap: var(--space-xl);
    padding: var(--space-xl) var(--gutter) var(--space-base) var(--gutter);
    position: relative;
    text-align: center;
}
.site-footer :is(h2, h3) {
    font-size: var(--text-sm);
    font-family: 'font-primary';
    letter-spacing: var(--ls-loose);
    margin-bottom: var(--space-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
}
.site-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.site-footer a {
    color: var(--footer-link);
}

.site-footer .logo {
    align-self: start;
    display: block;
    margin-inline: auto;
    width: 6.25rem;
}

.site-footer .social-links {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-sm);
    justify-content: center;
    margin-top: var(--space-sm);
}
.site-footer .social-links a {
    text-decoration: none;
}
.site-footer .social-links svg {
    height: var(--space-md);
    width: var(--space-md);
}
.site-copyright {
    font-size: var(--text-xs);
    text-transform: lowercase;
}

.site-footer-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-base);
    justify-content: space-between;
}


/*--------------------------------------------------------------------------- */
/* MARK: ROWS
*/

.row {
    --bg: transparent;
    --rowPadding: var(--space-huge);
    background-color: var(--bg);
    /* border: 1px dashed salmon; */
    padding: calc(var(--rowPadding) * 1) var(--gutter); /* top/bottom padding (xl) relates to the more/less classes below */
    position: relative;
}
.row.top-pad-none       { padding-top:      0; }
.row.bot-pad-none       { padding-bottom:   0; }
.row.top-pad-less       { padding-top:      calc(var(--rowPadding) * 0.5); }
.row.bot-pad-less       { padding-bottom:   calc(var(--rowPadding) * 0.5); }
.row.top-pad-more       { padding-top:      calc(var(--rowPadding) * 2) }
.row.bot-pad-more       { padding-bottom:   calc(var(--rowPadding) * 2) }

.row.bot-bdr {
    border-bottom: var(--border);
}

.row.has-bg-image {
    color: white;
}
.row.has-bg-image a {
    color: inherit;
}
.row > * {
    margin-block: 0;
}

.row-bg-image {
    filter: opacity(1) brightness(0.25) contrast(0.9) saturate(1.2);
    height: 100%;
    left: 0; top: 0; bottom: 0; right: 0;
    object-fit: cover;
    position: absolute;
    width: 100%;
}

/*--------------------------------------------------------------------------- */
/* MARK: COLUMNS
*/

.columns {
    display: grid;
    row-gap: var(--space-huge);
    column-gap: var(--space-xl);
    margin-inline: auto;
}

.columns.flip-order > :first-child {
    order: 2;
}

.columns .column {
    /* border: 1px solid powderblue; */
    container-type: inline-size;
    display: flex;
    gap: var(--space-md);
    flex-direction: column;
    position: relative;
    z-index: 2;
}
.columns .column > * {
    margin-block: 0;
    max-width: 100%;
}

/*--------------------------------------------------------------------------- */
/* MARK: Auto-Grid
*/

.auto-grid {
    --max-column-width: 100% / var(--auto-grid-max-columns, infinity) - var(--auto-grid-gap);
    --column-width: max(var(--max-column-width), min(var(--auto-grid-min-size, 10rem), 100%));
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--column-width), 1fr));
    gap: var(--auto-grid-gap-vertical, var(--auto-grid-gap, 1rem)) var(--auto-grid-gap, 1rem);

    /* defaults - override these as needed */
    --auto-grid-min-size: 16rem;
    --auto-grid-max-columns: 3;
    --auto-grid-gap: var(--space-md);
}


/*--------------------------------------------------------------------------- */
/* MARK: Headings
*/

h1, h2, h3, h4, h5, h6 {
    font-family: 'font-secondary', 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
    font-weight: 400;
    line-height: var(--lh-tighter);
}

[data-alignment='center'] {
    text-align: center;
}
[data-alignment='right'] {
    text-align: right;
}

h1 { font-size: var(--text-xxl); }
h2 { font-size: var(--text-xl);  }
h3 { font-size: var(--text-lg); font-weight: var(--font-weight-regular); }
h4 { font-size: var(--text-md); font-weight: var(--font-weight-regular); }
h5 { font-size: var(--text-md); font-weight: var(--font-weight-regular); }
h6 { font-size: var(--text-base); font-weight: var(--font-weight-regular); }

/* .template-is-post .page-title .headline {
    font-size: var(--text-xl);
} */

.kicker {
    font-family: 'font-primary';
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--ls-loose);
    line-height: var(--lh-tight);
    text-transform: uppercase;
}

.kicker > span {
    border-top: var(--border);
    display: inline-block;
    padding-top: var(--space-base);
}

/*--------------------------------------------------------------------------- */
/* MARK: Links
*/

a {
    color: var(--link);
}
a:hover {
    color: var(--link-hover);
}
a:active {
    color: var(--link-active);
}


/*--------------------------------------------------------------------------- */
/* MARK: Paragraphs
*/

.lede {
    font-size: var(--text-md);
}
.callout {
    background-color: var(--page-title-background);
    border-radius: var(--radius-base);
    padding: var(--space-base);
}

/*--------------------------------------------------------------------------- */
/* MARK: Lists
*/

ol, ul {
    padding-left: var(--space-lg);
}

/*--------------------------------------------------------------------------- */
/* MARK: Figures/Images
*/

figure figcaption {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-bold);
    padding-top: var(--space-xs);
    text-align: center;
}

img {
    height: auto;
}

/*--------------------------------------------------------------------------- */
/* MARK: HR
*/

hr {
    border: 0;
    padding: 0;
    height: 2px;
    background-color: var(--black);
    width: 100%;
    max-width: var(--space-huge);
    display: block;
}

/*--------------------------------------------------------------------------- */
/* MARK: Blockquote
*/

blockquote {
    border-left: var(--space-sm) solid var(--neutral-200);
    display: grid;
    gap: var(--space-md);
    padding: var(--space-base);
}

blockquote .quote {
    font-family: 'font-secondary';
    font-size: var(--text-lg);
    line-height: var(--lh-tight);
}

blockquote footer {
    font-size: var(--text-sm);
    letter-spacing: var(--ls-loose);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
}


/*--------------------------------------------------------------------------- */
/* MARK: Buttons
*/

.btns {
    display: flex;
    gap: var(--space-sm) var(--space-md);
    flex-wrap: wrap;
    font-size: var(--text-sm);
}

.btns.center {
    justify-content: center;
}

.btn {
    --borderAndBackground: var(--btn-bg);
    --btnRadius: 0;
    appearance: none;
    background-color: var(--borderAndBackground);
    border: 2px solid var(--borderAndBackground);
    border-radius: var(--btnRadius);
    color: var(--black);
    display: inline-block;
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--ls-loose);
    line-height: var(--lh-default);
    padding: var(--space-sm) var(--space-md);
    text-decoration: none;
    text-transform: uppercase;
}
.btn.outline {
    --borderAndBackground: var(--black);
    background-color: transparent;
    color: var(--borderAndBackground);
}
.btn.subtle {
    --borderAndBackground: var(--btn-bg-light);
    color: var(--color-text);
}
.btn.simple {
    --borderAndBackground: var(--border-default);
    background-color: transparent;
    color: var(--color-text);
}
.btn:hover {
    --borderAndBackground: var(--btn-bg-hover);
}
.btn.outline:hover,
.btn.simple:hover {
    color: var(--borderAndBackground);
}

/*--------------------------------------------------------------------------- */
/* MARK: BLOCKS
*/

/* leave a gap here to make the sidebar nav useful */




/*--------------------------------------------------------------------------- */
/* MARK: Brands Block
*/

.brands-block {
    align-items: center;
    display: grid;
    gap: var(--space-xl);
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    list-style: none;
    padding: 0;
}

.brands-block .logo {
    filter: brightness(0) grayscale(1);
    display: block;
    margin-inline: auto;
    max-width: 100%;
    width: 8rem;
}


/*--------------------------------------------------------------------------- */
/* MARK: Portal Block
*/

.portal {
    container-type: inline-size;
    display: grid;
    gap: var(--space-md);
    list-style: none;
    padding: 0;
}

/* albums variant */
.portal-for-albums .item {
    border: var(--border);
    border-radius: var(--radius-card);
    display: grid;
    grid-template-areas: "stack";
    align-items: end;
    justify-items: center;
    overflow: hidden;
    position: relative;
}

.portal-for-albums .item::after {
    background-image: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.0) 50%);
    content: '';
    inset: 0;
    position: absolute;
    pointer-events: none;
}

.portal-for-albums .item > * {
    grid-area: stack;
}

.portal-for-albums .image-link {
    display: block;
    width: 100%;
}

.portal-for-albums .item:hover .image {
    opacity: 0.8;
    filter: contrast(1.1);
}

.portal-for-albums .image {
    transition: all 0.2s ease-out;
    width: 100%;
}

.portal-for-albums .heading {
    color: var(--white);
    font-size: var(--text-xxl);
    text-align: center;
    text-transform: uppercase;
    width: 100%;
}

.portal-for-albums .btn {
    border: 0;
    border-bottom: 2px solid var(--white);
    color: var(--white);
    padding: 0 0 var(--space-xs) 0;
}

.portal-for-albums .copy {
    pointer-events: none;    
    justify-items: center;
    display: grid;
    gap: var(--space-sm);
    padding: var(--space-xl) var(--space-md);
    position: relative;
    z-index: 2;
}

/* posts portal style variant */

.portal-for-posts .item {
    display: flex;
    flex-direction: column;
    gap: var(--space-base);
}

.portal-for-posts .image-link {
    border: var(--border);
    border-radius: var(--radius-card);
}

.portal-for-posts .image {
    aspect-ratio: 1/1;
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.portal-for-posts .heading {
    font-size: var(--text-md);
    font-family: 'font-primary';
    font-weight: var(--font-weight-semibold);
    height: 100%;
    line-height: var(--lh-default);
    padding-bottom: var(--space-lg);
}

.portal-for-posts .copy {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    height: 100%;
}

.portal-for-posts .btn {
    align-self: start;
    border-top-width: 0;
    border-right-width: 0;
    border-left-width: 0;
    font-size: var(--text-sm);
    margin-top: auto;
    padding: 0 0 var(--space-xs) 0;
    width: auto;
}

/* container queries */

@container (min-width: 30rem) {
    .portal {
        grid-template-columns: repeat(2, 1fr);
    }
}
@container (min-width: 45rem) {
    .portal.has-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    .portal.has-4 {
        grid-template-columns: repeat(3, 1fr);
    }
}
@container (min-width: 60rem) {
    .portal.has-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/*--------------------------------------------------------------------------- */
/* MARK: Services Block
*/

.services-cards {
    align-items: start;
    container-type: inline-size;
    display: grid;
    gap: var(--space-xl);
    list-style: none;
    padding: 0;
}

.services-cards .item {
    align-items: center;
    display: grid;
    gap: var(--space-base);
}

.services-cards .heading {
    font-size: var(--text-md);
    font-family: 'font-primary';
    font-weight: var(--font-weight-regular);
}

.services-cards .copy {
    justify-content: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    height: 100%;
}

.services-cards .desc {
    border-left: var(--border);
    padding-left: var(--space-sm);
    margin-left: var(--space-tiny);
}

.services-cards .image {
    aspect-ratio: 1;
    border: var(--border);
    border-radius: var(--radius-card);
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.services-table {
    border: var(--border);
    border-radius: var(--radius-card);
    container-type: inline-size;
    display: grid;
    list-style: none;
    overflow: hidden;
    padding: 0;
}

.services-table .service {
    border-bottom: 1px dotted var(--black);
    align-items: center;
    display: grid;
    font-size: var(--text-sm);
    gap: var(--space-sm);
    grid-template-columns: 1fr 1fr 2fr;
    grid-template-areas: 
    "heading heading heading"
    "cost length book"
    ;
    padding: var(--space-sm);
}

.services-table .service:last-child {
    border-bottom: 0;
}
.services-table .service.active {
    background-color: var(--white);
}

.services-table .heading {
    font-family: 'font-primary';
    font-size: var(--text-base);
    font-weight: var(--font-weight-regular);
    grid-area: heading;
}
.services-table .heading a {
    color: var(--color-text);
    text-decoration-thickness: 1px;
}

.services-table .cost {
    grid-area: cost;
}
.services-table .length {
    grid-area: length;
}
.services-table .book {
    grid-area: book;
    text-align: right;
}

@container (min-width:  36rem) {
    .services-table .service {
        grid-template-columns: 3fr 1fr 1fr 1fr;
        grid-template-areas: 
        "heading cost length book"
        ;
    }
    .services-table :is(.cost, .length) {
        text-align: right;
    }
}

/*--------------------------------------------------------------------------- */
/* MARK: Albums / Lookbook / Photo Galleries
*/

.album {
    align-items: center;
    display: grid;
    gap: var(--space-xxl);
    grid-template-columns: repeat(1, 1fr);
    padding: 0;
}

.album .image {
    border: var(--border);
    border-radius: var(--radius-card);
    margin-inline: auto;
    max-width: 48rem;
    transition: all 0.3s ease-out;
    width: 100%;
}


@container (min-width: 28rem) {
    .album {
        grid-template-columns: repeat(2, 1fr);
    }
    .album :nth-child(3n) {
        grid-column: 1 / -1;
    }

}


/*--------------------------------------------------------------------------- */
/* MARK: Blurbs Block
*/

.blurbs-block {
    display: grid;
    gap: var(--gutter);
    row-gap: var(--space-huge);
}

.blurb {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    text-align: center;
}

.blurb .icon {
    aspect-ratio: 1;
    margin-inline: auto;
    position: relative;
    width: var(--space-xxl);
}

.blurb .icon::before {
    background-color: var(--page-title-background);
    border-radius: 50%;
    content: '';
    inset: calc(-1 * var(--space-sm));
    position: absolute;
}

.blurb .icon svg {
    aspect-ratio: 1;
    height: 100%;
    position: relative;
    width: 100%;
    z-index: 2;
}

.blurb .heading {
    font-size: var(--text-md);
    letter-spacing: var(--ls-looser);
    margin-top: var(--space-md);
    text-transform: uppercase;
}

.blurb .text {
    margin-bottom: var(--space-base);
}

.blurb .btn {
    border-top-width: 0;
    border-left-width: 0;
    border-right-width: 0;

    font-size: var(--text-sm);
    margin-top: auto;
    margin-inline: auto;
    padding: 0 0 var(--space-xs) 0;
    width: auto;
}


/*--------------------------------------------------------------------------- */
/* MARK: Image Block
*/

.image-block img {
    aspect-ratio: var(--ratio);
    border-radius: var(--radius-sm);
    height: auto;
    object-fit: contain;
    width: 100%;
}
.image-block img[data-crop=""] {
    object-fit: cover;
}

.op-right-top          { object-position: right top;       }
.op-right-center       { object-position: right center;    }    
.op-right-bottom       { object-position: right bottom;    }
.op-center-top         { object-position: center top;      }
.op-center-center      { object-position: center center;   }
.op-center-bottom      { object-position: center bottom;   }
.op-left-top           { object-position: left top;        }
.op-left-center        { object-position: left center;     }
.op-left-bottom        { object-position: left bottom;     }

/*--------------------------------------------------------------------------- */
/* MARK: Gallery Block
*/

.gallery-block .gallery {
    --auto-grid-min-size: 8rem;
    --auto-grid-max-columns: 4;
    --auto-grid-gap: var(--space-sm);
    align-items: center;
    list-style: none;
    padding: 0;
}
.gallery-block .gallery img {
    aspect-ratio: var(--ratio);
    background-color: var(--white);
    height: auto;
    object-fit: contain;
    width: 100%;
}
.gallery-block .gallery img[data-crop=""] {
    object-fit: cover;
}

/*--------------------------------------------------------------------------- */
/* MARK: Accordions Block / FAQs
*/

summary {
    cursor: pointer;
}

summary::-webkit-details-marker {
    display: none;
}

.accordions {
    display: grid;
    gap: var(--space-base);
}

/* details element */
.accordion {
    background-color: var(--page-title-background);
}
.accordion[open] {
    background-color: var(--black);
    color: var(--white);
}

/* summary element */
.accordion > .question {
    display: flex;
    font-size: var(--text-md);
    justify-content: space-between;
    list-style: none;
    padding: var(--space-base);
    padding-right: var(--space-xl);
    position: relative;
}
.accordion > .question::after {
    content: '+';
    font-family: 'font-primary';
    font-style: normal;
}
.accordion[open] > .question::after {
    content: '×'
}

.accordion > .question::-webkit-details-marker {
    display: none;
}

.accordion > .answer {
    display: grid;
    gap: var(--space-sm);
    padding: var(--space-base);
}

/* let's DRY this one and use throughout blocks where it makes sense */
.block-heading {
    font-size: var(--text-xl);
    text-align: center;
}

/*--------------------------------------------------------------------------- */
/* MARK: Location Pages
*/

.mobile-travel-policy-block {
    border: var(--border);
    display: grid;
    gap: var(--space-md);
    padding: var(--space-md);
}

.mobile-travel-policy-block__content,
.mobile-travel-policy-block__aside {
    display: flex;
    flex-direction: column;
    gap: var(--space-base);
}

.mobile-travel-policy-block__content h2,
.mobile-steps-block__intro h2 {
    font-size: var(--text-xl);
    margin-block: 0;
}

.mobile-travel-policy-block__aside {
    background: var(--white);
    border: var(--border);
    padding: var(--space-base);
}

.mobile-travel-policy-block__aside h3 {
    font-family: 'font-primary';
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--ls-loose);
    text-transform: uppercase;
}

.mobile-steps-block {
    display: grid;
    gap: var(--space-lg);
}

.mobile-steps-block__intro {
    max-width: var(--max-narrow);
}

.mobile-steps-block__list {
    display: grid;
    gap: var(--space-base);
    list-style: none;
    padding: 0;
}

.mobile-steps-block__item {
    border: var(--border);
    display: grid;
    gap: var(--space-sm);
    padding: var(--space-md);
}

.mobile-steps-block__item .number {
    font-family: 'font-secondary', 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
    font-size: var(--text-xl);
    line-height: var(--lh-tight);
}

.mobile-steps-block__item h3 {
    font-family: 'font-primary';
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--ls-loose);
    text-transform: uppercase;
}

@container (min-width: 42rem) {
    .mobile-travel-policy-block {
        grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr);
    }

    .mobile-steps-block {
        grid-template-columns: minmax(14rem, 0.75fr) minmax(0, 1.25fr);
    }
}

@container (min-width: 58rem) {
    .mobile-steps-block__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/*--------------------------------------------------------------------------- */
/* MARK: Map Block
*/

.map-block {
    background-color: var(--white);
    border: 2px solid var(--border-default);
    height: 100%;
}
.map-block iframe {
    height: 100%;
    min-height: 16rem;
    min-width: 100%;
    width: 100%;
}

/*--------------------------------------------------------------------------- */
/* MARK: Eyebrow Block
*/

.eyebrow-block {

}

/*--------------------------------------------------------------------------- */
/* MARK: Lede Block
*/

.lede-block {
    
}

/*--------------------------------------------------------------------------- */
/* MARK: Posts & Blog
*/

.post-byline {
    border-bottom: var(--border);
    flex-direction: row;
    justify-content: center;
    padding: var(--space-base) var(--gutter);
}

/*--------------------------------------------------------------------------- */
/* MARK: Forms
*/

.uniform__potty {
    position: absolute;
    left: -9999px;
}

.rtbform {
    container-type: inline-size;
    display: grid;
    gap: var(--space-xl);
    line-height: 1.309;
    text-align: left;
}

.rtbform legend,
.rtbform fieldset {
    border: 0;
    display: block;
    padding: 0;
    width: 100%;
}

.rtbform fieldset {
    display: grid;
    gap: var(--space-md);
}

.rtbform legend {
    font-family: 'font-secondary';
    font-size: var(--text-xl);
    margin-bottom: var(--space-base);
}

.rtbform :is(
    textarea,
    [type="text"],
    [type="search"],
    [type="number"],
    [type="email"],
    [type="tel"],

    ) {
    background: var(--white);
    border: var(--border);
    border-radius: 0;
    color: var(--black);
    font-family: inherit;
    font-size: inherit;
    padding: var(--space-sm);
}

.rtbform textarea {
    min-height: 8rem;
}

.rtbform *::placeholder {
    color: var(--gray-300);
}

.rtbform label {
    cursor: pointer;
    display: block;
    font-size: var(--text-base);
}

.rtbform select {
    background-color: var(--white);
    border: var(--border);
    padding: var(--space-sm);
}

.rtbform .checkboxes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-sm);
    margin-top: var(--space-xs);
}

.rtbform .checkboxes label {
    border: var(--border);
    background-color: var(--white);
    font-size: var(--text-base);
    padding: var(--space-base);
}

.rtbform input[type="file"] {
    background-color: var(--white);
    border: var(--border);
    font-size: var(--text-sm);
    padding: var(--space-xs);
}

.rtbform .checkboxes label:has(input:checked):nth-child(1) {
    background-color: var(--accent-200);
}
.rtbform .checkboxes label:has(input:checked):nth-child(2) {
    background-color: var(--blush-200);
}
.rtbform .checkboxes label:has(input:checked):nth-child(3) {
    background-color: var(--base-200);
}
.rtbform .checkboxes label:has(input:checked):nth-child(4) {
    background-color: var(--neutral-200);
}

.rtbform .checkbox-label {
    align-items: center;
    background-color: var(--white);
    border: var(--border);
    display: flex;
    gap: var(--space-sm);
    padding: var(--space-sm);
}

.rtbform .checkbox-label input {
    min-width: 2.25rem;
}


.rtbform .checkbox-label:has(input:checked) {
    background-color: var(--accent-100);
}


.rtbform .help {
    font-size: var(--text-sm);
    color: var(--gray-500);
}

.form-pairs {
    align-items: start;
    display: grid;
    gap: var(--space-md);
}

.rtbform > fieldset:last-of-type .form-pairs {
    align-items: end;
}

.form-pair {
    display: grid;
    gap: var(--space-xs);
}

@container (min-width: 72rem) {
    .form-pairs {
        grid-template-columns: repeat(2, 1fr);
    }
    .form-pairs.offset {
        grid-template-columns: 1fr 2fr;
    }
    .form-pairs.trio {
        grid-template-columns: repeat(3, 1fr);
    }
    .form-pairs.trio .help {
        grid-column: 1 / -1;
    }
    .rtbform .btn {
        justify-self: end;
    }
}

.theme-switcher {
    justify-self: start;
    background-color: transparent;
    border: 0;
    display: flex;
    font-size: var(--text-sm);
    gap: var(--space-sm);
    padding: 0;
    width: auto;
}
.theme-switcher legend {
    display: none;
}

.theme-switcher label {
    border: 0;
    cursor: pointer;
    font-size: var(--text-xs);
    padding: 0 0 var(--space-tiny) 0;
    text-transform: lowercase;
}

.theme-switcher label:first-of-type {
}
.theme-switcher label:last-of-type {
}

.theme-switcher input[type="radio"] {
    display: none;
}

.theme-switcher label:has( input[type="radio"]:checked ) {
    border-bottom: var(--border)
}


/*--------------------------------------------------------------------------- */
/* MARK: Utility Classes
*/

.skiplink {
	position: absolute;
	transform: translateX(-100%);
	background-color: white;
	z-index: 10;
	left: 0;
	top: 0;
	padding: var(--space-base);
}
.skiplink:focus {
    transform: translateX(0);
}

.trim > :first-child    { margin-top: 0; }
.trim > :last-child     { margin-bottom: 0; }

.screen-reader-text     { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; }

.text-left                      { text-align: left; }
.text-right                     { text-align: right; }
.text-center                    { text-align: center; }

.text-xxl                       { font-size: var(--text-xxl); }
.text-xl                        { font-size: var(--text-xl); }
.text-lg                        { font-size: var(--text-lg); }
.text-md                        { font-size: var(--text-md); }
.text-base                      { font-size: var(--text-base); }
.text-sm                        { font-size: var(--text-sm); }

.list-none                      { list-style: none; padding-left: 0; }

.justify-content-start          { justify-content: start; }
.justify-content-center         { justify-content: center; }
.justify-content-end            { justify-content: end; }

.justify-items-start            { justify-items: start; }
.justify-items-center           { justify-items: center; }
.justify-items-end              { justify-items: end; }

.align-items-center             { align-items: center; }
.align-items-end                { align-items: end; }
.align-items-start              { align-items: start; }

.max-narrow                     { max-width: var(--max-narrow); }
.max-post                       { max-width: var(--max-post); }
.max-content                    { max-width: var(--max-content); }
.max-wide                       { max-width: var(--max-wide); }

.none                           { display: none; }

.spacer {
    display: block;
    height: calc( 1 * var(--space-huge) );
}

.swatches {
    display: grid;
    gap: var(--space-xs);
}

.swatch-group {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
}

.swatches .swatch {
    font-size: 12px;
    padding: var(--space-xxl) var(--space-base);
}

.all-images {
    background-color: var(--site-bg);
    border: var(--border);
    margin-inline: auto;
    margin-block: var(--space-lg);
    max-width: 42rem;
    padding: var(--space-md);    
}

.all-images-item {
    border-top: var(--border);
    margin-top: var(--space-md);
    padding-top: var(--space-md);
}

.all-images-item:first-of-type {
    border: 0;
    margin-top: 0;
    padding-top: 0;
}

.all-images input[type=text] {
    border-width: 1px;
    font-size: 16px;
    padding: var(--space-xs);
    width: 100%;
}

.all-images ol ol {
    padding-left: 0;
}

.all-images label {
    display: none;
}

.all-images img {
    width: 200px;
}
.all-images li {
    padding-top: var(--space-sm);
}