/* ==========================================================================
   The Peddler and the Artist — site.css
   One stylesheet for every page. Quiet type, big rounded imagery, generous
   whitespace, glass navigation, content that reveals as you scroll.
   Light follows the device; the toggle in the nav overrides it.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  --bg:#fbfaf7;
  --bg-elev:#ffffff;
  --fill:#f0ede7;
  --fill-2:#e6e2d9;
  --field:#f3f0ea;
  --text:#1d1d1f;
  --text-2:#6e6e73;
  --hair:rgba(0,0,0,.1);
  --accent:#b84508;
  --on-accent:#ffffff;
  --glass:rgba(251,250,247,.72);
  --sheet:rgba(251,250,247,.95);
  --ring:rgba(184,69,8,.2);
  --shadow:0 1px 2px rgba(0,0,0,.04), 0 12px 32px rgba(40,30,20,.08);
  --ok:#b84508;
  --ok-2:#d9611c;
  --bad:#d70015;

  --font:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif:ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

  --nav-h:52px;
  --gutter:clamp(20px, 5vw, 48px);
  --max:1120px;
  --read:40rem;
  --r-lg:28px;
  --r-md:20px;
  --r-sm:14px;
  --ease:cubic-bezier(.22, 1, .36, 1);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#000000;
    --bg-elev:#1c1c1e;
    --fill:#1c1c1e;
    --fill-2:#2c2c2e;
    --field:#2c2c2e;
    --text:#f5f5f7;
    --text-2:#a1a1a6;
    --hair:rgba(255,255,255,.16);
    --accent:#ff7a30;
    --on-accent:#1a0c02;
    --glass:rgba(0,0,0,.66);
    --sheet:rgba(0,0,0,.94);
    --ring:rgba(255,122,48,.28);
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.5);
    --ok:#ff7a30;
    --ok-2:#ffa066;
    --bad:#ff6961;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#000000;
  --bg-elev:#1c1c1e;
  --fill:#1c1c1e;
  --fill-2:#2c2c2e;
  --field:#2c2c2e;
  --text:#f5f5f7;
  --text-2:#a1a1a6;
  --hair:rgba(255,255,255,.16);
  --accent:#ff7a30;
  --on-accent:#1a0c02;
  --glass:rgba(0,0,0,.66);
  --sheet:rgba(0,0,0,.94);
  --ring:rgba(255,122,48,.28);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.5);
  --ok:#ff7a30;
  --ok-2:#ffa066;
  --bad:#ff6961;
  color-scheme:dark;
}

/* ---------- Page-to-page transition (Chromium; others navigate instantly) ---------- */
@media (prefers-reduced-motion: no-preference){
  @view-transition{ navigation:auto; }
}
::view-transition-group(root){ animation-duration:.45s; animation-timing-function:var(--ease); }
::view-transition-old(root){ animation:pat-out .25s cubic-bezier(.4,0,.2,1) both; }
::view-transition-new(root){ animation:pat-in .45s var(--ease) both; }
@keyframes pat-out{ to{ opacity:0; } }
@keyframes pat-in{ from{ opacity:0; transform:translateY(8px); } }

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--nav-h) + 16px); }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:1.0625rem;
  line-height:1.5;
  letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:transparent;
  transition:background-color .4s var(--ease), color .4s var(--ease);
}
body.menu-open{ overflow:hidden; }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
a:focus-visible, button:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }
::selection{ background:var(--accent); color:var(--on-accent); }
h1,h2,h3,p,ul{ margin:0; }

.skip-link{ position:absolute; left:-999px; top:0; z-index:200; padding:.6rem .9rem; background:var(--text); color:var(--bg); border-radius:0 0 10px 10px; }
.skip-link:focus{ left:var(--gutter); }

.wrap{ width:min(var(--max), 100% - var(--gutter) * 2); margin-inline:auto; }
.wrap-narrow{ width:min(var(--read), 100% - var(--gutter) * 2); margin-inline:auto; }

/* ---------- Navigation (glass bar) ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--nav-h);
  background:var(--glass);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  backdrop-filter:saturate(180%) blur(22px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), background-color .3s var(--ease);
}
.nav.scrolled{ border-bottom-color:var(--hair); }
.nav-inner{ width:min(var(--max), 100% - var(--gutter) * 2); height:100%; margin-inline:auto; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.brand{ display:flex; align-items:center; gap:.6rem; font-weight:600; font-size:.9375rem; letter-spacing:-.015em; white-space:nowrap; }
.brand img{ width:28px; height:28px; border-radius:50%; object-fit:cover; background:var(--fill); }
.nav-links{ display:flex; align-items:center; gap:clamp(1.1rem, 2.4vw, 2rem); }
.nav-links a{ font-size:.875rem; color:var(--text-2); transition:color .2s var(--ease); }
.nav-links a:hover, .nav-links a[aria-current="page"]{ color:var(--text); }
.nav-actions{ display:flex; align-items:center; gap:.25rem; }

.theme-toggle, .menu-btn{
  appearance:none; border:0; background:transparent; color:var(--text); cursor:pointer;
  width:40px; height:40px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; padding:0;
  transition:background-color .2s var(--ease);
}
.theme-toggle:hover, .menu-btn:hover{ background:var(--fill); }
.theme-toggle svg{ width:18px; height:18px; display:block; }
.theme-toggle .i-moon{ display:none; }
.theme-toggle[data-mode="light"] .i-sun{ display:none; }
.theme-toggle[data-mode="light"] .i-moon{ display:block; }

.menu-btn{ display:none; position:relative; }
.menu-btn span{
  position:absolute; left:11px; right:11px; height:1.5px; background:currentColor; border-radius:2px;
  transition:transform .4s var(--ease), top .4s var(--ease);
}
.menu-btn span:nth-child(1){ top:16px; }
.menu-btn span:nth-child(2){ top:23px; }
.menu-btn.open span:nth-child(1){ top:19.5px; transform:rotate(45deg); }
.menu-btn.open span:nth-child(2){ top:19.5px; transform:rotate(-45deg); }

/* ---------- Mobile menu sheet ---------- */
.sheet{
  position:fixed; inset:0; z-index:90;
  background:var(--sheet);
  -webkit-backdrop-filter:saturate(180%) blur(32px);
  backdrop-filter:saturate(180%) blur(32px);
  padding:calc(var(--nav-h) + 28px) var(--gutter) 32px;
  display:flex; flex-direction:column;
  opacity:0; visibility:hidden;
  transition:opacity .3s var(--ease), visibility 0s linear .3s;
}
.sheet.open{ opacity:1; visibility:visible; transition-delay:0s; }
.sheet nav{ display:flex; flex-direction:column; }
.sheet nav a{
  font-size:clamp(2rem, 9vw, 2.75rem); font-weight:700; letter-spacing:-.035em; line-height:1.1;
  padding:.32em 0; border-bottom:1px solid var(--hair);
  opacity:0; transform:translateY(14px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.sheet.open nav a{ opacity:1; transform:none; transition-delay:calc(var(--i, 0) * 45ms + 70ms); }
.sheet nav a[aria-current="page"]{ color:var(--accent); }
.sheet-foot{ margin-top:auto; display:flex; flex-wrap:wrap; gap:.5rem 1.25rem; font-size:.9375rem; color:var(--text-2); }
.sheet-foot a:hover{ color:var(--text); }
.sheet.navigating nav a{ opacity:.35; }
.sheet.navigating nav a.active-link{ opacity:1; }

@media (max-width:820px){
  .nav-links{ display:none; }
  .menu-btn{ display:inline-flex; }
}

/* ---------- Headings & text ---------- */
.eyebrow{ font-size:.875rem; font-weight:600; color:var(--accent); letter-spacing:-.005em; }
.display{
  font-size:clamp(2.5rem, 1.5rem + 5vw, 5rem);
  font-weight:700; letter-spacing:-.04em; line-height:1.04;
  text-wrap:balance;
}
.display.sm{ font-size:clamp(2.1rem, 1.4rem + 3.6vw, 3.9rem); letter-spacing:-.035em; line-height:1.07; }
.lead{
  font-size:clamp(1.125rem, 1rem + .55vw, 1.4rem);
  line-height:1.45; color:var(--text-2); letter-spacing:-.016em;
  max-width:36em; margin-inline:auto; text-wrap:pretty;
}
.lead + .lead{ margin-top:1em; }
.meta{ font-size:.875rem; color:var(--text-2); letter-spacing:-.005em; }
.meta .sep{ opacity:.5; margin-inline:.4em; }

/* ---------- Page header ---------- */
.page-head{
  text-align:center;
  padding:calc(var(--nav-h) + clamp(48px, 9vw, 112px)) 0 clamp(32px, 5vw, 56px);
}
.page-head .eyebrow{ display:block; margin-bottom:.9rem; }
.page-head .display{ margin-bottom:1.1rem; }
.page-head .note{ margin-top:1.2rem; font-size:.9375rem; font-weight:600; color:var(--accent); }
.page-head .btn{ margin-top:1.75rem; }

/* ---------- Media (the image reveal) ---------- */
.media{
  position:relative; display:block; overflow:hidden;
  background:var(--fill);
  border-radius:var(--r-lg);
  aspect-ratio:var(--ar, 16 / 10);
  isolation:isolate;
}
.media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.js .media img{
  opacity:0; transform:scale(1.07); filter:blur(14px);
  transition:opacity 1s var(--ease), transform 1.4s var(--ease), filter 1s var(--ease);
  will-change:opacity, transform, filter;
}
.js .media.in img{ opacity:1; transform:none; filter:none; }
.js .media.broken img{ display:none; }
.media.wide{ --ar:16 / 9; }
.media.ultra{ --ar:2.1 / 1; }
a.media:hover img, .card:hover .media img{ transform:scale(1.035); }
.js a.media.in:hover img, .js .card:hover .media.in img{ transform:scale(1.035); }

/* ---------- Scroll reveal (everything else) ---------- */
.js [data-reveal]{
  opacity:0; transform:translateY(26px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay:calc(var(--i, 0) * 90ms);
}
.js [data-reveal].in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .js .media img, .js [data-reveal]{ opacity:1; transform:none; filter:none; transition:none; }
  .sheet, .sheet nav a{ transition-duration:.01s; transition-delay:0s !important; }
}

/* ---------- Section heads ---------- */
.section{ padding-bottom:clamp(56px, 9vw, 112px); }
.section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:clamp(20px, 3vw, 32px); }
.section-head h2{ font-size:clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem); font-weight:700; letter-spacing:-.03em; line-height:1.1; }
.text-link{ color:var(--accent); font-size:.9375rem; font-weight:500; white-space:nowrap; }
.text-link::after{ content:" \203A"; transition:margin-left .25s var(--ease); }
.text-link:hover::after{ margin-left:.2em; }

/* ---------- Cards ---------- */
.grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap:clamp(36px, 5vw, 56px) clamp(20px, 3vw, 32px); }
.card{ display:flex; flex-direction:column; }
.grid.two{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
@media (max-width:640px){ .grid.two{ grid-template-columns:1fr; } }
.card .media{ --r:var(--r-md); border-radius:var(--r-md); --ar:4 / 3; }
.card-body{ padding-top:1rem; }
.card h3{ margin-top:.3rem; font-size:1.3125rem; font-weight:600; letter-spacing:-.025em; line-height:1.2; }
.card h3 a:hover{ color:var(--accent); }
.card .excerpt{
  margin-top:.5rem; font-size:.9688rem; line-height:1.5; color:var(--text-2);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.card.feature .media{ --ar:16 / 9; border-radius:var(--r-lg); }
.card.feature .card-body{ padding-top:1.4rem; max-width:44rem; }
.card.feature h3{ font-size:clamp(1.7rem, 1.3rem + 1.6vw, 2.6rem); letter-spacing:-.035em; line-height:1.1; }
.card.feature .excerpt{ font-size:1.0625rem; -webkit-line-clamp:4; }
.card .read{ display:inline-block; margin-top:.9rem; color:var(--accent); font-size:.9375rem; font-weight:500; }
.card .read::after{ content:" \203A"; }

/* ---------- Chips / buttons ---------- */
.chips{ display:flex; flex-wrap:wrap; gap:.6rem; }
.chip{
  display:inline-flex; align-items:center; padding:.65rem 1.15rem; border-radius:999px;
  background:var(--fill); font-size:.9375rem; font-weight:500; letter-spacing:-.01em;
  transition:background-color .2s var(--ease), transform .2s var(--ease);
}
.chip:hover{ background:var(--fill-2); }
.chip:active{ transform:scale(.97); }

.btn{
  appearance:none; border:0; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.8rem 1.5rem; border-radius:999px;
  background:var(--accent); color:var(--on-accent);
  font:inherit; font-size:.9688rem; font-weight:600; letter-spacing:-.01em;
  transition:filter .2s var(--ease), transform .2s var(--ease), background-color .2s var(--ease);
}
.btn:hover{ filter:brightness(1.08); }
.btn:active{ transform:scale(.97); }
.btn.secondary{ background:var(--fill); color:var(--text); }
.btn.secondary:hover{ background:var(--fill-2); filter:none; }
.btn[disabled]{ opacity:.4; cursor:not-allowed; filter:none; transform:none; }

/* ---------- Home hero image ---------- */
.hero-media{ margin-bottom:clamp(56px, 9vw, 112px); }

/* ---------- Post ---------- */
.post-head{ text-align:center; padding:calc(var(--nav-h) + clamp(40px, 7vw, 88px)) 0 clamp(28px, 4vw, 48px); }
.post-head .back{ display:inline-block; margin-bottom:1.4rem; font-size:.9375rem; color:var(--accent); font-weight:500; }
.post-head .back::before{ content:"\2039"; margin-right:.4em; }
.post-head .display{ margin:.5rem auto 1rem; max-width:16em; }
.post-hero{ width:min(1000px, 100% - var(--gutter) * 2); margin:0 auto clamp(40px, 6vw, 72px); }
.post-hero .media{ --ar:16 / 10; }
.prose{ font-family:var(--serif); font-size:clamp(1.1875rem, 1.1rem + .35vw, 1.3125rem); line-height:1.72; letter-spacing:0; }
.prose p + p, .prose p + ul, .prose ul + p{ margin-top:1.35em; }
.prose ul{ padding-left:1.3em; }
.prose li{ padding-left:.2em; }
.prose li + li{ margin-top:.5em; }
.prose li::marker{ color:var(--accent); }
.prose strong{ font-weight:700; }

.pager{ width:min(var(--read), 100% - var(--gutter) * 2); margin:clamp(56px, 8vw, 96px) auto 0; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.pager a{
  display:block; padding:1.25rem 1.4rem; border-radius:var(--r-md);
  background:var(--bg-elev); border:1px solid var(--hair);
  transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.pager a:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.pager .dir{ display:block; font-size:.8125rem; color:var(--text-2); margin-bottom:.25rem; }
.pager .ttl{ display:block; font-size:1.0625rem; font-weight:600; letter-spacing:-.02em; line-height:1.25; }
.pager .older{ text-align:right; grid-column:2; }
.pager .newer + .older{ grid-column:2; }
@media (max-width:560px){
  .pager{ grid-template-columns:1fr; }
  .pager .older{ grid-column:1; }
}

/* ---------- Collections (books) ---------- */
.book{ display:grid; grid-template-columns:5fr 7fr; gap:clamp(24px, 5vw, 64px); align-items:start; padding-block:clamp(32px, 5vw, 56px); }
.book + .book{ border-top:1px solid var(--hair); }
.book .media{ --ar:4 / 3; position:sticky; top:calc(var(--nav-h) + 24px); }
.book h3{ margin:.3rem 0 1rem; font-size:clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); font-weight:700; letter-spacing:-.035em; line-height:1.1; }
.book p + p{ margin-top:1em; }
.book .copy p{ color:var(--text-2); font-size:1.0313rem; line-height:1.6; }
.book .btn{ margin-top:1.5rem; }
@media (max-width:820px){
  .book{ grid-template-columns:1fr; }
  .book .media{ position:relative; top:0; }
}

/* ---------- Contact ---------- */
.contact-wrap{
  width:min(760px, 100% - var(--gutter) * 2); margin:0 auto;
  background:var(--bg-elev); border:1px solid var(--hair); border-radius:var(--r-lg);
  padding:clamp(24px, 4.5vw, 48px);
  box-shadow:var(--shadow);
}
.contact-wrap h2{ text-align:center; font-size:clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem); font-weight:700; letter-spacing:-.03em; margin-bottom:.4rem; }
.contact-wrap p.lead{ text-align:center; font-size:1.0625rem; margin:0 auto clamp(24px, 4vw, 36px); }
form.contact-form{ display:grid; grid-template-columns:repeat(12, 1fr); gap:1.1rem; }
.field{ grid-column:span 6; display:flex; flex-direction:column; gap:.4rem; position:relative; }
.field.full{ grid-column:span 12; }
label{ font-size:.8125rem; font-weight:600; color:var(--text-2); letter-spacing:-.005em; }
input[type="text"], input[type="email"], textarea{
  width:100%; padding:.85rem 1rem; border:1px solid transparent; border-radius:var(--r-sm);
  background:var(--field); color:var(--text);
  font:inherit; font-size:1rem; outline:none;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
textarea{ min-height:170px; resize:vertical; }
input::placeholder, textarea::placeholder{ color:var(--text-2); opacity:.7; }
input:focus, textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 4px var(--ring); }
.contact-wrap .btn.secondary{ background:var(--field); }
.contact-wrap .btn.secondary:hover{ background:var(--fill-2); }
.actions{ grid-column:span 12; display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; justify-content:flex-end; }
.help{ font-size:.8125rem; color:var(--text-2); }
.error{ font-size:.875rem; font-weight:500; color:var(--bad); }
.honeypot{ position:absolute; left:-50000px; top:auto; width:1px; height:1px; overflow:hidden; }
.honeypot-2{ display:none !important; }
.hold-verify{
  display:flex; align-items:center; gap:.75rem; grid-column:span 12;
  border:1px dashed var(--hair); border-radius:var(--r-md); padding:.75rem; background:var(--field);
}
.hold-ui{ position:relative; flex:1; height:48px; border-radius:var(--r-sm); overflow:hidden; background:var(--bg-elev); border:1px solid var(--hair); }
.hold-fill{ position:absolute; inset:0; width:0%; background:linear-gradient(90deg, var(--ok), var(--ok-2)); transition:width .1s linear; }
.hold-btn{
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:.9375rem; font-weight:600; letter-spacing:-.01em; cursor:pointer; user-select:none; -webkit-user-select:none; touch-action:none; color:var(--text);
}
.hold-btn[aria-pressed="true"]{ opacity:.85; }
.hold-status{ min-width:max(160px, 30%); text-align:right; font-size:.8125rem; color:var(--text-2); }
@media (max-width:640px){
  .field{ grid-column:span 12; }
  .hold-verify{ flex-direction:column; align-items:stretch; }
  .hold-status{ text-align:center; min-width:0; }
}

/* ---------- Footer ---------- */
.footer{ margin-top:clamp(24px, 4vw, 48px); border-top:1px solid var(--hair); padding:clamp(36px, 5vw, 56px) 0 28px; color:var(--text-2); font-size:.875rem; }
.footer-top{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:clamp(24px, 4vw, 48px); padding-bottom:clamp(24px, 4vw, 40px); }
.footer-brand strong{ display:block; color:var(--text); font-size:1rem; font-weight:600; letter-spacing:-.015em; margin-bottom:.4rem; }
.footer-brand p{ max-width:26em; line-height:1.5; }
.footer h4{ margin:0 0 .7rem; font-size:.8125rem; font-weight:600; color:var(--text); letter-spacing:-.005em; }
.footer ul{ list-style:none; padding:0; display:flex; flex-direction:column; gap:.5rem; }
.footer a:hover{ color:var(--text); }
.footer-bottom{ padding-top:20px; border-top:1px solid var(--hair); font-size:.8125rem; }
@media (max-width:700px){
  .footer-top{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; }
}

/* ---------- Font Awesome icons (social links, tip jar) ---------- */
.ico{ display:inline-block; flex:none; width:1.25em; margin-right:.5em; text-align:center; font-size:1em; line-height:1; }
svg.ico{ height:1em; vertical-align:-.125em; }
.chip, .btn, .footer li a, .sheet-foot a{ align-items:center; }
.chip .ico{ color:var(--accent); }
.footer li a, .sheet-foot a{ display:inline-flex; }
.footer li a .ico{ color:var(--text-2); }
.footer li a:hover .ico{ color:var(--accent); }
.sheet-foot a .ico{ color:var(--accent); }
.btn .ico{ width:auto; margin-right:.55em; }