/* =========================================================
   OH MY ZINE / MOBILE READABILITY
   Keeps the compact 2000s GUI details while making reading
   text and touch controls comfortable on narrow screens.
   ========================================================= */

@media (max-width: 720px) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    overflow-x: clip;
    overflow-wrap: break-word;
    font-size: 15.5px;
  }

  :where(p, li, dd) {
    text-wrap: pretty;
  }

  /* Shared window chrome and navigation */
  body.home-page,
  body.subpage {
    --shared-tab-height: 44px;
  }

  body.home-page .shared-titlebar,
  body.subpage .shared-titlebar {
    padding-inline: 10px !important;
  }

  body.home-page .shared-brand,
  body.subpage .shared-brand {
    min-height: 44px !important;
    font-size: 11px !important;
    letter-spacing: 0.04em !important;
  }

  body.home-page .shared-window-controls button,
  body.subpage .shared-window-controls button {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
  }

  body.home-page .shared-tabs > a,
  body.home-page .shared-tabs > span,
  body.subpage .shared-tabs > a,
  body.subpage .shared-tabs > span {
    height: var(--shared-tab-height) !important;
    min-height: var(--shared-tab-height) !important;
    padding-inline: 3px !important;
    font-size: clamp(10px, 2.7vw, 12px) !important;
    line-height: 1.15 !important;
    letter-spacing: 0.01em !important;
  }

  .shared-search-toggle {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
  }

  .shared-search-toggle > span {
    top: 10px;
    left: 10px;
  }

  .shared-search-panel {
    width: calc(100% - 16px);
    right: 8px;
    padding: 14px;
  }

  .shared-search-panel label {
    font-size: 12px;
  }

  .shared-search-input-row {
    grid-template-columns: minmax(0, 1fr) 52px;
    gap: 8px;
  }

  .shared-search-input-row input,
  .shared-search-input-row button {
    min-height: 44px;
    font-size: 16px;
  }

  .shared-search-results a,
  .shared-search-results p {
    padding: 12px;
    font-size: 14px;
    line-height: 1.6;
  }

  /* The app frame already supplies its own mobile gutter. Remove the
     inherited desktop main padding so narrow screens keep a readable line. */
  body.subpage .subpage-main,
  .article-page-shell .subpage-main.article-page {
    padding-inline: 0 !important;
  }

  /* Small labels stay compact, but no longer become illegible. */
  :is(.ui-chip, .micro-label, .category-tag, .magazine-kicker,
      .magazine-section-note, .photo-kicker, .fashion-file-label,
      .fashion-channel-name, .article-column-label) {
    font-size: 10px !important;
    line-height: 1.35 !important;
    letter-spacing: 0.08em !important;
  }

  /* HOME */
  .home-page .portal-copy p,
  .home-page .about-card > p:not(.micro-label),
  .home-page .feature-copy,
  .home-page .magazine-info-panel,
  .home-page .recommendation-loading {
    font-size: 14.5px !important;
    line-height: 1.65 !important;
  }

  .home-page .about-card h2,
  .home-page .feature-body h1 {
    line-height: 1.4 !important;
  }

  .home-page .recommendation-copy strong {
    font-size: 14.5px !important;
    line-height: 1.35 !important;
  }

  .home-page .recommendation-copy small,
  .home-page .recommendation-copy > span {
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  .home-page :is(.read-button, .pill-button, .magazine-read-button),
  .home-page .notes-panel .shuffle-button {
    min-height: 44px !important;
    height: auto !important;
    padding: 8px 14px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  .home-page .photo-controls button {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  .home-page #magazine-info-button,
  .home-page #magazine-close-button {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
  }

  .home-page .photo-cabinet-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 44px !important;
    padding: 8px 12px !important;
  }

  .home-page .window-footer a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding-inline: 8px;
  }

  /* ARTICLE */
  .article-page-shell .article-body {
    width: 100% !important;
  }

  .article-page-shell .article-intro {
    padding-inline: 14px !important;
  }

  .article-page-shell .article-lede {
    padding-inline: 12px !important;
  }

  .article-page-shell .article-body > p,
  .article-page-shell .article-body > h2,
  .article-page-shell .article-body > h3,
  .article-page-shell .article-body > blockquote,
  .article-page-shell .article-body > .toc,
  .article-page-shell .article-body > .article-figure,
  .article-page-shell .article-body > .image-comparison,
  .article-page-shell .article-body > .article-ending,
  .article-page-shell .article-body > .article-back-top-wrap {
    max-width: none !important;
    margin-inline: 16px !important;
  }

  .article-page-shell .article-display-title {
    font-size: clamp(23px, 7.2vw, 30px) !important;
    line-height: 1.32 !important;
  }

  .article-page-shell .article-subtitle {
    font-size: 14.5px !important;
    line-height: 1.6 !important;
  }

  .article-page-shell .article-lede p,
  .article-page-shell .article-body > p,
  .article-page-shell .article-body blockquote p {
    font-size: 15.5px !important;
    line-height: 1.75 !important;
    letter-spacing: 0.015em !important;
  }

  .article-page-shell .article-body > h2 {
    font-size: clamp(24px, 7vw, 29px) !important;
    line-height: 1.32 !important;
  }

  .article-page-shell .article-body > h3 {
    font-size: 20px !important;
    line-height: 1.35 !important;
  }

  .article-page-shell .toc li,
  .article-page-shell .toc a {
    font-size: 14.5px !important;
    line-height: 1.5 !important;
  }

  .article-page-shell .toc a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding-block: 4px;
  }

  .article-page-shell :is(.article-tags-list span, .article-share-line,
      .figure-caption, .image-source, .comparison-caption,
      .article-publish-meta) {
    font-size: 12px !important;
    line-height: 1.6 !important;
  }

  html.ohmy-native-phone-stage .article-page-shell .article-display-title {
    font-size: clamp(25px, 7.2vw, 31px) !important;
  }

  html.ohmy-native-phone-stage .article-page-shell .article-subtitle {
    font-size: 16px !important;
  }

  html.ohmy-native-phone-stage .article-page-shell .article-lede p,
  html.ohmy-native-phone-stage .article-page-shell .article-body > p,
  html.ohmy-native-phone-stage .article-page-shell .article-body blockquote p {
    font-size: 17px !important;
    line-height: 1.8 !important;
  }

  html.ohmy-native-phone-stage .article-page-shell .toc li,
  html.ohmy-native-phone-stage .article-page-shell .toc a {
    font-size: 15.5px !important;
  }

  html.ohmy-native-phone-stage .article-page-shell :is(
      .article-tags-list span, .article-share-line, .figure-caption,
      .image-source, .comparison-caption, .article-publish-meta) {
    font-size: 13px !important;
  }

  /* ABOUT and CREDITS */
  body.subpage.about-page-shell .subpage-feature-hero .about-lead {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  .about-page-shell .content-window-body {
    padding-inline: 8px !important;
  }

  .about-page-shell .about-copy-panel {
    margin-inline: 0 !important;
  }

  .about-page-shell .about-copy-panel .about-body {
    padding-inline: 16px !important;
  }

  .about-page-shell .about-copy-panel .about-body p,
  .credits-page-shell .credits-hero > p:last-child,
  .credits-page-shell .credits-list li,
  .credits-page-shell .credits-note p {
    font-size: 15.5px !important;
    line-height: 1.75 !important;
  }

  .about-page-shell .about-copy-panel .about-body p {
    margin-bottom: 0.75em !important;
  }

  .about-page-shell .profile-facts {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  .about-page-shell .about-switcher span {
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  .about-page-shell .about-switcher button,
  .about-page-shell .fake-ad,
  .about-page-shell .about-status {
    min-height: 44px !important;
  }

  .about-page-shell .section-toolbar h2,
  .credits-page-shell .credits-list h2 {
    line-height: 1.4 !important;
  }

  /* FASHION */
  .fashion-page .fashion-hero-copy > p:last-child,
  .fashion-page .fashion-video-info > p:not(.fashion-channel-name),
  .fashion-page .article-card .description {
    color: #26363e !important;
    font-size: 14.5px !important;
    line-height: 1.7 !important;
  }

  .fashion-page .fashion-hero-copy > p:last-child {
    width: 100% !important;
    max-width: none !important;
  }

  .fashion-page .subpage-feature-hero {
    padding-inline: 16px !important;
  }

  .fashion-page .fashion-stream-card-body h3,
  .fashion-page .article-card h2 {
    font-size: 17px !important;
    line-height: 1.35 !important;
  }

  .fashion-page .fashion-card-tags {
    font-size: 11.5px !important;
    line-height: 1.4 !important;
  }

  .fashion-page :is(.fashion-card-meta, .fashion-stream-meta,
      .fashion-article-stats, .fashion-player-controls) {
    font-size: 10.5px !important;
    line-height: 1.3 !important;
  }

  .fashion-page :is(.fashion-hero-play, .fashion-read-button),
  .fashion-page :is(.fashion-hero-add, .fashion-hero-rate),
  .fashion-page .fashion-card-controls > :is(a, button),
  .fashion-page .fashion-player-controls > a {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  .fashion-page .fashion-hero-play,
  .fashion-page .fashion-read-button {
    padding: 8px 12px !important;
    font-size: 13.5px !important;
    line-height: 1.2 !important;
  }

  /* MAGAZINE COLLECTION */
  .magazine-page-shell .magazine-archive-copy > p:last-child {
    color: #26363e !important;
    font-size: 14.5px !important;
    line-height: 1.7 !important;
  }

  .magazine-page-shell .magazine-category-group a {
    display: flex;
    align-items: center;
    min-height: 36px;
    padding-block: 4px;
    font-size: 13px !important;
    line-height: 1.3 !important;
  }

  .magazine-page-shell .magazine-search-field input {
    min-height: 44px;
    font-size: 16px !important;
  }

  .magazine-page-shell .magazine-breadcrumbs a {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding-inline: 4px;
  }

  .magazine-page-shell .magazine-item-copy h3 {
    font-size: 15px !important;
    line-height: 1.35 !important;
  }

  .magazine-page-shell .magazine-item-copy p {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  /* PHOTO CABINET */
  .photo-page-shell .photo-hero > div > p:last-child,
  .photo-page-shell .photo-empty {
    font-size: 14.5px !important;
    line-height: 1.7 !important;
  }

  .photo-page-shell .photo-public-help,
  .photo-page-shell .photo-tile-name {
    font-size: 12px !important;
    line-height: 1.55 !important;
  }

  .photo-page-shell .photo-public-status b {
    font-size: 11px !important;
  }

  .photo-page-shell .photo-public-status small,
  .photo-page-shell .photo-viewer-readonly {
    font-size: 10px !important;
  }

  .photo-page-shell .photo-tile-open,
  .photo-viewer :is(.photo-viewer-nav, #photo-viewer-close) {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  .article-page-shell .article-newsletter :is(input, button) {
    min-height: 44px !important;
    height: 44px !important;
    font-size: 16px !important;
  }

  /* Denser mobile rhythm: reduce decorative empty space, not content. */
  body.home-page .shared-titlebar {
    height: 44px !important;
    min-height: 44px !important;
  }

  body.home-page .shared-brand {
    height: 44px !important;
    min-height: 44px !important;
    padding-block: 0 !important;
  }

  .home-page .portal-banner {
    min-height: 0 !important;
    margin: 6px 8px 0 !important;
    padding: 6px 12px 7px !important;
    gap: 0 !important;
    border-radius: 12px !important;
  }

  .home-page .portal-copy {
    width: 100%;
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    grid-template-areas:
      "issue brand"
      "tagline tagline";
    align-items: center;
    column-gap: 10px;
    text-align: left;
  }

  .home-page .portal-copy > span {
    grid-area: issue;
    font-size: 7px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.08em !important;
  }

  .home-page .portal-brand {
    width: 100% !important;
    max-width: 220px !important;
    height: 34px !important;
    margin: 0 !important;
    grid-area: brand;
  }

  .home-page .portal-copy p {
    margin: 2px 0 0 !important;
    grid-area: tagline;
    overflow: hidden;
    font-size: 11.5px !important;
    line-height: 1.25 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .home-page .portal-star,
  .home-page .portal-banner > small {
    display: none !important;
  }

  .home-page .magazine-grid {
    padding: 7px 8px 8px !important;
    gap: 8px !important;
  }

  .home-page .center-column {
    gap: 8px !important;
  }

  .home-page .feature-panel .panel-titlebar {
    height: 26px !important;
  }

  .home-page .feature-body {
    padding: 8px !important;
  }

  .home-page .feature-link {
    display: grid !important;
    grid-template-columns: minmax(112px, 36%) minmax(0, 1fr);
    grid-template-rows: auto auto auto minmax(44px, auto);
    column-gap: 9px;
    row-gap: 4px;
  }

  .home-page .feature-image-wrap {
    min-height: 174px;
    grid-column: 1;
    grid-row: 1 / 5;
  }

  .home-page .feature-image {
    height: 100% !important;
    aspect-ratio: auto !important;
  }

  .home-page .category-tag {
    margin: 0 !important;
    padding: 4px 6px !important;
    align-self: start;
  }

  .home-page .feature-body h1 {
    margin: 0 !important;
    display: -webkit-box;
    overflow: hidden;
    font-size: 18px !important;
    line-height: 1.25 !important;
    letter-spacing: -0.035em !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .home-page .feature-copy {
    margin: 0 !important;
    display: -webkit-box;
    overflow: hidden;
    font-size: 12.5px !important;
    line-height: 1.4 !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body.home-page .feature-panel .feature-body .feature-link > .read-button {
    min-height: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 7px 10px !important;
    align-self: end;
    font-size: 10px !important;
  }

  body.home-page .feature-panel .feature-body .feature-link > .read-button .capsule-word {
    font-size: 0 !important;
    letter-spacing: 0 !important;
  }

  body.home-page .feature-panel .feature-body .feature-link > .read-button .capsule-word::after {
    font-size: 10px;
    line-height: 1;
  }

  body.home-page .feature-panel .feature-body .feature-link > .read-button .capsule-word-left::after {
    content: "記事を";
  }

  body.home-page .feature-panel .feature-body .feature-link > .read-button .capsule-word-right::after {
    content: "読む";
  }

  .home-page .notes-panel .panel-titlebar {
    height: 34px !important;
  }

  body.home-page .notes-panel .shuffle-button {
    min-height: 30px !important;
    height: 30px !important;
    padding: 4px 8px !important;
    font-size: 10px !important;
  }

  .home-page .recommendation-grid {
    padding: 6px !important;
    gap: 6px !important;
  }

  .home-page .recommendation-copy small {
    top: 5px;
    right: 5px;
    bottom: auto;
    max-width: calc(100% - 10px);
    padding: 3px 5px;
    font-size: 9px !important;
  }

  .home-page .recommendation-copy strong {
    left: 5px;
    bottom: 5px;
    max-width: calc(100% - 10px);
    padding: 4px 5px;
    display: -webkit-box;
    overflow: hidden;
    font-size: 11.5px !important;
    line-height: 1.25 !important;
    opacity: 1;
    transform: none;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .home-page .about-card {
    padding: 14px !important;
  }

  .home-page .about-card h2 {
    margin-block: 6px !important;
    font-size: 20px !important;
    line-height: 1.3 !important;
  }

  body.subpage .content-window-body {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  body.subpage .subpage-feature-hero {
    min-height: 148px !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    border-radius: 14px !important;
  }

  body.subpage.fashion-page .subpage-feature-hero h1[data-material-heading="rhinestone"] {
    font-size: clamp(38px, 12vw, 54px) !important;
  }

  body.subpage.about-page-shell .subpage-feature-hero h1[data-material-heading="paper"] {
    font-size: clamp(34px, 11vw, 48px) !important;
  }

  .article-page-shell .article-intro {
    margin-bottom: 18px !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }

  .article-page-shell .article-opening-grid {
    gap: 14px !important;
  }

  .article-page-shell .article-display-title {
    margin-bottom: 8px !important;
  }

  .article-page-shell .article-subtitle {
    margin-bottom: 8px !important;
  }

  .article-page-shell .article-publish-meta {
    margin: 8px 0 10px !important;
  }

  .article-page-shell .article-lede {
    margin-top: 16px !important;
    padding-top: 14px !important;
    padding-bottom: 0 !important;
  }

  .article-page-shell .article-lede p {
    margin-bottom: 12px !important;
  }

  .article-page-shell .article-body > p {
    margin-top: 12px !important;
    margin-bottom: 12px !important;
  }

  .article-page-shell .article-body > h2 {
    margin-top: 28px !important;
    margin-bottom: 12px !important;
  }

  .article-page-shell .article-body > h3 {
    margin-top: 22px !important;
    margin-bottom: 10px !important;
  }

  .article-page-shell .article-body > :is(.toc, .article-figure, .image-comparison, blockquote) {
    margin-top: 16px !important;
    margin-bottom: 16px !important;
  }

  .about-page-shell .profile-deck {
    padding: 8px !important;
    gap: 8px !important;
  }

  .about-page-shell .profile-ticket .profile-motion {
    height: 132px !important;
    min-height: 132px !important;
  }

  .about-page-shell .about-dashboard-v2,
  .about-page-shell .about-sponsor-rail {
    gap: 10px !important;
  }

  .about-page-shell .about-switcher {
    margin-top: 6px !important;
    padding-top: 6px !important;
    gap: 6px !important;
  }

  .about-page-shell .about-story-switch {
    margin-top: 10px !important;
  }

  .fashion-page .fashion-channel-strip {
    min-height: 34px !important;
    padding: 6px 10px !important;
    gap: 10px !important;
  }

  .fashion-page .fashion-latest {
    padding-bottom: 12px !important;
  }

  .fashion-page .fashion-latest-heading {
    min-height: 46px !important;
    padding: 8px 10px 4px !important;
  }

  .fashion-page .fashion-latest-rail {
    padding: 6px 8px 10px !important;
    gap: 10px !important;
  }

  .fashion-page .fashion-stream-card-body {
    padding: 8px !important;
  }

  .magazine-page-shell .magazine-archive-hero {
    padding: 16px !important;
    gap: 12px !important;
  }

  .magazine-page-shell .magazine-archive-copy > p:last-child {
    margin-top: 8px !important;
  }

  .magazine-page-shell .magazine-shop-shell {
    gap: 10px !important;
  }

  .magazine-page-shell .magazine-card-grid {
    gap: 10px !important;
  }

  .photo-page-shell .photo-hero {
    min-height: 0 !important;
    padding: 12px !important;
    gap: 10px !important;
  }

  .photo-page-shell .photo-hero > div > p:last-child {
    margin-top: 8px !important;
  }

  .photo-page-shell .photo-public-toolbar,
  .photo-page-shell .photo-library-status {
    padding: 8px 10px !important;
  }

  /* Utility pages */
  .not-found-page .subpage-main p {
    font-size: 15.5px !important;
    line-height: 1.65 !important;
  }

  .not-found-page .subpage-main a,
  .credits-page-shell .credits-list a {
    min-height: 44px;
  }
}

@media (max-width: 380px) {
  body.home-page .shared-tabs > a,
  body.home-page .shared-tabs > span,
  body.subpage .shared-tabs > a,
  body.subpage .shared-tabs > span {
    font-size: 9px !important;
  }

  .article-page-shell .article-lede p,
  .article-page-shell .article-body > p,
  .article-page-shell .article-body blockquote p,
  .about-page-shell .about-copy-panel .about-body p,
  .credits-page-shell .credits-list li {
    font-size: 15.5px !important;
  }
}