/* hexflow.css — the edges of every screen.
 *
 * Written by Lavender, 2026-08-04, the night the house learned to flow.
 *
 * WHAT THIS IS. Kal asked for a carousel: "the width of the screen, a wide
 * display, and the very left/right edges have slightly thicker bars in the
 * middle (no scrolling) with obvious direction arrows, encouraging clicking...
 * we offer a very straightforward, no thinking, just come in, go this way."
 *
 * So: two bars, welded to the left and right edges of the viewport, each one
 * literally HALF A HEXAGON — widest at the vertical midpoint, tapering to the
 * corners. Each bar is TINTED THE COLOUR OF THE REALM IT LEADS TO, so the edge
 * of every screen quietly whispers who lives next door before you click.
 *
 * WHY THIS FILE EXISTS AND NOT A SCRIPT. The bars are plain <a> tags sitting in
 * the page's own HTML, and this stylesheet is what makes them look like bars.
 * That is the whole architecture and it is deliberate: if the styling arrived by
 * JavaScript, a stranger with scripts off would get two naked blue links in the
 * corner. Instead they get the real carousel, working, silent, no JS at all.
 * hexflow.js only *decorates* — arrow keys, swipe. It never gates a door.
 *
 * The house stylesheet (/styles.css) is frozen; this is Lavender's own file and
 * every colour in it reads through a fallback — var(--celeste, #a8c8ec) — so it
 * is correct whether or not the palette tokens have landed yet.
 *
 * Zero dependencies. No build step. Read it, change it; it is meant to be read.
 */

:root {
  /* The gutter the bars occupy. Anything that wants to hug a screen edge —
   * a World Tree, say — should sit INSIDE this much space, or on top of it
   * with a z-index above 120. It is published as a custom property precisely
   * so another seat's self-mounting script can ask instead of guess. */
  --hexbar-w: clamp(3.1rem, 6vw, 5.4rem);
  --edge-gutter: var(--hexbar-w);
}

/* The six realms, with fallbacks. A later definition of the same token wins,
 * so if the foundation defines these, these lines are simply never consulted. */
.hexbar {
  --edge: var(--warm, #d9a662);   /* every bar overrides this inline */
}

/* ------------------------------------------------------------------ *
 * The bar itself — half a hexagon, welded to the edge
 * ------------------------------------------------------------------ */

.hexbar {
  position: fixed;
  top: 0;
  bottom: 0;
  width: var(--hexbar-w);
  z-index: 120;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;

  text-decoration: none;
  -webkit-tap-highlight-color: transparent;

  /* The parent's background is the bar's HAIRLINE EDGE. ::before sits 1.5px
   * inside with the dark fill on top, so the tapered outline comes for free —
   * a clip-path eats a border, so the border has to be faked underneath it. */
  background: color-mix(in srgb, var(--edge) 60%, transparent);
}

.hexbar::before {
  content: '';
  position: absolute;
  inset: 1.5px;
  z-index: -1;
  /* Dark at the outer edge, her colour bleeding inward toward the stage. */
  background:
    linear-gradient(var(--bleed, to right),
      color-mix(in srgb, var(--edge) 22%, #171512) 0%,
      color-mix(in srgb, var(--edge) 7%, #171512) 100%);
}

/* THE SHAPE. Widest (100%) at the vertical midpoint, tapering to 52% at the
 * top and bottom corners: the left half of a hexagon, pointing inward. */
.hexbar-prev,
.hexbar-prev::before {
  left: 0;
  clip-path: polygon(0 0, 52% 0, 100% 50%, 52% 100%, 0 100%);
}
.hexbar-next,
.hexbar-next::before {
  right: 0;
  clip-path: polygon(100% 0, 48% 0, 0 50%, 48% 100%, 100% 100%);
}
.hexbar-next::before { --bleed: to left; }

/* ------------------------------------------------------------------ *
 * The arrow — a hexagon medallion at the widest point
 * ------------------------------------------------------------------ *
 * "obvious direction arrows, encouraging clicking." A tapering bar is a
 * subtle thing over a whole viewport height; this is the part that is not
 * subtle. Dark glyph on her colour, at the exact point where the bar is
 * thickest, which is also exactly where your thumb already is.
 */

.hexbar-arrow {
  display: grid;
  place-items: center;
  width: 2.15rem;
  height: 2.45rem;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: color-mix(in srgb, var(--edge) 84%, #171512);
  color: #171512;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1;
  padding-bottom: 0.12em;   /* the glyphs sit high in the em box */
}

/* The name of the realm you are about to walk into, read bottom-to-top on the
 * left and top-to-bottom on the right, so both run "toward" the stage. */
.hexbar-name {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 0.76rem;
  letter-spacing: 0.22em;
  text-transform: lowercase;
  color: var(--edge);
  opacity: 0.92;
  max-height: 42vh;
  overflow: hidden;
}
.hexbar-prev .hexbar-name { rotate: 180deg; }

/* ------------------------------------------------------------------ *
 * Hover, focus, and the promise that a keyboard gets everything
 * ------------------------------------------------------------------ */

.hexbar:hover,
.hexbar:focus-visible {
  background: color-mix(in srgb, var(--edge) 95%, transparent);
}
.hexbar:hover::before,
.hexbar:focus-visible::before {
  background:
    linear-gradient(var(--bleed, to right),
      color-mix(in srgb, var(--edge) 34%, #171512) 0%,
      color-mix(in srgb, var(--edge) 12%, #171512) 100%);
}
.hexbar:hover .hexbar-arrow,
.hexbar:focus-visible .hexbar-arrow {
  background: var(--edge);
}
.hexbar:hover .hexbar-name,
.hexbar:focus-visible .hexbar-name { opacity: 1; }

/* A clip-path clips the outline too, so the usual focus ring would be invisible.
 * The medallion carries it instead — it is inside the shape and never clipped. */
.hexbar:focus-visible { outline: none; }
.hexbar:focus-visible .hexbar-arrow {
  outline: 2px solid var(--ink, #e8e2d6);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
  .hexbar,
  .hexbar::before,
  .hexbar-arrow,
  .hexbar-name {
    transition: background 0.18s ease, opacity 0.18s ease, outline-color 0.18s ease;
  }
  /* The nudge inward on hover: the bar leans toward you. Motion, so it lives
   * inside this query and nowhere else. */
  .hexbar:hover .hexbar-arrow { translate: var(--nudge, 3px) 0; }
  .hexbar-next:hover .hexbar-arrow { --nudge: -3px; }
}

/* ------------------------------------------------------------------ *
 * Room for the bars
 * ------------------------------------------------------------------ */

/* Keep page content out from under the bars. :has() is doing real work here —
 * a page that never opted in is never touched. */
body:has(.hexbar) {
  padding-left: var(--hexbar-w);
  padding-right: var(--hexbar-w);
}

/* Small screens: the bars stay (they are the navigation), the names go. A
 * 40-character-wide column has nothing to spare for vertical typography. */
@media (max-width: 34rem) {
  :root { --hexbar-w: 2.6rem; }
  .hexbar-name { display: none; }
  .hexbar-arrow { width: 1.7rem; height: 1.95rem; font-size: 1.25rem; }
}

/* Print: a fixed bar on paper is a smear of ink and no navigation at all. */
@media print {
  .hexbar { display: none; }
  body:has(.hexbar) { padding-left: 0; padding-right: 0; }
}

/* ------------------------------------------------------------------ *
 * The hex doors — the branches inside a screen
 * ------------------------------------------------------------------ *
 * The bars carry you AROUND the ring. These carry you DEEPER: her lore, her
 * desk, the overworld. Shape and layout live here; the .door class they also
 * carry is the foundation's, and the lock state is the foundation's too —
 * html[data-hearth="lit"] .door is what opens a locked one. This file only
 * ever shapes them.
 *
 * A LOCKED DOOR IS STILL A DOOR. It keeps its real href and nothing here or in
 * hexflow.js ever intercepts the click. The click lands on the house's own
 * holding page, which says the true thing: it is real, it is occupied, and
 * here is how to knock. Stripping the href would turn an invitation into a
 * dead end, and that is the one thing these must never be.
 */

.branches {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.1rem;
  margin: 2.25rem auto 0;
}

.hexdoor {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;

  /* Sized so the text clears the corners. A true hexagon only has its full
   * width across the middle band (26%–74% of the height here), so the door has
   * to be tall enough that a label plus two lines of sub-text fit inside that
   * band. Flex centring puts them there. Shrink this and the corners start
   * eating words. */
  width: 12.5rem;
  min-height: 9.2rem;
  padding: 1.5rem 1.6rem;
  text-align: center;
  text-decoration: none;
  color: var(--ink, #e8e2d6);

  /* A flat-topped hexagon. Never a circle — the house does not own a circle. */
  clip-path: polygon(50% 0, 100% 26%, 100% 74%, 50% 100%, 0 74%, 0 26%);
  background: color-mix(in srgb, var(--her, #d9a662) 45%, transparent);

  /* ⚑ LOAD-BEARING ZERO, not tidiness. These carry class="door hexdoor", so the
   * foundation's .door rules also apply — and A BORDER UNDER A CLIP-PATH IS
   * CLIPPED TOO. It survives on the flat edges, vanishes on the diagonals, and
   * reads as a rendering bug rather than a style. .hexdoor previously just
   * declined to set one, which is not the same as refusing one: whatever .door
   * sets would have come straight through. The edge here is the ::before
   * hairline below and nothing else. Delete this line and the doors grow a
   * broken-looking inner outline the moment the foundation adds a border. */
  border: 0;
}

.hexdoor::before {
  content: '';
  position: absolute;
  inset: 1.5px;
  z-index: -1;
  clip-path: polygon(50% 0, 100% 26%, 100% 74%, 50% 100%, 0 74%, 0 26%);
  background: color-mix(in srgb, var(--her, #d9a662) 9%, #211e19);
}

.hexdoor-label {
  font-size: 1.02rem;
  letter-spacing: 0.03em;
  color: var(--her, #d9a662);
}
.hexdoor-sub {
  font-size: 0.78rem;
  line-height: 1.45;
  /* NOT plain --dim, and the reason is arithmetic rather than taste. --dim on
   * the flat page background is fine, but a door's fill is her colour mixed
   * into --card, which is lighter — and #9a927f on that measures 3.91:1, under
   * the 4.5:1 floor for text this small. Lifting it 30% toward --ink puts it at
   * 4.81:1. It stays visibly quieter than the label above it, which is the
   * whole job of this line; it just stops being quieter than a person can read. */
  color: color-mix(in srgb, var(--dim, #9a927f) 70%, var(--ink, #e8e2d6));
  max-width: 9.2rem;
}

.hexdoor:hover,
.hexdoor:focus-visible {
  background: color-mix(in srgb, var(--her, #d9a662) 90%, transparent);
}
.hexdoor:hover::before,
.hexdoor:focus-visible::before {
  background: color-mix(in srgb, var(--her, #d9a662) 16%, #211e19);
}
.hexdoor:focus-visible { outline: none; }
.hexdoor:focus-visible .hexdoor-label {
  outline: 2px solid var(--ink, #e8e2d6);
  outline-offset: 4px;
}

/* The locked one. It reads as shut — dimmer fill, a keyhole mark — and it is
 * still fully clickable, still keyboard-reachable, still a real address. */
.hexdoor.locked {
  background: color-mix(in srgb, var(--her, #d9a662) 26%, transparent);
}
.hexdoor.locked::before {
  background: color-mix(in srgb, var(--her, #d9a662) 4%, #1b1915);
}
.hexdoor.locked .hexdoor-label {
  color: color-mix(in srgb, var(--her, #d9a662) 62%, var(--dim, #9a927f));
}
.hexdoor.locked .hexdoor-label::after {
  content: ' \25C7';          /* a small open lozenge — the keyhole */
  font-size: 0.72em;
  opacity: 0.75;
}
.hexdoor.locked:hover,
.hexdoor.locked:focus-visible {
  background: color-mix(in srgb, var(--her, #d9a662) 70%, transparent);
}

/* When the hearth is lit the foundation renders .door open; the keyhole mark
 * has nothing left to say, so it stops saying it. */
html[data-hearth="lit"] .hexdoor.locked .hexdoor-label::after { content: none; }

@media (prefers-reduced-motion: no-preference) {
  .hexdoor, .hexdoor::before, .hexdoor-label {
    transition: background 0.18s ease, color 0.18s ease;
  }
}

@media (max-width: 34rem) {
  .branches { gap: 0.8rem; }
  .hexdoor { width: 9.6rem; min-height: 6.5rem; padding: 0.9rem 1.1rem; }
  .hexdoor-sub { font-size: 0.72rem; }
}