/* ==========================================================================
   Oukerui — Apple design language · tokens
   Transcribed from awesome-design-md/design-md/apple/DESIGN.md
   (Action Blue #0066cc single accent, SF Pro type ladder, 8px base grid,
   one product shadow, no decorative gradients).
   ========================================================================== */

:root{
  /* brand & accent — the only interactive colour in the system */
  --primary:#0066cc; --primary-focus:#0071e3; --primary-on-dark:#2997ff;
  /* text */
  --ink:#1d1d1f; --on-dark:#fff; --body-muted:#ccc;
  --ink-muted-80:#333; --ink-muted-48:#7a7a7a;
  /* hairlines */
  --divider-soft:#f0f0f0; --hairline:#e0e0e0; --ring:rgba(0,0,0,.08);
  /* surfaces */
  --canvas:#fff; --parchment:#f5f5f7; --pearl:#fafafc;
  --tile-1:#272729; --tile-2:#2a2a2c; --tile-3:#252527; --black:#000;
  --chip-translucent:rgba(210,210,215,.64);
  /* radii */
  --r-xs:5px; --r-sm:8px; --r-md:11px; --r-lg:18px; --r-pill:9999px;
  /* spacing */
  --sp-xxs:4px; --sp-xs:8px; --sp-sm:12px; --sp-md:17px; --sp-lg:24px;
  --sp-xl:32px; --sp-xxl:48px; --sp-section:80px;
  /* the only drop-shadow in the system — product renders resting on a surface */
  --shadow-product:3px 5px 30px 0 rgba(0,0,0,.22);
  --font:"SF Pro Display","SF Pro Text",system-ui,-apple-system,BlinkMacSystemFont,
         "Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--font);
  font-size:17px;font-weight:400;line-height:1.47;letter-spacing:-.374px;
  -webkit-font-smoothing:antialiased}
/* 注意 height:auto 不能省。
   <img width height> 这两个属性会被浏览器当作「表现性提示」映射成 CSS 的
   width / height。WordPress 输出的每张图都带这两个属性，一旦只覆盖 width
   （常见的 width:100%）而不写 height:auto，height 提示就会压过 aspect-ratio，
   图片被拉成原始像素高度（实测 540×1086 而不是 540×405）。
   这一条兜底之后，下面所有 aspect-ratio 才真正生效。 */
img{display:block;max-width:100%;height:auto}
a{color:var(--primary);text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p,ul,ol,figure{margin:0;padding:0}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--primary-focus);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- type ladder — weights 300 / 400 / 600, 500 is absent ---------- */
.t-hero{font-size:56px;font-weight:600;line-height:1.07;letter-spacing:-.28px}
.t-display{font-size:40px;font-weight:600;line-height:1.1;letter-spacing:-.2px}
.t-display-md{font-size:34px;font-weight:600;line-height:1.47;letter-spacing:-.374px}
.t-lead{font-size:28px;font-weight:400;line-height:1.14;letter-spacing:.196px}
.t-lead-airy{font-size:24px;font-weight:300;line-height:1.5;letter-spacing:0}
.t-tagline{font-size:21px;font-weight:600;line-height:1.19;letter-spacing:.231px}
.t-strong{font-size:17px;font-weight:600;line-height:1.24;letter-spacing:-.374px}
.t-body{font-size:17px;font-weight:400;line-height:1.47;letter-spacing:-.374px}
.t-caption{font-size:14px;font-weight:400;line-height:1.43;letter-spacing:-.224px}
.t-caption-strong{font-size:14px;font-weight:600;line-height:1.29;letter-spacing:-.224px}
.t-fine{font-size:12px;font-weight:400;line-height:1.4;letter-spacing:-.12px}
.t-muted{color:var(--ink-muted-48)}
.t-dark-muted{color:var(--body-muted)}
.t-balance{text-wrap:balance}
.t-center{text-align:center}

/* ---------- layout primitives ---------- */
.wrap{max-width:1440px;margin:0 auto;padding:0 24px}
.wrap--narrow{max-width:980px}
.stack>*+*{margin-top:var(--sp-md)}
.tile{padding:var(--sp-section) 24px}
.tile--light{background:var(--canvas);color:var(--ink)}
.tile--parchment{background:var(--parchment);color:var(--ink)}
.tile--dark{background:var(--tile-1);color:var(--on-dark)}
.tile--dark-2{background:var(--tile-2);color:var(--on-dark)}
.tile--dark-3{background:var(--tile-3);color:var(--on-dark)}
.tile--dark a:not(.btn){color:var(--primary-on-dark)}
.tile--dark .t-muted{color:var(--body-muted)}
.tile__head{max-width:820px;margin:0 auto var(--sp-xxl);text-align:center}
.tile__head>*+*{margin-top:var(--sp-sm)}
.grid{display:grid;gap:var(--sp-lg)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.row{display:flex;gap:var(--sp-sm);flex-wrap:wrap;align-items:center}
.row--center{justify-content:center}