/* =========================================================
   The gallery wall.

   Nineteen projects hung on a dark ground with room around
   them. No JavaScript — this is the Advanced HTML and CSS
   project, and the whole point is that layout, responsiveness
   and accessibility are the language being practised.

   Every colour pair here was measured. Body text is 15.4:1 on
   the panel, the muted grey 6.0:1, the brass 8.3:1 — all past
   the 4.5:1 the guidelines ask for, with room to spare.
   ========================================================= */

:root {
  color-scheme: dark;

  --ground: #0d0d0f;
  --panel: #141417;
  --panel-lift: #1a1a1e;
  --line: #26262b;
  --line-bright: #3a3a42;

  --text: #ecebe8;
  --muted: #93939b;
  --brass: #d8a657;

  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --ui: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --gutter: clamp(1.15rem, 4vw, 3rem);
}

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
}

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

/*
 * The skip link. Off-screen until focused, which is the first thing a
 * keyboard user meets — without it they tab through the entire header on
 * every page load.
 */
.skip {
  position: fixed; /* fixed, not absolute — absolute scrolls away with the page */
  left: 0.5rem;
  top: 0.5rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--brass);
  color: var(--ground);
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
  /*
   * Moved out of view with a transform and given no transition at all. It was
   * animating `top`, which meant it depended on the animation clock running to
   * become visible — and the one control on the page that must never fail to
   * appear is this one.
   */
  transform: translateY(-200%);
}

.skip:focus {
  transform: translateY(0);
}

.wrap {
  max-width: 76rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --- the wall label ---------------------------------------- */

.masthead {
  padding-block: clamp(3.5rem, 11vw, 7rem) clamp(2rem, 6vw, 3.5rem);
  border-bottom: 1px solid var(--line);
}

.eyebrow {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}

.masthead h1 {
  margin: 0.9rem 0 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.6rem, 8vw, 5.25rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  max-width: 18ch;
}

.masthead h1 em {
  font-style: italic;
  color: var(--brass);
}

.standfirst {
  max-width: 58ch;
  margin: 1.4rem 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 2.2vw, 1.125rem);
}

.standfirst strong {
  color: var(--text);
  font-weight: 500;
}

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2.25rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.facts div {
  display: flex;
  flex-direction: column;
}

.facts dt {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.facts dd {
  margin: 0.15rem 0 0;
  font-family: var(--display);
  font-size: 1.75rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* --- rooms ------------------------------------------------- */

.room {
  padding-block: clamp(2.5rem, 7vw, 4.5rem) 0;
}

.room-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}

.room-head h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.45rem, 3.6vw, 2rem);
  letter-spacing: -0.01em;
}

.room-head p {
  margin: 0;
  max-width: 46ch;
  font-size: 0.9rem;
  color: var(--muted);
}

/*
 * auto-fill with a minmax floor, so the wall reflows on its own at every
 * width. There is no media query controlling this and there does not need
 * to be — the min() stops the track ever exceeding the viewport on a narrow
 * phone, which is what would otherwise force one.
 */
.works {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--line);
  border-bottom: 1px solid var(--line);
}

.work {
  display: flex;
  background: var(--panel);
  transition: background-color 180ms ease;
}

.work:hover,
.work:focus-within {
  background: var(--panel-lift);
}

.work article {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  width: 100%;
}

.plate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.mark {
  width: 44px;
  height: 44px;
  color: var(--muted);
  transition: color 180ms ease, transform 260ms cubic-bezier(0.2, 0.9, 0.3, 1);
}

.work:hover .mark,
.work:focus-within .mark {
  color: var(--brass);
  transform: translateY(-2px);
}

.mark svg {
  display: block;
  width: 100%;
  height: 100%;
}

.cat {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.work h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/*
 * The title carries the link. The card is not one big anchor, because each
 * card has a second link to its notes, and nesting or overlapping those makes
 * a mess for anyone navigating by links alone.
 */
.work h3 a {
  text-decoration: none;
  background-image: linear-gradient(var(--brass), var(--brass));
  background-size: 0 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 220ms ease, color 180ms ease;
}

.work h3 a:hover,
.work h3 a:focus-visible {
  color: var(--brass);
  background-size: 100% 1px;
}

.work p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tags li {
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  border: 1px solid var(--line-bright);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
}

.foot {
  margin-top: auto;
  padding-top: 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.78rem;
}

.foot a {
  color: var(--muted);
  text-underline-offset: 3px;
  transition: color 160ms ease;
}

.foot a:hover,
.foot a:focus-visible {
  color: var(--text);
}

/*
 * The two projects with no page to open. The word "terminal" carries the
 * meaning — the icon beside it is decorative and hidden, because colour or
 * shape alone must never be the only signal.
 */
.terminal {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--muted);
  font-variant: small-caps;
  letter-spacing: 0.06em;
}

.terminal svg {
  width: 13px;
  height: 13px;
}

/* --- colophon ---------------------------------------------- */

.colophon {
  padding-block: clamp(3rem, 8vw, 5rem);
}

.colophon h2 {
  margin: 0 0 0.75rem;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.35rem;
}

.colophon p {
  max-width: 62ch;
  margin: 0 0 0.75rem;
  color: var(--muted);
  font-size: 0.92rem;
}

.colophon a {
  color: var(--text);
  text-underline-offset: 3px;
}

.sitefoot {
  border-top: 1px solid var(--line);
  padding-block: 2rem 3rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.sitefoot p {
  margin: 0;
}

.sitefoot a {
  color: var(--text);
  text-underline-offset: 3px;
}

/*
 * Motion is a courtesy for most people and a medical problem for some.
 * Everything above is decoration, so all of it goes.
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}