/* Tracy-Lynn Bergeron — storybook village site. Mobile-first. */
:root{
  --cream:#f7efe0; --paper:#fbf6ea; --paper-edge:#eadfc8;
  --ink:#3a3126; --ink-soft:#5e5242;
  --sage:#a9bd9a; --sage-deep:#4f6b43; --sage-tint:#e6eddc;
  --butter:#f4dc8f; --butter-tint:#fbf0c9;
  --blue:#a9c8de; --blue-deep:#355f80; --blue-tint:#e3eef5;
  --rose:#b5553c;
  --hand:"Caveat", "Patrick Hand", cursive;
  --head:"Fraunces", Georgia, serif;
  --body:"Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius:18px;
  --shadow:0 2px 0 rgba(90,70,40,.08), 0 10px 30px rgba(90,70,40,.10);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font:400 1.0625rem/1.65 var(--body);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue-deep);text-underline-offset:3px}
a:hover{color:var(--rose)}
:focus-visible{outline:3px solid var(--blue-deep);outline-offset:3px;border-radius:8px}
.skip{position:absolute;left:-9999px;top:0;background:var(--paper);padding:.75rem 1rem;z-index:100}
.skip:focus{left:.5rem;top:.5rem}
h1,h2,h3{font-family:var(--head);font-weight:600;line-height:1.2;color:var(--ink)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Buttons & chips ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:.7rem 1.3rem;border-radius:999px;
  font:700 1rem/1.2 var(--body);text-decoration:none;border:2px solid var(--ink);background:var(--butter);color:var(--ink);cursor:pointer;
  box-shadow:0 3px 0 var(--ink);transition:transform .15s ease, box-shadow .15s ease}
.btn:hover{transform:translateY(-1px);color:var(--ink);box-shadow:0 4px 0 var(--ink)}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.btn.secondary{background:var(--paper)}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.25rem 0}
.chip{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:.45rem 1rem;border-radius:999px;background:var(--paper);
  border:1.5px solid var(--paper-edge);color:var(--ink);text-decoration:none;font:600 1.3rem/1 var(--hand);box-shadow:var(--shadow)}
.chip:hover{background:var(--butter-tint);color:var(--ink)}
.chip svg{width:22px;height:22px;flex:none}
.chips{display:flex;flex-wrap:wrap;gap:.6rem}

/* ---------- Village (homepage) ---------- */
.village{position:relative;width:100%;aspect-ratio:9/16;overflow:hidden;background:#f3e9d6}
.village picture, .village picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.village-title{position:absolute;left:0;right:0;top:2.2%;text-align:center;z-index:3;pointer-events:none;padding:0 1rem}
.village-title h1{margin:0;font:700 clamp(2.4rem,11vw,4.4rem)/.95 var(--hand);color:#4a3a28;letter-spacing:.5px;
  text-shadow:0 2px 0 rgba(255,250,235,.9), 0 0 18px rgba(255,248,230,.95)}
.village-title p{margin:.35rem auto 0;max-width:28ch;font:600 clamp(1.05rem,4.6vw,1.45rem)/1.25 var(--hand);color:#5b4a35;
  text-shadow:0 0 12px rgba(255,248,230,1), 0 1px 0 rgba(255,250,235,.9)}
.clouds{position:absolute;inset:0 0 70% 0;z-index:2;pointer-events:none;overflow:hidden}
.cloud{position:absolute;width:30%;aspect-ratio:3/1;border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,253,246,.85), rgba(255,253,246,0));filter:blur(2px);animation:drift linear infinite}
.cloud.c1{top:4%;left:-30%;animation-duration:70s}
.cloud.c2{top:18%;left:-30%;width:22%;animation-duration:95s;animation-delay:-40s}
.cloud.c3{top:9%;left:-30%;width:38%;animation-duration:120s;animation-delay:-80s;opacity:.7}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(450%)}}
.bob{position:absolute;z-index:2;pointer-events:none;transform-origin:50% 100%;animation:bob 2.6s ease-in-out infinite}
.bob img{width:100%;height:auto}
.bob.desktop{display:none}
.bob.mobile{left:53.5%;top:74.6%;width:23.6%}
@keyframes bob{0%,100%{transform:translateY(0) scale(1,1)}50%{transform:translateY(-1.2%) scale(1.012,.988)}}

.spots{position:absolute;inset:0;z-index:4;margin:0;padding:0;list-style:none}
.spot{position:absolute;display:block;transform:translate(-50%,-50%);border-radius:24px;text-decoration:none;min-width:44px;min-height:44px}
.spot:hover,.spot:focus-visible{background:rgba(255,248,225,.14);box-shadow:0 0 0 3px rgba(255,248,225,.75), 0 0 30px rgba(255,236,170,.6)}
.spot .label{position:absolute;left:50%;bottom:-4px;transform:translate(-50%,50%) rotate(-2deg);white-space:nowrap;
  padding:.15rem .8rem .25rem;border-radius:10px;background:rgba(251,246,234,.95);border:1.5px solid #c9b48c;
  font:700 clamp(1.15rem,4.6vw,1.6rem)/1.15 var(--hand);color:#3e3122;box-shadow:0 3px 10px rgba(80,60,30,.22)}
.spot:nth-child(even) .label{transform:translate(-50%,50%) rotate(1.5deg)}
.spot .tip{display:none}
.spot.desk{display:none}
/* mobile hotspot positions (village-mobile.jpg) */
.m-gate{left:85%;top:42.5%;width:22%;height:12%}
.gate-art{position:absolute;z-index:2;pointer-events:none;transform:translate(-50%,-50%);filter:drop-shadow(0 3px 4px rgba(70,50,20,.25))}
.gate-art.desk{display:none}
.gate-art.mob{left:85%;top:42.5%;width:20%}
.spots .spot.m-gate .label,.spots .spot.d-gate .label{left:auto;right:-6px;transform:translate(0,50%) rotate(1.5deg)}
.m-post{left:32%;top:31%;width:42%;height:17%}
.m-studio{left:41%;top:50.5%;width:44%;height:15%}
.m-pip{left:38%;top:66.5%;width:42%;height:13%}
.m-dog{left:31%;top:84%;width:38%;height:14%}

.home-intro{max-width:46rem;margin:0 auto;padding:1.5rem 1.25rem 0}
.home-intro .lead{font-size:1.15rem}
.nav-chips{padding:1rem 1.25rem 0;justify-content:center}
.guide{max-width:46rem;margin:1.5rem auto 0;padding:0 1.25rem}
.guide h2{font:700 2rem/1.1 var(--hand);margin:0 0 .5rem}
.guide ul{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.guide a{display:flex;gap:.9rem;align-items:center;min-height:56px;padding:.75rem 1rem;border-radius:var(--radius);background:var(--paper);
  border:1.5px solid var(--paper-edge);text-decoration:none;color:var(--ink);box-shadow:var(--shadow)}
.guide a:hover{background:var(--butter-tint)}
.guide strong{display:block;font:700 1.45rem/1.1 var(--hand)}
.guide span{display:block;color:var(--ink-soft);font-size:.98rem;line-height:1.4}
.guide .ico{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--sage-tint);font-size:1.4rem}
.beyond-line{max-width:46rem;margin:1.25rem auto 0;padding:0 1.25rem;color:var(--ink-soft)}
.beyond-line a,.site-footer .beyond a{display:inline-flex;align-items:center;min-height:44px;font:700 1.35rem/1.1 var(--hand);color:var(--sage-deep)}
.closing{max-width:46rem;margin:1.5rem auto 0;padding:0 1.25rem;font-style:italic;color:var(--ink-soft)}

@media (min-width:761px){
  .village{aspect-ratio:16/9;max-height:none}
  .village-title{top:1.6%}
  .village-title h1{font-size:clamp(2.6rem,5vw,4.6rem)}
  .village-title p{font-size:clamp(1.1rem,1.9vw,1.6rem);max-width:none}
  .clouds{inset:0 0 72% 0}
  .cloud{width:18%}
  .cloud.c2{width:13%}.cloud.c3{width:22%}
  .bob.mobile{display:none}
  .bob.desktop{display:block;left:41.4%;top:59.7%;width:14.1%}
  .spot.mob{display:none}
  .spot.desk{display:block}
  .spot .label{font-size:clamp(1.2rem,1.9vw,1.75rem)}
  .spot .tip{display:block;position:absolute;left:50%;top:0;transform:translate(-50%,-110%);width:max-content;max-width:260px;
    padding:.55rem .85rem;border-radius:12px;background:var(--paper);border:1.5px solid #c9b48c;color:var(--ink);
    font:500 .98rem/1.35 var(--body);box-shadow:0 6px 18px rgba(80,60,30,.22);opacity:0;pointer-events:none;transition:opacity .2s ease, transform .2s ease}
  .spot:hover .tip,.spot:focus-visible .tip{opacity:1;transform:translate(-50%,-118%)}
  /* desktop hotspot positions (village-desktop.jpg) */
  .d-post{left:20.5%;top:28%;width:21%;height:34%}
  .d-studio{left:50%;top:35%;width:19%;height:30%}
  .d-gate{left:92.5%;top:47%;width:10%;height:17%}
  .d-dog{left:17%;top:68%;width:19%;height:30%}
  .d-pip{left:76.5%;top:73%;width:21%;height:31%}
  .d-gate .tip{left:auto;right:0;transform:translate(0,-110%)}
  .d-gate:hover .tip,.d-gate:focus-visible .tip{transform:translate(0,-118%)}
  .gate-art.mob{display:none}
  .gate-art.desk{display:block;left:92.5%;top:47%;width:9%}
  .nav-chips.overlay{position:absolute;top:1.2rem;right:1.2rem;z-index:5;padding:0}
  .nav-chips.below{display:none}
  .guide ul{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){ .nav-chips.overlay{display:none} }
@media (prefers-reduced-motion:reduce){ .cloud,.bob{animation:none} .btn,.spot .tip{transition:none} }

/* ---------- Dialog (video pop-up) ---------- */
dialog{border:none;border-radius:var(--radius);padding:0;width:min(920px,94vw);background:var(--paper);box-shadow:0 20px 60px rgba(40,30,15,.4)}
dialog::backdrop{background:rgba(40,32,22,.6)}
.dialog-bar{display:flex;justify-content:space-between;align-items:center;padding:.5rem .5rem .5rem 1rem;font:700 1.4rem/1 var(--hand)}
.close{min-width:44px;min-height:44px;border-radius:50%;border:none;background:var(--butter-tint);font-size:1.5rem;cursor:pointer}

/* ---------- Inner pages ---------- */
.topbar{position:sticky;top:0;z-index:20;background:rgba(247,239,224,.94);backdrop-filter:blur(6px);border-bottom:1.5px solid var(--paper-edge)}
.topbar-inner{max-width:62rem;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.4rem .9rem;flex-wrap:wrap}
.back{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;padding:.3rem .5rem;font:700 1.35rem/1 var(--hand);color:var(--ink);text-decoration:none}
.back:hover{color:var(--rose)}
.topbar .chips{gap:.4rem}
.topbar .chip{font-size:1.15rem;padding:.35rem .8rem;box-shadow:none}
.page{max-width:50rem;margin:0 auto;padding:1.25rem 1rem 3rem}
.sheet{background:var(--paper);border:1.5px solid var(--paper-edge);border-radius:22px;box-shadow:var(--shadow);padding:1.5rem 1.25rem;
  background-image:radial-gradient(rgba(160,130,80,.05) 1px, transparent 1px);background-size:6px 6px}
.eyebrow{font:700 1.35rem/1 var(--hand);color:var(--sage-deep);margin:0 0 .25rem}
.sheet h1{font-size:clamp(1.9rem,7vw,2.8rem);margin:.1rem 0 .75rem}
.sheet h2{font-size:clamp(1.35rem,5vw,1.7rem);margin:2.2rem 0 .6rem;padding-top:1.2rem;border-top:2px dashed var(--paper-edge)}
.sheet h3{font-size:1.15rem;margin:1.2rem 0 .3rem}
.sheet p{margin:.6rem 0}
.lead{font-size:1.15rem}
.madeby{display:inline-block;margin:.5rem 0;padding:.35rem .9rem;border-radius:999px;background:var(--sage-tint);font:700 1.3rem/1.2 var(--hand);color:var(--sage-deep)}
.status{display:inline-block;padding:.3rem .9rem;border-radius:999px;background:var(--butter);font:700 1.3rem/1.2 var(--hand)}
.note{margin:1.25rem 0;padding:1rem 1.1rem;border-radius:16px;background:var(--blue-tint);border-left:5px solid var(--blue-deep)}
.note strong{display:block;font:700 1.35rem/1.2 var(--hand);color:var(--blue-deep)}
ul.tidy{padding-left:1.2rem;margin:.5rem 0}
ul.tidy li{margin:.35rem 0}
.cards{display:grid;gap:1rem;grid-template-columns:1fr;margin:1rem 0}
.card{background:#fffdf6;border:1.5px solid var(--paper-edge);border-radius:16px;padding:1rem}
.card h3{margin:.1rem 0 .3rem;font-family:var(--hand);font-size:1.6rem;font-weight:700}
.card p{margin:0;color:var(--ink-soft)}
.card.sage{background:var(--sage-tint)}.card.butter{background:var(--butter-tint)}.card.blue{background:var(--blue-tint)}
.video{position:relative;width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#2f271d;margin:1rem 0 .4rem;box-shadow:var(--shadow)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video.short{aspect-ratio:9/16;max-width:320px;margin-inline:auto}
.fallback{font-size:.95rem;color:var(--ink-soft);margin:.2rem 0 1rem}
.shorts{display:grid;gap:1.25rem;grid-template-columns:1fr}
.shorts figure{margin:0}
.shorts figcaption{text-align:center;font-weight:700;margin-top:.4rem}
.shorts figcaption a{display:inline-block;min-height:44px;padding:.6rem .25rem}
.art{margin:1rem 0;border-radius:16px;overflow:hidden;border:1.5px solid var(--paper-edge);background:#f6e9da}
.art figcaption{padding:.5rem .8rem;font-size:.95rem;color:var(--ink-soft);background:var(--paper)}
.placeholder{display:grid;place-items:center;text-align:center;min-height:180px;padding:1rem;border-radius:16px;border:2.5px dashed #c9b48c;
  background:repeating-linear-gradient(-45deg, #fbf3df 0 14px, #f7ecd3 14px 28px);color:var(--ink-soft);font:700 1.35rem/1.25 var(--hand)}
.placeholder small{display:block;font:500 .9rem/1.3 var(--body);margin-top:.25rem}
.gallery{display:grid;gap:1rem;grid-template-columns:1fr 1fr}
.gallery .placeholder{min-height:150px}
.steps{list-style:none;counter-reset:s;padding:0;margin:1rem 0}
.steps li{counter-increment:s;position:relative;padding:.2rem 0 1.1rem 3.4rem}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:2.4rem;height:2.4rem;border-radius:50%;display:grid;place-items:center;
  background:var(--butter);border:2px solid var(--ink);font:700 1.4rem/1 var(--hand)}
.steps li::after{content:"";position:absolute;left:1.15rem;top:2.5rem;bottom:.2rem;border-left:2px dashed #c9b48c}
.steps li:last-child::after{display:none}
.steps strong{display:block;font-size:1.08rem}
.steps .sample{display:block;font:600 1.25rem/1.3 var(--hand);color:var(--sage-deep)}
table.tidy{width:100%;border-collapse:collapse;margin:.75rem 0;font-size:1rem}
table.tidy th,table.tidy td{text-align:left;padding:.65rem .5rem;border-bottom:1.5px solid var(--paper-edge);vertical-align:top}
table.tidy th{font:700 1.3rem/1.1 var(--hand);color:var(--sage-deep)}
.char-grid{display:grid;gap:1rem;grid-template-columns:1fr}
.char{display:grid;grid-template-columns:96px 1fr;gap:.9rem;align-items:center;background:#fffdf6;border:1.5px solid var(--paper-edge);border-radius:16px;padding:.75rem}
.char img,.char .placeholder{width:96px;height:96px;min-height:0;border-radius:12px;object-fit:cover;padding:.25rem;font-size:.95rem}
.char h3{margin:0;font:700 1.6rem/1.1 var(--hand)}
.char p{margin:.15rem 0 0;color:var(--ink-soft)}
.flow{display:flex;flex-direction:column;align-items:center;gap:.35rem;margin:1rem 0}
.flow .node{padding:.55rem 1rem;border-radius:14px;background:#fffdf6;border:1.5px solid var(--paper-edge);font-weight:700;text-align:center}
.flow .node.me{background:var(--butter)}
.flow .node.ceo{background:var(--blue-tint)}
.flow .row{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem}
.flow .row .node{background:var(--sage-tint);font-size:.95rem}
.flow .arrow{font:700 1.2rem/1 var(--hand);color:var(--ink-soft)}
.sample-stamp{position:relative}
.sample-stamp::after{content:"SAMPLE";position:absolute;top:.6rem;right:.6rem;transform:rotate(8deg);padding:.15rem .6rem;border:2.5px solid var(--rose);
  color:var(--rose);border-radius:8px;font:800 .85rem/1.2 var(--body);letter-spacing:2px;background:rgba(255,255,255,.6)}
.mock{background:#fffdf6;border:1.5px solid var(--paper-edge);border-radius:16px;padding:1rem 1rem 1rem;margin:1rem 0}
.mock h3{margin:0 0 .5rem;font:700 1.5rem/1.1 var(--hand);padding-right:5rem}
.mock ul{margin:.25rem 0 .5rem;padding-left:1.2rem}
.slots{display:grid;gap:.75rem;grid-template-columns:1fr}
.slot{background:var(--blue-tint);border-radius:14px;padding:.75rem .9rem;border:1.5px dashed #9cb7cc}
.slot b{display:block;font:700 1.3rem/1.1 var(--hand)}
.form{display:grid;gap:.9rem;margin:1rem 0}
.form label{font-weight:700;display:grid;gap:.3rem}
.form input,.form textarea{font:inherit;min-height:48px;padding:.65rem .8rem;border-radius:12px;border:1.5px solid #cdbb98;background:#fffdf6;color:var(--ink)}
.form textarea{min-height:140px;resize:vertical}
.thanks{display:none;padding:1rem;border-radius:14px;background:var(--sage-tint);font:700 1.4rem/1.3 var(--hand)}
.thanks.show{display:block}
.photo-slot{max-width:320px}
.site-footer{max-width:62rem;margin:2rem auto 0;padding:1.5rem 1.25rem 2.5rem;text-align:center;color:var(--ink-soft);font-size:.95rem}
.site-footer .chips{justify-content:center;margin-bottom:1rem}
.site-footer p{margin:.35rem 0}
@media (min-width:640px){
  .page{padding:2rem 1.5rem 4rem}
  .sheet{padding:2.25rem 2.5rem}
  .cards{grid-template-columns:1fr 1fr}
  .cards.three{grid-template-columns:1fr 1fr 1fr}
  .shorts{grid-template-columns:1fr 1fr}
  .char-grid{grid-template-columns:1fr 1fr}
  .slots{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:1fr 1fr 1fr}
}
.backs{display:flex;flex-wrap:wrap;align-items:center;gap:0 .9rem}
.beyond-inline{margin-top:1.25rem}

/* ---------- Village reactions (hover on desktop, tap on phones) ---------- */
.fx{position:absolute;inset:0;z-index:3;pointer-events:none}
.fx .desk{display:none}
.pop{position:absolute;overflow:hidden}
.pop img{position:absolute;left:0;bottom:0;width:100%;height:auto;transform-origin:50% 100%;transform:translateY(102%);
  transition:transform .32s cubic-bezier(.3,1.45,.5,1);will-change:transform}
.pop-dog img{transform:translateY(60%)}
.react-dog .pop-dog img{transform:translateY(3%);animation:fx-wag .3s ease-in-out .28s 4}
.react-pip .pop-pip img{transform:translateY(0);animation:fx-wave .55s ease-in-out .3s 3}
@keyframes fx-wag{0%,100%{rotate:0deg}25%{rotate:-8deg}75%{rotate:8deg}}
@keyframes fx-wave{0%,100%{rotate:0deg}30%{rotate:-9deg}70%{rotate:6deg}}
.glow{position:absolute;border-radius:50%;opacity:0;background:radial-gradient(closest-side,rgba(255,214,120,.85),rgba(255,190,80,.35) 55%,rgba(255,190,80,0));mix-blend-mode:screen}
.react-studio .glow{animation:fx-flicker 1.1s steps(1,end) 1 forwards}
@keyframes fx-flicker{0%{opacity:.9}12%{opacity:.2}22%{opacity:.85}30%{opacity:.35}42%{opacity:1}100%{opacity:.85}}
.mail{position:absolute;aspect-ratio:3/2;opacity:0;border:1.5px solid #8a6a40;border-radius:3px;
  background:linear-gradient(to top right,transparent 49%,#8a6a40 50%,transparent 52%) left/50% 100% no-repeat,
             linear-gradient(to top left,transparent 49%,#8a6a40 50%,transparent 52%) right/50% 100% no-repeat,#fffaf0;
  box-shadow:0 2px 4px rgba(70,50,20,.3)}
.react-post .mail{animation:fx-mail .9s ease-out 1 forwards}
@keyframes fx-mail{0%{opacity:0;transform:translate(0,30%) scale(.5) rotate(0)}20%{opacity:1}100%{opacity:0;transform:translate(70%,-160%) scale(1) rotate(14deg)}}
.gate-art{transform-origin:0 50%}
.react-gate .gate-art{animation:fx-creak 1s ease-in-out 1}
@keyframes fx-creak{0%,100%{transform:translate(-50%,-50%) perspective(300px) rotateY(0)}35%{transform:translate(-50%,-50%) perspective(300px) rotateY(-32deg)}60%{transform:translate(-50%,-50%) perspective(300px) rotateY(-24deg)}}
/* phone positions (match village-mobile.jpg) */
.pop-dog.mob{left:31.5%;top:81.2%;width:10%;height:7.4%}
.pop-pip.mob{left:25%;top:67.8%;width:10%;height:6.2%}
.glow.mob{left:24%;top:46%;width:34%;height:12%}
.mail.mob{left:16.8%;top:37%;width:5.5%}
@media (min-width:761px){
  .fx .mob{display:none}
  .fx .desk{display:block}
  .pop-dog.desk{left:16.9%;top:66.4%;width:5.8%;height:12.8%}
  .pop-pip.desk{left:81.6%;top:71.6%;width:5.4%;height:11%}
  .glow.desk{left:40%;top:29%;width:20%;height:20%}
  .mail.desk{left:6.8%;top:37.5%;width:2.6%}
}
@media (prefers-reduced-motion:reduce){
  .pop img,.glow,.mail,.gate-art{transition:none!important;animation:none!important}
  .react-studio .glow{opacity:.8}
}

/* ---------- Tracy in the village: small painted-frame portrait beside the name ---------- */
.village-title{display:flex;align-items:center;justify-content:center;gap:.7rem;text-align:left}
.village-title .title-text{min-width:0}
.village-title p{margin-left:0;max-width:24ch}
.portrait-frame{pointer-events:auto;flex:none;display:block;width:62px;aspect-ratio:4/5;padding:4px;border-radius:50% / 46%;
  background:linear-gradient(145deg,#c99a55,#8a5a2b 55%,#b98a4a);box-shadow:0 0 0 2px #f6e9cc,0 4px 10px rgba(70,50,20,.35);transform:rotate(-3deg);
  transition:transform .2s ease}
.portrait-frame img{width:100%;height:100%;object-fit:cover;border-radius:50% / 46%;border:2px solid #f6e9cc}
.portrait-frame:hover,.portrait-frame:focus-visible{transform:rotate(0) scale(1.05)}
.village-title h1{font-size:clamp(2rem,9.6vw,4.4rem)}
/* What I do: a quiet storybook row under the map */
.skills{max-width:62rem;margin:1.25rem auto 0;padding:0 1.25rem}
.skills h2{font:700 2rem/1.1 var(--hand);margin:0 0 .5rem;text-align:center}
.skills ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.skills li{background:var(--paper);border:1.5px dashed var(--paper-edge);border-radius:16px;padding:.7rem .8rem;text-align:center}
.skills .sk-ico{display:block;font-size:1.5rem;line-height:1.2}
.skills strong{display:block;font:700 1.3rem/1.1 var(--hand);color:var(--ink);margin:.15rem 0 .2rem}
.skills li>span:last-child{display:block;font-size:.92rem;line-height:1.4;color:var(--ink-soft)}
/* About: framed photo */
.photo-frame{margin:.5rem auto 1.25rem;max-width:300px;padding:10px;background:linear-gradient(145deg,#c99a55,#8a5a2b 55%,#b98a4a);border-radius:14px;
  box-shadow:0 0 0 3px #f6e9cc inset,0 8px 22px rgba(70,50,20,.25);transform:rotate(-1deg)}
.photo-frame img{border-radius:6px;border:3px solid #f6e9cc;width:100%;height:auto}
@media (min-width:640px){ .photo-frame{float:right;margin:.25rem 0 1rem 1.5rem;width:240px} }
@media (min-width:761px){
  .portrait-frame{width:92px}
  .village-title{gap:1rem}
  .village-title h1{font-size:clamp(2.6rem,5vw,4.6rem)}
  .village-title p{max-width:none}
  .skills ul{grid-template-columns:repeat(3,1fr)}
}
@media (prefers-reduced-motion:reduce){ .portrait-frame{transition:none} }

/* Discreet footnote for made-up examples */
.fn-star{font-size:.7em;margin-left:.1em;opacity:.65;font-weight:600}
.footnote{margin:.9rem 0 0;font-size:.82rem;line-height:1.45;color:var(--ink-soft);opacity:.85}
/* Pickles cast portraits + banner */
.char img{width:112px;height:112px;padding:0;background:#f6efe4}
.char .role{margin:.1rem 0 .2rem;font-weight:700;color:var(--ink);font-size:.95rem}
.char-note{margin:.8rem 0 0;font-size:.95rem;color:var(--ink-soft)}
.art.banner{margin:.4rem 0 1.1rem}
.art.banner img{width:100%;height:auto;border-radius:16px;display:block}
.char{grid-template-columns:112px 1fr}
/* Studio Pip mock-ups */
.studio-sub{margin:1.4rem 0 .5rem;font:700 1.5rem/1.15 var(--hand)}
.shot-strip .strip{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.shot-strip .strip img,.art img.tl{width:100%;height:auto;border-radius:10px;display:block}
.art img[src*="-timeline"]{width:100%;height:auto;border-radius:10px;display:block}