/* cam::rio — layout only. Every colour, size, font, space and radius comes from core.js tokens (SSOT).
   core.js is the first script in <head>, so its injected :root + normalize sit BEFORE this file in the cascade. */
body.cam-app{padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left)}

.cam{width:min(100%,60rem);margin-inline:auto;padding:var(--s-4) var(--s-3) var(--s-6);display:grid;gap:var(--s-4)}
.cam-head{display:grid;gap:var(--s-2)}

/* subtitle tier — kicker (meta = --muted) */
.cam-kicker{display:flex;align-items:center;gap:var(--s-2);font-size:var(--fs-p);color:var(--muted)}
.cam-kicker::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--txt-heading);animation:cam-pulse 1.8s var(--ease) infinite}
@keyframes cam-pulse{50%{opacity:.2}}

/* h1.h1 / h2.h4 take size, family, weight and tracking from core; only contrast + italics are set here */
.cam-sep{background:var(--txt-color-heading-perfurm);-webkit-background-clip:text;background-clip:text;color:transparent} /* the one perfume object */
.cam-where{color:var(--txt-color);text-wrap:balance}
.cam-where em{font-family:var(--ff-em);font-style:italic;font-weight:400;font-size:1.12em;letter-spacing:-.01em;color:var(--txt-heading)}
.cam-clock{font-variant-numeric:tabular-nums}

/* "@ … sens. …" appears only once apollo-weather has real values (inline display:none from it wins until then) */
.cam-weather{opacity:0;transition:opacity .5s var(--ease)}
.cam-weather.is-ready{opacity:1}
.temp-now,.temp-sens{display:inline-block;color:var(--txt-heading)}