/* ==========================================================================
   Peelerie interior pages (1.4.0)
   Midnight frames, an ivory reading room. Loaded only on the house, guide,
   service and policy pages (inc/interior.php).
   ========================================================================== */

body[class*="pa-tier-"]:not(.pa-tier-index) {
	--pa-room: var(--pa-ivory, #fcfaf6);
	--pa-frame: var(--pa-night, #000);
	--pa-frame-gold: var(--pa-gold-night, #c9a96e);
	--pa-frame-muted: var(--pa-muted-night, #a8a29a);
	--pa-rhythm: clamp(56px, 8vw, 112px);
	--pa-read: 640px;
}
body.peelerie-atelier[class*="pa-tier-"]:not(.pa-tier-index),
body.peelerie-atelier[class*="pa-tier-"]:not(.pa-tier-index).custom-background { background-color: var(--pa-room) !important; }

/* Still pages: no slow zoom on the opening image. Hover behavior is unchanged. */
body[class*="pa-tier-"]:not(.pa-tier-index) .pa-sh .pa-mf__img { animation: none; }

/* One reading room: every chapter on ivory, separated by a hairline. */
body[class*="pa-tier-"]:not(.pa-tier-index) .pa-ch::before { background: var(--pa-room) !important; }
body[class*="pa-tier-"]:not(.pa-tier-index) .pa-ch + .pa-ch { border-top: 1px solid var(--pa-line); }
body[class*="pa-tier-"]:not(.pa-tier-index) .pa-ch { padding-top: var(--pa-rhythm); padding-bottom: var(--pa-rhythm); }

/* --- Opening: story pages, a full-width midnight plate with the title beneath --- */
body.pa-tier-story .pa-sh--plate { display: flex; flex-direction: column; min-height: 0; background: var(--pa-frame); }
body.pa-tier-story .pa-sh--plate .pa-sh__media { order: -1; width: 100%; min-height: 0; aspect-ratio: 21 / 9; max-height: 78vh; }
body.pa-tier-story .pa-sh--plate .pa-sh__media::before { background: linear-gradient(0deg, var(--pa-frame) 0%, rgba(0, 0, 0, 0) 22%); }
body.pa-tier-story .pa-sh--plate .pa-sh__copy { align-items: center; justify-content: flex-start; text-align: center; padding: clamp(48px, 6vw, 96px) var(--pa-gutter) clamp(72px, 9vw, 140px); }
body.pa-tier-story .pa-sh--plate .pa-sh__lede { max-width: 560px; margin: 0 auto !important; }

/* --- Opening: guides, ivory with a large half-width plate --- */
body.pa-tier-guide .pa-sh--quiet { background: var(--pa-room); color: var(--pa-ink); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: clamp(560px, 82vh, 860px); }
body.pa-tier-guide .pa-sh--quiet .pa-sh__media::before { display: none; }
body.pa-tier-guide .pa-sh--quiet .pa-sh__copy { justify-content: flex-end; padding: clamp(48px, 7vw, 104px) clamp(24px, 5vw, 80px) clamp(48px, 7vw, 104px) max(var(--pa-gutter), calc((100vw - var(--pa-wrap)) / 2 + var(--pa-gutter))); }
body.pa-tier-guide .pa-sh--quiet .pa-sh__kicker { color: var(--pa-accent) !important; }
body.pa-story.pa-tier-guide .entry-content .pa-sh--quiet .pa-sh__title { color: var(--pa-ink); }
body.pa-story.pa-tier-guide .entry-content .pa-sh--quiet .pa-sh__title em { color: var(--pa-accent); }
body.pa-tier-guide .pa-sh--quiet .pa-sh__lede { color: var(--pa-muted) !important; }
body.pa-tier-guide .pa-sh--quiet .pa-sh__lede a { color: var(--pa-ink) !important; }

/* --- Opening: service pages, a title on ivory, no photograph --- */
body.pa-tier-functional .pa-sh--text { display: block; min-height: 0; background: var(--pa-room); color: var(--pa-ink); border-bottom: 1px solid var(--pa-line); }
body.pa-tier-functional .pa-sh--text .pa-sh__copy { max-width: var(--pa-wrap); margin: 0 auto; padding: clamp(56px, 8vw, 112px) var(--pa-gutter) clamp(40px, 5vw, 64px); }
body.pa-tier-functional .pa-sh--text .pa-sh__kicker { color: var(--pa-accent) !important; }
body.pa-story.pa-tier-functional .entry-content .pa-sh--text .pa-sh__title { color: var(--pa-ink); font-size: clamp(42px, 5vw, 72px); }
body.pa-story.pa-tier-functional .entry-content .pa-sh--text .pa-sh__title em { color: var(--pa-accent); }
body.pa-tier-functional .pa-sh--text .pa-sh__lede { color: var(--pa-muted) !important; max-width: 560px; }
body.pa-tier-functional .pa-sh--text .pa-sh__lede a { color: var(--pa-ink) !important; }

/* --- Numbered chapters: number and heading on the left, one reading column on the right --- */
body[class*="pa-tier-"]:not(.pa-tier-index) .pa-ch--chapter { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
body[class*="pa-tier-"]:not(.pa-tier-index) .pa-ch__head > :last-child { margin-bottom: 0; }
body[class*="pa-tier-"]:not(.pa-tier-index) .pa-ch__text { max-width: var(--pa-read); }
body[class*="pa-tier-"]:not(.pa-tier-index) .pa-ch__text > :first-child { margin-top: 0; }
body[class*="pa-tier-"]:not(.pa-tier-index) .pa-ch__text > :last-child { margin-bottom: 0; }

/* --- Plates --- */
.pa-plate { margin: 0; max-width: none; }
body[class*="pa-tier-"]:not(.pa-tier-index) .entry-content figure.pa-plate { margin-bottom: 0; }
.pa-plate .pa-mf { width: 100%; }
.pa-plate--full { width: 100vw; margin-left: calc(50% - 50vw); }
.pa-plate--full .pa-mf { aspect-ratio: 21 / 9; }
.pa-plate--wide { max-width: var(--pa-wrap); margin: 0 auto; padding: 0 var(--pa-gutter); }
.pa-plate--wide .pa-mf { aspect-ratio: 21 / 9; }
.pa-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: var(--pa-wrap); margin: 0 auto; padding: 0 var(--pa-gutter); }
.pa-plate--pair .pa-mf { aspect-ratio: 4 / 5; }
.pa-plate .pa-mf:hover .pa-mf__img { transform: scale(1.035); }
.pa-plate__cap { margin: 14px 0 0; text-align: left; font-size: 11px; line-height: 1.5; letter-spacing: .24em; text-transform: uppercase; color: var(--pa-muted); }
.pa-plate__cap span { margin-right: 12px; color: var(--pa-accent); }
.pa-plate--full .pa-plate__cap { max-width: var(--pa-wrap); margin-left: auto; margin-right: auto; padding: 0 var(--pa-gutter); }
.pa-plate + .pa-ch, .pa-pair + .pa-ch { border-top: 0 !important; }

/* --- Four pieces --- */
.pa-shop { max-width: var(--pa-wrap); margin: 0 auto; padding: var(--pa-rhythm) var(--pa-gutter); border-top: 1px solid var(--pa-line); }
.pa-plate + .pa-shop, .pa-pair + .pa-shop { border-top: 0; }
.pa-shop__top { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin-bottom: clamp(24px, 3vw, 40px); }
body.pa-story .entry-content .pa-shop__title { margin: 0; font-family: var(--pa-display); font-weight: 400; font-size: clamp(28px, 2.6vw, 38px); line-height: 1.1; color: var(--pa-ink); }
body.pa-story .entry-content .pa-shop__link { flex: none; font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--pa-ink); text-decoration: none; border-bottom: 1px solid var(--pa-frame-gold); padding-bottom: 4px; }
body.pa-story .entry-content .pa-shop__link:hover, body.pa-story .entry-content .pa-shop__link:focus-visible { color: var(--pa-accent); }
body.pa-story .entry-content .pa-shop ul.products { margin: 0 !important; }

/* --- Policies: a section index beside one reading column --- */
body.pa-tier-policy .entry-content, body.pa-tier-policy article .entry-content { max-width: 1120px; }
body.pa-tier-policy .pa-util { display: grid; grid-template-columns: 240px minmax(0, 680px); gap: clamp(40px, 6vw, 96px); align-items: start; }
body.pa-tier-policy .pa-idx { position: sticky; top: 120px; }
body.pa-tier-policy .entry-content .pa-idx__k { margin: 0 0 14px; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--pa-accent); }
body.pa-tier-policy .entry-content .pa-idx ol { list-style: none; margin: 0; padding: 0; font-size: 14px; line-height: 1.5; }
body.pa-tier-policy .entry-content .pa-idx li { margin: 0 0 10px; }
body.pa-tier-policy .entry-content .pa-idx a { color: var(--pa-muted); text-decoration: none; }
body.pa-tier-policy .entry-content .pa-idx a:hover, body.pa-tier-policy .entry-content .pa-idx a:focus-visible { color: var(--pa-ink); }
body.pa-tier-policy .entry-content .pa-util__text h2 { scroll-margin-top: 120px; }
body.pa-tier-policy .entry-content .pa-util__text > :first-child { margin-top: 0; }

/* --- Tablet --- */
@media (max-width: 1023px) {
	body.pa-tier-policy .pa-util { grid-template-columns: 1fr; }
	body.pa-tier-policy .pa-idx { position: static; padding-bottom: 24px; border-bottom: 1px solid var(--pa-line); }
}

/* --- Phones and small tablets --- */
@media (max-width: 900px) {
	body.pa-tier-story .pa-sh--plate .pa-sh__media { aspect-ratio: 4 / 5; max-height: none; }
	body.pa-tier-story .pa-sh--plate .pa-sh__copy { padding-top: 8px; }
	body.pa-tier-guide .pa-sh--quiet { grid-template-columns: 1fr; min-height: 0; }
	body.pa-tier-guide .pa-sh--quiet .pa-sh__media { order: -1; aspect-ratio: 4 / 5; }
	body.pa-tier-guide .pa-sh--quiet .pa-sh__copy { padding: 36px var(--pa-gutter) 40px; }
	body[class*="pa-tier-"]:not(.pa-tier-index) .pa-ch--chapter { grid-template-columns: 1fr; gap: 14px; }
	.pa-plate--full .pa-mf, .pa-plate--wide .pa-mf { aspect-ratio: 4 / 5; }
	.pa-pair { grid-template-columns: 1fr; gap: 12px; }
	body.pa-tier-policy .pa-idx { display: none; }
}

/* The parent theme sizes every figure in page content; plates set their own width. */
body .entry-content figure.pa-plate { max-width: none !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; }
body .entry-content figure.pa-plate--full { width: 100vw !important; margin-left: calc(50% - 50vw) !important; }
body .entry-content figure.pa-plate--wide { width: auto !important; margin-left: auto !important; margin-right: auto !important; max-width: var(--pa-wrap) !important; }
body .entry-content figure.pa-plate--pair { width: auto !important; margin-left: 0 !important; }

body .entry-content .pa-plate__cap { text-align: left !important; }
body .entry-content .pa-plate--full .pa-plate__cap { max-width: 1170px; margin-left: auto; margin-right: auto; padding-left: var(--pa-gutter) !important; padding-right: var(--pa-gutter) !important; }
body .entry-content figure.pa-plate--wide { padding-left: var(--pa-gutter) !important; padding-right: var(--pa-gutter) !important; }

/* 1.4.1: product names in the four-piece row look as they do in the shop grids. */
body.pa-legal .entry-content .pa-shop a { text-decoration: none; }

/* 1.4.1: tablets in portrait get wider crops so the title is on the first screen. */
@media (min-width: 600px) and (max-width: 900px) {
	body.pa-tier-story .pa-sh--plate .pa-sh__media,
	body.pa-tier-guide .pa-sh--quiet .pa-sh__media { aspect-ratio: 3 / 2; }
	.pa-plate--full .pa-mf, .pa-plate--wide .pa-mf { aspect-ratio: 3 / 2; }
	.pa-pair { grid-template-columns: 1fr 1fr; }
}