/* ============================================================
   Tryst — shared design system (Ive-directed redesign)
   Warm-dark + paper · terracotta-rose accent · serif leads emotion.
   Imported by the homepage, Discover directory, and date pages.
   ============================================================ */

:root {
  /* CORAL ON NEAR-BLACK — matches the homepage + the iOS app. One system across
     the whole site: near-black surfaces, warm-white ink, hot-coral accent. */
  --bg:        #0a0708;   /* near-black (matches homepage) */
  --bg-2:      #141012;   /* raised surface / cards */
  --shadow:    rgba(0,0,0,0.6);

  /* "paper" tokens = a slightly-raised DARK surface (kept dark for cohesion;
     names retained so existing rules don't break). */
  --paper:     #141012;
  --paper-2:   #1b1518;
  --ink-paper:      #F5EFEF;   /* now: ink on a dark card */
  --ink-paper-soft: #C7BCBE;
  --hair-paper:     rgba(255,255,255,0.09);
  --plinth:    #141012;   /* raised dark band (cards/panels) */

  /* Ink (warm white on near-black) */
  --ink:       #F5EFEF;   /* primary */
  --ink-soft:  #C7BCBE;   /* body / secondary */
  --ink-mute:  #8E8186;   /* captions, labels, metadata */
  --ink-faint: #5c5256;   /* faint structure, placeholders */

  /* Accent — hot coral (matches homepage + app). */
  --accent:      #FF3B5C;
  --accent-glow: #FF6079;
  --accent-deep: #D62B49;

  /* Hairlines (on near-black) */
  --hair:        rgba(255,255,255,0.09);
  --hair-strong: rgba(255,255,255,0.16);

  --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --sans:  'DM Sans', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --ease:  cubic-bezier(0.16, 1, 0.3, 1);
  --maxw:  920px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px; line-height: 1.6; font-weight: 400;
  color: var(--ink-soft);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--accent); color: var(--ink); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* Ambient warmth — a single low candle-glow, not a light show. */
body.t-dark::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1100px 640px at 82% -10%, rgba(255,59,92,0.07), transparent 60%),
    radial-gradient(900px 520px at 4% 108%, rgba(255,59,92,0.045), transparent 60%);
}

.t-container { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; position: relative; z-index: 1; }
.t-narrow { max-width: 640px; }

/* --- Type --- serif LEADS emotion, sans CARRIES information --- */
.t-display {
  font-family: var(--serif); font-weight: 400; color: var(--ink);
  font-size: clamp(2.6rem, 7vw, 5rem); line-height: 1.04; letter-spacing: -0.02em;
}
.t-title {
  font-family: var(--serif); font-weight: 400; color: var(--ink);
  font-size: clamp(2rem, 5.5vw, 3.3rem); line-height: 1.06; letter-spacing: -0.02em;
}
/* The signature move: the fit line, serif italic, exhaling space above it. */
.t-fit {
  font-family: var(--serif); font-style: italic; color: var(--accent-glow);
  font-size: clamp(1.35rem, 3.2vw, 1.7rem); line-height: 1.3;
}
.t-eyebrow {
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute);
}
.t-lede { font-size: 18px; line-height: 1.65; color: var(--ink-soft); max-width: 56ch; }

/* --- Wordmark + header --- */
.t-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 18px 0;
  transition: background .4s var(--ease), backdrop-filter .4s, box-shadow .4s;
}
.t-header.scrolled {
  background: rgba(10,7,8,0.85);
  backdrop-filter: blur(22px) saturate(1.1); -webkit-backdrop-filter: blur(22px) saturate(1.1);
  box-shadow: 0 1px 0 var(--hair);
}
.t-header-inner { display: flex; align-items: center; justify-content: space-between; max-width: 1180px; margin: 0 auto; padding: 0 28px; }
/* Block coral "Tryst" — matches the homepage exactly (not italic + heart). */
.t-wordmark { font-family: var(--serif); font-style: normal; font-weight: 700; font-size: 30px; color: var(--accent); letter-spacing: -0.01em; text-transform: capitalize; }
.t-wordmark .heart { display: none; }
.t-nav { display: flex; align-items: center; gap: 32px; }
.t-nav > a:not(.t-nav-cta) { font-size: 15px; font-weight: 500; color: var(--ink-soft); transition: color .2s; }
.t-nav > a:not(.t-nav-cta):hover { color: var(--ink); }
/* Filled coral pill CTA — matches the homepage. */
.t-nav-cta {
  font-size: 14px; font-weight: 600; letter-spacing: 0.01em;
  color: #fff; background: var(--accent); padding: 11px 22px; border: 0; border-radius: 100px;
  box-shadow: 0 4px 24px rgba(255,59,92,0.3);
  transition: transform .2s, box-shadow .3s;
}
.t-nav-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 34px rgba(255,59,92,0.45); }

/* --- Buttons --- the accent appears once; this is it --- */
.t-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--sans); font-weight: 600; font-size: 16px;
  padding: 16px 34px; border-radius: 100px; border: none; cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .3s; text-decoration: none;
}
.t-btn:active { transform: scale(0.98); }
.t-btn-primary { background: var(--accent); color: #FBF6EF; box-shadow: 0 6px 30px rgba(255,59,92,0.28), 0 1px 3px rgba(28,23,20,0.12); }
.t-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 44px rgba(255,59,92,0.4); }
.t-btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--hair); }
.t-btn-ghost:hover { border-color: var(--ink-mute); }
.t-btn-large { font-size: 18px; padding: 18px 42px; }

/* --- Footer --- */
.t-footer { position: relative; z-index: 1; padding: 64px 0 56px; border-top: 1px solid var(--hair); margin-top: 64px; }
.t-footer-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.t-footer-tag { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--ink-mute); opacity: 0.6; }
.t-footer-links { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; }
.t-footer-links a { font-size: 13px; color: var(--ink-mute); opacity: 0.6; transition: opacity .2s, color .2s; }
.t-footer-links a:hover { opacity: 1; color: var(--ink); }
.t-footer-copy { font-size: 11px; color: var(--ink-faint); }

/* --- Paper card (used when a real photo isn't available — restraint, not missing) --- */
.t-paper-card {
  background: linear-gradient(160deg, var(--paper) 0%, var(--paper-2) 100%);
  color: var(--ink-paper);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 22px; border-radius: 16px;
}
.t-paper-card .pc-name { font-family: var(--serif); font-size: 26px; line-height: 1.08; color: var(--ink-paper); }
.t-paper-card .pc-fit { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--accent-deep); margin-top: 8px; }

/* --- Reveal on load --- */
.t-reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.t-reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .t-reveal { opacity: 1; transform: none; transition: none; } }

@media (max-width: 640px) {
  .t-nav > a:not(.t-nav-cta) { display: none; }
  .t-header { padding: 12px 0; }
  .t-header-inner { padding: 0 16px; }
  .t-wordmark { font-size: 22px; }
  .t-nav-cta { padding: 8px 14px; font-size: 12px; white-space: nowrap; }
  /* prevent any section from forcing horizontal scroll on phones */
  .t-container { padding: 0 18px; }
}
html, body { overflow-x: hidden; max-width: 100%; }

/* --- Screenshot in a warm bezel (Ive): a dark app screen becomes an OBJECT
   resting on the paper page, lit from above. Never float dark UI naked on paper. --- */
.t-shot {
  background: var(--bg-2); padding: 10px; border: 1px solid var(--hair);
  border-radius: 30px; box-shadow: 0 24px 60px -20px var(--shadow);
}
.t-shot img { width: 100%; display: block; border-radius: 22px; }
/* A dark plinth band — for dramatising screenshots: dark device on dark plinth,
   paper above and below, so the contrast reads as intentional. */
.t-plinth { background: var(--plinth); border-radius: 28px; }
.t-plinth .t-eyebrow { color: var(--ink-mute); }
.t-plinth h2, .t-plinth h3 { color: var(--ink); }
.t-plinth p { color: var(--ink-soft); }