/* bryceduhamel.com — personal author site.
   Recreated from the Claude Design canvas (design/bryceduhamel-canvas.dc.html,
   board 2a) on the Classical token sheet with the book's teal accent. The
   canvas board is a fixed 1280px artboard; this stylesheet makes it fluid with
   a single 900px breakpoint. */

/* — fonts (self-hosted, variable weight 400–600) — */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/cormorant-garamond.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/cormorant-garamond-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/lora.woff2') format('woff2');
}
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/lora-italic.woff2') format('woff2');
}

/* — tokens — */
:root {
  --bg: #f7f6f3;
  --ink: #211f1c;
  --acc7: #20493d;
  --acc6: #275a4a;
  --acc3: #aac9bd;
  --night: #111514;
  --paper: #efeeec;
  --pdim: rgba(239, 238, 236, 0.66);
  --div: rgba(33, 31, 28, 0.14);
  --muted: #8a867f;
  --body-2: #4a4844;
  --font-heading: "Cormorant Garamond", system-ui, sans-serif;
  --font-body: "Lora", system-ui, sans-serif;
}

/* — base — */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 600; line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 10px; }
p { margin: 0 0 14px; }
a { color: var(--acc7); text-decoration: none; text-underline-offset: 3px; }
a:hover { color: var(--acc6); text-decoration: underline; }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
em { font-style: italic; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--acc7); outline-offset: 2px; }
::selection { background: rgba(46, 107, 88, 0.3); }
.m0 { margin: 0; }
.wrap { max-width: 1192px; margin: 0 auto; padding: 0 44px; }

/* — masthead — */
.cname { font-size: 14px; letter-spacing: 0.36em; text-transform: uppercase; text-align: center; padding: 40px 0 10px; font-weight: 600; }
.cname a { color: var(--ink); }
.cname a:hover { color: var(--acc6); text-decoration: none; }
.cnav { display: flex; justify-content: center; gap: 28px; font-size: 12.5px; padding: 0 16px 26px; border-bottom: 1px solid var(--div); flex-wrap: wrap; }
.nlnk { font-size: 13px; color: var(--ink); }
.nlnk:hover { color: var(--acc6); }

/* — statement — */
.cstate { font-family: var(--font-heading); font-weight: 400; font-size: clamp(28px, 4vw, 42px); line-height: 1.25; text-align: center; max-width: 840px; margin: 80px auto; padding: 0 44px; }
.cem { font-style: italic; color: var(--acc7); }

/* — kickers — */
.kick { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--acc7); font-weight: 600; }
.kickp { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--acc3); font-weight: 600; }

/* — book band — */
.band { position: relative; overflow: hidden; background: var(--night); color: var(--paper); }
.bimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.veil { position: absolute; inset: 0; background: rgba(10, 14, 12, 0.6); }
.bin { position: relative; z-index: 2; padding: 88px 44px; }
.bgrid { display: grid; grid-template-columns: 300px 1fr; gap: 60px; align-items: center; max-width: 1060px; margin: 0 auto; }
.cover { width: 100%; display: block; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55); border-radius: 6px; }
.tlock { height: 44px; width: auto; display: block; margin: 16px 0 18px; }
.tagl { font-family: var(--font-heading); font-style: italic; font-size: clamp(20px, 2vw, 24px); line-height: 1.35; margin: 0 0 18px; }
.bp { font-size: 15.5px; line-height: 1.72; color: var(--pdim); margin: 0 0 14px; max-width: 580px; }
.q { font-family: var(--font-heading); font-style: italic; font-size: 20px; line-height: 1.5; margin: 24px 0 8px; color: var(--paper); max-width: 580px; }
.qsrc { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--pdim); }
.btnrow { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.btnp { display: inline-flex; align-items: center; white-space: nowrap; padding: 11px 22px; border: 1px solid rgba(239, 238, 236, 0.5); color: var(--paper); font-family: var(--font-heading); font-weight: 600; font-size: 14px; border-radius: 4px; background: rgba(8, 11, 10, 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.btnp:hover { background: rgba(239, 238, 236, 0.09); color: var(--paper); text-decoration: none; }
.btnd { display: inline-flex; align-items: center; white-space: nowrap; padding: 11px 22px; border: 1px solid rgba(33, 31, 28, 0.4); color: var(--ink); font-family: var(--font-heading); font-weight: 600; font-size: 14px; border-radius: 4px; background: transparent; cursor: pointer; }
.btnd:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }

/* — writing index — */
.cindex { max-width: 780px; margin: 0 auto; padding: 72px 44px; }
.crow { display: grid; grid-template-columns: 64px 1fr auto; gap: 22px; align-items: baseline; padding: 24px 0; border-top: 1px solid var(--div); color: var(--ink); }
a.crow:hover { text-decoration: none; color: var(--ink); }
a.crow:hover .wt { color: var(--acc6); }
.cnum { font-family: var(--font-heading); font-style: italic; font-size: 16px; color: var(--acc7); }
.wt { font-family: var(--font-heading); font-size: 24px; font-weight: 400; margin: 0; color: var(--ink); letter-spacing: -0.015em; line-height: 1.12; }
.ccat { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-top: 5px; }
.wd { font-size: 12.5px; color: var(--muted); letter-spacing: 0.06em; }

/* — about — */
.sec { padding: 76px 0; }
.secgrid { display: grid; grid-template-columns: 1fr 340px; gap: 68px; align-items: start; }
.ledep { font-family: var(--font-heading); font-weight: 400; font-size: clamp(26px, 3vw, 34px); line-height: 1.15; margin: 14px 0 26px; color: var(--ink); letter-spacing: -0.015em; }
.ledep em { color: var(--acc7); }
.just { text-align: justify; hyphens: auto; line-height: 1.72; font-size: 16px; margin: 0 0 16px; }
.plate {
  filter: sepia(0.22) saturate(0.82) contrast(1.05);
  border: 1px solid rgba(33, 31, 28, 0.12); outline: 1px solid var(--div);
  padding: 10px; background: #fff; box-shadow: 0 14px 40px rgba(20, 18, 15, 0.12);
}
.pimg { width: 100%; display: block; }

/* — agents notice — */
.notice { width: min(780px, calc(100% - 48px)); margin: 0 auto 84px; border: 1px solid rgba(33, 31, 28, 0.25); padding: 34px 38px; text-align: center; }
.nt { font-family: var(--font-heading); font-size: 22px; font-weight: 600; margin: 0 0 8px; }
.np { font-size: 14.5px; color: var(--body-2); margin: 0 0 20px; line-height: 1.65; }

/* — footer — */
.foot { border-top: 1px solid var(--div); padding: 26px 44px; display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; text-align: center; }

/* — article pages (/writing/:slug, /excerpt, /contact) — */
.art { max-width: 700px; margin: 0 auto; padding: 66px 44px 80px; }
.back { font-size: 13px; }
.at { font-family: var(--font-heading); font-size: clamp(30px, 6vw, 46px); font-weight: 400; line-height: 1.08; margin: 14px 0 12px; letter-spacing: -0.015em; }
.ameta { font-size: 12px; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 38px; }
.sp { text-align: justify; hyphens: auto; line-height: 1.85; font-size: 16px; margin: 0 0 16px; text-indent: 2.2em; }
.spnoind { text-indent: 0; }
.apv { white-space: pre-line; font-family: var(--font-heading); font-size: 18px; line-height: 1.75; }
.anote { max-width: 560px; font-style: italic; color: var(--body-2); font-size: 14.5px; line-height: 1.7; padding: 18px 0; margin: 0 0 26px; border-top: 1px solid var(--div); border-bottom: 1px solid var(--div); }
.sheetend { display: flex; align-items: center; gap: 16px; margin-top: 34px; }
.hairline { flex: 1; height: 1px; background: var(--div); }
.sheetsrc { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.pn { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; border-top: 1px solid var(--div); padding-top: 26px; margin-top: 52px; font-size: 14px; }
.pnr { text-align: right; }
.pk { display: block; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.rlnk { font-family: var(--font-heading); font-weight: 600; font-size: 14px; }
.promo { display: flex; gap: 26px; align-items: center; background: var(--night); color: var(--paper); padding: 28px 32px; border-radius: 4px; margin-top: 60px; }
.prc { width: 86px; display: block; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5); flex: none; border-radius: 4px; }
.ast { font-family: var(--font-heading); font-size: 21px; margin: 0 0 6px; }
.asp { font-size: 13.5px; color: var(--pdim); margin: 0 0 10px; }
.plink { color: var(--paper); }
.plink:hover { color: var(--paper); }

/* — contact form — */
.cform { margin-top: 8px; }
.field > label { display: block; font-size: 12px; margin: 16px 0 5px; color: var(--body-2); }
.input { width: 100%; min-height: 36px; padding: 8px 10px; font: inherit; font-size: 14px; color: var(--ink); caret-color: var(--acc7); background: #fff; border: 1px solid var(--div); border-radius: 4px; }
.input:hover { border-color: rgba(33, 31, 28, 0.45); }
.input:focus-visible { border-color: var(--acc7); outline-offset: 0; }
textarea.input { resize: vertical; }
.cform .btnd { margin-top: 22px; }
.formerr { color: #8a2a2a; font-size: 14px; border: 1px solid rgba(138, 42, 42, 0.4); border-radius: 4px; padding: 10px 14px; }
.hp { position: absolute; left: -9999px; top: -9999px; height: 1px; width: 1px; overflow: hidden; }

/* — 404 — */
.lost { max-width: 700px; margin: 0 auto; padding: 90px 44px 110px; text-align: center; }

/* — mobile — */
@media (max-width: 900px) {
  .wrap { padding: 0 24px; }
  .cstate { margin: 56px auto; padding: 0 24px; }
  .bin { padding: 60px 24px; }
  .bgrid { grid-template-columns: 1fr; gap: 40px; }
  .bgrid .cover { max-width: 250px; margin: 0 auto; }
  .cindex { padding: 56px 24px; }
  .crow { grid-template-columns: 44px 1fr; gap: 14px; padding: 20px 0; }
  .wd { grid-column: 2; }
  .sec { padding: 56px 0; }
  .secgrid { grid-template-columns: 1fr; gap: 40px; }
  .secgrid figure { max-width: 400px; width: 100%; margin: 0 auto; }
  .notice { padding: 28px 22px; margin-bottom: 64px; }
  .art { padding: 48px 24px 64px; }
  .foot { padding: 26px 24px; }
  .promo { flex-wrap: wrap; }
}