/* ============================================================================
   Grace — pastoral. Warm ivory, one gold accent, a great deal of space.
   ----------------------------------------------------------------------------
   Palette and typefaces match the `grace` row in `ministry_templates`, because
   a demo that disagrees with the swatches beside it on the templates page is
   worse than no demo. Self-contained: nothing here reads a token from the
   marketing site, so the two cannot drift into looking alike.
   ========================================================================== */

.demo-body--grace {
  --ivory: #faf7f0;
  --ivory-2: #f4eee1;
  --gold: #c59a4a;
  --gold-deep: #8a6620;
  --ink: #20252b;
  --ink-soft: #5c636b;
  --line: rgba(32, 37, 43, 0.12);

  background: var(--ivory);
  color: var(--ink);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Songti SC", "Source Han Serif SC", "Noto Serif CJK SC", "STSong", SimSun, serif;
  font-size: 17px;
  line-height: 1.7;
}

.g-shell {
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

/* Sans for the small structural text — labels, navigation, metadata. The
   serif carries the reading, the sans carries the signposting. */
.g-eyebrow, .g-nav, .g-button, .g-times dt, .g-sermon__meta, .g-link,
.g-art__note, .g-footer h3, .g-sermon__series {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

h1, h2, h3 { font-weight: 500; line-height: 1.18; letter-spacing: var(--track-label, -0.01em); }

.g-eyebrow {
  margin-bottom: 0.9rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--track-label, 0.16em);
  text-transform: uppercase;
  color: var(--gold-deep);
}
.g-eyebrow--light { color: #e9cf9c; }

.g-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0.6rem 1.6rem;
  border: 1px solid var(--gold-deep);
  border-radius: 2px;
  background: var(--gold-deep);
  color: #fffdf8;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: var(--track-label, 0.02em);
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease;
}
.g-button:hover { background: #6d5019; border-color: #6d5019; }
.g-button--sm { min-height: 40px; padding: 0.4rem 1.1rem; font-size: 0.82rem; }
.g-button--ghost { background: transparent; color: var(--gold-deep); }
.g-button--ghost:hover { background: rgba(138, 102, 32, 0.09); color: var(--gold-deep); }
.g-button--light { background: #f3e6c8; border-color: #f3e6c8; color: #2a2213; }
.g-button--light:hover { background: #fff; border-color: #fff; color: #2a2213; }

.g-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gold-deep);
  text-decoration: none;
  border-bottom: 1px solid rgba(138, 102, 32, 0.4);
  padding-bottom: 1px;
}
.g-link:hover { border-bottom-color: currentColor; }
.g-link--light { color: #e9cf9c; border-bottom-color: rgba(233, 207, 156, 0.45); }

/* ── Header ──────────────────────────────────────────────────────────────── */

.g-header {
  border-bottom: 1px solid var(--line);
  background: rgba(250, 247, 240, 0.94);
  backdrop-filter: blur(8px);
}
.g-header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 82px;
}
.g-wordmark { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; }
.g-wordmark__mark { width: 30px; height: 30px; color: var(--gold-deep); flex: none; }
.g-wordmark__text { display: flex; flex-direction: column; line-height: 1.05; }
.g-wordmark__text strong { font-size: 1.18rem; font-weight: 600; letter-spacing: var(--track-label, 0.01em); }
.g-wordmark__text em {
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: var(--track-label, 0.24em);
  text-transform: uppercase;
  color: var(--ink-soft);
}
.g-nav { display: flex; gap: 1.6rem; margin-inline-start: auto; font-size: 0.88rem; }
.g-nav a { text-decoration: none; color: var(--ink-soft); padding-block: 0.5rem; }
.g-nav a:hover { color: var(--gold-deep); }

@media (max-width: 860px) {
  /* Not display:none. The navigation is the only way between this
     demonstration's four pages, and a phone is where most people will look at
     it — hiding it here left them with a home page and no way out of it. It
     wraps under the wordmark instead. */
  .g-header__inner { flex-wrap: wrap; gap: 0.5rem 1rem; }
  .g-wordmark { flex: 1 0 100%; }
  .g-nav { gap: 0.9rem; font-size: 0.84rem; flex-wrap: wrap; }
  .g-header__inner { justify-content: space-between; }
  .g-button--sm { margin-inline-start: auto; }
}

/* ── Hero ────────────────────────────────────────────────────────────────── */

.g-hero { position: relative; padding-block: clamp(3.5rem, 9vw, 7rem) 0; overflow: hidden; }
.g-hero__glow {
  position: absolute;
  inset: -20% 0 auto;
  height: 70%;
  background: radial-gradient(52rem 26rem at 50% 0%, rgba(197, 154, 74, 0.2), transparent 68%);
  pointer-events: none;
}
.g-hero__inner { position: relative; max-width: 46rem; text-align: center; }
.g-hero__inner .g-eyebrow { display: block; }
.g-hero__title {
  font-size: clamp(2.4rem, 6.5vw, 4.15rem);
  margin-bottom: 1.4rem;
}
.g-hero__lede {
  max-width: 34rem;
  margin-inline: auto;
  color: var(--ink-soft);
  font-size: 1.06rem;
}
.g-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 2.1rem;
}

/* The service times sit in the hero, not three screens down. It is the single
   most looked-for fact on a church website. */
.g-times {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 0;
  margin-top: clamp(3rem, 7vw, 5rem);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.g-times > div { padding: 1.5rem 0.25rem 1.6rem; }
.g-times > div + div { border-inline-start: 1px solid var(--line); padding-inline-start: 1.5rem; }
.g-times dt {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: var(--track-label, 0.15em);
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.4rem;
}
.g-times dd { margin: 0; font-size: 0.98rem; color: var(--ink-soft); }
.g-times dd strong { display: block; font-size: 1.5rem; font-weight: 500; color: var(--ink); }

@media (max-width: 760px) {
  .g-times > div + div { border-inline-start: 0; border-top: 1px solid var(--line); padding-inline-start: 0.25rem; }
}

/* ── Sections ────────────────────────────────────────────────────────────── */

.g-section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.g-section--tint { background: var(--ivory-2); }

.g-head { max-width: 40rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.g-head h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
.g-head__lede { margin-top: 0.9rem; color: var(--ink-soft); }

.g-split {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  align-items: center;
}
@media (max-width: 880px) { .g-split { grid-template-columns: 1fr; } }

.g-art { margin: 0; position: relative; }
.g-art svg { width: 100%; height: auto; border-radius: 2px; }
.g-art__note {
  position: absolute;
  inset-block-end: 0.9rem;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.86);
  color: #7a6740;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: var(--track-label, 0.09em);
  text-transform: uppercase;
  white-space: nowrap;
}

.g-prose h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin-bottom: 1.2rem; }
.g-prose p + p { margin-top: 1.1rem; }
.g-prose p { color: var(--ink-soft); }
.g-signature {
  margin-top: 1.8rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  font-style: italic;
}
.g-signature span {
  display: block;
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: var(--track-label, 0.16em);
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 0.2rem;
}

/* ── Sermons ─────────────────────────────────────────────────────────────── */

.g-sermons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.g-sermon { padding-top: 1.4rem; border-top: 2px solid var(--gold); }
.g-sermon__series {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: var(--track-label, 0.14em);
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 0.55rem;
}
.g-sermon__title { font-size: 1.32rem; margin-bottom: 0.45rem; }
.g-sermon__title a { text-decoration: none; }
.g-sermon__title a:hover { color: var(--gold-deep); }
.g-sermon__ref { font-style: italic; color: var(--ink-soft); }
.g-sermon__meta {
  display: flex;
  gap: 0.45rem;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.g-sermon__actions { display: flex; gap: 1.2rem; margin-top: 1rem; }
.g-more { margin-top: clamp(2rem, 4vw, 3rem); }

/* ── Ministries ──────────────────────────────────────────────────────────── */

.g-ministries {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: clamp(1.25rem, 3vw, 2.25rem);
}
.g-ministries li { padding-inline-start: 1.15rem; border-inline-start: 1px solid var(--gold); }
.g-ministries h3 { font-size: 1.12rem; margin-bottom: 0.4rem; }
.g-ministries p { color: var(--ink-soft); font-size: 0.95rem; }

/* ── Giving ──────────────────────────────────────────────────────────────── */

.g-give { padding-block: clamp(3rem, 7vw, 5rem); background: #2b2f26; color: #efe9dc; }
.g-give__inner {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: center;
}
@media (max-width: 780px) { .g-give__inner { grid-template-columns: 1fr; } }
.g-give h2 { font-size: clamp(1.7rem, 3.2vw, 2.3rem); margin-bottom: 0.9rem; }
.g-give p { color: #c8c2b4; max-width: 38rem; }
.g-give__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }

/* ── Footer ──────────────────────────────────────────────────────────────── */

.g-footer { padding-block: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--line); background: var(--ivory-2); }
.g-footer__inner {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  color: var(--ink-soft);
  font-size: 0.92rem;
}
.g-footer__name { font-size: 1.15rem; color: var(--ink); margin-bottom: 0.4rem; }
.g-footer h3 {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: var(--track-label, 0.15em);
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 0.5rem;
}

/* ── Tap targets ─────────────────────────────────────────────────────────────
   Found by adding the demonstrations to visual-check.py. These are inline text
   links in a serif at 0.85rem, so their natural height is about 25px — well
   under the 44px this project holds itself to everywhere else, and the people
   these templates are built for are overwhelmingly on a phone. A demonstration
   that a church cannot comfortably tap is demonstrating the wrong thing. */
.g-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.g-wordmark { min-height: 44px; }
.g-sermon__actions { gap: 1.4rem; margin-top: 0.5rem; }
.g-give__actions .g-link { min-height: 44px; }

@media (max-width: 820px) {
  /* A headline that is also a link is still a tap target. */
  .g-sermon__title a { display: inline-flex; min-height: 44px; align-items: center; }
}

/* The photograph replaces the drawn arch. Kept quiet: this template is about
   space, and a picture with a hard edge would be the loudest thing on it. */
.g-art { border-radius: 2px; box-shadow: 0 18px 40px -24px rgba(60, 48, 30, 0.5); }

/* The hero photograph sits under an ivory scrim (demo.css), so the section
   needs enough height for it to read as a picture rather than as a tint. */
.g-hero.demo-cover { padding-block: clamp(4.5rem, 11vw, 8rem) clamp(2rem, 5vw, 4rem); }
/* The inner pages set heading-and-paragraph pairs one after another. Without
   this they run together into one block of text with bold lines in it. */
.g-prose p + h2 { margin-top: 2.2rem; }
.g-prose h2 { margin-bottom: 0.5rem; }

/* ============================================================================
   The blocks a real church website has and this demonstration did not.
   ----------------------------------------------------------------------------
   Ray's verdict on the first version was 过家家 — children playing house — and
   he was right. Four or five sections of prose is not what a congregation's
   website looks like; it is what a wireframe of one looks like. A church site
   answers, in this order: when do you meet, what did you preach, what is on
   this week, who would I meet, how do I get there, how do I give, how do I
   hear from you. Every one of those is a designed component on a real site and
   none of them existed here.

   They are written into THIS stylesheet rather than into demo.css on purpose.
   Nine templates sharing one component set would make nine pages with the same
   bones and different colours, which is the exact impression these demos exist
   to dispel. Grace's are quiet, ruled, and serif-led; Community's are rounded
   and Light's are bare, because they are different products.
   ========================================================================== */

/* ── The featured sermon: a player, not a list item ──────────────────────── */

.g-feature {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #fffdf8;
  box-shadow: 0 24px 50px -34px rgba(60, 48, 30, 0.55);
}
@media (max-width: 820px) { .g-feature { grid-template-columns: 1fr; } }

.g-feature__art { position: relative; margin: 0; border-radius: 2px; overflow: hidden; }
.g-feature__art img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.g-feature__badge {
  position: absolute;
  inset-block-start: 0.75rem;
  inset-inline-start: 0.75rem;
  padding: 0.3rem 0.7rem;
  border-radius: 2px;
  background: rgba(255, 253, 248, 0.93);
  font-family: "Inter", sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: var(--track-label, 0.16em);
  text-transform: uppercase;
  color: var(--gold-deep);
}
.g-feature__body h3 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 0.4rem; }
.g-feature__ref { font-style: italic; color: var(--ink-soft); margin-bottom: 1.2rem; }

/* The play control and the rail beside it. A still picture of a player is what
   a ministry is buying — it has to look like it would work. */
.g-player { display: flex; align-items: center; gap: 1rem; }
.g-player__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: var(--gold-deep);
  color: #fffdf8;
  text-decoration: none;
  transition: background 0.25s ease, transform 0.25s ease;
}
.g-player__btn:hover { background: #6d5019; transform: scale(1.05); }
.g-player__btn svg { width: 18px; height: 18px; margin-inline-start: 3px; }
.g-player__rail { flex: 1; min-width: 0; }
.g-player__bar {
  position: relative;
  height: 4px;
  border-radius: 999px;
  background: rgba(138, 102, 32, 0.18);
  overflow: hidden;
}
.g-player__bar span { position: absolute; inset: 0 auto 0 0; width: 32%; background: var(--gold-deep); }
.g-player__time {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
  font-family: "Inter", sans-serif;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}
.g-feature__links { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: 1.1rem; }

/* ── What is on: dated entries, the way a noticeboard reads ──────────────── */

.g-events { display: grid; gap: 0; border-top: 1px solid var(--line); }
.g-event {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) auto;
  gap: clamp(1rem, 3vw, 2rem);
  align-items: center;
  padding-block: 1.35rem;
  border-bottom: 1px solid var(--line);
  transition: background 0.2s ease;
}
.g-event:hover { background: rgba(197, 154, 74, 0.06); }
.g-event__date {
  text-align: center;
  padding: 0.55rem 0.3rem;
  border: 1px solid var(--gold);
  border-radius: 2px;
  line-height: 1.05;
}
.g-event__day {
  display: block;
  font-size: 1.55rem;
  font-weight: 500;
  color: var(--ink);
}
.g-event__month {
  display: block;
  margin-top: 0.25rem;
  font-family: "Inter", sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: var(--track-label, 0.16em);
  text-transform: uppercase;
  color: var(--gold-deep);
}
.g-event__body h3 { font-size: 1.15rem; margin-bottom: 0.25rem; }
.g-event__meta { font-family: "Inter", sans-serif; font-size: 0.8rem; color: var(--ink-soft); }
.g-event__go { white-space: nowrap; }
@media (max-width: 720px) {
  .g-event { grid-template-columns: 4.5rem minmax(0, 1fr); }
  .g-event__go { grid-column: 2; }
}

/* ── The people you would meet ───────────────────────────────────────────────
   Monogram discs, not stock portraits. The rule against invented faces holds
   here for the reason it holds everywhere — a photograph of a person is a
   claim about who serves this church — but "no picture" does not have to mean
   "no design". Initials in a ruled disc is what a real site does when the
   photographs have not been taken yet, and it looks deliberate. */

.g-people {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.g-person { text-align: center; }
.g-person__disc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  margin: 0 auto 0.9rem;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: var(--ivory-2);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--gold-deep);
}
.g-person h3 { font-size: 1.08rem; margin-bottom: 0.2rem; }
.g-person__role {
  font-family: "Inter", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: var(--track-label, 0.12em);
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 0.5rem;
}
.g-person p { font-size: 0.9rem; color: var(--ink-soft); }

/* ── Finding the building ────────────────────────────────────────────────────
   A drawn map rather than an embedded one. An iframe from a mapping provider
   would be a third-party request on a page whose whole point is that it is
   self-contained, and it would look identical in all nine templates. This one
   is engraved, like the rest of Grace. */

.g-visit {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
@media (max-width: 880px) { .g-visit { grid-template-columns: 1fr; } }
.g-map {
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--ivory-2);
  overflow: hidden;
}
.g-map svg { display: block; width: 100%; height: auto; }
.g-facts { display: grid; gap: 1.4rem; }
.g-fact h3 {
  font-family: "Inter", sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: var(--track-label, 0.15em);
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 0.3rem;
}
.g-fact p { color: var(--ink-soft); }

/* ── Giving: amounts you can actually choose ────────────────────────────── */

.g-amounts { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.2rem; }
.g-amount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 4.5rem;
  padding: 0.4rem 1rem;
  border: 1px solid rgba(233, 207, 156, 0.5);
  border-radius: 2px;
  background: transparent;
  color: #efe9dc;
  font-family: "Inter", sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.g-amount:hover, .g-amount.is-on {
  background: #f3e6c8;
  border-color: #f3e6c8;
  color: #2a2213;
}

/* ── Keeping in touch ───────────────────────────────────────────────────── */

.g-signup {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--line);
}
@media (max-width: 820px) { .g-signup { grid-template-columns: 1fr; } }
.g-signup h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 0.5rem; }
.g-signup p { color: var(--ink-soft); font-size: 0.95rem; }
.g-form { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.g-form input {
  flex: 1 1 14rem;
  min-height: 46px;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: #fffdf8;
  color: var(--ink);
  font-family: "Inter", sans-serif;
  font-size: 0.95rem;
}
.g-form input:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 1px; }
.g-form__note {
  flex: 1 0 100%;
  font-family: "Inter", sans-serif;
  font-size: 0.76rem;
  color: var(--ink-soft);
}

/* ── The footer a real site has ──────────────────────────────────────────── */

.g-footer__inner { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); align-items: start; }
@media (max-width: 900px) {
  .g-footer__inner { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
}
.g-footer__brand { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.9rem; }
.g-footer__brand svg { width: 30px; height: 30px; color: var(--gold-deep); flex: none; }
.g-footer ul { display: grid; gap: 0.45rem; }
.g-footer li a { color: var(--ink-soft); text-decoration: none; }
.g-footer li a:hover { color: var(--gold-deep); }
.g-social { display: flex; gap: 0.5rem; margin-top: 0.9rem; }
.g-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-soft);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.g-social a:hover { border-color: var(--gold-deep); color: var(--gold-deep); }
.g-social svg { width: 17px; height: 17px; }
.g-footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  font-family: "Inter", sans-serif;
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.g-footer__base a { color: inherit; }