/* ==========================================================================
   machinereadable.co.uk — design system
   Concept: a well-kept technical dossier / index-card cabinet.
   Folder-tab navigation throughout; monospace only for actual file syntax.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* -- color -- */
  --paper:      #EEF1EC;
  --paper-raised:#F8FAF6;
  --ink:        #16211D;
  --ink-soft:   #4A554E;
  --hairline:   #C6CBBE;
  --signal:     #256D5E;      /* primary accent — teal signal */
  --signal-dark:#1B534A;
  --amber:      #A96A2E;      /* emerging badge */
  --grey-badge: #7C7A6E;      /* speculative badge */
  --danger:     #A23B32;

  /* -- type -- */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Source Serif 4', Georgia, serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;

  --radius: 6px;
  --radius-lg: 16px;
  --shadow-card: 0 10px 24px rgba(22,33,29,0.09), 0 2px 8px rgba(22,33,29,0.06);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

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

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.15;
  margin:0 0 .5em;
  letter-spacing:-0.01em;
}
h1{ font-size:clamp(2.1rem, 4vw, 3.2rem); font-weight:700; }
h2{ font-size:clamp(1.5rem, 2.6vw, 2rem); }
h3{ font-size:1.2rem; }

p{ margin:0 0 1em; max-width:70ch; }
main p, .prose p{ max-width:66ch; }

a{ color:var(--signal-dark); text-decoration-thickness:1px; text-underline-offset:2px; }
a:hover{ color:var(--ink); }

code, .mono{ font-family:var(--font-mono); font-size:.92em; }

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

.container{
  max-width:1120px;
  margin:0 auto;
  padding:0 1.5rem;
}

/* ---------------------------------------------------------------------- */
/* Header + folder-tab site nav                                          */
/* ---------------------------------------------------------------------- */
.site-header{
  background:var(--paper);
  border-bottom:1px solid var(--hairline);
  position:sticky; top:0; z-index:40;
}
.site-header .container{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:1rem; padding-top:1.5rem;
}
.brand{
  color:var(--ink); text-decoration:none; padding-bottom:.7rem;
  display:flex; align-items:center; gap:.7rem;
}
.brand-mark{ display:inline-flex; flex-shrink:0; }
.brand-mark svg{ display:block; }
.logo-led{ animation: mrLedPulse 2.2s ease-in-out infinite; transform-origin:24.3px 17.6px; }
@keyframes mrLedPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.22; } }
@media (prefers-reduced-motion:reduce){ .logo-led{ animation:none; } }

.wordmark{
  font-family:var(--font-display); font-weight:700; font-size:1.6rem;
  letter-spacing:-0.015em; color:var(--ink);
}

.completion-dot{
  width:.7rem; height:.7rem; border-radius:50%; background:var(--hairline);
  display:inline-block; margin-right:.4rem;
}
.completion-dot.is-complete{ background:var(--signal); }
.primary-action-note{ font-size:.83rem; color:var(--ink-soft); margin-top:.5rem; }

.status-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.5rem; height:1.5rem; border-radius:50%; margin-right:.5rem;
  vertical-align:middle;
}
.status-icon.is-complete{ background:#DCEAE4; color:var(--signal-dark); }
.status-icon.is-incomplete{ background:#F3E2DE; color:var(--danger); }
.status-icon svg{ display:block; }
.util-links{ display:flex; gap:1.1rem; padding-bottom:.9rem; }
.util-links a{ font-family:var(--font-mono); font-size:.78rem; color:var(--ink-soft); text-decoration:none; }
.util-links a:hover{ color:var(--signal-dark); }

.nav-groups{ display:flex; align-items:flex-end; gap:2rem; flex-wrap:wrap; }
.folder-tabs-secondary{ opacity:.88; }

.folder-tabs{
  display:flex; gap:.35rem; list-style:none; margin:0; padding:0;
  flex-wrap:wrap;
}
.folder-tabs a{
  display:block;
  font-family:var(--font-display); font-weight:500; font-size:.92rem;
  text-decoration:none; color:var(--ink-soft);
  padding:.6rem 1.05rem .55rem;
  background:var(--hairline);
  border:1px solid var(--hairline);
  border-bottom:none;
  border-radius:6px 6px 0 0;
  position:relative; top:1px;
}
.folder-tabs a:hover{ color:var(--ink); }
.folder-tabs a.active{
  background:var(--paper-raised);
  color:var(--ink);
  border-color:var(--hairline);
  box-shadow:0 -1px 0 var(--paper-raised) inset;
}
.site-header .folder-tabs a.active{ background:#fff; }
.site-header{ background-color:var(--paper); }

.nav-toggle{ display:none; }

/* ---------------------------------------------------------------------- */
/* Breadcrumbs                                                            */
/* ---------------------------------------------------------------------- */
.breadcrumbs{
  font-family:var(--font-mono); font-size:.8rem; color:var(--ink-soft);
  padding:.85rem 0; border-bottom:1px solid var(--hairline);
}
.breadcrumbs ol{ list-style:none; display:flex; flex-wrap:wrap; gap:.35rem; margin:0; padding:0; }
.breadcrumbs a{ color:var(--ink-soft); text-decoration:none; }
.breadcrumbs a:hover{ color:var(--signal-dark); text-decoration:underline; }
.breadcrumbs li:not(:last-child)::after{ content:'/'; margin-left:.35rem; color:var(--hairline); }
.breadcrumbs li[aria-current] { color:var(--ink); }

/* ---------------------------------------------------------------------- */
/* Buttons                                                                */
/* ---------------------------------------------------------------------- */
.btn{
  font-family:var(--font-display); font-weight:600; font-size:.95rem;
  border-radius:var(--radius); border:1px solid var(--ink);
  padding:.7rem 1.3rem; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; gap:.5rem;
  background:transparent; color:var(--ink);
  transition:background .15s ease, color .15s ease, transform .05s ease;
}
.btn:hover{ background:var(--ink); color:var(--paper-raised); }
.btn:active{ transform:translateY(1px); }
.btn-primary{
  background:var(--signal); border-color:var(--signal-dark); color:#fff;
}
.btn-primary:hover{ background:var(--signal-dark); color:#fff; }
.btn-quiet{ border-color:var(--hairline); color:var(--ink-soft); }
.btn-quiet:hover{ background:var(--ink-soft); color:#fff; }
.btn[disabled]{ opacity:.4; cursor:not-allowed; }
.btn[disabled]:hover{ background:transparent; color:var(--ink); }
.btn-sm{ padding:.4rem .8rem; font-size:.8rem; }

/* ---------------------------------------------------------------------- */
/* Badges — status honesty system                                        */
/* ---------------------------------------------------------------------- */
.badge{
  font-family:var(--font-mono); font-size:.72rem; font-weight:500;
  padding:.2rem .55rem; border-radius:20px; display:inline-block;
  border:1px solid transparent; white-space:nowrap;
}
.badge-established{ background:#DCEAE4; color:var(--signal-dark); border-color:#B7D6C9; }
.badge-emerging{ background:#F1E2CE; color:var(--amber); border-color:#E3C89E; }
.badge-speculative{ background:#E7E5DC; color:var(--grey-badge); border-color:#D3D0C2; }

/* ---------------------------------------------------------------------- */
/* Cards (index-card motif — not the SaaS rounded-card default)          */
/* ---------------------------------------------------------------------- */
.card{
  background:var(--paper-raised);
  border:1px solid var(--hairline);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  padding:1.5rem;
}
.card-tab-cut{
  position:relative;
}
.card-tab-cut::before{
  content:attr(data-tab);
  position:absolute; top:-.9rem; left:1.4rem;
  background:var(--ink); color:var(--paper);
  font-family:var(--font-mono); font-size:.68rem;
  padding:.2rem .55rem; border-radius:2px;
}

.section-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem;
}
@media (max-width:820px){ .section-grid{ grid-template-columns:1fr; } }

.section-card{
  border:1px solid var(--hairline);
  background:var(--paper-raised);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  padding:1.6rem;
  display:flex; flex-direction:column; gap:.6rem;
  transition:transform .15s ease, box-shadow .15s ease;
}
a.section-card:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 30px rgba(22,33,29,0.13), 0 4px 10px rgba(22,33,29,0.08);
}
.section-card h3{ margin-bottom:0; }
.section-card .status{ font-family:var(--font-mono); font-size:.78rem; color:var(--ink-soft); }
.section-card.is-future{ opacity:.72; border-style:dashed; }

/* ---------------------------------------------------------------------- */
/* Forms                                                                  */
/* ---------------------------------------------------------------------- */
.field{ margin-bottom:1.3rem; }
.field label{
  display:block; font-family:var(--font-display); font-weight:600;
  font-size:.92rem; margin-bottom:.3rem;
}
.field .required-mark{ color:var(--danger); margin-left:.15rem; }
.field .help{ font-size:.83rem; color:var(--ink-soft); margin:.3rem 0 0; max-width:56ch; }
.field input[type=text],
.field input[type=url],
.field input[type=email],
.field input[type=date],
.field input[type=number],
.field select,
.field textarea{
  width:100%; font-family:var(--font-body); font-size:.98rem;
  padding:.6rem .7rem; border:1px solid var(--hairline);
  border-radius:var(--radius); background:#fff; color:var(--ink);
}
.field textarea{ min-height:5rem; resize:vertical; font-family:var(--font-mono); font-size:.88rem; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--signal); }
.field-check{ display:flex; align-items:flex-start; gap:.5rem; }
.field-check input{ margin-top:.3rem; }

.group-box{
  border:1px dashed var(--hairline); border-radius:var(--radius);
  box-shadow:0 2px 8px rgba(22,33,29,0.05);
  padding:1rem; margin-bottom:.8rem; background:#fff;
}
.group-row{
  display:grid; gap:.7rem; margin-bottom:.6rem;
}
.group-row-actions{ text-align:right; }
.group-empty{ font-size:.85rem; color:var(--ink-soft); font-style:italic; }

/* ---------------------------------------------------------------------- */
/* Progress bar                                                           */
/* ---------------------------------------------------------------------- */
.progress-wrap{
  display:flex; align-items:center; gap:1rem; margin-bottom:1.4rem;
}
.progress-track{
  flex:1; height:.55rem; background:var(--hairline);
  border-radius:20px; overflow:hidden;
}
.progress-fill{
  height:100%; background:var(--signal); width:0%;
  transition:width .3s ease;
}
.progress-label{ font-family:var(--font-mono); font-size:.8rem; color:var(--ink-soft); white-space:nowrap; }

/* ---------------------------------------------------------------------- */
/* Builder layout                                                         */
/* ---------------------------------------------------------------------- */
.builder-shell{
  border:1px solid var(--hairline); background:var(--paper-raised);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  padding:1.6rem;
}
.builder-grid{
  display:grid; grid-template-columns:230px 1fr; gap:1.6rem;
  align-items:start;
}
@media (max-width:760px){ .builder-grid{ grid-template-columns:1fr; } }

.file-tablist{ list-style:none; margin:0; padding:0; }
.file-tablist .group-heading{
  font-family:var(--font-mono); font-size:.7rem; text-transform:none;
  color:var(--ink-soft); margin:1rem 0 .4rem; padding-left:.2rem;
}
.file-tablist .group-heading:first-child{ margin-top:0; }
.file-tablist a{
  width:100%; text-align:left; font-family:var(--font-mono); font-size:.86rem;
  background:none; border:none; border-left:3px solid transparent;
  padding:.45rem .6rem; cursor:pointer; color:var(--ink-soft);
  border-radius:0 3px 3px 0; display:flex; align-items:center; gap:.4rem;
  justify-content:space-between; text-decoration:none;
}
.file-tablist a:hover{ background:var(--paper); color:var(--ink); }
.file-tablist a.active{
  background:#fff; color:var(--ink); border-left-color:var(--signal);
  font-weight:600;
}
.file-tablist .dot{
  width:.45rem; height:.45rem; border-radius:50%; background:var(--hairline);
  flex-shrink:0;
}
.file-tablist a.is-complete .dot{ background:var(--signal); }

.file-panel{ min-width:0; }
.file-panel-head{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:1rem; margin-bottom:1.1rem; flex-wrap:wrap;
}
.file-panel-head h2{ margin-bottom:.25rem; }
.filename-chip{
  font-family:var(--font-mono); background:var(--ink); color:var(--paper);
  padding:.15rem .6rem; border-radius:3px; font-size:.85rem;
}
.wizard-actions{
  display:flex; justify-content:space-between; margin-top:1.5rem;
  padding-top:1.2rem; border-top:1px solid var(--hairline);
  gap:.6rem; flex-wrap:wrap;
}
.wizard-actions .right-group{ display:flex; gap:.6rem; flex-wrap:wrap; }

.nav-status-btn{ transition:background .15s ease, border-color .15s ease; }
.nav-status-btn.is-complete{
  background:#E4F1EB !important; border-color:var(--signal) !important; color:var(--signal-dark) !important;
}
.nav-status-btn.is-incomplete{
  background:#FBECE8 !important; border-color:var(--danger) !important; color:var(--danger) !important;
}
.nav-status-btn.is-complete:hover{ background:var(--signal) !important; color:#fff !important; }
.nav-status-btn.is-incomplete:hover{ background:var(--danger) !important; color:#fff !important; }

.preview-toggle{ margin-top:1rem; }
.preview-box{
  background:var(--ink); color:#DDE6E0; font-family:var(--font-mono);
  font-size:.82rem; padding:1rem; border-radius:var(--radius);
  white-space:pre-wrap; word-break:break-word; max-height:340px; overflow:auto;
  margin-top:.6rem; display:none;
}
.preview-box.is-open{ display:block; }

.summary-list{ list-style:none; margin:0; padding:0; }
.summary-list li{
  display:flex; align-items:center; justify-content:space-between;
  padding:.65rem 0; border-bottom:1px solid var(--hairline); gap:1rem;
}
.summary-list .name{ font-family:var(--font-mono); font-size:.9rem; }
.summary-list .state{ font-size:.82rem; font-family:var(--font-display); font-weight:600; }
.summary-list .state.done{ color:var(--signal-dark); }
.summary-list .state.todo{ color:var(--grey-badge); }

.future-note{
  border:1px dashed var(--hairline); border-radius:var(--radius-lg);
  padding:2rem; text-align:left; color:var(--ink-soft); background:var(--paper);
}

/* ---------------------------------------------------------------------- */
/* Guide pages                                                            */
/* ---------------------------------------------------------------------- */
.guide-hero{ padding:2.4rem 0 1.6rem; border-bottom:1px solid var(--hairline); }
.guide-hero .meta-row{ display:flex; align-items:center; gap:.7rem; margin-bottom:.9rem; }
.guide-body{ padding:2.4rem 0; display:grid; grid-template-columns:1fr 320px; gap:2.5rem; }
@media (max-width:880px){ .guide-body{ grid-template-columns:1fr; } }
.guide-body aside{ position:sticky; top:5.5rem; align-self:start; }
.field-ref{ list-style:none; margin:0; padding:0; }
.field-ref li{ padding:.55rem 0; border-bottom:1px solid var(--hairline); }
.field-ref .fname{ font-family:var(--font-mono); font-size:.85rem; display:block; }
.field-ref .fdesc{ font-size:.85rem; color:var(--ink-soft); }

/* ---------------------------------------------------------------------- */
/* Hero (home)                                                            */
/* ---------------------------------------------------------------------- */
.hero{ padding:3.5rem 0 3rem; }

/* ---------------------------------------------------------------------- */
/* Homepage hero carousel                                                 */
/* ---------------------------------------------------------------------- */
.hero-carousel{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:0 20px 40px rgba(22,33,29,0.18), 0 6px 16px rgba(22,33,29,0.12);
  background:var(--ink);
}
.carousel-track{ display:flex; transition:transform .5s cubic-bezier(.4,0,.2,1); }
@media (prefers-reduced-motion:reduce){ .carousel-track{ transition:none; } }
.carousel-slide{
  min-width:100%; display:flex; align-items:center; gap:2.5rem;
  padding:2.8rem 2.6rem; color:#fff;
}
@media (max-width:760px){ .carousel-slide{ flex-direction:column; align-items:flex-start; padding:2rem 1.5rem; gap:1.5rem; } }
.carousel-content{ flex:1.1; min-width:0; }
.carousel-content h2{ color:#fff; margin:.6rem 0 .6rem; font-size:clamp(1.4rem,3vw,2rem); }
.carousel-content p{ color:#C7D0CA; max-width:48ch; margin-bottom:1.2rem; }
.carousel-visual{
  flex:1; display:flex; align-items:center; justify-content:center;
  min-height:120px;
}
.carousel-visual svg{ width:100%; max-width:220px; height:auto; }
.carousel-controls{
  display:flex; align-items:center; justify-content:center; gap:1rem;
  padding:0 0 1.4rem;
}
.carousel-arrow{
  background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.25); color:#fff;
  width:2.2rem; height:2.2rem; border-radius:50%; cursor:pointer; font-size:1.1rem;
  display:flex; align-items:center; justify-content:center; line-height:1;
  transition:background .15s ease;
}
.carousel-arrow:hover{ background:rgba(255,255,255,0.22); }
.carousel-dots{ display:flex; gap:.5rem; }
.carousel-dots button{
  width:.55rem; height:.55rem; border-radius:50%; border:none; padding:0;
  background:rgba(255,255,255,0.3); cursor:pointer;
}
.carousel-dots button.active{ background:#fff; }
.hero-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:3rem; align-items:center; }
@media (max-width:880px){ .hero-grid{ grid-template-columns:1fr; } }
.hero .lede{ font-size:1.15rem; color:var(--ink-soft); max-width:44ch; }
.hero-stats{ display:flex; gap:1.6rem; margin-top:1.6rem; flex-wrap:wrap; }
.hero-stats div{ font-family:var(--font-mono); font-size:.85rem; color:var(--ink-soft); }
.hero-stats strong{ display:block; font-family:var(--font-display); font-size:1.4rem; color:var(--ink); }

.type-card{
  background:var(--ink); border-radius:var(--radius-lg); padding:0; overflow:hidden;
  box-shadow:6px 6px 0 var(--hairline), 0 18px 34px rgba(22,33,29,0.16);
}
.type-card .bar{
  display:flex; gap:.35rem; padding:.6rem .8rem; background:#0F1713;
}
.type-card .bar span{ width:.6rem; height:.6rem; border-radius:50%; background:#3B4A42; }
.type-card pre{
  margin:0; padding:1.1rem 1.2rem 1.4rem; color:#D9E4DD; font-family:var(--font-mono);
  font-size:.83rem; line-height:1.6; white-space:pre-wrap;
}
.type-card .fname{ color:#6FBBA4; }
.type-card .cur{ display:inline-block; width:.5em; background:#6FBBA4; animation:blink 1s step-end infinite; }
@keyframes blink{ 50%{ opacity:0; } }
@media (prefers-reduced-motion:reduce){ .type-card .cur{ animation:none; } }

/* ---------------------------------------------------------------------- */
/* Misc sections                                                          */
/* ---------------------------------------------------------------------- */
section{ padding:3rem 0; }
section.alt{ background:var(--paper-raised); border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); }
.eyebrow-free-title{ max-width:60ch; }

.honesty-block{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:1.6rem; }
@media (max-width:820px){ .honesty-block{ grid-template-columns:1fr; } }
.honesty-item{ border-left:3px solid var(--hairline); padding-left:1rem; }
.honesty-item.established{ border-color:var(--signal); }
.honesty-item.emerging{ border-color:var(--amber); }
.honesty-item.speculative{ border-color:var(--grey-badge); }

.faq-item{ border-bottom:1px solid var(--hairline); padding:1.3rem 0; }
.faq-item h3{ margin-bottom:.5rem; }

/* ---------------------------------------------------------------------- */
/* Tool cards with a left icon (Image Tools / Music Tools hub)           */
/* ---------------------------------------------------------------------- */
.tool-card{
  display:flex; align-items:flex-start; gap:1rem;
  border:1px solid var(--hairline); background:var(--paper-raised);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-card);
  padding:1.4rem; text-decoration:none; color:inherit;
  transition:transform .15s ease, box-shadow .15s ease;
}
.tool-card:hover{ transform:translateY(-3px); box-shadow:0 16px 30px rgba(22,33,29,0.13), 0 4px 10px rgba(22,33,29,0.08); }
.tool-card .tool-icon{ flex-shrink:0; width:2.8rem; height:2.8rem; }
.tool-card h3{ margin-bottom:.3rem; }
.tool-card p{ color:var(--ink-soft); margin:0; }
.tool-card-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem; }
@media (max-width:700px){ .tool-card-grid{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------------------- */
/* Homepage header-tab intro flash                                       */
/* ---------------------------------------------------------------------- */
.folder-tabs a.is-flashing{
  background:var(--signal) !important; color:#fff !important;
  transition:background .35s ease, color .35s ease;
}
@media (prefers-reduced-motion:reduce){ .folder-tabs a.is-flashing{ transition:none; } }

/* ---------------------------------------------------------------------- */
/* Image Tools (EXIF)                                                    */
/* ---------------------------------------------------------------------- */
.exif-drop{
  border:2px dashed var(--hairline); border-radius:var(--radius-lg);
  padding:3.5rem 2rem; text-align:center; cursor:pointer; background:var(--paper-raised);
  transition:border-color .15s ease, background .15s ease;
}
.exif-drop:hover, .exif-drop.is-dragover{ border-color:var(--signal); background:#fff; }
.exif-drop h3{ margin-bottom:.4rem; }
.exif-drop p{ color:var(--ink-soft); margin:0 auto; max-width:40ch; }
.exif-workspace{ display:grid; grid-template-columns:280px 1fr; gap:2rem; }
@media (max-width:760px){ .exif-workspace{ grid-template-columns:1fr; } }
.exif-preview{ position:sticky; top:5.5rem; align-self:start; }
.exif-preview img{ width:100%; border-radius:var(--radius-lg); box-shadow:var(--shadow-card); display:block; }
.exif-table{ width:100%; border-collapse:collapse; }
.exif-actions{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.4rem; }
.exif-flag{
  display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-mono);
  font-size:.78rem; color:var(--danger); background:#F3E2DE; border:1px solid #E3C2BA;
  padding:.25rem .6rem; border-radius:20px; margin-bottom:1rem;
}

/* ---------------------------------------------------------------------- */
/* "Populate the placeholders" field grid                                */
/* ---------------------------------------------------------------------- */
.meta-field-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:0 2rem;
  border:1px solid var(--hairline); border-radius:var(--radius-lg);
  background:var(--paper-raised); padding:.5rem 1.5rem; box-shadow:var(--shadow-card);
}
@media (max-width:640px){ .meta-field-grid{ grid-template-columns:1fr; } }
.meta-field{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:.75rem 0; border-bottom:1px solid var(--hairline);
}
.meta-field-label{ font-family:var(--font-mono); font-size:.82rem; color:var(--ink-soft); flex-shrink:0; }
.meta-field-value{ font-size:.92rem; text-align:right; word-break:break-word; }
.meta-field-value.is-empty{ color:var(--hairline); font-style:italic; }
.meta-field-value.is-filled{ color:var(--ink); font-weight:600; }
/* ---------------------------------------------------------------------- */
/* Footer                                                                 */
/* ---------------------------------------------------------------------- */
.site-footer{
  border-top:1px solid var(--hairline); background:var(--paper-raised);
  padding:2.6rem 0 2rem; margin-top:2rem;
}
.footer-brand-row{ margin-bottom:2rem; display:flex; flex-direction:column; gap:.7rem; }
.footer-grid{ display:grid; grid-template-columns:repeat(6, 1fr); gap:1.8rem; }
@media (max-width:980px){ .footer-grid{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
.footer-grid h4{ font-size:.85rem; margin-bottom:.7rem; }
.footer-grid ul{ list-style:none; margin:0; padding:0; }
.footer-grid li{ margin-bottom:.45rem; font-size:.9rem; }
.footer-grid a{ color:var(--ink-soft); text-decoration:none; }
.footer-grid a:hover{ color:var(--signal-dark); }
.footer-bottom{
  display:flex; justify-content:space-between; margin-top:2.2rem; padding-top:1.2rem;
  border-top:1px solid var(--hairline); font-size:.82rem; color:var(--ink-soft);
  flex-wrap:wrap; gap:.5rem;
}

/* ---------------------------------------------------------------------- */
/* Responsive nav toggle for small screens                               */
/* ---------------------------------------------------------------------- */
@media (max-width:680px){
  .site-header .container{ flex-wrap:wrap; }
  .nav-groups{ width:100%; padding-top:.6rem; gap:1rem; }
  .builder-grid{ gap:1rem; }
}