/* Ink in the Wind: colours are sampled from the book cover. */

@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/eb-garamond-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/eb-garamond-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "EB Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/eb-garamond-latin-400-italic.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "EB Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/eb-garamond-latin-ext-400-italic.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/eb-garamond-latin-500-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/eb-garamond-latin-ext-500-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --sage: #B0C4A8;        /* the cover field */
  --sage-deep: #8DA585;   /* rules and marks on paper */
  --sage-ink: #34412F;    /* secondary text on sage */
  --paper: #F6F7F2;       /* the cover's white */
  --ink: #1C1E1A;
  --ink-soft: #4E554B;
  --rule: #D6DCD0;
  --gold: #D2B036;        /* the cover's calligraphy */
  --gold-hover: #DCC05A;
  --enso-edge: #8A9586;    /* grey edge of the scanned brush on the cover */
  --enso-grain: #8F988C;

  --serif: "EB Garamond", Garamond, "Hoefler Text", "Times New Roman", serif;

  /* A classical scale: 16 · 20 · 24 · 30 · 36 · 48 · 72 */
  --step-0: 1.25rem;
  --step-1: 1.5rem;
  --step-2: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem);
  --step-3: clamp(1.875rem, 1.5rem + 1.6vw, 2.25rem);
  --step-5: clamp(3.25rem, 1.6rem + 7.4vw, 7rem);

  --measure: 34rem;
  --hang: 7rem;
  --gutter: 1.25rem;
  --section-gap: clamp(4rem, 3rem + 4vw, 7rem);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--sage);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--step-0);
  line-height: 1.6;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3, p, ul, ol, dl, figure, blockquote { margin: 0; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 1px; }

cite { font-style: italic; }
i[lang] { font-style: italic; }

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  padding: 0.5rem 1rem;
  background: var(--paper);
  z-index: 10;
}
.skip:focus { top: 1rem; }

/* Hero: the cover, brought to life. */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "enso" "pitch" "author";
  row-gap: 1.5rem;
  max-width: 78rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 2rem + 4vw, 6rem) var(--gutter) clamp(3rem, 2rem + 5vw, 6rem);
  overflow-x: clip;
}

.hero__head { grid-area: head; }

.hero__title {
  font-size: var(--step-5);
  font-style: italic;
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: lowercase;
  text-wrap: balance;
}

.hero__subtitle {
  margin-top: 0.35em;
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);
  line-height: 1.2;
  text-transform: lowercase;
}

.hero__enso {
  grid-area: enso;
  width: min(100%, 34rem);
  justify-self: center;
}

.enso { display: block; width: 100%; height: auto; overflow: visible; }
.enso__drops { fill: var(--paper); }
/* The cover's brush, in three tones: half-loaded bristles, solid ink with a scanned edge, and grey grain. */
.enso__faint { fill: var(--paper); fill-opacity: 0.5; }
.enso__body {
  fill: var(--paper);
  stroke: var(--enso-edge);
  stroke-width: 0.8;
  stroke-opacity: 0.55;
  paint-order: stroke;
}
.enso__grain { fill: var(--enso-grain); fill-opacity: 0.8; }

.hero__pitch { grid-area: pitch; max-width: 30rem; }

.hero__hook {
  font-size: var(--step-2);
  font-style: italic;
  line-height: 1.35;
}

.hero__author {
  grid-area: author;
  align-self: end;
  font-size: var(--step-2);
  line-height: 1.2;
}
.hero__author span {
  display: block;
  margin-top: 0.35rem;
  font-size: 1.125rem;
  color: var(--sage-ink);
}

@media (min-width: 56rem) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    grid-template-areas: "head enso" "pitch enso" "author enso";
    grid-template-rows: auto 1fr auto;
    column-gap: clamp(1rem, 3vw, 3rem);
    row-gap: 2.5rem;
    min-height: min(100svh, 58rem);
    padding-inline: clamp(2rem, 5vw, 4rem);
  }
  .hero__enso { align-self: center; width: 100%; max-width: 48rem; }
  .hero__pitch { align-self: end; }
}

/* The flick comes first, then the circle: the order Sensei Tani painted it in. */
@media (prefers-reduced-motion: no-preference) {
  .enso__drops ellipse {
    animation: flick 0.7s cubic-bezier(0.2, 0.8, 0.25, 1) both;
    animation-delay: calc(0.2s + var(--i) * 24ms);
  }
  .enso__path {
    stroke-dasharray: 1 1;
    animation: draw 1.8s cubic-bezier(0.55, 0.05, 0.3, 1) 0.95s both;
  }
}

@keyframes flick {
  from { opacity: 0; translate: -26px 14px; }
}
@keyframes draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

/* Buttons */

.buy {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.btn {
  display: inline-block;
  padding: 0.7em 1.3em 0.75em;
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  font-size: 1.1875rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  color: var(--ink);
  transition: background-color 0.15s ease;
}
.btn--gold { background: var(--gold); border-color: var(--gold); }
.btn--gold:hover { background: var(--gold-hover); border-color: var(--gold-hover); }
.btn--line:hover { background: rgb(28 30 26 / 0.07); }

.buy__note {
  margin-top: 0.85rem;
  font-size: 1rem;
  color: var(--sage-ink);
}

/* The paper: a hanging scroll mounted on the cover's sage. */

.paper {
  max-width: 60rem;
  margin: 0 auto;
  padding-block: var(--section-gap);
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .34 0 0 0 0 .28 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  box-shadow: 0 1px 0 rgb(52 65 47 / 0.12), 0 18px 40px -24px rgb(52 65 47 / 0.45);
}

.chapter {
  display: grid;
  grid-template-columns:
    [full-start] var(--gutter)
    [hang-start text-start] minmax(0, 1fr)
    [text-end hang-end] var(--gutter)
    [full-end];
  row-gap: 1.1em;
  align-content: start;
}
@media (min-width: 52rem) {
  .chapter {
    grid-template-columns:
      [full-start] minmax(var(--gutter), 1fr)
      [hang-start] var(--hang)
      [text-start] minmax(0, var(--measure))
      [text-end] var(--hang)
      [hang-end] minmax(var(--gutter), 1fr)
      [full-end];
  }
}
.chapter > * { grid-column: text; }
.chapter + .chapter { margin-top: var(--section-gap); }

.chapter h2 {
  font-size: var(--step-3);
  font-weight: 400;
  line-height: 1.15;
  margin-bottom: 0.25em;
}
.chapter h2 cite { font-style: italic; }

.chapter h3 {
  margin-top: 1em;
  font-size: var(--step-1);
  font-weight: 500;
  line-height: 1.25;
}

.chapter p { hanging-punctuation: first; }

/* Pull quotes hang into the left margin, marked by a short dry-brush stroke. */
.pull {
  grid-column: hang-start / text-end;
  margin-block: 1.4em;
}
.pull blockquote {
  position: relative;
  padding-left: 1.6rem;
}
.pull blockquote::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  bottom: 0.15em;
  min-height: 1.6em;
  width: 6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 100' preserveAspectRatio='none'%3E%3Cpath d='M1 0C4 0 5.6 3 5.4 9L4.6 72C4.4 88 3.6 96 2.6 100 2.2 92 1.6 80 1.2 66L.4 10C.3 3 0 0 1 0Z' fill='%238DA585'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
.pull blockquote p {
  font-size: var(--step-2);
  font-style: italic;
  line-height: 1.38;
  text-wrap: pretty;
}
.pull figcaption {
  margin-top: 0.8rem;
  padding-left: 1.6rem;
  font-size: 1rem;
  color: var(--ink-soft);
}

@media (min-width: 52rem) {
  .pull blockquote, .pull figcaption { padding-left: 0; }
  .pull blockquote::before { left: calc(-1.6rem - 6px); }
}

.nowrap { white-space: nowrap; }

.question {
  margin-top: 1.2em;
  font-size: var(--step-2);
  line-height: 1.35;
  text-wrap: balance;
}

/* About the book: the cover hangs into the margin like a plate, text wraps beside it. */
.book-intro { display: flow-root; }
.book-intro > p { margin-top: 1.1em; }
.book-intro__cover {
  width: min(62%, 15rem);
  margin: 0 auto 2.5rem;
  box-shadow: 0 1px 2px rgb(28 30 26 / 0.18), 0 14px 30px -12px rgb(28 30 26 / 0.35);
}

@media (min-width: 52rem) {
  .book-intro__cover {
    float: left;
    width: 14rem;
    margin: 0.35rem 2.5rem 1.5rem calc(-1 * var(--hang));
  }
}

/* About the author: the portrait hangs into the margin the same way as the cover. */
.author-bio { display: flow-root; }
.author-bio > p + p { margin-top: 1.1em; }
.author-photo {
  width: min(55%, 13rem);
  margin: 0.4rem 0 2rem;
  border-radius: 2px;
}

@media (min-width: 52rem) {
  .author-photo {
    float: left;
    width: 12rem;
    margin: 0.35rem 2.5rem 1.25rem calc(-1 * var(--hang));
  }
}

.contents {
  padding: 0;
  list-style: none;
  display: grid;
  row-gap: 0.45em;
}
.contents li {
  position: relative;
  padding-left: 1.4rem;
}
.contents li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.62em;
  width: 0.42rem;
  height: 0.36rem;
  border-radius: 50% 45% 55% 40%;
  background: var(--sage-deep);
}

/* Lineage: a real sequence, so it reads top to bottom along one line. */
.lineage {
  list-style: none;
  padding: 0;
  margin-top: 0.6em;
}
.lineage li {
  position: relative;
  padding: 0 0 1.8rem 2rem;
}
.lineage li::before {
  content: "";
  position: absolute;
  left: 0.32rem;
  top: 0.75em;
  bottom: -0.75em;
  width: 1px;
  background: var(--sage-deep);
}
.lineage li:last-child { padding-bottom: 0; }
.lineage li:last-child::before { display: none; }
.lineage li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.48em;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--sage-deep);
}
.lineage .lineage__author::after { background: var(--gold); }
.lineage__name {
  font-size: var(--step-1);
  font-weight: 500;
  line-height: 1.3;
}
.lineage__name span {
  margin-left: 0.4em;
  font-size: 1.0625rem;
  font-weight: 400;
  font-style: italic;
  color: var(--ink-soft);
}
.lineage li > p + p { margin-top: 0.3em; }

/* Closing */
.closing .pull--closing { margin-top: 0; }

.get {
  grid-column: hang-start / hang-end;
  display: grid;
  gap: 2rem;
  margin-top: 1.5em;
  padding-top: 2.5rem;
  border-top: 1px solid var(--rule);
}
.get__cover {
  width: min(48%, 11rem);
  box-shadow: 0 1px 2px rgb(28 30 26 / 0.18), 0 12px 26px -12px rgb(28 30 26 / 0.35);
}
.get .buy { margin-top: 1.25rem; }
.get .buy__note { color: var(--ink-soft); }

@media (min-width: 52rem) {
  .get { grid-template-columns: 11rem minmax(0, 1fr); gap: 3rem; align-items: start; }
  .get__cover { width: 100%; }
}

.details {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 1.5rem;
  row-gap: 0.25rem;
  margin-top: 2rem;
  font-size: 1.0625rem;
}
.details div { display: contents; }
.details dt { color: var(--ink-soft); }
.details dd { margin: 0; font-variant-numeric: lining-nums; }

/* Footer, back on the mount. */
.foot {
  max-width: 60rem;
  margin: 0 auto;
  padding: 2.5rem var(--gutter) 3.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  font-size: 1rem;
  color: var(--sage-ink);
}
.foot a { color: var(--ink); }
.foot a + a { margin-left: 1.25rem; }

@media (min-width: 60rem) {
  .paper { border-radius: 1px; }
  .foot { padding-inline: 0; }
}

/* Legal pages */
.legal-head {
  max-width: 60rem;
  margin: 0 auto;
  padding: 2rem var(--gutter);
  font-size: var(--step-1);
  font-style: italic;
}
.legal-head a { text-decoration: none; text-transform: lowercase; }
.legal-head a:hover { text-decoration: underline; }
.legal h1 {
  font-size: var(--step-3);
  font-weight: 400;
  line-height: 1.15;
}
.legal h2 {
  margin-top: 1em;
  font-size: var(--step-1);
  font-weight: 500;
}
.legal address { font-style: normal; }
.legal .todo { background: #F3E6B5; padding: 0 0.2em; }