/* Activated only for a touch tablet held in portrait (or its isolated preview).
   Desktop and landscape tablet selectors and measurements are untouched. */
html.tablet-portrait {
  scroll-behavior: smooth;
  & body, & body.workspace-page, &.phone-index body.section3-preview {
    --phone-gutter: clamp(38px, 6vw, 72px);
    --page-gutter: var(--phone-gutter);
    --frame-width: min(1000px, calc(100% - 2 * var(--phone-gutter)));
    --header-height: calc(76px + env(safe-area-inset-top));
    --copy-size: 16px;
  }
  & body.workspace-page > .site-header,
  &.phone-index body.section3-preview > .site-header {
    --header-height: calc(76px + env(safe-area-inset-top));
    padding-inline: var(--phone-gutter);
  }
  & body.workspace-page > .site-header .wordmark,
  &.phone-index body.section3-preview > .site-header .wordmark { font-size: 30px; }
  & body.workspace-page > .site-header .mobile-nav a,
  &.phone-index body.section3-preview > .site-header .mobile-nav a { font-size: 13px; font-weight: 300; min-height: 52px; }
  & body.workspace-page .workspace-shell.page-composed, & body.booking-page .workspace-shell {
    min-height: calc(100svh - 90px); padding-top: calc(var(--header-height) + 48px); padding-bottom: 40px;
  }
  & body.workspace-page .page-composed > .page-composition {
    --copy-size: 16px; --workspace-gap: 24px; --header-height: calc(76px + env(safe-area-inset-top));
  }
  & body.workspace-page .page-composition .workspace-heading, & body.booking-page .workspace-heading { margin-bottom: 48px; }
  & body.workspace-page .page-composition .workspace-heading h1, & body.booking-page .workspace-heading h1 { font-size: clamp(48px, 6vw, 64px); }
  & body.workspace-page .page-composition .workspace-heading p, & body.booking-page .workspace-heading p { font-size: 16px; line-height: 1.6; margin-top: 18px; }
  & body.workspace-page > .contact-footer { margin-top: 0; font-size: 13px; }

  /* The index retains its full-width invitation, then a calm editorial rhythm. */
  &.phone-index body.section3-preview main#main-content .panel {
    padding: 64px max(var(--phone-gutter), calc((100vw - 1000px) / 2)) 48px;
  }
  &.phone-index body.section3-preview main#main-content .intro {
    min-height: 100svh; padding-top: calc(var(--header-height) + 48px);
  }
  &.phone-index body.section3-preview main#main-content .intro-message { max-width: 760px; margin-inline: auto; }
  &.phone-index body.section3-preview main#main-content h1 { font-size: min(22.5cqw, 166px); }
  &.phone-index body.section3-preview main#main-content :is(.intro-copy, .contact-note, .email-note) { font-size: 16px; line-height: 1.6; }
  &.phone-index body.section3-preview main#main-content :is(.section-heading h2, .about-heading #about-title, .teaching-approach h3) {
    font-size: clamp(42px, 5.5vw, 58px); line-height: 1.08;
  }
  &.phone-index body.section3-preview main#main-content .stats { gap: 48px; }
  &.phone-index body.section3-preview main#main-content .stats dt { font-size: 36px; }
  &.phone-index body.section3-preview main#main-content .stats dd { font-size: 13px; }
  &.phone-index body.section3-preview main#main-content .balanced-about { grid-template-columns: minmax(180px, .65fr) minmax(0, 1.6fr); gap: 36px; }
  &.phone-index body.section3-preview main#main-content .balanced-about .about-portrait { align-self: start; margin-top: 6px; }
  &.phone-index body.section3-preview main#main-content .balanced-about .photo-placeholder { width: min(100%, 270px); }
  &.phone-index body.section3-preview main#main-content .language-badge { font-size: 13px; }
  &.phone-index body.section3-preview main#main-content :is(.about-body p, .teaching-approach p) { font-size: 16px; line-height: 1.65; }
  &.phone-index body.section3-preview main#main-content .balanced-lessons { max-width: 780px; margin-inline: auto; gap: 36px; }
  &.phone-index body.section3-preview main#main-content .balanced-lessons .lesson-list { gap: 16px; }
  &.phone-index body.section3-preview main#main-content .balanced-lessons .vertical-card { min-height: 184px; padding: 22px; gap: 12px 24px; border-radius: 18px; }
  &.phone-index body.section3-preview main#main-content .balanced-lessons :is(.lesson-title, .yki-heading) { font-size: 30px; }
  &.phone-index body.section3-preview main#main-content .balanced-lessons :is(.lesson-description, .yki-description) { font-size: 16px; line-height: 1.55; }
  &.phone-index body.section3-preview main#main-content .balanced-lessons :is(.lesson-price, .yki-price) { font-size: 16px; }
  &.phone-index body.section3-preview main#main-content .balanced-lessons .lesson-price small { font-size: 13px; }
  &.phone-index body.section3-preview main#main-content .balanced-lessons .frequency-switch { grid-template-rows: repeat(2, 44px); }
  &.phone-index body.section3-preview main#main-content .balanced-lessons .frequency-switch label { min-height: 44px; font-size: 13px; }
  &.phone-index body.section3-preview main#main-content .balanced-lessons .lesson-arrow { top: 22px; right: 22px; }
  &.phone-index body.section3-preview main#main-content .contact :is(.section-heading, .section-body) { max-width: 720px; margin-inline: auto; }
  &.phone-index body.section3-preview main#main-content .contact .section-heading { margin-bottom: 26px; }
  &.phone-index body.section3-preview main#main-content .contact-form { gap: 28px; }
  &.phone-index body.section3-preview main#main-content .field textarea { height: 160px; }
  &.phone-index body.section3-preview main#main-content .send-button { font-size: 16px; min-height: 52px; }
  &.phone-index body.section3-preview main#main-content .contact-footer { margin-top: 64px; font-size: 13px; }

  /* Two columns use the available tablet width; the course remains one row. */
  & body.booking-page .booking-view:has(> .format-grid) { grid-template-columns: minmax(0, 1fr) max-content minmax(0, 1fr) max-content; gap: 20px; }
  & body.booking-page .format-grid { --copy-size: 16px; gap: 20px; }
  & body.booking-page .format-card { grid-column: span 2; padding: 22px; min-height: 230px; gap: 18px 12px; border-radius: 18px; }
  & body.booking-page .format-card .lesson-title { font-size: 30px; }
  & body.booking-page .format-card .lesson-description { font-size: 16px; line-height: 1.6; }
  & body.booking-page .format-bottom .lesson-price { font-size: 16px; }
  & body.booking-page .format-bottom .lesson-price small,
  & body.booking-page .format-bottom > span > small { font-size: 13px; }
  & body.booking-page .booking-view > .yki-block { padding: 22px; gap: 16px 20px; border-radius: 18px; }
  & body.booking-page .booking-view > .yki-block .yki-heading { font-size: 30px; }
  & body.booking-page .booking-view > .yki-block .yki-description { font-size: 16px; grid-column: 1 / 4; grid-row: 2; }
  & body.booking-page .booking-view > .yki-block .yki-price { grid-column: 4; grid-row: 2; font-size: 16px; }
  & body.booking-page :is(.step-heading h2, .calendar-heading h2, .booking-success-content h2) { font-size: 38px; }
  & body.booking-page :is(.step-heading p, .calendar-heading p, .booking-success-content p, .slot-summary) { font-size: 16px; line-height: 1.6; }
  & body.booking-page .schedule-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 24px; }
  & body.booking-page .schedule-option { padding: 26px; }
  & body.booking-page .schedule-option h3 { font-size: 30px; }
  & body.booking-page .schedule-option p { font-size: 16px; }
  & body.booking-page .details-layout { max-width: 620px; margin-inline: auto; gap: 32px; }
  & body.booking-page #booking-details label { font-size: 14px; }
  & body.booking-page .checkout-pair { max-width: 620px; margin-inline: auto; gap: 32px; }
  & body.booking-page .checkout-review-content,
  & body.booking-page .payment-review { padding: 28px; }
  & body.booking-page .payment-identity { grid-template-columns: 1.3fr 1fr; gap: 16px; }
  & body.booking-page :is(.booking-status, .policy-check) { font-size: 14px; }
  & body.booking-page .order-line, & body.booking-page .order-line strong { font-size: 16px; }
  & body.booking-page .booking-primary { font-size: 16px; min-height: 50px; }

  /* All seven days stay visible, with touch-sized slots and a reserved summary. */
  & body.booking-page .calendar-grid,
  & body.student-portal-page .portal-calendar .calendar-grid {
    grid-template-columns: 44px repeat(7, minmax(0, 1fr)); grid-template-rows: 54px repeat(14, 44px); gap: 6px;
  }
  & body:is(.booking-page, .student-portal-page) .calendar-date span { font-size: 13px; }
  & body:is(.booking-page, .student-portal-page) .calendar-date strong { font-size: 20px; }
  & body:is(.booking-page, .student-portal-page) .calendar-hour { font-size: 13px; }
  & body:is(.booking-page, .student-portal-page) .calendar-slot { min-height: 44px; border-radius: 999px; }
  & body:is(.booking-page, .student-portal-page) .calendar-selection { font-size: 15px; }
  & body.booking-page .first-lesson { font-size: 14px; }
  & body:is(.booking-page, .student-portal-page, .admin-page) .week-navigation > span { font-size: 14px; }
  & body:is(.booking-page, .student-portal-page) .calendar-heading { gap: 24px; }
  & body:is(.booking-page, .student-portal-page) .calendar-actions .booking-primary { align-self: flex-end; min-width: 220px; }

  /* Reading pages keep their existing content and order in an editorial grid. */
  & body.workspace-page.policy-page .policy-section { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; padding-block: 40px; }
  & body.workspace-page.policy-page .policy-section h3,
  & body.workspace-page.policy-page .faq-section > h2 { font-size: 30px; }
  & body.workspace-page.policy-page .policy-copy p,
  & body.workspace-page.policy-page .testimonial blockquote p { font-size: 16px; line-height: 1.7; }
  & body.workspace-page.policy-page .faq-item summary { font-size: 16px; padding-block: 22px; }
  & body.workspace-page.policy-page .testimonials-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  & body.workspace-page.policy-page .testimonial { padding-block: 36px; }
  & body.workspace-page.policy-page .testimonial figcaption { font-size: 14px; }
  & body.workspace-page.course-page .page-composition { --course-space: 64px; --course-gap: 36px; }
  & body.workspace-page.course-page .page-composition :is(p, li, dd) { font-size: 16px; line-height: 1.65; }
  & body.workspace-page.course-page .page-composition h2 { font-size: 42px; }
  & body.workspace-page.course-page .course-summary { padding: 32px; }
  & body.workspace-page.course-page .course-summary h3 { font-size: 32px; }
  & body.workspace-page.course-page .course-section { margin-top: 64px; padding-top: 40px; }
  & body.workspace-page.course-page .course-skill-grid { gap: 36px; }
  & body.workspace-page.course-page .course-skill-grid h3 { font-size: 30px; }
  & body.workspace-page.course-page .course-included-list dt { font-size: 17px; }
  & body.workspace-page.course-page .course-update { padding: 32px; }
  & body.workspace-page.course-page .course-primary { font-size: 16px; min-height: 52px; }

  /* Shared account services, with an unscaled and readable tablet presentation. */
  & body.student-portal-page .portal-login h2 { font-size: 44px; }
  & body.student-portal-page .portal-login-button { font-size: 16px; min-height: 52px; }
  & body.student-portal-page .portal-dashboard-heading { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 24px; }
  & body.student-portal-page .portal-dashboard-heading h2 { font-size: 38px; }
  & body.student-portal-page .portal-dashboard-grid { gap: 40px; }
  & body.student-portal-page .portal-tabs button { font-size: 16px; }
  & body.student-portal-page .portal-lessons-list { max-height: 560px; }
  & body.student-portal-page .portal-lesson { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 18px; padding-block: 24px; }
  & body.student-portal-page .portal-lesson-info h3 { font-size: 16px; }
  & body.student-portal-page .portal-lesson-info p { font-size: 14px; }
  & body.student-portal-page .portal-lesson-actions { grid-column: 3; }
  & body.student-portal-page .portal-account-summary { padding: 28px; }
  & body.student-portal-page .portal-subscription { font-size: 16px; }
  & body.student-portal-page .portal-yki { padding: 28px; }
  & body.student-portal-page .portal-yki h3 { font-size: 32px; }
  & body.student-portal-page .portal-yki p { font-size: 16px; }
  & body.student-portal-page .portal-calendar .calendar-heading h2 { font-size: 38px; }
  & body.student-portal-page .portal-calendar .calendar-heading p { font-size: 16px; }
  & body.student-portal-page .booking-primary { font-size: 16px; }
  & body.admin-page .admin-login h2 { font-size: 44px; }
  & body.admin-page .admin-topbar { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 24px; }
  & body.admin-page .admin-topbar h2 { font-size: 38px; }
  & body.admin-page .admin-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  & body.admin-page .admin-stats span { font-size: 14px; }
  & body.admin-page .admin-monthly-row { flex-direction: row; align-items: center; flex-wrap: wrap; }
  & body.admin-page .admin-teaching-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  & body.admin-page .admin-panel-heading { flex-direction: row; align-items: center; flex-wrap: wrap; }
  & body.admin-page .admin-tools { flex-direction: row; flex-wrap: wrap; }
  & body.admin-page .admin-tools .admin-search, & body.admin-page .admin-filter { width: auto; }
  & body.admin-page .admin-week-grid { grid-template-columns: 44px repeat(7, minmax(88px, 1fr)); gap: 6px; }
  & body.admin-page .admin-lesson-row { padding: 22px; }
  & body.admin-page .admin-lesson-row h4 { font-size: 16px; }
  & body.admin-page .admin-lesson-row p { font-size: 14px; }
  & body.admin-page .admin-student-card { padding: 26px; }
  & body:is(.student-portal-page, .admin-page) :is(.portal-dialog, .admin-dialog) { width: min(720px, calc(100vw - 64px)); padding: 32px; }
  & body:is(.student-portal-page, .admin-page) :is(.portal-dialog, .admin-dialog) p { font-size: 16px; }
  & body.admin-page .admin-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @media (max-width: 767px) {
    & body.booking-page .booking-view:has(> .format-grid) { grid-template-columns: minmax(0, 1fr) max-content; }
    & body.booking-page .format-card { grid-column: 1 / -1; min-height: 210px; }
    & body.booking-page .booking-view > .yki-block .yki-description { grid-column: 1; }
    & body.booking-page .booking-view > .yki-block .yki-price { grid-column: 2; }
    &.phone-index body.section3-preview main#main-content .balanced-about { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    &.phone-index body.section3-preview main#main-content .balanced-about .photo-placeholder { width: 240px; }
    & body.workspace-page.policy-page .policy-section { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    & body.workspace-page.policy-page .testimonials-grid { grid-template-columns: minmax(0, 1fr); }
    & body.admin-page .admin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    & body.admin-page .admin-teaching-grid { grid-template-columns: minmax(0, 1fr); }
    & body.student-portal-page .portal-lesson { grid-template-columns: 48px minmax(0, 1fr); }
    & body.student-portal-page .portal-lesson-actions { grid-column: 2; }
  }
  @media (min-width: 900px) {
    & body.workspace-page.course-page :is(.course-intro, .course-enrol) { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 36px; }
    & body.admin-page .admin-student-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (prefers-reduced-motion: reduce) { scroll-behavior: auto; }
}