/* apps/cf-pages/sakeozo-directions/src/c.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/c.css (Step 4453.site.1). */
/* Direction C, Sticker Book: loud, playful, personality first. Matcha fields, tilted stickers, Bricolage Grotesque + Figtree. */
:root {
  --bg: #FEF1DF; --fg: #0A0024; --muted: #0A0024; --surface: #FFFBF4; --line: #0A0024;
  --accent: #0A0024; --accent-hover: #2A1F4A; --accent-fg: #FEF1DF; --link: #56000E; --focus: #56000E;
  --chip-bg: #F2C0AB; --chip-fg: #0A0024; --tst-bg: #FFFFFF; --tst-fg: #0A0024; --ph: #56000E; --nav-mark: #88A31F;
  --font-display: 'Bricolage Grotesque', 'Arial Black', sans-serif; --font-body: 'Figtree', system-ui, sans-serif; --font-hand: 'Caveat Brush', cursive;
  /* 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; --t8: 107.29px;
  --radius: 18px; --shadow: 6px 6px 0 #0A0024;
}
h1, h2, h3 { font-weight: 800; letter-spacing: -0.02em; font-variation-settings: 'opsz' 96; }
.h2 { color: #56000E; }
.site-header { border-bottom: 3px solid #0A0024; }
.nav-list a { border-radius: 999px; }
.nav-list a[aria-current="page"] { background: #88A31F; text-decoration: none; }
.btn { border: 3px solid #0A0024; box-shadow: 4px 4px 0 #0A0024; }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #0A0024; }
.btn-secondary, .btn-follow { color: #0A0024; background: #FFFBF4; border-color: #0A0024; }

.hero-c { background: #88A31F; border-bottom: 3px solid #0A0024; padding: var(--sp6) 0 var(--sp7); overflow: hidden; }
.hero-c-grid { display: grid; gap: var(--sp5); align-items: center; }
@media (min-width: 1024px) { .hero-c-grid { grid-template-columns: 1fr 1fr; gap: var(--sp6); } .hero-c { padding: var(--sp8) 0; } }
.hero-c .display { font-size: var(--t6); line-height: .95; color: #0A0024; }
@media (min-width: 1024px) { .hero-c .display { font-size: var(--t8); } }
.scribble { font-family: var(--font-hand); font-size: var(--t2); color: #56000E; transform: rotate(-3deg); margin: var(--sp2) 0 var(--sp3); background: #F2C0AB; display: inline-block; padding: 2px 12px; border-radius: 6px; }
.hero-c .lead { color: #0A0024; }
.sticker-pile { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp3); }
@media (min-width: 1024px) { .sticker-pile { gap: var(--sp4); } }
.sticker { transform: rotate(var(--r)); background: #FFFFFF; padding: 6px; border: 3px solid #0A0024; border-radius: 14px; box-shadow: var(--shadow); transition: transform var(--dur) ease; }
.sticker:hover { transform: rotate(0) scale(1.04); }
.sticker img { aspect-ratio: 1; object-fit: cover; border-radius: 8px; width: 100%; }
.sticker.s2, .sticker.s5 { margin-top: var(--sp5); }

.hello { background: #FFFBF4; border-bottom: 3px solid #0A0024; }
.hello-grid { grid-template-columns: 1fr; }
@media (min-width: 1024px) { .hello-grid { grid-template-columns: 6fr 6fr; } }
.pet-peek { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp3); }
@media (min-width: 1024px) { .pet-peek { grid-template-columns: repeat(4, 1fr); } }
.pet-peek li { background: #fff; border: 3px solid #0A0024; border-radius: 14px; padding: 6px 6px 8px; box-shadow: 4px 4px 0 #0A0024; text-align: center; font-family: var(--font-hand); font-size: var(--t1); }
.pet-peek li:nth-child(odd) { transform: rotate(-3deg); } .pet-peek li:nth-child(even) { transform: rotate(3deg); }
.pet-peek img { aspect-ratio: 1; object-fit: cover; border-radius: 8px; width: 100%; }
.services { background: #F2C0AB; border-bottom: 3px solid #0A0024; }
.svc-card { background: #FFFBF4; border: 3px solid #0A0024; box-shadow: var(--shadow); }
.svc-from { display: inline-block; background: #88A31F; color: #0A0024; padding: 4px 12px; border-radius: 999px; border: 2px solid #0A0024; transform: rotate(-2deg); }
.cat-frame { border: 3px solid #0A0024; box-shadow: var(--shadow); background: #fff; }
.cat-tile:nth-child(odd) .cat-frame { transform: rotate(-1.5deg); } .cat-tile:nth-child(even) .cat-frame { transform: rotate(1.5deg); }
.cat-name { font-family: var(--font-display); font-size: var(--t1); margin-top: var(--sp3); }
.testimonials { background: #FFFBF4; border-block: 3px solid #0A0024; }
.tst { position: relative; border: 3px solid #0A0024; border-radius: 28px; box-shadow: var(--shadow); margin-bottom: var(--sp4); }
.tst::after { content: ''; position: absolute; left: 40px; bottom: -22px; width: 32px; height: 32px; background: #fff; border-right: 3px solid #0A0024; border-bottom: 3px solid #0A0024; transform: skewX(30deg) rotate(45deg); }
.tst figcaption strong { font-family: var(--font-display); font-size: var(--t1); }
.worlds { background: #88A31F; border-bottom: 3px solid #0A0024; }
.worlds .h2 { color: #0A0024; }
.worlds .more { color: #0A0024; }
.world-card { background: #fff; border: 3px solid #0A0024; border-radius: var(--radius); padding: 8px; box-shadow: 4px 4px 0 #0A0024; }
.world-card:nth-child(odd) { transform: rotate(-1.5deg); } .world-card:nth-child(even) { transform: rotate(1.5deg); }
.world-cast { color: #0A0024; }
.feed-tile { border: 3px solid #0A0024; }
.support-big { background: #F2C0AB; border-top: 3px solid #0A0024; }
.support-big .h2 { color: #56000E; }
.support-card { border: 3px solid #0A0024; box-shadow: 4px 4px 0 #0A0024; }
.site-footer { border-top: 3px solid #0A0024; }

.about-intro { background: #88A31F; border-bottom: 3px solid #0A0024; }
.about-intro .eyebrow { color: #0A0024; }
.asl-frame { border: 3px solid #0A0024; box-shadow: var(--shadow); transform: rotate(1.5deg); }
.pets { background: #FFFBF4; border-bottom: 3px solid #0A0024; }
.pet-card { border: 3px solid #0A0024; box-shadow: var(--shadow); background: #fff; }
.pet-grid li:nth-child(odd) .pet-card { transform: rotate(-1.5deg); } .pet-grid li:nth-child(even) .pet-card { transform: rotate(1.5deg); }
.pet-card:hover { transform: rotate(0) translateY(-4px) !important; }
.pet-name { font-family: var(--font-hand); font-size: var(--t4); font-weight: 400; color: #56000E; }
.tl { display: grid; gap: var(--sp3); }
@media (min-width: 1024px) { .tl { grid-template-columns: repeat(3, 1fr); } }
.tl li { display: flex; flex-direction: column; gap: var(--sp1); border: 3px dashed #0A0024; border-radius: 14px; padding: var(--sp3); background: #fff; }
.tl-year { color: #56000E; font-size: var(--t2); }
.pf-head { background: #F2C0AB; border-bottom: 3px solid #0A0024; padding-bottom: var(--sp5); }
.tab { border: 3px solid #0A0024; }
.chip { border: 2px solid #0A0024; }
.piece-open, .piece > figure > img { border: 3px solid #0A0024; box-shadow: 4px 4px 0 #0A0024; }
.world-hero { background: #0A0024; }
.world-hero-art { border-bottom: 3px solid #0A0024; }
.world-hero-text { background: #F2C0AB; border: 3px solid #0A0024; border-radius: var(--radius); margin: calc(-1 * var(--sp7)) var(--gutter) 0; position: relative; padding: var(--sp5); box-shadow: var(--shadow); max-width: 820px; }
@media (min-width: 1024px) { .world-hero-text { margin-left: calc((100vw - var(--wrap)) / 2 + var(--gutter)); } }
.cast-art { border: 3px solid #0A0024; box-shadow: var(--shadow); background: #fff; }
.world-follow { border: 3px solid #0A0024; background: #88A31F; }
.hire-head { background: #88A31F; border-bottom: 3px solid #0A0024; }
.svc-jump a { background: #FFFBF4; }
.tier { border: 3px solid #0A0024; box-shadow: 4px 4px 0 #0A0024; background: #fff; }
.tier-price { color: #0A0024; background: #F2C0AB; display: inline-block; align-self: flex-start; padding: 2px 12px; border: 2px solid #0A0024; border-radius: 8px; transform: rotate(-2deg); }
.svc-block { border-top: 3px solid #0A0024; }
.guide { background: #FFFBF4; border-block: 3px solid #0A0024; }
.fee { border: 3px dashed #0A0024; }
.form input, .form select, .form textarea { border-width: 3px; }