/* ==========================================================================
   Glow Up Rich: the welcome, set as a magazine spread, and the doors.
   Brand kit: Linen #F8F5F0, Ink #000, Espresso #1F1B18, Stone #6B635B,
   Brand: Linen #F7F5F0, Brown #34220A (text and buttons), Ink #000 (logo only). Literata.
   Only transform / opacity / clip-path animate, and nothing renders until opened.
   ========================================================================== */
.th, .gur-doors { --t-white: #FFFFFF; --t-linen: #F7F5F0; --t-ink: #000; --t-esp: #34220A; --t-stone: #6E5E4E; --t-sand: #ECE5DA; --t-taupe: #D6CCBF; --t-clay: #34220A;
  --t-hair: #E4DCD0; --t-serif: "Literata", Georgia, "Times New Roman", serif;
  --ease: cubic-bezier(.19, 1, .22, 1); --swing: cubic-bezier(.66, 0, .2, 1); }
.th *, .gur-doors * { font-family: var(--t-serif); box-sizing: border-box; }

/* ---------- Shell ---------- */
.th:focus { outline: none; }
.th { display: none; position: fixed; inset: 0; z-index: 1000; overflow: hidden; overscroll-behavior: contain;
  background: var(--t-white); color: var(--t-esp); opacity: 0; transition: opacity .5s ease;
  grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); }
.th.open, html.th-pending .th { display: grid; }
.th.show, html.th-pending .th { opacity: 1; }
.th.leaving .th-page, .th.leaving .th-inset, .th.leaving .th-close { opacity: 0; transition: opacity .45s ease; }

/* Reusable entrances */
.th-ln { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.th-ln > span { display: block; transform: translateY(110%); transition: transform 1.3s var(--ease) var(--d, 0s); }
.th.play .th-ln > span { transform: none; }
.th-in { opacity: 0; transform: translateY(14px); transition: opacity 1.1s ease var(--d, 0s), transform 1.3s var(--ease) var(--d, 0s); }
.th.play .th-in { opacity: 1; transform: none; }

/* ---------- The cover photograph ---------- */
.th-photo { position: relative; margin: 0; overflow: hidden; background: var(--t-sand); contain: paint; }
.th-photo::before { content: ""; position: absolute; inset: 0; z-index: 3; background: var(--t-white); pointer-events: none;
  transform: translate3d(0, 0, 0); transition: transform 1.35s var(--swing) .05s; will-change: transform; }
.th.play .th-photo::before { transform: translate3d(0, 101%, 0); }
.th-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%;
  transform: scale(1.16); transition: transform 3.2s var(--ease) .05s; will-change: transform; backface-visibility: hidden; }
.th.play .th-photo img { transform: scale(1.02); }
.th-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(20, 14, 10, .42) 100%); opacity: 0; }
.th-cover { display: none; }

.th-inset { position: absolute; z-index: 3; left: calc(44% - 6.4rem); bottom: clamp(2rem, 5vh, 3.4rem); width: clamp(7.5rem, 9.5vw, 9.5rem); margin: 0;
  padding: .5rem .5rem 0; background: var(--t-white); box-shadow: 0 1.6rem 2.4rem -1.4rem rgba(40, 28, 20, .42), 0 0 0 1px rgba(214, 204, 191, .6);
  opacity: 0; transform: translateY(26px); transition: opacity 1s ease 1.55s, transform 1.4s var(--ease) 1.55s; }
.th.play .th-inset { opacity: 1; transform: none; }
.th-inset img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }
.th-inset figcaption { padding: .55rem 0 .65rem; text-align: center; font-style: italic; font-size: .72rem; color: var(--t-stone); letter-spacing: .01em; }

/* ---------- The page ---------- */
.th-page { position: relative; height: 100vh; height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; min-width: 0;
  padding: clamp(2.2rem, 5vh, 3.6rem) clamp(2.4rem, 5.4vw, 6rem) clamp(1.8rem, 4.5vh, 3rem) clamp(5rem, 7vw, 7.5rem); }
.th-close { position: absolute; z-index: 4; top: clamp(1.5rem, 3.4vh, 2.4rem); right: clamp(1.6rem, 3vw, 2.6rem); padding: .3rem 0; border: 0; background: none; cursor: pointer;
  font-style: italic; font-size: .95rem; color: var(--t-stone); border-bottom: 1px solid var(--t-hair); opacity: 0; transition: opacity .8s ease 1.2s, color .3s, border-color .3s; }
.th.play .th-close { opacity: 1; }
.th-close:hover, .th-close:focus-visible { color: var(--t-clay); border-color: var(--t-clay); outline: none; }

/* Masthead: the wordmark set letter by letter, then a dateline between two rules */
.th-wordmark { margin: 0; font-weight: 400; font-size: clamp(3.4rem, 6.6vw, 7rem); line-height: .86; letter-spacing: -.045em; color: var(--t-ink); white-space: nowrap; }
.th-w { display: inline-block; overflow: hidden; padding: .04em .02em .12em; margin: 0 -.02em -.12em; vertical-align: top; }
.th-w > span { display: inline-block; transform: translateY(105%); transition: transform 1.25s var(--ease); transition-delay: calc(.35s + var(--i) * 45ms); }
.th.play .th-w > span { transform: none; }
.th-w-i { font-style: italic; letter-spacing: -.03em; }
.th-dateline { position: relative; display: flex; justify-content: space-between; gap: 1rem; margin: 1.4rem 0 0; padding: .8rem 0; font-size: .64rem; letter-spacing: .24em; text-transform: uppercase; color: var(--t-stone); }
.th-dateline::before, .th-dateline::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--t-ink); transform: scaleX(0); transition: transform 1.4s var(--ease) .75s; }
.th-dateline::before { top: 0; transform-origin: 0 50%; }
.th-dateline::after { bottom: 0; background: var(--t-hair); transform-origin: 100% 50%; transition-delay: .9s; }
.th.play .th-dateline::before, .th.play .th-dateline::after { transform: none; }
.th-dateline span { opacity: 0; transition: opacity 1s ease 1.05s; }
.th-dateline .th-dl-mid { font-style: italic; text-transform: none; letter-spacing: .02em; font-size: .86rem; color: var(--t-esp); margin-top: -.15em; }
.th.play .th-dateline span { opacity: 1; }

/* When the Glow Up Rich logo file is present, it replaces the typeset wordmark */
.th-wordmark-img { line-height: 0; clip-path: inset(0 0 100% 0); transition: clip-path 1.3s var(--swing) .35s; }
.th-wordmark-img img { width: clamp(240px, 26vw, 400px); height: auto; }
.th.play .th-wordmark-img { clip-path: inset(0 0 0 0); }
.th-photo .th-cover-img img, .th.play .th-photo .th-cover-img img { position: static; inset: auto; display: block; width: min(50vw, 210px); height: auto; object-fit: contain; transform: none; transition: none; filter: brightness(0) invert(1); }
.th-cover-img { margin-bottom: .3rem; }

/* Spread: a short story beside the thirty days */
.th-spread { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); gap: clamp(1.8rem, 3.6vw, 3.6rem); align-content: center; padding: 1.6rem 0; min-height: 0; }
.th-head { margin: 0 0 1.4rem; font-weight: 380; font-size: clamp(2rem, 3vw, 3.1rem); line-height: .98; letter-spacing: -.025em; color: var(--t-ink); }
.th-head i { font-style: italic; }
.th-body { margin: 0; font-weight: 350; font-size: clamp(.95rem, 1.05vw, 1.04rem); line-height: 1.72; color: var(--t-esp); max-width: 30ch; }
.th-drop { float: left; font-size: 3.9em; line-height: .78; padding: .07em .09em 0 0; color: var(--t-clay); }

/* The thirty days, set like a printed diary page */
.th-thirty { align-self: center; }
.th-thirty-k { margin: 0 0 .9rem; font-size: .64rem; letter-spacing: .24em; text-transform: uppercase; color: var(--t-stone); }
.th-thirty-k i { text-transform: none; letter-spacing: 0; font-size: 1.15rem; color: var(--t-ink); margin-right: .25rem; }
.th-days { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--t-ink); }
.th-days li { position: relative; height: clamp(2.35rem, 5.4vh, 3rem); padding: .38rem 0 0 .5rem; border-bottom: 1px solid var(--t-hair); border-left: 1px solid var(--t-hair);
  opacity: 0; transition: opacity .6s ease; transition-delay: calc(1.2s + var(--i) * 40ms); }
.th-days li:nth-child(6n + 1) { border-left: 0; padding-left: .1rem; }
.th.play .th-days li { opacity: 1; }
.th-days span { display: inline-block; min-width: .6em; text-align: center; font-size: clamp(.95rem, 1.2vw, 1.15rem); line-height: 1; color: var(--t-ink); font-variant-numeric: lining-nums tabular-nums; }
.th-days span { position: relative; }
.th-days span::after { content: ""; position: absolute; left: 0; bottom: -.34em; width: .85em; height: 1px; background: var(--t-clay); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .5s var(--ease); transition-delay: calc(1.5s + var(--i) * 40ms); }
.th.play .th-days span::after { transform: none; }
.th-key span::after { display: none; }
.th-key span { color: var(--t-clay); font-style: italic; }
.th-loop { position: absolute; left: 50%; top: 50%; width: 2.5em; height: 2.05em; transform: translate(-50%, -54%); overflow: visible; pointer-events: none; }
.th-loop path { fill: none; stroke: var(--t-clay); stroke-width: 1.1; vector-effect: non-scaling-stroke; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s cubic-bezier(.6, 0, .3, 1); }
.th-key:first-child .th-loop path { transition-delay: 1.5s; }
.th-key:last-child .th-loop path { transition-delay: 2.9s; }
.th.play .th-loop path { stroke-dashoffset: 0; }
.th-thirty-n { display: flex; justify-content: space-between; gap: 1rem; margin: .8rem 0 0; font-style: italic; font-size: .88rem; color: var(--t-stone); }

/* Call to action: a square Clay block and a quiet italic alternative */
.th-cta { display: flex; align-items: center; gap: clamp(1.2rem, 2.4vw, 2.2rem); padding-top: clamp(1.1rem, 2.4vh, 1.6rem); border-top: 1px solid var(--t-hair); }
.th-enter { display: inline-flex; align-items: center; gap: 1.1rem; padding: 1.05em 1.9em 1.05em 2.2em; border: 1px solid var(--t-clay); border-radius: 999px; cursor: pointer;
  background: var(--t-clay); color: var(--t-white); font-size: 1.02rem; font-weight: 450; letter-spacing: 0; transition: background .45s, border-color .45s; }
.th-enter:hover { background: transparent; color: var(--t-clay); }
.th-enter:focus { outline: none; }
.th-enter:focus-visible { outline: 1px solid var(--t-clay); outline-offset: 5px; }
.th-arrow { position: relative; display: inline-block; width: 2rem; height: 1px; background: currentColor; transform-origin: 0 50%; transition: transform .6s var(--ease); }
.th-arrow::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.th-enter:hover .th-arrow { transform: translateX(.35rem); }
.th-guide { position: relative; font-style: italic; font-size: 1.02rem; color: var(--t-esp); text-decoration: none; padding-bottom: .15em; }
.th-guide::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--t-clay); transform: scaleX(.35); transform-origin: 0 50%; transition: transform .6s var(--ease); }
.th-g-s { display: none; }
.th-guide:hover { color: var(--t-clay); } .th-guide:hover::after { transform: none; }

/* ---------- The diptych ----------
   Two photographs as panels. Closing: they glide in from the sides, each image moving more slowly than its edge,
   so the picture seems to be uncovered rather than slid. Then the cover type rises into place, set exactly like
   the Glow Up Rich hero. Opening: the type lifts away, a breath, then the panels part with the same slow parallax.
   One easing throughout (a long, unhurried ease-in-out). Only transform and opacity move. */
.gur-doors { display: none; position: fixed; inset: 0; z-index: 1100; overflow: hidden; pointer-events: none; background: transparent;
  --gd-ease: cubic-bezier(.76, 0, .2, 1); --gd-soft: cubic-bezier(.22, .61, .36, 1); }
.gur-doors.is-on, html.doors-pending .gur-doors { display: block; pointer-events: auto; }
.gur-doors.opening { pointer-events: none; }

.gd-leaf { position: absolute; top: 0; bottom: 0; width: 50%; overflow: hidden; background: #1E150C; will-change: transform; backface-visibility: hidden; }
.gd-l { left: 0; transform: translate3d(-101%, 0, 0); }
.gd-r { right: 0; transform: translate3d(101%, 0, 0); }
.gd-img { position: absolute; inset: 0; will-change: transform; }
.gd-l .gd-img { transform: translate3d(42%, 0, 0) scale(1.08); }
.gd-r .gd-img { transform: translate3d(-42%, 0, 0) scale(1.08); }
.gd-img img { position: absolute; top: 0; height: 100%; object-fit: cover; display: block; }
.gd-desk { left: 0; width: 100%; object-position: 50% 28%; }
/* A soft grade so the type reads, darker at the foot like a magazine cover */
.gd-leaf::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(22,14,6,.42) 0%, rgba(22,14,6,.30) 42%, rgba(22,14,6,.55) 100%); }
/* Where the two pictures meet: a whisper of light, like the gutter of a printed spread */
.gd-l::before, .gd-r::before { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; z-index: 2; background: rgba(255, 250, 240, .22); }
.gd-l::before { right: 0; } .gd-r::before { left: 0; }

/* Closed */
.gur-doors.is-shut .gd-leaf, html.doors-pending .gd-leaf,
.gur-doors.is-shut .gd-img, html.doors-pending .gd-img { transform: none; }

/* Closing */
.gur-doors.closing .gd-l { animation: gd-in-l 1.45s var(--gd-ease) both; }
.gur-doors.closing .gd-r { animation: gd-in-r 1.45s var(--gd-ease) .06s both; }
.gur-doors.closing .gd-l .gd-img { animation: gd-img-in-l 1.45s var(--gd-ease) both; }
.gur-doors.closing .gd-r .gd-img { animation: gd-img-in-r 1.45s var(--gd-ease) .06s both; }
@keyframes gd-in-l { from { transform: translate3d(-101%, 0, 0); } to { transform: none; } }
@keyframes gd-in-r { from { transform: translate3d(101%, 0, 0); } to { transform: none; } }
@keyframes gd-img-in-l { from { transform: translate3d(42%, 0, 0) scale(1.08); } to { transform: none; } }
@keyframes gd-img-in-r { from { transform: translate3d(-42%, 0, 0) scale(1.08); } to { transform: none; } }

/* Opening: a held breath, then the panels part */
.gur-doors.opening .gd-l { animation: gd-out-l 1.75s var(--gd-ease) .45s both; }
.gur-doors.opening .gd-r { animation: gd-out-r 1.75s var(--gd-ease) .45s both; }
.gur-doors.opening .gd-l .gd-img { animation: gd-img-out-l 1.75s var(--gd-ease) .45s both; }
.gur-doors.opening .gd-r .gd-img { animation: gd-img-out-r 1.75s var(--gd-ease) .45s both; }
@keyframes gd-out-l { from { transform: none; } to { transform: translate3d(-101%, 0, 0); } }
@keyframes gd-out-r { from { transform: none; } to { transform: translate3d(101%, 0, 0); } }
@keyframes gd-img-out-l { from { transform: none; } to { transform: translate3d(42%, 0, 0) scale(1.06); } }
@keyframes gd-img-out-r { from { transform: none; } to { transform: translate3d(-42%, 0, 0) scale(1.06); } }

/* A fine inset rule, like the border of a printed invitation */
.gd-frame { position: absolute; inset: clamp(14px, 2vw, 26px); border: 1px solid rgba(255, 250, 240, .38); opacity: 0; pointer-events: none; }
.gur-doors.is-shut .gd-frame, html.doors-pending .gd-frame { opacity: 1; }
.gur-doors.closing .gd-frame { animation: gd-fade-in 1s var(--gd-soft) 1.05s both; }
.gur-doors.opening .gd-frame { animation: gd-fade-out .5s ease both; }

/* The cover type: set exactly like the Glow Up Rich hero */
.gd-copy { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: clamp(10px, 1.6vw, 20px); padding: 0 24px; color: #fff; pointer-events: none; }
.gd-copy p { margin: 0; overflow: hidden; padding: .06em 0 .14em; }
.gd-copy p > span { display: block; opacity: 0; transform: translate3d(0, 105%, 0); will-change: transform, opacity; }
.gd-eyebrow { font-size: .92rem; letter-spacing: .02em; color: rgba(255,255,255,.9); }
.gd-logo { line-height: 0; }
.gd-logo img { width: clamp(230px, 30vw, 440px); height: auto; filter: brightness(0) invert(1); }
.gd-title { font-size: clamp(1.7rem, 3.4vw, 3rem); font-weight: 300; letter-spacing: -.02em; line-height: 1.04; }
.gd-title i { font-style: italic; }
.gur-doors.is-shut .gd-copy p > span, html.doors-pending .gd-copy p > span { opacity: 1; transform: none; }
.gur-doors.closing .gd-copy p > span { animation: gd-rise 1.1s var(--gd-soft) both; }
.gur-doors.closing .gd-eyebrow > span { animation-delay: 1.05s; }
.gur-doors.closing .gd-logo > span { animation-delay: 1.15s; }
.gur-doors.closing .gd-title > span { animation-delay: 1.27s; }
.gur-doors.opening .gd-copy p > span { animation: gd-lift .6s cubic-bezier(.5, 0, .75, 0) both; }
.gur-doors.opening .gd-logo > span { animation-delay: .04s; }
.gur-doors.opening .gd-title > span { animation-delay: .08s; }
@keyframes gd-rise { from { opacity: 0; transform: translate3d(0, 105%, 0); } to { opacity: 1; transform: none; } }
@keyframes gd-lift { from { opacity: 1; transform: none; } to { opacity: 0; transform: translate3d(0, -40%, 0); } }
@keyframes gd-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes gd-fade-out { from { opacity: 1; } to { opacity: 0; } }

@media (max-width: 760px) {
  .gd-l .gd-desk { object-position: 58% 26%; }
  .gd-r .gd-desk { object-position: 50% 24%; }
  .gd-copy { justify-content: flex-end; padding-bottom: 13vh; }
  .gd-leaf::after { background: linear-gradient(180deg, rgba(22,14,6,.22) 0%, rgba(22,14,6,.18) 45%, rgba(22,14,6,.72) 100%); }
}

/* ---------- Phones and narrow screens ---------- */
@media (max-width: 900px), (max-aspect-ratio: 4/5) {
  .th { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; overflow-y: auto; }
  .th-photo { height: 46vh; height: 46svh; }
  .th-photo::after { opacity: 1; }
  .th-photo img { object-position: 50% 26%; }
  .th-cover { display: grid; position: absolute; left: 1.4rem; right: 1.4rem; bottom: 1.3rem; z-index: 2; gap: .35rem; color: #FFF; margin: 0;
    opacity: 0; transform: translateY(18px); transition: opacity 1s ease .8s, transform 1.3s var(--ease) .8s; }
  .th.play .th-cover { opacity: 1; transform: none; }
  .th-cover-w { font-size: clamp(2.9rem, 13.5vw, 4.2rem); line-height: .9; letter-spacing: -.04em; }
  .th-cover-w i { font-style: italic; }
  .th-cover-b { font-style: italic; font-size: 1rem; opacity: .9; }
  .th-inset, .th-wordmark { display: none; }
  .th-close { position: fixed; top: max(1rem, env(safe-area-inset-top)); right: 1.2rem; color: #FFF; border-color: rgba(255, 255, 255, .6); }
  .th-page { height: auto; padding: 0 1.4rem 7.2rem; grid-template-rows: auto auto; }
  .th-dateline { margin: 0; padding: .75rem 0; font-size: .58rem; letter-spacing: .2em; }
  .th-dateline .th-dl-mid { display: none; }
  .th-dateline::before { display: none; }
  .th-spread { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; padding: 1.3rem 0 0; }
  .th-head { display: none; }
  .th-body { max-width: none; font-size: .98rem; line-height: 1.65; }
  .th-drop { font-size: 3.4em; }
  .th-days li { height: 2.5rem; }
  .th-cta { position: fixed; z-index: 5; left: 0; right: 0; bottom: 0; padding: .9rem 1.4rem calc(.9rem + env(safe-area-inset-bottom)); background: var(--t-white);
    border-top: 1px solid var(--t-hair); justify-content: space-between; gap: 1rem; }
  .th-enter { flex: 1 1 auto; justify-content: space-between; padding: 1em 1.3em 1em 1.5em; font-size: .98rem; }
  .th-guide { flex: 0 0 auto; font-size: .92rem; }
  .th-g-l { display: none; } .th-g-s { display: inline; }
}
@media (max-height: 760px) and (min-width: 901px) and (min-aspect-ratio: 4/5) {
  .th-inset { display: none; }
  .th-head { font-size: 2rem; margin-bottom: .9rem; }
  .th-days li { height: 2.1rem; }
}

/* ---------- Reduced motion: everything simply appears ---------- */
@media (prefers-reduced-motion: reduce) {
  .th, .th *, .th *::before, .th *::after, .gur-doors *, .gur-doors *::before, .gur-doors *::after { transition-duration: .01s !important; transition-delay: 0s !important; animation: none !important; }
}