/* "How the day unfolds", written as a letter with a hand-drawn timeline.
   The ink (the thread, its knots, the doodles, the underlines) is drawn by day-ink.js into one SVG over the letter. */

#day .day__text { position: relative; }
.day-ink { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.day-ink path { fill: none; stroke: var(--pen, #28304a); stroke-linecap: round; stroke-linejoin: round; }

/* times written in the pen, the "Where" heading folded into each moment */
.letters .day__text { max-width: 44rem; }
#day .hours time { font-family: var(--hand); color: var(--pen); font-size: clamp(1.45rem, 2.2vw, 1.85rem); line-height: 1.3; text-align: left; text-shadow: 0 0 0.7px rgba(40, 48, 74, 0.35); }
#day .sub { display: none; }
#day :is(.hours, .places) { display: contents; }
#day :is(.hours li, .places li) { border: 0; }
#day .places__k { display: none; }
#day .places__name { font-size: 1.25rem; margin: 0 0 0.15rem; }
#day .places__addr { margin-bottom: 0.2rem; }

/* more paper under the last place before the torn edge */
#day .sheet { padding-bottom: clamp(6rem, 10vw, 9rem); }
@media (max-width: 1000px) { #day .sheet { padding-bottom: 5rem; } }

/* ---------- a written letter: a serif column, times and notes in the pen, doodles in the right margin ---------- */
.letters .day__text { margin-inline: auto; }
#day .day__text { display: flex; flex-direction: column; text-align: left; }
#day .title { order: 1; }
#day .day__intro { order: 2; margin-bottom: 2.75rem; max-width: none; }
#day .hours li:nth-child(1) { order: 3; }
#day .places li:nth-child(1) { order: 4; padding-bottom: 5.5rem; }
#day .hours li:nth-child(2) { order: 5; }
#day .places li:nth-child(2) { order: 6; }
#day .hours li { display: block; padding: 0; }
#day .hours time { display: inline-block; margin: 0 0 0.35rem -0.1rem; transform-origin: 0 60%; rotate: -2deg; }
#day .hours li:nth-child(2) time { rotate: 1.5deg; }
#day .hours p { font-size: 1.15rem; line-height: 1.6; color: var(--ink-soft); }
#day .hours b { display: inline; font-size: 1.15rem; color: var(--ink); }
#day .hours b::after { content: " — "; color: var(--ink-soft); font-weight: 400; }
#day .places li { padding: 0.55rem 0 0; }
#day .places__name { display: inline; }
#day .places__addr { display: inline; font-size: 1.05rem; }
#day .places__addr::before { content: ", "; }
/* the map link written as a little note in the pen: "(directions)" */
#day .places .link { display: inline-block; margin: 0.35rem 0 0 0.1rem; font-size: 0; text-decoration: none; rotate: -1.5deg; }
#day .places .link::before { content: var(--t-directions, "(directions)"); font-family: var(--hand); font-size: 1.05rem; line-height: 1.6; color: var(--pen); }
#day .places .link:hover::before { color: var(--olive); }
@media (max-width: 1000px) {
  #day .places li:nth-child(1) { padding-bottom: 4.5rem; }
  #day .hours li { padding-right: 3rem; }
}

/* the place on one line, the comma tight against the name */
#day .places li { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0; }
#day .places .link { margin-left: 0.6rem; }
@media (max-width: 1000px) {
  /* on a phone: the place's name, then its town, then the note, each on its own line */
  #day .places li { display: block; }
  #day :is(.places__name, .places__addr) { display: block; }
  #day .places__addr::before { content: none; }
  #day .places .link { margin-left: 0; }
}

/* the timeline in the left margin */
#day .places li:nth-child(1) { padding-bottom: 3.5rem; }
@media (max-width: 1000px) {
  /* room on the left for the thread, on the right for the doodles */
  #day :is(.hours li, .places li) { margin-left: 2.25rem; }
  #day .hours li { padding-right: 3rem; }
  #day .places li:nth-child(1) { padding-bottom: 3rem; }
}

/* (its words, in both languages, are in texts.js: --t-directions) */