/* ==========================================================================
   rustrum.com — shared site styles
   Extracted from the homepage so every page draws from one source:
   tokens, fonts, header/footer, buttons, cards, kickers, annotations,
   blobs and the photo treatment.
   Load this AFTER a page's own inline <style> so these rules win ties.
   ========================================================================== */

/* ----- Tokens ----- */
:root {
  --coral: #E8613D;
  --teal: #2F8F83;
  --golden: #F2B33D;
  --golden-ink: #B07C1B;
  --charcoal: #33302A;
  --cream: #FBF3DC;
  --cream-dark: #F5EBCE;
  --paper: #FFFDF6;
  --muted: #8f8672;
  --ink-soft: #5f584c;
  --border: rgba(51, 48, 42, 0.15);

  --font-sans: 'DM Sans', system-ui, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-hand: 'Patrick Hand', cursive;

  --radius-card: 24px;
  --shadow-card: 0 20px 50px rgba(51, 48, 42, 0.10);
}

/* ----- Fonts (self-hosted) ----- */
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 300 700; font-display: swap; src: url("/fonts/dm-sans-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 300 700; font-display: swap; src: url("/fonts/dm-sans-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'DM Sans'; font-style: italic; font-weight: 300 700; font-display: swap; src: url("/fonts/dm-sans-italic-latin.woff2") format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/instrument-serif-latin.woff2") format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/instrument-serif-italic-latin.woff2") format('woff2'); }
@font-face { font-family: 'Patrick Hand'; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/patrick-hand-latin.woff2") format('woff2'); }

/* ----- Base ----- */
html { scroll-behavior: smooth; }
body {
  background: var(--cream);
  color: var(--charcoal);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--golden); color: var(--charcoal); }

/* ----- Site header (top variant for inner pages) ----- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px clamp(20px, 4vw, 52px);
  background: linear-gradient(to bottom, var(--cream) 72%, rgba(251, 243, 220, 0));
}
.site-header .logo {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 28px;
  line-height: 1;
  color: var(--charcoal);
  text-decoration: none;
  flex-shrink: 0;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.2vw, 28px);
  font-size: 14px;
  font-weight: 500;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.site-nav::-webkit-scrollbar { display: none; }
.site-nav a {
  color: var(--charcoal);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] { color: var(--coral); }
.site-nav .nav-cta {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 16px;
  border: 1.5px solid var(--charcoal);
  background: var(--charcoal);
  color: var(--cream);
  transition: all 0.2s;
}
.site-nav .nav-cta:hover { background: var(--coral); border-color: var(--coral); color: var(--cream); transform: translateY(-2px); }
.site-header + main,
main.has-site-header { padding-top: 84px; }

/* ----- Footer ----- */
.site-footer {
  padding: 32px clamp(20px, 5vw, 52px);
  text-align: center;
  font-size: 14px;
  color: var(--muted);
  border-top: 1px solid var(--border);
}
.site-footer a { color: inherit; text-decoration: none; transition: color 0.2s; }
.site-footer a:hover { color: var(--coral); }

/* ----- Type helpers ----- */
.kicker {
  font-family: var(--font-hand);
  font-size: 19px;
  color: var(--coral);
  margin-bottom: 10px;
}
.section-title,
.display {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.section-title { font-size: clamp(36px, 5vw, 56px); }
.display { font-size: clamp(44px, 7vw, 84px); }
.lede { font-size: 17px; line-height: 1.7; color: var(--muted); }

/* Handwritten aside with a little arrow (place the svg before or after the span) */
.annotation {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--font-hand);
  font-size: 16px;
  color: var(--muted);
}
.annotation svg { flex-shrink: 0; width: 32px; height: 24px; }

/* ----- Buttons ----- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 20px;
  border: 1.5px solid var(--charcoal);
  background: transparent;
  color: var(--charcoal);
  font: 500 14px/1 var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s;
}
.btn:hover { background: var(--charcoal); color: var(--cream); transform: translateY(-2px); }
.btn-fill { background: var(--charcoal); color: var(--cream); }
.btn-fill:hover { background: var(--coral); border-color: var(--coral); }
.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 32px;
  border: none;
  border-radius: 999px;
  background: var(--coral);
  color: var(--cream);
  font: 600 15px/1 var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-pill:hover { background: var(--teal); transform: translateY(-2px); }
.text-link { font-size: 14px; font-weight: 600; color: var(--coral); text-decoration: none; transition: color 0.2s; }
.text-link:hover { color: var(--teal); }

/* ----- Cards ----- */
.s-card {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}
.s-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-card); }
.s-card-body { padding: 20px 20px 22px; }
.s-tag {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.s-tag-ai { background: rgba(47, 143, 131, 0.12); color: var(--teal); }
.s-tag-community { background: rgba(232, 97, 61, 0.12); color: var(--coral); }
.s-tag-writing { background: rgba(242, 179, 61, 0.15); color: var(--golden-ink); }

/* ----- Photo treatment: softened colour + warm wash + film grain ----- */
.s-photo {
  position: relative;
  overflow: hidden;
  background: var(--cream-dark);
}
.s-photo > img,
.s-photo > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.7) sepia(0.22) contrast(0.94) brightness(1.03);
  transition: transform 0.4s, filter 0.4s;
}
.s-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(160deg, rgba(251, 243, 220, 0.35), rgba(232, 97, 61, 0.22));
  mix-blend-mode: multiply;
}
.s-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.28;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.2 0 0 0 0 0.19 0 0 0 0 0.16 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
.s-photo:hover > img,
.s-photo:hover > video { filter: saturate(0.85) sepia(0.12) contrast(0.96) brightness(1.03); }

/* ----- Blobs (decorative, absolutely positioned inside a relative parent) ----- */
.blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.6;
  z-index: 0;
}
.blob.coral  { background: var(--coral); }
.blob.teal   { background: var(--teal); }
.blob.golden { background: var(--golden); }
.blob.sm { width: 60px;  height: 60px; }
.blob.md { width: 100px; height: 100px; }
.blob.lg { width: 160px; height: 160px; }
.blob.xl { width: 220px; height: 220px; }
.blob.squish { border-radius: 60% 40% 50% 70% / 50% 60% 40% 50%; }
.blob.soft { filter: blur(30px); opacity: 0.4; }
@keyframes float-object { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.animate-float { animation: float-object 4s ease-in-out infinite; }

/* ----- Responsive / motion ----- */
@media (max-width: 900px) {
  .site-header { padding: 12px 16px; gap: 14px; }
  .site-header .logo { font-size: 24px; }
  .site-nav { font-size: 13px; gap: 14px; }
  .site-nav .nav-cta { height: 34px; padding: 0 12px; }
  .site-header + main, main.has-site-header { padding-top: 72px; }
  .blob { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .animate-float, .s-card, .btn, .btn-pill { animation: none !important; transition: none !important; }
}