/* Libera site: tokens and layout. Colors, fonts and spacing are defined here only. */

:root {
  /* Color: these five only (BRIEF 8-3) */
  --blue: #1A1FB8;
  --white: #FFFFFF;
  --ink: #111111;
  --rule: #E6E6EC;
  --mute: #6B6B78;

  /* Type */
  --font-en: "EB Garamond", Garamond, "Times New Roman", serif;
  --font-ja-serif: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-sans: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "M PLUS 1 Code", ui-monospace, Menlo, monospace;

  --fs-label: 11px;
  --fs-nav: 12px;
  --fs-utt: 21px;
  --fs-body: 15px;
  --fs-statement-en: 17px;
  --fs-lead-ja: 28px;
  --fs-lead-en: 13px;
  --fs-thesis: 13px;

  --ls-label: 0.16em;

  /* Space */
  --pad-x: 64px;
  --panel-pad: 48px;
  --logo-h: 76px;
  --spk-w: 112px;
}

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

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

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

p, h1, h2, h3, dl, dd, figure { margin: 0; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

:lang(ja) h1,
:lang(ja) h2 {
  line-break: strict;
  word-break: auto-phrase;
}
:lang(ja) p { line-break: strict; }

.skip-link {
  position: absolute;
  left: var(--pad-x);
  top: -100px;
  z-index: 10;
  padding: 10px 14px;
  background: var(--white);
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: var(--fs-nav);
  border: 1px solid var(--blue);
}
.skip-link:focus { top: 12px; }

/* Mono meta text: labels, numbers, notes */
.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  line-height: 1.6;
}

/* ---------- Logo, nav, buttons, footer (shared) ---------- */

.site-logo {
  display: block;
  width: fit-content;
  /* the SVG has built-in space left of the mark; align the visible mark to the gutter */
  margin-left: calc(var(--logo-h) * -0.16);
  color: var(--blue);
}
.site-logo svg {
  display: block;
  height: var(--logo-h);
  width: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px 20px;
  min-width: 0;
}
.site-tagline {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.3;
  color: var(--blue);
  /* sit on the same line as the "Libera" wordmark */
  padding-top: calc(var(--logo-h) * 0.08);
}

.site-nav {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-right: -10px;
  font-family: var(--font-mono);
  font-size: var(--fs-nav);
  letter-spacing: 0.1em;
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  text-decoration: none;
  color: var(--ink);
}
.site-nav a:hover,
.site-nav a[aria-current="page"] { color: var(--blue); }
.site-nav a:hover { text-decoration: underline; text-underline-offset: 5px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 24px;
  border: 1px solid var(--blue);
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.btn--primary { background: var(--blue); color: var(--white); }
.btn--primary:hover { background: var(--white); color: var(--blue); }
.btn--secondary { background: var(--white); color: var(--blue); }
.btn--secondary:hover { background: var(--blue); color: var(--white); }

.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 24px;
  color: var(--mute);
  text-transform: none;
  letter-spacing: 0.08em;
}
.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--mute);
  text-decoration: none;
}
.site-footer a:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Top page: one screen ---------- */
/*
 * DOM order (also the phone order): logo, nav, lead, conversation, note, button, thesis, statement, footer.
 * Desktop: conversation on the left two thirds, a blue panel on the right third.
 */

.top {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr auto auto auto 1fr auto auto;
  grid-template-areas:
    "logo nav"
    "conv ."
    "conv lead"
    "conv thesis"
    "conv cta"
    "conv ."
    "note statement"
    "foot statement";
  min-height: 100vh;
  min-height: 100svh;
}

.panel-bg {
  grid-column: 2;
  grid-row: 1 / -1;
  background: var(--blue);
}

.top > .brand { grid-area: logo; margin: 24px 24px 0 var(--pad-x); }
.top > .site-nav { grid-area: nav; align-self: center; padding: 24px calc(var(--panel-pad) - 10px) 0 var(--panel-pad); margin-right: 0; }
.top > .lead-block { grid-area: lead; }
.top > .conv { grid-area: conv; }
.top > .conv-note { grid-area: note; }
.top > .cta { grid-area: cta; }
.top > .statement { grid-area: statement; }
.top > .thesis { grid-area: thesis; }
.top > .site-footer { grid-area: foot; }

/* Left column */
.top > .conv,
.top > .conv-note,
.top > .site-footer { margin-inline: var(--pad-x); }

/* Right column (on blue) */
.top > .lead-block,
.top > .cta,
.top > .statement,
.top > .thesis { padding-inline: var(--panel-pad); }

@media (min-width: 961px) {
  /* The conversation never sets the page height; it fills whatever the panel leaves. */
  .top > .conv { contain: size; }
  .top > .site-nav a { color: var(--white); }
  .top > .site-nav a:hover { color: var(--white); }
  .top > .statement,
  .top > .lead-block,
  .top > .thesis { color: var(--white); }
  .top > .lead-block .lead-en { color: var(--white); }
  .top > .cta .btn--primary { background: var(--white); color: var(--blue); border-color: var(--white); }
  .top > .cta .btn--primary:hover { background: var(--blue); color: var(--white); }
  .top > .statement { align-self: end; justify-self: end; }
  .top > .site-nav :focus-visible,
  .top > .cta :focus-visible { outline-color: var(--white); }
}

/* Conversation */

.conv {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-top: 16px;
}

.conv-view {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}
.conv-view.fade-top {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 44px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 44px);
}
.conv-view.fade-bottom {
  -webkit-mask-image: linear-gradient(to top, transparent 0, #000 44px);
  mask-image: linear-gradient(to top, transparent 0, #000 44px);
}
.conv-view.fade-top.fade-bottom {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%);
}
.conv-anim .conv-view { overflow: hidden; }

.conv-log {
  padding-bottom: 8px;
  transition: transform 0.8s cubic-bezier(0.3, 0.6, 0.2, 1);
}

.line {
  display: grid;
  grid-template-columns: var(--spk-w) minmax(0, 1fr);
  align-items: baseline;
  margin: 0 0 14px;
}

.spk {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  line-height: 1.8;
  color: var(--mute);
}

.utt {
  font-size: var(--fs-utt);
  line-height: 1.8;
  letter-spacing: 0.01em;
  color: var(--ink);
  line-break: strict;
  word-break: auto-phrase;
  text-wrap: pretty;
}

.line--ai .spk,
.line--ai .utt { color: var(--blue); }

/* Animation states (html.conv-anim is set in <head>; without JS every line is shown) */
.conv-anim .conv .line {
  opacity: 0;
  transition: opacity 0.6s ease;
}
.conv-anim .conv .line.is-shown { opacity: 1; }
.utt .rest { color: transparent; }

.conv-note {
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  color: var(--mute);
  letter-spacing: 0.06em;
  text-transform: none;
}

.top > .site-footer { padding: 4px 0 12px; }

/* Panel contents */

.statement { padding-top: 24px; padding-bottom: 28px; color: var(--blue); }
.statement-en {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: var(--fs-statement-en);
  line-height: 1.4;
}

/* Right panel text is set in a code font (2026-10-11 Ken) */
.lead {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-lead-ja);
  line-height: 1.5;
  letter-spacing: 0;
}
.lead span { display: inline-block; }
/* caret sits on the last word so it never wraps onto a line of its own */
.lead > span:last-child::after,
.lead:not(:has(> span))::after {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 1.05em;
  margin-left: 0.2em;
  vertical-align: -0.16em;
  background: currentColor;
  animation: caret-blink 1.1s steps(1) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }
.lead-en {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-lead-en);
  letter-spacing: 0.02em;
  line-height: 1.6;
  color: var(--blue);
}

.thesis { margin-top: 32px; }
.thesis-body { margin-top: 0; }
.thesis-body p {
  font-family: var(--font-mono);
  text-wrap: pretty;
  font-size: var(--fs-thesis);
  line-height: 1.9;
}
.byline {
  display: block;
  margin-top: 12px;
  text-transform: none;
  letter-spacing: 0.08em;
}

.cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 32px;
}
.top > .cta .btn { padding: 0 18px; font-size: 13.5px; }

/* ---------- Inner pages (Company) ---------- */

.site-header .brand { flex: 1 1 auto; }
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px var(--pad-x) 0;
}

.page {
  max-width: 1200px;
  padding: 48px var(--pad-x) 96px;
}

.page-title {
  margin-bottom: 48px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.4;
  color: var(--blue);
}

.block {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  column-gap: 48px;
  padding: 32px 0 36px;
  border-top: 1px solid var(--rule);
}
.block-label {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.8;
  letter-spacing: 0.06em;
  color: var(--blue);
}
.block-no {
  margin-right: 14px;
  color: var(--mute);
}
.block-body { max-width: 44em; }
.block-body p + p { margin-top: 10px; }

.facts > div {
  display: grid;
  grid-template-columns: 8em minmax(0, 1fr);
  column-gap: 24px;
  padding: 10px 0;
  border-top: 1px solid var(--rule);
}
.facts > div:first-child { border-top: 0; padding-top: 0; }
.facts dt {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 2.1;
  letter-spacing: 0.06em;
  color: var(--mute);
}
.facts dd { line-height: 1.8; }

.person-name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
}
.person-role {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--mute);
}

.block-action { margin-top: 24px; }

.email-copy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}
.block-body > * + .email-copy { margin-top: 20px; }
.note-line { margin-top: 12px; }
.email-copy .text-link { font-size: 17px; }
.copy-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--blue);
  border-radius: 0;
  background: var(--white);
  color: var(--blue);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0.06em;
  transition: background-color 0.2s, color 0.2s;
}
.copy-btn:hover { background: var(--blue); color: var(--white); }
.copy-btn[hidden] { display: none; }
.copy-status { color: var(--blue); text-transform: none; letter-spacing: 0.06em; }

.text-link {
  color: var(--blue);
  text-underline-offset: 4px;
}
.text-link:hover { text-decoration-thickness: 2px; }

.page-footer {
  justify-content: space-between;
  margin: 0 var(--pad-x);
  padding: 12px 0 16px;
  border-top: 1px solid var(--rule);
}

@media (max-width: 960px) {
  .site-header { align-items: flex-start; padding-top: 14px; }
  .site-header .site-nav { margin-top: 1px; }
  .site-header .site-nav { gap: 0; margin-right: -8px; font-size: 11px; }
  .site-header .site-nav a { padding: 0 8px; }
  .page { padding: 32px var(--pad-x) 64px; }
  .page-title { font-size: 22px; margin-bottom: 32px; }
  .block { grid-template-columns: 1fr; row-gap: 14px; padding: 24px 0 28px; }
  .facts > div { grid-template-columns: 1fr; padding: 10px 0; }
  .facts dt { line-height: 1.6; }
  .page-footer { justify-content: flex-start; }
  .block-action .btn { width: 100%; }
  .email-copy .text-link { font-size: 16px; }
}

/* ---------- Shorter desktop screens ---------- */

@media (min-width: 961px) and (max-height: 860px) {
  :root {
    --fs-utt: 19.5px;
    --logo-h: 68px;
    --fs-statement-en: 16px;
    --fs-lead-ja: 25px;
    --fs-thesis: 12.5px;
  }
  .line { margin-bottom: 12px; }
  .thesis { margin-top: 22px; }
  .thesis-body p { line-height: 1.8; }
  .top > .cta { padding-top: 22px; }
  .statement { padding-bottom: 20px; }
}

@media (min-width: 961px) and (max-width: 1180px) {
  .site-tagline { font-size: 15px; }
  :root { --panel-pad: 36px; --pad-x: 48px; --fs-utt: 19px; --fs-lead-ja: 24px; --fs-thesis: 12.5px; }
}

/* ---------- Tablet and phone ---------- */
/*
 * The whole page is blue; only the conversation window is white (2026-10-12 Ken).
 * First screen: logo + nav, tagline, headline, conversation window, note. Then thesis and statement.
 */

@media (max-width: 960px) {
  :root {
    --pad-x: 20px;
    --panel-pad: 20px;
    --logo-h: 46px;
    --fs-utt: 17px;
    --fs-statement-en: 16px;
    --fs-lead-ja: 21px;
    --fs-thesis: 13px;
    /* height of everything in the first screen except the conversation window */
    --fv-rest: 330px;
  }

  body.page-top { background: var(--blue); }
  .page-top :focus-visible { outline-color: var(--white); }
  .page-top .conv :focus-visible { outline-color: var(--blue); }

  .top {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto auto auto auto auto;
    grid-template-areas:
      "logo nav"
      "lead lead"
      "conv conv"
      "note note"
      "thesis thesis"
      "statement statement"
      "foot foot";
    height: auto;
    min-height: 0;
    background: var(--blue);
    color: var(--white);
  }
  .panel-bg { display: none; }

  /* logo row spans the full width so the tagline fits on one line; nav sits on top, right */
  .top > .brand { grid-column: 1 / -1; grid-row: 1; margin: 14px var(--pad-x) 0; }
  .top > .site-nav { grid-column: 2; grid-row: 1; align-self: start; padding: 15px calc(var(--pad-x) - 8px) 0 0; gap: 0; font-size: 11px; }
  .top > .site-nav a { padding: 0 8px; color: var(--white); }
  .top .site-logo { color: var(--white); }
  .brand { flex-wrap: wrap; align-items: flex-start; }
  .site-tagline {
    flex-basis: 100%;
    padding-top: 0;
    margin-top: -4px;
    font-size: clamp(11px, 3.4vw, 13px);
    white-space: nowrap;
    color: var(--white);
  }

  .top > .lead-block { margin-top: 0; padding-top: 18px; color: var(--white); }
  .top > .lead-block .lead-en { display: none; }

  /* the white window */
  .top > .conv {
    margin-top: 16px;
    padding: 12px 16px 4px;
    background: var(--white);
    color: var(--ink);
  }
  .conv-view {
    flex: none;
    height: clamp(260px, calc(100svh - var(--fv-rest)), 520px);
    overscroll-behavior: auto;
  }
  .line { grid-template-columns: 1fr; margin-bottom: 12px; }
  .spk { font-size: 10px; line-height: 1.5; }
  .utt { line-height: 1.7; word-break: normal; text-wrap: wrap; }
  .top > .conv-note { padding-top: 8px; border-top: 0; color: var(--white); }

  .top > .cta { display: none; }

  .top > .thesis { margin-top: 0; padding-top: 48px; color: var(--white); }
  .top > .thesis .thesis-body p { text-align: center; }
  .top > .statement { justify-self: end; padding-top: 40px; padding-bottom: 32px; color: var(--white); }
  .top > .site-footer { padding: 12px 0 20px; border-top: 1px solid var(--white); color: var(--white); }
  .top > .site-footer a { color: var(--white); }
}

@media (min-width: 600px) and (max-width: 960px) {
  .top > .conv, .top > .conv-note { max-width: 40em; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .conv-log, .line, .btn, .copy-btn { transition: none !important; }
  /* caret sits on the last word so it never wraps onto a line of its own */
.lead > span:last-child::after,
.lead:not(:has(> span))::after { animation: none; }
}