@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400;0,600;1,400&display=swap');

:root{
  /* Neutral near-black field to match the monochrome FG logo (no purple cast). */
  --bg: hsl(240 6% 5%);
  --fg: hsl(40 30% 96%);          /* warm ivory */

  /* "Primary" is the ivory used for solid CTAs (white-on-black, like the logo).
     The single brand accent is a restrained champagne gold. */
  --primary: hsl(40 30% 96%);
  --accent: #d9b85c;             /* champagne gold (217 184 92) */
  --secondary: #c79a3f;          /* deeper gold, for blog gradients/links */

  /* Space-separated RGB channels for translucent fills via
     `rgb(var(--accent-rgb) / .12)`. Ivory + gold only — purple retired. */
  --primary-rgb: 245 241 232;
  --accent-rgb: 217 184 92;

  --card: hsl(240 5% 10%);
  --muted: hsl(240 4% 18%);
  --muted-fg: hsl(40 8% 72%);

  --border: hsl(240 4% 22%);
  --radius: 14px;

  --font-display: 'Cinzel', serif;
  --font-body: 'Inter', sans-serif;
  --font-serif: 'Playfair Display', serif;

  --shadow: 0 20px 60px rgba(0,0,0,.45);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
a:hover{ text-decoration: none; }
strong{ color: var(--accent); }

::selection{ background: rgba(217, 184, 92, .25); }

/* layout */
.container{ width: min(1100px, calc(100% - 32px)); margin: 0 auto; }
.container.narrow{ width: min(820px, calc(100% - 32px)); }
.page{ padding: 120px 0 80px; }
.center{ text-align:center; }
.maxw{ max-width: 640px; margin-left:auto; margin-right:auto; }
.stack > * + *{ margin-top: 16px; }
.stack-lg > * + *{ margin-top: 22px; }
.pt{ padding-top: 12px; }
.right{ display:flex; justify-content:flex-end; }

/* nav */
.nav{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 50;
  background: rgba(11, 11, 13, .6);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav-inner{
  width: min(1100px, calc(100% - 32px));
  margin: 0 auto;
  height: 72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brand{
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  letter-spacing: .08em;
  font-weight: 700;
}
/* FG monogram mark (white-on-transparent) standing in for the wordmark. */
.brand-mark{
  height: 30px;
  width: auto;
  opacity: .95;
  transition: opacity .15s ease;
}
.brand:hover .brand-mark{ opacity: 1; }
.nav-links{ display:flex; gap: 18px; align-items:center; }

/* ✅ Make logout form inline so it behaves like a link */
.nav-links form{
  display: inline;
  margin: 0;
  padding: 0;
}

/* ✅ Style both <a> and <button> the same in the nav */
.nav-links a,
.nav-links button{
  color: rgba(255,255,255,.78);
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
}

.nav-links a:hover,
.nav-links button:hover{
  color: var(--accent);
  text-decoration: none;
}

/* CTA pill (used for Contact): works for <a> or <button> */
.nav-cta{
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
}

/* Ensure CTA pill styling applies if you ever render it as a button */
.nav-links button.nav-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Hamburger toggle — hidden until the mobile breakpoint. */
.nav-toggle{ display: none; }

@media (max-width: 760px){
  /* Home hero centers itself in 90vh, so the generic .page top padding
     just stacks an empty gap above it on load. Drop it and tighten the hero. */
  .page-home{ padding-top: 0; }
  .page-home .hero{ min-height: 80vh; }

  .nav-toggle{
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 42px; height: 42px; padding: 9px; background: none; border: 0;
    border-radius: 10px; cursor: pointer;
  }
  .nav-toggle:hover{ background: rgba(255,255,255,.06); }
  .nav-toggle span{
    display: block; width: 100%; height: 2px; border-radius: 2px;
    background: rgba(255,255,255,.85);
    transition: transform .2s ease, opacity .2s ease;
  }
  .nav-toggle.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity: 0; }
  .nav-toggle.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

  /* Links collapse into a full-width dropdown panel below the bar. */
  .nav-links{
    position: absolute; left: 0; right: 0; top: 72px;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(11, 11, 13, .98);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,.08);
    max-height: 0; overflow: hidden;
    transition: max-height .28s ease;
  }
  .nav-links.open{ max-height: 85vh; overflow: auto; }
  .nav-links > a,
  .nav-links > form{ width: 100%; border-top: 1px solid rgba(255,255,255,.05); }
  .nav-links > a{ padding: 15px 20px; }
  .nav-links > form{ display: block; margin: 0; }
  .nav-links > form button{ width: 100%; text-align: left; padding: 15px 20px; }
  .nav-links .nav-cta{
    border-radius: 0; border: 0;
    background: rgba(217,184,92,.12); color: var(--accent);
  }
}

/* footer */
.footer{
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 28px 0;
}
.footer-inner{
  width: min(1100px, calc(100% - 32px));
  margin: 0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 18px;
  flex-wrap: wrap;
}
.footer-logo{
  height: 46px;
  width: auto;
  opacity: .82;
}
.footer-meta{
  display:flex;
  flex-direction:column;
  gap: 4px;
  text-align:right;
}
@media (max-width: 760px){
  .footer-inner{ flex-direction: column; align-items:flex-start; gap: 14px; }
  .footer-meta{ text-align:left; }
}

/* type */
.h1, .h2, .post-title{
  font-family: var(--font-display);
  letter-spacing: .04em;
  margin: 0 0 12px;
}
.h1{ font-size: clamp(38px, 5vw, 64px); }
.h2{ font-size: clamp(26px, 3vw, 36px); }
.lead{ font-size: 18px; color: rgba(255,255,255,.72); margin: 0; }
.serif{ font-family: var(--font-serif); font-style: italic; }
.muted{ color: rgba(255,255,255,.68); }
.meta{ font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.accent{ color: var(--accent); }

.text-glow{ text-shadow: 0 0 18px rgba(217,184,92,.22); }
/* Single accent word inside an otherwise ivory title (kept class name for markup). */
.gradient-text{ color: var(--accent); }
.accent-serif{ font-family: var(--font-serif); font-style: normal; }

/* hero */
.hero{
  position: relative;
  min-height: 90vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding: 0 16px;
}
.hero-bg{ position:absolute; inset:0; pointer-events:none; }
.glow{
  position:absolute;
  border-radius: 9999px;
  filter: blur(100px);
}
.glow-a{ width: 380px; height: 380px; left: 20%; top: 20%; background: rgba(255,255,255,.05); animation: pulse 3.5s ease-in-out infinite; }
.glow-b{ width: 280px; height: 280px; right: 18%; bottom: 18%; background: rgba(217,184,92,.08); }

@keyframes pulse{
  0%,100%{ transform: scale(1); opacity: .85; }
  50%{ transform: scale(1.12); opacity: 1; }
}

.hero-inner{ position: relative; z-index: 2; text-align:center; }
.badge{
  display:inline-flex;
  gap: 10px;
  align-items:center;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--accent);
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 22px;
}
.hero-title{
  font-family: var(--font-display);
  font-size: clamp(44px, 6vw, 86px);
  line-height: 1.02;
  margin: 0 0 18px;
}
.hero-sub{
  font-size: 18px;
  color: rgba(255,255,255,.72);
  max-width: 760px;
  margin: 0 auto 26px;
  font-family: var(--font-serif);
  font-style: italic;
}
.hero-actions{
  display:flex;
  justify-content:center;
  gap: 12px;
  flex-wrap: wrap;
}

/* buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
  font-weight: 700;
}
.btn:hover{ transform: translateY(-1px); }
.btn-primary{
  background: var(--primary);
  border-color: rgba(0,0,0,.0);
  box-shadow: 0 16px 38px rgba(0,0,0,.45);
  color: var(--bg);
}
.btn-primary:hover{ filter: brightness(1.06); box-shadow: 0 18px 44px rgba(217,184,92,.18); }
.btn-ghost:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(217,184,92,.35);
  color: var(--accent);
}
.w-full{ width:100%; }

/* scroll indicator */
.scroll-indicator{
  position:absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  opacity: .75;
}
.mouse{
  width: 24px;
  height: 40px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.22);
  padding: 8px 0;
  display:flex;
  justify-content:center;
}
.dot{
  width: 3px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.35);
  animation: bounce 2s infinite;
}
@keyframes bounce{
  0%,100%{ transform: translateY(0); opacity: .7; }
  50%{ transform: translateY(8px); opacity: 1; }
}

/* about */
.about{
  padding: 90px 0;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
}
.about-grid{
  display:grid;
  gap: 42px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px){
  .about-grid{ grid-template-columns: 1fr 1fr; align-items:center; }
}
.photo-wrap{ position:relative; }
.photo-card{
  position:relative;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
  aspect-ratio: 4 / 5;
}
.photo{ width:100%; height:100%; object-fit: cover; transform: scale(1); transition: transform .6s ease; }
.photo-card:hover .photo{ transform: scale(1.04); }
.photo-grad{ position:absolute; inset:0; background: linear-gradient(to top, rgba(11,11,13,.85), transparent 60%); }
.photo-caption{ position:absolute; left:16px; right:16px; bottom:16px; }
.photo-title{ font-family: var(--font-display); font-size: 22px; margin-bottom: 2px; }
.photo-sub{ color: rgba(255,255,255,.68); font-size: 13px; }

.frame{
  position:absolute;
  inset: -14px;
  border-radius: 18px;
  border: 2px solid rgba(255,255,255,.12);
  z-index: -1;
}
.frame-b{
  inset: 14px -14px -14px 14px;
  border-color: rgba(217,184,92,.15);
}

/* cards / panels */
.card{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  box-shadow: 0 14px 40px rgba(0,0,0,.25);
}
.card-body{ padding: 22px; }
.card-title{ font-family: var(--font-display); margin: 0 0 10px; }
.card-title.big{ font-size: 26px; }
.card-link{ display:block; transition: border-color .15s ease, background .15s ease; }
.card-link:hover{ border-color: rgba(217,184,92,.32); background: rgba(255,255,255,.04); }
.readmore{ margin-top: 14px; font-weight: 700; color: rgba(255,255,255,.86); }
.link-accent{ color: var(--accent); font-weight: 700; }
.link-accent:hover{ text-decoration: underline; }

.panel{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 22px;
  box-shadow: var(--shadow);
  position: relative;
  overflow:hidden;
}
.panel:before{
  content:"";
  position:absolute;
  width: 260px;
  height: 260px;
  right: -80px;
  top: -80px;
  border-radius: 9999px;
  background: rgba(217,184,92,.06);
  filter: blur(80px);
  pointer-events:none;
}

/* page hero */
.page-hero{ padding: 40px 0 30px; }
.icon-badge{
  width: 54px; height: 54px;
  display:inline-flex;
  align-items:center; justify-content:center;
  border-radius: 999px;
  background: rgba(217,184,92,.10);
  border: 1px solid rgba(255,255,255,.10);
  margin-bottom: 14px;
  color: var(--accent);
  font-weight: 900;
}

/* grids */
.grid{ display:grid; gap: 18px; }
@media (min-width: 900px){
  .cards-3{ grid-template-columns: repeat(3, 1fr); }
}
.empty{
  padding: 40px;
  border: 1px dashed rgba(255,255,255,.12);
  border-radius: 18px;
  background: rgba(255,255,255,.02);
  text-align:center;
}

/* =========================
   MAGIC GRID (TITLE ALWAYS VISIBLE)
   ========================= */

.magic-grid{
  display:grid;
  gap: 16px;
  grid-template-columns: 1fr;
  align-items: stretch;
}

@media (min-width: 760px){
  .magic-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px){
  .magic-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.magic-tile{
  display: block;            /* tiles may render as <a> when a link is set */
  position:relative;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 14px 40px rgba(0,0,0,.25);
  height: 320px;

  background: rgba(255,255,255,.02);
  transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.magic-tile:hover{
  transform: translateY(-2px);
  border-color: rgba(217,184,92,.28);
  background: rgba(255,255,255,.03);
  box-shadow: 0 18px 55px rgba(0,0,0,.35);
}

/* In case old HTML still has tile-tall, neutralize it */
.tile-tall{ height: 320px; }

.magic-fallback{
  position:absolute; inset:0;
  background: rgba(255,255,255,.02);
  display:flex; align-items:center; justify-content:center;
  color: rgba(255,255,255,.16);
  font-size: 44px;
}

.magic-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  opacity: .92;
  transform: scale(1);
  transition: transform .6s ease, opacity .2s ease, filter .2s ease;
}

.magic-tile:hover .magic-img{
  transform: scale(1.07);
  opacity: 1;
  filter: saturate(1.05) contrast(1.02);
}

/* ✅ Overlay is ALWAYS visible now */
.magic-overlay{
  position:absolute;
  left: 0;
  right: 0;
  bottom: 0;

  padding: 16px 18px;
  display:flex;
  flex-direction: column;
  gap: 10px;

  /* Always-on readable gradient */
  background: linear-gradient(
    to top,
    rgba(0,0,0,.82),
    rgba(0,0,0,.42),
    rgba(0,0,0,0)
  );

  opacity: 1; /* always visible */
  transition: background .2s ease, padding .2s ease;
}

/* On hover, tighten the caption + deepen contrast slightly */
.magic-tile:hover .magic-overlay{
  padding: 18px 18px;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.88),
    rgba(0,0,0,.46),
    rgba(0,0,0,0)
  );
}

.magic-title,
.magic-overlay h3{
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.15;
  color: rgba(255,255,255,.92);
  letter-spacing: .02em;

  /* subtle glow so it survives bright photos */
  text-shadow: 0 2px 14px rgba(0,0,0,.65);
}

/* accent bar */
.bar{
  width: 54px;
  height: 4px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 18px rgba(217,184,92,.18);
}

/* magic page: pull quotes + closing CTA */
.pullquote{
  margin: 6px 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--secondary);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 20px;
  line-height: 1.55;
  color: rgba(255,255,255,.88);
}
.pullquote .cite{
  display: block;
  margin-top: 10px;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
.book-cta{
  text-align: center;
  padding: 40px 0 8px;
}
.book-cta .h2{ margin: 0 0 12px; }
.book-cta p{ margin: 0 auto 22px; }      /* .maxw caps width; centered with the rest */
.book-cta .btn{ margin: 0 auto; }

/* blog detail */
.backlink{
  display:inline-block;
  color: rgba(255,255,255,.72);
  margin: 18px 0 22px;
}
.backlink:hover{ color: var(--accent); }
.post-head{ text-align:center; margin: 10px 0 34px; }
.post-title{ font-size: clamp(34px, 4.2vw, 54px); line-height:1.08; margin: 12px 0 14px; }
.post-summary{ color: rgba(255,255,255,.68); font-size: 18px; margin: 0 auto; max-width: 720px; }
.prose{
  line-height: 1.75;
  font-size: 18px;
  color: rgba(255,255,255,.84);
}
.prose p{ margin: 0 0 16px; }

/* forms */
.form{ position:relative; z-index: 1; }
.field{ margin-bottom: 14px; }
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px){ .form-row{ grid-template-columns: 1fr; } }
label{ display:block; margin-bottom: 8px; color: rgba(255,255,255,.78); font-weight: 600; }
input, textarea, select{
  width:100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  color: var(--fg);
  outline: none;
  font: inherit;
  /* Dark-theme the native controls (date/time pickers, number spinners,
     select option list) so their icons/text stay legible on the dark field. */
  color-scheme: dark;
}
textarea{ resize: vertical; min-height: 120px; line-height: 1.6; }
/* Custom caret so the select matches the inputs across browsers. */
select{
  appearance: none;
  cursor: pointer;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23d9b85c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
/* Consistent, muted placeholder text. */
input::placeholder, textarea::placeholder{ color: rgba(255,255,255,.42); }
/* Native date/time picker icon: make it a clear, clickable gold-ish glyph. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator{
  filter: invert(1);
  opacity: .55;
  cursor: pointer;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover{ opacity: .9; }
/* Checkboxes/radios shouldn't stretch to full width like text inputs. */
input[type="checkbox"], input[type="radio"]{ width: auto; }
input:focus, textarea:focus, select:focus{
  border-color: rgba(217,184,92,.55);
  box-shadow: 0 0 0 3px rgba(217,184,92,.15);
}
.err{ margin-top: 6px; color: #ff6b6b; font-size: 12px; }

/* pager */
.pager{
  margin-top: 22px;
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 14px;
  flex-wrap: wrap;
}

/* toast */
.toast-wrap{
  position: fixed;
  right: 16px;
  top: 84px;
  z-index: 99;
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.toast{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  padding: 12px 14px;
  border-radius: 14px;
  box-shadow: var(--shadow);
  max-width: min(420px, calc(100vw - 32px));
}
.toast-success{ border-color: rgba(34,197,94,.25); }

/* ------------------------------------------------------------------ *
 * Utility classes — replacements for former inline style="" attrs so
 * markup carries no presentational inline CSS (CSP-friendly).
 * ------------------------------------------------------------------ */
.is-hidden{ display:none; }
.mt-6{ margin-top:6px; }
.mt-8{ margin-top:8px; }
.mt-10{ margin-top:10px; }
.mt-14{ margin-top:14px; }
.mt-16{ margin-top:16px; }
.pad-b-8{ padding-bottom:8px; }
.row-end{ justify-content:flex-end; }
.inline-check{ display:flex; align-items:center; gap:9px; cursor:pointer; }
.hr-soft{ margin:24px 0; border:0; height:1px; background:rgba(0,0,0,.14); }
.btn-row{ display:flex; gap:12px; flex-wrap:wrap; }

/* Off-screen spam honeypot: real users never see or fill these fields;
 * a submission with them populated is dropped as a bot. */
.nofill{ position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden; }

/* Constrained content wrappers (former inline max-width blocks). */
.maxw-760{ max-width:760px; margin:0 auto; }
.maxw-980{ max-width:980px; margin:0 auto; }
.maxw-680{ max-width:680px; }

/* Magic page: second pull-quote, top-ruled variant. */
.magic-quote2{ padding:48px 0 8px; }
.pullquote-flat{
  display:inline-block;
  text-align:left;
  border-left:0;
  border-top:3px solid var(--secondary);
  padding:18px 0 0;
  max-width:680px;
}
.mb-14{ margin-bottom:14px; }
.cursor-default{ cursor:default; }
.narrow-block{ margin:10px auto 18px; }