/* File: apps/cf-pages/sakeozo-directions/src/r3/base.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/base.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 own Hire Me
   images shown whole on a white mat (.tier-own, img.own). Round 3 shared base, from round 2's: the doll is her favicon gecko (C2), plus the shared footer parts (C3 to C6), the hands (C8) and the video (C9).
   Each direction file sets the tokens and its own composition. No rule here paints Midnight #0A0024 as a background. */
:root { --sp1: 4px; --sp2: 8px; --sp3: 16px; --sp4: 24px; --sp5: 32px; --sp6: 48px; --sp7: 64px; --sp8: 96px; --sp9: 128px;
  --wrap: 1200px; --gutter: 16px; --radius: 16px; --dur: 200ms;
  --font-display: 'Fredoka', 'Trebuchet MS', sans-serif; --font-body: 'Lexend', system-ui, sans-serif; --font-hand: 'Caveat Brush', cursive;
  /* type scale: 18px base, ratio 1.2 (B's scale, Destiny's pick of fonts) */
  --t0: 18px; --t1: 21.6px; --t2: 25.92px; --t3: 31.1px; --t4: 37.32px; --t5: 44.79px; --t6: 53.75px; --t7: 64.5px; --t8: 77.4px;
  --ink: #0A0024; --ink-line: #2B0007; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--ground); color: var(--fg); font-family: var(--font-body); font-size: var(--t0); line-height: 1.6; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 768px) { :root { --gutter: 40px; } }
.skip { position: absolute; left: var(--sp3); top: -100px; z-index: 100; background: var(--accent); color: var(--accent-fg); padding: var(--sp2) var(--sp3); border-radius: 8px; }
.skip:focus { top: var(--sp3); }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ph { text-decoration: underline dotted var(--ph, currentColor) 2px; text-underline-offset: 4px; }
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0 0 var(--sp3); line-height: 1.12; font-weight: 600; }
p { margin: 0 0 var(--sp3); max-width: 68ch; }
.display { font-size: var(--t5); font-weight: 700; } .h2 { font-size: var(--t4); } .h3 { font-size: var(--t2); } .h4 { font-size: var(--t1); }
@media (min-width: 1024px) { .display { font-size: var(--t7); } .h2 { font-size: var(--t5); } .h3 { font-size: var(--t3); } }
.lead { font-size: var(--t1); }
.eyebrow { font-family: var(--font-display); font-weight: 600; font-size: var(--t0); letter-spacing: .04em; color: var(--eyebrow, var(--muted)); margin-bottom: var(--sp2); }
section { padding: var(--sp7) 0; }
@media (min-width: 1024px) { section { padding: var(--sp8) 0; } }
.sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp3); margin-bottom: var(--sp5); }
.sec-head h2 { margin-bottom: var(--sp2); }
.more { font-weight: 700; display: inline-block; padding: 10px 0; min-height: 44px; }

/* the pattern layer: Destiny's pattern replaces assets/pattern.svg, one file */
.pattern-layer { position: fixed; inset: 0; z-index: -1; background-color: var(--pattern-bg); background-image: url(pattern.svg); background-size: var(--pattern-size, 160px); }
.sheet { position: relative; }

/* buttons: one primary per view */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp2); min-height: 48px; padding: 12px 24px; border-radius: var(--btn-radius, 999px); font: 600 var(--t0)/1.2 var(--font-display); letter-spacing: .01em; text-decoration: none; cursor: pointer; border: 3px solid transparent; transition: transform var(--dur) ease, background-color var(--dur) ease, box-shadow var(--dur) ease; }
.btn-primary { background: var(--accent); color: var(--accent-fg); border-color: var(--btn-line, transparent); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary, .btn-follow { background: var(--btn2-bg, transparent); color: var(--btn2-fg, var(--link)); border-color: var(--btn2-line, currentColor); }
.btn:active { transform: translateY(1px); }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--sp3); margin-top: var(--sp4); }

/* header basics */
.site-header { position: relative; z-index: 30; }
.hdr { display: flex; align-items: center; gap: var(--sp2); min-height: 72px; }
.brand { display: flex; align-items: center; gap: var(--sp2); text-decoration: none; color: var(--brand-fg, var(--fg)); font-family: var(--font-display); font-size: var(--t1); font-weight: 700; margin-right: auto; }
.logo-chip { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #56000E; flex: none; }
.logo-chip img { width: 32px; height: 32px; object-fit: contain; }
.hdr-actions { display: flex; align-items: center; gap: var(--sp2); }
.btn-hire { min-height: 44px; padding: 8px 16px; white-space: nowrap; }
.menu-btn, .index-btn { min-height: 44px; min-width: 44px; padding: 8px 14px; border: 3px solid var(--line); border-radius: 999px; background: transparent; color: var(--fg); font: 600 var(--t0)/1 var(--font-display); cursor: pointer; }

/* the gecko page doll (C2): her favicon gecko, enlarged. In the header bar on phones (covers nothing), fixed in a
   corner from 1024 px. One file: assets/gecko-doll.png */
.doll { font-size: 16px; flex: none; display: inline-grid; place-items: center; width: 52px; height: 52px; padding: 0; border-radius: 50%; border: 3px solid var(--ink-line); background: #FFFFFF; cursor: pointer; overflow: hidden; transition: transform var(--dur) ease; }
.doll img { width: 100%; height: 100%; object-fit: cover; }
.doll:hover { transform: rotate(-10deg) scale(1.08); }
@media (min-width: 1024px) { .doll { position: fixed; right: 24px; bottom: 24px; width: 96px; height: 96px; z-index: 30; box-shadow: var(--doll-shadow, 4px 4px 0 var(--ink-line)); } }

/* shared grids */
.world-row { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: var(--sp3); overflow-x: auto; scroll-snap-type: x mandatory; padding: var(--sp2) var(--sp1) var(--sp4); }
@media (min-width: 1024px) { .world-row { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); gap: var(--sp5); overflow: visible; } }
.world-card { scroll-snap-align: start; text-decoration: none; color: var(--fg); display: block; }
.world-art { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius); }
.world-art img { width: 100%; height: 100%; object-fit: cover; }
.world-name { display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--t2); margin-top: var(--sp2); }
.world-cast { display: block; color: var(--muted); }
.hello-grid { display: grid; gap: var(--sp5); align-items: center; }
@media (min-width: 1024px) { .hello-grid { grid-template-columns: 6fr 6fr; gap: var(--sp7); } }
.pet-peek { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp4); }
@media (min-width: 1024px) { .pet-peek { grid-template-columns: repeat(4, 1fr); } }
.pet-peek img { aspect-ratio: 1; object-fit: cover; width: 100%; }
.pet-peek span { display: block; text-align: center; font-family: var(--font-display); font-weight: 600; font-size: var(--t1); margin-top: var(--sp2); }
.svc-grid { display: grid; gap: var(--sp4); }
@media (min-width: 1024px) { .svc-grid { grid-template-columns: repeat(3, 1fr); } }
.svc-card { padding: var(--sp5); border-radius: var(--radius); display: flex; flex-direction: column; align-items: flex-start; background: var(--card); color: var(--card-fg, var(--fg)); }
.svc-card .btn { margin-top: auto; }
.svc-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp2); width: 100%; margin-bottom: var(--sp3); }
.svc-thumbs img { aspect-ratio: 1; object-fit: cover; width: 100%; border-radius: 10px; }
.svc-from { font-family: var(--font-display); font-weight: 700; margin-bottom: var(--sp2); }

/* testimonials with avatars (stand-ins: initials until Destiny supplies icons) */
.tst-grid { display: grid; gap: var(--sp5); }
@media (min-width: 768px) { .tst-grid { grid-template-columns: repeat(2, 1fr); } }
.tst { margin: 0; padding: var(--sp5); border-radius: var(--radius); background: var(--tst-bg); color: var(--tst-fg); position: relative; display: grid; grid-template-columns: 64px 1fr; gap: var(--sp2) var(--sp4); align-items: start; }
.tst blockquote { margin: 0; font-size: var(--t1); grid-column: 2; }
.tst blockquote p { margin: 0; }
.tst figcaption { grid-column: 2; display: flex; flex-direction: column; }
.tst-name { font-family: var(--font-display); font-weight: 700; font-size: var(--t1); color: var(--tst-name); }
.tst-role { font-weight: 600; color: var(--tst-role); }
.avatar { grid-row: 1 / span 2; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font: 700 var(--t1)/1 var(--font-display); border: 3px solid var(--ink-line); }
.av-co { background: #F2C0AB; color: #56000E; } .av-bc { background: #88A31F; color: #0A0024; } .av-ns { background: #56000E; color: #FEF1DF; } .av-rg { background: #FEF1DF; color: #56000E; }

.feed-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp3); }
@media (min-width: 1024px) { .feed-grid { grid-template-columns: repeat(4, 1fr); } }
.feed-tile { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 12px; }
.feed-tile img { width: 100%; height: 100%; object-fit: cover; }
.feed-src { position: absolute; left: var(--sp2); bottom: var(--sp2); background: #FEF1DF; color: #0A0024; padding: 2px 10px; border-radius: 999px; font-weight: 600; }
.feed-links { list-style: none; padding: 0; margin: var(--sp4) 0 0; display: flex; flex-wrap: wrap; gap: var(--sp2); }
.feed-links a { display: inline-block; padding: 10px 16px; min-height: 44px; border: 3px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--fg); font-weight: 600; }
.support-grid { display: grid; gap: var(--sp3); margin-bottom: var(--sp4); }
@media (min-width: 768px) { .support-grid { grid-template-columns: 1fr 1fr; } }
.support-card { display: flex; flex-direction: column; gap: var(--sp1); padding: var(--sp4); border-radius: var(--radius); background: var(--card); color: var(--card-fg, var(--fg)); text-decoration: none; border: 3px solid var(--line); }
.support-card strong { font-family: var(--font-display); font-size: var(--t2); color: var(--card-h, var(--link)); }
.promise { margin-top: var(--sp3); }
.foot-links, .socials { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp1) var(--sp3); }
.foot-links a, .socials a { display: inline-block; padding: 10px 0; min-height: 44px; color: inherit; }

/* the moving mixed gallery */
.reel { overflow: hidden; }
.reel-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--sp3); margin-bottom: var(--sp4); }
.reel-head h2 { margin-bottom: 0; }
.reel-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp4); }
.reel-ico { width: 14px; height: 16px; border-left: 5px solid currentColor; border-right: 5px solid currentColor; }
.reel.paused .reel-ico { border: 0; border-left: 14px solid currentColor; border-top: 8px solid transparent; border-bottom: 8px solid transparent; width: 0; height: 0; }
.reel-vp { display: flex; width: 100%; overflow: hidden; padding: var(--sp4) 0 var(--sp5); }
.reel-track { list-style: none; margin: 0; padding: 0 0 0 var(--sp4); display: flex; gap: var(--sp4); flex: none; animation: reel 70s linear infinite; }
.reel.paused .reel-track { animation-play-state: paused; }
@keyframes reel { to { transform: translateX(-100%); } }
.reel-item { flex: none; width: 200px; transform: rotate(var(--r)); }
@media (min-width: 1024px) { .reel-item { width: 280px; } }
.reel-card { display: block; text-decoration: none; color: var(--fg); }
.reel-card img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.reel-cat { display: inline-block; margin-top: var(--sp2); font-family: var(--font-display); font-weight: 600; }

/* hero fade slot (Destiny's animation) */
.hero-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 45%; pointer-events: none; background: linear-gradient(180deg, transparent 0%, var(--fade-to) 92%); }
.hero-fade .fade-ph { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 60%; object-fit: fill; opacity: .6; }

/* about */
.about-grid { display: grid; gap: var(--sp6); }
@media (min-width: 1024px) { .about-grid { grid-template-columns: 7fr 5fr; align-items: start; } }
.asl-frame { margin: 0; position: relative; overflow: hidden; border-radius: var(--radius); background: var(--card); color: var(--card-fg, var(--fg)); }
.asl-frame img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.asl-cap { margin: 0; padding: var(--sp3); }
.tl { list-style: none; margin: 0; padding: 0; }
.off-grid { display: grid; gap: var(--sp5); align-items: center; }
@media (min-width: 1024px) { .off-grid { grid-template-columns: 7fr 5fr; } }
.off-art img { border-radius: var(--radius); }
.pet-grid { list-style: none; margin: var(--sp5) 0 0; padding: 0; display: grid; gap: var(--sp4); }
@media (min-width: 768px) { .pet-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pet-grid { grid-template-columns: repeat(4, 1fr); } }
.pet-card { display: flex; flex-direction: column; gap: var(--sp2); padding: var(--sp3); border-radius: var(--radius); background: var(--card); color: var(--card-fg, var(--fg)); }
.pet-photo { display: block; aspect-ratio: 1; overflow: hidden; border-radius: calc(var(--radius) - 4px); }
.pet-photo img { width: 100%; height: 100%; object-fit: cover; }
.pet-kind { font-weight: 600; color: var(--card-muted, var(--muted)); }
.pet-name { font-size: var(--t3); margin: 0; }
.pet-lists { display: grid; gap: var(--sp3); }
.pet-lists ul { margin: 0; padding-left: 1.1em; }
.pet-lists li { margin-bottom: var(--sp1); }
.pl-h { font-family: var(--font-display); font-size: var(--t0); margin: 0 0 var(--sp1); display: inline-block; padding: 2px 12px; border-radius: 999px; }
.pl-likes { background: #88A31F; color: #0A0024; } .pl-dislikes { background: #F2C0AB; color: #56000E; }
.pets-sub { font-family: var(--font-display); font-size: var(--t1); }
.pets-hint { margin-top: var(--sp4); font-style: italic; }

/* dialogs */
.modal { border: 3px solid var(--ink-line); border-radius: var(--radius); padding: var(--sp5); max-width: min(560px, calc(100vw - 32px)); background: #FEF1DF; color: #0A0024; }
.modal::backdrop { background: rgba(86, 0, 14, .78); }
.modal .btn-secondary { color: #56000E; }
.modal-actions { display: flex; flex-wrap: wrap; gap: var(--sp3); margin: var(--sp4) 0; }
.modal-close { min-height: 44px; padding: 8px 18px; border-radius: 999px; border: 3px solid #56000E; background: transparent; color: #56000E; font: 600 var(--t0)/1 var(--font-display); cursor: pointer; }
.lightbox { max-width: min(900px, calc(100vw - 32px)); }
.lb-text { font-family: var(--font-display); font-size: var(--t2); font-weight: 700; color: #56000E; }
.lb-gallery { list-style: none; margin: 0 0 var(--sp3); padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp3); }
@media (min-width: 768px) { .lb-gallery { grid-template-columns: repeat(4, 1fr); } }
.lb-gallery li:nth-child(odd) { transform: rotate(-2deg); } .lb-gallery li:nth-child(even) { transform: rotate(2deg); }
.lb-gallery img { aspect-ratio: 1; object-fit: cover; border-radius: 12px; width: 100%; border: 3px solid var(--ink-line); }
.lb-name { display: block; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: var(--t1); margin-top: var(--sp2); }
.lb-star { color: #56000E; font-size: var(--t0); }
.lb-note { font-size: 16px; color: #56000E; font-weight: 600; text-align: right; max-width: none; }

/* portfolio */
.tabs { display: flex; gap: var(--sp2); overflow-x: auto; padding: var(--sp2) var(--sp1); margin: var(--sp4) 0 var(--sp3); }
.tab { flex: none; min-height: 44px; padding: 10px 18px; border-radius: 999px; border: 3px solid var(--line); background: transparent; color: var(--fg); font: 600 var(--t0)/1 var(--font-display); cursor: pointer; }
.tab[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp2); align-items: center; }
.chips-label { font-weight: 700; margin-right: var(--sp1); }
.chip { min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 2px solid var(--ink-line); background: var(--chip-bg); color: var(--chip-fg); font: 600 var(--t0)/1 var(--font-body); cursor: pointer; }
.chip[aria-pressed="true"] { outline: 3px solid var(--focus); outline-offset: 2px; }
.chip-sm { margin: var(--sp2) var(--sp2) 0 0; }
.pf-head { padding-bottom: var(--sp5); }
.pf { padding-top: var(--sp5); }
.pf-grid { list-style: none; margin: 0; padding: 0; columns: 1; column-gap: var(--sp5); }
@media (min-width: 768px) { .pf-grid { columns: 2; } }
@media (min-width: 1024px) { .pf-grid { columns: 3; } }
.piece { break-inside: avoid; margin-bottom: var(--sp5); }
.piece[hidden] { display: none; }
.piece figure { margin: 0; }
.piece-frame { display: block; overflow: hidden; border-radius: var(--radius); }
.piece-frame img { width: 100%; }
.piece figcaption { padding-top: var(--sp2); }
.piece-title { display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--t1); }
.piece-why { display: block; color: var(--muted); }
.pf-foot { display: flex; flex-wrap: wrap; gap: var(--sp4); align-items: flex-end; justify-content: space-between; margin-top: var(--sp5); }
.like-h { font-family: var(--font-display); font-weight: 600; font-size: var(--t2); margin-bottom: var(--sp2); }

/* world */
.world-hero { padding: 0; position: relative; }
.world-hero-art img { width: 100%; max-height: 70vh; object-fit: cover; }
.world-hero-text { padding-top: var(--sp5); padding-bottom: var(--sp5); }
.cast-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp4); }
@media (min-width: 1024px) { .cast-grid { grid-template-columns: repeat(3, 1fr); } }
.cast-card { display: flex; flex-direction: column; gap: var(--sp1); }
.cast-art { display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius); background: #FFFFFF; }
.cast-art img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.cast-name { font-family: var(--font-display); font-weight: 700; font-size: var(--t2); margin-top: var(--sp2); }
.world-follow { margin: var(--sp6) 0; padding: var(--sp5); border-radius: var(--radius); background: var(--card); color: var(--card-fg, var(--fg)); }
.world-nav { display: flex; justify-content: space-between; gap: var(--sp3); flex-wrap: wrap; }
.world-nav a { display: inline-block; padding: 10px 0; min-height: 44px; font-weight: 700; }

/* hire */
.svc-jump { display: flex; flex-wrap: wrap; gap: var(--sp2); margin-top: var(--sp4); }
.svc-jump a { display: inline-block; padding: 10px 16px; min-height: 44px; border-radius: 999px; border: 3px solid var(--line); color: var(--fg); text-decoration: none; font-weight: 600; }
.svc-list { padding-top: 0; }
.svc-block { padding: var(--sp6) 0; }
.svc-block-head { display: flex; flex-wrap: wrap; gap: var(--sp3); align-items: flex-end; justify-content: space-between; }
.tier-list { list-style: none; margin: var(--sp4) 0; padding: 0; display: grid; gap: var(--sp4); }
@media (min-width: 768px) { .tier-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tier-list { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
.tier { display: flex; flex-direction: column; gap: var(--sp1); padding: var(--sp3) var(--sp3) var(--sp4); border-radius: var(--radius); background: var(--card); color: var(--card-fg, var(--fg)); }
.tier-ex { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: var(--sp2); margin-bottom: var(--sp3); }
.tier-ex img { aspect-ratio: 1; width: 100%; object-fit: cover; border-radius: 10px; }
.tier-price { font-family: var(--font-display); font-size: var(--t3); font-weight: 700; line-height: 1.1; }
.tier-name { font-family: var(--font-display); font-weight: 600; font-size: var(--t1); }
.guide-grid { display: grid; gap: var(--sp5); margin-top: var(--sp4); }
@media (min-width: 1024px) { .guide-grid { grid-template-columns: repeat(3, 1fr); } }
.roles { margin: 0; } .roles dt { font-weight: 700; margin-top: var(--sp3); } .roles dd { margin: 0; }
.checks { padding-left: 1.2em; margin: 0; }
.checks li { margin-bottom: var(--sp2); }
.fee { margin-top: var(--sp5); padding: var(--sp4); border-radius: var(--radius); background: var(--card); color: var(--card-fg, var(--fg)); max-width: none; }
.inq-grid { display: grid; gap: var(--sp6); }
@media (min-width: 1024px) { .inq-grid { grid-template-columns: 5fr 7fr; } }
.inq-grid > * { min-width: 0; }
.steps { padding-left: 1.4em; margin: 0 0 var(--sp4); }
.steps li { margin-bottom: var(--sp2); font-weight: 600; }
.form { display: grid; gap: var(--sp3); min-width: 0; }
.form label { display: grid; gap: var(--sp1); font-weight: 600; }
.form input, .form select, .form textarea { font: inherit; width: 100%; min-width: 0; min-height: 48px; padding: 10px 14px; border-radius: 10px; border: 3px solid var(--ink-line); background: #FFFFFF; color: #0A0024; }
.form .check { grid-template-columns: 24px 1fr; align-items: start; font-weight: 400; }
.form .check input { min-height: 24px; width: 24px; height: 24px; margin: 0; }

/* ---------- footer parts shared by all three (C3 to C6) ---------- */
.foot-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp4) var(--sp5); }
@media (min-width: 768px) { .foot-cols { grid-template-columns: repeat(3, auto); justify-content: start; } }
.fcol ul { list-style: none; margin: 0; padding: 0; }
.fcol a { display: inline-block; padding: 10px 0; min-height: 44px; color: inherit; }
.col-h { font-family: var(--font-display); font-weight: 700; font-size: var(--t1); margin: 0 0 var(--sp1); color: var(--col-h, inherit); }
.soc-icons { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp2); }
.soc { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: var(--soc-fg, currentColor); background: var(--soc-bg, transparent); border: 2px solid var(--soc-line, currentColor); transition: transform var(--dur) ease; }
.soc svg { width: 22px; height: 22px; fill: currentColor; }
.soc:hover { transform: translateY(-2px) scale(1.06); }
.credit { margin: 0; font-size: var(--t0); }
.fine { margin-top: var(--sp4); }
.fine p { margin: 0 0 var(--sp2); }
.fine-licence { font-size: 16px; }
/* the one 14 px exemption (C5), at AA contrast on its ground */
.fine-small { font-size: 14px; line-height: 1.5; }
.preview-note { font-size: 16px; }

/* ---------- the hands (C8): previous, top, next. Her images, three states each ---------- */
.hands { padding: var(--sp5) 0 var(--sp4); background: var(--hands-bg, transparent); }
.hands ul { list-style: none; margin: 0 auto; padding: 0 var(--gutter); max-width: 720px; display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp3); }
.hand { display: flex; flex-direction: column; align-items: center; gap: var(--sp1); text-decoration: none; color: var(--hands-fg, var(--fg)); font: 600 var(--t0)/1.2 var(--font-display); min-width: 44px; padding: var(--sp1); border-radius: 16px; }
.hand-img { display: block; position: relative; }
.hand-img img { display: block; height: auto; }
.hand-prev .hand-img img, .hand-next .hand-img img { width: 112px; }
.hand-top .hand-img img { width: 58px; }
@media (min-width: 1024px) { .hand-prev .hand-img img, .hand-next .hand-img img { width: 150px; } .hand-top .hand-img img { width: 78px; } }
.hand .h-hover, .hand .h-press { display: none; }
.hand:hover .h-rest, .hand:focus-visible .h-rest { display: none; }
.hand:hover .h-hover, .hand:focus-visible .h-hover { display: block; }
.hand:active .h-rest, .hand:active .h-hover { display: none; }
.hand:active .h-press { display: block; }
.hand-lbl { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hand-to { font-family: var(--font-body); font-weight: 400; font-size: 16px; }

/* ---------- the intro video (C9) ---------- */
.intro-vid { margin: 0; }
.vid-frame { position: relative; border-radius: var(--radius); overflow: hidden; background: #FFFFFF; aspect-ratio: 6 / 5; }
.vid-frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
.intro-vid figcaption { padding-top: var(--sp2); }

/* ---------- take a sticker (C7, R3-1) ---------- */
.take { display: grid; gap: var(--sp4); align-items: center; }
@media (min-width: 768px) { .take { grid-template-columns: 1fr 240px; } }
.take-h { font: 700 var(--t4)/1 var(--font-display); margin: 0 0 var(--sp2); }
.btn-peel, .btn-save { margin: var(--sp2) var(--sp2) 0 0; }
.take-status { min-height: 1.6em; margin: var(--sp2) 0 0; font-weight: 600; }
.sticker-book { list-style: none; margin: var(--sp3) 0 0; padding: 0; display: flex; gap: var(--sp2); }
.slot { width: 52px; height: 52px; border-radius: 50%; border: 2px dashed currentColor; display: grid; place-items: center; font: 700 var(--t1)/1 var(--font-display); }
.slot.got { border-style: solid; background: #FFFFFF; overflow: hidden; }
.slot.got .slot-t { display: none; }
.slot.got::after { content: ''; width: 100%; height: 100%; background: url(sticker-destiny-gecko.png) 58% 40% / 260% no-repeat; }
.peel-stage { display: grid; place-items: center; }
.peel { margin: 0; width: 220px; position: relative; transform: rotate(-4deg); transition: transform 600ms cubic-bezier(.3, 1.4, .5, 1), filter 600ms ease; filter: drop-shadow(4px 6px 0 rgba(43, 0, 7, .35)); }
.peel img { width: 100%; height: auto; }
.peel-corner { position: absolute; right: 18%; bottom: 6%; width: 36px; height: 36px; background: linear-gradient(135deg, #FFFFFF 0 48%, rgba(43, 0, 7, .25) 52% 100%); border-radius: 0 0 10px 0; }
.take.peeled .peel { transform: rotate(8deg) translateY(-14px) scale(1.06); filter: drop-shadow(10px 18px 0 rgba(43, 0, 7, .3)); }
.take.peeled .peel-corner { display: none; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* Revision 1 (Step 4506.fix.1): her own Hire Me images (consultation and commission tiers, home thumbnails). Shown
   whole, never cropped, on a white mat, because they are finished pieces with their own framing. */
.tier-own { display: block; }
.tier-own picture { display: block; }
.tier-own img, img.own { width: 100%; aspect-ratio: 1; object-fit: contain; background: #FFFFFF; border-radius: 10px; }