/* A small readability increase across the mobile site. Desktop sizes stay in their own stylesheets. */
@media (max-width: 640px) {
  body {
    font-size: 17px;
  }
  .eyebrow {
    font-size: 12px;
  }
  .mini-label {
    font-size: 11px;
  }
  .coast-bar {
    font-size: 9px;
  }
  .header-cta {
    font-size: 11px;
  }
  .menu-toggle {
    font-size: 13px;
  }
  .site-header nav a {
    font-size: 13px;
  }
  .header-roulette-mobile {
    font-size: 12px;
  }
  .header-roulette-mobile::before {
    font-size: 8px;
  }
  .hero h1 {
    font-size: 67px;
  }
  .hero .eyebrow {
    font-size: 9px;
  }
  .hero-lead {
    font-size: 24px;
  }
  .hero-description {
    font-size: 14px;
  }
  .hero-actions .button {
    font-size: 13px;
  }
  .hero-actions .text-link {
    font-size: 12px;
  }
  .hero-footnote {
    font-size: 11px;
  }
  .photo-label {
    font-size: 8px;
  }
  .hero-stamp span {
    font-size: 8px;
  }
  .hero-note {
    font-size: 18px;
  }
  .hero-note em {
    font-size: 29px;
  }
  .vibe-ribbon span {
    font-size: 11px;
  }
  h2 {
    font-size: 50px;
  }
  .section-heading > p,
  .section-heading > div:last-child:not(:first-child) {
    font-size: 14px;
  }
  .photo-pill {
    font-size: 9px;
  }
  .plan-copy .mini-label {
    font-size: 10px;
  }
  .plan-copy h3 {
    font-size: 34px;
  }
  .plan-copy > p:not(.mini-label) {
    font-size: 14px;
  }
  .plan-tags span {
    font-size: 10px;
  }
  .plan-select {
    font-size: 14px;
  }
  .under-note {
    font-size: 12px;
  }
  .roulette-teaser .eyebrow {
    font-size: 8px;
  }
  .roulette-teaser h2 {
    font-size: 33px;
  }
  .roulette-teaser p:not(.eyebrow),
  .roulette-teaser .button {
    font-size: 13px;
  }
  .our-coast h2 {
    font-size: 86px;
  }
  .our-coast .eyebrow {
    font-size: 9px;
  }
  .coast-copy .big-copy {
    font-size: 24px;
  }
  .coast-copy > p:not(.big-copy) {
    font-size: 14px;
  }
  .coast-towns {
    font-size: 11px;
  }
  .team h2 {
    font-size: 65px;
  }
  .team-copy .eyebrow {
    font-size: 9px;
  }
  .team .big-copy {
    font-size: 23px;
  }
  .team-copy > p:not(.eyebrow):not(.big-copy) {
    font-size: 14px;
  }
  .team .text-link {
    font-size: 14px;
  }
  .portrait figcaption {
    font-size: 20px;
  }
  .portrait figcaption .portrait-edit-note {
    font-size: 9px;
  }
  .service-list summary > span:nth-child(2) {
    font-size: 24px;
  }
  .service-list details div {
    font-size: 14px;
  }
  .gallery-disclosure {
    font-size: 11px;
  }
  .snapshot > span {
    font-size: 18px;
  }
  .script-note {
    font-size: 26px;
  }
  .gallery-bottom .text-link {
    font-size: 12px;
  }
  .package-index {
    font-size: 10px;
  }
  .package h3 {
    font-size: 34px;
  }
  .package > p:not(.package-note) {
    font-size: 14px;
  }
  .price strong {
    font-size: 54px;
  }
  .price > span {
    font-size: 13px;
  }
  .package ul,
  .package .button {
    font-size: 14px;
  }
  .package-note,
  .packages .under-note {
    font-size: 11px;
  }
  .testimonials h2 {
    font-size: 49px;
  }
  .quote-grid blockquote {
    font-size: 29px;
  }
  .quote-grid figcaption {
    font-size: 13px;
  }
  .quote-grid figcaption span {
    font-size: 12px;
  }
  .faq .eyebrow {
    font-size: 9px;
  }
  .faq > div > p:last-child,
  .faq-list summary,
  .faq-list details > p {
    font-size: 14px;
  }
  .contact h2 {
    font-size: 84px;
  }
  .contact .eyebrow {
    font-size: 10px;
  }
  .contact .big-copy {
    font-size: 24px;
  }
  .contact .contact-copy > p:not(.eyebrow):not(.big-copy) {
    font-size: 14px;
  }
  .contact-copy .local-note {
    font-size: 12px !important;
  }
  .channel-hello .eyebrow {
    font-size: 10px;
  }
  .contact-channels h3 {
    font-size: 37px;
  }
  .contact-channels > p {
    font-size: 14px;
  }
  .whatsapp-direct {
    font-size: 13px;
  }
  .channel-email > p {
    font-size: 12px;
  }
  .channel-email > a {
    font-size: 15px;
  }
  .footer-top p {
    font-size: 17px;
  }
  .footer-top p em {
    font-size: 22px;
  }
  .footer-top > div {
    font-size: 11px;
  }
  .footer-bottom {
    font-size: 10px;
  }
  .footer-bottom > span:nth-child(2) {
    font-size: 9px;
  }
  .photo-dialog figcaption {
    font-size: 12px;
  }
  .back-to-top {
    font-size: 13px;
  }

  .breadcrumbs {
    font-size: 10px;
  }
  .hub-hero h1 {
    font-size: 71px;
  }
  .hub-hero .eyebrow {
    font-size: 9px;
  }
  .hub-hero .big-copy {
    font-size: 24px;
  }
  .hub-hero > div:last-child > p:not(.big-copy) {
    font-size: 14px;
  }
  .hub-hero .text-link {
    font-size: 13px;
  }
  .hub-photo-strip figcaption {
    font-size: 21px;
  }
  .catalog-heading h2 {
    font-size: 49px;
  }
  .catalog-count {
    font-size: 12px;
  }
  .catalog-filters button {
    font-size: 11px;
  }
  .discovery-copy h3,
  .home-discovery-grid .discovery-copy h3,
  .occasion-section .discovery-copy h3 {
    font-size: 31px;
  }
  .discovery-copy .mini-label {
    font-size: 9px;
  }
  .discovery-copy p,
  .occasion-section .discovery-copy p {
    font-size: 14px;
  }
  .discovery-link {
    font-size: 13px;
  }
  .discovery-image .photo-pill,
  .occasion-section .discovery-image .photo-pill {
    font-size: 8px;
  }
  .home-discovery .section-heading .text-link {
    font-size: 13px;
  }
  .experience-hero h1 {
    font-size: clamp(48px, calc(13vw + 1px), 68px);
  }
  .experience-hero .eyebrow {
    font-size: 9px;
  }
  .experience-intro {
    font-size: 14px;
  }
  .detail-hero-actions .button,
  .detail-hero-actions .text-link {
    font-size: 13px;
  }
  .experience-hero-note {
    font-size: 10px;
  }
  .detail-photo-note {
    font-size: 23px;
  }
  .experience-facts,
  .experience-jumps {
    font-size: 11px;
  }
  .experience-story h2,
  .ingredient-layout h2,
  .practical-section h2,
  .detail-faq h2,
  .mix-layout h2 {
    font-size: 50px;
  }
  .experience-story > div > p:not(.eyebrow) {
    font-size: 14px;
  }
  .experience-story figure figcaption {
    font-size: 21px;
  }
  .ingredient-lead,
  .ingredient-layout .text-link,
  .ingredient-list p {
    font-size: 14px;
  }
  .ingredient-list h3 {
    font-size: 26px;
  }
  .timeline-marker {
    font-size: 12px;
  }
  .timeline h3 {
    font-size: 28px;
  }
  .timeline p {
    font-size: 14px;
  }
  .detail-gallery-button > span {
    font-size: 13px;
  }
  .detail-wide-photo figcaption {
    font-size: 10px;
  }
  .practical-section > div:first-child > p:not(.eyebrow) {
    font-size: 14px;
  }
  .practical-grid h3 {
    font-size: 23px;
  }
  .practical-grid p {
    font-size: 13px;
  }
  .experience-cta .eyebrow {
    font-size: 9px;
  }
  .experience-cta h2 {
    font-size: 64px;
  }
  .experience-cta p:not(.eyebrow),
  .experience-cta .button {
    font-size: 14px;
  }
  .related-plans .section-heading > a {
    font-size: 13px;
  }
  .mix-layout > div > p:not(.eyebrow),
  .mix-layout li p {
    font-size: 14px;
  }
  .mix-layout li h3 {
    font-size: 27px;
  }
  .catalog-note {
    font-size: 11px;
  }

  .roulette-intro h1 {
    font-size: clamp(49px, calc(12.5vw + 1px), 71px);
  }
  .roulette-intro .eyebrow {
    font-size: 8px;
  }
  .roulette-lead {
    font-size: 24px;
  }
  .roulette-intro-copy {
    font-size: 14px;
  }
  .roulette-mini-tags {
    font-size: 10px;
  }
  .mini-infographic > div > span {
    font-size: 11px;
  }
  .roulette-pace {
    font-size: 20px;
  }
  .roulette-jump {
    font-size: 13px;
  }
  .wheel-topline > .mini-label {
    font-size: 7px;
  }
  .sound-toggle {
    font-size: 9px;
  }
  .wheel-choice {
    height: 19%;
  }
  .wheel-choice > span {
    font-size: clamp(9px, calc(2.2vw + 1px), 12px);
  }
  .wheel-hub {
    font-size: clamp(18px, calc(4.8vw + 1px), 24px);
  }
  .wheel-hub:disabled > span {
    font-size: 12px;
  }
  .spin-button {
    font-size: 14px;
  }
  .roulette-controls > p {
    font-size: 11px;
  }
  .result-art-note {
    font-size: 26px;
  }
  .result-copy h2 {
    font-size: 43px;
  }
  .result-copy > .eyebrow {
    font-size: 9px;
  }
  .result-tagline {
    font-size: 26px;
  }
  .result-description {
    font-size: 14px;
  }
  .team-play h3 {
    font-size: 18px;
  }
  .team-play p {
    font-size: 13px;
  }
  .result-actions .button {
    font-size: 13px;
  }
  .result-actions .text-link {
    font-size: 12px;
  }
  .result-note {
    font-size: 10px;
  }
  .challenge-top .mini-label {
    font-size: 7px;
  }
  .roulette-card h3 {
    font-size: 24px;
  }
  .roulette-card p {
    font-size: 12px;
  }
  .roulette-card > .text-link {
    font-size: 11px;
  }
  .roulette-party-cta .eyebrow {
    font-size: 9px;
  }
  .roulette-party-cta h2 {
    font-size: 54px;
  }
  .roulette-party-cta p:not(.eyebrow) {
    font-size: 14px;
  }
  .roulette-party-cta .button {
    font-size: 12px;
  }
  .illustration-note {
    font-size: 32px;
  }
  .illustration-cards strong {
    font-size: 14px;
  }
  .illustration-cards span {
    font-size: 8px;
  }
  .illustration-foot {
    font-size: 7px;
  }
}
@media (max-width: 360px) {
  .header-cta {
    font-size: 10px;
  }
  .contact h2 {
    font-size: 76px;
  }
  .contact-channels h3 {
    font-size: 34px;
  }
  .whatsapp-direct {
    font-size: 12px;
  }
  .channel-email > a {
    font-size: 13px;
  }
  .hub-hero h1 {
    font-size: 63px;
  }
  .hub-photo-strip figcaption {
    font-size: 19px;
  }
  .experience-hero h1 {
    font-size: 44px;
  }
  .detail-hero-actions .button,
  .detail-hero-actions .text-link {
    font-size: 12px;
  }
  .detail-photo-note {
    font-size: 21px;
  }
  .discovery-copy h3,
  .home-discovery-grid .discovery-copy h3 {
    font-size: 28px;
  }
  .roulette-intro h1 {
    font-size: 45px;
  }
  .roulette-intro .eyebrow {
    font-size: 7px;
  }
  .wheel-choice > span {
    font-size: 8px;
  }
  .wheel-hub {
    font-size: 16px;
  }
  .wheel-hub:disabled > span {
    font-size: 10px;
  }
  .wheel-topline > .mini-label {
    font-size: 6px;
  }
  .sound-toggle {
    font-size: 8px;
  }
  .challenge-top .mini-label {
    font-size: 8px;
  }
  .roulette-card h3 {
    font-size: 28px;
  }
  .roulette-card p,
  .roulette-card > .text-link {
    font-size: 13px;
  }
  .result-copy h2 {
    font-size: 37px;
  }
  .result-art-note {
    font-size: 23px;
  }
}

/* Keep the local-font header on one row on narrow phones. */
@media (max-width: 640px) {
  .site-header {
    column-gap: 9px;
    padding-inline: 18px;
  }
  .site-header .brand {
    width: clamp(90px, 27vw, 105px);
  }
}
@media (max-width: 380px) {
  .menu-toggle > span:first-child {
    display: none;
  }
}
@media (max-width: 360px) {
  .site-header {
    padding-inline: 15px;
  }
  .site-header .brand {
    width: 90px;
  }
}