/* Vio Math — shared stylesheet for the calculator page, the guides hub, the
   about page, and the guides. Dark theme. Single file, no build step.

   Type system: Archivo for interface and prose; IBM Plex Mono only for
   numerical values, units, tiny technical labels, and instrument readouts.

   Color: purple is a status color, not a wallpaper — it marks calculated
   values, the active nav item, the syringe marker, focus, hover, and the
   research-use stamp. Everything else is ink on black. */

:root{
  --bg:#0A0A0E;
  --panel:#0F0F15;
  --panel-2:#14141C;
  --line:#26263A;
  --line-soft:#1B1B27;
  --ink:#ECECF4;
  --ink-soft:#A3A3B8;
  --ink-dim:#7C7C93;    /* lifted from #6E6E84 for AA contrast: 4.86 / 4.69 / 4.50 on bg / panel / panel-2 */
  --accent:#A08BFF;
  --accent-dim:#7A66E6;
  --accent-soft:rgba(160,139,255,.13);
  --warn:#FFB26B;
  --mono:'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --sans:'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --track-label:.06em;   /* tiny technical labels */
  --track-nav:.03em;     /* navigation and buttons */
  --r:2px;               /* primary corner radius */
  --r-panel:3px;         /* outer panels */
  --t-fast:150ms;        /* UI state changes: hover, focus, nav */
  --t-value:260ms;       /* calculated values, marker, fill */
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth; background:var(--bg); font-size:16px;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}

.wrap{max-width:1360px; margin:0 auto; padding:0 24px;}

/* technical label: mono, small, uppercase, light tracking */
.label,
.eyebrow, .panel-meta, .field-name, .results-head, .result-name, .scale-head, .side-sub{
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:var(--track-label);
}

/* HEADER */
header{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
  padding:24px 24px 20px;
  max-width:1360px; margin:0 auto;
}
.wordmark{
  font-family:var(--mono);
  font-weight:600; font-size:1.3rem;
  letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none; line-height:1;
}
.wordmark em{font-style:normal; color:var(--accent);}
nav{display:flex; gap:28px;}
nav a{
  font-size:.88rem; font-weight:500; letter-spacing:var(--track-nav);
  text-decoration:none; color:var(--ink-soft);
  padding-bottom:6px; border-bottom:1px solid transparent;
  transition:color var(--t-fast) ease, border-color var(--t-fast) ease;
}
nav a:hover{color:var(--ink); border-bottom-color:var(--ink-dim);}
nav a[aria-current]{color:var(--ink); border-bottom-color:var(--accent);}

/* DISCLOSURE STRIP — directly under the header on every page */
.affiliation{
  background:var(--panel);
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
}
.affiliation-inner{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  padding-top:12px; padding-bottom:12px;
}
.affiliation p{
  margin:0; max-width:86ch;
  font-size:.9rem; color:var(--ink-soft);
}
.affiliation strong{color:var(--ink); font-weight:600;}
.affiliation .out{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.02em;
  white-space:nowrap; color:var(--ink-soft); text-decoration:none;
  border-bottom:1px solid var(--ink-dim); padding-bottom:2px;
  transition:color var(--t-fast) ease, border-color var(--t-fast) ease;
}
.affiliation .out:hover{color:var(--ink); border-bottom-color:var(--ink);}

/* SHARED LABEL STYLE */
.eyebrow{
  font-size:.72rem;
  color:var(--ink-dim); margin-bottom:16px;
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:""; width:16px; height:1px; background:var(--ink-dim); display:inline-block;}

/* ================= THESIS (hero, above the shell) ================= */
.thesis{padding:48px 0 44px; border-bottom:1px solid var(--line);}
.thesis-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center;}
.thesis-title{
  font-weight:700;
  font-size:clamp(1.9rem, 3.8vw, 2.9rem); line-height:1.06; letter-spacing:-.015em;
  margin:0 0 20px;
}
/* the one emphasized line on the site: text and rule in the same accent, so it reads as emphasis, not a link */
.thesis-title em{
  font-style:normal; color:var(--accent);
  text-decoration:underline; text-decoration-color:var(--accent);
  text-decoration-thickness:2px; text-underline-offset:7px;
}
.thesis .sub{font-size:1.04rem; color:var(--ink-soft); max-width:50ch; margin:0;}
.trust{display:grid; gap:24px;}
.trust-title{font-size:1.02rem; font-weight:600; letter-spacing:-.005em; margin:0 0 8px;}
.trust p{font-size:.95rem; color:var(--ink-soft); margin:0;}

/* ================= CALCULATOR SHELL ================= */
.shell{
  display:grid; grid-template-columns:minmax(0,1fr) 400px;
  gap:24px; padding:28px 0 8px;
}
.panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-panel);}
.panel-head{
  display:flex; justify-content:space-between; align-items:flex-start; gap:24px;
  padding:24px 28px 20px; border-bottom:1px solid var(--line);
}
.panel-title{
  font-weight:600;
  font-size:clamp(1.6rem, 2.4vw, 2.1rem);
  letter-spacing:-.01em; line-height:1.15;
  margin:0 0 8px;
}
.panel-title em{font-style:normal;}
.panel-head .sub{margin:0; font-size:.92rem; color:var(--ink-soft);}
.panel-meta{
  text-align:right; white-space:nowrap; line-height:1.7;
  font-size:.66rem; color:var(--ink-dim);
}

/* inputs */
.inputs{display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid var(--line);}
.inputs .field{padding:24px 28px; border-right:1px solid var(--line); min-width:0;}
.inputs .field:last-child{border-right:0;}
.field-name{display:block; font-size:.74rem; color:var(--ink); margin:0 0 4px;}
.field-help{font-size:.82rem; color:var(--ink-dim); margin:0 0 12px;}
.control{
  position:relative;
  display:flex; border:1px solid var(--line); background:var(--bg); border-radius:var(--r); overflow:hidden;
  transition:border-color var(--t-fast) ease;
}
/* focus: border takes the accent and a 1px calibration line draws in along the base — no glow */
.control::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform var(--t-fast) var(--ease);
}
.control:focus-within{border-color:var(--accent);}
.control:focus-within::after{transform:scaleX(1);}
.control input{
  flex:1 1 auto; min-width:0; width:100%;
  background:transparent; border:0; outline:none;
  color:var(--ink); font-family:var(--mono); font-variant-numeric:tabular-nums lining-nums; font-size:1.5rem; font-weight:500;
  padding:12px 16px;
}
.control input::-webkit-outer-spin-button, .control input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
.control input[type=number]{-moz-appearance:textfield; appearance:textfield;}
.control .unit{
  display:flex; align-items:center; padding:0 16px;
  border-left:1px solid var(--line); background:var(--panel-2);
  font-family:var(--mono); font-size:.95rem; color:var(--ink-soft);
}

/* clean-math hint row — numbers, so mono */
.hint{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 28px; border-bottom:1px solid var(--line);
  background:var(--panel-2);
  font-family:var(--mono); font-size:.78rem; color:var(--ink-soft);
}
.hint strong{color:var(--ink); font-weight:600;}
.ratio-btn{
  font-family:var(--sans); font-size:.78rem; font-weight:500; letter-spacing:var(--track-nav);
  padding:6px 12px; border:1px solid var(--ink-dim); border-radius:var(--r);
  background:transparent; color:var(--ink-soft); cursor:pointer;
  transition:border-color var(--t-fast) ease, color var(--t-fast) ease;
}
.ratio-btn:hover{border-color:var(--ink); color:var(--ink);}
.ratio-btn:disabled{border-color:var(--line); color:var(--ink-dim); cursor:default;}

/* results */
.results{margin:24px 28px 0; border:1px solid var(--line); border-radius:var(--r);}
.results-head{padding:12px 24px; border-bottom:1px solid var(--line); font-size:.72rem;}
.results-grid{display:grid; grid-template-columns:repeat(3,1fr);}
.result{padding:24px; border-right:1px solid var(--line); min-width:0;}
.result:last-child{border-right:0;}
.result-name{font-size:.7rem; color:var(--ink-soft); margin-bottom:12px;}
/* readouts: figure on one line, unit on its own line beneath — an instrument, not a stat card.
   Units is the result people act on, so it carries the accent and the largest figure;
   concentration and volume are intermediates in ink. */
.result-val{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums lining-nums;
  font-size:clamp(1.6rem, 2.5vw, 2.1rem); font-weight:500;
  color:var(--ink); line-height:1; letter-spacing:-.03em; white-space:nowrap;
  transition:color var(--t-fast) ease;
}
.result-val small{
  display:block; font-size:.78rem; font-weight:400; letter-spacing:.02em;
  color:var(--ink-soft); margin:8px 0 0;
}
.result.primary .result-val{font-size:clamp(2.1rem, 3.4vw, 2.9rem); font-weight:600; color:var(--accent);}
.result-val.over{color:var(--warn);}
.result-sub{font-family:var(--mono); font-size:.74rem; color:var(--ink-dim); margin-top:12px; transition:color var(--t-fast) ease;}
.result-sub.over{color:var(--warn);}

/* value change: a short settle rather than a snap. Re-triggered from script only when the text differs. */
@keyframes valueTick{
  from{opacity:.35; transform:translateY(2px);}
  to{opacity:1; transform:none;}
}
.tick{animation:valueTick var(--t-value) var(--ease);}

/* U-100 scale */
.scale{margin:24px 28px 28px; border:1px solid var(--line); border-radius:var(--r);}
.scale-head{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:12px 24px; border-bottom:1px solid var(--line);
  font-size:.7rem;
}
.scale-head .dim{color:var(--ink-dim);}
.scale svg{display:block; width:100%; height:auto; padding:16px 16px 4px;}
/* marker and fill move as one system, on the value easing; fill scales from the 0 mark */
#marker{transition:transform var(--t-value) var(--ease);}
#marker line{stroke:var(--accent); transition:stroke var(--t-fast) ease;}
#marker polygon{fill:var(--accent); transition:fill var(--t-fast) ease;}
#fill{
  fill:rgba(160,139,255,.2);
  transform-origin:140px 48px;
  transition:transform var(--t-value) var(--ease), fill var(--t-fast) ease;
}
/* over-limit: the instrument shows it, not just the caption */
.scale.over #fill{fill:rgba(255,178,107,.2);}
.scale.over #marker line{stroke:var(--warn);}
.scale.over #marker polygon{fill:var(--warn);}
.scale-note{
  margin:0 24px; padding:12px 0 16px; text-align:center;
  border-top:1px solid var(--line-soft);
  font-size:.76rem; color:var(--ink-dim);
}

/* sidebar — reference entries, ruled rather than boxed */
.side{display:flex; flex-direction:column; min-width:0;}
.side-head{padding:24px 8px 12px;}
.side-title{font-size:1.4rem; font-weight:600; letter-spacing:-.01em; margin:0 0 6px;}
.side-sub{margin:0; font-size:.7rem; color:var(--ink-soft);}
.gcard{
  display:grid; grid-template-columns:72px minmax(0,1fr) 20px; gap:16px; align-items:start;
  padding:24px 8px; text-decoration:none;
  border-top:1px solid var(--line);
  transition:background var(--t-fast) ease, border-color var(--t-fast) ease;
}
.gcard:last-child{border-bottom:1px solid var(--line);}
/* hover: the entry's own rules brighten (its top edge, and the next entry's top edge is its bottom) */
.gcard:hover{background:var(--panel); border-color:var(--ink-dim);}
.gcard:hover + .gcard{border-top-color:var(--ink-dim);}
.gnum{
  align-self:stretch; display:flex; align-items:center;
  font-family:var(--mono);
  font-size:2.25rem; font-weight:500; color:var(--ink-soft); line-height:1; letter-spacing:-.02em;
  transition:color var(--t-fast) ease;
}
.gcard-title{font-size:1.02rem; font-weight:600; letter-spacing:-.005em; margin:0 0 6px; line-height:1.3;}
.gcard p{font-size:.86rem; color:var(--ink-soft); margin:0; line-height:1.5;}
.gcard .arrow{
  color:var(--ink-dim); font-size:1.1rem; line-height:1; margin-top:2px;
  transition:color var(--t-fast) ease, transform var(--t-fast) var(--ease);
}
.gcard:hover .gnum, .gcard:hover .arrow{color:var(--accent);}
.gcard:hover .arrow{transform:translateX(4px);}
.gcard.about{grid-template-columns:minmax(0,1fr) 20px; margin-top:12px;}
.gcard.about .gcard-title{font-size:.9rem; color:var(--ink-soft);}

/* ================= FOOTER ================= */
footer{border-top:1px solid var(--line); margin-top:28px;}
.foot-inner{
  display:flex; justify-content:space-between; align-items:center; gap:28px; flex-wrap:wrap;
  padding:28px 24px 40px;
}
.foot-text{font-size:.82rem; color:var(--ink-dim); max-width:62ch;}
.foot-text p{margin:0 0 6px;}
.foot-text a{color:var(--ink-soft); text-decoration-color:var(--ink-dim);}
.ruo{
  border:1px solid var(--ink-dim); border-radius:var(--r); padding:16px 24px; text-align:center;
  font-size:.78rem; font-weight:600; letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink);
}
.ruo em{font-style:normal; color:var(--accent);}
.ruo small{display:block; margin-top:6px; font-size:.7rem; font-weight:400; letter-spacing:0; text-transform:none; color:var(--ink-dim);}

/* ================= ARTICLES (about, hub, guides) ================= */
.article{max-width:76ch; padding:44px 0 20px;}
/* breadcrumb: a path. Links are quiet but live; the current segment reads a step brighter; separators stay dim. */
.breadcrumb{font-family:var(--mono); font-size:.74rem; letter-spacing:.02em; color:var(--ink-dim); margin:0 0 28px;}
.breadcrumb a{
  color:var(--ink-soft); text-decoration:none;
  border-bottom:1px solid transparent; padding-bottom:1px;
  transition:color var(--t-fast) ease, border-color var(--t-fast) ease;
}
.breadcrumb a:hover{color:var(--ink); border-bottom-color:var(--ink-dim);}
.breadcrumb span{color:var(--ink-soft);}
.article-title{
  font-weight:700;
  font-size:clamp(2rem, 3.4vw, 2.6rem); line-height:1.12;
  letter-spacing:-.015em; margin:0 0 16px;
}
.lede{font-size:1.12rem; color:var(--ink-soft); margin:0 0 8px;}
.scope{
  font-size:.92rem; color:var(--ink-soft);
  border-left:2px solid var(--ink-dim);
  padding:4px 0 4px 18px; margin:24px 0 32px;
}
.scope strong{color:var(--ink);}
.article section{padding-top:28px; margin-top:28px; border-top:1px solid var(--line);}
.section-title{font-size:1.32rem; font-weight:600; letter-spacing:-.01em; margin:0 0 16px; line-height:1.3;}
.section-title .n{font-family:var(--mono); font-size:.8em; color:var(--ink-dim); font-weight:500; margin-right:12px;}
.article p{margin:0 0 16px;}
.article ul{margin:0 0 16px; padding-left:22px;}
.article li{margin-bottom:8px;}
.article strong{font-weight:600;}
.article a{text-decoration-color:var(--ink-dim);}
.worked{
  font-family:var(--mono); font-size:.88rem;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:16px 20px; margin:0 0 16px;
}
.worked .row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:8px;}
.worked .row:last-child{margin-bottom:0;}
.worked .arrow{color:var(--ink-dim);}
.worked .out{color:var(--accent); font-weight:600;}
.flag{
  font-size:.94rem; color:var(--ink-soft);
  border-left:2px solid var(--ink-dim);
  padding:4px 0 4px 18px; margin:0 0 16px;
}
.flag p:last-child{margin-bottom:0;}
.commitments{list-style:none; padding:0; margin:0 0 20px; display:grid; gap:12px;}
.commitments li{position:relative; padding-left:20px; margin:0; font-size:.94rem; color:var(--ink-soft);}
.commitments li::before{content:""; position:absolute; left:0; top:.68em; width:9px; height:1px; background:var(--ink-dim);}
.commitments strong{color:var(--ink);}
/* guides hub: the same entries, given room — the numeral is the catalog index, the title carries the row */
.hub-list{display:grid; margin-top:28px;}
.hub-list .gcard{grid-template-columns:88px minmax(0,1fr) 20px; padding:28px 8px; gap:20px;}
.hub-list .gcard-title{font-size:1.15rem; margin-bottom:6px;}
.hub-list .gcard p{margin:0; font-size:.92rem;}
.hub-list .gnum{font-size:2.5rem;}
/* the footer nav's top rule closes the list — no doubled hairline */
.hub-list .gcard:last-child{border-bottom:0;}
.hub-list + .guide-foot{margin-top:0;}
.guide-foot{
  margin-top:40px; padding-top:24px; border-top:1px solid var(--line);
  display:flex; gap:12px; flex-wrap:wrap; justify-content:space-between;
}
.guide-foot a{
  font-size:.82rem; font-weight:500; letter-spacing:var(--track-nav); text-decoration:none;
  border:1px solid var(--line); border-radius:var(--r); padding:10px 16px; color:var(--ink-soft);
  transition:border-color var(--t-fast) ease, color var(--t-fast) ease;
}
.guide-foot a:hover{border-color:var(--ink-soft); color:var(--ink);}

/* ================= FIGURES (guide diagrams) ================= */
.fig{margin:8px 0 28px;}
.fig figcaption{font-size:.86rem; color:var(--ink-dim); margin-top:14px; max-width:64ch;}
.badge{
  display:inline-block; font-family:var(--mono); font-size:.66rem; font-weight:500; letter-spacing:.04em;
  color:var(--accent); border:1px solid var(--accent-dim); border-radius:var(--r);
  padding:1px 5px; line-height:1.3; vertical-align:middle; margin-left:6px;
}

/* COA specimen: a certificate laid out as a document, with section badges where each check lands */
.coa-paper{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  font-family:var(--mono); font-size:.8rem; color:var(--ink-soft);
}
.coa-banner{
  padding:8px 20px; border-bottom:1px dashed var(--line);
  font-size:.68rem; letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink-dim);
}
.coa-head{display:flex; justify-content:space-between; gap:20px; align-items:flex-start; padding:20px 20px 16px; border-bottom:1px solid var(--line);}
.coa-title{font-family:var(--sans); font-size:1.05rem; font-weight:600; color:var(--ink); margin-bottom:4px;}
.coa-lab{font-size:.8rem; color:var(--ink-soft);}
.coa-meta{text-align:right; font-size:.74rem; color:var(--ink-dim); display:grid; gap:2px; justify-items:end;}
.coa-rows{margin:0; padding:0;}
.coa-row{display:grid; grid-template-columns:150px minmax(0,1fr); gap:16px; padding:11px 20px; border-bottom:1px solid var(--line-soft);}
.coa-row dt{margin:0; color:var(--ink-dim);}
.coa-row dd{margin:0; color:var(--ink);}
.coa-row.hl dd{color:var(--ink);}
.coa-dim{color:var(--ink-dim);}
.coa-trace{padding:16px 20px 18px;}
.coa-trace svg{display:block; width:100%; height:72px;}
.coa-trace-label{font-size:.72rem; color:var(--ink-dim); margin-top:8px;}
.fig-key{list-style:none; margin:18px 0 0; padding:0; display:grid; gap:8px; font-size:.9rem; color:var(--ink-soft);}
.fig-key li{display:grid; grid-template-columns:34px minmax(0,1fr); gap:6px; align-items:baseline;}
.fig-key .badge{margin:0; justify-self:start;}

/* measurement map: inputs -> concentration -> volume -> units, read top to bottom like a
   calculation sheet. Value rows sit on the panel; the operation between them sits on the ground. */
.map-chain{
  display:grid; font-family:var(--mono);
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
}
.map-node{display:grid; gap:0;}
.map-node > .map-k, .map-cell{padding:0;}
.map-node:not(.map-inputs), .map-cell{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:12px 18px;
}
.map-cell + .map-cell{border-top:1px solid var(--line-soft);}
.map-k{font-family:var(--sans); font-size:.82rem; color:var(--ink-soft);}
.map-v{font-size:1.02rem; font-weight:500; color:var(--ink); white-space:nowrap;}
.map-out .map-v{color:var(--accent); font-size:1.3rem;}
.map-arrow{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px;
  padding:8px 18px 8px 44px; position:relative;
  background:var(--bg); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
}
.map-arrow::before{
  content:"↓"; position:absolute; left:18px; top:50%; transform:translateY(-50%);
  font-family:var(--sans); font-size:1rem; color:var(--ink-dim); line-height:1;
}
.map-op{font-size:.7rem; color:var(--ink-dim);}
.map-in{font-size:.7rem; color:var(--ink-soft);}
.map-in::before{content:"·"; color:var(--ink-dim); margin-right:14px;}

/* ================= PAGE TRANSITIONS ================= */
/* Cross-document view transition between Calculator, Guides, and About: a 150ms
   cross-fade, progressive enhancement — browsers without support navigate as normal. */
@view-transition{ navigation:auto; }
::view-transition-old(root), ::view-transition-new(root){
  animation-duration:var(--t-fast);
  animation-timing-function:ease;
}

/* ================= MOTION PREFERENCE ================= */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{transition-duration:0s !important; animation-duration:0s !important;}
  ::view-transition-old(root), ::view-transition-new(root){animation:none !important;}
}

/* ================= RESPONSIVE ================= */
@media (max-width:1040px){
  .shell{grid-template-columns:1fr;}
  .thesis-grid{grid-template-columns:1fr; gap:36px;}
  .side-head{padding-top:12px;}
}
@media (max-width:720px){
  html{font-size:15px;}
  .inputs{grid-template-columns:1fr;}
  .inputs .field{border-right:0; border-bottom:1px solid var(--line);}
  .inputs .field:last-child{border-bottom:0;}
  .results-grid{grid-template-columns:1fr;}
  .result{border-right:0; border-bottom:1px solid var(--line);}
  .result:last-child{border-bottom:0;}
  .panel-head{flex-direction:column; padding-left:16px; padding-right:16px;}
  .panel-meta{text-align:left;}
  .results, .scale{margin-left:16px; margin-right:16px;}
  .scale-note{margin-left:16px; margin-right:16px;}
  .inputs .field, .hint{padding-left:16px; padding-right:16px;}
  .foot-inner{flex-direction:column; align-items:stretch;}
  .coa-row{grid-template-columns:1fr; gap:2px;}
  .coa-head{flex-direction:column;}
  .coa-meta{text-align:left; justify-items:start;}
  .map-in::before{content:none;}
  .map-in{flex-basis:100%;}
}