/* ════════════════════════════════════════════════════════════════════
   Mark Gai — sample author platform · Art of Encouragement Warm Paper lane
   Tokens from the AoE brand audit (cream #faf5ea · ink #221c12 · gold #a97e1f).
   No photography of the author exists in this build — the visual language is
   typographic: morning-light gradients, seedling/root line motifs, and
   typeset book-cover treatments (design placeholders until real cover
   files are supplied). Mobile repair pattern included from birth:
   html overflow-x, min(…,100%) grid floors, ≤700px padding relief.
   ════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#faf5ea; --bg-soft:#f3ecda; --surface:#fffdf7;
  --ink:#221c12; --ink-soft:#5c5342;
  --gold:#a97e1f; --gold-deep:#8a6614; --gold-soft:#e9dcb8; --line:#ddd0ae;
  --shadow:0 18px 40px rgba(64,48,12,.14);
  --shadow-lg:0 30px 60px rgba(64,48,12,.18);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{margin:0;background:var(--bg);color:var(--ink);overflow-x:hidden;
  font-family:"Source Sans 3",system-ui,sans-serif;font-size:18px;line-height:1.65}
img{max-width:100%}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
h1,h2,h3,.serif{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;line-height:1.12}
h1{font-size:clamp(3rem,8vw,5.4rem);margin:.15em 0}
h2{font-size:clamp(2rem,4.4vw,2.9rem);margin:.15em 0 .4em}
h3{font-size:1.45rem;margin:.2em 0 .3em}
em.line{font-style:italic;color:var(--gold-deep)}
.kicker{text-transform:uppercase;letter-spacing:.19em;font-weight:700;
  font-size:.78rem;color:var(--gold);margin:0 0 6px}
.lede{font-size:1.18rem;color:var(--ink-soft);max-width:640px}
.note{font-size:.92rem;color:var(--ink-soft)}
.small{font-size:.95rem}

/* sample banner */
.sample-banner{background:var(--gold-deep);color:#fff8e7;text-align:center;
  padding:10px 16px;font-size:.85rem;letter-spacing:.05em;font-weight:600}
.sample-banner b{color:#ffe9a8}

/* header */
.site-head{position:sticky;top:0;z-index:40;background:rgba(250,245,234,.92);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding-top:12px;padding-bottom:12px;flex-wrap:wrap}
.brand{font-family:"Cormorant Garamond",Georgia,serif;font-size:1.55rem;font-weight:700;
  color:var(--ink);text-decoration:none;letter-spacing:.01em}
.brand span{color:var(--gold-deep)}
nav.main{display:flex;gap:4px;flex-wrap:wrap}
nav.main a{color:var(--ink-soft);text-decoration:none;font-weight:600;font-size:.98rem;
  padding:8px 11px;border-radius:999px}
nav.main a:hover{color:var(--ink);background:var(--bg-soft)}
nav.main a[aria-current="page"]{color:var(--ink);background:var(--gold-soft)}
nav.main a.dash{border:1px dashed var(--gold);color:var(--gold-deep)}

/* hero — typographic, morning light */
.hero{position:relative;padding:104px 0 84px;overflow:hidden;
  background:
    radial-gradient(900px 480px at 85% -10%,rgba(233,220,184,.85),rgba(233,220,184,0) 60%),
    radial-gradient(700px 500px at -10% 110%,rgba(169,126,31,.16),rgba(169,126,31,0) 60%),
    linear-gradient(180deg,#fdf9ef 0%,var(--bg) 78%)}
.hero .motif{position:absolute;right:-30px;bottom:-14px;width:min(430px,72vw);
  opacity:.5;pointer-events:none}
.hero .rule{width:84px;height:4px;border-radius:2px;margin:18px 0 6px;
  background:linear-gradient(90deg,var(--gold),var(--gold-soft))}
.byline{font-family:"Cormorant Garamond",Georgia,serif;font-size:1.35rem;font-style:italic;
  color:var(--ink-soft)}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.btn{display:inline-block;border-radius:999px;padding:.65em 1.5em;font-weight:600;
  text-decoration:none;background:var(--ink);color:var(--bg);border:1px solid var(--ink);
  transition:transform .15s ease;font-size:1rem;cursor:pointer;font-family:inherit}
.btn:hover{transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.gold{background:var(--gold-deep);border-color:var(--gold-deep);color:#fff8e7}
.btn.soon{background:transparent;color:var(--ink-soft);border:1px dashed var(--line);
  cursor:default}
.btn.soon:hover{transform:none}

/* sections & cards */
section{padding:72px 0}
section.band{background:var(--bg-soft)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:24px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.grid-wide{display:grid;grid-template-columns:1.25fr .75fr;gap:24px;align-items:start}
@media (max-width:860px){.grid2,.grid-wide{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:10px;
  box-shadow:var(--shadow);padding:28px}
.tag{display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--gold-deep);background:var(--gold-soft);
  border-radius:999px;padding:4px 11px;margin-bottom:10px}
.tag.sample{background:transparent;border:1px dashed var(--gold);color:var(--gold-deep)}
.fact-list{list-style:none;padding:0;margin:0}
.fact-list li{padding:10px 0;border-bottom:1px solid var(--line)}
.fact-list li:last-child{border-bottom:none}
.fact-list b{color:var(--gold-deep)}
.ticks{list-style:none;padding:0;margin:14px 0}
.ticks li{padding:7px 0 7px 30px;position:relative}
.ticks li::before{content:"";position:absolute;left:2px;top:15px;width:14px;height:7px;
  border-left:3px solid var(--gold);border-bottom:3px solid var(--gold);
  transform:rotate(-45deg)}
.center{text-align:center}
.cover-rule{height:4px;background:linear-gradient(90deg,var(--gold),var(--gold-soft));
  border-radius:2px;margin-bottom:14px}

/* typeset book covers (design treatments — real cover files pending) */
.cover{aspect-ratio:2/3;border-radius:6px 12px 12px 6px;position:relative;overflow:hidden;
  box-shadow:var(--shadow-lg);display:flex;flex-direction:column;justify-content:space-between;
  padding:26px 24px;max-width:300px}
.cover::before{content:"";position:absolute;left:0;top:0;bottom:0;width:9px;
  background:rgba(0,0,0,.22)}
.cover .c-kicker{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;font-weight:700}
.cover .c-title{font-family:"Cormorant Garamond",Georgia,serif;font-weight:700;
  font-size:2rem;line-height:1.08}
.cover .c-authors{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-size:1.02rem}
.cover .c-motif{position:absolute;right:10px;bottom:8px;opacity:.55;pointer-events:none}
.cover.aoe{background:linear-gradient(165deg,#f7ecd2 0%,#eedcae 55%,#e2c887 100%);color:#3a2c10}
.cover.aoe .c-kicker{color:#8a6614}
.cover.dp{background:linear-gradient(170deg,#2c2415 0%,#221c12 60%,#171208 100%);color:#f2e9d5}
.cover.dp .c-kicker{color:#d9ae4a}
.cover.dp .c-authors{color:#e9dcb8}
.cover-note{font-size:.82rem;color:var(--ink-soft);margin-top:10px;font-style:italic}

/* awaiting slots (About page) */
.slot{border:1.5px dashed var(--gold);border-radius:10px;padding:26px;background:rgba(255,253,247,.65)}
.slot .slot-label{font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-deep);margin:0 0 6px}
.portrait-slot{aspect-ratio:4/5;border-radius:8px;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:20px;background:
  radial-gradient(300px 200px at 50% 20%,rgba(233,220,184,.9),rgba(233,220,184,0) 70%),var(--bg-soft);
  border:1.5px dashed var(--gold);color:var(--ink-soft);font-family:"Cormorant Garamond",Georgia,serif;
  font-style:italic;font-size:1.15rem}

/* forms */
label{display:block;font-weight:600;margin:16px 0 5px}
input,select,textarea{width:100%;padding:.65em .85em;border:1px solid var(--line);
  border-radius:8px;background:var(--surface);color:var(--ink);font:inherit;font-size:16px}
textarea{min-height:120px;resize:vertical}
.form-status{margin-top:16px;font-weight:600;min-height:1.4em}
.form-status.ok{color:#3d6b1f}
.form-status.err{color:#a03223}

/* big conviction band */
.conviction{padding:84px 0;text-align:center;position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--bg) 0%,var(--bg-soft) 50%,var(--bg) 100%)}
.conviction .big{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;
  font-size:clamp(2.2rem,5.5vw,3.6rem);line-height:1.15;margin:0}
.conviction .attr{margin-top:14px;color:var(--ink-soft);font-style:italic;
  font-family:"Cormorant Garamond",Georgia,serif;font-size:1.2rem}

/* footer */
.site-foot{border-top:1px solid var(--line);padding:44px 0 36px;background:var(--bg-soft)}
.site-foot .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:24px}
.site-foot a{color:var(--ink-soft)}
.site-foot a:hover{color:var(--ink)}
.prov{margin-top:30px;padding-top:18px;border-top:1px solid var(--line);
  font-size:.85rem;color:var(--ink-soft)}

/* reveal motion (calm; reduced-motion safe) */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ═══ Mobile repair pattern — from birth (see design-elevation record) ═══ */
@media(max-width:700px){
  section{padding:52px 0}
  .hero{padding:72px 0 60px}
  .conviction{padding:60px 0}
  .hero .motif{opacity:.32}
  .cover{margin:0 auto}
  .site-head .wrap{padding-top:10px;padding-bottom:10px}
}
@supports (padding: env(safe-area-inset-bottom)){
  .site-foot{padding-bottom:calc(36px + env(safe-area-inset-bottom))}
}