/* =========================================================
   fudosha.net / assets/css/desktop-scale.css?v=20260831-edit-02
   PC / tablet density correction

   Purpose
   - Keep the existing visual design and composition.
   - Prevent the site from growing too large on wide desktop monitors.
   - Keep notebook / tablet layouts larger than a simple 67% browser zoom.
   - Leave the SP layout (<= 767px) untouched.

   Load this file LAST, after each page-specific stylesheet.
   ========================================================= */

/* ---------------------------------------------------------
   1) Shared PC scale
   768–1199px: modest reduction only.
   --------------------------------------------------------- */
@media (min-width: 768px){
  :root{
    /* Existing: 60%, max 1100px
       New compact-PC base: about 5% narrower on tablet/notebook. */
    --bgw: 57vw;
    --max: 820px;

  }

  html{
    /* Most page typography is rem-based, so this scales type and spacing
       without applying zoom/transform to the document. */
    font-size: 15px;
  }

  .header-inner{
    padding: 15px 0;
  }

  /* HOME: keep PRESS START proportional to the now-smaller hero. */
  .press-start{
    width: min(30%, 240px);
    height: auto;
    aspect-ratio: 60 / 7;
  }

  .latest{
    --latest-fs-pc: clamp(14px, 1.15vw, 17px);
    --latest-float-amp-pc: 4px;
  }

  /* Footer was dominated by fixed px sizes, so compact those explicitly. */
  .site-footer{
    font-size: 15px;
  }

  .footer-rule{
    height: 7px;
    margin-bottom: 11px;
  }

  .footer-brandrow{
    gap: 12px;
    margin-bottom: 10px;
  }

  .footer-logo,
  .footer-icon{
    height: 64px;
  }

  .banner-grid{
    grid-template-columns: repeat(3, 160px);
    gap: 8px;
  }

  .banner-grid .banner,
  .banner-grid .banner img{
    width: 160px;
  }

  .banner-grid .banner img{
    height: 32px;
  }

  /* WORKS: card imagery and gaps used fixed / viewport sizes and otherwise
     remain disproportionately tall after the main canvas becomes narrower. */
  body[data-page="works"] .book-grid{
    gap: 13px;
  }

  body[data-page="works"] .thumb-wrap{
    height: clamp(178px, 18vw, 205px);
  }

  body[data-page="works"] .works-hero{
    --works-hero-minh-pc: clamp(410px, 34vw, 455px);
    --works-hero-row-fs-pc: clamp(12px, 1.05vw, 14px);
  }

  /* BENLY lineage picker: these were almost entirely fixed-pixel sizes. */
  .benly,
  .benly-lineage-cards{
    --benly-a-card-w: 340px;
    --benly-a-card-h: 112px;
  }

  .benly-lineage-picker{
    grid-template-columns: 52px minmax(0, 1fr) 52px;
    gap: 9px;
  }

  .benly-pick-nav{
    font-size: 25px;
    border-radius: 17px;
  }

  .benly-card-band{
    margin: 8px 0 0 9px;
    max-width: calc(100% - 18px);
    padding: 7px 9px 6px;
    border-radius: 10px;
  }

  .benly-card-title{
    font-size: 14px;
  }

  .benly-card-years,
  .benly-card-tagline{
    font-size: 11px;
  }

  .benly-card-tagline{
    margin: 0 0 8px 9px;
    max-width: calc(100% - 18px);
    padding: 5px 8px;
  }
}

/* ---------------------------------------------------------
   2) Wide desktop correction
   1200px+

   Main width behaviour (approx.):
     1200 -> 684px
     1280 -> 730px
     1366 -> 779px
     1440 -> 812px
     1600 -> 795px
     1920 -> 761px
     2560 -> 760px

   The intentionally lower width on very wide monitors reproduces the
   comfortable visual density the old site had around 67% browser zoom,
   without actually zooming the document.
   --------------------------------------------------------- */
@media (min-width: 1200px){
  :root{
    --bgw: min(
      57vw,
      clamp(760px, calc(968px - 10.8vw), 820px)
    );
    --max: 820px;

  }

  html{
    /* 1200px ≈ 14.5px / 1366px ≈ 13.8px / 1920px ≈ 11.5px */
    font-size: clamp(11.5px, calc(19.5px - .417vw), 14.5px);
  }

  .header-inner{
    padding: 12px 0;
  }

  .latest{
    --latest-fs-pc: clamp(14px, .90vw, 16px);
  }

  .site-footer{
    font-size: 14px;
  }

  .footer-logo,
  .footer-icon{
    height: 60px;
  }

  /* WORKS at wide-screen viewport still keeps three columns; match the
     reduced physical size of the old 67% view instead of leaving 270px
     thumbnails inside a ~760px canvas. */
  body[data-page="works"] .thumb-wrap{
    height: clamp(178px, 11vw, 195px);
  }

  body[data-page="works"] .works-hero{
    --works-hero-minh-pc: clamp(400px, 27vw, 440px);
  }

  /* BENLY: close to the former 67% physical card size on a 1920px monitor,
     but a little larger than literal 67% for readability. */
  .benly,
  .benly-lineage-cards{
    --benly-a-card-w: 325px;
    --benly-a-card-h: 106px;
  }

  .benly-lineage-picker{
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    gap: 8px;
  }

  .benly-pick-nav{
    font-size: 23px;
    border-radius: 15px;
  }
}

/* ---------------------------------------------------------
   3) Very wide desktop
   Fixed-pixel chrome gets one final small reduction.
   --------------------------------------------------------- */
@media (min-width: 1800px){
  .footer-rule{
    height: 6px;
  }

  .banner-grid{
    grid-template-columns: repeat(3, 150px);
  }

  .banner-grid .banner,
  .banner-grid .banner img{
    width: 150px;
  }

  .banner-grid .banner img{
    height: 30px;
  }
}