/* ============================================================
   FRVRARETE HOME — the home page only: the Directory tree, the star
   map, the hands, the readout and the footer. Colour lives in
   paints.css; shared type and rules in style.css.
   ============================================================ */

/* ---- home only ---- */

/* the Times FRVRARETE title: 5% narrower than the page, centred */
.wordmark-wrap .wordmark { width: 95%; margin: 0 auto; }

/* Branch lines are a solid colour (the ink mixed 45% into the paper),
   not a transparent one — where lines meet and overlap they'd
   otherwise stack up into darker specks. */
:root { --branch: #636378; }                       /* oxblood, the default */
:root[data-ink="sky"] { --branch: #A2879E; }
:root[data-ink="ivory"] { --branch: #CDA088; }
:root[data-ink="forest"] { --branch: #757C70; }
:root[data-ink="cobalt"] { --branch: #9BADE6; }

/* left: a narrow column of text. right: the sky, the main event */
.home-grid { grid-template-rows: auto 1fr; }
.home-grid .pillars { grid-column: 1 / span 4; grid-row: 1; }
.home-grid .tree-block { grid-column: 1 / span 4; grid-row: 2; }
.home-grid .sky { grid-column: 5 / -1; grid-row: 1 / span 2; }

.pillars { display: grid; gap: 22px; align-content: start; }

/* ================= footer right: contact (opens to its left), then the city ================= */

.foot-right {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: baseline;
  gap: 4px 28px;
}

.contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: baseline;
  gap: 4px 28px;
}

.contact-panel {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px 28px;
  animation: fade-in 0.25s ease both;
}

.contact-panel[hidden] { display: none; }

.contact-panel a { text-decoration: none; }
.contact-panel a:hover { text-decoration: underline; }

.contact-toggle {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}


.contact-toggle:hover .contact-name,
.contact-toggle:focus-visible .contact-name { text-decoration: underline; text-underline-offset: 3px; }
.contact-toggle:focus-visible { outline: 1px dashed var(--ink); outline-offset: 3px; }

.contact:not(.open) .toggle::before { content: "+"; }

/* PAINT switch, bottom right after the city — same look as on the document pages */
.switch { display: inline-flex; align-items: baseline; gap: 6px; }
.switch .label { margin-right: 0; font-weight: 400; letter-spacing: inherit; }
.switch button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
}
/* everything at full strength; the current choice is underlined */
.switch button[aria-pressed="true"] { text-decoration: underline; text-underline-offset: 3px; }
.switch button:focus-visible { outline: 1px dashed var(--ink); outline-offset: 3px; }


/* ================= directory tree ================= */

.tree-block {
  font-size: 10.5px;
  line-height: 1.6;
  align-self: start;
}

.tree-head { font-size: inherit; margin-bottom: 4px; }

.tree-root,
.tree-folder {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.tree-root .tree-name,
.tree-folder .tree-name { font-weight: 700; letter-spacing: 0.08em; }

.toggle::before { content: "\2212"; opacity: 0.6; }
.tree-block.collapsed .tree-root .toggle::before,
.tree-group.collapsed .toggle::before { content: "+"; }

.tree-block.collapsed .tree { display: none; }

.tree-root:hover .tree-name,
.tree-folder:hover .tree-name,
.tree-root:focus-visible .tree-name,
.tree-folder:focus-visible .tree-name { text-decoration: underline; text-underline-offset: 3px; }

.tree-root:focus-visible,
.tree-folder:focus-visible { outline: 1px dashed var(--ink); outline-offset: 3px; }

/* Branch lines, drawn with borders so wrapped titles never break them.
   Every list is indented the same 4px, which puts its trunk directly
   under the first letter of the label above; each item's elbow reaches
   up into that gap, so the tree reads as one continuous line. */
.tree, .tree ul { list-style: none; margin-left: 4px; }

.tree li {
  position: relative;
  padding-left: 20px;
}

.tree li::before {                      /* elbow: up to the label above, across to this one */
  content: "";
  position: absolute;
  left: 0;
  top: -4px;
  width: 14px;
  height: calc(0.8em + 4px);
  border-left: 1px solid var(--branch);
  border-bottom: 1px solid var(--branch);
}

.tree li::after {                       /* trunk: on down to the next sibling */
  content: "";
  position: absolute;
  left: 0;
  top: 0.8em;
  bottom: 0;
  border-left: 1px solid var(--branch);
}

.tree li:last-child::after { display: none; }

.tree-group > ul { padding-bottom: 8px; }
.tree-group:last-child > ul,
.tree-sub > ul { padding-bottom: 0; }
.tree-group.collapsed > ul { display: none; }

.tree-group ul li { padding-bottom: 3px; }
.tree-group ul li:last-child { padding-bottom: 0; }

.tree-subfolder .tree-name { font-weight: 400; letter-spacing: 0.1em; }

.tree-doc {
  display: block;
  text-decoration: none;
}

.tree-doc .doc-title u {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.tree-doc.active .doc-title u,
.tree-doc:hover .doc-title u { text-decoration-thickness: 2px; }

/* subtitles live in the sky's readout, not the tree — on every screen */
.tree-doc .sub { display: none; }

.tree-empty { opacity: 0.5; }

.tree-doc, .tree-folder { transition: opacity 0.18s ease; }
.tree-doc.dim, .tree-folder.dim { opacity: 0.3; }

/* ================= star map ================= */

.sky {
  position: relative;
  container-type: size;
  height: clamp(420px, calc(100svh - 310px), 800px);
  align-self: start;
  -webkit-tap-highlight-color: transparent;
}

.sky-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.sky-lines line {
  stroke: var(--ink);
  stroke-width: 1;
  transition: opacity 0.18s ease;
}

.sky-lines .chain  { opacity: 0.3; }
.sky-lines .anchor { opacity: 0.2; stroke-dasharray: 2 5; }
.sky-lines .lit    { opacity: 0.85; }
.sky-lines .dim    { opacity: 0.06; }

.sky-center {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--mark-ratio, 0.36) * 100cqmin);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 3;   /* above the readout's soft backing */
}

.sky-center .mark,
.sky-center-icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.sky-center-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.92);
}

.sky.focused .mark { opacity: 0; transform: scale(0.9); }
.sky.focused .sky-center-icon { opacity: 1; transform: none; }

/* the hands: drawn in the ink colour; on arrival each hand reaches in from
   its own side (Plato from the left, Aristotle from the right) as it fades in */
.hands-mark { color: var(--ink); overflow: visible; }
.hands-mark path { animation: hands-in-left 1.3s cubic-bezier(0.2, 0.7, 0.3, 1) 0.1s backwards; }
.hands-mark path.hand-right { animation-name: hands-in-right; }
@keyframes hands-in-left {
  from { opacity: 0; transform: translateX(-9px); }
  to   { opacity: 1; transform: none; }
}
@keyframes hands-in-right {
  from { opacity: 0; transform: translateX(9px); }
  to   { opacity: 1; transform: none; }
}

.sky-stars { position: absolute; inset: 0; }

.sky-star {
  position: absolute;
  width: 32px;
  height: 32px;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: opacity 0.18s ease;
}

.sky-star svg {
  width: calc(var(--star, 15px) * 1.8);    /* the hands read smaller than a four-point star, so draw them larger */
  height: calc(var(--star, 15px) * 1.8);
  fill: var(--ink);
  transition: transform 0.18s ease, filter 0.25s ease;
  animation: twinkle 3.2s ease-in-out var(--twinkle-delay, 0s) infinite;
}

.sky-star.active svg,
.sky-star:focus-visible svg {
  transform: scale(1.6);
  animation: none;
  filter:
    drop-shadow(0 0 3px rgba(var(--ink-rgb), 0.65))
    drop-shadow(0 0 7px rgba(var(--ink-rgb), 0.4))
    drop-shadow(0 0 13px rgba(var(--ink-rgb), 0.2));
}

.sky-star.dim { opacity: 0.16; }

/* a year star: a larger star inside a dashed ring, labelled with its year */
.sky-cluster {
  width: calc(var(--star, 15px) * 2.9);
  height: calc(var(--star, 15px) * 2.9);
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.sky-cluster::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px dashed var(--branch);
  border-radius: 50%;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.sky-cluster svg {
  width: calc(var(--star, 15px) * 1.45);
  height: calc(var(--star, 15px) * 1.45);
}

.sky-cluster .cl-label {
  position: absolute;
  top: calc(100% - 2px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  white-space: nowrap;
  opacity: 0.7;
  pointer-events: none;
}

.sky-cluster.active::before { transform: scale(1.18); border-color: var(--ink); }
.sky-cluster.active svg { transform: scale(1.25); }
.sky-cluster.active .cl-label { opacity: 1; font-weight: 700; }

/* its documents, fanned out while the year is open */
.sky-members {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.sky-members.expanded { opacity: 1; }
.sky-members.expanded .sky-member { pointer-events: auto; }

.sky-member::before {                   /* a patch of paper so it reads over lines */
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--paper);
  z-index: -1;
}

.sky-member svg {
  width: calc(var(--star, 15px) * 0.9);
  height: calc(var(--star, 15px) * 0.9);
  animation: none;
}

.sky-member.dim { opacity: 1; }

/* while a year is open, everything but it and its documents steps back */
.sky.fan-open .sky-stars > .sky-star:not(.active) { opacity: 0.2; }
.sky.fan-open .sky-lines .chain,
.sky.fan-open .sky-lines .anchor { opacity: 0.06; }
.sky.fan-open .sky-label { opacity: 0.12; }

.sky-lines .spoke { opacity: 0.45; }
.sky-lines .spoke:not(.show) { opacity: 0; }

.sky-star:focus-visible { outline: none; }

@keyframes twinkle {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

.sky-label {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 10px;
  letter-spacing: 0.16em;
  white-space: nowrap;
  opacity: 0.45;
  transition: opacity 0.18s ease;
  pointer-events: none;
}

.sky-label.lit { opacity: 1; font-weight: 700; }
.sky-label.dim { opacity: 0.12; }

/* readout: empty until something is focused, so the mark floats clean */
.sky-readout {
  position: absolute;       /* placed just under the star by home.js */
  z-index: 2;
  width: max-content;
  text-align: center;
  padding: 4px 10px;
  /* the label is set in the sky itself: a paper halo hugs the letters so the
     constellation lines keep running behind the words instead of being blocked out */
  text-shadow:
    1px 0 0 var(--paper), -1px 0 0 var(--paper),
    0 1px 0 var(--paper), 0 -1px 0 var(--paper),
    1px 1px 0 var(--paper), -1px 1px 0 var(--paper),
    1px -1px 0 var(--paper), -1px -1px 0 var(--paper),
    0 0 4px var(--paper), 0 0 4px var(--paper);
  opacity: 0;
  transform: translate(-50%, 4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
}

.sky.focused .sky-readout { opacity: 1; transform: translate(-50%, 0); }

.sky-readout span { display: block; }
.sky-readout .ro-title { font-weight: 700; }
.sky-readout .ro-sub { opacity: 0.75; }
.sky-readout .ro-meta { opacity: 0.55; margin-top: 2px; }

/* ---- intro: stars light up in document order, lines trace between them ---- */
.sky.intro .sky-stars > .sky-star {
  animation: star-in 0.55s cubic-bezier(0.2, 0.7, 0.3, 1) var(--delay, 0s) both;
}

.sky.intro .sky-label,
.sky.intro .sky-lines .anchor {
  animation: fade-in 0.7s ease var(--delay, 0s) both;
}

.sky.intro .sky-lines .chain {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  animation: trace 0.5s ease-out var(--delay, 0s) forwards;
}

@keyframes star-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes fade-in { from { opacity: 0; } }

@keyframes trace { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .hands-mark path { animation: none; }
  .sky-star svg { animation: none; }
  .sky-center .mark, .sky-center-icon, .sky-readout { transition: none; }
}

/* narrower screens: the sky leads, the text follows */
/* ================= sign-off ================= */

.home-foot { margin-top: clamp(18px, 2.4vw, 30px); }


@media (max-width: 900px) {
  .home-grid { grid-template-rows: none; }
  .home-grid .sky { grid-column: 1 / -1; grid-row: 1; height: clamp(320px, 78vw, 620px); }
  .home-grid .pillars { grid-column: 1 / span 6; grid-row: 2; }
  .home-grid .tree-block { grid-column: 7 / -1; grid-row: 2; }
}

@media (max-width: 560px) {
  /* footer: one clean column down the left; the email opens under CONTACT */
  .home-foot { flex-direction: column; align-items: flex-start; }
  .foot-right { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px; }
  .contact { flex-direction: column-reverse; align-items: flex-start; gap: 4px; }
  .contact-panel { justify-content: flex-start; }
  .contact-panel a::before { content: "\21B3"; display: inline-block; margin-right: 6px; opacity: 0.75; }

  .home-grid .sky { height: clamp(300px, 96vw, 420px); }
  .home-grid .pillars,
  .home-grid .tree-block { grid-column: 1 / -1; grid-row: auto; }
  .tree-block { font-size: 11px; }
  .sky-label { font-size: 9px; }
}

/* no categories: the list sits straight under Directory, without a folder row */
.tree-group.flat > .tree-folder { display: none; }
.tree-group.flat > ul { display: block; }
.tree-group.flat { padding-left: 0; }
.tree-group.flat::before, .tree-group.flat::after { display: none; }
.tree-group.flat > ul { margin-left: 0; padding-bottom: 0; }

/* the pinned essay: sits first in the Directory, tagged */
.tree-doc .pin { margin-left: 10px; font-size: 0.8em; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.6; }