/* =================================================
   AIVELLE STYLE STUDY
   The Confidence of Imperfection

   CSS CONTENTS

   01. Design Tokens
   02. Global Foundations
   03. Layout System
   04. Typography
   05. Header and Navigation
   06. Shared Media and Image Treatment
   07. Hero
   08. Opening Statement
   09. Study Sections
   10. Pull Quote
   11. Why Kyoto Matters
   12. Kyoto Gallery
   13. Closing Perspective
   14. Newsletter
   15. Footer
   16. Scroll Reveal and Motion
   17. Privacy Modal
   18. Terms Modal
   19. Tablet
   20. Mobile
   21. Accessibility and Reduced Motion
   22. Print
   23. Editorial Essay Overrides

   Note:
   The original page framework is preserved below.
   The final override layer at the end contains the
   page-specific refinements for the Style Study.
================================================= */


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


/* =================================================
   STYLE STUDY — THE CONFIDENCE OF IMPERFECTION
================================================= */
.study-hero{position:relative;min-height:100svh;display:grid;align-items:end;padding-top:var(--header-height);overflow:hidden;border-bottom:1px solid var(--line)}
.study-hero-media{position:absolute;inset:0}.study-hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 34%;transform:scale(var(--hero-scale,1.05));will-change:transform}
.study-hero-shade{position:absolute;inset:0;opacity:var(--hero-overlay-opacity,1);background:linear-gradient(90deg,rgba(0,0,0,.91),rgba(0,0,0,.26) 64%,rgba(0,0,0,.44)),linear-gradient(to top,rgba(0,0,0,.92),transparent 64%)}
.study-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)}
.study-hero-copy{max-width:1080px;transform:translate3d(0,var(--hero-copy-y,0),0);opacity:var(--hero-copy-opacity,1)}
.study-hero h1{max-width:1020px;margin:0;font-size:clamp(56px,8.6vw,138px);font-weight:400;letter-spacing:-.06em;line-height:.86;text-wrap:balance}
.study-mark{position:absolute;right:var(--page-gutter);bottom:clamp(50px,7vw,96px);z-index:2;color:rgba(255,255,255,.16);font-size:clamp(42px,8vw,122px);line-height:.78;letter-spacing:-.06em;text-align:right;user-select:none}
.study-opening{padding-block:clamp(120px,15vw,220px);border-top:0;background:var(--paper);color:var(--black)}.study-opening-grid{align-items:end}.study-opening-copy{margin:0;font-size:clamp(40px,6vw,92px);line-height:1;letter-spacing:-.05em}.study-opening-copy span{color:#8d672d}.study-opening .section-intro{color:#555550}
.study-feature-grid{align-items:center}.study-feature-grid--reverse{align-items:center}.study-copy{max-width:560px}.study-copy .body-copy+.body-copy{margin-top:18px}.study-image{position:relative;overflow:hidden;background:var(--graphite)}.study-image img{width:100%;height:100%;object-fit:cover}.study-image--landscape{aspect-ratio:16/10}.study-image--portrait{aspect-ratio:3/4}.study-image--closing{aspect-ratio:4/5}.study-image--landscape img{object-position:center 30%}.study-image--portrait img{object-position:center 25%}.study-image--closing img{object-position:center 22%}.study-image:after{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.09);pointer-events:none}.study-caption{display:flex;justify-content:space-between;gap:24px;margin-top:14px;color:var(--muted);text-transform:uppercase;letter-spacing:.16em;font-size:9px}
.study-quote{padding-block:clamp(100px,13vw,190px);background:var(--paper);color:var(--black)}.study-quote blockquote{max-width:1280px;margin:0;font-size:clamp(42px,6.4vw,100px);font-weight:400;letter-spacing:-.055em;line-height:.96}.study-quote blockquote span{display:block;color:#8d672d}
.surroundings{background:var(--black-soft)}.surroundings-image{margin-top:clamp(50px,7vw,100px);aspect-ratio:21/9;overflow:hidden}.surroundings-image img{width:100%;height:100%;object-fit:cover;object-position:center 54%}
.gallery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--grid-gap);margin-top:clamp(54px,7vw,100px)}.gallery-card{margin:0}.gallery-card img{width:100%;aspect-ratio:4/5;object-fit:cover}.gallery-card--wide img{aspect-ratio:16/10}.gallery-card figcaption{margin-top:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.16em;font-size:9px}
.study-close{background:var(--black-soft)}.study-next-link{margin-top:34px}
@media(max-width:992px){.study-mark{display:none}.gallery-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.study-hero{min-height:92svh}.study-hero-media img{object-position:60% center}.study-hero h1{font-size:clamp(52px,16vw,78px);line-height:.9}.study-image--landscape,.study-image--portrait,.study-image--closing{aspect-ratio:4/5}.study-caption{display:grid;gap:5px}.surroundings-image{aspect-ratio:4/5}.gallery-grid{grid-template-columns:1fr}.gallery-card img,.gallery-card--wide img{aspect-ratio:4/5}}

/* =================================================
   23. EDITORIAL ESSAY OVERRIDES
   Final page-specific refinements
================================================= */


/* -------------------------------------------------
   23.1 Opening statement
-------------------------------------------------- */

.study-opening {

    padding-block:
        clamp(
            110px,
            14vw,
            210px
        );

    border-top:
        0;

}


.study-opening-layout {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    max-width:
        1180px;

    margin-inline:
        auto;

}


.study-opening-copy {

    max-width:
        1120px;

    margin:
        0;

    color:
        var(--black);

    font-size:
        clamp(
            42px,
            6vw,
            94px
        );

    font-weight:
        400;

    line-height:
        1.02;

    letter-spacing:
        -.05em;

    text-align:
        left;

}


.study-opening-copy span {

    color:
        #8b8b86;

}


.study-opening-text {

    width:
        min(
            100%,
            650px
        );

    margin-top:
        clamp(
            58px,
            7vw,
            92px
        );

    margin-bottom:
        0;

    text-align:
        left;

}


.study-opening-text .eyebrow {

    margin:
        0 0 24px;

}


.study-opening-text .section-intro {

    max-width:
        620px;

    margin:
        0;

    color:
        #4d4d49;

    font-size:
        clamp(
            18px,
            1.55vw,
            23px
        );

    line-height:
        1.75;

}


.study-opening-text .body-copy {

    max-width:
        620px;

    margin:
        26px 0 0;

    color:
        #62625d;

    font-size:
        16px;

    line-height:
        1.95;

}


/* -------------------------------------------------
   23.2 Long-form essay typography
-------------------------------------------------- */

.study-copy--essay {

    max-width:
        590px;

}


.study-copy--essay .section-intro,
.study-copy--essay .body-copy {

    max-width:
        560px;

}


.study-copy--essay .body-copy {

    margin:
        0;

    color:
        var(--mist);

    font-size:
        16px;

    line-height:
        1.95;

}


.study-copy--essay .section-intro + .body-copy,
.study-copy--essay .body-copy + .body-copy {

    margin-top:
        25px;

}


.study-copy--essay strong {

    color:
        var(--paper);

    font-weight:
        400;

}


/* -------------------------------------------------
   23.3 Section-specific alignment
-------------------------------------------------- */

.surroundings .study-copy--essay {

    align-self:
        start;

}


.study-close .study-copy--essay {

    align-self:
        center;

}


.study-next-link {

    margin-top:
        38px;

}


/* -------------------------------------------------
   23.4 Tablet refinements
-------------------------------------------------- */

@media (
    max-width: 992px
) {

    .study-opening-layout {

        max-width:
            900px;

    }


    .study-opening-text {

        max-width:
            680px;

    }


    .study-copy--essay {

        max-width:
            none;

    }


    .study-copy--essay .section-intro,
    .study-copy--essay .body-copy {

        max-width:
            680px;

    }

}


/* -------------------------------------------------
   23.5 Mobile refinements
-------------------------------------------------- */

@media (
    max-width: 600px
) {

    .study-opening {

        padding-block:
            92px;

    }


    .study-opening-copy {

        font-size:
            clamp(
                38px,
                12vw,
                60px
            );

        line-height:
            1.04;

    }


    .study-opening-text {

        margin-top:
            48px;

    }


    .study-opening-text .section-intro {

        font-size:
            17px;

        line-height:
            1.72;

    }


    .study-opening-text .body-copy {

        margin-top:
            22px;

        font-size:
            15px;

        line-height:
            1.88;

    }


    .study-copy--essay .body-copy {

        font-size:
            15px;

        line-height:
            1.9;

    }


    .study-copy--essay .section-intro + .body-copy,
    .study-copy--essay .body-copy + .body-copy {

        margin-top:
            21px;

    }

}


/* =================================================
   AIVELLE STYLE STUDY — iPad portrait refinement
   The Confidence of Imperfection

   Scope:
   601px–1024px, portrait only.
   Desktop, landscape tablet and mobile <=600px
   remain unchanged.
================================================= */

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

    /* =================================================
       STUDY 01 — CLOTHES THAT HAVE ALREADY LIVED

       Order:
       eyebrow + title
       first two paragraphs
       large full-width image
       final three paragraphs
    ================================================= */

    #imperfection-patina {
        padding-block: clamp(92px, 10vw, 128px);
    }

    #imperfection-patina .study-feature-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
        align-items: start;
    }

    #imperfection-patina .study-copy--essay {
        display: contents;
    }

    #imperfection-patina .study-copy--essay > .eyebrow {
        grid-column: 1;
        grid-row: 1;
        margin-bottom: 22px;
    }

    #imperfection-patina .study-copy--essay > .editorial-title {
        grid-column: 1;
        grid-row: 2;

        width: 100%;
        max-width: 900px;

        font-size: clamp(44px, 5.6vw, 60px);
        line-height: 1.01;
    }

    #imperfection-patina .study-copy--essay > .accent-line {
        grid-column: 1;
        grid-row: 3;

        margin-block: 24px 28px;
    }

    #imperfection-patina .study-copy--essay > .body-copy:nth-of-type(2) {
        grid-column: 1;
        grid-row: 4;
    }

    #imperfection-patina .study-copy--essay > .body-copy:nth-of-type(3) {
        grid-column: 1;
        grid-row: 5;
    }

    #imperfection-patina .study-copy--essay > .body-copy:nth-of-type(2),
    #imperfection-patina .study-copy--essay > .body-copy:nth-of-type(3) {
        width: 100%;
        max-width: 920px;

        margin: 0 0 24px;

        font-size: clamp(16px, 1.9vw, 19px);
        line-height: 1.75;
    }

    #imperfection-patina .study-feature-grid > .span-7 {
        grid-column: 1;
        grid-row: 6;

        width: min(100%, 940px);
        max-width: 940px;

        margin:
            clamp(30px, 4vw, 46px)
            auto
            clamp(38px, 5vw, 58px);
    }

    #imperfection-patina .study-image--landscape {
        width: 100%;
        aspect-ratio: 16 / 10;
    }

    #imperfection-patina .study-copy--essay > .body-copy:nth-of-type(4) {
        grid-column: 1;
        grid-row: 7;
    }

    #imperfection-patina .study-copy--essay > .body-copy:nth-of-type(5) {
        grid-column: 1;
        grid-row: 8;
    }

    #imperfection-patina .study-copy--essay > .body-copy:nth-of-type(6) {
        grid-column: 1;
        grid-row: 9;
    }

    #imperfection-patina .study-copy--essay > .body-copy:nth-of-type(n+4) {
        width: 100%;
        max-width: 920px;

        margin: 0 0 24px;

        font-size: clamp(16px, 1.9vw, 19px);
        line-height: 1.75;
    }


    /* =================================================
       STUDY 02 — MOVEMENT BEFORE PERFECTION

       Same composition as Study 01.
    ================================================= */

    #imperfection-movement {
        padding-block: clamp(92px, 10vw, 128px);
    }

    #imperfection-movement .study-feature-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
        align-items: start;
    }

    #imperfection-movement .study-copy--essay {
        display: contents;
    }

    #imperfection-movement .study-copy--essay > .eyebrow {
        grid-column: 1;
        grid-row: 1;
        margin-bottom: 22px;
    }

    #imperfection-movement .study-copy--essay > .editorial-title {
        grid-column: 1;
        grid-row: 2;

        width: 100%;
        max-width: 900px;

        font-size: clamp(44px, 5.6vw, 60px);
        line-height: 1.01;
    }

    #imperfection-movement .study-copy--essay > .accent-line {
        grid-column: 1;
        grid-row: 3;

        margin-block: 24px 28px;
    }

    #imperfection-movement .study-copy--essay > .body-copy:nth-of-type(2) {
        grid-column: 1;
        grid-row: 4;
    }

    #imperfection-movement .study-copy--essay > .body-copy:nth-of-type(3) {
        grid-column: 1;
        grid-row: 5;
    }

    #imperfection-movement .study-copy--essay > .body-copy:nth-of-type(2),
    #imperfection-movement .study-copy--essay > .body-copy:nth-of-type(3) {
        width: 100%;
        max-width: 920px;

        margin: 0 0 24px;

        font-size: clamp(16px, 1.9vw, 19px);
        line-height: 1.75;
    }

    #imperfection-movement .study-feature-grid > .span-7 {
        grid-column: 1;
        grid-row: 6;

        width: min(100%, 900px);
        max-width: 900px;

        margin:
            clamp(30px, 4vw, 46px)
            auto
            clamp(38px, 5vw, 58px);
    }

    #imperfection-movement .study-image--portrait {
        width: 100%;
        aspect-ratio: 4 / 5;
    }

    #imperfection-movement .study-image--portrait img {
        object-position: center 28%;
    }

    #imperfection-movement .study-copy--essay > .body-copy:nth-of-type(4) {
        grid-column: 1;
        grid-row: 7;
    }

    #imperfection-movement .study-copy--essay > .body-copy:nth-of-type(5) {
        grid-column: 1;
        grid-row: 8;
    }

    #imperfection-movement .study-copy--essay > .body-copy:nth-of-type(6) {
        grid-column: 1;
        grid-row: 9;
    }

    #imperfection-movement .study-copy--essay > .body-copy:nth-of-type(n+4) {
        width: 100%;
        max-width: 920px;

        margin: 0 0 24px;

        font-size: clamp(16px, 1.9vw, 19px);
        line-height: 1.75;
    }


    /* =================================================
       WHY KYOTO MATTERS

       Eyebrow + title
       essay copy
       full-width image beneath
    ================================================= */

    #imperfection-kyoto-context {
        padding-block: clamp(92px, 10vw, 128px);
    }

    #imperfection-kyoto-context .aivelle-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
    }

    #imperfection-kyoto-context .aivelle-grid > .span-5:first-child {
        grid-column: 1;
        grid-row: 1;

        width: 100%;
        max-width: 900px;
    }

    #imperfection-kyoto-context .aivelle-grid > .study-copy--essay {
        grid-column: 1;
        grid-row: 2;

        width: 100%;
        max-width: 920px;

        margin-top: clamp(30px, 4vw, 46px);
    }

    #imperfection-kyoto-context .section-heading {
        max-width: 900px;

        font-size: clamp(48px, 6vw, 66px);
        line-height: .98;
    }

    #imperfection-kyoto-context .section-intro,
    #imperfection-kyoto-context .body-copy {
        width: 100%;
        max-width: 920px;

        line-height: 1.75;
    }

    #imperfection-kyoto-context .aivelle-grid > .span-12 {
        grid-column: 1;
        grid-row: 3;

        width: min(100%, 960px);
        max-width: 960px;

        margin:
            clamp(42px, 5.5vw, 64px)
            auto
            0;
    }

    #imperfection-kyoto-context .aivelle-grid > .span-12 img {
        width: 100%;
        height: auto;
    }


    /* =================================================
       THE AIVELLE PERSPECTIVE

       Eyebrow + title
       full-width image
       all paragraphs below
       continuation link last
    ================================================= */

    #imperfection-closing {
        padding-block: clamp(92px, 10vw, 128px);
    }

    #imperfection-closing .study-feature-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
        align-items: start;
    }

    #imperfection-closing .study-copy--essay {
        display: contents;
    }

    #imperfection-closing .study-copy--essay > .eyebrow {
        grid-column: 1;
        grid-row: 1;
        margin-bottom: 22px;
    }

    #imperfection-closing .study-copy--essay > .editorial-title {
        grid-column: 1;
        grid-row: 2;

        width: 100%;
        max-width: 900px;

        font-size: clamp(44px, 5.7vw, 62px);
        line-height: 1.01;
    }

    #imperfection-closing .study-copy--essay > .accent-line {
        grid-column: 1;
        grid-row: 3;

        margin-block: 24px 30px;
    }

    #imperfection-closing .study-feature-grid > .span-7 {
        grid-column: 1;
        grid-row: 4;

        width: min(100%, 920px);
        max-width: 920px;

        margin:
            0
            auto
            clamp(42px, 5.5vw, 64px);
    }

    #imperfection-closing .study-image--closing {
        width: 100%;
        aspect-ratio: 16 / 10;
    }

    #imperfection-closing .study-image--closing img {
        object-position: center 30%;
    }

    #imperfection-closing .study-copy--essay > .body-copy:nth-of-type(2) {
        grid-column: 1;
        grid-row: 5;
    }

    #imperfection-closing .study-copy--essay > .body-copy:nth-of-type(3) {
        grid-column: 1;
        grid-row: 6;
    }

    #imperfection-closing .study-copy--essay > .body-copy:nth-of-type(4) {
        grid-column: 1;
        grid-row: 7;
    }

    #imperfection-closing .study-copy--essay > .body-copy:nth-of-type(5) {
        grid-column: 1;
        grid-row: 8;
    }

    #imperfection-closing .study-copy--essay > .body-copy:nth-of-type(6) {
        grid-column: 1;
        grid-row: 9;
    }

    #imperfection-closing .study-copy--essay > .body-copy {
        width: 100%;
        max-width: 920px;

        margin: 0 0 24px;

        font-size: clamp(16px, 1.9vw, 19px);
        line-height: 1.75;
    }

    #imperfection-closing .study-next-link {
        grid-column: 1;
        grid-row: 10;

        margin-top: clamp(18px, 2.5vw, 30px);
    }


    /* -------------------------------------------------
       Shorter portrait tablet viewports
    -------------------------------------------------- */

    @media (max-height: 1080px) {

        #imperfection-patina,
        #imperfection-movement,
        #imperfection-kyoto-context,
        #imperfection-closing {
            padding-block: clamp(82px, 8.8vw, 108px);
        }

    }

}