/* Point 5: Home-only composition. Shared tokens/components live in era1-design-system.css. */
.era-home{position:relative;min-height:100svh;overflow:hidden;isolation:isolate;background:#110a06}
.world-layer{position:absolute;inset:-2.5%;z-index:0;transform:translate3d(calc(var(--mx,0) * -7px),calc(var(--my,0) * -4px),0) scale(1.045);transition:transform .34s ease-out;will-change:transform}
.world-layer img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 50%;filter:saturate(1.13) contrast(1.07) brightness(.94)}
.world-layer::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 51% 47%,transparent 0 27%,rgba(9,4,2,.05) 48%,rgba(6,3,2,.58) 100%),linear-gradient(90deg,rgba(9,4,2,.62),transparent 26%,transparent 73%,rgba(9,4,2,.64)),linear-gradient(180deg,rgba(8,4,2,.16),transparent 48%,rgba(8,4,2,.48));pointer-events:none}
.ambient-grain{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.12;background-image:repeating-radial-gradient(circle at 0 0,transparent 0,rgba(255,255,255,.42) .45px,transparent .9px);background-size:4px 4px;mix-blend-mode:soft-light}
.sun-flare{position:absolute;z-index:1;left:50.2%;top:29%;width:26vw;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,215,142,.18),rgba(255,143,55,.07) 32%,transparent 67%);filter:blur(13px);pointer-events:none;animation:sunBreath 8s ease-in-out infinite}
.fire-glow{position:absolute;z-index:1;left:51.8%;top:71.5%;width:21vw;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,153,72,.30),rgba(255,82,17,.10) 35%,transparent 69%);filter:blur(13px);pointer-events:none;animation:firePulse 2.8s ease-in-out infinite}
@keyframes sunBreath{50%{opacity:.72;transform:translate(-50%,-50%) scale(1.07)}}
@keyframes firePulse{50%{opacity:.76;transform:translate(-50%,-50%) scale(1.13)}}

.brand-plaque{position:absolute;z-index:6;left:2.7%;top:2.2%;width:min(30.5vw,590px);min-height:94px;padding:13px 34px 15px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;background:linear-gradient(rgba(7,5,4,.10),rgba(7,5,4,.28)),url("era1-stone-clean.jpg") center/cover;border:1px solid rgba(143,88,50,.58);border-radius:44% 39% 45% 36%/27% 24% 21% 26%;box-shadow:0 13px 30px rgba(0,0,0,.62),inset 0 1px rgba(255,192,112,.16),inset 0 -7px 18px rgba(0,0,0,.36);transform:rotate(-.4deg)}
.brand-plaque::before,.brand-plaque::after{content:"";position:absolute;width:10px;height:118%;top:-9%;background:linear-gradient(90deg,#25170f,#8a5832 38%,#392316 70%,#1c120d);border-radius:50%;box-shadow:0 4px 7px #000}
.brand-plaque::before{left:4.2%}.brand-plaque::after{right:4.2%}
.brand-glyphs{height:17px;width:44%;margin-bottom:3px;color:#9b5b31;opacity:.74}.brand-glyphs svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.brand-title{font:900 clamp(22px,1.78vw,36px)/.94 var(--display);letter-spacing:.12em;color:#efbb78;text-shadow:0 3px 3px #000,0 0 18px rgba(236,119,47,.28)}
.brand-sub{margin-top:.55em;font:900 clamp(8px,.63vw,12px)/1.1 var(--ui);letter-spacing:.30em;text-transform:uppercase;color:#c88d57;text-shadow:0 2px 2px #000}

.leather-panel{position:absolute;z-index:7;left:2.9%;top:15.3%;width:min(29.3vw,565px);height:53.5vh;min-height:500px;padding:28px 38px 27px;display:flex;flex-direction:column;align-items:center;text-align:center;color:var(--ink);background:linear-gradient(rgba(250,221,173,.20),rgba(98,52,24,.08)),url("era1-leather-clean.jpg") center/cover;border:1px solid rgba(68,35,17,.78);border-radius:9% 7% 8% 6%/5% 7% 5% 8%;box-shadow:0 24px 62px rgba(0,0,0,.54),inset 0 0 52px rgba(83,42,18,.24),inset 0 1px rgba(255,244,214,.66);filter:drop-shadow(0 4px 2px rgba(0,0,0,.32))}
.leather-panel::before{content:"";position:absolute;inset:-14px -13px;z-index:-1;border-radius:10% 8% 9% 7%;background:linear-gradient(90deg,#2d1a10 0 2%,transparent 2% 98%,#2d1a10 98%),linear-gradient(#2d1a10 0 2%,transparent 2% 98%,#2d1a10 98%);box-shadow:inset 0 0 0 4px rgba(117,73,42,.58),0 10px 22px rgba(0,0,0,.23)}
.leather-panel::after{content:"";position:absolute;inset:10px;pointer-events:none;border:1px solid rgba(91,50,26,.27);border-radius:7%;box-shadow:inset 0 0 22px rgba(255,236,196,.12)}
.leather-lashing{position:absolute;z-index:3;width:34px;height:15px;border-radius:50%;border-top:4px solid #4b2b18;border-bottom:3px solid #704524;box-shadow:0 2px 3px rgba(0,0,0,.38);transform:rotate(-7deg)}
.lashing-a{left:-18px;top:18%}.lashing-b{right:-18px;bottom:19%;transform:rotate(8deg)}
.panel-mark{width:43px;height:43px;display:grid;place-items:center;margin:0 auto 6px;color:#7d3a1d;opacity:.88;position:relative;z-index:1}.panel-mark svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.panel-eyebrow{position:relative;z-index:1;margin:0 0 7px;font:900 clamp(9px,.66vw,13px)/1.2 var(--ui);letter-spacing:.24em;text-transform:uppercase;color:#6c391d}
.panel-title{position:relative;z-index:1;margin:0;font:900 clamp(39px,3.35vw,66px)/.9 var(--display);letter-spacing:-.035em;color:#27130c;text-shadow:0 1px rgba(255,247,221,.55),0 2px 8px rgba(83,44,20,.10)}
.panel-subtitle{position:relative;z-index:1;margin:9px 0 0;font:900 clamp(15px,1.16vw,23px)/1.02 var(--display);letter-spacing:.14em;text-transform:uppercase;color:#57301b}
.panel-divider{position:relative;z-index:1;width:68%;height:12px;margin:10px auto 10px}.panel-divider::before,.panel-divider::after{content:"";position:absolute;top:50%;width:43%;height:1px;background:linear-gradient(90deg,transparent,#78401f)}.panel-divider::before{left:0}.panel-divider::after{right:0;transform:scaleX(-1)}.panel-divider span{position:absolute;left:50%;top:50%;width:7px;height:7px;background:#7c3b1c;transform:translate(-50%,-50%) rotate(45deg);box-shadow:0 0 0 3px rgba(124,59,28,.12)}
.panel-body{position:relative;z-index:1;width:100%;max-height:205px;overflow:auto;padding:1px 2px 2px;scrollbar-width:thin;scrollbar-color:#75411f transparent}
.story-copy{margin:0 auto;max-width:96%;font:700 clamp(12px,.91vw,18px)/1.43 var(--serif);color:#2f1d13;text-shadow:0 1px rgba(255,245,219,.28)}
.story-detail{margin:11px 0 0;padding:0;list-style:none;display:grid;gap:5px;font:900 clamp(9px,.63vw,12px)/1.18 var(--ui);color:#4d2b19}
.story-detail li::before{content:"◆";font-size:.55em;color:#8b4621;margin-right:.60em;vertical-align:.12em}
.panel-actions{position:relative;z-index:2;margin-top:auto;padding-top:13px;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px}
.panel-footnote{position:relative;z-index:1;margin-top:9px;font:900 clamp(7px,.48vw,9px)/1 var(--ui);letter-spacing:.19em;color:#775039;opacity:.82}
.menu-column{position:absolute;z-index:8;right:2.4%;top:8.1%;width:min(28.5vw,548px);height:75.4vh;display:grid;grid-template-rows:repeat(5,1fr);gap:11px}
.menu-card{position:relative;display:flex;align-items:center;justify-content:center;min-height:92px;padding:10px 74px;border:1px solid rgba(66,33,16,.74);border-radius:7% 5% 8% 6%/16% 14% 17% 12%;background:linear-gradient(90deg,rgba(120,71,34,.13),rgba(251,224,181,.18) 50%,rgba(95,51,24,.11)),url("era1-leather-clean.jpg") center/cover;color:#2a150c;box-shadow:0 13px 28px rgba(0,0,0,.39),inset 0 1px rgba(255,247,218,.62),inset 0 -5px 14px rgba(84,44,20,.13);text-shadow:0 1px rgba(255,248,226,.40);transition:transform .2s ease,filter .2s ease,box-shadow .2s ease;transform-origin:right center;overflow:visible}
.menu-card::before{content:"";position:absolute;left:-14px;right:-11px;top:-7px;bottom:-7px;z-index:-1;border-top:5px solid #422718;border-bottom:5px solid #422718;border-radius:12px;box-shadow:0 3px 5px rgba(0,0,0,.85),inset 0 1px rgba(190,116,64,.14)}
.menu-card:hover{transform:translateX(-8px) rotate(-.12deg);filter:brightness(1.045) saturate(1.04);box-shadow:0 17px 36px rgba(0,0,0,.46),0 0 22px rgba(223,102,41,.11)}
.menu-card.active{filter:brightness(1.07) saturate(1.08);box-shadow:0 18px 40px rgba(0,0,0,.48),0 0 0 2px rgba(132,57,24,.34),0 0 27px rgba(226,104,43,.15)}
.menu-card.active::after{content:"";position:absolute;left:31%;right:13%;bottom:15%;height:2px;background:linear-gradient(90deg,transparent,#8a4722 20%,#8a4722 80%,transparent);box-shadow:0 0 8px rgba(206,85,29,.18)}
.menu-icon{position:absolute;left:19px;top:50%;transform:translateY(-50%);width:58px;height:58px;display:grid;place-items:center;color:#74391b;opacity:.91}
.menu-icon svg{width:52px;height:52px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px rgba(255,238,201,.38))}
.menu-copy{text-align:center;min-width:0;max-width:100%}
.menu-title{display:block;font:900 clamp(18px,1.52vw,30px)/.94 var(--display);letter-spacing:.055em;text-transform:uppercase;color:#2b160d}
.menu-meta{display:block;margin-top:6px;font:900 clamp(8px,.58vw,11px)/1.05 var(--ui);letter-spacing:.15em;text-transform:uppercase;color:#67391f}
.menu-knot{position:absolute;right:21px;top:50%;width:18px;height:18px;transform:translateY(-50%) rotate(45deg);border:3px solid rgba(90,51,28,.72);border-radius:46% 54% 52% 48%;box-shadow:inset 0 0 0 2px rgba(227,173,103,.18),0 2px 3px rgba(0,0,0,.22)}
.menu-card.active .menu-title{color:#6f2e13}.menu-card.active .menu-knot{border-color:#8f421d;box-shadow:inset 0 0 0 2px rgba(242,184,105,.24),0 0 12px rgba(213,85,31,.22)}

.stats-rock{position:absolute;z-index:8;left:2.5%;bottom:2.8%;width:min(35.2vw,680px);min-height:152px;padding:29px 38px 20px;display:grid;grid-template-columns:repeat(3,1fr);align-items:center;background:linear-gradient(rgba(10,7,5,.20),rgba(10,7,5,.26)),url("era1-stone-clean.jpg") center/cover;border:1px solid rgba(111,75,50,.52);border-radius:43% 35% 38% 28%/27% 21% 33% 23%;box-shadow:0 15px 36px rgba(0,0,0,.59),inset 0 2px rgba(255,171,91,.10),inset 0 -8px 20px rgba(0,0,0,.30);transform:rotate(.35deg);color:#e8ab6d;text-shadow:0 2px 2px #000,0 0 8px rgba(205,97,40,.12);overflow:hidden}
.stats-rock::after{content:"";position:absolute;inset:9px;border:1px solid rgba(210,134,75,.10);border-radius:inherit;pointer-events:none}
.stat{position:relative;z-index:1;text-align:center;border-right:1px solid rgba(225,137,71,.29);padding:0 10px}.stat:last-of-type{border:0}.stat strong{display:block;font:900 clamp(29px,2.75vw,54px)/.88 var(--display);color:#f0b77a}.stat span{display:block;margin-top:9px;font:900 clamp(8px,.59vw,11px)/1.05 var(--ui);letter-spacing:.15em;text-transform:uppercase;color:#d9a06b}
.rock-scratch{position:absolute;height:1px;background:rgba(211,137,77,.14);transform-origin:center}.scratch-a{width:88px;left:8%;top:19%;transform:rotate(-13deg)}.scratch-b{width:70px;right:6%;bottom:18%;transform:rotate(17deg)}

.scene-caption{position:absolute;z-index:5;left:39%;right:34%;bottom:9.2%;display:flex;align-items:center;justify-content:center;gap:10px;color:rgba(255,222,178,.74);text-shadow:0 2px 8px #000;font:900 clamp(7px,.47vw,9px)/1 var(--ui);letter-spacing:.13em;text-transform:uppercase;text-align:center}.scene-caption i{width:4px;height:4px;transform:rotate(45deg);background:#be7444;box-shadow:0 0 7px rgba(255,122,56,.32);flex:0 0 auto}
.utility-strip{position:absolute;z-index:10;left:50%;bottom:2%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid rgba(238,188,121,.14);border-radius:999px;background:rgba(17,10,6,.60);backdrop-filter:blur(8px);box-shadow:0 8px 24px rgba(0,0,0,.34)}
.progress-note{font:900 clamp(8px,.52vw,10px)/1 var(--ui);letter-spacing:.10em;text-transform:uppercase;color:rgba(255,226,184,.80);text-shadow:0 2px 5px #000;white-space:nowrap}.utility-divider{width:1px;height:15px;background:rgba(240,183,111,.18)}
.tiny-control{border:1px solid rgba(232,177,105,.27);background:rgba(71,37,18,.65);color:#e8bc82;border-radius:999px;padding:.62em .94em;font:900 clamp(8px,.51vw,10px)/1 var(--ui);letter-spacing:.11em;text-transform:uppercase}.tiny-control:hover{background:rgba(105,52,24,.82);color:#ffe2ad}

.compact-list{width:100%;display:grid;gap:3px;margin-top:3px}.compact-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:6px 8px;border-bottom:1px solid rgba(81,43,22,.18);font:900 clamp(9px,.61vw,12px)/1.15 var(--ui);text-align:left;color:#3d2215}.compact-row:last-child{border-bottom:0}.compact-row .state{font-size:.84em;letter-spacing:.08em;text-transform:uppercase;color:#75401f}.compact-row.completed .state{color:#48582e}.compact-row.current .state{color:#943914}.compact-row.locked{opacity:.58}.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;margin-top:10px}.chips span{padding:5px 7px;border:1px solid rgba(85,45,23,.30);background:rgba(128,79,42,.10);font:900 clamp(8px,.53vw,10px)/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:#4c2b1a}.case-status{margin-top:9px;font:900 clamp(9px,.62vw,12px)/1.2 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:#783b1d}
.spark{position:absolute;z-index:3;width:3px;height:3px;border-radius:50%;background:#ffc079;box-shadow:0 0 10px #ff7a34;pointer-events:none;animation:sparkRise var(--dur) linear forwards}@keyframes sparkRise{0%{transform:translate(0,0) scale(.5);opacity:0}10%{opacity:.78}72%{opacity:.28}100%{transform:translate(var(--dx),-32vh) scale(.08);opacity:0}}
.fade-in{animation:fadeIn .27s ease both}@keyframes fadeIn{from{opacity:.12;transform:translateY(5px)}to{opacity:1;transform:none}}

@media (max-width:1280px){.brand-plaque{width:33vw}.leather-panel{width:32vw}.menu-column{width:31vw}.stats-rock{width:39vw}.scene-caption{display:none}}
@media (max-height:780px) and (min-width:901px){.brand-plaque{min-height:74px;padding:8px 28px}.brand-glyphs{display:none}.leather-panel{top:14.6%;height:55vh;min-height:430px;padding:20px 31px 21px}.panel-mark{width:32px;height:32px;margin-bottom:3px}.panel-title{font-size:42px}.panel-body{max-height:145px}.story-copy{font-size:13px}.story-detail{font-size:9px}.menu-column{top:7%;height:76vh}.menu-card{min-height:76px}.stats-rock{min-height:120px;padding:21px 31px 14px}.utility-strip{bottom:1.2%}}
@media (max-aspect-ratio:4/3),(max-width:900px){
  html,body{overflow:auto}.era-home{min-height:100vh;padding:58vh 4vw 5vh;background:#110a06}.world-layer{inset:0;height:61vh;transform:none}.world-layer img{object-position:center 48%}.world-layer::after{background:linear-gradient(180deg,rgba(8,4,2,.05) 0 42%,rgba(17,10,6,.28) 62%,#110a06 96%)}.sun-flare{top:20vh}.fire-glow{top:45vh;width:36vw}
  .brand-plaque{top:17px;left:4vw;width:min(74vw,530px);min-height:70px;padding:10px 25px}.brand-title{font-size:22px}.brand-sub{font-size:8px}.brand-glyphs{display:none}
  .leather-panel,.menu-column,.stats-rock,.scene-caption,.utility-strip{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:auto;height:auto;transform:none}
  .leather-panel{min-height:0;padding:30px 24px 25px;border-radius:24px}.leather-panel::before{inset:-7px}.leather-lashing{display:none}.panel-mark{width:38px;height:38px}.panel-title{font-size:48px}.panel-body{max-height:none}.story-copy{font-size:15px}.story-detail{font-size:11px}.panel-footnote{font-size:8px}
  .menu-column{margin-top:19px;display:grid;grid-template-columns:1fr;gap:10px}.menu-card{min-height:84px;padding:12px 70px;border-radius:16px}.menu-card::before{left:-5px;right:-5px}.menu-icon{left:18px}.menu-title{font-size:23px}.menu-meta{font-size:9px}.menu-knot{right:20px}
  .stats-rock{margin-top:19px;min-height:124px;padding:25px 18px;border-radius:24px}.stat strong{font-size:38px}.stat span{font-size:9px}
  .scene-caption{display:none}.utility-strip{margin:18px auto 0;display:flex;justify-content:center;flex-wrap:wrap;max-width:max-content}.spark{display:none}
}
@media (max-width:560px){
  .era-home{padding:52vh 14px 34px}.world-layer{height:55vh}.brand-plaque{left:14px;right:14px;width:auto}.brand-title{font-size:18px}.brand-sub{letter-spacing:.18em}.leather-panel{padding:26px 17px 22px}.panel-title{font-size:41px}.panel-subtitle{font-size:15px}.menu-card{padding:10px 58px 10px 60px}.menu-icon{left:10px;width:48px}.menu-icon svg{width:43px;height:43px}.menu-knot{right:13px;width:15px;height:15px}.stats-rock{grid-template-columns:repeat(3,1fr);padding:20px 8px}.stat{padding:0 5px}.stat strong{font-size:30px}.stat span{font-size:7px;letter-spacing:.08em}.progress-note{text-align:center;line-height:1.25;white-space:normal}.utility-divider{display:none}.utility-strip{border-radius:16px;max-width:94%;gap:7px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.world-layer{transform:none!important}}

/* POINT8 — READABILITY / CONTRAST PATCH
   Contrast-only overrides. No layout, content, logic, typography or asset changes. */
.leather-panel .panel-eyebrow,
.leather-panel .panel-subtitle,
.leather-panel .story-copy,
.leather-panel .story-detail,
.leather-panel .panel-footnote,
.leather-panel .compact-row,
.leather-panel .compact-row .state,
.leather-panel .compact-row.completed .state,
.leather-panel .compact-row.current .state,
.leather-panel .chips span,
.leather-panel .case-status,
.menu-card .menu-meta{
  color:#0b0705;
}
.leather-panel .panel-footnote{opacity:1}
.leather-panel .panel-mark,
.leather-panel .story-detail li::before,
.menu-card .menu-icon,
.menu-card.active .menu-title{
  color:#3f1e11;
}
.leather-panel .btn.ghost{color:#0b0705}
.compact-row.locked{opacity:.90}


/* POINT8 — LIGHT TEXT VISIBILITY PATCH (2026-09-27)
   User-requested style direction: all interface text stays light and clearly visible,
   with semantic exceptions such as success=green and error=red. */
.brand-sub{color:#e8c49b!important}
.leather-panel{
  background:
    linear-gradient(rgba(17,10,6,.50),rgba(17,10,6,.42)),
    linear-gradient(rgba(250,221,173,.18),rgba(98,52,24,.08)),
    url("era1-leather-clean.jpg") center/cover!important;
}
.leather-panel .panel-mark,
.leather-panel .story-detail li::before,
.leather-panel .panel-divider::before,
.leather-panel .panel-divider::after,
.leather-panel .panel-divider span{color:#efb06c!important;background-color:#efb06c!important}
.leather-panel .panel-eyebrow{color:#f0c890!important}
.leather-panel .panel-title{color:#fff1dc!important;text-shadow:0 2px 10px rgba(0,0,0,.55)!important}
.leather-panel .panel-subtitle{color:#ffe1b5!important}
.leather-panel .story-copy{color:#f2e1c7!important;text-shadow:0 1px 3px rgba(0,0,0,.42)!important}
.leather-panel .story-detail,
.leather-panel .compact-row,
.leather-panel .chips span,
.leather-panel .case-status,
.leather-panel .panel-footnote{color:#e7c9a2!important}
.leather-panel .compact-row{border-bottom-color:rgba(232,177,105,.20)!important}
.leather-panel .compact-row .state{color:#f0c890!important}
.leather-panel .compact-row.completed .state{color:#cfe7ac!important}
.leather-panel .compact-row.current .state{color:#ffd3a0!important}
.leather-panel .btn,
.leather-panel .btn.ghost{color:#fff0d6!important}
.menu-card{
  background:
    linear-gradient(90deg,rgba(17,10,6,.68),rgba(64,38,23,.48) 50%,rgba(17,10,6,.68)),
    url("era1-leather-clean.jpg") center/cover!important;
  text-shadow:0 2px 8px rgba(0,0,0,.78)!important;
}
.menu-card .menu-icon{color:#efb06c!important}
.menu-card .menu-title{color:#fff0d8!important}
.menu-card .menu-meta{color:#e6c59e!important}
.menu-card.active .menu-title{color:#fff6e8!important}
.menu-card .menu-knot{border-color:rgba(232,177,105,.72)!important;box-shadow:inset 0 0 0 2px rgba(242,184,105,.22),0 2px 3px rgba(0,0,0,.28)!important}
.menu-card.active::after{background:linear-gradient(90deg,transparent,#efb06c 20%,#efb06c 80%,transparent)!important}
.stats-rock{
  background:linear-gradient(rgba(10,7,5,.46),rgba(10,7,5,.52)),url("era1-stone-clean.jpg") center/cover!important;
  color:#ffe0b2!important;
}
.stats-rock .stat strong{color:#fff0d6!important}
.stats-rock .stat span{color:#f0c890!important}
.scene-caption{color:rgba(255,232,196,.92)!important}
.scene-caption i{background:#efb06c!important}
.progress-note{color:#ffe2b4!important}
.tiny-control{color:#ffe2ad!important}