:root {
      --black: #050505;
      --black-soft: #0d0d0d;
      --graphite: #171717;
      --line: #2b2b2b;
      --white: #ffffff;
      --paper: #e8e6e1;
      --mist: #aaa9a4;
      --muted: #7d7d79;
      --accent: #c8a25a;
      --page-gutter: clamp(20px, 4.8vw, 82px);
      --section-space: clamp(88px, 11vw, 176px);
      --grid-gap: clamp(16px, 2vw, 32px);
      --content-max: 1600px;
      --ease: cubic-bezier(.22,.61,.36,1);
      --header-height: 88px;
    }

    * { box-sizing: border-box; }

    html {
      /* scroll-behavior: smooth; */
      background: var(--black);
    }

    body {
      margin: 0;
      overflow-x: hidden;
      background: var(--black);
      color: var(--white);
      font-family: Helvetica, Arial, sans-serif;
      font-weight: 400;
      line-height: 1.55;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    body.menu-open { overflow: hidden; }

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

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

    button, input {
      font: inherit;
    }

    button { color: inherit; }

    ::selection {
      color: var(--black);
      background: var(--accent);
    }

    .skip-link {
      position: fixed;
      top: 12px;
      left: 12px;
      z-index: 9999;
      padding: 12px 16px;
      background: var(--white);
      color: var(--black);
      transform: translateY(-180%);
      transition: transform .2s ease;
    }

    .skip-link:focus { transform: translateY(0); }

    .site-shell {
      width: min(100%, var(--content-max));
      margin-inline: auto;
      padding-inline: var(--page-gutter);
    }

    .section {
      position: relative;
      padding-block: var(--section-space);
      border-top: 1px solid var(--line);
    }

    .section:first-of-type { border-top: 0; }

    .aivelle-grid {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: var(--grid-gap);
    }

    .span-12 { grid-column: span 12; }
    .span-9 { grid-column: span 9; }
    .span-8 { grid-column: span 8; }
    .span-7 { grid-column: span 7; }
    .span-6 { grid-column: span 6; }
    .span-5 { grid-column: span 5; }
    .span-4 { grid-column: span 4; }
    .span-3 { grid-column: span 3; }

    .eyebrow,
    .meta,
    .section-index,
    .nav-link,
    .button-label {
      text-transform: uppercase;
      letter-spacing: .18em;
      font-size: 11px;
      line-height: 1.4;
    }

    .eyebrow {
      color: var(--accent);
      margin: 0 0 22px;
    }

    .section-heading {
      max-width: 820px;
      margin: 0;
      font-size: clamp(38px, 5.5vw, 88px);
      font-weight: 400;
      letter-spacing: -.045em;
      line-height: .98;
    }

    .section-intro {
      max-width: 590px;
      margin: 26px 0 0;
      color: var(--mist);
      font-size: clamp(17px, 1.45vw, 22px);
      line-height: 1.55;
    }

    .editorial-title {
      margin: 0;
      font-size: clamp(32px, 4.1vw, 66px);
      font-weight: 400;
      letter-spacing: -.035em;
      line-height: 1.03;
    }

    .card-title {
      margin: 16px 0 7px;
      font-size: clamp(21px, 2vw, 32px);
      font-weight: 400;
      line-height: 1.12;
      letter-spacing: -.025em;
    }

    .body-copy {
      color: var(--mist);
      font-size: 16px;
    }

    .meta {
      color: var(--muted);
    }

    .accent-line {
      width: 38px;
      height: 1px;
      margin-block: 22px;
      background: var(--accent);
    }

    /* Header */
    .site-header {
      position: fixed;
      inset: 0 0 auto 0;
      z-index: 1000;
      height: var(--header-height);
      border-bottom: 1px solid transparent;
      transition:
        background-color .45s var(--ease),
        border-color .45s var(--ease),
        transform .45s var(--ease);
    }

    .site-header.is-scrolled {
      background: rgba(5,5,5,.91);
      border-bottom-color: var(--line);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }

    .site-header.is-hidden {
      transform: translateY(-100%);
    }

    .header-inner {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .masthead {
      display: inline-block;
      color: var(--white);
      font-size: 26px;
      font-weight: 400;
      letter-spacing: .40em;
      line-height: 1;
      transform: scaleY(.75);
      transform-origin: left center;
      white-space: nowrap;
    }

    .desktop-nav {
      display: flex;
      align-items: center;
      gap: clamp(22px, 2.2vw, 42px);
    }

    .nav-link {
      position: relative;
      color: var(--paper);
      transition: color .55s ease;
    }

    .nav-link::after {
      content: "";
      position: absolute;
      left: 0;
      right: 100%;
      bottom: -9px;
      height: 1px;
      background: var(--accent);
      transition: right .85s var(--ease);
    }

    .nav-link:hover,
    .nav-link:focus-visible { color: var(--accent); }
    .nav-link.is-active { color: var(--accent); }
      
    .nav-link:hover::after,
    .nav-link:focus-visible::after { right: 0; }
    .nav-link.is-active::after { right: 0; }

    .menu-button {
      display: none;
      width: 42px;
      height: 42px;
      padding: 0;
      border: 0;
      background: transparent;
      cursor: pointer;
    }

    .menu-button span {
      display: block;
      width: 24px;
      height: 1px;
      margin: 6px auto;
      background: var(--white);
      transition: transform .3s var(--ease), opacity .3s ease;
    }

    .menu-button[aria-expanded="true"] span:first-child {
      transform: translateY(3.5px) rotate(45deg);
    }

    .menu-button[aria-expanded="true"] span:last-child {
      transform: translateY(-3.5px) rotate(-45deg);
    }

    .mobile-menu {
      position: fixed;
      inset: var(--header-height) 0 0;
      z-index: 999;
      display: grid;
      place-items: center;
      visibility: hidden;
      opacity: 0;
      background: rgba(5,5,5,.98);
      transition: opacity .35s ease, visibility .35s ease;
    }

    .mobile-menu.is-open {
      visibility: visible;
      opacity: 1;
    }

    .mobile-menu nav {
      display: grid;
      gap: 26px;
      text-align: center;
    }

    .mobile-menu .nav-link {
      font-size: 17px;
    }

    /* =================================================
       Members Area — Desktop navigation
    ================================================= */

    .members-link {

        position:
            relative;

        display:
            inline-flex;

        align-items:
            center;

        justify-content:
            center;

        width:
            34px;

        height:
            34px;

        margin-left:
            2px;

        color:
            var(--white);

        text-decoration:
            none;

        cursor:
            pointer;

        transition:
            color .55s ease;

    }


    .members-link i {

        font-size:
            14px;

        line-height:
            1;

    }


    /*
     * The icon changes to the Aivelle accent colour,
     * but it does not receive the navigation underline.
     */

    .members-link:hover,
    .members-link:focus-visible {

        color:
            var(--accent);

        outline:
            none;

    }


    /* -------------------------------------------------
       Members Area hover popup
    -------------------------------------------------- */

    .members-popup {

        position:
            absolute;

        top:
            calc(100% + 14px);

        left:
            50%;

        z-index:
            30;

        padding:
            11px 16px;

        border:
            1px solid var(--accent);

        border-radius:
            10px;

        background:
            #0b0b0b;

        color:
            var(--accent);

        box-shadow:
            0 12px 30px
            rgba(
                0,
                0,
                0,
                .48
            );

        opacity:
            0;

        visibility:
            hidden;

        pointer-events:
            none;

        white-space:
            nowrap;

        transform:
            translateX(-50%)
            translateY(-7px);

        transition:
            opacity .4s ease,
            visibility .4s ease,
            transform .45s var(--ease);

        text-transform:
            uppercase;

        letter-spacing:
            .16em;

        font-size:
            9px;

        line-height:
            1.2;

    }


    .members-link:hover .members-popup,
    .members-link:focus-visible .members-popup {

        opacity:
            1;

        visibility:
            visible;

        transform:
            translateX(-50%)
            translateY(0);

    }


    /*
     * Small connecting point between the icon
     * and the popup box.
     */

    .members-popup::before {

        content:
            "";

        position:
            absolute;

        top:
            -5px;

        left:
            50%;

        width:
            8px;

        height:
            8px;

        border-top:
            1px solid var(--accent);

        border-left:
            1px solid var(--accent);

        background:
            #0b0b0b;

        transform:
            translateX(-50%)
            rotate(45deg);

    }


    /* =================================================
       Members Area — Mobile navigation
    ================================================= */

    .mobile-members-link {

        display:
            inline-flex;

        align-items:
            center;

        justify-content:
            center;

        gap:
            12px;

        color:
            var(--paper);

        text-decoration:
            none;

        text-transform:
            uppercase;

        letter-spacing:
            .18em;

        font-size:
            17px;

        transition:
            color .45s ease;

    }


    .mobile-members-link i {

        color:
            var(--accent);

        font-size:
            15px;

    }


    .mobile-members-link:hover,
    .mobile-members-link:focus-visible {

        color:
            var(--accent);

        outline:
            none;

    }

    /* Placeholder imagery */
    .media-frame {
      position: relative;
      overflow: hidden;
      background: var(--graphite);
    }

    .media-frame::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      border: 1px solid rgba(255,255,255,.08);
    }

    .ratio-landscape { aspect-ratio: 4 / 3; }
    .ratio-wide { aspect-ratio: 16 / 9; }
    .ratio-cinema { aspect-ratio: 21 / 10; }
    .ratio-portrait { aspect-ratio: 3 / 4; }
    .ratio-square { aspect-ratio: 1; }

    .placeholder-image {
      position: absolute;
      inset: 0;
      overflow: hidden;
      background:
        radial-gradient(circle at 68% 34%, rgba(200,162,90,.20), transparent 18%),
        linear-gradient(135deg, #3c3c3c 0%, #141414 54%, #070707 100%);
      transition: transform 1.1s var(--ease), filter .9s ease;
    }

    .placeholder-image::before,
    .placeholder-image::after {
      content: "";
      position: absolute;
      inset: 0;
    }

    .placeholder-image::before {
      opacity: .85;
      background:
        linear-gradient(154deg, transparent 0 38%, rgba(255,255,255,.07) 38.2% 38.7%, transparent 39%),
        linear-gradient(26deg, transparent 0 57%, rgba(200,162,90,.28) 57.2% 57.8%, transparent 58%),
        radial-gradient(ellipse at 25% 78%, rgba(255,255,255,.17), transparent 42%);
    }

    .placeholder-image::after {
      background: linear-gradient(to top, rgba(0,0,0,.58), transparent 48%);
    }

    .media-frame:hover .placeholder-image {
      transform: scale(1.035);
      filter: contrast(1.05);
    }

    .placeholder-label {
      position: absolute;
      left: 20px;
      bottom: 18px;
      z-index: 2;
      margin: 0;
      color: rgba(255,255,255,.64);
      text-transform: uppercase;
      letter-spacing: .17em;
      font-size: 10px;
    }

    /* Hero */
    .hero {
      min-height: 100svh;
      display: grid;
      align-items: end;
      padding-top: var(--header-height);
      overflow: hidden;
      border-bottom: 1px solid var(--line);
    }

    .hero-media {
      position: absolute;
      inset: 0;
    }

    .hero-media .placeholder-image,
    .hero-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      transform: scale(var(--hero-scale, 1.06));
      transform-origin: center center;
      will-change: transform;
    }

    .hero-shade {
      position: absolute;
      inset: 0;
      opacity: var(--hero-overlay-opacity, 1);
      background:
        linear-gradient(
          90deg,
          rgba(0,0,0,.82),
          rgba(0,0,0,.18) 68%,
          rgba(0,0,0,.32)
        ),
        linear-gradient(
          to top,
          rgba(0,0,0,.87),
          transparent 60%
        );
      will-change: opacity;
    }

    .hero-content {
      position: relative;
      z-index: 2;
      width: min(100%, var(--content-max));
      margin-inline: auto;
      padding: 0 var(--page-gutter) clamp(50px, 8vw, 110px);
    }

    .hero-copy {
      max-width: 1050px;

      transform:
        translate3d(
          0,
          var(--hero-copy-y, 0px),
          0
        );

      opacity: var(--hero-copy-opacity, 1);

      will-change: transform, opacity;
    }
      
    .hero h1 {
      margin: 0;
      max-width: 1000px;
      font-size: clamp(52px, 8.6vw, 138px);
      font-weight: 400;
      letter-spacing: -.055em;
      line-height: .87;
      text-wrap: balance;
    }

    .hero-deck {
      max-width: 590px;
      margin: 28px 0 0;
      color: var(--paper);
      font-size: clamp(17px, 1.6vw, 24px);
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 20px 34px;
      margin-top: 34px;
    }
      
    #discover {
      position: relative;
      z-index: 5;
      background: var(--black);
    }

    @media (min-width: 993px) {
      #discover {
        margin-top: -2px;
        padding-top: calc(var(--section-space) + 2px);
        border-radius: 2px 2px 0 0;
      }
    }

    .text-link {
      display: inline-flex;
      align-items: center;
      gap: 18px;
      text-transform: uppercase;
      letter-spacing: .18em;
      font-size: 11px;
    }

    .text-link::after {
      content: "→";
      color: var(--accent);
      font-size: 18px;
      transition: transform .3s var(--ease);
    }

    .text-link:hover::after,
    .text-link:focus-visible::after {
      transform: translateX(6px);
    }
      
    .section-down-arrow {
        display: none;
    }

    .scroll-cue {
      position: absolute;
      right: var(--page-gutter);
      bottom: 54px;
      z-index: 3;
      display: flex;
      align-items: center;
      gap: 14px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .17em;
      font-size: 9px;
      writing-mode: vertical-rl;
    }

    .scroll-cue::after {
      content: "";
      width: 1px;
      height: 50px;
      background: linear-gradient(var(--accent), transparent);
      animation: scrollPulse 2.2s ease-in-out infinite;
    }

    /* Feature cards */
    .feature-card {
      display: block;
      height: 100%;
    }

    .feature-card .meta {
      margin-top: 14px;
    }

    .feature-card p {
      max-width: 440px;
      margin: 10px 0 0;
      color: var(--mist);
    }

    .feature-card:hover .card-title {
      color: var(--accent);
    }

    .feature-card .card-title {
      transition: color .3s ease;
    }

    /* Editor's desk */
    .desk-copy {
        align-self: start;
        padding-top: 0;
        padding-bottom: clamp(20px, 4vw, 70px);
    }

    .signature {
      margin-top: 44px;
      color: var(--paper);
      font-size: 14px;
      letter-spacing: .08em;
    }

    /* Journey */
    .journey-section {
      min-height: 82svh;
      display: grid;
      align-items: center;
      overflow: hidden;
    }

    .journey-bg {
      position: absolute;
      inset: 0;
    }

    .journey-bg .placeholder-image {
      background:
        radial-gradient(circle at 26% 42%, rgba(200,162,90,.25), transparent 15%),
        linear-gradient(112deg, #383838 0%, #111 55%, #050505 100%);
    }

    .journey-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(5,5,5,.96), rgba(5,5,5,.72) 44%, rgba(5,5,5,.2));
    }

    .journey-content {
      position: relative;
      z-index: 2;
    }

    .journey-facts {
      margin-top: 40px;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 20px;
      max-width: 520px;
    }

    .journey-fact {
      padding-top: 15px;
      border-top: 1px solid rgba(255,255,255,.22);
    }

    .journey-fact strong {
      display: block;
      color: var(--white);
      font-size: 14px;
      font-weight: 400;
    }

    .journey-fact span {
      color: var(--muted);
      font-size: 12px;
    }

    /* Unexpected feature */
    .unexpected-grid {
      align-items: end;
    }

    .unexpected-small {
      margin-top: 25%;
    }

    /* Seasonal */
    .seasonal {
      background: var(--paper);
      color: var(--black);
    }

    .seasonal .section {
      border-color: rgba(0,0,0,.15);
    }

    .seasonal .eyebrow { color: #8d672d; }
    .seasonal .section-intro,
    .seasonal .body-copy { color: #555550; }
    .seasonal .meta { color: #6d6d68; }

    .issue-number {
      font-size: clamp(105px, 17vw, 270px);
      line-height: .78;
      letter-spacing: -.08em;
      color: rgba(0,0,0,.09);
      user-select: none;
    }

    /* Archive */
    .archive-list {
      margin-top: 55px;
      border-top: 1px solid var(--line);
    }

    .archive-item {
      display: grid;
      grid-template-columns: minmax(90px, 1fr) 3fr minmax(90px, 1fr);
      align-items: center;
      gap: 25px;
      min-height: 110px;
      border-bottom: 1px solid var(--line);
      transition: padding .35s var(--ease), color .3s ease;
    }

    .archive-item:hover,
    .archive-item:focus-visible {
      padding-inline: 14px;
      color: var(--accent);
    }

    .archive-item-title {
      font-size: clamp(22px, 2.4vw, 38px);
      letter-spacing: -.025em;
    }

    .archive-item-arrow {
      justify-self: end;
      font-size: 24px;
    }

    /* Newsletter */
    .newsletter {
      padding-block: clamp(70px, 8vw, 120px);
      background: var(--black-soft);
    }

    .newsletter-form {
      display: flex;
      align-items: stretch;
      max-width: 620px;
      margin-top: 38px;
      border-bottom: 1px solid #555;
    }

    .newsletter-form input {
      flex: 1;
      min-width: 0;
      padding: 18px 0;
      border: 0;
      outline: 0;
      color: var(--white);
      background: transparent;
    }

    .newsletter-form input::placeholder {
      color: var(--muted);
    }

    .newsletter-form button {
      border: 0;
      padding: 0 4px 0 20px;
      color: var(--accent);
      background: transparent;
      text-transform: uppercase;
      letter-spacing: .16em;
      font-size: 10px;
      cursor: pointer;
    }

    .form-message {
      min-height: 22px;
      margin-top: 12px;
      color: var(--mist);
      font-size: 12px;
    }

    /* Footer */
    .site-footer {
      padding-block: 68px 34px;
      border-top: 1px solid var(--line);
    }

    .footer-brand {
      margin-bottom: 50px;
    }

    .footer-nav {
      display: grid;
      gap: 12px;
    }

    .footer-small {
      margin-top: 70px;
      padding-top: 25px;
      display: flex;
      justify-content: space-between;
      gap: 20px;
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-size: 11px;
    }

    /* Scroll reveal */
    .reveal {
      opacity: 0;
      transform: translateY(42px);
      transition:
        opacity .9s var(--ease),
        transform .9s var(--ease);
    }

    .reveal[data-delay="1"] { transition-delay: .12s; }
    .reveal[data-delay="2"] { transition-delay: .24s; }
    .reveal[data-delay="3"] { transition-delay: .36s; }

    .reveal.is-visible {
      opacity: 1;
      transform: none;
    }

    .parallax {
      will-change: transform;
      transition: transform .08s linear;
    }

    @keyframes scrollPulse {
      0%, 100% { opacity: .35; transform: scaleY(.65); transform-origin: top; }
      50% { opacity: 1; transform: scaleY(1); transform-origin: top; }
    }

    /* Tablet */
    @media (max-width: 992px) {
      :root { --header-height: 76px; }

      .desktop-nav { display: none; }
      .menu-button { display: block; }

      .span-9, .span-8, .span-7, .span-6, .span-5, .span-4, .span-3 {
        grid-column: span 6;
      }

      .hero h1 { max-width: 800px; }

      .scroll-cue { display: none; }

      .journey-overlay {
        background: linear-gradient(90deg, rgba(5,5,5,.94), rgba(5,5,5,.58));
      }

      .unexpected-small { margin-top: 0; }

      .archive-item {
        grid-template-columns: 90px 1fr 40px;
      }
    }

    /* Mobile */
    @media (max-width: 600px) {
      :root {
        --page-gutter: 20px;
        --grid-gap: 24px;
        --section-space: 82px;
      }

      .masthead {
        font-size: 23px;
        letter-spacing: .34em;
      }

      .aivelle-grid { grid-template-columns: 1fr; }

      .span-12, .span-9, .span-8, .span-7, .span-6, .span-5, .span-4, .span-3 {
        grid-column: 1;
      }

      .hero {
        min-height: 92svh;
      }

      .hero h1 {
        font-size: clamp(48px, 17vw, 76px);
        line-height: .91;
      }

      .hero-deck {
        margin-top: 22px;
      }

      .hero-actions {
        display: grid;
        justify-items: start;
      }

      .section-heading {
        font-size: clamp(39px, 13vw, 62px);
      }

      .ratio-portrait {
        aspect-ratio: 4 / 5;
      }

      .journey-section {
        min-height: auto;
        padding-block: 110px;
      }

      .journey-facts {
        grid-template-columns: 1fr;
      }

      .issue-number {
        margin-bottom: 30px;
      }

      .archive-item {
        grid-template-columns: 54px 1fr 24px;
        gap: 14px;
        min-height: 92px;
      }

      .archive-item .meta {
        font-size: 9px;
      }

      .newsletter-form {
        display: grid;
      }

      .newsletter-form button {
        padding: 16px 0;
        text-align: left;
      }

      .site-footer .aivelle-grid {
        text-align: center;
        justify-items: center;
      }

      .footer-brand {
        margin-bottom: 24px;
      }

      .footer-brand .body-copy {
        max-width: 100% !important;
        margin: 12px auto 0;
      }

      .footer-nav {
        justify-items: center;
        text-align: center;
        gap: 10px;
        margin-bottom: 18px;
      }

      .footer-nav:last-child {
        display: flex;
        justify-content: center;
        gap: 22px;
        margin-top: 8px;
      }

      .footer-small {
        display: grid;
        justify-items: center;
        text-align: center;
        gap: 10px;
        margin-top: 50px;
      }
    }
      
    /* -------------------------------------------------
       AIVELLE Privacy Modal
    -------------------------------------------------- */

    body.privacy-modal-open {
      overflow: hidden;
    }

    .privacy-modal {
      position: fixed;
      inset: 0;
      z-index: 5000;

      display: grid;
      place-items: center;

      padding:
        clamp(18px, 4vw, 60px)
        var(--page-gutter);

      visibility: hidden;
      opacity: 0;

      transition:
        opacity .35s ease,
        visibility .35s ease;
    }

    .privacy-modal.is-open {
      visibility: visible;
      opacity: 1;
    }

    .privacy-modal-backdrop {
      position: absolute;
      inset: 0;

      background: rgba(0, 0, 0, .78);

      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }

    .privacy-modal-dialog {
      position: relative;
      z-index: 2;

      width: min(920px, 100%);
      max-height: min(840px, calc(100svh - 48px));

      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto;

      overflow: hidden;

      background: #0b0b0b;

      border: 1px solid var(--line);
      border-radius: 16px;

      box-shadow:
        0 34px 90px rgba(0, 0, 0, .68);

      opacity: 0;

      transform:
        translateY(22px)
        scale(.975);

      transition:
        opacity .38s ease,
        transform .48s var(--ease);
    }

    .privacy-modal.is-open .privacy-modal-dialog {
      opacity: 1;

      transform:
        translateY(0)
        scale(1);
    }

    .privacy-modal-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 30px;

      padding:
        clamp(26px, 4vw, 48px)
        clamp(24px, 4.5vw, 54px)
        24px;

      border-bottom: 1px solid var(--line);
    }

    .privacy-modal-header .eyebrow {
      margin-bottom: 12px;
    }

    .privacy-modal-header h2 {
      margin: 0;

      color: var(--white);

      font-size: clamp(32px, 4vw, 58px);
      font-weight: 400;
      line-height: 1;
      letter-spacing: -.04em;
    }

    .privacy-modal-close {
      flex: 0 0 auto;

      width: 46px;
      height: 46px;

      display: inline-grid;
      place-items: center;

      padding: 0;

      border: 1px solid var(--line);
      border-radius: 50%;

      color: var(--paper);
      background: transparent;

      font-size: 28px;
      font-weight: 200;
      line-height: 1;

      cursor: pointer;

      transition:
        color .35s ease,
        border-color .35s ease,
        transform .45s var(--ease);
    }

    .privacy-modal-close:hover,
    .privacy-modal-close:focus-visible {
      color: var(--accent);
      border-color: var(--accent);
      transform: rotate(90deg);
    }

    .privacy-modal-content {
      min-height: 0;
      overflow-y: auto;
      overscroll-behavior: contain;

      padding:
        clamp(28px, 4vw, 46px)
        clamp(24px, 4.5vw, 54px)
        50px;

      color: var(--mist);

      scrollbar-width: thin;
      scrollbar-color: var(--accent) var(--graphite);
    }

    .privacy-modal-content::-webkit-scrollbar {
      width: 7px;
    }

    .privacy-modal-content::-webkit-scrollbar-track {
      background: var(--graphite);
    }

    .privacy-modal-content::-webkit-scrollbar-thumb {
      background: var(--accent);
      border-radius: 20px;
    }

    .privacy-effective-date {
      margin: 0 0 40px;

      color: var(--muted);

      text-transform: uppercase;
      letter-spacing: .16em;
      font-size: 10px;
    }

    .privacy-modal-content section {
      max-width: 720px;

      margin: 0 0 42px;
      padding: 0;
    }

    .privacy-modal-content section:last-child {
      margin-bottom: 0;
    }

    .privacy-modal-content h3 {
      margin: 0 0 15px;

      color: var(--paper);

      font-size: clamp(20px, 2vw, 28px);
      font-weight: 400;
      letter-spacing: -.025em;
      line-height: 1.2;
    }

    .privacy-modal-content p {
      margin: 0 0 16px;
    }

    .privacy-modal-content ul {
      margin: 18px 0 0;
      padding-left: 20px;
    }

    .privacy-modal-content li {
      margin-bottom: 9px;
    }

    .privacy-modal-content a {
      color: var(--accent);
      transition: opacity .3s ease;
    }

    .privacy-modal-content a:hover,
    .privacy-modal-content a:focus-visible {
      opacity: .7;
    }

    .privacy-modal-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 24px;

      padding:
        20px
        clamp(24px, 4.5vw, 54px);

      border-top: 1px solid var(--line);

      color: var(--muted);

      text-transform: uppercase;
      letter-spacing: .18em;
      font-size: 10px;
    }

    .privacy-modal-footer button {
      padding: 0;

      border: 0;

      color: var(--accent);
      background: transparent;

      text-transform: uppercase;
      letter-spacing: .18em;
      font-size: 10px;

      cursor: pointer;
    }

    .privacy-modal-footer button:hover,
    .privacy-modal-footer button:focus-visible {
      color: var(--white);
    }

    @media (max-width: 600px) {

      .privacy-modal {
        padding: 12px;
      }

      .privacy-modal-dialog {
        max-height: calc(100svh - 24px);
        border-radius: 12px;
      }

      .privacy-modal-header {
        padding: 24px 20px 20px;
      }

      .privacy-modal-header h2 {
        font-size: 34px;
      }

      .privacy-modal-close {
        width: 40px;
        height: 40px;
        font-size: 25px;
      }

      .privacy-modal-content {
        padding: 28px 20px 40px;
      }

      .privacy-modal-footer {
        padding: 18px 20px;
      }
    }

    @media (prefers-reduced-motion: reduce) {

      .privacy-modal,
      .privacy-modal-dialog,
      .privacy-modal-close {
        transition: none;
      }
    }
      
    /* =================================================
       AIVELLE Terms Modal
    ================================================= */

    .footer-legal-copy {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 7px;
    }

    .footer-legal-copy a {
      color: inherit;
      text-decoration: none;

      transition:
        color .35s ease,
        opacity .35s ease;
    }

    .footer-legal-copy a:hover,
    .footer-legal-copy a:focus-visible {
      color: var(--accent);
    }

    .footer-legal-divider {
      color: var(--muted);
    }

    body.terms-modal-open {
      overflow: hidden;
    }

    .terms-modal {
      position: fixed;
      inset: 0;
      z-index: 5100;

      display: grid;
      place-items: center;

      padding:
        clamp(18px, 4vw, 60px)
        var(--page-gutter);

      visibility: hidden;
      opacity: 0;

      transition:
        opacity .35s ease,
        visibility .35s ease;
    }

    .terms-modal.is-open {
      visibility: visible;
      opacity: 1;
    }

    .terms-modal-backdrop {
      position: absolute;
      inset: 0;

      background: rgba(0, 0, 0, .82);

      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }

    .terms-modal-dialog {
      position: relative;
      z-index: 2;

      width: min(940px, 100%);
      max-height: min(860px, calc(100svh - 48px));

      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto;

      overflow: hidden;

      background: #0b0b0b;

      border: 1px solid var(--line);
      border-radius: 16px;

      box-shadow:
        0 34px 90px rgba(0, 0, 0, .72);

      opacity: 0;

      transform:
        translateY(22px)
        scale(.975);

      transition:
        opacity .38s ease,
        transform .48s var(--ease);
    }

    .terms-modal.is-open .terms-modal-dialog {
      opacity: 1;

      transform:
        translateY(0)
        scale(1);
    }

    .terms-modal-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 30px;

      padding:
        clamp(25px, 3.5vw, 42px)
        clamp(24px, 4.5vw, 54px)
        22px;

      border-bottom: 1px solid var(--line);
    }

    .terms-modal-header .eyebrow {
      margin-bottom: 11px;
    }

    .terms-modal-header h2 {
      margin: 0;

      color: var(--white);

      font-size: clamp(30px, 3.8vw, 54px);
      font-weight: 400;
      line-height: 1;
      letter-spacing: -.04em;
    }

    .terms-modal-close {
      flex: 0 0 auto;

      width: 46px;
      height: 46px;

      display: inline-grid;
      place-items: center;

      padding: 0;

      border: 1px solid var(--line);
      border-radius: 50%;

      color: var(--paper);
      background: transparent;

      font-size: 28px;
      font-weight: 200;
      line-height: 1;

      cursor: pointer;

      transition:
        color .35s ease,
        border-color .35s ease,
        transform .45s var(--ease);
    }

    .terms-modal-close:hover,
    .terms-modal-close:focus-visible {
      color: var(--accent);
      border-color: var(--accent);

      transform: rotate(90deg);
    }

    .terms-modal-content {
      min-height: 0;
      overflow-y: auto;
      overscroll-behavior: contain;

      padding:
        clamp(27px, 3.5vw, 42px)
        clamp(24px, 4.5vw, 54px)
        50px;

      color: var(--mist);

      /*
       * Smaller, professional small-print typography.
       */
      font-size: 12.5px;
      line-height: 1.78;
      letter-spacing: .01em;

      scrollbar-width: thin;
      scrollbar-color: var(--accent) var(--graphite);
    }

    .terms-modal-content::-webkit-scrollbar {
      width: 7px;
    }

    .terms-modal-content::-webkit-scrollbar-track {
      background: var(--graphite);
    }

    .terms-modal-content::-webkit-scrollbar-thumb {
      background: var(--accent);
      border-radius: 20px;
    }

    .terms-effective-date {
      margin: 0 0 30px;

      color: var(--muted);

      text-transform: uppercase;
      letter-spacing: .16em;
      font-size: 9px;
    }

    .terms-introduction {
      max-width: 730px;

      margin: 0 0 42px;

      color: var(--paper);

      font-size: 13px;
      line-height: 1.8;
    }

    .terms-modal-content section {
      max-width: 730px;

      margin: 0 0 34px;
      padding: 0;
    }

    .terms-modal-content section:last-child {
      margin-bottom: 0;
    }

    .terms-modal-content h3 {
      margin: 0 0 12px;

      color: var(--paper);

      font-size: 14px;
      font-weight: 400;
      line-height: 1.35;
      letter-spacing: .015em;
    }

    .terms-modal-content p {
      margin: 0 0 12px;
    }

    .terms-modal-content ul {
      margin: 15px 0 0;
      padding-left: 19px;
    }

    .terms-modal-content li {
      margin-bottom: 8px;
      padding-left: 3px;
    }

    .terms-modal-content a {
      color: var(--accent);

      transition: opacity .3s ease;
    }

    .terms-modal-content a:hover,
    .terms-modal-content a:focus-visible {
      opacity: .7;
    }

    .terms-modal-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 24px;

      padding:
        19px
        clamp(24px, 4.5vw, 54px);

      border-top: 1px solid var(--line);

      color: var(--muted);

      text-transform: uppercase;
      letter-spacing: .18em;
      font-size: 9px;
    }

    .terms-modal-footer button {
      padding: 0;

      border: 0;

      color: var(--accent);
      background: transparent;

      text-transform: uppercase;
      letter-spacing: .18em;
      font-size: 9px;

      cursor: pointer;

      transition: color .3s ease;
    }

    .terms-modal-footer button:hover,
    .terms-modal-footer button:focus-visible {
      color: var(--white);
    }

    @media (max-width: 600px) {

      .footer-legal-copy {
        justify-content: center;
      }

      .terms-modal {
        padding: 12px;
      }

      .terms-modal-dialog {
        max-height: calc(100svh - 24px);

        border-radius: 12px;
      }

      .terms-modal-header {
        padding: 24px 20px 20px;
      }

      .terms-modal-header h2 {
        font-size: 34px;
      }

      .terms-modal-close {
        width: 40px;
        height: 40px;

        font-size: 25px;
      }

      .terms-modal-content {
        padding: 27px 20px 40px;

        /*
         * Slightly larger on mobile for readability.
         */
        font-size: 12px;
        line-height: 1.75;
      }

      .terms-introduction {
        font-size: 12.5px;
      }

      .terms-modal-content h3 {
        font-size: 13.5px;
      }

      .terms-modal-footer {
        padding: 18px 20px;
      }

    }

    @media (prefers-reduced-motion: reduce) {

      .terms-modal,
      .terms-modal-dialog,
      .terms-modal-close {
        transition: none;
      }

    }

    /* Accessibility: reduced motion */
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }

      *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
      }

      .reveal {
        opacity: 1;
        transform: none;
      }

      .parallax { transform: none !important; }
    }

    /* Print-safe basics */
    @media print {
      .site-header, .mobile-menu, .scroll-cue { display: none !important; }
      body { background: white; color: black; }
      .hero { min-height: auto; }
    }
      
    @media (min-width: 992px) {

    .section-down-arrow {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        width: 42px;
        height: 30px;
        margin-top: 24px;

        color: inherit;
        text-decoration: none;

        transition:
            color .55s ease,
            transform .85s ease;
    }

    .section-down-arrow svg {
        width: 30px;
        height: 18px;
        overflow: visible;
    }

    .section-down-arrow path {
        fill: none;
        stroke: currentColor;
        stroke-width: 1.2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .section-down-arrow:hover,
    .section-down-arrow:focus-visible {
        color: var(--brass, #C8A25A);
        transform: translateY(5px);
    }
    }  
      
    .coming-soon-link{
    position:relative;
    }

    .coming-soon-popup{

        position:absolute;

        right:70px;
        top:50%;

        transform:translateY(-50%) translateX(15px);

        background:#0b0b0b;

        border:1px solid #C8A25A;

        color:#C8A25A;

        padding:12px 18px;

        border-radius:12px;

        font-size:.82rem;

        letter-spacing:.08em;

        white-space:nowrap;

        opacity:0;

        pointer-events:none;

        transition:
            opacity .45s ease,
            transform .45s ease;

        box-shadow:
            0 12px 30px rgba(0,0,0,.45);

        backdrop-filter:blur(12px);

        z-index:20;
    }

    .coming-soon-popup.show{

        opacity:1;

        transform:translateY(-50%) translateX(0);

    }
      
  

    /* About page */
    .about-hero {
      position: relative;
      min-height: 92svh;
      display: grid;
      align-items: end;
      padding-top: var(--header-height);
      overflow: hidden;
      border-bottom: 1px solid var(--line);
    }

    .about-hero-media { position: absolute; inset: 0; }

    .about-hero-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      transform: scale(var(--hero-scale, 1.05));
      will-change: transform;
    }

    .about-hero-shade {
      position: absolute;
      inset: 0;
      opacity: var(--hero-overlay-opacity, 1);
      background:
        linear-gradient(90deg, rgba(0,0,0,.90), rgba(0,0,0,.28) 68%, rgba(0,0,0,.45)),
        linear-gradient(to top, rgba(0,0,0,.92), transparent 62%);
    }

    .about-hero-content {
      position: relative;
      z-index: 2;
      width: min(100%, var(--content-max));
      margin-inline: auto;
      padding: 0 var(--page-gutter) clamp(52px, 8vw, 112px);
    }

    .about-hero-copy {
      max-width: 1100px;
      transform: translate3d(0, var(--hero-copy-y, 0px), 0);
      opacity: var(--hero-copy-opacity, 1);
    }

    .about-hero h1 {
      max-width: 1080px;
      margin: 0;
      font-size: clamp(52px, 8.4vw, 132px);
      font-weight: 400;
      letter-spacing: -.055em;
      line-height: .88;
      text-wrap: balance;
    }

    .statement {
      padding-block: clamp(110px, 14vw, 220px);
      border-top: 0;
    }

    .statement-copy {
      max-width: 1280px;
      margin: 0;
      font-size: clamp(34px, 5.5vw, 88px);
      font-weight: 400;
      letter-spacing: -.045em;
      line-height: 1.02;
    }

    .statement-copy span { color: var(--muted); }

    .principles-grid {
      margin-top: clamp(54px, 7vw, 100px);
      border-top: 1px solid var(--line);
    }

    .principle {
      display: grid;
      grid-template-columns: 72px 1fr;
      gap: 24px;
      padding-block: 30px;
      border-bottom: 1px solid var(--line);
    }

    .principle h3 {
      margin: 0 0 8px;
      font-size: clamp(22px, 2.2vw, 34px);
      font-weight: 400;
      letter-spacing: -.025em;
    }

    .principle p {
      max-width: 620px;
      margin: 0;
      color: var(--mist);
    }

    .light-section { background: var(--paper); color: var(--black); }
    .light-section .section { border-color: rgba(0,0,0,.15); }
    .light-section .eyebrow { color: #8d672d; }
    .light-section .body-copy,
    .light-section .section-intro { color: #555550; }

    .manifesto-list {
      margin-top: 46px;
      display: grid;
      border-top: 1px solid var(--line);
    }

    .manifesto-item {
      display: grid;
      grid-template-columns: 70px 1fr;
      gap: 20px;
      padding-block: 18px;
      border-bottom: 1px solid var(--line);
      font-size: clamp(18px, 2vw, 30px);
      letter-spacing: -.02em;
    }

    @media (max-width: 600px) {
      .about-hero { min-height: 88svh; }
      .about-hero h1 {
        font-size: clamp(48px, 17vw, 76px);
        line-height: .91;
      }
      .principle,
      .manifesto-item {
        grid-template-columns: 44px 1fr;
        gap: 14px;
      }
    }

/* =================================================
   AIVELLE EDIT — THE TIMELESS COAT
================================================= */

.edit-hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  padding-top: var(--header-height);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.edit-hero-media {
  position: absolute;
  inset: 0;
}

.edit-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  transform: scale(var(--hero-scale, 1.05));
  will-change: transform;
}

.edit-hero-shade {
  position: absolute;
  inset: 0;
  opacity: var(--hero-overlay-opacity, 1);
  background:
    linear-gradient(90deg, rgba(0,0,0,.90), rgba(0,0,0,.20) 66%, rgba(0,0,0,.42)),
    linear-gradient(to top, rgba(0,0,0,.94), transparent 64%);
}

.edit-hero-content {
  position: relative;
  z-index: 2;
  width: min(100%, var(--content-max));
  margin-inline: auto;
  padding: 0 var(--page-gutter) clamp(52px, 8vw, 112px);
}

.edit-hero-copy {
  max-width: 1120px;
  transform: translate3d(0, var(--hero-copy-y, 0px), 0);
  opacity: var(--hero-copy-opacity, 1);
}

.edit-hero h1 {
  max-width: 1100px;
  margin: 0;
  font-size: clamp(58px, 9vw, 144px);
  font-weight: 400;
  letter-spacing: -.06em;
  line-height: .84;
  text-wrap: balance;
}

.edit-hero .hero-deck {
  max-width: 650px;
}

.edit-number {
  position: absolute;
  right: var(--page-gutter);
  bottom: clamp(46px, 7vw, 96px);
  z-index: 2;
  color: rgba(255,255,255,.16);
  font-size: clamp(90px, 15vw, 240px);
  line-height: .72;
  letter-spacing: -.08em;
  user-select: none;
}

.edit-opening {
  padding-block: clamp(120px, 15vw, 230px);
  border-top: 0;
}

.edit-opening-copy {
  max-width: 1270px;
  margin: 0;
  font-size: clamp(36px, 5.9vw, 92px);
  font-weight: 400;
  letter-spacing: -.05em;
  line-height: 1;
}

.edit-opening-copy span {
  color: var(--muted);
}

.edit-section-grid {
  align-items: center;
}

.edit-copy {
  max-width: 560px;
}

.edit-copy .body-copy + .body-copy {
  margin-top: 18px;
}

.edit-image {
  position: relative;
  overflow: hidden;
  background: var(--graphite);
}

.edit-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.edit-image--portrait {
  aspect-ratio: 3 / 4;
}

.edit-image--wide {
  aspect-ratio: 16 / 10;
}

.edit-image--detail {
  aspect-ratio: 1;
}

.edit-image--portrait img {
  object-position: 58% center;
}

.edit-image--wide img {
  object-position: center 34%;
  transform: scale(1.12);
}

.edit-image--detail img {
  object-position: 78% 74%;
  transform: scale(2.15);
  transform-origin: 78% 74%;
}

.edit-image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,.09);
}

.edit-caption {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 14px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 9px;
}

.edit-quote {
  padding-block: clamp(100px, 13vw, 200px);
  background: var(--paper);
  color: var(--black);
}

.edit-quote blockquote {
  max-width: 1260px;
  margin: 0;
  font-size: clamp(40px, 6.3vw, 102px);
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: .96;
}

.edit-quote blockquote span {
  color: #8d672d;
}

.edit-criteria {
  margin-top: clamp(56px, 7vw, 100px);
  border-top: 1px solid var(--line);
}

.edit-criterion {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) minmax(240px, 420px);
  gap: 28px;
  align-items: start;
  padding-block: 30px;
  border-bottom: 1px solid var(--line);
}

.edit-criterion h3 {
  margin: 0;
  font-size: clamp(23px, 2.4vw, 38px);
  font-weight: 400;
  letter-spacing: -.03em;
}

.edit-criterion p {
  margin: 0;
  color: var(--mist);
}

.styling-notes {
  display: grid;
  gap: 0;
  margin-top: 44px;
  border-top: 1px solid var(--line);
}

.styling-note {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 20px;
  padding-block: 20px;
  border-bottom: 1px solid var(--line);
}

.styling-note strong {
  font-weight: 400;
  color: var(--paper);
}

.explore-edits {
  background: var(--black-soft);
}

.explore-grid {
  margin-top: clamp(52px, 7vw, 94px);
}

.explore-card {
  display: block;
}

.explore-card .media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  opacity: .72;
  transition: transform 1s var(--ease), opacity .5s ease;
}

.explore-card:hover .media-frame img,
.explore-card:focus-visible .media-frame img {
  transform: scale(1.035);
  opacity: .95;
}

.explore-card .card-title {
  transition: color .35s ease;
}

.explore-card:hover .card-title,
.explore-card:focus-visible .card-title {
  color: var(--accent);
}

.explore-card-placeholder {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 72% 22%, rgba(200,162,90,.18), transparent 17%),
    linear-gradient(145deg, #333 0%, #121212 56%, #070707 100%);
}

.explore-card-placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(130deg, transparent 0 43%, rgba(255,255,255,.06) 43.2% 43.7%, transparent 44%),
    linear-gradient(to top, rgba(0,0,0,.66), transparent 55%);
}

.edit-back-link {
  margin-top: 34px;
}

@media (max-width: 992px) {
  .edit-number {
    display: none;
  }

  .edit-criterion {
    grid-template-columns: 54px 1fr;
  }

  .edit-criterion p {
    grid-column: 2;
  }
}

@media (max-width: 600px) {
  .edit-hero {
    min-height: 92svh;
  }

  .edit-hero-media img {
    object-position: 60% center;
  }

  .edit-hero h1 {
    font-size: clamp(54px, 17vw, 80px);
    line-height: .88;
  }

  .edit-image--portrait,
  .edit-image--wide {
    aspect-ratio: 4 / 5;
  }

  .edit-image--detail {
    aspect-ratio: 1;
  }

  .edit-opening-copy {
    font-size: clamp(38px, 12vw, 60px);
  }

  .edit-criterion {
    grid-template-columns: 42px 1fr;
    gap: 14px;
  }

  .styling-note {
    grid-template-columns: 42px 1fr;
    gap: 14px;
  }
}


/* =================================================
   DETAIL 02 — SCULPTURAL JEWELLERY IMAGE CROPS
================================================= */

.jewellery-image--wide img {
  object-position: 58% 34%;
  transform: scale(1.16);
}

.jewellery-image--detail img {
  object-position: 52% 73%;
  transform: scale(2.05);
  transform-origin: 52% 73%;
}

.jewellery-image--portrait img {
  object-position: center 28%;
}

@media (max-width: 600px) {
  .jewellery-image--wide img {
    object-position: 58% center;
    transform: scale(1.08);
  }

  .jewellery-image--detail img {
    object-position: 50% 74%;
  }

  .jewellery-image--portrait img {
    object-position: center 24%;
  }
}


/* =================================================
   AIVELLE — SCULPTURAL JEWELLERY
   iPad portrait refinement — v2

   IMPORTANT:
   These rules are deliberately section-specific.
   They do NOT globally restructure every .edit-section-grid.

   Scope:
   601px–1024px, portrait only.
================================================= */

@media
    (min-width: 601px)
    and (max-width: 1024px)
    and (orientation: portrait) {

    /* =================================================
       WHY IT MATTERS
       One clean, full-width editorial statement.
    ================================================= */

    .section:has(.eyebrow:first-child:nth-last-child(n+1)):has(.edit-copy .eyebrow) {
        overflow-x: clip;
    }

    .section:has(.edit-copy .eyebrow):has(.section-heading)
    .edit-section-grid {
        grid-template-columns: 1fr;
        gap: 0;
        align-items: start;
    }

    /* Only target the "Why it matters" section by its heading text structure:
       it is the edit-section-grid containing TWO edit-copy blocks and no image. */
    .section:has(.edit-section-grid > .edit-copy:nth-child(1))
            :has(.edit-section-grid > .edit-copy:nth-child(2))
            :not(:has(.edit-section-grid > .span-7))
    .edit-section-grid {
        display: block;
    }

    .section:has(.edit-section-grid > .edit-copy:nth-child(1))
            :has(.edit-section-grid > .edit-copy:nth-child(2))
            :not(:has(.edit-section-grid > .span-7))
    .edit-copy {
        width: 100%;
        max-width: 940px;
        margin: 0;
    }

    .section:has(.edit-section-grid > .edit-copy:nth-child(1))
            :has(.edit-section-grid > .edit-copy:nth-child(2))
            :not(:has(.edit-section-grid > .span-7))
    .edit-copy + .edit-copy {
        margin-top: clamp(34px, 4vw, 48px);
    }

    .section:has(.edit-section-grid > .edit-copy:nth-child(1))
            :has(.edit-section-grid > .edit-copy:nth-child(2))
            :not(:has(.edit-section-grid > .span-7))
    .section-heading {
        max-width: 900px;
        font-size: clamp(48px, 6.2vw, 66px);
        line-height: .98;
    }

    .section:has(.edit-section-grid > .edit-copy:nth-child(1))
            :has(.edit-section-grid > .edit-copy:nth-child(2))
            :not(:has(.edit-section-grid > .span-7))
    .section-intro,
    .section:has(.edit-section-grid > .edit-copy:nth-child(1))
            :has(.edit-section-grid > .edit-copy:nth-child(2))
            :not(:has(.edit-section-grid > .span-7))
    .body-copy {
        width: 100%;
        max-width: 900px;
    }


    /* =================================================
       FORM AND BALANCE
       Image centred first, then copy beneath with space.
    ================================================= */

    .section:has(.jewellery-image--wide) {
        padding-block: clamp(92px, 10vw, 128px);
    }

    .section:has(.jewellery-image--wide) .edit-section-grid {
        display: grid;
        grid-template-columns: 1fr;
        justify-items: center;
        gap: clamp(44px, 6vw, 70px);
    }

    .section:has(.jewellery-image--wide) .edit-section-grid > .span-7 {
        width: min(100%, 820px);
        max-width: 820px;
        margin: 0 auto;
        grid-column: 1;
        grid-row: 1;
    }

    .section:has(.jewellery-image--wide) .edit-section-grid > .edit-copy {
        width: min(100%, 900px);
        max-width: 900px;
        margin: 0 auto;
        grid-column: 1;
        grid-row: 2;
        padding-top: 0;
        text-align: left;
    }

    .section:has(.jewellery-image--wide) .edit-copy .editorial-title {
        max-width: 860px;
        font-size: clamp(42px, 5.4vw, 58px);
        line-height: 1.01;
    }

    .section:has(.jewellery-image--wide) .edit-copy .body-copy {
        max-width: 860px;
        line-height: 1.7;
    }

    .section:has(.jewellery-image--wide) .edit-caption {
        margin-top: 16px;
    }


    /* =================================================
       MATERIAL AND FINISH
       Copy first and full-width, image centred below.
    ================================================= */

    .section:has(.jewellery-image--detail) {
        padding-block: clamp(92px, 10vw, 128px);
        overflow-x: clip;
    }

    .section:has(.jewellery-image--detail) .edit-section-grid {
        display: grid;
        grid-template-columns: 1fr;
        justify-items: center;
        gap: clamp(46px, 6vw, 72px);
    }

    .section:has(.jewellery-image--detail) .edit-section-grid > .edit-copy {
        grid-column: 1;
        grid-row: 1;
        width: min(100%, 900px);
        max-width: 900px;
        margin: 0 auto;
        padding-top: 0;
        text-align: left;
    }

    .section:has(.jewellery-image--detail) .edit-section-grid > .span-7 {
        grid-column: 1;
        grid-row: 2;
        width: min(100%, 700px);
        max-width: 700px;
        margin: 0 auto;
        justify-self: center;
    }

    .section:has(.jewellery-image--detail) .edit-copy .section-heading {
        max-width: 860px;
        font-size: clamp(46px, 5.9vw, 64px);
        line-height: .98;
    }

    .section:has(.jewellery-image--detail) .edit-copy .section-intro,
    .section:has(.jewellery-image--detail) .edit-copy .body-copy {
        max-width: 880px;
        line-height: 1.7;
    }

    .section:has(.jewellery-image--detail) .jewellery-image--detail {
        aspect-ratio: 4 / 5;
    }

    .section:has(.jewellery-image--detail) .jewellery-image--detail img {
        object-position: 52% 69%;
        transform: scale(1.72);
        transform-origin: 52% 69%;
    }


    /* =================================================
       HOW AIVELLE WEARS IT
       Heading top-left.
       Image left / three notes right.
       Intro paragraph spans beneath.
    ================================================= */

    .section:has(.jewellery-image--portrait) {
        padding-block: clamp(92px, 10vw, 128px);
        overflow-x: clip;
    }

    .section:has(.jewellery-image--portrait) .edit-section-grid {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        column-gap: clamp(24px, 3.5vw, 38px);
        row-gap: clamp(20px, 2.7vw, 30px);
        align-items: start;
    }

    .section:has(.jewellery-image--portrait) .edit-section-grid > .edit-copy {
        display: contents;
    }

    .section:has(.jewellery-image--portrait) .edit-copy > .eyebrow {
        grid-column: 1 / -1;
        grid-row: 1;
        margin-bottom: 0;
    }

    .section:has(.jewellery-image--portrait) .edit-copy > .editorial-title {
        grid-column: 1 / span 8;
        grid-row: 2;
        max-width: 760px;
        font-size: clamp(42px, 5.4vw, 58px);
        line-height: 1.01;
    }

    .section:has(.jewellery-image--portrait) .edit-copy > .accent-line {
        grid-column: 1 / span 4;
        grid-row: 3;
        margin: 2px 0 10px;
    }

    .section:has(.jewellery-image--portrait) .edit-section-grid > .span-7 {
        grid-column: 1 / span 6;
        grid-row: 4;
        width: 100%;
        max-width: 520px;
        margin: 0;
        justify-self: start;
    }

    .section:has(.jewellery-image--portrait) .edit-copy > .styling-notes {
        grid-column: 7 / -1;
        grid-row: 4;
        width: 100%;
        margin-top: 0;
        align-self: start;
    }

    .section:has(.jewellery-image--portrait) .styling-note {
        grid-template-columns: 42px 1fr;
        gap: 16px;
        padding-block: 20px;
    }

    .section:has(.jewellery-image--portrait) .styling-note:first-child {
        padding-top: 0;
    }

    .section:has(.jewellery-image--portrait) .edit-copy > .body-copy {
        grid-column: 1 / -1;
        grid-row: 5;
        width: 100%;
        max-width: 920px;
        margin: clamp(22px, 3vw, 34px) 0 0;
        font-size: clamp(16px, 1.9vw, 19px);
        line-height: 1.7;
    }


    /* =================================================
       THE AIVELLE POSITION
       Heading first, copy beneath, return link last.
    ================================================= */

    .section:has(.jewellery-image--portrait) + .section {
        padding-block: clamp(92px, 10vw, 128px);
    }

    .section:has(.jewellery-image--portrait) + .section .aivelle-grid {
        display: block !important;
    }

    .section:has(.jewellery-image--portrait) + .section .span-6,
    .section:has(.jewellery-image--portrait) + .section .span-4 {
        width: 100%;
        max-width: 920px;
        margin: 0;
    }

    .section:has(.jewellery-image--portrait) + .section .span-4 {
        margin-top: clamp(34px, 4vw, 48px);
    }

    .section:has(.jewellery-image--portrait) + .section .section-heading {
        max-width: 880px;
        font-size: clamp(48px, 6.2vw, 66px);
        line-height: .98;
    }

    .section:has(.jewellery-image--portrait) + .section .section-intro,
    .section:has(.jewellery-image--portrait) + .section .body-copy {
        max-width: 900px;
        line-height: 1.7;
    }

    .section:has(.jewellery-image--portrait) + .section .edit-back-link {
        margin-top: clamp(30px, 4vw, 44px);
    }


    /* Shorter portrait tablets */
    @media (max-height: 1080px) {
        .section:has(.jewellery-image--wide),
        .section:has(.jewellery-image--detail),
        .section:has(.jewellery-image--portrait),
        .section:has(.jewellery-image--portrait) + .section {
            padding-block: clamp(82px, 8.8vw, 108px);
        }
    }

}