/* Design plan 1 "Default map": the sky and gray floor of Unreal Engine's default level,
   which is also the background of Grayちゃん's character sheet. See design/design-plans.md. */

@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-expanded-latin.woff2") format("woff2");
  font-weight: 600 800;
  font-stretch: 125%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}

:root {
  /* Sampled from images/33204809024_9c28390e9f_b.jpg so the hero continues the drawing seamlessly. */
  --sky-top: #177edd;
  /* Stops measured every ~40px down the drawing (the sky is not a linear ramp); any drift shows as a seam around the figure. */
  --scene: linear-gradient(to bottom, #177edd 0 13.35%, #2085df 17.3%, #2a90e4 22%, #38a0e9 27.07%, #49b1ee 32.14%, #5cc3f6 37.08%, #6bd2fb 42.03%, #6dd4fd 44.05%, var(--floor) 44.3%);
  --floor: #666666;
  --suit: #e9ebee;
  --suit-line: #d3d7dc;
  --ink: #202327;
  --ink-soft: #565b62;
  --tie: #c8323b;
  --paper: #ffffff;

  --jp: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
  --latin: "Archivo", var(--jp);

  /* Type scale (×1.25): 16 / 20 / 25 / 31 / 39 / 61 */
  --step-1: 1.25rem;
  --step-2: 1.5625rem;
  --step-3: 1.953rem;
  --step-4: 2.441rem;
  --step-6: 3.815rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 400 1rem/1.85 var(--jp); }
img { max-width: 100%; height: auto; }
h1, h2, h3 { line-height: 1.4; font-weight: 700; }

a { color: inherit; text-decoration-line: underline; text-decoration-color: var(--sky-top); text-decoration-thickness: 2px; text-underline-offset: .2em; }
a:hover { color: var(--tie); text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid var(--tie); outline-offset: 2px; }

.wrap { max-width: 1080px; margin-inline: auto; padding-inline: 24px; }
.logotype-latin { font-family: var(--latin); font-stretch: 125%; font-weight: 800; letter-spacing: -.01em; }

/* Header */
.site-header { border-bottom: 1px solid var(--suit-line); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 32px; padding-block: 14px; }
.logotype { font-size: var(--step-2); font-weight: 700; text-decoration: none; line-height: 1.2; }
.site-nav { display: flex; flex-wrap: wrap; gap: 4px 24px; font-size: .9375rem; }
.site-nav a { text-decoration: none; padding-block: 6px; border-bottom: 3px solid transparent; }
.site-nav a[aria-current="page"] { border-bottom-color: var(--tie); }

/* The figure from the character sheet: x 0–560 of the 1024px image. Hides the outfit-detail inset
   (x 406–545, y 36–216) and its leader line to the head (x 350–405, y 120–142);
   the --scene sky behind them matches the drawing. */
.sheet-figure {
  position: relative;
  aspect-ratio: 560 / 809;
  overflow: hidden;
  clip-path: polygon(0 0, 62.86% 0, 62.86% 18.17%, 72.5% 15.57%, 72.5% 26.95%, 100% 26.95%, 100% 100%, 0 100%);
}
.sheet-figure img { position: absolute; inset: 0 auto auto 0; height: 100%; width: auto; max-width: none; }

/* Hero: sky above the horizon, floor below. The figure is the left half of the character sheet. */
.hero {
  --h: clamp(620px, 80svh, 680px); /* below 620px the text no longer fits on the floor */
  --horizon: 44.3%;
  color: #fff;
  background:
    var(--scene) top / 100% var(--h) no-repeat,
    var(--floor);
}
.hero :focus-visible { outline-color: #fff; }
.hero-inner { max-width: 1080px; margin-inline: auto; padding-inline: 24px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: var(--horizon) 1fr; height: var(--h); column-gap: 40px; }
.hero-figure { grid-column: 2; grid-row: 1 / 3; height: var(--h); }
.hero-text { grid-column: 1; grid-row: 2; align-self: center; padding-block: 24px; }
.hero-name { margin: 0; font-size: var(--step-6); line-height: 1.1; }
.hero-catch { margin: 12px 0 0; font-size: var(--step-1); font-weight: 700; }
.hero-lead { margin: 8px 0 24px; max-width: 34em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }

/* Beside the figure the text needs about 480px of width to fit on the floor; below that, stack. */
@media (max-width: 1040px) {
  .hero { --h: min(520px, 130vw); }
  .hero-inner { display: block; height: auto; padding-inline: 20px; }
  .hero-figure { margin-inline: auto; }
  .hero-text { padding-block: 28px 40px; }
  .hero-name { font-size: var(--step-4); }
}

/* Buttons */
.button { display: inline-block; padding: 10px 22px; border-radius: 4px; font-weight: 700; text-decoration: none; background: var(--ink); color: #fff; }
.button:hover { background: var(--tie); color: #fff; }
.hero .button { background: #fff; color: var(--ink); }
.hero .button:hover { background: var(--ink); color: #fff; }
.hero .button-quiet { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px #fff; }

/* Home sections */
.home-section { margin-top: 80px; padding-top: 24px; border-top: 1px solid var(--suit-line); }
.home-section h2 { margin: 0 0 24px; font-size: var(--step-3); }
.section-lead { margin: -8px 0 24px; max-width: 42em; color: var(--ink-soft); }
.more { margin: 20px 0 0; font-weight: 700; }
.fan-works p { max-width: 42em; }

/* Profile */
.profile-card { display: grid; grid-template-columns: 280px minmax(0, 1fr); /* 280px wide makes the figure as tall as the 8-row table */ gap: 32px; align-items: start; }
.profile-figure { background: var(--scene); }
.profile-table { margin: 0; border-top: 2px solid var(--ink); }
.profile-table div { display: grid; grid-template-columns: 7em 1fr; gap: 16px; padding: 10px 4px; border-bottom: 1px solid var(--suit-line); }
.profile-table dt { color: var(--ink-soft); }
.profile-table dd { margin: 0; font-weight: 700; }
@media (max-width: 760px) { .profile-card { grid-template-columns: 1fr; } .profile-figure { max-width: 320px; } }

/* Materials table */
.table-scroll { overflow-x: auto; }
.materials { width: 100%; border-collapse: collapse; border-top: 2px solid var(--ink); }
.materials th { text-align: left; font-size: .875rem; font-weight: 700; background: var(--suit); padding: 8px 12px; }
.materials td { vertical-align: top; padding: 16px 12px; border-bottom: 1px solid var(--suit-line); }
.materials td p { margin: 4px 0 0; font-size: .9375rem; }
.materials-type, .materials-by { white-space: nowrap; }
.materials-title { font-size: 1.0625rem; }
.materials-link { min-width: 10em; }
@media (max-width: 760px) {
  .materials thead { display: none; }
  .materials tr, .materials td { display: block; }
  .materials tr { padding: 16px 0; border-bottom: 1px solid var(--suit-line); }
  .materials td { padding: 2px 0; border: 0; }
  .materials-type { font-size: .875rem; color: var(--ink-soft); }
  .materials-by { font-size: .875rem; }
  .materials-link { padding-top: 8px !important; }
}

/* Timeline: rings mark each event on the line */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; display: grid; grid-template-columns: 8em 1fr; gap: 24px; padding: 0 0 32px; }
.timeline li::before { content: ""; position: absolute; left: calc(8em + 4px); top: 10px; bottom: 0; width: 2px; background: var(--suit-line); }
.timeline li:last-child::before { display: none; }
.timeline li::after { content: ""; position: absolute; left: 8em; top: 4px; width: 10px; height: 10px; border: 2px solid var(--floor); border-radius: 50%; background: var(--paper); }
.timeline-when { font-family: var(--latin); font-stretch: 125%; font-weight: 700; color: var(--ink-soft); white-space: nowrap; line-height: 1.5; }
.timeline-body { padding-left: 24px; }
.timeline-body h3 { margin: 0; font-size: var(--step-1); line-height: 1.5; }
.timeline-body p { margin: 4px 0 0; max-width: 40em; }
.timeline-by { color: var(--ink-soft); font-size: .9375rem; }
.timeline-body a { display: inline-block; margin-top: 6px; font-weight: 700; }
@media (max-width: 760px) {
  .timeline li { grid-template-columns: 1fr; gap: 0; padding-left: 28px; }
  .timeline li::before { left: 6px; }
  .timeline li::after { left: 0; }
  .timeline-body { padding-left: 0; }
}

/* News list */
.news-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.news-item { display: flex; flex-wrap: wrap; gap: 4px 24px; padding: 12px 4px; border-bottom: 1px solid var(--suit-line); }
.news-item time { font-family: var(--latin); font-stretch: 125%; font-weight: 600; font-size: .875rem; color: var(--ink-soft); min-width: 7.5em; line-height: 1.85rem; }
.news-item a { text-decoration: none; }
.news-item a:hover { text-decoration: underline; }

/* Content pages */
.page { max-width: calc(42em + 48px); padding-top: 48px; }
.page-wide { max-width: 1080px; }
.page-header { margin-bottom: 40px; }
.page-header h1 { margin: 0; font-size: var(--step-4); }
.page-header time { font-family: var(--latin); font-stretch: 125%; font-weight: 600; color: var(--ink-soft); }
.page-parent { margin: 0 0 4px; font-weight: 700; }
.page-lead { margin: 12px 0 0; color: var(--ink-soft); max-width: 42em; }

.prose { max-width: 42em; }
.prose h1 { font-size: var(--step-3); margin: 2em 0 .6em; }
.prose h2 { font-size: var(--step-2); margin: 2em 0 .6em; padding-top: 16px; border-top: 1px solid var(--suit-line); }
.prose h3 { font-size: var(--step-1); margin: 1.6em 0 .4em; }
.prose img { display: block; margin: 1em 0; max-height: 85vh; border: 1px solid var(--suit-line); }
.prose blockquote { margin: 1.5em 0; padding: 12px 20px; background: var(--suit); border-left: 3px solid var(--suit-line); }
.prose blockquote p { margin: .3em 0; }
.prose iframe { max-width: 100%; }
.prose .profile-card { margin: 32px 0; }
.prose .sheet-figure img { margin: 0; max-height: none; border: 0; }
.page .timeline { margin-top: 8px; }

.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.gallery p { margin: 0; }
.gallery img { margin: 0; width: 100%; max-height: none; }

/* Notes on dead external links */
.note { margin: 8px 0 0; padding: 8px 12px; font-size: .875rem; background: #fbf1f1; border-left: 3px solid var(--tie); }
.note::before { content: "※ "; }

/* Footer: the floor again */
.site-footer { margin-top: 96px; background: var(--floor); color: #fff; font-size: .875rem; }
.site-footer .wrap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px; padding-block: 32px 40px; }
.site-footer p { margin: 0; }
.footer-name { font-size: 1rem; font-weight: 700; }
.site-footer nav { display: flex; gap: 20px; }
.site-footer a { text-decoration-color: #fff; }
.site-footer a:hover { color: #fff; text-decoration-thickness: 3px; }
.site-footer :focus-visible { outline-color: #fff; }