/* ── history / "our story" page ────────────────────────────────────
   Re-skinned onto the joenit.com design system (2026-07-27): light
   stage, white panels, deep blues. Chapters alternate text and
   photograph; heritage plates sit in a white frame with a hairline
   and a soft shadow, like every other panel in the house.
   The COLOUR GRAMMAR of theme.css holds here too: --brand is the
   brand's own history (the year plates), Joenit blue is the way home
   (the closing bridge). Reads the theme's tokens, adds no colours. */

.hist { padding: clamp(26px,4vw,44px) 0 0; }
.hist__lead { color: var(--text-soft); max-width: 60ch;
              font-size: clamp(16px,1.6vw,19px); margin: 18px 0 0; }

.chap { display: grid; gap: clamp(22px,4vw,52px); align-items: center;
        grid-template-columns: 1fr 1fr;
        padding: clamp(34px,6vw,68px) 0;
        border-top: 1px solid var(--panel-edge); }
.chap:first-of-type { border-top: 0; }
/* even chapters put the photograph on the left */
.chap--flip .chap__ph { order: -1; }
/* A chapter with no photograph runs full width but keeps a readable
   measure — left-aligned, so it lines up with the page heading above
   instead of drifting to the middle of the column. */
.chap--solo { grid-template-columns: minmax(0, 72ch); justify-content: start; }

.chap__n { font-size: 11px; letter-spacing: .28em; text-transform: uppercase;
           color: var(--grey-500); font-weight: 700; }
.chap__h { font-size: clamp(22px,2.6vw,32px); margin: 10px 0 14px; }
.chap__tx p { margin: 0 0 15px; color: var(--text-soft); max-width: 62ch; }
.chap__tx p:last-child { margin-bottom: 0; }

.chap__ph { border: 1px solid var(--panel-edge); border-radius: var(--radius);
            overflow: hidden; background: var(--panel);
            box-shadow: var(--shadow-sm); }
.chap__ph img { width: 100%; }
figure.chap__ph { margin: 0; }

/* ── the timeline band — a white band across the light stage, with the
      year plates in the BRAND colour: this is the brand's own past. ── */
.tl { margin: clamp(34px,6vw,70px) 0 0; padding: clamp(28px,5vw,50px) 0;
      background: var(--panel);
      border-top: 1px solid var(--panel-edge);
      border-bottom: 1px solid var(--panel-edge); }
.tl__title { font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
             color: var(--grey-500); font-weight: 700; margin: 0 0 22px; }
/* horizontal band; scrolls inside itself so the page never does.
   The trailing padding keeps the last plate off the hard edge, so a
   scrollable band reads as scrollable rather than as cut off. */
.tl__band { display: flex; gap: 0; overflow-x: auto; padding-bottom: 12px;
            padding-right: 40px; scrollbar-width: thin; }
.tl__item { flex: 0 0 clamp(190px, 22vw, 240px); position: relative;
            padding: 0 20px 0 0; }
/* the rail the plates hang from */
.tl__item::before { content: ""; position: absolute; left: 0; right: 0; top: 13px;
                    height: 1px; background: var(--grey-200); }
.tl__item:first-child::before { left: 50%; }
.tl__item:last-child::before  { right: 50%; }
.tl__yr { position: relative; display: inline-block; z-index: 1;
          font-size: 12px; font-weight: 700; letter-spacing: .10em;
          font-variant-numeric: tabular-nums;
          color: #fff; background: var(--brand);
          padding: 5px 11px; border-radius: 6px;
          box-shadow: var(--shadow-sm); }
.tl__tx { margin: 14px 16px 0 0; font-size: 13.5px; line-height: 1.5;
          color: var(--text-soft); }

/* ── closing bridge: the page's whole point, and it points HOME —
      so it wears Joenit blue, the same plate the live site gives
      its prices panel. ── */
.bridge { margin: clamp(34px,6vw,66px) 0 clamp(20px,4vw,40px);
          border: 1px solid #0c1928; border-radius: var(--radius);
          background: linear-gradient(165deg, var(--blue-700), var(--blue-900));
          box-shadow: var(--shadow-lg);
          color: #fff; padding: clamp(26px,4vw,44px); }
.bridge .kicker { color: var(--accent-hi); }
.bridge__h { font-size: clamp(21px,2.4vw,30px); margin: 10px 0 12px;
             max-width: 24ch; color: #fff; }
.bridge__tx { color: var(--on-dark-soft); max-width: 62ch; margin: 0 0 22px; }
.bridge__links { display: flex; flex-wrap: wrap; gap: 10px; }
/* ghost buttons + the category run sit on dark here */
.bridge .btn--ghost, .bridge .btn--ghost.is-home {
          background: rgba(255,255,255,.08); color: #fff;
          border-color: rgba(255,255,255,.45); }
.bridge .btn--ghost:hover, .bridge .btn--ghost.is-home:hover {
          background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.7); }
.bridge .chap__n { color: var(--on-dark-faint); }
.bridge .chap__n a { color: var(--on-dark-soft); }
.bridge .chap__n a:hover { color: #fff; }

@media (max-width: 860px) {
  .chap { grid-template-columns: minmax(0, 1fr); }
  .chap--flip .chap__ph { order: 0; }
}

@media print {
  .tl { background: none; }
  .tl__band { overflow: visible; flex-wrap: wrap; }
  .tl__yr { color: #000; background: none; border: 1px solid #bbb;
            box-shadow: none; }
  .chap { break-inside: avoid; }
  .chap__ph { box-shadow: none; border-color: #bbb; }
  .bridge { background: none; color: #000; border-color: #bbb;
            box-shadow: none; }
  .bridge__h, .bridge__tx, .bridge .kicker, .bridge .chap__n,
  .bridge .chap__n a { color: #000; }
  .bridge__links { display: none; }
}