/* TABLET VIEW */
@media only screen and (max-width: 900px) {
  /* page frame  */
  body::before {
    left: 10px;
    right: 10px;
  }
  .container {
    padding: 40px 10px;
  }
  h1 {
    font-size: 3rem;
  }

  /* columns */
  .column-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .column-left {
    justify-content: center;
  }
  .column-right {
    justify-content: center;
  }
  .column-right p {
    max-width: 100%;
  }
  #spinning-star {
    width: min(260px, 70%);
  }

  /* contact page stuff */
  .column-layout {
    grid-template-columns: 1fr;
    gap: 60px;
  }
  .contact-form {
    max-width: 100%;
  }
  .form-actions {
    justify-content: flex-end;
  }

  /* section stuff */
  .section-content {
    flex-direction: column;
  }
  .section-title {
    flex-direction: column;
    align-items: flex-start;
  }
  .section-date {
    margin-left: 0;
    margin-top: 20px;
  }
}

/* MOBILE VIEW */
@media only screen and (max-width: 480px) {
  .timeline-toc {
    position: relative;
    z-index: 3;
    margin-top: 5px;
    transition:
      transform 240ms ease,
      top 240ms ease,
      left 240ms ease;
  }
  .timeline-toc-toggle {
    width: 56px;
    min-width: 56px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--toc-floating-border);
    border-radius: 999px;
    background: var(--toc-floating-surface-strong);
    color: var(--primary-TEXT1);
    box-shadow: var(--toc-floating-shadow);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    cursor: pointer;
    transition:
      transform 240ms ease,
      background-color 240ms ease,
      border-color 240ms ease,
      box-shadow 240ms ease;
    -webkit-tap-highlight-color: transparent;
  }
  .timeline-toc-toggle:hover {
    transform: translateY(-1px);
  }
  .timeline-toc-toggle:focus-visible {
    outline: 2px solid var(--primary-COLOR);
    outline-offset: 3px;
  }
  .timeline-toc-toggle svg {
    width: 24px;
    height: 24px;
  }
  .timeline-toc-panel {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: min(300px, calc(100vw - 100px));
    max-width: calc(100vw - 100px);
    padding: 16px 18px;
    border: 1px solid var(--toc-floating-border);
    border-radius: 22px;
    background: var(--toc-floating-surface);
    box-shadow: var(--toc-floating-shadow);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px) scale(0.98);
    transform-origin: top left;
    transition:
      opacity 180ms ease,
      transform 240ms ease,
      visibility 0s linear 240ms;
  }
  .timeline-toc.is-open .timeline-toc-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    transition:
      opacity 180ms ease,
      transform 240ms ease,
      visibility 0s linear 0s;
  }
  .timeline-toc.is-stuck {
    position: fixed;
    top: 12px;
    left: 14px;
    z-index: 10001;
    transform: scale(0.94);
    transform-origin: top left;
  }
  .timeline-toc.is-stuck .timeline-toc-toggle {
    height: 40px;
    min-width: 52px;
  }
  .timeline-toc-panel ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
  .timeline-toc-panel .toc-item {
    display: inline-flex;
    align-items: baseline;
    width: 100%;
    margin-bottom: 0;
    padding: 8px 0;
    font-size: 1rem;
    line-height: 1.35;
  }
  .timeline-toc-panel li:last-child .toc-item {
    padding-bottom: 0;
  }
  .timeline-toc-panel li:first-child .toc-item {
    padding-top: 0;
  }
  .timeline-toc-panel .toc-number {
    min-width: 2.6ch;
    margin-right: 8px;
  }
  .timeline-toc-panel .toc-title {
    border-bottom-width: 1.5px;
  }
  .timeline-section::before {
    right: 8px;
    top: 8px;
    font-size: clamp(5.2rem, 32vw, 8rem);
  }

  .timeline-section:hover::before {
    transform: translate3d(-2px, 0, 0);
  }

  p {
    font-size: 1.125rem;
  }
  h1 {
    font-size: 2.25rem;
    text-shadow: 0 0 var(--glow-blur-radius)
      rgba(var(--star-glow-rgb), var(--glow-intensity));
  }
  h2 {
    font-size: 1.5rem;
    text-shadow: 0 0 var(--glow-blur-radius)
      rgba(var(--star-glow-rgb), var(--glow-intensity));
  }
  .landing-cta-button a {
    font-size: 1.5rem;
  }
  .landing-cta-button a .button-text {
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  .landing-cta-button a .button-arrow {
    opacity: 1;
  }
  .timeline-toc > .timeline-toc-panel > ul > li > .toc-item,
  nav[aria-label="table-of-contents"] > ul > li > .toc-item {
    font-size: 1.125rem;
  }
  .section-label {
    font-size: 1.65rem;
    padding: 5px 10px;
  }
  .section-date {
    font-size: 1.125rem;
  }
  .section-quote {
    font-size: 2rem;
    text-shadow: 0 0 var(--glow-blur-radius)
      rgba(var(--star-glow-rgb), var(--glow-intensity));
  }
  .section-courselist-light,
  .section-courselist-dark {
    font-size: 1rem;
  }
  .faq-summary {
    font-size: 1.125rem;
  }
  .note {
    font-size: 1.125rem;
  }
  .form-label {
    font-size: 0.75em;
  }
  .form-input,
  .form-textarea {
    font-size: 1.125rem;
  }
  .submit-button {
    font-size: 1.125rem;
  }
  #spinning-star {
    width: min(180px, 60%);
  }

  /* Always show carousel nav on touch/mobile where hover is unreliable */
  section .swiper-button-prev,
  section .swiper-button-next {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}
/* LANDING SECTION */
/* BLURRED STARS - TABLET */
@media (max-width: 820px) {
  .hero-star--1 {
    width: 490px;
    height: 490px;
  }
  .hero-star--2 {
    top: 25%;
  }
  .hero-star--3 {
    width: 590px;
    height: 590px;
  }
  .hero-star--4 {
    left: 50%;
  }
  .hero-star--5 {
    bottom: 250px;
  }
}
/* BLURRED STARS - MOBILE */
@media (max-width: 480px) {
  .hero-star--1 {
    width: 400px;
    height: 400px;
  }
  .hero-star--2 {
    width: 300px;
    height: 300px;
  }
  .hero-star--3 {
    width: 490px;
    height: 490px;
  }
  .hero-star--4 {
    width: 150px;
    height: 150px;
    left: 60%;
  }
  .hero-star--5 {
    width: 200px;
    height: 200px;
  }
}

/* LANDING SECTION */
@media (max-width: 820px) {
  .landing-container {
    grid-template-columns: 1fr;
    gap: 60px;
  }
  .landing-content {
    gap: 60px;
  }
  .landing-column-left {
    max-width: none;
  }
  .landing-column-right {
    justify-items: left;
  }
}

/* SECTION LAYOUTS */
@media (max-width: 1000px) {
  .timeline-section::before {
    font-size: clamp(7.5rem, 26vw, 13rem);
    right: clamp(6px, 3vw, 28px);
    top: clamp(10px, 4vw, 30px);
  }
  .timeline-star {
    width: 420px;
    height: 420px;
    left: -210px;
    bottom: -130px;
    top: auto;
  }
  .section-content {
    grid-template-columns: 300px 1fr;
    grid-template-areas:
      "left quote"
      "left body"
      "courses courses";
  }
  .section-left {
    max-width: 300px;
  }
  .section-courselist-light,
  .section-courselist-dark {
    max-width: 100%;
  }
}
@media (max-width: 750px) {
  .timeline-section::before {
    font-size: clamp(6.2rem, 30vw, 10rem);
    opacity: 0.09;
  }
  .timeline-star {
    width: 300px;
    height: 300px;
    left: -145px;
    bottom: -90px;
    top: auto;
  }
  .section-content {
    grid-template-columns: 1fr;
    grid-template-areas:
      "left"
      "quote"
      "body"
      "courses";
  }
  .section-left {
    width: min(690px, 100%);
    max-width: 100%;
    min-width: 0;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    padding-left: 12px;
    padding-right: 12px;
  }
  /* Slightly smaller portrait box on very small screens */
  .gallery.swiper {
    --carousel-w: clamp(200px, 45vw, 320px);
    min-height: 140px;
    max-height: 70vh;
  }
}

/* FOOTER */
@media (max-width: 670px) {
  .site-footer {
    height: auto;
  }
  .site-footer .bar-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding: 20px 20px;
  }
  .site-footer .nav-links-left {
    align-self: flex-start;
  }
  .site-footer .nav-links-right {
    align-self: flex-end;
  }
}

@media (max-width: 620px) {
  .page-title {
    max-width: 16ch;
    margin-left: auto;
    margin-right: auto;
  }
}