/* Sun Path — a studio tool by ALLOIC. Cool paper, deep navy ink, one amber for the sun and the action.
   The drawing is the page: an architect's model on a field of sky whose flat colour follows the sun. */
:root {
  --ink: #0e1a2b;
  --paper: #f3f6f8;
  --panel: #e3eaf0;
  --sun: #ffab1a;
  --shade: #9fb6cb;
  --sky: #cfe7f6;
  --font: "Bricolage Grotesque", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --m: clamp(1rem, 2.4vw, 2.25rem);
  --gap: clamp(1rem, 2vw, 2rem);
  --r: 1.5rem;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 1.125rem; line-height: 1.45; -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3, p, ul, dl, dd, fieldset, legend { margin: 0; padding: 0; }
ul { list-style: none; }
fieldset { border: 0; min-width: 0; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.concept { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1.25rem; background: var(--ink); color: #fff; font-size: 0.9375rem; line-height: 1.4; padding: 0.7rem var(--m); }
.concept a { white-space: nowrap; font-weight: 600; text-underline-offset: 0.2em; }
.concept a:focus-visible { outline-color: #fff; }

/* ---------- the tool ---------- */
.tool {
  display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: var(--gap); row-gap: var(--gap);
  grid-template-areas: "stage head" "stage read" "time dial" "date setup";
  grid-template-rows: auto 1fr auto auto;
  padding: var(--gap) var(--m) clamp(3rem, 7vw, 6rem);
}
.head { grid-area: head; }
.stage { grid-area: stage; }
.timebox { grid-area: time; }
.read { grid-area: read; }
.dial { grid-area: dial; }
.datebox { grid-area: date; }
.setup { grid-area: setup; }

h1 { font-size: clamp(3.4rem, 1.4rem + 6.4vw, 7.25rem); font-weight: 700; line-height: 0.86; letter-spacing: -0.045em; font-variation-settings: "opsz" 96; }
.lead { margin-top: 1rem; font-size: clamp(1.25rem, 1rem + 0.7vw, 1.6rem); line-height: 1.32; letter-spacing: -0.01em; max-width: 22ch; }

.stage { position: relative; align-self: start; border-radius: calc(var(--r) * 1.2); background: var(--sky); overflow: hidden; touch-action: pan-y; }
#scene { display: block; width: 100%; height: auto; cursor: grab; -webkit-user-select: none; user-select: none; }
.stage.is-dragging #scene { cursor: grabbing; }
#g-shadow polygon { fill: var(--ink); pointer-events: none; }
#g-solids polygon { stroke-width: 0.8; stroke-linejoin: round; pointer-events: none; }
#g-base polygon { stroke: none; }
#patio { cursor: move; stroke: var(--ink); stroke-width: 0; outline: none; }
#patio:hover { stroke-width: 2; }
#patio:focus-visible { stroke-width: 4; }
.north { fill: var(--ink); opacity: 0.8; }
.north-n, .hours text { fill: var(--ink); font-family: var(--font); font-weight: 600; }
.arc { fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; }
.arc-day { stroke-width: 3; stroke-dasharray: 0.1 9; }
.ray { stroke: var(--sun); stroke-width: 2.5; stroke-dasharray: 2 9; stroke-linecap: round; }
.sun { fill: var(--sun); stroke: #fff; stroke-width: 4; }
.is-night .north, .is-night .north-n, .is-night .hours text { fill: #e6edf5; }
.is-night .arc { stroke: #e6edf5; }
.turn { position: absolute; top: 0.9rem; right: 0.9rem; display: flex; gap: 0.4rem; }
.turn button { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 50%; background: #fff; font-size: 1.35rem; line-height: 1; transition: transform 160ms var(--ease); }
.turn button:active { transform: scale(0.92); }
.stage-foot { position: absolute; left: 1.1rem; right: 1.1rem; bottom: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.1rem; pointer-events: none; }
.stage-foot > * { pointer-events: auto; }
.stage-hint { font-size: 0.9375rem; font-weight: 500; }
.is-night .stage-hint { color: #e6edf5; }

/* the readout: the time, as large as the title */
.read { align-self: start; }
.clock { display: flex; align-items: baseline; gap: 0.35rem; font-size: clamp(4rem, 1.5rem + 6.6vw, 7.5rem); font-weight: 700; line-height: 0.85; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; font-variation-settings: "opsz" 96; }
.clock #half { font-size: clamp(1.36rem, 0.5rem + 2.25vw, 2.55rem); letter-spacing: -0.02em; font-weight: 600; }
.date { margin-top: 0.55rem; font-size: clamp(1.4rem, 1rem + 1.1vw, 2rem); font-weight: 600; letter-spacing: -0.02em; }
.state { display: inline-block; margin-top: 1.1rem; padding: 0.5rem 1.05rem; border-radius: 999px; font-size: 1.1875rem; font-weight: 600; background: var(--panel); }
.state[data-state="sun"] { background: var(--sun); }
.state[data-state="night"] { background: var(--ink); color: #fff; }
.fact { margin-top: 1.1rem; font-size: clamp(1.25rem, 1rem + 0.7vw, 1.6rem); line-height: 1.32; letter-spacing: -0.01em; }
.fact b { font-weight: 700; }
.note { margin-top: 0.7rem; max-width: 34ch; }

/* the dial: the sky from above */
.dial { margin: 0; align-self: start; display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); column-gap: 1.1rem; align-items: center; }
.dial svg { display: block; width: 100%; height: auto; }
.dial figcaption { font-size: 0.9375rem; line-height: 1.4; }
.d-sky { fill: var(--sky); }
.d-ring { fill: none; stroke: var(--ink); stroke-width: 1; opacity: 0.16; }
.d-ref { fill: none; stroke: var(--ink); stroke-width: 1.5; opacity: 0.4; }
.d-day { fill: none; stroke: var(--ink); stroke-width: 3; stroke-dasharray: 0.1 7; stroke-linecap: round; }
#dial-ticks circle { fill: var(--ink); }
#dial-ticks text { font-family: var(--font); font-size: 17px; font-weight: 600; fill: var(--ink); }
#dial-letters text { font-family: var(--font); font-size: 18px; font-weight: 600; fill: var(--ink); }
#dial-letters .d-n { font-weight: 800; font-size: 21px; }
.d-sun { fill: var(--sun); stroke: #fff; stroke-width: 3; }
.dial.is-night .d-ring, .dial.is-night .d-ref, .dial.is-night .d-day { stroke: #e6edf5; }
.dial.is-night #dial-ticks circle, .dial.is-night #dial-ticks text { fill: #e6edf5; }

/* the day as a band, with the time slider laid over it */
.row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.55rem; }
.row label, legend, .field label, .mini, .limits h3 { font-size: 1.1875rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
.row output { font-weight: 600; font-variant-numeric: tabular-nums; }
.band { position: relative; height: 3.5rem; border-radius: 999px; background: var(--ink); overflow: hidden; --at: 50%; }
#band-segs i { position: absolute; top: 0; bottom: 0; }
#band-segs .is-night { background: var(--ink); }
#band-segs .is-shade { background: var(--shade); }
#band-segs .is-sun { background: var(--sun); }
.band::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--at); width: 0.5rem; margin-left: -0.25rem; background: #fff; border-radius: 999px; outline: 3px solid var(--ink); pointer-events: none; }
.band input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.band:focus-within { outline: 3px solid var(--ink); outline-offset: 3px; }
.scale { display: flex; justify-content: space-between; margin-top: 0.4rem; font-size: 0.9375rem; font-weight: 500; }
.key { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin-top: 0.8rem; font-size: 0.9375rem; }
.key li { display: flex; align-items: center; gap: 0.5rem; }
.key li::before { content: ""; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--shade); }
.key .k-sun::before { background: var(--sun); }
.key .k-night::before { background: var(--ink); }
.actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.1rem; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3.1rem; padding: 0.6rem 1.5rem; border-radius: 999px; background: var(--sun); color: var(--ink); font-weight: 700; text-decoration: none; transition: transform 160ms var(--ease), background-color 180ms var(--ease); }
.btn:active { transform: scale(0.96); }
.btn-quiet { background: var(--panel); font-weight: 600; }
.btn-ink { background: var(--ink); color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: #ff9a00; }
  .btn-quiet:hover { background: #d3dde6; }
  .btn-ink:hover { background: #1c2d47; }
  .turn button:hover { background: var(--panel); }
}

/* the year */
.slider { display: block; width: 100%; height: 2.75rem; margin: 0; accent-color: var(--ink); cursor: ew-resize; }
.scale-months span { flex: 1; text-align: center; }
.mini { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(0.2rem, 0.6vw, 0.6rem); margin-top: 0.9rem; }
.months button { display: grid; justify-items: center; gap: 0.3rem; padding: 0.4rem 0 0.5rem; border-radius: 0.8rem; font-size: 0.9375rem; transition: background-color 180ms var(--ease); }
.months .bar { display: flex; align-items: flex-end; width: 62%; height: clamp(3.5rem, 7vw, 6rem); }
.months .bar span { display: block; width: 100%; border-radius: 0.4rem 0.4rem 0.15rem 0.15rem; background: var(--sun); transition: height 500ms var(--ease); }
.months b { font-weight: 700; font-variant-numeric: tabular-nums; }
.months .is-on { background: var(--panel); }
.mon-short { display: none; }
@media (hover: hover) and (pointer: fine) { .months button:hover { background: var(--panel); } }

/* the set-up */
.setup { display: grid; gap: clamp(1.25rem, 2.4vw, 1.9rem); align-content: start; }
legend, .field label { display: block; margin-bottom: 0.6rem; }
.faces { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.faces label { position: relative; }
.faces input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.faces span[aria-hidden] { display: grid; place-items: center; width: 2.85rem; height: 2.85rem; border-radius: 50%; background: var(--panel); font-weight: 700; font-size: 1rem; transition: background-color 180ms var(--ease), color 180ms var(--ease), transform 160ms var(--ease); }
.faces input:checked + span { background: var(--ink); color: #fff; }
.faces input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 3px; }
.faces input:active + span { transform: scale(0.92); }
.checks label { display: flex; align-items: center; gap: 0.75rem; min-height: 2.75rem; cursor: pointer; }
.checks input { width: 1.5rem; height: 1.5rem; margin: 0; accent-color: var(--ink); flex: none; }
select { width: 100%; min-height: 3.1rem; padding: 0.5rem 1rem; border: 0; border-radius: 0.9rem; background: var(--panel); font-weight: 600; }

/* ---------- how it works ---------- */
.how { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--gap); row-gap: clamp(2rem, 4vw, 3.5rem); padding: clamp(3rem, 8vw, 8rem) var(--m); background: #fff; }
.how h2, .cta h2 { font-size: clamp(2.4rem, 1.2rem + 4.2vw, 5rem); font-weight: 700; line-height: 0.92; letter-spacing: -0.04em; font-variation-settings: "opsz" 96; }
.how-body { display: grid; gap: 1.1rem; font-size: clamp(1.125rem, 1rem + 0.4vw, 1.375rem); line-height: 1.4; }
.how-body p { max-width: 46ch; }
.figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem var(--gap); margin-top: 1.25rem; }
.figures div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 0.15rem; }
.figures dt { font-size: 0.9375rem; font-weight: 500; }
.figures dd { font-size: clamp(1.4rem, 1rem + 1.1vw, 2rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.limits { grid-column: 2; padding: clamp(1.25rem, 2.6vw, 2.25rem); border-radius: var(--r); background: var(--paper); }
.limits ul { margin-top: 0.8rem; display: grid; gap: 0.45rem; }
.limits li { padding-left: 1.35rem; position: relative; }
.limits li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--ink); }
.limits p { margin-top: 1rem; font-weight: 600; }

.cta { padding: clamp(3rem, 8vw, 7rem) var(--m); background: var(--sun); }
.cta p { margin-top: 1.25rem; font-size: clamp(1.25rem, 1rem + 0.7vw, 1.6rem); line-height: 1.3; max-width: 34ch; }
.cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; max-width: none !important; }
.link { font-weight: 600; text-underline-offset: 0.2em; }
.foot { padding: 1.5rem var(--m) calc(1.5rem + env(safe-area-inset-bottom, 0px)); background: var(--ink); color: #fff; font-size: 0.9375rem; }
.foot a { font-weight: 600; }
.foot a:focus-visible { outline-color: #fff; }

@media (min-width: 1100px) {
  .stage { align-self: stretch; }
  #scene { height: 100%; }
}

/* ---------- arriving ---------- */
@media (prefers-reduced-motion: no-preference) {
  .head, .read, .timebox, .datebox, .setup, .dial { animation: rise 800ms var(--ease) both; }
  .stage { animation: settle 1000ms var(--ease) both; }
  .read { animation-delay: 90ms; } .timebox { animation-delay: 160ms; } .dial { animation-delay: 200ms; } .setup { animation-delay: 220ms; } .datebox { animation-delay: 260ms; }
  /* the sections below the tool arrive as they are reached */
  html.is-ready [data-rv] { opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity 700ms var(--ease), transform 900ms var(--ease); }
  html.is-ready [data-rv].is-in { opacity: 1; transform: none; }
  html.is-ready .how-body.is-in > * { animation: rise 800ms var(--ease) both; }
  html.is-ready .how-body.is-in > :nth-child(2) { animation-delay: 80ms; }
  html.is-ready .how-body.is-in > :nth-child(3) { animation-delay: 160ms; }
  html.is-ready .how-body.is-in > :nth-child(4) { animation-delay: 240ms; }
}
@keyframes rise { from { opacity: 0; transform: translate3d(0, 22px, 0); } }
@keyframes settle { from { opacity: 0; transform: scale(0.975); } }

/* ---------- smaller screens ---------- */
@media (max-width: 1099px) {
  .tool { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "head head" "stage stage" "time time" "read dial" "date date" "setup setup"; grid-template-rows: none; }
  .dial { grid-template-columns: minmax(0, 1fr); row-gap: 0.75rem; max-width: 20rem; }
  .lead { max-width: 30ch; }
  .how { grid-template-columns: minmax(0, 1fr); }
  .limits { grid-column: auto; }
}
@media (max-width: 767px) {
  .tool { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "stage" "time" "read" "dial" "date" "setup"; }
  .dial { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); max-width: none; }
  body { font-size: 1.0625rem; }
  h1 { font-size: clamp(3rem, 15vw, 4rem); }
  .lead { margin-top: 0.6rem; }
  .stage-foot { position: static; padding: 0 1rem 1rem; }
  .turn button { width: 2.75rem; height: 2.75rem; }
  .band { height: 3.25rem; }
  .scale span:nth-child(even) { display: none; }
  .scale-months span:nth-child(even) { display: block; }
  .scale-months { font-size: 0.8125rem; }
  .months button { font-size: 0.8125rem; }
  .months .bar { width: 78%; }
  .mon-long { display: none; } .mon-short { display: inline; }
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faces { gap: 0.28rem; flex-wrap: nowrap; }
  .faces span[aria-hidden] { width: min(2.6rem, calc((100vw - 2rem - 7 * 0.28rem) / 8)); height: min(2.6rem, calc((100vw - 2rem - 7 * 0.28rem) / 8)); font-size: 0.9375rem; }
}