/* main index page */


    :root {
      --ink: #12191d;
      --sage: #71838d;
      --sage-deep: #415662;
      --cream: #f3eee6;
      --paper: #fffaf3;
      --blush: #f4b27f;
      --rose: #bf4b18;
      --gold: #ff8a34;
      --slate: #526572;
      --mist: #c6ced0;
      --line: rgba(18, 25, 29, .16);
      --shadow: 0 24px 70px rgba(18, 25, 29, .16)
    }

    * {
      box-sizing: border-box
    }

    html {
      scroll-behavior: smooth
    }

    body {
      margin: 0;
      background: var(--cream);
      color: var(--ink);
      font-family: Georgia, 'Times New Roman', serif;
      line-height: 1.6
    }

    body.locked {
      overflow: hidden
    }

    a {
      color: inherit
    }

    button,
    input,
    textarea {
      font: inherit
    }

    .wrap {
      width: min(1160px, calc(100% - 40px));
      margin: auto
    }

    .eyebrow {
      display: flex;
      gap: 12px;
      align-items: center;
      color: var(--sage-deep);
      font-size: .72rem;
      font-weight: bold;
      letter-spacing: .2em;
      text-transform: uppercase
    }

    .eyebrow:before {
      content: "";
      width: 34px;
      height: 1px;
      background: var(--gold)
    }

    html {
      overflow-x: hidden;
    }

    .loader {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: grid;
      place-items: center;
      background: radial-gradient(circle at 50% 35%, #283740 0, #12191d 48%, #080b0d 100%);
      color: var(--paper);
      transition: clip-path 1s cubic-bezier(.77, 0, .18, 1), visibility 1s;
      clip-path: inset(0 0 0 0)
    }

    .loader.done {
      clip-path: inset(0 0 100% 0);
      visibility: hidden
    }

    .loader-inner {
      text-align: center;
      width: min(780px, 92vw)
    }

    .loader-logo {
      width: 104px;
      height: 104px;
      object-fit: contain;
      filter: drop-shadow(0 22px 30px rgba(0, 0, 0, .4));
      animation: logoFloat 1.8s ease-in-out infinite
    }

    .loader-mark {
      font-size: .72rem;
      letter-spacing: .38em;
      text-transform: uppercase;
      margin: 14px 0 28px;
      color: #f2cab0
    }

    .keys {
      position: relative;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      height: 142px;
      filter: drop-shadow(0 24px 25px rgba(0, 0, 0, .42));
      perspective: 900px
    }

    .key {
      position: relative;
      width: 52px;
      height: 130px;
      background: linear-gradient(90deg, #d8d8d3, #fff 14%, #fffdf7 72%, #d2d1cc);
      border: 1px solid #73797b;
      border-radius: 0 0 7px 7px;
      transform-origin: top;
      animation: press 1.5s infinite cubic-bezier(.6, 0, .2, 1)
    }

    .key:nth-child(2) {
      animation-delay: .1s
    }

    .key:nth-child(3) {
      animation-delay: .2s
    }

    .key:nth-child(4) {
      animation-delay: .3s
    }

    .key:nth-child(5) {
      animation-delay: .4s
    }

    .key:nth-child(6) {
      animation-delay: .5s
    }

    .key:nth-child(7) {
      animation-delay: .6s
    }

    .key:nth-child(8) {
      animation-delay: .7s
    }

    .key:nth-child(9) {
      animation-delay: .8s
    }

    .key:nth-child(10) {
      animation-delay: .9s
    }

    .key.black {
      z-index: 2;
      width: 31px;
      height: 82px;
      margin: 0 -16px;
      background: linear-gradient(90deg, #050607, #283037 45%, #080a0b);
      border-color: #030405;
      border-radius: 0 0 5px 5px;
      animation-name: pressBlack
    }

    .loader p {
      margin: 3px 0 13px;
      font-style: italic;
      color: #c6ced0
    }

    .loader-progress {
      height: 2px;
      background: rgba(255, 255, 255, .15);
      overflow: hidden;
      width: min(430px, 75vw);
      margin: auto
    }

    .loader-progress span {
      display: block;
      height: 100%;
      width: 0;
      background: linear-gradient(90deg, var(--rose), var(--gold));
      animation: loadbar 3s cubic-bezier(.2, .8, .2, 1) forwards
    }

    .loader-count {
      margin-top: 10px;
      color: #f6d2b7;
      font-size: .65rem;
      letter-spacing: .2em
    }

    @keyframes press {

      0%,
      45%,
      100% {
        transform: rotateX(0) translateY(0)
      }

      18% {
        transform: rotateX(-7deg) translateY(12px);
        box-shadow: inset 0 8px 14px #b9b9b5
      }
    }

    @keyframes pressBlack {

      0%,
      45%,
      100% {
        transform: rotateX(0) translateY(0)
      }

      18% {
        transform: rotateX(-9deg) translateY(10px)
      }
    }

    @keyframes logoFloat {
      50% {
        transform: translateY(-8px) rotate(2deg)
      }
    }

    @keyframes loadbar {
      to {
        width: 100%
      }
    }

    .topline {
      background: var(--ink);
      color: #eef4ef;
      font-size: .73rem;
      letter-spacing: .08em
    }

    .topline .wrap {
      height: 34px;
      display: flex;
      align-items: center;
      justify-content: space-between
    }

    .topline a {
      text-decoration: none
    }

    .nav {
      position: absolute;
      z-index: 10;
      left: 0;
      right: 0;
      border-bottom: 1px solid rgba(255, 255, 255, .27);
      color: white
    }

    .nav-inner {
      height: 92px;
      display: flex;
      align-items: center;
      justify-content: space-between
    }

    .brand {
      display: flex;
      gap: 12px;
      align-items: center;
      text-decoration: none
    }

    .monogram {
      display: grid;
      place-items: center;
      width: 47px;
      height: 47px;
      border: 1px solid rgba(255, 255, 255, .65);
      border-radius: 50%;
      font-size: 1.25rem;
      font-style: italic
    }

    .brand strong {
      display: block;
      font-size: 1.06rem;
      font-weight: normal;
      letter-spacing: .08em
    }

    .brand small {
      display: block;
      font-size: .62rem;
      letter-spacing: .18em;
      text-transform: uppercase;
      opacity: .75
    }

    .nav-links {
      display: flex;
      gap: 30px;
      align-items: center
    }

    .nav-links a {
      text-decoration: none;
      font-size: .83rem;
      letter-spacing: .07em
    }

    .header_btn {
      padding: 11px 20px;
      border: 1px solid rgba(255, 255, 255, .72);
      border-radius: 99px;
      text-decoration: none;
      font-size: .83rem;
      letter-spacing: .07em
    }

    .menu {
      display: none;
      background: none;
      border: 0;
      color: white;
      font-size: 1.5rem
    }

    .hero {
      position: relative;
      min-height: 760px;
      display: grid;
      align-items: end;
      color: white;
      background: linear-gradient(90deg, rgba(25, 36, 31, .82) 0%, rgba(25, 36, 31, .6) 42%, rgba(25, 36, 31, .12) 72%), url('https://images.unsplash.com/photo-1520523839897-bd0b52f945a0?auto=format&fit=crop&w=2000&q=88') center/cover
    }

    .hero:after {
      content: "";
      position: absolute;
      inset: auto 0 0;
      height: 150px;
      background: linear-gradient(transparent, var(--cream))
    }

    .hero-content {
      position: relative;
      z-index: 2;
      max-width: 760px;
      padding: 190px 0 120px
    }

    .hero .eyebrow {
      color: #dbe9de
    }

    .hero h1 {
      font-size: clamp(3.6rem, 7.5vw, 7.2rem);
      line-height: .94;
      font-weight: normal;
      letter-spacing: -.045em;
      margin: 22px 0 28px
    }

    .hero h1 em {
      color: #e6cfc5;
      font-weight: normal
    }

    .hero p {
      max-width: 600px;
      font-size: 1.15rem;
      color: #edf2ee
    }

    .actions {
      display: flex;
      gap: 14px;
      margin-top: 36px
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      border: 1px solid var(--sage-deep);
      background: var(--sage-deep);
      color: white;
      padding: 14px 24px;
      border-radius: 99px;
      font-size: .8rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      transition: .25s
    }

    .btn:hover {
      transform: translateY(-2px);
      background: var(--ink)
    }

    .btn.light {
      background: transparent;
      border-color: rgba(255, 255, 255, .65)
    }

    section {
      padding: 110px 0
    }

    .intro-grid {
      display: grid;
      grid-template-columns: .86fr 1.14fr;
      gap: 90px;
      align-items: center
    }

    .portrait {
      position: relative
    }

    .portrait img {
      display: block;
      width: 100%;
      aspect-ratio: 4/5;
      object-fit: cover;
      border-radius: 48% 48% 8px 8px;
      filter: saturate(.68) sepia(.08)
    }

    .portrait:before {
      content: "45+ years\A of teaching";
      white-space: pre;
      position: absolute;
      z-index: 2;
      right: -28px;
      bottom: 50px;
      width: 130px;
      height: 130px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      text-align: center;
      line-height: 1.25;
      background: var(--blush);
      color: var(--ink);
      font-size: .82rem;
      letter-spacing: .06em;
      box-shadow: var(--shadow)
    }

    .section-title {
      font-size: clamp(2.5rem, 5vw, 4.7rem);
      line-height: 1.06;
      font-weight: normal;
      letter-spacing: -.035em;
      margin: 18px 0 25px
    }

    .section-title em {
      color: var(--rose);
      font-weight: normal
    }

    .lead {
      font-size: 1.12rem;
      color: #55635d
    }

    .signature {
      font-size: 1.55rem;
      font-style: italic;
      color: var(--sage-deep);
      margin-top: 30px
    }

    .credentials {
      font-size: .73rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: #6d7772
    }

    .programs {
      background: #e8efe9
    }

    .program-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 30px;
      margin-bottom: 48px
    }

    .program-head p {
      max-width: 400px
    }

    .cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px
    }

    .card {
      min-height: 370px;
      padding: 36px 30px;
      display: flex;
      flex-direction: column;
      background: rgba(255, 253, 248, .82);
      border: 1px solid rgba(255, 255, 255, .8);
      border-radius: 180px 180px 12px 12px;
      text-align: center;
      box-shadow: 0 15px 45px rgba(73, 97, 83, .07)
    }

    .card .num {
      color: var(--rose);
      font-style: italic
    }

    .card h3 {
      font-size: 1.75rem;
      font-weight: normal;
      margin: 55px 0 13px
    }

    .card p {
      color: #627069;
      font-size: .92rem
    }

    .card a {
      margin-top: auto;
      text-transform: uppercase;
      letter-spacing: .12em;
      font-size: .7rem;
      text-underline-offset: 5px
    }

    .quote {
      padding: 90px 0;
      background: var(--blush);
      text-align: center
    }

    .quote blockquote {
      max-width: 900px;
      margin: 0 auto;
      font-size: clamp(1.7rem, 3.4vw, 3rem);
      line-height: 1.3;
      font-weight: normal
    }

    .quote cite {
      display: block;
      margin-top: 24px;
      font-style: normal;
      font-size: .72rem;
      letter-spacing: .17em;
      text-transform: uppercase;
      color: #755d58
    }

    .journey-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: start
    }

    .steps {
      border-top: 1px solid var(--line)
    }

    .step {
      display: grid;
      grid-template-columns: 48px 1fr;
      gap: 20px;
      padding: 25px 0;
      border-bottom: 1px solid var(--line)
    }

    .step span {
      color: var(--rose);
      font-style: italic
    }

    .step h3 {
      margin: 0 0 6px;
      font-weight: normal;
      font-size: 1.25rem
    }

    .step p {
      margin: 0;
      color: #65716b;
      font-size: .92rem
    }

    .tuition-note {
      margin-top: 30px;
      padding: 22px 25px;
      border-left: 3px solid var(--gold);
      background: white
    }

    .tuition-note strong {
      display: block;
      font-weight: normal;
      font-size: 1.25rem
    }

    .tuition-note small {
      color: #68746d
    }

    .calendar {
      background: var(--ink);
      color: #f7f4ec
    }

    .calendar .eyebrow {
      color: #bfd0c4
    }

    .calendar-head {
      display: flex;
      justify-content: space-between;
      align-items: end;
      gap: 30px
    }

    .calendar .section-title {
      margin-bottom: 0
    }

    .event-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-top: 48px
    }

    .event {
      padding: 30px;
      border: 1px solid rgba(255, 255, 255, .15);
      border-radius: 8px;
      background: rgba(255, 255, 255, .035)
    }

    .date {
      color: #e5c3ba;
      font-style: italic
    }

    .event h3 {
      font-weight: normal;
      font-size: 1.3rem;
      margin: 14px 0 8px
    }

    .event p {
      margin: 0;
      color: #bfcac3;
      font-size: .88rem
    }

    .calendar-note {
      margin-top: 28px;
      color: #afbbb3;
      font-size: 1rem
    }

    .contact-grid {
      display: grid;
      grid-template-columns: .85fr 1.15fr;
      gap: 80px
    }

    .contact-list {
      margin-top: 35px
    }

    .contact-list a,
    .contact-list address {
      display: block;
      margin: 10px 0;
      text-decoration: none;
      font-style: normal
    }

    .contact-card {
      background: white;
      padding: 40px;
      border-radius: 12px;
      box-shadow: var(--shadow)
    }

    .field-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 15px
    }

    .contact-card label {
      display: block;
      font-size: .68rem;
      text-transform: uppercase;
      letter-spacing: .12em;
      margin: 13px 0 6px
    }

    .contact-card input,
    .contact-card textarea {
      width: 100%;
      padding: 13px 2px;
      border: 0;
      border-bottom: 1px solid #bfc9c2;
      background: transparent;
      outline: none
    }

    .contact-card textarea {
      min-height: 95px;
      resize: vertical
    }

    .contact-card .btn {
      margin-top: 25px;
      border: 0;
      cursor: pointer
    }

    .form_btn_logo {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .form_logo {
        margin-top: 15px;
        display: flex;
        gap: 10px;
        align-items: center;
        text-decoration: none;
      }
    }

    footer {
      background: #1d2823;
      color: #d5dfd8;
      padding: 26px 0
    }

    .footer-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 30px
    }

    .footer-inner p {
      margin: 0;
      color: #91a096;
      font-size: .74rem
    }

    .footer-inner a {
      text-decoration: none;
      margin-left: 20px;
      font-size: .75rem
    }

    .reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: .8s ease
    }

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

    .piano-line {
      display: inline-flex;
      gap: .08em;
      align-items: center
    }

    .piano-line .white-key,
    .piano-line .black-key {
      display: inline-block;
      padding: .02em .14em .09em;
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone
    }

    .piano-line .white-key {
      background: #fff;
      color: #1a211e;
      box-shadow: inset 0 -4px 0 #d9d9d4
    }

    .piano-line .black-key {
      background: #111815;
      color: #fff;
      box-shadow: inset 0 -4px 0 #000
    }

    .piano-line span {
      transition: transform .35s, box-shadow .35s
    }

    .piano-line:hover span:nth-child(odd) {
      transform: translateY(5px)
    }

    .piano-line:hover span:nth-child(even) {
      transform: translateY(-4px)
    }

    .nav-links a:not(.button) {
      position: relative
    }

    .nav-links a:not(.button):after {
      content: "";
      position: absolute;
      left: 0;
      right: 100%;
      bottom: -8px;
      height: 1px;
      background: #fff;
      transition: right .35s
    }

    .nav-links a:hover:after {
      right: 0
    }

    .monogram {
      transition: .5s cubic-bezier(.2, .8, .2, 1)
    }

    .brand:hover .monogram {
      background: #fff;
      color: #111;
      transform: rotate(-9deg) scale(1.08)
    }

    .card {
      transition: transform .55s cubic-bezier(.2, .8, .2, 1), box-shadow .55s
    }

    .card:hover {
      transform: translateY(-16px) rotateX(3deg);
      box-shadow: 0 30px 70px rgba(39, 52, 47, .17)
    }

    .event {
      transition: .4s
    }

    .event:hover {
      transform: translateY(-7px);
      background: #fff;
      color: var(--ink);
      border-color: #fff
    }

    .event:hover p {
      color: #5d6963
    }

    .btn {
      overflow: hidden;
      position: relative
    }

    .btn:after {
      content: "→";
      margin-left: 0;
      width: 0;
      opacity: 0;
      transition: .3s
    }

    .btn:hover:after {
      margin-left: 12px;
      width: auto;
      opacity: 1
    }

    .pricing {
      background: var(--paper);
      position: relative;
      overflow: hidden
    }

    .pricing:before {
      content: "88";
      position: absolute;
      right: -30px;
      top: -100px;
      color: rgba(39, 52, 47, .035);
      font-size: 25rem;
      line-height: 1
    }

    .price-grid {
      display: grid;
      grid-template-columns: 1.2fr 1fr 1fr;
      gap: 1px;
      background: var(--ink);
      border: 1px solid var(--ink);
      margin-top: 45px
    }

    .price-card {
      position: relative;
      background: var(--paper);
      padding: 40px;
      min-height: 380px;
      display: flex;
      flex-direction: column;
      transition: .45s
    }

    .price-card.featured {
      background: var(--ink);
      color: white
    }

    .price-card:hover {
      z-index: 2;
      transform: scale(1.025);
      box-shadow: var(--shadow)
    }

    .price-card .label {
      font-size: .68rem;
      text-transform: uppercase;
      letter-spacing: .17em;
      color: var(--rose)
    }

    .price {
      font-size: 3.8rem;
      line-height: 1;
      margin: 35px 0 8px
    }

    .price sup {
      font-size: 1.1rem;
      vertical-align: top
    }

    .price small {
      font-size: .9rem;
      color: #78847e
    }

    .featured .price small {
      color: #b5c1ba
    }

    .price-card ul {
      padding: 0;
      margin: 26px 0;
      list-style: none
    }

    .price-card li {
      padding: 8px 0;
      border-bottom: 1px solid var(--line);
      font-size: .88rem
    }

    .featured li {
      border-color: rgba(255, 255, 255, .14)
    }

    .price-card a {
      margin-top: auto;
      text-transform: uppercase;
      letter-spacing: .13em;
      font-size: .7rem;
      text-underline-offset: 5px
    }

    .policy-section {
      background: #ebe1dc
    }

    .policy-grid {
      display: grid;
      grid-template-columns: .72fr 1.28fr;
      gap: 75px
    }

    .policy-list details {
      border-top: 1px solid rgba(39, 52, 47, .22);
      padding: 20px 0
    }

    .policy-list details:last-child {
      border-bottom: 1px solid rgba(39, 52, 47, .22)
    }

    .policy-list summary {
      cursor: pointer;
      font-size: 1.2rem;
      list-style: none;
      display: flex;
      justify-content: space-between
    }

    .policy-list summary:after {
      content: "+";
      transition: .3s
    }

    .policy-list details[open] summary:after {
      transform: rotate(45deg)
    }

    .policy-list p {
      max-width: 700px;
      color: #5d6863;
      font-size: .9rem
    }

    .schedule-tools {
      display: flex;
      flex-wrap: wrap;
      gap: 9px;
      margin-top: 40px
    }

    .filter {
      border: 1px solid rgba(255, 255, 255, .25);
      background: transparent;
      color: white;
      border-radius: 99px;
      padding: 9px 17px;
      cursor: pointer;
      font-size: .7rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      transition: .3s
    }

    .filter:hover,
    .filter.active {
      background: white;
      color: var(--ink)
    }

    .schedule-list {
      margin-top: 35px;
      border-top: 1px solid rgba(255, 255, 255, .17)
    }

    .schedule-item {
      display: grid;
      grid-template-columns: 155px 130px 1fr auto;
      gap: 28px;
      align-items: center;
      padding: 21px 12px;
      border-bottom: 1px solid rgba(255, 255, 255, .12);
      transition: .35s
    }

    .schedule-item:hover {
      background: white;
      color: var(--ink);
      padding-left: 24px
    }

    .schedule-item.hidden {
      display: none
    }

    .schedule-date {
      color: #e6c4bb;
      font-style: italic
    }

    .schedule-item:hover .schedule-date {
      color: var(--rose)
    }

    .schedule-day {
      color: #94a59a;
      font-size: .73rem;
      letter-spacing: .08em;
      text-transform: uppercase
    }

    .schedule-name {
      font-size: 1.05rem
    }

    .schedule-time {
      font-size: .76rem;
      color: #aebbb3;
      text-align: right
    }

    .schedule-item:hover .schedule-time {
      color: #5f6c65
    }

    .schedule-tag {
      display: inline-block;
      font-size: .6rem;
      text-transform: uppercase;
      letter-spacing: .12em;
      border: 1px solid currentColor;
      border-radius: 99px;
      padding: 4px 8px;
      margin-left: 9px;
      opacity: .7
    }

    .depth-scene {
      transform: perspective(1200px) translateZ(var(--depth, 0px)) scale(var(--zoom, 1));
      transform-origin: center;
      will-change: transform
    }

    .hero {
      overflow: hidden
    }

    .hero:before {
      content: "";
      position: absolute;
      inset: -5%;
      background: inherit;
      background-attachment: fixed;
      transform: scale(var(--hero-zoom, 1.05));
      transition: transform .1s linear
    }

    .hero>* {
      position: relative
    }

    .scroll-cue {
      position: absolute;
      z-index: 3;
      right: 34px;
      bottom: 75px;
      writing-mode: vertical-rl;
      font-size: .62rem;
      letter-spacing: .2em;
      text-transform: uppercase
    }

    .scroll-cue:after {
      content: "";
      display: inline-block;
      width: 1px;
      height: 60px;
      margin-top: 12px;
      background: rgba(255, 255, 255, .55)
    }

    .brand-logo {
      width: 58px;
      height: 58px;
      object-fit: contain;
      filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .22));
      transition: .5s
    }

    .brand:hover .brand-logo {
      transform: translateY(-4px) rotate(-4deg) scale(1.08)
    }

    .hero {
      background: linear-gradient(90deg, rgba(12, 17, 20, .91) 0%, rgba(24, 31, 34, .71) 45%, rgba(18, 25, 29, .16) 75%), url('https://images.unsplash.com/photo-1520523839897-bd0b52f945a0?auto=format&fit=crop&w=2000&q=88') center/cover
    }

    .hero h1 em {
      color: #ffad73
    }

    .hero-orbit {
      position: absolute !important;
      z-index: 2;
      right: 8vw;
      top: 25%;
      width: 260px;
      height: 260px;
      border: 1px solid rgba(255, 138, 52, .45);
      border-radius: 50%;
      animation: orbit 12s linear infinite
    }

    .hero-orbit:before,
    .hero-orbit:after {
      content: "";
      position: absolute;
      border-radius: 50%
    }

    .hero-orbit:before {
      width: 16px;
      height: 16px;
      background: var(--gold);
      top: 18px;
      left: 48px;
      box-shadow: 0 0 28px var(--gold)
    }

    .hero-orbit:after {
      inset: 28px;
      border: 1px dashed rgba(198, 206, 208, .34);
      animation: orbit 8s linear infinite reverse
    }

    .hero-mark {
      position: absolute !important;
      right: calc(8vw + 50px);
      top: calc(25% + 50px);
      width: 160px;
      height: 160px;
      object-fit: contain;
      z-index: 3;
      opacity: .84;
      filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .35));
      animation: heroMark 5s ease-in-out infinite
    }

    .topline {
      background: #0b1013
    }

    .nav {
      transition: background .45s, transform .45s, box-shadow .45s
    }

    .nav.scrolled {
      position: fixed;
      top: 0;
      background: rgba(18, 25, 29, .9);
      backdrop-filter: blur(18px);
      box-shadow: 0 10px 35px rgba(0, 0, 0, .18);
      animation: navDrop .5s both
    }

    .nav.scrolled .nav-inner {
      height: 72px
    }

    .scroll-progress {
      position: fixed;
      left: 0;
      top: 0;
      z-index: 10000;
      height: 3px;
      width: var(--progress, 0%);
      background: linear-gradient(90deg, var(--rose), var(--gold), #c6ced0);
      box-shadow: 0 0 14px var(--gold)
    }

    .marquee {
      overflow: hidden;
      background: var(--gold);
      color: #15191b;
      padding: 16px 0;
      transform: rotate(-1deg) scale(1.02);
      position: relative;
      z-index: 4
    }

    .marquee-track {
      display: flex;
      width: max-content;
      animation: marquee 28s linear infinite
    }

    .marquee span {
      font-size: .72rem;
      font-weight: bold;
      letter-spacing: .18em;
      text-transform: uppercase;
      white-space: nowrap
    }

    .marquee b {
      font-size: 1.1rem;
      margin: 0 24px;
      color: #fff
    }

    .marquee:hover .marquee-track {
      animation-play-state: paused
    }

    .ambient {
      position: fixed;
      z-index: -1;
      border-radius: 50%;
      pointer-events: none;
      filter: blur(1px);
      opacity: .16
    }

    .ambient.one {
      width: 340px;
      height: 340px;
      background: var(--gold);
      right: -130px;
      top: 35vh;
      animation: drift 11s ease-in-out infinite
    }

    .ambient.two {
      width: 220px;
      height: 220px;
      border: 35px solid var(--slate);
      left: -80px;
      bottom: 8vh;
      animation: drift 14s ease-in-out infinite reverse
    }

    .cursor-glow {
      position: fixed;
      z-index: 30;
      width: 260px;
      height: 260px;
      margin: -130px 0 0 -130px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 138, 52, .12), transparent 68%);
      pointer-events: none;
      transform: translate(var(--x, -500px), var(--y, -500px));
      transition: transform .12s linear
    }

    .section-title em,
    .signature,
    .date,
    .schedule-date {
      color: var(--rose)
    }

    .eyebrow:before {
      background: var(--gold)
    }

    .programs {
      background: linear-gradient(135deg, #dbe0df, #bac7cd)
    }

    .quote {
      background: linear-gradient(120deg, #f7c39c, #eaa36d)
    }

    .policy-section {
      background: linear-gradient(135deg, #eee5dc, #e9b58e)
    }

    .card {
      transform-style: preserve-3d
    }

    .card>* {
      transform: translateZ(22px)
    }

    .reveal {
      opacity: 0;
      transform: translateY(60px) rotateX(7deg);
      filter: blur(5px);
      transition: 1s cubic-bezier(.16, 1, .3, 1)    ;
      -webkit-transition: 1s cubic-bezier(.16, 1, .3, 1);
      -moz-transition: 1s cubic-bezier(.16, 1, .3, 1);
      -ms-transition: 1s cubic-bezier(.16, 1, .3, 1);
      -o-transition: 1s cubic-bezier(.16, 1, .3, 1);
}

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

    .schedule-item:hover {
      border-left: 4px solid var(--gold)
    }

    @keyframes orbit {
      to {
        transform: rotate(360deg)
      }
    }

    @keyframes heroMark {
      50% {
        transform: translateY(-14px) rotate(-2deg)
      }
    }

    @keyframes navDrop {
      from {
        transform: translateY(-100%)
      }

      to {
        transform: none
      }
    }

    @keyframes marquee {
      to {
        transform: translateX(-50%)
      }
    }

    @keyframes drift {
      50% {
        transform: translate(25px, -45px) scale(1.12)
      }
    }

    @media(max-width:1500px) {
      .section-title {
        font-size: clamp(2.5rem, 5vw, 3.5rem);
      }
    }

    @media(max-width:850px) {
      .nav-links {
        display: none
      }

      .menu {
        display: block
      }

      .brand-logo {
        width: 50px;
        height: 50px
      }

      .hero {
        min-height: 680px
      }

      .hero-content {
        padding-bottom: 90px
      }

      .hero-orbit,
      .hero-mark,
      .scroll-cue,
      .cursor-glow {
        display: none
      }

      .intro-grid,
      .journey-grid,
      .contact-grid,
      .policy-grid {
        grid-template-columns: 1fr;
        gap: 50px
      }

      .portrait {
        max-width: 500px
      }

      .cards,
      .event-grid,
      .price-grid {
        grid-template-columns: 1fr
      }

      .card {
        min-height: 270px;
        border-radius: 140px 140px 12px 12px
      }

      .card h3 {
        margin-top: 28px
      }

      .program-head,
      .calendar-head {
        display: block
      }

      .program-head p {
        max-width: none
      }

      .topline .wrap span:first-child {
        display: none
      }

      .field-row {
        grid-template-columns: 1fr
      }

      .schedule-item {
        grid-template-columns: 100px 1fr;
        gap: 5px 18px
      }

      .schedule-day {
        display: none
      }

      .schedule-time {
        text-align: left
      }

      .schedule-tag {
        display: none
      }

      .footer-inner {
        display: block;
        text-align: center
      }

      .footer-inner nav {
        margin-top: 16px
      }

      .footer-inner a {
        margin: 0 8px
      }

      .depth-scene {
        transform: none !important
      }

      .loader-logo {
        width: 84px;
        height: 84px
      }

      .key {
        width: 34px;
        height: 112px
      }

      .key.black {
        width: 22px;
        margin: 0 -11px;
        height: 70px
      }

      .keys {
        height: 122px
      }
    }

    @media(prefers-reduced-motion:reduce) {
      * {
        scroll-behavior: auto !important
      }

      .key,
      .loader-logo,
      .hero-orbit,
      .hero-mark,
      .marquee-track,
      .ambient {
        animation: none !important
      }

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

    #pricing .price-card .label {
      font-size: 15px;
    }

    #pricing .price-card p {
      padding: 8px 0;
      /* border-bottom: 1px solid var(--line); */
      font-size: .88rem;
    }

    #pricing .star {
      font-size: 37px;
      position: relative;
      top: 10px;
      left: -11px;
      color: var(--rose);
    }

    #pricing .star-1 {
      font-size: 29px;
      position: relative;
      top: 10px;
      left: -3px;
      color: var(--rose);
    }

    #pricing .price-card.one .price {
      font-size: 3.8rem;
      line-height: 1;
      margin: 6px 0 8px;
    }

    #pricing .price-card.featured .label {
      color: #fff;
    }

    .calendar .eyebrow {
      font-size: 18px;
    }

    .contact-card.reveal.visible {
      height: fit-content;
    }

    .contact-card.reveal.visible .contact-card {
      background: white;
      padding: 70px 50px;
      border-radius: 12px;
      box-shadow: var(--shadow);
    }

    /* blog page css */
    
    :root {
      --ink: #12191d;
      --sage: #71838d;
      --sage-deep: #415662;
      --cream: #f3eee6;
      --paper: #fffaf3;
      --blush: #f4b27f;
      --rose: #bf4b18;
      --gold: #ff8a34;
      --slate: #526572;
      --mist: #c6ced0;
      --line: rgba(18, 25, 29, .16);
      --shadow: 0 24px 70px rgba(18, 25, 29, .16)
    }

    * {
      box-sizing: border-box
    }

    html {
      scroll-behavior: smooth;
      overflow-x: hidden
    }

    body {
      margin: 0;
      background: var(--cream);
      color: var(--ink);
      font-family: Georgia, 'Times New Roman', serif;
      line-height: 1.6
    }

    body.locked {
      overflow: hidden
    }

    a {
      color: inherit
    }

    button,
    input,
    textarea {
      font: inherit
    }

    .wrap {
      width: min(1160px, calc(100% - 40px));
      margin: auto
    }

    .eyebrow {
      display: flex;
      gap: 12px;
      align-items: center;
      color: var(--sage-deep);
      font-size: .72rem;
      font-weight: bold;
      letter-spacing: .2em;
      text-transform: uppercase
    }

    .eyebrow:before {
      content: "";
      width: 34px;
      height: 1px;
      background: var(--gold)
    }

    /* ---------- Loader ---------- */
    .loader {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: grid;
      place-items: center;
      background: radial-gradient(circle at 50% 35%, #283740 0, #12191d 48%, #080b0d 100%);
      color: var(--paper);
      transition: clip-path 1s cubic-bezier(.77, 0, .18, 1), visibility 1s;
      clip-path: inset(0 0 0 0)
    }

    .loader.done {
      clip-path: inset(0 0 100% 0);
      visibility: hidden
    }

    .loader-inner {
      text-align: center;
      width: min(780px, 92vw)
    }

    .loader-logo {
      width: 104px;
      height: 104px;
      object-fit: contain;
      filter: drop-shadow(0 22px 30px rgba(0, 0, 0, .4));
      animation: logoFloat 1.8s ease-in-out infinite
    }

    .loader-mark {
      font-size: .72rem;
      letter-spacing: .38em;
      text-transform: uppercase;
      margin: 14px 0 28px;
      color: #f2cab0
    }

    .keys {
      position: relative;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      height: 142px;
      filter: drop-shadow(0 24px 25px rgba(0, 0, 0, .42));
      perspective: 900px
    }

    .key {
      position: relative;
      width: 52px;
      height: 130px;
      background: linear-gradient(90deg, #d8d8d3, #fff 14%, #fffdf7 72%, #d2d1cc);
      border: 1px solid #73797b;
      border-radius: 0 0 7px 7px;
      transform-origin: top;
      animation: press 1.5s infinite cubic-bezier(.6, 0, .2, 1)
    }

    .key:nth-child(2) { animation-delay: .1s }
    .key:nth-child(3) { animation-delay: .2s }
    .key:nth-child(4) { animation-delay: .3s }
    .key:nth-child(5) { animation-delay: .4s }
    .key:nth-child(6) { animation-delay: .5s }
    .key:nth-child(7) { animation-delay: .6s }
    .key:nth-child(8) { animation-delay: .7s }
    .key:nth-child(9) { animation-delay: .8s }
    .key:nth-child(10) { animation-delay: .9s }

    .key.black {
      z-index: 2;
      width: 31px;
      height: 82px;
      margin: 0 -16px;
      background: linear-gradient(90deg, #050607, #283037 45%, #080a0b);
      border-color: #030405;
      border-radius: 0 0 5px 5px;
      animation-name: pressBlack
    }

    .loader p {
      margin: 3px 0 13px;
      font-style: italic;
      color: #c6ced0
    }

    .loader-progress {
      height: 2px;
      background: rgba(255, 255, 255, .15);
      overflow: hidden;
      width: min(430px, 75vw);
      margin: auto
    }

    .loader-progress span {
      display: block;
      height: 100%;
      width: 0;
      background: linear-gradient(90deg, var(--rose), var(--gold));
      animation: loadbar 3s cubic-bezier(.2, .8, .2, 1) forwards
    }

    .loader-count {
      margin-top: 10px;
      color: #f6d2b7;
      font-size: .65rem;
      letter-spacing: .2em
    }

    @keyframes press {
      0%, 45%, 100% { transform: rotateX(0) translateY(0) }
      18% { transform: rotateX(-7deg) translateY(12px); box-shadow: inset 0 8px 14px #b9b9b5 }
    }

    @keyframes pressBlack {
      0%, 45%, 100% { transform: rotateX(0) translateY(0) }
      18% { transform: rotateX(-9deg) translateY(10px) }
    }

    @keyframes logoFloat {
      50% { transform: translateY(-8px) rotate(2deg) }
    }

    @keyframes loadbar {
      to { width: 100% }
    }

    /* ---------- Top line & nav ---------- */
    .topline {
      background: #0b1013;
      color: #eef4ef;
      font-size: .73rem;
      letter-spacing: .08em
    }

    .topline .wrap {
      height: 34px;
      display: flex;
      align-items: center;
      justify-content: space-between
    }

    .topline a {
      text-decoration: none
    }

    .nav {
      position: absolute;
      z-index: 10;
      left: 0;
      right: 0;
      border-bottom: 1px solid rgba(255, 255, 255, .27);
      color: white;
      transition: background .45s, transform .45s, box-shadow .45s
    }

    .nav-inner {
      height: 92px;
      display: flex;
      align-items: center;
      justify-content: space-between
    }

    .brand {
      display: flex;
      gap: 12px;
      align-items: center;
      text-decoration: none
    }

    .brand strong {
      display: block;
      font-size: 1.06rem;
      font-weight: normal;
      letter-spacing: .08em
    }

    .brand small {
      display: block;
      font-size: .62rem;
      letter-spacing: .18em;
      text-transform: uppercase;
      opacity: .75
    }

    .nav-links {
      display: flex;
      gap: 30px;
      align-items: center
    }

    .nav-links a {
      text-decoration: none;
      font-size: .83rem;
      letter-spacing: .07em;
      position: relative
    }

    .nav-links a:not(.button):after {
      content: "";
      position: absolute;
      left: 0;
      right: 100%;
      bottom: -8px;
      height: 1px;
      background: #fff;
      transition: right .35s
    }

    .nav-links a:hover:after {
      right: 0
    }

    .nav-links a.current:after {
      right: 0;
      background: var(--gold)
    }

    .nav-links .button {
      padding: 11px 20px;
      border: 1px solid rgba(255, 255, 255, .72);
      border-radius: 99px
    }

    .nav-links .button:after {
      display: none
    }

    .menu {
      display: none;
      background: none;
      border: 0;
      color: white;
      font-size: 1.5rem
    }

    .brand-logo {
      width: 58px;
      height: 58px;
      object-fit: contain;
      filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .22));
      transition: .5s
    }

    .brand:hover .brand-logo {
      transform: translateY(-4px) rotate(-4deg) scale(1.08)
    }

    .nav.scrolled {
      position: fixed;
      top: 0;
      background: rgba(18, 25, 29, .9);
      backdrop-filter: blur(18px);
      box-shadow: 0 10px 35px rgba(0, 0, 0, .18);
      animation: navDrop .5s both
    }

    .nav.scrolled .nav-inner {
      height: 72px
    }

    @keyframes navDrop {
      from { transform: translateY(-100%) }
      to { transform: none }
    }

    .scroll-progress {
      position: fixed;
      left: 0;
      top: 0;
      z-index: 10000;
      height: 3px;
      width: var(--progress, 0%);
      background: linear-gradient(90deg, var(--rose), var(--gold), #c6ced0);
      box-shadow: 0 0 14px var(--gold)
    }

    /* ---------- Blog hero ---------- */
    .blog-hero {
      position: relative;
      min-height: 620px;
      display: grid;
      align-items: end;
      color: white;
      overflow: hidden;
      background: linear-gradient(90deg, rgba(12, 17, 20, .91) 0%, rgba(24, 31, 34, .71) 45%, rgba(18, 25, 29, .22) 75%), url('https://images.unsplash.com/photo-1507838153414-b4b713384a76?auto=format&fit=crop&w=2000&q=88') center/cover
    }

    .blog-hero:after {
      content: "";
      position: absolute;
      inset: auto 0 0;
      height: 150px;
      background: linear-gradient(transparent, var(--cream))
    }

    .blog-hero:before {
      content: "";
      position: absolute;
      inset: -5%;
      background: inherit;
      background-attachment: fixed;
      transform: scale(var(--hero-zoom, 1.05));
      transition: transform .1s linear
    }

    .blog-hero > * {
      position: relative
    }

    .blog-hero-content {
      position: relative;
      z-index: 2;
      max-width: 760px;
      padding: 190px 0 120px
    }

    .blog-hero .eyebrow {
      color: #dbe9de
    }

    .blog-hero h1 {
      font-size: clamp(3rem, 7vw, 6.4rem);
      line-height: .96;
      font-weight: normal;
      letter-spacing: -.045em;
      margin: 22px 0 28px
    }

    .blog-hero h1 em {
      color: #ffad73;
      font-weight: normal
    }

    .blog-hero p {
      max-width: 600px;
      font-size: 1.15rem;
      color: #edf2ee
    }

    .piano-line {
      display: inline-flex;
      gap: .08em;
      align-items: center
    }

    .piano-line .white-key,
    .piano-line .black-key {
      display: inline-block;
      padding: .02em .14em .09em;
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone
    }

    .piano-line .white-key {
      background: #fff;
      color: #1a211e;
      box-shadow: inset 0 -4px 0 #d9d9d4
    }

    .piano-line .black-key {
      background: #111815;
      color: #fff;
      box-shadow: inset 0 -4px 0 #000
    }

    .piano-line span {
      transition: transform .35s, box-shadow .35s
    }

    .piano-line:hover span:nth-child(odd) { transform: translateY(5px) }
    .piano-line:hover span:nth-child(even) { transform: translateY(-4px) }

    /* ---------- Marquee ---------- */
    .marquee {
      overflow: hidden;
      background: var(--gold);
      color: #15191b;
      padding: 16px 0;
      transform: rotate(-1deg) scale(1.02);
      position: relative;
      z-index: 4
    }

    .marquee-track {
      display: flex;
      width: max-content;
      animation: marquee 28s linear infinite
    }

    .marquee span {
      font-size: .72rem;
      font-weight: bold;
      letter-spacing: .18em;
      text-transform: uppercase;
      white-space: nowrap
    }

    .marquee b {
      font-size: 1.1rem;
      margin: 0 24px;
      color: #fff
    }

    .marquee:hover .marquee-track {
      animation-play-state: paused
    }

    @keyframes marquee {
      to { transform: translateX(-50%) }
    }

    section {
      padding: 110px 0
    }

    .section-title {
      font-size: clamp(2.3rem, 5vw, 4.4rem);
      line-height: 1.06;
      font-weight: normal;
      letter-spacing: -.035em;
      margin: 18px 0 25px
    }

    .section-title em {
      color: var(--rose);
      font-weight: normal
    }

    .lead {
      font-size: 1.12rem;
      color: #55635d
    }

    /* ---------- Featured post ---------- */
    .feature-grid {
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 70px;
      align-items: center
    }

    .feature-media {
      position: relative
    }

    .feature-media img {
      display: block;
      width: 100%;
      aspect-ratio: 5/4;
      object-fit: cover;
      border-radius: 8px;
      filter: saturate(.78) sepia(.06);
      box-shadow: var(--shadow)
    }

    .feature-media:before {
      content: "Featured";
      position: absolute;
      z-index: 2;
      top: 22px;
      left: 22px;
      background: var(--ink);
      color: var(--paper);
      font-size: .62rem;
      letter-spacing: .2em;
      text-transform: uppercase;
      padding: 8px 14px;
      border-radius: 99px
    }

    .post-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      align-items: center;
      font-size: .72rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: #6d7772
    }

    .chip {
      display: inline-block;
      border: 1px solid var(--line);
      border-radius: 99px;
      padding: 5px 13px;
      font-size: .62rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--rose)
    }

    .feature-grid h2 {
      font-size: clamp(2rem, 3.6vw, 3rem);
      line-height: 1.08;
      font-weight: normal;
      letter-spacing: -.03em;
      margin: 18px 0 16px
    }

    .feature-grid h2 a {
      text-decoration: none
    }

    .feature-grid p {
      color: #55635d
    }

    .read-more {
      display: inline-flex;
      align-items: center;
      margin-top: 22px;
      text-transform: uppercase;
      letter-spacing: .12em;
      font-size: .72rem;
      text-decoration: none;
      text-underline-offset: 5px;
      border-bottom: 1px solid var(--rose);
      padding-bottom: 4px;
      color: var(--rose);
      transition: gap .3s
    }

    .read-more:after {
      content: "→";
      margin-left: 10px;
      transition: margin .3s
    }

    .read-more:hover:after {
      margin-left: 18px
    }

    /* ---------- Posts grid ---------- */
    .journal {
      background: linear-gradient(135deg, #dbe0df, #bac7cd)
    }

    .journal-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 30px;
      margin-bottom: 30px
    }

    .journal-head p {
      max-width: 400px
    }

    .post-filters {
      display: flex;
      flex-wrap: wrap;
      gap: 9px;
      margin-bottom: 44px
    }

    .filter {
      border: 1px solid rgba(18, 25, 29, .25);
      background: transparent;
      color: white;
      border-radius: 99px;
      padding: 9px 17px;
      cursor: pointer;
      font-size: .7rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      transition: .3s
    }

    .filter:hover,
    .filter.active {
      background: var(--ink);
      color: var(--rose);
      border-color: var(--ink)
    }

    .post-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px
    }

    .post-card {
      display: flex;
      flex-direction: column;
      background: rgba(255, 253, 248, .9);
      border: 1px solid rgba(255, 255, 255, .8);
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 15px 45px rgba(73, 97, 83, .08);
      transition: transform .55s cubic-bezier(.2, .8, .2, 1), box-shadow .55s
    }

    .post-card:hover {
      transform: translateY(-14px);
      box-shadow: 0 30px 70px rgba(39, 52, 47, .17)
    }

    .post-card.hidden {
      display: none
    }

    .post-thumb {
      position: relative;
      overflow: hidden;
      aspect-ratio: 16/10
    }

    .post-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: saturate(.78) sepia(.05);
      transition: transform .7s cubic-bezier(.2, .8, .2, 1)
    }

    .post-card:hover .post-thumb img {
      transform: scale(1.07)
    }

    .post-thumb .chip {
      position: absolute;
      top: 14px;
      left: 14px;
      background: rgba(18, 25, 29, .82);
      color: #ffad73;
      border-color: transparent
    }

    .post-body {
      padding: 26px 26px 30px;
      display: flex;
      flex-direction: column;
      flex: 1
    }

    .post-body .date {
      font-style: italic;
      color: var(--rose);
      font-size: .82rem
    }

    .post-body h3 {
      font-size: 1.4rem;
      font-weight: normal;
      line-height: 1.18;
      margin: 10px 0 12px
    }

    .post-body h3 a {
      text-decoration: none
    }

    .post-body p {
      color: #627069;
      font-size: .92rem;
      margin: 0 0 20px
    }

    .post-foot {
      margin-top: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-top: 1px solid var(--line);
      padding-top: 16px;
      font-size: .72rem;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: #6d7772
    }

    .post-foot a {
      text-decoration: none;
      color: var(--rose);
      text-underline-offset: 4px
    }

    .post-foot a:hover {
      text-decoration: underline
    }

    /* ---------- Quote band ---------- */
    .quote {
      padding: 90px 0;
      background: linear-gradient(120deg, #f7c39c, #eaa36d);
      text-align: center
    }

    .quote blockquote {
      max-width: 900px;
      margin: 0 auto;
      font-size: clamp(1.6rem, 3.2vw, 2.7rem);
      line-height: 1.3;
      font-weight: normal
    }

    .quote cite {
      display: block;
      margin-top: 24px;
      font-style: normal;
      font-size: .72rem;
      letter-spacing: .17em;
      text-transform: uppercase;
      color: #755d58
    }

    /* ---------- Newsletter ---------- */
    .newsletter {
      background: var(--ink);
      color: #f7f4ec
    }

    .newsletter .eyebrow {
      color: #bfd0c4
    }

    .news-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 70px;
      align-items: center
    }

    .news-grid .section-title {
      margin-bottom: 18px
    }

    .news-grid p {
      color: #bfcac3
    }

    .news-form {
      background: rgba(255, 255, 255, .04);
      border: 1px solid rgba(255, 255, 255, .15);
      border-radius: 12px;
      padding: 36px
    }

    .news-form label {
      display: block;
      font-size: .68rem;
      text-transform: uppercase;
      letter-spacing: .12em;
      margin: 0 0 8px
    }

    .news-form input {
      width: 100%;
      padding: 14px 2px;
      border: 0;
      border-bottom: 1px solid rgba(255, 255, 255, .28);
      background: transparent;
      color: #fff;
      outline: none;
      margin-bottom: 18px
    }

    .news-form input::placeholder {
      color: #7e8b85
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      border: 1px solid var(--sage-deep);
      background: var(--sage-deep);
      color: white;
      padding: 14px 24px;
      border-radius: 99px;
      font-size: .8rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      transition: .25s;
      cursor: pointer;
      overflow: hidden;
      position: relative
    }

    .btn:hover {
      transform: translateY(-2px);
      background: var(--gold);
      border-color: var(--gold);
      color: var(--ink)
    }

    .btn:after {
      content: "→";
      width: 0;
      opacity: 0;
      transition: .3s
    }

    .btn:hover:after {
      margin-left: 12px;
      width: auto;
      opacity: 1
    }

    .news-note {
      margin-top: 18px;
      font-size: .76rem;
      color: #afbbb3
    }
    .form_btn_logo {
      display: flex;
      justify-content: space-between;
      align-items: start;

      .form_logo {
        margin-top: 0;
        display: flex;
        gap: 10px;
        align-items: center;
        text-decoration: none;
      }
    }

    /* ---------- Footer ---------- */
    footer {
      background: #1d2823;
      color: #d5dfd8;
      padding: 26px 0
    }

    .footer-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 30px
    }

    .footer-inner p {
      margin: 0;
      color: #91a096;
      font-size: .74rem
    }

    .footer-inner a {
      text-decoration: none;
      margin-left: 20px;
      font-size: .75rem
    }

    /* ---------- Reveal + ambient ---------- */
    .reveal {
      opacity: 0;
      transform: translateY(60px) rotateX(7deg);
      filter: blur(5px);
      transition: 1s cubic-bezier(.16, 1, .3, 1)
    }

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

    .ambient {
      position: fixed;
      z-index: -1;
      border-radius: 50%;
      pointer-events: none;
      filter: blur(1px);
      opacity: .16
    }

    .ambient.one {
      width: 340px;
      height: 340px;
      background: var(--gold);
      right: -130px;
      top: 35vh;
      animation: drift 11s ease-in-out infinite
    }

    .ambient.two {
      width: 220px;
      height: 220px;
      border: 35px solid var(--slate);
      left: -80px;
      bottom: 8vh;
      animation: drift 14s ease-in-out infinite reverse
    }

    .cursor-glow {
      position: fixed;
      z-index: 30;
      width: 260px;
      height: 260px;
      margin: -130px 0 0 -130px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 138, 52, .12), transparent 68%);
      pointer-events: none;
      transform: translate(var(--x, -500px), var(--y, -500px));
      transition: transform .12s linear
    }

    @keyframes drift {
      50% { transform: translate(25px, -45px) scale(1.12) }
    }

    /* ---------- Responsive ---------- */
    @media(max-width:850px) {
      .nav-links {
        display: none
      }

      .menu {
        display: block
      }

      .brand-logo {
        width: 50px;
        height: 50px
      }

      .blog-hero {
        min-height: 540px
      }

      .blog-hero-content {
        padding: 150px 0 90px
      }

      .cursor-glow {
        display: none
      }

      .feature-grid,
      .news-grid {
        grid-template-columns: 1fr;
        gap: 44px
      }

      .post-grid {
        grid-template-columns: 1fr 1fr
      }

      .journal-head {
        display: block
      }

      .journal-head p {
        max-width: none;
        margin-top: 14px
      }

      .topline .wrap span:first-child {
        display: none
      }

      .footer-inner {
        display: block;
        text-align: center
      }

      .footer-inner nav {
        margin-top: 16px
      }

      .footer-inner a {
        margin: 0 8px
      }

      .loader-logo {
        width: 84px;
        height: 84px
      }

      .key {
        width: 34px;
        height: 112px
      }

      .key.black {
        width: 22px;
        margin: 0 -11px;
        height: 70px
      }

      .keys {
        height: 122px
      }
    }

    @media(max-width:560px) {
      section {
        padding: 80px 0
      }

      .post-grid {
        grid-template-columns: 1fr
      }

      .news-form {
        padding: 26px
      }
    }

    @media(prefers-reduced-motion:reduce) {
      * {
        scroll-behavior: auto !important
      }

      .key,
      .loader-logo,
      .marquee-track,
      .ambient {
        animation: none !important
      }

      .reveal {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none
      }
    }
    .d-none{
      display: none;
    }


    /* blog-details page */

    :root {
      --ink: #12191d;
      --sage: #71838d;
      --sage-deep: #415662;
      --cream: #f3eee6;
      --paper: #fffaf3;
      --blush: #f4b27f;
      --rose: #bf4b18;
      --gold: #ff8a34;
      --slate: #526572;
      --mist: #c6ced0;
      --line: rgba(18, 25, 29, .16);
      --shadow: 0 24px 70px rgba(18, 25, 29, .16)
    }

    * {
      box-sizing: border-box
    }

    html {
      scroll-behavior: smooth;
      overflow-x: hidden
    }

    body {
      margin: 0;
      background: var(--cream);
      color: var(--ink);
      font-family: Georgia, 'Times New Roman', serif;
      line-height: 1.6
    }

    body.locked {
      overflow: hidden
    }

    a {
      color: inherit
    }

    button,
    input,
    textarea {
      font: inherit
    }

    .wrap {
      width: min(1160px, calc(100% - 40px));
      margin: auto
    }

    .eyebrow {
      display: flex;
      gap: 12px;
      align-items: center;
      color: var(--sage-deep);
      font-size: .72rem;
      font-weight: bold;
      letter-spacing: .2em;
      text-transform: uppercase
    }

    .eyebrow:before {
      content: "";
      width: 34px;
      height: 1px;
      background: var(--gold)
    }

    /* ---------- Loader ---------- */
    .loader {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: grid;
      place-items: center;
      background: radial-gradient(circle at 50% 35%, #283740 0, #12191d 48%, #080b0d 100%);
      color: var(--paper);
      transition: clip-path 1s cubic-bezier(.77, 0, .18, 1), visibility 1s;
      clip-path: inset(0 0 0 0)
    }

    .loader.done {
      clip-path: inset(0 0 100% 0);
      visibility: hidden
    }

    .loader-inner {
      text-align: center;
      width: min(780px, 92vw)
    }

    .loader-logo {
      width: 104px;
      height: 104px;
      object-fit: contain;
      filter: drop-shadow(0 22px 30px rgba(0, 0, 0, .4));
      animation: logoFloat 1.8s ease-in-out infinite
    }

    .loader-mark {
      font-size: .72rem;
      letter-spacing: .38em;
      text-transform: uppercase;
      margin: 14px 0 28px;
      color: #f2cab0
    }

    .keys {
      position: relative;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      height: 142px;
      filter: drop-shadow(0 24px 25px rgba(0, 0, 0, .42));
      perspective: 900px
    }

    .key {
      position: relative;
      width: 52px;
      height: 130px;
      background: linear-gradient(90deg, #d8d8d3, #fff 14%, #fffdf7 72%, #d2d1cc);
      border: 1px solid #73797b;
      border-radius: 0 0 7px 7px;
      transform-origin: top;
      animation: press 1.5s infinite cubic-bezier(.6, 0, .2, 1)
    }

    .key:nth-child(2) { animation-delay: .1s }
    .key:nth-child(3) { animation-delay: .2s }
    .key:nth-child(4) { animation-delay: .3s }
    .key:nth-child(5) { animation-delay: .4s }
    .key:nth-child(6) { animation-delay: .5s }
    .key:nth-child(7) { animation-delay: .6s }
    .key:nth-child(8) { animation-delay: .7s }
    .key:nth-child(9) { animation-delay: .8s }
    .key:nth-child(10) { animation-delay: .9s }

    .key.black {
      z-index: 2;
      width: 31px;
      height: 82px;
      margin: 0 -16px;
      background: linear-gradient(90deg, #050607, #283037 45%, #080a0b);
      border-color: #030405;
      border-radius: 0 0 5px 5px;
      animation-name: pressBlack
    }

    .loader p {
      margin: 3px 0 13px;
      font-style: italic;
      color: #c6ced0
    }

    .loader-progress {
      height: 2px;
      background: rgba(255, 255, 255, .15);
      overflow: hidden;
      width: min(430px, 75vw);
      margin: auto
    }

    .loader-progress span {
      display: block;
      height: 100%;
      width: 0;
      background: linear-gradient(90deg, var(--rose), var(--gold));
      animation: loadbar 3s cubic-bezier(.2, .8, .2, 1) forwards
    }

    .loader-count {
      margin-top: 10px;
      color: #f6d2b7;
      font-size: .65rem;
      letter-spacing: .2em
    }

    @keyframes press {
      0%, 45%, 100% { transform: rotateX(0) translateY(0) }
      18% { transform: rotateX(-7deg) translateY(12px); box-shadow: inset 0 8px 14px #b9b9b5 }
    }

    @keyframes pressBlack {
      0%, 45%, 100% { transform: rotateX(0) translateY(0) }
      18% { transform: rotateX(-9deg) translateY(10px) }
    }

    @keyframes logoFloat {
      50% { transform: translateY(-8px) rotate(2deg) }
    }

    @keyframes loadbar {
      to { width: 100% }
    }

    /* ---------- Top line & nav ---------- */
    .topline {
      background: #0b1013;
      color: #eef4ef;
      font-size: .73rem;
      letter-spacing: .08em
    }

    .topline .wrap {
      height: 34px;
      display: flex;
      align-items: center;
      justify-content: space-between
    }

    .topline a {
      text-decoration: none
    }

    .nav {
      position: absolute;
      z-index: 10;
      left: 0;
      right: 0;
      border-bottom: 1px solid rgba(255, 255, 255, .27);
      color: white;
      transition: background .45s, transform .45s, box-shadow .45s
    }

    .nav-inner {
      height: 92px;
      display: flex;
      align-items: center;
      justify-content: space-between
    }

    .brand {
      display: flex;
      gap: 12px;
      align-items: center;
      text-decoration: none
    }

    .brand strong {
      display: block;
      font-size: 1.06rem;
      font-weight: normal;
      letter-spacing: .08em
    }

    .brand small {
      display: block;
      font-size: .62rem;
      letter-spacing: .18em;
      text-transform: uppercase;
      opacity: .75
    }

    .nav-links {
      display: flex;
      gap: 30px;
      align-items: center
    }

    .nav-links a {
      text-decoration: none;
      font-size: .83rem;
      letter-spacing: .07em;
      position: relative
    }

    .nav-links a:not(.button):after {
      content: "";
      position: absolute;
      left: 0;
      right: 100%;
      bottom: -8px;
      height: 1px;
      background: #fff;
      transition: right .35s
    }

    .nav-links a:hover:after {
      right: 0
    }

    .nav-links a.current:after {
      right: 0;
      background: var(--gold)
    }

    .nav-links .button {
      padding: 11px 20px;
      border: 1px solid rgba(255, 255, 255, .72);
      border-radius: 99px
    }

    .nav-links .button:after {
      display: none
    }

    .menu {
      display: none;
      background: none;
      border: 0;
      color: white;
      font-size: 1.5rem
    }

    .brand-logo {
      width: 58px;
      height: 58px;
      object-fit: contain;
      filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .22));
      transition: .5s
    }

    .brand:hover .brand-logo {
      transform: translateY(-4px) rotate(-4deg) scale(1.08)
    }

    .nav.scrolled {
      position: fixed;
      top: 0;
      background: rgba(18, 25, 29, .9);
      backdrop-filter: blur(18px);
      box-shadow: 0 10px 35px rgba(0, 0, 0, .18);
      animation: navDrop .5s both
    }

    .nav.scrolled .nav-inner {
      height: 72px
    }

    @keyframes navDrop {
      from { transform: translateY(-100%) }
      to { transform: none }
    }

    .scroll-progress {
      position: fixed;
      left: 0;
      top: 0;
      z-index: 10000;
      height: 3px;
      width: var(--progress, 0%);
      background: linear-gradient(90deg, var(--rose), var(--gold), #c6ced0);
      box-shadow: 0 0 14px var(--gold)
    }

    /* ---------- Article hero ---------- */
    .article-hero {
      position: relative;
      min-height: 660px;
      display: grid;
      align-items: end;
      color: white;
      overflow: hidden;
      background: linear-gradient(90deg, rgba(12, 17, 20, .92) 0%, rgba(24, 31, 34, .74) 45%, rgba(18, 25, 29, .34) 80%), url('https://images.unsplash.com/photo-1552422535-c45813c61732?auto=format&fit=crop&w=2000&q=88') center/cover
    }

    .article-hero:after {
      content: "";
      position: absolute;
      inset: auto 0 0;
      height: 150px;
      background: linear-gradient(transparent, var(--cream))
    }

    .article-hero:before {
      content: "";
      position: absolute;
      inset: -5%;
      background: inherit;
      background-attachment: fixed;
      transform: scale(var(--hero-zoom, 1.05));
      transition: transform .1s linear
    }

    .article-hero > * {
      position: relative
    }

    .article-hero-content {
      position: relative;
      z-index: 2;
      max-width: 880px;
      padding: 190px 0 110px
    }

    .crumbs {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      font-size: .72rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: #dbe9de;
      margin-bottom: 26px
    }

    .crumbs a {
      text-decoration: none;
      opacity: .82;
      transition: opacity .3s
    }

    .crumbs a:hover {
      opacity: 1
    }

    .crumbs span {
      opacity: .55
    }

    .article-hero h1 {
      font-size: clamp(2.4rem, 5.4vw, 5rem);
      line-height: 1.02;
      font-weight: normal;
      letter-spacing: -.04em;
      margin: 0 0 30px
    }

    .article-hero h1 em {
      color: #ffad73;
      font-weight: normal
    }

    .hero-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 14px 22px;
      align-items: center;
      font-size: .74rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: #edf2ee
    }

    .hero-meta .chip {
      border-color: rgba(255, 255, 255, .4);
      color: #ffd0ad
    }

    .hero-meta .by {
      display: flex;
      gap: 11px;
      align-items: center;
      text-transform: none;
      letter-spacing: .02em;
      font-size: .9rem
    }

    .hero-meta .by img {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid rgba(255, 255, 255, .6)
    }

    .chip {
      display: inline-block;
      border: 1px solid var(--line);
      border-radius: 99px;
      padding: 5px 13px;
      font-size: .62rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--rose)
    }

    /* ---------- Article body ---------- */
    .article {
      padding: 96px 0 70px
    }

    .article-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 290px;
      gap: 70px;
      align-items: start
    }

    .prose {
      max-width: 720px;
      font-size: 1.14rem;
      color: #2c3a35
    }

    .prose > .lead {
      font-size: 1.45rem;
      line-height: 1.5;
      color: var(--sage-deep);
      margin: 0 0 36px
    }

    .prose p {
      margin: 0 0 26px
    }

    .prose h2 {
      font-size: clamp(1.7rem, 3vw, 2.3rem);
      line-height: 1.14;
      font-weight: normal;
      letter-spacing: -.03em;
      margin: 52px 0 18px
    }

    .prose h2 em {
      color: var(--rose);
      font-style: italic
    }

    .prose h3 {
      font-size: 1.32rem;
      font-weight: normal;
      margin: 38px 0 12px;
      color: var(--ink)
    }

    .prose a:not(.btn) {
      color: var(--rose);
      text-underline-offset: 4px
    }

    .prose ul {
      margin: 0 0 26px;
      padding-left: 0;
      list-style: none
    }

    .prose ul li {
      position: relative;
      padding-left: 30px;
      margin-bottom: 14px
    }

    .prose ul li:before {
      content: "♪";
      position: absolute;
      left: 0;
      top: -1px;
      color: var(--gold);
      font-size: 1.1rem
    }

    .prose blockquote {
      margin: 40px 0;
      padding: 8px 0 8px 32px;
      border-left: 3px solid var(--gold);
      font-size: 1.5rem;
      line-height: 1.4;
      font-style: italic;
      color: var(--sage-deep)
    }

    .figure {
      margin: 44px 0
    }

    .figure img {
      display: block;
      width: 100%;
      border-radius: 10px;
      aspect-ratio: 16/9;
      object-fit: cover;
      filter: saturate(.8) sepia(.05);
      box-shadow: var(--shadow)
    }

    .figure figcaption {
      margin-top: 12px;
      font-size: .82rem;
      font-style: italic;
      color: #6d7772;
      text-align: center
    }

    .callout {
      margin: 40px 0;
      background: rgba(255, 138, 52, .1);
      border: 1px solid rgba(255, 138, 52, .32);
      border-radius: 12px;
      padding: 28px 30px
    }

    .callout strong {
      display: block;
      font-size: .72rem;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--rose);
      margin-bottom: 8px
    }

    .callout p {
      margin: 0;
      font-size: 1.02rem;
      color: #3a4742
    }

    /* tags + share */
    .article-foot {
      margin-top: 56px;
      padding-top: 30px;
      border-top: 1px solid var(--line);
      display: flex;
      flex-wrap: wrap;
      gap: 24px;
      align-items: center;
      justify-content: space-between
    }

    .tag-row {
      display: flex;
      flex-wrap: wrap;
      gap: 9px
    }

    .share {
      display: flex;
      gap: 10px;
      align-items: center
    }

    .share span {
      font-size: .7rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: #6d7772
    }

    .share a {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 50%;
      text-decoration: none;
      font-size: .82rem;
      letter-spacing: .02em;
      transition: .3s
    }

    .share a:hover {
      background: var(--ink);
      color: #fff;
      border-color: var(--ink);
      transform: translateY(-3px)
    }

    /* author card */
    .author {
      margin-top: 50px;
      display: flex;
      gap: 24px;
      align-items: center;
      background: rgba(255, 253, 248, .9);
      border: 1px solid rgba(255, 255, 255, .8);
      border-radius: 14px;
      padding: 28px;
      box-shadow: 0 15px 45px rgba(73, 97, 83, .08)
    }

    .author img {
      width: 92px;
      height: 92px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0
    }

    .author h4 {
      margin: 0 0 6px;
      font-size: 1.2rem;
      font-weight: normal
    }

    .author .role {
      font-size: .68rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--rose);
      margin-bottom: 8px
    }

    .author p {
      margin: 0;
      font-size: .94rem;
      color: #627069
    }

    /* ---------- Sidebar ---------- */
    .sidebar {
      position: sticky;
      top: 96px;
      display: flex;
      flex-direction: column;
      gap: 30px
    }

    .widget {
      background: rgba(255, 253, 248, .92);
      border: 1px solid rgba(255, 255, 255, .8);
      border-radius: 14px;
      padding: 26px;
      box-shadow: 0 15px 45px rgba(73, 97, 83, .07)
    }

    .widget h4 {
      margin: 0 0 18px;
      font-size: .74rem;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--sage-deep)
    }

    .toc a {
      display: block;
      text-decoration: none;
      font-size: .96rem;
      color: #4a5852;
      padding: 8px 0 8px 16px;
      border-left: 2px solid var(--line);
      transition: .3s
    }

    .toc a:hover {
      color: var(--rose);
      border-color: var(--gold);
      padding-left: 22px
    }

    .mini-post {
      display: flex;
      gap: 14px;
      align-items: center;
      text-decoration: none;
      margin-bottom: 18px
    }

    .mini-post:last-child {
      margin-bottom: 0
    }

    .mini-post img {
      width: 64px;
      height: 64px;
      border-radius: 9px;
      object-fit: cover;
      flex-shrink: 0;
      filter: saturate(.8) sepia(.05)
    }

    .mini-post .m-date {
      font-size: .68rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--rose)
    }

    .mini-post h5 {
      margin: 4px 0 0;
      font-size: .96rem;
      font-weight: normal;
      line-height: 1.25;
      color: var(--ink);
      transition: color .3s
    }

    .mini-post:hover h5 {
      color: var(--rose)
    }

    .widget-cta {
      background: linear-gradient(135deg, #283740, #12191d);
      color: #f3eee6;
      border: 0
    }

    .widget-cta h4 {
      color: #ffad73
    }

    .widget-cta p {
      margin: 0 0 18px;
      font-size: .92rem;
      color: #c6ced0
    }

    .widget-cta .btn {
      width: 100%
    }

    /* ---------- Marquee ---------- */
    .marquee {
      overflow: hidden;
      background: var(--gold);
      color: #15191b;
      padding: 16px 0;
      transform: rotate(-1deg) scale(1.02);
      position: relative;
      z-index: 4
    }

    .marquee-track {
      display: flex;
      width: max-content;
      animation: marquee 28s linear infinite
    }

    .marquee span {
      font-size: .72rem;
      font-weight: bold;
      letter-spacing: .18em;
      text-transform: uppercase;
      white-space: nowrap
    }

    .marquee b {
      font-size: 1.1rem;
      margin: 0 24px;
      color: #fff
    }

    .marquee:hover .marquee-track {
      animation-play-state: paused
    }

    @keyframes marquee {
      to { transform: translateX(-50%) }
    }

    /* ---------- Related ---------- */
    .related {
      background: linear-gradient(135deg, #dbe0df, #bac7cd);
      padding: 100px 0
    }

    .section-title {
      font-size: clamp(2.3rem, 5vw, 4.4rem);
      line-height: 1.06;
      font-weight: normal;
      letter-spacing: -.035em;
      margin: 18px 0 25px
    }

    .section-title em {
      color: var(--rose);
      font-weight: normal
    }

    .related-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 30px;
      margin-bottom: 44px
    }

    .related-head a {
      flex-shrink: 0;
      text-decoration: none;
      text-transform: uppercase;
      letter-spacing: .12em;
      font-size: .72rem;
      border-bottom: 1px solid var(--rose);
      padding-bottom: 4px;
      color: var(--rose)
    }

    .post-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px
    }

    .post-card {
      display: flex;
      flex-direction: column;
      background: rgba(255, 253, 248, .9);
      border: 1px solid rgba(255, 255, 255, .8);
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 15px 45px rgba(73, 97, 83, .08);
      transition: transform .55s cubic-bezier(.2, .8, .2, 1), box-shadow .55s
    }

    .post-card:hover {
      transform: translateY(-14px);
      box-shadow: 0 30px 70px rgba(39, 52, 47, .17)
    }

    .post-thumb {
      position: relative;
      overflow: hidden;
      aspect-ratio: 16/10
    }

    .post-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: saturate(.78) sepia(.05);
      transition: transform .7s cubic-bezier(.2, .8, .2, 1)
    }

    .post-card:hover .post-thumb img {
      transform: scale(1.07)
    }

    .post-thumb .chip {
      position: absolute;
      top: 14px;
      left: 14px;
      background: rgba(18, 25, 29, .82);
      color: #ffad73;
      border-color: transparent
    }

    .post-body {
      padding: 26px 26px 30px;
      display: flex;
      flex-direction: column;
      flex: 1
    }

    .post-body .date {
      font-style: italic;
      color: var(--rose);
      font-size: .82rem
    }

    .post-body h3 {
      font-size: 1.4rem;
      font-weight: normal;
      line-height: 1.18;
      margin: 10px 0 12px
    }

    .post-body h3 a {
      text-decoration: none
    }

    .post-body p {
      color: #627069;
      font-size: .92rem;
      margin: 0 0 20px
    }

    .post-foot {
      margin-top: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-top: 1px solid var(--line);
      padding-top: 16px;
      font-size: .72rem;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: #6d7772
    }

    .post-foot a {
      text-decoration: none;
      color: var(--rose);
      text-underline-offset: 4px
    }

    .post-foot a:hover {
      text-decoration: underline
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      border: 1px solid var(--sage-deep);
      background: var(--sage-deep);
      color: white;
      padding: 14px 24px;
      border-radius: 99px;
      font-size: .8rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      transition: .25s;
      cursor: pointer;
      overflow: hidden;
      position: relative
    }

    .btn:hover {
      transform: translateY(-2px);
      background: var(--gold);
      border-color: var(--gold);
      color: var(--ink)
    }

    .btn.gold {
      background: var(--gold);
      border-color: var(--gold);
      color: var(--ink)
    }

    .btn.gold:hover {
      background: var(--rose);
      border-color: var(--rose);
      color: #fff
    }

    /* ---------- Newsletter ---------- */
    .newsletter {
      background: var(--ink);
      color: #f7f4ec;
      padding: 110px 0
    }

    .newsletter .eyebrow {
      color: #bfd0c4
    }

    .news-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 70px;
      align-items: center
    }

    .news-grid .section-title {
      margin-bottom: 18px
    }

    .news-grid p {
      color: #bfcac3
    }

    .news-form {
      background: rgba(255, 255, 255, .04);
      border: 1px solid rgba(255, 255, 255, .15);
      border-radius: 12px;
      padding: 36px
    }

    .news-form label {
      display: block;
      font-size: .68rem;
      text-transform: uppercase;
      letter-spacing: .12em;
      margin: 0 0 8px
    }

    .news-form input {
      width: 100%;
      padding: 14px 2px;
      border: 0;
      border-bottom: 1px solid rgba(255, 255, 255, .28);
      background: transparent;
      color: #fff;
      outline: none;
      margin-bottom: 18px
    }

    .news-form input::placeholder {
      color: #7e8b85
    }

    .news-form .btn:after {
      content: "→";
      width: 0;
      opacity: 0;
      transition: .3s
    }

    .news-form .btn:hover:after {
      margin-left: 12px;
      width: auto;
      opacity: 1
    }

    .news-note {
      margin-top: 18px;
      font-size: .76rem;
      color: #afbbb3
    }
    .form_btn_logo {
      display: flex;
      justify-content: space-between;
      align-items: start;

      .form_logo {
        margin-top: 0;
        display: flex;
        gap: 10px;
        align-items: center;
        text-decoration: none;
      }
    }

    /* ---------- Footer ---------- */
    footer {
      background: #1d2823;
      color: #d5dfd8;
      padding: 26px 0
    }

    .footer-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 30px
    }

    .footer-inner p {
      margin: 0;
      color: #91a096;
      font-size: .74rem
    }

    .footer-inner a {
      text-decoration: none;
      margin-left: 20px;
      font-size: .75rem
    }

    /* ---------- Reveal + ambient ---------- */
    .reveal {
      opacity: 0;
      transform: translateY(60px) rotateX(7deg);
      filter: blur(5px);
      transition: 1s cubic-bezier(.16, 1, .3, 1)
    }

    /* Article content reveals faster & lighter (no blur) so it appears almost instantly */
    .prose.reveal,
    .sidebar.reveal {
      transform: translateY(24px);
      filter: none;
      transition: opacity .45s ease-out, transform .45s cubic-bezier(.16, 1, .3, 1)
    }

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

    .ambient {
      position: fixed;
      z-index: -1;
      border-radius: 50%;
      pointer-events: none;
      filter: blur(1px);
      opacity: .16
    }

    .ambient.one {
      width: 340px;
      height: 340px;
      background: var(--gold);
      right: -130px;
      top: 35vh;
      animation: drift 11s ease-in-out infinite
    }

    .ambient.two {
      width: 220px;
      height: 220px;
      border: 35px solid var(--slate);
      left: -80px;
      bottom: 8vh;
      animation: drift 14s ease-in-out infinite reverse
    }

    .cursor-glow {
      position: fixed;
      z-index: 30;
      width: 260px;
      height: 260px;
      margin: -130px 0 0 -130px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 138, 52, .12), transparent 68%);
      pointer-events: none;
      transform: translate(var(--x, -500px), var(--y, -500px));
      transition: transform .12s linear
    }

    @keyframes drift {
      50% { transform: translate(25px, -45px) scale(1.12) }
    }

    /* ---------- Responsive ---------- */
    @media(max-width:980px) {
      .article-grid {
        grid-template-columns: 1fr;
        gap: 50px
      }

      .sidebar {
        position: static;
        flex-direction: row;
        flex-wrap: wrap
      }

      .sidebar .widget {
        flex: 1 1 280px
      }
    }

    @media(max-width:850px) {
      .nav-links {
        display: none
      }

      .menu {
        display: block
      }

      .brand-logo {
        width: 50px;
        height: 50px
      }

      .article-hero {
        min-height: 560px
      }

      .article-hero-content {
        padding: 150px 0 90px
      }

      .cursor-glow {
        display: none
      }

      .news-grid {
        grid-template-columns: 1fr;
        gap: 44px
      }

      .post-grid {
        grid-template-columns: 1fr 1fr
      }

      .related-head {
        display: block
      }

      .related-head a {
        display: inline-block;
        margin-top: 14px
      }

      .topline .wrap span:first-child {
        display: none
      }

      .footer-inner {
        display: block;
        text-align: center
      }

      .footer-inner nav {
        margin-top: 16px
      }

      .footer-inner a {
        margin: 0 8px
      }

      .loader-logo {
        width: 84px;
        height: 84px
      }

      .key {
        width: 34px;
        height: 112px
      }

      .key.black {
        width: 22px;
        margin: 0 -11px;
        height: 70px
      }

      .keys {
        height: 122px
      }
    }

    @media(max-width:560px) {
      .article {
        padding: 70px 0 50px
      }

      .newsletter,
      .related {
        padding: 80px 0
      }

      .prose {
        font-size: 1.06rem
      }

      .prose > .lead {
        font-size: 1.24rem
      }

      .post-grid {
        grid-template-columns: 1fr
      }

      .article-foot {
        flex-direction: column;
        align-items: flex-start
      }

      .author {
        flex-direction: column;
        text-align: center
      }

      .sidebar {
        flex-direction: column
      }

      .news-form {
        padding: 26px
      }
    }

    @media(prefers-reduced-motion:reduce) {
      * {
        scroll-behavior: auto !important
      }

      .key,
      .loader-logo,
      .marquee-track,
      .ambient {
        animation: none !important
      }

      .reveal {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none
      }
    }
    /* ---------- Shared mobile navigation ---------- */
    @media(max-width:850px) {
      .nav-inner {
        position: relative
      }

      .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: 10px 18px 16px;
        background: #0d0b0a;
        border-top: 1px solid rgba(255, 255, 255, .12);
        box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
        z-index: 60
      }

      .nav-links.open {
        display: flex
      }

      .nav-links a {
        display: block;
        width: 100%;
        padding: 12px 0;
        font-size: .95rem;
        border-bottom: 1px solid rgba(255, 255, 255, .08)
      }

      .nav-links a:last-child {
        border-bottom: 0
      }
    }