/* "Black Portrait" (Don's pick, 11-07): black-and-white portrait hero, League Gothic headings, Montserrat text,
   warm light sections, one grouped index of every page. Copied from the Look 5 mock Don saw. */
:root {
  --ink: #111; --text: #1d1d1d; --muted: #6b655f; --line: #cfc9c2;
  --black: #0b0b0b; --band: #1c1c1c; --light: #ece8e4; --paper: #f7f6f3; --white: #fff; --foot: #3b3b3b;
  --warn: #555;
  /* no accent colour: Don's Look 5 is black and white on purpose (11-07). Actions use ink on light, white on dark. */
  --accent: var(--ink); --accent-ink: #fff; --accent-hover: #333;
  --head: "League Gothic", "Arial Narrow", Impact, sans-serif;
  --font: Montserrat, Arial, sans-serif;
  /* type scale: every font-size below uses one of these */
  --t-xs: 11px; --t-sm: 12px; --t-meta: 13px; --t-base: 15px; --t-body: 16px; --t-lg: 17px; --t-xl: 20px; --t-2xl: 24px;
  --d-xs: 28px; --d-sm: 34px; --d-md: 40px; --d-lg: 58px; --d-xl: 72px; --d-phone: 84px; --d-2xl: 88px; --d-3xl: 116px;
  /* content edge: nav, titles, sections and footer share it */
  --edge: max(24px, calc((100% - 980px) / 2));
  --ease: 150ms ease;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font); color: var(--text); background: var(--black); font-size: var(--t-base); line-height: 1.7; }
a { color: inherit; }
h1, h2, h3, .card h3, .take q { text-wrap: balance; }
p, li { text-wrap: pretty; }
.card small, .take span, .prose blockquote p + p, .pkg .price, .sources a, .row li em, .related li em, .intro .src, .site-foot { font-variant-numeric: tabular-nums; }
a, .button, .btns a, .goal, .card, .wide-btn { transition: background-color var(--ease), color var(--ease), border-color var(--ease), text-decoration-color var(--ease); }
a:focus-visible, button:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.hero :focus-visible, .band :focus-visible, .start :focus-visible, .cta.peak :focus-visible, .site-foot :focus-visible { outline-color: #fff; }
main { background: var(--light); }
.wrap { max-width: 980px; margin: 0 auto; }
.wrap.narrow { max-width: 720px; }
.small, .opt { font-size: var(--t-meta); color: var(--muted); }
.preview-bar { background: var(--warn); color: #fff; text-align: center; padding: 6px 16px; font-size: var(--t-meta); }
.tag { display: inline-block; font-size: var(--t-xs); font-weight: 600; letter-spacing: .5px; padding: 0 7px; border: 1px solid currentColor; vertical-align: middle; text-decoration: none; margin-left: 6px; line-height: 1.6; }
.tag.draft { color: var(--warn); }
.tag.peak { color: var(--ink); }

/* ---- top bar (on the hero and on every inner page) ---- */
.bar { display: flex; justify-content: space-between; align-items: center; padding: 22px var(--edge); }
.hero .bar { padding-left: 72px; padding-right: 72px; }
.mark { width: 56px; height: 56px; flex: none; border: 3px solid #fff; border-radius: 50%; display: grid; place-items: center; font-family: var(--head); font-size: var(--d-xs); color: #fff; letter-spacing: .5px; text-decoration: none; line-height: 1; }
.bar nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 40px; }
.bar nav a { color: #fff; text-decoration: none; font-size: var(--t-base); letter-spacing: 2.2px; text-transform: uppercase; font-weight: 400; }
.bar nav a[aria-current] { border-bottom: 2px solid #fff; }
.bar nav a:hover { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.55); text-underline-offset: 6px; text-decoration-thickness: 2px; }

/* ---- home hero ---- */
.hero { position: relative; height: 100vh; min-height: 760px; background: #000; overflow: hidden; }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; filter: grayscale(1) contrast(1.15) brightness(.82); }
.hero:after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,.1) 45%, rgba(0,0,0,0) 70%), linear-gradient(0deg, rgba(0,0,0,.55), transparent 35%); }
.hero .bar { position: absolute; top: 0; left: 0; right: 0; z-index: 2; }
.name { position: absolute; z-index: 2; left: 72px; bottom: 24%; color: #fff; }
.name h1 { font-family: var(--head); font-weight: 400; font-size: var(--d-3xl); line-height: .86; margin: 0; text-transform: uppercase; letter-spacing: .5px; }
.name p { font-weight: 300; font-size: var(--d-xs); margin: 12px 0 0; color: rgba(255,255,255,.85); }
.ph { position: absolute; z-index: 2; right: 8px; bottom: 4px; font-size: var(--t-xs); color: rgba(255,255,255,.85); letter-spacing: .3px; text-shadow: 0 1px 2px rgba(0,0,0,.9); }
.hero > .ph { right: 14px; bottom: 10px; font-size: var(--t-xs); }

/* ---- inner-page band (title on black) ---- */
.band { background: var(--black); color: #fff; padding-bottom: 56px; }
.band h1, .band .kicker, .band .lede { max-width: 1028px; margin-left: auto; margin-right: auto; padding: 0 24px; }
.band h1 { font-family: var(--head); font-weight: 400; font-size: var(--d-2xl); line-height: .95; text-transform: uppercase; margin-top: 40px; margin-bottom: 0; letter-spacing: .5px; }
.band.article h1, .band.article .kicker, .band.article .lede { max-width: 768px; }
.band .kicker { margin-top: 40px; margin-bottom: -28px; font-size: var(--t-meta); letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.6); }
.band .kicker a { text-decoration: none; }
.band .kicker + h1 { margin-top: 40px; }
.band .lede { font-weight: 300; font-size: var(--t-xl); line-height: 1.45; color: rgba(255,255,255,.65); margin-top: 18px; margin-bottom: 0; }

/* ---- where should I start ---- */
.start { background: var(--band); color: #fff; text-align: center; padding: 56px 24px 60px; }
.start h2 { font-weight: 600; font-size: var(--t-xl); line-height: 1.45; margin: 0 auto 22px; max-width: 560px; }
.goals { max-width: 620px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.goal { flex: 0 0 calc((100% - 16px) / 3); background: #f4f2ef; color: var(--ink); text-decoration: none; font-size: var(--t-base); padding: 11px 10px; font-weight: 500; }
.goal:hover { background: #fff; }
.wide-btn { display: block; max-width: 620px; margin: 10px auto 0; background: #fff; color: #000; text-decoration: none; font-weight: 600; font-size: var(--t-meta); letter-spacing: 1.5px; text-transform: uppercase; padding: 12px; }

/* ---- sections ---- */
section.light { background: var(--light); padding: 70px 24px 80px; }
section.paper { background: var(--paper); padding: 70px 24px 80px; }
.sec-h { font-family: var(--head); font-weight: 400; font-size: var(--d-xl); line-height: 1; text-transform: uppercase; text-align: center; color: var(--ink); margin: 0 0 34px; }
.intro p, .lede { margin: 0 0 12px; }
section .lede { font-size: var(--t-lg); margin-bottom: 26px; }
.intro .src { font-size: var(--t-sm); letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin-left: 6px; }
.more { margin-top: 34px; text-align: center; }
.more a { font-size: var(--t-sm); font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; border-bottom: 2px solid var(--accent); }

/* guide photo cards */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin: 30px 0 26px; }
.card { background: #fff; text-decoration: none; border: 1px solid var(--line); display: block; }
.card .img { height: 200px; background: #111; position: relative; overflow: hidden; }
.card .img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); }
.card .t { font-family: var(--head); font-size: var(--d-md); line-height: .95; color: #fff; text-transform: uppercase; position: absolute; left: 18px; bottom: 16px; right: 18px; text-shadow: 0 1px 12px rgba(0,0,0,.4); }
.card .b { padding: 16px 18px 20px; }
.card h3 { font-weight: 500; font-size: var(--t-lg); line-height: 1.3; margin: 0 0 12px; color: var(--ink); }
.card small { font-size: var(--t-sm); color: #555; }
.card:hover h3 { text-decoration: underline; }

/* grouped index of every page */
.index { margin-top: 46px; border-top: 2px solid var(--ink); }
.row { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 20px; }
.row h3 { font-family: var(--head); font-weight: 400; font-size: var(--d-xs); line-height: 1; text-transform: uppercase; margin: 2px 0 0; color: var(--ink); }
.row ul, .related ul { list-style: none; margin: 0; padding: 0; }
.row li, .related li { margin: 3px 0; }
.row li a, .related li a { text-decoration: none; font-weight: 500; }
.row li a:hover, .related li a:hover { text-decoration: underline; }
.row li em, .related li em { font-style: normal; color: var(--muted); font-size: var(--t-meta); margin-left: 8px; }

/* takes as quotes */
.takes { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 48px; margin-top: 10px; }
.take { text-decoration: none; display: block; }
.take q { display: block; font-weight: 400; font-size: var(--t-xl); line-height: 1.5; color: var(--ink); quotes: "“" "”"; }
.take span { display: block; margin-top: 8px; font-size: var(--t-sm); letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.take span.tag { display: inline-block; margin-top: 0; letter-spacing: .5px; color: var(--warn); }
.take:hover q { text-decoration: underline; text-decoration-thickness: 1px; }

/* coaching */
.coach { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: start; }
.coach p:first-child { margin-top: 0; }
.pkg { background: #fff; border: 1px solid var(--line); display: grid; grid-template-columns: 120px 1fr; gap: 20px; padding: 20px; align-items: center; }
.pkg .pic { height: 120px; background: #111; position: relative; overflow: hidden; }
.pkg .pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; filter: grayscale(1); }
.pkg .pic .ph { left: 4px; right: auto; bottom: 2px; font-size: var(--t-xs); }
.pkg h3 { margin: 0; font-weight: 600; font-size: var(--t-lg); color: var(--ink); }
.pkg .price { font-size: var(--t-base); color: #555; margin: 2px 0 10px; }
.btns { display: flex; gap: 8px; flex-wrap: wrap; }
.btns a, .button { display: inline-block; text-decoration: none; font-family: var(--font); font-size: var(--t-sm); font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; padding: 10px 16px; border: 2px solid var(--ink); color: var(--ink); background: transparent; cursor: pointer; }
.btns a.go, .button { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btns a:hover, .button:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
/* on the coaching page the form is the action; the card button is secondary */
.coach .pkg .btns a.go { background: transparent; color: var(--ink); border-color: var(--ink); }
.coach .pkg .btns a.go:hover { background: var(--ink); color: #fff; }
/* 19 loading state while the form sends */
.apply[aria-busy="true"] .button { opacity: .55; cursor: progress; pointer-events: none; }

/* ---- articles (guide, take) ---- */
.prose { font-size: var(--t-body); }
.prose h2 { font-family: var(--head); font-weight: 400; font-size: var(--d-md); line-height: 1; text-transform: uppercase; color: var(--ink); margin: 1.4em 0 .4em; }
.prose blockquote { margin: 1.4em 0; padding: 0 0 0 20px; border-left: 3px solid var(--ink); }
.prose blockquote p { margin: 0; font-size: var(--t-xl); line-height: 1.5; color: var(--ink); }
.prose blockquote p + p { margin-top: 8px; font-size: var(--t-sm); letter-spacing: 1px; text-transform: uppercase; }
.prose blockquote p + p a { color: var(--muted); text-decoration: none; }
.prose ol, .prose ul { padding-left: 1.3em; }
.prose li { margin: 6px 0; }
.prose img { max-width: 100%; height: auto; }
.pull { font-size: var(--t-2xl) !important; line-height: 1.4; color: var(--ink); margin-top: 0 !important; border-left-width: 4px !important; }
.sources, .related { margin-top: 40px; padding-top: 18px; border-top: 2px solid var(--ink); }
.sources h2, .related h2 { font-family: var(--head); font-weight: 400; font-size: var(--d-xs); text-transform: uppercase; margin: 0 0 8px; color: var(--ink); }
.sources ul { list-style: none; padding: 0; margin: 0; }
.sources a { color: var(--muted); font-size: var(--t-meta); letter-spacing: 1px; text-transform: uppercase; text-decoration: none; }
.sources a:hover { color: var(--ink); }

.cta { margin: 40px 0 0; padding: 22px 24px; background: #fff; border: 1px solid var(--line); display: flex; gap: 16px 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.cta p { margin: 0; font-weight: 500; color: var(--ink); flex: 1 1 260px; }
.cta + .cta { margin-top: 16px; }
.cta.peak { background: var(--band); }
.cta.peak p { color: #fff; }
.cta.peak .button { background: #fff; color: #000; border-color: #fff; }
.cta.peak .button:hover { background: #d9d9d9; border-color: #d9d9d9; color: #000; }

/* stacks */
.stack { padding: 26px 0 18px; border-top: 1px solid var(--line); scroll-margin-top: 20px; }
.stack:first-of-type { border-top: 2px solid var(--ink); }
.stack h2 { font-family: var(--head); font-weight: 400; font-size: var(--d-md); line-height: 1; text-transform: uppercase; color: var(--ink); margin: 0 0 10px; }
.compounds { padding-left: 1.3em; margin: 10px 0; }
.compounds li { margin: 6px 0; }
.compounds b { font-weight: 600; color: var(--ink); }
.compounds span { color: #4a4540; }
.caveat { font-style: italic; color: var(--muted); }

/* apply form */
.apply { display: grid; gap: 14px; margin-top: 48px; max-width: 620px; background: #fff; padding: 28px; border: 1px solid var(--line); }
.apply h2 { font-family: var(--head); font-weight: 400; font-size: var(--d-md); line-height: 1; text-transform: uppercase; margin: 0 0 4px; color: var(--ink); }
.apply label { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; row-gap: 4px; font-weight: 500; font-size: var(--t-base); color: var(--ink); }
.apply input, .apply select, .apply textarea { font: inherit; font-size: var(--t-body); padding: 10px 12px; border: 1px solid var(--line); border-radius: 0; background: var(--paper); color: var(--ink); width: 100%; flex: 1 0 100%; }
.apply input:focus, .apply select:focus, .apply textarea:focus { outline: 2px solid var(--ink); outline-offset: -1px; }
.apply .button { justify-self: start; padding: 12px 22px; }
.apply .hp { position: absolute; left: -9999px; }
.app { background: #fff; padding: 14px 16px; margin-top: 10px; display: grid; gap: 2px; }
.app span { color: var(--muted); font-size: var(--t-meta); }

/* ---- footer ---- */
.site-foot { background: var(--foot); color: #ddd; padding: 36px 24px 30px; font-size: var(--t-meta); }
.site-foot .wrap { display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; flex-wrap: wrap; }
.site-foot .soc { width: 100%; text-align: center; margin-bottom: 18px; letter-spacing: 2px; text-transform: uppercase; font-size: var(--t-sm); }
.site-foot .soc a { text-decoration: none; margin: 0 12px; }
.site-foot a { text-decoration: none; }
.site-foot a:hover { text-decoration: underline; }

/* ---- phone ---- */
@media (max-width: 860px) {
  .bar { padding: 18px var(--edge); }
  .hero .bar { padding-left: 20px; padding-right: 20px; }
  .name { left: 20px; }
  .bar nav { gap: 4px 18px; }
  .bar nav a { font-size: var(--t-sm); letter-spacing: 1.6px; }
}
@media (max-width: 700px) {
  .hero { height: 760px; min-height: 0; }
  .hero > img { object-position: 58% 20%; }
  /* nothing hidden behind a menu: the four links stay visible on a phone */
  .bar { align-items: center; gap: 14px; padding-left: 20px; padding-right: 20px; }
  .mark { width: 46px; height: 46px; font-size: var(--t-2xl); }
  .pkg .btns a { white-space: nowrap; padding-left: 12px; padding-right: 12px; }
  .bar nav { gap: 2px 12px; }
  .bar nav a { font-size: var(--t-xs); letter-spacing: .9px; }
  .name { left: 20px; right: 20px; bottom: 13%; }
  .name h1 { font-size: var(--d-phone); }
  .name p { font-size: var(--t-xl); }
  .band { padding-bottom: 40px; }
  .band h1 { font-size: var(--d-lg); padding: 0 20px; margin-top: 24px; }
  .band .kicker { padding: 0 20px; margin-top: 24px; }
  .band .kicker + h1 { margin-top: 36px; }
  .band .lede { font-size: var(--t-lg); padding: 0 20px; }
  .goal { flex-basis: calc((100% - 8px) / 2); }
  section.light, section.paper { padding: 56px 20px 64px; }
  .sec-h { font-size: var(--d-lg); }
  .cards { grid-template-columns: 1fr; }
  .row { grid-template-columns: 1fr; gap: 6px; }
  .takes { grid-template-columns: 1fr; }
  .coach { grid-template-columns: 1fr; }
  .pkg { grid-template-columns: 90px 1fr; }
  .pkg .pic { height: 90px; }
  .prose h2 { font-size: var(--d-sm); }
  .apply { padding: 20px; }
  .site-foot .wrap { justify-content: center; text-align: center; }
}