/* The Ritual landing page. Kept out of index.html so it passes a CSP without 'unsafe-inline'. */
:root {
--sc-canvas: #0F1211;
--sc-surface: #171B1A;
--sc-ink: #EFE9DF;
--sc-ink-soft: #A39C90;
--sc-accent: #C9894B;
--sc-accent-ink: #0F1211;
--sc-font-display: "Archivo", system-ui, sans-serif;
--sc-font-text: "Geist", system-ui, "PingFang TC", "Noto Sans TC", sans-serif;
--sc-shadow-color: 160 14% 3%;
--folio-w: clamp(3rem, 5vw, 4.5rem);
}
html { background: var(--sc-canvas); }
body { background: var(--sc-canvas); color: var(--sc-ink); }
/* Each chapter holds its own ground: hard cuts, no interpolation. */
.chapter { position: relative; padding: var(--sc-section) var(--sc-gutter) var(--sc-section) calc(var(--sc-gutter) + var(--folio-w)); }
.ground-1 { background: #0F1211; }
.ground-2 { background: #121614; }
.ground-3 { background: #17130F; }
.ground-5 { background: #171B1A; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sc-5); max-width: var(--sc-maxw); margin: 0 auto; }
.display {
font-family: var(--sc-font-display);
font-variation-settings: "wdth" 100;
font-weight: 300;
letter-spacing: var(--sc-track-tight);
line-height: var(--sc-leading-tight);
margin: 0;
text-wrap: balance;
}
.numeral {
font-family: var(--sc-font-display);
font-weight: 300;
font-size: var(--sc-t-sm);
letter-spacing: var(--sc-track-wide);
color: var(--sc-accent);
margin: 0 0 var(--sc-4);
}
.prose p { font-size: var(--sc-t-base); line-height: var(--sc-leading-body); margin: 0; max-width: 40ch; text-wrap: pretty; }
.prose p + p { margin-top: var(--sc-4); }
.prose h2 { margin-bottom: var(--sc-5); }
.caption { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); margin: var(--sc-3) 0 0; letter-spacing: 0.01em; }
.caption b { font-weight: 560; color: var(--sc-ink); }
.link {
color: var(--sc-ink);
text-decoration: underline;
text-decoration-color: var(--sc-accent);
text-decoration-thickness: 1.5px;
text-underline-offset: 0.24em;
transition: color 140ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .link:hover { color: var(--sc-accent); } }
.link:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 4px; border-radius: 2px; }
/* ----------------------------------------------------------- folio -- */
.folio {
position: fixed; left: 0; top: 0; bottom: 0; width: calc(var(--folio-w) + var(--sc-gutter) * 0.4);
display: flex; align-items: flex-end; justify-content: center;
padding-bottom: var(--sc-6);
z-index: 30; pointer-events: none;
}
.folio__text {
writing-mode: vertical-rl; transform: rotate(180deg);
font-size: var(--sc-t-xs); letter-spacing: 0.12em; text-transform: uppercase;
color: var(--sc-ink-soft); white-space: nowrap; margin: 0;
}
.folio__num { color: var(--sc-accent); margin-bottom: var(--sc-3); }
/* ------------------------------------------------------- title page -- */
.title { min-height: 100svh; display: grid; align-content: center; }
.title__kicker { grid-column: 2 / span 10; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); letter-spacing: 0.06em; margin: 0 0 var(--sc-7); }
.title__mast { grid-column: 1 / span 11; font-size: clamp(3.6rem, 13vw, 12rem); line-height: 0.92; }
.title__stand { grid-column: 6 / span 5; font-size: var(--sc-t-lg); line-height: 1.45; margin: var(--sc-7) 0 0; text-wrap: pretty; }
.title__contents { grid-column: 6 / span 5; list-style: none; padding: 0; margin: var(--sc-6) 0 0; border-top: 1px solid var(--sc-hairline-strong); }
.title__contents li { display: flex; gap: var(--sc-4); padding: var(--sc-3) 0; border-bottom: 1px solid var(--sc-hairline); font-size: var(--sc-t-sm); }
.title__contents span:first-child { color: var(--sc-accent); width: 2.5ch; }
.title__skip { grid-column: 6 / span 5; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); margin: var(--sc-5) 0 0; }
/* ------------------------------------------------------- I the chair -- */
.chair__fig { grid-column: 1 / span 6; margin: 0; }
.frame { position: relative; overflow: hidden; border-radius: 2px; box-shadow: var(--sc-e2); }
.chair__frame { aspect-ratio: 3 / 4; }
.chair__frame img { position: absolute; left: 0; top: -6%; width: 100%; height: 112%; max-width: none; object-fit: cover; }
.chair__text { grid-column: 8 / span 4; align-self: end; padding-bottom: var(--sc-8); }
/* ------------------------------------------------------ II the towel -- */
.towel__text { grid-column: 1 / span 4; align-self: center; }
.towel__fig { grid-column: 6 / span 7; margin: 0; }
.towel__frame { aspect-ratio: 16 / 9; }
.towel__frame video, .towel__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* ----------------------------------------------------- III the mirror -- */
.mirror__stage {
display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: var(--sc-4);
padding: var(--sc-6) var(--sc-gutter) var(--sc-5) calc(var(--sc-gutter) + var(--folio-w));
background: #0B0E0D;
}
.mirror__head { display: flex; align-items: baseline; gap: var(--sc-5); }
.mirror__head .numeral { margin: 0; }
.mirror__head h2 { font-size: var(--sc-t-2xl); }
.mirror__frame {
position: relative; overflow: hidden; border-radius: 2px;
width: 100%; height: 100%; min-height: 0;
box-shadow: var(--sc-e3);
border: 1px solid color-mix(in oklab, #C9D1CE 22%, transparent);
}
.fog {
position: absolute; inset: 0; width: 100%; height: 100%;
z-index: 2; touch-action: pan-y;
}
.mirror__foot { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sc-5); flex-wrap: wrap; }
.mirror__foot .caption { margin: 0; }
.mirror__line { font-size: var(--sc-t-lg); margin: 0; max-width: 40ch; }
/* ------------------------------------------------------ IV the finish -- */
.finish__text { grid-column: 1 / span 4; align-self: start; padding-top: var(--sc-8); }
.finish__fig { grid-column: 6 / span 5; margin: 0; }
.finish__frame { aspect-ratio: 3 / 4; }
.finish__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* ---------------------------------------------------------- the menu -- */
.menu__head { grid-column: 1 / span 12; display: flex; justify-content: space-between; align-items: baseline; gap: var(--sc-5); margin-bottom: var(--sc-6); }
.menu__head h2 { font-size: var(--sc-t-2xl); }
.menu__table { grid-column: 1 / span 12; width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.menu__table th { text-align: left; font-weight: 400; font-size: var(--sc-t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink-soft); padding: 0 0 var(--sc-3); border-bottom: 1px solid var(--sc-hairline-strong); }
.menu__table td { padding: var(--sc-4) 0; border-bottom: 1px solid var(--sc-hairline); font-size: var(--sc-t-base); vertical-align: baseline; }
.menu__table .num { text-align: right; }
.menu__zh { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); margin-left: var(--sc-3); }
.menu__svc { font-family: var(--sc-font-display); font-size: var(--sc-t-lg); font-weight: 400; letter-spacing: var(--sc-track-snug); }
/* ---------------------------------------------------------- colophon -- */
.colophon { min-height: 100svh; display: grid; align-content: center; }
.plate {
grid-column: 3 / span 8;
border: 1px solid var(--sc-hairline-strong);
padding: var(--sc-8) var(--sc-7);
background: var(--sc-surface);
}
.plate__mast { font-size: var(--sc-t-xl); margin-bottom: var(--sc-5); }
.plate p { font-size: var(--sc-t-base); line-height: var(--sc-leading-body); margin: 0; max-width: 52ch; }
.plate p + p { margin-top: var(--sc-4); }
.plate__branches { list-style: none; padding: 0; margin: var(--sc-6) 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sc-5); font-size: var(--sc-t-sm); }
.plate__branches b { display: block; font-weight: 560; margin-bottom: var(--sc-1); }
.plate__branches span { color: var(--sc-ink-soft); }
.plate .plate__small { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); margin-top: var(--sc-6); }
@media (max-width: 860px) {
:root { --folio-w: 0rem; }
.folio { left: 0; right: 0; top: auto; width: auto; bottom: 0; justify-content: flex-start; align-items: center; padding: var(--sc-2) var(--sc-gutter); background: color-mix(in oklab, #0F1211 90%, transparent); }
.folio__text { writing-mode: horizontal-tb; transform: none; }
.folio__num { margin: 0 var(--sc-3) 0 0; }
.title__kicker, .title__mast, .title__stand, .title__contents, .title__skip { grid-column: 1 / -1; }
.chair__fig, .chair__text, .towel__text, .towel__fig, .finish__text, .finish__fig { grid-column: 1 / -1; }
.chair__text { padding: var(--sc-6) 0 0; }
.towel__fig { margin-top: var(--sc-6); }
.finish__text { padding-top: 0; margin-bottom: var(--sc-6); }
.mirror__stage { padding: var(--sc-5) var(--sc-gutter) var(--sc-8); }
.menu__head { flex-direction: column; gap: var(--sc-2); }
.menu__table thead { display: none; }
.menu__table td.mins { display: none; }
.plate { grid-column: 1 / -1; padding: var(--sc-6) var(--sc-5); }
.plate__branches { grid-template-columns: 1fr; gap: var(--sc-3); }
}
@media (prefers-reduced-motion: reduce) {
.fog { display: none; }
}
/* ------------------------------------------------- language switch -- */
.lang {
position: fixed; top: var(--sc-3); right: var(--sc-gutter); z-index: 31;
display: flex; align-items: center; padding: 0 var(--sc-2);
font-size: var(--sc-t-xs); letter-spacing: 0.08em; color: var(--sc-ink-soft);
background: color-mix(in oklab, #0F1211 72%, transparent); border-radius: 999px;
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.lang a {
display: inline-flex; align-items: center; justify-content: center;
min-width: 44px; min-height: 44px; color: inherit; text-decoration: none;
}
.lang a[aria-current] { color: var(--sc-ink); }
.lang a:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: -6px; border-radius: 999px; }
@media (hover: hover) and (pointer: fine) { .lang a:hover { color: var(--sc-accent); } }
.lang__sep { opacity: 0.4; }
/* ---------------------------------------- Traditional Chinese edition -- */
/* zh-TW.html: CJK faces (Archivo and Geist have no Han glyphs), no negative tracking, which
crowds Han characters, and a measure counted in characters rather than Latin ch. */
html:lang(zh-Hant) {
--sc-font-display: "Noto Serif TC", "Songti TC", serif;
--sc-font-text: "Noto Sans TC", "PingFang TC", system-ui, sans-serif;
--sc-track-tight: 0.02em;
--sc-track-snug: 0.03em;
--sc-track-normal: 0.04em;
}
html:lang(zh-Hant) .display { font-weight: 600; font-variation-settings: normal; }
html:lang(zh-Hant) .prose p { max-width: 30em; line-height: 1.95; }
html:lang(zh-Hant) .title__stand { line-height: 1.7; }
html:lang(zh-Hant) .menu__svc { letter-spacing: 0.06em; }
/* Han text reads naturally top to bottom, so the folio is not rotated as the Latin one is. */
html:lang(zh-Hant) .folio__text { transform: none; letter-spacing: 0.3em; }
@media (max-width: 860px) {
html:lang(zh-Hant) .folio__text { letter-spacing: 0.12em; }
}
/* English inside the Chinese edition (the wordmark, service names) keeps the Latin faces. */
html:lang(zh-Hant) [lang="en"] {
--sc-font-display: "Archivo", system-ui, sans-serif;
--sc-font-text: "Geist", system-ui, sans-serif;
--sc-track-tight: -0.035em;
--sc-track-snug: -0.02em;
}
html:lang(zh-Hant) .display[lang="en"] { font-weight: 300; }
/* -------------------------------------------------- social links -- */
.plate__social { list-style: none; padding: 0; margin: var(--sc-6) 0 0; display: flex; flex-wrap: wrap; gap: var(--sc-3); }
.social {
display: inline-flex; align-items: center; gap: var(--sc-2);
min-height: 44px; padding: 0 var(--sc-4) 0 var(--sc-3);
border: 1px solid var(--sc-hairline-strong); border-radius: 999px;
color: var(--sc-ink); text-decoration: none; font-size: var(--sc-t-sm);
transition: color 0.2s, border-color 0.2s;
}
.social svg { width: 20px; height: 20px; flex: none; }
.social:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .social:hover { color: var(--sc-accent); border-color: var(--sc-accent); } }
@media (prefers-reduced-motion: reduce) { .social { transition: none; } }
/* ------------------------------------------------- book-a-chair CTA -- */
.cta {
display: inline-flex; align-items: center; gap: var(--sc-3);
min-height: 52px; padding: 0 var(--sc-5) 0 var(--sc-6);
background: var(--sc-accent); color: var(--sc-accent-ink);
border-radius: 999px; text-decoration: none;
font-size: var(--sc-t-base); font-weight: 600; letter-spacing: 0.01em;
box-shadow: 0 10px 30px -12px color-mix(in oklab, var(--sc-accent) 70%, transparent);
transition: background-color 0.2s, box-shadow 0.3s var(--sc-ease-out), transform 0.3s var(--sc-ease-out);
}
.cta svg { width: 20px; height: 20px; flex: none; transition: transform 0.3s var(--sc-ease-out); }
.cta:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 4px; }
.cta:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) {
.cta:hover {
background: color-mix(in oklab, var(--sc-accent) 88%, #fff);
box-shadow: 0 0 0 1px var(--sc-accent), 0 16px 40px -12px color-mix(in oklab, var(--sc-accent) 85%, transparent);
}
.cta:hover svg { transform: translateX(4px); }
}
.cta--lg { min-height: 60px; padding: 0 var(--sc-6) 0 var(--sc-7); font-size: var(--sc-t-lg); }
.cta__meta { margin: var(--sc-3) 0 0; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); letter-spacing: 0.04em; }
.title__cta { grid-column: 6 / span 5; margin-top: var(--sc-6); }
.plate .plate__cta { margin-top: var(--sc-6); }
/* Floating CTA: shows once the title page has scrolled away, hides while the colophon's own
button is on screen (landing.js toggles .is-shown). Hidden means out of the tab order too. */
.cta-float {
position: fixed; right: var(--sc-gutter); bottom: var(--sc-5); z-index: 32;
min-height: 48px; padding: 0 var(--sc-4) 0 var(--sc-5); font-size: var(--sc-t-sm);
opacity: 0; visibility: hidden; transform: translateY(12px);
transition: opacity 0.3s var(--sc-ease-out), transform 0.3s var(--sc-ease-out), visibility 0s linear 0.3s,
background-color 0.2s, box-shadow 0.3s var(--sc-ease-out);
}
.cta-float.is-shown { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.cta-float svg { width: 18px; height: 18px; }
@media (max-width: 860px) {
.title__cta { grid-column: 1 / -1; }
.title__cta .cta, .plate__cta .cta { width: 100%; justify-content: center; }
.cta--lg { padding: 0 var(--sc-5); }
/* On phones the floating button lives in the folio bar at the bottom. */
.folio { min-height: 60px; padding-right: calc(var(--sc-gutter) + 9.5rem); }
.cta-float { bottom: 8px; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
.cta, .cta svg, .cta-float { transition: none; }
.cta-float { transform: none; }
}