/* iamsambearfoot.com/treasury — The AI Image Treasury.
 *
 * Its own stylesheet rather than more rules in main.css: the home page is a
 * link page with its own layout, and a sales page twice its length should not
 * make every visit to the home page download it.
 *
 * Same brand, same rules as the home page (see README.md, Brand). Stone is the
 * page, plum is the room, gold is a spark. And the constraint that governs the
 * whole thing: GOLD ON STONE IS 2.45:1, so on stone gold is a rule, a keyline or
 * a frame — never a word. Gold carries text only inside a plum room.
 */

:root {
  /* Mirrors main.css. Kept in step by hand; there are four of them. */
  --stone:       #f4efe2;
  --plum:        #331723;
  --plum-raised: #47202F;
  --gold:        #bd9439;
  --gold-hover:  #cfa64b;

  --gold-line:  rgba(189, 148, 57, 0.34);
  --gold-faint: rgba(189, 148, 57, 0.12);

  --ink-mute:   rgba(51, 23, 35, 0.88);
  --ink-line:   rgba(51, 23, 35, 0.18);
  --card:       rgba(255, 255, 255, 0.45);

  --stone-mute:  rgba(244, 239, 226, 0.8);
  --stone-label: rgba(244, 239, 226, 0.9);

  --display: 'Cinzel Decorative', 'Cinzel', Georgia, 'Times New Roman', serif;
  --heading: 'Cinzel', Georgia, 'Times New Roman', serif;
  --body:    'Lato', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

  --gutter:  clamp(1.25rem, 5vw, 2.5rem);

  --skin:  url('/assets/img/scales-room-1400.jpg');
  --paper: url('/assets/img/paper-stone-840.jpg');
}

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

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

body {
  margin: 0;
  background: var(--stone);
  color: var(--plum);
  font-family: var(--body);
  font-size: clamp(1.0625rem, 0.3vw + 1rem, 1.1875rem);
  line-height: 1.7;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-image:
    radial-gradient(at 12% 8%,  rgba(71, 32, 47, 0.07), transparent 42%),
    radial-gradient(at 88% 18%, rgba(189, 148, 57, 0.09), transparent 44%),
    radial-gradient(at 70% 88%, rgba(71, 32, 47, 0.06), transparent 46%);
  background-attachment: fixed;
}

/* The snake relief, exactly as the home page lays it. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--paper) repeat;
  background-size: 840px auto;
  opacity: 0.3;
}

@media (max-width: 45rem) {
  body { background-attachment: scroll; }
}

img { max-width: 100%; }
p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }
a { color: var(--plum); }
strong { font-weight: 700; color: var(--plum); }

:focus-visible {
  outline: 2px solid var(--plum);
  outline-offset: 3px;
  border-radius: 2px;
}
.room :focus-visible { outline-color: var(--gold); }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--gold);
  color: var(--plum);
  font-weight: 700;
  padding: 0.6rem 1rem;
  z-index: 10;
}
.skip:focus { left: 0; }

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

/* A reading measure for prose blocks. Ranged left inside the wide wrap, so a
   heading and its paragraph share an edge with the grid underneath them. */
.measure > * { max-width: 44rem; }
.wrap.measure { max-width: 72rem; }

h1, h2, h3 {
  font-family: var(--heading);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.03em;
  color: var(--plum);
  margin: 0 0 1rem;
}
h2 { font-size: clamp(1.625rem, 4vw, 2.375rem); }
h3 { font-size: 1.125rem; }

.eyebrow {
  font-family: var(--body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 1.1rem;
  line-height: 1.4;
}

.lead,
.lede {
  font-size: 1.125em;
  color: var(--plum);
}

/* ── Rooms ───────────────────────────────────────────────────────────────────
   The plum sections: hero, how it works, final call. Same skin, same wash as
   the home page's wall of doors, so the two pages are plainly one site. The
   wash is what lets gold carry words in here — near-solid plum under the type,
   texture at the edges where it is only looked at. */

.room {
  position: relative;
  isolation: isolate;
  background-color: var(--plum);
  color: var(--stone-mute);
  padding-block: clamp(3rem, 8vw, 5.5rem);
  border-block: 1px solid var(--gold-line);
}

.room::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(96% 78% at 50% 42%,
      rgba(51, 23, 35, 0.86) 18%,
      rgba(51, 23, 35, 0.94) 76%,
      var(--plum) 100%),
    var(--skin) center / cover;
}

.room h1, .room h2, .room h3, .room strong { color: var(--stone); }
.room .eyebrow { color: var(--gold); }
.room .lead { color: var(--stone); }
.room a:not(.btn) { color: var(--gold); }

.gild { color: var(--gold); }

/* ── Stone bands ─────────────────────────────────────────────────────────── */

.band { padding-block: clamp(3rem, 8vw, 5.5rem); }
.band--tight { padding-block: clamp(2rem, 5vw, 3rem); }

/* Consecutive stone sections need something between them or they run together
   into one long page with no chapters. A hairline, inset to the wrap. */
.band--rule > .wrap {
  border-top: 1px solid var(--ink-line);
  padding-top: clamp(3rem, 8vw, 5.5rem);
}
.band--rule { padding-top: 0; }

/* ── Button ──────────────────────────────────────────────────────────────────
   Plum on gold, the same pairing as gold on plum the other way up: 5.79:1. */

.btn {
  display: inline-block;
  font-family: var(--heading);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  line-height: 1.3;
  padding: 1.05rem 1.9rem;
  border-radius: 0.3rem;
  background: var(--gold);
  color: var(--plum);
  box-shadow: 0 0.75rem 2rem -0.75rem rgba(189, 148, 57, 0.55);
  transition: background-color 160ms ease, transform 160ms ease;
}
.btn:hover { background: var(--gold-hover); transform: translateY(-2px); }
.btn--large { font-size: 1rem; padding: 1.2rem 2.4rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
  .btn:hover { transform: none; }
}

/* ── Hero ────────────────────────────────────────────────────────────────── */

.hero { padding-top: clamp(1.25rem, 3vw, 1.75rem); border-top: 0; }

.hero__top {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: clamp(2.25rem, 6vw, 4rem);
}

.brand {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}
.room a.brand { color: var(--stone); }

.hero__skip {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hero__grid {
  display: grid;
  gap: clamp(2.25rem, 6vw, 3.5rem);
  align-items: center;
}

@media (min-width: 60rem) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.hero h1 {
  font-size: clamp(2rem, 5vw, 3.125rem);
  line-height: 1.12;
  letter-spacing: 0.02em;
  margin-bottom: 1.5rem;
}

.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
}

.price { margin: 0; line-height: 1.3; }
.price strong {
  display: block;
  font-family: var(--heading);
  font-size: 1.75rem;
  letter-spacing: 0.04em;
}
.price span {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone-label);
}

/* A picture frame is a graphic, so gold is allowed on it anywhere. */
.frame {
  margin: 0;
  border: 2px solid var(--gold);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 1.5rem 3.5rem -1rem rgba(10, 4, 7, 0.7);
}
.frame img { display: block; width: 100%; height: auto; }

/* ── Stats ───────────────────────────────────────────────────────────────── */

.stats-band { border-bottom: 1px solid var(--ink-line); }

.stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem 1rem;
  text-align: center;
}

@media (min-width: 48rem) {
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.stats strong {
  display: block;
  font-family: var(--display);
  font-size: clamp(2.125rem, 5vw, 2.875rem);
  line-height: 1.1;
  margin-bottom: 0.35rem;
}

.stats span {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ── The problem ─────────────────────────────────────────────────────────── */

.pull {
  font-family: var(--heading);
  font-weight: 600;
  font-size: clamp(1.25rem, 3vw, 1.625rem);
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--plum);
  border-left: 2px solid var(--gold);
  padding: 0.2rem 0 0.2rem 1.25rem;
  margin: 2rem 0;
}

/* ── The volumes ─────────────────────────────────────────────────────────── */

.band--inside { padding-top: 0; }

.volumes {
  list-style: none;
  margin: clamp(2rem, 5vw, 3rem) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(1.25rem, 3vw, 1.75rem);
}

@media (min-width: 52rem) {
  .volumes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.volume {
  display: grid;
  grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr);
  align-content: start;
  gap: 1.1rem 1.25rem;
  padding: clamp(1rem, 3vw, 1.35rem);
  background: var(--card);
  border: 1px solid var(--ink-line);
  border-radius: 1rem;
}

@media (max-width: 24rem) {
  .volume { grid-template-columns: minmax(0, 5.5rem) minmax(0, 1fr); }
}

.volume__cover {
  display: block;
  align-self: start;
  border: 1px solid var(--gold);
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 0.5rem 1.25rem -0.5rem rgba(51, 23, 35, 0.35);
}
.volume__cover img { display: block; width: 100%; height: auto; }

.volume h3 { margin: 0 0 0.3rem; font-size: 1.0625rem; }

.volume__count {
  margin: 0 0 0.6rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.volume__job {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-mute);
}

.samples {
  grid-column: 1 / -1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.samples img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 0.5rem;
  border: 1px solid var(--ink-line);
  background: var(--plum-raised);
}

/* ── Steps ───────────────────────────────────────────────────────────────── */

.steps {
  list-style: none;
  counter-reset: step;
  margin: clamp(2rem, 5vw, 3rem) 0 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 40rem) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.steps li {
  counter-increment: step;
  padding: 1.5rem;
  border: 1px solid var(--gold-line);
  border-radius: 1rem;
  background: rgba(20, 8, 13, 0.55);
}

.steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--gold);
  margin-bottom: 0.9rem;
}

.steps h3 { font-size: 1.0625rem; margin-bottom: 0.5rem; }
.steps p { font-size: 0.9375rem; line-height: 1.6; }

/* ── Places ──────────────────────────────────────────────────────────────── */

.places {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.places li {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--plum);
  background: var(--card);
  border: 1px solid var(--ink-line);
  border-radius: 100px;
  padding: 0.45rem 0.95rem;
}

/* ── Who it's for ────────────────────────────────────────────────────────── */

.fit {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem 2.5rem;
}

@media (min-width: 52rem) {
  .fit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.fit li {
  position: relative;
  padding-left: 1.9rem;
  color: var(--plum);
}

/* A gold diamond. Decoration, not information, so 2.45:1 is acceptable here —
   the sentence beside it says everything. */
.fit li::before {
  content: '';
  position: absolute;
  left: 0.2rem;
  top: 0.55em;
  width: 0.55rem;
  height: 0.55rem;
  border: 2px solid var(--gold);
  transform: rotate(45deg);
}

/* ── Questions ───────────────────────────────────────────────────────────── */

.faq {
  margin-top: 1.75rem;
  display: grid;
  gap: 0.75rem;
  max-width: 50rem;
}

.faq details {
  background: var(--card);
  border: 1px solid var(--ink-line);
  border-radius: 0.75rem;
}

.faq summary {
  position: relative;
  cursor: pointer;
  list-style: none;
  padding: 1.1rem 3.25rem 1.1rem 1.25rem;
  font-family: var(--heading);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.35;
  color: var(--plum);
}
.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: '+';
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--body);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--plum-raised);
}
.faq details[open] summary::after { content: '\2212'; }

.faq details > div {
  padding: 0 1.25rem 1.25rem;
  color: var(--ink-mute);
}

/* ── Sam ─────────────────────────────────────────────────────────────────── */

.about__inner {
  display: grid;
  gap: clamp(1.75rem, 5vw, 3.5rem);
}

@media (min-width: 56rem) {
  .about__inner {
    grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
    align-items: start;
  }
}

.portrait {
  position: relative;
  margin: 0 auto;
  width: min(70vw, 18rem);
  border: 2px solid var(--gold);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 1rem 2.5rem rgba(51, 23, 35, 0.16);
}
.portrait img { display: block; width: 100%; height: auto; }

.story { color: var(--ink-mute); max-width: 44rem; }

.story h2 {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 0.4rem;
}

.standfirst {
  font-family: var(--heading);
  font-weight: 600;
  font-size: clamp(1.0625rem, 2.2vw, 1.25rem);
  letter-spacing: 0.05em;
  color: var(--plum-raised);
  margin-bottom: 1.5rem;
}

/* ── Final call ──────────────────────────────────────────────────────────── */

.final__inner {
  max-width: 44rem;
  text-align: center;
}

.final h2 { font-size: clamp(1.875rem, 5vw, 2.75rem); }
.final .btn { margin-top: 1.25rem; }

.final__small {
  margin-top: 1.25rem;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--stone-label);
}

/* ── ECHO ────────────────────────────────────────────────────────────────── */

.echo-note {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
  padding: clamp(1.5rem, 4vw, 2rem);
  border: 1px solid var(--ink-line);
  border-radius: 1rem;
  background: var(--card);
}

.echo-note h2 { font-size: clamp(1.25rem, 3vw, 1.5rem); margin-bottom: 0.6rem; }
.echo-note p { color: var(--ink-mute); font-size: 0.9375rem; }

.echo-note a {
  display: inline-block;
  margin-top: 0.9rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 0.2rem;
}

/* ── Foot ────────────────────────────────────────────────────────────────── */

.foot {
  max-width: 72rem;
  margin: 0 auto;
  padding: 1.75rem var(--gutter) clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--ink-line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: baseline;
  justify-content: space-between;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
}

.foot a { color: var(--plum); text-decoration-color: var(--ink-line); }