:root {
  --bg: #FFF4E3; --surface: #FFFDF9; --ink: #3B2A1E; --muted: #8A6A55; --line: #EAD3B8;
  --coral: #FF7A59; --coral-dark: #D9583A; --mint: #4FC3A1; --sky: #63B3F2; --sun: #FFC447; --lav: #B08CF0;
}
* { box-sizing: border-box; }
html { color-scheme: light; }
body { margin: 0; font-family: Nunito, "Segoe UI", system-ui, -apple-system, sans-serif; color: var(--ink); background: var(--bg); line-height: 1.5; font-size: 17px;
  background-image: radial-gradient(circle at 12px 10px, rgba(59,42,30,.045) 7px, transparent 8px); background-size: 96px 96px; }
h1, h2, h3, .btn { font-family: Fredoka, Nunito, system-ui, sans-serif; letter-spacing: -.01em; line-height: 1.1; }
h1 { font-size: clamp(2rem, 6vw, 3.4rem); margin: 0 0 .4em; }
h2 { font-size: 1.6rem; margin: 2.2em 0 .5em; }
h3 { font-size: 1.15rem; margin: 1.6em 0 .4em; }
p, li { max-width: 68ch; }
a { color: var(--coral-dark); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 20px; }
header.top { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; gap: 16px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-family: Fredoka, sans-serif; font-weight: 700; font-size: 1.4rem; }
.brand img { width: 44px; height: 44px; border-radius: 12px; border: 2px solid var(--ink); }
.brand b { color: var(--coral); } .brand i { color: var(--mint); font-style: normal; }
nav a { margin-left: 18px; font-weight: 800; text-decoration: none; color: var(--ink); }
nav a:hover { color: var(--coral-dark); }
.hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 32px; align-items: center; padding: 40px 0 20px; }
.hero .lead { font-size: 1.25rem; color: var(--muted); max-width: 48ch; }
.hero img { width: 100%; max-width: 360px; justify-self: center; border-radius: 28px; border: 3px solid var(--ink); box-shadow: 0 8px 24px rgba(59,42,30,.16); transform: rotate(2deg); }
.btn { display: inline-block; padding: 14px 24px; border-radius: 16px; border: 2px solid var(--ink); background: var(--coral); color: #fff; font-weight: 600; font-size: 1.05rem; text-decoration: none; box-shadow: 0 4px 0 var(--coral-dark); transition: transform .07s, box-shadow .07s; }
.btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--coral-dark); }
.btn.secondary { background: var(--surface); color: var(--ink); box-shadow: 0 4px 0 var(--line); }
.btn + .btn { margin-left: 10px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin: 28px 0; }
.card { background: var(--surface); border: 2px solid var(--ink); border-radius: 20px; padding: 20px; box-shadow: 0 5px 12px rgba(59,42,30,.12); }
.card h3 { margin-top: 0; }
.card .tag { display: inline-block; padding: 2px 10px; border-radius: 999px; border: 1.5px solid var(--ink); font-size: .8rem; font-weight: 800; margin-bottom: 10px; }
.tag.coral { background: #FFD9CC; } .tag.mint { background: #D2F2E6; } .tag.sky { background: #D5E8F3; } .tag.sun { background: #FFEBB8; }
.shots { display: flex; gap: 16px; overflow-x: auto; padding: 8px 0 16px; }
.shots img { height: 420px; border-radius: 20px; border: 2px solid var(--ink); box-shadow: 0 6px 14px rgba(59,42,30,.14); }
article { background: var(--surface); border: 2px solid var(--ink); border-radius: 24px; padding: 28px clamp(18px, 4vw, 40px); margin: 24px 0 40px; box-shadow: 0 6px 16px rgba(59,42,30,.12); }
article .meta { color: var(--muted); font-size: .95rem; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1.5px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 800; }
form label { display: block; font-weight: 800; margin: 14px 0 6px; }
input, textarea, select { width: 100%; font: inherit; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--ink); background: var(--surface); color: var(--ink); }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--coral); outline-offset: 1px; }
.notice { border-left: 0; background: #FFEBB8; border: 2px solid var(--ink); border-radius: 14px; padding: 12px 16px; margin: 16px 0; }
.ok { background: #D2F2E6; } .err { background: #FFC9C4; }
footer { padding: 30px 0 40px; color: var(--muted); font-size: .92rem; border-top: 2px solid var(--line); margin-top: 20px; }
footer a { color: var(--muted); margin-right: 16px; }
@media (max-width: 760px) { .hero { grid-template-columns: 1fr; } .hero img { max-width: 280px; transform: none; } nav a { margin-left: 12px; } body { font-size: 16px; } }