/* Portfolio/src/app/global.scss と同じ配色。 */
:root {
  color-scheme: light;
  --color-cinnabar: #bb5a5a;
  --color-text-on-cinnabar: #f9f0ea;
  --color-accent: #70c6d1;
  --color-accent-deep: #3f8a94;
  --color-text-primary: #332e29;
  --color-text-secondary: #6b6259;
  --color-bg-base: #f9f5ef;
  --color-bg-panel: #fdfbf7;
  --color-border: #e3dacc;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-base);
  color: var(--color-text-primary);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", Meiryo, sans-serif;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 3px solid var(--color-accent-deep); outline-offset: 4px; }
.container { width: min(1120px, 100%); margin-inline: auto; padding-inline: 24px; }
header, footer { background: var(--color-cinnabar); color: var(--color-text-on-cinnabar); }
header { padding-block: .9rem; }
.brand { font-size: 1.6rem; font-weight: 400; letter-spacing: .14em; }
main { flex: 1; padding-block: 38px 60px; }
h1 {
  margin: 0 0 16px;
  padding-bottom: .7rem;
  text-align: center;
  font-size: 1.7rem;
  font-weight: 300;
  letter-spacing: .18em;
  background:
    linear-gradient(var(--color-cinnabar), var(--color-cinnabar)) center bottom 3px / 96px 2px no-repeat,
    linear-gradient(var(--color-accent), var(--color-accent)) center bottom / 96px 1px no-repeat;
}
.intro { margin: 0 0 32px; text-align: center; font-size: 14px; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--color-border); border-radius: 4px; background: var(--color-bg-panel); }
a.card:hover { border-color: var(--color-accent-deep); }
a.card:hover h2 { color: var(--color-accent-deep); }
.screenshot { aspect-ratio: 8 / 5; border-bottom: 1px solid var(--color-border); }
.screenshot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.card-body { display: flex; flex: 1; flex-direction: column; padding: 18px 20px; }
h2 { margin: 0 0 10px; font-size: 1.2rem; font-weight: 400; letter-spacing: .06em; }
.description { margin: 0 0 12px; font-size: 14px; }
.hostname { margin: auto 0 0; color: var(--color-text-secondary); font-size: 11px; overflow-wrap: anywhere; }
footer { padding-block: 14px; text-align: center; font-size: 12px; }
.skip { position: fixed; top: 12px; left: 12px; transform: translateY(-200%); padding: 8px 16px; z-index: 10; background: var(--color-bg-panel); }
.skip:focus { transform: none; }
@media (max-width: 760px) {
  .container { padding-inline: 20px; }
  header .container { text-align: center; }
  .brand { font-size: 1.4rem; }
  main { padding-block: 28px 40px; }
  h1 { font-size: 24px; }
  .cards { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
}