/* ISA Studios magazine: a closed, physical-looking magazine that opens into a
   page-turning reading view (StPageFlip). Sizes inside the cover and pages use
   container units so the same design scales from the home page to the overlay. */
.mag { border-top: 1px solid var(--line); background: linear-gradient(180deg, #fff, var(--ivory)); }
.mag__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.mag__hint { margin: 16px 0 24px; color: var(--ink-soft); max-width: 30em; }
.mz-openbtn { margin-bottom: 8px; }

/* ---------- Closed magazine ---------- */
.mz-closed { justify-self: center; width: min(100%, 430px); perspective: 1800px; padding: 10px 18px 40px 0; }
.mz-closed__tilt { container-type: inline-size; position: relative; transform: rotateX(14deg) rotateZ(-3.5deg); transform-style: preserve-3d; transition: transform .6s var(--ease); }
.mz-closed:hover .mz-closed__tilt, .mz-closed:focus-within .mz-closed__tilt, .mz-closed.is-lifted .mz-closed__tilt { transform: rotateX(10deg) rotateZ(-2.5deg) translateY(-8px); }
.mz-closed__pages { position: absolute; left: 6%; right: -2%; bottom: -26px; height: 40px; border-radius: 50%; background: radial-gradient(closest-side, rgba(60, 40, 30, .32), transparent); filter: blur(8px); transform: translateZ(-20px); transition: opacity .6s; }
.mz-closed:hover .mz-closed__pages, .mz-closed.is-lifted .mz-closed__pages { opacity: .7; }

.mz-cover { position: relative; container-type: inline-size; aspect-ratio: 1 / 1.4; padding: 7cqw 7cqw 6cqw 10cqw; overflow: hidden; border-radius: 2px 6px 6px 2px; color: var(--ink); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .35 0 0 0 0 .3 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"), linear-gradient(160deg, #fdfaf4 0%, #f9eee9 55%, #f3dfe7 100%); }
.mz-closed .mz-cover { box-shadow: inset 0 0 0 1px rgba(105, 42, 66, .08), 1px 1px 0 #f4ede3, 2px 2px 0 #e4d9cc, 3px 3px 0 #f7f1e8, 4px 4px 0 #e0d4c6, 5px 5px 0 #f5efe6, 6px 6px 0 #dbcfc0, 7px 7px 0 #f2ebe1, 8px 8px 0 #d6c9b9, 0 24px 40px -14px rgba(60, 40, 30, .38), 0 6px 12px rgba(60, 40, 30, .12); }
.mz-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(255, 255, 255, .4), transparent 28%, transparent 76%, rgba(0, 0, 0, .04)); pointer-events: none; }
.mz-cover__spine { position: absolute; left: 0; top: 0; bottom: 0; width: 4.5cqw; background: linear-gradient(90deg, rgba(105, 42, 66, .16), rgba(255, 255, 255, .5) 45%, rgba(105, 42, 66, .08) 60%, transparent); border-right: 1px solid rgba(105, 42, 66, .1); z-index: 3; pointer-events: none; }
.mz-cover__issue { display: flex; justify-content: space-between; margin: 0 0 2cqw; padding-bottom: 2cqw; border-bottom: 1px solid rgba(105, 42, 66, .25); font: 700 2.4cqw/1 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--burgundy); }
.mz-cover__mast { width: 100%; height: auto; }
.mz-cover__sub { margin: 2.4cqw 0 0; font: italic 400 4.6cqw/1.2 "Bodoni Moda", Georgia, serif; color: var(--burgundy); }
.mz-cover__art { position: absolute; z-index: 1; right: -8cqw; top: 34cqw; width: 70cqw; aspect-ratio: 1; pointer-events: none; }
.mz-cover__orbit { position: absolute; inset: 6%; width: 88%; opacity: .65; }
.mz-cover__bloom { position: absolute; height: auto; filter: drop-shadow(0 3cqw 3cqw rgba(80, 40, 50, .24)); }
.mz-cover__bloom--a { width: 62%; left: 22%; top: 20%; }
.mz-cover__bloom--b { width: 40%; left: 6%; top: 56%; transform: rotate(-14deg); }
.mz-cover__bloom--c { width: 34%; right: 8%; top: 2%; transform: rotate(16deg); }
.mz-cover__lines { position: relative; z-index: 4; display: grid; gap: 1cqw; margin-top: 14cqw; width: 56%; }
.mz-line { display: block; width: 100%; padding: 1.6cqw 2cqw; margin-left: -2cqw; border: 0; border-radius: 6px; background: none; text-align: left; cursor: pointer; font: italic 500 5.2cqw/1.12 "Bodoni Moda", Georgia, serif; color: var(--burgundy); text-shadow: 0 0 10px rgba(253, 250, 244, .95); transition: background-color .25s, transform .3s var(--ease); }
.mz-line span { display: block; margin-bottom: .6cqw; font: 700 2.2cqw/1.2 var(--font-body); font-style: normal; letter-spacing: .2em; text-transform: uppercase; color: var(--orchid); }
button.mz-line:hover, button.mz-line:focus-visible { background: rgba(255, 255, 255, .72); transform: translateX(1cqw); }
button.mz-line:active { transform: scale(.97); }
button.mz-line:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 2px; }
.mz-cover__cta { position: absolute; z-index: 4; left: 10cqw; right: 7cqw; bottom: 5cqw; margin: 0; padding-top: 2.4cqw; border-top: 1px solid rgba(105, 42, 66, .25); font: 700 2.8cqw/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--burgundy); pointer-events: none; }
.mz-cover__hit { position: absolute; inset: 0; z-index: 2; padding: 0; border: 0; background: none; cursor: pointer; }
.mz-cover__hit:focus-visible { outline: 3px solid var(--burgundy); outline-offset: -6px; }

/* ---------- Reading overlay ---------- */
.mz-dialog { width: min(1240px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0 auto; padding: 0; border: 0; background: transparent; overflow: hidden; color: var(--ink); }
.mz-dialog[open] { display: flex; flex-direction: column; }
.mz-dialog::backdrop { background: rgba(250, 247, 241, .78); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
html.mz-lock { overflow: hidden; }
.mz-dialog__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: max(14px, env(safe-area-inset-top)) 20px 8px; }
.mz-dialog__bar .label { color: var(--burgundy); }
.mz-dialog__x { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid var(--burgundy); border-radius: 999px; background: #fff; color: var(--burgundy); font: 700 .9rem/1 var(--font-body); cursor: pointer; box-shadow: 0 4px 12px rgba(105, 42, 66, .12); }
.mz-dialog__x:hover { background: var(--blush); }
.mz-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 8px 12px; }
.mz-stage .mz-book { transition: transform .9s var(--ease); filter: drop-shadow(0 28px 30px rgba(60, 40, 30, .28)); }
.mz-stage.is-front .mz-book { transform: translateX(-25%); }
.mz-stage.is-back .mz-book { transform: translateX(25%); }
.mz-stage.is-ready .mz-book { animation: mz-lift 1s var(--ease) both; }
@keyframes mz-lift { 0% { opacity: 0; scale: .9; translate: 0 40px; } 55% { opacity: 1; scale: 1.03; translate: 0 -10px; } 100% { scale: 1; translate: 0 0; } }
.mz-controls { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 6px 0 4px; }
.mz-controls .flipbook__count { min-width: 15em; text-align: center; }
.mz-tip { margin: 0 0 max(12px, env(safe-area-inset-bottom)); text-align: center; font-size: .8rem; color: var(--ink-soft); }
.mz-error { padding: 24px; text-align: center; }

/* Pages */
.mz-page { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .35 0 0 0 0 .3 0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"), #fdfaf4; overflow: hidden; container-type: inline-size; }
.mz-page--l { background-image: linear-gradient(270deg, rgba(60, 40, 30, .14), rgba(60, 40, 30, 0) 9%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .35 0 0 0 0 .3 0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
.mz-page--r { background-image: linear-gradient(90deg, rgba(60, 40, 30, .14), rgba(60, 40, 30, 0) 9%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .35 0 0 0 0 .3 0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
.mz-page--cover .mz-cover { height: 100%; aspect-ratio: auto; border-radius: 0 4px 4px 0; }
.mz-page--back { background: linear-gradient(160deg, #f9eee9, #f3dfe7); }
.mz-p { position: relative; height: 100%; display: flex; flex-direction: column; padding: 9cqw 9cqw 11cqw; font-size: clamp(11.5px, 3.4cqw, 16px); line-height: 1.5; color: var(--ink); }
.mz-p p { margin: 0 0 .8em; color: var(--ink-soft); }
.mz-p__kicker { font: 700 2.5cqw/1.2 var(--font-body) !important; letter-spacing: .2em; text-transform: uppercase; color: var(--orchid) !important; margin-bottom: 3cqw !important; }
.mz-p__kicker--rule { margin-top: 2cqw !important; padding-top: 4cqw; border-top: 1px solid rgba(105, 42, 66, .2); }
.mz-p__h { margin: 0 0 4cqw; font: 800 7cqw/1.05 var(--font-display); letter-spacing: -.02em; color: var(--ink); }
.mz-p__h em { font: italic 400 1em/1 "Bodoni Moda", Georgia, serif; color: var(--orchid); }
.mz-p__h--big { font-size: 10cqw; }
.mz-p__lead { font: italic 400 5cqw/1.3 "Bodoni Moda", Georgia, serif; color: var(--burgundy) !important; }
.mz-p__num { position: absolute; bottom: 5cqw; left: 0; right: 0; margin: 0 !important; text-align: center; font: italic 400 3cqw/1 "Bodoni Moda", Georgia, serif; color: var(--ink-soft); }
.mz-p__art { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; }
.mz-p__flower { max-width: 82%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 3cqw 3cqw rgba(80, 40, 50, .2)); }
.mz-p--title { align-items: center; text-align: center; }
.mz-p__mast { width: 86%; height: auto; margin-top: 8cqw; }
.mz-p__script { font: 400 7cqw/1 var(--font-script) !important; color: var(--orchid) !important; margin-top: 3cqw !important; }
.mz-p__flower--tall { max-height: 100%; }
.mz-p__flower--side { position: absolute; right: -4cqw; bottom: 0; width: 38%; }
.mz-p__foot { font: 600 2.4cqw/1.4 var(--font-body) !important; letter-spacing: .14em; text-transform: uppercase; margin: 2cqw 0 0 !important; }
.mz-p--chapter .mz-p__art { margin: 2cqw 0 4cqw; }
.mz-p__quote { margin: 0; font: italic 400 4.6cqw/1.35 "Bodoni Moda", Georgia, serif; color: var(--burgundy); }
.mz-p__quote span { display: block; margin-top: 2cqw; font: 600 2.3cqw/1.3 var(--font-body); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.mz-toc { display: grid; gap: 1cqw; }
.mz-toc button { display: grid; grid-template-columns: 8cqw 1fr auto; align-items: baseline; width: 100%; min-height: 44px; padding: 2cqw 1cqw; border: 0; border-bottom: 1px dotted rgba(105, 42, 66, .35); background: none; text-align: left; cursor: pointer; font: italic 400 4.2cqw/1.2 "Bodoni Moda", Georgia, serif; color: var(--burgundy); }
.mz-toc button span { font: 700 2.6cqw/1 var(--font-body); font-style: normal; color: var(--orchid); }
.mz-toc button i { font: 600 2.4cqw/1 var(--font-body); font-style: normal; color: var(--ink-soft); }
.mz-toc button:hover, .mz-toc button:focus-visible { background: var(--blush); }
.mz-svcs, .mz-tools { display: grid; gap: 2.4cqw; }
.mz-svcs a, .mz-tools a { display: block; padding: 2.6cqw 3cqw; border: 1px solid rgba(105, 42, 66, .14); border-radius: 8px; background: rgba(255, 255, 255, .65); color: var(--ink-soft); text-decoration: none; font-size: .92em; line-height: 1.4; transition: background-color .2s, border-color .2s; }
.mz-svcs a:hover, .mz-tools a:hover, .mz-svcs a:focus-visible, .mz-tools a:focus-visible { background: #fff; border-color: var(--rose); }
.mz-svcs b, .mz-tools b { display: block; color: var(--burgundy); font-size: 1.05em; margin-bottom: .2em; }
.mz-svcs b::after, .mz-tools b::after { content: " →"; }
.mz-steps { display: grid; gap: 3cqw; margin-bottom: 4cqw; }
.mz-steps li { display: grid; grid-template-columns: 9cqw 1fr; column-gap: 2cqw; color: var(--ink-soft); font-size: .95em; line-height: 1.45; }
.mz-steps span { grid-row: span 2; font: italic 400 6cqw/1 "Bodoni Moda", Georgia, serif; color: var(--rose); }
.mz-steps b { color: var(--ink); }
.mz-p__btn { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; margin-top: auto; margin-bottom: 2cqw; padding: 0 1.2em; border-radius: 999px; background: var(--burgundy); color: #fff; font: 700 .9em/1 var(--font-body); text-decoration: none; }
.mz-p__btn:hover { background: var(--orchid); }
.mz-p__link { display: inline-flex; align-items: center; min-height: 40px; color: var(--burgundy); font-weight: 600; font-size: .95em; }
.mz-p > .mz-p__link:first-of-type { margin-top: auto; }
.mz-p--back { align-items: flex-start; }
.mz-p__mono { width: 22cqw; height: auto; margin-bottom: 6cqw; opacity: .8; }
.mz-p--back a:not(.mz-p__btn) { color: var(--burgundy); font-weight: 600; }
.mz-p--back .mz-p__btn { margin-top: 2cqw; }
.mz-p__flower--corner { position: absolute; right: -6cqw; bottom: -4cqw; width: 52%; max-width: none; }

@media (max-width: 860px) {
  .mag__grid { grid-template-columns: minmax(0, 1fr); }
  .mz-closed { width: min(100%, 380px); padding-right: 12px; }
  .mz-controls .flipbook__count { min-width: 0; font-size: .82rem; }
  .mz-dialog__bar .label { font-size: .62rem; }
}
@media (max-width: 760px) { .mz-stage.is-front .mz-book, .mz-stage.is-back .mz-book { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .mz-closed__tilt, .mz-stage .mz-book, .mz-line { transition: none; }
  .mz-stage.is-ready .mz-book { animation: pop-fade .25s both; }
}
.mz-tip--narrow { display: none; }
@media (max-width: 760px) { .mz-tip--wide { display: none; } .mz-tip--narrow { display: inline; } }