/* C042 This Light — "Specimen Card": paint-chip swatch on studio white. Self-host fonts. The ONLY color is the computed chip. */
@font-face{font-family:"Space Grotesk";src:local("Space Grotesk"),url(fonts/SpaceGrotesk-Variable.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Newsreader";src:local("Newsreader"),url(fonts/Newsreader-Variable.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Newsreader";src:local("Newsreader Italic"),url(fonts/Newsreader-Italic-Variable.woff2) format("woff2");font-style:italic;font-weight:200 800;font-display:swap}
:root{
  --tl-white:#FAFAF7; --tl-graphite:#2B2B2B; --tl-mid:#76746F; --tl-rule:#DAD8D2; --tl-card:#FFFFFF;
  --tl-chip:#E7B56A;            /* set inline from the solar computation; flat fill only */
  --tl-sun:0.62;                /* 0..1 position along the dial arc, set inline */
  --tl-sans:"Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --tl-serif:"Newsreader",Georgia,serif;
}
.tl{margin:0;min-height:100dvh;background:var(--tl-white);color:var(--tl-graphite);font-family:var(--tl-sans)}
.tl-page{max-width:1240px;margin:0 auto;padding:20px 22px 40px}
.tl-top{display:flex;justify-content:space-between;align-items:baseline;font:500 11px var(--tl-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--tl-mid);border-bottom:1px solid var(--tl-graphite);padding-bottom:8px}
.tl-title{font:600 clamp(30px,5vw,56px)/1 var(--tl-sans);letter-spacing:-.03em;margin:16px 0 6px}
.tl-lede{font:400 18px/1.4 var(--tl-serif);max-width:38ch;margin:0 0 18px}
.tl-grid{display:grid;gap:22px}
@media(min-width:900px){.tl-grid{grid-template-columns:minmax(380px,1.1fr) 1fr 300px;gap:36px;align-items:start}}
/* paint-chip card */
.tl-card{background:var(--tl-card);border:1px solid var(--tl-rule);padding:12px 12px 14px;box-shadow:0 1px 0 var(--tl-rule),0 10px 24px -18px rgba(0,0,0,.35)}
.tl-chip{aspect-ratio:4/3;background:var(--tl-chip);transition:background-color 1.2s ease}
.tl-card--empty .tl-chip{background:repeating-linear-gradient(135deg,#F1F0EC 0 8px,#FAFAF7 8px 16px)}
.tl-chipmeta{display:grid;grid-template-columns:1fr auto;gap:2px 10px;margin-top:12px}
.tl-phase{font:600 22px/1.1 var(--tl-sans);letter-spacing:-.01em}
.tl-code{font:500 12px var(--tl-sans);letter-spacing:.08em;color:var(--tl-mid);text-align:right;align-self:end}
.tl-time{font:400 14px var(--tl-sans);color:var(--tl-mid)}
.tl-caveat{font:italic 400 15px/1.4 var(--tl-serif);color:var(--tl-mid);margin:12px 0 0;border-top:1px solid var(--tl-rule);padding-top:10px}
/* solar dial */
.tl-dial{width:100%;max-width:360px;display:block}
.tl-dial .arc{fill:none;stroke:var(--tl-graphite);stroke-width:1.25}
.tl-dial .hz{stroke:var(--tl-graphite);stroke-width:1}
.tl-dial .tick{stroke:var(--tl-mid);stroke-width:1}
.tl-dial .sun{fill:var(--tl-chip);stroke:var(--tl-graphite);stroke-width:1.5;transition:transform 1.4s cubic-bezier(.3,.7,.2,1)}
.tl-dial text{font:500 10px var(--tl-sans);letter-spacing:.12em;fill:var(--tl-mid);text-transform:uppercase}
.tl-label{display:block;font:500 11px var(--tl-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--tl-mid);margin:0 0 6px}
/* city index */
.tl-index{border-top:2px solid var(--tl-graphite)}
.tl-search{width:100%;box-sizing:border-box;border:0;border-bottom:1px solid var(--tl-graphite);background:transparent;font:400 17px var(--tl-sans);padding:10px 0;color:var(--tl-graphite)}
.tl-search:focus{outline:none;border-bottom-width:2px}
.tl-list{list-style:none;margin:0;padding:0;max-height:440px;overflow:auto}
.tl-list li{display:grid;grid-template-columns:28px 1fr auto;gap:8px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--tl-rule);font-size:15px;cursor:pointer}
.tl-list li .no{font-size:11px;color:var(--tl-mid)}
.tl-list li .tz{font-size:11px;color:var(--tl-mid);letter-spacing:.06em}
.tl-list li[aria-selected=true]{font-weight:600}
.tl-list li[aria-selected=true] .no::before{content:"";display:inline-block;width:9px;height:9px;background:var(--tl-chip);border:1px solid var(--tl-graphite);margin-right:4px;vertical-align:-1px}
.tl-btn{font:600 15px var(--tl-sans);padding:13px 18px;border:1.5px solid var(--tl-graphite);background:transparent;color:var(--tl-graphite);cursor:pointer;border-radius:0}
.tl-btn--primary{background:var(--tl-graphite);color:var(--tl-white)}
.tl-btn:focus-visible{outline:3px solid var(--tl-graphite);outline-offset:3px}
.tl-fine{font:400 13px/1.45 var(--tl-sans);color:var(--tl-mid);max-width:44ch}
.tl-note{font:italic 400 16px/1.4 var(--tl-serif);border-left:2px solid var(--tl-graphite);padding-left:12px;margin:0 0 16px}
.tl-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.tl.is-fading .tl-chip{transition-duration:1.6s}
@media(prefers-reduced-motion:reduce){.tl-chip,.tl-dial .sun{transition:none}}
/* --- build additions (Engineer) --- */
*{box-sizing:border-box}[hidden]{display:none!important}
.tl-top a{color:inherit;text-decoration:none}.tl-top a:focus-visible{outline:2px solid var(--tl-graphite)}
.tl-list li:focus-visible{outline:2px solid var(--tl-graphite);outline-offset:-2px}
.tl-list li:hover{background:#F3F2EE}
.tl-msg{font:400 14px var(--tl-sans);color:var(--tl-graphite);min-height:1.2em}
.tl-toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--tl-graphite);color:var(--tl-white);padding:10px 16px;font:14px var(--tl-sans);z-index:9}

/* visitor-text wrap: long unbroken words never widen the page */
body{overflow-wrap:anywhere}
input,textarea{min-width:0;max-width:100%}
.tl-list li{grid-template-columns:34px minmax(0,1fr) auto}.tl-list li .no{white-space:nowrap}