/* File: apps/cf-pages/sakeozo-directions/src/r3/r3-2.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-2.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-2 Bento Board: soft rounded tiles with gentle depth on cream. The home page is one board; each tile is the way
   into one page, and every page leads back to the board (hub and spoke). No menu bar: a breadcrumb and a round
   Board button on inner pages. Fredoka + Lexend (her round 1 pick, unchanged).
   Backgrounds: cream, paper, white, peach, matcha, matcha light (button hover), wine. Midnight is text only. */
:root {
  --ground: #FEF1DF; --pattern-bg: #FEF1DF; --pattern-size: 200px; --fg: #0A0024; --muted: #0A0024; --line: #56000E; --card: #FFFFFF;
  --accent: #88A31F; --accent-hover: #9DB83A; --accent-fg: #0A0024; --link: #56000E; --focus: #56000E; --eyebrow: #4B5A0F;
  --btn2-bg: #FFFFFF; --btn2-fg: #56000E; --btn2-line: #56000E;
  --chip-bg: #F2C0AB; --chip-fg: #0A0024; --tst-bg: #FFFFFF; --tst-fg: #0A0024; --tst-name: #56000E; --tst-role: #4B5A0F;
  --ph: #56000E; --radius: 28px; --fade-to: #FFFFFF; --ink-line: #56000E;
  --soft: 0 12px 32px rgba(86, 0, 14, .10), 0 2px 6px rgba(86, 0, 14, .06);
  --doll-shadow: 0 10px 28px rgba(86, 0, 14, .22);
}
.btn { box-shadow: 0 6px 16px rgba(86, 0, 14, .14); }
.btn:hover { transform: translateY(-2px); }
.h2, .h3 { color: #56000E; }

/* header: brand, breadcrumb, doll and the Board button. No menu: the board is the menu */
.board-hdr { background: #FEF1DF; }
.board-hdr .hdr { gap: var(--sp3); }
.crumb ol { list-style: none; margin: 0; padding: 6px 8px; display: flex; align-items: center; gap: var(--sp1); background: #FFFFFF; border-radius: 999px; box-shadow: var(--soft); }
.crumb li { display: flex; align-items: center; }
.crumb li + li::before { content: '/'; margin: 0 6px; color: #56000E; }
.crumb a, .crumb span { display: inline-block; padding: 8px 12px; min-height: 44px; line-height: 28px; font: 600 var(--t0)/28px var(--font-display); }
.crumb a { color: #56000E; text-decoration: none; }
.crumb span[aria-current] { color: #0A0024; }
.board-btn { display: inline-flex; align-items: center; gap: var(--sp2); min-height: 48px; padding: 8px 18px 8px 10px; border-radius: 999px; background: #56000E; color: #FEF1DF; font: 600 var(--t0)/1 var(--font-display); text-decoration: none; box-shadow: var(--soft); }
.board-btn:hover { background: #3F000A; }
.board-ico { display: grid; grid-template-columns: 12px 12px; gap: 3px; padding: 4px; }
.board-ico i { width: 12px; height: 12px; border-radius: 4px; background: #F2C0AB; }
.doll { border-color: #FFFFFF; box-shadow: var(--soft); }
@media (max-width: 600px) { .crumb { display: none; } }
@media (max-width: 420px) { .brand-name { display: none; } }

/* the board: one grid of rounded tiles, each block once */
.board { display: grid; gap: var(--sp4); padding-top: var(--sp3); padding-bottom: var(--sp6); }
@media (min-width: 768px) { .board { grid-template-columns: repeat(6, 1fr); } .board > * { grid-column: span 6; } .tile-me, .tile-hire, .tile-quote, .tile-follow { grid-column: span 3; } }
@media (min-width: 1024px) {
  .board { grid-template-columns: repeat(12, 1fr); gap: var(--sp4); }
  .tile-feature { grid-column: 1 / span 8; grid-row: span 2; } .tile-intro { grid-column: 9 / span 4; grid-row: span 2; }
  .tile-mediums { grid-column: span 12; } .tile-worlds { grid-column: span 7; } .tile-me { grid-column: span 5; }
  .tile-hire { grid-column: span 5; } .tile-quote { grid-column: span 4; } .tile-follow { grid-column: span 3; } }
.board > section { padding: var(--sp5); border-radius: var(--radius); box-shadow: var(--soft); background: #FFFFFF; min-width: 0; }
.tile-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp2); }
.tile-head .h3 { margin-bottom: var(--sp2); }

.board > .tile-feature { padding: 0; overflow: hidden; position: relative; }
.feature-link { display: block; height: 100%; color: #0A0024; text-decoration: none; }
.feature-art { display: block; position: relative; height: 100%; min-height: 300px; }
.feature-art img { width: 100%; height: 100%; object-fit: cover; }
.tile-feature .hero-fade { height: 35%; }
.feature-cap { position: absolute; left: var(--sp4); bottom: var(--sp4); display: flex; flex-direction: column; background: #FFFFFF; border-radius: 22px; padding: 10px 18px; box-shadow: var(--soft); }
.feature-t { font: 700 var(--t1)/1.2 var(--font-display); color: #56000E; }
.feature-c { font-size: var(--t0); }
@media (min-width: 1024px) { .feature-art { min-height: 560px; } }

.board > .tile-intro { background: #F2C0AB; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; }
.tile-intro .eyebrow { color: #56000E; }
.tile-intro .display { color: #56000E; font-size: var(--t5); }
@media (min-width: 1024px) { .tile-intro .display { font-size: var(--t6); } }
.tile-intro .lead { color: #0A0024; }
.tile-intro .btn { margin-top: var(--sp2); }

.med-row { list-style: none; margin: var(--sp3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp4) var(--sp3); }
@media (min-width: 1024px) { .med-row { grid-template-columns: repeat(5, 1fr); } }
.med { display: flex; flex-direction: column; align-items: center; gap: var(--sp2); text-decoration: none; color: #0A0024; }
.med-pic { display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: var(--soft); transition: transform var(--dur) ease; }
.med-pic img { width: 100%; height: 100%; object-fit: cover; }
.med:hover .med-pic { transform: scale(1.04); }
.med-t { font: 600 var(--t0)/1.2 var(--font-display); text-align: center; }

.board > .tile-worlds { background: #88A31F; }
.tile-worlds .h3 { color: #0A0024; }
.world-dots { list-style: none; margin: var(--sp3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp3); }
.world-dots a { display: flex; flex-direction: column; align-items: center; gap: var(--sp1); color: #0A0024; text-decoration: none; text-align: center; font: 600 var(--t0)/1.25 var(--font-display); }
.wd-pic { display: block; width: 100%; max-width: 120px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 4px solid #FFFFFF; }
.wd-pic img { width: 100%; height: 100%; object-fit: cover; }

.board > .tile-me { background: #FFFBF4; }
.pet-dots { list-style: none; margin: var(--sp3) 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp2); }
.pet-dots img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
.pet-dots span { display: block; text-align: center; font: 600 var(--t0)/1.3 var(--font-display); margin-top: var(--sp1); }

.board > .tile-hire { background: #56000E; color: #FEF1DF; }
.tile-hire .h3 { color: #FEF1DF; }
.price-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp2); }
.price-list a { display: flex; justify-content: space-between; align-items: center; gap: var(--sp3); padding: 12px 14px 12px 18px; min-height: 56px; border-radius: 20px; background: #FEF1DF; color: #0A0024; text-decoration: none; font-weight: 600; }
.price-list a:hover { background: #FFFFFF; }
.pl-from { flex: none; background: #F2C0AB; color: #56000E; border-radius: 999px; padding: 4px 12px; font-family: var(--font-display); }

.tile-quote .tst { padding: 0; box-shadow: none; grid-template-columns: 56px 1fr; }
.tile-quote .avatar { width: 56px; height: 56px; }
.board > .tile-follow { background: #FFFBF4; }

/* inner pages: each section's content sits in one rounded tile on the cream ground */
.dir-r3-2 main > section:not(.world-hero) > .wrap { background: #FFFFFF; border-radius: 32px; box-shadow: var(--soft); padding-top: var(--sp5); padding-bottom: var(--sp5); max-width: calc(var(--wrap) - 2 * var(--gutter)); }
.dir-r3-2 main > section { padding: var(--sp3) var(--gutter); }
@media (max-width: 767px) { .dir-r3-2 main > section { padding: var(--sp2) 12px; } .dir-r3-2 main > section:not(.world-hero) > .wrap { padding-left: 20px; padding-right: 20px; } }
.about-intro > .wrap, .hire-head > .wrap, .pf-head > .wrap { background: #F2C0AB !important; }
.about-intro .eyebrow, .hire-head .eyebrow, .pf-head .eyebrow { color: #56000E; }
.about-intro .display, .hire-head .display, .pf-head .display { color: #56000E; }
.vid-r3-2 .vid-frame { border-radius: 24px; box-shadow: var(--soft); }
.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: #F2C0AB; border: 3px solid #56000E; }
.tl-year { font-family: var(--font-display); font-weight: 700; color: #56000E; font-size: var(--t1); }
.pet-card { --card: #FFFBF4; }
.pet-photo { border-radius: 50%; }
.off-art img { border-radius: 50% 50% 28px 28px; }
.tab { border-color: #56000E; background: #FFFFFF; }
.piece-frame { border-radius: 24px; box-shadow: var(--soft); }
.world-hero { padding: var(--sp3) var(--gutter) 0; }
.world-hero-art { max-width: calc(var(--wrap) - 2 * var(--gutter)); margin: 0 auto; border-radius: 32px; overflow: hidden; box-shadow: var(--soft); }
.world-hero-text { max-width: calc(var(--wrap) - 2 * var(--gutter)); background: #F2C0AB; border-radius: 32px; margin-top: var(--sp3); }
.world-hero-text .display { color: #56000E; }
.cast-art { border-radius: 50%; box-shadow: var(--soft); }
.world-follow { --card: #FFFBF4; }

/* hire: one services block, switched by tabs */
.stabs { display: flex; flex-wrap: wrap; gap: var(--sp2); margin-bottom: var(--sp4); }
.stab { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 64px; padding: 10px 20px; border-radius: 24px; border: 2px solid #56000E; background: #FFFFFF; color: #0A0024; cursor: pointer; text-align: left; font: 600 var(--t0)/1.2 var(--font-display); }
.stab-f { font-family: var(--font-body); font-weight: 400; }
.stab[aria-selected="true"] { background: #56000E; color: #FEF1DF; }
.tier { --card: #FFFBF4; }
.tier-ex img { border-radius: 50%; }
.tier-price { color: #56000E; }
.guide .fee { --card: #FFFBF4; }
.inquiry > .wrap { background: #F2C0AB !important; }

/* the footer: one wine tile. Link columns on one side, a cream "Say hi" tile with round icons on the other */
.board-foot { padding: var(--sp4) 0 var(--sp6); }
.foot-tile { background: #56000E; color: #FEF1DF; border-radius: 36px; padding: var(--sp6) var(--sp5) var(--sp5); box-shadow: var(--soft); --col-h: #F2C0AB; }
@media (max-width: 767px) { .foot-tile { padding: var(--sp5) 20px; } }
.foot-tile-grid { display: grid; gap: var(--sp5); margin-bottom: var(--sp5); }
@media (min-width: 1024px) { .foot-tile-grid { grid-template-columns: 1fr 360px; align-items: start; } }
.foot-tile .fcol a { color: #FEF1DF; }
.hello-tile { background: #FEF1DF; color: #0A0024; border-radius: 28px; padding: var(--sp4); --col-h: #56000E; }
.hello-tile .mail { display: inline-block; padding: 10px 0; min-height: 44px; font-weight: 700; color: #56000E; margin-bottom: var(--sp2); word-break: break-all; }
.soc-round .soc { --soc-bg: #56000E; --soc-fg: #FEF1DF; --soc-line: #56000E; }
.hands { --hands-fg: #0A0024; --hands-bg: #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; }