:root {
    --ivory: #eef0ee;
    --ink: #333333;
    --green: #23784a;
    /* Deeper green for text on yellow and for hover states. */
    --green-strong: #175c37;
    --yellow: #dacb3f;
    --paper: #ffffff;
    --muted: #636e63;
    --line: #c6cec6;
    --serif: 'Playfair Display', Georgia, serif;
    --sans: 'DM Sans', sans-serif;
}

* {
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
    scroll-padding-top: 1.5rem;
}
body {
    margin: 0;
    background: var(--ivory);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 0.875rem;
    -webkit-font-smoothing: antialiased;
}
a {
    color: inherit;
    text-decoration: none;
}
button,
input,
select {
    font: inherit;
}
button,
a,
input,
select {
    -webkit-tap-highlight-color: transparent;
}
button {
    color: inherit;
    cursor: pointer;
}
button {
    border: 0;
    background: none;
}
button:disabled {
    cursor: not-allowed;
}
input,
select {
    color: var(--ink);
    min-width: 0;
}
/* Safari zooms focused controls below 16px, including invisible date inputs.
   Keep this floor above page-specific field styles without restricting page zoom. */
@media (max-width: 50rem), (any-pointer: coarse) {
    input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='hidden']),
    select,
    textarea {
        font-size: max(16px, 1rem) !important;
    }
}
img {
    display: block;
    max-width: 100%;
    object-fit: cover;
}
button,
a,
select,
input {
    outline-offset: 0.3125rem;
}
button:focus-visible,
a:focus-visible,
select:focus-visible,
input:focus-visible {
    outline: 0.125rem solid var(--green);
}
::selection {
    background: var(--yellow);
    color: var(--green-strong);
}
[hidden] {
    display: none !important;
}
.wrap {
    width: calc(100% - 7rem);
    max-width: 90rem;
    margin-inline: auto;
}
.icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    vertical-align: middle;
}
.eyebrow {
    font-size: 0.625rem;
    letter-spacing: 0.125rem;
    font-weight: 600;
    color: var(--green);
    margin: 0 0 1.0625rem;
}
.site-header {
    height: 6.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
    gap: 1.875rem;
}
.wordmark {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    letter-spacing: -0.11875rem;
    font-size: 1.9375rem;
    color: var(--green);
    white-space: nowrap;
}
.wordmark > .icon {
    width: 2.1875rem;
    height: 2.1875rem;
    stroke-width: 1.4;
    margin-right: 0.1875rem;
}
.wordmark > span {
    font-family: var(--sans);
    font-size: 0.625rem;
    letter-spacing: 0;
    align-self: flex-start;
    margin-top: 0.5625rem;
    margin-left: -0.25rem;
}
.main-nav {
    display: flex;
    gap: 2.125rem;
    align-items: center;
    font-size: 0.75rem;
}
.main-nav > a {
    position: relative;
    padding: 0.8125rem 0;
}
.main-nav > a.active {
    color: var(--green);
    font-weight: 600;
}
.main-nav > a.active:after {
    content: '';
    position: absolute;
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 50%;
    background: var(--green);
    left: calc(50% - 0.125rem);
    bottom: 1px;
}
.main-nav .icon {
    width: 0.75rem;
    height: 0.75rem;
    margin-left: 0.1875rem;
}
.header-actions {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    font-size: 0.6875rem;
}
.saved-nav {
    display: flex;
    align-items: center;
    gap: 0.4375rem;
    padding: 0.5rem 0;
}
.saved-nav .icon {
    width: 1.0625rem;
    height: 1.0625rem;
}
.saved-count {
    display: grid;
    place-items: center;
    background: var(--green);
    color: var(--paper);
    border-radius: 50%;
    width: 1.125rem;
    height: 1.125rem;
    font-size: 0.625rem;
}
.host-link {
    border: 1px solid #afbaaf;
    border-radius: 0.25rem;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 1.125rem;
}
.host-link .icon {
    width: 0.9375rem;
    height: 0.9375rem;
}
.menu-toggle {
    display: none;
}
.hero-intro {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 2.4375rem 0 2.125rem;
}
.hero-intro .eyebrow {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.5625rem;
}
.small-sun {
    font-family: Georgia, serif;
    font-variant-emoji: text;
    font-size: 1.0625rem;
    line-height: 1;
}
h1,
h2,
h3,
p {
    margin-top: 0;
}
h1,
h2 {
    font-family: var(--serif);
    font-weight: 400;
    color: var(--green);
}
h1 {
    font-size: 4.875rem;
    line-height: 1.06;
    letter-spacing: -0.2375rem;
    margin-bottom: 0;
}
h1 em,
h2 em {
    font-weight: 400;
}
h1 em {
    position: relative;
}
h1 em:after {
    content: '';
    position: absolute;
    bottom: 1px;
    left: 0;
    right: -0.375rem;
    height: 0.25rem;
    border-radius: 50%;
    background: var(--yellow);
    z-index: -1;
    transform: rotate(-4deg);
}
.heading-sun {
    font-family: Georgia, serif;
    font-variant-emoji: text;
    font-size: 3.625rem;
    color: var(--green);
    display: inline-block;
    margin-left: 1.6875rem;
    vertical-align: 0.4375rem;
    line-height: 1;
}
.hero-aside {
    padding: 0 0.1875rem 0.5625rem 0;
    width: 16.125rem;
}
.hero-aside p {
    font-size: 0.8125rem;
    line-height: 1.85;
    color: #5c685c;
    margin-bottom: 1.5625rem;
}
.underlined-link {
    font-size: 0.6875rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--green);
    color: var(--green);
}
.underlined-link .icon {
    width: 1rem;
    height: 1rem;
}
.hero-image {
    height: 25.625rem;
    position: relative;
    border-radius: 0.3125rem;
    overflow: hidden;
    background: var(--green);
}
.hero-image > img {
    height: 100%;
    width: 100%;
    object-position: center 60%;
}
.hero-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(14, 32, 21, 0.22),
        transparent 38%,
        rgba(15, 33, 22, 0.65)
    );
}
.hero-image-top {
    position: absolute;
    left: 1.8125rem;
    right: 1.8125rem;
    top: 1.5625rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
}
.image-label {
    display: flex;
    align-items: center;
    gap: 0.4375rem;
    font-size: 0.5rem;
    font-weight: 500;
    letter-spacing: 0.09375rem;
    padding: 0.5625rem 0.8125rem;
    border: 1px solid #ffffff65;
    border-radius: 0.125rem;
    background: #ffffff10;
    backdrop-filter: blur(0.3125rem);
}
.image-label > span {
    width: 0.3125rem;
    height: 0.3125rem;
    border-radius: 50%;
    background: var(--yellow);
}
.hero-coordinate {
    font-size: 0.5625rem;
    letter-spacing: 0.1125rem;
}
.hero-property {
    position: absolute;
    bottom: 4.8125rem;
    left: 1.9375rem;
    display: flex;
    align-items: center;
    gap: 2rem;
    color: var(--paper);
}
.hero-property > span:first-child {
    display: flex;
    flex-direction: column;
}
.hero-property small {
    font-size: 0.5rem;
    letter-spacing: 0.1rem;
    margin-bottom: 0.625rem;
}
.hero-property strong {
    font-family: var(--serif);
    font-size: 2.0625rem;
    font-weight: 400;
    letter-spacing: -0.5px;
    margin-bottom: 0.4375rem;
}
.hero-property > span > span {
    font-size: 0.625rem;
    color: #ffffffe0;
}
.circle-arrow {
    display: grid;
    place-items: center;
    width: 2.5625rem;
    height: 2.5625rem;
    border: 1px solid #ffffff70;
    border-radius: 50%;
    margin-top: 1.0625rem;
    transition: background 0.2s;
}
.hero-property:hover .circle-arrow {
    background: var(--yellow);
    color: var(--green-strong);
    border-color: var(--yellow);
}
.image-counter {
    position: absolute;
    right: 2rem;
    bottom: 5.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: white;
    font-size: 0.625rem;
    letter-spacing: 1px;
}
.image-counter i {
    width: 3.8125rem;
    height: 1px;
    background: #ffffff65;
    position: relative;
}
.image-counter i:before {
    content: '';
    position: absolute;
    width: 0.9375rem;
    height: 1px;
    background: var(--yellow);
}
.search-bar {
    position: relative;
    margin: -2.6875rem auto 0;
    width: calc(100% - 6.5rem);
    min-height: 5.5625rem;
    background: var(--paper);
    border: 1px solid #d5dcd5;
    box-shadow: 0 0.625rem 1.5625rem #33333308;
    border-radius: 0.3125rem;
    display: grid;
    grid-template-columns: 1.35fr 1fr 1fr auto;
    align-items: center;
    padding: 1rem 1.0625rem;
    z-index: 2;
}
.search-field {
    display: flex;
    gap: 0.875rem;
    align-items: center;
    padding: 0 1.3125rem;
    border-right: 1px solid var(--line);
    min-width: 0;
    height: 2.5625rem;
}
.search-field > .icon {
    color: var(--green);
    width: 1.1875rem;
    height: 1.1875rem;
}
.search-field > span {
    display: flex;
    flex-direction: column;
    gap: 0.4375rem;
    min-width: 0;
    flex: 1;
}
.field-title {
    font-size: 0.625rem;
    font-weight: 650;
    letter-spacing: 0.1px;
}
.search-field input,
.search-field select {
    border: 0;
    background: none;
    font-size: 0.6875rem;
    width: 100%;
    padding: 0;
    color: var(--muted);
    outline-offset: 0.125rem;
}
.search-field select {
    appearance: none;
    cursor: pointer;
}
.search-field:nth-child(3) {
    border: 0;
}
.button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 1.375rem;
    padding: 1rem 1.375rem;
    min-height: 3.0625rem;
    font-weight: 600;
    font-size: 0.6875rem;
    border-radius: 0.1875rem;
    transition:
        background 0.2s,
        transform 0.2s;
}
.button:hover {
    transform: translateY(-1px);
}
.search-button {
    color: var(--green-strong);
    background: var(--yellow);
    margin-left: 0.75rem;
}
.search-button .icon {
    width: 1.0625rem;
    height: 1.0625rem;
}
.button-green {
    background: var(--green);
    color: var(--paper);
}
.button-green:hover {
    background: var(--green-strong);
}
.hero-footnote {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    font-size: 0.5625rem;
    color: #667666;
    padding: 1.375rem 0 0;
}
.hero-footnote > span {
    display: flex;
    align-items: center;
    gap: 0.3125rem;
}
.hero-footnote .icon {
    width: 0.75rem;
    height: 0.75rem;
    color: var(--green);
}
.hero-footnote .scroll-note {
    margin-left: auto;
    font-size: 0.5rem;
    letter-spacing: 0.078125rem;
}
.collection {
    padding-top: 4.5rem;
    padding-bottom: 4.125rem;
}
.section-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 1.8125rem;
}
.section-heading .eyebrow {
    font-size: 0.5625rem;
    margin-bottom: 0.8125rem;
}
.section-heading h2 {
    font-size: 2.375rem;
    line-height: 1.2;
    letter-spacing: -0.09375rem;
    margin: 0;
}
.section-heading > p {
    font-size: 0.6875rem;
    line-height: 1.8;
    margin: 0 0.1875rem 0.125rem 1.25rem;
    color: #687568;
}
.collection-toolbar {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.25rem;
    min-height: 4.625rem;
}
.categories {
    display: flex;
    gap: 1.875rem;
    height: 4.625rem;
}
.category {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.6875rem;
    color: #626f62;
    position: relative;
    white-space: nowrap;
    padding: 0 1px;
}
.category .icon {
    width: 1.1875rem;
    height: 1.1875rem;
}
.category.selected {
    color: var(--green);
    font-weight: 600;
}
.category.selected:after {
    content: '';
    position: absolute;
    height: 0.125rem;
    bottom: -1px;
    left: 0;
    right: 0;
    background: var(--green);
}
.filter-button {
    display: flex;
    align-items: center;
    gap: 0.5625rem;
    padding: 0.625rem 0.9375rem;
    border: 1px solid #b5c0b5;
    border-radius: 0.1875rem;
    font-size: 0.625rem;
    white-space: nowrap;
}
.filter-button .icon {
    width: 0.9375rem;
    height: 0.9375rem;
}
.filter-button:hover {
    background: #23784a08;
}
.collection-meta {
    display: flex;
    justify-content: space-between;
    gap: 1.25rem;
    margin: 1.3125rem 0 1.4375rem;
    font-size: 0.625rem;
    color: #636e63;
    align-items: center;
}
.collection-meta p {
    margin: 0;
}
.collection-meta p > span {
    color: #475447;
    margin-left: 0.3125rem;
}
.sort-label {
    white-space: nowrap;
}
.sort-label select {
    border: 0;
    background: transparent;
    padding: 0 0.125rem 0 0.4375rem;
    font-weight: 500;
    font-size: 0.625rem;
    color: var(--green);
    cursor: pointer;
}
.stay-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.25rem 1.5625rem;
}
.stay-card {
    min-width: 0;
}
.card-image {
    position: relative;
    aspect-ratio: 1.36;
    overflow: hidden;
    border-radius: 0.25rem;
    background: #bec8be;
}
.card-image > a {
    display: block;
    width: 100%;
    height: 100%;
}
.card-image img {
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.2, 0.6, 0.3, 1);
}
.stay-card:hover .card-image img {
    transform: scale(1.04);
}
.property-tag {
    position: absolute;
    left: 0.8125rem;
    top: 0.8125rem;
    background: var(--paper);
    color: var(--green);
    font-size: 0.5rem;
    letter-spacing: 0.7px;
    padding: 0.4375rem 0.5625rem;
    border-radius: 0.125rem;
    display: flex;
    align-items: center;
    gap: 0.3125rem;
    pointer-events: none;
}
.property-tag .icon {
    width: 0.625rem;
    height: 0.625rem;
    fill: var(--green);
    stroke-width: 1;
}
.save-button {
    position: absolute;
    right: 0.75rem;
    top: 0.75rem;
    border-radius: 50%;
    width: 1.9375rem;
    height: 1.9375rem;
    background: #ffffffd9;
    display: grid;
    place-items: center;
    transition:
        background 0.2s,
        color 0.2s;
}
.save-button .icon {
    width: 1rem;
    height: 1rem;
}
.save-button:hover {
    background: var(--paper);
}
[data-save][aria-pressed='true'] {
    color: var(--green);
}
[data-save][aria-pressed='true'] .icon {
    fill: var(--green);
}
.card-image-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2.1875rem 0.9375rem 0.875rem;
    background: linear-gradient(transparent, #10251670);
    color: white;
    pointer-events: none;
    font-size: 0.5625rem;
    letter-spacing: 0.2px;
}
.image-dots {
    display: flex;
    gap: 0.25rem;
}
.image-dots i {
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 50%;
    background: #ffffff70;
}
.image-dots i.current {
    width: 0.3125rem;
    height: 0.3125rem;
    background: white;
}
.card-location {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: #687768;
    font-size: 0.625rem;
    margin-top: 1rem;
}
.card-location > .icon {
    width: 0.6875rem;
    height: 0.6875rem;
}
.rating {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--green);
    font-size: 0.625rem;
}
.rating .icon {
    width: 0.6875rem;
    height: 0.6875rem;
    fill: var(--green);
    stroke-width: 1;
}
.card-title {
    font-family: var(--serif);
    font-size: 1.5rem;
    letter-spacing: -0.6px;
    color: var(--green);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0.5rem 0 0.75rem;
}
.card-title > .icon {
    width: 1.0625rem;
    height: 1.0625rem;
    transition: transform 0.2s;
}
.card-title:hover > .icon {
    transform: translate(0.125rem, -0.125rem);
}
.card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--line);
    padding-top: 0.75rem;
    gap: 0.5rem;
}
.amenities {
    display: flex;
    gap: 0.3125rem;
    align-items: center;
    font-size: 0.5625rem;
    color: #626f62;
}
.amenities .icon {
    width: 0.875rem;
    height: 0.875rem;
}
.amenities i {
    font-style: normal;
    margin: 0 0.125rem;
}
.card-price {
    font-size: 0.9375rem;
    color: var(--green);
    font-weight: 600;
    white-space: nowrap;
}
.card-price small {
    font-size: 0.5625rem;
    font-weight: 400;
    color: #6c786c;
}
.collection-end {
    margin-top: 2.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--line);
    padding-top: 1.5625rem;
}
.collection-end > span {
    font-size: 0.6875rem;
    color: #677667;
}
.empty-state {
    text-align: center;
    padding: 3.75rem 1.25rem;
}
.empty-state > .icon {
    width: 2.125rem;
    height: 2.125rem;
    color: var(--green);
}
.empty-state h3 {
    font-family: var(--serif);
    font-size: 1.75rem;
    font-weight: 400;
    color: var(--green);
    margin: 1.25rem 0 0.75rem;
}
.empty-state p {
    color: var(--muted);
    line-height: 1.7;
}
.philosophy {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--green-strong);
    color: var(--paper);
    border-radius: 0.25rem;
    overflow: hidden;
    min-height: 26.25rem;
}
.philosophy-art {
    position: relative;
    min-height: 26.25rem;
}
.philosophy-art > img {
    width: 100%;
    height: 100%;
    position: absolute;
}
.round-seal {
    position: absolute;
    bottom: 1.625rem;
    right: 1.625rem;
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
    background: var(--yellow);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--green-strong);
    font-size: 0.6875rem;
    line-height: 1.3;
    letter-spacing: 0.08125rem;
    transform: rotate(-12deg);
    box-shadow: 0 0 0 0.3125rem #dacb3f50;
}
.round-seal em {
    font-family: var(--serif);
    font-size: 1.9375rem;
    letter-spacing: -1px;
}
.round-seal > span {
    font-size: max(8px, 0.375rem);
    letter-spacing: 1px;
    margin-top: 0.5rem;
}
.philosophy-copy {
    padding: 3.75rem 3.75rem 3.125rem;
}
.philosophy-copy .eyebrow {
    color: #cdd4cd;
    font-size: 0.5625rem;
}
.philosophy-copy h2 {
    color: var(--paper);
    font-size: 2.625rem;
    letter-spacing: -0.08125rem;
    line-height: 1.15;
    margin: 0 0 1.5rem;
}
.philosophy-copy > p:not(.eyebrow) {
    font-size: 0.75rem;
    line-height: 1.9;
    color: #cdd4cd;
    max-width: 20.625rem;
    margin-bottom: 0.8125rem;
}
.philosophy-copy .underlined-link {
    color: var(--paper);
    border-color: #dee2de70;
    margin-top: 1rem;
}
.journal {
    display: flex;
    justify-content: space-between;
    gap: 3.75rem;
    padding: 4.4375rem 2.5rem 4.125rem;
}
.journal h2 {
    font-size: 2.1875rem;
    line-height: 1.3;
    letter-spacing: -1px;
    margin: 0;
}
.journal .eyebrow {
    font-size: 0.5625rem;
}
.journal-copy {
    width: 21.875rem;
    padding-top: 0.3125rem;
}
.journal-copy > p {
    font-size: 0.75rem;
    line-height: 1.8;
    color: #606f60;
    max-width: 20rem;
}
.newsletter-form {
    display: flex;
    border-bottom: 1px solid #92a292;
    margin-top: 1.5625rem;
    margin-bottom: 0.6875rem;
}
.newsletter-form input {
    background: none;
    border: 0;
    padding: 0.75rem 0;
    flex: 1;
    font-size: 0.6875rem;
    width: 100%;
}
.newsletter-form button {
    color: var(--green);
    padding: 0.375rem 0 0.375rem 1.25rem;
}
.journal-copy small {
    font-size: 0.5rem;
    color: #636f63;
}
.site-footer {
    border-top: 1px solid var(--line);
    display: flex;
    align-items: center;
    padding: 1.875rem 0 2.1875rem;
    gap: 1.875rem;
}
.site-footer .wordmark {
    font-size: 1.4375rem;
}
.site-footer .wordmark > .icon {
    width: 1.5625rem;
    height: 1.5625rem;
}
.site-footer p {
    font-size: 0.5625rem;
    color: #626f62;
    margin: 0;
}
.site-footer > span {
    font-size: 0.5625rem;
    color: #626f62;
    margin-left: auto;
    white-space: nowrap;
}
.text-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.5625rem;
    white-space: nowrap;
    color: var(--green);
    padding: 0;
}
.text-button > .icon {
    width: 0.75rem;
    height: 0.75rem;
}
dialog {
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    background: var(--paper);
    padding: 2.75rem;
    width: min(30rem, calc(100% - 2rem));
    color: var(--ink);
    max-height: 90dvh;
    box-shadow: 0 1.875rem 6.25rem #1c2a2240;
}
dialog::backdrop {
    background: #1a2820c0;
    backdrop-filter: blur(0.3125rem);
}
dialog h2 {
    font-size: 2.1875rem;
    letter-spacing: -0.075rem;
    line-height: 1.15;
    margin-bottom: 1.25rem;
}
dialog > p {
    font-size: 0.8125rem;
    line-height: 1.8;
    color: #687668;
}
.dialog-close {
    position: absolute;
    right: 0.9375rem;
    top: 0.9375rem;
    padding: 0.375rem;
    display: grid;
    place-items: center;
    color: var(--green);
}
dialog form {
    display: grid;
    gap: 1.25rem;
    margin-top: 1.5625rem;
}
dialog label {
    display: grid;
    gap: 0.5625rem;
    font-size: 0.75rem;
    font-weight: 500;
}
dialog input:not([type='range']):not([type='checkbox']),
dialog select {
    width: 100%;
    background: transparent;
    border: 1px solid #bbc5bb;
    border-radius: 0.1875rem;
    padding: 0.75rem;
    font-size: 0.8125rem;
}
dialog input[type='range'] {
    width: 100%;
    accent-color: var(--green);
}
dialog input[type='checkbox'] {
    accent-color: var(--green);
    width: 1.0625rem;
    height: 1.0625rem;
}
dialog .checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 400;
}
dialog output {
    color: var(--green);
    font-family: var(--serif);
    font-size: 1.875rem;
}
dialog small {
    color: var(--muted);
    font-size: 0.625rem;
    text-align: center;
    line-height: 1.6;
}
.toast {
    position: fixed;
    bottom: 1.5625rem;
    left: 50%;
    transform: translate(-50%, 1.25rem);
    background: var(--green);
    color: var(--paper);
    padding: 1rem 1.625rem;
    border-radius: 0.25rem;
    box-shadow: 0 0.375rem 1.5625rem #0002;
    z-index: 20;
    font-size: 0.75rem;
    opacity: 0;
    pointer-events: none;
    transition: 0.25s;
    width: max-content;
    max-width: calc(100% - 2rem);
    text-align: center;
}
.toast.visible {
    opacity: 1;
    transform: translate(-50%, 0);
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.skip-link {
    position: fixed;
    top: -3.75rem;
    left: 1.25rem;
    z-index: 100;
    padding: 0.75rem;
    background: var(--green);
    color: white;
}
.skip-link:focus {
    top: 0.75rem;
}
.confirmation-total {
    padding: 1.25rem;
    background: var(--ivory);
    color: var(--green);
    font-size: 1.5625rem;
    font-family: var(--serif);
    margin: 1.375rem 0;
}
.not-found {
    padding: 5.625rem 0;
}
.not-found .button {
    margin-top: 2.1875rem;
}
@media (min-width: 100rem) {
    .hero-image {
        height: 30.625rem;
    }
    .hero-intro {
        padding: 3.125rem 0 2.5rem;
    }
    h1 {
        font-size: 5.75rem;
    }
    .hero-aside {
        width: 18.75rem;
    }
    .hero-aside p {
        font-size: 0.9375rem;
    }
    .hero-footnote {
        font-size: 0.6875rem;
    }
    .card-image {
        aspect-ratio: 1.5;
    }
    .main-nav {
        font-size: 0.8125rem;
        gap: 2.8125rem;
    }
    .header-actions {
        font-size: 0.75rem;
    }
}
@media (max-width: 68.75rem) {
    .wrap {
        width: calc(100% - 4rem);
    }
    .main-nav {
        gap: 1.25rem;
        font-size: 0.6875rem;
    }
    .header-actions {
        gap: 1.0625rem;
    }
    .host-link {
        padding: 0.625rem;
        gap: 0.625rem;
    }
    .wordmark {
        font-size: 1.75rem;
    }
    .wordmark > .icon {
        width: 1.8125rem;
        height: 1.8125rem;
    }
    .search-bar {
        width: calc(100% - 3.75rem);
        grid-template-columns: 1.2fr 1fr 1fr auto;
        padding: 0.9375rem 0.75rem;
    }
    .search-field {
        padding: 0 0.75rem;
        gap: 0.5rem;
    }
    .search-field > .icon {
        width: 1rem;
        height: 1rem;
    }
    .search-button {
        padding: 0.9375rem;
        gap: 0.8125rem;
        font-size: 0.625rem;
        margin-left: 0.25rem;
    }
    .categories {
        gap: 1.5625rem;
    }
    .hero-footnote {
        gap: 1.125rem;
    }
    .hero-footnote .scroll-note {
        font-size: max(8px, 0.4375rem);
        letter-spacing: 0.7px;
    }
    .stay-grid {
        gap: 1.875rem 1.25rem;
    }
    .card-image {
        aspect-ratio: 1.2;
    }
    .amenities {
        font-size: 0.5rem;
        gap: 0.1875rem;
    }
    .card-price {
        font-size: 0.875rem;
    }
    .card-price small {
        font-size: 0.5rem;
    }
    .card-title {
        font-size: 1.4375rem;
    }
    .philosophy-copy {
        padding: 2.875rem 2.25rem;
    }
    .journal {
        padding-inline: 1.25rem;
    }
    .site-footer {
        gap: 1.25rem;
    }
    .site-footer p {
        max-width: 13.75rem;
        line-height: 1.6;
    }
}
@media (max-width: 50rem) {
    .site-header {
        height: 5.1875rem;
        gap: 0.9375rem;
    }
    .main-nav {
        gap: 1.0625rem;
    }
    .main-nav > a:nth-child(3) {
        display: none;
    }
    .host-link {
        display: none;
    }
    .hero-intro {
        padding-top: 2rem;
    }
    h1 {
        font-size: 4.25rem;
    }
    .hero-aside {
        width: 13.125rem;
    }
    .hero-aside p {
        font-size: 0.6875rem;
    }
    .hero-intro .eyebrow {
        font-size: 0.5rem;
        letter-spacing: 0.09375rem;
    }
    .hero-image {
        height: 22.5rem;
    }
    .search-bar {
        width: calc(100% - 2.375rem);
        grid-template-columns: 1.25fr 1fr 1fr;
        padding: 1.0625rem 0.75rem;
        row-gap: 1.1875rem;
        margin-top: -2.5rem;
    }
    .search-button {
        grid-column: 1/-1;
        margin: 0;
        min-height: 2.625rem;
        padding: 0.75rem;
    }
    .search-field {
        padding: 0 0.625rem;
    }
    .hero-footnote {
        justify-content: center;
        font-size: 0.5rem;
        gap: 1.375rem;
    }
    .hero-footnote .scroll-note {
        display: none;
    }
    .collection {
        padding-top: 3.4375rem;
    }
    .section-heading h2 {
        font-size: 2rem;
    }
    .section-heading > p {
        font-size: 0.625rem;
    }
    .categories {
        gap: 1.5rem;
        overflow: auto;
    }
    .category {
        font-size: 0.625rem;
        gap: 0.375rem;
    }
    .category .icon {
        width: 1.0625rem;
        height: 1.0625rem;
    }
    .collection-toolbar {
        gap: 0.9375rem;
    }
    .category:last-child {
        margin-right: 0.3125rem;
    }
    .stay-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2rem 1.375rem;
    }
    .card-image {
        aspect-ratio: 1.4;
    }
    .card-bottom {
        padding-top: 0.6875rem;
    }
    .amenities {
        font-size: 0.5625rem;
        gap: 0.3125rem;
    }
    .card-price {
        font-size: 0.9375rem;
    }
    .collection-meta p {
        font-size: 0.5625rem;
    }
    .collection-meta p > span {
        display: block;
        margin: 0.25rem 0 0;
    }
    .philosophy {
        grid-template-columns: 1fr 1fr;
        min-height: 22.812rem;
    }
    .philosophy-art {
        min-height: 22.812rem;
    }
    .philosophy-copy {
        padding: 2.5rem 1.75rem;
    }
    .philosophy-copy h2 {
        font-size: 2rem;
    }
    .philosophy-copy .eyebrow {
        font-size: max(8px, 0.4375rem);
        letter-spacing: 0.06875rem;
    }
    .philosophy-copy > p:not(.eyebrow) {
        font-size: 0.6875rem;
    }
    .philosophy-copy .underlined-link {
        font-size: 0.625rem;
        gap: 0.9375rem;
    }
    .journal {
        gap: 2.5rem;
        padding-inline: 0;
    }
    .journal h2 {
        font-size: 1.8125rem;
    }
    .journal-copy {
        width: 17.5rem;
    }
    .journal-copy > p {
        font-size: 0.6875rem;
    }
    .journal .eyebrow {
        font-size: 0.5rem;
        letter-spacing: 0.09375rem;
    }
    .site-footer {
        flex-wrap: wrap;
        gap: 1.125rem;
    }
    .site-footer p {
        max-width: none;
    }
    .site-footer > span {
        margin-left: 0;
    }
    .site-footer .text-button {
        margin-left: auto;
    }
}
@media (max-width: 35rem) {
    .wrap {
        width: calc(100% - 2.25rem);
    }
    .site-header {
        height: 4.8125rem;
        position: relative;
    }
    .wordmark {
        font-size: 1.6875rem;
        gap: 0.3125rem;
    }
    .wordmark > .icon {
        width: 1.75rem;
        height: 1.75rem;
    }
    .wordmark > span {
        font-size: 0.5rem;
        margin-top: 0.5rem;
    }
    .header-actions {
        gap: 1.0625rem;
    }
    .saved-nav > span:not(.saved-count) {
        display: none;
    }
    .saved-nav .icon {
        width: 1.25rem;
        height: 1.25rem;
    }
    .main-nav {
        display: none;
        position: absolute;
        top: 4.75rem;
        left: -1.125rem;
        right: -1.125rem;
        padding: 0.9375rem 1.5rem;
        background: var(--paper);
        border-bottom: 1px solid var(--line);
        z-index: 10;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.125rem;
        box-shadow: 0 0.625rem 1.25rem #3333330a;
        font-size: 0.8125rem;
    }
    .main-nav.open {
        display: flex;
    }
    .main-nav > a:nth-child(3) {
        display: block;
    }
    .main-nav > a.active:after {
        display: none;
    }
    .menu-toggle {
        display: grid;
        place-items: center;
        padding: 0.25rem;
    }
    .hero-intro {
        padding: 1.8125rem 0 1.5rem;
        display: block;
    }
    .hero-intro .eyebrow {
        font-size: max(8px, 0.4375rem);
        letter-spacing: 0.08125rem;
        gap: 0.375rem;
        margin-bottom: 1.125rem;
    }
    .small-sun {
        font-size: 0.875rem;
    }
    h1 {
        font-size: clamp(3rem, 14vw, 4.0625rem);
        letter-spacing: -0.18125rem;
        line-height: 1.05;
    }
    .heading-sun {
        font-size: 2.8125rem;
        margin-left: 1.4375rem;
        vertical-align: 0.5rem;
    }
    .hero-aside {
        width: auto;
        padding: 0;
        margin-top: 1.5rem;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 1.125rem;
    }
    .hero-aside p {
        font-size: 0.625rem;
        line-height: 1.8;
        margin: 0;
    }
    .hero-aside .underlined-link {
        font-size: 0.5625rem;
        gap: 0.625rem;
        max-width: 6.9375rem;
        line-height: 1.7;
        padding-bottom: 0.25rem;
        flex-shrink: 0;
    }
    .hero-image {
        height: 21.875rem;
        border-radius: 0.1875rem;
    }
    .hero-image > img {
        object-position: 56% center;
    }
    .hero-image-top {
        left: 0.9375rem;
        right: 0.9375rem;
        top: 1rem;
    }
    .hero-coordinate {
        display: none;
    }
    .image-label {
        font-size: max(8px, 0.4375rem);
        padding: 0.5rem 0.5625rem;
        letter-spacing: 1px;
    }
    .hero-property {
        left: 1.1875rem;
        bottom: 4.1875rem;
        gap: 0.75rem;
        right: 1.1875rem;
        justify-content: space-between;
    }
    .hero-property small {
        font-size: max(8px, 0.375rem);
        letter-spacing: 0.075rem;
        margin-bottom: 0.5625rem;
    }
    .hero-property strong {
        font-size: 1.625rem;
    }
    .hero-property > span > span {
        font-size: 0.5rem;
    }
    .circle-arrow {
        width: 2.0625rem;
        height: 2.0625rem;
        flex-shrink: 0;
    }
    .circle-arrow .icon {
        width: 1rem;
        height: 1rem;
    }
    .image-counter {
        display: none;
    }
    .search-bar {
        width: calc(100% - 1.5rem);
        grid-template-columns: 1fr 1fr;
        padding: 1.0625rem 0.875rem;
        gap: 1rem 0;
        margin-top: -2.125rem;
        border-radius: 0.25rem;
    }
    .search-field {
        padding: 0 0.5rem;
        gap: 0.5625rem;
        height: 2.375rem;
    }
    .search-field:first-child {
        grid-column: 1/-1;
        border-right: 0;
        border-bottom: 1px solid var(--line);
        padding: 0 0.5rem 0.875rem;
        height: 3.0625rem;
    }
    .search-field:nth-child(2) {
        border-right: 1px solid var(--line);
    }
    .search-field:nth-child(3) {
        padding-left: 0.9375rem;
    }
    .search-field > span {
        gap: 0.375rem;
    }
    .search-field input,
    .search-field select {
        font-size: 0.625rem;
    }
    .field-title {
        font-size: 0.5625rem;
    }
    .search-button {
        margin-top: 1px;
        min-height: 2.75rem;
        font-size: 0.6875rem;
    }
    .hero-footnote {
        padding: 1.0625rem 0 0;
        gap: 1.125rem;
        flex-wrap: wrap;
        font-size: 0.5rem;
        row-gap: 0.5625rem;
    }
    .hero-footnote > span:nth-child(3) {
        display: none;
    }
    .hero-footnote .icon {
        width: 0.625rem;
        height: 0.625rem;
    }
    .collection {
        padding-top: 2.8125rem;
        padding-bottom: 2.5rem;
    }
    .section-heading {
        display: block;
        margin-bottom: 1.375rem;
    }
    .section-heading .eyebrow {
        font-size: 0.5rem;
        letter-spacing: 0.0875rem;
        margin-bottom: 0.75rem;
    }
    .section-heading h2 {
        font-size: 2rem;
        letter-spacing: -0.0875rem;
        max-width: 20rem;
    }
    .section-heading > p {
        margin: 0.875rem 0 0;
        font-size: 0.625rem;
    }
    .section-heading > p br {
        display: none;
    }
    .collection-toolbar {
        min-height: 4.3125rem;
        gap: 0.75rem;
    }
    .categories {
        gap: 1.3125rem;
        height: 4.3125rem;
        scrollbar-width: none;
    }
    .category {
        flex-direction: column;
        justify-content: center;
        gap: 0.375rem;
        font-size: 0.5625rem;
    }
    .category .icon {
        width: 1.25rem;
        height: 1.25rem;
    }
    .filter-button {
        padding: 0.625rem;
        font-size: 0.5625rem;
        gap: 0.3125rem;
    }
    .filter-button .icon {
        width: 0.875rem;
        height: 0.875rem;
    }
    .collection-meta {
        margin: 1.125rem 0;
        gap: 0.625rem;
        align-items: center;
    }
    .collection-meta p {
        max-width: 11.875rem;
        font-size: 0.5rem;
        line-height: 1.6;
    }
    .collection-meta p > span {
        margin-top: 0;
    }
    .sort-label {
        font-size: 0;
    }
    .sort-label select {
        font-size: 0.5625rem;
        padding-left: 0;
        max-width: 8.125rem;
    }
    .stay-grid {
        grid-template-columns: 1fr;
        gap: 1.875rem;
    }
    .card-image {
        aspect-ratio: 1.4;
    }
    .property-tag {
        font-size: 0.5rem;
        left: 0.875rem;
        top: 0.875rem;
        padding: 0.5rem 0.625rem;
    }
    .save-button {
        width: 2.125rem;
        height: 2.125rem;
        right: 0.875rem;
        top: 0.875rem;
    }
    .card-image-bottom {
        padding: 1.875rem 1rem 0.9375rem;
        font-size: 0.625rem;
    }
    .card-location {
        font-size: 0.625rem;
        margin-top: 0.9375rem;
    }
    .rating {
        font-size: 0.625rem;
    }
    .card-title {
        font-size: 1.625rem;
        margin: 0.5rem 0 0.75rem;
    }
    .card-bottom {
        padding-top: 0.8125rem;
    }
    .amenities {
        font-size: 0.625rem;
        gap: 0.375rem;
    }
    .card-price {
        font-size: 1.0625rem;
    }
    .card-price small {
        font-size: 0.625rem;
    }
    .collection-end {
        margin-top: 1.8125rem;
        align-items: flex-start;
        gap: 1.25rem;
    }
    .collection-end > span {
        font-size: 0.5625rem;
        max-width: 8.75rem;
        line-height: 1.7;
    }
    .collection-end .underlined-link {
        font-size: 0.5625rem;
        gap: 0.75rem;
        white-space: nowrap;
    }
    .philosophy {
        grid-template-columns: 1fr;
    }
    .philosophy-art {
        min-height: 17.5rem;
    }
    .philosophy-copy {
        padding: 2.1875rem 1.8125rem 2.375rem;
    }
    .philosophy-copy h2 {
        font-size: 2.375rem;
    }
    .philosophy-copy .eyebrow {
        font-size: 0.5rem;
    }
    .philosophy-copy > p:not(.eyebrow) {
        font-size: 0.75rem;
        max-width: 100%;
    }
    .philosophy-copy .underlined-link {
        font-size: 0.6875rem;
        gap: 1.5rem;
    }
    .round-seal {
        width: 6.25rem;
        height: 6.25rem;
        bottom: 1.375rem;
        right: 1.5rem;
        font-size: 0.5625rem;
    }
    .round-seal em {
        font-size: 1.8125rem;
    }
    .journal {
        padding: 2.6875rem 0.5625rem 2.5rem;
        display: block;
    }
    .journal h2 {
        font-size: 2.0625rem;
    }
    .journal-copy {
        width: auto;
        margin-top: 1.5rem;
    }
    .journal-copy > p {
        max-width: 100%;
        font-size: 0.75rem;
    }
    .newsletter-form {
        margin-top: 1.25rem;
    }
    .newsletter-form input {
        font-size: 0.75rem;
    }
    .journal-copy small {
        font-size: 0.5rem;
    }
    .site-footer {
        padding: 1.5625rem 0;
        gap: 1.25rem 0.9375rem;
    }
    .site-footer .wordmark {
        font-size: 1.5rem;
    }
    .site-footer p {
        flex: 1;
        font-size: 0.5rem;
        max-width: 10rem;
        margin-left: auto;
    }
    .site-footer > span {
        font-size: 0.5rem;
    }
    .site-footer .text-button {
        font-size: 0.5625rem;
    }
    .site-footer .wordmark > span {
        margin-top: 0.3125rem;
    }
    dialog {
        padding: 2.375rem 1.5625rem 1.75rem;
    }
    dialog h2 {
        font-size: 2rem;
    }
    dialog .eyebrow {
        font-size: 0.5rem;
        letter-spacing: 0.0875rem;
    }
    .not-found {
        padding-block: 4.375rem;
    }
    .not-found h1 {
        font-size: 3.3125rem;
    }
}
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *,
    *:before,
    *:after {
        transition: none !important;
        animation: none !important;
    }
}

.heading-sun > svg {
    width: 1em;
    height: 1em;
    display: block;
}
.small-sun > .icon {
    width: 0.9375rem;
    height: 0.9375rem;
}
.card-bottom {
    flex-wrap: wrap;
    row-gap: 0.5625rem;
}
.card-price {
    margin-left: auto;
}

/* Keep the search and the beginning of the collection in the first desktop view. */
@media (min-width: 50.062rem) {
    .site-header {
        height: 4.875rem;
    }
    .hero {
        height: 50vh;
        min-height: 26.875rem;
        display: flex;
        flex-direction: column;
    }
    .hero-intro {
        flex: none;
        padding: 1.375rem 0 1.125rem;
    }
    .hero-intro h1 {
        font-size: clamp(3.375rem, 4.2vw, 4.25rem);
        line-height: 1.03;
    }
    .hero-intro .eyebrow {
        margin-bottom: 0.6875rem;
    }
    .hero-aside {
        padding-bottom: 0.25rem;
    }
    .hero-aside p {
        margin-bottom: 0.9375rem;
    }
    .hero-image {
        flex: 1;
        min-height: 0;
        height: auto;
    }
    .hero-image > img {
        object-position: center 57%;
    }
    .hero-property {
        bottom: 2.8125rem;
    }
    .hero-property strong {
        font-size: 1.75rem;
        margin-bottom: 0.25rem;
    }
    .hero-property small {
        margin-bottom: 0.375rem;
    }
    .image-counter {
        bottom: 4.75rem;
    }
    .search-bar {
        flex: none;
        min-height: 4.75rem;
        margin-top: -2.375rem;
        padding-block: 0.6875rem;
    }
    .hero-footnote {
        flex: none;
        padding-top: 0.875rem;
    }
    .collection {
        padding-top: 1.125rem;
    }
    .collection .section-heading {
        margin-bottom: 0.625rem;
    }
    .collection .section-heading .eyebrow {
        margin-bottom: 0.3125rem;
    }
    .collection .section-heading h2 {
        font-size: 2rem;
    }
    .collection .collection-toolbar,
    .collection .categories {
        min-height: 3.375rem;
        height: 3.375rem;
    }
    .collection .collection-meta {
        margin: 0.625rem 0 0.75rem;
    }
}

/* Give four listings room to breathe on wide screens. */
@media (min-width: 75rem) {
    .collection.wrap {
        width: calc(100% - 5rem);
        max-width: 90rem;
    }
    .collection .stay-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1.65rem 1.15rem;
    }
    .collection .card-image {
        aspect-ratio: 1.24;
    }
    .collection .card-title {
        font-size: clamp(1.2rem, 1.25vw, 1.45rem);
    }
    .collection .card-location,
    .collection .amenities {
        font-size: 0.625rem;
    }
    .collection .card-price {
        font-size: 0.95rem;
    }
}

@media (min-width: 50.062rem) and (max-width: 74.938rem) {
    .collection .stay-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 35.062rem) and (max-width: 50rem) {
    .hero {
        height: 50vh;
        min-height: 30rem;
        display: flex;
        flex-direction: column;
    }
    .hero-intro {
        flex: none;
        padding: 1.125rem 0 0.875rem;
    }
    .hero-intro h1 {
        font-size: 3.25rem;
    }
    .hero-aside p {
        margin-bottom: 0.75rem;
    }
    .hero-image {
        flex: 1;
        min-height: 0;
        height: auto;
    }
    .hero-property {
        bottom: 2.8125rem;
    }
    .hero-property strong {
        font-size: 1.75rem;
        margin-bottom: 0.25rem;
    }
    .hero-property small {
        margin-bottom: 0.375rem;
    }
    .search-bar {
        flex: none;
        row-gap: 0.625rem;
        padding-block: 0.625rem;
    }
    .hero-footnote {
        flex: none;
        padding-top: 0.625rem;
    }
    .collection {
        padding-top: 1.4375rem;
    }
    .collection .section-heading {
        margin-bottom: 0.75rem;
    }
    .collection .section-heading .eyebrow {
        margin-bottom: 0.4375rem;
    }
    .collection .collection-toolbar,
    .collection .categories {
        min-height: 3.625rem;
        height: 3.625rem;
    }
    .collection .collection-meta {
        margin: 0.625rem 0 0.75rem;
    }
}

@media (max-width: 35rem) {
    .hero {
        height: 50vh;
        min-height: 28.75rem;
        display: flex;
        flex-direction: column;
    }
    .hero-intro {
        flex: none;
        padding: 1.0625rem 0 0.75rem;
    }
    .hero-intro .eyebrow {
        margin-bottom: 0.5625rem;
    }
    .hero-intro h1 {
        font-size: clamp(2.6875rem, 12vw, 3.4375rem);
    }
    .hero-aside,
    .hero-footnote {
        display: none;
    }
    .hero-image {
        flex: 1;
        min-height: 0;
        height: auto;
    }
    .hero-property {
        bottom: 2.8125rem;
    }
    .search-bar {
        flex: none;
        row-gap: 0.5625rem;
        padding-block: 0.6875rem;
        margin-top: -1.5rem;
    }
    .search-field:first-child {
        height: 2.6875rem;
        padding-bottom: 0.5625rem;
    }
    .search-button {
        min-height: 2.4375rem;
    }
    .collection {
        padding-top: 1.125rem;
    }
    .collection .section-heading {
        margin-bottom: 0.8125rem;
    }
    .collection .section-heading .eyebrow {
        margin-bottom: 0.375rem;
    }
    .collection .section-heading > p {
        display: none;
    }
    .collection .section-heading h2 {
        font-size: 1.6875rem;
    }
    .collection .collection-toolbar,
    .collection .categories {
        min-height: 3.625rem;
        height: 3.625rem;
    }
    .collection .collection-meta {
        margin: 0.625rem 0 0.75rem;
    }
}

/* Scale authored layout dimensions together with type. User zoom remains effective. */
html {
    font-size: clamp(16px, 1.111vw, 22px);
}

.wordmark.brand-home {
    display: block;
    width: clamp(9rem, 12vw, 11rem);
    height: auto;
    flex: 0 0 auto;
    font-size: 0;
    line-height: 0;
}
.brand-logo {
    width: 100%;
    height: auto;
    max-height: 2.8rem;
    object-fit: contain;
    object-position: left center;
}
@media (max-width: 35rem) {
    .wordmark.brand-home {
        width: clamp(8rem, 38vw, 9rem);
    }
    .brand-logo {
        max-height: 2.5rem;
    }
}

/* Let the featured home carry the message; keep the search close at hand. */
.hero {
    gap: 0;
}
.hero-image {
    isolation: isolate;
    border-radius: 0.45rem;
}
.hero-shade {
    background:
        linear-gradient(105deg, rgba(15, 34, 23, 0.5), rgba(15, 34, 23, 0.14) 58%, transparent 82%),
        linear-gradient(0deg, rgba(15, 34, 23, 0.38), transparent 35%);
}
.hero-copy {
    position: absolute;
    z-index: 1;
    left: clamp(1.25rem, 5vw, 4.5rem);
    top: clamp(1.5rem, 6vw, 4rem);
    max-width: min(82%, 55rem);
    color: var(--paper);
}
.hero-copy h1 {
    color: inherit;
    font-size: clamp(2.8rem, 5.4vw, 5rem);
    line-height: 1.03;
    letter-spacing: -0.065em;
}
.hero-copy h1 em {
    color: #f0e768;
}
.hero-copy h1 em:after {
    display: none;
}
.hero-property {
    z-index: 1;
    bottom: 3.05rem;
    left: clamp(1.25rem, 2.1vw, 2rem);
    gap: 0.75rem;
    color: white;
}
.hero-property > span:first-child {
    display: block;
    font: 600 0.56rem var(--sans);
    letter-spacing: 0.12em;
}
.hero-property > span:first-child i {
    font-style: normal;
    color: var(--yellow);
    padding-inline: 0.2rem;
}
.hero-property .circle-arrow {
    width: 2rem;
    height: 2rem;
    margin: 0;
    background: #ffffff20;
    backdrop-filter: blur(8px);
}
.search-bar {
    position: relative;
    z-index: 3;
    box-shadow: 0 0.75rem 2.5rem #19372518;
}
.search-button {
    font-size: 0.7rem;
}
@media (max-width: 50rem) {
    .hero-copy {
        left: 1.15rem;
        top: 1.2rem;
        max-width: 90%;
    }
    .hero-copy h1 {
        font-size: clamp(2.25rem, 10.5vw, 3.5rem);
        line-height: 1.02;
    }
    .hero-property {
        left: 1rem;
        bottom: 2.85rem;
    }
    .hero-property > span:first-child {
        font-size: 0.5rem;
    }
    .hero-property .circle-arrow {
        width: 1.8rem;
        height: 1.8rem;
    }
}

/* Custom search pickers: searchable places, a two-month calendar, and guest steppers. */
.picker-field {
    position: relative;
    overflow: visible;
}
.picker-control {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.28rem;
}
.picker-control .field-title {
    line-height: 1.1;
}
.picker-control input,
.picker-trigger {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #636e63;
    text-align: left;
    font: 500 0.72rem var(--sans);
    line-height: 1.25;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.picker-control input::placeholder {
    color: #636e63;
    opacity: 1;
}
.picker-control input:focus {
    outline: 0;
}
.picker-trigger:hover,
.picker-control input:hover {
    color: var(--green);
}
.picker-trigger[aria-expanded='true'] {
    color: var(--green);
}
.search-popover {
    position: absolute;
    z-index: 50;
    top: calc(100% + 0.85rem);
    left: 0;
    background: #ffffff;
    border: 1px solid #d5dbd5;
    border-radius: 0.5rem;
    box-shadow:
        0 1rem 3rem #19372524,
        0 0.15rem 0.45rem #19372510;
    color: var(--ink);
    text-align: left;
    animation: picker-in 0.16s ease-out;
}
@keyframes picker-in {
    from {
        opacity: 0;
        transform: translateY(-0.25rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.destination-popover {
    width: min(26rem, calc(100vw - 3rem));
    padding: 0.9rem;
}
.picker-kicker {
    display: block;
    margin: 0 0 0.7rem;
    color: #677967;
    font: 600 0.52rem var(--sans);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.destination-option-list {
    display: grid;
    gap: 0.2rem;
    max-height: min(22rem, 55vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #bbc5bb transparent;
}
.destination-group-label {
    position: sticky;
    top: 0;
    z-index: 1;
    margin: 0;
    padding: 0.45rem 0.55rem 0.25rem;
    background: var(--paper);
    color: #677967;
    font: 600 0.48rem var(--sans);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.destination-option {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem;
    border-radius: 0.35rem;
    text-align: left;
    transition: background 0.16s;
}
.destination-option:hover,
.destination-option:focus-visible {
    background: #dfece4;
    outline: 0;
}
.destination-option > .icon {
    width: 1.15rem;
    height: 1.15rem;
    padding: 0.2rem;
    box-sizing: content-box;
    border-radius: 0.3rem;
    background: #dfece4;
    color: var(--green);
}
.destination-option > span:nth-child(2) {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: 0.17rem;
}
.destination-option strong {
    font: 600 0.72rem var(--sans);
    color: var(--green);
}
.destination-option small {
    font: 400 0.58rem var(--sans);
    color: #606f60;
}
.destination-arrow {
    color: #607060;
    font-size: 0.8rem;
}
.destination-free-search {
    width: 100%;
    margin-top: 0.55rem;
    padding: 0.7rem 0.55rem;
    border-top: 1px solid #dae0da;
    color: var(--green);
    text-align: left;
    font-size: 0.65rem;
}
.destination-free-search:hover {
    background: #dfece4;
}
.destination-no-results {
    margin: 0.65rem 0.4rem 0.4rem;
    color: #636e63;
    font-size: 0.62rem;
}
.date-popover {
    width: min(43rem, calc(100vw - 3rem));
    padding: 1.1rem;
}
.date-picker-heading,
.guest-picker-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
}
.date-picker-heading > div:first-child,
.guest-picker-heading {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    align-items: flex-start;
}
.date-picker-heading .picker-kicker,
.guest-picker-heading .picker-kicker {
    margin: 0;
}
.date-picker-heading strong,
.guest-picker-heading > strong {
    font: 600 0.9rem var(--serif);
    color: var(--green);
}
.date-month-nav {
    display: flex;
    gap: 0.35rem;
}
.date-month-nav button {
    width: 2rem;
    height: 2rem;
    border: 1px solid #d7ddd7;
    border-radius: 50%;
    color: var(--green);
    font-size: 1.2rem;
    line-height: 1;
}
.date-month-nav button:hover:not(:disabled) {
    background: #dfece4;
}
.date-month-nav button:disabled {
    opacity: 0.35;
    cursor: default;
}
.calendar-months {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}
.calendar-month h3 {
    margin: 0 0 0.55rem;
    text-align: center;
    font: 600 0.66rem var(--sans);
    color: #485448;
}
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.15rem;
    align-items: center;
}
.calendar-weekday {
    display: grid;
    place-items: center;
    height: 1.7rem;
    color: #7f917f;
    font: 500 0.52rem var(--sans);
}
.calendar-day {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    width: 100%;
    border-radius: 50%;
    color: #414c41;
    font: 500 0.61rem var(--sans);
    transition:
        background 0.14s,
        color 0.14s;
}
.calendar-day:hover:not(:disabled) {
    outline: 1px solid var(--green);
    outline-offset: -1px;
}
.calendar-day:disabled {
    color: #bec7be;
    cursor: default;
}
.calendar-day.today:not(.range-start):not(.range-end) {
    box-shadow: inset 0 0 0 1px #8d9d8d;
}
.calendar-day.in-range {
    border-radius: 0.25rem;
    background: #dfece4;
}
.calendar-day.range-start,
.calendar-day.range-end {
    border-radius: 50%;
    background: var(--green);
    color: white;
}
.date-picker-footer,
.guest-picker-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 0.9rem;
    padding-top: 0.75rem;
    border-top: 1px solid #dbe0db;
}
.date-picker-footer > button:first-child,
.guest-picker-footer > button:first-child {
    padding: 0.45rem 0;
    color: #505d50;
    text-decoration: underline;
    font-size: 0.62rem;
}
.date-picker-footer .button,
.guest-picker-footer .button {
    min-height: 2rem;
    padding: 0.5rem 0.9rem;
    font-size: 0.6rem;
}
.guest-popover {
    right: 0;
    left: auto;
    width: min(22rem, calc(100vw - 3rem));
    padding: 1rem;
}
.guest-picker-heading {
    margin-bottom: 0.65rem;
}
.guest-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.68rem 0;
    border-bottom: 1px solid #e1e5e1;
}
.guest-stepper > span {
    display: flex;
    flex-direction: column;
    gap: 0.16rem;
}
.guest-stepper > span strong {
    font: 600 0.68rem var(--sans);
    color: #3c473c;
}
.guest-stepper > span small {
    font: 400 0.53rem var(--sans);
    color: #798879;
}
.guest-stepper > div {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}
.guest-stepper output {
    min-width: 1rem;
    text-align: center;
    color: #3c463c;
    font-size: 0.65rem;
    font-variant-numeric: tabular-nums;
}
.guest-stepper > div button {
    width: 1.8rem;
    height: 1.8rem;
    display: grid;
    place-items: center;
    border: 1px solid #94a394;
    border-radius: 50%;
    color: var(--green);
    font-size: 0.9rem;
    line-height: 1;
}
.guest-stepper > div button:hover:not(:disabled) {
    border-color: var(--green);
    background: #dfece4;
}
.guest-stepper > div button:disabled {
    border-color: #dbe1db;
    color: #bcc5bc;
    cursor: default;
}
@media (max-width: 50rem) {
    .destination-popover {
        left: -0.35rem;
        width: calc(100vw - 3rem);
    }
    .date-popover {
        left: -0.35rem;
        width: calc(100vw - 3rem);
        padding: 0.8rem;
    }
    .calendar-months {
        grid-template-columns: 1fr;
    }
    .calendar-month:nth-child(2) {
        display: none;
    }
    .calendar-day {
        font-size: 0.67rem;
    }
    .guest-popover {
        right: -0.35rem;
    }
}
@keyframes picker-mobile-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@media (max-width: 50rem) {
    .destination-popover,
    .date-popover,
    .guest-popover {
        position: fixed;
        top: 50%;
        left: 50%;
        right: auto;
        width: calc(100vw - 2rem);
        max-height: calc(100dvh - 2rem);
        overflow-y: auto;
        transform: translate(-50%, -50%);
        animation: picker-mobile-in 0.16s ease-out;
    }
}
.destination-popover {
    max-height: min(34rem, calc(100dvh - 2rem));
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #bfc9bf transparent;
}
@media (min-width: 50.062rem) {
    .search-popover.opens-up {
        top: auto;
        bottom: calc(100% + 0.85rem);
    }
}

/* Account and management screens */
.inline-form {
    display: inline-flex;
    margin: 0;
}
.inline-form .host-link {
    font: inherit;
    background: transparent;
    border: 0;
    cursor: pointer;
}
.demo-label {
    position: absolute;
    z-index: 2;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.35rem 0.48rem;
    border-radius: 2px;
    background: var(--green);
    color: var(--paper);
    font-size: 0.5rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    pointer-events: none;
}
.card-image:has(.demo-label) .property-tag {
    top: 2rem;
}
.account-page {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(21rem, 0.95fr);
    gap: clamp(2rem, 7vw, 7rem);
    align-items: center;
    min-height: min(760px, calc(100dvh - 8rem));
    padding-block: clamp(2rem, 6vw, 5.5rem);
}
.account-art {
    position: relative;
    min-height: clamp(26rem, 56vw, 44rem);
    overflow: hidden;
    border-radius: var(--radius-lg, 0.6rem);
    background: #b6c1b6;
}
.account-art::after {
    position: absolute;
    inset: 35% 0 0;
    content: '';
    background: linear-gradient(transparent, rgba(18, 35, 25, 0.72));
}
.account-art > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.account-art-caption {
    position: absolute;
    z-index: 1;
    left: clamp(1.2rem, 3vw, 2.5rem);
    top: clamp(1.2rem, 3vw, 2.5rem);
    padding: 0.6rem 0.8rem;
    border: 1px solid #ffffff80;
    border-radius: 2px;
    /* A frosted backing keeps the label readable on bright photos. */
    background: rgb(15 34 23 / 28%);
    backdrop-filter: blur(6px);
    color: white;
    font-size: 0.62rem;
    letter-spacing: 0.16em;
}
.account-art > p {
    position: absolute;
    z-index: 1;
    left: clamp(1.2rem, 3vw, 2.5rem);
    bottom: clamp(1.4rem, 4vw, 3rem);
    margin: 0;
    color: #fff;
    font: 400 clamp(2rem, 5vw, 4.2rem)/1.05 var(--serif);
    letter-spacing: -0.035em;
}
.account-art > p em {
    font-weight: 400;
}
.account-panel {
    width: min(100%, 31rem);
    justify-self: center;
    padding: clamp(0.5rem, 2vw, 1.5rem) 0;
}
.account-panel h1 {
    margin: 0.6rem 0 1rem;
    color: var(--green);
    font: 400 clamp(2.3rem, 5vw, 4.1rem)/1.02 var(--serif);
    letter-spacing: -0.04em;
}
.account-panel h1 em {
    font-weight: 400;
}
.account-intro {
    margin: 0 0 2rem;
    color: #636f63;
    font-size: 0.88rem;
    line-height: 1.7;
}
.account-form {
    display: grid;
    gap: 1.1rem;
}
.account-form > label,
.listing-form label,
.owner-create-form > label {
    display: grid;
    gap: 0.5rem;
    color: #3c463c;
    font-size: 0.75rem;
    font-weight: 600;
}
.account-form input,
.listing-form input:not([type='checkbox']),
.listing-form select,
.listing-form textarea,
.owner-create-form input {
    width: 100%;
    min-height: 3rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid #cbd3cb;
    border-radius: 3px;
    background: #ffffff;
    color: #333;
    font: 400 0.84rem var(--sans);
}
.account-form input:focus,
.listing-form input:focus,
.listing-form select:focus,
.listing-form textarea:focus,
.owner-create-form input:focus {
    outline: 2px solid #23784a55;
    border-color: var(--green);
}
.password-field {
    position: relative;
    display: block;
}
.password-field input {
    padding-right: 4rem !important;
}
.password-field button {
    position: absolute;
    right: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--green);
    font-size: 0.68rem;
    text-decoration: underline;
}
.account-form label small,
.listing-form label small {
    color: #646e64;
    font-size: 0.65rem;
    font-weight: 400;
}
.account-form .button {
    width: 100%;
    justify-content: space-between;
    margin-top: 0.3rem;
}
/* "Sign in with Google": an "or" divider, then Google's light button style. */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin: 0;
    color: #646e64;
    font-size: 0.68rem;
}
.auth-divider::before,
.auth-divider::after {
    flex: 1;
    height: 1px;
    content: '';
    background: #cbd3cb;
}
.account-form .button-google {
    justify-content: center;
    gap: 0.75rem;
    margin-top: 0;
    border: 1px solid #747775;
    background: #fff;
    color: #1f1f1f;
}
.account-form .button-google:hover {
    background: #f2f4f2;
}
.button-google svg {
    width: 1.125rem;
    height: 1.125rem;
    flex: none;
}
.account-switch {
    margin: 1.6rem 0 0;
    color: #636f63;
    font-size: 0.78rem;
}
.account-switch a,
.dashboard-empty a {
    color: var(--green);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.account-type-options {
    display: grid;
    gap: 0.55rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
.account-type-options legend {
    margin-bottom: 0.55rem;
    color: #3c463c;
    font-size: 0.75rem;
    font-weight: 600;
}
.account-type-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 4rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid #cbd3cb;
    border-radius: 0.35rem;
    background: #ffffff;
    cursor: pointer;
}
.account-type-option:has(input:checked) {
    border-color: #4f9f73;
    background: #e8f3ed;
    box-shadow: 0 0 0 2px #58886c18;
}
.account-type-option input[type='radio'] {
    width: 1rem;
    height: 1rem;
    min-height: 1rem;
    margin: 0;
    accent-color: var(--green);
    flex: none;
}
.account-type-option > span {
    display: grid;
    gap: 0.2rem;
}
.account-type-option strong {
    color: var(--green);
    font-size: 0.75rem;
}
.account-type-option small {
    color: var(--muted);
    font-size: 0.65rem;
    font-weight: 400;
}
.form-errors,
.form-notice {
    margin: 1rem 0;
    padding: 0.8rem 1rem;
    border: 1px solid #bc8e71;
    background: #fff7ef;
    color: #71432b;
    font-size: 0.76rem;
}
.form-errors p {
    margin: 0.15rem 0;
}
.form-notice {
    border-color: #b2bdb2;
    background: #e8f2ec;
    color: #23784a;
}
.dashboard-page {
    min-height: 60vh;
    padding-block: clamp(2rem, 5vw, 4.5rem);
}
.dashboard-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 2rem;
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #c8d0c8;
}
.dashboard-heading h1 {
    margin: 0.5rem 0;
    color: var(--green);
    font: 400 clamp(2rem, 4vw, 3.5rem)/1.05 var(--serif);
    letter-spacing: -0.035em;
}
.dashboard-heading h1 em {
    font-weight: 400;
}
.dashboard-heading p:not(.eyebrow) {
    margin: 0.6rem 0 0;
    color: #636f63;
    font-size: 0.8rem;
}
.dashboard-section {
    margin: 2.4rem 0;
}
.dashboard-section-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.dashboard-section-title h2 {
    margin: 0;
    color: var(--green);
    font: 400 clamp(1.4rem, 2.5vw, 2rem) var(--serif);
}
.dashboard-section-title > span {
    color: #646e64;
    font-size: 0.72rem;
}
.dashboard-empty {
    padding: 2rem;
    border: 1px solid #cfd7cf;
    background: #eef0ee;
}
.dashboard-empty h3 {
    margin: 0 0 0.4rem;
    color: var(--green);
    font: 400 1.35rem var(--serif);
}
.dashboard-empty p {
    color: #636f63;
    font-size: 0.8rem;
}
.dashboard-empty.compact {
    padding: 1rem 1.2rem;
}
.dashboard-empty.compact p {
    margin: 0;
}
.manage-listings {
    display: grid;
    gap: 0.7rem;
}
.manage-listing,
.booking-row {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr) auto;
    gap: 1.1rem;
    align-items: center;
    padding: 0.75rem;
    border: 1px solid #d5dbd5;
    background: #ffffff;
}
.manage-listing > img,
.booking-row > img {
    width: 8rem;
    aspect-ratio: 1.35;
    object-fit: cover;
    background: #ddd;
}
.manage-listing h3,
.booking-row h3 {
    margin: 0.3rem 0;
    color: #2b4536;
    font: 400 1.25rem var(--serif);
}
.manage-listing p:not(.eyebrow),
.booking-row p:not(.eyebrow) {
    margin: 0.25rem 0;
    color: #6e796e;
    font-size: 0.75rem;
}
.manage-listing .eyebrow,
.booking-row .eyebrow {
    margin: 0;
    color: #677967;
    font-size: 0.58rem;
    letter-spacing: 0.11em;
}
.manage-actions {
    display: flex;
    gap: 0.8rem;
    align-items: center;
}
.manage-actions a,
.manage-actions button,
.admin-table button {
    color: var(--green);
    font-size: 0.72rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.manage-actions form {
    margin: 0;
}
.booking-row {
    grid-template-columns: 8rem minmax(0, 1fr) auto;
}
.booking-row small {
    color: #667866;
    font-size: 0.7rem;
}
.booking-row > a {
    color: var(--green);
    font-size: 0.72rem;
    white-space: nowrap;
}
.table-scroll {
    overflow: auto;
    border: 1px solid #d5dbd5;
}
.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    text-align: left;
    font-size: 0.75rem;
}
.admin-table th,
.admin-table td {
    padding: 0.8rem 0.9rem;
    border-bottom: 1px solid #dadfda;
    white-space: nowrap;
}
.admin-table th {
    color: #647564;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.admin-table td strong,
.admin-table td small {
    display: block;
}
.admin-table td small {
    margin-top: 0.25rem;
    color: #778377;
    font-size: 0.65rem;
}
.admin-table form {
    margin: 0;
}
.owner-create-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 0.8rem;
    align-items: end;
    margin-bottom: 1.2rem;
    padding: 1rem;
    border: 1px solid #cfd7cf;
    background: #eef0ee;
}
.owner-create-form .button {
    min-height: 3rem;
    white-space: nowrap;
}
.listing-form {
    padding: clamp(1rem, 3vw, 2rem);
    border: 1px solid #cfd7cf;
    background: #ffffff;
}
.listing-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem;
}
.listing-form .wide-field {
    grid-column: 1/-1;
}
.listing-form textarea {
    resize: vertical;
}
.listing-amenities {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem 1.2rem;
    border: 0;
    padding: 0;
}
.listing-amenities legend {
    margin-bottom: 0.55rem;
    color: #3c463c;
    font-size: 0.75rem;
    font-weight: 600;
}
.listing-amenities label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 400;
}
.listing-amenities input {
    accent-color: var(--green);
}
.listing-form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.4rem;
    padding-top: 1rem;
    border-top: 1px solid #d5dbd5;
}
.listing-form-actions > a {
    color: #657665;
    font-size: 0.75rem;
}
@media (max-width: 50rem) {
    .account-page {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        min-height: unset;
    }
    .account-art {
        min-height: clamp(16rem, 60vw, 25rem);
    }
    .account-panel {
        width: 100%;
        padding: 1rem 0;
    }
    .dashboard-heading {
        align-items: start;
        flex-direction: column;
    }
    .manage-listing,
    .booking-row {
        grid-template-columns: 5rem minmax(0, 1fr);
        gap: 0.75rem;
    }
    .manage-listing > img,
    .booking-row > img {
        width: 5rem;
        grid-row: span 2;
    }
    .manage-actions,
    .booking-row > a {
        grid-column: 2;
    }
    .owner-create-form {
        grid-template-columns: 1fr;
    }
    .listing-form-grid {
        grid-template-columns: 1fr;
    }
    .listing-form .wide-field {
        grid-column: auto;
    }
}

/* Shorter editorial homepage with a visual discovery block. */
.escape-bento {
    margin-top: clamp(3.5rem, 7vw, 6.5rem);
    margin-bottom: clamp(3.75rem, 7vw, 6rem);
}
.escape-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 2rem;
    margin-bottom: 1.5rem;
}
.escape-heading h2 {
    margin: 0;
    color: var(--green);
    font: 400 clamp(2.1rem, 4vw, 3.5rem)/1.04 var(--serif);
    letter-spacing: -.045em;
}
.escape-heading h2 em { font-weight: 400; }
.escape-heading > p {
    max-width: 18rem;
    margin: 0 1rem .25rem 0;
    color: var(--muted);
    font-size: .8rem;
    line-height: 1.7;
}
.bento-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(12rem, 17vw));
    gap: .8rem;
}
.bento-tile, .bento-note {
    min-width: 0;
    position: relative;
    overflow: hidden;
    border-radius: .45rem;
}
.bento-tile { color: white; isolation: isolate; }
.bento-tile-1 { grid-column: span 2; grid-row: span 2; }
.bento-tile-2, .bento-tile-3 { grid-column: span 1; }
.bento-tile img, .bento-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.bento-tile img { object-fit: cover; transition: transform .65s cubic-bezier(.2,.7,.2,1); }
.bento-tile:hover img { transform: scale(1.045); }
.bento-shade { z-index: 0; background: linear-gradient(180deg, #172e281f 5%, transparent 38%, #172e28c9 100%); }
.bento-index { position: absolute; z-index: 1; top: 1rem; left: 1.1rem; font-size: .57rem; letter-spacing: .12em; }
.bento-index i { margin: 0 .35rem; font-style: normal; color: #e3d342; }
.bento-copy { position: absolute; z-index: 1; inset: auto 1.15rem 1.1rem; display: grid; gap: .35rem; }
.bento-copy small { font-size: .65rem; letter-spacing: .05em; opacity: .85; }
.bento-copy strong { font: 400 clamp(1.3rem, 2.2vw, 2rem)/1.1 var(--serif); }
.bento-copy > span { display: flex; gap: .4rem; align-items: center; font-size: .63rem; margin-top: .25rem; }
.bento-copy .icon { width: .85rem; height: .85rem; }
.bento-note { grid-column: span 2; padding: clamp(1.2rem, 2.3vw, 2rem); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; background: #dde9e2; color: var(--green-strong); }
.bento-note-mark { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border: 1px solid #52605255; border-radius: 50%; margin-bottom: .65rem; }
.bento-note-mark .icon { width: 1rem; height: 1rem; }
.bento-note > .eyebrow { margin: 0 0 .6rem; font-size: .53rem; }
.bento-note .eyebrow,
.district-map-note .eyebrow { color: var(--green-strong); }
.bento-note > strong { position: relative; z-index: 1; font: 400 clamp(1.45rem, 2.5vw, 2.35rem)/1.02 var(--serif); letter-spacing: -.035em; }
.bento-note > strong em { font-weight: 400; }
.bento-note-link { position: relative; z-index: 1; display: flex; align-items: center; gap: .5rem; margin-top: .85rem; padding-bottom: .25rem; border-bottom: 1px solid #52605266; font-size: .65rem; }
.bento-note-link .icon { width: .9rem; height: .9rem; }
.bento-note-orbit { position: absolute; width: 14rem; height: 14rem; border: 1px solid #52605222; border-radius: 50%; right: -4rem; bottom: -8rem; }
.bento-note-orbit::before, .bento-note-orbit::after { content: ''; position: absolute; border: 1px solid #52605220; border-radius: 50%; inset: 1rem; }
.bento-note-orbit::after { inset: 2rem; }
.collection-interlude-2 .bento-grid { grid-template-rows: minmax(11rem, 13rem); }
.collection-interlude-2 .bento-tile-1 { grid-column: span 3; }
.collection-interlude-2 .bento-tile-2 { grid-column: span 4; }
.collection-interlude-2 .bento-tile-3 { grid-column: span 3; }
.collection-interlude-2 .bento-note { background: var(--green); color: var(--paper); }
.collection-interlude-2 .bento-note .eyebrow { color: inherit; }
.collection-interlude-2 .bento-note-mark { border-color: #ffffff55; }
.collection-interlude-2 .bento-note-link { border-color: #ffffff66; }
.collection-interlude-2 .bento-note-orbit,
.collection-interlude-2 .bento-note-orbit::before,
.collection-interlude-2 .bento-note-orbit::after { border-color: #ffffff22; }
.collection-interlude-3 .bento-grid { grid-template-rows: minmax(12rem, 14rem); }
.collection-interlude-3 .bento-tile-1 { grid-column: span 3; }
.collection-interlude-3 .bento-tile-2 { grid-column: span 3; }
.collection-interlude-3 .bento-tile-3 { grid-column: span 4; }
.collection-interlude-3 .bento-note { background: #e9e1a8; }
.collection { margin-bottom: clamp(3.75rem, 7vw, 6rem); }
.collection .section-heading { margin-bottom: 1rem; }
.collection .stay-grid { row-gap: 1.8rem; }
.philosophy { margin-bottom: 2rem; }
.journal { padding-top: 2.5rem; padding-bottom: 2.5rem; }
@media (max-width: 760px) {
    .escape-heading { align-items: flex-start; flex-direction: column; gap: .7rem; }
    .escape-heading > p { margin: 0; }
    .bento-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 18rem 12rem 12rem; gap: .55rem; }
    .bento-tile-1 { grid-column: span 2; grid-row: span 1; }
    .bento-tile-2, .bento-tile-3 { grid-column: span 1; }
    .bento-note { grid-column: span 2; padding: 1rem 1.25rem; }
    .bento-note-mark { width: 1.8rem; height: 1.8rem; margin-bottom: .35rem; }
    .bento-note > strong { font-size: 1.6rem; }
    .bento-note-link { margin-top: .5rem; }
}

.province-section { margin-top: clamp(2.75rem, 5vw, 4.5rem); }
.province-section[hidden] { display: none; }
.province-section .stay-grid[hidden],
.province-section .district-bento-grid[hidden] { display: none; }
.province-heading { display: flex; justify-content: space-between; align-items: end; gap: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); margin-bottom: 1.1rem; }
.province-heading .eyebrow { margin: 0 0 .3rem; font-size: .55rem; }
.province-heading h3 { margin: 0; color: var(--green); font: 400 clamp(1.75rem, 3vw, 2.6rem)/1.08 var(--serif); }
.district-list { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; }
.district-list > span { display: inline-flex; align-items: center; gap: .45rem; padding: .42rem .6rem; border: 1px solid var(--line); border-radius: 99px; color: #586858; font-size: .57rem; }
.district-list small { display: grid; place-items: center; min-width: 1.1rem; height: 1.1rem; border-radius: 99px; background: #dde9e2; color: var(--green-strong); font-size: .5rem; }
.province-section .stay-grid + .district-bento-grid,
.province-section .district-bento-grid + .stay-grid { margin-top: 1.25rem; }
.district-bento-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; margin-top: 1.2rem; }
.district-bento-grid .stay-card { min-width: 0; padding: .55rem .55rem .85rem; border-radius: .45rem; background: var(--paper); box-shadow: 0 10px 28px #2233290a; }
.district-bento-grid .card-image { aspect-ratio: 1.5; border-radius: .28rem; }
.district-bento-grid[data-count="1"] .stay-card { grid-column: span 8; }
.district-bento-grid[data-count="2"] .stay-card { grid-column: span 4; }
.district-bento-grid[data-count="3"] .stay-card { grid-column: span 3; }
.district-bento-grid[data-count="4"] .stay-card { grid-column: span 3; }
.district-map-note { position: relative; display: flex; flex-direction: column; justify-content: center; overflow: hidden; min-height: 12rem; padding: 1.5rem; border-radius: .45rem; background: #dde9e2; color: var(--green-strong); }
.district-bento-grid[data-count="1"] .district-map-note { grid-column: span 4; }
.district-bento-grid[data-count="2"] .district-map-note { grid-column: span 4; }
.district-bento-grid[data-count="3"] .district-map-note { grid-column: span 3; }
.district-map-note > .icon { width: 1.5rem; height: 1.5rem; margin-bottom: .8rem; }
.district-map-note .eyebrow { z-index: 1; margin: 0 0 .35rem; font-size: .5rem; }
.district-map-note strong { z-index: 1; font: 400 clamp(1.15rem, 2vw, 1.7rem)/1.1 var(--serif); }
.district-map-note > span { z-index: 1; display: flex; align-items: center; gap: .4rem; margin-top: .8rem; font-size: .6rem; }
.district-map-note > span .icon { width: .8rem; height: .8rem; }
.card-area-label { display: block; margin-top: .25rem; color: #626f62; font-size: .53rem; letter-spacing: .025em; }
@media (max-width: 760px) {
    .province-heading { align-items: flex-start; flex-direction: column; }
    .district-list { justify-content: flex-start; }
    .district-bento-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
    .district-bento-grid .stay-card,
    .district-bento-grid[data-count="1"] .stay-card,
    .district-bento-grid[data-count="2"] .stay-card,
    .district-bento-grid[data-count="3"] .stay-card,
    .district-bento-grid[data-count="4"] .stay-card { grid-column: span 1; padding: .4rem .4rem .7rem; }
    .district-bento-grid[data-count="1"] .stay-card,
    .district-bento-grid[data-count="3"] .stay-card:first-child { grid-column: span 2; }
    .district-bento-grid[data-count="1"] .district-map-note,
    .district-bento-grid[data-count="2"] .district-map-note,
    .district-bento-grid[data-count="3"] .district-map-note { grid-column: span 2; }
    .district-bento-grid .card-image { aspect-ratio: 1.4; }
}

/* Keep the familiar home grid, with a smaller card rhythm and an editorial pause midway. */
@media (min-width: 75rem) {
    .collection .stay-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 1rem; row-gap: 1.65rem; }
    .collection .card-image { aspect-ratio: 1.28; }
    .collection .card-title { font-size: clamp(1.05rem, 1.05vw, 1.3rem); margin: .4rem 0 .55rem; }
    .collection .card-location, .collection .amenities { font-size: .57rem; }
    .collection .card-price { font-size: .82rem; }
    .collection .card-price small { font-size: .5rem; }
    .collection .card-bottom { flex-wrap: wrap; align-items: baseline; gap: .25rem .5rem; padding-top: .55rem; }
}
.escape-bento {
    margin: 3.5rem 0;
    padding: 1.6rem 0 1.8rem;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.escape-heading { margin-bottom: 1rem; }
.escape-heading h2 { font-size: clamp(1.65rem, 2.7vw, 2.5rem); }
.escape-heading > p { font-size: .72rem; }
.bento-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: minmax(12rem, 15rem);
    gap: .65rem;
}
.bento-tile-1 { grid-column: span 4; grid-row: auto; }
.bento-tile-2 { grid-column: span 3; }
.bento-tile-3 { grid-column: span 3; }
.bento-note { grid-column: span 2; padding: 1rem; }
.bento-note-mark { width: 1.7rem; height: 1.7rem; margin-bottom: .45rem; }
.bento-note > .eyebrow { font-size: .45rem; margin-bottom: .4rem; }
.bento-note > strong { font-size: clamp(1rem, 1.4vw, 1.4rem); }
.bento-note-link { margin-top: .55rem; font-size: .55rem; }
@media (max-width: 760px) {
    .escape-bento { margin: 2.5rem 0; padding: 1.2rem 0; }
    .bento-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 16rem 11rem 11rem; gap: .55rem; }
    .bento-tile-1 { grid-column: span 2; grid-row: span 1; }
    .bento-tile-2, .bento-tile-3 { grid-column: span 1; }
    .bento-note { grid-column: span 2; padding: .9rem 1.2rem; }
    .collection-interlude-2 .bento-tile-1,
    .collection-interlude-3 .bento-tile-1 { grid-column: span 2; }
    .collection-interlude-2 .bento-tile-2,
    .collection-interlude-2 .bento-tile-3,
    .collection-interlude-3 .bento-tile-2,
    .collection-interlude-3 .bento-tile-3 { grid-column: span 1; }
}

/* Small province leftovers should read as a compact feature, not a full-width listing. */
.district-bento-grid { align-items: stretch; }
.district-bento-grid .card-image { height: clamp(11rem, 14vw, 15rem); aspect-ratio: auto; }
.district-bento-grid .card-image img { width: 100%; height: 100%; object-fit: cover; }
.district-bento-grid .card-title { font-size: clamp(1rem, 1.35vw, 1.3rem); }
.district-bento-grid[data-count="1"] .stay-card { grid-column: span 6; }
.district-bento-grid[data-count="1"] .district-map-note { grid-column: span 6; }
.district-bento-grid[data-count="2"] .stay-card { grid-column: span 4; }
.district-bento-grid[data-count="3"] .stay-card,
.district-bento-grid[data-count="4"] .stay-card { grid-column: span 3; }
.district-bento-grid .district-map-note { min-height: 0; padding: clamp(1rem, 2.2vw, 2rem); }
@media (max-width: 760px) {
    .district-bento-grid .card-image { height: 9.5rem; }
    .district-bento-grid .card-title { font-size: 1rem; }
    .district-bento-grid .district-map-note { min-height: 9rem; }
    .district-bento-grid[data-count="1"] .stay-card,
    .district-bento-grid[data-count="1"] .district-map-note { grid-column: span 2; }
    .district-bento-grid[data-count="2"] .stay-card,
    .district-bento-grid[data-count="3"] .stay-card,
    .district-bento-grid[data-count="4"] .stay-card { grid-column: span 1; }
    .district-bento-grid[data-count="2"] .district-map-note,
    .district-bento-grid[data-count="3"] .district-map-note { grid-column: span 2; }
}

.rwanda-bento-edit { margin: clamp(3rem, 5vw, 4.5rem) 0; padding: clamp(1.4rem, 2.5vw, 2.2rem) 0; border-block: 1px solid var(--line); }
.rwanda-bento-edit .escape-heading { margin-bottom: 1rem; }
.rwanda-bento-edit .escape-heading h2 { font-size: clamp(1.8rem, 3.2vw, 2.8rem); }
.rwanda-bento-edit .bento-grid { grid-template-rows: clamp(13rem, 16vw, 15rem); }
.rwanda-bento-edit .bento-tile-1 { grid-column: span 4; }
.rwanda-bento-edit .bento-tile-2,
.rwanda-bento-edit .bento-tile-3 { grid-column: span 3; }
.rwanda-bento-edit .bento-note { grid-column: span 2; }
.rwanda-bento-edit .bento-copy strong { font-size: clamp(1.15rem, 1.6vw, 1.7rem); }
.rwanda-bento-edit .bento-note > strong { font-size: clamp(1rem, 1.4vw, 1.35rem); }
@media (max-width: 760px) {
    .rwanda-bento-edit { margin: 2.5rem 0; padding: 1.25rem 0; }
    .rwanda-bento-edit .bento-grid { grid-template-rows: 13rem 9rem 9rem; }
    .rwanda-bento-edit .bento-tile-1,
    .rwanda-bento-edit .bento-note { grid-column: span 2; }
    .rwanda-bento-edit .bento-tile-2,
    .rwanda-bento-edit .bento-tile-3 { grid-column: span 1; }
}

/* First view: fit the hero, the search, and the first row of homes on one desktop screen. */
@media (min-width: 50.062rem) {
    body:has(.hero) .site-header { height: 3.75rem; }
    .hero { height: auto; min-height: 0; padding-top: 0.4rem; }
    .hero-image { flex: none; height: clamp(12rem, 30vh, 24rem); }
    .hero-image > img { object-position: center 55%; }
    .hero-copy { top: clamp(1.25rem, 2.4vw, 2.25rem); }
    .hero-copy h1 { font-size: clamp(2.4rem, 3.8vw, 3.9rem); }
    .hero-property { bottom: 2.35rem; }
    .search-bar { min-height: 3.5rem; margin-top: -1.75rem; padding-block: 0.4rem; }
    .search-field { height: 2.25rem; }
    .search-button { min-height: 2.5rem; padding-block: 0.7rem; }

    .collection { padding-top: 0.75rem; }
    .collection .section-heading { align-items: flex-end; gap: 1.5rem; margin-bottom: 0.5rem; }
    .collection .section-heading .eyebrow { margin-bottom: 0.2rem; }
    .collection .section-heading h2 { font-size: 1.5rem; }
    .collection .section-heading .collection-meta { flex-wrap: wrap; justify-content: flex-end; gap: 0.35rem 1.25rem; margin: 0 0 0.2rem; }
    .collection .collection-toolbar,
    .collection .categories { min-height: 2.5rem; height: 2.5rem; }

    .collection-toolbar + .province-section { margin-top: 0.6rem; }
    .province-heading { padding-bottom: 0.5rem; margin-bottom: 0.75rem; }
    .province-heading .eyebrow { display: none; }
    .province-heading h3 { font-size: clamp(1.25rem, 1.6vw, 1.7rem); }
}

/* First view on phones: the header, hero and search fill the top half of the screen; the homes start in the bottom half. */
@media (max-width: 35rem) {
    body:has(.hero) .site-header { height: 3.5rem; }
    body:has(.hero) .main-nav { top: 3.5rem; }
    .hero { height: calc(50vh - 3.5rem); height: calc(50svh - 3.5rem); min-height: 16.5rem; padding-top: 0.4rem; }
    .hero-copy { top: 1.1rem; }
    .hero-copy h1 { font-size: clamp(2rem, 9vw, 2.75rem); }
    .hero .hero-property { bottom: 1.75rem; }
    .hero .hero-dots { bottom: 3.75rem; }

    /* Search: "Where" on top; dates, guests and a square search button share the second row. */
    .search-bar { grid-template-columns: 1fr 1fr auto; row-gap: 0.375rem; margin-top: -1.25rem; padding: 0.5rem 0.625rem; }
    .search-field:first-child { height: 2.5rem; padding-bottom: 0.375rem; }
    .search-button { grid-column: auto; width: 2.5rem; min-height: 2.5rem; height: 2.5rem; margin: 0 0 0 0.375rem; padding: 0; gap: 0; font-size: 0; border-radius: 0.375rem; }
    .search-button .icon { width: 1.1rem; height: 1.1rem; }

    /* Homes: slimmer category bar, and the province name and its districts on one line. */
    .collection { padding-top: 0.75rem; }
    .collection .collection-toolbar,
    .collection .categories { min-height: 3rem; height: 3rem; }
    .collection-toolbar + .province-section { margin-top: 0.75rem; }
    .province-heading { flex-direction: row; align-items: center; gap: 0.75rem; padding-bottom: 0.5rem; margin-bottom: 0.75rem; }
    .province-heading > div:first-child { flex: none; }
    .province-heading .eyebrow { display: none; }
    .province-heading h3 { font-size: 1.35rem; white-space: nowrap; }
    .district-list { flex: 0 1 auto; flex-wrap: nowrap; min-width: 0; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
    .district-list::-webkit-scrollbar { display: none; }
    .district-list > span { flex: none; }
}

/* Header logo: sized by height so it sits in proportion with the nav, with even space above and below. */
.site-header .wordmark.brand-home {
    width: auto;
}
.site-header .brand-logo {
    width: auto;
    height: 1.8rem;
    max-height: none;
}
@media (max-width: 35rem) {
    .site-header .wordmark.brand-home {
        width: auto;
    }
    .site-header .brand-logo {
        height: 1.75rem;
    }
}

/* House cards: white rounded card, soft badges, bold name with rating, specs pill and price. */
.collection .stay-card {
    display: flex;
    flex-direction: column;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.collection .stay-card .card-image {
    border-radius: 0.65rem;
}
.stay-body {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.7rem 0 0;
}
.stay-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.stay-card .stay-name {
    display: block;
    min-width: 0;
    margin: 0;
    font: 700 0.85rem/1.25 var(--sans);
    letter-spacing: -0.01em;
    color: #1c211c;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.stay-card .stay-name:hover {
    color: var(--green);
}
.stay-rating {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    flex-shrink: 0;
    font-size: 0.66rem;
    font-weight: 600;
    color: #1c211c;
}
.stay-rating .icon {
    width: 0.8rem;
    height: 0.8rem;
    fill: #e0b43a;
    stroke: #e0b43a;
}
.stay-card .stay-place {
    display: block;
    margin: -0.2rem 0 0;
    font-size: 0.6rem;
    color: #636f63;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.stay-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem 0.5rem;
    margin-top: 0.35rem;
}
.stay-specs {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.35rem 0.65rem;
    border: 1px solid #d8ddd8;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 600;
    color: #374037;
}
.stay-specs > span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.stay-specs .icon {
    width: 0.85rem;
    height: 0.85rem;
    color: #4d5a4d;
}
.stay-price {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1c211c;
    white-space: nowrap;
}
.stay-price small {
    margin-left: 0.1rem;
    font-size: 0.6rem;
    font-weight: 500;
    color: #636f63;
}

/* Hero slideshow: featured homes crossfade with a slow zoom; dots sit beside the property link. */
.hero-slides {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 55%;
    opacity: 0;
    transition: opacity 1.2s ease;
}
.hero-slide.is-active {
    opacity: 1;
    animation: hero-slide-zoom 7s ease-out both;
}
@keyframes hero-slide-zoom {
    from {
        transform: scale(1.06);
    }
    to {
        transform: scale(1);
    }
}
.hero-dots {
    position: absolute;
    z-index: 2;
    right: clamp(1.25rem, 2.1vw, 2rem);
    bottom: 3.3rem;
    display: flex;
    gap: 0.1rem;
}
.hero-dots button {
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
}
.hero-dots button::before {
    content: '';
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 999px;
    background: #ffffff8c;
    transition:
        width 0.3s,
        background 0.3s;
}
.hero-dots button:hover::before {
    background: #ffffffd0;
}
.hero-dots button[aria-current='true']::before {
    width: 1.25rem;
    background: #ffffff;
}
.hero-dots button:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 0;
    border-radius: 0.25rem;
}
@media (min-width: 50.062rem) {
    .hero-dots {
        bottom: 2.6rem;
    }
}
@media (max-width: 50rem) {
    .hero-dots {
        right: 1rem;
        bottom: 3rem;
    }
}
/* Phones: the home's name spans the photo's width, so the dots sit just above it. */
@media (max-width: 35rem) {
    .hero-dots {
        bottom: 5.25rem;
    }
}
@media (prefers-reduced-motion: reduce) {
    .hero-slide {
        transition: none;
    }
    .hero-slide.is-active {
        animation: none;
    }
    .hero-dots button::before {
        transition: none;
    }
}

/* Login and register: the whole page fits one screen on desktop — no footer, photo and form sized to the viewport height. */
body:has(.login-page) .site-footer,
body:has(.register-page) .site-footer {
    display: none;
}
@media (min-width: 50.062rem) {
    .account-page.login-page,
    .account-page.register-page {
        box-sizing: border-box;
        height: calc(100vh - 4.875rem - 1px);
        height: calc(100dvh - 4.875rem - 1px);
        min-height: 28rem;
        padding-block: clamp(1rem, 3vh, 2rem);
        align-items: stretch;
    }
    .login-page .account-art,
    .register-page .account-art {
        min-height: 0;
        height: 100%;
    }
    .login-page .account-art > p,
    .register-page .account-art > p {
        font-size: clamp(1.8rem, min(4vw, 7vh), 3.6rem);
    }
    .login-page .account-panel,
    .register-page .account-panel {
        align-self: center;
    }
    .login-page .account-panel h1 {
        font-size: clamp(2.1rem, min(4.2vw, 7.5vh), 3.8rem);
    }
    .login-page .account-intro {
        margin-bottom: clamp(1rem, 3vh, 2rem);
    }
}

/* Login photo slideshow: same crossfade and slow zoom as the home hero. */
.account-art > img[data-slide] {
    opacity: 0;
    transition: opacity 1.2s ease;
}
.account-art > img[data-slide].is-active {
    opacity: 1;
    animation: hero-slide-zoom 7s ease-out both;
}
@media (prefers-reduced-motion: reduce) {
    .account-art > img[data-slide] {
        transition: none;
    }
    .account-art > img[data-slide].is-active {
        animation: none;
    }
}

/* Register: a compact two-column form whose spacing and field heights follow the viewport height, so everything fits one desktop screen. */
@media (min-width: 50.062rem) {
    .register-page .account-panel {
        width: min(100%, 34rem);
        padding-block: 0;
    }
    .register-page .account-panel h1 {
        margin: 0.35rem 0 0.6rem;
        font-size: clamp(2rem, min(3.4vw, 6vh), 3.4rem);
    }
    .register-page .account-intro {
        margin-bottom: clamp(0.75rem, 2vh, 1.25rem);
        font-size: 0.78rem;
        line-height: 1.55;
    }
    .register-page .account-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(0.5rem, 1.5vh, 0.9rem) 0.8rem;
    }
    .register-page .account-form > * {
        grid-column: 1 / -1;
    }
    .register-page .account-form > label:nth-of-type(1),
    .register-page .account-form > label:nth-of-type(2) {
        grid-column: auto;
    }
    .register-page .account-form > label {
        gap: clamp(0.3rem, 0.9vh, 0.5rem);
    }
    /* The password hint sits on the label's line, right-aligned, instead of a line of its own. */
    .register-page .account-form > label:has(.password-field) {
        grid-template-columns: auto 1fr;
        align-items: baseline;
    }
    .register-page .account-form > label:has(.password-field) .password-field {
        grid-area: 2 / 1 / 3 / -1;
    }
    .register-page .account-form > label:has(.password-field) small {
        grid-area: 1 / 2;
        justify-self: end;
    }
    .register-page .account-type-options legend {
        margin-bottom: clamp(0.35rem, 1vh, 0.55rem);
    }
    .register-page .account-type-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .register-page .account-type-option {
        min-height: 0;
        padding: clamp(0.4rem, 1.1vh, 0.6rem) 0.7rem;
    }
    .register-page .account-form input:not([type='radio']) {
        min-height: clamp(2.3rem, 5vh, 2.6rem);
        padding-block: clamp(0.45rem, 1.2vh, 0.6rem);
    }
    .register-page .account-form .button {
        min-height: clamp(2.5rem, 5.4vh, 2.8rem);
        padding-block: clamp(0.55rem, 1.4vh, 0.7rem);
    }
    .register-page .account-switch {
        margin-top: clamp(0.6rem, 2vh, 1.2rem);
    }
}

/* Login: spacing and field heights follow the viewport height, so the form and Google sign-in fit one desktop screen. */
@media (min-width: 50.062rem) {
    .login-page .account-panel h1 {
        margin-top: 0.35rem;
    }
    .login-page .account-form {
        gap: clamp(0.6rem, 1.8vh, 1.1rem);
    }
    .login-page .account-form > label {
        gap: clamp(0.3rem, 0.8vh, 0.5rem);
    }
    .login-page .account-form input {
        min-height: clamp(2.5rem, 5.5vh, 3rem);
        padding-block: clamp(0.5rem, 1.4vh, 0.8rem);
    }
    .login-page .account-form .button {
        min-height: clamp(2.6rem, 5.6vh, 3.0625rem);
        padding-block: clamp(0.6rem, 1.6vh, 1rem);
    }
    .login-page .account-switch {
        margin-top: clamp(0.75rem, 2.4vh, 1.6rem);
    }
}

/* Login and register never scroll on desktop: slimmer header, and on shorter screens the form tightens. */
@media (min-width: 50.062rem) {
    body:has(.account-page) .site-header {
        height: 3.75rem;
    }
    .account-page.login-page,
    .account-page.register-page {
        height: calc(100vh - 3.75rem - 1px);
        height: calc(100dvh - 3.75rem - 1px);
        min-height: 24rem;
    }
}
@media (min-width: 50.062rem) and (max-height: 820px) {
    .register-page .account-intro {
        display: none;
    }
    .register-page .account-panel h1 {
        margin-bottom: 0.9rem;
    }
}
@media (min-width: 50.062rem) and (max-height: 660px) {
    .account-page .account-panel > .eyebrow {
        display: none;
    }
    .register-page .account-panel h1,
    .login-page .account-panel h1 {
        font-size: clamp(1.7rem, 6vh, 2.5rem);
    }
    .register-page .account-panel h1 {
        margin-top: 0;
    }
}
@media (min-width: 50.062rem) and (max-height: 560px) {
    .login-page .account-intro {
        display: none;
    }
    /* Register: "Create my account" and "Sign up with Google" share one row. */
    .register-page .auth-divider {
        display: none;
    }
    .register-page .account-form > .button {
        grid-column: auto;
        margin-top: 0.3rem;
    }
}

/* Site footer: a dark green band with the brand, three link columns, and a bottom bar. */
.site-footer {
    display: block;
    margin-top: clamp(2.5rem, 5vw, 4.5rem);
    padding: 0;
    border-top: 0;
    background: var(--green-strong);
    color: #d6e5dc;
}
.footer-inner {
    padding: clamp(2.5rem, 5vw, 4rem) 0 1.5rem;
}
.footer-top {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr);
    gap: clamp(2rem, 6vw, 6rem);
    padding-bottom: clamp(2rem, 4vw, 3rem);
    border-bottom: 1px solid #ffffff26;
}
.footer-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.1rem;
}
.footer-logo img {
    display: block;
    width: auto;
    height: 2.3rem;
    filter: brightness(0) invert(1);
}
.site-footer .footer-brand p {
    max-width: 19rem;
    margin: 0;
    color: #d6e5dc;
    font: 400 clamp(1.15rem, 1.6vw, 1.45rem)/1.35 var(--serif);
}
.footer-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 0.4rem;
    padding: 0.75rem 1.1rem;
    border-radius: 999px;
    background: var(--yellow);
    color: #1a3023;
    font-size: 0.72rem;
    font-weight: 600;
    transition: transform 0.2s;
}
.footer-cta:hover {
    color: #1a3023;
    transform: translateY(-1px);
}
.footer-cta .icon {
    width: 1rem;
    height: 1rem;
}
.footer-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
}
.footer-links h2 {
    margin: 0 0 1rem;
    color: var(--yellow);
    font: 600 0.62rem/1 var(--sans);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.footer-links ul {
    display: grid;
    gap: 0.7rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.footer-links a,
.footer-links button {
    padding: 0;
    border: 0;
    background: none;
    color: #e8f1ec;
    font: 400 0.78rem/1.4 var(--sans);
    text-align: left;
    cursor: pointer;
}
.footer-links a:hover,
.footer-links button:hover {
    color: var(--yellow);
}
.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 2rem;
    padding-top: 1.4rem;
    color: #bdc7bd;
    font-size: 0.66rem;
}
.footer-bottom a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #e8f1ec;
}
.footer-bottom a:hover {
    color: var(--yellow);
}
.footer-bottom .icon {
    width: 0.85rem;
    height: 0.85rem;
    transform: rotate(-45deg);
}
.site-footer a:focus-visible,
.site-footer button:focus-visible {
    outline: 2px solid var(--yellow);
    outline-offset: 3px;
}
@media (max-width: 50rem) {
    .footer-top {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 35rem) {
    .footer-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.75rem 1rem;
    }
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}
@media (prefers-reduced-motion: reduce) {
    .footer-cta {
        transition: none;
    }
}

/* Test accounts (test-accounts.php): one centred column, one row per account, no photo. */
.account-page.test-accounts-page {
    grid-template-columns: minmax(0, 1fr);
}
.test-accounts-page .account-panel {
    width: min(100%, 38rem);
}
.test-accounts-page .account-intro code,
.test-accounts-note code {
    padding: 0.05rem 0.3rem;
    border-radius: 3px;
    background: #e2e7e2;
    color: var(--ink);
    font-size: 0.92em;
}
.test-accounts {
    display: grid;
    gap: 0.55rem;
}
.test-account {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.9rem;
    padding: 0.7rem 0.95rem;
    border: 1px solid var(--line);
    border-radius: 0.6rem;
    background: var(--paper);
}
.test-account-icon {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
}
.test-account-icon .icon {
    width: 1.1rem;
    height: 1.1rem;
}
.test-role-guest {
    background: #e4f2e9;
    color: var(--green-strong);
}
.test-role-owner_admin {
    background: #f6ecd0;
    color: #6b4f12;
}
.test-role-super_admin {
    background: #1f2a22;
    color: #fff;
}
.test-account-copy h2 {
    margin: 0 0 0.3rem;
    color: var(--ink);
    font: 650 0.85rem/1.3 var(--sans);
}
.test-account-copy h2 small {
    margin-left: 0.35rem;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 500;
}
.test-account-copy p {
    display: grid;
    grid-template-columns: 4.4rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.74rem;
    line-height: 1.7;
}
.test-account-copy p span {
    color: var(--muted);
}
.test-account-copy p b {
    overflow-wrap: anywhere;
    color: var(--ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.test-copy {
    padding: 0 0.15rem;
    color: var(--green);
    font-size: 0.68rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.test-account form {
    margin: 0;
}
.test-account .button {
    gap: 0.6rem;
    min-height: 2.6rem;
    padding: 0 1rem;
    white-space: nowrap;
}
.test-account .button .icon {
    width: 1rem;
    height: 1rem;
}
.test-accounts-note {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0.9rem 0 0;
    color: var(--muted);
    font-size: 0.7rem;
    line-height: 1.6;
}
.test-accounts-note .icon {
    width: 1rem;
    height: 1rem;
    margin-top: 0.1rem;
    color: var(--green);
}
@media (min-width: 50.062rem) {
    .test-accounts-page .account-intro {
        margin-bottom: clamp(0.75rem, 2.2vh, 1.5rem);
    }
    .test-accounts-page .account-panel h1 {
        margin: 0.3rem 0 0.5rem;
        font-size: clamp(2rem, min(3.6vw, 6.5vh), 3.4rem);
    }
}
@media (max-width: 30rem) {
    .test-account {
        grid-template-columns: auto minmax(0, 1fr);
    }
    .test-account form {
        grid-column: 1 / -1;
    }
    .test-account .button {
        width: 100%;
        justify-content: center;
    }
}

/* Receipt check (verify.php): the page a receipt's QR code opens. */
.verify-page {
    display: grid;
    place-items: center;
    padding-block: clamp(2rem, 6vw, 4.5rem);
}
.verify-card {
    width: min(100%, 34rem);
    padding: clamp(1.6rem, 4vw, 2.6rem);
    border-radius: 1.4rem;
    background: var(--paper);
    box-shadow: 0 1.5rem 3rem -1.8rem rgb(20 40 28 / 35%);
    text-align: center;
}
.verify-icon {
    display: inline-grid;
    place-items: center;
    width: 4.2rem;
    height: 4.2rem;
    margin-bottom: 1rem;
    border-radius: 50%;
}
.verify-icon .icon {
    width: 2rem;
    height: 2rem;
}
.verify-valid .verify-icon {
    background: #e4f2e9;
    color: var(--green-strong);
}
.verify-warning .verify-icon {
    background: #fbefd2;
    color: #7a5208;
}
.verify-invalid .verify-icon {
    background: #fbe7e2;
    color: #a3361f;
}
.verify-card h1 {
    margin: 0.4rem 0 0.6rem;
    color: var(--ink);
    font: 400 clamp(1.8rem, 4vw, 2.4rem)/1.1 var(--serif);
    letter-spacing: -0.03em;
}
.verify-valid h1 {
    color: var(--green-strong);
}
.verify-intro {
    margin: 0 auto 1.4rem;
    max-width: 26rem;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.6;
}
.verify-details {
    margin: 0 0 1rem;
    border-top: 1px solid var(--line);
    text-align: left;
}
.verify-details > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--line);
}
.verify-details dt {
    color: var(--muted);
    font-size: 0.82rem;
}
.verify-details dd {
    margin: 0;
    color: var(--ink);
    font-size: 0.88rem;
    font-weight: 600;
    text-align: right;
}
.verify-details dd small {
    display: block;
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 400;
}
.verify-note {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0.45rem;
    margin: 0 0 1.4rem;
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.5;
}
.verify-note .icon {
    flex: none;
    width: 1rem;
    height: 1rem;
    color: var(--green);
}