:root{
  --bg:        #17140F;
  --bg-soft:   #211C15;
  --ink:       #F2E9D8;
  --ink-dim:   #B8AC94;
  --ink-faint: #7C725D;
  --accent:    #D98F3B;
  --accent-2:  #F0B267;
  --brass:     #8A7A5C;
  --teal:      #4A6B68;
  --line:      rgba(242,233,216,0.12);

  --serif: 'Fraunces', serif;
  --sans:  'Inter', sans-serif;
  --mono:  'IBM Plex Mono', monospace;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ background:var(--bg); color:var(--ink); font-family:var(--sans); line-height:1.5; overflow-x:hidden; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* ---------- rails + counter ---------- */
.rail{
  position:fixed; top:0; bottom:0; width:22px; z-index:40;
  background-image: radial-gradient(circle at 11px 14px, var(--bg) 5px, transparent 5.5px);
  background-size: 22px 34px; background-repeat: repeat-y; background-color: var(--bg-soft); background-position: center;
}
.rail-left{ left:0; border-right:1px solid var(--line); }
.rail-right{ right:0; border-left:1px solid var(--line); }
@media (max-width:760px){ .rail{ display:none; } }

.frame{ margin-left:22px; margin-right:22px; }
@media (max-width:760px){ .frame{ margin-left:0; margin-right:0; } }

.counter{
  position:fixed; right:34px; bottom:22px; z-index:50;
  font-family:var(--mono); font-size:12px; letter-spacing:0.08em; color:var(--ink-dim);
  background:rgba(23,20,15,0.7); border:1px solid var(--line); padding:8px 12px; backdrop-filter:blur(6px);
  display:flex; align-items:center; gap:8px;
}
.counter b{ color:var(--accent-2); font-weight:500; }
@media (max-width:760px){ .counter{ right:14px; bottom:14px; font-size:11px; padding:6px 10px; } }

/* ---------- header / nav ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:45;
  display:flex; justify-content:space-between; align-items:center; padding:22px 46px; mix-blend-mode:difference;
}
@media (max-width:760px){ header{ padding:18px 22px; } }
.logo{ font-family:var(--serif); font-size:19px; font-weight:600; letter-spacing:0.01em; }
nav{ display:flex; gap:26px; font-family:var(--mono); font-size:12px; letter-spacing:0.06em; text-transform:uppercase; }
nav a{ opacity:0.75; transition:opacity .2s; }
nav a:hover{ opacity:1; }
nav a[aria-current="page"]{ opacity:1; color:var(--accent-2); }
@media (max-width:680px){ nav{ display:none; } }

/* ---------- hero ---------- */
.hero{ min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; position:relative; padding:0 46px 64px; }
.hero.hero-short{ min-height:66svh; }
@media (max-width:760px){ .hero{ padding:0 22px 44px; } }
.hero-bg{ position:absolute; inset:0; z-index:-1; overflow:hidden; }
.hero-bg .img{
  width:100%; height:100%;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(217,143,59,0.28), transparent 55%),
    radial-gradient(ellipse at 75% 80%, rgba(74,107,104,0.35), transparent 55%),
    linear-gradient(160deg, #2b2416 0%, #1a1610 60%, #100d09 100%);
  transform:scale(1.12) translateY(var(--parallax, 0px));
  will-change:transform;
}
.hero-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(23,20,15,0.15) 0%, rgba(23,20,15,0.85) 100%); }
.hero-tag{ font-family:var(--mono); font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent-2); margin-bottom:18px; display:flex; align-items:center; gap:10px; }
.hero-tag::before{ content:""; width:26px; height:1px; background:var(--accent); display:inline-block; }
h1.hero-title{ font-family:var(--serif); font-weight:600; font-size:clamp(38px, 6.5vw, 92px); line-height:0.98; letter-spacing:-0.01em; max-width:16ch; }
h1.hero-title em{ font-style:italic; font-weight:300; color:var(--accent-2); }
.hero-sub{ max-width:46ch; margin-top:22px; color:var(--ink-dim); font-size:16px; line-height:1.65; }
.hero-actions{ display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; }
.btn{ font-family:var(--mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase; padding:14px 22px; border:1px solid var(--line); transition:all .25s ease; display:inline-block; }
.btn-solid{ background:var(--accent); color:#17140F; border-color:var(--accent); }
.btn-solid:hover{ background:var(--accent-2); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent-2); }

.scroll-cue{ position:absolute; bottom:24px; right:46px; font-family:var(--mono); font-size:11px; color:var(--ink-faint); letter-spacing:0.1em; writing-mode:vertical-rl; display:flex; align-items:center; gap:10px; }
.scroll-cue::after{ content:""; width:1px; height:40px; background:var(--ink-faint); }
@media (max-width:760px){ .scroll-cue{ display:none; } }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(36px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:translateY(0); }

/* ---------- intro line ---------- */
.intro{ padding:100px 46px 30px; }
@media (max-width:760px){ .intro{ padding:76px 22px 10px; } }
.intro p{ font-family:var(--serif); font-weight:450; font-size:clamp(19px,2.4vw,28px); line-height:1.5; max-width:38ch; color:var(--ink-dim); }
.intro p b{ color:var(--ink); font-weight:600; }

/* ---------- section head ---------- */
.section-head{ padding:96px 46px 40px; }
@media (max-width:760px){ .section-head{ padding:64px 22px 30px; } }
.eyebrow{ font-family:var(--mono); font-size:12px; letter-spacing:0.12em; color:var(--brass); text-transform:uppercase; margin-bottom:14px; }
.section-title{ font-family:var(--serif); font-size:clamp(26px,3.6vw,46px); font-weight:600; max-width:22ch; }
.section-desc{ color:var(--ink-dim); max-width:56ch; margin-top:16px; font-size:15px; }

/* ---------- work items (side-by-side reveal frames) ---------- */
.work{ padding:0 46px 40px; display:flex; flex-direction:column; gap:120px; }
@media (max-width:760px){ .work{ padding:0 22px 20px; gap:80px; } }
.work-item{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:56px; align-items:center; }
.work-item:nth-child(even){ direction:rtl; }
.work-item:nth-child(even) > *{ direction:ltr; }
@media (max-width:900px){ .work-item, .work-item:nth-child(even){ direction:ltr; grid-template-columns:1fr; gap:26px; } }

.work-media{ position:relative; aspect-ratio:4/5; overflow:hidden; clip-path:inset(0); }
.work-media .swatch{ position:absolute; inset:0; transition:transform 1.4s cubic-bezier(.16,.8,.24,1); transform:scale(1.18); }
.work-item.in .work-media .swatch{ transform:scale(1); }
.work-media .frame-no{ position:absolute; top:16px; left:16px; z-index:2; font-family:var(--mono); font-size:11px; color:var(--ink); background:rgba(23,20,15,0.55); border:1px solid var(--line); padding:5px 9px; letter-spacing:0.08em; backdrop-filter:blur(4px); }
.work-media .frame-tag{ position:absolute; bottom:16px; right:16px; z-index:2; font-family:var(--mono); font-size:11px; color:var(--accent-2); letter-spacing:0.06em; }

.work-body .kicker{ font-family:var(--mono); font-size:11px; color:var(--teal); letter-spacing:0.08em; text-transform:uppercase; margin-bottom:12px; }
.work-body h3{ font-family:var(--serif); font-size:clamp(22px,2.8vw,32px); font-weight:600; margin-bottom:14px; }
.work-body p{ color:var(--ink-dim); font-size:15px; max-width:42ch; }

.swatch-1{ background:linear-gradient(155deg,#3a2c1b,#1a1611 70%), radial-gradient(circle at 70% 30%, rgba(217,143,59,0.4), transparent 60%); }
.swatch-2{ background:linear-gradient(155deg,#28353a,#151d1c 70%), radial-gradient(circle at 30% 70%, rgba(74,107,104,0.5), transparent 60%); }
.swatch-3{ background:linear-gradient(155deg,#3a2417,#1c130d 70%), radial-gradient(circle at 60% 60%, rgba(240,178,103,0.35), transparent 60%); }
.swatch-4{ background:linear-gradient(155deg,#332a3a,#17131c 70%), radial-gradient(circle at 40% 40%, rgba(138,122,92,0.35), transparent 60%); }
.swatch-5{ background:linear-gradient(155deg,#2c3320,#14170e 70%), radial-gradient(circle at 55% 45%, rgba(74,107,104,0.3), transparent 60%); }
.swatch-6{ background:linear-gradient(155deg,#3a2a2c,#1b1112 70%), radial-gradient(circle at 45% 55%, rgba(217,143,59,0.3), transparent 60%); }

/* ---------- generic card grid (facts, series meta) ---------- */
.card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.card-grid.cols-2{ grid-template-columns:repeat(2,1fr); }
.card-grid.cols-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:700px){ .card-grid, .card-grid.cols-2, .card-grid.cols-4{ grid-template-columns:1fr; } }
.card{ background:var(--bg); padding:36px; }
.card .num{ font-family:var(--mono); color:var(--accent); font-size:13px; margin-bottom:16px; letter-spacing:0.06em; }
.card h4{ font-family:var(--serif); font-size:19px; font-weight:600; margin-bottom:10px; }
.card p{ color:var(--ink-dim); font-size:14.5px; }

/* ---------- note / quote ---------- */
.note{ padding:110px 46px; text-align:center; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-soft); }
@media (max-width:760px){ .note{ padding:76px 22px; } }
.note blockquote{ font-family:var(--serif); font-weight:450; font-style:italic; font-size:clamp(21px,3.2vw,32px); max-width:34ch; margin:0 auto 24px; line-height:1.35; color:var(--ink); }
.note cite{ font-family:var(--mono); font-size:12px; color:var(--ink-dim); font-style:normal; letter-spacing:0.05em; }

/* ---------- cta ---------- */
.cta{ padding:130px 46px; text-align:center; }
@media (max-width:760px){ .cta{ padding:84px 22px; } }
.cta .eyebrow{ justify-content:center; display:flex; }
.cta h2{ font-family:var(--serif); font-size:clamp(30px,5vw,56px); font-weight:600; max-width:18ch; margin:0 auto 28px; }
.cta p{ color:var(--ink-dim); max-width:44ch; margin:0 auto 36px; }

/* ---------- footer ---------- */
footer{ padding:46px; display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px; font-family:var(--mono); font-size:12px; color:var(--ink-faint); letter-spacing:0.03em; }
@media (max-width:760px){ footer{ padding:26px 22px; } }
footer .foot-links{ display:flex; gap:18px; }
footer a:hover{ color:var(--accent-2); }

/* --- Flip card for Favs --- */
.flip-card {
  perspective: 1200px;
  cursor: pointer;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transform-style: preserve-3d;
}

.flip-card.is-flipped .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.flip-card-front img {
  width: 100%;
  height: 100%;
  display: block;
}

.flip-card-back {
  transform: rotateY(180deg);
  background: var(--charcoal, #1c1a17);
  color: var(--cream, #f2ead9);
  border: 1px solid var(--amber, #c98a4b);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  text-align: center;
}

.flip-card-back p {
  font-family: var(--font-serif, serif);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--amber, #c98a4b);
  letter-spacing: 0.01em;
}

/* subtle hint so users know it's interactive */
.flip-card::after {
  content: "";
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amber, #c98a4b);
  opacity: 0.5;
  pointer-events: none;
}

.flip-card.is-flipped::after {
  opacity: 0;
}