:root {
  color-scheme:light;
  --paper:#f4f1e8;
  --ink:#182e2c;
  --muted:#4b605c;
  --line:#b8c2b6;
  --accent:#bde098;
}
* {
  box-sizing:border-box;
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:17px/1.48 "Inter",system-ui,sans-serif;
}
header,main,footer {
  max-width:800px;
  margin:auto;
  padding-inline:clamp(20px,6vw,58px);
}
header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:25px;
  padding-bottom:23px;
  border-bottom:1px solid var(--line);
  gap:16px;
}
a {
  color:inherit;
  text-underline-offset:4px;
}
header a:first-child {
  font-weight:750;
  text-decoration:none;
}
header a:last-child,footer {
  font-size:.88rem;
}
h1,h2,p {
  margin:0;
}
h1 {
  font:normal clamp(44px,7.3vw,74px)/1.06 Georgia,serif;
  letter-spacing:-.045em;
  margin:46px 0 25px;
}
h2 {
  font-size:1.05rem;
}
.clock {
  background:var(--ink);
  color:#f6f5ea;
  border-radius:16px;
  padding:clamp(20px,5vw,36px);
}
.clock h2,.clock p {
  color:#d5e3d5;
}
.clock time {
  display:block;
  font:550 clamp(45px,10vw,88px)/1.25 "Inter",system-ui,sans-serif;
  letter-spacing:-.055em;
  font-variant-numeric:tabular-nums;
}
.local {
  display:flex;
  align-items:baseline;
  gap:12px;
  flex-wrap:wrap;
  padding:20px 0;
  border-bottom:1px solid var(--line);
}
.local strong {
  font-variant-numeric:tabular-nums;
}
.local span {
  font-size:.88rem;
  color:var(--muted);
}
.planner {
  margin:28px 0;
}
.planner h2,.article h2 {
  font:normal 1.65rem Georgia,serif;
}
.planner label {
  display:block;
  margin:12px 0 7px;
}
.planner form div {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
input,button {
  border-radius:7px;
  padding:11px 14px;
  color:var(--ink);
  font:inherit;
}
input {
  background:white;
  border:1px solid var(--line);
  max-width:100%;
}
button,.back {
  background:var(--accent);
  border:1px solid var(--ink);
  cursor:pointer;
  font-weight:650;
}
button:hover,.back:hover {
  background:#cee9b0;
}
output {
  display:block;
  margin-top:12px;
  font-weight:650;
}
footer {
  margin-top:36px;
  padding-bottom:34px;
  color:var(--muted);
}
.article p {
  max-width:57ch;
  margin:10px 0 25px;
}
.back {
  display:inline-block;
  padding:9px 16px;
  border-radius:7px;
  text-decoration:none;
}
a:focus-visible,input:focus-visible,button:focus-visible {
  outline:3px solid #518141;
  outline-offset:3px;
}
@media(max-width:420px) {
  header {
    align-items:flex-start;
  }
  .planner form div {
    display:grid;
  }
  h1 {
    margin-top:29px;
  }
}