/* =========================================================
   THE CARTOGRAPHER'S DAUGHTER — stylesheet
   Design tokens
   ========================================================= */
:root{
  /* colour */
  --ink-navy:        #0e1a2b;
  --ink-navy-2:      #16283f;
  --ink-navy-3:      #1f3552;
  --parchment:       #f3ecd9;
  --parchment-dim:   #e6dcbf;
  --brass:           #c9a24b;
  --brass-light:     #e6c877;
  --verdigris:       #4f7c74;
  --rust:            #a1573a;
  --ink-black:       #16130f;
  --white-soft:      #fbf7ee;

  /* type */
  --font-display: "Fraunces", "Iowan Old Style", serif;
  --font-body:    "Spectral", "Iowan Old Style", Georgia, serif;
  --font-mono:    "Space Mono", "Courier New", monospace;

  /* scale */
  --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.6rem);
  --step-2: clamp(1.75rem, 1.5rem + 1vw, 2.4rem);
  --step-3: clamp(2.4rem, 2rem + 2vw, 3.6rem);
  --step-4: clamp(3.2rem, 2.4rem + 4vw, 5.6rem);

  --container: 1180px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* =========================================================
   Reset
   ========================================================= */
*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--parchment);
  color: var(--ink-black);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
h1,h2,h3,h4{ font-family: var(--font-display); font-weight: 600; margin: 0; line-height: 1.05; }
p{ margin: 0 0 1em; }
button{ font-family: inherit; cursor: pointer; }
::selection{ background: var(--brass); color: var(--ink-navy); }

.wrap{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
}
.eyebrow{
  display:flex; align-items:center; gap:.65em;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brass);
}
.eyebrow::before{
  content:"";
  width: 26px; height: 1px;
  background: var(--brass);
  display:inline-block;
}
.section-head{ max-width: 640px; margin-bottom: 2.75rem; }
.section-head h2{ font-size: var(--step-3); margin-top:.5rem; color: var(--ink-navy); }
.section-head h2 em{ font-style: italic; color: var(--rust); }
section{ position: relative; padding: clamp(4rem, 9vw, 8rem) 0; }

/* visible keyboard focus */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 2px solid var(--brass-light);
  outline-offset: 3px;
}

/* =========================================================
   Route line — the signature element.
   A hand-drawn voyage line that runs the length of the page,
   pinned to each section like waypoints on a chart. It draws
   itself in as the reader's scroll advances.
   ========================================================= */
.route-line{
  position: fixed;
  top:0; left: 22px;
  height: 100vh;
  width: 40px;
  z-index: 5;
  pointer-events:none;
  display: none;
}
@media (min-width: 980px){ .route-line{ display:block; } }
.route-line svg{ height:100%; width:100%; overflow: visible; }
.route-line path{
  fill:none;
  stroke: var(--brass);
  stroke-width: 1.4;
  stroke-dasharray: 6 7;
  opacity: .55;
}
.route-line .route-progress{
  stroke: var(--rust);
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  opacity: .95;
  stroke-width: 1.6;
  transition: stroke-dashoffset .1s linear;
}
.route-line .pin{
  fill: var(--parchment);
  stroke: var(--brass);
  stroke-width: 1.4;
  r: 4;
  transform-origin: center;
  transition: fill .4s var(--ease), r .4s var(--ease);
}
.route-line .pin.is-active{ fill: var(--rust); stroke: var(--rust); r:5.5; }

/* =========================================================
   Nav
   ========================================================= */
.site-nav{
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  padding: 1.4rem 0;
  transition: background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease);
}
.site-nav .wrap{ display:flex; align-items:center; justify-content:space-between; }
.site-nav.is-scrolled{
  background: rgba(14,26,43,.92);
  backdrop-filter: blur(10px);
  padding: .85rem 0;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.brand{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--parchment);
  letter-spacing: .02em;
}
.site-nav nav{ display:flex; gap: 2.2rem; }
.site-nav nav a{
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--parchment-dim);
  position: relative;
  padding-bottom: 4px;
}
.site-nav nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background: var(--brass-light); transition: right .35s var(--ease);
}
.site-nav nav a:hover::after, .site-nav nav a:focus-visible::after{ right:0; }
.nav-cta{
  font-family: var(--font-mono);
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-navy); background: var(--brass-light);
  border: none; padding: .7em 1.3em; border-radius: 2px;
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.nav-cta:hover{ background: var(--parchment); transform: translateY(-2px); }
.nav-toggle{ display:none; background:none; border:none; color: var(--parchment); }
@media (max-width: 760px){
  .site-nav nav{ display:none; }
  .nav-toggle{ display:block; }
}

/* =========================================================
   Hero
   ========================================================= */
.hero{
  min-height: 100svh;
  display:flex; align-items:center;
  background:
    radial-gradient(ellipse at 18% -10%, rgba(201,162,75,.18), transparent 55%),
    linear-gradient(180deg, var(--ink-navy) 0%, var(--ink-navy-2) 60%, var(--ink-navy-3) 100%);
  color: var(--parchment);
  overflow: hidden;
  position: relative;
  padding-top: 6rem;
}
.hero-chart{
  position:absolute; inset:0; z-index:0; opacity:.5;
}
.hero-chart svg{ width:100%; height:100%; }
.hero-chart path{
  fill:none; stroke: var(--brass); stroke-width:1;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  animation: draw 3.4s var(--ease) forwards .3s;
}
.hero-chart .compass{
  transform-origin: 82% 30%;
  animation: spin 90s linear infinite;
  opacity: .5;
}
.hero-chart .stars circle{
  fill: var(--brass-light);
  animation: twinkle 5s ease-in-out infinite;
}
@keyframes draw{ to{ stroke-dashoffset: 0; } }
@keyframes spin{ to{ transform: rotate(360deg); } }
@keyframes twinkle{ 0%,100%{ opacity:.15 } 50%{ opacity:.9 } }

.hero .wrap{
  position: relative; z-index: 2;
  display:grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items:center;
}
@media (max-width: 900px){ .hero .wrap{ grid-template-columns: 1fr; } }

.hero-copy .eyebrow{ color: var(--brass-light); }
.hero h1{
  font-size: var(--step-4);
  margin: .5rem 0 1rem;
  color: var(--white-soft);
}
.hero h1 .line{ display:block; overflow:hidden; }
.hero h1 .line span{
  display:block; transform: translateY(115%);
  animation: rise .9s var(--ease) forwards;
}
.hero h1 .line:nth-child(1) span{ animation-delay:.15s; }
.hero h1 .line:nth-child(2) span{ animation-delay:.32s; font-style: italic; color: var(--brass-light); }
@keyframes rise{ to{ transform: translateY(0); } }

.hero-copy .lede{
  max-width: 42ch;
  font-size: 1.2rem;
  color: var(--parchment-dim);
  opacity:0;
  animation: fadeUp .9s var(--ease) forwards .8s;
}
.hero-actions{
  display:flex; gap: 1rem; align-items:center; flex-wrap:wrap;
  opacity:0; animation: fadeUp .9s var(--ease) forwards 1s;
}
@keyframes fadeUp{ from{ opacity:0; transform: translateY(14px);} to{ opacity:1; transform:none; } }

.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family: var(--font-mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  padding: 1em 1.7em; border-radius: 2px; border: 1px solid transparent;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
}
.btn-primary{ background: var(--brass); color: var(--ink-navy); }
.btn-primary:hover{ background: var(--brass-light); transform: translateY(-3px); box-shadow: 0 14px 30px rgba(201,162,75,.28); }
.btn-ghost{ border-color: rgba(243,236,217,.4); color: var(--parchment); }
.btn-ghost:hover{ border-color: var(--brass-light); color: var(--brass-light); transform: translateY(-3px); }

.hero-stats{
  display:flex; gap: 2.4rem; margin-top: 3rem;
  opacity:0; animation: fadeUp .9s var(--ease) forwards 1.2s;
}
.stat b{
  display:block; font-family: var(--font-display); font-size: 1.9rem; color: var(--brass-light);
}
.stat span{ font-family: var(--font-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color: var(--parchment-dim); }

/* --- floating book --- */
.book-stage{
  perspective: 1400px;
  display:flex; justify-content:center; align-items:center;
  opacity:0; animation: fadeUp 1.1s var(--ease) forwards 1s;
}
.book{
  width: min(320px, 70vw);
  aspect-ratio: 2/3;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(-18deg) rotateX(4deg);
  transition: transform .12s linear;
  animation: bob 6s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ margin-top:0; } 50%{ margin-top: -14px; } }
.book-cover{
  position:absolute; inset:0;
  background:
    linear-gradient(155deg, rgba(255,255,255,.06), transparent 40%),
    linear-gradient(200deg, var(--verdigris), #2c4b46 60%, #1c322e);
  border-radius: 2px 6px 6px 2px;
  box-shadow: 22px 30px 60px rgba(0,0,0,.5), inset -3px 0 0 rgba(0,0,0,.25);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding: 2rem 1.5rem;
  color: var(--brass-light);
  border: 1px solid rgba(201,162,75,.35);
}
.book-cover .mark{ width: 54px; margin-bottom: 1rem; opacity:.9; }
.book-cover h3{ font-size: 1.5rem; color: var(--parchment); }
.book-cover .by{ font-family: var(--font-mono); font-size:.65rem; letter-spacing:.14em; text-transform:uppercase; margin-top:.9rem; color: var(--brass-light); }
.book-pages{
  position:absolute; top:3%; bottom:3%; right:-8px; width:16px;
  background: repeating-linear-gradient(90deg, var(--parchment) 0 2px, var(--parchment-dim) 2px 3px);
  transform: translateZ(-10px);
  border-radius: 0 3px 3px 0;
}
.scroll-cue{
  position:absolute; bottom: 2rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  color: var(--parchment-dim); font-family: var(--font-mono); font-size:.65rem; letter-spacing:.14em; text-transform:uppercase;
  opacity:0; animation: fadeUp .9s var(--ease) forwards 1.6s;
}
.scroll-cue .wire{ width:1px; height: 38px; background: linear-gradient(var(--brass-light), transparent); position:relative; overflow:hidden; }
.scroll-cue .wire::after{
  content:""; position:absolute; left:0; top:-40%; width:100%; height:40%;
  background: var(--brass-light); animation: drip 2.2s ease-in-out infinite;
}
@keyframes drip{ 0%{ top:-40%; } 100%{ top:100%; } }

/* =========================================================
   Reveal utility
   ========================================================= */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal-stagger > *{ transition-delay: calc(var(--i, 0) * 90ms); }

/* =========================================================
   Synopsis
   ========================================================= */
.synopsis{ background: var(--parchment); }
.synopsis .grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items:start; }
@media (max-width: 860px){ .synopsis .grid{ grid-template-columns:1fr; } }
.synopsis p{ font-size: 1.1rem; color: #2a2620; }
.pull-quote{
  font-family: var(--font-display); font-style: italic; font-size: var(--step-2);
  color: var(--ink-navy); line-height:1.3; border-left: 2px solid var(--brass);
  padding-left: 1.5rem; margin: 2rem 0;
}
.pull-quote cite{ display:block; font-style:normal; font-family: var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color: var(--rust); margin-top: .9rem; }
.fact-list{ list-style:none; margin: 2rem 0 0; padding: 1.75rem; background: var(--white-soft); border: 1px solid var(--parchment-dim); border-radius: 3px; }
.fact-list li{ display:flex; justify-content:space-between; padding: .6rem 0; border-bottom: 1px dashed var(--parchment-dim); font-family: var(--font-mono); font-size:.82rem; }
.fact-list li:last-child{ border-bottom:none; }
.fact-list span:first-child{ color:#6b6355; text-transform:uppercase; letter-spacing:.06em; font-size:.72rem; }

/* =========================================================
   Excerpt — journal page
   ========================================================= */
.excerpt{ background: var(--ink-navy); color: var(--parchment); }
.excerpt .section-head h2{ color: var(--white-soft); }
.journal-page{
  background: var(--parchment);
  color: var(--ink-black);
  padding: clamp(2rem,5vw,4rem);
  border-radius: 2px;
  position: relative;
  box-shadow: 0 40px 80px rgba(0,0,0,.45);
  transform: rotate(-.6deg);
}
.journal-page::before{
  content:""; position:absolute; inset:10px; border:1px solid var(--parchment-dim); pointer-events:none;
}
.journal-page .folio{ font-family: var(--font-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color: var(--rust); margin-bottom:1.4rem; }
.journal-page p{ font-family: var(--font-display); font-size: clamp(1.15rem,2vw,1.55rem); line-height:1.55; color:#241f18; }
.journal-page p:first-of-type::first-letter{
  font-family: var(--font-display); font-size: 3.6rem; float:left; line-height:.8; padding: .1em .12em 0 0; color: var(--rust);
}
.typewrite{ border-right: 2px solid var(--rust); white-space: nowrap; overflow: hidden; display:inline-block; }

/* =========================================================
   Author
   ========================================================= */
.author{ background: var(--parchment); }
.author .grid{ display:grid; grid-template-columns: .7fr 1.3fr; gap: 3.5rem; align-items:center; }
@media (max-width: 860px){ .author .grid{ grid-template-columns:1fr; } }
.author-portrait{
  aspect-ratio: 3/4; border-radius: 3px; position:relative; overflow:hidden;
  background: linear-gradient(160deg, var(--verdigris), #24413c);
  border: 1px solid var(--parchment-dim);
}
.author-portrait svg{ position:absolute; inset:0; width:100%; height:100%; }
.author blockquote{ font-family: var(--font-display); font-style:italic; font-size: var(--step-1); color: var(--ink-navy); margin: 1.2rem 0; }
.author .sig{ font-family: var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color: var(--rust); }

/* =========================================================
   Marginalia / reviews
   ========================================================= */
.marginalia{ background: var(--ink-navy-2); color: var(--parchment); overflow:hidden; }
.marginalia .section-head h2{ color: var(--white-soft); }
.notes{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1.75rem; }
@media (max-width: 860px){ .notes{ grid-template-columns:1fr; } }
.note{
  background: var(--parchment); color: var(--ink-black);
  padding: 1.75rem; border-radius: 2px; position:relative;
  box-shadow: 0 20px 40px rgba(0,0,0,.35);
}
.note:nth-child(1){ transform: rotate(-2deg); }
.note:nth-child(2){ transform: rotate(1.4deg); }
.note:nth-child(3){ transform: rotate(-1deg); }
.note p{ font-family: var(--font-display); font-style:italic; font-size:1.08rem; color:#241f18; }
.note .who{ font-family: var(--font-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color: var(--rust); }
.note .stars{ color: var(--brass); letter-spacing:.15em; margin-bottom:.6rem; display:block; }

/* =========================================================
   Buy / chart your copy
   ========================================================= */
.buy{ background: var(--parchment); }
.buy-layout{ display:grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items:flex-start; }
@media (max-width: 940px){ .buy-layout{ grid-template-columns:1fr; } }

.formats{ display:flex; flex-direction:column; gap: 1rem; }
.format-card{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding: 1.3rem 1.5rem; background: var(--white-soft); border: 1px solid var(--parchment-dim);
  border-radius: 3px; cursor:pointer; transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.format-card:hover{ transform: translateX(4px); }
.format-card input{ position:absolute; opacity:0; pointer-events:none; }
.format-card.is-selected{ border-color: var(--brass); box-shadow: 0 12px 28px rgba(201,162,75,.18); background: #fffdf6; }
.format-card .fmt-name{ font-family: var(--font-display); font-size:1.15rem; }
.format-card .fmt-desc{ font-family: var(--font-mono); font-size:.7rem; color:#6b6355; letter-spacing:.04em; margin-top:.3rem; }
.format-card .fmt-price{ font-family: var(--font-mono); font-size:1.05rem; color: var(--rust); white-space:nowrap; }
.format-card .radio-dot{
  width:16px; height:16px; border-radius:50%; border:1.5px solid var(--brass); flex:none; position:relative;
}
.format-card.is-selected .radio-dot::after{
  content:""; position:absolute; inset:3px; border-radius:50%; background: var(--brass);
}

.order-panel{
  background: var(--ink-navy); color: var(--parchment);
  padding: 2.25rem; border-radius: 3px; position: sticky; top: 6rem;
}
.order-panel h3{ color: var(--white-soft); font-size:1.4rem; margin-bottom: 1.4rem; }
.qty-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.4rem; }
.qty-control{ display:flex; align-items:center; gap: .9rem; }
.qty-control button{
  width:32px; height:32px; border-radius:50%; border:1px solid var(--brass); background:none; color: var(--brass-light);
  font-size:1.1rem; line-height:1; transition: background .3s var(--ease), transform .2s var(--ease);
}
.qty-control button:hover{ background: rgba(201,162,75,.15); transform: scale(1.06); }
.qty-control span{ font-family: var(--font-mono); min-width: 1.4em; text-align:center; }

.field{ margin-bottom: 1rem; }
.field label{ display:block; font-family: var(--font-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color: var(--brass-light); margin-bottom:.45rem; }
.field input, .field textarea{
  width:100%; background: rgba(243,236,217,.06); border: 1px solid rgba(243,236,217,.25);
  color: var(--white-soft); padding: .8em .9em; border-radius: 2px; font-family: var(--font-body); font-size: 1rem;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.field input::placeholder, .field textarea::placeholder{ color: rgba(243,236,217,.4); }
.field input:focus, .field textarea:focus{ border-color: var(--brass-light); background: rgba(243,236,217,.1); outline:none; }
.field.hidden{ display:none; }

.order-total{
  display:flex; justify-content:space-between; align-items:baseline;
  border-top: 1px dashed rgba(243,236,217,.3); margin: 1.4rem 0; padding-top: 1.2rem;
  font-family: var(--font-mono);
}
.order-total b{ font-size: 1.5rem; color: var(--brass-light); font-family: var(--font-display); font-style:italic; }

.submit-btn{
  width:100%; background: var(--brass); color: var(--ink-navy); border:none; padding: 1.05em; border-radius:2px;
  font-family: var(--font-mono); letter-spacing:.08em; text-transform:uppercase; font-size:.82rem;
  display:flex; align-items:center; justify-content:center; gap:.7em;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.submit-btn:hover{ background: var(--brass-light); transform: translateY(-2px); }
.submit-btn:disabled{ opacity:.6; cursor:progress; transform:none; }
.submit-btn .spinner{
  width:14px; height:14px; border-radius:50%; border:2px solid rgba(14,26,43,.3); border-top-color: var(--ink-navy);
  display:none; animation: spin-fast .7s linear infinite;
}
.submit-btn.is-loading .spinner{ display:inline-block; }
.submit-btn.is-loading .label{ opacity:.7; }
@keyframes spin-fast{ to{ transform: rotate(360deg); } }

.form-msg{ font-family: var(--font-mono); font-size:.78rem; margin-top: .9rem; display:none; }
.form-msg.is-error{ display:block; color:#e08a6b; }

/* M-Pesa payment badge + waiting state */
.payment-note{
  display:flex; align-items:center; gap:.6em;
  font-family: var(--font-mono); font-size:.7rem; letter-spacing:.05em; color: var(--parchment-dim);
  margin: 1rem 0 1.3rem; padding: .8em 1em; border: 1px dashed rgba(243,236,217,.3); border-radius: 2px;
}
.mpesa-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width: 22px; height: 22px; border-radius: 50%;
  background: #3aa757; color: #fff; font-size: .6rem; font-weight:700; flex: none;
}

.stk-wait{ display:none; text-align:center; padding: 1rem 0 .5rem; }
.stk-wait.is-open{ display:block; }
.stk-wait .ring{
  width: 62px; height: 62px; margin: 0 auto 1.3rem;
  border-radius: 50%; border: 2px solid rgba(201,162,75,.25); border-top-color: var(--brass-light);
  animation: spin-fast 1s linear infinite;
}
.stk-wait h4{ color: var(--white-soft); font-size: 1.15rem; margin-bottom:.6rem; }
.stk-wait p{ color: var(--parchment-dim); font-size:.92rem; }
.stk-wait .phone-hint{ font-family: var(--font-mono); color: var(--brass-light); }
.stk-wait .stk-actions{ display:flex; gap:.8rem; justify-content:center; margin-top: 1.4rem; flex-wrap:wrap; }
.stk-wait .stk-actions button{
  font-family: var(--font-mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase;
  background:none; border: 1px solid rgba(243,236,217,.3); color: var(--parchment);
  padding:.7em 1.2em; border-radius:2px; transition: border-color .3s var(--ease), color .3s var(--ease);
}
.stk-wait .stk-actions button:hover{ border-color: var(--brass-light); color: var(--brass-light); }
.stk-wait .stk-status{
  font-family: var(--font-mono); font-size:.68rem; letter-spacing:.05em; text-transform:uppercase;
  color: var(--rust); margin-top: 1rem; display:none;
}
.stk-wait .stk-status.is-visible{ display:block; }

.order-fields.is-hidden{ display:none; }

/* postmark confirmation stamp */
.postmark{
  position: fixed; inset:0; z-index: 100;
  display:flex; align-items:center; justify-content:center;
  background: rgba(14,26,43,.72); backdrop-filter: blur(4px);
  opacity:0; pointer-events:none; transition: opacity .4s var(--ease);
}
.postmark.is-open{ opacity:1; pointer-events:auto; }
.postmark-card{
  background: var(--parchment); padding: 3rem 2.5rem; border-radius: 4px; max-width: 420px; text-align:center;
  transform: scale(.85); transition: transform .5s var(--ease);
  box-shadow: 0 40px 100px rgba(0,0,0,.5);
}
.postmark.is-open .postmark-card{ transform: scale(1); }
.stamp{
  width: 110px; height:110px; border-radius:50%; border: 3px solid var(--rust); color: var(--rust);
  display:flex; align-items:center; justify-content:center; margin: 0 auto 1.5rem;
  font-family: var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; text-align:center;
  transform: rotate(-14deg) scale(0); opacity:0;
}
.postmark.is-open .stamp{ animation: stamp-in .5s var(--ease) forwards .2s; }
@keyframes stamp-in{ to{ transform: rotate(-14deg) scale(1); opacity:1; } }
.postmark-card h3{ font-size: 1.6rem; color: var(--ink-navy); margin-bottom:.6rem; }
.postmark-card p{ color:#4a4536; }
.postmark-ref{ font-family: var(--font-mono); font-size:.85rem; color: var(--rust); }
.postmark-close{
  margin-top: 1.5rem; background:none; border:1px solid var(--ink-navy); color: var(--ink-navy);
  padding: .8em 1.6em; border-radius: 2px; font-family: var(--font-mono); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.postmark-close:hover{ background: var(--ink-navy); color: var(--parchment); }

/* =========================================================
   Footer
   ========================================================= */
footer{ background: var(--ink-navy); color: var(--parchment-dim); padding: 4rem 0 2.5rem; position:relative; }
.footer-top{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap; padding-bottom: 3rem; border-bottom: 1px solid rgba(243,236,217,.12); }
.footer-brand{ font-family: var(--font-display); font-style:italic; font-size: 1.6rem; color: var(--white-soft); }
.compass-rose{ width: 74px; opacity:.85; animation: spin 50s linear infinite; }
.footer-links{ display:flex; gap: 2.5rem; flex-wrap:wrap; }
.footer-links a{ font-family: var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color: var(--parchment-dim); }
.footer-links a:hover{ color: var(--brass-light); }
.footer-bottom{ display:flex; justify-content:space-between; padding-top: 1.6rem; font-family: var(--font-mono); font-size:.68rem; letter-spacing:.05em; flex-wrap:wrap; gap:.5rem; }

/* cursor dot */
.ink-cursor{
  position: fixed; top:0; left:0; width:9px; height:9px; border-radius:50%;
  background: var(--brass); pointer-events:none; z-index: 200; mix-blend-mode: difference;
  transform: translate(-50%,-50%); transition: transform .12s ease-out, opacity .3s;
  opacity:0;
}
@media (hover:hover) and (pointer:fine){ .ink-cursor{ opacity:.85; } }