/* base.css — shared design system: tokens, type scale, buttons,
   reveal animations, layout helpers. Loaded by every page.
   Page-specific rules live in the per-page stylesheet. */

    :root {
      /* Ogaki palette */
      --bg: #F2EDEB;
      --ink: #221F20;
      --bg-soft: #e8e4e1;


      --sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
      --serif: 'Instrument Serif', Georgia, serif;

      /* Signature easings */
      --ease-soft: cubic-bezier(0.49, 0.62, 0.17, 1);
      --ease-snap: cubic-bezier(0.84, 0.00, 0.16, 1.00);
      --ease-out: cubic-bezier(0.130, 0.875, 0.455, 0.970);
      --ease-inout: cubic-bezier(0.650, 0.070, 0.075, 0.950);

      /* Fluid scaler: designs at 1920w, capped by 16:9 viewport height */
      --vp: min(100vw, 177.7778vh);

      /* Page side margins — fixed, used by .container and full-bleed accents */
      --side: 64px;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    html { font-size: 62.5%; } /* 1rem = 10px, Ogaki's scale */

    body {
      background: var(--bg);
      color: var(--ink);
      font-family: var(--sans);
      font-size: clamp(14px, calc(var(--vp) / 1920 * 16), 16px);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    /* ---------- Type scale (Ogaki) ---------- */

    .t-display {            /* serif display: 42px → 88px */
      font-family: var(--serif);
      font-weight: 400;
      line-height: 1;
      font-size: clamp(42px, calc(var(--vp) / 1920 * 88), 88px);
      letter-spacing: -0.01em;
    }
    .t-heading {            /* serif heading: 30px → 56px */
      font-family: var(--serif);
      font-weight: 400;
      line-height: 1.05;
      font-size: clamp(30px, calc(var(--vp) / 1920 * 56), 56px);
    }
    .t-lead {               /* body lead: 18px → 20px */
      font-size: clamp(18px, calc(var(--vp) / 1920 * 20), 20px);
      line-height: 1.4;
    }
    .t-label {              /* small caps label: 12px */
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.02em;
      font-weight: 700;
    }


    /* ---------- Buttons (sliding dual-text + arrow, Ogaki style) ---------- */

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 0.8em;
      cursor: pointer;
      color: var(--ink);
      background: none;
      border: none;
      text-decoration: none;
      font-family: var(--sans);
      font-weight: 400;
      font-size: clamp(14px, calc(var(--vp) / 1920 * 16), 16px);
      text-transform: uppercase;
      line-height: 1;
      padding: 0.2em 0;
    }
    .btn__text-mask {
      position: relative;
      overflow: hidden;
      display: inline-block;
    }
    .btn__text {
      display: block;
      transition: transform 0.4s var(--ease-snap);
    }
    .btn__text--hover {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      transform: translateY(100%);
      transition: transform 0.4s var(--ease-snap);
    }
    .btn:hover .btn__text { transform: translateY(-100%); }
    .btn:hover .btn__text--hover { transform: translateY(0); }

    .btn__icon-mask {
      display: inline-block;
      position: relative;
      overflow: hidden;
      width: 1.1em;
      aspect-ratio: 1;
    }
    .btn__icon {
      position: absolute;
      top: 50%; left: 0;
      width: 1.1em;
      transform: translateY(-50%);
      transition: transform 0.6s var(--ease-out) 0.3s;
    }
    .btn__icon--hover {
      transform: translateX(-103%) translateY(-50%);
      transition: transform 0.6s var(--ease-out);
    }
    .btn:hover .btn__icon { transform: translateX(103%) translateY(-50%); transition-delay: 0s; }
    .btn:hover .btn__icon--hover { transform: translateX(0) translateY(-50%); transition-delay: 0.3s; }

    .btn--solid {
      background-color: var(--ink);
      color: var(--bg);
      border: 1px solid var(--ink);
      border-radius: 0.5em;
      padding: 1em 2em;
      font-size: 12px;
      transition: background-color 0.3s, color 0.3s;
    }
    .btn--solid:hover { background-color: transparent; color: var(--ink); }


    /* ---------- Reveal animations ---------- */

    .reveal {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 1.5s var(--ease-soft), transform 1.5s var(--ease-soft);
    }
    .reveal.is-visible { opacity: 1; transform: translateY(0); }

    .reveal-line {
      display: block;
      overflow: hidden;
    }
    .reveal-line > span {
      display: block;
      transform: translateY(110%);
      transition: transform 1.2s var(--ease-soft);
    }
    .is-visible .reveal-line > span,
    .reveal-line.is-visible > span { transform: translateY(0); }


    /* ---------- Layout ---------- */

    .container {
      margin-left: var(--side);
      margin-right: var(--side);
    }


    /* ---------- 12-column grid (Ogaki layout system) ---------- */

    .grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-column-gap: clamp(8px, calc(8px + 12 * (var(--vp) - 375px) / 905), 20px);
    }
    .grid > * { grid-column: 1 / -1; }