/*
  One stylesheet, no framework, no CSS build step. A reading site's job is text,
  and the fastest text is text with nothing loading in front of it.

  The look is meant to read as a trade journal rather than a tech blog: the
  readers are shop owners deciding where to put their money, and the product
  being sold is that the numbers here were actually paid. So — warm paper, ink
  instead of black, a serif for headings (system fonts only: a Japanese webfont
  is megabytes), and colour used for meaning rather than decoration.
*/

:root {
  /* Paper, not white: long reading on a bright screen is easier off-white. */
  --paper: #fcfbf8;
  --paper-2: #f4f2ed;
  --card: #ffffff;
  --ink: #1b2430;
  --ink-2: #5d6875;
  --ink-3: #8b95a1;
  --line: #e4e0d8;
  --line-2: #d3cec3;

  /* Deep teal reads as considered rather than as another blue tech blog. */
  --accent: #0d6357;
  --accent-ink: #0a4c43;
  --accent-wash: #e8f1ef;

  /* Reserved for the one thing on the page that asks for money. */
  --cta: #b3491b;
  --cta-ink: #93380f;

  --warn-bg: #fdf6e3;
  --warn-line: #e8d9a8;
  --warn-ink: #6b5410;

  --radius: 12px;
  --measure: 44rem;
  --shadow: 0 1px 2px rgba(27, 36, 48, 0.05), 0 8px 24px -12px rgba(27, 36, 48, 0.12);
  --shadow-lift: 0 2px 4px rgba(27, 36, 48, 0.06), 0 16px 32px -16px rgba(27, 36, 48, 0.2);

  --sans: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP",
    "Yu Gothic UI", "Yu Gothic", Meiryo, system-ui, sans-serif;
  /* Mincho for headings. Yu Mincho on Windows is thin, so it is always paired
     with a weight bump below rather than left at its default. */
  --serif: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP",
    "Times New Roman", serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #14181d;
    --paper-2: #1b2027;
    --card: #1b2027;
    --ink: #e8eaed;
    --ink-2: #a3acb8;
    --ink-3: #7b8592;
    --line: #2c333c;
    --line-2: #3b434e;

    --accent: #5fbfae;
    --accent-ink: #8ad6c6;
    --accent-wash: #16302c;

    --cta: #e0714a;
    --cta-ink: #f08a63;

    --warn-bg: #2a2413;
    --warn-line: #574a22;
    --warn-ink: #dcc98d;

    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -12px rgba(0, 0, 0, 0.5);
    --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.35), 0 16px 32px -16px rgba(0, 0, 0, 0.6);
  }
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: 0.012em;
  font-feature-settings: "palt" 1; /* tightens Japanese punctuation spacing */
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-underline-offset: 0.18em; }
a:hover { color: var(--accent-ink); }

::selection { background: var(--accent-wash); color: var(--accent-ink); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

.wrap {
  width: 100%;
  /* A reading site, not a dashboard: past this the eye has to travel. */
  max-width: 58rem;
  margin-inline: auto;
  padding-inline: 20px;
}

/* Article text is held to a comfortable measure inside the wider page. */
.narrow { max-width: var(--measure); margin-inline: auto; }

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 12px;
  top: 12px;
  z-index: 20;
  background: var(--card);
  padding: 10px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow);
}

/* -------------------------------- header -------------------------------- */

.site-head {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 10;
  /* Long articles scroll under the bar; a faint blur keeps the text legible. */
  backdrop-filter: saturate(180%) blur(8px);
}

.head-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  min-height: 64px;
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}

.brand-mark { width: 30px; height: 30px; flex: none; }

.brand-text {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.site-head nav {
  display: flex;
  gap: 6px;
  font-size: 0.88rem;
}

.site-head nav a {
  color: var(--ink-2);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 999px;
  transition: background 0.15s, color 0.15s;
}

.site-head nav a:hover { background: var(--paper-2); color: var(--ink); }

.site-head nav a[aria-current="page"] {
  background: var(--accent-wash);
  color: var(--accent-ink);
  font-weight: 700;
}

main { padding-block: 40px 80px; min-height: 60vh; }

/* -------------------------------- footer -------------------------------- */

.site-foot {
  border-top: 1px solid var(--line);
  background: var(--paper-2);
  padding-block: 36px 48px;
  font-size: 0.85rem;
  color: var(--ink-2);
}

.site-foot nav {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.site-foot nav a { color: var(--ink-2); }

.foot-note { margin: 5px 0; line-height: 1.7; }

/* ------------------------------ breadcrumbs ----------------------------- */

.crumbs {
  font-size: 0.78rem;
  color: var(--ink-3);
  margin-bottom: 24px;
  overflow-wrap: anywhere; /* a long title must not push the layout sideways */
}

.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--accent); text-decoration: underline; }
.crumbs .sep { margin-inline: 8px; color: var(--line-2); }

/* --------------------------------- home --------------------------------- */

.hero {
  max-width: var(--measure);
  margin: 8px auto 56px;
  text-align: center;
}

.hero h1 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.9rem, 5.5vw, 2.9rem);
  line-height: 1.45;
  letter-spacing: 0.02em;
  margin: 0 0 18px;
}

.hero-lead {
  margin: 0 auto;
  color: var(--ink-2);
  font-size: 1.02rem;
  line-height: 1.95;
  max-width: 34rem;
}

/* The one-line promise under the hero: what makes this site different. */
.hero-badge {
  display: inline-block;
  margin-bottom: 20px;
  padding: 5px 16px;
  border-radius: 999px;
  background: var(--accent-wash);
  color: var(--accent-ink);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/*
  What the site does differently, stated before the articles. It exists partly
  to fill the fold while the archive is small, but mostly because a reader
  deciding whether to trust a money article wants the stance up front.
*/
.promises {
  display: grid;
  gap: 16px;
  margin-bottom: 64px;
  padding-block: 28px;
  border-block: 1px solid var(--line);
}

.promise-lead {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.03em;
  color: var(--ink);
}

/* A short rule instead of a bullet: quieter, and it survives any width. */
.promise-lead::before {
  content: "";
  display: block;
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
  margin-bottom: 12px;
}

.promise-body {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.85;
  color: var(--ink-2);
}

.group { margin-bottom: 56px; }

.group-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 22px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.group-head h2 {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin: 0;
}

.group-count { font-size: 0.78rem; color: var(--ink-3); }

/*
  The index is a list of rows, not a grid of cards. A grid leaves a ragged gap
  whenever the article count is not a multiple of the column count — which,
  with three to ten articles, is most of the time.
*/
.entries { list-style: none; margin: 0; padding: 0; }

.entry {
  position: relative;
  display: grid;
  gap: 6px 28px;
  padding: 24px 12px 24px 16px;
  border-bottom: 1px solid var(--line);
  border-radius: 8px;
  transition: background 0.15s;
}

.entry:hover { background: var(--card); }
.entry:last-child { border-bottom: 0; }

.entry-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0;
  font-size: 0.76rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.entry-body { min-width: 0; }

.entry h3 {
  font-family: var(--serif);
  margin: 0 0 8px;
  font-size: 1.2rem;
  line-height: 1.65;
  font-weight: 700;
}

.entry h3 a { text-decoration: none; color: var(--ink); }
.entry:hover h3 a { color: var(--accent); }

/* The whole row is the click target; the title link is stretched over it. */
.entry h3 a::after { content: ""; position: absolute; inset: 0; border-radius: 8px; }

.entry-desc {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink-2);
  line-height: 1.85;
}

.card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0;
  font-size: 0.76rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/*
  Category colour. One hue per section of the site, so a reader scanning the
  index can tell "費用" from "公開・サーバー" without reading the label. The
  hues are all muted to the same degree — the page must still read as paper and
  ink, not as a set of highlighter pens.
*/
[data-cat="cost"]    { --cat: #0d6357; --cat-wash: #e6f0ee; }
[data-cat="domain"]  { --cat: #1d4e89; --cat-wash: #e7edf6; }
[data-cat="hosting"] { --cat: #55397f; --cat-wash: #eee9f6; }
[data-cat="build"]   { --cat: #96501c; --cat-wash: #f8eee4; }
[data-cat="seo"]     { --cat: #8a2f54; --cat-wash: #f7e9ef; }

@media (prefers-color-scheme: dark) {
  [data-cat="cost"]    { --cat: #6ec7b5; --cat-wash: #16302c; }
  [data-cat="domain"]  { --cat: #8ab4e8; --cat-wash: #1a2536; }
  [data-cat="hosting"] { --cat: #b79ae0; --cat-wash: #241d34; }
  [data-cat="build"]   { --cat: #e0a473; --cat-wash: #33251a; }
  [data-cat="seo"]     { --cat: #dd8fae; --cat-wash: #331c26; }
}

.tag {
  background: var(--cat-wash, var(--accent-wash));
  color: var(--cat, var(--accent-ink));
  border-radius: 4px;
  padding: 3px 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* The section heading picks up the same hue as a short rule before the title. */
.group-head[data-cat] h2::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: var(--cat);
  vertical-align: 0.28em;
  margin-right: 12px;
}

.empty { color: var(--ink-2); text-align: center; padding-block: 40px; }

/*
  The roadmap. Deliberately plain and un-clickable — these are not links yet,
  and styling them like articles would promise pages that do not exist.
*/
.upcoming { margin-top: 8px; }

.upcoming ul {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 1;
}

.upcoming li {
  padding: 11px 0 11px 30px;
  font-size: 0.92rem;
  color: var(--ink-2);
  border-bottom: 1px dashed var(--line);
  position: relative;
}

.upcoming li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 1.15em;
  width: 9px;
  height: 9px;
  border: 2px solid var(--line-2);
  border-radius: 3px;
}

.upcoming-note {
  margin: 16px 0 0;
  font-size: 0.8rem;
  color: var(--ink-3);
}

/* -------------------------------- article -------------------------------- */

.post { max-width: var(--measure); margin-inline: auto; }

.post-head {
  margin-bottom: 36px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}

.post-head h1 {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 5vw, 2.3rem);
  line-height: 1.55;
  letter-spacing: 0.015em;
  font-weight: 700;
  margin: 16px 0 16px;
}

.lede {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.97rem;
  line-height: 1.95;
}

.updated::before { content: "・"; color: var(--line-2); margin-right: 6px; }

/* The 景表法 notice. Loud enough to be read, quiet enough to read past. */
.ad-disclosure {
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  color: var(--warn-ink);
  border-radius: 8px;
  padding: 11px 16px;
  font-size: 0.8rem;
  line-height: 1.7;
  margin: 0 0 32px;
}

.toc {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 26px;
  margin-bottom: 44px;
}

.toc-title {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
}

.toc ol {
  margin: 0;
  padding-left: 1.3em;
  font-size: 0.9rem;
  line-height: 1.8;
}

.toc li { margin: 7px 0; }
.toc a { color: var(--ink-2); text-decoration: none; }
.toc a:hover { color: var(--accent); text-decoration: underline; }

.prose { font-size: 1.02rem; }

.prose h2 {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 3.4vw, 1.45rem);
  line-height: 1.6;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 64px 0 20px;
  padding-left: 16px;
  border-left: 4px solid var(--accent);
  scroll-margin-top: 84px;
}

.prose h3 {
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 700;
  margin: 40px 0 14px;
  scroll-margin-top: 84px;
}

.prose p { margin: 0 0 24px; }

.prose ul, .prose ol { margin: 0 0 24px; padding-left: 1.5em; }
.prose li { margin: 8px 0; }
.prose li::marker { color: var(--ink-3); }

/* A "- [ ]" checklist. The boxes are for reading, not for ticking, so they get
   room to breathe and the bullet is dropped. */
.prose li:has(> input[type="checkbox"]) { list-style: none; margin-left: -1.5em; }

.prose input[type="checkbox"] {
  appearance: none;
  width: 1.05em;
  height: 1.05em;
  margin-right: 0.6em;
  vertical-align: -0.16em;
  border: 2px solid var(--accent);
  border-radius: 4px;
  background: var(--card);
}

.prose strong {
  font-weight: 700;
  /* A highlight rather than bold alone: skimmers stop on these. */
  background: linear-gradient(transparent 62%, var(--accent-wash) 62%);
}

.prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

.prose blockquote {
  margin: 0 0 24px;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--line-2);
  color: var(--ink-2);
  font-size: 0.95rem;
}

.prose code {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 2px 6px;
  font-size: 0.86em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.prose pre {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  overflow-x: auto;
  font-size: 0.88rem;
  line-height: 1.75;
}

.prose pre code { background: none; border: 0; padding: 0; }

/* The cost tables are the point of several articles, so they get real care. */
.table-scroll {
  overflow-x: auto;
  margin: 0 0 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  margin: 0;
}

.prose th, .prose td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.prose thead th {
  background: var(--paper-2);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  font-weight: 700;
}

.prose tbody tr:last-child td { border-bottom: 0; }
/* Money columns line up when the digits are the same width. */
.prose td { font-variant-numeric: tabular-nums; }

.prose hr { border: 0; border-top: 1px solid var(--line); margin: 48px 0; }

.prose > *:first-child { margin-top: 0; }

/* ---------------------------------- faq ---------------------------------- */

.faq { max-width: var(--measure); margin: 72px auto 0; }

.faq h2 {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.faq details {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 4px 20px;
  margin-bottom: 12px;
  background: var(--card);
  box-shadow: var(--shadow);
}

.faq summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 14px 0;
  list-style-position: outside;
}

.faq summary::marker { color: var(--accent); }
.faq details[open] summary { border-bottom: 1px solid var(--line); }
.faq p { margin: 14px 0 18px; font-size: 0.93rem; color: var(--ink-2); }

/* ---------------------------------- cta ---------------------------------- */

.cta {
  max-width: var(--measure);
  margin: 72px auto 0;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--card);
  padding: 32px 28px;
  text-align: center;
  box-shadow: var(--shadow);
}

.cta-lead {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.03em;
}

.cta-body {
  margin: 0 auto 22px;
  font-size: 0.93rem;
  color: var(--ink-2);
  max-width: 28rem;
  line-height: 1.85;
}

.cta-btn {
  display: inline-block;
  background: var(--cta);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.97rem;
  padding: 14px 32px;
  border-radius: 8px;
  box-shadow: 0 2px 0 var(--cta-ink);
  transition: transform 0.12s, box-shadow 0.12s;
}

.cta-btn:hover {
  color: #fff;
  transform: translateY(1px);
  box-shadow: 0 1px 0 var(--cta-ink);
}

/* -------------------------------- related -------------------------------- */

.related {
  max-width: var(--measure);
  margin: 80px auto 0;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}

.related > h2 {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin: 0 0 20px;
}

/* ------------------------------ wide screens ----------------------------- */

@media (min-width: 760px) {
  body { font-size: 17px; }
  main { padding-block: 52px 96px; }
  .wrap { padding-inline: 32px; }
  .hero { margin-block: 32px 72px; }
  /* The date column moves beside the title, the way a journal index reads. */
  .entry { grid-template-columns: 8.5rem 1fr; padding-block: 26px; }
  .entry-meta { flex-direction: column; align-items: flex-start; gap: 8px; padding-top: 5px; }
  .promises { grid-template-columns: repeat(3, 1fr); gap: 32px; padding-block: 36px; }
  .upcoming ul { columns: 2; column-gap: 40px; }
  .upcoming li { break-inside: avoid; }
}