/* File: apps/cf-pages/sakeozo-directions/src/r3/r3-3.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-3.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 keep a soft rounded square (a circle would crop them). New in round 3 (Step 4506.site.1).
   R3-3 Highlights: the menu is a row of round story highlights (a picture and a word each), the way her visitors
   already move on Instagram. Work comes first, one piece at a time on a stage the visitor steps through (it never
   moves on its own). Circles and 32 px rounded cards, soft shadows, lots of cream space. Fredoka + Lexend.
   Backgrounds: cream, paper, white, peach, matcha, wine, wine deep (button hover). Midnight is text only. */
:root {
  --ground: #FEF1DF; --pattern-bg: #FEF1DF; --pattern-size: 240px; --fg: #0A0024; --muted: #0A0024; --line: #56000E; --card: #FFFFFF;
  --accent: #F2C0AB; --accent-hover: #FEF1DF; --accent-fg: #56000E; --btn-line: #56000E; --link: #56000E; --focus: #56000E; --eyebrow: #4B5A0F;
  --btn2-bg: transparent; --btn2-fg: #56000E; --btn2-line: #56000E;
  --chip-bg: #FFFFFF; --chip-fg: #0A0024; --tst-bg: #FFFFFF; --tst-fg: #0A0024; --tst-name: #56000E; --tst-role: #4B5A0F;
  --ph: #56000E; --radius: 32px; --fade-to: #FFFBF4; --ink-line: #56000E;
  --soft: 0 14px 36px rgba(86, 0, 14, .10), 0 2px 6px rgba(86, 0, 14, .06);
  --doll-shadow: 0 10px 28px rgba(86, 0, 14, .22);
}
.btn { border-width: 2px; }
.btn-primary { box-shadow: 0 6px 16px rgba(86, 0, 14, .16); }
.btn-primary:hover { background: #FEF1DF; }
.h2, .h3 { color: #56000E; }
section { position: relative; }

/* header: the brand, the doll, and the highlights row as the only menu */
.hl-hdr { padding-top: var(--sp2); background: #FEF1DF; }
.hl-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp3); min-height: 64px; }
.brand-name { display: flex; flex-direction: column; line-height: 1.1; }
.brand-sub { font-family: var(--font-body); font-weight: 400; font-size: 16px; }
.doll { border-color: #F2C0AB; box-shadow: var(--soft); }
.highlights ul { list-style: none; margin: 0 auto; padding: var(--sp2) 0 var(--sp3); display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp2); max-width: 640px; }
.hl { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: #0A0024; font: 600 16px/1.2 var(--font-display); text-align: center; border-radius: 16px; padding: 2px; }
.hl-ring { display: block; width: 60px; height: 60px; border-radius: 50%; padding: 3px; background: #FFFFFF; box-shadow: 0 0 0 3px #F2C0AB; transition: transform var(--dur) ease, box-shadow var(--dur) ease; }
.hl-ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.hl:hover .hl-ring { transform: scale(1.06); box-shadow: 0 0 0 3px #88A31F; }
.hl[aria-current="page"] .hl-ring { box-shadow: 0 0 0 4px #56000E; }
.hl[aria-current="page"] { color: #56000E; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
@media (min-width: 1024px) { .hl-ring { width: 84px; height: 84px; } .hl { font-size: var(--t0); } }

/* home: a short hello, then the stage */
.stage-intro { background: #FEF1DF; text-align: center; padding: var(--sp5) 0 var(--sp4); }
.stage-intro p { margin-left: auto; margin-right: auto; }
.stage-intro .display { color: #56000E; max-width: 18ch; margin-left: auto; margin-right: auto; font-size: var(--t5); }
@media (min-width: 1024px) { .stage-intro .display { font-size: var(--t7); } }
.stage-intro .lead { max-width: 52ch; }
.stage { padding-top: 0; }
.segs { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp2); margin-bottom: var(--sp4); }
.seg { min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 2px solid #56000E; background: #FFFFFF; color: #0A0024; font: 600 var(--t0)/1 var(--font-display); cursor: pointer; }
.seg[aria-pressed="true"] { background: #56000E; color: #FEF1DF; }
.stage-box { background: #FFFFFF; border-radius: 40px; box-shadow: var(--soft); padding: var(--sp3); max-width: 1040px; margin: 0 auto; }
@media (min-width: 1024px) { .stage-box { padding: var(--sp5); } }
.stage-track { list-style: none; margin: 0; padding: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; border-radius: 28px; }
.stage-track::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; scroll-snap-align: center; }
.slide[hidden] { display: none; }
.slide figure { margin: 0; }
.slide-frame { display: block; position: relative; aspect-ratio: 1; background: #FFFBF4; border-radius: 28px; overflow: hidden; }
@media (min-width: 768px) { .slide-frame { aspect-ratio: 16 / 10; } }
.slide-frame img { width: 100%; height: 100%; object-fit: contain; }
.slide-frame .hero-fade { height: 20%; }
.slide figcaption { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--sp2); padding-top: var(--sp3); text-align: center; }
.slide-t { font: 700 var(--t1)/1.2 var(--font-display); color: #56000E; }
.slide-c { background: #88A31F; color: #0A0024; border-radius: 999px; padding: 2px 12px; font-weight: 600; }
.stage-ctl { display: flex; align-items: center; justify-content: center; gap: var(--sp4); margin-top: var(--sp3); }
.step { width: 56px; height: 56px; border-radius: 50%; border: 0; background: #56000E; color: #FEF1DF; font: 700 36px/1 var(--font-display); cursor: pointer; display: grid; place-items: center; box-shadow: var(--soft); }
.step:hover { background: #3F000A; }
.stage-count { margin: 0; font-weight: 600; min-width: 6ch; text-align: center; }
.stage-foot { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--sp4); margin-top: var(--sp5); }

.me-card { display: grid; gap: var(--sp5); align-items: center; background: #FFFFFF; border-radius: 40px; box-shadow: var(--soft); padding: var(--sp5) var(--sp4); }
@media (min-width: 1024px) { .me-card { grid-template-columns: 5fr 7fr; padding: var(--sp6); } }
.pet-circles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp3); }
.pet-circles img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 4px solid #F2C0AB; }
.pet-circles span { display: block; text-align: center; font: 600 var(--t1)/1.2 var(--font-display); margin-top: var(--sp1); }

.pebble-row { list-style: none; margin: var(--sp4) 0 0; padding: 0; display: grid; gap: var(--sp4); }
@media (min-width: 1024px) { .pebble-row { grid-template-columns: repeat(3, 1fr); } }
.pebble { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp2); padding: var(--sp4); background: #FFFFFF; border-radius: 40px; box-shadow: var(--soft); color: #0A0024; text-decoration: none; height: 100%; }
.pebble-art { display: block; width: 160px; height: 160px; border-radius: 50%; overflow: hidden; border: 4px solid #FEF1DF; }
.pebble-art img { width: 100%; height: 100%; object-fit: cover; }
.pebble-from { background: #F2C0AB; color: #56000E; border-radius: 999px; padding: 4px 14px; font: 700 var(--t0)/1.2 var(--font-display); }
.pebble-t { font: 700 var(--t2)/1.15 var(--font-display); color: #56000E; }
.pebble:hover { transform: translateY(-3px); }

.words-row { list-style: none; margin: var(--sp4) 0 0; padding: var(--sp2) var(--sp1) var(--sp4); display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: var(--sp4); overflow-x: auto; scroll-snap-type: x mandatory; }
@media (min-width: 1024px) { .words-row { grid-auto-columns: calc(50% - 12px); } }
.words-row li { scroll-snap-align: start; }
.words .tst { height: 100%; box-shadow: var(--soft); }

.support-bubble .sb { background: #56000E; color: #FEF1DF; border-radius: 48px; padding: var(--sp6) var(--sp4); text-align: center; }
.sb .eyebrow { color: #F2C0AB; } .sb .h2 { color: #FEF1DF; } .sb p { margin-left: auto; margin-right: auto; }
.sb .cta-row { justify-content: center; }
.sb .btn-secondary { --btn2-fg: #FEF1DF; --btn2-line: #FEF1DF; }

/* inner pages: centred heads, round frames, white rounded cards */
.about-intro, .pf-head, .hire-head { background: #FEF1DF; }
.about-intro .display, .pf-head .display, .hire-head .display { color: #56000E; }
.vid-r3-3 .vid-frame { border-radius: 50% 50% 40px 40px / 42% 42% 40px 40px; box-shadow: var(--soft); border: 6px solid #FFFFFF; }
.off { background: #FFFFFF; }
.off-art img { border-radius: 50%; aspect-ratio: 1; object-fit: cover; }
.pets { background: #FEF1DF; }
.pet-card { --card: #FFFFFF; box-shadow: var(--soft); border-radius: 32px; }
.pet-photo { border-radius: 50%; }
.timeline { background: #FFFFFF; }
.tl li { display: grid; grid-template-columns: 72px 1fr; gap: var(--sp3); align-items: center; padding: var(--sp2) 0; }
.tl-year { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: #F2C0AB; color: #56000E; font: 700 var(--t0)/1 var(--font-display); }
.tab { border: 2px solid #56000E; background: #FFFFFF; }
.tab[aria-selected="true"] { background: #56000E; color: #FEF1DF; border-color: #56000E; }
.pf { background: #FFFFFF; }
.piece-frame { border-radius: 28px; }
.world-hero-art img { border-radius: 0 0 48px 48px; }
.world-hero-text { text-align: center; }
.world-hero-text p { margin-left: auto; margin-right: auto; }
.world-hero-text .display { color: #56000E; }
.cast { background: #FFFFFF; }
.cast-art { border-radius: 50%; }
.cast-card { align-items: center; text-align: center; }
.world-follow { --card: #FFFFFF; box-shadow: var(--soft); text-align: center; }
.world-follow p { margin-left: auto; margin-right: auto; }

/* hire: one services block as an accordion */
.svc-acc .wrap { display: grid; gap: var(--sp4); }
.acc { background: #FFFFFF; border-radius: 32px; box-shadow: var(--soft); }
.acc summary { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp2) var(--sp3); padding: var(--sp4); min-height: 72px; cursor: pointer; border-radius: 32px; }
.acc summary::-webkit-details-marker { display: none; }
.acc-t { font: 700 var(--t2)/1.15 var(--font-display); color: #56000E; flex: 1 1 14ch; }
.acc-f { background: #F2C0AB; color: #56000E; border-radius: 999px; padding: 4px 14px; font: 700 var(--t0)/1.2 var(--font-display); }
.acc-ico { width: 44px; height: 44px; border-radius: 50%; background: #56000E; position: relative; flex: none; }
.acc-ico::before, .acc-ico::after { content: ''; position: absolute; left: 12px; right: 12px; top: 20px; height: 4px; border-radius: 2px; background: #FEF1DF; }
.acc-ico::after { transform: rotate(90deg); transition: transform var(--dur) ease; }
.acc[open] .acc-ico::after { transform: rotate(0); }
.acc-body { padding: 0 var(--sp4) var(--sp5); }
.tier { --card: #FEF1DF; border-radius: 28px; }
.tier-ex img { border-radius: 50%; }
.tier-price { color: #56000E; }
.guide { background: #FFFFFF; }
.fee { --card: #FEF1DF; }
.inquiry { background: #FEF1DF; }

/* the footer: wine, link columns on one side, a cream bubble with the goodbye and round icons on the other */
.hands { --hands-bg: #FEF1DF; }
.bubble-foot { background: #56000E; color: #FEF1DF; padding: var(--sp7) 0 var(--sp5); --col-h: #F2C0AB; }
.bubble-foot .fcol a { color: #FEF1DF; }
.bubble-grid { display: grid; gap: var(--sp6); align-items: center; margin-bottom: var(--sp5); }
@media (min-width: 1024px) { .bubble-grid { grid-template-columns: 1fr 420px; } }
.bye-bubble { background: #FEF1DF; color: #56000E; border-radius: 48px 48px 48px 12px; padding: var(--sp5) var(--sp4); text-align: center; }
.bye-h { font: 700 var(--t4)/1.05 var(--font-display); margin: 0 auto var(--sp1); }
.bye-cat { font-size: var(--t2); margin: 0 auto var(--sp3); }
.bye-bubble .soc-icons { justify-content: center; }
.soc-round .soc { --soc-bg: #56000E; --soc-fg: #FEF1DF; --soc-line: #56000E; }
.bubble-foot .credit, .bubble-foot .fine { color: #FEF1DF; }

/* Revision 1 (Step 4506.fix.1): her own Hire Me images are finished pieces; a circle would crop them. */
.tier-own img { border-radius: 24px; }