/* EasternTime.net – design tokens */
:root{
  --bg:#0b1220;--bg2:#0f1829;--panel:#141f36;--line:#243150;
  --text:#e8eefc;--muted:#8aa0c8;--accent:#ffb347;--accent2:#4cc9f0;
  --radius:14px;--max:1120px;
  --font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Inter,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.6;font-size:17px}
a{color:var(--accent2);text-decoration:none}
a:hover,a:focus-visible{text-decoration:underline}
main :is(p,li,dd,td,figcaption,caption) a{text-decoration:underline;text-decoration-color:rgba(76,201,240,.45);text-underline-offset:.18em}
main :is(p,li,dd,td,figcaption,caption) a:hover{text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
h1,h2,h3{line-height:1.15;margin:0 0 .6em;font-weight:800;letter-spacing:-.01em}
h1{font-size:clamp(1.9rem,4vw,2.8rem)}
h2{font-size:clamp(1.5rem,3vw,2.1rem)}
h3{font-size:1.2rem}
p{margin:0 0 1em}
code{font-family:var(--mono);background:var(--panel);padding:.1em .4em;border-radius:6px;font-size:.9em}
.skip{position:absolute;left:-999px;top:0;background:var(--accent);color:#000;padding:.5rem 1rem;z-index:99}
.skip:focus{left:1rem}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(11,18,32,.88);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav{max-width:var(--max);margin:0 auto;padding:.7rem 1.2rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.5rem;color:var(--text);font-weight:600;font-size:1.1rem}
.brand b{color:var(--accent)}
.menu{list-style:none;margin:0 0 0 auto;padding:0;display:flex;gap:1.2rem}
.menu a{color:var(--muted);font-weight:500}
.menu a:hover{color:var(--text);text-decoration:none}
.nav-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:8px;width:42px;height:38px;cursor:pointer;position:relative}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:10px;width:20px;height:2px;background:var(--text);transition:transform .2s}
.nav-toggle span{top:18px}.nav-toggle span::before{top:-6px;left:0}.nav-toggle span::after{top:6px;left:0}
@media(max-width:760px){
  .nav-toggle{display:block}
  .menu{display:none;flex-direction:column;width:100%;gap:.3rem;padding:.5rem 0}
  .menu.open{display:flex}
}

/* Hero */
.hero{max-width:var(--max);margin:0 auto;padding:3rem 1.2rem 2rem}
.hero-grid{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center}
@media(max-width:760px){.hero-grid{grid-template-columns:1fr}.analog{justify-self:center}}
.eyebrow{color:var(--accent);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:.8rem;margin-bottom:.4rem}
.clock{font-family:var(--mono);font-size:clamp(3rem,9vw,5.5rem);font-weight:700;line-height:1;margin:.2em 0;letter-spacing:-.02em;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:.25em}
.ampm{font-size:.35em;color:var(--muted);font-weight:500}
.date{font-size:1.15rem;color:var(--muted);margin-bottom:.4em}
.status{font-size:1rem}
.chips{list-style:none;padding:0;margin:1rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem}
.chips a{display:inline-block;padding:.35rem .8rem;border:1px solid var(--line);border-radius:999px;color:var(--text);font-size:.9rem;background:var(--bg2)}
.chips a,.chips a:hover{text-decoration:none}
.chips a:hover{border-color:var(--accent)}
.analog{margin:0;text-align:center}
.analog figcaption{color:var(--muted);font-size:.8rem;font-family:var(--mono);margin-top:.4rem}
.clockface{max-width:100%;height:auto;filter:drop-shadow(0 10px 30px rgba(0,0,0,.5))}
.ring{animation:ring 60s linear infinite;transform-origin:center;transform:rotate(-90deg)}
@keyframes ring{to{stroke-dashoffset:0}}
#s-hand,#m-hand,#h-hand{transform-origin:100px 100px}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1rem;margin:2.2rem 0 0;padding:0}
.facts div{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.2rem}
.facts dt{color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.06em}
.facts dd{margin:.2rem 0 0;font-weight:700;font-size:1.15rem}

/* Sections */
.section{max-width:var(--max);margin:0 auto;padding:3rem 1.2rem}
.alt{position:relative}
.alt::before{content:"";position:absolute;inset:0;left:50%;width:100vw;transform:translateX(-50%);background:var(--bg2);z-index:-1}
.lead{font-size:1.1rem;color:var(--muted);max-width:60ch}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:start}
@media(max-width:860px){.cols{grid-template-columns:1fr}}
.list{padding-left:1.2rem}
.list li{margin-bottom:.5em}
.diagram{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1rem}
.diagram svg{width:100%;height:auto}
.diagram figcaption{color:var(--muted);font-size:.85rem;text-align:center}
.bar-edt{animation:grow 1.6s cubic-bezier(.2,.8,.2,1) both;transform-origin:110px 0}
@keyframes grow{from{transform:scaleX(0)}}
.links{color:var(--muted);font-size:.95rem}

/* Converter */
.converter{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem;align-items:end}
.converter label{display:flex;flex-direction:column;gap:.3rem;font-size:.85rem;color:var(--muted)}
.converter input,.converter select{font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:.55rem .7rem;color-scheme:dark}
.c-out{grid-column:1/-1;font-size:1.35rem;font-weight:700;padding:.6rem 0 0;border-top:1px solid var(--line)}
.c-out small{display:block;font-weight:400;color:var(--muted);font-size:.85rem}

/* Table */
.table{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;font-size:.95rem}
.table caption{text-align:left;color:var(--muted);font-size:.85rem;padding:0 0 .5rem}
.table th,.table td{padding:.65rem .9rem;text-align:left;border-bottom:1px solid var(--line)}
.table th{color:var(--muted);font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em}
.table tr:last-child td{border-bottom:0}
.table.compact td,.table.compact th{padding:.45rem .8rem}

/* Map */
.map{height:460px;border-radius:var(--radius);border:1px solid var(--line);background:var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 20h40M20 0v40' stroke='%23243150' stroke-width='1'/%3E%3C/svg%3E");overflow:hidden;display:grid;place-items:center;color:var(--muted)}
.map .leaflet-container{background:#0f1829}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:var(--panel);color:var(--text)}
.leaflet-control-attribution{background:rgba(11,18,32,.8)!important;color:var(--muted)!important;font-size:10px}
.leaflet-control-attribution a{color:var(--accent2)!important}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem}
.card ul{padding-left:1.1rem;margin:0}
.card li{margin:.3em 0}
.card p{font-size:.95rem}

/* FAQ */
.faq details{border-bottom:1px solid var(--line);padding:.7rem 0}
.faq summary{cursor:pointer;font-weight:600;font-size:1.05rem;list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq summary::after{content:"+";color:var(--accent);font-size:1.4rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{margin:.6rem 0 0;color:var(--muted)}

/* Footer */
.site-footer{border-top:1px solid var(--line);margin-top:2rem;padding:2.5rem 1.2rem;color:var(--muted);font-size:.9rem}
.foot-grid{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:2fr 1fr;gap:2rem}
@media(max-width:700px){.foot-grid{grid-template-columns:1fr}}
.site-footer .brand{font-size:1.1rem;color:var(--text);margin-bottom:.4rem}
.site-footer ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.5rem 1.2rem}
.copy{max-width:var(--max);margin:1.5rem auto 0}

/* Inner pages */
.crumbs{max-width:var(--max);margin:0 auto;padding:1rem 1.2rem 0;font-size:.85rem;color:var(--muted)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem}
.crumbs li+li::before{content:"›";margin-right:.35rem}
.crumbs [aria-current]{color:var(--text)}
.hero.short{padding:1.6rem 1.2rem 1.8rem}
.hero.short .facts{margin-top:1.6rem}
.hero.short .clock{font-size:clamp(2.6rem,8vw,4.4rem)}
.prose{max-width:72ch}
.prose h3,.cols h3{margin-top:1.4em}
.prose h3:first-child,.cols h3:first-child{margin-top:0}
.note{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--radius);padding:1rem 1.2rem;margin:1.2rem 0}
.note.info{border-left-color:var(--accent2)}
.note>:last-child{margin-bottom:0}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 1.2rem}
.table td,.table th{font-variant-numeric:tabular-nums}
.table tbody th{color:var(--text);font-size:.95rem;text-transform:none;letter-spacing:0;font-weight:600}
.table tr.hl td,.table tr.hl th{background:rgba(255,179,71,.09)}
.table tr.hl>:first-child{box-shadow:inset 3px 0 0 var(--accent)}
.table tr.dim td,.table tr.dim th{color:var(--muted)}
.table .num{text-align:right}
.badge{display:inline-block;padding:.1rem .5rem;border-radius:999px;font-size:.75rem;font-weight:700;letter-spacing:.04em;background:var(--accent);color:var(--bg);vertical-align:.1em}
.badge.ct{background:#b794f6}
.badge.info{background:var(--accent2)}
.map.sm{height:340px}
.legend{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;list-style:none;padding:0;margin:.8rem 0 0;font-size:.9rem;color:var(--muted)}
.legend li::before{content:"";display:inline-block;width:.75rem;height:.75rem;border-radius:50%;margin-right:.45rem;vertical-align:-.05rem;background:var(--accent)}
.legend .k-ct::before{background:#b794f6}
.legend .k-zone::before{background:var(--accent2);border-radius:3px}
.legend .k-line::before{height:0;border-radius:0;border-top:2px dashed var(--accent2);vertical-align:.2rem}
.terms dt{font-weight:700;margin-top:1.3rem;scroll-margin-top:5rem}
.terms dd{margin:.25rem 0 0}
.steps{padding-left:1.4rem}
.steps li{margin-bottom:.7em;padding-left:.3rem}
.steps li::marker{color:var(--accent);font-weight:700}
.big{font-family:var(--mono);font-size:clamp(1.6rem,4vw,2.2rem);font-weight:700;font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.cards.c4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card h3 a{color:inherit}
.section>h2,.section>.lead{scroll-margin-top:5rem}
[id]{scroll-margin-top:5rem}
.grow-x{animation:grow 1.4s cubic-bezier(.2,.8,.2,1) both;transform-box:fill-box;transform-origin:left center}
.fade-in{animation:fade .9s ease both}
.pulse{animation:pulse 2.4s ease-in-out infinite}
@keyframes fade{from{opacity:0}}
@keyframes pulse{50%{opacity:.35}}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ring,.bar-edt,.grow-x,.fade-in,.pulse{animation:none}.ring{stroke-dashoffset:0}}