/* Parfums d’Jardestål — Mobile Excellence v1.11.0
   Mobile-only art direction. Desktop (>= 768px) intentionally untouched.
   React Bits-inspired principles reimplemented in native CSS/vanilla JS:
   scroll-snap collection, restrained scroll expansion, editorial asymmetry. */

.mobile-collection-progress { display: none; }

@media (max-width: 767px) {
  :root {
    --mx-gutter: 20px;
    --mx-gutter-wide: 26px;
    --mx-paper: #f4f1e8;
    --mx-paper-warm: #efe9df;
    --mx-ink: #171512;
    --mx-muted: #746d64;
    --mx-ox: #6d2639;
    --mx-green: #10271f;
    --mx-cream: #f5efe4;
    --mx-rule: rgba(23, 21, 18, .14);
    --mx-ease: cubic-bezier(.16, 1, .3, 1);
  }

  /* ---------------------------------------------------------
     Global mobile frame — quieter, more compact house chrome
     --------------------------------------------------------- */
  .container,
  .fc-shell,
  .house-shell,
  .footer-inner {
    width: calc(100% - (var(--mx-gutter) * 2)) !important;
  }

  .site-header {
    height: 64px !important;
    padding-inline: var(--mx-gutter) !important;
  }
  .site-header.is-solid { height: 56px !important; }
  .site-header .brand { gap: 8px !important; min-width: 0; }
  .site-header .brand-logo {
    width: 34px !important;
    height: 34px !important;
    flex-basis: 34px !important;
  }
  .site-header.is-solid .brand-logo {
    width: 30px !important;
    height: 30px !important;
    flex-basis: 30px !important;
  }
  .site-header .brand-name {
    max-width: 214px;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
    font-size: 9px !important;
    line-height: 1 !important;
    letter-spacing: .055em !important;
  }
  .site-header.is-solid .brand-name { font-size: 8.7px !important; }
  html.js .site-header.staggered-menu .menu-toggle {
    min-width: 68px !important;
    min-height: 44px !important;
    justify-content: flex-end !important;
    font-size: 10px !important;
    letter-spacing: .16em !important;
  }

  /* Full-screen menu: editorial rather than oversized app-menu. */
  html.js .site-header.staggered-menu .nav.staggered-menu-panel {
    padding: 94px var(--mx-gutter) 38px !important;
    justify-content: center !important;
  }
  html.js .site-header.staggered-menu .nav.staggered-menu-panel::before {
    left: var(--mx-gutter) !important;
    top: 77px !important;
  }
  html.js .site-header.staggered-menu .nav.staggered-menu-panel::after {
    left: var(--mx-gutter) !important;
    bottom: 20px !important;
  }
  html.js .site-header.staggered-menu .nav.staggered-menu-panel > a {
    min-height: 58px !important;
    padding: 9px 0 9px 38px !important;
    font-size: clamp(32px, 9.4vw, 44px) !important;
    line-height: .98 !important;
    letter-spacing: -.025em !important;
  }
  html.js .site-header.staggered-menu .nav.staggered-menu-panel > a::after { left: 38px !important; }
  html.js .site-header.staggered-menu .nav.staggered-menu-panel > a:hover,
  html.js .site-header.staggered-menu .nav.staggered-menu-panel > a:focus-visible { padding-left: 44px !important; }

  /* ---------------------------------------------------------
     Home hero — preserve the strong composition, tune only scale
     --------------------------------------------------------- */
  .home-page .home-hero {
    min-height: calc(100svh - 64px) !important;
  }
  .home-page .home-hero .hero-media { object-position: 51% 50% !important; }
  .home-page .home-hero-inner {
    align-items: flex-end !important;
    padding: 0 var(--mx-gutter) 52px !important;
  }
  .home-page .home-hero-copy { width: 100%; max-width: none; }
  .home-page .home-hero-copy h1 {
    max-width: 9.6ch;
    font-size: clamp(43px, 12.1vw, 56px) !important;
    line-height: .96 !important;
    letter-spacing: -.034em !important;
  }
  .home-page .home-hero-copy p {
    margin-top: 15px !important;
    font-size: clamp(19px, 5.2vw, 22px) !important;
  }
  .home-page .home-primary-link { margin-top: 23px !important; }

  /* ---------------------------------------------------------
     Founding Collection — native mobile carousel / next-card peek
     --------------------------------------------------------- */
  .home-page .home-founding {
    padding: 80px 0 88px !important;
    overflow: hidden;
  }
  .home-page .home-founding > .container {
    width: 100% !important;
    max-width: none !important;
  }
  .home-page .home-founding .home-section-intro {
    width: calc(100% - (var(--mx-gutter) * 2));
    margin: 0 auto 44px !important;
  }
  .home-page .home-founding .home-section-intro .eyebrow { margin-bottom: 17px !important; }
  .home-page .home-founding .home-section-intro h2 {
    max-width: 8.7ch;
    margin: 0 !important;
    font-size: clamp(46px, 12.7vw, 58px) !important;
    line-height: .94 !important;
    letter-spacing: -.042em !important;
    text-wrap: balance;
  }

  .home-page .home-founding-gallery,
  .home-page .home-founding-gallery:is(:hover, :focus-within) {
    display: flex !important;
    width: 100% !important;
    height: auto !important;
    gap: 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--mx-gutter);
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0 var(--mx-gutter) 10px !important;
    scrollbar-width: none;
  }
  .home-page .home-founding-gallery::-webkit-scrollbar { display: none; }
  .home-page .accordion-gallery__item,
  .home-page .accordion-gallery__item.is-active {
    flex: 0 0 min(83vw, 346px) !important;
    width: min(83vw, 346px) !important;
    min-height: 0 !important;
    aspect-ratio: .82 / 1 !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    border-radius: 14px !important;
    animation: none !important;
  }
  .home-page .accordion-gallery__media {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
  }
  .home-page .accordion-gallery__media img,
  .home-page .accordion-gallery__item.is-active .accordion-gallery__media img {
    filter: grayscale(.04) saturate(.9) contrast(.99) brightness(.96) !important;
    transform: scale(1.015) !important;
  }
  .home-page .accordion-gallery__veil,
  .home-page .accordion-gallery__item.is-active .accordion-gallery__veil {
    opacity: .78 !important;
    background:
      linear-gradient(180deg, rgba(5,3,4,.04) 24%, rgba(5,3,4,.16) 51%, rgba(5,3,4,.86) 100%),
      linear-gradient(90deg, rgba(5,3,4,.18), transparent 58%) !important;
  }
  .home-page .accordion-gallery__copy {
    padding: 24px 22px 22px !important;
  }
  .home-page .accordion-gallery__copy strong,
  .home-page .accordion-gallery__item:not(.is-active) .accordion-gallery__copy strong {
    max-width: 11ch;
    font-size: clamp(35px, 10vw, 44px) !important;
    line-height: .95 !important;
  }
  .home-page .accordion-gallery__notes {
    margin-top: 9px !important;
    font-size: 12.5px !important;
    line-height: 1.5 !important;
  }
  .home-page .accordion-gallery__link {
    margin-top: 15px !important;
    font-size: 10px !important;
  }
  .home-page .accordion-gallery__notes,
  .home-page .accordion-gallery__link {
    max-height: 80px !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .mobile-collection-progress {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 10px;
    width: calc(100% - (var(--mx-gutter) * 2));
    margin: 12px auto 0;
    color: var(--mx-muted);
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .12em;
  }
  .mobile-collection-progress__track {
    position: relative;
    height: 1px;
    overflow: hidden;
    background: rgba(23,21,18,.17);
  }
  .mobile-collection-progress__fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 25%;
    background: var(--mx-ox);
    transform-origin: left center;
    transition: width .35s var(--mx-ease);
  }
  .mobile-collection-progress__total { text-align: right; }

  /* ---------------------------------------------------------
     Atelier — React Bits Scroll Expand idea, kept native/lightweight
     --------------------------------------------------------- */
  .home-page .home-atelier {
    padding: 0 0 88px !important;
    overflow: hidden;
  }
  .home-page .home-atelier-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  .home-page .home-atelier-media {
    order: 1;
    width: calc(100% + (var(--mx-gutter) * 2)) !important;
    max-width: none !important;
    margin: 0 calc(var(--mx-gutter) * -1) !important;
    aspect-ratio: .96 / 1 !important;
    border-radius: 0 !important;
    transform-origin: center center;
  }
  html.js .home-page .home-atelier-media {
    clip-path: inset(3.4% 4.4% round 14px);
    transform: scale(.965);
    transition: clip-path .9s var(--mx-ease), transform .9s var(--mx-ease);
  }
  html.js .home-page .home-atelier-media.is-mobile-expanded {
    clip-path: inset(0 0 round 0);
    transform: scale(1);
  }
  .home-page .home-atelier-media figcaption {
    left: var(--mx-gutter) !important;
    bottom: 18px !important;
  }
  .home-page .home-atelier-copy {
    order: 2;
    position: relative;
    z-index: 4;
    width: calc(100% - 12px);
    margin: -32px auto 0 !important;
    padding: 36px 12px 0 !important;
    background: var(--home-paper-2, var(--mx-paper-warm));
  }
  .home-page .home-atelier-copy .eyebrow { margin-bottom: 18px !important; }
  .home-page .home-atelier-copy h2 {
    max-width: 8ch;
    font-size: clamp(47px, 13.5vw, 62px) !important;
    line-height: .96 !important;
    letter-spacing: -.04em !important;
  }
  .home-page .home-atelier-copy > p:not(.eyebrow) {
    max-width: 14ch;
    margin: 25px 0 25px !important;
    font-size: clamp(21px, 6.1vw, 25px) !important;
    line-height: 1.42 !important;
  }

  /* ---------------------------------------------------------
     Materials — asymmetrical material-book rhythm
     --------------------------------------------------------- */
  .home-page .home-materials { padding: 80px 0 88px !important; overflow: hidden; }
  .home-page .home-materials-intro { margin-bottom: 48px !important; }
  .home-page .home-materials-intro h2 {
    max-width: 8.2ch;
    font-size: clamp(47px, 13vw, 60px) !important;
    line-height: .95 !important;
  }
  .home-page .home-materials-intro > p:last-child {
    margin-top: 23px !important;
    max-width: 31ch;
    font-size: 15.5px !important;
    line-height: 1.7 !important;
  }
  .home-page .home-material-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 56px !important;
  }
  .home-page .home-material-card { width: 100%; }
  .home-page .home-material-media {
    aspect-ratio: .92 / 1 !important;
  }
  .home-page .home-material-label { padding-top: 17px !important; }
  .home-page .home-material-label h3 {
    font-size: clamp(34px, 10vw, 43px) !important;
  }
  .home-page .home-materials-link { margin-top: 44px !important; }

  /* ---------------------------------------------------------
     House — full-bleed photograph then intimate reading panel
     --------------------------------------------------------- */
  .home-page .home-house { padding: 0 0 88px !important; overflow: hidden; }
  .home-page .home-house > .container { width: 100% !important; }
  .home-page .home-house-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  .home-page .home-house-media {
    width: 100% !important;
    aspect-ratio: 1.02 / 1 !important;
  }
  .home-page .home-house-copy {
    width: 100%;
    max-width: none !important;
    padding: 50px var(--mx-gutter) 0 !important;
  }
  .home-page .home-house-copy h2 {
    max-width: 8.5ch;
    font-size: clamp(47px, 13.3vw, 60px) !important;
    line-height: .95 !important;
  }
  .home-page .home-house-copy > p:not(.eyebrow):not(.home-house-place) {
    max-width: 33ch;
    font-size: 16px !important;
    line-height: 1.75 !important;
  }
  .home-page .home-house-crest { width: 72px !important; height: 72px !important; }

  /* ---------------------------------------------------------
     Journal — featured story + alternating smaller editorial plates
     --------------------------------------------------------- */
  .home-page .home-journal { padding: 80px 0 88px !important; overflow: hidden; }
  .home-page .home-journal-head { margin-bottom: 48px !important; }
  .home-page .home-journal-head h2 {
    max-width: 8.4ch;
    font-size: clamp(46px, 12.8vw, 58px) !important;
    line-height: .96 !important;
  }
  .home-page .home-journal-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 56px !important;
  }
  .home-page .home-journal-card { width: 100%; }
  .home-page .home-journal-card:nth-child(2) { width: 88%; margin-left: auto; }
  .home-page .home-journal-card:nth-child(3) { width: 88%; margin-right: auto; }
  .home-page .home-journal-media { aspect-ratio: 1.28 / 1 !important; }
  .home-page .home-journal-card:nth-child(2) .home-journal-media,
  .home-page .home-journal-card:nth-child(3) .home-journal-media { aspect-ratio: 1.08 / 1 !important; }
  .home-page .home-journal-copy { padding-top: 20px !important; }
  .home-page .home-journal-card h3 {
    margin-top: 13px !important;
    font-size: clamp(31px, 8.9vw, 40px) !important;
    line-height: 1.02 !important;
  }
  .home-page .home-journal-card:nth-child(n+2) h3 {
    font-size: clamp(28px, 8vw, 35px) !important;
  }

  /* ---------------------------------------------------------
     Material archive — darker editorial chapter on touch
     --------------------------------------------------------- */
  .material-page .fc-hero {
    padding: 110px 0 70px !important;
    border-bottom: 0 !important;
  }
  .material-page .fc-hero h1 {
    max-width: 7ch !important;
    margin: 18px 0 34px !important;
    font-size: clamp(58px, 16.5vw, 76px) !important;
    line-height: .88 !important;
    letter-spacing: -.05em !important;
  }
  .material-page .fc-intro {
    display: block !important;
    max-width: none !important;
  }
  .material-page .fc-intro p:first-child {
    max-width: 12ch !important;
    margin-bottom: 24px !important;
    font-size: clamp(26px, 7.6vw, 33px) !important;
    line-height: 1.12 !important;
  }
  .material-page .fc-intro p:last-child {
    max-width: 31ch !important;
    font-size: 15.5px !important;
    line-height: 1.72 !important;
  }
  .material-page .material-flow-section {
    padding: 78px 0 88px !important;
    background: linear-gradient(155deg, #10271f 0%, #152b22 58%, #111e19 100%) !important;
    color: var(--mx-cream) !important;
  }
  .material-page .material-flow-intro { margin-bottom: 46px !important; }
  .material-page .material-flow-intro .fc-kicker { color: #c6a29c !important; }
  .material-page .material-flow-intro h2 {
    max-width: 8ch;
    margin: 17px 0 22px !important;
    color: var(--mx-cream) !important;
    font-size: clamp(48px, 13.2vw, 60px) !important;
    line-height: .94 !important;
  }
  .material-page .material-flow-intro > p:last-child,
  .material-page .material-flow-notes p { color: rgba(245,239,228,.68) !important; }
  .material-page .flowing-menu { border-color: rgba(245,239,228,.18) !important; }
  .material-page .flowing-menu__item {
    border-color: rgba(245,239,228,.16) !important;
    padding: 0 !important;
  }
  .material-page .flowing-menu__link {
    grid-template-columns: minmax(0,1fr) !important;
    gap: 3px 10px !important;
    padding: 28px var(--mx-gutter) 230px !important;
    color: var(--mx-cream) !important;
  }
  .material-page .flowing-menu__index {
    color: #c6a29c !important;
    padding-top: 5px !important;
  }
  .material-page .flowing-menu__title {
    font-size: clamp(42px, 12vw, 55px) !important;
    line-height: .94 !important;
    color: var(--mx-cream) !important;
  }
  .material-page .flowing-menu__descriptor {
    grid-column: 1 !important;
    color: rgba(245,239,228,.62) !important;
  }
  .material-page .flowing-menu__marquee {
    left: var(--mx-gutter) !important;
    right: var(--mx-gutter) !important;
    bottom: 24px !important;
    height: 182px !important;
    border-radius: 0 !important;
    overflow: hidden;
  }
  .material-page .flowing-menu__item:nth-child(even) .flowing-menu__marquee {
    left: 58px !important;
    right: var(--mx-gutter) !important;
  }
  .material-page .flowing-menu__item:nth-child(odd) .flowing-menu__marquee {
    left: var(--mx-gutter) !important;
    right: 44px !important;
  }
  .material-page .flowing-menu__img { border-radius: 0 !important; filter: saturate(.72) contrast(1.02) brightness(.86); }
  .material-page .material-flow-notes { padding-top: 30px !important; }

  /* ---------------------------------------------------------
     Collection page — same editorial asymmetry as the house home
     --------------------------------------------------------- */
  .collection-page .fc-hero { padding: 108px 0 72px !important; }
  .collection-page .fc-hero h1 {
    margin: 18px 0 34px !important;
    font-size: clamp(56px, 15.6vw, 72px) !important;
    line-height: .91 !important;
  }
  .collection-page .fc-intro { gap: 22px !important; }
  .collection-page .fc-intro p:first-child {
    max-width: 13ch !important;
    font-size: clamp(27px, 7.7vw, 34px) !important;
  }
  .collection-page .fc-catalogue { padding-bottom: 84px !important; overflow: hidden; }
  .collection-page .fc-entry {
    padding: 66px 0 74px !important;
  }
  .collection-page .fc-copy h2 {
    max-width: 9ch;
    margin: 12px 0 16px !important;
    font-size: clamp(43px, 12.2vw, 55px) !important;
    line-height: .97 !important;
  }
  .collection-page .fc-media {
    order: 3;
    width: calc(100% + 20px) !important;
    margin: 34px 0 0 -10px !important;
    aspect-ratio: .95 / 1 !important;
    border: 0 !important;
    border-radius: 12px;
  }
  .collection-page .fc-entry:nth-child(even) .fc-media {
    width: 91% !important;
    margin-left: auto !important;
    margin-right: -10px !important;
  }
  .collection-page .fc-entry:nth-child(3) .fc-media {
    width: 88% !important;
    margin-left: -10px !important;
  }

  /* ---------------------------------------------------------
     Perfume pages — stronger opening spread, no new content
     --------------------------------------------------------- */
  .perfume-page .perfume-hero {
    min-height: 0 !important;
    padding-top: 64px !important;
  }
  .perfume-page .perfume-hero-copy {
    padding: 54px var(--mx-gutter) 44px !important;
  }
  .perfume-page .perfume-hero h1 {
    margin-top: 18px !important;
    font-size: clamp(58px, 17vw, 78px) !important;
    line-height: .91 !important;
    letter-spacing: -.045em !important;
  }
  .perfume-page .perfume-hero .notes { margin-top: 22px !important; }
  .perfume-page .perfume-hero-media {
    width: 100% !important;
    min-height: 0 !important;
    height: min(74svh, 620px) !important;
  }
  .perfume-page .perfume-hero-media img { transform: none !important; }
  .perfume-page .scent-section { padding-block: 82px !important; }
  .perfume-page .scent-copy-prose p:first-child {
    max-width: 14ch !important;
    font-size: clamp(31px, 9vw, 40px) !important;
    line-height: 1.13 !important;
  }

  /* ---------------------------------------------------------
     House / Journal / Contact — rhythm, not redesign
     --------------------------------------------------------- */
  .house-premium .hp-hero,
  .journal-page .journal-hero,
  .contact-page-shell .contact-editorial { padding-top: 108px !important; }

  .journal-page .journal-hero h1,
  .contact-page-shell h1 {
    line-height: .95 !important;
    letter-spacing: -.04em !important;
  }

  .contact-page-shell input,
  .contact-page-shell select,
  .contact-page-shell textarea { font-size: 16px !important; }

  /* Footer as a deliberate final page, not compressed utility bar. */
  .site-footer { padding: 58px 0 48px !important; }
  .site-footer .footer-inner { gap: 24px !important; }
  .site-footer .footer-logo { width: 58px !important; }
}

/* Short landscape phones: menu must remain usable. */
@media (max-width: 767px) and (max-height: 560px) {
  html.js .site-header.staggered-menu .nav.staggered-menu-panel {
    padding-top: 66px !important;
    padding-bottom: 20px !important;
    justify-content: flex-start !important;
    overflow-y: auto !important;
  }
  html.js .site-header.staggered-menu .nav.staggered-menu-panel::before { top: 56px !important; }
  html.js .site-header.staggered-menu .nav.staggered-menu-panel > a {
    min-height: 44px !important;
    padding-block: 5px !important;
    font-size: clamp(27px, 8vh, 36px) !important;
  }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  html.js .home-page .home-atelier-media {
    clip-path: none !important;
    transform: none !important;
    transition: none !important;
  }
  .mobile-collection-progress__fill { transition: none !important; }
}

/* Material AccordionGallery: all devices; original static no-JS fallback. */
  .perfume-page .material-grid.material-accordion-active {
    display: flex !important;
    gap: 8px !important;
    align-items: stretch;
    perspective: 1000px;
    width: 100% !important;
    margin-inline: 0 !important;
    height: clamp(350px, 62svh, 560px);
  }
  .perfume-page .material-accordion-active > .material-card:nth-child(n) {
    position: relative;
    flex: 1 1 0;
    min-width: 44px;
    width: auto !important;
    height: 100%;
    margin: 0 !important;
    overflow: hidden;
    transform: rotateY(var(--material-tilt,0deg));
    transition: flex-grow .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
  }
  .perfume-page .material-accordion-active > .material-card.is-material-active { flex-grow: 2.166667; }
  .perfume-page .material-accordion-active .material-card > .media {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    overflow: hidden;
  }
  .perfume-page .material-accordion-active .media img,
  .perfume-page .material-accordion-active .media video {
    transform: translate(var(--material-x,0px),var(--material-y,0px)) scale(1.06) !important;
    filter: grayscale(1);
    transition: filter .6s ease, opacity .45s ease !important;
  }
  .perfume-page .material-accordion-active .is-material-active .media img,
  .perfume-page .material-accordion-active .is-material-active .media video { filter: grayscale(0); }
  .perfume-page .material-accordion-active .material-card > p {
    position: absolute;
    inset: auto 0 0;
    margin: 0 !important;
    padding: 70px 14px 20px;
    color: var(--mx-cream, #f5efe4) !important;
    font-size: 12px !important;
    line-height: 1.4;
    background: linear-gradient(transparent,rgba(0,0,0,.72));
    pointer-events: none;
    z-index: 1;
  }
  .perfume-page .material-accordion-active .material-card:not(.is-material-active) > p {
    writing-mode: vertical-rl;
    padding: 32px 10px 16px;
    width: 100%;
    box-sizing: border-box;
  }
  .material-accordion-control {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-width: 44px;
    min-height: 44px;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    z-index: 2;
  }
  .material-accordion-control:focus-visible { outline: 2px solid var(--mx-cream, #f5efe4); outline-offset: -5px; }
@media (prefers-reduced-motion: reduce) {
  .perfume-page .material-accordion-active > .material-card,
  .perfume-page .material-accordion-active .media img,
  .perfume-page .material-accordion-active .media video { transition: none !important; }
  .perfume-page .material-accordion-active > .material-card,
  .perfume-page .material-accordion-active .media img,
  .perfume-page .material-accordion-active .media video { transform: none !important; }
}

/* Tablet and desktop use the same interaction on a wider editorial canvas. */
@media (min-width: 768px) {
  .perfume-page .material-grid.material-accordion-active {
    gap: clamp(12px, 1.5vw, 22px) !important;
    height: clamp(420px, 42vw, 660px);
  }
  .perfume-page .material-accordion-active .material-card > p,
  .perfume-page .material-accordion-active .material-card:not(.is-material-active) > p {
    writing-mode: horizontal-tb;
    width: 100%;
    box-sizing: border-box;
    padding: 80px clamp(16px, 2vw, 28px) 24px;
    font-size: 16px !important;
  }
}
.material-accordion-control { touch-action: pan-y; }