/* WOTKNOT Magazine page assets v2.5.0 */
.wkw-magazine-widget{
  --ease-editorial:cubic-bezier(.77,0,.18,1);
  overflow:hidden;
  background:var(--ink);
  color:var(--paper);
}
.wkw-magazine-widget .wkw-magazine-page{position:relative;overflow:hidden;background:var(--ink)}
.wkw-magazine-widget .mag-current__names a{display:inline-block;color:inherit}
.wkw-magazine-widget .mag-issue__hit[aria-disabled="true"]{pointer-events:none}
    .mag-eyebrow {
      display: flex;
      align-items: center;
      gap: .9rem;
      margin: 0;
      font-family: var(--mono);
      font-size: clamp(.6rem, .7vw, .72rem);
      letter-spacing: .3em;
      text-transform: uppercase;
      color: var(--paper-dim);
    }
    .mag-eyebrow::before {
      content: "";
      width: 2.4rem;
      height: 1px;
      background: var(--paper-dim);
    }

    /* ============================================================
       01 — Hero
       ============================================================ */
    .mag-hero {
      position: relative;
      min-height: 62svh;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      overflow: hidden;
      padding: clamp(6rem, 14vh, 10rem) var(--gutter) clamp(2.75rem, 6vh, 4.5rem);
    }
    .mag-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(circle at 82% 22%, rgba(255, 240, 198, .05), transparent 26%),
        radial-gradient(circle at 10% 90%, rgba(255, 255, 255, .028), transparent 30%);
    }
    .mag-hero .mag-eyebrow { margin-bottom: clamp(1.4rem, 3vh, 2.2rem); }
    .mag-hero__title {
      margin: 0 0 clamp(1.5rem, 3.5vh, 2.5rem);
      font-family: var(--sans);
      font-size: clamp(3.4rem, 12.4vw, 12rem);
      font-weight: 400;
      line-height: .88;
      letter-spacing: -.065em;
      text-transform: uppercase;
    }
    .mag-hero__title em {
      font-family: var(--serif);
      font-style: italic;
      font-weight: 400;
      text-transform: none;
      letter-spacing: -.02em;
      color: var(--cream);
    }
    .mag-hero__title .mag-word-mask {
      display: inline-block;
      overflow: hidden;
      vertical-align: bottom;
    }
    .mag-hero__title .mag-char {
      display: inline-block;
      transform: translateY(112%);
      transition: transform .95s var(--ease-editorial);
      transition-delay: var(--char-delay, 0s);
      will-change: transform;
    }
    .mag-hero.is-in .mag-char { transform: none; }
    .mag-hero__foot {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 2rem;
      opacity: 0;
      transform: translateY(1.2rem);
      transition: opacity .9s var(--ease) .55s, transform .9s var(--ease) .55s;
    }
    .mag-hero.is-in .mag-hero__foot { opacity: 1; transform: none; }
    .mag-hero__dek {
      max-width: 34ch;
      margin: 0;
      font-family: var(--serif);
      font-style: italic;
      font-size: clamp(1rem, 1.4vw, 1.3rem);
      line-height: 1.55;
      color: var(--paper-dim);
    }
    .mag-hero__count {
      display: grid;
      justify-items: end;
      gap: .3rem;
      font-family: var(--mono);
      font-size: clamp(.56rem, .68vw, .7rem);
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--paper-dim);
      text-align: right;
    }
    .mag-hero__count b {
      font-family: var(--sans);
      font-size: clamp(1.6rem, 3vw, 2.8rem);
      font-weight: 300;
      letter-spacing: -.04em;
      color: var(--cream);
      line-height: 1;
      font-variant-numeric: tabular-nums;
    }

    /* ============================================================
       02 — Current issue: 3D tilt cover + meta
       ============================================================ */
    .mag-current {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
      align-items: center;
      gap: clamp(2.5rem, 6vw, 6.5rem);
      padding: clamp(4.5rem, 10vh, 8rem) var(--gutter);
      border-top: 1px solid var(--rule);
      overflow: hidden;
    }
    .mag-current::after {
      content: attr(data-ghost-number);
      position: absolute;
      right: -.06em;
      bottom: -.22em;
      z-index: 0;
      pointer-events: none;
      user-select: none;
      font-family: var(--sans);
      font-size: clamp(8rem, 26vw, 26rem);
      font-weight: 300;
      line-height: .8;
      letter-spacing: -.07em;
      color: rgba(245, 243, 237, .04);
      white-space: nowrap;
    }
    .mag-tilt {
      position: relative;
      z-index: 1;
      justify-self: center;
      width: min(100%, 420px);
      perspective: 1100px;
    }
    .mag-tilt__card {
      position: relative;
      aspect-ratio: 4 / 5;
      overflow: hidden;
      border: 1px solid rgba(255, 245, 210, .74);
      background: #111;
      box-shadow: 0 1.6rem 3.4rem rgba(0, 0, 0, .5);
      transform-style: preserve-3d;
      will-change: transform;
      clip-path: inset(0 0 100% 0);
      transition: clip-path 1.25s var(--ease-editorial) .15s;
    }
    .mag-current.mag-in .mag-tilt__card { clip-path: inset(0); }
    .mag-tilt__card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .mag-tilt__sheen {
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(115deg, transparent 30%, rgba(255, 245, 210, .14) 48%, transparent 66%);
      transform: translateX(-120%);
      will-change: transform;
    }
    .mag-tilt__tag {
      position: absolute;
      top: 1rem;
      left: 1rem;
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      padding: .45rem .85rem;
      border-radius: 999px;
      background: var(--cream);
      color: var(--ink);
      font-family: var(--mono);
      font-size: .52rem;
      letter-spacing: .2em;
      text-transform: uppercase;
    }
    .mag-tilt__tag::before {
      content: "";
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--ink);
    }

    .mag-current__meta { position: relative; z-index: 1; display: grid; gap: clamp(1.4rem, 3vh, 2.1rem); align-content: center; }
    .mag-current__label {
      display: flex;
      align-items: baseline;
      gap: 1.2rem;
      font-family: var(--mono);
      font-size: clamp(.58rem, .7vw, .72rem);
      letter-spacing: .26em;
      text-transform: uppercase;
      color: var(--paper-dim);
    }
    .mag-current__label em { font-style: normal; color: var(--cream); }
    .mag-current__title {
      margin: 0;
      font-family: var(--sans);
      font-size: clamp(2.2rem, 5.4vw, 5.2rem);
      font-weight: 500;
      line-height: .98;
      letter-spacing: -.045em;
      text-transform: uppercase;
    }
    .mag-current__title .mag-line { display: block; overflow: hidden; }
    .mag-current__title .mag-line > span {
      display: inline-block;
      transform: translateY(112%);
      transition: transform 1s var(--ease-editorial);
    }
    .mag-current.mag-in .mag-current__title .mag-line > span { transform: none; }
    .mag-current__title .mag-line:nth-child(2) > span { transition-delay: .1s; }
    .mag-current__title em {
      font-family: var(--serif);
      font-style: italic;
      font-weight: 400;
      text-transform: none;
      color: var(--cream);
    }
    .mag-current__dek {
      margin: 0;
      max-width: 46ch;
      font-size: clamp(.92rem, 1.05vw, 1.05rem);
      line-height: 1.75;
      color: var(--paper-dim);
      opacity: 0;
      transform: translateY(1.2rem);
      transition: opacity .9s var(--ease) .25s, transform .9s var(--ease) .25s;
    }
    .mag-current.mag-in .mag-current__dek { opacity: 1; transform: none; }
    .mag-current__names {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      column-gap: 1.4rem;
      row-gap: .45rem;
      font-family: var(--sans);
      font-size: clamp(.92rem, 1.15vw, 1.15rem);
      font-weight: 500;
      letter-spacing: -.03em;
      opacity: 0;
      transform: translateY(1.2rem);
      transition: opacity .9s var(--ease) .35s, transform .9s var(--ease) .35s;
    }
    .mag-current.mag-in .mag-current__names { opacity: 1; transform: none; }
    .mag-current__names li {
      color: rgba(245, 243, 237, .42);
      transition: color .35s ease, transform .45s var(--ease);
    }
    .mag-current__names li:hover { color: var(--cream); transform: translateY(-2px); }
    .mag-current__names li:first-child { color: var(--cream); }
    .mag-magnetic {
      justify-self: start;
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: .8rem;
      padding: 1.05rem 1.9rem;
      border: 1px solid rgba(255, 240, 198, .7);
      border-radius: 999px;
      font-family: var(--mono);
      font-size: clamp(.58rem, .72vw, .7rem);
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--cream);
      overflow: hidden;
      isolation: isolate;
      transition: color .35s ease;
      will-change: transform;
      opacity: 0;
      transform: translateY(1.2rem);
    }
    .mag-current.mag-in .mag-magnetic {
      opacity: 1;
      transform: none;
      transition: opacity .9s var(--ease) .45s, transform .9s var(--ease) .45s, color .35s ease;
    }
    .mag-magnetic::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background: var(--cream);
      transform: translateY(101%);
      transition: transform .55s var(--ease-editorial);
    }
    .mag-magnetic:hover { color: var(--ink); }
    .mag-magnetic:hover::before { transform: none; }
    .mag-magnetic svg { transition: transform .4s var(--ease); }
    .mag-magnetic:hover svg { transform: translateX(.3rem); }

    /* ============================================================
       03 — The shelf: draggable horizontal issue rail
       ============================================================ */
    .mag-shelf {
      position: relative;
      padding: clamp(4.5rem, 10vh, 8rem) 0 clamp(3.5rem, 8vh, 6rem);
      border-top: 1px solid var(--rule);
      overflow: hidden;
    }
    .mag-shelf__head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 2rem;
      padding: 0 var(--gutter);
      margin-bottom: clamp(2.25rem, 5vh, 3.75rem);
    }
    .mag-shelf__title {
      margin: 0;
      font-family: var(--sans);
      font-size: clamp(1.9rem, 4.6vw, 4.2rem);
      font-weight: 500;
      line-height: 1;
      letter-spacing: -.045em;
      text-transform: uppercase;
    }
    .mag-shelf__title em {
      font-family: var(--serif);
      font-style: italic;
      font-weight: 400;
      text-transform: none;
      color: var(--cream);
    }
    .mag-shelf__hint {
      display: flex;
      align-items: center;
      gap: .7rem;
      font-family: var(--mono);
      font-size: clamp(.54rem, .66vw, .66rem);
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--paper-dim);
      white-space: nowrap;
    }
    .mag-shelf__hint svg { flex: 0 0 auto; }

    .mag-shelf__viewport {
      cursor: grab;
      touch-action: pan-y;
      user-select: none;
      -webkit-user-select: none;
    }
    .mag-shelf__viewport.is-dragging { cursor: grabbing; }
    .mag-shelf__track {
      display: flex;
      gap: clamp(1.25rem, 2.5vw, 2.25rem);
      width: max-content;
      padding: 0 var(--gutter);
      will-change: transform;
    }
    .mag-issue {
      position: relative;
      flex: 0 0 auto;
      width: clamp(230px, 24vw, 340px);
      will-change: transform;
    }
    .mag-issue__cover {
      position: relative;
      aspect-ratio: 4 / 5;
      overflow: hidden;
      border: 1px solid var(--rule);
      background: #111;
      transition: border-color .45s ease;
    }
    .mag-issue__cover img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: grayscale(1) brightness(.62) contrast(1.05);
      transform: scale(1.05);
      transition: filter .8s var(--ease), transform 1s var(--ease);
      pointer-events: none;
    }
    .mag-issue:hover .mag-issue__cover,
    .mag-issue:focus-within .mag-issue__cover { border-color: rgba(255, 245, 210, .74); }
    .mag-issue:hover .mag-issue__cover img,
    .mag-issue:focus-within .mag-issue__cover img { filter: none; transform: scale(1); }
    .mag-issue--live .mag-issue__cover { border-color: rgba(255, 245, 210, .74); }
    .mag-issue--live .mag-issue__cover img { filter: none; transform: scale(1); }
    .mag-issue__soon {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      background:
        radial-gradient(circle at 50% 40%, rgba(255, 240, 198, .1), transparent 34%),
        linear-gradient(145deg, #161616, #070707 74%);
    }
    .mag-issue__soon-inner {
      display: grid;
      justify-items: center;
      gap: .9rem;
      text-align: center;
      padding: 12%;
    }
    .mag-issue__soon-inner img {
      width: clamp(44px, 26%, 84px);
      height: auto;
      filter: none;
      transform: none;
    }
    .mag-issue:hover .mag-issue__soon-inner img { transform: none; }
    .mag-issue__soon-inner span {
      font-family: var(--sans);
      font-size: clamp(.86rem, 1vw, 1rem);
      font-weight: 500;
      letter-spacing: -.02em;
      text-transform: uppercase;
    }
    .mag-issue__soon-inner small {
      font-family: var(--mono);
      font-size: clamp(.48rem, .56vw, .58rem);
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--paper-dim);
    }
    .mag-issue__meta {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 1rem;
      margin-top: 1rem;
      font-family: var(--mono);
      font-size: clamp(.54rem, .64vw, .64rem);
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--paper-dim);
    }
    .mag-issue__meta em { font-style: normal; color: var(--cream); }
    .mag-issue__name {
      margin: .45rem 0 0;
      font-family: var(--sans);
      font-size: clamp(1rem, 1.3vw, 1.25rem);
      font-weight: 500;
      letter-spacing: -.03em;
    }
    .mag-issue__hit { position: absolute; inset: 0; z-index: 2; cursor: pointer; }
    .mag-issue__hit:focus-visible { outline: 1px solid var(--cream); outline-offset: -5px; }

    .mag-shelf__progress {
      margin: clamp(2rem, 4.5vh, 3rem) var(--gutter) 0;
      height: 1px;
      background: var(--rule);
      overflow: hidden;
    }
    .mag-shelf__progress-bar {
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, var(--cream), rgba(255, 240, 198, .3));
      transform: scaleX(0);
      transform-origin: left center;
      will-change: transform;
    }

    /* ============================================================
       04 — Spec: what's inside every issue
       ============================================================ */
    .mag-spec {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      border-top: 1px solid var(--rule);
      background: var(--ink-soft);
    }
    .mag-spec__item {
      position: relative;
      padding: clamp(1.9rem, 4.5vh, 3.25rem) clamp(1.25rem, 2.25vw, 2.25rem);
      border-left: 1px solid var(--rule);
      display: grid;
      gap: .8rem;
      align-content: start;
      overflow: hidden;
    }
    .mag-spec__item:first-child { border-left: 0; }
    .mag-spec__item::after {
      content: "";
      position: absolute;
      inset: auto 0 0 0;
      height: 2px;
      background: linear-gradient(90deg, var(--cream), rgba(255, 240, 198, .05));
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform 1.1s var(--ease-editorial);
    }
    .mag-spec__item.mag-in::after { transform: scaleX(1); }
    .mag-spec__item:nth-child(2).mag-in::after { transition-delay: .12s; }
    .mag-spec__item:nth-child(3).mag-in::after { transition-delay: .24s; }
    .mag-spec__item:nth-child(4).mag-in::after { transition-delay: .36s; }
    .mag-spec__num {
      font-family: var(--mono);
      font-size: clamp(.54rem, .64vw, .66rem);
      letter-spacing: .24em;
      color: rgba(255, 240, 198, .42);
    }
    .mag-spec__title {
      margin: 0;
      font-family: var(--sans);
      font-size: clamp(1rem, 1.35vw, 1.3rem);
      font-weight: 500;
      letter-spacing: -.03em;
      text-transform: uppercase;
    }
    .mag-spec__copy {
      margin: 0;
      max-width: 28ch;
      font-size: clamp(.82rem, .95vw, .92rem);
      line-height: 1.65;
      color: var(--paper-dim);
    }

    /* ============================================================
       05 — Handoff (global footer follows)
       ============================================================ */
    .mag-handoff {
      display: grid;
      justify-items: center;
      gap: clamp(1.75rem, 4vh, 2.75rem);
      padding: clamp(5rem, 12vh, 9rem) var(--gutter);
      text-align: center;
    }
    .mag-handoff__line {
      margin: 0;
      max-width: 24ch;
      font-family: var(--sans);
      font-size: clamp(1.7rem, 3.8vw, 3.6rem);
      font-weight: 400;
      line-height: 1.14;
      letter-spacing: -.04em;
      text-wrap: balance;
    }
    .mag-handoff__line em {
      font-family: var(--serif);
      font-style: italic;
      font-weight: 400;
      color: var(--cream);
    }
    .mag-handoff .mag-magnetic { opacity: 1; transform: none; }
    .wkw-magazine-widget.mag-js .mag-handoff .mag-magnetic.mag-reveal {
      opacity: 0;
      transform: translateY(2rem);
      transition: opacity .9s var(--ease), transform .9s var(--ease), color .35s ease;
    }
    .wkw-magazine-widget.mag-js .mag-handoff .mag-magnetic.mag-reveal.mag-in { opacity: 1; transform: none; }

    /* ============================================================
       Reveals + responsive + reduced motion
       ============================================================ */
    .wkw-magazine-widget.mag-js .mag-reveal {
      opacity: 0;
      transform: translateY(2rem);
      transition: opacity .9s var(--ease), transform .9s var(--ease);
    }
    .wkw-magazine-widget.mag-js .mag-reveal.mag-in { opacity: 1; transform: none; }

    @media (max-width: 900px) {
      .mag-current { grid-template-columns: 1fr; gap: 3rem; }
      .mag-tilt { justify-self: start; width: min(100%, 340px); }
      .mag-current::after { font-size: clamp(7rem, 34vw, 12rem); }
      .mag-spec { grid-template-columns: 1fr 1fr; }
      .mag-spec__item { border-left: 0; border-top: 1px solid var(--rule); }
      .mag-spec__item:nth-child(even) { border-left: 1px solid var(--rule); }
      .mag-spec__item:nth-child(-n+2) { border-top: 0; }
      .mag-hero__foot { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
      .mag-hero__count { justify-items: start; text-align: left; }
    }
    @media (max-width: 560px) {
      .mag-spec { grid-template-columns: 1fr; }
      .mag-spec__item,
      .mag-spec__item:nth-child(even) { border-left: 0; border-top: 1px solid var(--rule); }
      .mag-spec__item:first-child { border-top: 0; }
    }

    @media (prefers-reduced-motion: reduce) {
      .wkw-magazine-widget.mag-js .mag-reveal { opacity: 1; transform: none; transition: none; }
      .mag-hero__title .mag-char,
      .mag-current__title .mag-line > span { transform: none; transition: none; }
      .mag-hero__foot,
      .mag-current__dek,
      .mag-current__names,
      .mag-magnetic { opacity: 1; transform: none; transition: none; }
      .mag-tilt__card { clip-path: inset(0); transition: none; }
      .mag-tilt__sheen { display: none; }
      .mag-spec__item::after { transform: scaleX(1); transition: none; }
      .mag-issue__cover img { filter: none; transform: none; transition: none; }
    }
  

/* No-script and disabled-animation fallbacks. */
.wkw-magazine-widget:not(.mag-js) .mag-hero__foot,
.wkw-magazine-widget:not(.mag-js) .mag-current__dek,
.wkw-magazine-widget:not(.mag-js) .mag-current__names,
.wkw-magazine-widget:not(.mag-js) .mag-magnetic{opacity:1;transform:none}
.wkw-magazine-widget:not(.mag-js) .mag-tilt__card{clip-path:inset(0)}
.wkw-magazine-widget:not(.mag-js) .mag-current__title .mag-line>span{transform:none}
.wkw-magazine-widget:not(.mag-js) .mag-spec__item::after{transform:scaleX(1)}