@charset "utf-8";
/* --------------------------------------------------------------------------
   The utility page type: about, contact, and the three legal documents.

   No artboard. These pages are the guide page's own header and footer with a
   single column of prose between them, so everything the chrome needs is
   already in guide.css and only the column is described here. Colours are the
   system's tokens; nothing new is introduced and nothing is a new decision for
   the owner to approve at palette freeze.
   -------------------------------------------------------------------------- */
.ut-hero{position:relative;padding:128px var(--ggx) 56px;overflow:hidden;
  background:#3B241F;color:#F6EFE6;}
.ut-bg{position:absolute;inset:0;}

.ut-bg img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(1.02) sepia(.12) contrast(1.04) brightness(.5);}
.ut-wash{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(42,27,23,.55) 0%,rgba(42,27,23,.34) 45%,rgba(42,27,23,.92) 100%),
             linear-gradient(90deg,rgba(42,27,23,.8) 0%,rgba(42,27,23,.28) 65%,rgba(42,27,23,.05) 100%);}

/* not `.ut-hero > *`: that matched .ut-bg too, at equal specificity and later
   in the sheet, so the background stopped being absolute and became the first
   block in the flow — a full-viewport photograph with the h1 pushed below it */
.ut-hero > :not(.ut-bg){position:relative;z-index:1;}
.ut-crumbs{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;
  font:400 12px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.06em;
  color:#D9C6BC;}
.ut-crumbs a{color:#D9C6BC;text-decoration:none;border-bottom:1px solid rgba(217,198,188,.4);}
.ut-crumbs a:hover{color:#F6EFE6;border-bottom-color:#F6EFE6;}
.ut-crumbs [aria-current="page"]{color:#F6EFE6;}
.ut-kicker{margin:26px 0 0;font:400 12px/1.4 'JetBrains Mono',ui-monospace,monospace;
  letter-spacing:.14em;text-transform:uppercase;color:#D9A08F;}
.ut-h1{margin:14px 0 0;max-width:16ch;
  font:400 clamp(44px,6vw,76px)/1.03 Cormorant,'Times New Roman',serif;
  letter-spacing:-.01em;color:#F6EFE6;}
.ut-lede{margin:22px 0 0;max-width:62ch;
  font:400 18px/1.62 'Work Sans',system-ui,sans-serif;color:#E8D9C8;}
.ut-stamp{margin:26px 0 0;font:400 12px/1 'JetBrains Mono',ui-monospace,monospace;
  letter-spacing:.06em;color:#D9C6BC;}

.ut-doc{padding:64px var(--ggx) 88px;background:#F6EFE6;}
.ut-body{max-width:68ch;}
.ut-h2{margin:52px 0 0;font:400 30px/1.15 Cormorant,'Times New Roman',serif;
  color:#2A1B17;letter-spacing:-.005em;}
.ut-body > .ut-h2:first-child{margin-top:0;}
.ut-p{margin:16px 0 0;font:400 17px/1.72 'Work Sans',system-ui,sans-serif;color:#2A1B17;}
.ut-ul{margin:16px 0 0;padding:0 0 0 22px;
  font:400 17px/1.72 'Work Sans',system-ui,sans-serif;color:#2A1B17;}
.ut-ul li{margin:9px 0 0;}
.ut-ul li::marker{color:#A64B2A;}
/* the one thing on the page worth pulling out of the column */
.ut-note{margin:26px 0 0;padding:22px 26px 22px 30px;background:#E8D9C8;
  border-left:3px solid #A64B2A;
  font:400 17px/1.62 'Work Sans',system-ui,sans-serif;color:#2A1B17;}
.ut-p a,.ut-ul a,.ut-note a{color:#8E3E22;text-decoration:none;
  border-bottom:1px solid #C9B9A8;transition:border-color .2s;}
.ut-p a:hover,.ut-ul a:hover,.ut-note a:hover{border-bottom-color:#8E3E22;}
.ut-body code{font:400 15px/1 'JetBrains Mono',ui-monospace,monospace;
  padding:2px 6px;background:#E8D9C8;color:#2A1B17;}

@media (max-width:1023px){
  .ut-hero{padding:96px var(--ggx) 40px;}
  .ut-h1{font-size:40px;max-width:none;}
  .ut-lede{font-size:16px;}
  .ut-doc{padding:44px var(--ggx) 72px;}
  .ut-h2{font-size:26px;margin-top:40px;}
  .ut-p,.ut-ul,.ut-note{font-size:16px;}
  .ut-note{padding:18px 18px 18px 22px;}
}