/* ==========================================================================
   bibby.photography — the front door.
   CSP note: style-src 'self', so no inline styles anywhere in the HTML.
   ========================================================================== */

@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/instrument-serif-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/instrument-serif-latin-400-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Inter Tight";
  src: url("../fonts/inter-tight-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --ink: #0f0e0d;
  --ink-3: #221f1c;
  --line: rgba(236, 230, 220, 0.14);
  --paper: #ece6dc;
  --paper-dim: #a39b8f;
  --on-photo: rgba(246, 241, 233, 0.9);
  --safelight: #e2553f;

  --serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; }
p { margin: 0; }
::selection { background: var(--safelight); color: var(--ink); }

/* Film grain over everything, very faint. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0.08;
  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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.page {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.8vw, 22px);
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(16px, 2vw, 28px);
}

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

.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding: clamp(6px, 1vw, 12px) clamp(4px, 0.8vw, 10px) 0;
}
.masthead__mark {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  line-height: 0.9;
  letter-spacing: -0.015em;
}
.masthead__mark em { font-style: italic; color: var(--paper-dim); }
.masthead__code {
  margin-bottom: 0.7rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--safelight);
}
.masthead__intro {
  max-width: 26rem;
  font-size: clamp(0.95rem, 1.05vw, 1.0625rem);
  line-height: 1.5;
  color: var(--paper-dim);
  text-align: right;
}

/* ---- doors -------------------------------------------------------------- */

.doors {
  display: flex;
  flex: 1;
  gap: clamp(10px, 1.1vw, 16px);
  min-height: min(76vh, 780px);
}

.door {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  border-radius: 4px;
  background: var(--ink-3);
  color: var(--paper);
  text-decoration: none;
  transition: flex-grow 0.8s var(--ease);
}
.door:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }

.door__media { position: absolute; inset: 0; z-index: -2; transition: transform 1.6s var(--ease); }
.door__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 0.8s ease;
}
.door__img { object-position: 50% 25%; }

.door__shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, rgba(10, 9, 8, 0.45), transparent 24%),
    linear-gradient(to top, rgba(10, 9, 8, 0.86) 0%, rgba(10, 9, 8, 0.4) 38%, transparent 62%);
}

.door__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(16px, 2vw, 28px);
}
.door__index, .door__kicker {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-photo);
}
.door__key {
  padding: 0.15rem 0.5rem;
  border: 1px solid rgba(246, 241, 233, 0.35);
  border-radius: 6px;
  background: rgba(10, 9, 8, 0.25);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--on-photo);
}

.door__body {
  display: grid;
  gap: 0.55rem;
  padding: clamp(20px, 3vw, 44px);
}
.door__name {
  margin: 0.1em 0 0.15em;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(4.5rem, 10.5vw, 10.5rem);
  line-height: 0.82;
  letter-spacing: -0.025em;
}
.door__desc {
  max-width: 25rem;
  font-size: clamp(0.975rem, 1.05vw, 1.0625rem);
  line-height: 1.5;
  color: var(--on-photo);
  text-wrap: pretty;
}
.door__go {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 0.6rem;
  margin-top: 0.9rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(246, 241, 233, 0.28);
  font-size: 0.9375rem;
  font-weight: 500;
}
.door__go svg { flex: none; width: 18px; height: 18px; transition: transform 0.5s var(--ease); }

/* Two or three photos crossfade, ~7s each; the first starts part-way in so the
   page opens on a photo rather than black. A single photo drifts slowly. */
.door__media--n2 .door__img, .door__media--n3 .door__img { opacity: 0; }
.door__media picture:first-child .door__img { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .door__media--n1 .door__img { animation: drift 26s ease-in-out infinite alternate; }
  .door__media--n2 .door__img { opacity: 0; animation: crossfade-2 14s linear infinite; }
  .door__media--n3 .door__img { opacity: 0; animation: crossfade-3 21s linear infinite; }
  .door__media picture:nth-child(1) .door__img { animation-delay: -1.4s; }
  .door__media picture:nth-child(2) .door__img { animation-delay: 5.6s; }
  .door__media picture:nth-child(3) .door__img { animation-delay: 12.6s; }
  .door__media--n1 picture:nth-child(1) .door__img { animation-delay: 0s; }
}
@keyframes crossfade-3 {
  0%   { opacity: 0; transform: scale(1.06); }
  7%   { opacity: 1; }
  33%  { opacity: 1; }
  41%  { opacity: 0; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
@keyframes crossfade-2 {
  0%   { opacity: 0; transform: scale(1.06); }
  10%  { opacity: 1; }
  50%  { opacity: 1; }
  62%  { opacity: 0; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
@keyframes drift {
  from { transform: scale(1.08) translate3d(-1.5%, 1%, 0); }
  to   { transform: scale(1.18) translate3d(1.5%, -1.5%, 0); }
}

@media (hover: hover) and (min-width: 821px) {
  .door:hover, .door:focus-visible { flex-grow: 1.4; }
  .door:hover .door__media { transform: scale(1.03); }
  .doors:hover .door:not(:hover) .door__img { filter: brightness(0.5) saturate(0.6); }
  .door:hover .door__go svg, .door:focus-visible .door__go svg { transform: translateX(5px); }
  .door--external:hover .door__go svg, .door--external:focus-visible .door__go svg { transform: translate(3px, -3px); }
}
@media (hover: none) { .door__key, .colophon__hint { display: none; } }

.door.is-leaving .door__body { opacity: 0.6; transition: opacity 0.2s ease; }

/* ---- footer ------------------------------------------------------------- */

.colophon {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding: 0 clamp(4px, 0.8vw, 10px) 2px;
  font-size: 0.8125rem;
  color: var(--paper-dim);
}
.colophon a { color: var(--paper); text-decoration: none; }
.colophon a:hover { text-decoration: underline; text-underline-offset: 3px; }
.colophon kbd {
  padding: 0.05rem 0.35rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--paper);
}

/* ---- small screens ------------------------------------------------------ */

@media (max-width: 820px) {
  .masthead__intro { text-align: left; }
  .doors { flex-direction: column; min-height: 0; }
  .door { flex: none; min-height: max(360px, 58svh); }
  .door__name { font-size: clamp(4.25rem, 21vw, 7rem); }
}

@media (prefers-reduced-motion: no-preference) {
  .masthead, .door, .colophon { animation: rise 0.9s var(--ease) both; }
  .door:nth-child(1) { animation-delay: 0.08s; }
  .door:nth-child(2) { animation-delay: 0.18s; }
  .door:nth-child(3) { animation-delay: 0.28s; }
  .colophon { animation-delay: 0.3s; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}