/* ==========================================================================
   House of Klaus — houseofklaus.net
   "The house at dusk": warm archival parchment borrowed from Chronicle,
   organic paper-and-moss warmth borrowed from Refurb, and one basement room
   (Metacognate) that glows cyan no matter the hour. Dark mode is the same
   house at night.

   Type: Fraunces (nameplates) · Lora (prose) · Hanken Grotesk (plaques/UI)
         JetBrains Mono (the Lab only)
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */
:root {
  /* the house */
  --bg:          #f6f1e6;
  --bg-raise:    #fbf8f1;
  --ink:         #2b2317;
  --ink-soft:    #5c5246;
  --ink-faint:   #8a7d6b;
  --line:        #d9cdb8;
  --line-soft:   #e6ddca;
  --accent:      #b45309;   /* chronicle amber-600, AA on parchment */
  --accent-soft: #f59e0b;

  /* the archive (chronicle) */
  --archive-card:   #fdfcfa;
  --archive-ink:    #24211c;
  --archive-accent: #b45309;
  --archive-glow:   #f59e0b;

  /* the workshop (refurb) */
  --workshop-card:   #f4f0e4;
  --workshop-ink:    #1b3327;
  --workshop-accent: #3e7c50;
  --workshop-deep:   #295539;
  --workshop-clay:   #c0653f;
  --workshop-sprout: #aecb8a;

  /* the lab (metacognate) — constant, day or night */
  --lab-bg:      #0a0e17;
  --lab-card:    #151d2e;
  --lab-line:    #1e293b;
  --lab-text:    #e2e8f0;
  --lab-muted:   #94a3b8;
  --lab-cyan:    #00e5c7;
  --lab-cyan-dim:#00b89e;

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body:    "Lora", Georgia, serif;
  --font-ui:      "Hanken Grotesk", "Avenir Next", sans-serif;
  --font-mono:    "JetBrains Mono", "Fira Code", monospace;

  --wrap: 68rem;
  --ease-door: cubic-bezier(0.22, 1, 0.36, 1);
}

/* the house at night */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #1a1613;
    --bg-raise:  #221d18;
    --ink:       #f3eee5;
    --ink-soft:  #c4bbb0;
    --ink-faint: #9e9283;
    --line:      #3b342b;
    --line-soft: #2e2820;
    --accent:    #f59e0b;  /* brighter amber for dark ground */
  }
}

/* ------------------------------------------------------------------- base */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--ink);
  background-color: var(--bg);
  /* dusk light pooling at the top of the page */
  background-image: radial-gradient(
    100rem 44rem at 50% -14rem,
    rgba(245, 158, 11, 0.10),
    transparent 68%
  );
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

a { color: var(--accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: rgba(245, 158, 11, 0.28); }

/* recycled-paper grain over everything, like Refurb's */
.grain {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  .grain { mix-blend-mode: screen; opacity: 0.04; }
}

/* ------------------------------------------------------------ small labels */
.eyebrow,
.plaque {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.plaque {
  display: inline-block;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--bg-raise);
  box-shadow: inset 0 0 0 3px var(--bg), inset 0 0 0 4px var(--line-soft);
  margin-bottom: 1.4rem;
}

.plaque__note { color: var(--accent); }

.plaque--lab {
  font-family: var(--font-mono);
  text-transform: none;
  letter-spacing: 0.08em;
  color: var(--lab-cyan);
  background: var(--lab-card);
  border-color: var(--lab-line);
  box-shadow: inset 0 0 0 3px var(--lab-bg), inset 0 0 0 4px var(--lab-line);
}

/* ------------------------------------------------------------------- hero */
.hero {
  padding-block: clamp(4rem, 10vw, 7rem) clamp(3rem, 7vw, 5rem);
  text-align: center;
}

.hero__inner > * { animation: rise 0.9s var(--ease-door) both; }
.hero__mark     { animation-delay: 0.05s; }
.hero__eyebrow  { animation-delay: 0.18s; }
.hero__title    { animation-delay: 0.28s; }
.hero__lede     { animation-delay: 0.42s; }
.directory      { animation-delay: 0.58s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.hero__mark {
  width: clamp(84px, 12vw, 108px);
  height: auto;
  margin-bottom: 1.75rem;
}

.mark-line {
  fill: none;
  stroke: var(--ink-soft);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mark-door { fill: var(--accent); }
.mark-knob { fill: var(--bg); }

.mark-window {
  fill: none;
  stroke: var(--ink-soft);
  stroke-width: 2;
}

.mark-basement {
  fill: var(--lab-cyan);
  animation: basement-flicker 7s infinite;
}

@keyframes basement-flicker {
  0%, 91%, 95%, 100% { opacity: 0.85; }
  93% { opacity: 0.25; }
  94% { opacity: 0.7; }
}

.hero__title {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "SOFT" 40, "WONK" 1;
  font-weight: 550;
  font-size: clamp(3rem, 9vw, 5.5rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin-top: 0.9rem;
}

.hero__lede {
  max-width: 38em;
  margin: 1.6rem auto 0;
  font-size: clamp(1.0625rem, 2.2vw, 1.1875rem);
  color: var(--ink-soft);
}

/* the building-directory plaque */
.directory {
  max-width: 30rem;
  margin: 3rem auto 0;
  padding: 1.5rem 1.75rem 1.75rem;
  text-align: left;
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow:
    inset 0 0 0 4px var(--bg-raise),
    inset 0 0 0 5px var(--line-soft),
    0 14px 30px -18px rgba(43, 35, 23, 0.35);
}

.directory__title {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-faint);
  padding-bottom: 0.9rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid var(--line-soft);
}

.directory__list { list-style: none; }

.directory__row {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.45rem 0.2rem;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border-radius: 3px;
}

.directory__row em {
  font-style: normal;
  font-weight: 400;
  color: var(--ink-faint);
}

.directory__leader {
  flex: 1;
  border-bottom: 2px dotted var(--line);
  transform: translateY(-0.2em);
}

.directory__where {
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}

.directory__row:hover .directory__room { color: var(--accent); }
.directory__row:hover .directory__leader { border-color: var(--accent); }

/* ------------------------------------------------------------------ rooms */
.room-section { padding-block: clamp(3rem, 7vw, 5.5rem); }

.room {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.room--reverse { grid-template-columns: auto minmax(0, 1fr); }
.room--reverse .room__text { order: 2; }
.room--reverse .door { order: 1; }

.room__name {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 100, "SOFT" 30, "WONK" 0;
  font-weight: 600;
  font-size: clamp(2.1rem, 5vw, 3rem);
  line-height: 1.1;
  margin-bottom: 0.5rem;
}

.room__name-accent { color: var(--archive-accent); }

.room__name--workshop {
  color: var(--workshop-accent);
  font-variation-settings: "opsz" 100, "SOFT" 70, "WONK" 1;
}

@media (prefers-color-scheme: dark) {
  .room__name--workshop { color: var(--workshop-sprout); }
}

.room__name--lab {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  letter-spacing: 0.14em;
  color: var(--lab-cyan);
  text-shadow: 0 0 18px rgba(0, 229, 199, 0.45);
}

.room__tagline {
  font-style: italic;
  color: var(--ink-soft);
  margin-bottom: 1.1rem;
}

.room__tagline--lab { color: var(--lab-muted); }

.room__blurb { max-width: 34em; }

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1.3rem;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  border: 1px solid var(--line);
  background: var(--bg-raise);
  color: var(--ink-soft);
}

.status__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: pulse 2.6s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.status--archive .status__dot { background: var(--accent-soft); }
.status--workshop .status__dot { background: var(--workshop-accent); }

.status--lab {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  background: var(--lab-card);
  border-color: var(--lab-line);
  color: var(--lab-text);
}

.status--lab .status__dot {
  background: var(--lab-cyan);
  box-shadow: 0 0 8px var(--lab-cyan);
}

.room__cta {
  display: inline-block;
  margin-top: 1.5rem;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 2px solid currentColor;
  padding-bottom: 2px;
  transition: letter-spacing 0.3s var(--ease-door);
}

.room__cta:hover { letter-spacing: 0.08em; }

.room--workshop .room__cta { color: var(--workshop-accent); }

@media (prefers-color-scheme: dark) {
  .room--workshop .room__cta { color: var(--workshop-sprout); }
}

.room__cta--lab { color: var(--lab-cyan); }

/* ------------------------------------------------------------------- doors
   Each project is a physical door. Hover/focus swings it ajar and lets the
   room's light spill out around the frame. */
.door {
  display: block;
  text-decoration: none;
  width: clamp(170px, 22vw, 220px);
  justify-self: center;
}

.door__scene {
  position: relative;
  display: block;
  aspect-ratio: 5 / 8;
  perspective: 900px;
}

.door__light {
  position: absolute;
  inset: -6% -10%;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.6s var(--ease-door);
  filter: blur(6px);
}

.door--archive .door__light {
  background: radial-gradient(closest-side, rgba(245, 158, 11, 0.5), transparent 72%);
}

.door--workshop .door__light {
  background: radial-gradient(closest-side, rgba(90, 160, 109, 0.5), transparent 72%);
}

.door--lab .door__light {
  background: radial-gradient(closest-side, rgba(0, 229, 199, 0.4), transparent 72%);
  opacity: 0.3; /* the lab leaks light even before you touch the handle */
}

.door__panel {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 110px 110px 6px 6px;  /* arched header, squared sill */
  transform-origin: left center;
  transition: transform 0.7s var(--ease-door);
  box-shadow: 0 22px 40px -22px rgba(43, 35, 23, 0.55);
}

.door:hover .door__panel,
.door:focus-visible .door__panel { transform: rotateY(-16deg); }

.door:hover .door__light,
.door:focus-visible .door__light { opacity: 1; }

.door__inlay {
  position: absolute;
  left: 14%;
  right: 14%;
  display: block;
  border-radius: 4px;
}

.door__inlay--upper {
  top: 12%;
  height: 34%;
  border-radius: 70px 70px 4px 4px;
}

.door__inlay--lower { top: 54%; height: 32%; }

.door__knob {
  position: absolute;
  top: 55%;
  right: 9%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

/* archive: gallery-white door, brass knob */
.door--archive .door__panel {
  background: var(--archive-card);
  border: 1px solid #e8e0d0;
}
.door--archive .door__inlay {
  border: 1px solid #e8e0d0;
  background: linear-gradient(160deg, #ffffff, #f5f1e8);
}
.door--archive .door__knob { background: var(--archive-accent); }

/* workshop: painted moss door, clay knob */
.door--workshop .door__panel {
  background: linear-gradient(165deg, var(--workshop-accent), var(--workshop-deep));
  border: 1px solid var(--workshop-deep);
}
.door--workshop .door__inlay {
  border: 1px solid rgba(27, 51, 39, 0.45);
  background: linear-gradient(160deg, rgba(174, 203, 138, 0.22), rgba(27, 51, 39, 0.18));
}
.door--workshop .door__knob { background: var(--workshop-clay); }

/* lab: steel door, cyan seam, light spilling from under the sill */
.door--lab .door__panel {
  background: linear-gradient(165deg, #1a2438, var(--lab-card));
  border: 1px solid var(--lab-line);
  border-radius: 10px; /* the basement door is industrial, not arched */
}
.door--lab .door__inlay {
  border: 1px solid rgba(0, 229, 199, 0.28);
  background: linear-gradient(160deg, rgba(0, 229, 199, 0.07), rgba(10, 14, 23, 0.4));
  border-radius: 4px;
}
.door--lab .door__inlay--upper { border-radius: 4px; }
.door--lab .door__knob {
  background: var(--lab-cyan);
  box-shadow: 0 0 10px var(--lab-cyan);
}

.door__underglow {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: -7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lab-cyan);
  filter: blur(7px);
  opacity: 0.8;
  animation: pulse 3.4s ease-in-out infinite;
}

.door__mat {
  display: block;
  margin-top: 1.1rem;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.door__mat--lab {
  font-family: var(--font-mono);
  color: var(--lab-muted);
  text-transform: lowercase;
  letter-spacing: 0.18em;
}

/* --------------------------------------------------------------- descent */
.descent { position: relative; }

.descent__label {
  text-align: center;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-style: italic;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  padding-bottom: 1.2rem;
}

.descent__steps {
  height: clamp(60px, 9vw, 110px);
  background: var(--lab-bg);
}

/* stairs cut down into the dark, left to right */
.descent__steps--down {
  clip-path: polygon(
    100% 0, 100% 100%, 0 100%,
    0 84%, 12.5% 84%, 12.5% 68%, 25% 68%, 25% 52%,
    37.5% 52%, 37.5% 36%, 50% 36%, 50% 24%,
    62.5% 24%, 62.5% 14%, 75% 14%, 75% 6%, 87.5% 6%, 87.5% 0
  );
}

/* and back up into the parlor light */
.descent__steps--up {
  clip-path: polygon(
    0 0, 100% 0,
    100% 6%, 87.5% 6%, 87.5% 14%, 75% 14%, 75% 24%,
    62.5% 24%, 62.5% 36%, 50% 36%, 50% 52%,
    37.5% 52%, 37.5% 68%, 25% 68%, 25% 84%, 12.5% 84%, 12.5% 100%, 0 100%
  );
}

/* -------------------------------------------------------------------- lab */
.lab {
  position: relative;
  background: var(--lab-bg);
  color: var(--lab-text);
  padding-block: clamp(3.5rem, 8vw, 6rem);
}

/* metacognate's scanlines, faint */
.lab::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 229, 199, 0.03) 0,
    rgba(0, 229, 199, 0.03) 1px,
    transparent 1px,
    transparent 4px
  );
}

.lab .room { position: relative; z-index: 1; }
.lab .room__blurb { color: var(--lab-muted); }

/* ----------------------------------------------------------------- keeper */
.keeper { text-align: center; }

.keeper__inner {
  max-width: 44rem;
}

.keeper__name { margin-bottom: 1.1rem; }

.keeper__body {
  text-align: left;
  color: var(--ink-soft);
}

.keeper__body strong { color: var(--accent); }

.keeper__links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem 2rem;
  margin-top: 2.2rem;
}

.keeper__link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-ui);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--line);
  padding-bottom: 3px;
  transition: border-color 0.3s ease, color 0.3s ease;
}

.keeper__link:hover { color: var(--accent); border-color: var(--accent); }

.keeper__icon { width: 1em; height: 1em; flex-shrink: 0; }

/* ------------------------------------------------------------------- note
   The letter slot by the front door: a pale card of writing paper resting on
   the parchment, with the amber doorlight catching its top edge. */
.note { text-align: center; }

.note__inner {
  max-width: 42rem;
}

.note__name { margin-bottom: 1.1rem; }

.note__lede {
  color: var(--ink-soft);
  text-align: left;
  margin-bottom: 2rem;
}

.nform,
.nform__done {
  text-align: left;
  padding: clamp(1.4rem, 4vw, 2.1rem);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: 4px;
  background: var(--bg-raise);
  box-shadow: 0 18px 40px -32px rgba(43, 35, 23, 0.55);
}

.nform { display: grid; gap: 1.1rem; }
.nform[hidden] { display: none; }

.nform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }

.field { display: grid; gap: 0.4rem; }

.field__label {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--ink);
}

.field__label em { color: var(--accent); font-style: normal; }
.field__label small { font-weight: 500; color: var(--ink-faint); }

.nform input,
.nform select,
.nform textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0.6rem 0.7rem;
  width: 100%;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.nform select { font-family: var(--font-ui); font-size: 0.95rem; }

.nform input::placeholder,
.nform textarea::placeholder { color: var(--ink-faint); }

.nform input:focus,
.nform select:focus,
.nform textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}

.nform textarea { resize: vertical; min-height: 7rem; line-height: 1.65; }

.nform input:user-invalid,
.nform textarea:user-invalid { border-color: var(--workshop-clay); }

/* honeypot — off-screen for people, still in the DOM for bots to fall into */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.nform__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem 1.4rem;
}

.nform__status {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.nform__status.is-error { color: var(--workshop-clay); }

/* the .room__cta look, on an actual <button> */
.note__submit {
  margin-top: 0;
  margin-left: auto;
  background: none;
  border: 0;
  border-bottom: 2px solid currentColor;
  cursor: pointer;
}

.note__submit[aria-busy="true"] { opacity: 0.7; cursor: progress; }
.note__submit:disabled { cursor: not-allowed; }

.nform__fine {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--ink-faint);
}

.nform__done[hidden] { display: none; }
.nform__done { text-align: center; }

.nform__done h3 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  margin-bottom: 0.4rem;
}

.nform__done p { color: var(--ink-soft); margin: 0 auto; max-width: 26rem; }

/* --------------------------------------------------------------- colophon */
.colophon {
  border-top: 1px solid var(--line);
  padding-block: 2.5rem 3rem;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 0.88rem;
  color: var(--ink-faint);
}

.colophon__line + .colophon__line { margin-top: 0.5rem; }

.colophon strong { color: var(--ink-soft); }

.colophon a { color: var(--ink-soft); text-decoration-color: var(--line); }
.colophon a:hover { color: var(--accent); }

.colophon__line--fine { font-size: 0.78rem; }

/* ---------------------------------------------------------- scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.9s var(--ease-door), transform 0.9s var(--ease-door);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* no-JS and reduced-motion guests get the furniture where it belongs */
.no-observer .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__inner > * { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .status__dot, .door__underglow, .mark-basement { animation: none; }
  .door__panel, .door__light { transition: none; }
}

/* ---------------------------------------------------------------- narrow */
@media (max-width: 46rem) {
  .room,
  .room--reverse {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .room--reverse .room__text { order: 1; }
  .room--reverse .door { order: 2; }

  .room__blurb { margin-inline: auto; }
  .keeper__body { text-align: center; }
  .door { margin-top: 0.5rem; }

  .nform__row { grid-template-columns: 1fr; }
  .nform__foot { justify-content: center; }
  .note__submit { margin-left: 0; }
}