/* ------------------------------------------------------------------ type ---
   Self-hosted so the page still makes ZERO third-party calls — the reason this
   site had no web fonts at all until now. Both families are latin-only woff2,
   ~144 KB across seven files, cached after the first visit.

   Cormorant Garamond does the reading and the display, often italic.
   DM Sans appears only as small tracked uppercase labels. That ratio is the
   whole look; using DM Sans for body copy loses it.                        */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;
  src:url('fonts/cormorant-garamond-latin-400-italic.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:600;font-display:swap;
  src:url('fonts/cormorant-garamond-latin-600-italic.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/dm-sans-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/dm-sans-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/dm-sans-latin-700-normal.woff2') format('woff2')}

/* ---------------------------------------------------------------- tokens ---
   Lifted from groundedpillars.com so the two sites read as one hand.        */
:root{
  --ink-3:#0B0907;        /* page */
  --ink-2:#14110E;        /* raised surface */
  --ink-1:#1A1612;        /* raised surface, one step up */
  --parchment-1:#F4E9CE;  /* primary text */
  --parchment-2:#D4C8AE;  /* body text */
  --muted-1:#A89A7E;      /* labels, captions */
  --muted-2:#8F8267;      /* quietest */
  --amber:#E8B464;        /* accent */
  --amber-deep:#C49A5A;
  --rule:rgba(232,180,100,.22);
  --rule-faint:rgba(232,180,100,.10);
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  /* the label voice: DM Sans, small, uppercase, tracked hard */
  --label:700 .68rem/1.4 var(--sans);
  --track:.32em;
}

/* --------------------------------------------------------------- chrome ---
   One footer, for every page on this site that scrolls. It carries the only
   thing the standalone pages were missing: a way back to the front of the
   site. Slide decks deliberately don't use it — a projected slide has no room
   for chrome, and the library page is how a student reaches a deck anyway. */
.sitefoot{max-width:60rem;margin:3.5rem auto 0;padding:1.15rem 1.15rem 2.6rem;
  border-top:1px solid var(--rule-faint);text-align:center;
  font:var(--label);letter-spacing:var(--track);text-transform:uppercase;
  color:var(--muted-2)}
.sitefoot a{color:var(--muted-2);text-decoration:none}
.sitefoot a:hover{color:var(--amber)}

/* ----------------------------------------------------------------- logo ---
   The site mark: a Cormorant italic J in amber, a hairline, then the domain
   with the class line under it. Set in type, not an image, so it is sharp at
   any size, inherits the page's palette, and costs nothing to load — the two
   faces are already here.

   The markup, identical on every page that carries it:

     <a class="logo" href="/">
       <span class="logo-j">J</span>
       <span class="logo-t">
         <span class="logo-name">brojudd<span class="logo-dot">.</span>com</span>
         <span class="logo-sub">Seminary &middot; Heber Valley</span>
       </span>
     </a>

   Everything scales from --logo-j, so a page that wants it bigger sets that
   one number. It stays off the projector and off the slide decks.           */

.logo{--logo-j:38px;display:inline-flex;align-items:center;gap:.36em;
  text-decoration:none;color:inherit;line-height:1}
.logo:hover{text-decoration:none}
.logo-j{font:600 var(--logo-j)/.78 var(--serif);font-style:italic;color:var(--amber);
  padding-right:.36em;border-right:1px solid var(--rule);flex:0 0 auto}
.logo-t{display:block}
.logo-name{display:block;font:600 calc(var(--logo-j)*.55)/1 var(--serif);font-style:italic;
  letter-spacing:-.015em;color:var(--parchment-1)}
.logo-dot{color:var(--amber)}
.logo-sub{display:block;margin-top:.42em;font:var(--label);letter-spacing:var(--track);
  text-transform:uppercase;color:var(--muted-2);white-space:nowrap}
.logo:hover .logo-name{color:var(--amber)}

/* On a narrow phone the lockup drops the class line rather than wrapping it. */
@media (max-width:380px){ .logo{--logo-j:33px} .logo-sub{font-size:.6rem;letter-spacing:.22em} }

/* A page on the projector ground (paper, not ink) names its own colours. */
.logo.on-paper .logo-j,.logo.on-paper .logo-dot{color:#8A6A10}
.logo.on-paper .logo-j{border-right-color:rgba(138,106,18,.3)}
.logo.on-paper .logo-name{color:#17130D}
.logo.on-paper .logo-sub{color:#776C59}

/* A standalone page that scrolls carries the mark on a rule at the very top. */
.sitehead{max-width:60rem;margin:0 auto;padding:1.5rem 1.15rem 1.25rem;
  border-bottom:1px solid var(--rule-faint)}