/* =================================================
   AIVELLE GLOBAL STYLES
   Shared typography, navigation, components and modals
================================================= */

: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);
    }

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

    .textlinkhomehero::after {
        content: "↓";
        color: var(--accent);
        font-size: 18px;

        transition:
            transform .3s var(--ease);
    }

    .textlinkhomehero:hover::after,
    .textlinkhomehero:focus-visible::after {
        transform: translateY(5px);
    }
      
    .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;
    }

    .newsletter-consent{

        margin-top:16px;

        max-width:520px;

        color:var(--muted);

        font-size:11px;

        line-height:1.65;

    }

    .newsletter-consent strong{

        color:var(--paper);

        font-weight:400;

    }

    /* 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 .masthead {
          transform:
              translateX(.17em)
              scaleY(.75);
          transform-origin: center center;
      }

      .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; }
    }

    /* =================================================
       AIVELLE — Print / Save as PDF protection
    ================================================= */

    @media print {

        html,
        body {
            width: 100% !important;
            min-height: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
            background: #000 !important;
            color: #fff !important;
        }

        body * {
            visibility: hidden !important;
        }

        body::before {
            content:
                "AIVELLE\A"
                "Aspire . Imagined.\A\A"
                "This editorial is available for viewing at aivelle.global.\A"
                "Copying, printing, saving, or redistribution is not permitted.";

            visibility: visible !important;

            position: fixed;
            inset: 0;

            display: flex;
            align-items: center;
            justify-content: center;

            padding: 40px;

            background: #000 !important;
            color: #fff !important;

            white-space: pre-line;
            text-align: center;

            font-family: Helvetica, Arial, sans-serif;
            font-size: 12px;
            font-weight: 400;
            line-height: 2;
            letter-spacing: .16em;

            -webkit-print-color-adjust: exact !important;
            print-color-adjust: exact !important;
        }

    }
      
    @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);

    }
      
  

    

/* =================================================
   Shared utility refinements
================================================= */
html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
.mobile-menu .nav-link { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.mobile-home-icon { font-size: 12px; line-height: 1; position: relative; top: -1px; }


/* =================================================
   AIVELLE Footer Archive — Coming Soon
   Works with the existing footer markup:
   <a href="#">Archive</a>
================================================= */

.footer-nav a[data-archive-coming-soon] {
    display: inline-block;
    min-width: 92px;
    color: inherit;
    cursor: pointer;

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

.footer-nav a[data-archive-coming-soon]:hover,
.footer-nav a[data-archive-coming-soon]:focus-visible,
.footer-nav a[data-archive-coming-soon].is-coming-soon {
    color: var(--accent);
    outline: none;
}


/* =================================================
   AIVELLE Footer Social Profiles
================================================= */
.site-footer .footer-nav a[data-aivelle-social] {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:inherit;
    transition:color .45s ease, transform .45s var(--ease);
}
.site-footer .footer-nav a[data-aivelle-social]:hover,
.site-footer .footer-nav a[data-aivelle-social]:focus-visible {
    color:var(--accent);
    transform:translateY(-2px);
    outline:none;
}


/* =================================================
   AIVELLE — iPad portrait refinement v2
================================================= */
@media
    (min-width: 601px)
    and (max-width: 1024px)
    and (orientation: portrait) {

    /* Keep tablet typography elegant but compact enough to fit naturally. */
    .section-heading {
        font-size: clamp(40px, 6.1vw, 62px);
        line-height: .98;
    }

    .editorial-title {
        font-size: clamp(36px, 5.1vw, 50px);
        line-height: 1.02;
    }

    .section-intro {
        max-width: none;
        font-size: clamp(17px, 2vw, 20px);
        line-height: 1.55;
    }

    /* Opening hero: ensure the complete opening copy is visible on landing. */
    .hero {
        min-height: 100svh;
    }

    .hero-content {
        padding-bottom: clamp(34px, 4.8vh, 58px);
    }

    .hero h1 {
        max-width: 760px;
        font-size: clamp(54px, 8vw, 78px);
        line-height: .9;
    }

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

    .hero-actions {
        margin-top: 24px;
        gap: 14px 26px;
    }

}


/* =================================================
   AIVELLE — Horizontal viewport lock
   Prevents touch devices/tablets from panning sideways.
================================================= */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overscroll-behavior-x: none;
}

/*
 * Browsers that support overflow: clip get a stricter
 * viewport boundary than overflow: hidden alone.
 */
@supports (overflow: clip) {
    html,
    body {
        overflow-x: clip;
    }
}

/*
 * The site is vertically navigated. Prevent accidental
 * horizontal touch-panning while retaining normal vertical
 * scrolling and pinch zoom.
 */
@media (max-width: 1024px) {
    body {
        touch-action: pan-y pinch-zoom;
    }
}

/*
 * Ensure all major structural wrappers remain inside
 * the viewport even when child content or transforms
 * temporarily extend beyond their normal box.
 */
main,
.site-header,
.mobile-menu,
.site-footer,
.section,
.newsletter,
.seasonal,
.hero,
.journey-section,
.site-shell {
    max-width: 100%;
}

main,
.site-footer,
.section,
.newsletter,
.seasonal,
.hero,
.journey-section {
    overflow-x: clip;
}

/*
 * Grid items default to min-width:auto, which can allow
 * long content to force a CSS grid wider than its container.
 * Explicitly allow every AIVELLE grid child to shrink.
 */
.aivelle-grid {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.aivelle-grid > * {
    min-width: 0;
    max-width: 100%;
}

/*
 * Media and text elements must never establish a wider
 * intrinsic width than their parent on tablets/phones.
 */
img,
video,
svg,
canvas,
iframe {
    max-width: 100%;
}

.hero-media,
.journey-bg,
.media-frame,
.feature-card {
    max-width: 100%;
}

/*
 * Long labels/URLs should wrap rather than widen a column.
 */
.body-copy,
.section-intro,
.card-title,
.editorial-title,
.archive-item-title,
.footer-nav,
.newsletter-consent {
    overflow-wrap: break-word;
}

/*
 * Decorative / temporary popups must not create a scrollable
 * horizontal overflow region on touch layouts.
 */
@media (max-width: 1024px) {
    .coming-soon-popup,
    .members-popup {
        max-width: calc(100vw - (2 * var(--page-gutter)));
    }
}


/* =================================================
   AIVELLE Registered Office
================================================= */

.aivelle-registered-office p {
    margin-bottom: 0;
}

.aivelle-registered-office {
    font-style: normal;
}

/* =================================================
   AIVELLE Modal Close Button
   Perfectly centred geometric X
================================================= */

.privacy-modal-close,
.terms-modal-close {
    position: relative;

    /*
     * Hide the font-rendered × while retaining
     * the button's accessible label / markup.
     */
    font-size: 0;
    line-height: 0;
}


/* Draw the two strokes of the X */
.privacy-modal-close::before,
.privacy-modal-close::after,
.terms-modal-close::before,
.terms-modal-close::after {
    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    width: 17px;
    height: 1px;

    background: currentColor;

    transform-origin: center;
}


.privacy-modal-close::before,
.terms-modal-close::before {
    transform:
        translate(-50%, -50%)
        rotate(45deg);
}


.privacy-modal-close::after,
.terms-modal-close::after {
    transform:
        translate(-50%, -50%)
        rotate(-45deg);
}

/* =================================================
   AIVELLE — Shared Style Study navigation dropdown
   Added 06 September 2026
================================================= */

.style-study-nav { position:relative; display:inline-flex; align-items:center; }

.style-study-nav::after {
    content:"";
    position:absolute;
    left:-20px;
    right:-20px;
    top:100%;
    height:18px;
}

.style-study-nav-trigger {
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:0;
    border:0;
    background:transparent;
    cursor:pointer;
    font:inherit;
}

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

.style-study-nav-trigger {
    font: inherit;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.style-study-nav-trigger:hover::before,
.style-study-nav-trigger:focus-visible::before,
.style-study-nav.is-open .style-study-nav-trigger::before,
.style-study-nav.is-current .style-study-nav-trigger::before { right:0; }

.style-study-nav-trigger:hover,
.style-study-nav-trigger:focus-visible,
.style-study-nav.is-open .style-study-nav-trigger,
.style-study-nav.is-current .style-study-nav-trigger {
    color:var(--accent);
    outline:none;
}

.style-study-nav-trigger i {
    position:relative;
    top:-1px;
    font-size:7px;
    color:var(--accent);
    transition:transform .38s var(--ease);
}

.style-study-nav.is-open .style-study-nav-trigger i { transform:rotate(180deg); }

.style-study-dropdown {
    position:absolute;
    top:calc(100% + 10px);
    left:50%;
    z-index:60;
    width:min(360px,84vw);
    padding:10px;
    border:1px solid rgba(200,162,90,.52);
    background:rgba(9,9,9,.985);
    box-shadow:0 22px 55px rgba(0,0,0,.58);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateX(-50%) translateY(-8px);
    transition:opacity .32s ease, visibility .32s ease, transform .4s var(--ease);
}

.style-study-nav.is-open .style-study-dropdown {
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateX(-50%) translateY(0);
}

.style-study-dropdown::before {
    content:"";
    position:absolute;
    top:-6px;
    left:50%;
    width:11px;
    height:11px;
    border-top:1px solid rgba(200,162,90,.52);
    border-left:1px solid rgba(200,162,90,.52);
    background:#090909;
    transform:translateX(-50%) rotate(45deg);
}

.style-study-dropdown-link {
    display:block;
    padding:15px 16px 14px;
    border-bottom:1px solid rgba(255,255,255,.08);
    color:var(--paper);
    transition:color .35s ease, background-color .35s ease, padding-left .4s var(--ease);
}

.style-study-dropdown-link:last-child { border-bottom:0; }

.style-study-dropdown-link:hover,
.style-study-dropdown-link:focus-visible,
.style-study-dropdown-link.is-current {
    color:var(--accent);
    background:rgba(255,255,255,.025);
    padding-left:21px;
    outline:none;
}

.style-study-dropdown-kicker {
    display:block;
    margin-bottom:5px;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.16em;
    font-size:8px;
    line-height:1.35;
}

.style-study-dropdown-title {
    display:block;
    color:inherit;
    font-size:12px;
    line-height:1.45;
    letter-spacing:.02em;
    text-transform:none;
}

.style-study-dropdown-link::after { display:none !important; }

.mobile-style-study-nav {
    display:grid;
    justify-items:center;
    gap:0;
}

.mobile-style-study-trigger {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:0;
    border:0;
    background:transparent;
    color:var(--paper);
    text-transform:uppercase;
    letter-spacing:.18em;
    font-size:17px;
    line-height:1.4;
    cursor:pointer;
    transition:color .35s ease;
}

.mobile-style-study-trigger:hover,
.mobile-style-study-trigger:focus-visible,
.mobile-style-study-nav.is-open .mobile-style-study-trigger,
.mobile-style-study-nav.is-current .mobile-style-study-trigger {
    color:var(--accent);
    outline:none;
}

.mobile-style-study-trigger i {
    font-size:8px;
    color:var(--accent);
    transition:transform .35s var(--ease);
}

.mobile-style-study-nav.is-open .mobile-style-study-trigger i { transform:rotate(180deg); }

.mobile-style-study-panel {
    display:grid;
    justify-items:center;
    width:min(350px,calc(100vw - 40px));
    max-height:0;
    margin-top:0;
    overflow:hidden;
    opacity:0;
    border:0;
    transition:max-height .5s var(--ease), opacity .3s ease, margin-top .4s var(--ease);
}

.mobile-style-study-nav.is-open .mobile-style-study-panel {
    max-height:360px;
    margin-top:17px;
    opacity:1;
}

.mobile-style-study-link {
    display:block;
    width:100%;
    padding:11px 14px 12px;
    color:var(--mist);
    text-align:center;
    font-size:12px;
    line-height:1.45;
    letter-spacing:.04em;
    transition:color .3s ease, opacity .3s ease;
}

.mobile-style-study-link:hover,
.mobile-style-study-link:focus-visible,
.mobile-style-study-link.is-current {
    color:var(--accent);
    transform:none;
    outline:none;
}

.mobile-style-study-kicker {
    display:block;
    margin-bottom:4px;
    color:var(--muted);
    text-align:center;
    text-transform:uppercase;
    letter-spacing:.16em;
    font-size:8px;
    line-height:1.35;
}

.mobile-style-study-title {
    display:block;
    color:inherit;
    text-align:center;
    font-size:12px;
    line-height:1.45;
    letter-spacing:.02em;
    text-transform:none;
}

@media (max-width:992px) { .style-study-nav { display:none !important; } }
@media (min-width:993px) { .mobile-style-study-nav { display:none !important; } }

@media (prefers-reduced-motion:reduce) {
    .style-study-dropdown,
    .style-study-nav-trigger i,
    .mobile-style-study-panel,
    .mobile-style-study-trigger i,
    .style-study-dropdown-link,
    .mobile-style-study-link { transition:none !important; }
}