/* 株式会社GOLBA — corporate site.

   Deliberately not the sales site's stylesheet. The two pages should read as
   the same company, not as the same page in another colour, so the shared
   things here are the ones worth sharing - the token block, the skip link,
   the single breakpoint, the reduced-motion rule - and nothing else.

   Two families do the work. Japanese display type is 明朝, which is what the
   editorial and exhibition typography this page is aiming at actually uses;
   everything functional - labels, navigation, body, buttons - is gothic.
   Both are system fonts: no webfont is loaded, which is why the page needs
   no font-src and costs no round trip.

   Colour is white, black and one 朱. The accent appears as a graphic mark
   and as large type; where it has to carry small text it uses the darker
   --accent-ink, which clears AA on this paper. */

:root {
  --paper: #f7f5f0;
  --paper-alt: #efebe2;         /* alternating bands, half a step down */
  --ink: #111214;
  --ink-soft: #4b4d52;
  /* The small English labels - eyebrow, 01 ABOUT, the fact keys - are the
     smallest type on the page, so they are held to 4.5:1 like any other
     text. At #7c7f86 they sat at 3.68 on paper and 3.37 on the alt band,
     which looked right and was not readable enough; this clears AA on both
     (5.04 and 4.63) and still reads as the quiet layer. */
  --ink-faint: #676a71;
  --rule: #d8d3c8;
  --rule-soft: #e6e2d8;

  /* 朱. Graphic marks and display type only - 3.68:1 on paper, which is
     enough for a 21px+ heading and a stroke, and not enough for body text. */
  --accent: #e8422a;
  /* The same red taken far enough down to carry small text: 5.19:1. */
  --accent-ink: #c22d18;

  --font-sans: system-ui, -apple-system, "Hiragino Kaku Gothic ProN",
               "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
  --font-serif: "Hiragino Mincho ProN", "Yu Mincho", YuMincho,
                "Noto Serif JP", "MS PMincho", serif;

  --wrap: 64rem;
  --pad: 1.5rem;
  --band: 4.5rem;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.9;
  overflow-wrap: anywhere;
}

a { color: inherit; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 0.65rem 1rem;
  z-index: 20;
}
.skip:focus { left: 0; }

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

/* --- header ------------------------------------------------------------- */

.head {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.head-in {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;   /* the privacy page carries no nav */
  gap: 0.5rem 1.5rem;
  padding-block: 1.1rem;
}
.wordmark {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.22em;
}
.wordmark a { text-decoration: none; }

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 1.25rem;
  margin-right: auto;
}
.nav a {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  color: var(--ink-soft);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--accent); }

.head-cta { margin: 0; }
.head-cta a {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
  white-space: nowrap;
}
.head-cta a:hover { color: var(--accent-ink); }

/* --- language switch ---------------------------------------------------- */
/* Two letters and a hairline. The current language is set solid and is not a
   link; the other one is. No flag - a flag names a country, and the language
   someone reads in is not the country they are in. Nothing here redirects:
   the switch is the only thing that changes the language, and it only does
   it when a person asks. */

.lang {
  margin: 0;
  display: flex;
  align-items: baseline;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  white-space: nowrap;
}
.lang a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.lang a:hover { color: var(--ink); border-bottom-color: var(--accent); }
.lang b { font-weight: 700; color: var(--ink); }
.lang-sep { color: var(--rule); padding-inline: 0.5em; }

/* --- hero --------------------------------------------------------------- */

.hero { padding: 3.5rem 0 3rem; }

.eyebrow {
  margin: 0 0 2rem;
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  color: var(--ink-faint);
}
.eyebrow .sep { color: var(--accent); padding-inline: 0.35em; }

h1 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(2.5rem, 11vw, 5.5rem);
  line-height: 1.22;
  letter-spacing: 0.01em;
  margin: 0 0 2rem;
}

.lede {
  margin: 0 0 1.5rem;
  max-width: 34rem;
  color: var(--ink-soft);
}
.lede br { display: none; }

.lede-strong {
  margin: 0 0 2.75rem;
  max-width: 34rem;
  font-weight: 700;
  line-height: 1.9;
}

/* The word pairs. Plain list until the script decides motion is welcome. */
.shift {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.1rem;
  border-left: 2px solid var(--accent);
  font-family: var(--font-serif);
  font-size: 1.35rem;
  line-height: 2;
}
.shift .arrow { color: var(--accent); padding-inline: 0.6em; }
.shift .to { color: var(--accent-ink); }

.shift[data-cycling] {
  position: relative;
  height: 3.2rem;
  line-height: 3.2rem;
  padding-bottom: 0;
}
/* Leaving is quicker than arriving. The two lines are different lengths and
   sit on top of each other, so a symmetric crossfade spends half a second
   showing both at once and reads as a rendering fault rather than a change. */
.shift[data-cycling] .shift-item {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(0.35em);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.shift[data-cycling] .shift-item.is-current {
  opacity: 1;
  transform: none;
  transition: opacity 0.55s ease 0.12s,
              transform 0.55s cubic-bezier(0.2, 0.6, 0.2, 1) 0.12s;
}

/* --- bands -------------------------------------------------------------- */

.band { padding: var(--band) 0; }
.band.alt { background: var(--paper-alt); }
.band + .band:not(.alt) { border-top: 1px solid var(--rule-soft); }

/* Exhibition wayfinding: a number, a word, a rule. */
.label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1.75rem;
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  color: var(--ink-faint);
}
.label b { color: var(--accent-ink); font-weight: 700; }
.label span { position: relative; padding-right: 0.5rem; }
.label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}

h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.7rem, 5.5vw, 2.5rem);
  line-height: 1.5;
  letter-spacing: 0.01em;
  margin: 0 0 1.75rem;
}

/* The English display heading is the one gothic moment at poster size. */
h2.h2-en {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(2rem, 9vw, 4rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.prose { max-width: 34rem; }
.prose p { margin: 0 0 1.2rem; color: var(--ink-soft); }
.prose p:last-child { margin-bottom: 0; }
.prose ul { margin: 0 0 1.2rem; padding-left: 1.2rem; color: var(--ink-soft); }
.prose li { margin-bottom: 0.35rem; }
.prose a { color: var(--accent-ink); }

/* The privacy page is prose under one heading; it borrows the band and the
   measure, not the hero's display size. */
.page-h {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.7rem, 5.5vw, 2.5rem);
  line-height: 1.5;
  margin: 0 0 1.75rem;
}

/* --- the figure in HOW WE WORK ------------------------------------------ */

.figure { margin: 0 0 2.5rem; }
.figure svg { width: 100%; max-width: 20rem; height: auto; display: block; }

/* Solid, and no stroke at all. An outlined square at type size is the shape
   a browser substitutes for a character it cannot draw, so an outline is the
   one thing these must not have - a pale fill inside a thin stroke still
   reads as the outline, which is what the first attempt at this fix did.
   Filled bars, two and a half times wider than they are tall, are marks
   somebody drew. */
.fig-repeat rect { fill: var(--ink-faint); stroke: none; }
.fig-arrow {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: square;
}
/* Hollow, and the only 朱 in the figure: the work is done, the judgement is
   the thing still open. */
.fig-one { fill: none; stroke: var(--accent); stroke-width: 3; }

.statement {
  margin: 2.75rem 0 0;
  font-weight: 800;
  font-size: clamp(1rem, 3.6vw, 1.5rem);
  line-height: 1.5;
  letter-spacing: 0.02em;
  border-top: 2px solid var(--ink);
  padding-top: 1.25rem;
}

/* --- service ------------------------------------------------------------ */

.card {
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 2rem 1.5rem;
  max-width: 40rem;
}
.card p { margin: 0 0 1.2rem; color: var(--ink-soft); }
.card-lead {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--ink) !important;
  line-height: 1.7;
}

.tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.75rem;
  padding: 0;
}
.tags li {
  border: 1px solid var(--accent);
  color: var(--accent-ink);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 0.25rem 0.7rem;
}

.go { margin: 0; }

.btn {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  padding: 0.85rem 1.6rem;
  transition: background-color 0.2s ease;
}
.btn:hover { background: var(--accent-ink); }
.btn-invert { background: var(--paper); color: var(--ink); }
.btn-invert:hover { background: var(--accent); color: var(--paper); }

/* --- our belief --------------------------------------------------------- */
/* The page's why. Larger than every other heading and smaller than the hero,
   because the hero says what the company does and this says what that is
   for - and prose rather than cards, because a company that has to itemise
   its beliefs does not have any. */

.belief-purpose h2 {
  font-size: clamp(1.9rem, 6vw, 2.75rem);
  line-height: 1.4;
  margin: 0 0 2rem;
}

.belief-body p { margin: 0 0 1.5rem; color: var(--ink-soft); }
/* The manifesto's line breaks are meaningful at a wide measure and only get
   in the way at a narrow one - the same rule the hero lede follows. */
.belief-body br { display: none; }

/* The two lines that carry the most and are read slowest. Selected through
   .belief-body so they outrank its paragraph colour rather than tie with it. */
.belief-body .belief-line,
.belief-body .belief-close {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  line-height: 1.9;
  color: var(--ink);
}
.belief-body .belief-line { margin-top: 2.25rem; }
.belief-body .belief-close {
  border-top: 1px solid var(--rule);
  padding-top: 1.25rem;
  margin-bottom: 0;
}

/* --- external profile --------------------------------------------------- */
/* One text link, in the company table's 代表者 row. A reference to a profile
   of the person - not an affiliation, and never a partner logo. */

.profile-link { display: block; margin-top: 0.35rem; }
.profile-link a {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
}

/* --- company ------------------------------------------------------------ */

.facts { margin: 0; }
.facts dt {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
  margin-top: 1.5rem;
}
.facts dt:first-of-type { margin-top: 0; }
.facts dd {
  margin: 0.3rem 0 0;
  line-height: 1.8;
}
.facts dd a { color: var(--accent-ink); }

/* --- final CTA ---------------------------------------------------------- */

.final {
  background: var(--ink);
  color: var(--paper);
  padding: var(--band) 0;
}
.final h2 { color: var(--paper); }
.final .prose p { color: #cfd0d3; }
.final .go { margin-top: 2.25rem; }
.final .fine {
  margin: 1.75rem 0 0;
  font-size: 0.82rem;
  color: #a6a8ad;
}
.final .fine a { color: var(--paper); }

/* --- footer ------------------------------------------------------------- */

.foot {
  border-top: 1px solid var(--rule);
  padding: 2.5rem 0;
}
.foot-mark {
  margin: 0 0 1.25rem;
  font-weight: 800;
  letter-spacing: 0.22em;
}
.foot-links p { margin: 0 0 0.4rem; font-size: 0.85rem; }
.foot-links .corp { color: var(--ink-soft); }
.foot .fine {
  margin: 1.5rem 0 0;
  font-size: 0.75rem;
  color: var(--ink-faint);
}

/* --- english ------------------------------------------------------------ */
/* The design is frozen and the English page uses it unchanged: same paper,
   same ink, same 朱, same bands, same figure, same order. What English needs
   is room, because a Latin line is longer than the Japanese it carries - so
   the display sizes come down one step and the company table's key column
   widens enough for "Representative Director" to sit on one line.
   Nothing here is a second design; it is the same design at English measure.

   overflow-wrap is the one inherited rule that has to change. `anywhere`
   exists for Japanese, which has no word spaces and would otherwise overflow;
   applied to English it breaks ordinary words mid-word for no reason. */

html[lang="en"] body { overflow-wrap: break-word; }

html[lang="en"] h1 { font-size: clamp(2.1rem, 8.4vw, 4.2rem); }
html[lang="en"] .belief-purpose h2 { font-size: clamp(1.7rem, 5vw, 2.3rem); }

/* --- reveal ------------------------------------------------------------- */
/* Armed by the script, and only for elements that are below the fold when it
   runs. Anything already on screen is never hidden, so there is no flash and
   the page is complete with JavaScript switched off. */

[data-reveal].armed {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 0.7s cubic-bezier(0.2, 0.6, 0.2, 1),
              transform 0.7s cubic-bezier(0.2, 0.6, 0.2, 1);
}
[data-reveal].armed.is-in { opacity: 1; transform: none; }

/* --- desktop ------------------------------------------------------------ */

@media (min-width: 48rem) {
  :root { --pad: 3rem; --band: 7rem; }

  body { font-size: 1.02rem; }

  .head-in { padding-block: 1.5rem; }
  .nav { gap: 1.75rem; padding-left: 1rem; }
  .nav a { font-size: 0.7rem; }

  .hero { padding: 6.5rem 0 5.5rem; }
  .lede br { display: inline; }
  .lede, .lede-strong { font-size: 1.05rem; }

  .shift { font-size: 1.7rem; padding-left: 1.5rem; }
  .shift[data-cycling] { height: 3.8rem; line-height: 3.8rem; }

  .label { margin-bottom: 2.5rem; }
  h2 { margin-bottom: 2.25rem; }

  /* Large enough on a wide viewport to be read as a figure rather than as a
     row of characters sitting in the text. */
  .figure svg { max-width: 26rem; }

  .card { padding: 3rem 2.75rem; }

  /* The purpose on the left, the manifesto on the right. The same two-column
     figure the page already uses, so the section reads as part of the set
     rather than as a statement pinned to the page. */
  .belief {
    display: grid;
    grid-template-columns: 24rem 1fr;
    gap: 3.5rem;
    align-items: start;
  }
  .belief-purpose h2 { margin-bottom: 0; }
  .belief-body { max-width: 34rem; }
  .belief-body br { display: inline; }

  .facts {
    display: grid;
    grid-template-columns: 9rem 1fr;
    column-gap: 2.5rem;
  }
  /* "Representative Director" is the longest key on either page and does not
     fit the Japanese column. One step wider, and only here. */
  html[lang="en"] .facts { grid-template-columns: 12rem 1fr; }
  .facts dt { margin-top: 0; padding-top: 1rem; border-top: 1px solid var(--rule); }
  .facts dd { margin: 0; padding-top: 1rem; border-top: 1px solid var(--rule); }
  .facts dt:first-of-type, .facts dd:first-of-type { border-top: 0; padding-top: 0; }

  .foot-in {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
  }
  .foot-mark { grid-column: 1; margin-bottom: 0; }
  .foot-links { grid-column: 2; grid-row: 1; text-align: right; }
  .foot .fine { grid-column: 1 / -1; }
}

/* --- motion off --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
  [data-reveal].armed { opacity: 1 !important; transform: none !important; }
  /* Belt and braces: the script already refuses to cycle, but if the
     preference changes after load the list falls back to showing all five. */
  .shift[data-cycling] { position: static; height: auto; line-height: 2; }
  .shift[data-cycling] .shift-item { position: static; opacity: 1; transform: none; }
}