/* Follows the LONESOME proposal: near-black page, white Mincho text, blue bold headings, italic Didot-style English. */
/* Self-hosted subsets holding only the characters on this page. After changing text, run tools/build_fonts.py. */
@font-face { font-family: "Noto Serif JP"; src: url("fonts/NotoSerifJP-400.woff2?v=1") format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "Noto Serif JP"; src: url("fonts/NotoSerifJP-700.woff2?v=1") format("woff2"); font-weight: 700; font-display: block; }
@font-face { font-family: "Bodoni Moda"; src: url("fonts/BodoniModa-500.woff2?v=1") format("woff2"); font-weight: 500; font-display: block; }
@font-face { font-family: "Bodoni Moda"; src: url("fonts/BodoniModa-400-italic.woff2?v=1") format("woff2"); font-weight: 400; font-style: italic; font-display: block; }
/* hidden until the web fonts are ready (see the script in index.html), then shown at once */
html.fonts-loading body { visibility: hidden; }
html { background: #231f20; } /* so the page stays dark, not white, while hidden */

:root {
  --bg: #231f20;
  --fg: #fff;
  --blue: #378fce;
  --side: 24px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Noto Serif JP", serif;
  font-size: 14px;
  line-height: 2.1;
  letter-spacing: 0.06em;
  line-break: strict; /* no small kana (ィ ッ ー) at the start of a line */
  word-break: auto-phrase; /* break Japanese between words and phrases, not inside them (カメラマ/ン) */
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.4); }
a:hover { color: var(--blue); border-color: var(--blue); }

main { max-width: calc(860px + 2 * var(--side)); margin: 0 auto; padding: 96px var(--side) 0; }

/* Title block, like the proposal cover */
.title { container-type: inline-size; }
.title h1 {
  margin: 4px 0 6px;
  font-family: "Bodoni Moda", serif;
  font-weight: 500;
  /* sized so the name runs the full width of the text column */
  font-size: calc(100cqw / 8.35);
  white-space: nowrap;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--blue);
}
.title p { margin: 0; }
.it, figcaption {
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  letter-spacing: 0.02em;
}
.title .ja { font-size: 13px; }

section { margin-top: 88px; }

h2 {
  margin: 0 0 18px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
  color: var(--blue);
}
h3 { margin: 28px 0 0; font-size: 14px; font-weight: 400; }
p { margin: 0; }

.profile {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 40px;
  align-items: start;
}
figure { margin: 6px 0 0; }
figure img { display: block; width: 100%; height: auto; }
figcaption { margin-top: 8px; text-align: right; }

.en { margin-top: 36px; font-size: 13px; line-height: 1.9; letter-spacing: 0.01em; color: rgba(255, 255, 255, 0.72); }
.en h3 { margin-top: 16px; }
/* Film lists sit a step smaller than the bio text */
.profile h3 { font-size: 13px; }
.profile h3 + p { font-size: 12px; line-height: 1.95; }
.en h3 { font-size: 12px; }
.en h3 + p { font-size: 11.5px; }
/* Film lists: titles in one column, details in the next, so the brackets line up and wrapped lines stay under them */
.films { display: grid; grid-template-columns: auto 1fr; column-gap: 0; }
.films span:nth-child(odd) { white-space: nowrap; }
.dash { column-gap: 0.5em; }
.profile p { text-align: justify; text-align-last: left; text-justify: inter-character; }
.profile h3 + p { text-align: left; } /* film lists: plain lines, no stretched spacing */
.en p { text-justify: auto; hyphens: auto; }

/* Contact: two entries side by side, divided by a hairline, labels in blue italic like the proposal */
.contact {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Instagram and mail take half each */
  margin: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
.contact > div { position: relative; padding: 26px 24px; text-align: center; transition: background 0.3s ease; }
.contact > div:hover { background: rgba(255, 255, 255, 0.04); }
/* the whole half is the link, not just the text */
.contact a::after { content: ""; position: absolute; inset: 0; }
.contact > div:hover dt { color: var(--fg); }
.contact > div + div { border-left: 1px solid rgba(255, 255, 255, 0.25); }
.contact dt {
  margin: 0 0 4px;
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--blue);
}
.contact dd { margin: 0; font-size: 14px; letter-spacing: 0.01em; white-space: nowrap; }
.contact a { border-bottom: 0; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.3s ease, color 0.3s ease; }
.contact a:hover { color: var(--blue); background-size: 100% 1px; }

footer {
  margin-top: 120px;
  padding-bottom: 48px;
  text-align: center;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--blue);
}

@media (max-width: 640px) {
  :root { --side: 20px; }
  body { line-height: 1.95; letter-spacing: 0.04em; }
  main { padding-top: 48px; }

  section { margin-top: 56px; }
  h2 { font-size: 21px; margin-bottom: 14px; }
  .profile { grid-template-columns: 1fr; gap: 28px; }
  .profile figure { order: -1; width: 72%; margin: 4px auto 8px; }
  .profile figcaption { text-align: right; }

  .contact { grid-template-columns: 1fr; }
  .contact > div { padding: 20px 0; }
  .contact > div + div { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.25); }
  .contact dd { font-size: 14px; white-space: normal; overflow-wrap: anywhere; }
}