/* ==========================================================================
   basilbaccouche.com

   Palette  cream #F7F5ED · ink #1C1C1C · maroon #5B2A2A
   Type     EB Garamond throughout.

   One family, used across its full range: 400/500/600, true italics, and
   letterspaced caps for structure. Hierarchy comes from size, weight, case
   and space rather than from a second typeface. This is the classic
   literary-press approach — a sans-serif utility layer reads efficient and
   modern, which is the opposite of what this site wants.
   ========================================================================== */

:root{
  --cream:#F7F5ED;
  --ink:#1C1C1C;
  --maroon:#5B2A2A;

  --muted:#6B5D54;                 /* warm taupe, not cool grey */

  /* Antique gold, a text accent only — quotation marks, the drop cap, the
     imprint line, blurbers' credentials. Every rule on the site is maroon. */
  --gold-deep:#8A6B2E;             /* ornament on cream — 4.56:1 */
  --rule:rgba(91,42,42,.22);       /* hairlines, tinted toward the maroon */
  --on-maroon:rgba(247,245,237,.8);
  --on-maroon-strong:#F7F5ED;

  --serif:"EB Garamond",Georgia,"Times New Roman",serif;

  --content-w:86%;
  --content-max:1400px;
  --header-pad:4%;
  --header-h:86px;

  --space-section:clamp(48px, 5.2vw, 84px);

  /* 390px → 1440px */
  --fs-title:clamp(2.375rem, 16.5px + 4.19vw, 4.75rem);   /* 38 → 76 */
  --fs-subtitle:clamp(1.1875rem, 16.4px + .667vw, 1.625rem);
  --fs-quote:clamp(1.4375rem, 17.4px + 1.524vw, 2.375rem);
  --fs-lede:clamp(1.3125rem, 19.4px + .4vw, 1.5625rem);
  --fs-body:clamp(1.125rem, 17.26px + .19vw, 1.25rem);    /* 18 → 20 */

  --fs-label:.83rem;
}

@media (max-width:767px){
  :root{--content-w:88%;--header-pad:5.9%;--header-h:70px}
}

/* --- reset ---------------------------------------------------------------- */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--serif);
  font-size:var(--fs-body);
  line-height:1.56;
  font-feature-settings:"onum" 1,"kern" 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{display:block;max-width:100%;height:auto}
a{color:inherit}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

.container{
  width:var(--content-w);
  max-width:var(--content-max);
  margin-inline:auto;
}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:var(--cream);padding:12px 18px;text-decoration:none;
}
.skip-link:focus{left:8px;top:8px}

:focus-visible{outline:2px solid var(--maroon);outline-offset:3px}
.site-header :focus-visible,.site-footer :focus-visible{outline-color:var(--cream)}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* --- structural caps ------------------------------------------------------ */

.label,
.section-label{
  font-family:var(--serif);
  font-size:calc(var(--fs-label) * 1.28);
  font-weight:600;
  font-variant-caps:all-small-caps;
  letter-spacing:.15em;
  color:var(--maroon);
}

/* The same hairline the section labels draw, standing on its own where a
   label was removed — so the rule stays but its text height doesn't. */
.rule{
  margin-block:var(--space-section) 22px;
  border:0;border-top:1px solid var(--rule);
  height:0;
}

.section-label{
  margin-block:var(--space-section) 20px;
  padding-bottom:13px;
  border-bottom:1px solid var(--rule);
}

/* --- header --------------------------------------------------------------- */

.site-header{
  position:sticky;top:0;z-index:50;
  height:var(--header-h);
  background:var(--maroon);
}

.site-header__inner{
  height:100%;
  padding-inline:var(--header-pad);
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(10px, 2vw, 24px);
}

/* Logo and nav shrink just enough to keep all three links on one line at
   every width down to 320px — no hamburger for three short words. */
.logo{
  font-size:clamp(13px, 3.6vw, 21px);
  font-weight:500;
  font-variant-caps:all-small-caps;
  letter-spacing:clamp(.08em, .4vw, .14em);
  color:var(--on-maroon-strong);
  text-decoration:none;
  white-space:nowrap;
}

.nav{display:flex;align-items:center;gap:clamp(9px, 2.3vw, 36px);flex-shrink:0}
.nav a{
  font-size:clamp(12.5px, 3.3vw, 18.5px);
  font-weight:400;
  font-variant-caps:all-small-caps;
  letter-spacing:clamp(.06em, .35vw, .12em);
  white-space:nowrap;
  color:var(--on-maroon);
  text-decoration:none;
  padding-bottom:4px;
  border-bottom:1px solid transparent;
  transition:color .18s ease,border-color .18s ease;
}
.nav a:hover{color:var(--on-maroon-strong)}
.nav a[aria-current="page"]{
  color:var(--on-maroon-strong);
  border-bottom-color:var(--on-maroon-strong);
}

/* --- hero: text and cover side by side ------------------------------------ */

.hero{
  padding-top:clamp(24px, 2.6vw, 44px);
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);
  column-gap:6%;
  align-items:center;
}

/* Centred within the left column, as the jacket is within the right one. */
.hero__text{text-align:center}

.hero__imprint{
  margin:0 0 22px;
  font-size:calc(var(--fs-label) * 1.28);
  font-weight:600;
  font-variant-caps:all-small-caps;
  letter-spacing:.17em;
  color:var(--gold-deep);
}

.hero__title{
  margin:0;
  font-weight:500;
  font-size:var(--fs-title);
  line-height:.96;
  letter-spacing:-.016em;
  text-wrap:balance;
}

.hero__subtitle{
  max-width:44ch;
  margin:26px auto 0;
  font-style:italic;font-weight:400;
  font-size:var(--fs-subtitle);
  line-height:1.26;
  color:rgba(28,28,28,.84);
  text-wrap:balance;     /* even line lengths at any page width */
}

/* Capped so the whole hero clears a 900px viewport — at full column width
   the jacket ran 829px tall and pushed the title down the page. */
.hero__cover{max-width:470px;justify-self:center}   /* centred in its column, not flush right */
.hero__cover a{display:block}
.hero__cover img{
  box-shadow:0 22px 50px rgba(28,28,28,.17);   /* the jacket alone */
  transition:box-shadow .2s ease, transform .2s ease;
}
.hero__cover a:hover img{
  box-shadow:0 26px 58px rgba(28,28,28,.24);
  transform:translateY(-2px);
}

/* --- pre-order buttons ---------------------------------------------------- */

.preorder{margin-top:38px}

.preorder__label{
  margin:0 0 15px;
  font-size:calc(var(--fs-label) * 1.28);
  font-weight:600;
  font-variant-caps:all-small-caps;
  letter-spacing:.17em;
  color:var(--muted);
}

.preorder__buttons{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:15px 30px;
  border:1px solid var(--maroon);border-radius:0;
  font-family:var(--serif);
  font-size:1.2rem;font-weight:600;
  font-variant-caps:all-small-caps;letter-spacing:.11em;
  text-decoration:none;cursor:pointer;
  transition:background .18s ease,color .18s ease;
}
.btn--primary{background:var(--maroon);color:var(--cream)}
.btn--primary:hover{background:#4a2121;border-color:#4a2121}
.btn--ghost{background:transparent;color:var(--maroon)}
.btn--ghost:hover{background:var(--maroon);color:var(--cream)}
.btn[disabled]{opacity:.5;cursor:default}

/* --- display quotes ------------------------------------------------------- */

/* Two critics side by side, divided by a hairline — the arrangement of a
   jacket's back cover. Sharing the width keeps both at display scale without
   adding a second full screen of height. */
.quotes{
  margin-top:var(--space-section);
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:start;
}
.quote{
  margin:0;
  padding-inline:clamp(18px, 3.4vw, 54px);
  text-align:center;
}
.quote + .quote{border-left:1px solid var(--rule)}

.quote blockquote .qm{color:var(--gold-deep)}   /* gilded quotation marks */

.quote blockquote{
  margin:0;
  hanging-punctuation:first;
  font-weight:400;
  font-size:clamp(1.375rem, 13.9px + 1.15vw, 1.9rem);   /* 22 → 30.5 */
  line-height:1.28;
  text-wrap:balance;
}
.quote figcaption{
  margin-top:24px;
  font-variant-caps:normal;text-transform:none;letter-spacing:normal;
}
.quote__name{
  display:block;
  font-size:1.2rem;font-weight:600;line-height:1.3;
}
.quote__work{
  display:block;margin-top:4px;
  font-style:italic;font-size:1rem;color:var(--gold-deep);
}

/* --- praise --------------------------------------------------------------- */

/* Two text columns use the width without stretching any line past reading
   length. Each blurb is kept whole rather than split across the gutter. */
/* An explicit grid rather than CSS multi-column, because the two columns
   need different widths: the left holds two blurbs and the right three, so
   narrowing the left makes its text run longer and the two columns finish
   level. Multi-column can only produce equal widths. */
.blurbs{
  display:grid;
  grid-template-columns:38% 57%;   /* uneven on purpose — see note above */
  column-gap:5%;
  font-size:clamp(1.0625rem, 15.9px + .125vw, 1.1875rem);
  line-height:1.42;
}
.blurbs p{margin-bottom:1.15em;hanging-punctuation:first}
.blurbs__col > p:last-child{margin-bottom:0}
.blurbs em{font-style:italic}

/* Two-column mode only: each column stretches to the taller one, so
   distributing the leftover space between its blurbs brings both columns
   level. The left column holds two blurbs, so its single gap absorbs the
   difference — subtly, since the columns are only 3–29px apart to begin. */
@media (min-width:1024px){
  .blurbs__col{
    display:flex;flex-direction:column;
    justify-content:space-between;
  }
  .blurbs__col > p:last-child{margin-bottom:0}
}

.blurbs cite{display:block;margin-top:.38em;font-style:normal}

/* The blurbers are the draw: mixed case, larger and heavier than the quote,
   so the names carry rather than recede into a small-caps footnote. */
.blurb__name{
  display:block;
  font-size:1.16em;font-weight:600;line-height:1.22;
  letter-spacing:.004em;
  color:var(--maroon);
}
.blurb__work{
  display:block;margin-top:.1em;
  font-size:.9em;font-style:italic;line-height:1.36;
  color:var(--gold-deep);
}

/* --- about the book ------------------------------------------------------- */

.book__grid{
  /* Wide enough that the text finishes wrapping beside the photograph rather
     than leaving a few very long lines dangling underneath it. */
  max-width:1150px;
  margin-inline:auto;           /* centred, so the slack splits evenly rather
                                   than piling up to the right of the photo */
  display:flow-root;            /* contains the float */
}

.book__figure{
  float:right;
  width:38%;
  margin:.35em 0 1.4em 2.8em;
}

.prose p{text-wrap:pretty;margin-bottom:.85em}   /* no one-word last lines */
.book__figure img{border:1px solid var(--rule)}

.prose__lede{
  font-size:var(--fs-lede);
  font-weight:500;
  line-height:1.28;
  margin-bottom:.8em;
}

.prose__first::first-letter{
  float:left;
  font-weight:500;
  font-size:3.4em;
  line-height:.86;
  margin:.06em .09em 0 0;
  color:var(--maroon);
}

/* A descriptive caption plus a source citation reads as a sentence, not a
   label, so it keeps normal case rather than the small caps used for the
   one-line photo credits. */
.book__figure figcaption{
  margin-top:14px;
  font-variant-caps:normal;letter-spacing:normal;
  font-size:1rem;font-style:italic;line-height:1.4;
  color:var(--muted);
}
.book__figure figcaption cite{
  display:block;margin-top:6px;
  font-style:normal;font-size:.9rem;
}

/* Stacked: the figure has to come first in the source for the float above to
   work, so flex order moves it below the text once it is no longer floated. */
/* Between these widths the hero's text column is too narrow for both
   pre-order buttons on one line; stacking them to equal width reads as a
   pair rather than as an accidental wrap. */
@media (min-width:1024px) and (max-width:1199px){
  .preorder__buttons{flex-direction:column;align-items:stretch}
}

@media (max-width:1199px){
  .book__grid{max-width:34em;display:flex;flex-direction:column}
  .book__figure{
    order:1;
    float:none;width:auto;max-width:440px;
    margin:34px 0 0;
  }
}

/* --- newsletter ----------------------------------------------------------- */

.newsletter{
  margin-top:var(--space-section);
  padding:clamp(36px, 4.4vw, 64px) clamp(20px, 3vw, 48px) 0;
  border-top:1px solid var(--rule);
  text-align:center;
}

.newsletter__intro{
  max-width:26em;margin:0 auto 26px;
  font-style:italic;
  font-size:var(--fs-lede);line-height:1.34;
}

.newsletter__row{
  display:flex;justify-content:center;align-items:stretch;gap:12px;
  flex-wrap:wrap;
}

.newsletter__row input[type="email"]{
  width:330px;max-width:100%;
  padding:15px 18px;
  background:transparent;color:var(--ink);
  border:1px solid var(--rule);border-radius:0;
  font-family:var(--serif);font-size:1.0625rem;
}
.newsletter__row input[type="email"]:focus{border-color:var(--maroon);outline:none}
.newsletter__row input[type="email"]::placeholder{color:#544840;font-style:italic}

/* --- forms ---------------------------------------------------------------- */

/* Hierarchy: the heading leads, the labels recede, the button is the only
   maroon thing on the page and therefore the obvious action. Previously the
   input text was larger than the heading and everything was maroon. */
.form{max-width:460px;margin-inline:auto}

.form .btn{
  display:flex;width:max-content;
  margin:10px auto 0;   /* centred beneath the fields */
}
.form .form-status{text-align:center}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}

.field{margin-bottom:12px}
.field label{
  display:block;margin-bottom:4px;
  font-size:.96rem;font-weight:600;   /* ~20% up */
  font-variant-caps:all-small-caps;letter-spacing:.12em;
  color:#2B2522;              /* 13.8:1 on cream */
}
.field .req{letter-spacing:.02em;font-variant-caps:normal;color:#544840;font-weight:400;font-style:italic}

.field input,
.field textarea{
  width:100%;
  padding:8px 0;
  background:transparent;color:var(--ink);
  border:0;border-bottom:1px solid rgba(91,42,42,.38);border-radius:0;
  font-family:var(--serif);font-size:1.275rem;   /* ~20% up */
}
.field input:focus,
.field textarea:focus{border-bottom-color:var(--maroon);outline:none}
.field textarea{min-height:92px;resize:vertical;line-height:1.5}

.form-status{margin-top:14px;font-style:italic}
.form-status[hidden]{display:none}
.form-status--error{color:var(--maroon)}

/* --- page heads ----------------------------------------------------------- */

.page-head{padding-top:clamp(26px, 2.8vw, 42px)}
.page-head h1{
  margin:0;
  font-weight:500;
  font-size:clamp(1.75rem, 12px + 1.95vw, 2.5rem);
  line-height:1.08;letter-spacing:-.014em;
}

/* --- contact -------------------------------------------------------------- */

.contact__body{padding-top:clamp(44px, 5vw, 80px)}

/* --- about ---------------------------------------------------------------- */

/* Centred at every width: label, heading, portrait, then the bio. The bio's
   block is centred but its type stays ranged left — centred running text
   loses the left edge on every line return. */
.about__grid{
  padding-top:clamp(28px, 3vw, 50px);
  display:grid;
  grid-template-columns:1fr;
  justify-items:center;
}

.about__text{display:contents}

.about__grid h1{
  order:1;
  margin:0 auto;
  max-width:20ch;
  font-weight:500;
  font-size:clamp(1.445rem, 10.1px + 2.095vw, 2.529rem);   /* a further 15% down */
  line-height:1.06;letter-spacing:-.014em;
  text-align:center;
  text-wrap:balance;
}

.about__portrait{
  order:2;
  width:100%;max-width:300px;
  margin:clamp(20px, 2.2vw, 32px) auto 0;
  text-align:center;
}

.about__bio{
  order:3;
  max-width:450px;   /* wider than the photographs, for a readable measure */
  margin:clamp(22px, 2.4vw, 34px) auto 0;
  text-align:left;
}
.about__bio p{margin-bottom:.8em}
.about__bio em{font-style:italic}

.about__portrait figcaption,
.about__snapshot figcaption{
  margin-top:10px;
  font-size:calc(var(--fs-label) * 1.24);
  font-variant-caps:all-small-caps;letter-spacing:.1em;
  text-align:center;
  color:var(--muted);
}

.about__portrait img,
.about__snapshot img{border:1px solid var(--rule)}

.about__second{margin-top:clamp(20px, 2.1vw, 32px)}
.about__snapshot{max-width:300px;margin-inline:auto;text-align:center}

/* --- footer --------------------------------------------------------------- */

/* The about page ends on a photograph, which needs less air beneath it than
   a full section does. */
.site-footer--tight{margin-top:clamp(26px, 2.8vw, 42px) !important}

.site-footer{
  margin-top:var(--space-section);
  background:var(--maroon);
  color:var(--on-maroon);
  padding:clamp(26px, 2.9vw, 44px) 0;
}

/* Copyright above the rule, colophon below it. The page names that used to
   sit here are already in the header. */
.site-footer__top{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:10px 32px;
}

.site-footer__copyright{
  margin:0;
  flex:1 1 26em;
  font-size:1rem;font-style:italic;
  line-height:1.4;
}

.site-footer__social{
  display:inline-flex;align-items:center;gap:9px;flex-shrink:0;
  font-size:calc(var(--fs-label) * 1.26);
  font-variant-caps:all-small-caps;letter-spacing:.13em;
  color:var(--on-maroon);text-decoration:none;
  transition:color .18s ease;
}
.site-footer__social:hover{color:var(--on-maroon-strong)}
.site-footer__social svg{width:16px;height:16px;display:block}

.site-footer__colophon{
  margin:14px 0 0;
  padding-top:13px;
  border-top:1px solid rgba(247,245,237,.18);
  font-size:calc(var(--fs-label) * 1.2);
  font-variant-caps:all-small-caps;letter-spacing:.11em;
  opacity:.74;
}

/* --- 404 ------------------------------------------------------------------ */

.notfound{padding:clamp(90px,11vw,170px) 0;text-align:center}
.notfound h1{
  font-weight:500;
  font-size:clamp(2rem, 14px + 2.9vw, 3.5rem);
  line-height:1.06;margin:0 0 20px;
}

/* --- narrow screens ------------------------------------------------------- */

@media (max-width:1023px){
  .hero{grid-template-columns:1fr;row-gap:46px;text-align:center;justify-items:center}
  .hero__subtitle{max-width:32ch;margin-inline:auto}
  .hero__cover{max-width:340px;justify-self:center}
  .preorder__buttons{justify-content:center}

  .quotes{grid-template-columns:1fr}
  .quote{padding-inline:0}
  .quote + .quote{
    border-left:0;
    border-top:1px solid var(--rule);
    margin-top:46px;padding-top:46px;
  }

  .blurbs{grid-template-columns:1fr;row-gap:0}
  .blurbs__col:first-child > p:last-child{margin-bottom:1.15em}

  .newsletter{padding-inline:0}
}

@media (max-width:560px){
  .form__row{grid-template-columns:1fr;gap:0}
  .newsletter__row input[type="email"],
  .newsletter__row .btn{width:100%}
  .preorder__buttons{flex-direction:column;align-items:stretch}
  .btn,
  .form .btn{width:100%;padding:15px 16px;letter-spacing:.1em;font-size:.9rem}
  .prose__first::first-letter{font-size:3em}
  .site-footer__inner{flex-direction:column;align-items:flex-start;gap:20px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}