/* riffonart — design tokens + base styles
Ported from the Claude Design prototype (riffonart.html).
Surface tone switches via [data-bg="paper" | "white" | "black"] on . */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600&family=JetBrains+Mono:wght@300;400;500&display=swap');
:root,
[data-bg="paper"] {
--bg: #efece4;
--bg-tint: #e8e4da;
--ink: #15130f;
--ink-soft: #4a463c;
--ink-mute: #807a6c;
--ink-faint: rgba(21, 19, 15, 0.16);
--rule: rgba(21, 19, 15, 0.12);
--rule-strong: rgba(21, 19, 15, 0.24);
--accent: #a3402e;
--accent-soft: #c9624c;
--paper-grain: 0.025;
--serif: 'Instrument Serif', 'Times New Roman', serif;
--sans: 'Geist', ui-sans-serif, -apple-system, system-ui, sans-serif;
--mono: 'JetBrains Mono', ui-monospace, monospace;
}
[data-bg="black"] {
--bg: #0b0a08;
--bg-tint: #14120e;
--ink: #f1ece0;
--ink-soft: #b4ad9b;
--ink-mute: #7a7367;
--ink-faint: rgba(241, 236, 224, 0.16);
--rule: rgba(241, 236, 224, 0.12);
--rule-strong: rgba(241, 236, 224, 0.24);
--accent: #d97651;
--accent-soft: #e8a78a;
--paper-grain: 0.04;
}
[data-bg="white"] {
--bg: #faf9f5;
--bg-tint: #f1efe7;
--ink: #0e0c08;
--ink-soft: #4a463c;
--ink-mute: #807a6c;
--ink-faint: rgba(14, 12, 8, 0.14);
--rule: rgba(14, 12, 8, 0.10);
--rule-strong: rgba(14, 12, 8, 0.22);
--accent: #8a3526;
--accent-soft: #b85a47;
--paper-grain: 0.015;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
background: var(--bg);
color: var(--ink);
font-family: var(--sans);
letter-spacing: -0.005em;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
a { color: inherit; }
/* paper grain overlay */
.grain {
position: fixed; inset: 0; pointer-events: none; z-index: 100;
opacity: var(--paper-grain);
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: multiply;
}
[data-bg="black"] .grain { mix-blend-mode: screen; }
/* type primitives */
.t-display { font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em; line-height: 0.95; }
.t-display i, .t-display em { font-style: italic; }
.t-body { font-family: var(--sans); font-weight: 400; line-height: 1.5; }
.t-meta { font-family: var(--mono); font-weight: 400; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-mute); }
.t-eyebrow { font-family: var(--mono); font-weight: 400; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); }
.rule-h { height: 1px; background: var(--rule); width: 100%; }
.rule-v { width: 1px; background: var(--rule); height: 100%; }
/* buttons */
.btn-hair {
display: inline-flex; align-items: center; gap: 8px;
padding: 9px 14px; border: 1px solid var(--ink); background: transparent;
font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--ink); cursor: pointer; border-radius: 0;
transition: background 120ms, color 120ms;
text-decoration: none;
}
.btn-hair:hover { background: var(--ink); color: var(--bg); }
.btn-ghost {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 10px; background: transparent; color: var(--ink-soft);
font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
border: 0; cursor: pointer; border-radius: 0;
text-decoration: none;
}
.btn-ghost:hover { color: var(--ink); }
.btn-ghost:focus-visible,
.btn-hair:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }
.dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); display: inline-block; }
/* art frame */
.art-frame {
position: relative;
background: var(--bg-tint);
overflow: hidden;
width: 100%; height: 100%;
}
.art-frame img, .art-frame video {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: filter 360ms ease;
}
[data-bg="black"] .art-frame { box-shadow: 0 30px 80px -30px rgba(0,0,0,0.7); }
[data-bg="white"] .art-frame { box-shadow: 0 24px 60px -30px rgba(0,0,0,0.18); }
.art-frame .grain-overlay {
position: absolute; inset: 0; pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: multiply; opacity: 0.5;
}
/* logo */
.logo { display: flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; }
.logo__mark { width: 22px; height: 22px; flex-shrink: 0; }
.logo__word { font-family: var(--serif); font-size: 18px; letter-spacing: -0.01em; }
.logo__word i { color: var(--accent); font-style: normal; }
/* ================== EDITORIAL INDEX ================== */
.editorial { min-height: 100vh; padding: 0; }
.editorial__top {
display: flex; justify-content: space-between; align-items: center;
padding: 28px 40px; border-bottom: 1px solid var(--rule);
gap: 24px;
}
.editorial__nav { display: flex; gap: 28px; }
.editorial__nav a { color: var(--ink-mute); text-decoration: none; }
.editorial__nav a.is-active { color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 2px; }
.editorial__masthead {
padding: 64px 40px 40px;
display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 40px;
}
.editorial__title { font-size: clamp(48px, 7vw, 86px); max-width: 920px; line-height: 0.95; }
.editorial__title i { color: var(--accent); font-style: italic; }
.editorial__byline { max-width: 280px; text-align: right; }
.editorial__byline p { font-family: var(--serif); font-size: 18px; line-height: 1.35; color: var(--ink-soft); margin: 0; }
.editorial__main {
display: grid; grid-template-columns: 1.4fr 1fr; gap: 0;
padding: 0 40px; border-top: 1px solid var(--rule);
}
.editorial__featured {
padding: 24px 40px 24px 0;
border-right: 1px solid var(--rule);
}
.editorial__cover { aspect-ratio: 4/3; overflow: hidden; background: var(--bg-tint); }
.editorial__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.editorial__cover-meta {
display: flex; justify-content: space-between; align-items: baseline;
margin-top: 16px; gap: 16px;
}
.editorial__cover-title { font-size: clamp(32px, 4vw, 40px); margin-top: 4px; }
.editorial__cover-sub { font-size: 14px; color: var(--ink-soft); margin-top: 6px; font-style: italic; font-family: var(--serif); }
.editorial__list { padding: 24px 0 24px 40px; }
.gallery-row {
display: grid; grid-template-columns: auto 1fr auto auto;
align-items: baseline; gap: 16px;
padding: 18px 0; border-bottom: 1px solid var(--rule);
cursor: pointer; text-decoration: none; color: inherit;
opacity: 0.6;
transition: opacity 200ms;
}
.gallery-row.is-active,
.gallery-row:hover,
.gallery-row:focus-visible { opacity: 1; outline: none; }
.gallery-row:focus-visible { background: var(--bg-tint); }
.gallery-row__num { font-family: var(--mono); font-size: 11px; color: var(--ink-mute); width: 22px; }
.gallery-row__title { font-family: var(--serif); font-size: 22px; line-height: 1.1; }
.gallery-row.is-active .gallery-row__title::after { content: " ·"; color: var(--accent); }
.gallery-row__sub { font-size: 12px; color: var(--ink-mute); margin-top: 2px; font-family: var(--sans); }
.gallery-row__count,
.gallery-row__year { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-mute); }
.editorial__foot {
display: flex; justify-content: space-between; align-items: center;
padding: 24px 40px; border-top: 1px solid var(--rule); margin-top: 24px;
}
.editorial__foot-link {
text-decoration: none;
color: var(--ink-mute);
opacity: 0.55;
transition: opacity 160ms, color 160ms;
}
.editorial__foot-link:hover,
.editorial__foot-link:focus-visible {
opacity: 1;
color: var(--ink);
outline: none;
}
/* ================== VIEWER ================== */
.viewer {
position: relative;
display: flex; flex-direction: column;
height: 100vh; overflow: hidden;
}
.viewer__header {
display: grid; grid-template-columns: 1fr auto 1fr;
align-items: center; padding: 24px 32px; gap: 24px;
flex-shrink: 0; z-index: 20;
}
.viewer__header-left { display: flex; align-items: center; gap: 16px; }
.viewer__gallery-name { margin-left: 8px; }
.viewer__header-center { text-align: center; }
.viewer__header-right { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.viewer__counter { font-family: var(--serif); font-size: 22px; letter-spacing: -0.01em; }
.viewer__counter .num { font-variant-numeric: tabular-nums; }
.viewer__counter .sep { color: var(--ink-mute); margin: 0 8px; }
.viewer__counter .total { color: var(--ink-mute); }
.viewer__info-toggle .dot--inactive { background: var(--ink-faint); }
.viewer__stage {
flex: 1; min-height: 0;
display: grid; grid-template-columns: 1fr 1px 1fr;
gap: 40px; padding: 0 32px 24px;
transition: padding-right 320ms cubic-bezier(.2,.7,.2,1);
}
.viewer.is-info-open .viewer__stage { padding-right: 352px; }
.stage-side { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.stage-side__caption {
display: flex; justify-content: space-between; align-items: baseline;
margin-bottom: 16px; gap: 24px;
}
.stage-side__label { margin-bottom: 6px; }
.stage-side__title { font-size: clamp(20px, 2.4vw, 28px); }
.stage-side__credit { text-align: right; }
.stage-side__art { flex: 1; min-height: 0; }
.stage-side__art .art-frame { width: 100%; height: 100%; }
.stage-side__art video { background: var(--ink); }
.viewer__footer {
flex-shrink: 0;
display: grid; grid-template-columns: 1fr auto 1fr;
align-items: center; gap: 32px;
padding: 18px 32px 24px;
border-top: 1px solid var(--rule);
}
.viewer__nav { display: flex; align-items: center; gap: 12px; min-width: 0; }
.viewer__nav--next { justify-content: flex-end; text-align: right; }
.viewer__nav-label { font-family: var(--serif); font-size: 16px; line-height: 1.1; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viewer__nav button { padding: 8px 2px; }
.viewer__thumbs { display: flex; gap: 6px; align-items: center; }
.thumb {
position: relative; padding: 0; border: 0; flex-shrink: 0;
width: 48px; height: 64px; background: var(--bg-tint);
outline: 1px solid var(--rule); outline-offset: 2px;
cursor: pointer; transition: width 220ms cubic-bezier(.2,.7,.2,1); overflow: hidden;
}
.thumb.is-source { outline: 1px dashed var(--rule-strong); }
.thumb.is-active { width: 64px; outline: 1px solid var(--ink); }
.thumb:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
.thumb img, .thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb__tag {
position: absolute; top: 2px; left: 2px; font-family: var(--mono); font-size: 8px; letter-spacing: 0.1em;
color: var(--bg); background: var(--ink); padding: 1px 4px;
}
.thumb__active-label {
position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%);
font-family: var(--mono); font-size: 9px; color: var(--ink-soft);
}
/* video-type indicator on thumb */
.thumb__video-glyph {
position: absolute; right: 3px; bottom: 3px;
width: 10px; height: 10px;
border-radius: 50%; background: rgba(0,0,0,0.55); color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 7px; line-height: 1;
}
.thumb__video-glyph::before { content: "\25B6"; }
/* info pane */
.info-pane {
position: absolute; top: 0; right: 0; bottom: 0; width: 320px;
background: var(--bg-tint); border-left: 1px solid var(--rule);
padding: 96px 28px 32px;
display: flex; flex-direction: column; gap: 24px;
z-index: 15; overflow-y: auto;
}
.info-pane[hidden] { display: none; }
.info-pane.is-open { animation: slideIn 320ms cubic-bezier(.2,.7,.2,1); }
.info-pane__head { display: flex; justify-content: space-between; align-items: baseline; }
.info-pane__hero { }
.info-pane__title { font-size: 24px; margin: 0 0 6px; }
.info-pane__credit { font-size: 13px; color: var(--ink-soft); margin: 0; }
.info-pane__meta { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; row-gap: 10px; margin: 0; }
.info-pane__meta dt { font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-mute); margin: 0; }
.info-pane__meta dd { font-family: var(--sans); font-size: 13px; color: var(--ink); margin: 0; line-height: 1.4; }
.info-pane__prompt-wrap .t-eyebrow { display: block; margin-bottom: 6px; }
.info-pane__prompt {
font-family: var(--mono); font-size: 11px; line-height: 1.5; color: var(--ink-soft);
padding: 10px; background: var(--bg); border: 1px solid var(--rule);
margin: 0;
}
.info-pane__notes-wrap .t-eyebrow { display: block; margin-bottom: 8px; }
.info-pane__notes { font-family: var(--serif); font-size: 17px; line-height: 1.4; margin: 0; color: var(--ink); }
.info-pane__hint { margin-top: auto; font-size: 10px; font-family: var(--mono); color: var(--ink-mute); }
.info-pane__hint kbd { font-family: var(--mono); color: var(--ink); background: transparent; padding: 0 2px; border: 0; }
@keyframes slideIn {
from { transform: translateX(40px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
/* ================== RESPONSIVE ================== */
@media (max-width: 900px) {
.editorial__masthead { grid-template-columns: 1fr; padding: 40px 24px 24px; }
.editorial__byline { text-align: left; max-width: 100%; }
.editorial__main { grid-template-columns: 1fr; padding: 0 24px; }
.editorial__featured { padding: 16px 0; border-right: 0; border-bottom: 1px solid var(--rule); }
.editorial__list { padding: 16px 0; }
.editorial__top, .editorial__foot { padding: 20px 24px; }
.editorial__nav { gap: 16px; }
.viewer { height: auto; min-height: 100vh; }
.viewer__header { grid-template-columns: 1fr auto; padding: 16px 20px; gap: 12px; }
.viewer__header-center { display: none; }
.viewer__gallery-name { display: none; }
.viewer__stage {
grid-template-columns: 1fr; gap: 24px; padding: 0 20px 24px;
}
.viewer.is-info-open .viewer__stage { padding-right: 20px; }
.stage-side__art { aspect-ratio: 4/3; }
.rule-v { display: none; }
.viewer__footer {
grid-template-columns: 1fr; gap: 12px; padding: 16px 20px;
}
.viewer__nav { justify-content: flex-start; text-align: left; }
.viewer__nav--next { justify-content: flex-end; text-align: right; }
.viewer__thumbs {
overflow-x: auto; padding-bottom: 16px;
grid-column: 1 / -1; justify-content: flex-start;
scrollbar-width: thin;
}
.info-pane { width: 100%; position: fixed; padding-top: 64px; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}