@charset "UTF-8";

/* ============================================================
   TAKUMIISOBE.COM — base.css
   Mobile-first global styles, design tokens, reset
   ============================================================ */

/* ------------------------------------------------------------
   Naming convention (TAKUMIISOBE.COM "Stratum Naming")

   - Page / Block        : PascalCase  (main.Office, section.Ethos)
   - Wrapper structure   : lowercase   (.wrapper, .container, .box)
   - Style descendants by parent:
       .Ethos .wrapper .container h1 { ... }
   - State               : .is-active, .has-image
   - Simple role         : .bold, .white, .mute, .center, .sp, .pc
   - Layout              : .l-stack, .l-grid, .flex, .w100
   - Spacing             : .mt-10, .mb-20, .mx-30 ... (px direct)
   - JS hook (no styles) : .js-*

   - Language detection  : <html lang="en"> + :lang(ja) auto
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   1. Font faces
   ------------------------------------------------------------
   Norma / Mokuseki Sans @font-face live in app.html (versioned
   filenames). No other webfonts ship. */

/* ------------------------------------------------------------
   2. Modern reset
   ------------------------------------------------------------ */

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

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  outline: none;
}

button {
  cursor: pointer;
}

ul,
ol,
ul li,
ol li {
  list-style: none;
  text-decoration: none;
}

a {
  color: inherit;
  text-decoration: none;
  display: inline-block;
}

::selection {
  background: var(--color-text);
  color: var(--color-bg);
}

/* ------------------------------------------------------------
   3. Design tokens (mobile baseline)
   ------------------------------------------------------------ */

:root {
  /* --- Colors --- */
  --color-bg:        #ffffff;
  --color-text:      #000000;
  /* 0.55 ≈ 4.6:1 on white — WCAG AA for the small functional copy this styles
     (license blurbs, cart hints, buy notes). Was 0.3 (~2.1:1, unreadable). */
  --color-text-mute: rgba(0, 0, 0, 0.55);
  --color-bg-dark:   #121212;
  --color-bg-gray:   #f6f6f6;
  --color-accent:    #b33030;
  --color-line:      rgba(0, 0, 0, 0.15);
  /* The one border of the site (2026-10-31, at the user's request — "borderは
     これに統一して"): every rule, divider and box outline is this, whatever the
     ground — a light grey at low alpha reads on white, on the blue and on the
     black glyph-set block alike. Used whole (`border-top: var(--border-line)`).
     Not applied to the outlines that carry meaning — the pills and toggles in
     the text colour, the red error/selected borders, the focus rings. */
  --border-line:     1px solid rgba(200, 200, 200, 0.3);
  /* Sharper signal red — top-page redesign (2026-08) + Header logo. Distinct
     from the older, muted --color-accent above; do not merge the two. */
  --color-signal:    #e0231c;

  /* Apres Guerre brand palette (2026-10 rebrand, Figma "II-ii"): white, blue
     and black (2026-10-31, at the user's request — the orange, the peach and
     the amber are gone). */
  /* rgb(25 40 153): the user's own value (2026-10-12, "--currentColorを
     rgb(25 40 153)に変えて") — the colour the wordmark, the header and the
     page text all paint with. The translucent tints below (and Header.svelte's
     BLUE_LUM, which mirrors it for its contrast test) are built from the same
     three numbers. Was #263399. */
  --brand-blue:   rgb(25 40 153);
  --brand-hero:   #3e3e3e;  /* home page typeface heroes */
  --brand-paper:  #f1f0ef;  /* text on the heroes */

  /* --- Color aliases (general-purpose) --- */
  --background: var(--color-bg);
  --white:      #ffffff;
  --black:      var(--color-text);
  --key:        var(--color-text);

  /* --- Typography stacks ---
     app.html re-declares --font-en/--font-ja as Norma (site-wide directive);
     this is the no-JS/base fallback. Keep the versioned name here in sync
     with app.html's @font-face block. */
  --font-en:     'Ango', 'Norma VF02', 'Norma', 'Helvetica Neue', Arial, sans-serif;
  --font-ja:     'Hiragino Sans', 'Hiragino Kaku Gothic ProN',
                 'Yu Gothic', 'Meiryo', sans-serif;
  --font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI',
                 Roboto, sans-serif;

  /* heading-font / text-font are switched by :lang() blocks */
  --heading-font: var(--font-en);
  --text-font:    var(--font-en);

  /* --- Font weight tokens (Norma VF, wght 1–950) ---
     Change --fw-base to reweight the entire site. Components must NOT
     hardcode weights; use these tokens (or inherit). */
  --fw-base:   400;  /* default text weight (body inherits everywhere); 320 until 2026-11-06 */
  --fw-light:  260;  /* lighter body copy — sits between the Norma "SemiLight" (250) and "Light" (300) stops */
  --fw-ui:     380;  /* UI accents: nav, buttons, labels */
  --fw-strong: 500;  /* emphasis / sub-headings */

  /* --- Type scale (mobile) --- */
  --fs-h0:   24px;   /* Display larger than h1 if needed */
  --fs-h1:   24px;   /* Archive title */
  --fs-h2:   20px;   /* Major section (interpolated) */
  --fs-h3:   16px;   /* PC section title ("Office", "Ethos:") */
  --fs-h4:   14px;   /* "Colophon" heading */
  --fs-h5:   12px;   /* Numbering "01", labels, nav PC */
  --fs-h6:   10px;   /* small meta / captions / labels — fixed 10px */
  --fs-body: 12px;
  --fs-p:    12px;   /* paragraphs — fixed 12px */

  /* --- Line heights --- */
  --lh-h1:   1.2;
  --lh-h2:   1.2;
  --lh-h3:   1.33;
  --lh-h4:   1.4;
  --lh-h5:   1.4;
  --lh-h6:   1.5;
  --lh-body: 1.3;
  --lh-ja:   1.8;
  --lh-row:  2;

  /* --- Spacing scale (component padding/gap, 4px base) --- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  30px;
  --space-8:  40px;
  --space-9:  60px;
  --space-10: 80px;
  --space-11: 120px;

  /* --- Layout --- */
  /* The page's left/right inset: the wordmark's own side margin (2026-10, at
     the user's request — "基本的には40px", "ロゴのside paddingと合わせて").
     40px on PC, 15px on SP (2026-10, at the user's request — "SPの横幅15px
     … 本文のside paddingや、var(--edgeとかheaderのright:とかも統一で横を15px";
     it was 6.33vw, Figma 7:782); everything that insets from the screen edge
     reads this one token, so it all lines up with the logo. */
  --padding:    15px;
  --gutter:     20px;    /* Fixed-px alt for image-bleed pages */
  --gutter-alt: 25px;    /* Fixed-px alt for nav/Office (Mobile) */
  --header-offset: 30px;
  --max-width:  1480px;  /* PC Figma viewport */

  /* --- Motion --- */
  --duration-fast:    200ms;
  --duration-default: 400ms;
  --duration-slow:    800ms;
  --ease-default:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:         cubic-bezier(0, 0, 0.2, 1);
  --ease-in:          cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out:      cubic-bezier(0.65, 0, 0.35, 1);

  /* --- Z-index --- */
  --z-base:    0;
  --z-content: 1;
  --z-header:  10;
  --z-overlay: 100;
  --z-modal:   1000;

  /* --- Misc reusable height for animation slots --- */
  --shuffle-height: 15vh;
}

/* Page themes (see $lib/theme.ts). The attribute is set server-side by
   hooks.server.ts (so the first paint is already right) and kept in sync on
   client navigation by +layout.svelte. Declared on the same element as
   :root, so the aliases that read these (--background, --black) pick the
   themed values up.

   The palette is white, blue and black (2026-10-31, at the user's request —
   "ホワイト・ブルー・ブラックでシンプルにまとめたい", "テキストは基本ブルーにしな
   い"): text is black, and the blue is the wordmark and the accents (the
   buttons, the blue grounds). The orange and the peach are gone.
     home, white, page — the :root defaults above: black on white
     about — white text on the brand blue ground, /about (below) */
html[data-theme='about'] {
  --color-text:      #ffffff;
  --color-text-mute: rgb(255 255 255 / 0.8);
  --color-line:      rgb(255 255 255 / 0.3);
  --color-bg:        var(--brand-blue);
}

/* Masthead: the space the Header's large top-of-page wordmark takes. The home
   page lays out its own top around that wordmark (the one page that has it —
   see the override below); every other page reserves --masthead-h above its
   own content (+layout.svelte), and that is the Header's compact bar there.
   Mirrors Logo.svelte's geometry — PC one line 35px down, the width inside
   the side margins (--logo-h / --logo-w tall); SP two lines 28px down,
   --logo-stack-h viewBox units tall at (width inside the margins) /
   --logo-guerre-w per unit — plus a gap below. The --logo-* proportions come
   from $lib/data/logo.ts, emitted on :root by +layout.svelte. */
/* The Header's compact bar (Header.svelte). It has no fill (since 2026-11-05;
   it blends with what is under it), but it is still the row the lockup and
   the links stand in, so anything pinned to the top of the screen (sticky
   panels, jump targets) has to clear it. */
:root {
  --header-bar-h: 100px;
}

@media (max-width: 767.98px) {
  :root {
    --header-bar-h: 66px;
  }
}

/* PC (from 1060px, where the Header has its inline nav): a shorter bar — the
   small lockup and the link row centred in it (2026-10-31, at the user's
   request). It is also what every page but the home reserves above its content
   (--masthead-h below). */
@media (min-width: 1060px) {
  :root {
    --header-bar-h: 72px;
  }
}

:root {
  --masthead-gap: 60px;
  /* Leads with 10px, not the wordmark's own 35px top offset (2026-10, the
     user's own value) — page content starts 25px higher on PC. */
  --masthead-h: calc(
    10px + (100vw - 2 * var(--padding)) * var(--logo-h) / var(--logo-w) +
      var(--masthead-gap) +
      env(safe-area-inset-top, 0px)
  );
}

@media (max-width: 767.98px) {
  :root {
    --masthead-gap: 40px;
    --masthead-h: calc(
      28px + (100vw - 2 * var(--padding)) * var(--logo-stack-h) / var(--logo-guerre-w) +
        var(--masthead-gap) +
        env(safe-area-inset-top, 0px)
    );
  }
}

/* Every page but the home has the Header's compact bar from scroll 0 and no
   large wordmark (2026-10-31, at the user's request — "Topページのみtop0の時に
   ロゴを大きく"), so what it reserves above its content is the bar. The theme
   attribute is set on the server for the first paint (hooks.server.ts), so
   this holds before any script runs. Pages that size against --masthead-h
   (the pinned PageSection column, the min-heights) follow. */
html:not([data-theme='home']) {
  --masthead-h: var(--header-bar-h);
}

/* ------------------------------------------------------------
   4. Breakpoint scale-ups (768 / 1024 / 1440)
   ------------------------------------------------------------ */

@media (min-width: 768px) {
  :root {
    --fs-h1: 28px;
    --fs-h2: 24px;
    --padding:       40px;
    --gutter:        32px;
    --gutter-alt:    40px;
    --header-offset: 32px;
  }
}

@media (min-width: 1024px) {
  :root {
    --fs-h1: 40px;
    --fs-h2: 28px;
    --gutter:        40px;
    --gutter-alt:    40px;
    --header-offset: 28px;
  }
}

@media (min-width: 1440px) {
  :root {
    --fs-h1: 48px;
    --fs-h2: 32px;
    --gutter:     48px;
    --gutter-alt: 48px;
  }
}

/* ------------------------------------------------------------
   5. Lang-based font switch
   ------------------------------------------------------------ */

:lang(en) {
  --heading-font: var(--font-en);
  --text-font:    var(--font-en);
}

:lang(ja) {
  --heading-font: var(--font-ja);
  --text-font:    var(--font-ja);
}

/* ------------------------------------------------------------
   6. Document base
   ------------------------------------------------------------ */

html {
  font-size: 62.5%;                    /* 1rem = 10px */
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html,
body {
  background-color: var(--background);
  min-height: 100%;
  /* Guard against accidental horizontal overflow WITHOUT creating a scroll
     container: `clip` (unlike `hidden`) keeps `position: sticky` working.
     Never put `overflow-x: hidden` back here — it silently turns <body> into
     a non-scrolling scroll container and kills every sticky/pinned element
     on the site. Same reason `width: 100vw` (scrollbar overflow) is gone. */
  overflow-x: clip;
}

/* ------------------------------------------------------------
   Lenis smooth scroll (see src/lib/scroll.ts)
   ------------------------------------------------------------ */

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

body {
  font-family: var(--text-font);
  font-weight: var(--fw-base);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
}

/* JP-specific line-height (font-family is already switched by :lang) */
:lang(ja) {
  line-height: var(--lh-ja);
}

/* ------------------------------------------------------------
   7. Universal text element styling
   ------------------------------------------------------------ */

div, h1, h2, h3, h4, h5, h6,
a, span, input, button, tspan,
tr, td, th, p, li {
  font-family: var(--heading-font);
  color: var(--color-text);
  font-display: swap;
  font-feature-settings: "palt";
}

/* ------------------------------------------------------------
   8. Headings & body (tags + .h0/.h1〜.h6 utility)
   ------------------------------------------------------------ */

.h0 {
  font-size: var(--fs-h0);
  line-height: var(--lh-h1);
  font-weight: var(--fw-base);
}

h1, .h1 {
  font-family:  var(--heading-font);
  font-size:    var(--fs-h1);
  line-height:  var(--lh-h1);
  font-weight: var(--fw-base);
}

h2, .h2 {
  font-family:  var(--heading-font);
  font-size:    var(--fs-h2);
  line-height:  var(--lh-h2);
  font-weight: var(--fw-base);
}

h3, .h3 {
  font-family:  var(--heading-font);
  font-size:    var(--fs-h3);
  line-height:  var(--lh-h3);
  font-weight: var(--fw-strong);
}

h4, .h4 {
  font-family:  var(--heading-font);
  font-size:    var(--fs-h4);
  line-height:  var(--lh-h4);
  font-weight: var(--fw-strong);
}

h5, .h5 {
  font-family:  var(--heading-font);
  font-size:    var(--fs-h5);
  line-height:  var(--lh-h5);
  font-weight: var(--fw-strong);
}

h6, .h6 {
  font-family:  var(--heading-font);
  font-size:    var(--fs-h6);
  line-height:  var(--lh-h6);
  font-weight: var(--fw-base);
}

p, .p {
  font-family:  var(--text-font);
  font-size:    var(--fs-p);
  line-height:  var(--lh-body);
}

p:lang(ja), .p:lang(ja) {
  line-height: var(--lh-ja);
}

/* ------------------------------------------------------------
   9. Body element defaults
   ------------------------------------------------------------ */

section {
  padding-left:  var(--padding);
  padding-right: var(--padding);
}

img {
  width: 100%;
  object-fit: cover;
  object-position: 50%;
}

input::placeholder {
  color: var(--color-text);
  opacity: 0.25;
}

/* ------------------------------------------------------------
   10. Role utilities
   ------------------------------------------------------------ */

/* Weight */
.regular { font-weight: var(--fw-base); }
.medium  { font-weight: var(--fw-strong); }
.bold    { font-weight: 700; }

/* Color */
/* Text colour: black by default; add `.white` to any element and it (and every
   descendant) is forced white — overrides the per-element colours set in §7
   and inline styles, so you can whiten a whole block from the parent alone. */
.white,
.white * { color: var(--white) !important; }
.black   { color: var(--black); }
.mute    { color: var(--color-text-mute); }
.accent  { color: var(--color-accent); }

/* Background */
.bg-white { background: var(--white); }
.bg-dark  { background: var(--color-bg-dark); }
.bg-gray  { background: var(--color-bg-gray); }

/* Alignment */
.left    { text-align: left; }
.center  { text-align: center; }
.right   { text-align: right; }

/* Transform */
.upper   { text-transform: uppercase; }
.lower   { text-transform: lowercase; }
.italic  { font-style: italic; }
.nowrap  { white-space: nowrap; }

/* Display */
.block         { display: block; }
.inline-block  { display: inline-block; }
.hidden        { display: none; }

/* Mobile-first responsive switches */
.sp { display: block; }
.pc { display: none; }

@media (min-width: 768px) {
  .sp { display: none; }
  .pc { display: block; }
}

/* Full-bleed (cancel section padding) */
.w100 {
  width: 100vw;
  margin-left: calc(-1 * var(--padding));
}

/* ------------------------------------------------------------
   11. State utilities (.is-*, .has-*)
   ------------------------------------------------------------ */

.is-active   { color: var(--color-text); }
.is-inactive,
.is-mute     { color: var(--color-text-mute); }
.is-hidden   { display: none; }
.is-paused   { animation-play-state: paused; }
.is-open     { /* hook for components */ }
.is-closed   { /* hook for components */ }

.has-image   { /* hook */ }
.has-video   { /* hook */ }

/* ------------------------------------------------------------
   12. Layout utilities (.l-*, .flex)
   ------------------------------------------------------------ */

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.l-container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.l-container-alt {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter-alt);
}

.l-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.l-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.l-grid {
  display: grid;
  gap: var(--space-4);
}

.l-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ------------------------------------------------------------
   13. Spacing utilities (margin, px direct)
   Values: 1, 3, 5, 8, 10, 15, 20, 30, 40, 60, 80, 100, 120
   (mt/mb extend to 160, 200)
   ------------------------------------------------------------ */

/* mx (left + right) */
.mx-1   { margin-left: 1px;   margin-right: 1px; }
.mx-3   { margin-left: 3px;   margin-right: 3px; }
.mx-5   { margin-left: 5px;   margin-right: 5px; }
.mx-8   { margin-left: 8px;   margin-right: 8px; }
.mx-10  { margin-left: 10px;  margin-right: 10px; }
.mx-15  { margin-left: 15px;  margin-right: 15px; }
.mx-20  { margin-left: 20px;  margin-right: 20px; }
.mx-30  { margin-left: 30px;  margin-right: 30px; }
.mx-40  { margin-left: 40px;  margin-right: 40px; }
.mx-60  { margin-left: 60px;  margin-right: 60px; }
.mx-80  { margin-left: 80px;  margin-right: 80px; }
.mx-100 { margin-left: 100px; margin-right: 100px; }
.mx-120 { margin-left: 120px; margin-right: 120px; }

/* my (top + bottom) */
.my-1   { margin-top: 1px;   margin-bottom: 1px; }
.my-3   { margin-top: 3px;   margin-bottom: 3px; }
.my-5   { margin-top: 5px;   margin-bottom: 5px; }
.my-8   { margin-top: 8px;   margin-bottom: 8px; }
.my-10  { margin-top: 10px;  margin-bottom: 10px; }
.my-15  { margin-top: 15px;  margin-bottom: 15px; }
.my-20  { margin-top: 20px;  margin-bottom: 20px; }
.my-30  { margin-top: 30px;  margin-bottom: 30px; }
.my-40  { margin-top: 40px;  margin-bottom: 40px; }
.my-60  { margin-top: 60px;  margin-bottom: 60px; }
.my-80  { margin-top: 80px;  margin-bottom: 80px; }
.my-100 { margin-top: 100px; margin-bottom: 100px; }
.my-120 { margin-top: 120px; margin-bottom: 120px; }

/* mt (top only) */
.mt-1   { margin-top: 1px; }
.mt-3   { margin-top: 3px; }
.mt-5   { margin-top: 5px; }
.mt-8   { margin-top: 8px; }
.mt-10  { margin-top: 10px; }
.mt-15  { margin-top: 15px; }
.mt-20  { margin-top: 20px; }
.mt-30  { margin-top: 30px; }
.mt-40  { margin-top: 40px; }
.mt-60  { margin-top: 60px; }
.mt-80  { margin-top: 80px; }
.mt-100 { margin-top: 100px; }
.mt-120 { margin-top: 120px; }
.mt-160 { margin-top: 160px; }
.mt-200 { margin-top: 200px; }

/* mb (bottom only) */
.mb-1   { margin-bottom: 1px; }
.mb-3   { margin-bottom: 3px; }
.mb-5   { margin-bottom: 5px; }
.mb-8   { margin-bottom: 8px; }
.mb-10  { margin-bottom: 10px; }
.mb-15  { margin-bottom: 15px; }
.mb-20  { margin-bottom: 20px; }
.mb-30  { margin-bottom: 30px; }
.mb-40  { margin-bottom: 40px; }
.mb-60  { margin-bottom: 60px; }
.mb-80  { margin-bottom: 80px; }
.mb-100 { margin-bottom: 100px; }
.mb-120 { margin-bottom: 120px; }
.mb-160 { margin-bottom: 160px; }
.mb-200 { margin-bottom: 200px; }

/* ml (left only) */
.ml-1   { margin-left: 1px; }
.ml-3   { margin-left: 3px; }
.ml-5   { margin-left: 5px; }
.ml-8   { margin-left: 8px; }
.ml-10  { margin-left: 10px; }
.ml-15  { margin-left: 15px; }
.ml-20  { margin-left: 20px; }
.ml-30  { margin-left: 30px; }
.ml-40  { margin-left: 40px; }
.ml-60  { margin-left: 60px; }
.ml-80  { margin-left: 80px; }
.ml-100 { margin-left: 100px; }
.ml-120 { margin-left: 120px; }

/* mr (right only) */
.mr-1   { margin-right: 1px; }
.mr-3   { margin-right: 3px; }
.mr-5   { margin-right: 5px; }
.mr-8   { margin-right: 8px; }
.mr-10  { margin-right: 10px; }
.mr-15  { margin-right: 15px; }
.mr-20  { margin-right: 20px; }
.mr-30  { margin-right: 30px; }
.mr-40  { margin-right: 40px; }
.mr-60  { margin-right: 60px; }
.mr-80  { margin-right: 80px; }
.mr-100 { margin-right: 100px; }
.mr-120 { margin-right: 120px; }

/* ------------------------------------------------------------
   14. Reduced motion
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------
   15. Focus outlines (accessibility)
   ------------------------------------------------------------ */

:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* ------------------------------------------------------------
   16. Accessibility helper
   ------------------------------------------------------------ */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}