/*
  Studio Taira — site styles
  Built to Brand guidelines v1.0 (September 2026). Page references in comments.
*/

/* Typefaces (p.13). Self-hosted from Google Fonts, Latin subsets only. */
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url(/fonts/jost-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url(/fonts/jost-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/newsreader-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/newsreader-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/plex-mono-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/plex-mono-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Noto Serif JP, subset to 平 only. Add characters by regenerating this file. */
@font-face {
  font-family: "Noto Serif JP";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(/fonts/noto-serif-jp-subset.woff2) format("woff2");
}

/* Palette (p.15) */
:root {
  --washi: #F2F0EB;
  --sumi: #0C0C0D;
  --shu: #BF3620; /* the seal only: never text, never a ground */
  --ai: #22304A;
  --ash: #6F6B64;
  --fog: #DAD6CE;

  /* Secondary text and rules on dark grounds, held at 4.5:1 or better (p.16) */
  --ash-on-sumi: #A09D97;
  --rule-on-sumi: #3A3936;
  --ash-on-ai: #B8BABE;
  --rule-on-ai: #4C566A;

  --f-head: "Jost", "Futura", "Avenir Next", system-ui, sans-serif;
  --f-body: "Newsreader", "Iowan Old Style", Georgia, serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --f-jp: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;

  /* Grid (p.19): twelve columns, 64 px margins and 24 px gutters at 1440 */
  --max: 1440px;
  --margin: 64px;
  --gutter: 24px;
  --section: 112px;
}

/* Grounds. Most of the page is Washi; Sumi for the cover and footer; Ai for one callout (p.16). */
.on-washi { --bg: var(--washi); --ink: var(--sumi);  --ink-2: var(--ash);         --rule: var(--fog); }
.on-sumi  { --bg: var(--sumi);  --ink: var(--washi); --ink-2: var(--ash-on-sumi); --rule: var(--rule-on-sumi); }
.on-ai    { --bg: var(--ai);    --ink: var(--washi); --ink-2: var(--ash-on-ai);   --rule: var(--rule-on-ai); }
.on-washi, .on-sumi, .on-ai { background: var(--bg); color: var(--ink); }

/* Dark mode inverts ground and text; the seal switches colourway with them. Shu stays Shu. (p.22) */
@media (prefers-color-scheme: dark) {
  .on-washi { --bg: var(--sumi); --ink: var(--washi); --ink-2: var(--ash-on-sumi); --rule: var(--rule-on-sumi); }
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--sumi);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 1.0625rem; /* 17 / 26 */
  line-height: 1.53;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, p, ol, ul, figure, address { margin: 0; }
ol, ul { padding: 0; list-style: none; }
address { font-style: normal; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

/* Type scale (p.14). Sentence case throughout; capitals belong to the wordmark alone. */
.t-display {
  font-family: var(--f-head);
  font-weight: 300;
  font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem); /* 56 / 60 */
  line-height: 1.07;
  letter-spacing: -0.01em;
}
.t-h1 {
  font-family: var(--f-head);
  font-weight: 300;
  font-size: clamp(1.875rem, 1.35rem + 1.5vw, 2.5rem); /* 40 / 46 */
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.t-h2 {
  font-family: var(--f-head);
  font-weight: 400;
  font-size: clamp(1.375rem, 1.2rem + 0.45vw, 1.625rem); /* 26 / 32 */
  line-height: 1.23;
  letter-spacing: -0.01em;
}
.t-label {
  font-family: var(--f-head);
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.4;
}
.t-small { font-size: 0.875rem; line-height: 1.43; } /* 14 / 20 */
.t-data {
  font-family: var(--f-mono);
  font-size: 0.8125rem; /* 13 / 18 */
  line-height: 1.38;
  font-variant-numeric: tabular-nums;
}
.t-display, .t-h1, .t-h2 { text-wrap: balance; }
p { text-wrap: pretty; }
.ink-2 { color: var(--ink-2); }
.jp { font-family: var(--f-jp); }

/* Layout */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--margin);
}
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
}

/* The level rule: one hairline, full measure between margins, never boxed or doubled (p.17) */
.rule {
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--rule);
}

.skip {
  position: absolute;
  top: 12px;
  left: var(--margin);
  z-index: 10;
  padding: 8px 12px;
  background: var(--washi);
  color: var(--sumi);
  font-family: var(--f-head);
  font-size: 0.9375rem;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* Cover: Sumi, the horizontal lockup in navigation, the kanji motif, title below the level rule */
.cover {
  position: relative;
  display: flex;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
}
.cover__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}
.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 40px;
  padding-block: 28px 24px;
}
.lockup { display: block; flex: none; }
.lockup img { width: auto; height: 52px; } /* horizontal lockup; screen minimum is 24 px (p.10) */
.nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
}
.nav a {
  display: inline-block;
  padding-block: 6px;
  color: var(--ink-2);
  text-decoration: none;
}
.nav a:hover { color: var(--ink); }

.cover__foot {
  margin-top: auto;
  padding-top: 200px;
  padding-bottom: 72px;
}
.cover__text {
  align-items: start;
  row-gap: 28px;
  padding-top: 32px;
}
.cover__title { grid-column: 1 / span 7; }
.cover__lead { grid-column: 9 / span 4; padding-top: 6px; }
.cover__lead p + p { margin-top: 20px; }

/* 平 at very large scale, eight per cent of the text colour, bleeding off one edge. One instance only. (p.18) */
.motif {
  position: absolute;
  top: 50%;
  right: -0.14em;
  z-index: 0;
  font-family: var(--f-jp);
  font-size: min(92vh, 110vw);
  font-size: min(92svh, 110vw);
  line-height: 1;
  color: rgb(242 240 235 / 0.08);
  color: color-mix(in srgb, var(--ink) 8%, var(--bg));
  transform: translateY(-50%);
  pointer-events: none;
  user-select: none;
}

/* Interior sections: two columns of text on the left, one showcase on the right (p.19) */
.section { padding-block: var(--section); }
.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gutter);
  padding-bottom: 24px;
}
.section__body {
  align-items: start;
  row-gap: 56px;
  padding-top: 56px;
}
.col-text { grid-column: 1 / span 5; }
.col-show { grid-column: 7 / span 6; }
.prose p + p { margin-top: 0.9em; }

/* What we do: an index in the manner of the contents page (p.2) */
.index > li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  column-gap: var(--gutter);
  align-items: baseline;
  padding-block: 24px;
  border-top: 1px solid var(--rule);
}
.index > li:first-child { padding-top: 0; border-top: 0; }
.index > li:last-child { padding-bottom: 0; }
.index h3 + p { margin-top: 8px; }

/* How we work: the engagement, figures in Plex Mono so columns align (p.14) */
.phases__head,
.phases > li {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr) 8.5rem;
  column-gap: var(--gutter);
  align-items: baseline;
}
.phases__head {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}
.phases > li {
  padding-block: 24px;
  border-bottom: 1px solid var(--rule);
}
.phases > li:last-child { border-bottom: 0; padding-bottom: 0; }
.phases h3 + p { margin-top: 8px; }
.phase__milestone { text-align: right; }
.sr-only,
.phase__unit {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.note { margin-top: 28px; }

/* About: the Ai callout */
.about__intro { grid-column: 7 / span 6; font-weight: 300; }
.principles {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 40px;
}
.principles > li {
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}
.principles h3 + p { margin-top: 12px; max-width: 30em; }

/* Contact and the sign-off. The Shu seal is used once, to the right of the signature (p.11) */
.contact__message { grid-column: 1 / span 5; grid-row: 1; }
.contact__details { grid-column: 7 / span 6; grid-row: 1 / span 2; }
.field + .field { margin-top: 36px; }
.field__label { margin-bottom: 8px; }
.email {
  font-family: var(--f-head);
  font-weight: 300;
  font-size: clamp(1.375rem, 1.05rem + 1vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--rule);
  text-underline-offset: 0.22em;
}
.email:hover { text-decoration-color: currentColor; }
.signoff {
  grid-column: 1 / span 5;
  grid-row: 2;
  align-self: end;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.signoff__name { font-family: var(--f-head); font-weight: 500; font-size: 1rem; line-height: 1.4; }
.signoff__role { margin-top: 2px; }
.seal {
  flex: none;
  width: 84px;
  height: 84px;
}

/* Footer */
.footer { padding-block: 28px 32px; }
.footer__rule { display: none; margin-bottom: 28px; }
@media (prefers-color-scheme: dark) {
  .footer { padding-top: 0; }
  .footer__rule { display: block; }
}
.footer__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
}

/* Error page */
.plain { min-height: 100vh; min-height: 100svh; }
.plain .masthead { padding-block: 28px 24px; }
.plain__body { padding-block: 96px; max-width: 36em; }
.plain__body p { margin-top: 20px; }
.plain__body a {
  text-decoration-thickness: 1px;
  text-decoration-color: var(--rule);
  text-underline-offset: 0.22em;
}
.plain__body a:hover { text-decoration-color: currentColor; }

/* Tablet */
@media (max-width: 1200px) {
  :root { --margin: 48px; --section: 104px; }
  .cover__title { grid-column: 1 / span 8; }
  .cover__lead { grid-column: 9 / span 4; }
  .col-text { grid-column: 1 / span 5; }
  .col-show { grid-column: 7 / span 6; }
}

@media (max-width: 960px) {
  :root { --margin: 32px; --gutter: 20px; --section: 88px; }
  .cover__title, .cover__lead,
  .col-text, .col-show, .about__intro,
  .contact__message, .contact__details, .signoff { grid-column: 1 / -1; grid-row: auto; }
  .signoff { max-width: 36em; }
  .cover__lead { max-width: 34em; }
  .col-text { max-width: 36em; }
  .principles { grid-template-columns: minmax(0, 1fr); }
}

/* Phone */
@media (max-width: 600px) {
  :root { --margin: 20px; --gutter: 16px; --section: 72px; }
  .masthead { padding-block: 20px 18px; }
  .lockup img { height: 44px; }
  .nav ul { gap: 6px 20px; }
  .cover__foot { padding-top: 160px; padding-bottom: 48px; }
  .section__body { padding-top: 40px; row-gap: 48px; }
  .index > li { grid-template-columns: 2rem minmax(0, 1fr); }
  .phases__head { display: none; }
  .phase__unit { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .phases > li {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 10px;
  }
  .phases > li:first-child { padding-top: 0; }
  .phase__body { grid-column: 1 / -1; grid-row: 2; }
  .seal { width: 72px; height: 72px; }
}