/* Lotificadora El Volcán — Manual de Identidad Corporativa */

@font-face{font-family:"Krona One";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/krona-one-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("fonts/inter-latin-wght-normal.woff2") format("woff2")}

:root{
  --white:#FFFFFF;
  --purple:#231942;
  --velvet:#69306D;
  --electric:#8761FF;
  --pink:#EB87A6;
  --cyan:#4D9DE0;

  --bg:#FFFFFF;
  --tint:#F5F3FA;
  --ink:#231942;
  --muted:#5E5678;
  --line:#DAD5E6;
  --line-2:#8E86A6;
  --link:#6A42E8;
  --info:#1F6FB5;
  --ok:#1E7B4F;
  --bad:#B3261E;

  --grad:linear-gradient(180deg,var(--pink) 0%,var(--electric) 100%);
  --grad-h:linear-gradient(90deg,var(--pink) 0%,var(--electric) 100%);
  --shadow-sm:0 1px 2px rgba(35,25,66,.10);
  --shadow-md:0 8px 24px rgba(35,25,66,.14);
  --shadow-lg:0 24px 56px rgba(35,25,66,.22);

  --fd:"Krona One","Arial Black","Helvetica Neue",sans-serif;
  --fs:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --maxw:1180px;
  --pad:clamp(22px,6vw,120px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{background:var(--bg);color:var(--ink);font-family:var(--fs);font-weight:400;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;text-wrap:pretty}
::selection{background:var(--electric);color:#fff}
img{max-width:100%;height:auto}
a{color:var(--link)}
a:focus-visible,button:focus-visible,.sw:focus-visible{outline:2px solid var(--electric);outline-offset:3px}

/* ---------- progress bar ---------- */
.progress{position:fixed;top:0;left:0;height:3px;width:0%;background:var(--grad-h);z-index:200;transition:width .1s linear}

/* ---------- left spine ---------- */
.spine{position:fixed;top:0;left:0;height:100vh;width:46px;z-index:120;display:flex;flex-direction:column;
  align-items:center;justify-content:space-between;padding:26px 0;pointer-events:none;mix-blend-mode:difference}
.spine .bar{width:2px;flex:1;margin:18px 0;background:#fff;opacity:.35;border-radius:2px}
.spine .lbl{writing-mode:vertical-rl;font-size:9.5px;letter-spacing:.42em;text-transform:uppercase;color:#fff;opacity:.7;font-weight:600}
.spine .dot{width:7px;height:7px;border-radius:2px;background:#fff;opacity:.7}

/* ---------- right chapter nav ---------- */
nav.idx{position:fixed;right:26px;top:50%;transform:translateY(-50%);z-index:120;display:flex;flex-direction:column;gap:15px}
nav.idx a{width:10px;height:10px;border-radius:3px;border:1.5px solid var(--line-2);background:var(--bg);transition:.3s;position:relative}
nav.idx a:hover{border-color:var(--electric)}
nav.idx a.on{background:var(--electric);border-color:var(--electric);box-shadow:0 0 0 4px rgba(135,97,255,.18)}
nav.idx a span{position:absolute;right:22px;top:50%;transform:translateY(-50%);white-space:nowrap;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:var(--bg);border:1px solid var(--line);
  padding:4px 8px;border-radius:4px;opacity:0;pointer-events:none;transition:.3s;font-weight:600}
nav.idx a:hover span,nav.idx a:focus-visible span{opacity:1}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
section{position:relative;padding:clamp(80px,13vh,160px) 0;border-top:1px solid var(--line)}
section:first-of-type{border-top:none}
section.alt{background:var(--tint)}

.eyebrow{display:inline-flex;align-items:center;gap:11px;font-size:11px;font-weight:600;letter-spacing:.32em;
  text-transform:uppercase;color:var(--velvet);margin-top:22px}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--grad-h);border-radius:2px}

.chap-no{font-family:var(--fd);font-size:clamp(46px,9vw,104px);line-height:.9;letter-spacing:-.02em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;display:block}

h2.title{font-family:var(--fd);font-weight:400;font-size:clamp(26px,4.4vw,48px);letter-spacing:-.01em;line-height:1.1;
  margin-top:14px;text-wrap:balance}
.lead{font-size:clamp(16px,1.7vw,20px);color:var(--muted);font-weight:300;max-width:62ch;margin-top:22px;line-height:1.7}
.lead b{color:var(--ink);font-weight:600}
.note{font-size:14px;color:var(--muted);max-width:68ch;margin-top:14px;line-height:1.65}
.hd{display:block;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.mt-s{margin-top:16px}.mt-m{margin-top:44px}.mt-l{margin-top:60px}

.card{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:clamp(22px,3vw,34px);
  position:relative;overflow:hidden;box-shadow:var(--shadow-sm)}
.card h3{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--velvet);margin-bottom:12px}
.card p{color:var(--muted);font-size:15.5px}

/* ---------- cover ---------- */
.cover{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;border-top:none;
  padding-top:60px;padding-bottom:90px;overflow:hidden;background:var(--purple);color:#fff}
.cover .lots{position:absolute;right:-40px;top:50%;transform:translateY(-50%);width:min(46vw,560px);height:auto;opacity:.9;z-index:0}
.cover .lots rect{rx:4px}
.cover .lots .a{fill:var(--electric)}.cover .lots .b{fill:var(--velvet)}.cover .lots .c{fill:var(--cyan)}
.cover .lots .d{fill:var(--pink)}.cover .lots .e{fill:#2E2256}
.cover .inner{position:relative;z-index:2}
.cover .eyebrow{color:var(--pink);margin-top:0}
.cover .logo{width:min(520px,86%);height:auto;max-width:none;display:block;margin:34px 0 10px}
.cover .tag{font-size:clamp(20px,3.2vw,34px);font-weight:300;letter-spacing:-.01em;color:#fff;margin-top:26px;max-width:22ch;line-height:1.25}
.cover .tag b{font-weight:700;color:var(--pink)}
.cover .meta{display:flex;flex-wrap:wrap;gap:14px 26px;margin-top:54px;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:#B9B2CF;font-weight:500}
.cover .meta span{display:flex;align-items:center;gap:10px}
.cover .meta span::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--grad)}
.scrollcue{position:absolute;bottom:30px;left:var(--pad);font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  color:#B9B2CF;display:flex;align-items:center;gap:10px;z-index:2}
.scrollcue i{width:1px;height:34px;background:linear-gradient(var(--pink),transparent);display:block;animation:cue 2s infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}50.1%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media(max-width:820px){.cover .lots{opacity:.28;width:92vw;right:-30vw}}

/* ---------- 01 brand ---------- */
.manifesto{font-size:clamp(24px,3.4vw,40px);font-weight:300;line-height:1.3;letter-spacing:-.015em;max-width:22ch;margin-top:70px}
.manifesto b{font-weight:700}
.manifesto .g{color:var(--link);font-weight:700}
.mv{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:58px}
.mv .card{border-top:3px solid var(--electric)}
@media(max-width:820px){.mv{grid-template-columns:1fr}}
.values{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;margin-top:26px;background:var(--line);
  border:1px solid var(--line);border-radius:16px;overflow:hidden}
.values .v{background:var(--bg);padding:30px 28px}
.values .v .n{font-family:var(--fd);font-size:12px;color:var(--link);letter-spacing:.06em}
.values .v h4{font-size:19px;font-weight:700;margin:14px 0 8px}
.values .v p{font-size:14px;color:var(--muted)}
.pers{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.chip{border:1px solid var(--line-2);border-radius:8px;padding:11px 18px;font-size:14px;color:var(--muted)}
.chip b{color:var(--ink);font-weight:600}

/* ---------- 02 logo ---------- */
.two{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:820px){.two{grid-template-columns:1fr}}
.logoplate{border-radius:16px;padding:clamp(30px,5vw,64px);display:flex;align-items:center;justify-content:center;
  min-height:210px;position:relative;border:1px solid var(--line)}
.plate-light{background:var(--white)}
.plate-tint{background:var(--tint)}
.plate-dark{background:var(--purple);border-color:var(--purple)}
.plate-velvet{background:var(--velvet);border-color:var(--velvet)}
.logoplate img{max-width:80%;max-height:130px;width:auto;height:auto;display:block}
.logoplate img.tall{max-height:200px}
.logoplate img.iso{max-height:140px}
.platecap{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap}
.platecap b{font-size:13px;font-weight:600}
.platecap span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

.anatomy{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;margin-top:24px}
@media(max-width:820px){.anatomy{grid-template-columns:1fr}}
.anatomy .stage{background:var(--tint);border:1px solid var(--line);border-radius:16px;padding:40px;display:flex;
  align-items:center;justify-content:center;min-height:230px}
.anatomy .stage img{max-width:78%;width:auto;height:auto}
.deflist{display:flex;flex-direction:column;gap:22px}
.deflist .d{display:flex;gap:16px;align-items:flex-start}
.deflist .d .k{flex:0 0 auto;width:34px;height:34px;border-radius:8px;background:var(--purple);display:flex;align-items:center;
  justify-content:center;font-family:var(--fd);font-size:13px;color:#fff}
.deflist .d h4{font-size:17px;font-weight:700}
.deflist .d p{font-size:14.5px;color:var(--muted);margin-top:4px}

/* ---------- 03 construction ---------- */
.clearbox{position:relative;background:var(--tint);border:1px solid var(--line);border-radius:16px;padding:56px;display:flex;
  align-items:center;justify-content:center;min-height:260px;overflow:hidden;max-width:520px}
.clearbox .frame{position:relative;padding:44px}
.clearbox .frame::before{content:"";position:absolute;inset:0;border:1.5px dashed var(--electric);border-radius:6px}
.clearbox .frame img{width:250px;max-width:100%;display:block;position:relative;z-index:2}
.clearbox .x{position:absolute;font-family:var(--fd);font-size:11px;color:var(--link)}
.clearbox .x.t{top:22px;left:50%;transform:translateX(-50%)}
.clearbox .x.l{left:22px;top:50%;transform:translateY(-50%)}
@media(max-width:480px){.clearbox{padding:40px 30px}.clearbox .frame{padding:7vw}.clearbox .x.t{top:14px}.clearbox .x.l{left:10px}}
.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin-top:22px}
.spec{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:22px}
.spec .num{font-family:var(--fd);font-size:24px;color:var(--ink)}
.spec .lb{font-size:12px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-top:8px}
.minsizes{display:flex;gap:32px;align-items:flex-end;flex-wrap:wrap;margin-top:16px}
.minsizes .m{text-align:center}
.minsizes .m .box{background:var(--bg);border:1px solid var(--line);border-radius:12px;display:flex;align-items:center;
  justify-content:center;padding:18px;min-height:84px}
.minsizes .m img{display:block}
.minsizes .m span{display:block;font-size:12px;color:var(--muted);margin-top:10px;letter-spacing:.06em}

/* ---------- 04 usage ---------- */
.dogrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;margin-top:26px}
.mis{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--bg)}
.mis .art{height:130px;display:flex;align-items:center;justify-content:center;background:var(--tint);position:relative;overflow:hidden}
.mis .art img{max-width:66%;max-height:74px}
.mis .art.on-electric{background:var(--electric)}
.mis .art.on-white{background:var(--white)}
.mis .rot{transform:rotate(-12deg)}
.mis .stretch{transform:scaleX(1.5)}
.mis .fade{opacity:.25}
.mis .recolor{filter:hue-rotate(140deg) saturate(1.8)}
.mis .shadowed{filter:drop-shadow(4px 6px 3px rgba(0,0,0,.55))}
.mis .cap{padding:14px 16px;display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink)}
.mis .cap .ic{flex:0 0 auto;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;color:#fff}
.mis.bad .cap .ic{background:var(--bad)}
.mis.good .cap .ic{background:var(--ok)}
.mis.good{border-color:var(--ok)}
.appicons{display:flex;gap:26px;flex-wrap:wrap;margin-top:20px}
.appicons figure{text-align:center}
.appicons figcaption{margin-top:12px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.appic{width:118px;height:118px;border-radius:26px;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md)}
.appic img{width:58%;height:auto;display:block}
.appic.p{background:var(--purple)}
.appic.w{background:var(--white);border:1px solid var(--line)}
.appic.t{background:var(--tint)}
.appic.ci{border-radius:50%}

/* ---------- 05 colour ---------- */
.swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:26px}
.sw{border:1px solid var(--line);border-radius:16px;overflow:hidden;cursor:pointer;transition:transform .25s,box-shadow .25s;
  background:var(--bg);text-align:left;font:inherit;color:inherit;display:block;width:100%}
.sw:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.sw .fill{height:150px;position:relative;display:block}
.sw .fill.edge{border-bottom:1px solid var(--line)}
.sw .fill .copy{position:absolute;top:12px;right:12px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  background:rgba(35,25,66,.78);color:#fff;padding:5px 9px;border-radius:6px;opacity:0;transition:.25s}
.sw:hover .fill .copy,.sw:focus-visible .fill .copy{opacity:1}
.sw .info{padding:18px 20px;display:block}
.sw .nm{font-size:16px;font-weight:700;display:block}
.sw .rl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:2px;display:block}
.sw .vals{margin-top:14px;display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.sw .vals b{color:var(--ink);font-weight:600;display:inline-block;width:48px}
.gradband{margin-top:22px;border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.gradband .bar{height:110px;background:var(--grad)}
.gradband .cap{padding:18px 22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;background:var(--bg);font-size:13px;color:var(--muted)}
.gradband .cap b{color:var(--ink)}
.proportion{display:flex;height:64px;border-radius:12px;overflow:hidden;margin-top:20px;border:1px solid var(--line)}
.proportion div{display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;letter-spacing:.06em;text-align:center;padding:0 6px}
.proportion .p1{flex:6;background:var(--white);color:var(--purple);border-right:1px solid var(--line)}
.proportion .p2{flex:2.5;background:var(--purple);color:#fff}
.proportion .p3{flex:1;background:var(--velvet);color:#fff}
.proportion .p4{flex:.5;background:var(--grad)}
@media(max-width:960px){.proportion{flex-direction:column;height:auto}.proportion .p1{min-height:120px;border-right:none;border-bottom:1px solid var(--line)}
  .proportion .p2{min-height:56px}.proportion .p3{min-height:34px}.proportion .p4{min-height:16px}}
.legible{width:100%;border-collapse:collapse;margin-top:20px;font-size:14px}
.legible th,.legible td{text-align:left;padding:14px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.legible th{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.legible td:last-child{color:var(--muted)}
.legible .dot{display:inline-block;width:18px;height:18px;border-radius:4px;vertical-align:-4px;margin-right:10px;border:1px solid var(--line)}
.legible code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
.tablewrap{overflow-x:auto}
.status{display:inline-flex;align-items:center;gap:8px;height:24px;padding:0 8px;border-radius:4px;font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--purple)}
.status::before{content:"";width:8px;height:8px;border-radius:2px;background:currentColor}
.status.av{background:var(--cyan)}
.status.re{background:var(--pink)}.status.re::before{background:transparent;box-shadow:inset 0 0 0 2px currentColor}
.status.so{background:var(--muted);color:#fff}.status.so::before{height:2px;border-radius:0}
.statusrow{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}

/* ---------- 06 typography ---------- */
.tf-hero{border:1px solid var(--line);border-radius:18px;background:var(--tint);padding:clamp(30px,5vw,56px);margin-top:26px}
.tf-hero.dark{background:var(--purple);border-color:var(--purple);color:#fff}
.tf-hero .big{font-size:clamp(64px,15vw,170px);line-height:.9}
.tf-hero .big.kr{font-family:var(--fd);letter-spacing:-.02em}
.tf-hero .big.in{font-weight:700;letter-spacing:-.05em}
.tf-hero .sub{margin-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:var(--muted);font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;font-weight:500}
.tf-hero.dark .sub{color:#B9B2CF}
.weights{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;margin-top:22px;background:var(--line);
  border:1px solid var(--line);border-radius:14px;overflow:hidden}
.weights .w{background:var(--bg);padding:22px 24px}
.weights .w .sample{font-size:34px;line-height:1}
.weights .w .name{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:12px}
.w300{font-weight:300}.w400{font-weight:400}.w500{font-weight:500}.w600{font-weight:600}.w700{font-weight:700}
.scale{margin-top:22px;border-top:1px solid var(--line)}
.scale .row{display:grid;grid-template-columns:150px 1fr;gap:20px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--line)}
@media(max-width:640px){.scale .row{grid-template-columns:1fr;gap:8px}}
.scale .row .meta{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.scale .row > div:last-child{min-width:0;overflow-wrap:anywhere}
.s-eb{font-size:12px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--velvet)}
.s-h1{font-family:var(--fd);font-size:clamp(26px,4.6vw,48px);line-height:1.1;letter-spacing:-.01em}
.s-h2{font-family:var(--fd);font-size:clamp(20px,3vw,28px);line-height:1.2}
.s-lead{font-size:20px;font-weight:300;line-height:1.5;color:var(--muted)}
.s-body{font-size:16px;font-weight:400;color:var(--ink);max-width:62ch}
.s-data{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums}
.s-cap{font-size:12px;font-weight:500;letter-spacing:.02em;color:var(--muted)}

/* ---------- 07 applications ---------- */
.apps{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:26px}
@media(max-width:820px){.apps{grid-template-columns:1fr}}
.app{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--bg);min-width:0;display:flex;flex-direction:column}
.app .stage{flex:1;padding:40px 24px;min-height:300px;display:flex;align-items:center;justify-content:center;background:var(--tint);overflow:hidden}
.app .lbl{padding:16px 22px;border-top:1px solid var(--line);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

.bizset{position:relative;width:min(340px,100%);height:230px}
.bizcard{position:absolute;width:82%;aspect-ratio:1.667/1;border-radius:10px;box-shadow:var(--shadow-lg);overflow:hidden}
.bizcard.front{left:0;top:0;background:var(--purple);display:flex;align-items:center;justify-content:center}
.bizcard.front img{height:58%;width:auto}
.bizcard.back{right:0;bottom:0;background:#fff;padding:16px 18px;display:flex;flex-direction:column;justify-content:space-between}
.bizcard.back img{height:24px;width:auto;align-self:flex-start}
.bizcard.back .who small{display:block;font-size:8px;letter-spacing:.28em;text-transform:uppercase;color:var(--velvet);font-weight:500}
.bizcard.back .who b{font-family:var(--fd);font-weight:400;font-size:13px;display:block;margin-top:2px}
.bizcard.back .ct{font-size:9px;line-height:1.5;font-weight:500;color:var(--ink)}
.bizcard.back::after{content:"";position:absolute;right:0;top:0;bottom:0;width:6px;background:var(--grad)}

.letter{width:220px;aspect-ratio:1/1.414;background:#fff;border-radius:6px;box-shadow:var(--shadow-lg);padding:24px;position:relative;overflow:hidden}
.letter img{width:118px}
.letter .rule{height:3px;width:100%;background:var(--grad-h);border-radius:3px;margin:16px 0}
.letter .txt{height:6px;border-radius:4px;background:#E7E3F0;margin-top:8px}
.letter .txt.a{width:90%}.letter .txt.b{width:78%}.letter .txt.c{width:84%}
.letter .foot{position:absolute;bottom:18px;left:24px;right:24px;font-size:6.5px;letter-spacing:.06em;color:var(--muted);
  border-top:1px solid var(--line);padding-top:6px}

.avset{display:flex;gap:24px;align-items:center;flex-wrap:wrap;justify-content:center}
.avset .appic{width:130px;height:130px}

.post{width:min(280px,100%);aspect-ratio:1/1;background:var(--purple);color:#fff;border-radius:6px;padding:24px;position:relative;
  overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-lg)}
.post .plogo{height:28px;width:auto;align-self:flex-start;position:relative;z-index:1}
.post svg{position:absolute;right:-14px;top:20px;width:110px;height:auto}
.post svg rect{rx:4px}
.post .g1{fill:var(--electric)}.post .g2{fill:var(--velvet)}.post .g3{fill:var(--cyan)}
.post .txt{margin-top:auto;position:relative;z-index:1}
.post .txt small{font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--pink);font-weight:500}
.post .txt b{display:block;font-family:var(--fd);font-weight:400;font-size:17px;line-height:1.25;margin-top:6px;max-width:190px}
.post .cta{margin-top:14px;display:flex;gap:10px;align-items:center;position:relative;z-index:1;font-size:11px;font-weight:600}
.post .cta span:first-child{background:#fff;color:var(--purple);padding:6px 12px;border-radius:6px}

.mapmock{width:100%;max-width:400px;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow-md)}
.mapmock .top{height:46px;display:flex;align-items:center;padding:0 16px;gap:8px;border-bottom:1px solid var(--line)}
.mapmock .top img{height:20px}
.mapmock .top .pill{margin-left:auto;background:var(--velvet);color:#fff;font-size:10px;font-weight:600;padding:6px 10px;border-radius:6px}
.mapmock .body{padding:16px}
.mapmock .ttl{font-family:var(--fd);font-size:13px}
.mapmock .ex{font-size:10px;color:var(--muted);margin-top:2px}
.lotgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:12px}
.lotgrid i{aspect-ratio:1/1;border-radius:4px;font-style:normal;font-size:9px;font-weight:700;display:flex;align-items:center;
  justify-content:center;color:var(--purple);font-variant-numeric:tabular-nums}
.lotgrid .av{background:var(--cyan)}
.lotgrid .re{background:var(--pink);box-shadow:inset 0 0 0 2px var(--purple)}
.lotgrid .so{background:var(--muted);color:#fff;text-decoration:line-through}
.lotgrid .w2{grid-column:span 2;aspect-ratio:auto}
.lotgrid .st{background:var(--tint);grid-column:1/-1;aspect-ratio:auto;height:14px;font-size:7px;letter-spacing:.3em;color:var(--muted);font-weight:600}
.mapmock .legend{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.mapmock .legend .status{height:20px;font-size:10px}

.sign{width:min(300px,100%);position:relative;padding-bottom:46px}
.sign .board{background:var(--purple);color:#fff;border-radius:6px;padding:22px;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.sign .board::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--grad-h)}
.sign .board img{height:30px;width:auto;display:block}
.sign .board b{display:block;font-family:var(--fd);font-weight:400;font-size:22px;line-height:1.15;margin-top:18px}
.sign .board span{display:block;font-size:20px;font-weight:700;margin-top:12px;font-variant-numeric:tabular-nums;color:var(--pink)}
.sign .board small{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#B9B2CF;margin-top:4px}
.sign .leg{position:absolute;bottom:0;width:8px;height:46px;background:var(--line-2)}
.sign .leg.l{left:18%}.sign .leg.r{right:18%}

/* ---------- 08 voice ---------- */
.voice{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:26px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
@media(max-width:640px){.voice{grid-template-columns:1fr}}
.voice .col{background:var(--bg);padding:30px}
.voice .col h4{font-size:12px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:18px}
.voice .yes h4{color:var(--ok)}.voice .no h4{color:var(--bad)}
.voice ul{list-style:none;display:flex;flex-direction:column;gap:13px}
.voice li{font-size:14.5px;color:var(--ink);padding-left:24px;position:relative;line-height:1.5}
.voice li::before{position:absolute;left:0;font-weight:800}
.voice .yes li::before{content:"\2713";color:var(--ok)}
.voice .no li::before{content:"\2715";color:var(--bad)}
.rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:22px}
.rule{border:1px solid var(--line);border-radius:12px;padding:20px;background:var(--bg)}
.rule .k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.rule .v{font-size:20px;font-weight:700;margin-top:8px;font-variant-numeric:tabular-nums}
.rule .x{font-size:13px;color:var(--muted);margin-top:6px}

.contact{margin-top:60px;border-radius:20px;overflow:hidden;background:var(--purple);color:#fff}
.contact .top{padding:clamp(34px,5vw,56px);display:flex;flex-direction:column;align-items:flex-start;gap:26px}
.contact .top img{width:min(340px,80%);height:auto}
.contact .say{font-size:clamp(20px,3vw,30px);font-weight:300;max-width:24ch;line-height:1.3}
.contact .say b{font-weight:700;color:var(--pink)}
.contact .links{display:flex;flex-wrap:wrap;gap:12px}
.contact .links a,.contact .links span{border:1px solid #8478B0;border-radius:8px;padding:12px 18px;font-size:14px;color:#fff;
  text-decoration:none;transition:.25s;font-weight:500;overflow-wrap:anywhere}
.contact .links a:hover{background:#fff;color:var(--purple);border-color:#fff}
.contact .bar{height:6px;background:var(--grad-h)}
.foot{padding:40px 0 20px;text-align:center;color:var(--muted);font-size:12px;letter-spacing:.08em}

/* ---------- reveal (only when JS is running) ---------- */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}.scrollcue i{animation:none}.sw{transition:none}}

.copytoast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--purple);color:#fff;
  padding:12px 22px;border-radius:8px;font-size:13px;font-weight:600;opacity:0;transition:.3s;z-index:300;pointer-events:none;
  box-shadow:var(--shadow-lg)}
.copytoast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media(max-width:960px){.spine{display:none}nav.idx{display:none}}
@media print{.spine,nav.idx,.progress,.scrollcue,.copytoast{display:none}.js .reveal{opacity:1;transform:none}section{break-inside:avoid}}