/* apps/cf-pages/sakeozo-directions/src/a.css. Last modified 2026-10-11 22:20 EDT by Claude (Builder desk, task recBFJwKanrdrssCt, Step 4453.site.2): ported unchanged from projects/sakeozo/design/site-directions/src/a.css (Step 4453.site.1). */
/* Direction A, Gallery Wall: calm, credible, editorial. Cream walls, framed art, Fraunces + Atkinson Hyperlegible. */
:root {
  --bg: #FEF1DF; --fg: #0A0024; --muted: #4A4060; --surface: #FFF9F0; --line: #E6D3BA;
  --accent: #56000E; --accent-hover: #3F000A; --accent-fg: #FEF1DF; --link: #56000E; --focus: #56000E;
  --chip-bg: #E7EDCF; --chip-fg: #4B5A0F; --tst-bg: #F2C0AB; --tst-fg: #0A0024; --ph: #88A31F; --nav-mark: #88A31F;
  --font-display: 'Fraunces', Georgia, serif; --font-body: 'Atkinson Hyperlegible', system-ui, sans-serif;
  /* type scale: 18px base, ratio 1.25 */
  --t0: 18px; --t1: 22.5px; --t2: 28.13px; --t3: 35.16px; --t4: 43.95px; --t5: 54.93px; --t6: 68.66px; --t7: 85.83px;
  --radius: 4px; --btn-radius: 4px;
}
h1, h2, h3 { font-weight: 600; font-variation-settings: 'opsz' 144; letter-spacing: -0.01em; }
.display { font-weight: 800; }
.site-header { border-bottom: 1px solid var(--line); }
.brand-name { font-style: italic; }

.hero-a { padding-top: var(--sp6); }
.hero-a .hero-grid { display: grid; gap: var(--sp6); align-items: center; }
@media (min-width: 1024px) { .hero-a .hero-grid { grid-template-columns: 5fr 7fr; gap: var(--sp7); } .hero-a { padding: var(--sp8) 0; } }
.hero-a .display { font-size: var(--t5); }
@media (min-width: 1024px) { .hero-a .display { font-size: var(--t7); } }
.hero-frame { margin: 0; }
.mat { background: #FFFFFF; padding: var(--sp4); box-shadow: 0 1px 0 var(--line), 0 24px 48px -24px rgba(86, 0, 14, .35); border: 1px solid var(--line); }
@media (min-width: 1024px) { .mat { padding: var(--sp6); } }
.hero-frame figcaption { margin-top: var(--sp3); font-family: var(--font-display); font-style: italic; color: var(--muted); text-align: right; }
.hero-frame figcaption::before { content: ''; display: inline-block; width: 32px; height: 2px; background: #88A31F; vertical-align: middle; margin-right: var(--sp2); }

.featured .cat-frame { background: #fff; padding: var(--sp2); border: 1px solid var(--line); }
.cat-name { font-family: var(--font-display); font-style: italic; font-weight: 600; }
.worlds { background: var(--surface); border-block: 1px solid var(--line); }
.world-art { border: 1px solid var(--line); }
.hello-art img { border-radius: 50%; border: 8px solid #fff; box-shadow: 0 0 0 2px #88A31F; }
.svc-card { border: 1px solid var(--line); border-top: 6px solid #56000E; }
.tst blockquote { font-family: var(--font-display); font-style: italic; }
.feed { background: var(--surface); border-top: 1px solid var(--line); }
.support-big { text-align: center; }
.support-big .support-grid { max-width: 800px; margin-inline: auto; margin-bottom: var(--sp4); text-align: left; }
.support-big .promise { margin-inline: auto; }
.tl { border-left: 2px solid #88A31F; padding-left: var(--sp4); }
.tl li { border-top: 0; position: relative; }
.tl li::before { content: ''; position: absolute; left: calc(-1 * var(--sp4) - 8px); top: 26px; width: 14px; height: 14px; border-radius: 50%; background: #56000E; }
.pet-card { border-width: 1px; }
.tier { border: 1px solid var(--line); }
.svc-block-head h2 { font-style: italic; }