/* Whitson Interface Systems
   ------------------------------------------------------------------
   Institutional daylight. The reference is the corridor, not the
   terminal: cold over-lit walls, vast negative space, and exactly one
   warm light. Everything is quiet so that the single lit door is the
   only thing you look at.

   Two faces carry the thesis literally: a grotesque for the
   institution, a monospace for the machine.
   ------------------------------------------------------------------ */

:root {
  --corridor: #dce0db; /* cold pale grey-green — the wall  */
  --ink: #141c1a; /* near-black, green cast          */
  --wall: #9ba8a2; /* mid sage — rules, second voice  */
  --dept: #234b44; /* deep institutional teal         */
  --lamp: #d9a441; /* the one warm light              */

  --font-inst: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-data: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
    monospace;

  --gutter: clamp(1.5rem, 7vw, 9rem);
  --rail: 1px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--corridor);
  color: var(--ink);
  font-family: var(--font-inst);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  /* The corridor is lit from above and falls off. One gradient, very
     slight — enough to feel like a room, not enough to notice. */
  background-image: linear-gradient(
    to bottom,
    #e4e7e2 0%,
    var(--corridor) 38%,
    #d3d8d2 100%
  );
  background-attachment: fixed;
  min-height: 100vh;
}

/* ---------- shell ---------- */

.frame {
  max-width: 68rem;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4.5rem) var(--gutter) 4rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------- masthead ---------- */

.masthead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-bottom: 1.1rem;
  border-bottom: var(--rail) solid var(--wall);
}

.wordmark {
  font-size: clamp(0.78rem, 1.6vw, 0.95rem);
  font-weight: 700;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.wordmark:hover {
  color: var(--dept);
}

.regcode {
  font-family: var(--font-data);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--wall);
}

/* ---------- the corridor ----------
   A single hairline runs the height of the page. Doors branch off it.
   Nothing else in the layout is allowed to be this assertive. */

.corridor {
  position: relative;
  flex: 1;
  padding-left: clamp(1.75rem, 4vw, 3.25rem);
  padding-top: clamp(3.5rem, 12vh, 9rem);
  padding-bottom: 4rem;
}

.corridor::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--rail);
  background: var(--wall);
  transform-origin: top;
  animation: rail-draw 1100ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes rail-draw {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

/* ---------- thesis ---------- */

.thesis {
  max-width: 34ch;
  animation: settle 900ms ease-out 500ms both;
}

.thesis p {
  font-size: clamp(1.5rem, 3.6vw, 2.5rem);
  line-height: 1.28;
  font-weight: 300;
  letter-spacing: -0.015em;
  margin: 0 0 1.4rem;
  text-wrap: balance;
}

.thesis p + p {
  font-size: clamp(0.95rem, 1.4vw, 1.05rem);
  font-weight: 400;
  line-height: 1.65;
  color: var(--dept);
  max-width: 44ch;
  letter-spacing: 0;
}

@keyframes settle {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- the door ----------
   The only warm thing on the page, and the only interactive one. */

.doors {
  margin-top: clamp(4rem, 14vh, 10rem);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.door {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem 2rem;
  padding: 1.4rem 1.6rem 1.4rem 0;
  text-decoration: none;
  color: inherit;
  border-top: var(--rail) solid var(--wall);
  animation: settle 900ms ease-out 900ms both;
  transition:
    background 260ms ease,
    padding-left 260ms ease;
}

.door:last-child {
  border-bottom: var(--rail) solid var(--wall);
}

/* the stub that connects a door back to the rail */
.door::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(1.75rem, 4vw, 3.25rem));
  top: -1px;
  width: clamp(1.75rem, 4vw, 3.25rem);
  height: var(--rail);
  background: var(--wall);
  transition: background 260ms ease;
}

.door__name {
  font-size: clamp(1.35rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.1;
}

.door__note {
  grid-column: 1;
  font-family: var(--font-data);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wall);
  margin-top: 0.5rem;
}

.door__mark {
  grid-row: 1 / span 2;
  grid-column: 2;
  font-family: var(--font-data);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--wall);
  transition:
    color 260ms ease,
    transform 260ms ease;
}

.door:hover,
.door:focus-visible {
  background: linear-gradient(
    to right,
    rgba(217, 164, 65, 0.16),
    rgba(217, 164, 65, 0) 72%
  );
  padding-left: 1.1rem;
  outline: none;
}

.door:hover .door__name,
.door:focus-visible .door__name {
  color: var(--dept);
}

.door:hover .door__mark,
.door:focus-visible .door__mark {
  color: var(--lamp);
  transform: translateX(0.35rem);
}

.door:hover::before,
.door:focus-visible::before {
  background: var(--lamp);
}

.door:focus-visible {
  box-shadow: inset 0 0 0 2px var(--dept);
}

/* ---------- interior pages ---------- */

.prose {
  max-width: 66ch;
  animation: settle 700ms ease-out 300ms both;
}

.prose h1 {
  font-size: clamp(1.9rem, 5vw, 3.1rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.08;
  margin: 0 0 2.5rem;
  text-wrap: balance;
}

.prose h2 {
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dept);
  margin: 3.2rem 0 1rem;
  padding-top: 1rem;
  border-top: var(--rail) solid var(--wall);
}

.prose h3 {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin: 2rem 0 0.6rem;
}

.prose p {
  margin: 0 0 1.25rem;
}

.prose a {
  color: var(--dept);
  text-decoration: none;
  border-bottom: 1px solid var(--wall);
  transition:
    border-color 200ms ease,
    color 200ms ease;
}

.prose a:hover {
  color: var(--ink);
  border-bottom-color: var(--lamp);
}

.prose ul {
  padding-left: 1.1rem;
  margin: 0 0 1.25rem;
}

.prose li {
  margin-bottom: 0.4rem;
}

.prose li::marker {
  color: var(--wall);
}

.prose code {
  font-family: var(--font-data);
  font-size: 0.86em;
  background: rgba(35, 75, 68, 0.08);
  padding: 0.12em 0.36em;
}

.prose blockquote {
  margin: 2rem 0;
  padding-left: 1.2rem;
  border-left: 2px solid var(--lamp);
  font-size: 1.05rem;
  color: var(--dept);
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  margin: 0 0 1.5rem;
}

.prose th,
.prose td {
  text-align: left;
  padding: 0.55rem 0.9rem 0.55rem 0;
  border-bottom: var(--rail) solid var(--wall);
  vertical-align: top;
}

.prose th {
  font-family: var(--font-data);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wall);
  font-weight: 400;
}

/* a scroll container so a wide table never scrolls the page sideways */
.prose .table-scroll {
  overflow-x: auto;
}

/* ---------- plate ---------- */

.plate {
  margin-top: auto;
  padding-top: 1.1rem;
  border-top: var(--rail) solid var(--wall);
  display: flex;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  font-family: var(--font-data);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wall);
}

.plate a {
  color: var(--wall);
  text-decoration: none;
}

.plate a:hover {
  color: var(--dept);
}

/* ---------- back ---------- */

.back {
  display: inline-block;
  margin-bottom: 2.5rem;
  font-family: var(--font-data);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--wall);
  text-decoration: none;
}

.back:hover {
  color: var(--dept);
}

/* ---------- quality floor ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

@media (max-width: 34rem) {
  body {
    font-size: 16px;
  }
  .masthead {
    gap: 0.5rem;
  }
  .door {
    padding-right: 0;
  }
}