:root {
  --ink: #2c2926;
  --muted: #716a64;
  --paper: #fffaf4;
  --surface: #fff;
  --soft: #f6eee5;
  --coral: #b84c4c;
  --coral-dark: #8e3439;
  --sage: #4f7b68;
  --line: #eadfd4;
  --shadow: 0 18px 50px rgba(75, 49, 33, .11);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body { min-width: 320px; margin: 0; background: radial-gradient(circle at 90% 0, #fde9d5 0, transparent 32rem), var(--paper); }
img { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid rgba(184, 76, 76, .32); outline-offset: 3px; }
.skip-link { position: fixed; z-index: 100; left: 1rem; top: -5rem; padding: .7rem 1rem; color: #fff; background: var(--coral-dark); border-radius: 10px; }
.skip-link:focus { top: 1rem; }
.site-header { position: sticky; z-index: 30; top: 0; border-bottom: 1px solid rgba(234, 223, 212, .82); background: rgba(255, 250, 244, .93); backdrop-filter: blur(16px); }
.header-inner { width: min(100% - 2rem, 1180px); min-height: 70px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.guide-brand { display: inline-flex; align-items: center; gap: .65rem; font: 700 1.25rem Georgia, serif; text-decoration: none; }
.brand-mark { width: 40px; height: 40px; display: grid; place-items: center; overflow: hidden; color: transparent; background: #fff8f2 url('/images/brand/sinta-profile-icon.png') center/82% no-repeat; border-radius: 14px; font-size: 0; box-shadow: 0 8px 22px rgba(255, 75, 43, .2); }
.header-nav { display: flex; align-items: center; gap: .3rem; }
.header-nav a { padding: .6rem .75rem; border-radius: 10px; text-decoration: none; font-size: .88rem; font-weight: 700; }
.header-nav a:hover, .header-nav a[aria-current="page"] { background: var(--soft); }
.header-nav .header-cta { margin-left: .25rem; color: #fff; background: var(--coral); }
.header-nav .header-cta:hover { background: var(--coral-dark); }
.guide-shell { width: min(100% - 2rem, 1180px); margin: auto; padding: 2.5rem 0 5rem; }
.guide-hero { display: grid; grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr); align-items: center; gap: clamp(2rem, 6vw, 5rem); padding: 2rem 0 3.5rem; }
.eyebrow { color: var(--coral); font-size: .74rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.guide-hero h1, .article-header h1 { margin: .65rem 0 1rem; font: 600 clamp(2.6rem, 6vw, 5.2rem)/1 Georgia, serif; letter-spacing: -.045em; }
.guide-hero p { max-width: 610px; color: var(--muted); font-size: 1.08rem; line-height: 1.7; }
.hero-image { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 30px; box-shadow: var(--shadow); }
.guide-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.5rem; }
.button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: .72rem 1rem; color: #fff; background: var(--coral); border-radius: 13px; font-weight: 800; text-decoration: none; }
.button:hover { background: var(--coral-dark); }
.button-soft { color: var(--coral-dark); background: #f9e3dd; }
.button-soft:hover { background: #f4d2ca; }
.section-head { max-width: 720px; margin: 1rem 0 1.5rem; }
.section-head h2 { margin: .45rem 0; font: 600 clamp(2rem, 4vw, 3rem) Georgia, serif; }
.section-head p { color: var(--muted); line-height: 1.65; }
.guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
.guide-card { overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 10px 28px rgba(75, 49, 33, .06); }
.guide-card img { width: 100%; aspect-ratio: 16 / 9; display: block; object-fit: cover; }
.guide-card-copy { padding: 1.25rem; }
.guide-card h3 { margin: .45rem 0 .55rem; font: 600 1.45rem/1.18 Georgia, serif; }
.guide-card p { margin: 0 0 1rem; color: var(--muted); line-height: 1.6; }
.guide-card a { color: var(--coral-dark); font-weight: 800; text-decoration: none; }
.guide-card a::after { content: "  →"; }
.guide-card a:hover { text-decoration: underline; }
.editorial-note { margin: 3rem 0 0; padding: 1.4rem; color: #40594d; background: #eef4ef; border: 1px solid #d7e4da; border-radius: 18px; line-height: 1.65; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: .45rem; padding: 0; margin: 0 0 1.4rem; list-style: none; color: var(--muted); font-size: .84rem; }
.breadcrumb li:not(:last-child)::after { content: "›"; margin-left: .45rem; }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.article-header { max-width: 880px; margin: 1.5rem auto 2.2rem; text-align: center; }
.article-header h1 { font-size: clamp(2.55rem, 6vw, 4.8rem); }
.article-deck { max-width: 750px; margin: 0 auto 1.1rem; color: var(--muted); font-size: 1.13rem; line-height: 1.7; }
.article-meta { color: var(--muted); font-size: .84rem; }
.article-hero { width: min(100%, 1080px); max-height: 620px; display: block; margin: 0 auto 2.8rem; object-fit: cover; border-radius: 30px; box-shadow: var(--shadow); }
.article-layout { max-width: 1040px; display: grid; grid-template-columns: 220px minmax(0, 720px); gap: 3.5rem; margin: auto; }
.article-toc { position: sticky; top: 96px; align-self: start; padding: 1rem; background: var(--soft); border-radius: 16px; }
.article-toc strong { display: block; margin-bottom: .6rem; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; }
.article-toc a { display: block; padding: .35rem 0; color: var(--muted); font-size: .82rem; line-height: 1.35; text-decoration: none; }
.article-toc a:hover { color: var(--coral-dark); }
.article-body { min-width: 0; color: #48423d; font: 1.04rem/1.82 Georgia, serif; }
.article-body > p:first-child::first-letter { float: left; padding: .1rem .45rem 0 0; color: var(--coral); font-size: 4rem; line-height: .8; }
.article-body h2 { scroll-margin-top: 100px; margin: 2.5rem 0 .75rem; color: var(--ink); font: 600 2rem/1.18 Georgia, serif; }
.article-body h3 { margin: 1.8rem 0 .5rem; color: var(--ink); font: 600 1.3rem Georgia, serif; }
.article-body ul { padding-left: 1.3rem; }
.article-body li { margin: .55rem 0; }
.article-callout { margin: 2rem 0; padding: 1.25rem 1.35rem; color: #40594d; background: #eef4ef; border-left: 4px solid var(--sage); border-radius: 0 16px 16px 0; font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: .92rem; line-height: 1.65; }
.article-photo { width: 100%; display: block; margin: 2.2rem 0; border-radius: 20px; }
.related { max-width: 1040px; margin: 4rem auto 0; padding-top: 2.5rem; border-top: 1px solid var(--line); }
.related h2 { font: 600 2rem Georgia, serif; }
.center-hero { display:grid; grid-template-columns:minmax(0,.95fr) minmax(420px,1.05fr); align-items:center; gap:clamp(2rem,6vw,5rem); padding:2rem 0 4rem; }
.center-hero h1 { margin:.65rem 0 1rem; font:600 clamp(2.7rem,6vw,5rem)/1 Georgia,serif; letter-spacing:-.045em; }
.center-hero p { color:var(--muted); font-size:1.08rem; line-height:1.7; }
.center-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.center-card { min-height:240px; display:flex; flex-direction:column; padding:1.5rem; background:linear-gradient(145deg,#fff,#fbf3ea); border:1px solid var(--line); border-radius:24px; box-shadow:0 10px 28px rgba(75,49,33,.06); }
.center-card:first-child { grid-column:span 2; min-height:220px; background:linear-gradient(130deg,#edf5ef,#fff); }
.center-card > span { color:var(--coral-dark); font-size:.74rem; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.center-card h3 { margin:.7rem 0; font:600 1.6rem/1.2 Georgia,serif; }
.center-card p { margin:0 0 1.2rem; color:var(--muted); line-height:1.65; }
.center-card a { margin-top:auto; color:var(--coral-dark); font-weight:800; text-decoration:none; }
.center-card a::after { content:"  →"; }
.center-preview-header { max-width:850px; margin:1.5rem auto 2.5rem; text-align:center; }
.center-preview-header h1 { margin:.65rem 0 1rem; font:600 clamp(2.5rem,6vw,4.6rem)/1.04 Georgia,serif; letter-spacing:-.04em; }
.center-preview-header p { color:var(--muted); font-size:1.08rem; line-height:1.7; }
.center-preview-body { max-width:760px; margin:auto; color:#48423d; font:1.04rem/1.8 Georgia,serif; }
.center-preview-body h2 { margin:2.2rem 0 .7rem; color:var(--ink); font:600 2rem/1.2 Georgia,serif; }
.center-preview-body ul { padding-left:1.35rem; }
.center-preview-lock { max-width:760px; margin:2.5rem auto 0; padding:1.5rem; background:#fff; border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); }
.center-preview-lock h2 { margin:0 0 .5rem; font:600 1.6rem Georgia,serif; }
.center-preview-lock p { color:var(--muted); line-height:1.6; }
.site-footer { color: #f8eee8; background: #443632; }
.footer-inner { width: min(100% - 2rem, 1180px); margin: auto; padding: 2.4rem 0; display: flex; justify-content: space-between; gap: 2rem; }
.footer-inner strong { font: 700 1.2rem Georgia, serif; }
.footer-inner p { max-width: 570px; margin: .55rem 0 0; color: #dbcac2; line-height: 1.55; }
.footer-links { display: flex; flex-wrap: wrap; align-content: flex-start; gap: .8rem; }
.footer-links a { color: #fff; font-size: .86rem; }

@media (max-width: 820px) {
  .header-nav a:not(.header-cta) { display: none; }
  .guide-hero { grid-template-columns: 1fr; gap: 1.5rem; padding-top: 1rem; }
  .guide-hero-copy { order: 1; }
  .hero-image { aspect-ratio: 16 / 10; }
  .article-layout { display: block; }
  .article-toc { position: static; margin-bottom: 2rem; }
  .footer-inner { display: block; }
  .footer-links { margin-top: 1.5rem; }
  .center-hero { grid-template-columns:1fr; gap:1.5rem; padding-top:1rem; }
}

@media (max-width: 600px) {
  body { overflow-x: hidden; }
  .guide-shell { width: min(100% - 1.25rem, 1180px); padding-top: 1.25rem; }
  .center-hero > * { min-width: 0; }
  .center-hero h1 { max-width: 100%; overflow-wrap: anywhere; }
  .center-hero .guide-actions { display: grid; grid-template-columns: 1fr; }
  .center-hero .guide-actions .button { width: 100%; }
  .center-hero .hero-image { width: 100%; }
  .guide-grid { grid-template-columns: 1fr; }
  .guide-hero h1, .article-header h1 { font-size: 2.55rem; }
  .article-header { margin-top: .5rem; }
  .article-hero { width: calc(100% + 1.25rem); margin-left: -.625rem; border-radius: 0 0 24px 24px; }
  .article-body { font-size: 1rem; }
  .article-body h2 { font-size: 1.7rem; }
  .center-grid { grid-template-columns:1fr; }
  .center-card:first-child { grid-column:auto; }
  .center-hero h1, .center-preview-header h1 { font-size:2.55rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}