/* InHerItEra — shared styling for both pages, so the site and the manifesto
   cannot drift apart.

   PALETTE, decided 9 Aug 2026.
   Matched to michellemahal.com, not to the book cover.

   The reasoning: Legacy Creators and ContinUnity deliberately share teal and gold
   as the two halves of Trust First. michellemahal.com is dark and gold. Putting
   InHerItEra in the cover's cherry would have made a third palette, and three is
   one too many. InHerItEra is not a third business, it is Michelle's own work, so
   it lives in her identity.

   The cherry cover stays cherry. A jacket is an object, not a brand, and it will
   read as a striking book sitting on a page that matches everything else.

   Lots of white space and gold, per Michelle. */

:root{
  --ink:#12100b;          /* near-black, michellemahal.com */
  --ink-2:#1a150d;
  --paper:#f9f6f1;        /* warm off-white, the main reading ground */
  --paper-2:#f1ebdf;      /* a shade deeper, for alternating bands */
  --paper-soft:#ffffff;
  --earth:#241a13;        /* body text on light */
  --earth-soft:#5a4a3c;
  --gold:#c19a4e;
  --gold-light:#e0c07a;
  --cherry:#d03f56;       /* the book cover, used as punctuation not as ground */
  --cherry-deep:#b8354a;
  --ivory:#fefcf6;
  --rule:rgba(193,154,78,.24);
  --muted:#5a4a3c;
  --serif:"Fraunces",Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
/* overflow-x on body alone does not hold on iOS Safari, which will still pan
   sideways. It has to be on the root as well. */
html{scroll-behavior:smooth;overflow-x:clip;max-width:100%}
img{max-width:100%;display:block}
body{
  background-attachment:fixed;
  background-image:
    radial-gradient(ellipse at 22% 8%, rgba(198,152,74,.07) 0%, transparent 46%),
    radial-gradient(ellipse at 78% 88%, rgba(22,65,80,.05) 0%, transparent 52%),
    url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/></svg>");
  background:var(--paper);
  color:var(--earth);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.8;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

/* Concentric rings from the cover, kept as a quiet echo of the jacket. Gold on
   cream at very low opacity, and never behind reading text. */
.rings{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.rings::before{
  content:"";position:absolute;left:50%;top:50%;
  width:150vmax;height:150vmax;transform:translate(-50%,-50%);
  background:repeating-radial-gradient(circle at center,
    rgba(193,154,78,.10) 0 1px, transparent 1px 66px);
}

/* Reading measure: 65 to 75 characters, per the brief. Long lines are what make
   a long argument feel like work. */
.wrap{max-width:1080px;margin:0 auto;padding:0 32px;position:relative;z-index:2}
.read{max-width:33em;margin:0 auto;position:relative;z-index:2;padding:0 32px}

/* Generous. The brief asks for a book's website, not a startup's, and space is
   most of what makes that difference. */
section{position:relative;padding:clamp(90px,13vw,165px) 0}

/* ---- the wordmark ---- */
.mark{font-family:var(--sans);font-weight:800;letter-spacing:-.02em;line-height:.9;text-transform:uppercase}
.mark span{display:block}
.mark .w{color:var(--earth)}
.mark .g{color:var(--gold)}
/* on the dark band */
.on-dark .mark .w{color:var(--ivory)}

h1,h2,h3{font-family:var(--serif);font-weight:300;line-height:1.14;color:var(--earth)}
em{font-style:italic;color:var(--gold)}
p{margin-bottom:24px}
a{color:var(--gold)}

.eyebrow{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin-bottom:22px}

/* A line set large and alone, gold. */
.pull{
  font-family:var(--serif);font-weight:300;font-style:italic;
  color:var(--gold);
  font-size:clamp(29px,4.8vw,54px);line-height:1.2;
  margin:clamp(52px,8vw,84px) auto;text-align:center;max-width:18ch;
  position:relative;z-index:2;
}

.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:17px 38px;border-radius:999px;text-decoration:none;
  font-family:var(--sans);font-weight:600;font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;
  background:linear-gradient(135deg,#f4e3b0,#e8cd8a 48%,#d0aa54);color:#241b08;
  border:none;cursor:pointer;
  transition:transform .25s,box-shadow .25s;
  box-shadow:0 14px 34px -16px rgba(193,154,78,.9);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 20px 44px -16px rgba(193,154,78,.95)}

/* email capture */
.capture{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.capture input{
  flex:1 1 240px;padding:16px 20px;border-radius:999px;border:1px solid var(--rule);
  background:var(--paper-soft);color:var(--earth);font-family:var(--sans);font-size:16px;
}
.capture input::placeholder{color:#9a8b7a}
.capture .msg{width:100%;font-size:14.5px;color:var(--gold);margin-top:8px;min-height:1.2em}
/* Says what actually happens after she hands over her email. Without this the
   button is an ask with no stated return. */
.capture-note{font-size:14px;line-height:1.6;color:var(--earth-soft);opacity:.85;margin-top:12px;max-width:46ch}
.band .capture-note,.on-dark .capture-note{color:rgba(254,252,246,.72)}

.split{display:grid;grid-template-columns:1fr;gap:clamp(32px,5.5vw,64px);align-items:center}
@media(min-width:880px){.split{grid-template-columns:1fr 1fr}}
.split img{border-radius:14px;box-shadow:0 34px 78px -38px rgba(36,26,19,.45)}

/* the one dark band, used for the manifesto call so it lands as a break */
.band{background:var(--ink);color:var(--ivory)}
.band h2,.band h3{color:var(--ivory)}
.band p{color:rgba(254,252,246,.8)}

footer{border-top:1px solid var(--rule);padding:56px 0;font-size:14.5px;color:var(--muted)}
footer a{color:var(--gold)}



/* ---------------------------------------------------------------------------
   BREAKING UP THE PAGE — with the jacket's rings, not with blocks of colour.
   Michelle's note: bands of cherry and black read as heavy. The rings are the
   motif that already belongs to the book, so they carry the rhythm instead.
   --------------------------------------------------------------------------- */

/* Very light alternation. Barely perceptible on its own, but it stops three
   sections in a row reading as one continuous sheet. */
.tint{background:var(--paper-2)}
.plain{background:var(--paper-soft)}

/* RING ORNAMENTS. Concentric arcs from the cover, in gold, placed off the edge
   of the reading column so they never sit behind text. */
.ring-r::after, .ring-l::after{
  content:"";position:absolute;top:50%;
  width:min(58vw,620px);aspect-ratio:1;border-radius:50%;
  transform:translateY(-50%);
  background:repeating-radial-gradient(circle at center,
    rgba(193,154,78,.16) 0 1px, transparent 1px 34px);
  pointer-events:none;z-index:0;
}
.ring-r::after{right:-24vw}
.ring-l::after{left:-24vw}
/* Clip the ornament at the section rather than letting it hang off the page.
   It was only ever decoration that ran off the edge, so nothing is lost, and
   it stops the ring dragging the page sideways on a phone. */
.ring-r,.ring-l{overflow-x:clip}
@media(max-width:820px){
  .ring-r::after,.ring-l::after{width:96vw;opacity:.42}
  .ring-r::after{right:-46vw}
  .ring-l::after{left:-46vw}
}

/* A small centred ring, used as a section divider instead of a rule. */
.ring-mark{
  width:64px;height:64px;margin:clamp(44px,7vw,72px) auto;position:relative;z-index:2;
  border-radius:50%;
  background:repeating-radial-gradient(circle at center,
    rgba(193,154,78,.55) 0 1px, transparent 1px 8px);
  opacity:.85;
}

/* A pull line, now carried by space and a ring rather than a colour block. */
.pull-wrap{position:relative;padding:clamp(40px,6vw,72px) 0;text-align:center}
.pull-wrap .rings-soft{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(90vw,760px);aspect-ratio:1;border-radius:50%;
  background:repeating-radial-gradient(circle at center,
    rgba(193,154,78,.13) 0 1px, transparent 1px 30px);
  pointer-events:none;z-index:0;
}




/* ---------------------------------------------------------------------------
   THE NUMBERS, AS A PATHWAY
   Not a grid. A grid says "here are eight facts". Read down the page, one to
   the next, they make an argument: look what she has, then the turn, then look
   what it is costing her.
   --------------------------------------------------------------------------- */

.path{max-width:860px;margin:0 auto;position:relative;z-index:2}

/* the thread running down the page */
.path::before{
  content:"";position:absolute;left:50%;top:10px;bottom:10px;width:1px;
  background:linear-gradient(180deg,transparent,rgba(193,154,78,.45) 12%,rgba(193,154,78,.45) 88%,transparent);
  transform:translateX(-50%);
}

.step{
  position:relative;display:grid;grid-template-columns:1fr;gap:6px;
  padding:clamp(26px,4vw,40px) 0;text-align:center;
}
@media(min-width:760px){
  .step{grid-template-columns:1fr 1fr;align-items:center;gap:clamp(24px,4vw,54px);text-align:left}
  .step .big{text-align:right;padding-right:clamp(18px,3vw,34px)}
  .step .lab{padding-left:clamp(18px,3vw,34px)}
  /* alternate, so the eye moves side to side as it descends */
  .step:nth-child(even) .big{order:2;text-align:left;padding-right:0;padding-left:clamp(18px,3vw,34px)}
  .step:nth-child(even) .lab{order:1;text-align:right;padding-left:0;padding-right:clamp(18px,3vw,34px)}
}

.step .big{
  font-family:var(--serif);font-weight:400;font-style:italic;
  font-size:clamp(38px,6vw,68px);color:var(--gold);line-height:1;
}
.step .lab{
  font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.65;color:var(--earth-soft);
  max-width:34ch;
}
@media(min-width:760px){.step:nth-child(even) .lab{margin-left:auto}}

/* a node on the thread at each step */
.step::after{
  content:"";position:absolute;left:50%;top:50%;
  width:9px;height:9px;border-radius:50%;
  background:var(--paper-2);border:1px solid rgba(193,154,78,.65);
  transform:translate(-50%,-50%);
}

/* THE TURN. The pivot from what she has to what it costs. */
.turn{
  position:relative;text-align:center;
  padding:clamp(40px,6vw,64px) 0;
}
.turn span{
  display:inline-block;position:relative;z-index:2;
  background:var(--paper-2);padding:14px 30px;
  font-family:var(--serif);font-style:italic;font-size:clamp(26px,4vw,42px);color:var(--earth);
}

.src{font-size:12.5px;line-height:1.6;color:var(--earth-soft);opacity:.75;max-width:860px;margin:34px auto 0;text-align:center;position:relative;z-index:2}

/* PHONES. The thread and its nodes are a two-column device: the line runs down
   the middle BETWEEN the number and the label. Once the columns collapse there
   is no gap for it to run down, so the line and every dot land on top of the
   text. Below 760px the pathway becomes a plain stack instead. */
@media(max-width:759px){
  .path::before{display:none}
  .step::after{display:none}
  .step{padding:30px 0;border-top:1px solid var(--rule)}
  .step:first-child{border-top:0}
  .step .big{margin-bottom:4px}
  .step .lab{max-width:none;margin:0 auto}
  .turn{padding:38px 0}
  .turn span{background:transparent;padding:0}
}

/* Shimmer, on real buttons only. .linky, .pill, .choice and .genpill are
   deliberately excluded: they are text links and options, not calls to action. */
.btn{ position:relative; overflow:hidden; }
.btn::after{
  content:""; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg); animation:btnShine 5.5s ease-in-out infinite; pointer-events:none;
}
@keyframes btnShine{ 0%{left:-120%} 16%,100%{left:130%} }
@media (prefers-reduced-motion:reduce){ .btn::after{ animation:none; } }