/* ---------------------------------------------------------------------------
   Presentation shell — reset, the version toolbar, and the shared primitives
   that the two directions build on (photo slots, breakpoint helpers).
   --------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--canvas-bg);
  color: var(--canvas-ink);
  font-family: var(--font-sans);
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; }

[hidden] { display: none !important; }

/* --------------------------------------------------------------- focus ---- */
/* Every interactive element must be visible under keyboard focus; each
   direction overrides the colour with its own accent below. */

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* ------------------------------------------------------- reduced motion ---- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Anchored sections must clear the sticky toolbar. */
[id] { scroll-margin-top: 64px; }

/* ----------------------------------------------------------- breakpoints -- */
/* `narrow` is the phone composition the designer drew for the 390 artboards;
   `wide` is the desktop composition. */

@media (min-width: 1024px) {
  .narrow-only { display: none !important; }
}

@media (max-width: 1023px) {
  .wide-only { display: none !important; }
}

/* --------------------------------------------------------------- toolbar -- */

.toolbar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 20px;
  background: #14110e;
  color: #f2ebe2;
  border-bottom: 1px solid rgba(242, 235, 226, .14);
}

.toolbar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.toolbar__mark {
  flex: none;
  width: 26px;
  height: 26px;
  border: 1px solid #c08b4a;
  color: #c08b4a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 12px;
}

.toolbar__title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #b9ad9c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toolbar__switch {
  flex: none;
  display: flex;
  gap: 2px;
  padding: 3px;
  background: rgba(242, 235, 226, .07);
  border: 1px solid rgba(242, 235, 226, .16);
}

.toolbar__btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 0;
  background: transparent;
  color: #cfc3b4;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}

.toolbar__btn:hover { color: #f2ebe2; }
.toolbar__btn:focus-visible { outline-color: #c08b4a; outline-offset: -2px; }

.toolbar__btn[aria-pressed="true"] {
  background: #f2ebe2;
  color: #14110e;
}

.toolbar__btn-num {
  font-weight: 500;
  opacity: .6;
}

.toolbar__btn[aria-pressed="true"] .toolbar__btn-num { opacity: 1; }

@media (max-width: 560px) {
  .toolbar { padding: 8px 12px; gap: 10px; }
  .toolbar__title { display: none; }
  .toolbar__btn { padding: 8px 10px; gap: 6px; }
}

/* ------------------------------------------------------------- versions -- */

.version { display: block; }

/* --------------------------------------------- placeholder photo slots ---- */
/* The design marks every photo slot with its subject and aspect ratio. Each
   slot now carries the generated stand-in photograph; the hatch stays as the
   background behind it, so a slow or failed image still reads as a slot. */

.ph {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-mono);
}

.ph__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ph--dark {
  background: repeating-linear-gradient(135deg, var(--a-ph-dark) 0 9px, var(--a-ph-light) 9px 18px);
  color: var(--a-ph-ink);
}

.ph--dark-card {
  background: repeating-linear-gradient(135deg, var(--a-ph-dark) 0 9px, var(--a-ph-dark-card) 9px 18px);
  color: var(--a-ph-ink);
}

.ph--light {
  background: repeating-linear-gradient(135deg, var(--b-ph-dark) 0 9px, var(--b-ph-light) 9px 18px);
  color: var(--b-ph-ink);
}

.ph--light-alt {
  background: repeating-linear-gradient(135deg, var(--b-ph-dark-alt) 0 9px, var(--b-ph-light-alt) 9px 18px);
  color: var(--b-ph-ink);
}

/* `--slot`/`--slot-sm` carry type only: the surrounding card or tile owns the
   inset, exactly as in the source. */
.ph--slot { font-size: 11px; line-height: 1.7; }
.ph--slot-sm { font-size: 10px; line-height: 1.7; }
.ph--stage { font-size: 12px; line-height: 1.8; }
.ph--stage-wide { font-size: 12px; line-height: 1.8; letter-spacing: .06em; }