/* ==========================================================================
   Paul Zarou / GRCSAC
   "Ink & paper" — the site is a book: dark cover, paper pages, ink shelf.
   ========================================================================== */

:root{
  --ink:#17140f;
  --ink-2:#211d16;
  --paper:#eae7e0;
  --paper-2:#f3f1ec;
  --on-paper:#1b1813;
  --on-paper-mute:#6b6558;
  --on-ink:#efece5;
  --on-ink-mute:#9b9488;
  --brass:#a9853f;
  --brass-soft:#c8aa6e;
  --rule-ink:rgba(239,236,229,.14);
  --rule-paper:rgba(27,24,19,.14);

  --display:"Palatino Linotype","Book Antiqua",Palatino,"Iowan Old Style",Georgia,serif;
  --body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --gutter:clamp(20px,5vw,72px);
  --maxw:1240px;
}

/* This design commits to one visual world. Inverting the pages to black in
   dark mode would collapse the ink/paper contrast the whole design rests on,
   so dark mode dims the paper stock rather than flipping it. */
@media (prefers-color-scheme: dark){
  :root{ --paper:#d9d4c9; --paper-2:#e2ded4; --on-paper:#191610; --on-paper-mute:#5f5a50; --rule-paper:rgba(25,22,16,.16); }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation:none !important;transition:none !important} }
body{margin:0;background:var(--ink);color:var(--on-ink);font-family:var(--body);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.label{font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:var(--brass)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:99;background:var(--brass);color:var(--ink);padding:10px 16px}

/* ---------- masthead ---------- */
.masthead{position:sticky;top:0;z-index:20;background:rgba(23,20,15,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule-ink)}
.masthead .wrap{display:flex;align-items:center;gap:28px;height:70px}
.wordmark{font-family:var(--display);font-size:19px;text-decoration:none;white-space:nowrap}
.wordmark span{color:var(--brass)}
.mast-nav{margin-left:auto;display:flex;gap:26px;align-items:center}
.mast-nav a{font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--on-ink-mute);transition:color .2s}
.mast-nav a:hover{color:var(--on-ink)}
.mast-cta{font-size:12.5px;letter-spacing:.06em;font-weight:600;color:var(--ink) !important;background:var(--brass);padding:11px 17px;transition:background .2s}
.mast-cta:hover{background:var(--brass-soft)}
@media(max-width:860px){ .mast-nav a:not(.mast-cta){display:none} }

/* ---------- buttons ---------- */
.btn{display:inline-block;font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;padding:15px 24px;text-decoration:none;transition:all .2s;border:0;cursor:pointer;font-family:var(--body)}
.btn-solid{background:var(--brass);color:var(--ink)}
.btn-solid:hover{background:var(--brass-soft)}
.btn-line{border:1px solid var(--rule-ink);color:var(--on-ink)}
.btn-line:hover{border-color:var(--brass);color:var(--brass-soft)}

/* ---------- cover / hero ---------- */
.cover{position:relative;background:var(--ink);overflow:hidden;border-bottom:1px solid var(--rule-ink)}
.cover-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center;gap:clamp(24px,4vw,64px);min-height:min(86vh,820px)}
.cover-photo{position:relative;align-self:stretch;display:flex;align-items:flex-end;margin-left:calc(var(--gutter) * -1)}
.cover-photo img{width:100%;height:100%;object-fit:cover;object-position:center 18%;filter:grayscale(1) contrast(1.06);
  -webkit-mask-image:linear-gradient(to right,#000 62%,transparent 100%);mask-image:linear-gradient(to right,#000 62%,transparent 100%);
  animation:rise 1.1s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
.cover-copy{padding-block:clamp(48px,7vw,90px);position:relative;z-index:2}
.kicker{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.kicker::after{content:"";height:1px;flex:1;background:var(--rule-ink)}
.thesis{font-family:var(--display);font-weight:400;font-size:clamp(34px,4.9vw,66px);line-height:1.04;letter-spacing:-.015em;margin:0 0 26px;text-wrap:balance}
.thesis em{font-style:italic;color:var(--brass-soft)}
.thesis-sub{font-size:clamp(15.5px,1.25vw,18px);color:var(--on-ink-mute);max-width:52ch;margin:0 0 34px}
.cover-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.creds{display:flex;flex-wrap:wrap;margin-top:44px;border-top:1px solid var(--rule-ink);padding-top:22px}
.cred{padding-right:34px;margin-right:34px;border-right:1px solid var(--rule-ink)}
.cred:last-child{border-right:0;margin-right:0;padding-right:0}
.cred b{display:block;font-family:var(--display);font-size:27px;line-height:1;font-weight:400;font-variant-numeric:tabular-nums}
.cred span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-ink-mute)}
@media(max-width:880px){
  .cover-grid{grid-template-columns:1fr;min-height:0}
  .cover-photo{margin:0 calc(var(--gutter) * -1);max-height:56vh}
  .cover-photo img{-webkit-mask-image:linear-gradient(to bottom,#000 66%,transparent 100%);mask-image:linear-gradient(to bottom,#000 66%,transparent 100%);object-position:center 12%}
}

/* ---------- paper ---------- */
.paper{background:var(--paper);color:var(--on-paper)}
.sec{padding-block:clamp(72px,9vw,132px)}
.sec-head{display:grid;grid-template-columns:minmax(0,7.5rem) minmax(0,1fr);gap:clamp(20px,4vw,60px);align-items:baseline;margin-bottom:clamp(36px,4vw,58px)}
.sec-title{font-family:var(--display);font-weight:400;font-size:clamp(26px,2.9vw,40px);line-height:1.1;letter-spacing:-.012em;margin:0;text-wrap:balance}
@media(max-width:760px){ .sec-head{grid-template-columns:1fr;gap:14px} }
.prose{max-width:62ch;font-size:clamp(16px,1.18vw,18.5px)}
.prose p{margin:0 0 1.15em}
.prose p:last-child{margin-bottom:0}
.aside-quote{font-family:var(--display);font-style:italic;font-size:clamp(21px,2.1vw,30px);line-height:1.3;border-left:2px solid var(--brass);padding-left:clamp(18px,2vw,28px);margin:clamp(32px,3.4vw,48px) 0 0;max-width:34ch}

/* ---------- offers ----------
   No boxes. A single hairline above the group, then whitespace does the
   separating. Each offer gets room around it rather than a border pressing
   against the text. */
.offers{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(228px,1fr));
  gap:clamp(38px,4vw,64px) clamp(32px,3.4vw,56px);
  border-top:1px solid var(--rule-paper);
  padding-top:clamp(38px,4vw,58px);
}
.offer{display:flex;flex-direction:column;padding:0}
.offer-name{font-family:var(--display);font-size:clamp(19px,1.6vw,23px);margin:14px 0 10px;line-height:1.2}
.offer-price{font-family:var(--display);font-size:clamp(30px,3vw,42px);line-height:1;font-variant-numeric:tabular-nums;margin-bottom:16px}
.offer-price small{font-size:13px;font-family:var(--body);color:var(--on-paper-mute)}
.offer p{font-size:14.5px;color:var(--on-paper-mute);margin:0 0 26px;max-width:30ch;line-height:1.55}
.offer .go{margin-top:auto;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;text-decoration:none;border-bottom:1px solid var(--brass);padding-bottom:5px;align-self:flex-start;transition:color .2s}
.offer .go:hover{color:var(--brass)}
.offer.feature .offer-price{color:var(--brass)}

/* ---------- shelf ---------- */
.shelf-sec{background:var(--ink);color:var(--on-ink);border-top:1px solid var(--rule-ink)}
/* Exactly three across, two rows — evenly spaced, in publication order. */
.shelf{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(40px,4.4vw,68px) clamp(28px,3.2vw,56px);
  justify-items:center;
}
.shelf .book{width:100%;max-width:230px}
@media(max-width:900px){ .shelf{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:440px){ .shelf{grid-template-columns:minmax(0,1fr)} }
.book{text-decoration:none;display:flex;flex-direction:column;gap:14px}
.book-cover{position:relative;aspect-ratio:2/3;background:#0d0b08;box-shadow:0 22px 40px -26px #000,0 0 0 1px var(--rule-ink);overflow:hidden}
.book-cover img{width:100%;height:100%;object-fit:cover;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.book:hover .book-cover img{transform:scale(1.035)}
.book-title{font-family:var(--display);font-size:16.5px;line-height:1.25}
.book-meta{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-ink-mute);font-variant-numeric:tabular-nums}
.book:hover .book-meta{color:var(--brass-soft)}
.shelf-foot{margin-top:clamp(40px,4vw,60px);padding-top:24px;border-top:1px solid var(--rule-ink);display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.shelf-foot p{margin:0;color:var(--on-ink-mute);font-size:14.5px;max-width:52ch}

/* ---------- quote ---------- */
.quote-sec{background:var(--paper-2);color:var(--on-paper);border-top:1px solid var(--rule-paper)}
.quote{display:grid;grid-template-columns:minmax(0,7.5rem) minmax(0,1fr);gap:clamp(20px,4vw,60px)}
.quote-mark{font-family:var(--display);font-size:clamp(72px,9vw,132px);line-height:.72;color:var(--brass);opacity:.32;user-select:none}
blockquote{margin:0;font-family:var(--display);font-size:clamp(22px,2.5vw,35px);line-height:1.32;text-wrap:balance}
.attrib{margin-top:26px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-paper-mute)}
@media(max-width:760px){ .quote{grid-template-columns:1fr;gap:6px} .quote-mark{font-size:64px} }

/* ---------- close / footer ---------- */
.close-sec{background:var(--ink);color:var(--on-ink);border-top:1px solid var(--rule-ink)}
.close-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,80px);align-items:start}
@media(max-width:860px){ .close-grid{grid-template-columns:1fr} }
.signup{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap}
.signup input{flex:1 1 240px;background:transparent;border:1px solid var(--rule-ink);color:var(--on-ink);padding:14px 15px;font:inherit;font-size:15px}
.signup input::placeholder{color:var(--on-ink-mute)}
.signup input:focus{border-color:var(--brass);outline:none}
.fineprint{font-size:12.5px;color:var(--on-ink-mute);margin-top:12px}
.contact-list{list-style:none;padding:0;margin:22px 0 0}
.contact-list li{padding:13px 0;border-bottom:1px solid var(--rule-ink);display:flex;justify-content:space-between;gap:16px;font-size:15px}
.contact-list span{color:var(--on-ink-mute);font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding-top:3px}
.contact-list a{text-decoration:none;border-bottom:1px solid transparent}
.contact-list a:hover{border-bottom-color:var(--brass)}
.colophon{border-top:1px solid var(--rule-ink);padding-block:26px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:12px;color:var(--on-ink-mute)}

/* ==========================================================================
   Book pages
   ========================================================================== */
.book-page{background:var(--ink)}
.crumb{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-ink-mute);padding-top:clamp(36px,5vw,60px)}
.crumb a{text-decoration:none;border-bottom:1px solid var(--rule-ink)}
.crumb a:hover{color:var(--brass-soft);border-bottom-color:var(--brass)}

.book-hero{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start;padding-block:clamp(40px,5vw,72px) clamp(64px,8vw,110px)}
@media(max-width:820px){ .book-hero{grid-template-columns:1fr;gap:36px} }
.book-hero .cover-art{aspect-ratio:2/3;box-shadow:0 40px 70px -40px #000,0 0 0 1px var(--rule-ink);overflow:hidden;background:#0d0b08}
.book-hero .cover-art img{width:100%;height:100%;object-fit:cover}
.book-h1{font-family:var(--display);font-weight:400;font-size:clamp(32px,4.2vw,56px);line-height:1.04;letter-spacing:-.015em;margin:14px 0 10px;text-wrap:balance}
.book-sub{font-family:var(--display);font-style:italic;font-size:clamp(18px,1.9vw,25px);color:var(--brass-soft);margin:0 0 28px;line-height:1.3}
.book-facts{display:flex;flex-wrap:wrap;gap:0;margin:0 0 30px;border-top:1px solid var(--rule-ink);border-bottom:1px solid var(--rule-ink);padding-block:18px}
.book-facts div{padding-right:30px;margin-right:30px;border-right:1px solid var(--rule-ink)}
.book-facts div:last-child{border-right:0;margin-right:0;padding-right:0}
.book-facts b{display:block;font-family:var(--display);font-size:20px;font-weight:400;font-variant-numeric:tabular-nums}
.book-facts span{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-ink-mute)}
.book-body{font-size:clamp(16px,1.15vw,18px);color:var(--on-ink);max-width:60ch}
.book-body p{margin:0 0 1.15em}
.book-body p:last-of-type{margin-bottom:1.8em}
.press{font-family:var(--display);font-style:italic;font-size:clamp(18px,1.7vw,22px);line-height:1.4;border-left:2px solid var(--brass);padding-left:22px;margin:0 0 32px;color:var(--on-ink);max-width:48ch}
.press cite{display:block;font-style:normal;font-family:var(--body);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-ink-mute);margin-top:12px}

.also{background:var(--ink);border-top:1px solid var(--rule-ink)}
.also-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:24px 20px;margin-top:32px}
.also .book-title{font-size:15px}