/* YTT 200 · D-F Studio. Layout and component styles; colours, type and spacing tokens live in theme.json.
   Phone first: base rules are for ~390px screens, min-width queries add the larger layouts. Light only. */

:root {
	--ytt-radius: 18px;
	--ytt-radius-sm: 12px;
	--ytt-line: var(--wp--preset--color--stone);
	--ytt-shadow: 0 12px 32px rgba(41, 41, 41, .07);
	--ytt-ease: cubic-bezier(.2, .7, .2, 1);
	--ytt-header-h: 68px;
	color-scheme: light;
}
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100% }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } *, *::before, *::after { transition: none !important; animation: none !important } }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility }
::selection { background: var(--wp--preset--color--cork); color: var(--wp--preset--color--charcoal) }
img { height: auto }
:where(a, button, summary, input, select, textarea):focus-visible { outline: 2px solid var(--wp--preset--color--cork); outline-offset: 3px; border-radius: 4px }

/* ---------- shared pieces ---------- */
.ytt-eyebrow, .ytt-label {
	font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--label); font-weight: 700;
	letter-spacing: .16em; text-transform: uppercase; color: var(--wp--preset--color--moss); margin: 0 0 1rem;
	display: flex; align-items: center; gap: .75rem;
}
.ytt-eyebrow::before { content: ""; width: 28px; height: 1.5px; background: var(--wp--preset--color--cork); flex: 0 0 auto }
.ytt-lead { font-size: var(--wp--preset--font-size--large); line-height: 1.55; color: var(--wp--preset--color--ash) }
.ytt-note { border-left: 3px solid var(--wp--preset--color--cork); padding: .9rem 1.1rem; background: var(--wp--preset--color--paper); border-radius: 0 var(--ytt-radius-sm) var(--ytt-radius-sm) 0; color: var(--wp--preset--color--ash) }
.wp-block-button.is-style-outline > .wp-block-button__link, .ytt-btn-outline .wp-block-button__link {
	background: transparent; color: var(--wp--preset--color--olive); border: 1.5px solid currentColor;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--wp--preset--color--olive); color: var(--wp--preset--color--linen) }
.wp-block-button__link { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; transition: background .25s var(--ytt-ease), color .25s var(--ytt-ease) }

/* ---------- header ----------
   Paper bar with a hairline, so it sits quietly above Tutor's light panels. Four everyday links + "More", an account menu,
   one menu button on phones, and a slim focus bar inside lessons. Markup: [ytt_header] in functions.php. */
.ytt-header { background: var(--wp--preset--color--paper); color: var(--wp--preset--color--charcoal); border-bottom: 1px solid var(--ytt-line); position: sticky; top: 0; z-index: 50 }
.admin-bar .ytt-header { top: var(--wp-admin--admin-bar--height, 0) }
.ytt-header p { margin: 0; display: contents }
.ytt-hd { min-height: var(--ytt-header-h); display: flex; align-items: center; gap: 1rem; min-width: 0 }
.ytt-brand { display: inline-flex; flex-direction: column; gap: 5px; text-decoration: none; color: inherit; line-height: 1 }
.ytt-brand img { width: 118px; display: block }
.ytt-brand span { font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; opacity: .78; white-space: nowrap }
.ytt-header .ytt-brand { color: var(--wp--preset--color--ash); flex: none }
.ytt-header .ytt-brand span { opacity: 1; letter-spacing: .12em; font-size: 9.5px }

.ytt-nav { display: none; margin-left: auto }
.ytt-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 1.6rem }
.ytt-nav__link { display: inline-flex; align-items: center; gap: .3rem; padding: .45rem 0; font-size: 15px; color: var(--wp--preset--color--charcoal); text-decoration: none; border-bottom: 2px solid transparent; transition: border-color .2s, color .2s; cursor: pointer; white-space: nowrap }
.ytt-nav__link:hover { color: var(--wp--preset--color--olive); border-bottom-color: var(--wp--preset--color--stone) }
.ytt-nav__link.is-current { color: var(--wp--preset--color--olive); font-weight: 700; border-bottom-color: var(--wp--preset--color--cork) }

/* dropdowns (More, account, phone menu) are <details> */
.ytt-menu { position: relative }
.ytt-menu > summary { list-style: none; cursor: pointer }
.ytt-menu > summary::-webkit-details-marker { display: none }
.ytt-chev { transition: transform .2s; flex: none }
.ytt-menu[open] > summary .ytt-chev { transform: rotate(180deg) }
.ytt-menu__panel {
	position: absolute; top: calc(100% + 10px); left: -1rem; min-width: 220px; z-index: 60; padding: .5rem;
	background: var(--wp--preset--color--paper); border: 1px solid var(--ytt-line); border-radius: var(--ytt-radius-sm); box-shadow: var(--ytt-shadow);
	display: flex; flex-direction: column;
}
.ytt-menu__panel--end { left: auto; right: 0 }
.ytt-menu__panel a { display: block; padding: .7rem .85rem; border-radius: 8px; color: var(--wp--preset--color--charcoal); text-decoration: none; font-size: 15px }
.ytt-menu__panel a:hover { background: var(--wp--preset--color--linen); color: var(--wp--preset--color--olive) }
.ytt-menu__panel a.is-current { color: var(--wp--preset--color--olive); font-weight: 700; box-shadow: inset 3px 0 0 var(--wp--preset--color--cork) }
.ytt-menu__panel hr { border: 0; border-top: 1px solid var(--ytt-line); margin: .4rem .5rem; width: auto }
.ytt-menu__who { display: block !important; padding: .6rem .85rem .75rem; margin: 0 0 .25rem !important; border-bottom: 1px solid var(--ytt-line); font-weight: 700; font-size: 14px; line-height: 1.3 }
.ytt-menu__who small { display: block; font-weight: 400; color: var(--wp--preset--color--ash); font-size: 13px; overflow-wrap: anywhere }

.ytt-acct { display: none; flex: none }
.ytt-acct > summary { display: flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 .25rem; font-size: 14px; color: var(--wp--preset--color--charcoal) }
.ytt-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--wp--preset--color--olive); color: var(--wp--preset--color--linen); display: grid; place-items: center; font-weight: 700; font-size: 14px; flex: none }
.ytt-acct__name { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

.ytt-burger { margin-left: auto; flex: none }
.ytt-burger > summary { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--wp--preset--color--olive) }
.ytt-burger[open] > summary { background: var(--wp--preset--color--linen) }
.ytt-menu__panel--sheet { position: fixed; top: calc(var(--ytt-header-h) + 8px); left: 12px; right: 12px; max-height: calc(100dvh - var(--ytt-header-h) - 24px); overflow: auto }
.admin-bar .ytt-menu__panel--sheet { top: calc(var(--ytt-header-h) + var(--wp-admin--admin-bar--height, 0px) + 8px) }
.ytt-menu__panel--sheet a { font-size: 17px; padding: .85rem }

@media (min-width: 600px) { :root { --ytt-header-h: 72px } .ytt-brand img { width: 150px } .ytt-brand span, .ytt-header .ytt-brand span { font-size: 11px } }
@media (min-width: 960px) {
	.ytt-nav, .ytt-acct { display: block }
	.ytt-acct { margin-left: .75rem }
	.ytt-burger { display: none }
}

/* lesson focus bar: just the monogram, a way back, and the account menu */
.ytt-hd--focus { --ytt-focus-h: 52px; min-height: var(--ytt-focus-h); gap: .9rem }
.ytt-mono { font-family: var(--wp--preset--font-family--display); font-size: 1.45rem; font-weight: 600; line-height: 1; color: var(--wp--preset--color--olive); text-decoration: none; flex: none }
.ytt-back-link { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .2rem; font-size: 14px; font-weight: 700; color: var(--wp--preset--color--olive); text-decoration: none; border-left: 1px solid var(--ytt-line); padding-left: .9rem }
.ytt-back-link:hover { text-decoration: underline; text-underline-offset: 4px }
.ytt-hd--focus .ytt-acct { display: block; margin-left: auto }
@media (max-width: 599px) { .ytt-hd--focus .ytt-acct__name, .ytt-hd--focus .ytt-acct .ytt-chev { display: none } }

/* ---------- interior pages ---------- */
.ytt-main { padding-bottom: var(--wp--preset--spacing--60) }
.ytt-page-hero { padding-top: var(--wp--preset--spacing--60); padding-bottom: var(--wp--preset--spacing--40); border-bottom: 1px solid var(--ytt-line); margin-bottom: var(--wp--preset--spacing--50) }
.ytt-page-hero .wp-block-post-title { max-width: 18ch; margin: 0 }
.ytt-prose > * { max-width: 680px }
.ytt-prose h2 { margin-top: 2.6rem }
.ytt-prose h3 { margin-top: 2rem }
.ytt-prose li { margin-bottom: .35rem }
.ytt-prose li::marker { color: var(--wp--preset--color--cork) }
.wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch }
.wp-block-table table { border-collapse: collapse; width: 100%; background: var(--wp--preset--color--paper); border-radius: var(--ytt-radius-sm); overflow: hidden }
.wp-block-table th { text-align: left; font-size: var(--wp--preset--font-size--label); text-transform: uppercase; letter-spacing: .12em; color: var(--wp--preset--color--ash); background: var(--wp--preset--color--linen) }
.wp-block-table th, .wp-block-table td { border: 0; border-bottom: 1px solid var(--ytt-line); padding: .9rem 1rem; vertical-align: top }
.wp-block-table thead { border-bottom: 0 }
.wp-block-table tr:last-child td { border-bottom: 0 }

/* ---------- landing page sections ---------- */
.ytt-landing { padding: 0 }
.ytt-section { padding-top: var(--wp--preset--spacing--60); padding-bottom: var(--wp--preset--spacing--60) }
.ytt-section--paper { background: var(--wp--preset--color--paper) }
.ytt-section--olive { background: var(--wp--preset--color--olive); color: var(--wp--preset--color--linen) }
.ytt-section--olive :where(h1, h2, h3, p, a) { color: var(--wp--preset--color--linen) }
.ytt-section--olive .ytt-eyebrow { color: var(--wp--preset--color--stone) }
.ytt-section h2 { max-width: 20ch }

/* hero: full-bleed studio photo with an olive wash so the type reads */
.ytt-hero.wp-block-cover { min-height: min(88svh, 820px); padding-top: var(--wp--preset--spacing--60); padding-bottom: var(--wp--preset--spacing--50); align-items: flex-end }
.ytt-hero .wp-block-cover__background { background: linear-gradient(180deg, rgba(51, 55, 31, .12) 0%, rgba(51, 55, 31, .35) 40%, rgba(41, 44, 26, .86) 100%) !important; opacity: 1 !important }
.ytt-hero .wp-block-cover__inner-container { max-width: 1180px; width: 100% }
.ytt-hero h1 { font-size: var(--wp--preset--font-size--hero); color: var(--wp--preset--color--linen); max-width: 13ch; margin: 0 0 1rem; line-height: 1.02 }
.ytt-hero h1 em { font-style: italic; color: #E9D9C2 }
.ytt-hero .ytt-eyebrow { color: var(--wp--preset--color--linen) }
.ytt-hero p { color: rgba(245, 242, 235, .92); max-width: 46ch; font-size: var(--wp--preset--font-size--large); line-height: 1.5 }
.ytt-hero .wp-block-buttons { margin-top: 1.75rem; gap: .75rem }
.ytt-hero .wp-block-button__link { background: var(--wp--preset--color--linen); color: var(--wp--preset--color--olive) }
.ytt-hero .wp-block-button__link:hover { background: #fff; color: var(--wp--preset--color--olive-deep) }
.ytt-hero .is-style-outline .wp-block-button__link { background: transparent; color: var(--wp--preset--color--linen); border-color: rgba(245, 242, 235, .7) }
.ytt-hero .is-style-outline .wp-block-button__link:hover { background: var(--wp--preset--color--linen); color: var(--wp--preset--color--olive) }
.ytt-facts { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: 2rem !important; padding: 0; list-style: none; font-size: var(--wp--preset--font-size--label); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(245, 242, 235, .85) }
.ytt-facts li { display: flex; align-items: center; gap: .6rem }
.ytt-facts li + li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--wp--preset--color--cork) }

/* statement: a big serif quote in the school's own words */
.ytt-statement { font-family: var(--wp--preset--font-family--display); font-size: clamp(1.75rem, 3.6vw, 2.75rem); line-height: 1.22; font-weight: 500; color: var(--wp--preset--color--olive); margin: 0; max-width: 24ch }
.ytt-statement-cite { font-size: var(--wp--preset--font-size--label); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--wp--preset--color--ash) }

/* module cards */
.ytt-cards { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: var(--wp--preset--spacing--50) !important }
@media (min-width: 640px) { .ytt-cards { grid-template-columns: repeat(2, 1fr) } }
@media (min-width: 1000px) { .ytt-cards { grid-template-columns: repeat(3, 1fr) } }
.ytt-card { background: var(--wp--preset--color--paper); border: 1px solid var(--ytt-line); border-radius: var(--ytt-radius); padding: 1.6rem 1.5rem 1.7rem; margin: 0 !important; transition: transform .35s var(--ytt-ease), box-shadow .35s var(--ytt-ease) }
.ytt-card:hover { transform: translateY(-3px); box-shadow: var(--ytt-shadow) }
.ytt-card .ytt-num { font-family: var(--wp--preset--font-family--display); font-size: 1rem; font-style: italic; color: var(--wp--preset--color--timber); margin: 0 0 .9rem }
.ytt-card h3 { margin: 0 0 .5rem; font-size: 1.55rem }
.ytt-card p { margin: 0; color: var(--wp--preset--color--ash); font-size: var(--wp--preset--font-size--small); line-height: 1.6 }

/* steps */
.ytt-steps { display: grid; gap: 2rem; grid-template-columns: 1fr; counter-reset: step; margin-top: var(--wp--preset--spacing--50) !important }
@media (min-width: 820px) { .ytt-steps { grid-template-columns: repeat(3, 1fr); gap: 2.5rem } }
.ytt-step { counter-increment: step; border-top: 1.5px solid var(--wp--preset--color--olive); padding-top: 1.25rem; margin: 0 !important }
.ytt-step::before { content: "0" counter(step); display: block; font-family: var(--wp--preset--font-family--display); font-style: italic; color: var(--wp--preset--color--timber); font-size: 1.1rem; margin-bottom: .6rem }
.ytt-step h3 { margin: 0 0 .5rem }
.ytt-step p { margin: 0; color: var(--wp--preset--color--ash) }

/* photo + text split */
.ytt-split { gap: clamp(2rem, 5vw, 5rem) !important; align-items: center !important }
.ytt-split .wp-block-image img { border-radius: var(--ytt-radius); aspect-ratio: 4 / 5; object-fit: cover; width: 100% }
.ytt-split--landscape .wp-block-image img { aspect-ratio: 3 / 2 }
@media (max-width: 781px) { .ytt-split .wp-block-column:has(.wp-block-image) { order: -1 } }

/* weekend dates */
.ytt-dates { display: grid; gap: .75rem; grid-template-columns: 1fr; margin-top: var(--wp--preset--spacing--50) !important; padding: 0; list-style: none }
@media (min-width: 640px) { .ytt-dates { grid-template-columns: repeat(2, 1fr) } }
@media (min-width: 1000px) { .ytt-dates { grid-template-columns: repeat(5, 1fr) } }
.ytt-dates li { background: rgba(245, 242, 235, .07); border: 1px solid rgba(245, 242, 235, .22); border-radius: var(--ytt-radius-sm); padding: 1.1rem 1.2rem; margin: 0 }
.ytt-dates b { display: block; font-size: var(--wp--preset--font-size--label); letter-spacing: .16em; text-transform: uppercase; color: var(--wp--preset--color--cork); margin-bottom: .35rem }
.ytt-dates span { font-family: var(--wp--preset--font-family--display); font-size: 1.45rem; line-height: 1.2; display: block }
.ytt-dates small { display: block; margin-top: .35rem; font-size: .85rem; opacity: .8 }

/* student area teaser */
.ytt-tools-list { list-style: none; padding: 0; margin: 1.5rem 0 2rem; display: grid; gap: .9rem }
.ytt-tools-list li { padding-left: 1.75rem; position: relative; margin: 0 }
.ytt-tools-list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--wp--preset--color--moss) }
.ytt-tools-list strong { font-weight: 700 }

/* ---------- footer ---------- */
.ytt-footer { background: var(--wp--preset--color--olive); color: rgba(245, 242, 235, .86); padding-top: var(--wp--preset--spacing--60); padding-bottom: 2rem; font-size: var(--wp--preset--font-size--small) }
.ytt-footer a { color: var(--wp--preset--color--linen); text-decoration-color: rgba(245, 242, 235, .35); text-underline-offset: 3px }
.ytt-footer a:hover { text-decoration-color: var(--wp--preset--color--cork) }
.ytt-footer h4 { color: var(--wp--preset--color--stone); margin: 0 0 .9rem }
.ytt-footer p { margin: 0 0 .9rem; line-height: 1.6 }
.ytt-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem }
.ytt-footer__grid { display: grid; gap: 2.25rem; grid-template-columns: 1fr }
@media (min-width: 700px) { .ytt-footer__grid { grid-template-columns: 1fr 1fr } }
@media (min-width: 1000px) { .ytt-footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr } }
.ytt-footer__brand p { max-width: 34ch; margin-top: 1.1rem }
.ytt-footer__small { margin: 3rem 0 0 !important; padding-top: 1.25rem; border-top: 1px solid rgba(245, 242, 235, .16); font-size: .8rem; letter-spacing: .04em; opacity: .7 }

/* ---------- practice tool embeds ---------- */
.ytt-tool { display: block; width: 100%; height: min(86svh, 860px); border: 1px solid var(--ytt-line); border-radius: var(--ytt-radius); background: var(--wp--preset--color--paper) }
.ytt-tool-open { display: inline-flex; margin: .25rem 0 1rem }
@media (max-width: 700px) { .ytt-tool { height: 78svh; border-radius: var(--ytt-radius-sm) } }

/* ==========================================================================
   Tutor LMS: map its design tokens onto the D-F palette so every Tutor screen
   (course page, learning area, dashboard, quiz) follows the brand.
   ========================================================================== */
body {
	--tutor-brand-100: #F6F6F0; --tutor-brand-200: #EDEEE3; --tutor-brand-300: #E2E4D3; --tutor-brand-400: #C7CBAE; --tutor-brand-450: #B9BE9C;
	--tutor-brand-500: #6E7650; --tutor-brand-600: #474C2F; --tutor-brand-700: #3D4128; --tutor-brand-800: #33371F; --tutor-brand-900: #2A2D1A; --tutor-brand-950: #1E2013;
	--tutor-color-primary: #474C2F; --tutor-color-primary-rgb: 71, 76, 47; --tutor-color-primary-hover: #33371F;
	--tutor-surface-base: #F5F2EB; --tutor-surface-l1: #FBFAF6; --tutor-surface-l1-hover: #F3F0E8; --tutor-surface-l2: #EAE6DB; --tutor-surface-l2-hover: #E4DFD3; --tutor-surface-l3: #F3F0E8; --tutor-surface-sidebar-l1: #F8F6F0;
	--tutor-surface-success: #EEF0E4; --tutor-text-success: #4F5A2C; --tutor-icon-success-primary: #5D6B33; --tutor-icon-success-secondary: #6E7650; --tutor-border-success: #B9BE9C;
	--tutor-text-primary: #292929; --tutor-text-secondary: #3E3F3A; --tutor-text-subdued: #5C5E55; --tutor-icon-idle: #3E3F3A; --tutor-icon-secondary: #5C5E55; --tutor-icon-subdued: #8A8C80;
	--tutor-border-idle: #E4DFD3; --tutor-border-idle2: #E4DFD3; --tutor-border-hover: #CFC8B8; --tutor-border-color: #E4DFD3;
	--tutor-body-color: #292929; --tutor-color-muted: #5C5E55;
	--tutor-font-family-body: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;
	--tutor-font-family-heading: "Cormorant Garamond", Georgia, serif;
}
/* Tutor screens sit on Linen like the rest of the site */
body.tutor-screen-frontend-dashboard, body.single-courses, body.single-lesson, body.single-tutor_quiz, body.tutor-lms { background: var(--wp--preset--color--linen) }
:where(.tutor-wrap, .tutor-dashboard, .tutor-learning-area, .tutor-course-details-page) { font-family: var(--tutor-font-family-body) }
:where(.tutor-wrap, .tutor-dashboard, .tutor-learning-area, .tutor-course-details-page) :where(h1, h2, .tutor-course-details-title, .tutor-fs-3, .tutor-fs-4) { font-family: var(--tutor-font-family-heading); font-weight: 500; letter-spacing: 0 }
.tutor-btn { border-radius: 999px !important }
.tutor-btn-primary { letter-spacing: .04em }
/* lesson reading: comfortable measure and rhythm */
.tutor-lesson-content, .tutor-course-topic-single-body .tutor-lesson-wrapper { font-size: 1.0625rem; line-height: 1.75 }
.tutor-lesson-content :where(p, li, h2, h3, ul) { max-width: 68ch }
.tutor-lesson-content h2, .tutor-lesson-content h3 { font-family: var(--tutor-font-family-heading); font-weight: 500; margin: 2em 0 .6em; color: var(--wp--preset--color--charcoal) }
.tutor-lesson-content h3 { font-size: 1.5rem }
.tutor-lesson-content li::marker { color: var(--wp--preset--color--cork) }
.tutor-lesson-content .ytt-tool { margin-top: 1rem }
/* video: rounded like the site's photos */
.tutor-video-player, .tutor-video-player video, .plyr { border-radius: var(--ytt-radius-sm); overflow: hidden }

/* ---------- small pill link (e.g. "Open full screen") ---------- */
.ytt-pill { display: inline-flex; align-items: center; min-height: 40px; padding: 0 1.1rem; border-radius: 999px; border: 1.5px solid var(--wp--preset--color--olive); color: var(--wp--preset--color--olive); text-decoration: none; font-size: var(--wp--preset--font-size--label); font-weight: 700; letter-spacing: .14em; text-transform: uppercase }
.ytt-pill:hover { background: var(--wp--preset--color--olive); color: var(--wp--preset--color--linen) }

/* ==========================================================================
   Sign-in screen: the only public page. Photo band above the form on phones;
   photo left, form right on wider screens.
   ========================================================================== */
.ytt-signin-page { padding: 0 !important; margin: 0 !important; max-width: none !important }
.ytt-signin-page > * { max-width: none !important; margin: 0 !important }
.ytt-signin { display: grid; grid-template-rows: 34svh auto; min-height: 100svh; background: var(--wp--preset--color--linen) }
.ytt-signin__photo { background: var(--wp--preset--color--sage) center 30% / cover no-repeat; position: relative }
.ytt-signin__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(51, 55, 31, 0) 55%, rgba(51, 55, 31, .25)) }
.ytt-signin__panel { display: flex; align-items: flex-start; justify-content: center; padding: 2.25rem clamp(1.25rem, 6vw, 3rem) 3rem }
.ytt-signin__inner { width: 100%; max-width: 400px }
.ytt-signin__logo { display: inline-block; margin-bottom: 2.25rem }
.ytt-signin__logo img { width: 170px; height: auto; display: block }
.ytt-signin h1 { font-size: clamp(2.6rem, 7vw, 3.6rem); margin: 0 0 .75rem; line-height: 1 }
.ytt-signin__intro { color: var(--wp--preset--color--ash); margin: 0 0 1.75rem; max-width: 36ch }
.ytt-signin__error { background: #F7EDE3; border-left: 3px solid var(--wp--preset--color--timber); color: var(--wp--preset--color--timber); padding: .8rem 1rem; border-radius: 0 10px 10px 0; font-size: var(--wp--preset--font-size--small); margin: 0 0 1.25rem }
.ytt-signin form p { margin: 0 0 1rem }
.ytt-signin form label { display: block; font-size: var(--wp--preset--font-size--label); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--wp--preset--color--ash); margin-bottom: .45rem }
.ytt-signin form input[type=text], .ytt-signin form input[type=password] { box-sizing: border-box;
	width: 100%; min-height: 52px; padding: 0 1rem; font: inherit; font-size: 16px; /* 16px stops iPhone zooming in */
	color: var(--wp--preset--color--charcoal); background: var(--wp--preset--color--paper); border: 1px solid #CFC8B8; border-radius: 12px; transition: border-color .2s, box-shadow .2s;
}
.ytt-signin form input:focus { outline: none; border-color: var(--wp--preset--color--olive); box-shadow: 0 0 0 3px rgba(71, 76, 47, .18) }
.ytt-signin .login-remember label { display: inline-flex; align-items: center; gap: .6rem; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--charcoal); min-height: 44px; cursor: pointer }
.ytt-signin .login-remember input { width: 20px; height: 20px; accent-color: var(--wp--preset--color--olive) }
.ytt-signin .login-submit { margin-top: .5rem !important }
.ytt-signin #wp-submit {
	width: 100%; min-height: 54px; border: 0; border-radius: 999px; cursor: pointer; background: var(--wp--preset--color--olive); color: var(--wp--preset--color--linen);
	font: 700 var(--wp--preset--font-size--label)/1 var(--wp--preset--font-family--body); letter-spacing: .16em; text-transform: uppercase; transition: background .2s;
}
.ytt-signin #wp-submit:hover { background: var(--wp--preset--color--olive-deep) }
.ytt-signin__help { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--ash); margin: 1rem 0 0 }
.ytt-signin__help + .ytt-signin__help { margin-top: .4rem }
@media (min-width: 880px) {
	.ytt-signin { grid-template-rows: none; grid-template-columns: minmax(0, 1.15fr) minmax(420px, 1fr); height: 100svh; min-height: 640px }
	.ytt-signin__photo { background-position: center 25% }
	.ytt-signin__photo::after { background: linear-gradient(90deg, rgba(51, 55, 31, 0) 70%, rgba(51, 55, 31, .18)) }
	.ytt-signin__panel { align-items: center; padding: 3rem clamp(2rem, 5vw, 5rem); overflow-y: auto }
}

/* course guide quote */
.ytt-quote { margin: 0 auto; padding: 0; border: 0; max-width: 1180px }
.ytt-quote .ytt-statement { margin-bottom: 1.25rem }
.ytt-quote .ytt-statement::before { content: ""; display: block; width: 44px; height: 1.5px; background: var(--wp--preset--color--cork); margin-bottom: 1.75rem }

/* template parts sit flush: no gap between header, content and footer */
.wp-site-blocks > * { margin-block-start: 0 }
.ytt-landing > :first-child { margin-top: 0 }
.ytt-landing > .alignfull { margin-left: 0 !important; margin-right: 0 !important; width: 100%; max-width: none }
/* hero content lines up with the 1180px content column, left-aligned */
.ytt-hero .wp-block-cover__inner-container { max-width: 1180px; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2.5rem); box-sizing: border-box }
.ytt-hero .wp-block-cover__inner-container > * { margin-left: 0 !important; margin-right: 0 !important }
.ytt-hero.wp-block-cover { padding-left: 0; padding-right: 0 }

/* section headings and lead text: left-aligned to the content column, at a readable measure */
.ytt-section > :where(.wp-block-heading, .ytt-lead) { margin-left: max(0px, (100% - 1180px) / 2) !important; margin-right: auto !important }
.ytt-section > .wp-block-heading { max-width: 20ch }
.ytt-section > .ytt-lead { max-width: 62ch }
/* numbers in the tracked label style (the serif's old-style figures read as "o1") */
.ytt-card .ytt-num, .ytt-step::before { font-family: var(--wp--preset--font-family--body); font-style: normal; font-weight: 700; font-size: var(--wp--preset--font-size--label); letter-spacing: .16em; text-transform: uppercase; color: var(--wp--preset--color--timber) }

/* lining figures in the serif, so "1 Nov" doesn't read as "I Nov" */
h1, h2, h3, .ytt-statement, .ytt-dates span, .wp-block-heading { font-variant-numeric: lining-nums }
/* outline buttons on the olive band */
.ytt-section--olive .is-style-outline .wp-block-button__link { color: var(--wp--preset--color--linen); border-color: rgba(245, 242, 235, .7) }
.ytt-section--olive .is-style-outline .wp-block-button__link:hover { background: var(--wp--preset--color--linen); color: var(--wp--preset--color--olive) }
.ytt-section--olive .wp-block-buttons { margin-top: 2rem }

/* Tutor: numbers in lining figures (Cormorant's old-style "1" and "0" read as "I" and "O"), and stat icons in the palette */
:where(.tutor-dashboard, .tutor-wrap, .tutor-learning-area, .tutor-course-details-page) { font-variant-numeric: lining-nums }
.tutor-stat-card :where(.tutor-fs-3, .tutor-fs-4, strong, [class*="value"], [class*="count"]) { font-family: var(--tutor-font-family-body) !important; font-weight: 700 !important; font-variant-numeric: lining-nums tabular-nums }
.tutor-stat-card svg { color: var(--wp--preset--color--moss) !important }
.tutor-stat-card-active svg, .tutor-stat-card-active [class*="value"] { color: var(--wp--preset--color--olive) !important }
.tutor-stat-card :where([class*="value"], .tutor-fs-3, .tutor-fs-4) { color: var(--wp--preset--color--charcoal) !important }

/* lesson video player in the brand colour */
:root { --plyr-color-main: #474C2F; --plyr-video-control-background-hover: #474C2F; --plyr-range-thumb-background: #FBFAF6 }
.plyr__control--overlaid { background: rgba(71, 76, 47, .92) !important }

/* ---------- Sanskrit glossary ---------- */
.ytt-glossary { max-width: 1180px; margin: 0 auto }
.ytt-glossary__bar { position: sticky; top: var(--ytt-header-h); z-index: 5; background: var(--wp--preset--color--linen); padding: .9rem 0 .6rem; margin-bottom: .5rem; border-bottom: 1px solid var(--ytt-line) }
.admin-bar .ytt-glossary__bar { top: calc(var(--ytt-header-h) + var(--wp-admin--admin-bar--height, 0px)) }
.ytt-glossary__bar input {
	width: 100%; box-sizing: border-box; min-height: 52px; padding: 0 1.1rem 0 2.9rem; font: inherit; font-size: 16px; color: var(--wp--preset--color--charcoal);
	background: var(--wp--preset--color--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%235C5E55' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='9' cy='9' r='6'/%3E%3Cpath d='m14 14 4 4'/%3E%3C/svg%3E") 1rem 50% no-repeat;
	border: 1px solid #CFC8B8; border-radius: 999px;
}
.ytt-glossary__bar input:focus { outline: none; border-color: var(--wp--preset--color--olive); box-shadow: 0 0 0 3px rgba(71, 76, 47, .18) }
.ytt-glossary__az { display: flex; gap: .15rem; overflow-x: auto; scrollbar-width: none; margin-top: .6rem; -webkit-overflow-scrolling: touch }
.ytt-glossary__az::-webkit-scrollbar { display: none }
.ytt-glossary__az a { flex: 0 0 auto; min-width: 40px; height: 40px; display: grid; place-items: center; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: .85rem; letter-spacing: .06em; color: var(--wp--preset--color--olive) }
.ytt-glossary__az a:hover { background: var(--wp--preset--color--stone) }
.ytt-glossary__group { scroll-margin-top: calc(var(--ytt-header-h) + 130px) }
.ytt-glossary__letter { font-size: 2.4rem; color: var(--wp--preset--color--cork); margin: 2rem 0 .25rem; line-height: 1 }
.ytt-glossary ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 0 2.5rem }
@media (min-width: 860px) { .ytt-glossary ul { grid-template-columns: 1fr 1fr } }
.ytt-gword { display: flex; gap: 1rem; align-items: flex-start; padding: 1.1rem 0; border-bottom: 1px solid var(--ytt-line); margin: 0 }
.ytt-gword[hidden], .ytt-glossary__group[hidden] { display: none }
.ytt-gword__play {
	flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
	background: var(--wp--preset--color--paper); color: var(--wp--preset--color--olive); border: 1.5px solid var(--wp--preset--color--olive); transition: background .2s, color .2s;
}
.ytt-gword__play svg { width: 22px; height: 22px }
.ytt-gword__play:hover, .ytt-gword__play[aria-pressed="true"] { background: var(--wp--preset--color--olive); color: var(--wp--preset--color--linen) }
.ytt-gword__play[aria-pressed="true"] { animation: ytt-pulse 1.1s ease-in-out infinite }
@keyframes ytt-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(71, 76, 47, .35) } 50% { box-shadow: 0 0 0 7px rgba(71, 76, 47, 0) } }
.ytt-gword__text { min-width: 0 }
.ytt-gword__text p { margin: 0 }
.ytt-gword__name { font-family: var(--wp--preset--font-family--display); font-size: 1.6rem; line-height: 1.15; font-weight: 500 }
.ytt-gword__iast { color: var(--wp--preset--color--ash); font-size: .95rem; margin-top: .2rem !important }
.ytt-gword__iast span { margin-left: .4rem; font-size: 1.05rem }
.ytt-gword__en { font-size: var(--wp--preset--font-size--label); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--wp--preset--color--moss); margin-top: .45rem !important }
.ytt-glossary__empty { padding: 2rem 0; color: var(--wp--preset--color--ash) }

/* ---------- student dashboard home: next weekend + practice tiles ---------- */
.ytt-dash { margin-top: 2rem; font-family: var(--tutor-font-family-body) }
.ytt-dash a { text-decoration: none }
.ytt-dash__next { display: grid; gap: .3rem; padding: 1.4rem 1.5rem; border-radius: var(--ytt-radius); background: var(--wp--preset--color--olive); color: var(--wp--preset--color--linen) !important; margin-bottom: 2rem; transition: background .2s }
.ytt-dash__next:hover { background: var(--wp--preset--color--olive-deep) }
.ytt-dash__label { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #E9D9C2 }
.ytt-dash__when { font-family: var(--wp--preset--font-family--display); font-size: 1.9rem; line-height: 1.15; font-variant-numeric: lining-nums }
.ytt-dash__note { font-size: .95rem; opacity: .85 }
.ytt-dash__title { font-family: var(--tutor-font-family-body) !important; font-size: 1rem !important; font-weight: 700 !important; margin: 0 0 .85rem !important; color: var(--wp--preset--color--charcoal) }
.ytt-dash__tiles { display: grid; gap: .75rem; grid-template-columns: 1fr }
@media (min-width: 560px) { .ytt-dash__tiles { grid-template-columns: 1fr 1fr } }
@media (min-width: 1100px) { .ytt-dash__tiles { grid-template-columns: repeat(3, 1fr) } }
.ytt-dash__tile { display: grid; gap: .25rem; padding: 1.1rem 1.2rem; border-radius: 14px; background: var(--wp--preset--color--paper); border: 1px solid var(--ytt-line); color: var(--wp--preset--color--charcoal) !important; transition: border-color .2s, transform .25s var(--ytt-ease) }
.ytt-dash__tile:hover { border-color: var(--wp--preset--color--olive); transform: translateY(-2px) }
.ytt-dash__tile strong { font-family: var(--wp--preset--font-family--display); font-size: 1.35rem; font-weight: 500; line-height: 1.2 }
.ytt-dash__tile span { font-size: .9rem; color: var(--wp--preset--color--ash) }
.ytt-dash__tile strong::after { content: " →"; font-family: var(--tutor-font-family-body); font-size: .9rem; color: var(--wp--preset--color--cork) }

/* dashboard sidebar logo */
.tutor-dashboard-sidebar-logo img, .tutor-brand-logo img { max-width: 150px; height: auto }
/* course page: the enrolled-on note in the palette rather than Tutor's green */
.tutor-course-details-page :where(.tutor-color-success, .tutor-icon-purchase-mark) { color: var(--wp--preset--color--moss) !important }
/* Tutor notices (e.g. "Complete all lessons…") and the course sidebar cards in the palette */
body { --tutor-surface-warning: #F7EFE4; --tutor-surface-warning-hover: #F1E5D4; --tutor-border-warning: #E3CBA8; --tutor-border-warning-tertiary: #C29A6B; --tutor-icon-warning: #7A5A3F; --tutor-icon-warning-secondary: #C29A6B; --tutor-text-warning: #6B4E37; --tutor-text-caution: #6B4E37; --tutor-icon-caution: #C29A6B; --tutor-color-warning: #C29A6B }
.tutor-course-details-page .tutor-card, .tutor-course-details-page .tutor-sidebar-card { background: var(--wp--preset--color--paper) }

/* ---------- learning area: selected lesson and key controls reversed out (olive, light text) ----------
   Set explicitly rather than through Tutor's tokens, so they read the same whatever Tutor's theme does. */
.tutor-learning-nav-item.active { background: var(--wp--preset--color--olive) !important; color: var(--wp--preset--color--linen) !important }
.tutor-learning-nav-item.active :where(*, svg) { color: var(--wp--preset--color--linen) !important; opacity: 1 }
.tutor-learning-nav-item.active:before { background-color: var(--wp--preset--color--cork) !important }
.tutor-tabs-tab-active, .tutor-tabs-tab-active:hover, .tutor-tabs-tab-active:focus { background: var(--wp--preset--color--olive) !important; color: var(--wp--preset--color--linen) !important }
.tutor-tabs-tab-active svg { color: var(--wp--preset--color--linen) !important }
.tutor-progress-bar { background-color: var(--wp--preset--color--stone) !important }
.tutor-progress-bar-fill { background-color: var(--wp--preset--color--moss) !important }
.tutor-progress-bar-fill:before { display: none }
.tutor-learning-area :where(.tutor-btn-primary, .tutor-btn-secondary) { background: var(--wp--preset--color--olive) !important; border-color: var(--wp--preset--color--olive) !important; color: var(--wp--preset--color--linen) !important }
.tutor-learning-area :where(.tutor-btn-primary, .tutor-btn-secondary) :where(svg, span) { color: inherit !important }
.tutor-learning-area :where(.tutor-btn-primary, .tutor-btn-secondary):hover { background: var(--wp--preset--color--olive-deep, #33371F) !important }
/* "Complete the Course" stays visible but quiet until every lesson is done */
.tutor-learning-area :where(.tutor-btn-secondary, .tutor-btn-primary):is(.disabled, :disabled) { background: var(--wp--preset--color--stone) !important; border-color: var(--wp--preset--color--stone) !important; color: var(--wp--preset--color--ash) !important; opacity: 1 }
/* "Mark as Complete" is the lesson's main action: a solid olive pill; once done it turns a quiet "Completed" */
.tutor-mark-as-complete-button { background: var(--wp--preset--color--olive) !important; color: var(--wp--preset--color--linen) !important; border: 0 !important; border-radius: 999px !important; min-height: 46px; padding: 0 1.4rem !important; box-shadow: none !important; font-weight: 700 }
.tutor-mark-as-complete-button :where(span, svg) { color: inherit !important }
.tutor-mark-as-complete-button:hover { background: #33371F !important }
.tutor-mark-as-complete-button.completed { background: #EEF0E4 !important; color: #4F5A2C !important }

/* header menus: no browser outline on click, the cork ring for keyboard focus */
.ytt-menu > summary:focus { outline: none }
.ytt-menu > summary:focus-visible { outline: 2px solid var(--wp--preset--color--cork); outline-offset: 3px; border-radius: 8px }
.ytt-burger > summary:focus-visible { border-radius: 50% }