/* ============================================================
   Shared stylesheet — Paul Gerber
   ------------------------------------------------------------
   ONE place for the palette, the type scale, the page shell and
   the menu. Every page links this instead of carrying its own
   copy, so a presentation change is a one-file change.

   Palette rationale lives in
   ai-usage-model/site-plan/research/palette.md.

   Red   = Japan, and the institutional "this is serious" register.
   Blue  = English-language, interactive, technology. Links only.
   White = the page. Warm, not clinical.

   Anti-flag rules this file enforces by construction:
     60 / 30 / 8 / 2 proportion, never near parity
     red and blue never touch
     blue is a verb (things you can do), red is a noun (what this is)
     red is a mark and a rule, never a large field
   ============================================================ */

:root {
  color-scheme: light dark;

  /* ---- surfaces ---- */
  /* --page is the ground the whole site sits on. It used to be --surface-alt, which put
     the page and the cards 1.096:1 apart, below the point where a flat field reads as a
     step at all, so the card system was carried entirely by its 1px border. White makes
     one clear step out of two invisible ones, and every element darker than the page
     gains about a tenth of its contrast. --surface-alt stays warm and keeps its other
     job as a tint, which is also what saves the menu hover fill. */
  --page:            #FFFFFF;
  --surface:         #FFFFFF;
  --surface-alt:     #F7F4F0;
  --surface-sunken:  #EFEAE3;
  --brand-wash:      #FCF2F3;

  /* ---- text ---- */
  --ink:             #1F1C1A;
  --ink-muted:       #5C554E;
  --ink-subtle:      #6B635A;

  /* ---- brand ---- */
  --brand:           #A6192E;
  --brand-ink:       #A6192E;
  --brand-hover:     #7A1526;
  --brand-deep:      #7A1526;
  --on-brand:        #FFFFFF;

  /* ---- accent: links and interactive only ---- */
  --accent:          #1D4ED8;
  --accent-hover:    #1E40AF;
  --on-accent:       #FFFFFF;

  /* ---- lines ---- */
  --line:            #E4DED7;   /* decorative hairlines only */
  --line-strong:     #8C8175;   /* control borders, meets 3:1 */

  --focus:           #0B5FFF;

  /* ---- status: hue-separated from the brand red ---- */
  --success: #145C32;  --success-bg: #EBF6EF;  --success-line: #1B9153;
  --warning: #7A4E00;  --warning-bg: #FCF4E2;  --warning-line: #B87E00;
  --danger:  #A83A0C;  --danger-bg:  #FDF0E9;  --danger-line:  #D64F17;
  --info:    #17458F;  --info-bg:    #EDF2FD;  --info-line:    #2C6BE0;

  /* ---- type: Japanese-capable, system only, no web fonts ---- */
  --sans:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic",
    "Yu Gothic Medium", "Yu Gothic", Meiryo, "Noto Sans JP", "Noto Sans CJK JP",
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --serif:
    Georgia, "Iowan Old Style", "Times New Roman",
    "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
  --mono:
    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
    "BIZ UDGothic", "Noto Sans Mono CJK JP", monospace;

  --lh-body:       1.6;
  --lh-body-ja:    1.9;
  --lh-heading:    1.2;
  --lh-heading-ja: 1.45;
  --measure:       68ch;
  --measure-ja:    34em;

  --shadow: 0 1px 2px rgba(31,28,26,.05), 0 12px 32px -12px rgba(31,28,26,.14);

  /* ============================================================
     Legacy aliases.
     The existing pages were written against a warm-paper palette
     with these names. Rather than rewrite every rule on seven
     pages, the old names are re-pointed at the new palette here.
     New work should use the semantic names above.
     ============================================================ */
  --bg:         var(--page);
  --surface-2:  var(--surface-sunken);
  --ground:     var(--page);
  --muted:      var(--ink-muted);
  --faint:      var(--ink-subtle);
  --line2:      var(--line-strong);
  --neutral:    var(--line-strong);
  --warm:       var(--brand);
  --warm-ink:   var(--brand-deep);
  --warm-soft:  var(--brand-wash);
  --cool:       var(--accent);
  --cool-ink:   var(--accent-hover);
  --cool-soft:  var(--info-bg);
  --jade:       var(--success);
  --jade-soft:  var(--success-bg);
  --on-warm:    var(--on-brand);
}

@media (prefers-color-scheme: dark) {
  :root {
    --page:           #1C1A17;
    --surface:        #14120F;
    --surface-alt:    #1C1A17;
    --surface-sunken: #252220;
    --brand-wash:     #241F1F;

    --ink:            #EDE8E1;
    --ink-muted:      #A79E95;
    --ink-subtle:     #948B82;

    --brand:          #C42846;
    --brand-ink:      #F2606F;
    --brand-hover:    #D22F4E;
    --brand-deep:     #F3DFE1;
    --on-brand:       #FFFFFF;

    --accent:         #8AB4FF;
    --accent-hover:   #B3CDFF;
    --on-accent:      #14120F;

    --line:           #332F2B;
    --line-strong:    #756E65;
    --focus:          #9DC1FF;

    --success: #6FD695;  --success-bg: #12241A;  --success-line: #2FA96A;
    --warning: #E8BC55;  --warning-bg: #251E0E;  --warning-line: #C99418;
    --danger:  #FF9470;  --danger-bg:  #2A1710;  --danger-line:  #E2612B;
    --info:    #8AB4FF;  --info-bg:    #121B2E;  --info-line:    #3D77E8;

    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 16px 40px -16px rgba(0,0,0,.55);

    /* dark needs the red-as-text alias, not the fill */
    --warm:      var(--brand-ink);
    --warm-ink:  var(--brand-deep);
  }
}

/* Manual toggle wins over the media query, in both directions. */
:root[data-theme="light"] {
  --page: #FFFFFF;
  --surface: #FFFFFF; --surface-alt: #F7F4F0; --surface-sunken: #EFEAE3; --brand-wash: #FCF2F3;
  --ink: #1F1C1A; --ink-muted: #5C554E; --ink-subtle: #6B635A;
  --brand: #A6192E; --brand-ink: #A6192E; --brand-hover: #7A1526; --brand-deep: #7A1526;
  --on-brand: #FFFFFF; --accent: #1D4ED8; --accent-hover: #1E40AF; --on-accent: #FFFFFF;
  --line: #E4DED7; --line-strong: #8C8175; --focus: #0B5FFF;
  --success: #145C32; --success-bg: #EBF6EF; --success-line: #1B9153;
  --warning: #7A4E00; --warning-bg: #FCF4E2; --warning-line: #B87E00;
  --danger:  #A83A0C; --danger-bg:  #FDF0E9; --danger-line:  #D64F17;
  --info:    #17458F; --info-bg:    #EDF2FD; --info-line:    #2C6BE0;
  --shadow: 0 1px 2px rgba(31,28,26,.05), 0 12px 32px -12px rgba(31,28,26,.14);
  --warm: var(--brand); --warm-ink: var(--brand-deep);
}
:root[data-theme="dark"] {
  --page: #1C1A17;
  --surface: #14120F; --surface-alt: #1C1A17; --surface-sunken: #252220; --brand-wash: #241F1F;
  --ink: #EDE8E1; --ink-muted: #A79E95; --ink-subtle: #948B82;
  --brand: #C42846; --brand-ink: #F2606F; --brand-hover: #D22F4E; --brand-deep: #F3DFE1;
  --on-brand: #FFFFFF; --accent: #8AB4FF; --accent-hover: #B3CDFF; --on-accent: #14120F;
  --line: #332F2B; --line-strong: #756E65; --focus: #9DC1FF;
  --success: #6FD695; --success-bg: #12241A; --success-line: #2FA96A;
  --warning: #E8BC55; --warning-bg: #251E0E; --warning-line: #C99418;
  --danger:  #FF9470; --danger-bg:  #2A1710; --danger-line:  #E2612B;
  --info:    #8AB4FF; --info-bg:    #121B2E; --info-line:    #3D77E8;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 16px 40px -16px rgba(0,0,0,.55);
  --warm: var(--brand-ink); --warm-ink: var(--brand-deep);
}

/* ============================================================
   Base
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17.5px;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

/* Japanese needs more air between lines and a shorter measure. */
:lang(ja) { line-height: var(--lh-body-ja); }
:lang(ja) h1, :lang(ja) h2, :lang(ja) h3 { line-height: var(--lh-heading-ja); }
:lang(ja) p { max-width: var(--measure-ja); }

h1, h2, h3, h4 {
  font-family: var(--serif);
  line-height: var(--lh-heading);
  color: var(--brand-deep);
  font-weight: 600;
}
h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); margin: .2em 0 .3em; letter-spacing: -.01em; }
h2 { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem); }
h3 { font-size: 1.15rem; }

p { max-width: var(--measure); }

.lede {
  font-size: clamp(1.05rem, .98rem + .4vw, 1.3rem);
  color: var(--ink-muted);
  margin: 0 0 1.6em;
}

.eyebrow {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-subtle);
  margin: 0;
}

/* Blue is a verb. Links are the only place it appears in body copy. */
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--accent-hover); }

hr { border: 0; border-top: 1px solid var(--line); margin: 2.4rem 0; }

/* The focus ring sits OFF the element, so it lands on the page
   background rather than on a red button where it would fail contrast. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ============================================================
   Page shell
   ============================================================ */

.wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding: clamp(1.1rem, .6rem + 2vw, 2.2rem);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .9rem;
  margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--line);
}

/* The one red rule on the page: a mark, not a field. */
.topbar::after { content: none; }

.brandmark {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  text-decoration: none;
  color: var(--ink);
}
.brandmark b {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--brand-ink);
  letter-spacing: .01em;
}
.brandmark span {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-subtle);
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: .9rem;
}

/* ---- language toggle ---- */
.langswitch {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .06em;
}
.langswitch a { color: var(--accent); text-decoration: none; }
.langswitch a:hover { text-decoration: underline; }
.langswitch [aria-current="true"] { color: var(--ink-subtle); font-weight: 600; }
.langswitch i { color: var(--line-strong); font-style: normal; }

/* ---- menu ---- */
.menu { position: relative; }
.menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* padding:0 is load-bearing. Several pages carry a generic `button { padding }`
     rule, and inheriting it collapses the icon to zero width. */
  padding: 0;
  width: 40px; height: 34px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--ink);
  cursor: pointer;
}
.menu-btn svg { display: block; flex: 0 0 auto; }
.menu-btn svg rect { fill: currentColor; }
.menu-btn:hover { border-color: var(--brand); color: var(--brand-ink); }
.menu-panel {
  position: absolute;
  right: 0; top: calc(100% + .45rem);
  z-index: 40;
  min-width: 210px;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: .35rem;
}
.menu-panel[hidden] { display: none; }
.menu-panel a {
  padding: .55rem .7rem;
  border-radius: 7px;
  text-decoration: none;
  color: var(--ink);
  font-size: .95rem;
}
.menu-panel a:hover { background: var(--surface-alt); color: var(--brand-ink); }
.menu-panel a[aria-current="page"] {
  color: var(--brand-ink);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--brand);
}
.menu-ver {
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--ink-subtle);
  padding: .45rem .7rem .25rem;
  border-top: 1px solid var(--line);
  margin-top: .3rem;
}

/* ============================================================
   Buttons
   ============================================================ */

.btn, .btn-primary, .btn-ghost {
  font: inherit;
  font-size: .95rem;
  padding: .6rem 1.05rem;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid transparent;
}
/* An <a> styled as a button is still a link, so kill the underline. */
a.btn, a.btn-primary, a.btn-ghost { text-decoration: none; display: inline-block; }
.btn-primary { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.btn-primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand-ink); }
.btn-ghost[disabled] { opacity: .45; cursor: not-allowed; }

/* ============================================================
   Draft marker
   Deliberate, per Tohidi/Reber: a visible "not finished" signal
   stops a tidy layout reading as a finished product.
   ============================================================ */

.draft {
  display: inline-block;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--warning);
  background: var(--warning-bg);
  border: 1px solid var(--warning-line);
  border-radius: 4px;
  padding: .12rem .4rem;
  vertical-align: middle;
}

/* ============================================================
   Site footer
   ------------------------------------------------------------
   Added when the trade name came off the site. With no brand and
   no clients yet, the registered 合同会社 is the only institutional
   identity the page carries, and in Japan its absence is noticed.

   It sits outside .wrap and carries its own measure, so it can be
   anchored on </body> and does not care how each page nests.
   ============================================================ */

.sitefoot {
  max-width: 1040px;
  margin: 3.5rem auto 0;
  padding: 1.1rem clamp(1.1rem, .6rem + 2vw, 2.2rem) 2.4rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem 1.4rem;
  font-size: .84rem;
  color: var(--ink-subtle);
}
.foot-org {
  margin: 0;
  max-width: none;
  font-family: var(--mono);
  font-size: .76rem;
  letter-spacing: .06em;
  color: var(--ink-subtle);
}
/* The entity form rides at the same size as the name, not shrunk to a
   disclaimer. It is the part a Japanese buyer is actually looking for. */
.foot-org span { font-family: var(--sans); letter-spacing: 0; }
.foot-nav { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; }
.foot-nav a { color: var(--accent); text-decoration: none; }
.foot-nav a:hover { text-decoration: underline; }

/* ============================================================
   Portrait
   Was duplicated verbatim on the about and ja pages. Promoted here
   when the real photo landed, so the crop is defined once.
   ============================================================ */

.portrait {
  width: 132px; height: 132px;
  border-radius: 50%;
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: .64rem; letter-spacing: .1em;
  color: var(--ink-subtle); text-align: center; line-height: 1.5;
  flex: 0 0 auto;
  overflow: hidden;
  position: relative;
}
/* The placeholder text and the <img> are flex siblings, so a loaded photo used to
   be shrunk by the text to make room for it, leaving a bare rim of the circle
   showing. Taking the image out of flow fixes that: it now covers the whole
   circle and the text simply sits underneath, revealed only on failure. */
/* object-fit so the circle crops the headshot rather than squashing it. */
.portrait img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block;
}
/* If the file is ever missing, the <img> hides itself via its onerror handler and
   the placeholder text underneath shows through. No broken-image icon in production. */
.portrait.is-empty img { display: none; }
.idblock { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; margin-bottom: 2rem; }
.idblock h1 { margin: 0 0 .15em; }

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

@media (max-width: 540px) {
  body { font-size: 16.5px; }
  .wrap { padding: 1rem .9rem 2.5rem; }
}