/* GGGO, good game go. la page est un goban : une grille de filets noirs, des cellules,
   quelques hoshi aux intersections. tout le reste est blanc et se tait. */

:root {
  --bg: #FFFFFF;
  --ink: #171512;
  --fricotte-red: #C8102E;
  --line: 1px;
  --pad: 1.25rem;
  --measure: 34em;              /* moins de 80 caractères par ligne */
}

* { box-sizing: border-box; }

html {
  background: var(--bg);
  color: var(--ink);
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

@media (min-width: 56em) {
  html { font-size: 18px; }
}

body {
  margin: 0;
  padding: var(--pad);
  background: var(--bg);
}

@media (min-width: 56em) {
  body { padding: 2rem; }
}

h1, h2, p, ul, figure { margin: 0; }
p + p { margin-top: 0.75em; }

a {
  color: var(--fricotte-red);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* le goban : les filets sont le fond du conteneur, visibles dans les 1px d'écart entre cellules */
.board {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--line);
  background: var(--ink);
  border: var(--line) solid var(--ink);
  max-width: 88rem;
  margin: 0 auto;
}

.cell {
  position: relative;
  background: var(--bg);
  grid-column: span 12;
  padding: var(--pad);
}

.cell.photo { padding: 0; }

/* hoshi : le point d'une intersection. le seul ornement de la page. */
.hoshi::before, .hoshi-desk::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0; left: 0;
  width: 0.55rem;
  height: 0.55rem;
  margin: -0.3rem 0 0 -0.3rem;
  background: var(--ink);
  border-radius: 50%;
}
.hoshi-desk::before { display: none; }

/* en-tête : le nom en clair, l'instagram */
.head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; }
.head .wordmark { font-weight: 500; }
.head .insta { text-align: right; }

/* le logo et les trois faits. la seule chose grande de la page. */
.logo img {
  display: block;
  width: min(100%, 18rem);
  height: auto;
}

.lead { margin-top: 1.75rem; }

.facts {
  margin-top: 0.5rem;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.25;
  text-wrap: balance;
}
.facts a { font-weight: 700; }

@media (min-width: 56em) {
  .logo img { width: min(100%, 22rem); }
  .facts { font-size: 1.85rem; }
}

/* sections : la hiérarchie vient de l'espace, pas de la taille */
h2 {
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.35;
  margin-bottom: 0.9rem;
}

.text > * { max-width: var(--measure); }
.text .welcome { font-weight: 500; }

/* photos : brutes, à bord perdu dans leur cellule */
.photo figure {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
}
.photo.square figure { aspect-ratio: 1 / 1; }
.photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* la rangée de trois : trois cases côte à côte, même sur mobile, comme trois cases du goban */
.cell.third { grid-column: span 4; }

/* pied de page */
.foot { font-size: 0.95rem; }
.foot ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
.foot .colophon { margin-top: 0.5rem; }
.sep { margin: 0 0.4em; }

[lang="ja"] {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
}

/* à partir de 56em, le goban prend ses colonnes */
@media (min-width: 56em) {
  .cell { padding: 1.75rem; }
  .cell.photo { padding: 0; }

  .cell.half   { grid-column: span 6; }
  .cell.five   { grid-column: span 5; }
  .cell.seven  { grid-column: span 7; }
  .cell.third  { grid-column: span 4; }
  .cell.full   { grid-column: span 12; }

  .photo figure { aspect-ratio: auto; min-height: 26rem; }
  .photo.square figure { aspect-ratio: 1 / 1; min-height: 0; }

  .hoshi-desk::before { display: block; }

  .head { min-height: 0; }
}