/* Update 13 (Oct 4, 2026) — loaded after site.css.
   1. Header wordmark: "J.C. Stewart" set large (option 1, "Bigger header mark"), PHOTOGRAPHY in spaced capitals beside it;
      on phones the two lines stack so both stay visible.
   2. "View the portfolio" and "See every gallery" on the home page: large italic Bodoni with a long thin arrow and a
      hairline underline (option C). The arrow slides out a little on hover. */

/* ---------- 1. header wordmark ---------- */
:root { --head: clamp(84px, 8vw, 116px); }
.site-head .mark { gap: 18px; }
.site-head .mark .n { font-size: clamp(34px, 3.6vw, 52px); letter-spacing: .005em; font-variation-settings: "opsz" 96; }
.site-head .mark .p { font-size: 12.5px; letter-spacing: .32em; text-transform: uppercase; opacity: .85; }
@media (max-width: 760px) {
  :root { --head: 78px; }
  .site-head .mark { flex-direction: column; align-items: flex-start; gap: 7px; }
  .site-head .mark .n { font-size: 30px; }
  .site-head .mark .p { display: block; font-size: 10px; letter-spacing: .34em; }
}
@media (max-height: 520px) and (orientation: landscape) {
  :root { --head: 64px; }
  .site-head .mark { flex-direction: row; align-items: baseline; }
  .site-head .mark .n { font-size: 26px; }
}

/* ---------- 2. "View the portfolio" / "See every gallery" ---------- */
.intro .more, .spread-foot .more {
  display: inline-flex; align-items: center; gap: clamp(14px, 1.6vw, 22px);
  min-height: 44px; padding-bottom: 12px;
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: clamp(28px, 3.2vw, 44px); line-height: 1; letter-spacing: 0; font-variation-settings: "opsz" 48;
  color: var(--ink); white-space: nowrap;
  text-decoration: none; border-bottom: 1px solid var(--frame);
  transition: gap 1.2s var(--ease), opacity 2s var(--ease), transform 2.2s var(--ease);
}
.spread-foot .more { font-size: clamp(26px, 2.9vw, 40px); }
.intro .more::after, .spread-foot .more::after {
  content: ""; flex: none; width: clamp(56px, 6.5vw, 96px); aspect-ratio: 4 / 1; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 24' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M0 12h93M83 3l10 9-10 9'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 24' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M0 12h93M83 3l10 9-10 9'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
.intro .more:hover, .spread-foot .more:hover,
.intro .more:focus-visible, .spread-foot .more:focus-visible { gap: clamp(24px, 2.6vw, 36px); }
@media (max-width: 760px) {
  .intro { gap: 28px; }
  .intro .more { justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .intro .more, .spread-foot .more { transition: none; }
}