/* Horozova.art site system — documented in cd.php. */
/* Homepage actions: primary blue and supporting action magenta. */
/* One interaction rule for every public-site button. */
body .site-shell .button:hover, body .site-shell .button:focus-visible, body .site-shell .button-link:hover, body .site-shell .button-link:focus-visible { border-color: var(--ink); background: var(--ink); color: #fff !important; }
/* Shared orientation labels: 12px × 1.2. */
body .site-shell .eyebrow, body .site-shell .page-eyebrow, body .site-shell .section-kicker { font-size: 14.4px; }
.home .button-primary { border-color: var(--blue); background: var(--blue); color: #fff !important; }
.home .button-primary:hover, .home .button-primary:focus-visible { border-color: var(--pink); background: var(--pink); }
.home .button-secondary { border-color: var(--pink); background: var(--pink); color: #fff; }
.home .button-secondary:hover, .home .button-secondary:focus-visible { border-color: var(--blue); background: var(--blue); color: #fff; }
/* Optimized artwork delivery: WebP first, original JPEG as a compatible fallback. */
.home .hero-art { background-image: image-set(url('/assets/artwork/hero-american-breakfast-w1600.webp') type('image/webp'), url('/assets/artwork/hero-american-breakfast.jpg') type('image/jpeg')); }
.home .painting-guava,.content-page .shop-hero-image { background-image: image-set(url('/assets/artwork/feature-guava-w1600.webp') type('image/webp'), url('/assets/artwork/feature-guava.jpg') type('image/jpeg')); }
.home .painting-village,.content-page .shop-note-image { background-image: image-set(url('/assets/artwork/feature-village-w1600.webp') type('image/webp'), url('/assets/artwork/feature-village.jpg') type('image/jpeg')); }
.home .teaching,.content-page .schedule-hero-image { background-image: image-set(url('/assets/artwork/feature-copper-w1600.webp') type('image/webp'), url('/assets/artwork/feature-copper.jpg') type('image/jpeg')); }
.content-page .about-hero-image { background-image: image-set(url('/assets/artwork/artist-portrait-w1100.webp') type('image/webp'), url('/assets/artwork/artist-portrait.jpg') type('image/jpeg')); }
.content-page .photo-story-image--award { background-image: image-set(url('/assets/artwork/artist-accomplishment-w1100.webp') type('image/webp'), url('/assets/artwork/artist-accomplishment.jpg') type('image/jpeg')); }
.content-page .workshop-banner { background-image: linear-gradient(rgba(11,21,41,.63),rgba(11,21,41,.78)),image-set(url('/assets/artwork/feature-village-w1600.webp') type('image/webp'), url('/assets/artwork/feature-village.jpg') type('image/jpeg')); }
.content-page .art-card--breakfast .art-card-image { background-image: image-set(url('/assets/artwork/american-breakfast-w900.webp') type('image/webp'), url('/assets/artwork/american-breakfast.jpg') type('image/jpeg')); }
.content-page .art-card--copper .art-card-image { background-image: image-set(url('/assets/artwork/copper-cup-w900.webp') type('image/webp'), url('/assets/artwork/copper-cup.jpg') type('image/jpeg')); }
.content-page .art-card--guava .art-card-image { background-image: image-set(url('/assets/artwork/guava-in-alaska-w900.webp') type('image/webp'), url('/assets/artwork/guava-in-alaska.jpg') type('image/jpeg')); }
.content-page .art-card--brushes .art-card-image { background-image: image-set(url('/assets/artwork/brushes-in-jar-w900.webp') type('image/webp'), url('/assets/artwork/brushes-in-jar.jpg') type('image/jpeg')); }
.content-page .art-card--kitchen .art-card-image { background-image: image-set(url('/assets/artwork/kitchen-fairy-w900.webp') type('image/webp'), url('/assets/artwork/kitchen-fairy.jpg') type('image/jpeg')); }
.contact-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(380px,1fr); min-height:650px; background:#f0e9fb; }.contact-copy { display:flex; flex-direction:column; justify-content:center; padding:clamp(48px,8vw,128px); }.contact-copy h1 { max-width:600px; margin:0; font-size:clamp(52px,6.4vw,96px); font-weight:var(--font-weight-display); letter-spacing:var(--tracking-display); line-height:.9; }.contact-copy>p:not(.section-kicker) { max-width:470px; margin:24px 0 0; color:#514a5b; font-size:18px; line-height:1.65; }.contact-email { align-self:flex-start; margin-top:32px; padding-bottom:5px; border-bottom:2px solid var(--pink); color:var(--ink); font-size:clamp(16px,1.6vw,21px); font-weight:var(--font-weight-ui); text-decoration:none; }.contact-email:hover,.contact-email:focus-visible { color:var(--pink); }.contact-image { min-height:420px; background-color:#e9e1f5; background-position:center; background-repeat:no-repeat; background-size:contain; background-image:image-set(url('/assets/artwork/contact-classroom-crop-w1112.webp') type('image/webp'),url('/assets/artwork/contact-classroom-crop.jpg') type('image/jpeg')); }
@media (max-width: 820px) {
    .home .hero-art { background-image: image-set(url('/assets/artwork/hero-american-breakfast-w800.webp') type('image/webp'), url('/assets/artwork/hero-american-breakfast.jpg') type('image/jpeg')); }
    .home .painting-guava,.content-page .shop-hero-image { background-image: image-set(url('/assets/artwork/feature-guava-w800.webp') type('image/webp'), url('/assets/artwork/feature-guava.jpg') type('image/jpeg')); }
    .home .painting-village,.content-page .shop-note-image { background-image: image-set(url('/assets/artwork/feature-village-w800.webp') type('image/webp'), url('/assets/artwork/feature-village.jpg') type('image/jpeg')); }
    .home .teaching,.content-page .schedule-hero-image { background-image: image-set(url('/assets/artwork/feature-copper-w800.webp') type('image/webp'), url('/assets/artwork/feature-copper.jpg') type('image/jpeg')); }
    .content-page .about-hero-image { background-image: image-set(url('/assets/artwork/artist-portrait-w800.webp') type('image/webp'), url('/assets/artwork/artist-portrait.jpg') type('image/jpeg')); }
    .content-page .photo-story-image--award { background-image: image-set(url('/assets/artwork/artist-accomplishment-w800.webp') type('image/webp'), url('/assets/artwork/artist-accomplishment.jpg') type('image/jpeg')); }
    .content-page .workshop-banner { background-image: linear-gradient(rgba(11,21,41,.63),rgba(11,21,41,.78)),image-set(url('/assets/artwork/feature-village-w800.webp') type('image/webp'), url('/assets/artwork/feature-village.jpg') type('image/jpeg')); }
    .content-page .art-card--breakfast .art-card-image { background-image: image-set(url('/assets/artwork/american-breakfast-w400.webp') type('image/webp'), url('/assets/artwork/american-breakfast.jpg') type('image/jpeg')); }
    .content-page .art-card--copper .art-card-image { background-image: image-set(url('/assets/artwork/copper-cup-w400.webp') type('image/webp'), url('/assets/artwork/copper-cup.jpg') type('image/jpeg')); }
    .content-page .art-card--guava .art-card-image { background-image: image-set(url('/assets/artwork/guava-in-alaska-w400.webp') type('image/webp'), url('/assets/artwork/guava-in-alaska.jpg') type('image/jpeg')); }
    .content-page .art-card--brushes .art-card-image { background-image: image-set(url('/assets/artwork/brushes-in-jar-w400.webp') type('image/webp'), url('/assets/artwork/brushes-in-jar.jpg') type('image/jpeg')); }
    .content-page .art-card--kitchen .art-card-image { background-image: image-set(url('/assets/artwork/kitchen-fairy-w400.webp') type('image/webp'), url('/assets/artwork/kitchen-fairy.jpg') type('image/jpeg')); }
    .contact-layout { grid-template-columns:1fr; }.contact-copy { min-height:500px; }.contact-image { min-height:480px; background-image:image-set(url('/assets/artwork/contact-classroom-crop-w800.webp') type('image/webp'),url('/assets/artwork/contact-classroom-crop.jpg') type('image/jpeg')); }
}
:root { --font-sans: Roboto, Arial, Helvetica, sans-serif; --font-weight-ui: 700; --font-weight-display: 900; --tracking-display: -.025em; --tracking-heading: -.025em; --tracking-label: .13em; --ink: #171127; --paper: #fffdf9; --line: #ded9e7; --blue: #1d3dcc; --pink: #e5007e; --yellow: #ffd21f; --violet: #a75be8; --muted: #625c70; --focus: #1d3dcc; }
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-sans); }
.site-shell { min-height: 100vh; display: flex; flex-direction: column; }.site-header { width: 100%; border-bottom: 1px solid var(--line); }.header-inner { width: min(100% - 48px, 1440px); min-height: 132px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 32px; }.site-logo { display: block; width: clamp(280px, 22.4vw, 320px); }.site-logo img { display: block; width: 100%; height: auto; }.site-navigation ul { display: flex; align-items: center; gap: clamp(20px, 3vw, 48px); padding: 0; margin: 0; list-style: none; }.site-navigation a { position: relative; display: block; padding: 10px 0; color: var(--ink); font-size: 13px; font-weight: var(--font-weight-ui); letter-spacing: .08em; line-height: 1; text-decoration: none; text-transform: uppercase; }.site-navigation a::after { position: absolute; right: 0; bottom: 2px; left: 0; height: 2px; background: var(--pink); content: ""; transform: scaleX(0); transform-origin: right; transition: transform .18s ease; }.site-navigation a:hover::after,.site-navigation a:focus-visible::after,.site-navigation a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }.menu-toggle { display: none; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--ink); cursor: pointer; }.menu-toggle span,.menu-toggle::before,.menu-toggle::after { display: block; width: 25px; height: 2px; margin: 0 auto; background: currentColor; content: ""; transition: transform .18s ease,opacity .18s ease; }.menu-toggle span { margin-block: 6px; }.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }.menu-toggle[aria-expanded="true"]::before { transform: translateY(8px) rotate(45deg); }.menu-toggle[aria-expanded="true"] span { opacity: 0; }.menu-toggle[aria-expanded="true"]::after { transform: translateY(-8px) rotate(-45deg); }:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }main { flex: 1; }.site-footer { border-top: 1px solid var(--line); }.footer-inner { width: min(100% - 48px, 1440px); min-height: 84px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #615b70; font-size: 12px; }.footer-inner p { margin: 0; }.footer-mark { color: var(--pink); font-weight: var(--font-weight-ui); letter-spacing: .08em; text-transform: uppercase; }
.home { overflow: hidden; background: var(--paper); }.home a { color: inherit; }.hero-art { position: relative; min-height: min(720px,calc(100vh - 132px)); display: flex; align-items: flex-end; isolation: isolate; background: url('/assets/artwork/hero-american-breakfast.jpg') center/cover no-repeat; }.hero-art::before { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,rgba(255,253,249,.94),rgba(255,253,249,.76) 37%,rgba(255,253,249,.18) 72%,rgba(255,253,249,.05)); content: ""; }.hero-inner,.home-section { width: min(100% - 48px,1440px); margin: 0 auto; }.hero-copy { max-width: 720px; padding: clamp(68px,9vw,138px) 0 clamp(64px,8vw,118px); }.eyebrow,.page-eyebrow,.section-kicker { margin: 0 0 20px; color: var(--pink); font-size: 12px; font-weight: var(--font-weight-ui); letter-spacing: var(--tracking-label); text-transform: uppercase; }.hero-copy h1,.manifesto h2,.painting-panel h3,.teaching h2,.page-hero h1,.page-heading,.intro-grid h2,.page-section h2,.workshop-banner h2 { margin: 0; font-family: var(--font-sans); font-weight: var(--font-weight-display); letter-spacing: var(--tracking-display); line-height: .9; }.hero-copy h1 { max-width: 650px; font-size: clamp(54px,7.1vw,112px); }.hero-copy p:not(.eyebrow) { max-width: 470px; margin: 28px 0 0; color: #453d50; font-size: clamp(17px,1.7vw,21px); line-height: 1.5; }.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }.button,.button-link { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; border: 1px solid var(--ink); font-size: 12px; font-weight: var(--font-weight-ui); letter-spacing: .08em; text-decoration: none; text-transform: uppercase; transition: background .18s ease,color .18s ease,border-color .18s ease; }.button-primary { background: var(--ink); color: #fff !important; }.button-primary:hover,.button-primary:focus-visible { border-color: var(--pink); background: var(--pink); }.button-secondary { background: rgba(255,255,255,.55); }.button-secondary:hover,.button-secondary:focus-visible { border-color: var(--blue); background: var(--blue); color: #fff; }.home-section { padding: clamp(76px,10vw,150px) 0; }.manifesto { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: clamp(32px,9vw,140px); align-items: start; }.manifesto h2 { max-width: 470px; font-size: clamp(42px,5.2vw,78px); }.manifesto-copy { padding-top: 12px; }.manifesto-copy p { max-width: 550px; margin: 0; color: #514a5b; font-size: 18px; line-height: 1.65; }.color-notes { display: flex; gap: 9px; margin-top: 32px; }.color-notes span { display: block; width: 14px; height: 14px; border-radius: 50%; }.color-notes span:nth-child(1){background:var(--blue)}.color-notes span:nth-child(2){background:var(--pink)}.color-notes span:nth-child(3){background:var(--yellow)}.color-notes span:nth-child(4){background:var(--violet)}.painting-pair { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 720px; }.painting-panel { position: relative; min-height: 430px; display: flex; align-items: flex-end; padding: clamp(28px,4vw,64px); color: #fff; background: center/cover no-repeat; }.painting-panel::before { position: absolute; inset: 0; background: linear-gradient(0deg,rgba(11,16,33,.76),rgba(11,16,33,.06) 65%); content: ""; }.painting-panel>* { position: relative; }.painting-panel h3 { max-width: 420px; font-size: clamp(38px,4.4vw,68px); }.painting-panel p { max-width: 390px; margin: 18px 0 0; font-size: 16px; line-height: 1.55; }.painting-guava { background-image:url('/assets/artwork/feature-guava.jpg'); }.painting-village { background-image:url('/assets/artwork/feature-village.jpg'); }.painting-village::before { background:linear-gradient(0deg,rgba(10,25,34,.86),rgba(10,25,34,.12) 70%); }.section-link { display:inline-flex; margin-top:26px; padding-bottom:5px; border-bottom:2px solid currentColor; font-size:12px; font-weight:var(--font-weight-ui); letter-spacing:.09em; text-decoration:none; text-transform:uppercase; }.teaching { position:relative; min-height:610px; display:grid; place-items:center; padding:80px 24px; color:#fff; text-align:center; background:url('/assets/artwork/feature-copper.jpg') center/cover no-repeat; isolation:isolate; }.teaching::before { position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(18,22,42,.82),rgba(18,22,42,.36),rgba(18,22,42,.78)); content:""; }.teaching-copy { max-width:680px; }.teaching h2 { font-size:clamp(48px,6vw,88px); }.teaching p:not(.eyebrow) { max-width:530px; margin:24px auto 0; font-size:18px; line-height:1.6; }.teaching .eyebrow { color:var(--yellow); }.teaching .button { margin-top:32px; border-color:#fff; color:#fff; }.teaching .button:hover,.teaching .button:focus-visible { border-color:var(--pink); background:var(--pink); }
.content-page { background:var(--paper); }.page-width { width:min(100% - 48px,1280px); margin:0 auto; }.page-hero { min-height:465px; display:grid; grid-template-columns:minmax(0,.9fr) minmax(360px,1.1fr); background:var(--ink); color:#fff; }.page-hero-copy { display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(48px,7vw,108px) clamp(24px,6vw,92px); }.page-eyebrow { margin-bottom:18px; color:var(--yellow); }.page-hero h1,.page-heading { font-size:clamp(50px,6.5vw,96px); }.page-hero p:not(.page-eyebrow) { max-width:480px; margin:24px 0 0; color:rgba(255,255,255,.84); font-size:18px; line-height:1.6; }.page-hero-image { min-height:320px; background:center/cover no-repeat; }.about-hero-image { background-image:url('/assets/artwork/artist-portrait.jpg'); background-position:42% center; }.schedule-hero-image { background-image:url('/assets/artwork/feature-copper.jpg'); }.shop-hero-image { background-image:url('/assets/artwork/feature-guava.jpg'); }.page-section { padding:clamp(72px,10vw,140px) 0; }.page-section--line { border-top:1px solid #dfd9e8; }.intro-grid { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(36px,9vw,142px); }.section-kicker { margin-bottom:18px; }.intro-grid h2,.page-section h2 { font-size:clamp(36px,4.4vw,66px); }.prose { color:var(--muted); font-size:18px; line-height:1.7; }.prose p { margin:0 0 22px; }.prose p:last-child { margin-bottom:0; }.photo-story { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); min-height:620px; background:#e9e6ed; }.photo-story-image { min-height:400px; background:center/cover no-repeat; }.photo-story-image--award { background-image:url('/assets/artwork/artist-accomplishment.jpg'); }.photo-story-copy { display:flex; flex-direction:column; justify-content:center; padding:clamp(38px,6vw,88px); }.photo-story-copy p { margin:20px 0 0; color:var(--muted); font-size:17px; line-height:1.65; }.schedule-grid { display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:clamp(38px,9vw,132px); }.schedule-intro { position:sticky; top:32px; align-self:start; }.schedule-intro p:not(.section-kicker) { margin:20px 0 0; color:var(--muted); font-size:17px; line-height:1.65; }.class-list { border-top:1px solid #d8d0e2; }.class-card { display:grid; grid-template-columns:112px 1fr; gap:24px; padding:28px 0; border-bottom:1px solid #d8d0e2; }.class-card-number { color:var(--pink); font-size:12px; font-weight:var(--font-weight-ui); letter-spacing:.12em; }.class-card h3 { margin:0; font-size:25px; letter-spacing:var(--tracking-heading); }.class-card p { margin:9px 0 0; color:var(--muted); line-height:1.58; }.class-card strong { color:var(--ink); }.class-card a,.text-link { color:var(--blue); font-weight:var(--font-weight-ui); text-decoration-thickness:2px; text-underline-offset:4px; }.workshop-banner { position:relative; min-height:460px; display:grid; place-items:center; padding:60px 24px; color:#fff; text-align:center; background:linear-gradient(rgba(11,21,41,.63),rgba(11,21,41,.78)),url('/assets/artwork/feature-village.jpg') center/cover no-repeat; }.workshop-banner div { max-width:690px; }.workshop-banner h2 { font-size:clamp(45px,6vw,82px); }.workshop-banner p { margin:20px 0 0; font-size:18px; line-height:1.6; }.button-link { margin-top:30px; border-color:currentColor; color:inherit; }.button-link:hover { border-color:var(--pink); background:var(--pink); }.shop-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }.art-card { border:1px solid #ded8e7; background:#fff; }.art-card-image { aspect-ratio:1; background:center/cover no-repeat; }.art-card-copy { padding:20px; }.art-card h2 { margin:0; font-size:21px; font-weight:var(--font-weight-ui); letter-spacing:var(--tracking-heading); }.art-card p { margin:7px 0 0; color:var(--muted); font-size:14px; }.art-card .price { color:var(--pink); font-weight:var(--font-weight-ui); }.art-card--breakfast .art-card-image { background-image:url('/assets/artwork/american-breakfast.jpg'); }.art-card--copper .art-card-image { background-image:url('/assets/artwork/copper-cup.jpg'); }.art-card--guava .art-card-image { background-image:url('/assets/artwork/guava-in-alaska.jpg'); }.art-card--brushes .art-card-image { background-image:url('/assets/artwork/brushes-in-jar.jpg'); }.art-card--kitchen .art-card-image { background-image:url('/assets/artwork/kitchen-fairy.jpg'); }.shop-note { display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(32px,9vw,140px); align-items:center; background:#f0e9fb; }.shop-note-copy { padding:clamp(46px,6vw,90px) 0 clamp(46px,6vw,90px) clamp(24px,6vw,92px); }.shop-note-copy p { max-width:520px; margin:20px 0 0; color:#514a5b; font-size:17px; line-height:1.65; }.shop-note-image { min-height:420px; background:url('/assets/artwork/feature-village.jpg') center/cover no-repeat; }
@media (max-width:820px) { .header-inner { width:min(100% - 32px,1440px); min-height:82px; }.site-logo { width:min(235px,calc(100vw - 104px)); }.menu-toggle { display:block; flex:0 0 auto; }.site-navigation { position:absolute; z-index:10; top:82px; right:0; left:0; display:none; border-bottom:1px solid var(--line); background:var(--paper); }.site-navigation.is-open { display:block; }.site-navigation ul { display:block; width:min(100% - 32px,1440px); margin:0 auto; padding:14px 0 20px; }.site-navigation li+li { border-top:1px solid var(--line); }.site-navigation a { padding:18px 0; font-size:14px; }.site-navigation a::after { right:auto; width:28px; }.footer-inner { width:min(100% - 32px,1440px); min-height:76px; }.hero-art { min-height:660px; }.hero-art::before { background:linear-gradient(90deg,rgba(255,253,249,.95),rgba(255,253,249,.72) 72%,rgba(255,253,249,.35)); }.painting-pair,.manifesto,.page-hero,.intro-grid,.photo-story,.schedule-grid,.shop-note { grid-template-columns:1fr; }.painting-pair { min-height:0; }.page-hero-copy { min-height:430px; }.page-hero-image { min-height:390px; }.schedule-intro { position:static; }.shop-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.shop-note-copy { padding-right:clamp(24px,6vw,92px); } }
@media (max-width:560px) { .hero-inner,.home-section,.page-width { width:min(100% - 32px,1440px); }.hero-art { min-height:590px; }.hero-copy { padding:70px 0 58px; }.hero-copy h1,.page-hero h1 { font-size:clamp(50px,15vw,76px); }.manifesto-copy p { font-size:16px; }.painting-panel { min-height:430px; padding:28px 24px; }.class-card { grid-template-columns:1fr; gap:12px; }.shop-grid { grid-template-columns:1fr; }.photo-story-copy { padding:48px 24px; } }