/* Atelier look (from the homepage mockup): speckled grey ground, white paper sheets with square
   corners, Instrument Serif headings, typewriter captions, ink instead of the lime accent.
   Loaded after styles.css and reviews.css, so it only restyles; remove the link to go back. */

:root {
  --pear: #2b2724;          /* the old lime accent becomes ink everywhere */
  --pear-soft: #e3e1dd;
  --sheet: #fbfaf8;
  --ground: #dcdad6;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --sans: Inter, 'Pretendard Variable', Pretendard, system-ui, sans-serif;
  --shadow: 0 20px 40px -32px rgba(28, 25, 23, 0.7);
  --tape-shadow: 0 8px 18px -14px rgba(28, 25, 23, 0.5);
}

body {
  background-color: var(--ground);
  background-image: radial-gradient(rgba(43, 39, 36, 0.07) 1px, transparent 1.2px), radial-gradient(rgba(255, 255, 255, 0.35) 1px, transparent 1.2px);
  background-size: 5px 5px, 7px 7px;
  background-position: 0 0, 2px 3px;
}
::selection { background: #2b2724; color: var(--sheet); }

/* Ink buttons and accents */
.btn-pear { background: var(--ink); color: var(--sheet); }
.btn-pear:hover { filter: none; background: #000; box-shadow: 0 10px 22px -12px rgba(28, 25, 23, 0.7); }
.badge { color: var(--sheet); }
.book-slot[aria-pressed="true"] { color: var(--sheet); }
.book-day[aria-pressed="true"]::after { background: var(--sheet); }
.slider-btn:hover:not(:disabled) { color: var(--sheet); }
.plan-dark .btn-pear, .gc-card .btn-pear { background: var(--sheet); color: var(--ink); }
.gc-line { background: var(--n400); }
.dot-live { box-shadow: 0 0 0 3px var(--n200); }
.mark { background-image: none; padding: 0; font-style: italic; }

/* Quiet uppercase labels instead of italic serif eyebrows */
.eyebrow { font-family: var(--sans); font-style: normal; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--n700); }
.eyebrow.center { text-align: center; }

/* Paper sheets: square corners, soft drop shadow */
.card, .sheet { border-radius: 0; background: var(--sheet); box-shadow: var(--shadow); }
.photo img, .hero-photo img, .article-cover img, .prose img, .prose blockquote { border-radius: 0; }
.book { border-radius: 6px; }

/* Nav: a slim white sheet */
.nav { background: rgba(251, 250, 248, 0.94); box-shadow: 0 10px 24px -20px rgba(28, 25, 23, 0.6); }
.nav.scrolled { box-shadow: 0 10px 24px -18px rgba(28, 25, 23, 0.7); background: rgba(251, 250, 248, 0.97); }
.nav-links a { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
.nav-inner > .btn { text-transform: uppercase; letter-spacing: 0.14em; font-size: 12px; }

/* ---------- Homepage ---------- */
main.atelier {
  max-width: 1360px; margin: 0 auto; padding: clamp(14px, 2.4vw, 36px);
  display: flex; flex-direction: column; gap: clamp(18px, 2.4vw, 32px);
}
main.atelier .eyebrow { margin: 0; }

.mk-poster-row {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-bottom: 18px;
  font-size: clamp(13px, 1.6vw, 22px); font-weight: 300; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink);
}

/* Hero */
.mk-hero { padding: clamp(18px, 2.6vw, 36px); }
.mk-blur-photo { position: relative; overflow: hidden; height: clamp(300px, 46vw, 620px); background: #f1f0ed; }
.mk-blur-photo img {
  position: absolute; inset: -4%; width: 108%; height: 108%; max-width: none; object-fit: cover; object-position: 50% 60%;
  filter: blur(10px) saturate(0.7) contrast(0.92); opacity: 0.9;
}
.mk-blur-photo span { position: absolute; font-size: 12px; color: var(--ink); white-space: nowrap; }
.mk-hero-foot {
  position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 24px 40px; margin-top: -72px; padding: 0 clamp(0px, 2vw, 28px);
}
.mk-hero-tape { max-width: 640px; }
.mk-hero-tape h1 { margin: 0; font-size: clamp(42px, 5.6vw, 76px); line-height: 0.95; letter-spacing: -0.01em; }
.mk-hero-side { max-width: 360px; margin-bottom: 6px; }
.mk-hero-side p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--n700); }
.mk-hero-side .next-opening { margin-top: 12px; font-size: 14px; }

/* Label strips ("tape") */
.tape { background: var(--sheet); padding: 20px 28px 16px; box-shadow: var(--tape-shadow); }
.tape-right { border-right: 1px dashed var(--n300); }
.tape-left { border-left: 1px dashed var(--n300); }
.tape-title { margin: 0; font-family: var(--serif); font-size: clamp(28px, 3vw, 38px); line-height: 1.02; color: var(--ink); }
.tape-kicker { margin: 6px 0 0; font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.tape-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 6px;
  font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: var(--ink);
}
.tape-link:hover { text-decoration: underline; text-underline-offset: 5px; }

/* Two sheets side by side */
.mk-pair { display: flex; flex-wrap: wrap; gap: clamp(18px, 2.4vw, 32px); align-items: stretch; }
.mk-pair > * { flex: 1 1 420px; min-width: 0; }

/* The 16-type system */
.mk-text { padding: clamp(22px, 3vw, 40px); display: flex; flex-direction: column; justify-content: space-between; gap: 28px; }
.mk-text h2 { margin: 0; font-size: clamp(36px, 4.2vw, 58px); }
.mk-text p:not(.eyebrow) { margin: 0; font-size: 15px; line-height: 1.7; max-width: 460px; color: var(--n700); }
.mk-attrs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--n200); font-size: 13px; }
.mk-attrs li { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--n200); }
.mk-attrs span { font-family: var(--mono); color: #6f6a64; }
.mk-clouds { flex: 1.3 1 520px !important; position: relative; overflow: hidden; min-height: 520px; }
.mk-clouds i { position: absolute; aspect-ratio: 1; border-radius: 50%; filter: blur(22px); }
.mk-clouds .c-spring { left: 6%; top: 8%; width: 30%; background: radial-gradient(circle at 35% 35%, #fefbce, #ecbf57 45%, #fe9f7c 70%, transparent 72%); }
.mk-clouds .c-summer { left: 54%; top: 6%; width: 32%; background: radial-gradient(circle at 60% 40%, #f4c8d1, #c1b4df 45%, #a8d8f0 68%, transparent 72%); }
.mk-clouds .c-autumn { left: 10%; top: 52%; width: 32%; background: radial-gradient(circle at 40% 50%, #e9c394, #d55200 42%, #487448 68%, transparent 72%); }
.mk-clouds .c-winter { left: 56%; top: 50%; width: 30%; background: radial-gradient(circle at 50% 45%, #ffecf7, #cb2298 40%, #18144e 68%, transparent 72%); }
.mk-clouds span { position: absolute; font-size: 12px; color: var(--ink); white-space: nowrap; }
.mk-clouds .soft { color: var(--n700); }
.mk-clouds .mono { font-family: var(--mono); letter-spacing: 0.06em; }

/* A session, like a museum guide */
.mk-guide {
  background: #f4f3f0; padding: clamp(36px, 5vw, 72px) clamp(16px, 3vw, 40px);
  display: flex; flex-direction: column; align-items: center; gap: 18px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}
.cut { position: relative; display: block; flex: none; width: 64px; height: 64px; overflow: hidden; border-radius: 3px; box-shadow: 0 6px 12px -8px rgba(28, 25, 23, 0.6); }
.cut img { position: absolute; max-width: none; height: auto; }

/* Courses poster */
.mk-courses { display: flex; flex-wrap: wrap; padding: 0; }
.mk-courses-text { flex: 1.2 1 520px; padding: clamp(22px, 3vw, 44px); display: flex; flex-direction: column; gap: 36px; color: var(--ink); }
.mk-courses-text .mk-poster-row { font-size: clamp(14px, 1.5vw, 20px); padding: 0; }
.mk-price-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 28px; align-items: baseline;
  font-size: clamp(24px, 3.2vw, 44px); font-weight: 300; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.15;
  color: inherit; text-decoration: none;
}
.mk-price-grid .t { font-size: 0.5em; }
.mk-price-grid:hover span:not(.t) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.mk-courses-text > p { margin: 0; max-width: 460px; font-size: 14px; line-height: 1.6; color: var(--ink); }
.mk-courses-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding-top: 18px; border-top: 1px solid currentColor; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.mk-courses-foot a { color: inherit; text-underline-offset: 4px; }
.mk-courses-photo { flex: 1 1 380px; min-height: 420px; position: relative; overflow: hidden; background: #efeeeb; }
.mk-courses-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.mk-courses-photo > span { position: absolute; right: 14px; bottom: 16px; writing-mode: vertical-rl; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--ink); background: rgba(251, 250, 248, 0.8); padding: 8px 4px; }

/* Reviews as label strips */
.mk-reviews { background: #f4f3f0; padding: clamp(32px, 4.4vw, 60px) clamp(16px, 3vw, 40px); }
.mk-reviews-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; }
.mk-reviews .reviews-track { --edge: 0px; padding: 8px 2px 28px; }
.review { border-radius: 0; background: var(--sheet); box-shadow: var(--tape-shadow); border-right: 1px dashed var(--n300); }
.review:hover { box-shadow: 0 14px 26px -18px rgba(28, 25, 23, 0.55); }
.review-q { color: var(--n300); }
.review-stars { color: var(--ink); }
.review-more { text-decoration-color: var(--n300); }
.review figcaption { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; }
.slider-btn { border-radius: 50%; }
.slider-bar { max-width: 200px; }
.mk-reviews .review-cta { margin-top: 18px; }
.review-modal { border-radius: 6px; }

/* Hazel */
.mk-portrait { position: relative; overflow: hidden; min-height: 620px; margin: 0; background: #c9cfcb; }
.mk-portrait > img { position: absolute; inset: -8%; width: 116%; height: 116%; max-width: none; object-fit: cover; object-position: 30% 30%; filter: blur(16px) saturate(0.75); opacity: 0.85; }
.mk-portrait figcaption { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; padding: 24px; text-align: center; color: #1c1917; }
.mk-portrait .op { font-family: var(--serif); font-size: 26px; }
.mk-portrait .credits { font-family: var(--mono); font-size: 13px; line-height: 1.5; letter-spacing: 0.04em; text-transform: uppercase; }
.mk-portrait .side { position: absolute; left: 18px; bottom: 26px; writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: #1c1917; }
.mk-portrait .avec { position: absolute; left: 52px; right: 20px; bottom: 20px; margin: 0; font-family: var(--mono); font-size: 12px; line-height: 1.5; color: #1c1917; }
.ko-sans { font-family: 'IBM Plex Sans KR', var(--mono); }
.ko-serif { font-family: Hahmlet, var(--serif); font-weight: 200; font-size: 0.78em; letter-spacing: -0.03em; }
.mk-about { padding: clamp(24px, 3.4vw, 52px); display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.mk-about > p:last-child { margin: 0; font-size: 15px; line-height: 1.7; color: var(--n700); }
.mk-word { margin: 0 0 6px; font-family: var(--serif); font-size: clamp(56px, 6vw, 88px); line-height: 0.9; color: var(--ink); }
.mk-word-sm { margin-top: 18px; font-size: clamp(40px, 4.4vw, 64px); }
.mk-def { margin: 0; font-family: var(--mono); font-size: 13px; color: var(--n700); }

/* Journal cards everywhere: photo, typewriter date, serif title */
.post { background: transparent; box-shadow: none; border-radius: 0; gap: 0; }
.post:hover { transform: none; }
.post-cover { aspect-ratio: 4 / 3; background: var(--n100); }
.post-body { padding: 12px 0 0; }
.post .tag { order: 2; background: none; padding: 0; margin: 0 0 6px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--n700); }
.post h3 { font-size: 26px; line-height: 1.1; color: var(--ink); }
.post p { display: none; }
.post .date { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--n700); }
.posts-page .post, .posts-3 .post { background: var(--sheet); padding: 12px 12px 16px; box-shadow: var(--shadow); }
.mk-journal { padding: clamp(22px, 3vw, 44px); display: flex; flex-direction: column; gap: 26px; }
.mk-journal-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; }
.mk-journal-head h2 { margin: 8px 0 0; font-size: clamp(34px, 3.8vw, 52px); }
.mk-journal .posts { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(16px, 2vw, 26px); }
.mono-link { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); text-underline-offset: 5px; }

/* Footer poster (every page) */
.mk-footer { padding: 0; border-top: 0; background: var(--sheet); margin-top: clamp(18px, 2.4vw, 32px); box-shadow: 0 -1px 0 var(--n200); }
.mk-footer-inner { max-width: 1360px; margin: 0 auto; padding: clamp(28px, 3.4vw, 52px) clamp(16px, 3vw, 52px); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; color: var(--ink); }
.mk-footer-big { display: flex; flex-direction: column; gap: 4px; font-size: clamp(22px, 3vw, 40px); font-weight: 300; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.15; }
.mk-footer-info { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; font-size: 14px; letter-spacing: 0.04em; }
.mk-footer-info a { color: inherit; }
.mk-footer-info .up { text-transform: uppercase; }
.mk-footer-book { align-self: flex-end; height: 52px; padding: 0 28px; text-transform: uppercase; letter-spacing: 0.14em; font-size: 13px; }
.mk-footer-base { max-width: 1360px; margin: 0 auto; padding: 18px clamp(16px, 3vw, 52px) 28px; border-top: 1px solid var(--n200); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; }
.mk-footer-base .verse { font-size: 1rem; text-align: center; }
.mk-footer-base .verse span { display: inline; margin-left: 6px; }
.mk-footer-base .footer-links { justify-content: flex-start; }

/* Other pages pick up the sheets and type */
.section .wrap > .card, .faq-lines { box-shadow: var(--shadow); }
.faq-lines { background: var(--sheet); padding: 0 20px; }
.page-jump a, .svc-jump a { text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; }
.svc-addon-tag { background: var(--ink); color: var(--sheet); }
.gc-chip input:checked + span, .gc-way input:checked + span { box-shadow: inset 0 0 0 2px var(--ink); }

@media (max-width: 820px) {
  .mk-hero-foot { margin-top: -40px; padding: 0; }
  .mk-blur-photo span { font-size: 11px; }
  .mk-clouds { min-height: 420px; flex-basis: 100% !important; }
  .mk-portrait { min-height: 520px; }
  .mk-footer-base { flex-direction: column; text-align: center; }
  .mk-footer-base .footer-links { justify-content: center; }
}
@media (max-width: 520px) {
  .mk-hero-tape { padding: 16px 18px 12px; }
  .mk-attrs { grid-template-columns: 1fr 1fr; }
}
.card.plan-dark { background: var(--ink); box-shadow: 0 24px 44px -24px rgba(28, 25, 23, 0.7); }

/* ---------- Feel ---------- */
:root { --soft-ease: cubic-bezier(0.22, 0.61, 0.36, 1); }

/* About: the soft-focus portrait comes into focus on hover, keyboard focus or tap */
.mk-portrait { cursor: pointer; }
.mk-portrait:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.mk-portrait > img.sharp {
  inset: 0; width: 100%; height: 100%; object-position: 30% 35%;
  filter: none; opacity: 0; transform: scale(1.04);
  transition: opacity 0.9s var(--soft-ease), transform 1.4s var(--soft-ease);
}
.mk-portrait > img.soft { transition: opacity 0.9s var(--soft-ease); }
.mk-portrait figcaption, .mk-portrait .side, .mk-portrait .avec { transition: opacity 0.6s var(--soft-ease), transform 0.8s var(--soft-ease); }
.mk-portrait-hint {
  position: absolute; top: 18px; right: 18px; z-index: 1; padding: 6px 10px; background: rgba(251, 250, 248, 0.82);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink);
  transition: opacity 0.5s var(--soft-ease);
}
.mk-portrait-hint .h-tap { display: none; }
@media (hover: none) { .mk-portrait-hint .h-hover { display: none; } .mk-portrait-hint .h-tap { display: inline; } }
.mk-portrait.focused > img.sharp,
.mk-portrait:focus-visible > img.sharp { opacity: 1; transform: none; }
.mk-portrait.focused figcaption, .mk-portrait.focused .side, .mk-portrait.focused .avec, .mk-portrait.focused .mk-portrait-hint,
.mk-portrait:focus-visible figcaption, .mk-portrait:focus-visible .side, .mk-portrait:focus-visible .avec, .mk-portrait:focus-visible .mk-portrait-hint { opacity: 0; transform: translateY(6px); }
@media (hover: hover) {
  .mk-portrait:hover > img.sharp { opacity: 1; transform: none; }
  .mk-portrait:hover figcaption, .mk-portrait:hover .side, .mk-portrait:hover .avec, .mk-portrait:hover .mk-portrait-hint { opacity: 0; transform: translateY(6px); }
}
.mk-portrait::after {
  content: 'Hazel · founder'; position: absolute; left: 18px; bottom: 18px; padding: 6px 10px; background: rgba(251, 250, 248, 0.88);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink);
  opacity: 0; transition: opacity 0.6s var(--soft-ease) 0.2s;
}
.mk-portrait.focused::after, .mk-portrait:focus-visible::after { opacity: 1; }
@media (hover: hover) { .mk-portrait:hover::after { opacity: 1; } }

/* Hero: a small circle of sharp focus follows the pointer over the blurred studio */
.mk-blur-photo > img.lens {
  filter: none; opacity: 0;
  -webkit-mask-image: radial-gradient(circle at var(--x, 50%) var(--y, 50%), #000 0, #000 calc(var(--r, 150px) * 0.55), transparent var(--r, 150px));
  mask-image: radial-gradient(circle at var(--x, 50%) var(--y, 50%), #000 0, #000 calc(var(--r, 150px) * 0.55), transparent var(--r, 150px));
  transition: opacity 0.6s var(--soft-ease);
}
.mk-blur-photo.lensing > img.lens { opacity: 1; }
.mk-blur-photo.lensing { cursor: crosshair; }

/* Color clouds drift slowly, like fabric under light */
@keyframes drift-a { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(3%, 4%) scale(1.06); } }
@keyframes drift-b { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-4%, 3%) scale(0.95); } }
.mk-clouds .c-spring { animation: drift-a 16s ease-in-out infinite; }
.mk-clouds .c-summer { animation: drift-b 19s ease-in-out infinite; }
.mk-clouds .c-autumn { animation: drift-b 17s ease-in-out infinite -6s; }
.mk-clouds .c-winter { animation: drift-a 21s ease-in-out infinite -9s; }

/* Label strips lift a little; their photo cut-outs lean in */
.tape { transition: transform 0.5s var(--soft-ease), box-shadow 0.5s var(--soft-ease); }
.mk-guide .tape:hover { transform: translateY(-3px) rotate(-0.25deg); box-shadow: 0 16px 26px -18px rgba(28, 25, 23, 0.55); }
.cut img { transition: transform 0.8s var(--soft-ease); }

/* Course poster: the hovered course stays sharp, the others soften */
.mk-price-grid span { transition: opacity 0.35s var(--soft-ease); }
.mk-price-grid:hover span { opacity: 0.35; }
.mk-price-grid:hover span:hover, .mk-price-grid span.on { opacity: 1; }
.mk-courses-photo img { transition: transform 1.6s var(--soft-ease); }
.mk-courses:hover .mk-courses-photo img { transform: scale(1.03); }

/* Journal covers ease in */
.post-cover img { transition: transform 1.2s var(--soft-ease), filter 0.8s var(--soft-ease); }
.post:hover .post-cover img { transform: scale(1.04); }
.post:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }

/* Buttons: a soft press */
.btn:active { transform: translateY(1px) scale(0.99); }

@media (prefers-reduced-motion: reduce) {
  .mk-clouds i { animation: none !important; }
  .mk-portrait > img.sharp, .mk-blur-photo > img.lens, .tape, .cut img, .post-cover img, .mk-courses-photo img { transition: none; transform: none !important; }
}

/* ---------- Reviews: notes taped to the wall ---------- */
.mk-reviews-head { align-items: flex-end; }
.mk-reviews-title { margin: 8px 0 6px; font-size: clamp(34px, 3.8vw, 52px); }
.review-summary { margin: 0; font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--n700); }
.review-summary-stars { letter-spacing: 2px; color: var(--ink); }
.mk-reviews .reviews-track { padding: 26px 6px 36px; gap: 22px; }
.review {
  position: relative; overflow: visible; cursor: pointer; border-right: 0;
  transform: rotate(var(--tilt, -0.6deg)); transform-origin: 50% 0;
  transition: transform 0.6s var(--soft-ease), box-shadow 0.6s var(--soft-ease);
}
.review:nth-child(3n+2) { --tilt: 0.7deg; }
.review:nth-child(3n) { --tilt: -0.3deg; }
.review::before {
  content: ''; position: absolute; top: -11px; left: 50%; width: 92px; height: 22px; margin-left: -46px;
  background: rgba(233, 231, 229, 0.78); box-shadow: 0 1px 2px rgba(28, 25, 23, 0.12);
  transform: rotate(calc(var(--tilt, -0.6deg) * -3)); pointer-events: none;
}
.review:hover, .review:focus-visible { transform: rotate(0deg) translateY(-6px); box-shadow: 0 26px 40px -26px rgba(28, 25, 23, 0.6); outline: none; }
.review:focus-visible { box-shadow: 0 0 0 2px var(--ink), 0 26px 40px -26px rgba(28, 25, 23, 0.6); }
.review-text { transition: color 0.4s var(--soft-ease); }
.review:hover .review-more { text-decoration-color: var(--ink); }
.reviews-track.dragging .review { transform: rotate(0deg); }

/* Full review popup: browse with arrows */
.review-modal { width: min(640px, calc(100% - 24px)); background: var(--sheet); }
.review-modal-bar { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px 12px 28px; background: var(--sheet); border-bottom: 1px solid var(--n100); }
.review-modal-count { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--n700); }
.review-modal-nav { display: flex; gap: 8px; }
.review-modal-nav .slider-btn { width: 44px; height: 44px; box-shadow: 0 0 0 1px var(--n200); }
.review-modal-body { padding: 26px 32px 30px; max-height: calc(100dvh - 120px); }
.review-modal .book-close { display: none; }
.review-modal blockquote { animation: rise 0.45s var(--soft-ease); }
@media (max-width: 640px) { .review-modal-body { padding: 22px 20px 26px; max-height: calc(92dvh - 70px); } }
@media (prefers-reduced-motion: reduce) { .review, .review:hover { transform: none; transition: none; } .review-modal blockquote { animation: none; } }

/* ---------- Custom cursor (mouse only; added by site.js) ---------- */
/* One of Hazel's drawings sits on the pointer; it changes to the next on each new button or link */
html.has-cursor:not(.cursor-off), html.has-cursor:not(.cursor-off) body, html.has-cursor:not(.cursor-off) body * { cursor: none !important; }
html.has-cursor input, html.has-cursor textarea, html.has-cursor select, html.has-cursor [contenteditable] { cursor: auto !important; }
.cursor, .cursor-dot { position: fixed; left: 0; top: 0; z-index: 2147483000; pointer-events: none; width: 0; height: 0; will-change: transform; }
/* The drawings are white lines; difference blending shows them dark on light areas, light on dark */
.cursor-dot { mix-blend-mode: difference; }
.cursor-icons {
  position: absolute; left: 0; top: 0; width: 32px; height: 32px; margin: -16px 0 0 -16px;
  transition: transform 0.4s var(--soft-ease), opacity 0.25s var(--soft-ease);
}
.cursor-icons img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: rotate(-20deg) scale(0.6); transition: opacity 0.3s var(--soft-ease), transform 0.5s var(--soft-ease); }
.cursor-icons img.on { opacity: 1; transform: none; }
.cursor-dot[data-state="link"] .cursor-icons { transform: scale(1.25); }
.cursor-dot.press .cursor-icons { transform: scale(0.85); }
.cursor-dot[data-state="label"] .cursor-icons, .cursor-dot[data-state="lens"] .cursor-icons,
.cursor-dot[data-state="off"] .cursor-icons, .cursor-dot[data-state="hidden"] .cursor-icons { opacity: 0; }
/* Label circle (Read, Drag, Meet) */
.cursor span {
  position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%;
  background: var(--ink); color: var(--sheet); font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  transform: translate(-50%, -50%) scale(0); opacity: 0;
  transition: transform 0.4s var(--soft-ease), opacity 0.3s var(--soft-ease);
}
.cursor[data-state="label"] span { transform: translate(-50%, -50%) scale(1); opacity: 1; }

/* ---------- Engaging, softly ---------- */

/* Pages fade into each other instead of flashing (browsers that support it) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 0.35s var(--soft-ease) both; }
::view-transition-new(root) { animation: vt-in 0.55s var(--soft-ease) both; }
@keyframes vt-out { to { opacity: 0; filter: blur(4px); } }
@keyframes vt-in { from { opacity: 0; filter: blur(6px); } }

/* Hero headline: each word comes into focus */
.words .word { display: inline-block; animation: word-in 0.8s var(--soft-ease) both; animation-delay: calc(var(--i) * 0.05s); }
/* Starts readable and only sharpens, so the headline is never blank */
@keyframes word-in { from { opacity: 0.35; filter: blur(3px); } to { opacity: 1; filter: none; } }

/* Seasons: pick one to bring its cloud forward */
.season-pick {
  position: absolute; z-index: 1; padding: 6px 10px; margin: -6px -10px; border: 0; border-radius: 999px; background: transparent;
  font: inherit; font-size: 12px; color: var(--ink); white-space: nowrap; cursor: pointer;
  transition: background 0.4s var(--soft-ease), box-shadow 0.4s var(--soft-ease);
}
.season-pick:hover, .season-pick[aria-pressed="true"] { background: rgba(251, 250, 248, 0.92); box-shadow: 0 6px 14px -10px rgba(28, 25, 23, 0.6); }
.season-pick:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.mk-clouds i, .mk-clouds span[data-season] { transition: opacity 0.8s var(--soft-ease), filter 0.8s var(--soft-ease), scale 0.9s var(--soft-ease); }
.mk-clouds[data-focus]:not([data-focus=""]) i { opacity: 0.18; filter: blur(30px); }
.mk-clouds[data-focus]:not([data-focus=""]) span[data-season] { opacity: 0.25; }
.mk-clouds.mk-clouds[data-focus="spring"] [data-season="spring"], .mk-clouds.mk-clouds[data-focus="summer"] [data-season="summer"],
.mk-clouds.mk-clouds[data-focus="autumn"] [data-season="autumn"], .mk-clouds.mk-clouds[data-focus="winter"] [data-season="winter"] { opacity: 1; }
.mk-clouds.mk-clouds[data-focus="spring"] i[data-season="spring"], .mk-clouds.mk-clouds[data-focus="summer"] i[data-season="summer"],
.mk-clouds.mk-clouds[data-focus="autumn"] i[data-season="autumn"], .mk-clouds.mk-clouds[data-focus="winter"] i[data-season="winter"] { filter: blur(14px); scale: 1.18; }

/* Session guide: a dashed thread that draws down the strips as you scroll */
.mk-guide { position: relative; }
.mk-guide::before {
  content: ''; position: absolute; left: 50%; top: 56px; bottom: 56px; width: 0; border-left: 1px dashed var(--n400);
  transform-origin: top; transform: scaleY(var(--thread, 0)); pointer-events: none;
}
.mk-guide > * { position: relative; }

/* Magnetic buttons ease back into place */
.magnetic { transition: transform 0.45s var(--soft-ease), background 0.25s, box-shadow 0.35s var(--soft-ease); }

/* Course photo is revealed with a soft wipe when the poster scrolls into view */
.mk-courses.reveal .mk-courses-photo img { clip-path: inset(0 0 0 100%); transition: clip-path 1.6s var(--soft-ease) 0.2s, transform 1.6s var(--soft-ease); }
.mk-courses.reveal.in .mk-courses-photo img { clip-path: inset(0 0 0 0); }

/* Floating book pill */
.book-float {
  position: fixed; left: 50%; bottom: 22px; z-index: 40; display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border-radius: 999px; background: var(--ink); color: var(--sheet); text-decoration: none;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; box-shadow: 0 18px 32px -16px rgba(28, 25, 23, 0.7);
  opacity: 0; pointer-events: none; transform: translate(-50%, 20px);
  transition: opacity 0.5s var(--soft-ease), transform 0.6s var(--soft-ease);
}
.book-float.on { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.book-float:hover { color: var(--sheet); background: #000; }
.book-float-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sheet); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@media (max-width: 520px) { .book-float { left: 16px; right: 16px; bottom: 14px; justify-content: center; transform: translateY(20px); } .book-float.on { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .words .word, .book-float-dot { animation: none; }
  .mk-courses.reveal .mk-courses-photo img { clip-path: none; }
  .mk-guide::before { transform: none; }
}

/* ---------- Course poster: pick a course, see what's included ---------- */
.mk-courses-top { align-items: center; }
.mk-toggle { margin: 0; background: var(--paper); }
.mk-toggle button { font-size: 12px; letter-spacing: 0.06em; text-transform: none; }
.mk-course-list { display: flex; flex-direction: column; border-top: 1px solid var(--n200); }
.mk-course {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 84px 24px; align-items: baseline; gap: 18px;
  padding: 14px 4px; border: 0; border-bottom: 1px solid var(--n200); background: none; text-align: left; cursor: pointer;
  font: inherit; font-size: clamp(24px, 3vw, 40px); font-weight: 300; letter-spacing: 0.04em; text-transform: uppercase; color: var(--n400);
  transition: color 0.4s var(--soft-ease), padding 0.5s var(--soft-ease);
}
.mk-course .t { font-size: 0.42em; letter-spacing: 0.06em; }
.mk-course .go { font-size: 0.5em; opacity: 0; transform: translateX(-8px); transition: opacity 0.4s var(--soft-ease), transform 0.5s var(--soft-ease); }
.mk-course.on { color: var(--ink); padding-left: 14px; }
.mk-course.on .go { opacity: 1; transform: none; }
.mk-course:hover { color: var(--ink); }
.mk-course:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.mk-course-note { margin: 0; max-width: 460px; font-size: 14px; line-height: 1.6; color: var(--n700) !important; }

/* The photo carries a card for the chosen course */
.mk-courses-photo { min-height: 520px; }
.mk-course-card {
  position: absolute; left: clamp(14px, 2.4vw, 28px); right: clamp(14px, 2.4vw, 28px); bottom: clamp(14px, 2.4vw, 28px);
  max-width: 420px; padding: 22px 24px 20px; background: rgba(251, 250, 248, 0.94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 20px 40px -26px rgba(28, 25, 23, 0.7);
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity 0.5s var(--soft-ease), transform 0.6s var(--soft-ease);
}
.mk-course-card.on { opacity: 1; transform: none; pointer-events: auto; }
.mk-course-card .kick { margin: 0 0 6px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--n700); }
.mk-course-card .desc { margin: 0 0 14px; font-family: var(--serif); font-size: 1.6rem; line-height: 1.1; color: var(--ink); }
.mk-course-card ol { list-style: none; margin: 0 0 16px; padding: 0; border-top: 1px solid var(--n200); }
.mk-course-card li { display: flex; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--n100); font-size: 14px; color: var(--n700); }
.mk-course-card li span { font-family: var(--mono); font-size: 11px; color: var(--n400); padding-top: 2px; }
.mk-course-card .acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.mk-courses-photo > span { display: none; }

@media (max-width: 900px) {
  .mk-courses-photo { min-height: 0; display: grid; }
  .mk-courses-photo > img { position: relative; height: 260px; }
  .mk-course-card { position: relative; left: auto; right: auto; bottom: auto; max-width: none; margin: -60px 14px 14px; grid-area: 2 / 1; display: none; }
  .mk-course-card.on { display: block; }
}
@media (max-width: 520px) {
  .mk-course { grid-template-columns: minmax(0, 1fr) auto 64px 16px; gap: 10px; }
  .mk-courses-top { flex-wrap: wrap; }
}
@media (max-width: 520px) {
  .mk-course { font-size: 21px; padding: 12px 2px; }
  .mk-course.on { padding-left: 8px; }
}

/* ---------- Magazine paper: soft corners and a fine printed-paper grain ---------- */
:root {
  --r-sheet: 16px;     /* main boxes */
  --r-inner: 10px;     /* photos and panels inside boxes */
  --r-tape: 5px;       /* label strips */
  /* Uncoated paper: tiny warm fibers, barely there */
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.36 0 0 0 0 0.31 0 0 0 0 0.27 0 0 0 0.075 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  /* A soft light across the top, like a page under a lamp */
  --paper-sheen: radial-gradient(120% 70% at 18% 0%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 60%);
  --paper-edge: inset 0 0 0 1px rgba(43, 39, 36, 0.05);
}
.card, .sheet, .tape, .review, .mk-course-card, .faq-lines, .book, .review-modal, .gc-form, .mk-footer {
  background-image: var(--paper-sheen), var(--paper-grain);
  background-size: 100% 100%, 220px 220px;
}
.card, .sheet { border-radius: var(--r-sheet); box-shadow: var(--paper-edge), var(--shadow); }
.tape { border-radius: var(--r-tape); box-shadow: var(--paper-edge), var(--tape-shadow); }
.review { border-radius: var(--r-tape); box-shadow: var(--paper-edge), var(--tape-shadow); }
.review:hover, .review:focus-visible { box-shadow: var(--paper-edge), 0 26px 40px -26px rgba(28, 25, 23, 0.6); }
.mk-course-card { border-radius: var(--r-inner); background-color: rgba(251, 250, 248, 0.94); }
.faq-lines { border-radius: var(--r-sheet); }
.book, .review-modal { border-radius: 18px; }
.mk-guide, .mk-reviews { border-radius: var(--r-sheet); background-image: var(--paper-grain); background-size: 220px 220px; }

/* Dark paper keeps its own lighter grain */
.card.plan-dark, .gc-card {
  background-image: radial-gradient(120% 70% at 18% 0%, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 100% 100%, 220px 220px;
}

/* Photos and panels inside the boxes follow the softer corners */
.mk-courses, .mk-clouds, .mk-portrait { overflow: hidden; }
.mk-hero .mk-blur-photo, .mk-courses-photo, .post-cover, .hero-frame, .article-cover img, .prose img, .photo, .photo img { border-radius: var(--r-inner); }
.mk-courses-photo { border-radius: 0 var(--r-sheet) var(--r-sheet) 0; }
.posts-page .post, .posts-3 .post { border-radius: var(--r-sheet); }
.cut { border-radius: 6px; }
.mk-hero { overflow: visible; }         /* the headline strip overlaps the photo edge */
.mk-reviews .reviews-track { border-radius: 0; }
.nav-sheet { background-image: var(--paper-grain); background-size: 220px 220px; }
@media (max-width: 900px) { .mk-courses-photo { border-radius: 0 0 var(--r-sheet) var(--r-sheet); } }

/* ---------- Batch: open times, press, journal, newsletter, gift cards, services, 404, a11y ---------- */

/* Readable grays: meet 4.5:1 on paper */
:root { --n400: #77716b; --n500: #6b655f; }

/* Skip link and screen-reader-only text */
.skip-link { position: fixed; left: 12px; top: -60px; z-index: 200; background: var(--ink); color: var(--sheet); padding: 10px 16px; border-radius: var(--r-tape); font-size: 13px; text-decoration: none; transition: top .2s; }
.skip-link:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Hero: which months are open, and the next few times */
.open-strip { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--n300); }
.open-strip-title { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.dot-live { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 0 rgba(43, 39, 36, .35); animation: live 2.4s ease-out infinite; }
@keyframes live { 70% { box-shadow: 0 0 0 7px rgba(43, 39, 36, 0); } 100% { box-shadow: 0 0 0 0 rgba(43, 39, 36, 0); } }
.open-strip-book { margin: 0; font-size: 14px; }
.open-strip-book a { color: var(--ink); text-underline-offset: 4px; }
.open-strip-next { margin: 10px 0 0; font-family: var(--mono); font-size: 11px; color: var(--n500); }
.open-strip-next a { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .dot-live { animation: none; } }

/* Booking: resume note and the "You're booked" extras */
.book-resume { margin: 0 0 10px; font-size: 13px; color: var(--n600); background: var(--pear-soft); border-radius: var(--r-tape); padding: 8px 12px; }
/* The welcome-back note gets its own line above the ticket, so the ticket keeps its full width */
.book-foot .book-resume { flex: 0 0 100%; box-sizing: border-box; }
.book-done-extras { margin: 18px 0 6px; padding: 16px; border: 1px dashed var(--n300); border-radius: var(--r-inner); text-align: left; }
.book-done-label { margin: 0 0 8px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--n500); }
.book-done-label:not(:first-child) { margin-top: 16px; }
.book-done-links { display: flex; flex-wrap: wrap; gap: 8px; }
.book-done-address { margin: 0 0 10px; font-size: 14px; color: var(--ink); }

/* Journal article: reading progress, contents, pager */
.read-progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: 60; pointer-events: none; }
.read-progress i { display: block; height: 100%; background: var(--ink); transform-origin: left; transform: scaleX(0); }
.article-layout { max-width: 720px; }
.article-layout.has-toc { max-width: 1040px; display: grid; grid-template-columns: 220px minmax(0, 720px); gap: 48px; align-items: start; }
.toc { position: sticky; top: 96px; font-size: 13px; }
.toc details { background: var(--sheet); border-radius: var(--r-inner); box-shadow: var(--tape-shadow); padding: 14px 16px; }
.toc summary { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--n500); cursor: pointer; list-style: none; }
.toc summary::-webkit-details-marker { display: none; }
.toc ol { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 2px; }
.toc a { display: block; padding: 5px 0 5px 10px; border-left: 1px solid var(--n300); color: var(--n600); text-decoration: none; line-height: 1.35; transition: color .2s, border-color .2s; }
.toc .toc-l3 a { padding-left: 22px; font-size: 12px; }
.toc a:hover, .toc a.on { color: var(--ink); border-left-color: var(--ink); }
.article-body :is(h2, h3) { scroll-margin-top: 90px; }
.post-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 48px; }
.post-pager a { display: grid; gap: 4px; padding: 16px 18px; background: var(--sheet); border-radius: var(--r-inner); box-shadow: var(--tape-shadow); text-decoration: none; color: var(--ink); font-family: 'Instrument Serif', serif; font-size: 20px; line-height: 1.2; }
.post-pager a span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--n500); }
.post-pager .next { text-align: right; }
.posts-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
  .article-layout.has-toc { display: block; }
  .toc { position: static; margin-bottom: 28px; }
  .posts-3 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .post-pager { grid-template-columns: 1fr; } .post-pager .next { text-align: left; } }

/* Footer newsletter */
.news-form { display: grid; gap: 10px; max-width: 460px; margin: 0 0 28px; }
.news-form label { display: grid; gap: 4px; }
.news-title { font-family: 'Instrument Serif', serif; font-size: 28px; line-height: 1.1; color: var(--ink); }
.news-sub { font-size: 13px; color: var(--n500); }
.news-row { display: flex; gap: 8px; }
.news-row input[type="email"] { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border: 1px solid var(--n300); border-radius: 999px; background: var(--sheet); font: inherit; font-size: 14px; color: var(--ink); }
.news-row .btn { height: 44px; white-space: nowrap; }
.news-msg { margin: 0; min-height: 1em; font-family: var(--mono); font-size: 11px; color: var(--n600); }
.news-form.done .news-msg { color: var(--ink); }

/* Gift cards: occasions and the printable card */
.gc-occasions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 4px; }
.gc-occ-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--n500); margin-right: 4px; }
.gc-occ { font: 500 12px/1 var(--sans); padding: 9px 12px; border-radius: 999px; border: 1px solid var(--n300); background: var(--sheet); color: var(--ink); cursor: pointer; transition: background .2s, color .2s; }
.gc-occ:hover, .gc-occ[aria-pressed="true"] { background: var(--ink); color: var(--sheet); border-color: var(--ink); }
.gc-number { margin: 10px 0 0; font-family: var(--mono); font-size: 13px; letter-spacing: 0.12em; opacity: .85; }
.gc-print { margin: 18px 0; display: grid; gap: 10px; justify-items: center; }
@media print {
  @page { margin: 18mm; }
  body.gc-printable { background: #fff !important; }
  body.gc-printable * { visibility: hidden; }
  body.gc-printable .gc-card, body.gc-printable .gc-card * { visibility: visible; }
  body.gc-printable .gc-card { position: fixed; left: 50%; top: 30mm; transform: translateX(-50%); width: 150mm; box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Services: sticky section index */
.svc-index { position: sticky; top: 72px; z-index: 30; display: flex; justify-content: center; gap: 4px; width: max-content; max-width: calc(100% - 32px); margin: 0 auto 8px; padding: 5px; background: rgba(251, 250, 248, .86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 999px; box-shadow: var(--tape-shadow); overflow-x: auto; scrollbar-width: none; }
.svc-index a { padding: 8px 14px; border-radius: 999px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none; color: var(--n600); white-space: nowrap; transition: background .2s, color .2s; }
.svc-index a.on { background: var(--ink); color: var(--sheet); }
#services, #addon, #groups, #faq { scroll-margin-top: 130px; }

/* FAQ search */
.faq-search { padding: 18px 0 10px; }
.faq-search input { width: 100%; height: 44px; padding: 0 14px 0 38px; border: 1px solid var(--n300); border-radius: 999px; background: var(--sheet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236b655f' stroke-width='1.6'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m11 11 4 4'/%3E%3C/svg%3E") 14px 50% no-repeat; font: inherit; font-size: 14px; color: var(--ink); }
.faq-none { margin: 12px 0 0; font-size: 14px; }

/* 404 */
.lost { padding: clamp(40px, 8vw, 96px) 0; }
.lost-sheet { max-width: 680px; margin: 0 auto; padding: clamp(28px, 5vw, 56px); text-align: center; }
.lost-sheet h1 { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: clamp(40px, 7vw, 72px); line-height: 1; margin: 6px 0 14px; }
.lost-swatches { display: flex; justify-content: center; margin: 26px 0; }
.lost-swatches i { width: 54px; height: 54px; border-radius: 50%; margin-left: -12px; filter: blur(.5px); box-shadow: 0 0 0 3px var(--sheet); }
.lost-swatches i:nth-child(1) { background: #f1c9a5; margin-left: 0; } .lost-swatches i:nth-child(2) { background: #b9c6dc; }
.lost-swatches i:nth-child(3) { background: #a8754d; } .lost-swatches i:nth-child(4) { background: #3d4a6b; }
.lost-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 26px; text-align: left; }
.lost-links a { display: flex; gap: 10px; align-items: baseline; padding: 14px 16px; border: 1px dashed var(--n300); border-radius: var(--r-inner); text-decoration: none; color: var(--ink); font-size: 15px; transition: background .2s; }
.lost-links a:hover { background: var(--pear-soft); }
.lost-links span { font-family: var(--mono); font-size: 10px; color: var(--n500); }
@media (max-width: 520px) { .lost-links { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
  .svc-index { gap: 0; padding: 4px; }
  .svc-index a { padding: 8px 10px; font-size: 10.5px; letter-spacing: 0.06em; }
}

/* ---------- Phones: courses read top to bottom: pick, see it, book ---------- */
@media (max-width: 640px) {
  .mk-courses { display: flex; flex-direction: column; gap: 18px; padding: 22px 0 0; }
  .mk-courses-text { display: contents; }
  .mk-courses-top { order: 1; margin: 0 18px; }
  .mk-course-list { order: 2; margin: 0 12px; gap: 6px; border-top: 0; }
  .mk-courses-photo { order: 3; }
  .mk-course-note { order: 4; margin: 0 18px !important; font-size: 13px; }
  .mk-courses-foot { order: 5; margin: 0 18px 22px; }

  /* Each course is a selectable row: a dot, the name, then price over length */
  .mk-course, .mk-course.on {
    grid-template-columns: 18px minmax(0, 1fr) auto; grid-template-areas: "dot n p" "dot n t";
    align-items: center; gap: 0 10px; padding: 12px 14px; font-size: 19px;
    border: 1px solid transparent; border-radius: 12px;
    transition: background 0.3s var(--soft-ease), border-color 0.3s, color 0.3s;
  }
  .mk-course::before { content: ''; grid-area: dot; width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--n400); transition: box-shadow 0.3s; }
  .mk-course.on { background: var(--sheet); border-color: var(--n200); box-shadow: var(--tape-shadow); }
  .mk-course.on::before { box-shadow: inset 0 0 0 4px var(--ink); }
  .mk-course .n { grid-area: n; }
  .mk-course .p { grid-area: p; text-align: right; font-variant-numeric: tabular-nums; }
  .mk-course .t { grid-area: t; text-align: right; font-size: 10px; color: var(--n500); }
  .mk-course .go { display: none; }

  /* The chosen course's card sits on a shorter photo right under the list */
  .mk-courses-photo { border-radius: 0; }
  .mk-courses-photo > img { height: 190px; }
  .mk-course-card { margin: -44px 12px 0; padding: 18px 16px; }
  .mk-course-card .desc { font-size: 1.4rem; }
  .mk-course-card .acts .btn { flex: 1 1 auto; text-align: center; min-height: 44px; }

  /* Small links become chips */
  .mk-courses-foot { justify-content: flex-start; gap: 8px; padding-top: 0; border-top: 0; font-size: 11px; }
  .mk-courses-foot a { text-decoration: none; padding: 9px 12px; border: 1px solid var(--n300); border-radius: 999px; background: var(--sheet); }
}
@media (max-width: 640px) {
  .mk-courses-photo { flex: none; }
  .mk-courses-foot { gap: 6px; }
  .mk-courses-foot a { padding: 8px 10px; font-size: 10.5px; }
}
@media (max-width: 640px) { .mk-courses-photo { background: transparent; } }

/* ---------- Session guide: one stop per line, like labels in a gallery ---------- */
.mk-stop {
  width: min(100%, 760px); display: grid; grid-template-columns: 72px 40px minmax(0, 1fr) auto;
  grid-template-areas: "img num text room"; align-items: center; gap: 0 18px; padding: 14px 24px 14px 14px;
}
.mk-guide > .mk-stop:nth-child(odd) { margin-left: 48px; }
.mk-guide > .mk-stop:nth-child(even) { margin-right: 48px; }
.mk-stop .cut { grid-area: img; width: 72px; height: 72px; }
.mk-stop b { grid-area: num; font-family: var(--serif); font-weight: 400; font-size: 46px; line-height: 1; text-align: center; color: var(--ink); }
.mk-stop p { grid-area: text; margin: 0; display: grid; gap: 3px; }
.mk-stop-title { font-family: var(--serif); font-size: 25px; line-height: 1.1; color: var(--ink); }
.mk-stop-desc { font-size: 14px; line-height: 1.45; color: var(--n600); }
.mk-stop-room {
  grid-area: room; justify-self: end; white-space: nowrap; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--n500); padding: 6px 10px; border: 1px dashed var(--n300); border-radius: 999px;
}
.mk-stop:hover .cut img { transform: scale(1.08); }
.mk-stop:hover .mk-stop-room { color: var(--ink); border-color: var(--ink); }
.mk-stop-room { transition: color 0.3s, border-color 0.3s; }
@media (max-width: 640px) {
  .mk-guide { gap: 10px; padding: 28px 14px; }
  .mk-guide > .tape { width: 100% !important; }
  .mk-guide > .mk-stop:nth-child(n) { margin: 0; }
  .mk-stop {
    grid-template-columns: 60px 26px minmax(0, 1fr); grid-template-areas: "img num room" "img num text";
    gap: 4px 12px; padding: 12px 14px 12px 12px;
  }
  .mk-stop .cut { width: 60px; height: 60px; }
  .mk-stop b { font-size: 32px; }
  .mk-stop-room { justify-self: start; padding: 0; border: 0; font-size: 9.5px; }
  .mk-stop-title { font-size: 20px; }
  .mk-stop-desc { font-size: 13px; }
  .mk-guide .tape-title { font-size: 26px; }
}

/* Services index slides up with the menu bar so no gap opens above it */
.svc-index { transition: top 0.45s var(--soft-ease); }
body:has(.nav.tucked) .svc-index { top: 10px; }

/* "You're booked": two guides to read and the newsletter */
.book-reads { display: grid; gap: 8px; }
.book-reads a { display: grid; gap: 3px; padding: 12px 14px; background: var(--sheet); border-radius: var(--r-inner); box-shadow: var(--tape-shadow); text-decoration: none; color: var(--ink); font-family: var(--serif); font-size: 19px; line-height: 1.15; transition: transform 0.3s var(--soft-ease); }
.book-reads a:hover { transform: translateY(-2px); }
.book-reads span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--n500); }
.book-news { margin: 18px 0 0; padding-top: 16px; border-top: 1px dashed var(--n300); max-width: none; }
.book-news .news-title { font-size: 22px; }

/* Seasons: the chosen season's palette in a small paper card */
.season-card {
  position: absolute; left: 50%; top: 50%; z-index: 2; width: min(84%, 340px); transform: translate(-50%, -50%);
  padding: 16px 18px; border-radius: var(--r-inner); background: rgba(251, 250, 248, 0.94);
  box-shadow: var(--tape-shadow); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  animation: season-card-in 0.5s var(--soft-ease) both;
}
.season-card[hidden] { display: none; }
@keyframes season-card-in { from { opacity: 0; transform: translate(-50%, -46%); } }
.season-card-name { margin: 0 0 10px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--n600); }
.season-swatches { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin-bottom: 12px; }
.season-swatches div { aspect-ratio: 1 / 1.6; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(28, 25, 23, 0.08); animation: swatch-in 0.5s var(--soft-ease) both; animation-delay: calc(var(--i) * 0.03s); }
@keyframes swatch-in { from { opacity: 0; transform: translateY(6px); } }
.season-card-line { margin: 0 0 10px; font-family: var(--serif); font-size: 18px; line-height: 1.25; color: var(--ink); }
.season-card .mono-link { font-size: 11px; }
.mk-clouds:not([data-focus=""])[data-focus] .mono { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .season-card, .season-swatches div { animation: none; } }

/* Journal cards: soft-focus covers that sharpen, with the first line of the post as a preview.
   With a mouse they sharpen on hover; on phones, as the card reaches the middle of the screen. */
.post-cover img { filter: blur(5px) saturate(0.9); transform: scale(1.06); }
.post:hover .post-cover img, .post:focus-visible .post-cover img, .post.in-focus .post-cover img { filter: none; transform: scale(1.02); }
.post p {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  margin: 0; max-height: 0; opacity: 0; font-size: 14px; line-height: 1.5; color: var(--n600);
  transition: max-height 0.6s var(--soft-ease), opacity 0.5s var(--soft-ease), margin 0.6s var(--soft-ease);
}
.post:hover p, .post:focus-visible p, .post.in-focus p { max-height: 3.2em; opacity: 1; margin: 6px 0 8px; }
@media (prefers-reduced-motion: reduce) {
  .post-cover img { filter: none; transform: none; }
  .post p { max-height: none; opacity: 1; margin: 6px 0 8px; }
}

/* Booking pop-up: category names and several add-ons */
.book-cat { margin: 14px 0 6px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--n500); }
.book-cat:first-child { margin-top: 0; }
.book-addons { display: grid; gap: 8px; }
/* Services page: category names above each group of courses */
.svc-cat { margin: 36px 0 16px; font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 3vw, 38px); }
.svc-cat:first-child { margin-top: 0; }

/* Homepage welcome card */
.welcome {
  width: min(460px, calc(100% - 32px)); padding: 30px 28px 22px; border: 0; border-radius: var(--r-sheet);
  background-color: var(--sheet); background-image: var(--paper-sheen), var(--paper-grain); background-size: 100% 100%, 220px 220px;
  box-shadow: var(--paper-edge), 0 30px 60px -30px rgba(28, 25, 23, 0.6); color: var(--ink);
}
.welcome[open] { animation: welcome-in 0.6s var(--soft-ease) both; }
.welcome::backdrop { background: rgba(28, 25, 23, 0.28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: welcome-fade 0.5s ease both; }
@keyframes welcome-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } }
@keyframes welcome-fade { from { opacity: 0; } }
.welcome-close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; font-size: 22px; line-height: 1; color: var(--n600); cursor: pointer; }
.welcome-close:hover { background: var(--pear-soft); color: var(--ink); }
.welcome-kick { margin: 0 0 10px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--n500); }
.welcome h2 { margin: 0 0 20px; font-family: var(--serif); font-weight: 400; font-size: 32px; line-height: 1.05; }
.welcome h2 em { display: block; }
.welcome-ways { display: grid; gap: 10px; }
.welcome-way { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--n200); border-radius: var(--r-inner); background: #fff; text-decoration: none; color: var(--ink); transition: border-color 0.25s, transform 0.35s var(--soft-ease), background 0.25s; }
.welcome-way:first-child { background: var(--ink); color: var(--sheet); border-color: var(--ink); }
.welcome-way:hover { transform: translateY(-2px); border-color: var(--ink); }
.welcome-way b { display: block; font-weight: 500; font-size: 15px; }
.welcome-way small { display: block; font-size: 12.5px; opacity: 0.7; margin-top: 2px; }
.welcome-n { font-family: var(--mono); font-size: 11px; opacity: 0.6; }
.welcome-go { font-size: 18px; transition: transform 0.3s var(--soft-ease); }
.welcome-way:hover .welcome-go { transform: translateX(4px); }
.welcome-skip { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 13px; color: var(--n600); cursor: pointer; }
.welcome-skip input { width: 17px; height: 17px; accent-color: var(--ink); }
@media (max-width: 560px) {
  .welcome { margin: auto auto 0; width: 100%; max-width: 100%; border-radius: 22px 22px 0 0; padding: 26px 20px calc(18px + env(safe-area-inset-bottom)); }
  .welcome h2 { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) { .welcome[open], .welcome::backdrop { animation: none; } }

/* ---------- Paper-like loading and pressing ---------- */
/* Placeholders: a soft grained sheet with a slow light passing over it */
.paper-skel {
  display: block; border-radius: 8px; background-color: rgba(43, 39, 36, 0.06);
  background-image: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.55) 50%, transparent 80%), var(--paper-grain);
  background-size: 220% 100%, 220px 220px; background-repeat: no-repeat, repeat;
  animation: paper-shimmer 1.6s ease-in-out infinite;
}
@keyframes paper-shimmer { from { background-position: 120% 0, 0 0; } to { background-position: -120% 0, 0 0; } }
.book-skel { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; padding: 6px 0; }
.book-skel i { aspect-ratio: 1; border-radius: 50%; }
.book-skel i:nth-child(7n + 3), .book-skel i:nth-child(7n + 6) { opacity: 1; }
.book-skel i:not(:nth-child(7n + 3)):not(:nth-child(7n + 6)) { opacity: 0.45; }
/* Photos fade in over the placeholder */
.post-cover, .cut, .mk-courses-photo { background-color: rgba(43, 39, 36, 0.06); }
img.loading { opacity: 0; }
img.loaded { opacity: 1; transition: opacity 0.6s var(--soft-ease); }

/* Pressing: buttons and choices dip slightly, like pressing into paper */
.btn, .open-slot, .gc-occ, .gc-chip span, .book-slot, .book-day, .book-course, .welcome-way, .mk-course, .season-pick, .tape-link, .slider-btn, .f-opts label, .svc-index a, .toggle button {
  transition-property: transform, box-shadow, background, color, border-color, opacity, filter;
}
.btn:active, .open-slot:active, .gc-occ:active, .book-slot:active, .book-day:active, .slider-btn:active, .toggle button:active, .svc-index a:active {
  transform: translateY(1px) scale(0.985); box-shadow: inset 0 2px 5px rgba(28, 25, 23, 0.18);
}
.book-course:active, .welcome-way:active, .mk-course:active, .gc-chip:active span, .f-opts label:active, .season-pick:active {
  transform: translateY(1px) scale(0.995); box-shadow: inset 0 2px 6px rgba(28, 25, 23, 0.12);
}
@media (prefers-reduced-motion: reduce) { .paper-skel { animation: none; } }
.book-grid .book-skel { grid-column: 1 / -1; }

/* ---------- Session steps settle on top of each other, like sheets laid on a desk ---------- */
.mk-guide { overflow: visible; }
.mk-guide > .mk-stop { position: sticky; z-index: 1; transition: box-shadow 0.5s var(--soft-ease); }
.mk-guide > .mk-stop:nth-child(2) { top: 96px; z-index: 2; rotate: -0.35deg; }
.mk-guide > .mk-stop:nth-child(3) { top: 108px; z-index: 3; rotate: 0.4deg; }
.mk-guide > .mk-stop:nth-child(4) { top: 120px; z-index: 4; rotate: -0.25deg; }
.mk-guide > .mk-stop:nth-child(5) { top: 132px; z-index: 5; rotate: 0.3deg; }
.mk-guide > .mk-stop { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 18px 30px -22px rgba(28, 25, 23, 0.55); }
/* The closing sheet slides in over the pile */
.mk-guide > .tape-left { position: relative; z-index: 6; }
/* They start close together, like a short list, and gather into a pile as you scroll */
.mk-guide > .mk-stop { transform-origin: 50% 0; will-change: scale; }
.mk-guide > .mk-stop + .mk-stop { margin-top: 4px; }
.mk-guide > .tape-left { margin-top: 4px; }
@media (max-width: 640px) {
  .mk-guide > .mk-stop:nth-child(2) { top: 76px; }
  .mk-guide > .mk-stop:nth-child(3) { top: 86px; }
  .mk-guide > .mk-stop:nth-child(4) { top: 96px; }
  .mk-guide > .mk-stop:nth-child(5) { top: 106px; }
  .mk-guide > .mk-stop + .mk-stop { margin-top: 2px; }
  .mk-guide > .tape-left { margin-top: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .mk-guide > .mk-stop { position: relative; top: auto !important; rotate: none !important; }
  .mk-guide > .mk-stop + .mk-stop, .mk-guide > .tape-left { margin-top: 0; }
}

/* ---------- Booking ticket: fills in line by line, then gets stamped ---------- */
.book-ticket {
  position: relative; padding: 10px 14px 10px 18px; border-radius: 10px; background: #fff;
  box-shadow: inset 0 0 0 1px var(--n200); background-image: var(--paper-grain); background-size: 220px 220px;
}
/* Perforated left edge, like a tear-off stub */
.book-ticket { border-left: 2px dashed var(--n300); border-radius: 4px 10px 10px 4px; }
.book-ticket .book-total { margin: 0 0 4px; }
.tk-lines { display: flex; flex-wrap: wrap; gap: 2px 18px; margin: 0; padding-top: 5px; border-top: 1px dashed var(--n300); }
.tk-lines div { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.tk-lines dt { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--n500); }
.tk-lines dd { margin: 0; font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-lines dd.empty { color: var(--n400); }
.tk-new { animation: tk-write 0.7s steps(18, end) both; }
@keyframes tk-write { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* The ticket on the "You're booked" screen */
.book-stub {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 52px; margin: 6px 0 10px; text-align: left;
  border-radius: 14px; background: #fff; background-image: var(--paper-grain); background-size: 220px 220px;
  box-shadow: inset 0 0 0 1px var(--n200), 0 18px 34px -24px rgba(28, 25, 23, 0.6);
}
.stub-main { padding: 18px 20px 58px; }
.stub-main p { margin: 0; }
.stub-kick { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--n500); margin-bottom: 8px !important; }
.stub-course { font-family: var(--serif); font-size: 30px; line-height: 1.05; color: var(--ink); }
.book-done .stub-when { margin: 6px 0 4px; font-family: var(--serif); font-size: 20px; color: var(--ink); }
.stub-who { font-size: 14px; color: var(--n600); }
.stub-side { display: grid; place-items: center; border-left: 1.5px dashed var(--n300); }
.stub-ref { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; color: var(--ink); }
.stub-stamp {
  position: absolute; right: 66px; bottom: 10px; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%;
  border: 3px solid rgba(43, 39, 36, 0.72); box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 5px rgba(43, 39, 36, 0.5);
  font-family: var(--mono); color: rgba(43, 39, 36, 0.8); text-align: center; line-height: 1.2; rotate: -14deg; opacity: 0;
  mix-blend-mode: multiply; pointer-events: none;
}
.stub-stamp span { font-size: 9.5px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 500; }
.stub-stamp small { display: block; font-size: 9px; letter-spacing: 0.08em; }
.stub-stamp.in { animation: stamp-down 0.5s cubic-bezier(.2, 1.6, .4, 1) 0.45s both; }
@keyframes stamp-down { from { opacity: 0; transform: scale(1.8); } 60% { opacity: 1; } to { opacity: 1; transform: scale(1); } }
.stub-save { display: block; margin: 0 auto 18px; font-size: 13px; }
@media (max-width: 520px) {
  .stub-course { font-size: 26px; }
  .stub-stamp { width: 68px; height: 68px; right: 60px; bottom: 8px; }
  .stub-stamp span { font-size: 8.5px; }
  .tk-lines { gap: 0 14px; }
}
@media (prefers-reduced-motion: reduce) { .tk-new, .stub-stamp.in { animation: none; opacity: 1; } }

/* ---------- Journal page ---------- */
.jr-head { padding-bottom: 0; }
.jr-intro { padding: clamp(22px, 3vw, 40px); border-radius: var(--r-sheet); }
.jr-intro .mk-poster-row { padding: 0 0 18px; font-size: clamp(12px, 1.3vw, 16px); }
.jr-intro-main { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: end; }
.jr-intro h1 { margin: 0 0 12px; font-family: var(--serif); font-weight: 400; font-size: clamp(48px, 7vw, 96px); line-height: 0.95; color: var(--ink); }
.jr-intro .lede { margin: 0; max-width: 480px; }
.jr-news { margin: 0; max-width: none; padding: 18px; border-radius: var(--r-inner); background: var(--pear-soft); }
.jr-news .news-title { font-size: 24px; }
.jr-feature { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); margin-bottom: 22px; border-radius: var(--r-sheet); overflow: hidden; text-decoration: none; color: var(--ink); }
.jr-feature-img { position: relative; min-height: 340px; overflow: hidden; background: rgba(43, 39, 36, 0.06); }
.jr-feature-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(4px) saturate(0.92); transform: scale(1.05); transition: filter 0.8s var(--soft-ease), transform 1.2s var(--soft-ease); }
.jr-feature:hover .jr-feature-img img, .jr-feature:focus-visible .jr-feature-img img { filter: none; transform: scale(1.02); }
.jr-feature-body { display: flex; flex-direction: column; gap: 12px; padding: clamp(22px, 3vw, 40px); }
.jr-kick, .jr-meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--n500); }
.jr-feature-title { font-family: var(--serif); font-size: clamp(30px, 3.4vw, 44px); line-height: 1.02; }
.jr-feature-excerpt { font-size: 15px; line-height: 1.6; color: var(--n700); }
.jr-read { margin-top: auto; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 5px; }
.jr-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.jr-chip { padding: 9px 16px; border: 1px solid var(--n300); border-radius: 999px; background: transparent; font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.jr-chip:hover { border-color: var(--ink); }
.jr-chip[aria-pressed="true"] { background: var(--ink); color: var(--sheet); border-color: var(--ink); }
.jr-feature[hidden], .posts-page .post[hidden] { display: none; }
.final h2 em { font-style: italic; }
@media (max-width: 820px) {
  .jr-intro-main, .jr-feature { grid-template-columns: 1fr; }
  .jr-feature-img { min-height: 220px; }
}

/* ---------- Visit page ---------- */
.vs .wrap { display: grid; gap: 18px; }
.vs-hero { padding: clamp(22px, 3vw, 40px); border-radius: var(--r-sheet); }
.vs-hero .mk-poster-row { padding: 0 0 18px; font-size: clamp(12px, 1.3vw, 16px); }
.vs-hero-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(20px, 4vw, 56px); align-items: center; }
.vs-hero h1 { margin: 0 0 12px; font-family: var(--serif); font-weight: 400; font-size: clamp(52px, 7.5vw, 104px); line-height: 0.95; color: var(--ink); }
.vs-hero .lede { margin: 0 0 22px; max-width: 420px; }
.vs-address { margin: 0 0 22px; padding-left: 14px; border-left: 2px solid var(--ink); font-style: normal; font-size: 17px; line-height: 1.5; color: var(--ink); }
.vs-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.vs-photo { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: var(--r-inner); overflow: hidden; }
.vs-photo img { width: 100%; height: 100%; object-fit: cover; }
.vs-photo figcaption { position: absolute; left: 14px; bottom: 14px; padding: 8px 14px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.vs-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.vs-map { padding: 0; overflow: hidden; border-radius: var(--r-sheet); min-height: 380px; }
.vs-map iframe { display: block; width: 100%; height: 100%; min-height: 380px; border: 0; filter: grayscale(0.7) contrast(0.95) brightness(1.03); }
html[data-theme="evening"] .vs-map iframe { filter: grayscale(0.7) invert(0.9) hue-rotate(180deg) brightness(0.9); }
.vs-before, .vs-contact { padding: clamp(22px, 3vw, 36px); border-radius: var(--r-sheet); }
.vs-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; }
.vs-list li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 12px 0; border-top: 1px solid var(--n200); }
.vs-list li > span { font-family: var(--mono); font-size: 11px; color: var(--n500); padding-top: 3px; }
.vs-list b { display: block; font-weight: 500; font-size: 15px; color: var(--ink); margin-bottom: 2px; }
.vs-list p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--n700); }
.vs-links { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.vs-links li { display: grid; gap: 4px; padding: 14px 16px 4px 0; border-top: 1px solid var(--n200); }
.vs-links span { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--n500); }
.vs-links a { color: var(--ink); font-size: 15px; text-underline-offset: 4px; overflow-wrap: anywhere; }
@media (max-width: 820px) {
  .vs-hero-main, .vs-grid { grid-template-columns: 1fr; }
  .vs-links { grid-template-columns: 1fr 1fr; }
  .vs-map, .vs-map iframe { min-height: 300px; }
}
@media (max-width: 480px) { .vs-links { grid-template-columns: 1fr; } }

/* ---------- Hero: headline on the softly blurred studio, with an appointment card ---------- */
.hero-d { position: relative; overflow: hidden !important; padding: 0 !important; min-height: clamp(560px, 70vh, 720px); display: flex; }
.hd-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(14px) saturate(0.85); transform: scale(1.08); }
.hero-d::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, rgba(251, 250, 248, 0.62) 0%, rgba(251, 250, 248, 0.35) 55%, rgba(251, 250, 248, 0.25) 100%); }
.hd-inner { position: relative; z-index: 2; flex: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(28px, 5vw, 64px); align-items: center; padding: clamp(28px, 5vw, 64px); }
.hd-kick { margin: 0 0 14px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--n700); }
.hd-title { margin: 0 0 18px; font-family: var(--serif); font-weight: 400; font-size: clamp(52px, 7.4vw, 104px); line-height: 0.86; color: var(--ink); }
.hd-lede { margin: 0 0 20px; max-width: 440px; font-size: 16px; line-height: 1.45; color: var(--n700); }
.hd-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.hd-facts span { padding: 7px 12px; border-radius: 999px; background: rgba(251, 250, 248, 0.7); font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--ink); }
.hd-card {
  display: flex; flex-direction: column; gap: 16px; padding: 28px 30px; border-radius: 14px; border-left: 2px dashed var(--n300);
  background-color: var(--sheet); background-image: var(--paper-sheen), var(--paper-grain); background-size: 100% 100%, 220px 220px;
  box-shadow: 0 30px 50px -30px rgba(28, 25, 23, 0.7); rotate: 1.2deg; transition: rotate 0.6s var(--soft-ease), transform 0.6s var(--soft-ease);
}
.hd-card:hover { rotate: 0deg; transform: translateY(-3px); }
.hd-card-top { display: flex; justify-content: space-between; margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--n500); }
.hd-card-top [lang="ko"] { font-family: 'Hahmlet', serif; font-weight: 200; font-size: 15px; letter-spacing: 0; text-transform: none; }
/* The live strip, written large on the card */
.hd-card .open-strip { margin: 0; padding: 0; border: 0; }
.hd-card .open-strip-title { display: block; margin: 0 0 12px; font-family: var(--serif); font-size: clamp(28px, 2.6vw, 36px); line-height: 1.02; letter-spacing: 0; text-transform: none; color: var(--ink); }
.hd-card .open-strip-title .dot-live { display: inline-block; width: 9px; height: 9px; margin: 0 10px 6px 0; vertical-align: middle; }
.hd-card .open-strip-book { display: none; }
.hd-card .open-strip-next { margin: 0; padding-top: 12px; border-top: 1px dashed var(--n300); font-size: 12px; line-height: 1.6; }
.hd-book { justify-content: center; text-align: center; }
@media (max-width: 820px) {
  .hero-d { min-height: 0; }
  .hd-inner { grid-template-columns: 1fr; gap: 24px; padding: 30px 20px 24px; }
  .hd-title { font-size: clamp(46px, 13vw, 64px); }
  .hd-card { rotate: 0.6deg; padding: 22px 20px; }
}
html[data-theme="evening"] .hero-d::before { background: linear-gradient(100deg, rgba(22, 20, 18, 0.78) 0%, rgba(22, 20, 18, 0.6) 55%, rgba(22, 20, 18, 0.5) 100%); }
html[data-theme="evening"] .hd-facts span { background: rgba(33, 30, 27, 0.75); }

/* ---------- Homepage journal: the newest note large, the next three as rows ---------- */
.mk-journal-sub { margin: 0; max-width: 340px; font-size: 14px; line-height: 1.6; color: var(--n700); }
.hj { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 40px); align-items: stretch; }
.hj-feature { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); }
.hj-feature-img { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: var(--r-inner); overflow: hidden; background: rgba(43, 39, 36, 0.06); }
.hj-feature-img img, .hj-row-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(4px) saturate(0.92); transform: scale(1.05); transition: filter 0.8s var(--soft-ease), transform 1.2s var(--soft-ease); }
.hj-feature:hover img, .hj-feature:focus-visible img, .hj-row:hover img, .hj-row:focus-visible img, .hj-feature.in-focus img, .hj-row.in-focus img { filter: none; transform: scale(1.02); }
.hj-feature-body { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; }
.hj-kick, .hj-meta { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--n500); }
.hj-feature-title { font-family: var(--serif); font-size: clamp(28px, 3vw, 40px); line-height: 1.04; }
.hj-feature:hover .hj-feature-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.hj-excerpt { font-size: 15px; line-height: 1.6; color: var(--n700); }
.hj-list { display: flex; flex-direction: column; }
.hj-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 0; border-top: 1px solid var(--n200); text-decoration: none; color: var(--ink); }
.hj-row:first-child { border-top: 0; padding-top: 0; }
.hj-row-img { position: relative; display: block; width: 96px; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: rgba(43, 39, 36, 0.06); }
.hj-row-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hj-row-title { font-family: var(--serif); font-size: 22px; line-height: 1.1; }
.hj-go { font-size: 18px; color: var(--n500); transition: transform 0.3s var(--soft-ease), color 0.3s; }
.hj-row:hover .hj-go { transform: translateX(4px); color: var(--ink); }
.hj-all { margin-top: auto; align-self: flex-start; padding: 12px 0 0; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); text-underline-offset: 5px; }
@media (max-width: 820px) {
  .hj { grid-template-columns: 1fr; }
  .hj-row { grid-template-columns: 76px minmax(0, 1fr) auto; }
  .hj-row-img { width: 76px; }
  .hj-row:first-child { border-top: 1px solid var(--n200); padding-top: 16px; }
  .hj-row-title { font-size: 20px; }
}

/* ---------- Footer: a closing line, four columns, the verse and a soft wordmark ---------- */
.ft { position: relative; overflow: hidden; padding: 0 clamp(16px, 3vw, 52px); }
.ft > * { max-width: 1360px; margin-left: auto; margin-right: auto; position: relative; z-index: 1; }
.ft-close { display: grid; justify-items: center; gap: 14px; padding: clamp(48px, 7vw, 96px) 0 clamp(40px, 5vw, 64px); text-align: center; border-bottom: 1px dashed var(--n300); }
.ft-kick { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--n500); }
.ft-kick [lang="ko"] { font-family: 'Hahmlet', serif; font-weight: 200; font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--ink); }
.ft-line { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 6vw, 84px); line-height: 0.98; color: var(--ink); }
.ft-close-acts { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 22px; margin-top: 10px; }
.ft-book { height: 52px; padding: 0 28px; }
.ft-ghost { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); text-underline-offset: 5px; }
.ft-grid { display: grid; grid-template-columns: 1.1fr 0.8fr 0.9fr 1.3fr; gap: clamp(24px, 4vw, 56px); padding: clamp(36px, 4vw, 56px) 0; }
.ft-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ft-label { display: block; margin: 0 0 6px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--n500); }
.ft-col a { color: var(--ink); text-decoration: none; font-size: 15px; width: fit-content; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.35s var(--soft-ease); }
.ft-col a:hover, .ft-col a:focus-visible { background-size: 100% 1px; }
.ft-logo { align-self: flex-start; height: 34px; width: auto; max-width: 150px; object-fit: contain; margin-bottom: 14px; }
.ft-studio address { font-style: normal; font-size: 15px; line-height: 1.55; color: var(--ink); }
.ft-note { margin: 0; font-size: 13px; color: var(--n500); }
.ft-news { margin: 0; max-width: none; }
.ft-news .news-sub { display: block; margin-bottom: 4px; font-size: 13.5px; line-height: 1.5; color: var(--n700); }
.ft-base { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px 24px; padding: 18px 0 22px; border-top: 1px solid var(--n200); }
.ft-verse { margin: 0; font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--ink); }
.ft-verse span { margin-left: 6px; font-family: var(--sans); font-style: normal; font-size: 12px; color: var(--n500); }
.ft-copy { margin: 0; font-size: 12px; color: var(--n500); text-align: center; }
.ft-top { justify-self: end; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--n300); border-radius: 999px; background: transparent; font: inherit; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); cursor: pointer; transition: background 0.2s, border-color 0.2s; }
.ft-top:hover { border-color: var(--ink); background: rgba(43, 39, 36, 0.04); }
.ft-top span { transition: transform 0.3s var(--soft-ease); }
.ft-top:hover span { transform: translateY(-3px); }
/* A huge, faint wordmark sitting on the bottom edge, like a magazine's back cover */
.ft-mark { z-index: 0 !important; margin: -0.18em auto -0.22em !important; font-family: var(--serif); font-size: clamp(120px, 26vw, 380px); line-height: 0.8; letter-spacing: 0.04em; text-align: center; color: var(--ink); opacity: 0.06; user-select: none; pointer-events: none; }
@media (max-width: 960px) { .ft-grid { grid-template-columns: 1fr 1fr; } .ft-news { grid-column: 1 / -1; } }
@media (max-width: 640px) {
  .ft-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .ft-studio { grid-column: 1 / -1; }
  .ft-base { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .ft-top { justify-self: center; }
}
html[data-theme="evening"] .ft-mark { opacity: 0.08; }

/* ---------- Trial (calm-try): centered logo, split menu, quieter small type ---------- */
.nav-links-right { display: flex; gap: 28px; }
.nav-links-right a { position: relative; padding: 6px 0; text-decoration: none; color: var(--ink); }
.nav-links a, .nav-links-right a { font-size: 13.5px; letter-spacing: 0.01em; text-transform: none; }
.nav-inner .btn { font-size: 13px; letter-spacing: 0.01em; text-transform: none; }
.nav-right { display: flex; align-items: center; gap: 22px; }
@media (min-width: 821px) {
  .nav-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 24px; }
  .nav-inner > .logo { grid-column: 2; grid-row: 1; }
  .nav-inner > .nav-links { grid-column: 1; grid-row: 1; justify-self: start; }
  .nav-right { grid-column: 3; grid-row: 1; justify-self: end; }
}
@media (max-width: 820px) {
  .nav-links-right { display: none; }
  .nav-right { margin-left: auto; gap: 12px; }
}

/* Small labels: plain sentence case instead of spaced-out capitals */
.eyebrow, .mk-poster-row, .mk-poster-row span, .hd-kick, .hd-card-top, .hd-facts span, .ft-label, .ft-kick, .ft-ghost, .ft-top,
.hj-kick, .hj-meta, .hj-all, .jr-kick, .jr-meta, .jr-read, .stub-kick, .tape-kicker, .tape-link, .mono-link, .svc-index a,
.mk-stop-room, .open-strip-next, .kicker, .post .tag, .post .date, .tk-lines dt, .book-done-label, .f-kick, .f-hello,
.vs-links span, .welcome-kick, .season-card-name, .mk-courses-foot, .mk-courses-foot a, .gc-occ-label, .news-sub, .read-more, .slider-count {
  text-transform: none !important; letter-spacing: 0.01em !important;
}
.eyebrow, .hd-kick, .hd-card-top, .ft-label, .ft-kick, .hj-kick, .hj-meta, .jr-kick, .jr-meta, .stub-kick, .tape-kicker,
.mk-stop-room, .open-strip-next, .post .date, .tk-lines dt, .book-done-label, .vs-links span, .welcome-kick, .season-card-name, .gc-occ-label {
  font-family: var(--sans) !important; font-size: 12.5px !important; color: var(--n600);
}
.mk-poster-row { font-weight: 300; }
.tape-link, .ft-ghost, .hj-all, .jr-read, .mono-link { font-family: var(--sans); font-size: 13.5px !important; }
.mk-course { text-transform: none !important; letter-spacing: 0.01em !important; }
.mk-stop-room { padding: 5px 11px; }
.hd-facts span { font-family: var(--sans) !important; font-size: 12.5px !important; }

/* ---------- Calm pages (Journal, Visit): plain paper, big photos, small type, lots of room ---------- */
body:has(.av) { background-color: var(--sheet); background-image: none; }
.av { max-width: 1360px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 40px) clamp(80px, 10vw, 140px); color: var(--ink); }
.av a { color: var(--ink); }
.av-small, .av-title { margin: 0; font-family: var(--sans); font-weight: 400; font-size: 13px; letter-spacing: 0.01em; }
.av-serif { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 4.4vw, 56px); line-height: 1; }
.av-link, .av-link-btn { display: inline-flex; gap: 6px; padding: 0 0 3px; border: 0; border-bottom: 1px solid currentColor; background: none; font: inherit; font-size: 13px; color: var(--ink); text-decoration: none; cursor: pointer; }

/* Journal: a quiet lookbook */
.av-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 24px; padding: clamp(56px, 8vw, 110px) 0 22px; }
.av-filters { display: flex; flex-wrap: wrap; gap: 20px; }
.av-chip { padding: 0 0 3px; border: 0; border-bottom: 1px solid transparent; background: none; font: inherit; font-size: 13px; color: var(--n500); cursor: pointer; transition: color 0.2s, border-color 0.2s; }
.av-chip:hover { color: var(--ink); }
.av-chip[aria-pressed="true"] { color: var(--ink); border-color: var(--ink); }
.av-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px) clamp(12px, 1.4vw, 18px); }
.av-post { display: flex; flex-direction: column; gap: 10px; text-decoration: none; }
.av-post[hidden] { display: none; }
.av-post-img { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: rgba(43, 39, 36, 0.05); }
.av-post-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--soft-ease), opacity 0.6s; }
.av-post:hover .av-post-img img { transform: scale(1.03); }
.av-post-title { font-size: 13.5px; line-height: 1.4; }
.av-post-meta { margin-top: -6px; font-size: 12px; color: var(--n500); }
.av-none { margin: 24px 0 0; font-size: 13px; color: var(--n500); }
.av-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; margin-top: clamp(80px, 10vw, 140px); padding-top: 22px; border-top: 1px solid var(--n200); }
.av-news { max-width: 420px; margin: 0; gap: 8px; }
.av-news-label { font-size: 13px; color: var(--n600); }
.av-news .news-row { align-items: center; gap: 16px; }
.av-news .news-row input[type="email"] { height: 40px; padding: 0; border: 0; border-bottom: 1px solid var(--n300); border-radius: 0; background: transparent; font-size: 14px; }
.av-news .news-row input[type="email"]:focus { outline: none; border-bottom-color: var(--ink); }

/* Visit: words and a portrait of the room side by side, then preparation, the map, and a quiet close */
.vz-kick { margin: 0 0 14px; font-size: 12.5px; color: var(--n500); }
.vz-open { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 6vw, 110px); align-items: center; padding-top: clamp(40px, 6vw, 88px); }
.vz-text { max-width: 520px; }
.vz-title { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(56px, 7.6vw, 112px); line-height: 0.9; letter-spacing: -0.01em; }
.vz-lede { margin: 26px 0 0; max-width: 440px; font-family: var(--serif); font-size: clamp(19px, 1.7vw, 23px); line-height: 1.38; color: var(--n700); }
.vz-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 32px; margin: 34px 0 0; padding-top: 18px; border-top: 1px solid var(--n200); }
.vz-facts dt { margin-bottom: 6px; font-size: 12px; color: var(--n500); }
.vz-facts dd { margin: 0; font-size: 14px; line-height: 1.65; }
.vz-facts address { font-style: normal; }
.vz-facts dd > a:not(.av-link) { text-decoration: none; border-bottom: 1px solid var(--n300); }
.vz-facts dd > a:not(.av-link):hover { border-color: var(--ink); }
.vz-facts .av-link { margin-top: 8px; }
.av .vz-actions .btn-pear { gap: 8px; color: var(--sheet); }
.vz-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 30px; }
.vz-photo { margin: 0; justify-self: end; width: 100%; max-width: 460px; }
.vz-photo img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 42% 50%; border-radius: 2px; }
.vz-photo figcaption { margin-top: 10px; font-size: 12px; color: var(--n500); }

.vz-h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 4.6vw, 64px); line-height: 0.95; }
.vz-before { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: 28px clamp(32px, 6vw, 110px); margin-top: clamp(100px, 12vw, 170px); }
.vz-before .vz-head { position: sticky; top: 110px; align-self: start; }
.vz-list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--n200); }
.vz-list li { display: grid; grid-template-columns: 64px minmax(0, 0.9fr) minmax(0, 1.4fr); gap: 6px 24px; align-items: baseline; padding: 22px 0; border-top: 1px solid var(--n200); }
.vz-num { font-family: var(--serif); font-size: 26px; line-height: 1; color: var(--n500); }
.vz-list b { font-weight: 400; font-family: var(--serif); font-size: 21px; line-height: 1.2; }
.vz-list p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--n700); }

.vz-find { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.8fr); gap: 28px clamp(32px, 5vw, 80px); align-items: end; margin-top: clamp(100px, 12vw, 170px); }
.vz-map iframe { display: block; width: 100%; height: clamp(320px, 38vw, 480px); border: 0; filter: grayscale(1) contrast(0.92) brightness(1.04); }
html[data-theme="evening"] .vz-map iframe { filter: grayscale(1) invert(0.9) brightness(0.9); }
.vz-facts-col { grid-template-columns: 1fr; margin-top: 28px; }

.vz-end { display: flex; flex-direction: column; align-items: center; gap: 22px; margin-top: clamp(100px, 12vw, 170px); text-align: center; }
.vz-end-line { margin: 0; font-family: var(--serif); font-size: clamp(34px, 4vw, 54px); line-height: 1; }

@media (max-width: 820px) {
  .vz-open, .vz-before, .vz-find { grid-template-columns: 1fr; }
  .vz-photo { justify-self: stretch; max-width: none; order: -1; }
  .vz-photo img { aspect-ratio: 5 / 4; }
  .vz-before .vz-head { position: static; }
  .vz-list li { grid-template-columns: 44px minmax(0, 1fr); }
  .vz-list li p { grid-column: 2; }
  .vz-num { font-size: 20px; }
  .vz-list b { font-size: 19px; }
  .vz-side { order: -1; }
  .vz-open .vz-facts { grid-template-columns: 1.5fr 1fr; gap: 20px; }
}

@media (max-width: 900px) { .av-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .av-foot { flex-direction: column; align-items: flex-start; }
}
.av .av-chip, .av .av-chip[aria-pressed="true"] { padding: 0 0 3px; border: 0; border-bottom: 1px solid transparent; border-radius: 0; background: none; }
.av .av-chip[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ink); }
/* Services section bar: a little breathing room below the menu bar */
.svc-index { top: 88px; }

/* ---------- Footer, quiet: small text in columns, details to the right ---------- */
.fa { padding: clamp(44px, 6vw, 72px) clamp(16px, 3vw, 40px) 26px; margin-top: clamp(60px, 8vw, 110px); box-shadow: none; border-top: 1px solid var(--n200); background-image: none !important; background-color: var(--sheet); }
.fa > * { max-width: 1360px; margin-left: auto; margin-right: auto; }
.fa-grid { display: grid; grid-template-columns: 1fr 1fr 1.3fr 1.2fr; gap: 32px; font-size: 12.5px; line-height: 1.9; }
.fa-col { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; color: var(--ink); }
.fa-col a { color: var(--ink); text-decoration: none; }
.fa-col a:hover { text-decoration: underline; text-underline-offset: 4px; }
.fa-info { align-items: flex-end; text-align: right; color: var(--n600); }
.fa-info address { font-style: normal; }
.fa-name { color: var(--ink); }
.fa-news { margin: 14px 0 0; max-width: 300px; width: 100%; gap: 2px; }
.fa-news label { font-size: 12.5px; color: var(--n600); }
.fa-news .news-row { align-items: center; gap: 14px; }
.fa-news .news-row input[type="email"] { height: 34px; padding: 0; border: 0; border-bottom: 1px solid var(--n300); border-radius: 0; background: transparent; font-size: 12.5px; color: var(--ink); }
.fa-news .news-row input[type="email"]:focus { outline: none; border-bottom-color: var(--ink); }
.fa-news .news-msg { font-family: var(--sans); font-size: 12px; }
.fa-btn { padding: 0; border: 0; background: none; font: inherit; font-size: 12.5px; color: var(--ink); cursor: pointer; }
.fa-btn:hover { text-decoration: underline; text-underline-offset: 4px; }
.fa-base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; margin-top: clamp(44px, 6vw, 72px); font-size: 12px; color: var(--n500); }
.fa-base p { margin: 0; }
.fa-verse { font-style: italic; }
@media (max-width: 820px) {
  .fa-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .fa-info { grid-column: 1 / -1; align-items: flex-start; text-align: left; }
}
@media (max-width: 520px) { .fa-base { flex-direction: column; align-items: flex-start; } }

/* ---------- "Notes on color": a small monthly letter on the homepage, between the prices and the reviews ---------- */
.nl { padding: clamp(80px, 10vw, 140px) clamp(16px, 3vw, 40px); }
.nl-inner { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
.nl-kick { display: flex; gap: 10px; margin: 0 0 18px; font-size: 12px; color: var(--n500); }
.nl-title { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 5.4vw, 68px); line-height: 0.95; letter-spacing: -0.01em; color: var(--ink); }
.nl-sub { margin: 18px 0 0; max-width: 400px; font-family: var(--serif); font-size: clamp(18px, 1.6vw, 21px); line-height: 1.35; color: var(--n600); }
.nl-form { width: 100%; max-width: 420px; margin: 34px 0 0; gap: 10px; }
.nl-form .news-row { align-items: center; gap: 18px; padding-bottom: 2px; border-bottom: 1px solid var(--ink); }
.nl-form .news-row input[type="email"] { flex: 1; height: 44px; padding: 0; border: 0; border-radius: 0; background: transparent; font-size: 15px; color: var(--ink); }
.nl-form .news-row input[type="email"]:focus { outline: none; }
.nl-form .news-row:focus-within { border-bottom-width: 2px; padding-bottom: 1px; }
.nl-btn { display: inline-flex; gap: 8px; padding: 0; border: 0; background: none; font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; white-space: nowrap; }
.nl-btn span { transition: transform 0.3s var(--soft-ease); }
.nl-btn:hover span { transform: translateX(4px); }
.nl-form .news-msg { font-family: var(--sans); font-size: 12.5px; }
html[data-theme="evening"] .nl-form .news-row input[type="email"] { background: transparent; }

/* ---------- Footer, second pass: quiet labels, one closing line, the name set large at the bottom ---------- */
.fa-grid { grid-template-columns: 1fr 1fr 1fr 1.3fr; gap: 32px clamp(24px, 4vw, 56px); }
.fa-label { margin: 0 0 10px; font-size: 11.5px; color: var(--n500); }
.fa-col address { font-style: normal; color: var(--ink); }
.fa-muted { color: var(--n600); }
.fa-studio a { margin-top: 6px; }
.fa-cta { align-items: flex-end; text-align: right; }
.fa-line { margin: 0 0 18px; max-width: 300px; font-family: var(--serif); font-size: clamp(24px, 2.4vw, 32px); line-height: 1.1; color: var(--ink); }
.fa-col a.fa-book { display: inline-flex; gap: 8px; padding-bottom: 3px; border-bottom: 1px solid var(--ink); font-size: 13px; }
.fa-col a.fa-book:hover { text-decoration: none; }
.fa-book span { transition: transform 0.3s var(--soft-ease); }
.fa-book:hover span { transform: translateX(4px); }
.fa-mark { position: relative; margin: clamp(56px, 8vw, 110px) auto 0; padding-bottom: 0.2em; border-bottom: 1px solid var(--n200); font-family: var(--serif); font-size: clamp(64px, 23.4vw, 342px); line-height: 0.8; letter-spacing: -0.03em; white-space: nowrap; color: var(--ink); }
.fa-mark em { font-style: italic; }
.fa-ko { position: absolute; right: 0; bottom: 100%; margin-bottom: 14px; line-height: 1; font-family: Hahmlet, var(--serif); font-weight: 200; font-size: 22px; letter-spacing: 0; color: var(--n500); }
.fa-base { margin-top: 22px; }
@media (max-width: 820px) {
  .fa-grid { grid-template-columns: 1fr 1fr; }
  .fa-cta { grid-column: 1 / -1; order: -1; align-items: flex-start; text-align: left; padding-bottom: 8px; }
  .fa-mark { font-size: 23vw; }
  .fa-ko { font-size: 16px; }
}

/* ---------- Ecclesiastes 3:11, a small line drifting across the very top of every page ---------- */
.verse-strip { overflow: hidden; background: transparent; }
.verse-track { display: flex; width: max-content; animation: verse-drift 90s linear infinite; }
.verse-strip:hover .verse-track { animation-play-state: paused; }
.verse-group { display: flex; align-items: baseline; flex-shrink: 0; }
.verse-item { padding: 7px 10px; font-family: var(--serif); font-size: 13.5px; line-height: 1; white-space: nowrap; color: var(--n600); }
.verse-item em { font-style: italic; }
.verse-ref { font-size: 10px; letter-spacing: 0.04em; white-space: nowrap; color: var(--n500); }
.verse-dot { padding: 0 clamp(18px, 2.4vw, 32px); font-size: 12px; color: var(--n500); }
@keyframes verse-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .verse-track { animation: none; } }
/* The letter closes the homepage, so the verse strip below supplies the space */
main > .nl:last-child { padding-bottom: 0; }

/* Booking steps on narrow phones: only the current step is named, the others are small dots,
   so the close button always stays on screen */
@media (max-width: 420px) {
  .book-steps { gap: 6px; min-width: 0; }
  .book-steps li { gap: 6px; }
  .book-steps li + li::before { width: 10px; }
  .book-steps li:not(.now) { font-size: 0; }
  .book-steps li:not(.now)::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--n300); }
  .book-steps li.on:not(.now)::after { background: var(--ink); }
}
.book-test-card { margin: 0 0 10px; padding: 8px 12px; border: 1px dashed var(--n300); border-radius: 10px; font-size: 12.5px; color: var(--n600); }

/* Booking: room under the times when the pop-up glides down to them */
.book-slots-wrap { scroll-margin-bottom: 14px; }

/* Full review on phones: a sheet across the whole width from the bottom, in a calmer size */
@media (max-width: 640px) {
  .review-modal { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 22px 22px 0 0; }
  .review-modal-bar { padding: 12px 12px 10px 20px; }
  .review-modal-nav { gap: 6px; }
  .review-modal-nav .slider-btn { width: 40px; height: 40px; }
  .review-modal-body { padding: 18px 20px calc(24px + env(safe-area-inset-bottom)); max-height: calc(88dvh - 64px); }
  .review-modal .review-q { font-size: 3.4rem; height: 30px; }
  .review-modal blockquote { font-size: 1.12rem; line-height: 1.45; }
}

/* Leave a review page: one calm card, a step at a time */
.rp { display: flex; justify-content: center; padding-top: clamp(30px, 6vw, 80px); }
.rp-card { width: 100%; max-width: 560px; }
.rp-title { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 6vw, 72px); line-height: 0.95; color: var(--ink); }
.rp-title em { font-style: italic; }
.rp-title-sm { font-size: clamp(36px, 5vw, 54px); }
.rp-lede { margin: 16px 0 0; font-size: 15px; line-height: 1.55; color: var(--n700); }
.rp-step { display: grid; gap: 14px; margin-top: 28px; }
.rp-step[hidden] { display: none; }
.rp-step label { display: grid; gap: 6px; font-size: 13.5px; color: var(--n600); }
.rp-step input:not([type="radio"]), .rp-step select, .rp-step textarea { width: 100%; box-sizing: border-box; min-height: 48px; padding: 12px 14px; border: 1px solid var(--n200); border-radius: 12px; background: var(--white, #fff); font: inherit; font-size: 15px; color: var(--ink); }
.rp-step textarea { resize: vertical; line-height: 1.5; }
.rp-step input:focus, .rp-step select:focus, .rp-step textarea:focus { outline: none; border-color: var(--ink); }
.rp-step .btn { justify-self: start; }
.rp-step .review-error { margin: 0; color: #a3341f; font-size: 14px; }
.rp-step .review-error:empty { display: none; }
.rp-code { display: grid; gap: 8px; }
.rp-code[hidden] { display: none; }
.rp-code input { letter-spacing: 0.3em; font-size: 20px; }
.rp-fine { margin: 0; font-size: 13px; color: var(--n500); }
.rp-who { margin: 0; padding: 10px 14px; border-radius: 12px; background: #efedea; font-size: 13.5px; color: var(--n700); }
.rp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rp-stars { margin: 0; padding: 0; border: 0; }
.rp-stars legend { margin-bottom: 6px; font-size: 13.5px; color: var(--n600); }
.rp-done .av-link { justify-self: start; margin-top: 6px; }
@media (max-width: 560px) { .rp-row { grid-template-columns: 1fr; } .rp-step .btn { justify-self: stretch; } }
.rp-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rp-stars label { display: inline-block; font-size: 30px; line-height: 1; color: var(--n200); cursor: pointer; }
.rp-stars label.on { color: var(--ink); }
.rp-stars input:focus-visible + label { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }