:root {
  --background: #fbf7ee; --foreground: #32281f; --card: #fffdf7; --card-foreground: #32281f;
  --primary: #6f2134; --primary-foreground: #fffaf1; --secondary: #f2cfd2; --secondary-foreground: #5e1c2f;
  --muted: #eee8da; --muted-foreground: #75695b; --accent: #efb62e; --accent-foreground: #32281f;
  --destructive: #a52d38; --border: #d8cbb8; --input: #d8cbb8; --ring: #6f2134; --radius: 1rem;
  --cream: #fbf7ee; --paper: #fffdf7; --burgundy: #6f2134; --green: #344c35;
  --pink: #f1c8cd; --yellow: #efb62e; --brown: #654a38;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: radial-gradient(circle at 14% 8%, rgba(239,182,46,.08), transparent 24rem), var(--cream); color: var(--foreground); font-family: Georgia, "Times New Roman", serif; font-size: 16px; }
button, a { -webkit-tap-highlight-color: transparent; } button { font: inherit; } a { color: inherit; text-decoration: none; }
.icon { display: inline-grid; place-items: center; width: 24px; height: 24px; font-family: Arial,sans-serif; font-size: 1.1rem; font-style: normal; }

.site-header { position: sticky; top: 0; z-index: 30; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 76px; padding: 0 clamp(22px,5vw,76px); border-bottom: 1px solid rgba(101,74,56,.18); background: rgba(251,247,238,.9); backdrop-filter: blur(14px); }
.wordmark { display: inline-flex; align-items: center; gap: 10px; width: max-content; color: var(--burgundy); font-weight: 700; font-size: 1.14rem; }
.wordmark-star { color: var(--yellow); }
nav { display: flex; gap: clamp(24px,4vw,54px); font-size: .95rem; }
nav a { position: relative; }
nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -8px; height: 1px; background: var(--burgundy); transition: right .25s ease; }
nav a:hover::after, nav a:focus-visible::after { right: 0; }
.header-mail { justify-self: end; padding: 11px 18px; border-radius: 999px; background: var(--yellow); color: #332411; font-size: .9rem; transition: transform .2s ease, box-shadow .2s ease; }
.header-mail:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(126,83,15,.16); }

section { scroll-margin-top: 75px; }
.about-section, .portfolio-section, .contacts-section { padding: clamp(70px,9vw,132px) clamp(22px,6vw,92px); }
.about-section { max-width: 1500px; margin: auto; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin: 0 auto 38px; }
.section-heading h1, .section-heading h2, .contacts-intro h2 { margin: 0; color: var(--burgundy); font-weight: 500; letter-spacing: -.045em; line-height: .99; }
.section-heading h1 { font-size: clamp(3rem,6.7vw,6.5rem); }
.section-heading h2, .contacts-intro h2 { font-size: clamp(2.8rem,5vw,5.2rem); }
.eyebrow { margin: 0 0 14px; color: var(--green); font: 700 .75rem/1.2 Arial,sans-serif; letter-spacing: .18em; text-transform: uppercase; }
.heading-note { max-width: 270px; margin: 0 0 7px; color: var(--muted-foreground); line-height: 1.6; }

.about-slider { position: relative; display: grid; grid-template-columns: minmax(0,1.08fr) minmax(330px,.92fr); min-height: 570px; overflow: hidden; border: 1px solid rgba(101,74,56,.2); border-radius: 34px; background: var(--paper); box-shadow: 0 28px 70px rgba(78,55,34,.09); }
.about-copy { position: relative; z-index: 2; display: flex; flex-direction: column; padding: clamp(36px,6vw,84px); }
.slide-number { position: absolute; right: 5%; top: 6%; color: rgba(101,74,56,.2); font-size: clamp(4rem,8vw,8rem); line-height: 1; }
.slide-kicker { margin: 0 0 24px; color: var(--burgundy); font: 700 .78rem Arial,sans-serif; letter-spacing: .15em; text-transform: uppercase; }
.about-copy h2 { max-width: 690px; margin: 0; font-size: clamp(2.4rem,4.8vw,5rem); font-weight: 500; line-height: 1.03; letter-spacing: -.045em; }
.handwritten { max-width: 670px; min-height: 7.4rem; margin: 34px 0; color: var(--brown); font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive; font-size: clamp(1.08rem,1.55vw,1.42rem); line-height: 1.8; }
.ink-caret { display: inline-block; width: 2px; height: 1.15em; margin-left: 3px; vertical-align: -.16em; background: var(--burgundy); animation: blink .8s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.about-controls { display: flex; align-items: center; gap: 17px; margin-top: auto; }
.about-controls > button, .gallery-controls button { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(101,74,56,.3); border-radius: 50%; background: transparent; color: var(--burgundy); cursor: pointer; transition: background .2s ease,color .2s ease,transform .2s ease; }
.about-controls > button:hover, .gallery-controls button:hover { background: var(--burgundy); color: white; transform: translateY(-2px); }
.slide-dots { display: flex; gap: 7px; }
.slide-dots button { width: 30px; height: 4px; padding: 0; border: 0; border-radius: 5px; background: #d8cbb8; cursor: pointer; transition: width .2s,background .2s; }
.slide-dots button.active { width: 52px; background: var(--burgundy); }
.slide-dots button:focus-visible { outline-offset: 5px; }
.mascot-stage { position: relative; min-height: 570px; overflow: hidden; background: linear-gradient(145deg,#f5d9d8 0%,#f8e8bd 68%,#e1e7d4 100%); }
.tone-yellow .mascot-stage { background: linear-gradient(145deg,#f6e4ac 0%,#f9edce 60%,#ecd2d4 100%); }
.tone-green .mascot-stage { background: linear-gradient(145deg,#d9e1cf 0%,#f5e9c6 65%,#efd0d5 100%); }
.mascot-stage img { position: absolute; z-index: 2; right: -4%; bottom: -17%; width: min(590px,112%); height: auto; filter: drop-shadow(0 22px 22px rgba(62,41,26,.16)); }
.mascot-sun { position: absolute; left: 8%; top: 8%; width: 72%; aspect-ratio: 1; border: 1px solid rgba(111,33,52,.3); border-radius: 50%; }
.sparkle { position: absolute; z-index: 3; color: var(--burgundy); font-size: 2rem; animation: float 4s ease-in-out infinite; }
.sparkle-one { left: 10%; top: 19%; } .sparkle-two { right: 12%; top: 12%; animation-delay: -1.4s; }
@keyframes float { 50% { transform: translateY(-9px) rotate(8deg); } }

.portfolio-section { overflow: hidden; background: var(--green); color: #fffaf1; }
.portfolio-section .eyebrow { color: var(--yellow); } .portfolio-heading h2 { color: #fffaf1; }
.gallery-controls { display: flex; align-items: center; gap: 12px; }
.gallery-controls p { margin-right: 14px; color: #d8dfd1; }
.gallery-controls button { border-color: rgba(255,255,255,.35); color: white; }
.gallery-controls button:hover { background: var(--yellow); color: #30230e; }
.portfolio-track { display: flex; gap: 22px; overflow-x: auto; padding: 6px max(6vw,calc((100vw - 1400px)/2)) 25px 0; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: #eab750 transparent; outline: none; }
.work-card { flex: 0 0 clamp(270px,28vw,410px); overflow: hidden; border-radius: 22px; background: var(--paper); color: var(--foreground); scroll-snap-align: start; transition: transform .3s ease; }
.work-card:hover { transform: translateY(-7px); }
.work-image { position: relative; aspect-ratio: 4/5; overflow: hidden; }
.work-image > img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.work-card:hover .work-image > img { transform: scale(1.035); }
.image-placeholder { display: grid; place-items: center; align-content: center; gap: 12px; width: 100%; height: 100%; color: rgba(70,48,35,.65); font: 600 .82rem Arial,sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.work-color-1 .image-placeholder { background: linear-gradient(145deg,#f1c8cd,#f7e3d6); }
.work-color-2 .image-placeholder { background: linear-gradient(145deg,#f0cc68,#f8e9bb); }
.work-color-3 .image-placeholder { background: linear-gradient(145deg,#b9c9ac,#e5eadb); }
.work-color-4 .image-placeholder { background: linear-gradient(145deg,#d9c6b6,#f1e3d6); }
.work-index { position: absolute; top: 17px; right: 17px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,253,247,.9); color: var(--burgundy); font-size: .78rem; }
.work-meta { display: flex; align-items: center; justify-content: space-between; padding: 22px; }
.work-meta p { margin: 0 0 7px; color: var(--burgundy); font: 700 .68rem Arial,sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.work-meta h3 { margin: 0; font-size: 1.3rem; font-weight: 500; }

.contacts-section { background: #f2cfd2; }
.contacts-card { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,8vw,120px); max-width: 1400px; margin: auto; padding: clamp(38px,6vw,82px); border-radius: 34px; background: var(--paper); box-shadow: 0 26px 70px rgba(111,33,52,.11); }
.contacts-intro > p:last-child { max-width: 480px; margin: 30px 0 0; color: var(--muted-foreground); font-size: 1.08rem; line-height: 1.7; }
.contact-links { display: flex; flex-direction: column; justify-content: center; }
.contact-links a { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 16px; padding: 19px 8px; border-bottom: 1px solid var(--border); transition: color .2s,padding .2s; }
.contact-links a:hover { padding-left: 16px; color: var(--burgundy); }
.contact-links span { display: flex; flex-direction: column; gap: 5px; font-size: 1.05rem; }
.contact-links small { color: var(--muted-foreground); font: 700 .65rem Arial,sans-serif; letter-spacing: .12em; text-transform: uppercase; }

footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding: 34px clamp(22px,6vw,92px); background: var(--burgundy); color: #f9eadf; font-size: .85rem; }
footer .wordmark { color: #fffaf1; } footer p { margin: 0; } footer p:last-child { justify-self: end; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }

@media (max-width: 900px) {
  .site-header { grid-template-columns: 1fr auto; min-height: 68px; }
  .site-header nav { order: 3; grid-column: 1/-1; justify-content: center; padding: 12px 0 14px; border-top: 1px solid rgba(101,74,56,.12); }
  .header-mail { font-size: 0; padding: 10px; } .header-mail::after { content: "Письмо"; font-size: .82rem; }
  section { scroll-margin-top: 118px; } .about-slider { grid-template-columns: 1fr; }
  .mascot-stage { min-height: 470px; order: -1; } .mascot-stage img { width: min(520px,92%); right: 3%; bottom: -24%; }
  .contacts-card { grid-template-columns: 1fr; } .section-heading { align-items: start; flex-direction: column; } .gallery-controls p { display: none; }
}

@media (max-width: 600px) {
  .site-header { padding-inline: 16px; } .wordmark { font-size: 1rem; } nav { gap: 20px; font-size: .84rem; }
  .about-section,.portfolio-section,.contacts-section { padding: 62px 18px; } .about-heading .heading-note { display: none; }
  .about-slider,.contacts-card { border-radius: 23px; } .about-copy { padding: 30px 24px; min-height: 510px; }
  .about-copy h2 { font-size: 2.25rem; } .handwritten { min-height: 10rem; font-size: 1.03rem; }
  .mascot-stage { min-height: 390px; } .portfolio-heading { flex-direction: row; align-items: end; }
  .portfolio-heading h2 { font-size: 2.7rem; } .gallery-controls { gap: 8px; } .gallery-controls button { width: 42px; height: 42px; }
  .contacts-card { padding: 32px 24px; } footer { grid-template-columns: 1fr auto; } footer p:nth-child(2) { display: none; }
}