/* Twice Loved shared styles: dusty blue + white */
:root {
  --paper:#FFFFFF; --wash:#EEF3F8; --ink:#26303D; --soft:#5E6B7C; --line:#D8E1EC; --blue:#4F6582; --blue2:#8DA4BE; --mist:#E6EDF5;
  --accent:#6F8BAE; --gold:#B99A5B; --card:#FFFFFF; --tape:rgba(141,164,190,.32);
  --display:"Young Serif", Georgia, serif; --body:"Nunito Sans","Segoe UI",system-ui,sans-serif; --hand:"Kalam","Comic Sans MS",cursive; --script:"Pinyon Script",cursive; --serif:"Cormorant Garamond",Georgia,serif;
  color-scheme: light;
}
* { box-sizing:border-box }
html { scroll-behavior:smooth }
body { margin:0; background:var(--paper); color:var(--ink); font:17px/1.65 var(--body) }
.wrap { max-width:1100px; margin:0 auto; padding-inline:16px }
.narrow { max-width:760px; margin:0 auto; padding-inline:16px }
h1,h2,h3,h4 { font-family:var(--display); font-weight:400; line-height:1.15; margin:0; text-wrap:balance }
h1 { font-size:clamp(36px,6vw,64px) } h2 { font-size:clamp(28px,4.2vw,42px) } h3 { font-size:22px }
p { margin:0 } a { color:inherit }
:focus-visible { outline:3px solid var(--accent); outline-offset:3px }
.hand { font-family:var(--hand); color:var(--accent) }
.script { font-family:var(--script); color:var(--blue); font-size:clamp(38px,6vw,56px); line-height:1 }
.soft { color:var(--soft) }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--blue); color:#fff; font:700 16px var(--body); padding:14px 26px; border-radius:999px; text-decoration:none; border:0; cursor:pointer; transition:transform .15s, filter .15s }
.btn:hover { filter:brightness(1.08) } .btn:active { transform:scale(.98) }
.btn.ghost { background:transparent; color:var(--blue); border:1.5px solid var(--blue2) }
.btn.big { font-size:18px; padding:17px 32px }
.btn[disabled] { opacity:.5; cursor:not-allowed }
.top { padding-block:16px } .top .wrap { display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap }
.logo { font-family:var(--display); font-size:22px; text-decoration:none; display:inline-flex; align-items:center; gap:8px }
.logo .hand { font-size:18px }
nav { display:flex; gap:18px; flex-wrap:wrap; font-size:15px } nav a { text-decoration:none; color:var(--soft) } nav a:hover { color:var(--ink) }
section { padding-block:clamp(48px,7vw,88px) }
.kick { font-family:var(--hand); color:var(--accent); font-size:21px }
.head { display:grid; gap:10px; max-width:42em; margin-bottom:30px } .head p { color:var(--soft) }
.center { text-align:center; margin-inline:auto }
footer.site { padding:34px 0 44px; border-top:1px solid var(--line); color:var(--soft); font-size:14.5px }
footer.site .wrap { display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap }
/* chips + cards */
.chips { display:flex; flex-wrap:wrap; gap:9px }
.chip { position:relative } .chip input { position:absolute; opacity:0; inset:0; cursor:pointer }
.chip span { display:inline-block; border:1.5px solid var(--line); border-radius:999px; padding:9px 16px; font-weight:600; font-size:15px; background:#fff; transition:all .15s }
.chip input:checked + span { background:var(--blue); border-color:var(--blue); color:#fff }
.chip.no input:checked + span { background:#6B7480; border-color:#6B7480; text-decoration:line-through }
.chip input:focus-visible + span { outline:3px solid var(--accent); outline-offset:2px }
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px }
.card { position:relative; display:block; cursor:pointer } .card input { position:absolute; opacity:0; inset:0 }
.card .in { display:grid; gap:6px; border:2px solid var(--line); border-radius:14px; padding:14px; background:#fff; height:100%; transition:all .15s }
.card input:checked + .in { border-color:var(--blue); box-shadow:0 0 0 3px rgba(79,101,130,.18) }
.card input:focus-visible + .in { outline:3px solid var(--accent) }
.card h4 { font-size:18px } .card p { font-size:14px; color:var(--soft); line-height:1.45 }
.sw { display:flex; height:46px; border-radius:9px; overflow:hidden; border:1px solid rgba(0,0,0,.06) } .sw b { flex:1 }
.field { display:grid; gap:6px; min-width:0 } .lab { font-weight:700; font-size:15px } .hint { font-weight:400; color:var(--soft); font-size:13.5px }
input[type=text],input[type=email],input[type=number],input[type=date],input[type=url],select,textarea { width:100%; font:16px var(--body); color:var(--ink); background:#fff; border:1.5px solid var(--line); border-radius:10px; padding:12px 14px }
textarea { min-height:96px; resize:vertical } input:focus,select:focus,textarea:focus { border-color:var(--blue2); outline:none }
.row2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px } .row3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px }
@media (max-width:640px) { .row2,.row3 { grid-template-columns:1fr } }
.hp { position:absolute; left:-9999px }
/* frames (gallery wall) */
.frame { margin:0; position:relative; padding:16px; background:linear-gradient(135deg,#F6E7B8 0%,#C99A4B 18%,#8F6A2C 34%,#E9CF8C 50%,#A47A35 66%,#F1DCA0 82%,#B48A43 100%);
  box-shadow:inset 0 0 0 2px #6E5222, inset 2px 2px 0 3px #F7E7B6, inset -2px -2px 0 3px #7A5A26, 0 26px 36px -22px rgba(25,35,55,.55) }
.frame.white { background:linear-gradient(135deg,#fff,#EEF1F5 50%,#fff); box-shadow:inset 0 0 0 1px #CFD8E3, inset 3px 3px 0 2px #fff, inset -3px -3px 0 2px #D3DBE6, 0 26px 36px -22px rgba(25,35,55,.45) }
.frame.wood { background:repeating-linear-gradient(92deg,#6A4327 0 3px,#7B5131 3px 7px,#5E3A21 7px 9px); box-shadow:inset 0 0 0 2px #3E2614, inset 2px 2px 0 3px #9A6E48, 0 26px 36px -22px rgba(25,35,55,.55) }
.frame .mat { background:#fff; padding:14px; box-shadow:inset 0 0 0 1px #E1E7EF, inset 2px 2px 0 #fff, inset -1px -1px 0 #D3DBE6 }
.frame .mat > span[class^="PIN_"] { display:block !important; max-width:100% !important; margin:0 auto !important }
.reveal-in { animation:rin .8s ease both } @keyframes rin { from { opacity:0; transform:translateY(14px) } to { opacity:1; transform:none } }
@media (prefers-reduced-motion: reduce) { .reveal-in { animation:none } html { scroll-behavior:auto } }