/* Martin Cooke Photography — preview
   Monochrome chrome; the photographs are the only colour on the page. */

:root {
  --paper: #FDFCFA;
  --ink:   #191613;
  --mid:   #6B655E;
  --faint: #A5A099;
  --line:  rgba(25, 22, 19, 0.14);
  --matte: #E9E5DF;
  --dark:  #121008;
  --disp:  'Marcellus', 'Times New Roman', serif;
  --body:  'Newsreader', Georgia, serif;
  --util:  'Archivo', 'Helvetica Neue', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.wrap {
  width: min(1240px, 100% - 48px);
  margin-inline: auto;
}

/* ---------- utility type ---------- */

.kicker {
  font-family: var(--util);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mid);
}

/* ---------- header ---------- */

.site-head {
  border-bottom: 1px solid var(--line);
}
.site-head .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
}
.wordmark {
  text-decoration: none;
  line-height: 1.15;
}
.wordmark .name {
  font-family: var(--disp);
  font-size: 22px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.wordmark .trade {
  font-family: var(--util);
  font-weight: 500;
  font-size: 9.5px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--mid);
  margin-top: 2px;
}
.site-nav {
  display: flex;
  gap: 30px;
}
.site-nav a {
  font-family: var(--util);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--mid);
  padding: 6px 0;
}
.site-nav a:hover { color: var(--ink); }
@media (hover: hover) {
  .site-nav a {
    background: linear-gradient(currentColor, currentColor) no-repeat left bottom / 0 1px;
    transition: background-size 0.3s ease, color 0.3s ease;
  }
  .site-nav a:hover { background-size: 100% 1px; }
}
.site-nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
}

/* ---------- viewfinder brackets (signature) ---------- */

.vf { position: relative; }
.vf > .corner {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 0 solid currentColor;
  pointer-events: none;
}
.vf > .tl { top: 14px; left: 14px; border-top-width: 1.5px; border-left-width: 1.5px; }
.vf > .tr { top: 14px; right: 14px; border-top-width: 1.5px; border-right-width: 1.5px; }
.vf > .bl { bottom: 14px; left: 14px; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.vf > .br { bottom: 14px; right: 14px; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.vf.on-photo { color: rgba(253, 252, 250, 0.75); }
.vf.on-paper { color: var(--faint); }

/* hover variant: brackets ease into the corners of a photograph on devices
   that can hover; they simply don't exist on touch */
.vf.hov > .corner { opacity: 0; }
.vf.hov > .tl { transform: translate(-6px, -6px); }
.vf.hov > .tr { transform: translate(6px, -6px); }
.vf.hov > .bl { transform: translate(-6px, 6px); }
.vf.hov > .br { transform: translate(6px, 6px); }
@media (hover: hover) {
  .vf.hov > .corner { transition: opacity 0.35s ease, transform 0.35s ease; }
  .vf.hov:hover > .corner,
  a:hover > .vf.hov > .corner,
  button:hover.vf.hov > .corner {
    opacity: 1;
    transform: none;
  }
}


/* ---------- home: hero ---------- */

.hero-block {
  width: min(var(--iw, 1400px), calc(100% - 32px), calc(78vh * var(--ar, 1.333)));
  margin: 26px auto 0;
}
.hero img {
  display: block;
  width: 100%;
  height: auto;
}
.hero-caption {
  width: 100%;
  margin: 12px auto 0;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.hero-caption em {
  font-family: var(--body);
  font-size: 15px;
  color: var(--mid);
}

/* ---------- home: thesis ---------- */

.thesis {
  padding: 110px 0 96px;
  text-align: center;
}
.thesis h1 {
  font-family: var(--disp);
  font-weight: 400;
  font-size: clamp(30px, 4.4vw, 54px);
  line-height: 1.22;
  max-width: 21ch;
  margin: 18px auto 0;
}
.thesis p {
  max-width: 52ch;
  margin: 26px auto 0;
  color: var(--mid);
  font-size: 18px;
}
.thesis .more {
  display: inline-block;
  margin-top: 30px;
  font-family: var(--util);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
}

/* ---------- home: selected pictures row ---------- */

.selected {
  padding-bottom: 40px;
}
.selected .row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 26px;
}
.selected a { display: block; text-decoration: none; }
.selected a .vf {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--matte);
}
.selected img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.selected .row figcaption {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.selected .s-title {
  font-size: 14.5px;
  font-style: italic;
  color: var(--mid);
}
.selected .s-gallery {
  font-family: var(--util);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
}

/* ---------- home: gallery index (typographic) ---------- */

.index {
  padding: 90px 0 110px;
}
.index-list {
  list-style: none;
  margin-top: 34px;
  columns: 2;
  column-gap: 80px;
}
.index-list li {
  break-inside: avoid;
  border-bottom: 1px solid var(--line);
}
.index-list li:first-child { border-top: 1px solid var(--line); }
.index-list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 2px;
  text-decoration: none;
}
.index-list .g-name {
  font-family: var(--disp);
  font-size: 21px;
  letter-spacing: 0.02em;
}
.index-list .g-note {
  font-family: var(--util);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
}
.index-list a:hover .g-name { font-style: normal; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }

/* ---------- galleries index page: cards ---------- */

.page-head {
  padding: 64px 0 8px;
}
.page-head h1 {
  font-family: var(--disp);
  font-weight: 400;
  font-size: clamp(30px, 3.6vw, 44px);
  margin-top: 14px;
}
.page-head .lede {
  max-width: 58ch;
  color: var(--mid);
  margin-top: 14px;
  font-size: 17.5px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  padding: 44px 0 100px;
}
.card {
  text-decoration: none;
  display: block;
}
.card .art {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--matte);
}
.card .art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.6s ease;
}
.card:hover .art img { transform: scale(1.025); }
.card .await {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid var(--line);
  background: var(--paper);
}
.card .await .g-name {
  font-family: var(--disp);
  font-size: 22px;
  text-align: center;
  padding: 0 18px;
}
.card .await .g-soon {
  font-family: var(--util);
  font-weight: 500;
  font-size: 9.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--faint);
}
.card .meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 12px;
}
.card .meta .g-name {
  font-family: var(--disp);
  font-size: 18px;
}
.card .meta .g-count {
  font-family: var(--util);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
}
/* the awaiting cards say everything inside the frame */
.card.pending .meta { display: none; }

/* ---------- gallery page ---------- */

.plates {
  padding: 40px 0 90px;
}
.plate {
  width: min(1080px, var(--iw, 1080px), 100%, calc(84vh * var(--ar, 1.333)));
  margin: 0 auto 84px;
}
.plate:last-child { margin-bottom: 0; }
.plate img {
  display: block;
  width: 100%;
  height: auto;
}
.plate button {
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  background: none;
  cursor: zoom-in;
}
.plate figcaption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-top: 12px;
}
.plate .p-title {
  font-style: italic;
  font-size: 16px;
  color: var(--mid);
}
.plate .p-num {
  font-family: var(--util);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--faint);
}

/* empty gallery: awaiting frames */

.await-note {
  max-width: 58ch;
  color: var(--mid);
  margin-top: 14px;
  font-size: 17.5px;
}
.await-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  padding: 44px 0 100px;
  align-items: start;
}
.await-frame {
  width: 100%;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
}
.await-frame.a43 { aspect-ratio: 4 / 3; }
.await-frame.a32 { aspect-ratio: 3 / 2; }
.await-frame.a45 { aspect-ratio: 4 / 5; }
.await-frame span {
  font-family: var(--util);
  font-weight: 500;
  font-size: 9.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--faint);
}

.back-strip {
  padding-bottom: 90px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
.back-strip a {
  font-family: var(--util);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--mid);
}
.back-strip a:hover { color: var(--ink); }

/* ---------- introduction ---------- */

.intro {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 72px;
  padding: 60px 0 110px;
  align-items: start;
}
.portrait-frame {
  aspect-ratio: 4 / 5;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  position: sticky;
  top: 32px;
}
.portrait-frame p {
  font-style: italic;
  color: var(--faint);
  font-size: 15.5px;
  max-width: 22ch;
}
.intro-text h1 {
  font-family: var(--disp);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.25;
  margin: 14px 0 26px;
}
.intro-text p {
  max-width: 58ch;
  margin-bottom: 20px;
  font-size: 18px;
}
.intro-text .key {
  font-family: var(--disp);
  font-size: 24px;
  line-height: 1.4;
  max-width: 30ch;
  margin: 34px 0;
  padding-left: 22px;
  border-left: 1px solid var(--ink);
}
.intro-text .sig {
  font-style: italic;
  color: var(--mid);
}
.intro-links {
  margin-top: 34px;
  display: flex;
  gap: 26px;
}
.intro-links a {
  font-family: var(--util);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
}

/* ---------- contact ---------- */

.contact {
  padding: 90px 0 130px;
  text-align: center;
}
.contact h1 {
  font-family: var(--disp);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 42px);
  margin-top: 14px;
}
.contact .email {
  display: inline-block;
  font-family: var(--disp);
  font-size: clamp(20px, 3vw, 34px);
  letter-spacing: 0.02em;
  margin-top: 34px;
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 6px;
}
.contact .socials {
  margin-top: 44px;
  display: flex;
  justify-content: center;
  gap: 34px;
}
.contact .socials a {
  font-family: var(--util);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mid);
  text-decoration: none;
}
.contact .socials a:hover { color: var(--ink); }
.contact .note {
  margin-top: 40px;
  color: var(--mid);
  font-size: 16px;
}

/* ---------- footer ---------- */

.site-foot {
  border-top: 1px solid var(--line);
  padding: 40px 0 48px;
}
.site-foot .wrap {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  flex-wrap: wrap;
}
.foot-id {
  font-family: var(--util);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mid);
}
.foot-thesis {
  font-style: italic;
  color: var(--mid);
  font-size: 15px;
}
.foot-links {
  display: flex;
  gap: 22px;
}
.foot-links a {
  font-family: var(--util);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mid);
  text-decoration: none;
}
.foot-links a:hover { color: var(--ink); }

/* ---------- lightbox ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(18, 16, 8, 0.97);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 56px 72px;
}
.lightbox img {
  max-width: 100%;
  max-height: calc(100vh - 160px);
  width: auto;
  height: auto;
}
.lb-caption {
  margin-top: 16px;
  display: flex;
  gap: 18px;
  align-items: baseline;
  color: rgba(253, 252, 250, 0.75);
}
.lb-caption .t { font-style: italic; font-size: 15.5px; }
.lb-caption .n {
  font-family: var(--util);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.18em;
}
.lightbox .lb-btn {
  position: absolute;
  background: none;
  border: 0;
  color: rgba(253, 252, 250, 0.85);
  font-family: var(--body);
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
  padding: 14px;
}
.lightbox .lb-btn:hover { color: #fff; }
.lb-close { top: 18px; right: 22px; }
.lb-prev  { left: 16px; top: 50%; transform: translateY(-50%); }
.lb-next  { right: 16px; top: 50%; transform: translateY(-50%); }

/* ---------- motion ---------- */

/* hero arrival: the one orchestrated moment — the photograph settles like a
   viewfinder coming to rest, the brackets arrive, the caption follows */
@keyframes hero-img {
  from { opacity: 0; transform: scale(1.02); }
  to   { opacity: 1; transform: none; }
}
@keyframes c-tl { from { opacity: 0; transform: translate(-8px, -8px); } to { opacity: 1; transform: none; } }
@keyframes c-tr { from { opacity: 0; transform: translate(8px, -8px); }  to { opacity: 1; transform: none; } }
@keyframes c-bl { from { opacity: 0; transform: translate(-8px, 8px); }  to { opacity: 1; transform: none; } }
@keyframes c-br { from { opacity: 0; transform: translate(8px, 8px); }   to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.hero { overflow: hidden; }
.hero img { animation: hero-img 2s ease-out both; }
.hero .tl { animation: c-tl 0.7s ease-out 1.2s both; }
.hero .tr { animation: c-tr 0.7s ease-out 1.3s both; }
.hero .bl { animation: c-bl 0.7s ease-out 1.3s both; }
.hero .br { animation: c-br 0.7s ease-out 1.4s both; }
.hero-caption { animation: rise 0.6s ease-out 1.7s both; }

/* scroll reveal: photographs and frames rise gently into place, once.
   Gated behind html.js so a page without JavaScript is simply static. */
html.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
html.js .reveal.in {
  opacity: 1;
  transform: none;
}

/* lightbox: backdrop fades, the image settles up a touch */
.lightbox {
  display: flex;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.lightbox.open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.25s ease;
}
.lightbox img {
  transform: translateY(8px);
  transition: transform 0.35s ease 0.05s, opacity 0.2s ease;
}
.lightbox.open img { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero img, .hero .corner, .hero-caption { animation: none; }
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  .card .art img { transition: none; }
  .vf.hov > .corner { transition: none; }
  .site-nav a { transition: none; }
  .lightbox, .lightbox.open { transition: none; }
  .lightbox img { transform: none; transition: none; }
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .cards, .await-grid { grid-template-columns: repeat(2, 1fr); }
  .intro { grid-template-columns: 1fr; gap: 44px; }
  .portrait-frame { position: static; max-width: 380px; }
  .index-list { columns: 1; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .site-head .wrap { flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px 0; }
  .site-nav { gap: 20px; }
  .thesis { padding: 70px 0 60px; }
  .selected .row { grid-template-columns: 1fr; }
  .cards, .await-grid { grid-template-columns: 1fr; }
  .lightbox { padding: 56px 16px; }
  .lb-prev { left: 2px; }
  .lb-next { right: 2px; }
}


/* ---------- Drive-rendered content ---------- */

/* A photograph whose dimensions Google has not reported yet: give it a sensible
   column rather than a frame sized from a shape we don't know. */
.plate.unsized { width: min(1080px, 100%); }
.plate.unsized img { max-height: 84vh; width: auto; margin: 0 auto; }

/* the portrait frame once Martin's own photograph is in the folder */
.portrait-frame.has-photo { padding: 0; border: 0; display: block; }
.portrait-frame.has-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 5;
}

noscript .ns-galleries { list-style: none; columns: 2; margin-top: 20px; }
noscript .ns-galleries a { color: var(--ink); }

/* ---------- status page (for Martin, not for visitors) ---------- */

.status { margin: 34px 0 10px; }
.status-line {
  font-family: var(--body);
  font-size: 19px;
  padding: 16px 20px;
  border-left: 2px solid var(--line);
  margin-bottom: 26px;
}
.status-line.ok { border-left-color: #2E7D4F; }
.status-line.warn { border-left-color: #B4642A; }
.status-grid {
  display: grid;
  grid-template-columns: minmax(200px, max-content) 1fr;
  gap: 10px 28px;
  align-items: baseline;
}
.status-grid dt {
  font-family: var(--util);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
}
.status-grid dd { font-size: 17px; }
.status h2 {
  font-family: var(--disp);
  font-weight: 400;
  font-size: 24px;
  margin: 40px 0 14px;
}
.status-warnings { list-style: none; display: grid; gap: 12px; }
.status-warnings li {
  padding: 12px 16px;
  background: rgba(180, 100, 42, 0.06);
  font-size: 16px;
  color: var(--mid);
}
.status-warnings strong { color: var(--ink); font-weight: 500; }
.status-clear { color: var(--mid); margin-top: 8px; }
.status-help { padding: 10px 0 90px; max-width: 62ch; }
.status-help h2 {
  font-family: var(--disp);
  font-weight: 400;
  font-size: 24px;
  margin: 40px 0 14px;
}
.status-help ol { margin-left: 20px; display: grid; gap: 10px; color: var(--mid); }
.status-help strong { color: var(--ink); font-weight: 500; }

.status-guide { margin-top: 30px; }
.status-guide a {
  font-family: var(--util);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mid);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 3px;
}
.status-guide a:hover { color: var(--ink); }

/* ---------- Umber Studio credit badge (from umber-studio/snippets/credit-badge.html) ---------- */

/* ============================================================================
   Umber Studio credit badge
   Sits in the footer's normal flow. Loads nothing at all: no webfont, no
   image, no script from anywhere, no cookie, no beacon. It inherits the host
   site's typeface and ink on purpose, so at rest it reads as one more line of
   the client's own footer rather than another brand's advert.

   Per-site overrides, set inline on the <a> — never by editing this block:
     --us-ink     the badge's ink        (default: the footer's own colour)
     --us-accent  wet paint + hairline   (default: #8F7151, the logo's brown)
     --us-size    size within its row    (default: .72em)
   ==========================================================================*/

/* Self-defence. The badge is pasted into stylesheets we do not control, so
   neutralise what could deform it while still INHERITING host typography.
   Deliberately not `all:unset`, and deliberately not applied to the <svg>:
   in SVG 2, stroke-width / stroke-linecap / clip-path are CSS properties, so a
   blanket reset erases the mark's presentation attributes and the brush
   collapses to a 1px butt-capped hairline. Kept at a lower specificity than
   the rules below, which are all written `a.us-credit .x` so they win. */
a.us-credit,a.us-credit span{
  margin:0;padding:0;border:0;outline:0;background:none;
  box-shadow:none;text-shadow:none;text-indent:0;
  float:none;clear:none;position:static;top:auto;right:auto;bottom:auto;left:auto;
  width:auto;height:auto;min-width:0;min-height:0;max-width:none;max-height:none;
  transform:none;filter:none;opacity:1;visibility:visible;
  text-decoration:none;text-align:inherit;vertical-align:baseline;
  word-break:normal;overflow-wrap:normal;
  box-sizing:border-box;-webkit-text-size-adjust:100%;animation:none;
  /* These four must be forced. A universal host rule such as
     `*{letter-spacing:.3em!important}` otherwise beats a plain `inherit` and
     leaks into the badge's inner spans only — inflating it by about 75% while
     the anchor itself still reports the right value, which is a genuinely
     confusing way for the credit to break on a live site. */
  font-family:inherit!important;font-style:inherit!important;
  font-weight:inherit!important;font-size:inherit!important;
  letter-spacing:inherit!important;text-transform:inherit!important;
  word-spacing:inherit!important;font-variant:inherit!important;
}
/* The <svg> is excluded from the reset above on purpose, but it still needs
   protection from host box-model and decoration rules — a stray
   `svg{border:1px solid}` or `svg{max-width:100%}` would otherwise deform the
   mark. Only box-model and decoration here: never fill, stroke, stroke-width,
   stroke-linecap or clip-path, which are the mark's actual paint. */
a.us-credit svg{
  border:0;outline:0;background:none;box-shadow:none;filter:none;
  margin:0;padding:0;max-width:none;max-height:none;min-width:0;
  vertical-align:baseline;
}

/* `!important` is confined to the declarations that carry the badge's own
   geometry and legibility. Host stylesheets in the wild do ship universal
   `!important` typography (a real `*{letter-spacing:.3em!important}` pushed an
   earlier build of this badge off a 360px screen), and losing these turns the
   credit into a broken line on someone's live site. Colour is deliberately NOT
   forced, so --us-ink and the host's own ink both still win. */
a.us-credit{
  display:inline-flex!important;align-items:center;gap:.62em;
  font-size:var(--us-size,.72em)!important;line-height:1.1!important;
  text-transform:uppercase!important;letter-spacing:.17em!important;
  text-decoration:none!important;color:var(--us-ink,currentColor);
  cursor:pointer;vertical-align:baseline;opacity:1!important;
  /* Never widen a host's footer row. The badge holds one line wherever it
     fits and only wraps when the row genuinely cannot take it, which is what
     keeps it inside a 360px screen in a footer it does not control. */
  max-width:100%;flex-wrap:wrap;
  -webkit-tap-highlight-color:transparent;
}
/* Host link styling must not reach the badge. `a:hover{opacity:.5}` is common
   and ties on specificity with `a.us-credit`, so source order alone would
   decide whether the credit fades on hover — hence the forced opacity. */
a.us-credit:hover,a.us-credit:focus,a.us-credit:active,a.us-credit:visited{
  color:var(--us-ink,currentColor);
  text-decoration:none!important;opacity:1!important;
}

a.us-credit .us-credit__mark{
  display:block!important;flex:none;
  height:1.5em!important;width:auto!important;overflow:visible;
  min-height:12px;   /* never below legibility on a small footer row */
}
.us-credit__brush{stroke:currentColor;fill:none;transition:stroke .5s ease}

a.us-credit .us-credit__text{
  display:inline-flex!important;align-items:baseline;gap:.42em;
  position:relative;flex-wrap:wrap;max-width:100%;
}
/* the studio name itself must never break mid-phrase */
a.us-credit .us-credit__name{white-space:nowrap}
/* the connective words step back so the studio name is what actually reads */
a.us-credit .us-credit__pre{opacity:.68!important}
a.us-credit .us-credit__name{opacity:1!important}
/* the reward for intent: a hairline drawn under the words, left to right */
a.us-credit .us-credit__text::after{
  content:"";position:absolute;left:0;right:0;bottom:-.42em;height:1px;
  background:var(--us-accent,#8F7151);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .16s ease;   /* fast, unstaggered leave: snaps back */
}
a.us-credit:hover .us-credit__text::after,
a.us-credit:focus-visible .us-credit__text::after{
  transform:scaleX(1);transition:transform .34s cubic-bezier(.5,0,.2,1);
}
a.us-credit:hover .us-credit__brush,
a.us-credit:focus-visible .us-credit__brush{stroke:var(--us-accent,#8F7151)}
a.us-credit:focus-visible{
  outline:2px solid var(--us-accent,#8F7151);outline-offset:3px;border-radius:2px;
}

/* Arrival. Only ever armed by the script, so with JavaScript off, or on a page
   where the footer is already visible at load, the badge simply renders
   finished — no motion on load in someone else's footer. */
.us-credit--arm .us-credit__brush{
  stroke-dasharray:var(--l);stroke-dashoffset:var(--l);
  stroke:var(--us-accent,#8F7151);
}
.us-credit--paint .us-credit__brush{
  stroke-dashoffset:0;stroke:currentColor;
  transition:stroke-dashoffset .62s cubic-bezier(.5,0,.2,1),stroke .7s ease .34s;
}
.us-credit--paint .us-credit__brush[data-o="1"]{transition-delay:.13s,.47s}
.us-credit--paint .us-credit__brush[data-o="2"]{transition-delay:.26s,.6s}

@media (prefers-reduced-motion:reduce){
  .us-credit--arm .us-credit__brush{
    stroke-dasharray:none;stroke-dashoffset:0;stroke:currentColor;
  }
  .us-credit__brush,a.us-credit .us-credit__text::after{transition:none}
  a.us-credit:hover .us-credit__text::after,
  a.us-credit:focus-visible .us-credit__text::after{transform:scaleX(1);transition:none}
}