/* site.css — Plan with Brian, look v2: bright and modern. White ground, mint tints, one bold emerald,
   amber for the gap and only the gap. Rounded cards with soft depth, pill buttons, motion that explains.
   The old token names are kept and remapped so every page stylesheet follows the new system. */

/* ---------- tokens ---------- */
:root {
  --evergreen: #007F55;          /* strong emerald: buttons, links, fills that carry white text (AA on white) */
  --accent: #00A36C;             /* bright emerald: graphics, highlights, large type */
  --deep: #0B5E40;               /* the one dark-emerald field */
  --paper: #FFFFFF;
  --paper-2: #F3F6F4;
  --sage: #E6F7EF;               /* mint */
  --mint-2: #C6EEDA;
  --brass: #FFC145;              /* amber: the gap */
  --gap-soft: #FFF3D6;
  --ink: #0C1F18;
  --muted: #4B5E57;
  --good: #00A36C;

  /* emerald, stepping lighter: the Fit Check stages read dark to light */
  --tint-1: #0B5E40; --tint-2: #008A5C; --tint-3: #0F7D57; --tint-4: #5CC79B; --tint-5: #A8E3C7; --tint-6: #DDF4E9;

  --font-display: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-text: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --step-small: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --step-body: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);
  --step-lead: clamp(1.1875rem, 1.05rem + 0.5vw, 1.4375rem);
  --step-head: clamp(2.25rem, 1.3rem + 3vw, 4rem);
  --step-figure: clamp(1.6rem, 1.2rem + 1.3vw, 2.5rem);
  --step-display: clamp(3rem, 1rem + 6.4vw, 6.25rem);

  --margin: clamp(1rem, 3vw, 3rem);
  --gutter: clamp(1rem, 2vw, 2rem);
  --section: clamp(5rem, 11vw, 10rem);
  --head-h: 4.5rem;
  --r-lg: 28px; --r-md: 20px; --r-sm: 14px; --r-xs: 10px;
  --shadow-card: 0 1px 0 rgba(12, 31, 24, 0.06), 0 24px 48px -28px rgba(12, 31, 24, 0.28), 0 8px 16px -12px rgba(12, 31, 24, 0.12);
  --shadow-lift: 0 1px 0 rgba(12, 31, 24, 0.06), 0 32px 56px -28px rgba(12, 31, 24, 0.36), 0 10px 20px -12px rgba(12, 31, 24, 0.16);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
  --t-reveal: 800ms;
}

/* ---------- fields: each section's ground, ink and button ---------- */
.field-paper     { --bg: #FFFFFF;        --fg: var(--ink);   --btn-bg: var(--evergreen); --btn-fg: #fff; --step: var(--paper-2); }
.field-paper-2   { --bg: var(--paper-2); --fg: var(--ink);   --btn-bg: var(--evergreen); --btn-fg: #fff; --step: #fff; }
.field-sage      { --bg: var(--sage);    --fg: var(--ink);   --btn-bg: var(--evergreen); --btn-fg: #fff; --step: #fff; }
.field-brass     { --bg: var(--gap-soft); --fg: var(--ink);  --btn-bg: var(--ink);       --btn-fg: #fff; --step: #fff; }
.field-evergreen { --bg: var(--deep);    --fg: #fff;         --btn-bg: #fff;             --btn-fg: var(--ink); --step: #0F6B4A; }
.field-mid       { --bg: var(--evergreen); --fg: #fff;       --btn-bg: #fff;             --btn-fg: var(--ink); --step: #0F7D57; }
.field-ink       { --bg: var(--ink);     --fg: #fff;         --btn-bg: var(--accent);    --btn-fg: var(--ink); --step: #16302A; }
[class*="field-"] { background: var(--bg); color: var(--fg); }
.field-evergreen, .field-mid, .field-ink { --link: #fff; }

/* a closing chapter with no picture keeps its words on the left, wider */
.split-close:not(:has(.split-close__pic)) .split-close__text { grid-column: 1 / span 9; }
.split-close__pic--portrait { aspect-ratio: 4 / 5; max-width: 26rem; justify-self: end; width: 100%; }
.split-close__pic--portrait img { object-position: 50% 18%; }

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: var(--ink); font-family: var(--font-text); font-size: var(--step-body); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 0.07em; }
:target { scroll-margin-top: calc(var(--head-h) + 1.5rem); }
::selection { background: var(--mint-2); color: var(--ink); }
html { accent-color: var(--evergreen); caret-color: var(--evergreen); scroll-behavior: smooth; }
[class*="field-"] { caret-color: currentColor; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* ---------- type ---------- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; text-wrap: balance; font-optical-sizing: auto; }
.display { font-size: var(--step-display); line-height: 0.98; letter-spacing: -0.04em; font-weight: 800; }
.head { font-size: var(--step-head); line-height: 1.02; letter-spacing: -0.035em; font-weight: 800; }
.lead { font-size: var(--step-lead); line-height: 1.38; max-width: 42ch; }
.small { font-size: var(--step-small); line-height: 1.5; }
.sub { font-family: var(--font-display); font-size: var(--step-lead); line-height: 1.2; letter-spacing: -0.015em; font-weight: 700; }
p { max-width: 64ch; text-wrap: pretty; }
p + p { margin-top: 0.9em; }
.nums, .amt { font-variant-numeric: tabular-nums lining-nums; }
.note { font-size: var(--step-small); opacity: 0.8; }
.lead { color: color-mix(in srgb, currentColor 82%, transparent); }
strong { font-weight: 600; }

/* ---------- layout ---------- */
.wrap { padding-inline: var(--margin); max-width: 1680px; margin-inline: auto; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.chapter { padding-block: calc(var(--section) * 0.62) calc(var(--section) * 0.62); position: relative; }
.chapter--tall { min-height: 90svh; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--margin); top: -4rem; z-index: 100; background: var(--ink); color: #fff; padding: 0.75rem 1rem; border-radius: 999px; }
.skip:focus { top: 0.5rem; }

/* ---------- controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 3.25rem; padding: 0.5rem 1.6rem; background: var(--btn-bg, var(--evergreen)); color: var(--btn-fg, #fff);
  font-weight: 700; font-size: var(--step-small); text-decoration: none; white-space: nowrap; cursor: pointer; border-radius: 999px;
  box-shadow: 0 10px 22px -14px color-mix(in srgb, var(--btn-bg, var(--evergreen)) 90%, black);
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease, box-shadow var(--t-hover) ease;
}
:root { --i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 3.5 13.5 8 9 12.5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='square'/%3E%3C/svg%3E"); --i-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 10 8 5.5 12.5 10' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='square'/%3E%3C/svg%3E"); --i-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='square'/%3E%3C/svg%3E"); }
.icon, .btn::after, .textlink::after { content: ''; display: inline-block; width: 1em; height: 1em; flex: none; background: currentColor; -webkit-mask: var(--i-arrow) center / contain no-repeat; mask: var(--i-arrow) center / contain no-repeat; vertical-align: -0.12em; }
.btn::after { transition: transform var(--t-ui) var(--ease-out); }
.btn--plain::after { content: none; }
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline-offset: 3px; border-radius: 999px; }
.btn--sm { min-height: 2.5rem; padding: 0.4rem 1.1rem; }
.btn--sm::after { content: none; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover::after { transform: translateX(4px); }
  .btn:hover { transform: translateY(-2px); box-shadow: 0 18px 30px -16px color-mix(in srgb, var(--btn-bg, var(--evergreen)) 90%, black); filter: brightness(1.06); }
  .btn:hover:active { transform: scale(0.97); }
}

.btn--ghost { background: color-mix(in srgb, var(--fg, var(--ink)) 6%, transparent); color: var(--fg, var(--ink)); box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .btn--ghost:hover { background: color-mix(in srgb, var(--fg, var(--ink)) 12%, transparent); box-shadow: none; filter: none; } }
.fc-back { font-weight: 600; text-decoration: underline; text-underline-offset: 0.25em; min-height: 2.75rem; }

.textlink { font-weight: 700; color: var(--link, var(--evergreen)); text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.25em; transition: text-decoration-color var(--t-hover) ease, color var(--t-hover) ease; }
.textlink::after { margin-left: 0.3em; transition: transform var(--t-ui) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .textlink:hover::after { transform: translateX(3px); } }
@media (hover: hover) and (pointer: fine) { .textlink:hover { text-decoration-thickness: 0.16em; } }

/* form fields belong to forms: lines are allowed here */
.input {
  width: 100%; min-height: 3.25rem; padding: 0.7rem 0.9rem; background: #fff; color: var(--ink);
  border: 1.5px solid rgba(12, 31, 24, 0.16); border-radius: var(--r-xs); font-size: var(--step-body);
  font-variant-numeric: tabular-nums; transition: border-color var(--t-hover) ease, box-shadow var(--t-hover) ease;
}
@media (hover: hover) and (pointer: fine) { .input:hover { border-color: rgba(12, 31, 24, 0.36); } }
.input:focus { outline: none; border-color: var(--evergreen); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.money { position: relative; }
.money::before { content: '₱'; position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); font-weight: 600; pointer-events: none; }
.money .input { padding-left: 2rem; }

/* the folder-tab shape, used by the hero and anywhere a chapter is named on a tab */
.tab { display: inline-flex; align-items: center; height: 2rem; padding: 0 0.9rem; font-weight: 700; font-size: 0.8125rem; border-radius: 999px; background: var(--sage); color: var(--ink); }

/* ---------- the ledger: a real table, so it keeps its rules ---------- */
.ledger { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums lining-nums; }
.ledger th, .ledger td { padding: 0.75rem 0; text-align: left; vertical-align: baseline; border-bottom: 1px solid color-mix(in srgb, currentColor 10%, transparent); }
.ledger th { font-weight: 500; }
.ledger .expr { padding-inline: 1rem; opacity: 0.82; font-size: var(--step-small); }
.ledger .amt { text-align: right; white-space: nowrap; font-weight: 600; }
.ledger tfoot th, .ledger tfoot td { border-bottom: 0; border-top: 2px solid color-mix(in srgb, currentColor 80%, transparent); padding-top: 0.9rem; font-family: var(--font-display); font-size: var(--step-lead); font-weight: 700; }
.ledger .gap { color: var(--ink); background: var(--brass); padding: 0.1em 0.45em; border-radius: 8px; }   /* amber: the gap, and only the gap */

/* ---------- header ---------- */
.site-head { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, #fff 86%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); color: var(--ink); --btn-bg: var(--ink); --btn-fg: #fff; box-shadow: 0 1px 0 rgba(12, 31, 24, 0.06); }
.site-head__in { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: var(--head-h); }
.wordmark { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; letter-spacing: -0.03em; text-decoration: none; white-space: nowrap; }
.wordmark__mark { width: 2.25rem; height: 2.25rem; flex: none; }
.wordmark__with { font-weight: 500; color: var(--evergreen); }
.wm-bar, .wm-gap { transform-box: fill-box; transform-origin: center bottom; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  /* the bars rise again when you point at the logo: the gap closing */
  .wordmark:hover .wm-bar { animation: wm-rise 520ms var(--ease-back) both; animation-delay: calc(var(--n) * 70ms); }
  .wordmark:hover .wm-gap { animation: wm-drop 600ms var(--ease-back) 200ms both; }
}
@keyframes wm-rise { from { transform: scaleY(0.35); } to { transform: none; } }
@keyframes wm-drop { from { transform: translateY(-60%); opacity: 0; } to { transform: none; opacity: 1; } }
.site-nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.site-nav a:not(.btn) { font-weight: 600; font-size: var(--step-small); padding: 0.45rem 0.8rem; border-radius: 999px; text-decoration: none; color: var(--muted); transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) { .site-nav a:not(.btn):hover { background: var(--paper-2); color: var(--ink); } }
.site-nav a[aria-current="page"] { background: var(--sage); color: var(--ink); }
.site-head__menu { display: none; font-weight: 600; min-height: 2.75rem; padding: 0 0.25rem; }
/* the header is white on every page now; the old per-page classes are kept harmlessly */
@media (max-width: 60rem) {
  .site-head__menu { display: block; }
  .site-nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 0.5rem var(--margin) 1.25rem; background: #fff; border-radius: 0 0 var(--r-md) var(--r-md); box-shadow: 0 24px 40px -24px rgba(12, 31, 24, 0.4); display: none; }
  .site-nav.is-open { display: flex; }
  .site-nav a:not(.btn) { padding-block: 0.85rem; font-size: var(--step-body); }
  .site-nav__book { margin-top: 0.75rem; }
}

/* ---------- footer ---------- */
.site-foot { padding-block: clamp(4rem, 8vw, 7rem) 2rem; overflow: hidden; }
.site-foot__name { font-family: var(--font-display); font-weight: 800; font-size: var(--step-display); line-height: 0.85; letter-spacing: -0.045em; white-space: nowrap; max-width: none; }
.site-foot__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.5rem var(--gutter); margin-top: clamp(3rem, 6vw, 5rem); }
.site-foot__places { grid-column: 1 / span 6; font-family: var(--font-display); font-weight: 700; font-size: var(--step-lead); line-height: 1.35; letter-spacing: -0.02em; }
.site-foot__places a { text-decoration: underline 2px transparent; text-underline-offset: 0.18em; transition: text-decoration-color var(--t-ui) ease; overflow-wrap: anywhere; }
.site-foot__places a:hover { text-decoration-color: currentColor; }
.site-foot__links { grid-column: 7 / span 6; font-size: var(--step-small); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem var(--gutter); align-content: start; }
.site-foot__links ul { list-style: none; margin: 0; padding: 0; }
.site-foot__links li + li { margin-top: 0.55rem; }
.site-foot__links a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .site-foot__links a:hover { text-decoration: underline; } }
.site-foot__legal { margin-top: clamp(3.5rem, 7vw, 6rem); max-width: 56ch; }
.site-foot__credits { margin-top: 1rem; font-size: var(--step-small); max-width: 64ch; opacity: 0.82; }
.site-foot__end { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; font-size: var(--step-small); max-width: none; }
@media (max-width: 60rem) {
  .site-foot__places, .site-foot__links { grid-column: 1 / -1; }
  .site-foot__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- chapter openers used across inner pages ---------- */
.opener { padding-block: clamp(4rem, 9vw, 8rem) clamp(3.5rem, 7vw, 6rem); }
.opener h1 { max-width: 16ch; }
.opener .lead { margin-top: clamp(1.5rem, 2.5vw, 2.25rem); }
.opener__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
.opener__text { grid-column: 1 / span 7; }
.opener__aside { grid-column: 9 / span 4; }
@media (max-width: 60rem) { .opener__text, .opener__aside { grid-column: 1 / -1; } .opener__aside { margin-top: 2.5rem; } }

/* a closing chapter: the words on the left, the picture or the action on the right */
.split-close { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2rem; align-items: center; }
.split-close__text { grid-column: 1 / span 6; display: grid; gap: 1.5rem; justify-items: start; }
.split-close__pic { grid-column: 8 / span 5; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-lg); }
.split-close__pic img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 60rem) { .split-close__text, .split-close__pic { grid-column: 1 / -1; } }

/* a pictured half: square corners, one treatment */
.pic { overflow: hidden; background: var(--step); border-radius: var(--r-md); }
.pic img { width: 100%; height: 100%; object-fit: cover; }
.pic figcaption { font-size: var(--step-small); margin-top: 0.6rem; }

/* ---------- motion: content is visible without JavaScript ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(28px) scale(0.985); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js .shutter[data-reveal] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 1100ms var(--ease-in-out); }
  .js .shutter[data-reveal] img { transform: scale(1.12); transition: transform 1500ms var(--ease-soft); }
  .js .shutter[data-reveal].is-in { clip-path: inset(0); }
  .js .shutter[data-reveal].is-in img { transform: none; }
  .drift img { animation: drift 24s var(--ease-soft) infinite alternate; }
}
@keyframes drift { from { transform: scale(1.02); } to { transform: scale(1.1) translateX(-1.5%); } }
@media (prefers-reduced-motion: reduce) {
  /* fewer and gentler, not none: keep fades and colour changes, drop the travel */
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .js [data-reveal] { opacity: 0; transition: opacity 400ms ease; }
  .js [data-reveal].is-in { opacity: 1; }
  .btn:active, .fc-choice:active, .fc-pill:active { transform: none; }
}

@media print {
  .site-head, .site-foot__name, .site-foot__row, .site-foot__credits, .no-print { display: none !important; }
  [class*="field-"] { background: #fff !important; color: #000 !important; }
}

/* ---------- shared surfaces for look v2 ---------- */
.card-surface { background: #fff; color: var(--ink); border-radius: var(--r-lg); box-shadow: var(--shadow-card); }
.chip-pill { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.85rem; border-radius: 999px; background: var(--sage); color: var(--ink); font-weight: 700; font-size: 0.8125rem; }
.mark { position: relative; display: inline-block; z-index: 0; }
.mark::before { content: ''; position: absolute; left: -0.06em; right: -0.08em; bottom: 0.08em; height: 0.4em; background: var(--accent); opacity: 0.28; border-radius: 0.12em; z-index: -1; transform-origin: left; transform: scaleX(var(--mark, 1)); }
@property --mark { syntax: '<number>'; inherits: true; initial-value: 1; }
@keyframes bob { from { transform: translateY(0); } to { transform: translateY(-8px); } }
@keyframes bob2 { from { transform: translateY(-4px); } to { transform: translateY(5px); } }

/* ---------- the four covers, each with its moving graphic (home and /cover/) ---------- */
.jobs { list-style: none; margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.job { position: relative; background: #fff; border-radius: var(--r-md); padding: 1.25rem 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; box-shadow: 0 1px 0 rgba(12, 31, 24, 0.05); transition: transform 250ms var(--ease-out), box-shadow 250ms ease; }
@media (hover: hover) and (pointer: fine) { .job:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); } }
.job__art { height: 170px; border-radius: var(--r-sm); background: var(--sage); display: grid; place-items: center; overflow: hidden; margin-bottom: 0.5rem; }
.job__art svg { width: 150px; height: 150px; overflow: visible; }
.job__name { font-size: var(--step-lead); letter-spacing: -0.02em; }
.job__name a { text-decoration: none; }
.job__name a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.job__when { font-size: var(--step-small); font-weight: 700; color: var(--evergreen); }
.job p:not([class]) { color: var(--muted); font-size: 0.9375rem; }
.job__sum { margin-top: auto; padding-top: 0.75rem; font-size: 0.8125rem; font-weight: 700; color: var(--ink); }
.art-stroke { stroke: var(--ink); stroke-width: 5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.art-stroke--on { stroke: #fff; stroke-width: 8; }
.art-stroke--accent { stroke: var(--accent); }
.art-jar { fill: #fff; }
.art-fill { fill: var(--accent); }
.art-gap { fill: var(--brass); }
.art-peso { font: 800 14px var(--font-display); fill: var(--ink); }
.art-coin { fill: var(--brass); stroke: #E0A21F; stroke-width: 3; }
@media (max-width: 70rem) { .jobs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .jobs { grid-template-columns: 1fr; } }