/* ═══════════════════════════════════════════════════════════════════════════
  CONISTRA — dupes landing variant (index-dupes.html)

  Loaded after emotional.css and story.css, and only on this page. It borrows
  the clock (.tl), the brief, the concept card, the rails, the plans, the FAQ,
  the beat CTAs and the mobile dock unchanged, and adds the four objects this
  page's argument needs:

    · .hx      — a full-bleed hero photograph that is not a photograph
    · .guess   — "three of these were never taken, tap the one that was"
    · .pipe    — found → checked → finished: the part that ISN'T invented
    · .igp     — the month-six profile, built in HTML from the real tiles

  The page exists to produce one reaction — "wait, that's AI?" — and then to
  answer the skepticism that follows it. So the photographs get the room: fewer
  sections than index-story.html, bigger frames, and a serif borrowed from the
  account's own slides (Instrument Serif) for the moments that should read like
  the posts rather than like software.
  ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* The account's one accent — the price tag on every slide. Used sparingly on
     the page so it reads as @dupeatlas.co's colour, not Conistra's. */
  --sun: #ffd23f;
  --serif: 'Instrument Serif', 'Times New Roman', Georgia, serif;
}

/* ── Hero: the photo nobody took ──────────────────────────────────────────
   Full-bleed on purpose. The claim is "you cannot tell", and a thumbnail in a
   drifting column can't carry that — the frame has to be big enough that the
   visitor looks for the seams and doesn't find any.

   `.hero` stays on the element because the mobile dock's observer keys off it;
   everything visual that emotional.css hangs on .hero is reset here. */
.hero.hx {
  display: block;
  min-height: 100svh;
  padding: 0;
  background: var(--night);
}
.hx-bg,
.hx-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hx-bg { display: block; overflow: hidden; }
.hx-bg img {
  object-fit: cover;
  /* The table sits in the right third; on wide screens keep it in frame. */
  object-position: 70% 50%;
  animation: hx-settle 14s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes hx-settle {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}
/* Left-weighted shade: the copy sits on the open sea and sky, the drinks stay
   untouched. Bottom fade hands over to the next (night) section. */
.hx-shade {
  position: absolute;
  inset: 0;
  /* An ellipse around the copy rather than a full-height band: a flat band
     also sat on the low sun in the top-left and turned it an olive smudge. */
  background:
    radial-gradient(ellipse 58% 62% at 20% 60%, rgba(12, 11, 10, .8) 0%, rgba(12, 11, 10, .5) 55%, transparent 100%),
    linear-gradient(to bottom, rgba(12, 11, 10, .4) 0%, transparent 14%, transparent 74%, var(--night) 100%);
}
.hx-inner {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  min-height: 100svh;
  margin: 0 auto;
  padding: 128px var(--gut) 96px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hx-inner > * { max-width: 600px; }
.hx .tl { color: rgba(244, 240, 234, .7); }
.hx-h1 {
  font-size: clamp(2.9rem, 6.6vw, 5.6rem);
  line-height: .94;
  letter-spacing: -.05em;
  font-weight: 700;
  margin-bottom: 26px;
  text-shadow: 0 6px 50px rgba(0, 0, 0, .35);
}
/* The serif is the account's voice. Here it marks the one phrase the page is
   about, and it is the only place the brand gradient is NOT used for emphasis
   — a pink gradient on top of a sunset photograph fights the photograph. */
.hx-h1 em {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.02em;
  font-size: 1.12em;
  line-height: .95;
  color: #fff;
}
.hx-answer {
  font-size: clamp(1.05rem, 1.9vw, 1.2rem);
  color: rgba(244, 240, 234, .84);
  max-width: 46ch;
  margin-bottom: 32px;
}
.hx-answer b { color: #fff; font-weight: 600; }
.hx .hero-fine { color: rgba(244, 240, 234, .55); }

/* The label on the photo. It reads like a location sticker first and then
   flips to what the picture actually is — the page's whole thesis in eight
   seconds, placed on the frame itself rather than in the copy. */
.hx-tag {
  position: absolute;
  z-index: 2;
  right: max(var(--gut), calc((100% - var(--maxw)) / 2 + var(--gut)));
  bottom: 64px;
  display: grid;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.hx-tag span {
  grid-area: 1 / 1;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  white-space: nowrap;
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}
.hx-tag-a {
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .3);
  color: #fff;
  animation: hx-tag-a 8s ease-in-out infinite;
}
.hx-tag-b {
  background: rgba(12, 11, 10, .72);
  border: 1px solid rgba(255, 210, 63, .5);
  color: var(--sun);
  opacity: 0;
  animation: hx-tag-b 8s ease-in-out infinite;
}
@keyframes hx-tag-a {
  0%, 42%   { opacity: 1; transform: none; }
  50%, 92%  { opacity: 0; transform: translateY(-6px); }
  100%      { opacity: 1; transform: none; }
}
@keyframes hx-tag-b {
  0%, 42%   { opacity: 0; transform: translateY(6px); }
  50%, 92%  { opacity: 1; transform: none; }
  100%      { opacity: 0; transform: translateY(6px); }
}

/* ── The test ──────────────────────────────────────────────────────────── */
.guess {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.6vw, 18px);
  margin-top: 44px;
}
.guess-card {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--night-3);
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
  box-shadow: 0 22px 50px rgba(0, 0, 0, .45);
  transition: transform .3s cubic-bezier(.2, .8, .25, 1), box-shadow .3s ease, filter .4s ease;
  -webkit-tap-highlight-color: transparent;
}
.guess-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .8, .25, 1);
}
.guess-card:hover img { transform: scale(1.035); }
.guess-card:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; }
/* "Tap" hint on each card before a guess; a pointer device gets it on hover. */
.guess-card::after {
  content: "This one?";
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translate(-50%, 6px);
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(12, 11, 10, .66);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.guess-card:hover::after,
.guess-card:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.guess.done .guess-card::after { display: none; }

.guess-verdict {
  position: absolute;
  inset: auto 0 0 0;
  padding: 34px 12px 12px;
  background: linear-gradient(to top, rgba(12, 11, 10, .9), transparent);
  font-family: var(--mono);
  font-size: .64rem;
  line-height: 1.45;
  letter-spacing: .04em;
  color: rgba(244, 240, 234, .8);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease;
}
.guess-verdict b {
  display: inline-block;
  margin-bottom: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
}
.guess-card[data-real="false"] .guess-verdict b { background: var(--sun); color: #16140f; }
.guess-card[data-real="true"] .guess-verdict b { background: #fff; color: #16140f; }
.guess.done .guess-verdict { opacity: 1; transform: none; }
.guess.done .guess-card { cursor: default; }
.guess.done .guess-card:hover img { transform: none; }
.guess.done .guess-card:not(.picked) { filter: saturate(.9); }
.guess-card.picked {
  box-shadow: 0 0 0 2px var(--sun), 0 28px 60px rgba(0, 0, 0, .55);
  transform: translateY(-4px);
}

.guess-result {
  min-height: 1.6em;
  margin-top: 28px;
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  line-height: 1.45;
  letter-spacing: -.01em;
  color: var(--on-night);
  max-width: 52ch;
}
.guess-result em {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15em;
  color: var(--sun);
}
.guess-skip {
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--on-night-3);
  cursor: pointer;
  border-bottom: 1px solid currentColor;
}
.guess.done ~ .guess-skip { display: none; }

/* ── Found → checked → finished ────────────────────────────────────────── */
.pipe {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) minmax(0, 1fr);
  gap: clamp(14px, 2.4vw, 30px);
  /* Photos top-aligned so 01 and 03 read as a before/after pair; the check
     card floats between them. */
  align-items: start;
  margin-top: 48px;
}
.pipe-check { align-self: center; }
.pipe-step { position: relative; margin: 0; }
.pipe-n {
  display: block;
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.pipe-n b { color: var(--ink); font-weight: 700; }
.pipe-step img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid var(--line);
  box-shadow: 0 26px 60px rgba(27, 26, 23, .16);
}
/* The found photo is a landscape original; crop it like the slide so the two
   frames compare like for like, anchored on the islet. */
.pipe-found img { object-position: 72% 50%; }
.pipe-step figcaption {
  margin-top: 12px;
  font-size: .86rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.pipe-step figcaption a { color: inherit; border-bottom: 1px solid var(--line); }
.pipe-step figcaption a:hover { border-bottom-color: var(--ink-3); }

.pipe-check {
  padding: clamp(18px, 2.4vw, 24px);
  border-radius: 16px;
  background: #16140f;
  color: rgba(244, 240, 234, .78);
  font-family: var(--mono);
  font-size: .74rem;
  line-height: 1.6;
  box-shadow: 0 26px 60px rgba(27, 26, 23, .22);
}
.pipe-check .pipe-n { color: rgba(244, 240, 234, .45); }
.pipe-check .pipe-n b { color: #fff; }
.pipe-check ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.pipe-check li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 6px; }
.pipe-check li::before { content: "✓"; color: var(--sun); font-weight: 700; }
.pipe-check li b { color: #fff; font-weight: 400; }
.pipe-check .pipe-q { color: rgba(244, 240, 234, .5); }

/* Arrows between the steps, desktop only — on a phone the steps stack and the
   numbers carry the order. */
.pipe-step:not(:last-child)::after,
.pipe-check::after {
  content: "→";
  position: absolute;
  right: calc(-1 * clamp(14px, 2.4vw, 30px) / 2);
  top: 50%;
  transform: translate(50%, -50%);
  font-family: var(--mono);
  font-size: 1.1rem;
  color: var(--ink-3);
}
.pipe-check { position: relative; }

/* engine-note is authored for night; this one sits on canvas. */
.sec-canvas .engine-note {
  border-color: var(--line);
  background: #fff;
}
.sec-canvas .engine-note p { color: var(--ink-2); }
.sec-canvas .engine-note strong { color: var(--ink); }

/* ── Slides rail: small print under it ─────────────────────────────────── */
.fine-print {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .04em;
  line-height: 1.6;
  color: var(--on-night-3);
  max-width: 70ch;
}

/* ── Month six: the profile, built from the tiles ──────────────────────
   HTML instead of a generated screenshot: the grid is made of the exact frames
   the visitor just scrolled past, so the payoff is visibly the same account,
   and the text stays crisp at any density. */
.m6 {
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  margin-top: 46px;
}
.igp {
  margin: 0;
  border-radius: 26px;
  overflow: hidden;
  background: #fff;
  color: #111;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .55);
  border: 1px solid rgba(255, 255, 255, .08);
}
.igp-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 6px;
  font-weight: 700;
  font-size: .98rem;
  letter-spacing: -.01em;
}
.igp-top span:last-child { font-size: 1.2rem; letter-spacing: .1em; line-height: 1; }
.igp-head {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 10px 16px 0;
}
.igp-avatar {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7);
}
.igp-avatar i {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--sun);
  border: 3px solid #fff;
}
.igp-avatar svg { width: 34px; height: 34px; }
.igp-stats { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.igp-stats b { display: block; font-size: 1.02rem; font-weight: 700; line-height: 1.2; }
.igp-stats span { font-size: .76rem; color: #444; }
.igp-bio { padding: 12px 16px 0; font-size: .84rem; line-height: 1.42; }
.igp-bio b { display: block; font-weight: 700; }
.igp-bio a { color: #00376b; font-weight: 600; }
.igp-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 12px 16px 14px; }
.igp-btns span {
  padding: 7px 0;
  border-radius: 8px;
  text-align: center;
  font-size: .82rem;
  font-weight: 600;
  background: #efefef;
}
.igp-btns span:first-child { background: #0095f6; color: #fff; }
.igp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.igp-grid img {
  display: block;
  width: 100%;
  height: auto;
  /* Instagram's profile grid went 3:4 in 2025. */
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top;
}
.m6-cap {
  margin-top: 16px;
  text-align: center;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .05em;
  color: var(--on-night-3);
}

.wk {
  border: 1px solid var(--night-line);
  border-radius: 16px;
  background: var(--night-2);
  overflow: hidden;
}
.wk-head {
  display: flex;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--night-line);
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--on-night-3);
}
.wk ol { list-style: none; margin: 0; padding: 0; }
.wk li {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--night-line);
  font-family: var(--mono);
  font-size: .78rem;
}
.wk li:last-child { border-bottom: 0; }
.wk-when { color: var(--on-night); font-weight: 700; }
.wk-what { color: var(--on-night-2); }
.wk-what b { color: var(--sun); font-weight: 400; }
.m6-side .h3 {
  margin-top: 28px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--on-night);
}

/* ── Finale: the ask, in the account's serif ─────────────────────────── */
/* Wider than emotional.css's 780px so "AI runs Instagram now." holds one line. */
.finale-inner { max-width: 940px; }
.finale-h2 em {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.02em;
  font-size: 1.1em;
  color: var(--sun);
}

/* ── Footer credits ──────────────────────────────────────────────────── */
.credits {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gut) 26px;
  font-family: var(--mono);
  font-size: .64rem;
  line-height: 1.7;
  letter-spacing: .02em;
  color: var(--on-night-3);
}
.credits a { color: var(--on-night-2); border-bottom: 1px solid var(--night-line); }
.credits a:hover { color: var(--on-night); }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1040px) {
  .m6 { grid-template-columns: 1fr; justify-items: center; }
  .m6 .igp-wrap { width: 100%; max-width: 400px; }
  .m6-side { width: 100%; max-width: 560px; }
}

@media (max-width: 900px) {
  /* Phones get the portrait render, and the photo gets the top of the screen
     to itself. Laid over the copy it was just texture behind a paragraph;
     given its own 62svh it is the thing you look at first, which is the point.
     The copy then rides up onto the photo's faded bottom edge. */
  .hero.hx { min-height: 0; }
  .hx-bg { position: relative; height: 62svh; min-height: 380px; }
  .hx-bg img { object-position: 50% 42%; }
  .hx-shade {
    bottom: auto;
    height: 62svh;
    min-height: 380px;
    background:
      linear-gradient(to bottom, rgba(12, 11, 10, .55) 0%, transparent 20%, transparent 58%, var(--night) 100%);
  }
  .hx-inner { min-height: 0; margin-top: -86px; padding: 0 var(--gut) 52px; }
  .hx-tag { top: 84px; bottom: auto; right: var(--gut); }

  .guess { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guess-card::after { opacity: 1; transform: translate(-50%, 0); bottom: 10px; }

  .pipe { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .pipe-check { grid-column: 1 / -1; order: 3; }
  .pipe-step:not(:last-child)::after, .pipe-check::after { display: none; }
}

@media (max-width: 640px) {
  .hx-h1 { font-size: clamp(2.6rem, 13vw, 3.4rem); }
  .hx .hero-actions { flex-direction: column; align-items: stretch; }
  .hx .hero-actions a { justify-content: center; }
  .guess { gap: 10px; }
  .guess-verdict { padding: 26px 9px 9px; font-size: .58rem; }
  .wk li { grid-template-columns: 86px minmax(0, 1fr); font-size: .72rem; padding: 12px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .hx-bg img, .hx-tag-a, .hx-tag-b { animation: none; }
  .hx-tag-b { display: none; }
}