/* Inner pages (v3), shared by About, Journal, Article, Events, Contact, Shop, Future Projects, 404.
   Same rule as the homepage: without .pinmode (reduced motion, no JS) everything is a plain readable page. */

.page-inner main { position: relative; background: #0f0f18; }

/* ---------------------------------------------------------------- hero */
.ih { position: relative; min-height: 92vh; min-height: 92svh; display: grid; align-items: end; color: var(--on-dark); background: #0f0f18; overflow: hidden; isolation: isolate; }
.ih__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.ih__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; transform: scale(1.15); }
/* a picture chosen in WordPress is not pre-softened like the theme's own, so it is softened here (once, not animated) */
.ih__bg img[data-custom] { filter: blur(10px) brightness(.55); }
.ih__bg::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(70% 60% at 70% 80%, rgba(217, 154, 50, .18), transparent 70%), linear-gradient(180deg, rgba(15, 15, 24, .55) 0%, rgba(15, 15, 24, .35) 40%, rgba(15, 15, 24, .92) 100%); }
.ih__embers { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.ih__inner { position: relative; padding: calc(var(--nav-h) + 4rem) 0 clamp(4rem, 9vw, 7.5rem); }
.ih .hand { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.4rem); margin-bottom: .5rem; }
.ih__title { font-family: var(--f-display); font-weight: 500; font-size: clamp(3.6rem, 1.4rem + 8.5vw, 11rem); line-height: .9; letter-spacing: -.03em; color: var(--cream); margin: 0 0 1.75rem; max-width: 12ch; }
.ih__title em { font-style: italic; font-weight: 400; color: var(--amber-hi); }
.ih__title .w { display: inline-block; }
.ih .lede { color: var(--on-dark-soft); max-width: 36rem; }
.ih .btn-row { margin-top: 2rem; }
.ih__cue { position: absolute; right: var(--gutter); bottom: 2rem; display: none; align-items: center; gap: .8rem; font: 600 .625rem/1 var(--f-ui); letter-spacing: .22em; text-transform: uppercase; color: var(--on-dark-soft); }
.ih__cue i { width: 44px; height: 1px; background: linear-gradient(90deg, var(--amber), transparent); }
.pinmode .ih__cue { display: flex; }
/* split hero: words on the left, a picture on the right */
.ih--split .ih__inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 6rem); align-items: end; }
.ih__portrait { margin: 0; aspect-ratio: 4 / 5; border-radius: 999px 999px var(--radius-lg) var(--radius-lg); overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7); border: 1px solid rgba(217, 154, 50, .35); }
.ih__portrait img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) {
  .ih--split .ih__inner { grid-template-columns: 1fr; }
  .ih__portrait { max-width: 18rem; order: -1; }
  .ih__cue { display: none !important; }
}

/* ---------------------------------------------------------------- marquee of words */
.im { overflow: hidden; border-block: 1px solid var(--line-paper); padding-block: 1.25rem; background: var(--paper); color: var(--ink); }
.im__row { display: flex; align-items: center; gap: 2.5rem; width: max-content; will-change: transform; }
.im__row span { font-family: var(--f-display); font-size: clamp(2.4rem, 1.4rem + 4.4vw, 6.4rem); line-height: 1; white-space: nowrap; letter-spacing: -.02em; }
.im__row span:nth-of-type(odd) { font-style: italic; color: var(--accent-on-paper); }
.im__row i { width: 14px; height: 14px; flex: none; border: 1px solid var(--amber); transform: rotate(45deg); }

/* ---------------------------------------------------------------- statement that ignites word by word */
.ign { padding: var(--section) 0; }
.ign__text { font-family: var(--f-display); font-weight: 500; font-size: clamp(2.1rem, 1.1rem + 3.6vw, 5rem); line-height: 1.06; letter-spacing: -.02em; margin: 1.5rem 0 0; max-width: 26ch; }
.ign__text em { font-style: italic; font-weight: 400; color: var(--accent-on-paper); }
.pinmode [data-ignite] .w { opacity: .13; }
.ign__sub { margin-top: 2.5rem; max-width: 34rem; color: var(--ink-soft); font-size: var(--fs-lede); font-family: var(--f-display); }

/* ---------------------------------------------------------------- chapters with a sticky index */
.ich { padding: 0 0 var(--section); }
.ich__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(2rem, 6vw, 6rem); }
.ich__nav { position: sticky; top: calc(var(--nav-h) + 2rem); align-self: start; list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; counter-reset: c; }
.ich__nav a { display: grid; grid-template-columns: 2.25rem 1fr; align-items: baseline; padding: .55rem 0; text-decoration: none; color: rgba(42, 33, 32, .42); font-family: var(--f-display); font-size: 1.3rem; transition: color .4s var(--ease); }
.ich__nav a::before { counter-increment: c; content: counter(c, decimal-leading-zero); font: 700 .6875rem/1 var(--f-ui); letter-spacing: .14em; color: var(--accent-on-paper); }
.ich__nav a:hover, .ich__nav a.is-on { color: var(--ink); }
.ich__nav a.is-on { font-style: italic; }
.ich__item { padding: 2.5rem 0 3.5rem; border-top: 1px solid var(--line-paper); scroll-margin-top: calc(var(--nav-h) + 1rem); }
.ich__item h2 { font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.8rem); line-height: 1.02; letter-spacing: -.015em; margin-bottom: 1.5rem; }
.ich__item h2 em { font-style: italic; font-weight: 400; color: var(--accent-on-paper); }
.ich__item .ph-block { min-height: 8rem; margin-top: 1rem; }
.ich__photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.ich__photos figure { margin: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 9 / 7; }
.ich__photos img { width: 100%; height: 120%; object-fit: cover; }
@media (max-width: 860px) { .ich__grid { grid-template-columns: 1fr; } .ich__nav { display: none; } }

/* ---------------------------------------------------------------- a line written by hand */
.iq { position: relative; padding: calc(var(--section) * 1.1) var(--gutter); text-align: center; color: var(--on-dark); overflow: hidden;
  background: radial-gradient(60% 60% at 50% 60%, rgba(184, 92, 50, .22), transparent 70%), #12141d; }
.iq figure { margin: 0 auto; max-width: 70rem; }
.iq blockquote { margin: 0; font-family: var(--f-hand); font-size: clamp(2.2rem, 1.2rem + 4.2vw, 6rem); line-height: 1.14; color: var(--amber); text-shadow: 0 0 40px rgba(217, 154, 50, .25); }
.iq blockquote .ph { font-family: var(--f-ui); font-size: 1rem; text-shadow: none; }
.iq .ch { display: inline-block; white-space: pre; }
.iq figcaption { justify-content: center; margin-top: 2.25rem; color: var(--on-dark-soft); }

/* ---------------------------------------------------------------- list that lights up one line at a time */
.iw { position: relative; color: var(--on-dark); background: linear-gradient(180deg, #0f0f18, #1d1820 60%, #211C1C); overflow: hidden; }
.iw__pin { position: relative; min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem clamp(2rem, 6vw, 6rem); align-items: center; padding: calc(var(--nav-h) + 3rem) var(--gutter) 3rem; }
.iw__head .display, .iw__head .h1 { margin: 1.25rem 0 1.25rem; }
.iw__head em { color: var(--amber-hi); }
.iw__head p:not(.label) { color: var(--on-dark-soft); max-width: 30rem; }
.iw__words { list-style: none; margin: 0; padding: 0; }
.iw__words li { font-family: var(--f-display); font-size: clamp(2.2rem, 1.3rem + 3.2vw, 5rem); line-height: 1.06; letter-spacing: -.02em; color: var(--cream); transition: color .6s var(--ease), text-shadow .6s var(--ease); }
.pinmode .iw__words li { color: rgba(244, 235, 221, .12); }
.pinmode .iw__words li.was-lit { color: rgba(244, 235, 221, .55); }
.pinmode .iw__words li.is-lit { color: var(--amber-hi); font-style: italic; text-shadow: 0 0 44px rgba(240, 178, 74, .45); }
@media (max-width: 860px) { .iw__pin { grid-template-columns: 1fr; align-content: center; } .iw__words li { font-size: clamp(1.9rem, 8.5vw, 2.8rem); } }

/* ---------------------------------------------------------------- picture that opens while text scrolls */
.ism { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); color: var(--on-dark); background: linear-gradient(180deg, #171B27, #211C1C); }
.ism__media { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-items: center; padding: var(--nav-h) var(--gutter) 2rem; }
.ism__frame { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: var(--radius-lg); }
.ism__frame img { width: 100%; height: 100%; object-fit: cover; }
.ism__text { padding: var(--section) var(--gutter) var(--section) 0; display: grid; gap: 1.4rem; align-content: center; min-height: 130vh; }
.ism__text .h1 em, .ism__text .display em { color: var(--amber-hi); }
.ism__text p:not(.label) { color: var(--on-dark-soft); max-width: 32rem; }
@media (max-width: 860px) { .ism { grid-template-columns: 1fr; } .ism__media { position: relative; height: 56svh; padding: 0; } .ism__frame { border-radius: 0; } .ism__text { min-height: 0; padding: 3.5rem var(--gutter) var(--section); } }

/* ---------------------------------------------------------------- the ending: the lake comes into view */
.ie { position: relative; min-height: 92vh; min-height: 92svh; display: grid; place-items: center; text-align: center; color: var(--cream); overflow: hidden; background: #12141d; }
.ie__img { position: absolute; inset: 0; }
.ie__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.ie__img::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 45%, rgba(18, 20, 29, .4), rgba(18, 20, 29, .88)); }
.ie__content { position: relative; z-index: 1; padding: var(--section) var(--gutter); max-width: 56rem; }
.ie__content > .icon { width: 5rem; height: 2.5rem; margin: 0 auto 1.5rem; color: var(--amber); stroke-width: 1.1; }
.ie__title { font-family: var(--f-display); font-weight: 500; font-size: clamp(3rem, 1.4rem + 6.4vw, 8rem); line-height: .95; letter-spacing: -.025em; }
.ie__title em { font-style: italic; font-weight: 400; color: var(--amber-hi); }
.ie__content p { color: var(--on-dark-soft); font-family: var(--f-display); font-size: var(--fs-lede); margin: 1.25rem auto 2.25rem; max-width: 34rem; }
.ie .btn-row { justify-content: center; }

/* ---------------------------------------------------------------- journal */
.ij { padding: var(--section) 0; }
.ij .entry__img { border-radius: var(--radius-lg); }

.ij .entry:hover .entry__img img { transform: scale(1.06); }
.ij .cats { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.ist { position: relative; padding: calc(var(--section) * 1.1) var(--gutter); text-align: center; color: var(--on-dark); overflow: hidden; isolation: isolate;
  background: radial-gradient(70% 60% at 50% 100%, rgba(184, 92, 50, .3), transparent 70%), linear-gradient(180deg, #171B27, #211C1C); }
.ist .ih__embers { z-index: -1; }
.ist__title { font-family: var(--f-hand); font-size: clamp(3.4rem, 2rem + 6vw, 8rem); color: var(--amber); line-height: 1; margin-bottom: 1.25rem; }
.ist__title span { display: inline-block; }
.ist p { color: var(--on-dark-soft); font-family: var(--f-display); font-size: var(--fs-lede); max-width: 34rem; margin: 0 auto 2.25rem; }
.ist form { max-width: 34rem; margin: 0 auto; }
.ist .input { background: rgba(244, 235, 221, .06); border-color: rgba(244, 235, 221, .25); color: var(--cream); }
.ist .input::placeholder { color: rgba(244, 235, 221, .5); }
.ist .form-done { color: var(--cream); }

/* ---------------------------------------------------------------- article */
.readbar { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 120; pointer-events: none; }
.readbar span { display: block; height: 100%; background: linear-gradient(90deg, var(--rust), var(--amber-hi)); transform-origin: left; transform: scaleX(0); }
.ia { position: relative; min-height: 88vh; min-height: 88svh; display: grid; align-items: end; color: var(--cream); overflow: hidden; background: #12141d; }
.ia__img { position: absolute; inset: 0; }
.ia__img img { width: 100%; height: 100%; object-fit: cover; }
.ia__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 15, 24, .25), rgba(15, 15, 24, .9)); }
.ia__inner { position: relative; padding: calc(var(--nav-h) + 3rem) 0 clamp(3rem, 7vw, 5.5rem); }
.ia .label a { color: inherit; text-decoration: none; }
.ia h1 { font-family: var(--f-display); font-weight: 500; font-size: clamp(2.8rem, 1.4rem + 5vw, 6.5rem); line-height: .98; letter-spacing: -.02em; margin: 1.25rem 0 1.25rem; max-width: 16ch; }
.ia .lede { color: var(--on-dark-soft); }
.ia__body { padding: var(--section) 0; }
.ia__body .prose > .lede:first-child::first-letter { float: left; font-family: var(--f-display); font-size: 4.6em; line-height: .82; margin: .06em .12em 0 0; color: var(--accent-on-paper); }
.ia__pull { margin: 3rem 0; padding: 2rem 0; border-block: 1px solid var(--line-paper); font-family: var(--f-hand); font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); line-height: 1.2; color: var(--orange); text-align: center; }
.ia__pull .ph { font-family: var(--f-ui); font-size: .9rem; }
.ia__more { padding: var(--section) 0; }
.ia__more .mag { margin-top: 2.5rem; }
.ia__more .entry { grid-column: span 6; }
@media (max-width: 760px) { .ia__more .entry { grid-column: 1 / -1; } }

/* ---------------------------------------------------------------- events */
.iev { padding: var(--section) 0; }
.iev .h1 { margin: 1rem 0 2.5rem; }
.iev .h1 em { color: var(--amber-hi); }
.iev .ev-empty .icon { width: 3rem; height: 3rem; color: var(--amber); stroke-width: 1; margin: 0 auto 1.25rem; }

/* ---------------------------------------------------------------- contact */
.icn { padding: var(--section) 0; }
.icn .h1 { margin: 1rem 0 0; }
.icn .reasons > div { padding: 1.25rem 1.25rem 1.25rem 1rem; border: 1px solid var(--line-paper); border-radius: var(--radius-lg); background: rgba(255, 255, 255, .35); transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out), border-color .4s; }
.icn .reasons > div:hover { transform: translateY(-4px); border-color: rgba(184, 92, 50, .45); box-shadow: 0 24px 40px -28px rgba(48, 35, 31, .45); }
.icn__card { position: relative; padding: clamp(1.75rem, 4vw, 3rem); border-radius: var(--radius-lg); background: #fbf6ec; box-shadow: 0 40px 80px -40px rgba(48, 35, 31, .45), 0 0 0 1px rgba(48, 35, 31, .06); }
.icn__card::before { content: ""; position: absolute; left: 10%; right: 10%; bottom: -30px; height: 60px; border-radius: 50%; background: radial-gradient(closest-side, rgba(217, 154, 50, .35), transparent); filter: blur(10px); z-index: -1; }
.icn__card h2 { font-size: var(--fs-h2); margin-bottom: 1.5rem; }
.icn__card h2 em { font-style: italic; color: var(--accent-on-paper); }

/* ---------------------------------------------------------------- shop */
.ish { position: relative; color: var(--on-dark); background: #0f0f18; overflow: hidden; isolation: isolate; }
.ish__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 2rem; min-height: 100vh; min-height: 100svh; padding: calc(var(--nav-h) + 2rem) 0 3rem; }
.ish .ih__title { font-size: clamp(3.4rem, 1.4rem + 6.6vw, 8.6rem); }
.ish__sub { font-family: var(--f-display); font-style: italic; color: var(--amber-hi); font-size: var(--fs-lede); max-width: 30rem; }
.ish__meta { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; margin-top: 1.5rem; font-size: .875rem; color: var(--on-dark-soft); }
.ish__stage { position: relative; height: min(78vh, 760px); display: grid; place-items: center; }
.ish__stage .book__still { position: relative; width: min(60%, 320px); transform: perspective(1400px) rotateY(-18deg) rotateX(4deg); box-shadow: 30px 40px 60px -20px rgba(0, 0, 0, .75); border-radius: 2px 5px 5px 2px; overflow: hidden; }
.ish__stage canvas { position: absolute; inset: -10% -20%; width: 140%; max-width: none; height: 120%; opacity: 0; transition: opacity 1s var(--ease); }
.ish__stage.gl-on canvas { opacity: 1; }
.ish__stage.gl-on .book__still { opacity: 0; }
.ish__stage .book__hint { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }
.iretail { padding: var(--section) 0; }
.iretail .h1 { margin: 1rem 0 2.5rem; }
.iretail .retailer { border-style: solid; border-color: var(--line-paper); border-radius: var(--radius-lg); padding: 2rem 1.75rem; background: rgba(255, 255, 255, .35); transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out), border-color .4s; }
.iretail .retailer:hover { transform: translateY(-6px); border-color: rgba(217, 154, 50, .7); box-shadow: 0 30px 50px -30px rgba(184, 92, 50, .55); }
@media (max-width: 860px) { .ish__grid { grid-template-columns: 1fr; padding-top: calc(var(--nav-h) + 1rem); } .ish__stage { height: 52vh; order: -1; } }

/* ---------------------------------------------------------------- future projects */
.ifp { padding: var(--section) 0; }
.ifp .shelf__cover { padding: 0; background: none; perspective: 1000px; aspect-ratio: auto; }
.ifp .shelf__cover img { width: 100%; aspect-ratio: 600 / 940; object-fit: cover; border-radius: 2px 6px 6px 2px; box-shadow: 24px 30px 50px -24px rgba(48, 35, 31, .6); transform: rotateY(-10deg); transition: transform .8s var(--ease-out); }
.ifp .shelf__cover::before { display: none; }
.ifp .shelf__item h2 { font-size: 1.7rem; }
@media (max-width: 760px) { .ifp .shelf { grid-template-columns: 1fr; max-width: 20rem; margin: 0 auto; } }

/* ---------------------------------------------------------------- 404 */
.ilost { position: relative; isolation: isolate; overflow: hidden; }
.ilost .ih__embers { z-index: -1; }
.ilost h1 em { color: var(--amber-hi); }