/* ============================================================
         Settledy — Editorial Desktop Concept
         Kinfolk / Aesop inspired journal layout
         Ivory ground · Cormorant Garamond serif · hairline rules
         ============================================================ */

      :root {
        --ivory: #f7f4ee;
        --ivory-deep: #f1ede4;
        --ink: #1f1e1b;
        --ink-soft: rgba(31, 30, 27, 0.66);
        --ink-faint: rgba(31, 30, 27, 0.42);
        --hairline: rgba(31, 30, 27, 0.22);
        --hairline-strong: rgba(31, 30, 27, 0.85);
        --olive: #606b58;
        --gold: #c8a96d;
        --gold-deep: #8b6b2f;
        --footer-green: #293b2a;
        --paper-cream: #fffdf5;
        --home-section-title-size: clamp(2.3rem, 3.6vw, 3rem);
      }

      * {
        box-sizing: border-box;
      }

      html {
        scroll-behavior: smooth;
        background: var(--ivory);
      }

      body {
        margin: 0;
        background: var(--ivory);
        color: var(--ink);
        font-family: var(--font-sans);
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        font-size: 16px;
      }

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

      figure {
        margin: 0;
      }

      a {
        color: inherit;
      }

      /* ---- shared editorial primitives ---- */

      .page {
        max-width: 1560px;
        margin: 0 auto;
      }

      .desktop-hero-shell {
        position: relative;
        width: 100%;
        max-width: 1560px;
        margin-inline: auto;
        min-height: 0;
        /* Reserve the fixed navigation's height before the full hero. */
        padding-top: var(--sticky-nav-height, var(--site-navigation-height, 5.125rem));
        background: var(--ivory);
      }

      .desktop-hero-shell--navigation {
        z-index: 10;
        height: 0;
        min-height: 0;
        padding-top: 0;
        background: transparent;
      }

      .kicker {
        margin: 0;
        font-size: 0.6875rem;
        letter-spacing: 0.34em;
        text-transform: uppercase;
        color: var(--ink-soft);
      }

      .kicker--gold {
        color: var(--gold-deep);
      }

      /* Section headings */
      .section-head {
        margin-bottom: clamp(2.5rem, 4.5vw, 4rem);
      }

      .section-head__title {
        margin: 0;
        font-size: var(--home-section-title-size);
        font-weight: 400;
        line-height: 1.08;
        letter-spacing: -0.025em;
      }

      .section-head__subtitle {
        display: block;
        margin-top: 0.12em;
      }

      /* ---- masthead ---- */

      .masthead {
        position: absolute;
        z-index: 5;
        inset: 0 0 auto;
        padding: 0 clamp(2rem, 6vw, 7rem);
        background: transparent;
      }

      .masthead__bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: clamp(6.5rem, 9vw, 8rem);
      }

      /* Match Object's centered navigation even on wide desktop screens. */
      .responsive-version--desktop .desktop-hero-shell .masthead__bar {
        padding-right: calc(max(0px, (100vw - 1560px) / 2) + clamp(2rem, 6vw, 7rem));
        padding-left: calc(max(0px, (100vw - 1560px) / 2) + clamp(2rem, 6vw, 7rem));
      }

      .brand {
        width: 128px;
        flex: 0 0 auto;
      }

      .brand img {
        width: 100%;
        height: auto;
      }

      .masthead__nav {
        display: flex;
        gap: clamp(1.75rem, 3.5vw, 3.5rem);
      }

      .masthead__nav a {
        display: inline-flex;
        align-items: center;
        min-height: 2.75rem;
        font-size: 0.9375rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        text-decoration: none;
      }

      .masthead__nav a:hover {
        text-decoration: underline;
        text-underline-offset: 0.3em;
        text-decoration-thickness: 1px;
      }

      .masthead__nav a:last-child {
        padding: 0.8rem 1.5rem;
        border: 1px solid rgba(31, 30, 27, 0.52);
      }

      /* ---- hero: split copy panel · uncropped desktop image ---- */

      .hero {
        display: grid;
        grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
        min-height: 0;
      }

      .hero__copy {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 1.75rem;
        padding: clamp(2.5rem, 4.5vw, 5rem) clamp(2rem, 4vw, 5rem)
          clamp(2.5rem, 4.5vw, 5rem) clamp(2rem, 6vw, 7rem);
        background: var(--ivory);
      }

      .hero__kicker {
        margin: 0;
        color: var(--gold);
      }

      .hero__title {
        margin: 1.6rem 0 0;
        font-size: clamp(3rem, 4.55vw, 5.5rem);
        font-weight: 400;
        line-height: 1.04;
        letter-spacing: -0.025em;
      }

      .hero__lede {
        max-width: 35rem;
        margin: clamp(2.5rem, 3.5vw, 4rem) 0 0;
        font-size: clamp(1rem, 1.2vw, 1.25rem);
        line-height: 1.7;
        color: var(--ink-soft);
      }

      .hero__lower { max-width: 33rem; }

      /* Use Object's grouped copy rhythm, overriding the shared Home defaults. */
      .responsive-version--desktop .desktop-hero-shell .hero__kicker { margin: 0; }
      .responsive-version--desktop .desktop-hero-shell .hero__lede { margin: 0; }

      .hero__cta-row {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.75rem 1rem;
        margin-top: 2rem;
      }

      .responsive-version--desktop .desktop-hero-shell .hero__cta-row { margin-top: 2rem; }
      .hero__cta-row .cta { flex: 0 0 auto; min-height: 0; padding: 1.05rem 2.1rem; }

      .cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 4.4rem;
        padding: 1.15rem 2.5rem;
        border: 1px solid var(--footer-green);
        border-radius: 0;
        background: var(--footer-green);
        color: var(--paper-cream);
        font-family: inherit;
        font-size: 0.8125rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        text-decoration: none;
        cursor: pointer;
        transition: background-color 180ms ease, color 180ms ease;
      }

      .cta:hover,
      .cta:focus-visible {
        background: transparent;
        color: var(--footer-green);
      }

      .hero__launch-note {
        flex: 1 1 9rem;
        min-width: 0;
        font-size: 0.8125rem;
        line-height: 1.6;
        color: var(--ink-soft);
        letter-spacing: 0;
      }

      .hero__figure {
        position: relative;
        align-self: start;
        margin: 0;
        overflow: hidden;
        background: #9b9559;
      }

      .hero__figure img {
        display: block;
        width: 100%;
        height: auto;
      }

      @media (min-width: 960px) and (max-width: 1180px) {
        .masthead {
          padding: 0 2.5rem;
        }

        .masthead__nav {
          gap: 1.5rem;
        }

        .hero__title {
          font-size: clamp(3rem, 5vw, 3.7rem);
        }

        .hero__lede {
          line-height: 1.55;
        }

      }

      /* ---- generic editorial section rhythm ---- */

      .section {
        padding: clamp(4.5rem, 8vw, 8rem) 0 clamp(4rem, 7vw, 7rem);
      }

      /* Share the content edges established by the Starting section. */
      .home-section-shell {
        width: 100%;
        max-width: 1380px;
        margin-right: auto;
        margin-left: auto;
        padding-right: 5rem;
        padding-left: 5rem;
      }

      /* ---- 01 · one flip starts it all ---- */

      .section.flip-guide {
        padding-top: clamp(2.5rem, 4vw, 4rem);
        padding-bottom: clamp(5rem, 8vw, 7.5rem);
      }

      .flip-guide__title {
        margin: 0;
        font-size: var(--home-section-title-size);
        font-weight: 400;
        line-height: 1.08;
        letter-spacing: -0.025em;
      }

      .flip-guide__grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(20rem, 25rem);
        gap: clamp(2rem, 4vw, 4rem);
        align-items: stretch;
        max-width: 60rem;
        margin: clamp(3.5rem, 5vw, 5rem) auto 0;
      }

      .flip-steps {
        display: grid;
        grid-template-rows: repeat(3, minmax(0, 1fr));
        gap: clamp(2.4rem, 4vw, 3.8rem);
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .flip-step {
        display: grid;
        grid-template-columns: 8.2rem minmax(0, 1fr);
        gap: 1rem;
        align-items: center;
      }

      .flip-step img {
        width: 6.35rem;
        height: 6.35rem;
        margin: 0 auto;
        transform: translateX(0.5rem);
      }

      .flip-step__copy {
        text-align: center;
      }

      .flip-step h3,
      .flip-step p {
        margin: 0;
        font-size: 1rem;
        line-height: 1.45;
      }

      .flip-step h3 {
        font-weight: 700;
      }

      .flip-step p {
        margin-top: 0.18rem;
      }

      .flip-guide__media {
        position: relative;
        width: 100%;
        aspect-ratio: 400 / 426;
        align-self: center;
        justify-self: end;
        overflow: hidden;
        background: #735236;
      }

      .flip-guide__media video {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
      }

      .film-toggle {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 5rem;
        height: 5rem;
        padding: 0;
        transform: translate(-50%, -50%);
        border: 1px solid rgba(255, 253, 245, 0.82);
        border-radius: 50%;
        background: rgba(34, 30, 31, 0.62);
        color: var(--paper-cream);
        cursor: pointer;
        backdrop-filter: blur(7px);
        transition:
          background-color 160ms ease,
          transform 160ms ease;
      }

      .film-toggle:hover {
        transform: translate(-50%, -50%) scale(1.04);
        background: rgba(34, 30, 31, 0.76);
      }

      .film-toggle:focus-visible {
        outline: 3px solid var(--gold);
        outline-offset: 4px;
      }

      .film-toggle::before,
      .film-toggle::after {
        position: absolute;
        top: 50%;
        left: 50%;
        content: "";
      }

      .film-toggle::before {
        width: 0;
        height: 0;
        transform: translate(-38%, -50%);
        border-top: 0.82rem solid transparent;
        border-bottom: 0.82rem solid transparent;
        border-left: 1.2rem solid var(--paper-cream);
      }

      .film-toggle::after {
        display: none;
      }

      .film-toggle[aria-pressed="true"]::before,
      .film-toggle[aria-pressed="true"]::after {
        display: block;
        width: 0.36rem;
        height: 1.65rem;
        transform: translate(-0.74rem, -50%);
        border: 0;
        background: var(--paper-cream);
      }

      .film-toggle[aria-pressed="true"]::after {
        transform: translate(0.38rem, -50%);
      }

      /* ---- starting shouldn't be this hard ---- */

      .starting-hard--desktop {
        padding: 9rem 0;
        background: #f4efe6;
      }

      .starting-hard--desktop .starting-hard__inner {
        display: grid;
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        gap: 7rem;
        align-items: center;
      }

      .starting-hard--desktop .starting-hard__copy,
      .starting-hard--desktop .starting-hard__gallery {
        min-width: 0;
      }

      .starting-hard--desktop .starting-hard__copy h2 {
        margin: 0 0 1.75rem;
        font-size: clamp(2.75rem, 4.5vw, 4.75rem);
        font-weight: 300;
        line-height: 1.05;
        letter-spacing: -0.025em;
      }

      .starting-hard--desktop .starting-hard__copy p {
        max-width: 46ch;
        margin: 0;
        color: var(--ink-soft);
        font-size: 0.97rem;
        font-weight: 300;
        line-height: 1.85;
      }

      .starting-hard--desktop .starting-hard__copy p + p {
        margin-top: 1rem;
      }

      .starting-hard__gallery {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.1rem;
        align-items: start;
      }

      .starting-hard__image-wrap {
        position: relative;
        width: 100%;
        min-width: 0;
        aspect-ratio: 3 / 4;
        overflow: hidden;
      }

      .starting-hard__image-wrap:first-child {
        margin-top: 2.5rem;
      }

      .starting-hard__image-wrap:last-child {
        margin-bottom: 2.5rem;
      }

      .starting-hard__image-wrap img {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: cover;
        object-position: center;
        transition: transform 700ms ease-out;
      }

      .starting-hard__image-wrap:hover img {
        transform: scale(1.03);
      }

      @media (min-width: 960px) and (max-width: 1024px) {
        .starting-hard--desktop .starting-hard__inner {
          gap: 4rem;
        }

        .home-section-shell {
          padding-right: 3rem;
          padding-left: 3rem;
        }
      }

      /* ---- 02 · three modes: alternating numbered spreads ---- */

      .mode-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: center;
        gap: clamp(2.5rem, 4vw, 4rem);
      }

      .mode-row + .mode-row {
        margin-top: clamp(4rem, 8vw, 8rem);
      }

      .mode-row__figure {
        position: relative;
        margin: 0;
      }

      .mode-row__figure img {
        width: 100%;
        height: auto;
        aspect-ratio: auto;
        object-fit: contain;
      }

      .mode-row--b {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      }

      .mode-row--b .mode-row__figure {
        order: 2;
      }

      .mode-row__copy {
        max-width: 30rem;
      }

      .mode-row--b .mode-row__copy {
        order: 1;
      }

      .mode-row__copy h3 {
        margin: 0;
        font-size: clamp(1.65rem, 2.25vw, 2.125rem);
        font-weight: 400;
        line-height: 1.12;
        letter-spacing: -0.015em;
      }

      .mode-row__copy p {
        margin: 1.1rem 0 0;
        font-size: 1rem;
        line-height: 1.62;
        color: var(--ink-soft);
      }

      .mode-row__listen {
        display: inline-flex;
        align-items: center;
        gap: 0.7rem;
        margin-top: 1.8rem;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--gold-deep);
        font-family: inherit;
        font-size: 0.8125rem;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        cursor: pointer;
      }

      /* ---- 03 · moments: staggered magazine gallery ---- */

      #desktop-moments {
        background: #f4efe6;
      }

      .moments-head {
        padding: 0;
      }

      .moments-head p {
        max-width: 36rem;
        margin: 1.4rem 0 0;
        font-size: 1rem;
        line-height: 1.62;
        color: var(--ink-soft);
      }

      .moments-gallery {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
        gap: clamp(1.8rem, 3.5vw, 4rem);
        align-items: start;
        padding: 0;
        margin-top: clamp(3rem, 6vw, 6rem);
      }

      .moments-gallery figure {
        position: relative;
      }

      /* staggered vertical offsets — magazine rhythm */
      .moments-gallery figure:nth-child(1) {
        margin-top: 0;
      }

      .moments-gallery figure:nth-child(2) {
        margin-top: clamp(3.5rem, 7vw, 7.5rem);
      }

      .moments-gallery figure:nth-child(3) {
        margin-top: clamp(1.5rem, 3vw, 3rem);
      }

      .moments-gallery img {
        width: 100%;
        height: auto;
        object-fit: cover;
      }

      .moments-gallery figure:nth-child(1) img {
        aspect-ratio: 2 / 3;
        object-position: center;
      }

      .moments-gallery figure:nth-child(2) img {
        aspect-ratio: 2 / 3;
        object-position: center;
      }

      .moments-gallery figure:nth-child(3) img {
        aspect-ratio: 2 / 3;
        object-position: center;
      }

      .moments-gallery figcaption {
        display: flex;
        align-items: baseline;
        gap: 0.9rem;
        margin-top: 1.1rem;
      }

      .moments-gallery figcaption .plate {
        font-size: 1rem;
        letter-spacing: 0.02em;
      }

      /* ---- spotlight full-bleed plate ---- */

      .spotlight {
        margin: 0;
        background: #090b08;
      }

      .spotlight img {
        width: 100%;
        height: auto;
        aspect-ratio: 2038 / 1022;
        object-fit: cover;
        object-position: center;
      }

      /* ---- 04 · waitlist ---- */

      .waitlist {
        padding: clamp(5rem, 9vw, 9rem) clamp(2rem, 6vw, 7rem);
        text-align: center;
      }

      .waitlist h2 {
        margin: 1.3rem 0 0;
        font-size: clamp(2.2rem, 3.6vw, 3.6rem);
        font-weight: 400;
        line-height: 1.1;
        letter-spacing: -0.02em;
      }

      .waitlist h2 em {
        font-style: italic;
        color: var(--olive);
      }

      .waitlist-form {
        display: flex;
        justify-content: center;
        align-items: stretch;
        gap: 0;
        max-width: 34rem;
        margin: 3rem auto 0;
        border-bottom: 1px solid var(--hairline-strong);
      }

      .waitlist-form input {
        flex: 1;
        min-height: 3.4rem;
        padding: 0 0.5rem;
        border: 0;
        background: transparent;
        color: var(--ink);
        font-family: inherit;
        font-size: 1.05rem;
        font-style: italic;
        text-align: left;
      }

      .waitlist-form input::placeholder {
        color: var(--ink-faint);
      }

      .waitlist-form input:focus {
        outline: none;
      }

      .waitlist-form button {
        padding: 0 1.4rem;
        border: 0;
        background: transparent;
        color: var(--gold-deep);
        font-family: inherit;
        font-size: 0.8125rem;
        letter-spacing: 0.24em;
        text-transform: uppercase;
        cursor: pointer;
      }

      .waitlist-form button:hover {
        text-decoration: underline;
        text-underline-offset: 0.3em;
      }

      /* ---- colophon / footer ---- */

      .colophon {
        background: #2c3828;
        color: rgba(238, 237, 216, 0.62);
        padding: clamp(3.5rem, 6vw, 6rem) clamp(2rem, 6vw, 7rem) 4rem;
      }

      .colophon__top {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 2rem;
        padding-bottom: 2rem;
        border-bottom: 1px solid rgba(239, 238, 215, 0.14);
      }

      .colophon__brand {
        margin: 0;
        color: rgba(255, 253, 237, 0.82);
        font-size: 1.4rem;
        letter-spacing: 0.05em;
      }

      .colophon__tag {
        margin: 0;
        font-size: 0.8125rem;
        font-style: italic;
      }

      .colophon__grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2.5rem 3.5rem;
        padding-top: 2.2rem;
      }

      .colophon h3 {
        margin: 0 0 1rem;
        color: var(--gold);
        font-size: 0.6875rem;
        font-weight: 400;
        letter-spacing: 0.3em;
        text-transform: uppercase;
      }

      .colophon p {
        margin: 0;
        font-size: 0.8125rem;
        line-height: 1.7;
      }

      .colophon a {
        color: inherit;
      }