/* Tidy Work Home — mid-century color-block style (基準書 4.2 / V4.6, matches Pin v2) */
:root {
  --paper: #F4EFE6;
  --ink: #161A1D;
  --muted: #4E5257;
  --teal: #1E6B63;
  --mustard: #D8B23A;
  --sand: #CDBE9F;
  --slate: #5E7F95;
  --terra: #C2553A;
  --line: #D9CFBE;
  --head: "Oswald", "Arial Narrow", sans-serif;
  --body: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 18px/1.75 var(--body);
}

.wrap { max-width: 760px; margin: 0 auto; padding: 0 16px; }
a { color: var(--teal); text-underline-offset: 3px; }

/* Header */
header.site { background: var(--paper); border-bottom: 2px solid var(--ink); }
header.site .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 60px; }
header.site a.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; font: 600 22px/1 var(--head); letter-spacing: 0.08em; text-transform: uppercase; }
/* Brand mark: asymmetric color blocks (same composition as the app icon) */
.mark { display: grid; grid-template-columns: 10px 6px 3px; grid-template-rows: 9px 11px; gap: 2px; }
.mark i { display: block; }
.mark i:nth-child(1) { background: var(--teal); grid-row: 1 / 3; }
.mark i:nth-child(2) { background: var(--mustard); grid-column: 2 / 4; }
.mark i:nth-child(3) { background: var(--terra); }
.mark i:nth-child(4) { background: var(--slate); }

/* Color-block hero */
.hero { display: grid; grid-template-columns: 1.4fr 1fr; min-height: 340px; }
.hero-main { background: var(--teal); color: var(--paper); padding: 44px 32px 36px; display: flex; flex-direction: column; justify-content: flex-end; }
.hero-side { display: grid; grid-template-rows: 1fr 1fr; }
.hero-side .blk:nth-child(1) { background: var(--mustard); }
.hero-side .blk:nth-child(2) { background: var(--slate); }
.hero .eyebrow { margin: 0 0 14px; font: 500 15px/1 var(--head); letter-spacing: 0.22em; text-transform: uppercase; color: var(--mustard); }
.hero h1 { margin: 0; font: 600 clamp(36px, 6.4vw, 60px)/1.02 var(--head); text-transform: uppercase; letter-spacing: 0.01em; }
.hero h1 span { color: var(--mustard); }
.hero .lead { margin: 16px 0 0; font-size: 17px; line-height: 1.6; max-width: 34em; color: #E9F0EE; }
.hero--terra .hero-main { background: var(--terra); }
.hero--terra .hero h1 span, .hero--terra .eyebrow { color: var(--paper); }
.hero--small { min-height: 200px; }

/* Shelf motif inside the side blocks */
.blk { position: relative; overflow: hidden; }
.blk .shelf { position: absolute; left: 14%; right: 14%; bottom: 26%; height: 6px; background: var(--paper); }
.blk .box { position: absolute; bottom: calc(26% + 6px); background: var(--paper); }
.blk .box.a { left: 20%; width: 26%; height: 34%; background: var(--terra); }
.blk .box.b { left: 52%; width: 18%; height: 22%; }

/* Photos (基準書 4.2 / V4.6: licensed photos where they help) */
.blk img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-side.has-photo { grid-template-rows: 3fr 1fr; }
figure.photo { margin: 28px 0; }
figure.photo img { display: block; width: 100%; height: auto; border-bottom: 8px solid var(--mustard); }
figure.photo.terra img { border-bottom-color: var(--terra); }
figure.photo.teal img { border-bottom-color: var(--teal); }
.credits { margin-top: 3em; font-size: 12px; color: var(--muted); }
.credits a { color: var(--muted); }

@media (max-width: 640px) {
  .hero-side.has-photo { grid-template-rows: none; grid-template-columns: 3fr 1fr; height: 200px; }
  .hero { grid-template-columns: 1fr; }
  .hero-side { grid-template-rows: none; grid-template-columns: 1fr 1fr; height: 96px; }
  .hero-main { padding: 36px 20px 28px; }
}

main { padding: 8px 0 56px; }

h2 {
  display: flex; align-items: center; gap: 12px;
  margin: 2.2em 0 0.6em;
  font: 600 26px/1.2 var(--head); text-transform: uppercase; letter-spacing: 0.03em;
}
h2::before { content: ""; flex: none; width: 14px; height: 14px; background: var(--terra); }
main .wrap > p:first-child { margin-top: 2em; }

ul { padding-left: 1.2em; }
li { margin: 0.35em 0; }
li::marker { color: var(--teal); }
strong { font-weight: 600; }

/* Disclosure must be visible before any affiliate link (基準書7章) */
.disclosure {
  background: #F3E7C2;
  border-left: 6px solid var(--mustard);
  padding: 12px 16px;
  font-size: 0.95rem;
  margin: 24px 0;
}

table { width: 100%; border-collapse: collapse; font-size: 0.95rem; background: #FBF8F2; }
th, td { border-bottom: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
th { background: var(--ink); color: var(--paper); font: 500 14px/1.3 var(--head); letter-spacing: 0.08em; text-transform: uppercase; }
.table-scroll { overflow-x: auto; }

.cta {
  display: inline-block;
  background: var(--terra);
  color: var(--paper);
  padding: 12px 22px;
  text-decoration: none;
  font: 500 16px/1 var(--head); letter-spacing: 0.1em; text-transform: uppercase;
}

/* Guide list on home */
.guides { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.guides a { display: grid; grid-template-columns: 10px 1fr; gap: 16px; align-items: center; padding: 18px 18px; background: #FBF8F2; border: 2px solid var(--ink); color: var(--ink); text-decoration: none; font: 500 20px/1.25 var(--head); text-transform: uppercase; letter-spacing: 0.02em; }
.guides a::before { content: ""; height: 100%; min-height: 40px; background: var(--teal); }
.guides li:nth-child(2n) a::before { background: var(--terra); }
.guides a:hover { background: #fff; }

footer.site { background: var(--ink); color: #CFC8BB; font-size: 0.9rem; padding: 28px 0; }
footer.site a { color: var(--paper); }
footer.site p { margin: 0.4em 0; }