@charset "utf-8";
/* ============================================================
   tokens.css — the scale the site was missing.

   Loaded AFTER style.css (so it supersedes the token block and the
   base type in layout.css) and BEFORE desktop.css.

   Why this file exists
   --------------------
   Every "desktop" value in page.css is the mobile value x1.3:
     .some            30px -> 40px        .product_list   40px -> 52px
     .reason          40px -> 52px        .reason_box     20px -> 26px
     .faq_box dt      44px -> 57px        .some_box       54px -> 70px
   ...and the 66 clamp() type ramps top out at ~1.3x their minimum,
   all of them saturating at ~530px viewport. So the desktop layout was
   a 130% zoom of the phone, and nothing interpolated between the two.

   Every ramp below interpolates across the full 375px -> 1440px range
   and then holds:
       slope     = (max - min) / (1440 - 375)
       intercept = min - slope * 375
   ============================================================ */

:root{
    /* ---------- type ---------- */
    --t-caption: clamp(11px, 0.188vw + 10.30px, 13px);
    --t-body:    clamp(13px, 0.376vw + 11.59px, 17px);
    --t-lead:    clamp(15px, 0.376vw + 13.59px, 19px);
    --t-h3:      clamp(18px, 0.563vw + 15.89px, 24px);
    --t-h2:      clamp(22px, 0.939vw + 18.48px, 32px);

    /* leading: 1.5 was too tight for Japanese at every width */
    --lh-body:  1.8;
    --lh-tight: 1.35;

    /* ---------- space ---------- */
    --gutter:    clamp(16px, 2.254vw +  7.55px, 40px);
    --s-section: clamp(48px, 5.258vw + 28.28px, 104px);
    --s-block:   clamp(24px, 2.254vw + 15.55px, 48px);
    --s-card:    clamp(16px, 1.502vw + 10.37px, 32px);

    /* ---------- the only legal content widths ---------- */
    --w-grid:   1140px;   /* cards, grids, media */
    --w-narrow:  860px;   /* centred compositions, prose, spec tables */

    /* .inner is a shell: its padding sits OUTSIDE the content width, so a
       section using --edge and a section using .inner land on the same edge.
       Both widths need the shell treatment or the narrow one comes out
       2*gutter too small. */
    --w-shell:        calc(var(--w-grid) + var(--gutter) * 2);
    --w-shell-narrow: calc(var(--w-narrow) + var(--gutter) * 2);
    --edge:           max(var(--gutter), calc((100% - var(--w-grid)) / 2));

    /* ---------- grounds (all already in the brand) ---------- */
    --ground:      #ffffff;
    --ground-tint: #f2f8fb;   /* was only used once, on the FAQ */
    --ground-navy: #100169;

    /* layout.css also declares these; restated so this file owns them */
    --col-max:  100%;
    --header-h: 60px;
}

@media screen and (min-width: 768px){
    :root{
        --header-h: 70px;
    }
}

/* ============================================================
   Base type. This is the change that fixes mobile density and
   desktop illegibility at the same time: body copy was a flat 12px
   with 1.5 leading at EVERY width.
   ============================================================ */
body{
    font-size: var(--t-body);
    line-height: var(--lh-body);
}

/* NOTE: display headings (.hdm, .product_tit, .mv_tit, .mv_main_tit) already
   carry deliberate tight line-heights of 1.0-1.1 in page.css. Do NOT push
   --lh-body or --lh-tight onto them: it buys no legibility on one-line
   display type and cost ~110px of page height when tried. The 1.8 above is
   for copy that was inheriting the old 1.5. */

/* The site caps content on #contents and draws a 1px navy rule down both
   sides. At 1008px that rule lands ON the window edge; at 1904px it draws a
   box around a 1140px column floating in white. Sections own their own
   grounds now, so the cap and the borders both go. */
#contents{
    max-width: none;
    border-left: none;
    border-right: none;
}

/* ============================================================
   Grounds.

   Generous space only reads as empty when it has no edge: 100px of white
   between two white sections is a hole, the same 100px between white and a
   tinted band is composition. The palette here is already the brand's —
   #f2f8fb was in the stylesheet but used exactly once, on the FAQ.

   Applied at every width so phone and desktop stay one system. The run
   now alternates and never puts two plain-white sections side by side:

     mv art · links TINT · some white · some_box photo · product_list TINT
     · product white · reason art · links TINT · change white
     · about TINT · voice white · faq TINT · company navy · footer art
   ============================================================ */
.links,
.product_list,
.about,
.faq{
    background: var(--ground-tint);
}