/* initie — www.initie.tokyo
   A sheet of paper with a few well-placed words.
   Typefaces (Adobe Fonts kit ocn6fnr): FOT-Cezanne ProN M (Japanese), Manifold Extended CF (Latin).
   Palette: paper / ink / quiet / hair. Nothing else. */

:root {
  --paper: #fcfcfa;
  --ink: #1a1a1a;
  --quiet: #6b6b6b;
  --hair: #e8e8e4;
  --line: #c9c9c4;

  --jp: "fot-cezanne-pron", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  --lat: "manifold-extd-cf", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --measure: 38em;                          /* text block width (JP: ~38 full-width chars) */
  --margin: clamp(24px, 6vw, 96px);         /* outer page margin: header, footer, rail */
  --rail: 8rem;                             /* running-head column (≥1024) */
  --gutter: 3rem;                           /* rail → text block */
  --interval: clamp(112px, 22vh, 256px);    /* breath between sections */
  --beat: 2.5rem;                           /* title → content */
}

/* ---------- paper ---------- */

html {
  color-scheme: light;
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--jp);
  font-weight: 500;
  font-size: 16px;
  line-height: 2;
  color: var(--ink);
  background: var(--paper);
  font-kerning: normal;
  font-synthesis: none;
  text-align: left;
  text-wrap: pretty;
  hanging-punctuation: allow-end;
  line-break: strict;
  word-break: normal;
  overflow-wrap: anywhere;
}

html:lang(en) { --measure: 33em; }              /* ≈ 66 Latin characters */
html:lang(en) body { line-height: 1.8; }

/* fonts arrive, then the page */
html.wf-loading body { opacity: 0; }
html.wf-active body,
html.wf-inactive body { opacity: 1; transition: opacity .35s ease-out; }
@media (prefers-reduced-motion: reduce) { body { transition: none !important; } }

::selection { background: #e3e1d9; }

* { box-sizing: border-box; }
h1, h2, h3, p, dl, dd, figure { margin: 0; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

/* ---------- voices ---------- */

.lat { font-family: var(--lat); font-weight: 400; }

.label {
  font-family: var(--lat);
  font-weight: 400;
  font-size: 11px;
  line-height: 2;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--quiet);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: -999px;
  top: 1rem;
  font-family: var(--lat);
  font-size: 12px;
  padding: .25rem .5rem;
  background: var(--paper);
}
.skip:focus { left: var(--margin); }

/* ---------- frame: header + footer sit on the outer margins ---------- */

.frame {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 2rem var(--margin);
}

.mark {
  display: inline-block;
  font-family: var(--lat);
  font-weight: 400;
  font-size: 19px;
  line-height: 1;
  letter-spacing: .02em;
  padding: .4em 0;
  margin: -.4em 0;                          /* hit area without moving the baseline */
}

.lang {
  font-family: var(--lat);
  font-weight: 400;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .22em;
  color: var(--quiet);
  padding: 1em 0 1em 1em;                  /* hit area ≈ 33px tall */
  margin: -1em -.22em -1em 0;              /* without moving the baseline; trailing tracking off the edge */
}
.lang:hover { color: var(--ink); }

footer.frame {
  padding-top: var(--interval);
  padding-bottom: clamp(96px, 20vh, 200px);
  font-family: var(--lat);
  font-weight: 400;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .12em;
  color: var(--quiet);
}
footer.frame .lang { margin-bottom: -1em; }
.sym { font-family: var(--jp); font-weight: 500; }  /* © — Manifold's is a box at this size */

/* ---------- text block ---------- */

main { padding-inline: var(--margin); }

.sec,
.hero {
  display: grid;
  grid-template-columns: minmax(0, var(--measure));
}

.sec { margin-top: var(--interval); }

.sec > h2 {
  font-weight: 500;
  font-size: clamp(22px, 1.7vw, 24px);
  line-height: 1.6;
  letter-spacing: .01em;
  font-feature-settings: "palt";
}
.sec > h2 .label { display: block; margin-bottom: .25rem; font-feature-settings: normal; }
html:lang(en) .sec > h2 .title {
  font-family: var(--lat);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0;
}

.sec > h2 + * { margin-top: var(--beat); }

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

.hero { padding-top: clamp(5rem, 20vh, 11rem); }

.tagline {
  font-weight: 500;
  font-size: clamp(26px, 6.4vw, 40px);
  line-height: 1.5;
  letter-spacing: -.02em;
  margin-left: -.02em;                     /* glyph edge on the column edge */
  font-feature-settings: "palt";
}
.tagline span { display: block; }

html:lang(en) .tagline {
  font-family: var(--lat);
  font-weight: 400;
  font-size: clamp(24px, 4.2vw, 38px);
  line-height: 1.3;
  letter-spacing: -.01em;
  margin-left: -.04em;
  font-feature-settings: normal;
}

.lead { margin-top: 2rem; max-width: 30em; text-wrap: balance; }

/* Japanese: break short blocks at phrase boundaries where the engine can (Chromium) */
html:lang(ja) .tagline,
html:lang(ja) .lead,
html:lang(ja) .note { word-break: auto-phrase; }
.nb { white-space: nowrap; }
@media (max-width: 767px) { html:lang(ja) .unit h3 + p { word-break: auto-phrase; } }

/* ---------- origin: three senses as dictionary rows ---------- */

.senses { display: grid; row-gap: 1rem; }
.senses > div { display: grid; row-gap: .125rem; }
.senses dd { word-break: keep-all; overflow-wrap: normal; text-wrap: pretty; }
.senses dt {
  font-family: var(--lat);
  font-weight: 400;
  font-size: 11px;
  line-height: 2;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.senses dt:lang(ja) {
  font-family: var(--jp);
  font-weight: 500;
  font-size: 13.5px;
  letter-spacing: .12em;
  text-transform: none;
}

/* ---------- services: three units ---------- */

.unit { display: grid; row-gap: .25rem; }
.unit + .unit { margin-top: 3.5rem; }

.tag {
  font-family: var(--lat);
  font-weight: 400;
  font-size: 11px;
  line-height: 2;
  letter-spacing: .12em;
  color: var(--quiet);
  white-space: nowrap;
}

.unit h3 {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.7;
  letter-spacing: .01em;
  font-feature-settings: "palt";
}
html:lang(en) .unit h3 {
  font-family: var(--lat);
  font-weight: 400;
  font-size: 17px;
  letter-spacing: 0;
  font-feature-settings: normal;
}
.unit h3 + p { margin-top: .5rem; }

details { margin-top: .75rem; }
summary {
  display: block;
  width: fit-content;
  list-style: none;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.8;
  padding: .4rem 0;
  color: var(--quiet);
}
summary::-webkit-details-marker { display: none; }
summary::marker { content: ""; }
summary > span { border-bottom: 1px solid var(--line); }
summary:hover { color: var(--ink); }
details[open] > summary .open { display: none; }
details:not([open]) > summary .close { display: none; }
.more { padding: .5rem 0 .25rem; }
.more p + p { margin-top: 1rem; }
.more p { font-size: 15px; line-height: 2; }
html:lang(en) .more p { line-height: 1.8; }

/* ---------- operator ---------- */

.name {
  margin-top: 2rem;
  font-family: var(--lat);
  font-weight: 400;
  font-size: 15px;
  line-height: 2;
  letter-spacing: .04em;
}
.role {
  font-family: var(--lat);
  font-weight: 400;
  font-size: 12px;
  line-height: 2;
  letter-spacing: .04em;
  color: var(--quiet);
}
.creds {
  margin-top: .5rem;
  font-size: 13.5px;
  line-height: 2;
  color: var(--quiet);
}
.creds span { white-space: nowrap; }
html:lang(en) .creds span { white-space: normal; }

/* ---------- profile: the colophon ---------- */

.registry {
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  padding: .75rem 0;
}
.registry > div {
  display: grid;
  grid-template-columns: 7em minmax(0, 1fr);
  column-gap: 1rem;
  align-items: baseline;
  line-height: 30px;
}
.registry dt { font-size: 13.5px; color: var(--quiet); }
.registry dd { font-size: 15px; }
.registry dd.lat { font-size: 13.5px; letter-spacing: .04em; }

/* ---------- contact ---------- */

.email a {
  display: inline-block;
  font-family: var(--lat);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.4;
  letter-spacing: -.01em;
  margin-left: -.03em;
  padding: .2em 0;
}
.email a {
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-decoration-thickness: 1px;
  text-underline-offset: .16em;
}
.email a:hover { color: var(--quiet); }
.note { margin-top: 1.25rem; font-size: 13.5px; line-height: 2; color: var(--quiet); max-width: 32em; text-wrap: balance; }
html:lang(en) .note { line-height: 1.8; }

/* ---------- ≥768: two-column rows ---------- */

@media (min-width: 768px) {
  .senses > div {
    grid-template-columns: 9em minmax(0, 1fr);
    column-gap: 1rem;
    align-items: baseline;
  }
  .unit {
    grid-template-columns: 9em minmax(0, 1fr);
    column-gap: 1rem;
    row-gap: 0;
    align-items: baseline;                   /* tag sits on the h3 baseline */
  }
  .unit > .body { min-width: 0; }
}

/* ---------- ≥1024: the book opening — rail + text block, hanging-scroll tagline ---------- */

@media (min-width: 1024px) {
  main { padding-inline: var(--margin); }

  .sec,
  .hero {
    grid-template-columns: var(--rail) minmax(0, var(--measure));
    column-gap: var(--gutter);
  }
  .sec > * { grid-column: 2; }
  .sec > h2 {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    align-items: baseline;
  }
  .sec > h2 .label { grid-column: 1; margin: 0; }
  .sec > h2 .title { grid-column: 2; }

  .hero > * { grid-column: 2; justify-self: start; }
  .hero { padding-top: clamp(3rem, 10vh, 7rem); }

  html:lang(ja) .tagline {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: clamp(30px, 2.9vw, 42px);
    line-height: 1.7;                        /* column interval */
    letter-spacing: .1em;
    margin-left: -.35em;                     /* half-leading: glyph edge meets the column edge */
    inline-size: max-content;
    max-block-size: none;
    font-feature-settings: normal;           /* full-width rhythm in vertical */
    hanging-punctuation: none;
  }
  html:lang(ja) .tagline span { display: block; }

  html:lang(ja) .lead { margin-top: 3.5rem; }
  html:lang(en) .lead { margin-top: 2.5rem; }
}

/* ---------- 404 ---------- */

.missing,
html:lang(ja) .missing {
  writing-mode: horizontal-tb;
  font-size: clamp(22px, 2.4vw, 28px);
  letter-spacing: .01em;
  margin-left: 0;
  inline-size: auto;
}
.missing-en { font-family: var(--lat); font-weight: 400; font-size: .8em; color: var(--quiet); }
.missing-links a { border-bottom: 1px solid var(--line); }
.missing-links span { color: var(--quiet); }

/* ---------- print ---------- */

@media print {
  html, body { background: #fff; }
  body { opacity: 1 !important; color: #000; }
  .skip, .lang, summary { display: none; }
  details::details-content { content-visibility: visible; }
  details > .more { display: block; }
  .sec { margin-top: 18mm; break-inside: avoid; }
  html:lang(ja) .tagline { writing-mode: horizontal-tb; }
}