/* ============================================================
   audreyvalez.com
   Dark is the room. Cream is the paper.
   Oxblood is the only thing you click. Gold labels things.
   ============================================================ */
:root{
  --ox:#8C1E13; --ox-lt:#A8291C;
  --gold:#C4995E; --gold-dim:#8E6E42;
  --cream:#F4EDDD; --cream-2:#EBE1CC; --paper:#FBF6EA; --border:#D8C9A8;
  --ink:#201813; --body:#3A2C20; --body-mute:#6B5946;
  --dark:#17120E; --dark-2:#1F1811;
  --on-dark:#EDE3CE; --on-dark-mute:#A08D74;
  --serif:'Merriweather',Georgia,'Times New Roman',serif;
  --mono:'Courier Prime','Courier New',ui-monospace,monospace;
  --wrap:1240px;

  /* fluid type scale - grows with the viewport instead of sitting at phone size.
     Phone stays where it was; iPad and desktop get meaningfully larger. */
  --t-base:  clamp(17px,   14.9px + .56vw, 20.5px);  /* default body */
  --t-prose: clamp(18px,   15.2px + .72vw, 22px);    /* long-form reading */
  --t-sm:    clamp(15.5px, 13.9px + .42vw, 18px);    /* cards, secondary */
  --t-micro: clamp(12px,   11.2px + .22vw, 13.5px);  /* mono labels */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--serif);background:var(--dark);color:var(--on-dark);
  font-size:var(--t-base);line-height:1.75;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.narrow{max-width:880px;margin:0 auto;padding:0 28px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:200;background:var(--ox);color:#fff;padding:10px 16px}

/* ---------- type ---------- */
.eyebrow{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold);margin:0 0 22px}
.eyebrow.ox{color:var(--ox)}
h1,h2,h3{font-weight:900;letter-spacing:-.015em;line-height:1.15;margin:0}
h1{font-size:clamp(34px,5.4vw,58px)}
h2{font-size:clamp(26px,3.4vw,40px)}
h3{font-size:clamp(21px,19px + .55vw,25px);font-weight:700;letter-spacing:0}
.lede{font-size:clamp(18px,15px + .8vw,24px);line-height:1.65;color:#C9B99E;font-weight:300}
.sec-cream .lede{color:#5B4836}
.center{text-align:center}

/* ---------- buttons ---------- */
.btn{display:inline-block;background:var(--ox);color:#fff;text-decoration:none;border-radius:5px;
  font-family:var(--mono);font-size:clamp(13px,12.2px + .2vw,14.5px);letter-spacing:.2em;text-transform:uppercase;
  padding:17px 34px;border:1px solid var(--ox);transition:.2s;cursor:pointer}
.btn:hover,.btn:focus{background:var(--ox-lt);border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(196,153,94,.18);outline:none}
.btn.ghost{background:transparent;color:var(--gold);border-color:var(--gold-dim)}
.btn.ghost:hover{background:rgba(196,153,94,.09);box-shadow:none}
.sec-cream .btn.ghost{color:var(--ox);border-color:var(--ox)}
.sec-cream .btn.ghost:hover{background:rgba(140,30,19,.06)}
.btn.sm{padding:12px 22px;font-size:11px}
.btn.wide{width:100%;text-align:center}
.microcopy{font-family:var(--mono);font-size:var(--t-micro);color:var(--on-dark-mute);letter-spacing:.05em;margin-top:16px}
.sec-cream .microcopy{color:var(--body-mute)}

/* ---------- nav ---------- */
header.nav{position:sticky;top:0;z-index:60;background:rgba(23,18,14,.95);
  backdrop-filter:blur(9px);border-bottom:1px solid rgba(196,153,94,.26)}
.nav-in{max-width:var(--wrap);margin:0 auto;padding:13px 28px;display:flex;align-items:center;gap:26px}
.brand{display:flex;align-items:center;gap:13px;flex-shrink:0;text-decoration:none}
.brand img{width:34px}
.brand b{font-family:var(--serif);font-weight:400;font-size:clamp(19px,17.5px + .4vw,22px);color:var(--cream)}
.nav-links{display:flex;gap:26px;margin-left:auto;align-items:center}
.nav-links a{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-dark-mute);text-decoration:none;padding:6px 0;
  border-bottom:1px solid transparent;transition:.18s}
.nav-links a:hover{color:var(--cream)}
.nav-links a[aria-current]{color:var(--gold);border-bottom-color:var(--gold)}
.nav-links a.cta{color:var(--ox-lt)}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--gold-dim);
  color:var(--gold);font-family:var(--mono);font-size:12px;letter-spacing:.16em;
  padding:9px 14px;cursor:pointer}

/* ---------- sections ---------- */
section{padding:92px 0}
.sec-dark{background:var(--dark)}
.sec-dark-2{background:var(--dark-2);border-top:1px solid rgba(196,153,94,.14);
  border-bottom:1px solid rgba(196,153,94,.14)}
.sec-cream{background:var(--cream);color:var(--body)}
.sec-cream h1,.sec-cream h2,.sec-cream h3{color:var(--ink)}
.pagehead{padding-top:70px;padding-bottom:0}

/* ---------- hero ---------- */
.hero{position:relative;padding:110px 0 96px;overflow:hidden;
  background:radial-gradient(ellipse 900px 620px at 50% 34%,#2B2117 0%,#1B1510 52%,#130F0B 100%)}
.hero:before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.014) 0 1px,transparent 1px 3px)}
.hero-in{position:relative;text-align:center;max-width:820px;margin:0 auto;padding:0 28px}
.hero-logo{width:132px;margin:0 auto 30px;opacity:.96}
.hero h1{color:var(--cream);margin-bottom:24px}
.hero .lede{max-width:600px;margin:0 auto 38px}
.stamp{position:absolute;top:28px;right:32px;border-radius:4px;font-family:var(--mono);font-size:11px;
  letter-spacing:.28em;color:var(--ox-lt);border:1px solid var(--ox);padding:8px 14px;
  transform:rotate(-2deg);opacity:.85}
.orn{display:flex;align-items:center;justify-content:center;gap:16px;margin:0 0 26px}
.orn i{display:block;width:74px;height:1px;background:linear-gradient(90deg,transparent,var(--gold-dim))}
.orn i+i{background:linear-gradient(270deg,transparent,var(--gold-dim))}
.orn b{color:var(--ox);font-size:13px}

/* ---------- books ---------- */
.books{display:grid;grid-template-columns:repeat(2,1fr);gap:52px;margin-top:52px}
.books.stack{grid-template-columns:1fr;gap:64px}
.book{display:grid;grid-template-columns:190px 1fr;gap:30px;align-items:start}
.cover{display:block;width:100%;height:auto;aspect-ratio:1/1.6;object-fit:cover;
  border:1px solid rgba(196,153,94,.34);box-shadow:0 16px 34px rgba(0,0,0,.5);background:#100C09}
.book h3{color:var(--cream)}
.book .bmeta{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--gold);margin-bottom:10px}
.book p{color:#B4A388;font-size:var(--t-sm);font-weight:300;margin:0 0 16px}
.badge{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.2em;border-radius:4px;
  border:1px solid var(--gold-dim);color:var(--gold);padding:5px 11px}
/* buy links: unhide in Phase 5 */
.buy{display:block}

/* ---------- case file cards ---------- */
.files{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:50px}
.file{position:relative;background:var(--paper);border:1px solid var(--border);
  padding:32px 26px 26px;box-shadow:0 3px 0 var(--cream-2),0 14px 26px rgba(32,24,19,.13);
  transition:.2s;display:flex;flex-direction:column}
.file:hover{transform:translateY(-4px);box-shadow:0 3px 0 var(--cream-2),0 20px 34px rgba(32,24,19,.2)}
.file .tab{position:absolute;top:-1px;left:22px;background:var(--ox);color:#fff;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;padding:5px 11px}
.file h3{color:var(--ink);margin:14px 0 14px;font-size:clamp(22px,19.5px + .65vw,27px)}
.file p{font-size:var(--t-sm);color:var(--body);font-weight:300;margin:0 0 20px}
.file .open{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--ox);
  text-decoration:none;text-transform:uppercase;margin-top:auto}
.file .open:hover{color:var(--ink)}
.meta{font-family:var(--mono);font-size:clamp(11.5px,10.8px + .2vw,13px);line-height:1.95;color:var(--body-mute);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:11px 0;margin-bottom:16px}
.meta b{color:var(--ink);font-weight:700}
.meta .st{color:var(--ox);font-weight:700}

/* ---------- dossier page ---------- */
.dossier{background:var(--paper);border:1px solid var(--border);
  box-shadow:0 3px 0 var(--cream-2),0 22px 44px rgba(32,24,19,.16);
  padding:clamp(30px,5vw,58px);position:relative;margin:0 auto;max-width:860px}
.dossier .tab{position:absolute;top:-1px;left:clamp(26px,5vw,52px);background:var(--ox);color:#fff;border-radius:0 0 4px 4px;
  font-family:var(--mono);font-weight:700;font-size:10px;letter-spacing:.18em;padding:6px 13px}
.fileno{font-family:var(--mono);font-size:9px;letter-spacing:.26em;color:var(--body-mute);
  margin:14px 0 6px}
.dossier h1{font-size:clamp(28px,4.2vw,40px);color:var(--ink);margin-bottom:22px}
.dossier .meta{margin-bottom:26px}
.sechead{font-family:var(--mono);font-size:9px;letter-spacing:.26em;color:var(--body-mute);
  border-bottom:1px solid var(--border);padding-bottom:5px;margin:0 0 14px}
.dossier p{color:var(--body);font-weight:300;margin:0 0 14px}
.ev{list-style:none;margin:0 0 26px;padding:0}
.ev li{position:relative;padding-left:19px;color:var(--body);font-weight:300;margin-bottom:10px;font-size:var(--t-prose)}
.ev li:before{content:"";position:absolute;left:0;top:11px;width:7px;height:7px;background:var(--ox)}
.pull{border-left:3px solid var(--ox);padding:8px 0 8px 18px;font-style:italic;
  font-size:clamp(18px,15.5px + .66vw,22px);line-height:1.6;color:#4A3826;margin:0 0 26px}
.comingline{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.06em;color:var(--body-mute);
  border-top:1px solid var(--border);padding-top:20px}

/* ---------- about ---------- */
.paper{background:var(--paper);border:1px solid var(--border);
  padding:clamp(32px,5vw,64px);box-shadow:0 3px 0 var(--cream-2),0 20px 44px rgba(32,24,19,.14)}
.paper p{color:var(--body);font-weight:300;font-size:var(--t-prose);margin:0 0 20px}
.portrait{width:min(330px,80%);margin:0 auto 34px;border:1px solid var(--border);
  box-shadow:0 12px 30px rgba(32,24,19,.22)}

/* ---------- opt-in ---------- */
.optin{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:center}
.pdfshot img{border:1px solid rgba(196,153,94,.4);box-shadow:0 26px 60px rgba(0,0,0,.62);
  transform:rotate(-1.6deg)}
.ticks{list-style:none;padding:0;margin:0 0 32px}
.ticks li{position:relative;padding-left:32px;margin-bottom:14px;color:#C4B396;
  font-weight:300;font-size:clamp(16px,14.3px + .45vw,19px)}
.ticks li:before{content:"";position:absolute;left:0;top:11px;width:9px;height:9px;
  background:var(--ox);border:1px solid var(--gold-dim)}
.formslot{border:1px dashed var(--gold-dim);border-radius:6px;background:rgba(196,153,94,.055);padding:26px}
.formslot .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:var(--gold);margin-bottom:16px}
.fakefield{background:rgba(0,0,0,.34);border:1px solid rgba(196,153,94,.3);border-radius:4px;padding:15px 16px;
  font-family:var(--mono);font-size:13px;color:#6E5F4C;margin-bottom:12px}

/* ---------- volumes ---------- */
.vols{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:12px;margin-top:40px}
.vol{border:1px solid rgba(196,153,94,.24);border-radius:4px;padding:15px 18px;background:rgba(196,153,94,.035);
  font-size:clamp(15px,13.6px + .38vw,17.5px);color:#C3B295;font-weight:300;line-height:1.45}
.vol.live{border-color:var(--gold);background:rgba(196,153,94,.1);color:var(--cream)}

/* ---------- forms ---------- */
.field{margin-bottom:18px}
.field label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--body-mute);margin-bottom:7px}
.field input,.field textarea{width:100%;padding:13px 14px;border:1px solid var(--border);border-radius:4px;
  background:#fff;font-family:var(--serif);font-size:clamp(16px,15px + .28vw,18px);color:var(--ink)}
.field input:focus,.field textarea:focus{outline:2px solid var(--ox);outline-offset:1px}
.field textarea{min-height:150px;resize:vertical}

/* ---------- legal copy ---------- */
.legal h2{font-size:clamp(24px,21px + .8vw,30px);margin:38px 0 12px}
.legal p,.legal li{color:var(--body);font-weight:300;font-size:clamp(16.5px,14.6px + .5vw,19.5px)}
.legal ul{padding-left:20px}
.legal .updated{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--body-mute)}

/* ---------- footer ---------- */
footer{background:#100C09;border-top:1px solid rgba(196,153,94,.2);padding:70px 0 32px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px;margin-bottom:46px}
.foot-grid h4{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--gold);
  text-transform:uppercase;margin:0 0 18px;font-weight:400}
.foot-grid a{display:block;color:var(--on-dark-mute);text-decoration:none;font-size:clamp(15px,13.8px + .32vw,17px);
  font-weight:300;margin-bottom:11px}
.foot-grid a:hover{color:var(--cream)}
.foot-grid a.btn,.foot-grid a.btn:hover{color:#fff}
.foot-sig img{width:250px;margin-bottom:18px}
.foot-sig p{color:var(--on-dark-mute);font-size:clamp(15px,13.8px + .32vw,17px);font-weight:300;margin:0}
.foot-bottom{border-top:1px solid rgba(196,153,94,.16);padding-top:24px;display:flex;
  justify-content:space-between;gap:18px;flex-wrap:wrap;font-family:var(--mono);
  font-size:11px;letter-spacing:.05em;color:#6A5B48}
.foot-bottom a{color:#6A5B48}
.ph{color:var(--ox-lt)}

@media(max-width:900px){
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:#1B150F;
    flex-direction:column;gap:0;padding:8px 28px 20px;border-bottom:1px solid rgba(196,153,94,.26)}
  .nav-links.open{display:flex}
  .nav-links a{padding:13px 0;width:100%}
  .burger{display:block}
  .books,.files,.optin,.foot-grid{grid-template-columns:1fr}
  .optin{gap:40px}
  .pdfshot{max-width:290px;margin:0 auto}
  section{padding:64px 0}
  .stamp{display:none}
}
@media(max-width:560px){.book{grid-template-columns:130px 1fr;gap:18px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}

/* ---------- case file as essay ---------- */
.dossier.post{max-width:860px}
.dossier .strip{font-family:var(--mono);font-size:clamp(11px,10.2px + .22vw,13px);line-height:2.1;color:var(--body-mute);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:12px 0;margin:0 0 26px}
.dossier .strip b{color:var(--ink);font-weight:700;letter-spacing:.04em}
.dossier.post h1{font-size:clamp(30px,4.6vw,44px);margin-bottom:30px}
.dossier.post h3{font-size:clamp(19px,17px + .5vw,23px);font-weight:700;color:var(--ink);margin:38px 0 14px;
  letter-spacing:0}
.dossier.post p{font-size:var(--t-prose);line-height:1.76;margin:0 0 20px}
.dossier.post p:first-of-type{font-size:calc(var(--t-prose) + 1.5px);color:#33241a}

/* ---------- MailerLite embedded form ----------
   Colors are set in MailerLite's Design tab (they render live, no deploy needed).
   These rules only fix layout: strip MailerLite's outer card so it doesn't sit
   as a box-inside-a-box within .formslot, and let it fill the panel width. */
.formslot .ml-form-embedContainer,
.formslot .ml-form-align-center,
.formslot .ml-form-embedWrapper,
.formslot .ml-form-embedBody,
.formslot .ml-form-successBody{
  background:transparent!important;border:0!important;box-shadow:none!important;
  padding:0!important;margin:0!important;width:100%!important;max-width:100%!important}
.formslot .ml-form-embedContent{margin:0 0 14px!important;padding:0!important}
.formslot .ml-form-embedContent h4,
.formslot .ml-form-successContent h4{display:none!important}
.formslot .ml-form-fieldRow{margin-bottom:12px!important}
.formslot input.form-control{width:100%!important;height:auto!important}
.formslot .ml-form-embedSubmit button{width:100%!important;height:auto!important;cursor:pointer}
.formslot .ml-form-recaptcha{margin-bottom:14px!important}
.formslot .ml-form-embedContent img{display:none!important}