:root {
  --ink: #173d3a;
  --ink-deep: #0d2c2b;
  --paper: #fbf8ef;
  --surface: #fffdf8;
  --line: #dcd9cd;
  --muted: #6e7771;
  --coral: #f2775b;
  --gold: #f4bd5d;
  --mint: #b7d9c7;
  --sky: #b9dce8;
  --lilac: #c6b8dc;
  --shadow: 0 24px 70px rgba(31, 60, 57, 0.12);
  --radius: 24px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink-deep); background: var(--paper); font-family: "DM Sans", sans-serif; line-height: 1.6; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

.site-header { max-width: 1380px; margin: 0 auto; padding: 28px 48px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand > span:last-child { display: grid; line-height: 1.02; }
.brand strong { font: 800 0.9rem/1 "Manrope", sans-serif; letter-spacing: .08em; }
.brand small { margin-top: 5px; color: var(--muted); font-size: .73rem; }
.brand-mark { width: 38px; height: 38px; position: relative; display: inline-block; border: 2px solid var(--ink); border-radius: 50% 50% 45% 55%; transform: rotate(-8deg); }
.brand-mark i { position: absolute; display: block; width: 7px; height: 16px; background: var(--coral); border-radius: 10px; top: 8px; left: 14px; }
.brand-mark i:nth-child(2) { transform: rotate(55deg); left: 20px; top: 13px; background: var(--gold); }
.brand-mark i:nth-child(3) { transform: rotate(-55deg); left: 8px; top: 13px; background: var(--mint); }
.header-nav { display: flex; align-items: center; gap: 32px; font-size: .9rem; font-weight: 600; }
.header-nav a { padding: 6px 0; border-bottom: 1px solid transparent; }
.header-nav a:hover { border-color: var(--coral); }

main { overflow: hidden; }
.hero { max-width: 1380px; min-height: 590px; margin: 0 auto; padding: 60px 48px 76px; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 80px; }
.eyebrow, .story-kicker { color: var(--coral); font-size: .77rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.hero h1, .article-hero h1, .not-found h1 { margin: 18px 0 22px; max-width: 750px; font: 800 clamp(3.5rem, 7vw, 7.2rem)/.94 "Manrope", sans-serif; letter-spacing: -.065em; }
.hero-copy > p { max-width: 660px; color: #53615c; font-size: 1.14rem; }
.search-form { width: min(600px, 100%); margin-top: 38px; padding: 7px; display: flex; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 12px 40px rgba(31,60,57,.08); }
.search-form input { min-width: 0; flex: 1; padding: 14px 16px; color: var(--ink); background: transparent; border: 0; outline: 0; }
.search-form button, .button { padding: 13px 22px; border: 0; border-radius: 11px; font-weight: 800; cursor: pointer; }
.search-form button { color: #fff; background: var(--ink); }
.hero-art { position: relative; min-height: 455px; overflow: hidden; background: var(--ink); border-radius: 48% 48% 24% 52% / 46% 36% 55% 44%; box-shadow: var(--shadow); }
.hero-art::before { content: ""; position: absolute; width: 480px; height: 480px; left: -40px; top: -120px; border: 2px solid rgba(255,255,255,.2); border-radius: 50%; }
.hero-art .sun { position: absolute; width: 128px; height: 128px; right: 44px; top: 42px; background: var(--gold); border-radius: 50%; }
.portrait { position: absolute; display: grid; place-items: center; color: var(--ink); border: 8px solid var(--paper); border-radius: 46% 46% 42% 58%; box-shadow: 0 20px 45px rgba(0,0,0,.18); }
.portrait span { font-size: 2.2rem; }
.portrait-one { width: 190px; height: 230px; left: 64px; top: 90px; background: var(--coral); transform: rotate(-7deg); }
.portrait-two { width: 170px; height: 205px; right: 70px; bottom: 38px; background: var(--mint); transform: rotate(8deg); }
.hero-art p { position: absolute; left: 140px; top: 36px; z-index: 3; margin: 0; color: #fff; font: 800 1.25rem/1.05 "Manrope", sans-serif; text-transform: uppercase; letter-spacing: .08em; }
.orbit { position: absolute; border: 2px solid rgba(255,255,255,.36); border-radius: 50%; }
.orbit-one { width: 38px; height: 38px; left: 24px; top: 44px; }
.orbit-two { width: 16px; height: 16px; right: 48%; bottom: 38px; background: var(--lilac); border: 0; }

.topic-strip { max-width: 1380px; margin: 0 auto 72px; padding: 0 48px; display: flex; flex-wrap: wrap; gap: 10px; }
.topic-chip { padding: 9px 15px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.45); font-size: .84rem; font-weight: 700; }
.topic-chip span { margin-left: 8px; color: var(--muted); }
.topic-chip:hover, .topic-chip.is-active { color: #fff; background: var(--ink); border-color: var(--ink); }

.featured-story { max-width: 1280px; margin: 0 auto 110px; display: grid; grid-template-columns: .95fr 1.05fr; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 30px; box-shadow: var(--shadow); }
.featured-visual { min-height: 470px; padding: 48px; position: relative; display: grid; place-content: center; overflow: hidden; background: var(--coral); }
.featured-visual::before, .featured-visual::after { content: ""; position: absolute; border-radius: 50%; }
.featured-visual::before { width: 390px; height: 390px; top: -170px; right: -120px; border: 60px solid var(--gold); }
.featured-visual::after { width: 180px; height: 180px; bottom: -70px; left: 45px; background: var(--ink); }
.featured-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.visual-word { z-index: 1; color: #fff; font: 800 clamp(3.6rem, 7vw, 6.8rem)/.84 "Manrope", sans-serif; letter-spacing: -.08em; }
.visual-word:nth-child(2) { margin-left: 48px; color: var(--ink); }
.visual-dot { z-index: 2; position: absolute; width: 42px; height: 42px; left: 70px; top: 70px; background: var(--mint); border-radius: 50%; }
.featured-content { padding: 64px; align-self: center; }
.featured-content h2, .section-heading h2, .newsletter-band h2, .article-response h2 { margin: 15px 0; font: 800 clamp(2.2rem, 4vw, 4rem)/1.04 "Manrope", sans-serif; letter-spacing: -.05em; }
.featured-content h2 a:hover, .article-card h3 a:hover { color: var(--coral); }
.featured-content > p { color: var(--muted); font-size: 1.04rem; }
.story-meta { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 28px; color: var(--muted); font-size: .82rem; }
.story-meta span + span::before { content: "•"; margin-right: 18px; color: var(--coral); }
.story-actions { margin-top: 34px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.text-link { font-weight: 800; }
.text-link span { margin-left: 8px; color: var(--coral); }

.stories-section { max-width: 1280px; margin: 0 auto; padding: 0 0 110px; }
.section-heading { margin-bottom: 35px; display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.section-heading h2 { margin-bottom: 0; }
.section-heading > p { color: var(--muted); }
.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.article-card { overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; transition: transform .2s ease, box-shadow .2s ease; }
.article-card:hover { transform: translateY(-5px); box-shadow: 0 18px 50px rgba(26,58,54,.1); }
.card-visual { min-height: 230px; position: relative; display: grid; place-items: center; overflow: hidden; }
.card-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.visual-1 { background: var(--gold); }.visual-2 { background: var(--sky); }.visual-3 { background: var(--mint); }.visual-4 { background: var(--lilac); }
.card-visual > span { z-index: 2; display: grid; place-items: center; width: 105px; height: 105px; color: #fff; background: var(--ink); border-radius: 46% 54% 62% 38%; font: 800 3.3rem "Manrope", sans-serif; }
.card-visual i { position: absolute; display: block; width: 120px; height: 120px; border: 2px solid rgba(23,61,58,.28); border-radius: 50%; }
.card-visual i:first-of-type { left: -40px; top: -30px; }.card-visual i:last-of-type { right: -25px; bottom: -50px; width: 155px; height: 155px; }
.card-body { padding: 25px; }
.card-topline, .card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: .76rem; }
.card-topline span:first-child { color: var(--coral); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.article-card h3 { margin: 14px 0 10px; font: 800 1.34rem/1.2 "Manrope", sans-serif; letter-spacing: -.025em; }
.article-card p { margin: 0 0 24px; color: var(--muted); font-size: .9rem; }
.card-footer { padding-top: 17px; border-top: 1px solid var(--line); }
.reaction-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.reaction-button { min-width: 58px; padding: 8px 11px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; transition: .15s ease; }
.reaction-button:hover, .reaction-button.is-active { background: #fff3dd; border-color: var(--gold); transform: translateY(-1px); }
.reaction-button.is-active { box-shadow: inset 0 0 0 1px var(--gold); }
.reaction-button:disabled { opacity: .6; cursor: wait; }
.reaction-bar--compact { gap: 4px; }
.reaction-bar--compact .reaction-button { min-width: 42px; padding: 5px 8px; font-size: .76rem; }
.empty-state { padding: 70px; text-align: center; background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius); }
.empty-state > span { font-size: 3rem; }.empty-state h3 { font: 800 1.6rem "Manrope", sans-serif; }.empty-state p { color: var(--muted); }

.newsletter-band { max-width: 1380px; margin: 0 auto 70px; padding: 70px 78px; display: grid; grid-template-columns: 1fr .7fr; align-items: end; gap: 70px; color: #fff; background: var(--ink); border-radius: 30px; }
.newsletter-band .eyebrow { color: var(--gold); }.newsletter-band h2 { max-width: 780px; margin-bottom: 0; }.newsletter-band > p { color: rgba(255,255,255,.74); }
.site-footer { max-width: 1380px; margin: 0 auto; padding: 36px 48px 48px; display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: .84rem; }
.site-footer a { color: var(--ink); font-weight: 800; }

.article-page { max-width: 1180px; margin: 0 auto; padding: 60px 48px 110px; }
.article-hero { max-width: 900px; margin: 0 auto; text-align: center; }
.back-link { display: inline-block; margin-bottom: 32px; color: var(--muted); font-weight: 700; }
.article-hero h1 { max-width: 980px; margin-right: auto; margin-left: auto; font-size: clamp(3rem, 6.2vw, 6.5rem); }
.article-deck { max-width: 720px; margin: 0 auto; color: var(--muted); font-size: 1.18rem; }
.story-meta--large { justify-content: center; margin-top: 28px; }
.article-stage { margin-top: 70px; display: grid; grid-template-columns: 130px minmax(0, 780px); justify-content: center; gap: 45px; }
.share-rail { position: sticky; top: 30px; align-self: start; display: grid; justify-items: start; gap: 14px; }
.share-rail > span { color: var(--muted); font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.share-rail .reaction-bar { flex-direction: column; }
.article-visual { min-height: 430px; position: relative; display: grid; place-items: center; overflow: hidden; color: #fff; background: var(--coral); border-radius: 28px; }
.article-visual span { z-index: 2; font: 800 clamp(3rem, 10vw, 8rem)/1 "Manrope", sans-serif; letter-spacing: -.08em; }
.article-visual i { position: absolute; display: block; border-radius: 50%; }.article-visual i:nth-of-type(1) { width: 260px; height: 260px; left: -80px; top: -90px; background: var(--gold); }.article-visual i:nth-of-type(2) { width: 170px; height: 170px; right: 40px; bottom: -80px; background: var(--ink); }.article-visual i:nth-of-type(3) { width: 32px; height: 32px; right: 55px; top: 55px; background: var(--mint); }
.article-image { margin: 0; overflow: hidden; border-radius: 28px; }.article-image img { width: 100%; max-height: 620px; object-fit: cover; }
.article-copy { padding: 52px 48px; font-family: Georgia, serif; font-size: 1.18rem; line-height: 1.9; }
.article-copy p:first-child::first-letter { float: left; margin: .08em .12em 0 0; color: var(--coral); font: 700 4.7rem/.72 "Manrope", sans-serif; }
.article-response { margin-top: 20px; padding: 48px; background: #fff3dd; border-radius: 24px; text-align: center; }
.article-response h2 { font-size: 2.15rem; }.article-response p { color: var(--muted); }.article-response .reaction-bar { margin-top: 24px; justify-content: center; }
.not-found { min-height: 65vh; padding: 100px 24px; display: grid; place-items: center; align-content: center; text-align: center; }.not-found h1 { font-size: clamp(3rem, 8vw, 6rem); }.not-found p { color: var(--muted); }

.button { display: inline-flex; align-items: center; justify-content: center; }
.button--dark { color: #fff; background: var(--ink); }.button--accent { color: var(--ink-deep); background: var(--gold); }.button--full { width: 100%; }
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 50; padding: 12px 18px; color: #fff; background: var(--ink); border-radius: 999px; opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: .2s ease; box-shadow: var(--shadow); }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }.toast.is-error { background: #9e3f35; }

.admin-auth-body { min-height: 100vh; display: grid; place-items: center; padding: 28px; background: var(--ink); }
.admin-auth-shell { width: min(1020px, 100%); min-height: 620px; padding: 58px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 80px; background: var(--paper); border-radius: 32px; box-shadow: 0 35px 100px rgba(0,0,0,.25); }
.login-card { padding: 45px; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; }.login-card h1 { margin: 12px 0 8px; font: 800 2.6rem/1 "Manrope", sans-serif; letter-spacing: -.045em; }.login-card > p { color: var(--muted); }
.admin-form { display: grid; gap: 18px; margin-top: 28px; }.admin-form label, .editor-layout label { display: grid; gap: 7px; color: var(--ink); font-size: .84rem; font-weight: 700; }
.admin-form input, .editor-layout input, .editor-layout textarea, .editor-layout select { width: 100%; padding: 13px 14px; color: var(--ink-deep); background: #fff; border: 1px solid #ccd2ca; border-radius: 10px; outline: none; }.admin-form input:focus, .editor-layout input:focus, .editor-layout textarea:focus, .editor-layout select:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(23,61,58,.1); }
.login-card .back-link { margin: 24px 0 0; font-size: .82rem; }
.alert { max-width: 100%; margin: 18px 0; padding: 13px 16px; border-radius: 10px; font-size: .88rem; }.alert--error { color: #732e27; background: #ffe4df; border: 1px solid #f1b5aa; }.alert--success { color: #174b3c; background: #ddf4e8; border: 1px solid #a7d6bf; }

.admin-body { min-height: 100vh; background: #f4f4ee; }
.admin-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 10; width: 255px; padding: 28px 22px; display: flex; flex-direction: column; color: #fff; background: var(--ink-deep); }
.brand--admin { color: #fff; padding: 0 8px; }.brand--admin small { color: rgba(255,255,255,.58); }.brand--admin .brand-mark { border-color: #fff; }
.admin-sidebar nav { margin-top: 55px; display: grid; gap: 7px; }.admin-sidebar nav a { padding: 12px 14px; display: flex; align-items: center; gap: 11px; color: rgba(255,255,255,.7); border-radius: 10px; font-size: .88rem; font-weight: 700; }.admin-sidebar nav a:hover, .admin-sidebar nav a.is-active { color: #fff; background: rgba(255,255,255,.1); }.admin-sidebar nav span { width: 20px; text-align: center; }
.admin-sidebar-footer { margin-top: auto; padding: 18px 10px 4px; display: grid; gap: 3px; border-top: 1px solid rgba(255,255,255,.14); font-size: .8rem; }.admin-sidebar-footer a { color: var(--gold); }
.admin-main { margin-left: 255px; padding: 48px; }
.admin-page-header { margin-bottom: 34px; display: flex; align-items: end; justify-content: space-between; gap: 28px; }.admin-page-header h1 { margin: 8px 0 4px; font: 800 clamp(2.4rem, 4vw, 4rem)/1 "Manrope", sans-serif; letter-spacing: -.055em; }.admin-page-header p { margin: 0; color: var(--muted); }.admin-page-header--compact { align-items: start; }.admin-page-header--compact .back-link { margin-bottom: 22px; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 17px; margin-bottom: 26px; }.stat-grid article { padding: 23px; display: grid; background: #fff; border: 1px solid var(--line); border-radius: 16px; }.stat-grid article > span { color: var(--muted); font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }.stat-grid strong { margin: 11px 0 2px; font: 800 2.35rem "Manrope", sans-serif; }.stat-grid small { color: var(--muted); }
.admin-panel { padding: 26px; background: #fff; border: 1px solid var(--line); border-radius: 17px; }.panel-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }.panel-heading h2, .admin-panel h2 { margin: 0; font: 800 1.15rem "Manrope", sans-serif; }.panel-heading p { margin: 4px 0 0; color: var(--muted); font-size: .86rem; }.panel-heading > span { color: var(--muted); font-size: .8rem; }
.admin-table-wrap { overflow-x: auto; }.admin-table { width: 100%; border-collapse: collapse; text-align: left; }.admin-table th { padding: 11px 14px; color: var(--muted); font-size: .73rem; text-transform: uppercase; letter-spacing: .08em; border-bottom: 1px solid var(--line); }.admin-table td { padding: 16px 14px; border-bottom: 1px solid #ecece7; font-size: .84rem; vertical-align: middle; }.admin-table td:first-child { min-width: 260px; }.admin-table td strong, .admin-table td small { display: block; }.admin-table td small { margin-top: 3px; color: var(--muted); }.status-pill, .featured-pill { display: inline-flex; padding: 5px 8px; border-radius: 999px; font-size: .69rem; font-weight: 800; }.status-pill--published { color: #176148; background: #dff5e9; }.status-pill--draft { color: #786323; background: #fff0bc; }.featured-pill { margin-left: 5px; color: #743e2a; background: #ffe0d5; }
.table-actions { display: flex; align-items: center; gap: 11px; white-space: nowrap; }.table-actions > a, .table-actions summary { color: var(--ink); font-weight: 800; cursor: pointer; }.table-actions details { position: relative; }.table-actions summary { list-style: none; }.action-menu { position: absolute; right: 0; top: 24px; z-index: 5; min-width: 150px; padding: 7px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }.action-menu button { width: 100%; padding: 8px 10px; text-align: left; background: transparent; border: 0; cursor: pointer; }.danger-link { color: #a23f34; }
.editor-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; align-items: start; gap: 22px; }.editor-main { display: grid; gap: 22px; }.editor-sidebar { display: grid; gap: 18px; }.editor-sidebar .admin-panel { display: grid; gap: 18px; }.editor-sidebar h2 { padding-bottom: 12px; border-bottom: 1px solid var(--line); }.content-editor { min-height: 440px; line-height: 1.7; resize: vertical; }.editor-layout label > span { color: var(--muted); font-weight: 400; }.editor-layout label > small { color: var(--muted); font-weight: 400; }.check-label { grid-template-columns: auto 1fr !important; align-items: center; }.check-label input { width: 18px !important; height: 18px; }.profile-panel { max-width: 620px; }

@media (max-width: 1100px) {
  .hero { gap: 35px; }.featured-story { margin-right: 32px; margin-left: 32px; }.stories-section { padding-right: 32px; padding-left: 32px; }.newsletter-band { margin-right: 32px; margin-left: 32px; }
  .article-grid { grid-template-columns: repeat(2, 1fr); }.stat-grid { grid-template-columns: repeat(2, 1fr); }.editor-layout { grid-template-columns: 1fr; }.editor-sidebar { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 780px) {
  .site-header { padding: 22px 20px; }.header-nav a:not(:last-child) { display: none; }.hero { padding: 44px 20px 58px; grid-template-columns: 1fr; }.hero h1 { font-size: clamp(3.3rem, 17vw, 5.6rem); }.hero-art { min-height: 390px; }.topic-strip { padding: 0 20px; margin-bottom: 45px; }.featured-story { margin: 0 20px 75px; grid-template-columns: 1fr; }.featured-visual { min-height: 330px; }.featured-content { padding: 34px 25px; }.stories-section { padding: 0 20px 75px; }.article-grid { grid-template-columns: 1fr; }.section-heading { align-items: start; }.newsletter-band { margin: 0 20px 45px; padding: 42px 28px; grid-template-columns: 1fr; gap: 10px; }.site-footer { padding: 30px 20px; align-items: start; gap: 18px; flex-direction: column; }
  .article-page { padding: 45px 20px 80px; }.article-stage { grid-template-columns: 1fr; gap: 24px; }.share-rail { position: static; }.share-rail .reaction-bar { flex-direction: row; }.article-copy { padding: 36px 8px; }.article-response { padding: 35px 20px; }.article-visual { min-height: 320px; }
  .admin-auth-shell { padding: 34px 24px; grid-template-columns: 1fr; gap: 25px; }.admin-auth-shell > .brand { justify-self: center; }.login-card { padding: 28px 22px; }
  .admin-sidebar { position: static; width: 100%; min-height: auto; padding: 18px; }.admin-sidebar nav { margin-top: 22px; display: flex; overflow-x: auto; }.admin-sidebar nav a { white-space: nowrap; }.admin-sidebar-footer { display: none; }.admin-main { margin-left: 0; padding: 28px 18px; }.admin-page-header { align-items: start; flex-direction: column; }.admin-page-header .button { width: 100%; }.stat-grid { grid-template-columns: 1fr 1fr; }.editor-sidebar { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .hero-art { min-height: 330px; }.hero-art p { left: 100px; top: 24px; font-size: .95rem; }.portrait-one { width: 145px; height: 180px; left: 35px; top: 68px; }.portrait-two { width: 130px; height: 155px; right: 38px; }.search-form { flex-direction: column; }.search-form button { width: 100%; }.story-actions { align-items: flex-start; flex-direction: column; }.stat-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}