/* Fayenatics — Listening Room sparse · paper · warm · slightly distant */ :root { --bg: #f7f4ef; --surface: #fff; --fg: #1c1917; --muted: #6f6860; --accent: #c45c4a; --accent-dim: rgba(196, 92, 74, 0.55); --line: rgba(28, 25, 23, 0.12); --font-display: "Cormorant Garamond", "Noto Serif SC", Georgia, serif; --font-cjk: "Noto Serif SC", "Songti SC", serif; --font-meta: "Syne", "IBM Plex Sans", system-ui, sans-serif; --measure: 42rem; --measure-wide: 56rem; --measure-hero: 74rem; --pad: clamp(1.35rem, 5vw, 3.75rem); --ease: 180ms ease; } *, *::before, *::after { box-sizing: border-box; } html { background: var(--bg); color: var(--fg); font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } html[lang="zh-Hans"] { font-size: 16px; } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--fg); font-family: var(--font-display); font-weight: 400; font-size: 1.125rem; line-height: 1.7; letter-spacing: 0.01em; position: relative; } html[lang="zh-Hans"] body { font-family: var(--font-cjk); line-height: 1.85; letter-spacing: 0.04em; } /* Paper air: a faint warm wash, no cinematic vignette */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 85% 50% at 50% -8%, rgba(196, 92, 74, 0.05), transparent 64%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"); background-size: auto, 180px 180px; } body > * { position: relative; z-index: 1; } img, svg { max-width: 100%; display: block; } a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: transparent; transition: color var(--ease), text-decoration-color var(--ease); } a:hover { color: var(--accent); text-decoration-color: var(--accent-dim); } a:focus-visible, button:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; } ::selection { background: var(--accent); color: var(--bg); } /* Language: English default; Chinese when */ .lang-zh { display: none; } html[lang="zh-Hans"] .lang-en { display: none; } html[lang="zh-Hans"] .lang-zh { display: revert; } .cjk { font-family: var(--font-cjk); font-weight: 400; letter-spacing: 0.08em; } .skip { position: absolute; left: var(--pad); top: 0.6rem; transform: translateY(-160%); background: var(--fg); color: var(--bg); font-family: var(--font-meta); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.45rem 0.7rem; z-index: 20; text-decoration: none; } .skip:focus { transform: none; outline: 1px solid var(--accent); outline-offset: 3px; } /* ——— Header ——— */ .site-header { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0.85rem 1.75rem; padding: 1.4rem var(--pad) 1.15rem; border-bottom: 1px solid var(--line); } .wordmark { font-family: var(--font-display); font-weight: 400; font-size: 1.55rem; line-height: 1; letter-spacing: 0.02em; color: var(--accent); text-decoration: none; font-style: italic; } .wordmark:hover { color: var(--fg); text-decoration: none; } .lang-switch { display: flex; align-items: baseline; gap: 0.4rem; font-family: var(--font-meta); font-size: 0.75rem; letter-spacing: 0.12em; color: var(--muted); } .lang-switch button { appearance: none; background: none; border: 0; padding: 0.15rem 0.1rem; margin: 0; color: var(--muted); font: inherit; letter-spacing: 0.12em; cursor: pointer; } .lang-switch button[aria-pressed="true"] { color: var(--fg); } .lang-switch button:hover { color: var(--accent); } .lang-switch .slash { opacity: 0.45; user-select: none; } .site-nav { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.35rem 1.35rem; } .site-nav a { font-family: var(--font-meta); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; color: var(--muted); } html[lang="zh-Hans"] .site-nav a { font-family: var(--font-cjk); font-size: 0.8125rem; letter-spacing: 0.18em; text-transform: none; } .site-nav a:hover { color: var(--accent); } .site-nav a[aria-current="page"] { color: var(--fg); box-shadow: inset 0 -1px 0 var(--accent); } @media (min-width: 860px) { .site-header { grid-template-columns: auto 1fr auto; padding-top: 1.75rem; padding-bottom: 1.35rem; } .site-nav { grid-column: auto; justify-self: center; align-self: center; } } /* ——— Main ——— */ main { flex: 1; padding: 0 var(--pad) 5rem; } .wrap { max-width: var(--measure); margin: 0 auto; } .wrap-wide { max-width: var(--measure-wide); margin: 0 auto; } .page-kicker { font-family: var(--font-meta); font-size: 0.6875rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin: 3.25rem 0 0.6rem; } html[lang="zh-Hans"] .page-kicker { font-family: var(--font-cjk); letter-spacing: 0.28em; text-transform: none; font-size: 0.75rem; } .page-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.4rem, 6vw, 3.6rem); line-height: 1.08; letter-spacing: -0.01em; margin: 0 0 0.35rem; font-style: italic; } html[lang="zh-Hans"] .page-title { font-family: var(--font-cjk); font-style: normal; letter-spacing: 0.08em; } .lede { color: var(--muted); font-size: 1.05rem; margin: 0 0 2.75rem; max-width: 36rem; } .rule { width: 2.4rem; height: 1px; background: var(--accent); border: 0; margin: 1.5rem 0 1.75rem; } .essay p { margin: 0 0 1.15em; } .essay p:last-child { margin-bottom: 0; } .essay + .essay { margin-top: 3.25rem; padding-top: 3.15rem; border-top: 1px solid var(--line); } .essay h2 { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 1.65rem; margin: 0 0 1rem; letter-spacing: 0.01em; } html[lang="zh-Hans"] .essay h2 { font-family: var(--font-cjk); font-style: normal; letter-spacing: 0.1em; } .signoff { margin-top: 1.6rem; color: var(--muted); font-style: italic; font-size: 1rem; } html[lang="zh-Hans"] .signoff { font-style: normal; } /* ——— Home / The Room ——— */ .hero { max-width: var(--measure-hero); margin: 0 auto; padding: 2.25rem 0 3.5rem; display: grid; grid-template-columns: 1fr; gap: 1.6rem 4rem; align-items: start; } .hero-copy { display: contents; } .hero-portrait { order: 2; margin: 0; background: var(--surface); padding: 0.55rem 0.55rem 0; box-shadow: 0 0 0 1px var(--line); } .hero-portrait img { width: 100%; height: auto; display: block; } .hero-portrait figcaption, .photo-credit { font-family: var(--font-meta); font-size: 0.6875rem; letter-spacing: 0.04em; line-height: 1.55; color: var(--muted); } .hero-portrait figcaption { margin: 0; padding: 0.7rem 0.2rem 0.75rem; } .hero-body { order: 3; } .hero-body .whisper { margin-top: 2.5rem; padding-top: 0; color: var(--muted); } .hero-mark { order: 1; font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: clamp(3.1rem, 10vw, 5.8rem); line-height: 0.9; letter-spacing: -0.02em; color: var(--accent); margin: 0; } .hero-body .rule { margin-top: 1.35rem; } @media (min-width: 900px) { .hero { grid-template-columns: minmax(0, 1.05fr) minmax(18rem, 32rem); align-items: center; min-height: calc(100vh - 11rem); padding: clamp(2.5rem, 8vh, 5.5rem) 0 4.25rem; } .hero-copy { display: block; } .hero-mark, .hero-portrait, .hero-body { order: unset; } .hero-mark { margin: 0 0 0.15rem; } } .era-kicker { font-family: var(--font-meta); font-size: 0.6875rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.85rem; } html[lang="zh-Hans"] .era-kicker { font-family: var(--font-cjk); letter-spacing: 0.28em; text-transform: none; font-size: 0.75rem; } .era-title { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(2rem, 5vw, 2.85rem); line-height: 1.1; margin: 0; } .era-title .cjk { font-style: normal; display: inline-block; margin-left: 0.65rem; font-size: 0.72em; color: var(--muted); vertical-align: 0.08em; } .era-year { font-family: var(--font-meta); font-size: 0.75rem; letter-spacing: 0.2em; color: var(--muted); margin: 0.45rem 0 1.35rem; } .hero p { max-width: 34rem; color: var(--fg); } .hero p.lang-en, .hero p.lang-zh { margin: 0 0 1.8rem; } .cta { font-family: var(--font-meta); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; color: var(--fg); display: inline-flex; align-items: center; gap: 0.55rem; } html[lang="zh-Hans"] .cta { font-family: var(--font-cjk); text-transform: none; letter-spacing: 0.22em; font-size: 0.8125rem; } .cta::after { content: "→"; font-family: var(--font-meta); color: var(--accent); transition: transform var(--ease); } .cta:hover { color: var(--accent); text-decoration: none; } .cta:hover::after { transform: translateX(3px); } .whisper { margin-top: 2.75rem; padding-top: 0; font-family: var(--font-meta); font-size: 0.75rem; letter-spacing: 0.08em; color: var(--muted); } html[lang="zh-Hans"] .whisper { font-family: var(--font-cjk); letter-spacing: 0.14em; } /* ——— Rooms / lists ——— */ .group { margin: 0 0 3.75rem; } .group-title { font-family: var(--font-meta); font-size: 0.6875rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin: 0 0 1.1rem; padding-bottom: 0.65rem; border-bottom: 1px solid var(--line); } html[lang="zh-Hans"] .group-title { font-family: var(--font-cjk); text-transform: none; letter-spacing: 0.24em; font-size: 0.75rem; } .album, .film, .log { display: grid; grid-template-columns: 1fr; gap: 0.2rem 2rem; padding: 1.35rem 0; border-bottom: 1px solid var(--line); } .album:first-of-type, .film:first-of-type, .log:first-of-type { border-top: 1px solid var(--line); } @media (min-width: 640px) { .album { grid-template-columns: 5.5rem 1fr auto; align-items: baseline; } .film { grid-template-columns: 5.5rem 1fr; align-items: baseline; } .album .note, .film .note { grid-column: 2; } .album .listen { grid-column: 3; grid-row: 1; justify-self: end; } } .year { font-family: var(--font-meta); font-size: 0.75rem; letter-spacing: 0.14em; color: var(--muted); margin: 0; } .album h3, .film h3 { font-family: var(--font-display); font-weight: 400; font-style: italic; font-size: 1.4rem; line-height: 1.25; margin: 0; letter-spacing: 0.01em; } .album h3 .cjk, .film h3 .cjk { font-style: normal; color: var(--muted); font-size: 0.82em; margin-left: 0.55rem; } .note { margin: 0.35rem 0 0; color: var(--muted); font-size: 1rem; line-height: 1.55; max-width: 38rem; } .listen { font-family: var(--font-meta); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; color: var(--muted); white-space: nowrap; margin-top: 0.55rem; } html[lang="zh-Hans"] .listen { font-family: var(--font-cjk); text-transform: none; letter-spacing: 0.2em; font-size: 0.75rem; } .listen:hover { color: var(--accent); text-decoration: none; } .aside { color: var(--muted); font-size: 0.98rem; margin: 0.5rem 0 2.5rem; } .log .when { font-family: var(--font-meta); font-size: 0.75rem; letter-spacing: 0.08em; color: var(--muted); margin: 0; } .log h3 { font-family: var(--font-display); font-weight: 400; font-style: italic; font-size: 1.25rem; margin: 0; } html[lang="zh-Hans"] .log h3 { font-family: var(--font-cjk); font-style: normal; } .log .note { grid-column: 1 / -1; } @media (min-width: 640px) { .log { grid-template-columns: 9.5rem 1fr; align-items: baseline; } .log .note { grid-column: 2; } } /* ——— Webring ——— */ .links { list-style: none; margin: 0 0 3rem; padding: 0; } .links li { padding: 1.15rem 0; border-bottom: 1px solid var(--line); } .links li:first-child { border-top: 1px solid var(--line); } .links a { font-family: var(--font-display); font-style: italic; font-size: 1.35rem; text-decoration: none; } html[lang="zh-Hans"] .links a { font-family: var(--font-cjk); font-style: normal; } .links .why { display: block; margin-top: 0.25rem; font-family: var(--font-display); font-style: normal; font-size: 0.98rem; color: var(--muted); } html[lang="zh-Hans"] .links .why { font-family: var(--font-cjk); } .lost { list-style: none; margin: 0; padding: 0; } .lost li { font-family: var(--font-display); font-style: italic; color: var(--muted); padding: 0.45rem 0; font-size: 1.15rem; } html[lang="zh-Hans"] .lost li { font-family: var(--font-cjk); font-style: normal; } .caption { margin-top: 1.25rem; font-family: var(--font-meta); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } html[lang="zh-Hans"] .caption { font-family: var(--font-cjk); text-transform: none; letter-spacing: 0.22em; font-size: 0.75rem; } /* 1998 banner, typeset cleanly */ .webring-strip { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; max-width: 22rem; margin: 0 auto 2.25rem; padding: 0.45rem 0.7rem; border: 1px solid var(--accent-dim); font-family: var(--font-meta); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); text-decoration: none; } .webring-strip:hover { color: var(--fg); border-color: var(--accent); text-decoration: none; } .webring-strip .ghost { color: var(--accent); letter-spacing: 0.08em; } html[lang="zh-Hans"] .webring-strip { font-family: var(--font-cjk); text-transform: none; letter-spacing: 0.16em; font-size: 0.75rem; } .webring-strip-lg { max-width: 28rem; margin: 2rem auto 3rem; padding: 0.7rem 1rem; font-size: 0.75rem; } /* ——— Footer ——— */ .site-footer { padding: 2.5rem var(--pad) 2.75rem; border-top: 1px solid var(--line); color: var(--muted); font-family: var(--font-meta); font-size: 0.75rem; line-height: 1.7; letter-spacing: 0.02em; } .site-footer .inner { max-width: var(--measure-wide); margin: 0 auto; } .disclaimer { max-width: 38rem; margin: 0 auto 1.35rem; text-align: center; } .disclaimer p { margin: 0 0 0.55em; } .disclaimer .cjk-block { font-family: var(--font-cjk); letter-spacing: 0.08em; font-size: 0.78rem; } .photo-credit { text-align: center; margin: 0 auto 1.15rem; max-width: 40rem; } .photo-credit a { text-decoration-color: var(--accent-dim); } .meta-line { text-align: center; color: var(--muted); opacity: 0.85; letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.625rem; } .meta-line .est { opacity: 0.7; } /* ——— 404 ——— */ .empty { min-height: 60vh; display: flex; flex-direction: column; justify-content: center; padding: 4rem 0; } .empty h1 { font-style: italic; font-weight: 400; font-size: clamp(2rem, 5vw, 3rem); margin: 0 0 1rem; } html[lang="zh-Hans"] .empty h1 { font-family: var(--font-cjk); font-style: normal; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } .cta:hover::after { transform: none; } } @media (max-width: 480px) { body { font-size: 1.0625rem; } .hero-mark { font-size: clamp(2.8rem, 16vw, 4.2rem); } }