@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/cormorant-garamond-300-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/cormorant-garamond-300-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/cormorant-garamond-400-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/cormorant-garamond-400-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/cormorant-garamond-300-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/cormorant-garamond-300-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/cormorant-garamond-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/cormorant-garamond-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/cormorant-garamond-500-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/cormorant-garamond-500-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/cormorant-garamond-600-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/cormorant-garamond-600-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/jost-300-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/jost-300-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/jost-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/jost-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/jost-500-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/jost-500-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/jost-600-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/jost-600-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============ RESET & BASE ============ */
html, body { margin:0; padding:0; background:#F7F3EC; }
body { font-family:'Jost', system-ui, sans-serif; color:#23201B; -webkit-font-smoothing:antialiased; }
*, *::before, *::after { box-sizing:border-box; }
img { max-width:100%; display:block; }
a { color:#B4693F; text-decoration:none; }
a:hover { color:#8E5130; }
button { font-family:inherit; }
h1,h2,h3,p { text-wrap:pretty; }

@keyframes yvUp { from { opacity:0; transform:translateY(14px);} to { opacity:1; transform:none;} }
@keyframes yvIn { from { transform:translateX(100%);} to { transform:none;} }
@keyframes yvBreathe { 0%,100% { transform:scale(1); opacity:.55;} 50% { transform:scale(1.12); opacity:.9;} }

/* ============ HOVER UTILITIES (mirrors design's style-hover) ============ */
.hv-dark, .hv-pill, .hv-fill, .hv-accent, .hv-border, .hv-tan, .hv-row, .hv-postrow, .hv-outlinelight, .hv-accentbtn, .hv-card {
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.hv-dark:hover { background:#2C382E; }
.hv-pill:hover { border-color:#B4693F; color:#B4693F; }
.hv-fill:hover { background:#3C4A3E; color:#F7F3EC; }
.hv-accent:hover { color:#B4693F; }
.hv-border:hover, .hv-card:hover { border-color:#B4693F; }
.hv-tan:hover { color:#D9A882; }
.hv-row:hover { background:#FFFDF9; }
.hv-postrow:hover { background:rgba(237,232,221,0.06); }
.hv-outlinelight:hover { background:#D9A882; color:#2C382E; }
.hv-accentbtn:hover { background:#8E5130; }

/* ============ RESPONSIVE GRID UTILITIES ============ */
.grid { display:grid; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; }
.grid-2-hero { display:grid; grid-template-columns:1.05fr 0.95fr; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); }
.grid-class-row { display:grid; grid-template-columns:260px 1fr 200px; }
.grid-teacher-row { display:grid; grid-template-columns:280px 1fr; }
.grid-sched-home { display:grid; grid-template-columns:110px 1fr 200px 150px 130px; }
.grid-sched-full { display:grid; grid-template-columns:110px 1fr 200px 120px 110px 130px; }
.grid-extra-row { display:grid; grid-template-columns:1fr 240px 130px; }
.grid-retreat { display:grid; grid-template-columns:1fr 1fr; }
.grid-footer { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; }
.grid-cart-line { display:grid; grid-template-columns:76px 1fr auto; }

@media (max-width: 980px) {
  .grid-2, .grid-2-hero, .grid-3, .grid-4, .grid-retreat, .grid-footer { grid-template-columns:1fr 1fr; }
  .grid-teacher-row { grid-template-columns:220px 1fr; }
}
@media (max-width: 720px) {
  .grid-2, .grid-2-hero, .grid-3, .grid-4, .grid-retreat { grid-template-columns:1fr; }
  .grid-footer { grid-template-columns:1fr 1fr; gap:32px !important; }
  .grid-class-row { grid-template-columns:1fr; }
  .grid-teacher-row { grid-template-columns:1fr; }
  .grid-sched-home, .grid-sched-full { grid-template-columns:1fr 1fr; row-gap:6px; }
  .grid-sched-home > :nth-child(5), .grid-sched-full > :nth-child(6) { grid-column:1 / -1; justify-self:start; margin-top:6px; }
  .grid-extra-row { grid-template-columns:1fr; row-gap:6px; padding-bottom:16px !important; }
  h1 { font-size:44px !important; }
  section h2 { font-size:36px !important; }
}
@media (max-width: 520px) {
  .grid-footer { grid-template-columns:1fr; }
}

/* ============ HEADER / NAV ============ */
.topbar { background:#3C4A3E; color:#E8E2D6; font-size:13px; letter-spacing:0.06em; padding:9px 32px; display:flex; justify-content:center; gap:28px; flex-wrap:wrap; text-align:center; }
.site-header { position:sticky; top:0; z-index:60; background:rgba(247,243,236,0.92); backdrop-filter:blur(12px); border-bottom:1px solid #E3DCD0; }
.site-header .inner { max-width:1180px; margin:0 auto; padding:16px 32px; display:flex; align-items:center; gap:32px; }
.logo { cursor:pointer; display:flex; align-items:center; gap:10px; color:inherit; }
.logo-ring { width:26px; height:26px; border-radius:50%; border:1.5px solid #B4693F; position:relative; display:flex; align-items:center; justify-content:center; flex:none; }
.logo-dot { width:9px; height:9px; border-radius:50%; background:#B4693F; animation:yvBreathe 5s ease-in-out infinite; }
.logo-word { font-family:'Cormorant Garamond',serif; font-size:26px; letter-spacing:0.14em; text-transform:uppercase; color:#23201B; }
.main-nav { display:flex; gap:22px; flex-wrap:wrap; flex:1; }
.main-nav a { cursor:pointer; font-size:14px; letter-spacing:0.05em; color:#3C4A3E; padding-bottom:3px; }
.main-nav a.active { color:#B4693F; }
.main-nav a.active .u { height:1.5px; background:#B4693F; margin-top:3px; }
.header-actions { display:flex; align-items:center; gap:14px; }
.cart-btn { cursor:pointer; position:relative; font-size:14px; letter-spacing:0.05em; border:1px solid #C9BFAE; border-radius:999px; padding:9px 18px; background:none; color:#23201B; }
.cart-badge { position:absolute; top:-7px; right:-7px; background:#B4693F; color:#fff; font-size:11px; min-width:20px; height:20px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; padding:0 5px; }
.nav-toggle { display:none; cursor:pointer; border:1px solid #C9BFAE; border-radius:8px; padding:8px 12px; font-size:18px; background:none; }
.nav-toggle-checkbox { display:none; }

@media (max-width: 980px) {
  .site-header .inner { flex-wrap:wrap; padding:14px 20px; }
  .main-nav { order:3; width:100%; max-height:0; overflow:hidden; flex-direction:column; gap:2px; transition:max-height .25s ease; }
  .nav-toggle-checkbox:checked ~ .inner .main-nav { max-height:600px; padding-top:10px; }
  .main-nav a { padding:10px 4px; border-bottom:1px solid #E3DCD0; }
  .nav-toggle { display:inline-flex; align-items:center; justify-content:center; }
}
@media (max-width: 520px) {
  .topbar { padding:8px 16px; gap:14px; font-size:12px; }
  .site-header .inner { padding:12px 16px; gap:14px; }
  .logo-word { font-size:21px; }
}

/* ============ BUTTONS ============ */
.btn { display:inline-block; cursor:pointer; font-size:14px; letter-spacing:0.1em; text-transform:uppercase; border:none; }
.btn-primary { background:#3C4A3E; color:#F7F3EC; border-radius:999px; padding:16px 32px; }
.btn-outline { border:1px solid #3C4A3E; color:#3C4A3E; border-radius:999px; padding:16px 32px; background:none; }
.btn-accent { background:#B4693F; color:#fff; padding:16px 28px; font-size:13px; }

/* ============ FOOTER ============ */
.site-footer { background:#23201B; color:#CFC8BB; padding:76px 32px 36px; }
.site-footer a { color:inherit; }
.site-footer .inner { max-width:1180px; margin:0 auto; }
.footer-col p.h { margin:0 0 16px; font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:#8E8577; }
.footer-links { display:flex; flex-direction:column; gap:11px; }
.footer-links a { cursor:pointer; font-size:15px; }
.footer-bottom { padding-top:26px; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:13.5px; color:#8E8577; }
@media (max-width: 720px) { .site-footer { padding:56px 20px 28px; } }

/* ============ IMAGE FRAMES (replaces placeholder rectangles) ============ */
.ph { position:relative; overflow:hidden; background:#EFE8DC; border:1px solid #E3DCD0; }
.ph img { width:100%; height:100%; object-fit:cover; display:block; }
.ratio-4-5 { aspect-ratio:4/5; }
.ratio-3-4 { aspect-ratio:3/4; }
.ratio-16-10 { aspect-ratio:16/10; }
.ratio-16-9 { aspect-ratio:16/9; }
.ratio-21-8 { aspect-ratio:21/8; }
.ratio-4-3 { aspect-ratio:4/3; }
.ratio-1-1 { aspect-ratio:1/1; }
.hero-img-frame { border-radius:240px 240px 4px 4px; }
@media (max-width: 720px) { .hero-img-frame { border-radius:120px 120px 4px 4px; } }

/* ============ CART DRAWER ============ */
.cart-overlay { position:fixed; inset:0; z-index:90; background:rgba(35,32,27,0.45); display:none; justify-content:flex-end; }
.cart-overlay.open { display:flex; }
.cart-panel { width:440px; max-width:100%; background:#F7F3EC; height:100%; display:flex; flex-direction:column; animation:yvIn .3s ease both; }
.cart-head { padding:26px 30px; border-bottom:1px solid #E3DCD0; display:flex; justify-content:space-between; align-items:center; }
.cart-title { font-family:'Cormorant Garamond',serif; font-size:30px; }
.cart-close { cursor:pointer; font-size:24px; color:#8E8577; background:none; border:none; line-height:1; }
.cart-close:hover { color:#B4693F; }
.cart-body { flex:1; overflow:auto; padding:22px 30px; }
.cart-empty { margin:40px 0; text-align:center; color:#8E8577; font-size:16px; }
.cart-line { display:grid; grid-template-columns:76px 1fr auto; gap:14px; padding:16px 0; border-bottom:1px solid #E3DCD0; align-items:center; }
.cart-line-thumb { aspect-ratio:1; background:repeating-linear-gradient(135deg,#EFE8DC 0 8px,#E6DED0 8px 16px); border:1px solid #E3DCD0; }
.qty-btn { cursor:pointer; width:26px; height:26px; border:1px solid #D8CFC0; display:flex; align-items:center; justify-content:center; font-size:15px; background:none; }
.cart-foot { border-top:1px solid #E3DCD0; padding:24px 30px 30px; background:#FFFDF9; }
.cart-row { display:flex; justify-content:space-between; font-size:15px; color:#6E675C; margin-bottom:8px; }

/* ============ COOKIE BANNER ============ */
.cookie-banner { position:fixed; left:24px; bottom:24px; z-index:95; max-width:520px; background:#FFFDF9; border:1px solid #C9BFAE; box-shadow:0 18px 40px rgba(35,32,27,0.16); padding:26px 28px; }
@media (max-width: 600px) { .cookie-banner { left:12px; right:12px; bottom:12px; max-width:none; padding:20px 20px; } }

/* ============ FAQ (details/summary) ============ */
.faq-item { border-bottom:1px solid #E3DCD0; }
.faq-item summary { cursor:pointer; display:flex; justify-content:space-between; gap:20px; padding:24px 6px; align-items:center; list-style:none; font-size:19px; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary:hover { color:#B4693F; }
.faq-sign { font-family:'Cormorant Garamond',serif; font-size:26px; color:#B4693F; flex:none; }
.faq-item[open] .faq-sign-plus { display:none; }
.faq-item:not([open]) .faq-sign-minus { display:none; }
.faq-answer { margin:0 0 26px; padding:0 6px; font-size:16.5px; line-height:1.75; color:#6E675C; max-width:70ch; }

/* ============ MISC ============ */
.pill { cursor:pointer; border:1px solid #D8CFC0; border-radius:999px; padding:10px 20px; font-size:13.5px; letter-spacing:0.06em; background:transparent; color:#3C4A3E; }
.pill.active { background:#3C4A3E; color:#F7F3EC; }
.badge-accent { position:absolute; top:14px; left:14px; background:#B4693F; color:#fff; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; padding:5px 10px; }
.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; }
.skip-link { position:absolute; left:-999px; top:auto; background:#3C4A3E; color:#fff; padding:12px 18px; z-index:200; }
.skip-link:focus { left:12px; top:12px; }
input, textarea { font-family:'Jost',sans-serif; }
input:focus, textarea:focus, button:focus-visible, a:focus-visible, summary:focus-visible { outline:2px solid #B4693F; outline-offset:2px; }
.form-note { margin:0; font-size:13.5px; color:#B4693F; min-height:18px; }
.form-note.ok { color:#3C4A3E; }
