:root { color-scheme: light; --ink:#12362f; --soft:#64645d; --orange:#bd4e1f; --gold:#c69234; --line:#ddc28c; --paper:#fbf7ec; --wash:#f4ecd9; --white:#fffdf8; }
* { box-sizing:border-box; }
html { background:var(--wash); }
body { margin:0; color:var(--ink); background:linear-gradient(180deg,#f8f2e6,var(--paper) 48%,#f4ecd9); font-family:Arial,Helvetica,sans-serif; line-height:1.6; }
a { color:var(--orange); }
.seo-header { position:sticky; z-index:5; top:0; display:flex; min-height:72px; padding:12px clamp(18px,4vw,56px); align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); background:rgba(251,247,236,.96); backdrop-filter:blur(12px); }
.seo-header > a:last-child { font-size:14px; font-weight:800; }
.seo-brand { display:flex; align-items:center; gap:11px; color:var(--ink); text-decoration:none; }
.seo-brand span { display:grid; width:42px; height:42px; place-items:center; border:1px solid var(--gold); border-radius:50%; color:var(--orange); font-size:24px; }
.seo-brand strong { font-family:Georgia,serif; font-size:clamp(18px,2.5vw,26px); }
main { width:min(1160px,calc(100% - 32px)); margin:0 auto; padding:28px 0 72px; }
.seo-breadcrumbs { display:flex; margin:0 0 22px; align-items:center; gap:9px; color:var(--soft); font-size:13px; }
.seo-breadcrumbs a { color:var(--orange); font-weight:750; }
.seo-hero { display:grid; width:100%; max-width:100%; grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr); overflow:hidden; border:1px solid var(--line); border-radius:24px; background:var(--white); box-shadow:0 18px 52px rgba(50,40,16,.09); }
.seo-hero > div { min-width:0; padding:clamp(28px,5vw,64px); }
.seo-hero img { display:block; width:100%; min-width:0; max-width:100%; height:100%; min-height:390px; object-fit:cover; }
.seo-kicker { margin:0 0 13px; color:var(--orange); font-size:12px; font-weight:900; letter-spacing:.16em; }
h1,h2 { font-family:Georgia,serif; line-height:1.08; }
h1 { margin:0 0 20px; font-size:clamp(42px,6vw,76px); }
h2 { margin:0 0 12px; font-size:clamp(25px,3vw,34px); }
p { color:var(--soft); }
.seo-hero p:not(.seo-kicker),.seo-index-intro > p:not(.seo-kicker) { max-width:720px; font-family:Georgia,serif; font-size:clamp(18px,2vw,22px); }
.seo-cta { display:inline-flex; max-width:100%; margin-top:16px; padding:13px 19px; justify-content:center; border-radius:999px; color:white; background:var(--orange); font-weight:850; text-align:center; text-decoration:none; }
.seo-cta:hover,.seo-cta:focus-visible { background:var(--ink); }
.seo-sections { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:24px; }
.seo-sections section,.seo-note,.seo-index-card { padding:clamp(22px,3vw,34px); border:1px solid var(--line); border-radius:18px; background:var(--white); }
.seo-sections p,.seo-note p { margin-bottom:0; }
.seo-note { margin-top:18px; border-left:6px solid var(--gold); }
.seo-related { margin-top:52px; }
.seo-related > div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.seo-related a { display:grid; gap:8px; padding:20px; border:1px solid var(--line); border-radius:15px; color:var(--ink); background:var(--white); text-decoration:none; }
.seo-related span,.seo-index-card > span { font-family:Georgia,serif; font-size:22px; font-weight:700; }
.seo-related small { color:var(--soft); line-height:1.45; }
.seo-index-intro { padding:clamp(32px,6vw,76px); border:1px solid var(--line); border-radius:24px; background:var(--white); text-align:center; }
.seo-index-intro p { margin-right:auto; margin-left:auto; }
.seo-index-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:24px; }
.seo-index-card { display:block; color:var(--ink); text-decoration:none; }
.seo-index-card p { min-height:78px; }
.seo-index-card b { color:var(--orange); }
footer { display:flex; padding:34px 20px; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px 28px; border-top:1px solid var(--line); color:var(--soft); background:var(--paper); font-size:13px; }

@media (max-width:820px) {
  .seo-header { min-height:64px; padding:10px 16px; }
  .seo-header > a:last-child { display:none; }
  .seo-brand strong { font-size:clamp(18px,5vw,22px); }
  main { width:min(100% - 24px,1160px); padding:20px 0 52px; }
  .seo-breadcrumbs { margin-bottom:16px; overflow-x:auto; white-space:nowrap; }
  .seo-hero { grid-template-columns:minmax(0,1fr); border-radius:18px; }
  .seo-hero > div { padding:28px 24px 30px; }
  .seo-hero img { height:auto; min-height:0; aspect-ratio:1200/630; }
  h1 { font-size:clamp(38px,12vw,54px); }
  .seo-cta { width:100%; border-radius:16px; line-height:1.3; }
  .seo-sections,.seo-related > div,.seo-index-grid { grid-template-columns:minmax(0,1fr); }
  .seo-index-card p { min-height:0; }
  .seo-index-intro { padding:38px 24px; }
}