/* ==========================================================================
   TOP EDU PREP — The English Desk
   Design tokens
   ========================================================================== */
:root{
  /* default theme: crimson (bold color on clean white base) */
  --ink:        #1A1A2E;
  --ink-2:      #26263F;
  --paper:      #FAFAFA;
  --paper-2:    #F1F1F1;
  --line:       #DFDFDF;
  --text:       #1A1A1A;
  --text-mute:  #666666;
  --brass:      #E63946;
  --brass-dark: #C1121F;
  --brass-glow: rgba(230,57,70,.28);
  --cream:      #FFFFFF;

  --sat:  #E63946;
  --sat-tint: #FDEAEA;
  --ib:   #2A9D8F;
  --ib-tint: #E3F5F2;
  --ap:   #3A86FF;
  --ap-tint: #E8F0FF;

  --serif: "Newsreader", "Noto Serif KR", serif;
  --sans:  "IBM Plex Sans KR", "IBM Plex Sans", -apple-system, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, monospace;

  --max: 1180px;
  --radius: 3px;
}

html[data-theme="cobalt"]{
  --ink:#0B132B; --ink-2:#1C2541; --paper:#F7F9FC; --paper-2:#EDF1F8; --line:#D7E0EE;
  --text:#12172B; --text-mute:#5A6478; --brass:#3A86FF; --brass-dark:#1B5FD1;
  --brass-glow:rgba(58,134,255,.28);
  --sat:#FF5A5F; --sat-tint:#FFEBEC; --ib:#06D6A0; --ib-tint:#E3FBF4; --ap:#3A86FF; --ap-tint:#E8F0FF;
}
html[data-theme="amber"]{
  --ink:#1C1C1C; --ink-2:#2E2E2E; --paper:#FFFDF7; --paper-2:#FFF3D6; --line:#F0DDA6;
  --text:#241C0A; --text-mute:#7A6C4A; --brass:#F4A100; --brass-dark:#C97E00;
  --brass-glow:rgba(244,161,0,.3);
  --sat:#E63946; --sat-tint:#FDEAEA; --ib:#2A9D8F; --ib-tint:#E3F5F2; --ap:#3A86FF; --ap-tint:#E8F0FF;
}
html[data-theme="emerald"]{
  --ink:#0B2F24; --ink-2:#153F31; --paper:#F5FAF7; --paper-2:#E4F3EB; --line:#C7E5D5;
  --text:#12291F; --text-mute:#5C7A6C; --brass:#06D6A0; --brass-dark:#03A67A;
  --brass-glow:rgba(6,214,160,.28);
  --sat:#E63946; --sat-tint:#FDEAEA; --ib:#06D6A0; --ib-tint:#E3FBF4; --ap:#3A86FF; --ap-tint:#E8F0FF;
}
html{transition:background .4s ease;}
body{transition:background-color .4s ease, color .4s ease;}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%; display:block;}
a{color:inherit;}
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:600;
  color:var(--ink);
  line-height:1.22;
  margin:0 0 .5em;
}
h1{font-size:clamp(2.1rem, 3.6vw, 3.4rem); font-weight:500;}
h2{font-size:clamp(1.5rem, 2.4vw, 2.15rem);}
h3{font-size:1.25rem;}
p{margin:0 0 1.1em; max-width:66ch; color:var(--text);}
.mute{color:var(--text-mute);}

:focus-visible{
  outline:3px solid var(--brass);
  outline-offset:2px;
}

.wrap{max-width:var(--max); margin:0 auto; padding:0 24px;}
.section{padding:72px 0;}
.section-tight{padding:40px 0;}

/* ---------- skip link ---------- */
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--ink); color:#fff;
  padding:10px 16px; z-index:200;
}
.skip-link:focus{left:12px; top:12px;}

/* ---------- header / nav ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(246,244,239,0.94);
  backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid var(--line);
}
.header-row{
  display:flex; align-items:center; justify-content:space-between;
  height:76px;
}
.logo{
  font-family:var(--serif); font-size:1.28rem; font-weight:600; letter-spacing:.01em;
  text-decoration:none; color:var(--ink); display:flex; align-items:baseline; gap:8px;
}
.logo .mark{
  font-family:var(--mono); font-size:.62rem; color:var(--brass-dark);
  border:1px solid var(--brass); padding:2px 6px; letter-spacing:.06em;
}
.logo .sub{font-family:var(--sans); font-size:.68rem; color:var(--text-mute); letter-spacing:.02em; font-weight:400;}

.nav-main{display:flex; align-items:center; gap:6px;}
.nav-main > a, .nav-main > .has-drop > button{
  font-size:.94rem; padding:10px 14px; text-decoration:none; color:var(--ink);
  background:none; border:none; font-family:var(--sans); cursor:pointer;
  border-bottom:2px solid transparent;
}
.nav-main > a:hover, .nav-main > .has-drop > button:hover,
.nav-main > a.active{border-bottom-color:var(--brass);}
.has-drop{position:relative;}
.dropdown{
  position:absolute; top:100%; left:0; min-width:230px;
  background:#fff; border:1px solid var(--line); box-shadow:0 14px 30px rgba(22,33,62,.09);
  padding:8px; display:none; flex-direction:column;
}
.has-drop:hover .dropdown, .has-drop:focus-within .dropdown{display:flex;}
.dropdown a{
  display:flex; align-items:center; gap:8px; padding:10px 12px; text-decoration:none;
  color:var(--text); font-size:.92rem; border-radius:2px;
}
.dropdown a:hover{background:var(--paper-2);}
.tag-dot{width:8px; height:8px; border-radius:50%; flex:none;}
.tag-dot.sat{background:var(--sat);} .tag-dot.ib{background:var(--ib);} .tag-dot.ap{background:var(--ap);}

.btn{
  position:relative; display:inline-flex; align-items:center; gap:8px;
  font-family:var(--sans); font-size:.92rem; font-weight:600;
  padding:11px 20px; text-decoration:none; border:1px solid var(--ink);
  color:#fff; background:var(--ink); border-radius:var(--radius);
  cursor:pointer; overflow:hidden; z-index:0;
}
.btn::before{
  content:""; position:absolute; inset:0; background:var(--ink-2);
  transform:translateX(-101%); transition:transform .32s cubic-bezier(.2,.8,.2,1); z-index:-1;
}
.btn:hover::before{transform:translateX(0);}
.btn-outline{background:transparent; color:var(--ink); border-color:var(--ink);}
.btn-outline::before{background:var(--ink);}
.btn-outline:hover{color:#fff;}
.btn-brass{background:var(--brass); border-color:var(--brass); color:#1B1204;}
.btn-brass::before{background:var(--brass-dark);}
.btn-brass:hover{color:#fff;}

/* ---------- scroll reveal (single consistent choreography, on scroll) ---------- */
.reveal-onscroll{
  opacity:0; transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.reveal-onscroll.in{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .reveal-onscroll{opacity:1; transform:none; transition:none;}
}

.nav-toggle{display:none; background:none; border:1px solid var(--ink); padding:8px 10px; cursor:pointer;}

@media (max-width:920px){
  .nav-main{
    position:fixed; inset:76px 0 0 0; background:var(--paper); flex-direction:column;
    align-items:stretch; padding:18px; transform:translateX(100%); transition:transform .28s ease;
    overflow-y:auto;
  }
  .nav-main.open{transform:translateX(0);}
  .nav-main > a, .nav-main > .has-drop > button{width:100%; text-align:left; padding:14px 6px; border-bottom:1px solid var(--line);}
  .dropdown{position:static; display:none; box-shadow:none; border:none; padding-left:12px;}
  .has-drop.open .dropdown{display:flex;}
  .nav-toggle{display:block;}
  .header-cta{display:none;}
}

/* ---------- ticker strip (signature motion, once) ---------- */
.ticker-strip{
  background:var(--ink); color:var(--cream); overflow:hidden; white-space:nowrap;
  border-bottom:1px solid var(--brass);
}
.ticker-track{
  display:inline-flex; align-items:center; gap:0;
  animation:ticker 32s linear infinite;
  will-change:transform;
}
.ticker-strip:hover .ticker-track{animation-play-state:paused;}
.ticker-track span{
  font-family:var(--mono); font-size:.76rem; letter-spacing:.03em; padding:10px 28px;
  display:inline-flex; align-items:center; gap:10px;
}
.ticker-track span::after{content:"◆"; color:var(--brass); font-size:.55rem; margin-left:28px;}
@keyframes ticker{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@media (prefers-reduced-motion: reduce){
  .ticker-track{animation:none;}
}

/* ---------- hero (pastel stage + report-card motif) ---------- */
.hero{
  padding:88px 0 104px; overflow:hidden; position:relative;
  background:
    radial-gradient(ellipse 900px 500px at 85% -10%, var(--paper-2), transparent 60%),
    var(--paper);
}
.hero::before{
  content:""; position:absolute; inset:0; opacity:.6; pointer-events:none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(to bottom, black, transparent 78%);
  opacity:.35;
}
.hero .wrap{position:relative;}
.hero h1 .accent{color:var(--brass-dark); font-style:italic;}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;}
@media (max-width:920px){.hero-grid{grid-template-columns:1fr;}}

.eyebrow-line{
  display:flex; align-items:center; gap:10px; margin-bottom:18px;
  font-family:var(--mono); font-size:.74rem; color:var(--brass-dark); letter-spacing:.02em;
}
.eyebrow-line::before{content:""; width:26px; height:1px; background:var(--brass-dark);}

.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:28px;}

.stat-row{display:flex; gap:38px; margin-top:44px; flex-wrap:wrap;}
.stat-row .num{font-family:var(--serif); font-size:2.1rem; color:var(--brass-dark); display:block; line-height:1;}
.stat-row .label{font-size:.8rem; color:var(--text-mute); margin-top:6px; display:block;}

/* report card visual — signature entrance */
.report-card{
  position:relative; background:#fff; border:1px solid var(--line);
  padding:30px 28px 26px; max-width:400px; margin-left:auto;
  transform:rotate(2.4deg);
  box-shadow:0 26px 48px rgba(20,20,30,.14), 0 0 0 1px rgba(255,255,255,.6) inset;
  animation:card-drop .9s cubic-bezier(.2,.9,.25,1.15) .15s both;
  transition:transform .35s ease, box-shadow .35s ease;
}
.report-card:hover{
  transform:rotate(0deg) translateY(-4px);
  box-shadow:0 32px 56px rgba(20,20,30,.18), 0 0 0 2px var(--brass-glow);
}
@keyframes card-drop{
  0%{opacity:0; transform:translateY(-40px) rotate(-6deg) scale(.92);}
  100%{opacity:1; transform:rotate(2.4deg) scale(1);}
}
@media (prefers-reduced-motion: reduce){
  .report-card{animation:none;}
}
.report-card::before{
  content:""; position:absolute; top:-14px; left:50%; transform:translateX(-50%) rotate(-2deg);
  width:34px; height:14px; background:var(--brass); opacity:.95;
}
.report-card .rc-head{
  display:flex; justify-content:space-between; align-items:baseline;
  border-bottom:1px solid var(--line); padding-bottom:10px; margin-bottom:14px;
}
.report-card .rc-head span:first-child{font-family:var(--serif); font-size:1.05rem; color:var(--ink);}
.report-card .rc-head span:last-child{font-family:var(--mono); font-size:.72rem; color:var(--text-mute);}
.report-card table{width:100%; border-collapse:collapse; font-size:.88rem;}
.report-card td{padding:8px 0; border-bottom:1px dashed var(--line);}
.report-card td:last-child{text-align:right; font-family:var(--mono); color:var(--ink); font-weight:600;}
.report-card tr:last-child td{border-bottom:none;}
.report-card .rc-foot{
  margin-top:14px; padding-top:12px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:.72rem; color:var(--text-mute); display:flex; justify-content:space-between;
}

/* ---------- section headers ---------- */
.section-head{max-width:640px; margin-bottom:44px;}
.section-head .eyebrow-line{margin-bottom:12px;}

/* ---------- pillar / philosophy blocks ---------- */
.pillars{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line); border-left:1px solid var(--line);}
.pillar{
  border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:28px 24px;
  position:relative; transition:background .25s ease;
}
.pillar::before{
  content:""; position:absolute; top:0; left:0; width:0; height:2px; background:var(--brass);
  transition:width .3s ease;
}
.pillar:hover{background:var(--paper-2);}
.pillar:hover::before{width:100%;}
.pillar .pi-index{font-family:var(--mono); font-size:.74rem; color:var(--brass-dark); display:block; margin-bottom:10px;}
.pillar h3{font-size:1.05rem; margin-bottom:8px;}
.pillar p{font-size:.92rem; margin:0;}
@media (max-width:900px){.pillars{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.pillars{grid-template-columns:1fr;}}

/* ---------- exam badges / cards ---------- */
.exam-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
@media (max-width:880px){.exam-grid{grid-template-columns:1fr;}}
.exam-card{
  border:1px solid var(--line); background:#fff; padding:0; position:relative; overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease;
}
.exam-card:hover{transform:translateY(-6px); box-shadow:0 22px 40px rgba(22,33,62,.14);}
.exam-card .band{height:6px; transition:height .25s ease;}
.exam-card:hover .band{height:10px;}
.exam-card.sat .band{background:var(--sat);} .exam-card.ib .band{background:var(--ib);} .exam-card.ap .band{background:var(--ap);}
.exam-card-body{padding:26px 24px 24px;}
.exam-tag{font-family:var(--mono); font-size:.7rem; letter-spacing:.03em; padding:3px 8px; display:inline-block; margin-bottom:12px;}
.exam-card.sat .exam-tag{color:var(--sat); background:var(--sat-tint);}
.exam-card.ib .exam-tag{color:var(--ib); background:var(--ib-tint);}
.exam-card.ap .exam-tag{color:var(--ap); background:var(--ap-tint);}
.exam-card ul{margin:14px 0 18px; padding-left:18px; font-size:.9rem; color:var(--text-mute);}
.exam-card li{margin-bottom:6px;}
.link-arrow{font-size:.9rem; font-weight:600; text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:2px;}

/* ---------- campus strip ---------- */
.campus-strip{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--ink); border-bottom:1px solid var(--ink);}
@media (max-width:820px){.campus-strip{grid-template-columns:repeat(2,1fr);}}
.campus-cell{padding:22px 20px; border-right:1px solid var(--line);}
.campus-cell:last-child{border-right:none;}
.campus-cell .c-name{font-family:var(--serif); color:var(--ink); font-size:1.05rem; display:block; margin-bottom:4px;}
.campus-cell .c-loc{font-size:.86rem; color:var(--text-mute);}

/* ---------- blog list ---------- */
.post-list{display:flex; flex-direction:column;}
.post-row{
  display:grid; grid-template-columns:120px 1fr auto; gap:22px; align-items:baseline;
  padding:22px 4px; border-bottom:1px solid var(--line); text-decoration:none; color:inherit;
  transition:padding-left .25s ease, background .25s ease;
}
.post-row:hover{padding-left:14px; background:var(--paper-2);}
.post-row:hover .post-title{color:var(--brass-dark);}
.post-row .p-date{font-family:var(--mono); font-size:.78rem; color:var(--text-mute);}
.post-title{font-family:var(--serif); font-size:1.18rem; color:var(--ink); margin:0 0 4px;}
.post-excerpt{font-size:.9rem; color:var(--text-mute); margin:0;}
.post-cat{font-family:var(--mono); font-size:.68rem; padding:3px 8px; white-space:nowrap; height:fit-content;}
@media (max-width:700px){.post-row{grid-template-columns:1fr; gap:6px;}}

/* ---------- article ---------- */
.article-head{max-width:760px; margin:0 auto 40px;}
.article-body{max-width:720px; margin:0 auto;}
.article-body p{max-width:none; font-size:1.04rem;}
.article-body h2{margin-top:1.6em;}
.article-body ul, .article-body ol{max-width:none; font-size:1.02rem; padding-left:22px;}
.article-body li{margin-bottom:.4em;}
.byline{font-family:var(--mono); font-size:.8rem; color:var(--text-mute); display:flex; gap:14px; flex-wrap:wrap;}
.pull-callout{
  border-left:3px solid var(--brass); background:var(--paper-2); padding:18px 22px; margin:28px 0;
}
.pull-callout p{margin:0; font-size:.98rem;}
.cta-block{
  background:var(--ink); color:#fff; padding:36px 32px; margin-top:48px;
}
.cta-block h3{color:#fff;}
.cta-block p{color:#D9DCE8;}
.cta-block .btn-brass{margin-top:12px;}

/* ---------- footer ---------- */
.site-footer{background:var(--ink); color:#CFD3E0; padding:56px 0 28px; margin-top:80px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px;}
@media (max-width:820px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr;}}
.site-footer h4{color:#fff; font-family:var(--sans); font-size:.86rem; letter-spacing:.02em; margin-bottom:14px;}
.site-footer a{color:#B7BCD1; text-decoration:none; font-size:.9rem; display:block; margin-bottom:9px;}
.site-footer a:hover{color:#fff;}
.footer-bottom{
  border-top:1px solid #2C3B63; margin-top:40px; padding-top:20px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:.8rem; color:#8993B3;
}

/* ---------- breadcrumb ---------- */
.crumb{font-size:.82rem; color:var(--text-mute); margin-bottom:18px;}
.crumb a{text-decoration:none; color:var(--text-mute);}
.crumb a:hover{color:var(--ink);}

/* ---------- 404 ---------- */
.error-wrap{min-height:60vh; display:flex; flex-direction:column; justify-content:center; align-items:flex-start;}
.error-code{font-family:var(--mono); font-size:.9rem; color:var(--brass-dark);}

/* ---------- theme + layout toggle (site-wide, floating control panel) ---------- */
.control-panel{
  position:fixed; bottom:20px; left:20px; z-index:250;
  display:flex; flex-direction:column; gap:9px;
}
.control-btn{
  display:flex; align-items:center; gap:9px;
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:8px 16px 8px 8px; box-shadow:0 10px 26px rgba(20,20,30,.16);
  cursor:pointer; font-family:var(--sans); font-size:.82rem; font-weight:500; color:var(--ink);
  transition:transform .2s ease, box-shadow .2s ease, background .4s ease, color .4s ease, border-color .4s ease;
}
.control-btn:hover{transform:translateY(-2px); box-shadow:0 14px 32px rgba(20,20,30,.22);}
.control-btn .swatch{
  width:20px; height:20px; border-radius:50%; flex:none;
  background:conic-gradient(from 200deg, var(--sat), var(--ib), var(--ap), var(--brass), var(--sat));
  border:2px solid #fff; box-shadow:0 0 0 1px var(--line);
  transition:background .4s ease;
}
.control-btn .icon-layout{
  width:20px; height:20px; flex:none; display:grid; grid-template-columns:1fr 1fr; gap:2px;
}
.control-btn .icon-layout span{background:var(--brass); border-radius:2px; transition:background .4s ease;}
.control-btn .t-label{white-space:nowrap;}

/* ---------- layout variants ---------- */
/* Layout: stack (centered, single column, editorial-calm) */
html[data-layout="stack"] .hero-grid{grid-template-columns:1fr; text-align:center; justify-items:center;}
html[data-layout="stack"] .hero-actions{justify-content:center;}
html[data-layout="stack"] .stat-row{justify-content:center;}
html[data-layout="stack"] .eyebrow-line{justify-content:center;}
html[data-layout="stack"] p{margin-left:auto; margin-right:auto;}
html[data-layout="stack"] .hero p{max-width:56ch;}
html[data-layout="stack"] .report-card{margin:36px auto 0; transform:rotate(0deg); max-width:420px;}
html[data-layout="stack"] .section-head{margin-left:auto; margin-right:auto; text-align:center;}
html[data-layout="stack"] .exam-grid{grid-template-columns:1fr; max-width:640px; margin:0 auto;}
html[data-layout="stack"] .pillars{grid-template-columns:repeat(2,1fr); max-width:760px; margin:0 auto;}
html[data-layout="stack"] .campus-strip{grid-template-columns:1fr; max-width:520px; margin:0 auto;}
html[data-layout="stack"] .cta-block{text-align:center;}
html[data-layout="stack"] .cta-block p{margin-left:auto; margin-right:auto;}

/* Layout: magazine (asymmetric, horizontal rows, editorial density) */
html[data-layout="magazine"] .hero-grid{grid-template-columns:.95fr 1.05fr;}
html[data-layout="magazine"] .hero-grid > div:first-child{order:2;}
html[data-layout="magazine"] .hero-grid > div:last-child{order:1;}
html[data-layout="magazine"] .report-card{margin:0 auto 0 0; transform:rotate(-2deg);}
html[data-layout="magazine"] .exam-grid{grid-template-columns:1fr; gap:0; border-top:1px solid var(--line);}
html[data-layout="magazine"] .exam-card{
  display:grid; grid-template-columns:8px 1fr; align-items:stretch;
  border:none; border-bottom:1px solid var(--line);
}
html[data-layout="magazine"] .exam-card:hover{transform:none; box-shadow:none; background:var(--paper-2);}
html[data-layout="magazine"] .exam-card .band{height:auto; width:8px;}
html[data-layout="magazine"] .exam-card:hover .band{width:12px; height:auto;}
html[data-layout="magazine"] .exam-card-body{padding:22px 26px;}
html[data-layout="magazine"] .pillars{grid-template-columns:1fr; border-left:none; border-top:none;}
html[data-layout="magazine"] .pillar{border-right:none; border-left:3px solid var(--line); padding:20px 24px;}
html[data-layout="magazine"] .pillar::before{display:none;}
html[data-layout="magazine"] .pillar:hover{border-left-color:var(--brass);}
html[data-layout="magazine"] .campus-strip{grid-template-columns:1fr;}
html[data-layout="magazine"] .campus-cell{border-right:none; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:baseline;}

/* ---------- editor toolbar (index page only) ---------- */
.edit-toolbar{
  position:fixed; bottom:20px; right:20px; z-index:300;
  background:#fff; border:1px solid var(--line); box-shadow:0 12px 30px rgba(22,33,62,.18);
  padding:10px; display:flex; gap:8px; flex-wrap:wrap; max-width:260px;
}
.edit-toolbar button{
  font-family:var(--sans); font-size:.8rem; padding:9px 12px; border:1px solid var(--ink);
  background:#fff; cursor:pointer;
}
.edit-toolbar button.primary{background:var(--ink); color:#fff;}
.edit-toolbar button.primary.on{background:var(--brass); border-color:var(--brass);}
.editing [data-editable]{outline:1px dashed var(--brass); outline-offset:3px; cursor:text;}
.editing [data-editable-img]{outline:2px dashed var(--brass); outline-offset:3px; cursor:pointer; position:relative;}
.img-hint{
  position:absolute; inset:0; background:rgba(22,33,62,.55); color:#fff; display:none;
  align-items:center; justify-content:center; font-size:.78rem; font-family:var(--mono);
}
.editing [data-editable-img] .img-hint{display:flex;}

/* ---------- reveal-on-load (single orchestrated entrance) ---------- */
.reveal-group > *{opacity:0; transform:translateY(14px);}
.reveal-group.ready > *{
  opacity:1; transform:translateY(0);
  transition:opacity .6s ease, transform .6s ease;
}
.reveal-group.ready > *:nth-child(1){transition-delay:.02s;}
.reveal-group.ready > *:nth-child(2){transition-delay:.12s;}
.reveal-group.ready > *:nth-child(3){transition-delay:.22s;}
.reveal-group.ready > *:nth-child(4){transition-delay:.32s;}