/* ═══════════════════════════════════════════════════════════════════════
   chautari — /body-house/model

   The frame and the readout beside it. On a wide screen they sit side by
   side, because the whole point is watching the shadow and the number move
   together; below that the numbers go under the frame, which is the only
   arrangement that works on a phone and still keeps them on one screen.
   ═══════════════════════════════════════════════════════════════════════ */

.rig{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(.6rem,1.2vw,1rem);
  max-width:74rem;margin:0 auto;
}
@media (min-width:1000px){
  .rig{grid-template-columns:minmax(0,1fr) 20rem;align-items:stretch}
}

/* ── the frame ─────────────────────────────────────────────────────────  */
.rig-stage{
  position:relative;overflow:hidden;
  min-height:clamp(20rem,56vh,34rem);
  background:
    radial-gradient(130% 100% at 50% 8%,rgba(255,252,240,.95),rgba(238,228,204,.7) 60%,rgba(214,203,175,.55)),
    #ece2c8;
  padding:0;
}
three-d-stage{
  position:absolute;inset:0;
  width:100%;height:100%;
  --stage-bg:transparent;
}
three-d-stage:not(:defined){visibility:hidden}

/* the same sentence, and the same treatment, as the village viewer's
   fallback — a frame that has not loaded says so rather than sitting empty */
.rig-stage .stage-fallback{
  position:absolute;inset:0;display:grid;place-content:center;gap:.9rem;
  text-align:center;padding:2rem;z-index:2;
}
.rig-stage .stage-fallback p{font-size:.86rem;max-width:24rem;margin:0 auto}
.rig.is-live .stage-fallback{display:none}

/* ── the readout ───────────────────────────────────────────────────────  */
.rig-read{
  display:flex;flex-direction:column;
  padding:clamp(1.3rem,2vw,1.7rem) clamp(1.2rem,1.9vw,1.5rem) clamp(1.2rem,1.8vw,1.5rem);
}
.sun-when .eyebrow{margin-bottom:.7rem}
.sun-date{
  font-family:var(--serif);font-weight:300;font-size:clamp(1.5rem,2.4vw,1.95rem);
  line-height:1.1;color:#1e1810;
}
.sun-note{
  font-size:.65rem!important;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);margin-top:.35rem;line-height:1.5;
}
.sun-note.is-published{color:var(--gold)}

/* ── the year ──────────────────────────────────────────────────────────  */
.sun-slide{position:relative;margin:1.3rem 0 .2rem}
.sun-marks{
  position:absolute;left:0;right:0;top:.05rem;height:1.1rem;pointer-events:none;
}
.sun-marks i{
  position:absolute;top:0;width:1px;height:100%;
  background:rgba(157,106,18,.45);transform:translateX(-.5px);
}
.sun-steps{display:flex;justify-content:space-between;gap:.2rem;margin-top:.7rem}
.sun-steps button{
  font-family:var(--sans);font-weight:300;
  font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(36,29,21,.55);background:transparent;cursor:pointer;
  border:1px solid transparent;border-radius:2px;padding:.32rem .4rem;
  transition:color .35s ease,border-color .35s ease;
}
.sun-steps button:hover{color:var(--gold)}
.sun-steps button[aria-pressed="true"]{
  color:var(--gold);border-color:rgba(157,106,18,.3);
}

.sun-hour{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.7rem;
  margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--line);
}
.sun-hour label,.sun-hour output{
  font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);
}
.sun-hour output{color:rgba(36,29,21,.7);font-variant-numeric:tabular-nums}

/* one slider, drawn once, used twice */
.sun-slide input[type="range"],
.sun-hour input[type="range"]{
  -webkit-appearance:none;appearance:none;
  width:100%;height:1.1rem;background:transparent;cursor:pointer;margin:0;
}
input[type="range"]::-webkit-slider-runnable-track{
  height:2px;border-radius:2px;
  background:linear-gradient(90deg,rgba(157,106,18,.18),rgba(157,106,18,.42));
}
input[type="range"]::-moz-range-track{
  height:2px;border-radius:2px;background:rgba(157,106,18,.3);
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:.85rem;height:.85rem;margin-top:-.4rem;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#f6cb7a,#a8701a);
  box-shadow:0 0 0 1px rgba(36,26,12,.4),0 0 12px -2px #f6cb7a;
}
input[type="range"]::-moz-range-thumb{
  width:.85rem;height:.85rem;border:none;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#f6cb7a,#a8701a);
  box-shadow:0 0 0 1px rgba(36,26,12,.4),0 0 12px -2px #f6cb7a;
}
input[type="range"]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 2px var(--gold)}
input[type="range"]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 2px var(--gold)}

/* ── the arithmetic ────────────────────────────────────────────────────  */
.sun-table{
  width:100%;border-collapse:collapse;
  margin-top:1.2rem;
}
.sun-table th,.sun-table td{
  padding:.44rem 0;text-align:left;vertical-align:baseline;
  font-size:.78rem;line-height:1.5;
}
.sun-table th{
  font-weight:300;letter-spacing:.02em;color:var(--ink-faint);
}
.sun-table td{
  text-align:right;color:#1e1810;
  font-variant-numeric:tabular-nums;
}
.sun-table tr.sep th,.sun-table tr.sep td{padding-top:.9rem}
.sun-table tr.r-clear th,.sun-table tr.r-clear td{
  padding-top:.7rem;border-top:1px solid var(--line);
}
.sun-table tr.r-clear td{
  font-family:var(--serif);font-size:1.06rem;
}
.sun-table td.is-clear{color:var(--moss)}
.sun-table td.is-cut{color:#a33c1c}
.sun-table td.is-shaded{color:var(--ink-faint)}

.sun-by{
  margin-top:.9rem;padding-top:.8rem;border-top:1px solid var(--line);
  font-size:.76rem!important;line-height:1.7;color:var(--ink-soft);
}
.sun-small{
  margin-top:auto;padding-top:1.1rem;
  font-size:.68rem!important;line-height:1.6;color:var(--ink-faint);
}

.nowrap{white-space:nowrap}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

@media (max-width:999px){
  .rig-stage{min-height:clamp(17rem,44vh,26rem)}
  .sun-small{margin-top:1.1rem}
}