/* File: apps/cf-pages/sakeozo-directions/src/r3/r3-1.css. Ported unchanged 2026-10-12 04:30 EDT by Claude (Builder desk,
   Step 4506.site.2) from projects/sakeozo/design/site-directions-r3/src/r3-1.css (commit b3104a7f). Designer's history:
   Last modified: 2026-10-12 02:00 EDT | Author: Claude (Designer desk, Step 4506.fix.1) | Revision 1: her gecko PNG in
   front of the About video, the Play/Pause button under the frame. Before it: Round 3: R2-1 Sticker Stories
   with Destiny's corrections. C1 the intro on a solid cream card (wine, midnight and matcha-ink text), C4 to C7 the
   sticker-sheet footer with link columns on the left and the sticker you can take on the right.
   Backgrounds: cream, paper, white, peach, matcha, wine, wine deep. Midnight is text only. */
:root {
  --ground: #56000E; --pattern-bg: #56000E; --fg: #0A0024; --muted: #0A0024; --line: #2B0007; --card: #FFFFFF;
  --accent: #56000E; --accent-hover: #3F000A; --accent-fg: #FEF1DF; --link: #56000E; --focus: #56000E; --eyebrow: #56000E;
  --btn-line: #2B0007; --btn2-bg: #FFFBF4; --btn2-fg: #0A0024; --btn2-line: #2B0007;
  --chip-bg: #F2C0AB; --chip-fg: #0A0024; --tst-bg: #FFFFFF; --tst-fg: #0A0024; --tst-name: #56000E; --tst-role: #4B5A0F;
  --ph: #56000E; --radius: 18px; --shadow: 6px 6px 0 #2B0007; --fade-to: #56000E;
}
.sheet { background: #FEF1DF; }
@media (min-width: 1024px) { .sheet { max-width: 1376px; margin: 32px auto; border: 3px solid #2B0007; border-radius: 36px; overflow: clip; box-shadow: 10px 10px 0 #2B0007; } }
h1, h2, h3 { letter-spacing: -0.01em; }
.h2 { color: #56000E; }
.btn { box-shadow: 4px 4px 0 #2B0007; }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #2B0007; }

/* header: sticker-tab nav */
.site-header { background: #FEF1DF; border-bottom: 3px solid #2B0007; }
.nav-list { list-style: none; margin: 0; padding: 0; display: none; }
.nav-list a { display: block; padding: 10px 16px; color: #0A0024; text-decoration: none; font: 600 var(--t0)/1.2 var(--font-display); min-height: 44px; border-radius: 999px; }
.nav-list .n, .nav-list .ts { display: none; }
.nav-list a[aria-current="page"] { background: #88A31F; box-shadow: 3px 3px 0 #2B0007; border: 2px solid #2B0007; }
.nav-list.open { display: block; position: absolute; left: 0; right: 0; top: 72px; background: #FEF1DF; padding: var(--sp2) var(--gutter) var(--sp4); border-bottom: 3px solid #2B0007; }
.btn-hire { box-shadow: 3px 3px 0 #2B0007; }
@media (max-width: 420px) { .brand-name { display: none; } }
@media (min-width: 1024px) { .site-header { position: sticky; top: 0; } .nav-list { display: flex; gap: var(--sp2); } .menu-btn { display: none; } .nav { margin-right: var(--sp3); } }

/* hero (C1): B's drawing that fades into the page, with the intro on a solid cream sticker card. No text sits on
   the drawing, so every text colour is measured against the card's own cream. */
.hero-1 { position: relative; padding: 0; display: grid; overflow: hidden; background: #56000E; }
.hero-1 .hero-art { position: relative; height: 340px; }
.hero-1 .hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.hero-1 .hero-fade { height: 55%; }
.hero-wrap { position: relative; z-index: 2; margin-top: -72px; padding-bottom: var(--sp6); }
.hero-card { background: #FEF1DF; color: #0A0024; border: 3px solid #2B0007; border-radius: 28px; box-shadow: 8px 8px 0 #2B0007; padding: var(--sp5) var(--sp4); transform: rotate(-1deg); }
.hero-card .eyebrow { color: #4B5A0F; }
.hero-card .display { color: #56000E; font-size: var(--t6); max-width: 15ch; }
.hero-card .lead { max-width: 44ch; }
.hero-p2 { font-family: var(--font-hand); font-size: var(--t2); color: #56000E; transform: rotate(-2deg); display: inline-block; }
@media (min-width: 1024px) {
  .hero-1 { min-height: 760px; align-items: end; }
  .hero-1 .hero-art { position: absolute; inset: 0; height: auto; }
  .hero-1 .hero-fade { height: 40%; }
  .hero-wrap { margin-top: 0; padding-top: 220px; padding-bottom: var(--sp8); }
  .hero-card { max-width: 760px; padding: var(--sp6) var(--sp6) var(--sp5); }
  .hero-card .display { font-size: var(--t8); } }

/* the moving gallery on matcha, as tilted stickers */
.reel { background: #88A31F; border-block: 3px solid #2B0007; }
.reel .eyebrow, .reel .h2, .reel .more { color: #0A0024; }
.reel-card { background: #FFFFFF; padding: 8px 8px 10px; border: 3px solid #2B0007; border-radius: 16px; box-shadow: var(--shadow); }
.reel-card img { border-radius: 10px; }
.reel-cat { background: #F2C0AB; color: #0A0024; padding: 2px 12px; border-radius: 999px; border: 2px solid #2B0007; }
.reel-toggle { box-shadow: 3px 3px 0 #2B0007; }

/* changing section colours (C) */
.band-cream { background: #FEF1DF; } .band-paper { background: #FFFBF4; } .band-peach { background: #F2C0AB; border-block: 3px solid #2B0007; }
.band-matcha { background: #88A31F; border-block: 3px solid #2B0007; } .band-matcha .h2, .band-matcha .eyebrow, .band-matcha .more { color: #0A0024; }
.band-wine { background: #56000E; color: #FEF1DF; } .band-wine .h2, .band-wine .eyebrow { color: #F2C0AB; }
.band-wine .btn-follow { --btn2-bg: #FEF1DF; }
.pet-peek li { background: #FFFFFF; border: 3px solid #2B0007; border-radius: 16px; padding: 8px 8px 10px; box-shadow: 4px 4px 0 #2B0007; transform: rotate(var(--r)); }
.pet-peek img { border-radius: 10px; }
.pet-peek span { font-family: var(--font-hand); font-size: var(--t2); font-weight: 400; color: #56000E; }
.svc-card { border: 3px solid #2B0007; box-shadow: var(--shadow); background: #FFFBF4; }
.svc-card:nth-child(2) { transform: rotate(-1deg); } .svc-card:nth-child(3) { transform: rotate(1deg); }
.svc-thumbs img { border: 2px solid #2B0007; }
.svc-from { background: #88A31F; color: #0A0024; padding: 4px 14px; border-radius: 999px; border: 2px solid #2B0007; transform: rotate(-2deg); }
.world-card { background: #FFFFFF; border: 3px solid #2B0007; border-radius: var(--radius); padding: 8px 8px 12px; box-shadow: 4px 4px 0 #2B0007; }
.world-card:nth-child(odd) { transform: rotate(-1.5deg); } .world-card:nth-child(even) { transform: rotate(1.5deg); }
.world-art { border-radius: 12px; }
.world-name { color: #56000E; } .world-cast { color: #0A0024; }
.tst { border: 3px solid #2B0007; border-radius: 28px; box-shadow: var(--shadow); }
.tst::after { content: ''; position: absolute; left: 96px; bottom: -20px; width: 30px; height: 30px; background: #FFFFFF; border-right: 3px solid #2B0007; border-bottom: 3px solid #2B0007; transform: skewX(30deg) rotate(45deg); }
.tst-grid { gap: var(--sp6) var(--sp5); }
.feed-tile { border: 3px solid #2B0007; }
.feed-tile:nth-child(odd) { transform: rotate(-2deg); } .feed-tile:nth-child(even) { transform: rotate(2deg); }
.support-card { --card: #FEF1DF; border-color: #2B0007; box-shadow: 4px 4px 0 #2B0007; color: #0A0024; }
.support-card strong { color: #56000E; }

/* footer: a sticker sheet. Link columns on the left (C4), the sticker you can take on the right (C7), then the
   credit (C3), the social icons (C6) and the two fine-print lines (C5). */
.sticker-sheet { background: #56000E; color: #FEF1DF; padding: var(--sp7) 0 var(--sp6); position: relative; border-top: 3px solid #2B0007; --col-h: #F2C0AB; }
.sheet-grid { display: grid; gap: var(--sp6); align-items: start; }
@media (min-width: 1024px) { .sheet-grid { grid-template-columns: 5fr 6fr; } }
.sticker-sheet .take { background: #FEF1DF; color: #0A0024; border-radius: 28px; border: 3px dashed #F2C0AB; padding: var(--sp5) var(--sp4); }
.sticker-sheet .take-h { color: #56000E; }
.sticker-sheet .btn-peel { background: #56000E; color: #FEF1DF; border-color: #2B0007; }
.sticker-sheet .btn-peel:hover { background: #3F000A; }
.sticker-sheet .btn-save { background: #88A31F; color: #0A0024; border-color: #2B0007; }
.sticker-sheet .slot { color: #56000E; }
.sheet-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp4); margin-top: var(--sp6); padding-top: var(--sp4); border-top: 2px dashed #F2C0AB; }
.sheet-row-2 { border-top: 0; margin-top: var(--sp3); padding-top: 0; }
.sticker-sheet .soc { --soc-bg: #FEF1DF; --soc-fg: #56000E; --soc-line: #2B0007; box-shadow: 3px 3px 0 #2B0007; }
.sheet-bye { font-family: var(--font-hand); font-size: var(--t3); margin: 0; }
.sticker-sheet .btn-follow { --btn2-bg: #FEF1DF; --btn2-fg: #56000E; }
.sticker-sheet .fcol a { color: #FEF1DF; }
.sticker-sheet .fine { color: #FEF1DF; }
.hands { --hands-bg: #FEF1DF; border-top: 3px solid #2B0007; }

/* about */
.about-intro { background: #88A31F; border-bottom: 3px solid #2B0007; }
.about-intro .eyebrow, .about-intro .display { color: #0A0024; }
.asl-frame { border: 3px solid #2B0007; box-shadow: var(--shadow); transform: rotate(1.5deg); --card: #FFFBF4; }
/* A's timeline: one vertical rule with dots (feedback item 13) */
.timeline { background: #FEF1DF; }
.tl { border-left: 4px solid #88A31F; padding-left: var(--sp5); margin-left: var(--sp2); }
.tl li { position: relative; display: grid; grid-template-columns: 96px 1fr; gap: var(--sp3); padding: var(--sp3) 0; }
.tl li::before { content: ''; position: absolute; left: calc(-1 * var(--sp5) - 12px); top: 24px; width: 20px; height: 20px; border-radius: 50%; background: #56000E; border: 3px solid #FEF1DF; box-shadow: 0 0 0 2px #2B0007; }
.tl-year { font-family: var(--font-display); font-weight: 700; color: #56000E; font-size: var(--t1); }
.pets { background: #F2C0AB; border-block: 3px solid #2B0007; }
.pet-card { border: 3px solid #2B0007; box-shadow: var(--shadow); }
.pet-grid > li:nth-child(odd) { transform: rotate(-1.2deg); } .pet-grid > li:nth-child(even) { transform: rotate(1.2deg); }
.pet-name { font-family: var(--font-hand); font-weight: 400; font-size: var(--t5); color: #56000E; }
.off { background: #FFFBF4; }
.off-art img { border: 3px solid #2B0007; box-shadow: var(--shadow); transform: rotate(-2deg); }
.closing { background: #88A31F; border-top: 3px solid #2B0007; } .closing .h2 { color: #0A0024; }

/* portfolio, world, hire */
.pf-head { background: #F2C0AB; border-bottom: 3px solid #2B0007; }
.tab { border-color: #2B0007; background: #FFFBF4; }
.piece-frame { border: 3px solid #2B0007; box-shadow: 4px 4px 0 #2B0007; background: #FFFFFF; padding: 6px; transform: rotate(var(--r)); }
.piece-frame img { border-radius: 10px; }
.world-hero { background: #56000E; }
.world-hero-art img { border-bottom: 3px solid #2B0007; }
.world-hero-text { background: #F2C0AB; border: 3px solid #2B0007; border-radius: var(--radius); margin: calc(-1 * var(--sp7)) var(--gutter) var(--sp5); position: relative; box-shadow: var(--shadow); max-width: 820px; padding: var(--sp5); }
@media (min-width: 1024px) { .world-hero-text { margin-left: var(--sp8); } }
.cast { background: #FEF1DF; }
.cast-art { border: 3px solid #2B0007; box-shadow: var(--shadow); }
.world-work { background: #88A31F; border-top: 3px solid #2B0007; } .world-work .h2, .world-nav a { color: #0A0024; }
.world-follow { border: 3px solid #2B0007; --card: #FEF1DF; }
.hire-head { background: #88A31F; border-bottom: 3px solid #2B0007; } .hire-head .eyebrow, .hire-head .display { color: #0A0024; }
.svc-jump a { background: #FFFBF4; border-color: #2B0007; color: #0A0024; }
.svc-list { background: #FEF1DF; }
.svc-block + .svc-block { border-top: 3px dashed #2B0007; }
.svc-from { display: inline-block; }
.tier { border: 3px solid #2B0007; box-shadow: 4px 4px 0 #2B0007; }
.tier-ex img { border: 2px solid #2B0007; }
.tier-ex img:nth-child(odd) { transform: rotate(-2deg); } .tier-ex img:nth-child(even) { transform: rotate(2deg); }
.tier-price { align-self: flex-start; background: #F2C0AB; padding: 2px 12px; border: 2px solid #2B0007; border-radius: 10px; transform: rotate(-2deg); color: #56000E; }
.guide { background: #FFFBF4; border-block: 3px solid #2B0007; }
.fee { border: 3px dashed #2B0007; --card: #FEF1DF; }
.inquiry { background: #F2C0AB; }

/* the intro video band on About (C9) */
.vid-band { background: #FFFBF4; border-bottom: 3px solid #2B0007; }
.vid-grid { display: grid; gap: var(--sp5); align-items: center; }
@media (min-width: 1024px) { .vid-grid { grid-template-columns: 5fr 7fr; } }
.vid-r3-1 .vid-frame { border: 3px solid #2B0007; box-shadow: var(--shadow); transform: rotate(-1.5deg); }

/* Revision 1 (Part B): her gecko PNG stands in front of the video, bottom right at 85% of the frame height. It takes no
   pointer events, so a click on the video still plays it. The Play/Pause button sits under the frame (.vid-bar), where
   the PNG cannot cover it. */
.has-gecko .vid-frame video { cursor: pointer; }
.gecko-over { position: absolute; right: 1%; bottom: 0; height: 85%; width: auto; max-width: none; pointer-events: none; }
.vid-bar { padding-top: var(--sp3); }
.vid-toggle { box-shadow: 3px 3px 0 #2B0007; }
.vid-ico { display: inline-block; width: 0; height: 0; border-left: 14px solid currentColor; border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-right: var(--sp2); }
.playing .vid-ico { width: 14px; height: 16px; border: 0; border-left: 5px solid currentColor; border-right: 5px solid currentColor; }