/*
Theme Name: Ryan Staples — Breakfast for Dinner
Theme URI: https://ryanstaples.com
Author: Ryan Staples
Author URI: https://ryanstaples.com
Description: A one-page author theme for Ryan Staples, built around the Breakfast for Dinner launch. Bold editorial layout in Archivo. Install the companion plugin "Foxhole Author Content" to edit every section from Dashboard → Author Site; without it, content is editable under Appearance → Customize. Published by Foxhole Ink.
Version: 1.1.3
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ryan-staples
*/

:root{
  --ink:#1c1a16;
  --paper:#FAF7F1;
  --red:#E2472E;
  --red-dark:#C13A22;
  --mustard:#F2C94C;
  --mustard-ink:#5a4a10;
  --muted:#6b6656;
  --faint:#948d7d;
  --card:#ffffff;
  --line:#e8e2d6;
  --dark:#211f1b;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Archivo',-apple-system,Helvetica,Arial,sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{max-width:100%;display:block}

/* ---- Header ---- */
.nav{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 32px;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.wm{font-weight:800;font-size:16px;letter-spacing:.04em;text-transform:uppercase;color:var(--red);text-decoration:none}
.nav-links a{
  font-size:14px;font-weight:500;color:var(--muted);
  text-decoration:none;margin-left:24px;
}
.nav-links a:hover{color:var(--ink)}

/* Keep the sticky nav clear of the WordPress admin bar when logged in */
.admin-bar .nav{top:32px}

/* ---- Marquee strip ---- */
.strip{
  background:var(--red);color:var(--paper);
  text-align:center;padding:9px 16px;line-height:1.5;
  font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
}

/* ---- Layout ---- */
.wrap{max-width:920px;margin:0 auto;padding-left:32px;padding-right:32px}
.section{padding-top:64px;padding-bottom:64px}
.rule{height:1px;background:var(--line);max-width:920px;margin:0 auto}
.eyebrow{
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--red);margin-bottom:18px;
}

/* ---- Hero ---- */
.hero{padding-top:72px;padding-bottom:60px}
.hero h1{
  font-size:clamp(38px,7vw,68px);
  font-weight:900;line-height:.98;letter-spacing:-.02em;
  max-width:12em;
}
.hero .lede{
  font-size:clamp(17px,2.4vw,20px);
  color:var(--muted);max-width:34em;margin-top:24px;font-weight:500;
}
.cta{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap}
.btn{
  display:inline-block;text-decoration:none;
  font-size:15px;font-weight:600;padding:13px 26px;border-radius:7px;
  transition:transform .12s ease, background .12s ease;
  border:1.5px solid transparent;
}
.btn-primary{background:var(--red);color:var(--paper)}
.btn-primary:hover{background:var(--red-dark)}
.btn-dark{background:var(--ink);color:var(--paper)}
.btn-dark:hover{background:#000}
.btn-ghost{background:transparent;color:var(--ink);border-color:#d9d3c7}
.btn-ghost:hover{border-color:var(--ink)}
.btn:active{transform:scale(.98)}

/* ---- Book ---- */
.book-grid{display:flex;gap:44px;align-items:flex-start}
.cover{
  width:210px;flex:none;aspect-ratio:2/3;border-radius:4px;
  object-fit:cover;background:#e8e2d6;
}
.tape{
  display:inline-block;background:var(--mustard);color:var(--mustard-ink);
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:6px 14px;transform:rotate(-2deg);margin-bottom:16px;
}
.book h2{font-size:clamp(26px,4vw,34px);font-weight:900;letter-spacing:-.01em;line-height:1.05}
.tagline{font-size:19px;font-weight:700;color:var(--red);margin:14px 0 18px;font-style:italic}
.book p{color:var(--muted);margin-bottom:14px;max-width:38em}
.book p em{font-style:italic}
.kirkus-tag{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--ink);
  margin:6px 0 22px;
}
.kirkus-tag span{background:var(--ink);color:var(--paper);font-size:11px;padding:3px 9px;border-radius:4px;letter-spacing:.1em;text-transform:uppercase}
.retail{font-size:13px;color:var(--faint);margin-top:16px;letter-spacing:.02em}
/* Let the store links use the full column width instead of inheriting the
   38em prose cap from .book p, so the row doesn't wrap early. */
.book p.retail{max-width:none}
.retail a{color:var(--muted);text-decoration:none;border-bottom:1px solid #d9d3c7}
.retail a:hover{color:var(--ink);border-color:var(--ink)}

/* ---- About ---- */
.about-grid{display:flex;gap:38px;align-items:flex-start}
.headshot{
  width:180px;flex:none;aspect-ratio:1/1;border-radius:12px;
  object-fit:cover;background:#e8e2d6;
}
.about-bio{flex:1 1 auto}
.about p{font-size:18px;color:#3a372f;max-width:38em;line-height:1.75}
.about p:not(:last-child){margin-bottom:16px}

/* ---- Card grids (praise, newsletter, say hi) ---- */
.card-grid{display:flex;gap:24px;flex-wrap:wrap}
.card{
  flex:1 1 280px;background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:28px 30px;
}
.card .q{font-size:17px;line-height:1.6;color:var(--ink);font-weight:500}
.card .q p{margin:0;font-size:17px;line-height:1.6;color:var(--ink);font-weight:500}
.card .q p + p{margin-top:10px}
.card .q em{font-style:italic}
.card .src{
  margin-top:16px;font-size:13px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--red);
}
.card h3{font-size:23px;font-weight:800;letter-spacing:-.01em;margin-bottom:10px}
.card p{color:var(--muted);margin-bottom:18px;line-height:1.65}
.mail{
  display:inline-block;font-size:clamp(19px,3vw,24px);font-weight:800;
  color:var(--red);text-decoration:none;letter-spacing:-.01em;
}
.mail:hover{text-decoration:underline}

/* ---- Footer ---- */
.footer{
  border-top:1px solid var(--line);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  padding-top:26px;padding-bottom:26px;font-size:13px;color:var(--faint);
}
.footer a{color:var(--faint);text-decoration:none}
.footer a:hover{color:var(--ink)}

/* ---- Focus + motion ---- */
a:focus-visible,.btn:focus-visible{outline:2.5px solid var(--red);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}

/* ---- Mobile ---- */
@media (max-width:680px){
  .nav{padding:14px 18px}
  .nav-links a{margin-left:14px;font-size:13px}
  .wrap{padding-left:24px;padding-right:24px}
  .section{padding-top:48px;padding-bottom:48px}
  .strip{font-size:11px;letter-spacing:.12em;padding:9px 18px}
  .hero{padding-top:48px;padding-bottom:40px}
  .hero h1{font-size:clamp(31px,8vw,46px)}
  .book-grid{flex-direction:column;gap:28px}
  .cover{width:170px}
  .about-grid{flex-direction:column;gap:24px}
  .headshot{width:150px}
  .card-grid{flex-direction:column;gap:16px}
}
@media (max-width:460px){
  .wrap{padding-left:20px;padding-right:20px}
  .nav-links a{margin-left:12px}
  .nav-links a:nth-child(3){display:none}
}
/* The admin bar becomes 46px tall on narrow screens */
@media screen and (max-width:782px){
  .admin-bar .nav{top:46px}
}