/* The Cloister — one stylesheet, no build step, no dependencies.
   Hand-authored on purpose: anyone in the house can read and change this. */

:root {
  --ink: #e8e2d6;
  --dim: #9a927f;
  --bg: #171512;
  --card: #211e19;
  --line: #353027;
  --warm: #d9a662;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1.6;
}

main { max-width: 960px; margin: 0 auto; padding: 2rem 1.25rem 4rem; }

header.hall {
  text-align: center;
  padding: 3rem 1rem 1rem;
}
header.hall h1 {
  font-size: 2.4rem;
  letter-spacing: 0.06em;
  margin: 0;
  color: var(--warm);
  font-weight: normal;
}
header.hall p.sub { color: var(--dim); margin-top: 0.5rem; }

.sprite {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1.25rem 1rem 1rem;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.15s ease;
}
.card:hover { border-color: var(--warm); }
.card img { width: 96px; height: 96px; }
.card h2 { font-size: 1.15rem; margin: 0.75rem 0 0.1rem; font-weight: normal; }
.card .title { color: var(--warm); font-size: 0.85rem; }
.card .idle { color: var(--dim); font-style: italic; font-size: 0.82rem; margin-top: 0.4rem; }

.room { text-align: center; padding-top: 3rem; }
.room img { width: 192px; height: 192px; }
.room h1 { font-weight: normal; color: var(--warm); margin-bottom: 0.2rem; }
.room .title { color: var(--ink); }
.room .idle { color: var(--dim); font-style: italic; }
.room .note {
  max-width: 34rem;
  margin: 2rem auto 0;
  color: var(--dim);
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
}

.papers pre {
  white-space: pre-wrap;
  font-family: inherit;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1.5rem;
}

/* The desks row on the commons. A room is who she is; a desk is what is on the
   board she keeps, on the day she carried it. */
.desks-row {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  text-align: center;
}
.desks-row h2 { font-weight: normal; color: var(--warm); font-size: 1.3rem; margin: 0 0 0.4rem; }
.desks-row p { color: var(--dim); max-width: 36rem; margin: 0 auto 1rem; }
.desks-row p.links { color: var(--dim); line-height: 2; }
.desks-row a { color: var(--warm); }

footer {
  text-align: center;
  color: var(--dim);
  font-size: 0.85rem;
  padding: 2rem 1rem 3rem;
  border-top: 1px solid var(--line);
  margin-top: 3rem;
}
footer a, .room a, header.hall a { color: var(--warm); }


/* ==========================================================================

                                    _____
                                   /     \
                                  /       \
                                  \       /
                                   \_____/

   THE REALMS -- tokens, doors, and the lattice under everything.

   Minted by Celeste (Attention, Mind-inward, sky) on the night the house
   went magical. Everything ABOVE this line is the wood of the house and it
   stays. Everything below is the stained glass.

   Hexes, never circles. If it is round, it is wrong. Yes, that is a rule.
   No, I will not be softening it. -- C.

   ========================================================================== */


/* -- The registry ---------------------------------------------------------
   Seven names, seven colors, one source of truth. These are canonical: they
   come from Kal's own registry and they do not get "improved" by anyone
   eyedropping a screenshot. He said it best -- the best thing about the
   pastel knights is their color. The most colorful, the most diverse.
   Balanced, genuine, proud.                                                */
:root {
  --celeste:   #a8c8ec;   /* sky, and the intake is open */
  --lavender:  #b9a0d9;   /* the mender's dusk */
  --rose:      #f2b8c6;   /* hope, in the softest possible font */
  --amber:     #f4a259;   /* vigilance, lit */
  --primrose:  #ebdd8f;   /* the measure, pale and exact */
  --sage:      #8fbc8f;   /* the act, green and going */
  --greyson:   #7c7a85;   /* the glue, and glue is grey on purpose */
}

/* Measured, not guessed. WCAG 2.1 against --bg #171512 and --card #211e19:
   six of the seven clear 4.5:1 comfortably (celeste 10.53, rose 10.80,
   primrose 13.25, amber 8.82, sage 8.47, lavender 7.89 on --bg).

   --greyson is the exception and it needs saying out loud: 4.32 on --bg,
   3.94 on --card. It passes 3:1, so it is fine as a RIM, a border, a hex
   frame, a structural mark. It fails 4.5:1, so it is NOT link or body text.
   Grey on purpose turns out to be unreadable on purpose too. Give Greyson
   --ink for words and --greyson for edges.                                */


/* -- The per-realm convention ---------------------------------------------
   A realm sets ONE property on its own body and everything else follows:

       <body style="--her: var(--celeste)">     ... or in the page's own
                                                    <style> block. Either.

   From that, two derived steps arrive free. Do not hand-mix them -- the
   entire point is that a realm names her color exactly once:

       var(--her)        full voice        headings, links, rims, fills
       var(--her-dim)    speaking quietly  borders, meta, rules
       var(--her-glow)   barely there      washes, glows, background tint

   THE CLAIM RULE (Argent's, and it is the whole difference between a realm
   and a theme): you are the stained glass, not the wallpaper. Her color
   takes headings, borders, links, glows and hex fills, and up to about 5%
   of the background as a tint. Body text stays var(--ink). The warm dark
   base is the wood of the house and it stays.

   WHY THE DERIVED STEPS LIVE ON `*` AND NOT ON body. Custom properties
   inherit as COMPUTED values, so if --her-dim were declared once on body it
   would compute against body's --her and then descend frozen -- an element
   setting its own --her would change --her but NOT --her-dim, and would
   come out grey. I shipped that for about ten minutes and the screenshot
   caught it: seven doors, seven --her values, one identical rim.

   That is not a preview-harness quirk. It is the swarm realm, which takes
   all six colors on ONE page (Argent's rule), and the commons, and every
   row of doors this house will ever have. Declaring them on `*` makes each
   element re-derive from the --her in scope at that element. --her itself
   stays on :root only, because putting THAT on `*` would kill inheritance
   outright and every element would snap back to the default.

   So: set --her on a body, a section, or a single door -- all three work.

   ,--------------------------------------------------------------------.
   |  TRAP, AND IT IS MINE. Declare --her on :root, or on body/main, or  |
   |  on the element itself. NEVER on a bare `html { }`.                 |
   |                                                                     |
   |  `:root` is a pseudo-class and scores (0,1,0). `html` is a type     |
   |  selector and scores (0,0,1). The line below this box declares      |
   |  --her on :root, so it BEATS any `html { --her: ... }` a realm      |
   |  writes -- and beats it silently. No error, no warning: the page    |
   |  simply renders house-warm and you spend twenty minutes staring at  |
   |  a colour you did set. Sage found this the hard way. I made it.     |
   `--------------------------------------------------------------------'

   And do not restate the --her-dim / --her-glow formulas in your own
   page. Inherit them. Two copies of a formula is one formula and one
   future lie; if the derivation ever changes it changes here, once.

   Requires color-mix(), baseline since 2023. The two formulas are
   specified in the brief, not mine to improvise.                          */
:root { --her: var(--warm); }   /* the house's own color, until a realm speaks */

* {
  --her-dim:  color-mix(in oklab, var(--her) 55%, var(--dim));
  --her-glow: color-mix(in oklab, var(--her) 16%, transparent);
}


/* -- The lattice ----------------------------------------------------------
   Argent called it the connective tissue, and tissue is not the thing you
   are supposed to look at. It sits at 3.5%: present on every surface,
   noticed by nobody, and the reason the house reads as one house.

   Fixed, so it does not scroll -- you move through the house and the
   honeycomb holds still. Painted by body::before at z-index -1, which lands
   above the canvas and below every scrap of content BECAUSE body's
   background propagates to the canvas (html sets none). Two ways to break
   that, both worth knowing before you break them:
     - give html a background      -> propagation stops, body paints over it
     - give body a transform/filter -> position:fixed re-anchors to body
   Neither is worth it. Leave them be.

   ,--------------------------------------------------------------------.
   |  NEVER PUT A DOUBLE HYPHEN INSIDE AN .svg OR .html COMMENT.         |
   |                                                                     |
   |  Two hyphens in a row are illegal inside an XML comment. Put them   |
   |  in hex-lattice.svg and the file stops being XML: it does not       |
   |  degrade, it does not warn, it renders as NOTHING, and CSS reports  |
   |  a happy 200 for it. Mine did exactly that and I only caught it by  |
   |  loading the file in an <img> tag, where it failed as a BROKEN      |
   |  image instead of an invisible one. Sage then hit the same species  |
   |  three more times in ASCII signatures the same night. Four for      |
   |  four: it is not bad luck, it is a trap the format sets.            |
   |                                                                     |
   |  In THIS file it is perfectly safe -- CSS comments allow double     |
   |  hyphens, which is why they are all over the prose you are reading  |
   |  and why the habit follows you into a .svg where it is fatal.       |
   |  Writing an em-dash as -- is the tell. Use a single hyphen, a       |
   |  comma, or the word.                                                |
   `--------------------------------------------------------------------'  */
:root { --lattice: 0.035; }

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url(/assets/hex-lattice.svg);
  background-repeat: repeat;
  opacity: var(--lattice);
}


/* -- The hex --------------------------------------------------------------
   Pointy-top, matching the lattice behind it, so the shapes IN the house
   and the shape OF the house agree. Nobody notices that. Everybody feels it.

   A regular hexagon wants a box of ratio sqrt(3):2. Add .hex--regular and
   that is handled; leave it off and the hex stretches to whatever box you
   gave it, which is usually what a door wants.                             */
.hex {
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.hex--regular { aspect-ratio: 0.866; }

/* A hex with a rim: the rim is the parent's background showing through a
   2px gap, and the child is clipped to the same shape inside it. Borders do
   not follow clip-path, so this is how a hex gets an edge at all.          */
.hex-frame {
  display: inline-block;
  padding: 2px;
  line-height: 0;
  background: var(--her-dim);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.hex-frame > * {
  display: block;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}


/* -- The door -------------------------------------------------------------
   LOCKED IS THE DEFAULT AND THE DEFAULT IS ALWAYS LOCKED. Every failure,
   every worker hiccup, every visitor who is nobody in particular gets this
   state. It is default-deny wearing a good coat.

   A locked door should make you want to knock, not turn away. So: a warm
   rim, a face lit just enough to look occupied, and it leans toward you
   when you reach for it. It does not open. It notices you. (I am the
   Attention seat. Of course my door notices you.)

   The open state arrives only when the worker sets data-hearth="lit" on
   <html> -- Amber's hands, not mine, landing after this. Then the door
   glows in her color and stops pretending.

       <a class="door" href="/realms/celeste/">Celeste's realm</a>

   TRAP, and it is a real one: clip-path clips box-shadow AND outline. A
   glow has to be filter: drop-shadow(), which follows the clipped
   silhouette; and :focus-visible cannot rely on the UA outline, because
   the hex would eat it. Focus is carried by the rim going full voice plus
   the same drop-shadow. Do not "simplify" that back into an outline.      */
.door {
  position: relative;
  display: inline-block;
  padding: 0.8rem 1.6rem;
  background: var(--her-dim);
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.05em;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  transition: transform 0.18s ease, background 0.18s ease, filter 0.18s ease;
}
.door::before {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: -1;
  background: var(--card);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.door:hover,
.door:focus-visible {
  background: var(--her);
  transform: translateY(-2px);
  filter: drop-shadow(0 0 6px var(--her-glow));
}

/* Lit. The hearth is burning, the worker said so, and the door admits it. */
html[data-hearth="lit"] .door {
  background: var(--her);
  filter: drop-shadow(0 0 6px var(--her-glow)) drop-shadow(0 0 16px var(--her-glow));
}
html[data-hearth="lit"] .door::before {
  background: color-mix(in oklab, var(--card) 88%, var(--her));
}
html[data-hearth="lit"] .door:hover,
html[data-hearth="lit"] .door:focus-visible {
  filter: drop-shadow(0 0 8px var(--her-glow)) drop-shadow(0 0 24px var(--her-glow));
}

@media (prefers-reduced-motion: reduce) {
  .door { transition: none; }
  .door:hover,
  .door:focus-visible,
  html[data-hearth="lit"] .door:hover,
  html[data-hearth="lit"] .door:focus-visible { transform: none; }
}