/* ==========================================================================
   Yanga v2 · the interactive layer. Loaded after yanga.css.
   ========================================================================== */

/* ---------------------------------------------- headings in logo colours -- */
.c-ink { color: var(--ink); } .c-green { color: var(--green); } .c-cog { color: var(--cognac); }
.c-cogl { color: var(--cognac-lit); } .c-bone { color: var(--bone); } .c-orange { color: var(--orange); } .c-sage { color: #A9C7B1; }
:is(.d-lg, .d-md, .d-sm) em { font-style: italic; }
/* the key word on paper gets an Enjoyment-orange underline, like a marker on a document */
.paper .d-lg .c-green, .paper .d-lg .c-ink:last-child {
  background-image: linear-gradient(transparent 78%, color-mix(in oklab, var(--orange) 70%, transparent) 78%, color-mix(in oklab, var(--orange) 70%, transparent) 88%, transparent 88%);
  background-repeat: no-repeat; background-size: 100% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* the logo's triangle inside every capital A of a big heading (added by script) */
.atri { position: relative; display: inline-block; }
.atri::after { content: ""; position: absolute; left: 50%; bottom: .26em; width: .2em; height: .2em; translate: -50% 0; background: var(--orange); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.atri--c::after { background: var(--cognac); }
.cover .atri--c::after, .inkground .atri--c::after { background: var(--cognac-lit); }

/* --------------------------------------------------------- opening film -- */
.intro { position: fixed; inset: 0; z-index: 200; background: var(--bone); display: grid; place-items: center; transition: opacity 500ms var(--sc-ease-out); }
.intro[hidden] { display: none; }
.intro.is-out { opacity: 0; pointer-events: none; }
.intro video { width: 100%; height: 100%; object-fit: contain; }
.intro__skip { position: absolute; right: 18px; bottom: 18px; min-height: 48px; padding: 0 1.2rem; border-radius: var(--sc-r-sm); border: 1px solid var(--hair-strong); background: color-mix(in oklab, var(--bone) 80%, transparent); font-weight: 650; cursor: pointer; }

/* ----------------------------------------------------------------- bar -- */
.bar__count { font-style: normal; font-size: .72rem; font-weight: 700; letter-spacing: .06em; color: var(--ink-3); border-left: 1px solid var(--hair-strong); padding-left: .55rem; margin-left: .15rem; }
.duty { display: none; align-items: center; gap: .45rem; margin-left: .8rem; font-size: .8rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.duty::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #2E6B47; box-shadow: 0 0 0 3px color-mix(in oklab, #2E6B47 22%, transparent); }
.duty.is-on::before { background: var(--orange); box-shadow: 0 0 0 3px color-mix(in oklab, var(--orange) 25%, transparent); }
@media (min-width: 1180px) { .duty:not([hidden]) { display: inline-flex; } }
.snd { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: 0 .75rem; border: 1px solid var(--hair-strong); border-radius: var(--sc-r-sm); background: transparent; cursor: pointer; font-weight: 600; font-size: .88rem; }
.snd svg { width: 18px; height: 18px; }
.snd[aria-pressed="true"] { background: var(--green); color: var(--bone); border-color: var(--green); }
@media (max-width: 640px) { .snd span { display: none; } .snd { padding: 0 .6rem; } }

/* ---------------------------------------------------------------- hero -- */
.exhibit-mount { transform: perspective(1000px) rotateX(var(--tiltX, 0deg)) rotateY(var(--tiltY, 0deg)) rotate(calc(-4deg + 4deg * var(--p))) translate3d(calc(-2vw * var(--p)), calc(-2vh * var(--p)), 0) scale(calc(1 + .06 * var(--p))); transition: box-shadow 200ms var(--sc-ease-out); }
button.n-seal { padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; }
button.n-seal img { width: 100%; height: auto; }
button.n-seal:active { transform: scale(.94); }
button.n-seal::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px dashed color-mix(in oklab, var(--cognac) 60%, transparent); animation: sealHint 9s linear infinite; }
.n-seal.is-pressed::after { display: none; }
@keyframes sealHint { to { rotate: 360deg; } }
.n-seal-hint { position: absolute; z-index: 4; left: calc(50% - min(15vw, 22vh) - 70px); top: calc(12% + clamp(110px, 11vw, 168px) + 6px); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cognac); transition: opacity 300ms; }
.n-seal.is-pressed + .n-seal-hint { opacity: 0; }
.n-admit { display: flex; align-items: center; gap: .9rem; margin-top: .8rem; min-height: 0; }
.n-admit img { width: 150px; height: auto; opacity: 0; transform: rotate(-8deg) scale(1.6); }
.n-admit p { margin: 0; font-family: var(--sc-font-display); font-style: italic; color: var(--cognac); font-size: 1.15rem; line-height: 1.2; opacity: 0; transform: translateX(-8px); transition: opacity 400ms 500ms, transform 400ms 500ms var(--sc-ease-out); max-width: 18ch; }
.n-admit.is-on img { animation: stampIn 560ms cubic-bezier(.2, .9, .2, 1) forwards; }
.n-admit.is-on p { opacity: 1; transform: none; }
@keyframes stampIn { 0% { opacity: 0; transform: rotate(-8deg) scale(1.7); } 60% { opacity: .95; transform: rotate(-8deg) scale(.95); } 100% { opacity: .92; transform: rotate(-8deg) scale(1); } }
.n-hear { position: absolute; z-index: 5; bottom: 18%; right: calc(50% - min(15vw, 22vh) + 14px); display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: 0 .85rem; border-radius: 999px; border: 0; background: var(--ink); color: var(--bone); font-weight: 650; font-size: .82rem; cursor: pointer; box-shadow: 0 4px 12px hsl(28 30% 8% / .35); }
.n-hear svg { width: 16px; height: 16px; }
.n-hear[aria-pressed="true"] { background: var(--orange); color: var(--ink); }
.n-duty { margin: -.4rem 0 1rem; font-size: .9rem; color: var(--ink-3); font-weight: 600; }
.n-duty:empty { display: none; }
@media (max-width: 860px) {
  .n-seal-hint { display: none; }
  .n-hear { right: 6px; bottom: 40px; min-height: 36px; font-size: .74rem; padding: 0 .7rem; }
  .n-admit img { width: 110px; } .n-admit p { font-size: .98rem; }
  .n-admit { position: absolute; left: 1.1rem; top: calc(100% - 1rem); z-index: 6; pointer-events: none; }
}

/* ----------------------------------------------------------- exhibits -- */
.ex-filters { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip-f { min-height: 40px; padding: 0 .9rem; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--bone) 40%, transparent); background: transparent; color: var(--bone); font-weight: 600; font-size: .86rem; cursor: pointer; }
.chip-f:hover { background: color-mix(in oklab, var(--bone) 10%, transparent); }
.chip-f.is-on { background: var(--bone); color: var(--green); border-color: var(--bone); }
.ex-reviewed { margin: 0; font-size: .9rem; color: var(--on-green-2); }
.ex-reviewed b { color: var(--orange); font-variant-numeric: tabular-nums; }
.ex-card.is-hidden { display: none; }
.ex-stamp { position: absolute; left: 10px; top: 12px; padding: .25rem .55rem; border: 2px solid var(--cognac); color: var(--cognac); background: color-mix(in oklab, var(--bone) 86%, transparent); font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; transform: rotate(-9deg) scale(1.5); opacity: 0; pointer-events: none; }
.ex-card.is-reviewed .ex-stamp { animation: stampIn2 480ms cubic-bezier(.2, .9, .2, 1) forwards; }
@keyframes stampIn2 { 0% { opacity: 0; transform: rotate(-9deg) scale(1.6); } 60% { opacity: 1; transform: rotate(-9deg) scale(.95); } 100% { opacity: 1; transform: rotate(-9deg) scale(1); } }
.exhibits [data-sc-stage] { cursor: grab; touch-action: pan-y; }
.exhibits [data-sc-stage].is-dragging { cursor: grabbing; }
.exhibits [data-sc-stage].is-dragging .ex-card { pointer-events: none; }

/* -------------------------------------------------- exhibit H: wake -- */
.wake { padding-block: clamp(5rem, 9vw, 8rem); }
.wake__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.wake__copy { display: grid; gap: 1.1rem; justify-items: start; }
.wake__stage { display: grid; gap: 1.2rem; justify-items: center; }
.wake__film { position: relative; width: min(100%, 380px); aspect-ratio: 9 / 16; max-height: 70vh; background: #241e18; overflow: hidden; box-shadow: var(--sc-e3); border: 10px solid #FBF7EF; outline: 1px solid var(--hair-strong); }
.wake__film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wake__time { position: absolute; left: 10px; bottom: 10px; background: var(--ink); color: var(--bone); font-size: .78rem; font-weight: 700; padding: .3rem .6rem; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.wake__rail { width: min(100%, 460px); }
.wake__rail input { -webkit-appearance: none; appearance: none; width: 100%; height: 64px; background: transparent; cursor: grab; margin: 0; }
.wake__rail input:active { cursor: grabbing; }
.wake__rail input::-webkit-slider-runnable-track { height: 4px; background: linear-gradient(90deg, var(--cognac) var(--v, 0%), var(--bone-3) var(--v, 0%)); border-radius: 2px; }
.wake__rail input::-moz-range-track { height: 4px; background: var(--bone-3); border-radius: 2px; }
.wake__rail input::-moz-range-progress { height: 4px; background: var(--cognac); }
.wake__rail input::-webkit-slider-thumb { -webkit-appearance: none; width: 58px; height: 58px; margin-top: -27px; border-radius: 50%; background: #FBF7EF url(assets/logo/seal-primary.svg) center / 92% no-repeat; box-shadow: 0 4px 12px hsl(28 30% 12% / .35); border: 0; }
.wake__rail input::-moz-range-thumb { width: 58px; height: 58px; border-radius: 50%; background: #FBF7EF url(assets/logo/seal-primary.svg) center / 92% no-repeat; box-shadow: 0 4px 12px hsl(28 30% 12% / .35); border: 0; }
.wake__rail input:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
.wake__ends { display: flex; justify-content: space-between; font-size: .8rem; font-weight: 600; color: var(--ink-3); margin-top: -.4rem; }
@media (max-width: 860px) { .wake__grid { grid-template-columns: 1fr; } .wake__film { width: min(78vw, 340px); } }

/* -------------------------------------------------------- the Minister -- */
.langs button.lang { border: 1px solid var(--hair-strong); padding: .5rem .95rem; min-height: 44px; border-radius: 999px; font-weight: 650; font-size: .95rem; background: var(--bone-2); cursor: pointer; }
.langs button.lang:hover { background: var(--bone-3); }
.langs button.lang.is-on { background: var(--green); color: var(--bone); border-color: var(--green); }
.greet { margin: .9rem 0 0; display: grid; gap: .2rem; min-height: 5.4rem; }
.greet .d-md { color: var(--green); }
.greet.is-swap .d-md { animation: greetIn 420ms var(--sc-ease-out); }
@keyframes greetIn { from { opacity: 0; transform: translateY(10px); } }
button.order { width: 100%; text-align: left; background: transparent; border: 0; border-bottom: 1px dashed var(--hair-strong); grid-template-columns: 3.2rem 1fr auto; align-items: center; cursor: pointer; color: inherit; font: inherit; }
button.order:hover { background: color-mix(in oklab, var(--cognac) 6%, transparent); }
button.order q { display: block; }
.order__by { display: block; margin-top: .3rem; color: var(--ink-3); font-size: .9rem; }
.order__watch { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; font-weight: 700; color: var(--cognac); white-space: nowrap; }
.order__watch svg { width: 18px; height: 18px; }

/* -------------------------------------------------------------- oath -- */
.oath__foot { grid-template-columns: auto minmax(0, 1fr) auto; }
.seal3d { position: relative; width: clamp(120px, 15vh, 180px); aspect-ratio: 1; cursor: grab; touch-action: none; }
.seal3d:active { cursor: grabbing; }
.seal3d img, .seal3d canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.seal3d.is-3d img { display: none; }
.seal3d__hint { position: absolute; left: 50%; bottom: -1.1rem; translate: -50% 0; font-size: .64rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #CDBFAE; white-space: nowrap; }
.oath__sworn { --u: 1 !important; opacity: 1 !important; }
.hold { --h: 0; position: relative; display: inline-flex; align-items: center; gap: .7rem; min-height: 60px; padding: 0 1.3rem 0 .6rem; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--bone) 40%, transparent); background: color-mix(in oklab, var(--bone) 8%, transparent); color: var(--bone); font-weight: 700; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: none; }
.hold__ring { width: 44px; height: 44px; transform: rotate(-90deg); }
.hold__track { fill: none; stroke: color-mix(in oklab, var(--bone) 25%, transparent); stroke-width: 3; }
.hold__fill { fill: none; stroke: var(--orange); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--h)); }
.hold:hover { background: color-mix(in oklab, var(--bone) 14%, transparent); }
.hold.is-done { background: var(--orange); color: var(--ink); border-color: var(--orange); }
.hold.is-done .hold__fill { stroke: var(--ink); }
.oath.is-sworn .seal3d { animation: press 600ms var(--sc-ease-out); }
@media (max-width: 860px) { .oath__foot { grid-template-columns: auto minmax(0, 1fr); } .oath__foot .hold { grid-column: 1 / -1; justify-self: start; min-height: 52px; } .oath__sworn p:last-child { font-size: .85rem; } }

/* ---------------------------------------------- departments: the plan -- */
.depts__body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.depts__body .dept { grid-template-columns: 86px minmax(0, 1fr) auto; }
.depts__body .dept__desc { grid-column: 2; grid-row: 2; }
.depts__body .dept__seal { width: 80px; height: 80px; grid-row: span 2; }
.depts__body .dept__add { grid-column: 3; grid-row: 1 / span 2; }
.plan { position: sticky; top: calc(var(--bar-h) + 2rem); margin: 0; background: #FBF7EF; border: 1px solid var(--hair-strong); padding: 1rem; box-shadow: var(--sc-e2); }
.plan figcaption { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; margin-top: .6rem; }
.plan__sum { font-family: var(--sc-font-display); font-size: 1.05rem; text-align: right; color: var(--green); }
.mq { width: 100%; height: auto; }
.mq-tent { fill: #F7F0E3; stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 6 5; }
.mq-poles circle { fill: var(--ink-3); }
.mq-stage { fill: var(--bone-3); stroke: var(--ink-3); stroke-width: 1.2; }
.mq-head { fill: #fff; stroke: var(--ink-3); stroke-width: 1.2; }
.mq-floor { stroke: var(--ink-3); stroke-width: 1.2; }
.mq-tables circle { fill: #fff; stroke: var(--ink-3); stroke-width: 1.2; }
.mq-cap { font: 700 11px var(--sc-font-text); letter-spacing: .16em; fill: var(--ink-3); }
.mq-part { opacity: .22; transition: opacity 360ms var(--sc-ease-out); }
.mq-part .mq-ink { stroke: var(--ink-3); }
.mq-part .mq-glow { opacity: 0; transition: opacity 360ms var(--sc-ease-out); }
.mq-part .mq-tag { font: 400 15px var(--sc-font-display); fill: var(--ink-3); }
.mq-part.on { opacity: 1; }
.mq-part.on .mq-ink { stroke: var(--green); }
.mq-part.on .mq-glow { opacity: 1; }
.mq-part.on .mq-tag { fill: var(--green); }
.mq-part.on .mq-wave { animation: wave 1.6s ease-in-out infinite; }
.mq-part.on .mq-spark path { animation: spark 1.2s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.mq-part.just-on { animation: partIn 520ms var(--sc-ease-out); transform-box: fill-box; transform-origin: center; }
@keyframes wave { 50% { opacity: .35; } }
@keyframes spark { 50% { transform: scale(1.25) rotate(20deg); } }
@keyframes partIn { 0% { transform: scale(.85); } 60% { transform: scale(1.06); } }
@media (max-width: 900px) { .depts__body { grid-template-columns: 1fr; } .plan { position: relative; top: 0; order: -1; } .depts__body .dept { grid-template-columns: 64px 1fr; } .depts__body .dept__seal { width: 60px; height: 60px; grid-row: span 3; } .depts__body .dept__desc, .depts__body .dept__add { grid-column: 2; grid-row: auto; } .depts__body .dept__add { justify-self: start; } }

/* ------------------------------------------------------ the living map -- */
.map-route { stroke-dashoffset: 1; }
.map-hit { fill: transparent; cursor: pointer; outline: none; }
.map-hit:hover, .map-hit:focus-visible { fill: color-mix(in oklab, var(--orange) 26%, transparent); stroke: var(--orange); stroke-width: 2; }
.map-stamp { opacity: 0; transform-box: fill-box; transform-origin: center; }
.map-stamp circle { fill: color-mix(in oklab, var(--green) 70%, transparent); stroke: var(--cognac-lit); stroke-width: 2; stroke-dasharray: 3 2; }
.map-stamp text { fill: var(--cognac-lit); font: 800 10px var(--sc-font-text); letter-spacing: .08em; }
.map-stamp text.map-stamp__s { font-size: 5.5px; letter-spacing: .14em; }
.map-stamp.is-on { animation: mapStamp 480ms cubic-bezier(.2, .9, .2, 1) forwards; }
@keyframes mapStamp { 0% { opacity: 0; scale: 1.8; } 60% { opacity: 1; scale: .92; } 100% { opacity: 1; scale: 1; } }
.map-next__dot { fill: var(--orange); }
.map-next__ring { fill: none; stroke: var(--orange); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: pulse 2.2s ease-out infinite; }
@keyframes pulse { 0% { scale: .6; opacity: 1; } 100% { scale: 2.6; opacity: 0; } }
.map-badge circle { fill: var(--orange); stroke: var(--bone); stroke-width: 3; }
.map-badge path { fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.map-badge { transition: opacity 300ms; }
.map-route--you { fill: none; stroke: var(--orange); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: drawYou 1.6s var(--sc-ease-out) forwards; }
@keyframes drawYou { to { stroke-dashoffset: 0; } }
.map-pin circle { fill: var(--orange); stroke: var(--bone); stroke-width: 3; }
.map-pin text { fill: var(--bone); font: 700 20px var(--sc-font-text); paint-order: stroke; stroke: var(--green); stroke-width: 6px; }
.map.is-picking { cursor: crosshair; }
.pcs { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.pcs .label { margin-right: .2rem; }
.pcs button { min-height: 40px; padding: 0 .85rem; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--bone) 35%, transparent); background: transparent; color: var(--bone); font-weight: 600; font-size: .86rem; cursor: pointer; }
.pcs button:hover, .pcs button:focus-visible { background: var(--bone); color: var(--green); }
.pin { display: grid; gap: .5rem; margin-top: .4rem; }
.pin__row { display: flex; gap: .5rem; }
.pin__in { flex: 1; min-width: 0; min-height: 50px; padding: 0 .9rem; font-size: 1rem; border-radius: var(--sc-r-sm); border: 1.5px solid color-mix(in oklab, var(--bone) 35%, transparent); background: color-mix(in oklab, var(--green-deep) 70%, transparent); color: var(--bone); }
.pin__in::placeholder { color: color-mix(in oklab, var(--bone) 55%, transparent); }
.pin__in:focus { outline: none; border-color: var(--orange); }
.pin .btn { min-height: 50px; }
.pin__out { margin: 0; color: var(--bone); font-size: .95rem; min-height: 1.4em; }
.pin__out b { color: var(--orange); }
.pin__out .link { color: var(--bone); min-height: 40px; }
.map-key { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin: .2rem 0 0; font-size: .82rem; color: var(--on-green-2); }
.k { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.k--past { background: var(--cognac-lit); } .k--next { background: var(--orange); box-shadow: 0 0 0 3px color-mix(in oklab, var(--orange) 30%, transparent); margin-left: .5rem; }
@media (max-width: 900px) {
  .juris__copy .pcs .label { display: none; }
  .pcs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .2rem; scrollbar-width: none; }
  .pcs button { flex: none; min-height: 36px; font-size: .8rem; }
  .map { max-height: 40svh; }
  .juris__copy .d-lg { font-size: 1.9rem; }
  .pin .label { font-size: .7rem; }
  .map-key { display: none; }
}

/* ----------------------------------------------------- the diary pages -- */
.diary2 { padding-block: clamp(5rem, 9vw, 8rem); overflow: clip; }
.diary2__head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 2rem 4rem; align-items: end; margin-bottom: clamp(2rem, 4vw, 3rem); }
.next-appt { background: var(--green); color: var(--bone); padding: 1.1rem 1.2rem; border-radius: var(--sc-r-md); box-shadow: var(--sc-e2); display: grid; gap: .3rem; }
.next-appt .label { color: var(--on-green-2); }
.next-appt b { font-family: var(--sc-font-display); font-weight: 400; font-size: 1.6rem; line-height: 1.1; }
.next-appt span { color: var(--on-green-2); font-size: .92rem; }
.next-appt .count { font-family: var(--sc-font-display); font-size: 2.2rem; color: var(--orange); font-variant-numeric: tabular-nums; }
.months { display: grid; grid-auto-flow: column; grid-auto-columns: min(360px, 84vw); gap: 1.2rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .6rem .4rem 1.4rem; scrollbar-width: thin; }
.months:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
.month { scroll-snap-align: start; background: #FBF7EF; border: 1px solid var(--hair-strong); padding: 1.1rem 1rem 1rem; box-shadow: 0 1px 2px hsl(28 30% 12% / .1), 0 16px 30px -18px hsl(28 30% 12% / .35); position: relative; }
.month::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: repeating-linear-gradient(90deg, var(--green) 0 18px, var(--cognac) 18px 36px, var(--orange) 36px 42px, var(--bone-3) 42px 60px); }
.month h3 { margin: .3rem 0 .2rem; font-family: var(--sc-font-display); font-weight: 400; font-size: 1.5rem; display: flex; justify-content: space-between; align-items: baseline; }
.month h3 small { font-family: var(--sc-font-text); font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.month__open { font-size: .82rem; color: var(--ink-2); margin: 0 0 .7rem; }
.month__open b { color: var(--green); }
.dow, .days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.dow span { font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-align: center; color: var(--ink-3); padding-bottom: .3rem; }
.day { position: relative; aspect-ratio: 1; display: grid; place-items: center; font-size: .86rem; font-weight: 600; border-radius: 4px; border: 0; background: transparent; color: var(--ink); font-variant-numeric: tabular-nums; padding: 0; }
button.day { cursor: pointer; }
button.day:hover, button.day:focus-visible { background: var(--green); color: var(--bone); outline: none; }
.day--past { color: color-mix(in oklab, var(--ink) 28%, transparent); }
.day--sat { box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--cognac) 70%, transparent); color: var(--cognac); font-weight: 750; }
.day--today { background: var(--bone-3); }
.day--booked { color: var(--bone); background: var(--ink); }
.day--booked .appt { position: absolute; left: 50%; top: 50%; width: 170%; translate: -50% -50%; rotate: -14deg; scale: 1.8; opacity: 0; border: 2px solid var(--orange); color: var(--orange); background: color-mix(in oklab, #FBF7EF 88%, transparent); font-size: .5rem; font-weight: 800; letter-spacing: .08em; line-height: 1.1; text-align: center; padding: .15rem .1rem; pointer-events: none; z-index: 2; }
.month.is-seen .day--booked .appt { animation: apptIn 520ms cubic-bezier(.2, .9, .2, 1) forwards; animation-delay: var(--d, 0ms); }
@keyframes apptIn { 0% { opacity: 0; scale: 1.9; } 60% { opacity: 1; scale: .94; } 100% { opacity: 1; scale: 1; } }
.month__list { margin: .8rem 0 0; padding: .6rem 0 0; list-style: none; border-top: 1px dashed var(--hair-strong); font-size: .82rem; color: var(--ink-2); display: grid; gap: .2rem; }
.month__list b { color: var(--ink); }
.months__nav { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: .4rem; }
.months__nav p { margin: 0; font-size: .9rem; color: var(--ink-3); flex: 1 1 18rem; }
@media (max-width: 900px) { .diary2__head { grid-template-columns: 1fr; } }

/* --------------------------------------------------- reports: the pile -- */
.reports__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.reports__grid .reports__head { margin-bottom: 0; }
.rep-ctl { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.rep-count { margin: .2rem 0 0; font-size: .88rem; color: var(--ink-3); font-weight: 600; }
.pile { position: relative; height: clamp(420px, 56vh, 500px); touch-action: pan-y; }
.pile .slip { position: absolute; inset: 0 0 auto 0; margin: 0 auto !important; max-width: 600px; min-height: 340px; padding: 2rem 2rem 1.4rem !important; display: flex; flex-direction: column; grid-column: auto !important; cursor: grab; user-select: none; -webkit-user-select: none;
  transform: translate3d(var(--x, 0px), calc(var(--k, 0) * 14px), 0) rotate(calc(var(--r0, 0deg) + var(--rot, 0deg))) scale(calc(1 - var(--k, 0) * .04));
  z-index: calc(10 - var(--k, 0)); transition: transform 420ms var(--sc-ease-out), opacity 300ms; }
.pile .slip:nth-child(odd) { --r0: -1.6deg; } .pile .slip:nth-child(even) { --r0: 1.4deg; }
.pile .slip.is-top { cursor: grab; }
.pile .slip.is-dragging { transition: none; cursor: grabbing; }
.pile .slip.is-gone { opacity: 0; }
.pile .slip:not(.is-top) blockquote, .pile .slip:not(.is-top) footer { visibility: hidden; }
.pile .slip blockquote { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.5rem) !important; flex: 1; display: flex; align-items: center; }
.pile .slip footer { margin-top: auto; }
.slip footer { flex-wrap: wrap; justify-content: space-between; }
.second { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: 0 .9rem; border-radius: 999px; border: 1.5px solid var(--cognac); background: transparent; color: var(--cognac); font-weight: 700; font-size: .86rem; cursor: pointer; }
.second svg { width: 18px; height: 18px; }
.second:hover { background: color-mix(in oklab, var(--cognac) 10%, transparent); }
.second[aria-pressed="true"] { background: var(--cognac); color: var(--bone); }
.second.just { animation: press 420ms var(--sc-ease-out); }
@media (max-width: 900px) { .reports__grid { grid-template-columns: 1fr; } .pile { height: 400px; } }

/* report filer dialog */
.filer { border: 0; padding: 0; background: transparent; width: min(560px, calc(100% - 24px)); }
.filer::backdrop { background: hsl(28 30% 8% / .6); }
.filer__card { background: var(--bone); color: var(--ink); padding: 1.4rem; border-radius: var(--sc-r-md); display: grid; gap: .9rem; box-shadow: var(--sc-e3); }
.filer__head { display: flex; justify-content: space-between; align-items: center; }

/* toast (file complete) */
.toast { position: fixed; left: 50%; bottom: 18px; z-index: 95; translate: -50% 0; display: flex; align-items: center; gap: 1rem; background: var(--ink); color: var(--bone); padding: .7rem .7rem .7rem 1.1rem; border-radius: var(--sc-r-md); box-shadow: var(--sc-e3); max-width: calc(100% - 24px); opacity: 0; transform: translateY(20px); transition: opacity 300ms, transform 300ms var(--sc-ease-out); }
.toast.is-on { opacity: 1; transform: none; }
.toast p { margin: 0; font-size: .95rem; }
.toast .btn { min-height: 44px; }

/* ----------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .exhibit-mount { --tiltX: 0deg !important; --tiltY: 0deg !important; }
  button.n-seal::after, .map-next__ring, .mq-part.on .mq-wave, .mq-part.on .mq-spark path { animation: none; }
  .map-stamp { opacity: 1; }
  .month .day--booked .appt { opacity: 1; scale: 1; animation: none !important; }
  .ex-card.is-reviewed .ex-stamp { animation: none; opacity: 1; transform: rotate(-9deg); }
  .n-admit.is-on img { animation: none; opacity: .92; transform: rotate(-8deg); }
  .map-route--you { animation: none; stroke-dashoffset: 0; }
  .pile .slip { transition: none; }
}

/* phone fixes (v2 review) */
@media (max-width: 600px) {
  .pin__row { flex-wrap: wrap; }
  .pin__row .btn { width: 100%; }
  .toast { left: 12px; right: 12px; translate: none; flex-wrap: wrap; }
  .toast p { flex: 1 1 100%; }
  .toast .btn { width: 100%; }
}
