/* ============================================
   Fynd — Showroom
   Clean, minimal design
   ============================================ */

/* ---------- CFU Serif Font ---------- */
/* Place your CFU Serif font files in blog/fonts/ and uncomment:
@font-face {
  font-family: 'CFU Serif';
  src: url('../fonts/CFUSerif-Regular.woff2') format('woff2'),
       url('../fonts/CFUSerif-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'CFU Serif';
  src: url('../fonts/CFUSerif-Bold.woff2') format('woff2'),
       url('../fonts/CFUSerif-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'CFU Serif';
  src: url('../fonts/CFUSerif-Italic.woff2') format('woff2'),
       url('../fonts/CFUSerif-Italic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
*/

/* ---------- Reset & Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --color-bg: #ffffff;
  --color-text: #1a1a1a;
  --color-text-secondary: #666666;
  --color-link: #1a1a1a;
  --color-link-hover: #000000;
  --color-border: #e0e0e0;
  --color-bg-footer: #fafafa;
  --color-btn-border: #1a1a1a;
  --color-btn-hover-bg: #1a1a1a;
  --color-btn-hover-text: #ffffff;
  /* the hairline under the sticky header. `transparent` removes it. */
  --header-rule: #666666;
  --font-serif: 'Cutive Mono', 'Courier New', monospace;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --max-width: 680px;
}

/* ---------- Night Shift (Dark Mode) ---------- */
[data-theme="dark"] {
  --color-bg: #111111;
  --color-text: #e0e0e0;
  --color-text-secondary: #999999;
  --color-link: #e0e0e0;
  --color-link-hover: #ffffff;
  --color-border: #2a2a2a;
  --color-bg-footer: #0d0d0d;
  --color-btn-border: #e0e0e0;
  --color-btn-hover-bg: #e0e0e0;
  --color-btn-hover-text: #111111;
  --color-code-bg: #1a1a1a;
  --color-code-text: #d4d4d4;
  --header-rule: #4f8a72;
}

[data-theme="dark"] ::selection {
  background: rgba(98, 54, 244, 0.35);
  color: #ffffff;
}

/* ---------- Night Shift Toggle (Apple-style switch) ---------- */
.night-toggle {
  position: fixed;
  /* centred on the header's name row (centre y=30): 13px of header padding
     plus half the difference between the 34px line and this 26px pill. That
     row holds the nav on desktop and the name alone on mobile, so the toggle
     lines up with STORAGE / WARDROBE / MANIFESTO at every width. */
  top: 17px;
  right: 24px;
  z-index: 1000;
  width: 48px;
  height: 26px;
  background: #ccc;
  border: none;
  border-radius: 13px;
  cursor: pointer;
  padding: 0;
  transition: background-color 0.3s ease;
}

.night-toggle__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
}

[data-theme="dark"] .night-toggle {
  background: #555;
}

[data-theme="dark"] .night-toggle__knob {
  transform: translateX(22px);
}

.night-toggle__icon--sun,
.night-toggle__icon--moon {
  pointer-events: none;
}

.night-toggle__icon--sun {
  display: none;
}

[data-theme="dark"] .night-toggle__icon--moon {
  display: none;
}

[data-theme="dark"] .night-toggle__icon--sun {
  display: inline;
}

/* ---------- Spinning Name Circle ---------- */
.name-circle {
  position: fixed;
  top: 18px;
  left: 18px;
  z-index: 1000;
  width: 95px;
  height: 95px;
  text-decoration: none;
  display: block;
}

.name-circle__svg {
  width: 100%;
  height: 100%;
  animation: spin 12s linear infinite;
}

.name-circle__text {
  font-family: var(--font-serif);
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  fill: var(--color-text);
  transition: fill 0.3s ease;
}

.name-circle:hover .name-circle__text {
  fill: var(--color-text-secondary);
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

html {
  font-size: 18px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Page Fade-In ---------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  /* must end on `none`, not translateY(0): with animation-fill-mode: both a
     lingering transform makes <body> the containing block for position:fixed,
     which breaks the filter dropdown and the night toggle */
  to   { opacity: 1; transform: none; }
}

body {
  font-family: var(--font-serif);
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.75;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* no `both`: a retained fill leaves an identity transform on <body>,
     which makes it the containing block for position:fixed children and
     breaks the filter dropdown and the night toggle */
  animation: fadeUp 0.5s ease-out;
}

::selection {
  background: rgba(98, 54, 244, 0.25);
  color: inherit;
}

/* ---------- Links ---------- */
a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--color-link-hover);
}

/* ---------- Timeline ---------- */
.timeline {
  list-style: none;
  padding: 0;
  margin: 0;
}

.timeline li {
  position: relative;
  padding-left: 28px;
  padding-bottom: 28px;
  font-family: var(--font-serif);
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--color-text);
}

.timeline li:last-child {
  padding-bottom: 0;
}

.timeline li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 10px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-text-secondary);
}

.timeline__year {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: 1.1rem;
  letter-spacing: 0.03em;
  margin-right: 10px;
  color: #000000;
}

[data-theme="dark"] .timeline__year {
  color: #ffffff;
}

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ==========================================
   LANDING PAGE (index.html)
   ========================================== */
.landing {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
  padding: 40px 24px;
}

.landing__name {
  font-family: var(--font-serif);
  font-size: 2.4rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  margin-bottom: 50px;
  color: var(--color-text);
}

.landing__nav {
  display: flex;
  gap: 32px;
  margin-bottom: 60px;
}

.landing__btn {
  display: inline-block;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-text-secondary);
  padding: 0;
  border: none;
  background: none;
  transition: color 0.2s ease;
}

.landing__btn:hover {
  color: var(--color-text);
}

[data-theme="dark"] .landing__btn:hover {
  color: #ffffff;
}

.landing__tagline {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-style: italic;
  color: var(--color-text-secondary);
  letter-spacing: 0.01em;
}

/* ---------- Subscribe ---------- */
.subscribe {
  margin-top: 54px;
  text-align: center;
}

.subscribe__label {
  font-family: var(--font-serif);
  font-size: 0.82rem;
  color: var(--color-text-secondary);
  margin-bottom: 16px;
  letter-spacing: 0.01em;
}

.subscribe__form {
  display: flex;
  gap: 0;
  justify-content: center;
  max-width: 380px;
  margin: 0 auto;
}

.subscribe__input {
  flex: 1;
  font-family: var(--font-serif);
  font-size: 0.82rem;
  padding: 11px 16px;
  border: 1.5px solid var(--color-btn-border);
  border-right: none;
  background: transparent;
  color: var(--color-text);
  outline: none;
  transition: border-color 0.2s ease;
}

.subscribe__input::placeholder {
  color: #aaa;
}

.subscribe__input:focus {
  border-color: var(--color-text);
}

.subscribe__btn {
  font-family: var(--font-serif);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 11px 24px;
  border: 1.5px solid var(--color-btn-border);
  background: var(--color-text);
  color: var(--color-bg);
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.subscribe__btn:hover {
  background: transparent;
  color: var(--color-text);
}

.subscribe__note {
  font-family: var(--font-serif);
  font-size: 0.68rem;
  color: #aaa;
  margin-top: 10px;
}

/* ---------- Subscribe Page ---------- */
.subscribe-page {
  margin-top: 32px;
}

.subscribe-page__form {
  display: flex;
  gap: 0;
  max-width: 420px;
}

.subscribe-page__input {
  flex: 1;
  font-family: var(--font-serif);
  font-size: 0.88rem;
  padding: 12px 16px;
  border: 1.5px solid var(--color-btn-border);
  border-right: none;
  background: transparent;
  color: var(--color-text);
  outline: none;
  transition: border-color 0.2s ease;
}

.subscribe-page__input::placeholder {
  color: #aaa;
}

.subscribe-page__input:focus {
  border-color: var(--color-text);
}

.subscribe-page__btn {
  font-family: var(--font-serif);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 12px 28px;
  border: 1.5px solid var(--color-btn-border);
  background: var(--color-text);
  color: var(--color-bg);
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.subscribe-page__btn:hover {
  background: transparent;
  color: var(--color-text);
}

/* ---------- AMA ---------- */
.ama {
  margin-top: 0;
  text-align: left;
  width: 100%;
  max-width: 440px;
}

.ama__title {
  font-family: var(--font-serif);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: 10px;
}

.ama__label {
  font-family: var(--font-serif);
  font-size: 0.82rem;
  color: var(--color-text-secondary);
  margin-bottom: 20px;
  line-height: 1.6;
}

.ama__form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ama__input,
.ama__textarea {
  font-family: var(--font-serif);
  font-size: 0.82rem;
  padding: 11px 16px;
  border: 1.5px solid var(--color-btn-border);
  border-bottom: none;
  background: transparent;
  color: var(--color-text);
  outline: none;
  transition: border-color 0.2s ease;
  resize: none;
}

.ama__textarea {
  border-bottom: none;
  line-height: 1.6;
}

.ama__input::placeholder,
.ama__textarea::placeholder {
  color: #aaa;
}

.ama__input:focus,
.ama__textarea:focus {
  border-color: var(--color-text);
}

.ama__btn {
  font-family: var(--font-serif);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 12px 24px;
  border: 1.5px solid var(--color-btn-border);
  background: var(--color-text);
  color: var(--color-bg);
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.ama__btn:hover {
  background: transparent;
  color: var(--color-text);
}

/* ==========================================
   INNER PAGES (me, blog, projects)
   ========================================== */

/* ---------- Header / Site Name ---------- */
.site-header {
  padding: 48px 0 16px;
}

.site-header__name {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.site-header__name a {
  text-decoration: none;
  color: var(--color-text);
}

.site-header__name a:hover {
  opacity: 0.6;
}

/* ---------- Inner Nav ---------- */
.inner-nav {
  padding: 0 0 40px;
  border-bottom: none;
}

.inner-nav__list {
  list-style: none;
  display: flex;
  gap: 28px;
}

.inner-nav__link {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-text-secondary);
  transition: color 0.2s ease;
}

.inner-nav__link:hover {
  color: var(--color-text);
}

.inner-nav__link--active {
  color: #000000;
  font-weight: 700;
}

[data-theme="dark"] .inner-nav__link--active {
  color: #ffffff;
}

/* ---------- Page Title ---------- */
.page-header {
  padding: 50px 0 10px;
}

.page-header__title {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}

/* ---------- Bio / Me Page ---------- */
.bio {
  padding: 30px 0 60px;
}

.bio p {
  font-size: 1.1rem;
  line-height: 1.85;
  margin-bottom: 1.3em;
}

.bio p:last-child {
  margin-bottom: 0;
}

/* ---------- Small page footer ---------- */
.page-foot {
  margin-top: auto;
  /* flush to the window edge rather than the centred text column */
  padding: 46px 0 22px 20px;
  font-family: var(--font-serif);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--color-text-secondary);
}

.page-foot a {
  color: inherit;
  text-decoration: none;
}

.page-foot a:hover {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-foot a:focus-visible {
  outline: 1px solid var(--color-text);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .page-foot { padding-left: 14px; }
}

/* ---------- Inline credit with links dropdown ---------- */
.credit {
  position: relative;
  display: inline-block;
  z-index: 850;          /* above .menu-scrim */
}

.credit__trigger {
  font: inherit;
  color: var(--color-link);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.credit__trigger:hover,
.credit__trigger[aria-expanded="true"] { color: var(--color-link-hover); }

.credit__menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 900;
  min-width: 170px;
  padding: 6px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  display: none;
}

[data-theme="dark"] .credit__menu {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.credit__menu[data-open="true"] { display: block; }

.credit__link {
  display: block;
  font-family: var(--font-serif);
  font-size: 0.84rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: 10px 12px;
  white-space: nowrap;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.credit__link:hover {
  color: var(--color-text);
  background: rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .credit__link:hover { background: rgba(255, 255, 255, 0.07); }

.credit__trigger:focus-visible,
.credit__link:focus-visible {
  outline: 1px solid var(--color-text);
  outline-offset: 2px;
}

/* ---------- Scrim behind an open dropdown (optional) ---------- */
.menu-scrim {
  position: fixed;
  inset: 0;
  z-index: 800;
  background: rgba(20, 16, 18, 0.28);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.menu-scrim[data-open="true"] { opacity: 1; }

/* the bar and its menus stay above the scrim */
.collection-bar { position: relative; z-index: 850; }

@media (prefers-reduced-motion: reduce) {
  .menu-scrim { transition: none; }
}

/* ---------- Filter dropdown ---------- */
.filter-by { position: relative; }

.filter-by__trigger {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--color-text-secondary);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.filter-by__trigger:hover,
.filter-by__trigger[aria-expanded="true"] { color: var(--color-text); }

.filter-by__count {
  color: #000000;
  font-weight: 700;
}

[data-theme="dark"] .filter-by__count { color: #ffffff; }

.filter-by__menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  z-index: 900;
  min-width: 210px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  display: none;
}

[data-theme="dark"] .filter-by__menu {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.filter-by__menu[data-open="true"] { display: block; }

.filter-by__opts { padding: 6px; }

/* the menu holds two groups -- Availability, then Category -- so each is
   headed and ruled off from the one above */
.filter-by__group + .filter-by__group {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid var(--color-border);
}

.filter-by__group-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  font-family: var(--font-serif);
  font-size: 0.84rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;       /* name, count and sign stay on one line */
  color: var(--color-text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s ease;
}

.filter-by__group-label:hover,
.filter-by__group[data-open="true"] .filter-by__group-label {
  color: var(--color-text);
}

/* how many of this group's values are ticked, so a folded group still says
   it is doing something */
.filter-by__group-count {
  font-size: 0.68rem;
  letter-spacing: 0.06em;
}

/* the +/- sits at the far edge: margin-left auto rather than a fixed width,
   so the count can grow without moving it */
.filter-by__group-sign {
  margin-left: auto;
  font-size: 0.9rem;
  line-height: 1;
}

.filter-by__group-opts { display: none; }

.filter-by__group[data-open="true"] .filter-by__group-opts {
  display: block;
  padding-bottom: 4px;
}

.filter-by__opt {
  display: block;
  width: 100%;
  font-family: var(--font-serif);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: left;
  color: var(--color-text-secondary);
  background: none;
  border: none;
  padding: 10px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.filter-by__opt:hover {
  color: var(--color-text);
  background: rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .filter-by__opt:hover { background: rgba(255, 255, 255, 0.07); }

.filter-by__opt[aria-pressed="true"] {
  color: var(--color-text);
  font-weight: 700;
}

.filter-by__opt[aria-pressed="true"]::before {
  content: "\2715";
  font-size: 0.62rem;
  margin-right: 9px;
}


.filter-by__foot {
  display: flex;
  gap: 6px;
  padding: 8px;
  border-top: 1px solid var(--color-border);
}

.filter-by__btn {
  flex: 1;
  font-family: var(--font-serif);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 9px 8px;
  border: 1px solid var(--color-btn-border);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.filter-by__btn--apply {
  flex: 1.5;
  background: var(--color-text);
  color: var(--color-bg);
}

.filter-by__btn--apply:hover { opacity: 0.82; }

.filter-by__btn--reset {
  background: none;
  color: var(--color-text);
}

.filter-by__btn--reset:hover {
  background: var(--color-text);
  color: var(--color-bg);
}

.filter-by__trigger:focus-visible,
.filter-by__opt:focus-visible,
.filter-by__btn:focus-visible {
  outline: 1px solid var(--color-text);
  outline-offset: 2px;
}

/* shown when a filter hides everything */
.grid-empty {
  display: none;
  font-family: var(--font-serif);
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  padding: 30px 0 60px;
}

.grid-empty[data-show="true"] { display: block; }

/* ---------- Sort by (dropdown) ---------- */
.collection-bar__left {
  display: flex;
  align-items: baseline;
  gap: 26px;
}


/* ---------- Collection Bar (filters / view by) ---------- */
.collection-bar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 0 0 26px;
  font-family: var(--font-serif);
  font-size: 0.86rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.collection-bar__filters {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color 0.2s ease;
}

.collection-bar__filters:hover:not(:disabled) {
  color: var(--color-text);
}

.collection-bar__filters:disabled {
  opacity: 0.4;
  cursor: default;
}

.view-by {
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}

.view-by__options {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

.view-by__options--mobile {
  display: none;
}

.view-by__opt {
  font: inherit;
  letter-spacing: inherit;
  color: var(--color-text-secondary);
  background: none;
  border: none;
  padding: 0 2px;
  cursor: pointer;
  transition: color 0.2s ease;
}

.view-by__opt:hover {
  color: var(--color-text);
}

.view-by__opt[aria-pressed="true"] {
  color: #000000;
  font-weight: 700;
}

[data-theme="dark"] .view-by__opt[aria-pressed="true"] {
  color: #ffffff;
}

.collection-bar__filters:focus-visible,
.view-by__opt:focus-visible {
  outline: 1px solid var(--color-text);
  outline-offset: 3px;
}

@media (max-width: 760px) {
  .collection-bar {
    font-size: 0.74rem;
    flex-wrap: wrap;
    gap: 12px 16px;
  }

  .collection-bar__left {
    gap: 16px;
  }

  .view-by__options--desktop {
    display: none;
  }

  .view-by__options--mobile {
    display: inline-flex;
  }
}

/* ---------- Item Grid (showroom) ---------- */
/* Wider container so three squares have room to breathe. */
.container--grid {
  max-width: 960px;
}

.item-grid {
  list-style: none;
  padding: 0;
  margin: 0 0 40px;
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), 1fr);
  gap: 24px;
}

/* denser view needs tighter gutters */
.item-grid[style*="--cols: 6"] {
  gap: 14px;
}

.item-grid__item {
  margin: 0;
}

.item-grid__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.item-grid__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.04);
  transition: border-color 0.2s ease, opacity 0.2s ease;
}

[data-theme="dark"] .item-grid__media {
  background: rgba(255, 255, 255, 0.05);
}

.item-grid__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
}

.item-grid__link:hover .item-grid__media {
  border-color: var(--color-text);
  opacity: 0.85;
}

/* Shown only when the tile has no photo yet */
.item-grid__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.item-grid__caption {
  padding: 2px 2px 0;
}

.item-grid__title {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text);
}

.item-grid__link:hover .item-grid__title {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.item-grid__meta {
  font-family: var(--font-serif);
  font-size: 0.82rem;
  color: var(--color-text-secondary);
  margin-top: 2px;
}

@media (max-width: 760px) {
  .item-grid {
    grid-template-columns: repeat(var(--cols-m, 1), 1fr);
    gap: 16px;
  }

  .item-grid[style*="--cols-m: 3"] {
    gap: 10px;
  }
}

/* ---------- Item Photo (single object page) ---------- */
.item-photo {
  margin: 0 0 34px;
}

.item-photo-gallery {
  position: relative;
  margin: 0 0 34px;
}

.item-photo-gallery .item-photo {
  margin: 0;
}

.item-photo__next {
  position: absolute;
  top: 50%;
  right: 14px;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transform: translateY(-50%);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
  animation: item-photo-next-bob 2s ease-in-out infinite;
}

.item-photo__next:hover,
.item-photo__next:focus-visible {
  background: var(--color-btn-hover-bg);
  color: var(--color-btn-hover-text);
}

@keyframes item-photo-next-bob {
  0%, 100% { transform: translate(-2px, -50%); }
  50%      { transform: translate(3px, -50%); }
}

@media (prefers-reduced-motion: reduce) {
  .item-photo__next { animation: none; }
}

.item-photo img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  border: 1px solid var(--color-border);
  border-radius: 4px;
}

.item-photo__note {
  font-family: var(--font-serif);
  font-size: 0.72rem;
  color: var(--color-text-secondary);
  margin-top: 8px;
}

/* ---------- Post List ---------- */
.section {
  padding: 30px 0 10px;
}

.section__title {
  font-family: var(--font-serif);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-secondary);
  margin-bottom: 18px;
}

.post-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}

.post-list__item {
  margin-bottom: 0;
  padding: 22px 24px;
  border: 1px solid var(--color-border);
  border-bottom: none;
  transition: background-color 0.2s ease;
}

.post-list__item:first-child {
  border-radius: 4px 4px 0 0;
}

.post-list__item:last-child {
  border-bottom: 1px solid var(--color-border);
  border-radius: 0 0 4px 4px;
}

.post-list__item:only-child {
  border-radius: 4px;
  border-bottom: 1px solid var(--color-border);
}

.post-list__item:hover {
  background: rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .post-list__item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.post-list__item a {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-link);
  text-decoration: none;
  line-height: 1.6;
}

.post-list__item a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.post-list__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
}

.post-list__date {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  color: var(--color-text-secondary);
}

.post-list__reading-time {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  color: var(--color-text-secondary);
}

.post-list__reading-time::before {
  content: '·';
  margin-right: 14px;
}

.post-list__description {
  font-size: 1rem;
  color: var(--color-text-secondary);
  margin-top: 2px;
  line-height: 1.6;
}

/* ---------- Scroll Progress Indicator ---------- */
/* ---------- Essay Page ---------- */
.essay-header {
  /* The item photo sits directly under this, and the pair reads as one block,
     so the gap below the title is tighter than the one above it. */
  padding: 50px 0 26px;
}

.essay-header__title {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}

.essay-header__subtitle {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: var(--color-text-secondary);
  font-style: italic;
  line-height: 1.6;
  margin-bottom: 14px;
}

.essay-header__date {
  font-family: var(--font-serif);
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  letter-spacing: 0.02em;
}

/* ---------- Essay Body ---------- */
.essay-body {
  /* A flex column, not block flow. In block flow Chrome raised a phantom
     ~36px band above the photo out of the whitespace between the tags -- it
     survived deleting that whitespace and ignored every padding change, and
     only font-size:0 or flex removed it. Flex also stops margins collapsing
     here, so every value below is the gap you actually get.
     Top pairs with .essay-header's bottom padding for the title-to-photo
     gap; bottom is the run from Enquire down to the pager's rule. */
  display: flex;
  flex-direction: column;
  padding: 8px 0 32px;
}

/* Drop Cap — disabled */
/*
.essay-body > p:first-of-type::first-letter,
.essay-body > h2:first-of-type + p::first-letter {
  font-family: var(--font-serif);
  float: left;
  font-size: 5em;
  line-height: 0.75;
  padding-right: 10px;
  padding-top: 6px;
  font-weight: 800;
  color: var(--color-text);
}
*/

/* Reading time on essay pages */
.essay-header__reading-time {
  font-family: var(--font-serif);
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  letter-spacing: 0.02em;
  margin-left: 12px;
}

.essay-header__reading-time::before {
  content: '·';
  margin-right: 12px;
}

.essay-body p {
  margin-bottom: 1.4em;
  font-size: 1rem;
  line-height: 1.85;
}

.essay-body h2 {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 700;
  margin-top: 0.6em;
  margin-bottom: 0.8em;
  letter-spacing: -0.01em;
}

/* Enquire is the one thing on the page that asks for an action, so it gets
   more air above it than the Details heading does. Last h2 = Enquire. */
.essay-body > h2:last-of-type {
  margin-top: 1.3em;
}

.essay-body h3 {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 700;
  margin-top: 2em;
  margin-bottom: 0.6em;
}

.essay-body ul,
.essay-body ol {
  margin-bottom: 1.4em;
  padding-left: 1.5em;
}

.essay-body li {
  margin-bottom: 0.5em;
  line-height: 1.8;
}

.essay-body blockquote {
  border-left: 2px solid var(--color-border);
  padding-left: 20px;
  margin: 1.8em 0;
  color: var(--color-text-secondary);
  font-style: italic;
}

.essay-body img {
  max-width: 100%;
  height: auto;
  margin: 2em 0;
}

.essay-body code {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.88em;
  background: var(--color-code-bg, #f5f5f5);
  color: var(--color-code-text, inherit);
  padding: 2px 6px;
  border-radius: 3px;
}

.essay-body pre {
  background: var(--color-code-bg, #f5f5f5);
  color: var(--color-code-text, inherit);
  padding: 20px;
  border-radius: 4px;
  overflow-x: auto;
  margin-bottom: 1.6em;
  line-height: 1.5;
}

.essay-body pre code {
  background: none;
  padding: 0;
}

.essay-body hr {
  border: none;
  margin: 2.5em 0;
  overflow: visible;
  text-align: center;
  height: auto;
  line-height: 1;
}

.essay-body hr::after {
  content: "\2018\2019-.,_,.-\2018\2019\2018\2019-.-\2018\2019\2018\2019-.,_,.-\2018\2019\2018\2019-.,_,.-\2018\2019\2018\2019-.-\2018\2019\2018\2019-.,_,.-\2018\2019";
  display: block;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  color: var(--color-muted);
  font-family: var(--font-serif);
}

/* ---------- Tables ---------- */
.essay-body table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.6em;
  font-size: 0.92rem;
  line-height: 1.6;
}

.essay-body th,
.essay-body td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border);
}

.essay-body th {
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.essay-body thead {
  border-bottom: 2px solid var(--color-border);
}

.essay-body tbody tr:nth-child(even) {
  background: rgba(0, 0, 0, 0.02);
}

[data-theme="dark"] .essay-body tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.03);
}

.essay-body tbody tr:hover {
  background: rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .essay-body tbody tr:hover {
  background: rgba(255, 255, 255, 0.05);
}

.essay-body tbody tr:last-child td,
.essay-body tbody tr:last-child th {
  border-bottom: none;
}

@media (max-width: 640px) {
  .essay-body table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Curated by is the last row, so its menu opens past the bottom edge of
     that scroll box and gets clipped. Let the table spill while one is open. */
  .essay-body table:has(.credit__menu[data-open="true"]) {
    overflow: visible;
  }
}

/* ---------- Footnotes ---------- */
.footnote-ref {
  font-family: var(--font-serif);
  font-size: 0.7em;
  vertical-align: super;
  line-height: 0;
  margin-left: 2px;
  text-decoration: none;
  color: var(--color-text-secondary);
}

.footnote-ref:hover {
  text-decoration: underline;
}

.footnotes {
  margin-top: 3em;
  padding-top: 2em;
  border-top: 1px solid var(--color-border);
}

.footnotes__title {
  font-family: var(--font-serif);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-secondary);
  margin-bottom: 14px;
}

.footnotes ol {
  padding-left: 1.5em;
}

.footnotes li {
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--color-text-secondary);
  margin-bottom: 10px;
}

.footnote-back {
  margin-left: 6px;
  text-decoration: none;
  font-size: 0.85em;
}

/* ---------- Back to Top ---------- */
.back-to-top {
  text-align: center;
  padding: 30px 0;
  font-family: var(--font-serif);
  font-size: 0.78rem;
}

.back-to-top a {
  color: var(--color-text-secondary);
  text-decoration: none;
}

.back-to-top a:hover {
  color: var(--color-text);
}

/* ---------- Essay Navigation (Next / Prev) ---------- */
.essay-nav {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 32px 0 0;
  margin-top: 20px;
  border-top: 1px solid var(--color-border);
}

.essay-nav__link {
  text-decoration: none;
  color: var(--color-text-secondary);
  font-family: var(--font-serif);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
  max-width: 48%;
}

.essay-nav__link:hover {
  color: var(--color-text);
}

.essay-nav__label {
  display: block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 4px;
  color: var(--color-text-secondary);
}

.essay-nav__title {
  font-family: var(--font-serif);
  font-size: 0.92rem;
  color: var(--color-text);
}

.essay-nav__link:hover .essay-nav__title {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.essay-nav__link--next {
  text-align: right;
  margin-left: auto;
}

/* ---------- Footer ---------- */
.site-footer {
  margin-top: auto;
  padding: 28px 0;
  border-top: 1px solid var(--color-border);
}

.site-footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-serif);
  font-size: 0.72rem;
  color: var(--color-text-secondary);
}

.site-footer__inner a {
  color: var(--color-text-secondary);
  text-decoration: none;
}

.site-footer__inner a:hover {
  color: var(--color-text);
}

.site-footer__social {
  display: flex;
  align-items: center;
  gap: 18px;
}

.site-footer__social a {
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  transition: color 0.2s ease;
}

.site-footer__social a:hover {
  color: var(--color-text);
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  html {
    font-size: 16px;
  }

  .landing__name {
    font-size: 1.8rem;
  }

  .landing__nav {
    flex-direction: column;
    gap: 14px;
  }

  .landing__btn {
    padding: 0;
  }

  .subscribe__form {
    flex-direction: column;
    max-width: 280px;
  }

  .subscribe__input {
    border-right: 1.5px solid var(--color-btn-border);
    border-bottom: none;
  }

  .subscribe-page__form {
    flex-direction: column;
    max-width: 280px;
  }

  .subscribe-page__input {
    border-right: 1.5px solid var(--color-btn-border);
    border-bottom: none;
  }

  .site-header {
    padding: 32px 0 12px;
  }

  .inner-nav__list {
    gap: 20px;
  }

  .essay-header__title {
    font-size: 1.6rem;
  }

  .page-header__title {
    font-size: 1.5rem;
  }

  .container {
    padding: 0 18px;
  }

  .site-footer__inner {
    flex-direction: column;
    gap: 6px;
    text-align: center;
  }

  .name-circle {
    width: 75px;
    height: 75px;
    top: 14px;
    left: 14px;
  }
}

/* ---------- Item pager (prev / back to grid / next) ---------- */
.item-pager {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 20px;
  margin: 0 0 40px;
  padding-top: 26px;
  border-top: 1px solid var(--color-border);
  font-family: var(--font-serif);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
}

.item-pager__link {
  min-width: 0;
  color: var(--color-link);
  text-decoration: none;
}

.item-pager__link--next {
  text-align: right;
}

.item-pager__dir {
  color: var(--color-text-secondary);
  text-transform: uppercase;
}

.item-pager__link:hover .item-pager__dir {
  color: var(--color-text);
}

.item-pager__back {
  align-self: center;
  padding: 7px 14px;
  border: 1px solid var(--color-btn-border);
  color: var(--color-link);
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.item-pager__back:hover {
  background: var(--color-btn-hover-bg);
  color: var(--color-btn-hover-text);
}

.item-pager__link:focus-visible,
.item-pager__back:focus-visible {
  outline: 1px solid var(--color-text);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .item-pager { gap: 12px; }
}

/* ---------- Scroll cue: "there is more below" (desktop only) ---------- */
.scroll-cue {
  position: fixed;
  left: 50%;
  bottom: 26px;
  width: 32px;
  height: 32px;
  margin-left: -16px;
  display: none;              /* the desktop query below opts it back in */
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
  opacity: 0;
  pointer-events: none;       /* inert until js/view.js says there is more below */
  /* transform is the animation's job, so only fade here — the two would
     otherwise fight over the same property */
  transition: opacity 0.4s ease, background-color 0.2s ease, color 0.2s ease;
  animation: scroll-cue-bob 2s ease-in-out infinite;
  z-index: 5;
}

/* view.js flips this on until the visitor reaches the last item */
.scroll-cue[data-show="true"] {
  opacity: 1;
  pointer-events: auto;
}

.scroll-cue:hover {
  background: var(--color-btn-hover-bg);
  color: var(--color-btn-hover-text);
}

.scroll-cue:focus-visible {
  outline: 1px solid var(--color-text);
  outline-offset: 3px;
}

.scroll-cue svg {
  display: block;
  width: 13px;
  height: 13px;
}

@keyframes scroll-cue-bob {
  0%, 100% { transform: translateY(-2px); }
  50%      { transform: translateY(3px); }
}

/* desktop only — 760px is the same line the View by control splits on */
@media (min-width: 761px) {
  .scroll-cue { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-cue { animation: none; }
}

/* ---------- Sticky header + nav ---------- */
/* One compact bar at all times: name left, nav right, pinned to the top of
   every page. There is no expanded resting state — the bar looks the same
   before and after you scroll. */
.page-top {
  position: sticky;
  top: 0;
  /* above .collection-bar (850) so the bar scrolls under it, but below the
     dropdown menus (900) so those still open over the top */
  z-index: 860;
  background: var(--color-bg);
  border-bottom: 1px solid var(--header-rule);
}

/* Item and manifesto pages centre their body on 680px, the grids on 960px, so
   the name would shift 140px sideways when you moved between them. The header
   is site chrome, not page content, so it keeps the grid width everywhere. */
.page-top .container {
  max-width: 960px;
}

.page-top .site-header {
  padding-top: 13px;
  padding-bottom: 13px;
}

.page-top .inner-nav {
  padding-bottom: 12px;
}

.page-top .site-header__name {
  font-size: 1.05rem;
}

/* Desktop lifts the nav onto the name's row. Below this the two stack, since
   the name plus three uppercase links will not fit across a phone. */
@media (min-width: 761px) {
  .page-top .inner-nav {
    position: absolute;
    inset: 0;
    padding: 0;
    display: flex;
    align-items: center;
    pointer-events: none;      /* the overlay must not shadow the name */
  }

  .page-top .inner-nav .container {
    width: 100%;
  }

  .page-top .inner-nav__list {
    justify-content: flex-end;
    gap: 22px;
    /* the list box still spans the full width even when its items are pushed
       right, so it must stay transparent to clicks or it covers the name */
    pointer-events: none;
  }

  .page-top .inner-nav__link {
    font-size: 0.86rem;
    pointer-events: auto;
  }
}

/* The night toggle is fixed to the top-right corner. Above ~1104px the grid
   container stops short of it, but below that the right-aligned nav would run
   underneath it, so reserve its width for exactly that range. */
@media (min-width: 761px) and (max-width: 1103px) {
  .page-top .inner-nav__list {
    padding-right: 72px;
  }
}

/* ---------- Landing loader ----------
   A plain hold on the landing page while the font and stylesheet settle,
   with the count in the bottom right corner. It sits above everything,
   including the night toggle (z-index 1000), and is taken out of the
   document the moment it has faded.
   The markup is in index.html rather than injected, so a visitor with
   JavaScript off never sees a flash of it -- the <noscript> rule below
   removes it outright for them. */
.loader {
  position: fixed;
  inset: 0;
  z-index: 2000;
  /* Black in both themes, not the page's own background. The reference does
     the same, and it is the whole point of the exit: a black sheet dropping
     away to uncover the site. Tied to --color-bg it would match whatever is
     behind it and the drop would barely read. */
  background: #000000;
  transform: translateY(0);
  /* EXIT in js/site.js must match this duration */
  transition: transform 700ms cubic-bezier(0.55, 0, 0.2, 1);
  will-change: transform;
}

/* The panel drops out of the bottom of the window rather than dissolving,
   uncovering the landing page behind it. 100% of its own height is exactly
   one viewport, so it clears the screen completely. */
.loader[data-done="true"] {
  transform: translateY(100%);
  pointer-events: none;      /* the page underneath is clickable straight away */
}

/* Sized off the viewport the way the reference does it -- the count is the
   whole composition, not a status line in a corner. 15vw lands on roughly
   190px at desktop width, and the clamp stops it becoming absurd on a very
   wide monitor or illegible on a phone. */
.loader__pct {
  position: absolute;
  left: 30px;
  bottom: 0;
  font-family: var(--font-serif);
  font-size: clamp(3.5rem, 15vw, 11rem);
  line-height: 0.82;          /* sits the digits down onto the bottom edge */
  letter-spacing: -0.02em;
  color: #ffffff;             /* on the black panel, so it ignores the theme too */
  /* the count changes every frame; fixed digit cells stop it shuffling */
  font-variant-numeric: tabular-nums;
  transition: transform 550ms cubic-bezier(0.55, 0, 0.2, 1),
              opacity 380ms ease;
}

/* The count rides down with the panel and drifts a little further as it
   goes, so the number leaves slightly ahead of the panel edge. */
.loader[data-done="true"] .loader__pct {
  transform: translateY(90px);
  opacity: 0;
}

@media (max-width: 640px) {
  .loader__pct {
    left: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .loader,
  .loader__pct { transition: none; }
}