/* ==========================================================================
   PLIK Lab · homepage v3 · 布局
   尺寸往 marijanapav.com 首页的量级缩（实测见 README「布局」）：她的网格是 300px | ≤480px | auto 三列、
   20px 间距、卡片 12px 内边距、10px 圆角、正文 14px；卡片高度跟内容走。
   v3：12 列、20px 间距、内容宽 1200px。
     第一行  header（大号 PLIK + 中文名）+ 一句 bold statement（css/chrome.css）
     第二行  Magical Pen hero（7 列）| 右边上下两张横版小卡（5 列）
     往下    其余卡片：每张占 3 / 4 / 5 列，高度跟着内容走，列边对齐网格（每行顶端对齐）
   ========================================================================== */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body {
  margin: 0; color: var(--ink); background: var(--wall);
  font-family: var(--font-text); font-size: var(--fs-body); line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  --gap: 20px; --pad-x: 40px; --maxw: 1200px;
}
@media (max-width: 1199.98px) { body { --pad-x: 32px; } }
@media (max-width: 699.98px) { body { --gap: 16px; --pad-x: 16px; } }
h1, h2, p { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 3px; border-radius: 4px; }

.page { max-width: calc(var(--maxw) + 2 * var(--pad-x)); margin: 0 auto; padding: 56px var(--pad-x) 40px; }
@media (max-width: 1199.98px) { .page { padding-top: 44px; } }
@media (max-width: 699.98px) { .page { padding-top: 32px; } }

/* ---------- 第二行：hero ---------- */
.row-hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: stretch; }
.row-hero > .tile[data-tile="pen"] { grid-column: 1 / span 7; }
.hero-side { grid-column: 8 / span 5; display: grid; grid-template-rows: auto auto; gap: var(--gap); align-content: start; }

/* ---------- 往下：其余卡片 ---------- */
.row-rest {
  margin-top: 56px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 36px var(--gap); align-items: start;
  grid-template-areas:
    "bay bay bay fish fish fish proj proj proj toy toy toy"
    "note note note about about about about news news news news news";
}
.row-rest > [data-tile="bay"] { grid-area: bay; }
.row-rest > [data-tile="fish"] { grid-area: fish; }
.row-rest > [data-tile="proj"] { grid-area: proj; }
.row-rest > [data-tile="toy"] { grid-area: toy; }
.row-rest > [data-tile="note"] { grid-area: note; }
.row-rest > [data-tile="about"] { grid-area: about; }
.row-rest > [data-tile="news"] { grid-area: news; }

/* iPad · 700–1199：hero 占满一行，两张小卡并排；其余三张一行 */
@media (max-width: 1199.98px) {
  .row-hero > .tile[data-tile="pen"] { grid-column: 1 / -1; }
  .hero-side { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .row-rest { margin-top: 44px; grid-template-areas:
    "bay bay bay bay fish fish fish fish proj proj proj proj"
    "toy toy toy toy note note note note news news news news"
    "about about about about about about about about . . . ."; }
}
/* 手机 · <700：一列；小玩具两张并排 */
@media (max-width: 699.98px) {
  .hero-side { grid-template-columns: 1fr; }
  .row-rest { margin-top: 32px; gap: 24px var(--gap); grid-template-columns: 1fr 1fr; grid-template-areas:
    "bay bay" "fish fish" "proj toy" "note note" "about about" "news news"; }
}

/* statement 字号随宽度收 */
@media (max-width: 1199.98px) { :root { --fs-statement: 38px; } }
@media (max-width: 699.98px) { :root { --fs-statement: 28px; } }