/* Theologos — its own stylesheet, as Tekton has its own.
   Palette and type are from the supplied brand package: Cormorant Garamond
   for display, Hanken Grotesk for text, burgundy on near-black. */

:root {
  --ink:        #111111;   /* dark bands, text on light */
  --panel:      #2a2a2a;   /* the "how it works" band */
  --burgundy:   #b3303f;   /* mark and rules on dark */
  --burgundy-d: #7a1f2b;   /* mark and accents on light */
  --grey:       #8a8a8a;
  --muted:      #d0d0d0;   /* body text on dark */
  --off-white:  #f2f2f2;
  --white:      #ffffff;

  --display: "Cormorant Garamond", Garamond, serif;
  --body:    "Hanken Grotesk", system-ui, sans-serif;

  --wrap:   1120px;
  --gutter: 24px;
  --label:  13px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--body); }
img, svg { display: block; }

.page { display: flex; flex-direction: column; min-height: 100vh; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }

/* letterspaced caps label, used for every eyebrow on the page */
.label { font-size: var(--label); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; }

/* ---------- masthead ---------- */
.masthead { background: var(--panel); color: var(--off-white); }
.masthead .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
                  gap: 16px; padding-block: 28px; }
.brand { display: flex; align-items: center; gap: 14px; color: inherit; text-decoration: none; }
.wordmark { font-family: var(--display); font-size: 22px; font-weight: 600; letter-spacing: 0.3em; line-height: 1; }

/* ---------- opening ---------- */
/* The opening runs wider than the standard column and the steps run
   narrower, so the headline opens the page out and the three steps read as a
   tighter block beneath it. The photograph is greyscale so the burgundy mark
   is the only colour on the page. */
.wrap--wide { max-width: 1360px; }
.opening { position: relative; overflow: hidden; background: var(--ink); color: var(--off-white); }
/* Anchored to the bottom: the book sits in the lower third of the frame, so
   a bottom crop keeps it whatever height the section ends up. */
.opening-bg { position: absolute; inset: 0; width: 100%; height: 100%;
              object-fit: cover; object-position: center bottom; }
.opening-veil { position: absolute; inset: 0;
                background: linear-gradient(180deg,
                  rgba(17,17,17,0.86) 0%, rgba(17,17,17,0.72) 38%,
                  rgba(17,17,17,0.28) 64%, rgba(17,17,17,0.10) 100%); }
/* The bottom padding is the gap the book sits in — the text clears the
   pages rather than printing over them. */
.opening .wrap { position: relative; display: flex; flex-direction: column;
                 align-items: center; justify-content: center; gap: 26px;
                 padding-top: clamp(48px, 7vw, 92px);
                 padding-bottom: clamp(170px, 24vw, 320px); }
.opening-mark { display: block; color: var(--burgundy);
                width: clamp(96px, 11vw, 148px); height: clamp(96px, 11vw, 148px); }
.opening h1 { margin: 0; text-align: center; max-width: 1180px; font-family: var(--display);
              font-weight: 500; font-size: clamp(34px, 5.6vw, 64px); line-height: 1.04;
              letter-spacing: -0.005em; text-wrap: balance; color: var(--off-white); }

/* ---------- how it works ---------- */
.how { background: var(--white); color: var(--ink); }
.how .wrap { max-width: 980px; padding: 72px var(--gutter) 96px; }
.how h2 { margin: 0 0 48px; color: #5f5f5f; }
/* 300px columns no longer fit three abreast in the narrower band — at
   980px the track works out to ~284px, so the floor comes down to match
   rather than letting the third step wrap onto its own row. */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 48px 40px; }
.step { display: flex; flex-direction: column; gap: 14px; border-top: 1px solid var(--burgundy-d); padding-top: 24px; }
.step-head { display: flex; align-items: center; gap: 14px; }
.step-num { width: 44px; height: 44px; border-radius: 50%; background: var(--burgundy-d); color: var(--off-white);
            display: flex; align-items: center; justify-content: center; font-family: var(--display);
            font-weight: 600; font-size: 20px; line-height: 1; font-variant-numeric: lining-nums; }
.step h3 { margin: 0; font-family: var(--display); font-weight: 500; font-size: 44px; line-height: 1.05; }
.step p { margin: 0; font-size: 17px; line-height: 1.65; color: #5f5f5f; }

/* ---------- about ---------- */
.about { background: var(--off-white); color: var(--ink); }
/* Same column as the steps above it, so the two sections share a left edge. */
.about .wrap { max-width: 980px; padding: 72px var(--gutter) 80px; display: flex; flex-direction: column; gap: 32px; }
.about h2 { margin: 0; color: #5f5f5f; }
.about p { margin: 0; max-width: 680px; font-size: 17px; line-height: 1.65; text-wrap: pretty; }

/* ---------- colophon ---------- */
.colophon { background: var(--panel); margin-top: auto; }
.colophon .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px;
                  padding: 32px var(--gutter) 48px; font-size: 14px; line-height: 1.5; color: var(--off-white); }
.colophon a { color: var(--off-white); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- opening, phone widths ---------- */
/* The section is portrait on a phone while the photograph is 3:2, so
   object-fit: cover scales it to the section's height and crops away most of
   its width — what survives is a deep zoom into the spine, not a book. Below
   this width the photograph instead sits across the foot of the section at
   its own proportions, whole, and the text block reserves its height. */
@media (max-width: 640px) {
  .opening-bg { inset: auto 0 0 0; width: 100%; height: auto; }
  /* 2400x1600, so the band is two thirds of the viewport width tall. */
  .opening .wrap { padding-top: 44px; padding-bottom: calc(66.7vw + 16px); }
  .opening-veil { background: linear-gradient(180deg,
                    rgba(17,17,17,0.92) 0%, rgba(17,17,17,0.80) 34%,
                    rgba(17,17,17,0.34) 68%, rgba(17,17,17,0.10) 100%); }
}