@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400;1,6..72,500&family=Roboto+Mono:wght@400;500&display=swap');
/* Capi design system — global entry point.
   List-of-imports only; everything else lives in tokens/. */
/* ============================================================
   Capi — Color tokens
   Two layers: primitives (raw hex, from the brand guide + the
   shipped admin product) and semantic aliases (what components
   actually reference). Always consume the semantic layer.
   ============================================================ */
:root{

  /* ---------- Primitives — brand palette (brand guidelines sheet) ---------- */
  --brand-light-blue:#95B1EE;
  --brand-light-green:#E7F1AB;
  --brand-deep-blue:#364C84;      /* logo / marketing "deep blue" */
  --brand-warm-white:#FFFDF5;     /* editorial / paper background */
  --brand-soft-lavender:#DAD6F7;
  --brand-peach:#FFD9C7;
  --brand-sunshine:#FFE368;
  --brand-sage:#C9E2C7;
  --brand-ink:#111111;

  /* ---------- Primitives — product blue ramp (shipped admin UI) ---------- */
  /* The product runs a calmer, slightly deeper interactive blue than the
     marketing mark so long dashboard sessions stay easy on the eyes. */
  --blue-50:#EDF1F6;    /* nav hover / soft tint background */
  --blue-100:#EDEFF8;   /* icon chip background */
  --blue-200:#95B1EE;   /* brand light blue (shared w/ primitive above) */
  --blue-300:#89A6F5;   /* selection / secondary data series */
  --blue-400:#5B82CC;   /* tertiary data series */
  --blue-600:#2E4CA6;   /* PRIMARY — buttons, links, active nav, focus */
  --blue-700:#1F356F;   /* primary hover / active / pressed */
  --blue-800:#364C84;   /* deep blue — brand mark, dark accents */

  /* ---------- Primitives — supporting hues (product usage) ---------- */
  --green-50:#EEF6DE;
  --green-100:#DDEBC7;
  --green-success-bg:#EEF3EA;
  --green-success-border:#cfe0c6;
  --green-success-text:#2a4a30;
  --green-600:#2E9E58;   /* positive metric / success */
  --amber-500:#D89A2A;   /* warning / stale */
  --red-500:#D65A4C;     /* error / failing */
  --lavender-100:#DAD6F7;
  --lavender-text:#4b477e;
  --peach-100:#FFD9C7;
  --peach-text:#7a3f28;
  --sunshine-100:#FFE368;
  --sage-100:#C9E2C7;
  --gray-400:#AFB3BC;    /* deprecated / disabled dot */

  /* ---------- Primitives — neutrals ---------- */
  --neutral-0:#FFFFFF;
  --neutral-app-bg:#F6F6F3;   /* product shell background */
  --neutral-nested-bg:#F8FAFB; /* nested row / list-item background */
  --neutral-ink:#111111;

  /* ---------- Semantic — surfaces ---------- */
  --color-bg-app:var(--neutral-app-bg);
  --color-bg-paper:var(--brand-warm-white);      /* editorial/marketing pages */
  --color-bg-surface:var(--neutral-0);           /* cards, panels, rails */
  --color-bg-nested:var(--neutral-nested-bg);    /* rows inside a card */
  --color-bg-dark:#111827;                        /* inverse / dark sections */

  /* ---------- Semantic — borders ---------- */
  --color-border-subtle:rgba(17,17,17,.06);
  --color-border-default:rgba(17,17,17,.09);
  --color-border-strong:rgba(17,17,17,.18);
  --color-border-brand:rgba(54,76,132,.25);

  /* ---------- Semantic — text ---------- */
  --color-text-primary:#111111;
  --color-text-secondary:rgba(17,17,17,.55);
  --color-text-tertiary:rgba(17,17,17,.45);
  --color-text-disabled:rgba(17,17,17,.3);
  --color-text-inverse:#FFFFFF;
  --color-text-brand:var(--blue-600);

  /* ---------- Semantic — brand / interactive ---------- */
  --color-brand-primary:var(--blue-600);
  --color-brand-primary-hover:var(--blue-700);
  --color-brand-deep:var(--blue-800);
  --color-brand-tint:var(--blue-50);
  --color-brand-tint-strong:rgba(149,177,238,.32);
  --color-selection:var(--blue-300);

  /* ---------- Semantic — feedback ---------- */
  --color-positive:var(--green-600);
  --color-positive-bg:var(--green-success-bg);
  --color-positive-border:var(--green-success-border);
  --color-positive-text:var(--green-success-text);
  --color-warning:var(--amber-500);
  --color-error:var(--red-500);
  --color-muted-dot:var(--gray-400);

  /* ---------- Semantic — chips / tags ---------- */
  --chip-workflow-bg:var(--brand-soft-lavender);
  --chip-workflow-text:var(--lavender-text);
  --chip-mined-bg:rgba(149,177,238,.32);
  --chip-mined-text:#2c3f6e;
  --chip-new-bg:var(--green-100);
  --chip-new-text:#3c7a4e;
}

/* ============================================================
   Capi — Typography tokens
   Primary grotesk = Inter (stand-in for Suisse/Diatype Grotesk).
   Secondary editorial serif = Newsreader (stand-in for ABC Diatype Serif).
   Mono = Roboto Mono, used for IDs, code, data, keyboard shortcuts.
   All three load from Google Fonts — see the @import below.
   ============================================================ */


:root{
  --font-grotesk:'Inter', system-ui, sans-serif;   /* UI, body, labels */
  --font-serif:'Newsreader', Georgia, serif;        /* headlines, quotes, big numerals */
  --font-mono:'Roboto Mono', monospace;             /* IDs, code, shortcuts, tabular data */

  /* Display / editorial (serif) */
  --text-display-lg:500 34px/1.05 var(--font-serif);
  --text-display-md:500 30px/1.1 var(--font-serif);
  --text-display-sm:500 22px/1.2 var(--font-serif);
  --text-stat:500 31px/1.1 var(--font-serif);        /* big KPI numerals */

  /* UI (grotesk) */
  --text-h1:600 24px/1.15 var(--font-grotesk);
  --text-h2:600 19px/1.2 var(--font-grotesk);
  --text-body-lg:400 15.5px/1.5 var(--font-grotesk);
  --text-body:400 14px/1.5 var(--font-grotesk);
  --text-body-sm:400 13px/1.4 var(--font-grotesk);
  --text-label:600 13px/1.3 var(--font-grotesk);
  --text-caption:500 12px/1.4 var(--font-grotesk);
  --text-caption-sm:400 11px/1.4 var(--font-grotesk);
  --text-eyebrow:600 10px/1.3 var(--font-grotesk);   /* uppercase, letter-spacing .11em section labels */

  /* Mono */
  --text-mono-id:500 12px/1.3 var(--font-mono);
  --text-mono-sm:500 11px/1.3 var(--font-mono);
}

/* ============================================================
   Capi — Spacing & radius tokens
   The shipped UI doesn't lock to a strict 4/8px grid — paddings
   like 9, 11, 13, 17, 22, 26 all appear intentionally. These
   tokens capture the scale actually in use so new work stays in
   the same family rather than snapping to a generic 8px system.
   ============================================================ */
:root{
  --space-1:4px;
  --space-2:7px;
  --space-3:9px;
  --space-4:11px;
  --space-5:13px;
  --space-6:16px;
  --space-7:18px;
  --space-8:20px;
  --space-9:22px;
  --space-10:26px;
  --space-11:32px;
  --space-12:44px;

  /* Radius scale */
  --radius-sm:6px;     /* small chips, mono badges */
  --radius-md:9px;     /* buttons, inputs, list rows */
  --radius-lg:11px;    /* banners, config panels */
  --radius-xl:14px;    /* cards, panels */
  --radius-2xl:16px;   /* KPI tiles, prominent cards */
  --radius-pill:999px; /* pills, dots, avatar */

  /* Layout constants observed in the product shell */
  --rail-width:236px;
  --header-height:60px;
  --content-max-width:1180px;
}

/* ============================================================
   Capi — Elevation & motion tokens
   ============================================================ */
:root{
  /* Elevation — cards sit on a very soft two-part shadow, never heavy */
  --shadow-card:0 1px 2px rgba(16,24,40,.04), 0 6px 16px -8px rgba(16,24,40,.08);
  --shadow-elevated:0 16px 40px -14px rgba(0,0,0,.28);                 /* tooltips, popovers, dark panels */
  --shadow-elevated-brand:0 1px 2px rgba(17,17,17,.04), 0 18px 44px -30px rgba(54,76,132,.5); /* editorial/marketing cards */

  /* Motion — calm, no bounce. Fades + small translations only. */
  --ease-standard:ease;
  --duration-fast:200ms;
  --duration-base:300ms;
  --duration-slow:600ms;
}

@keyframes capi-fade-up{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
@keyframes capi-fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes capi-dropdown-in{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
@keyframes capi-drawer-in{ from{ opacity:.4; transform:translateX(40px); } to{ opacity:1; transform:none; } }
@keyframes capi-toast-in{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* ============================================================
   Capi — /blog styles
   Hand-authored, unlike index.html (a design-tool export).
   Everything above this line is the shared token layer, copied
   verbatim from index.html so the blog inherits exact brand values.
   ============================================================ */

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--brand-warm-white);
  color:var(--color-text-primary);
  font-family:var(--font-grotesk);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:var(--color-brand-primary);text-decoration:none;}
a:hover{color:var(--color-brand-primary-hover);}
p{margin:0;}
img,svg{max-width:100%;}
::selection{background:var(--color-selection);color:#fff;}

/* ---------------- shell ---------------- */
.bg-wash{
  position:absolute;top:0;left:0;right:0;height:640px;pointer-events:none;z-index:0;
  background:
    radial-gradient(60% 60% at 50% -8%, rgba(149,177,238,.30), transparent 70%),
    radial-gradient(48% 50% at 88% 6%, rgba(218,214,247,.32), transparent 74%),
    radial-gradient(44% 46% at 8% 12%, rgba(201,226,199,.28), transparent 76%);
}
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(255,253,245,.82);
  backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--color-border-subtle);
}
.site-header>div{
  max-width:1160px;margin:0 auto;padding:14px 28px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.site-header img{height:53px;width:106px;display:block;}
.site-nav{display:flex;align-items:center;gap:30px;}
.navlink{font-size:14px;color:var(--color-text-secondary);font-weight:500;}
.navlink:hover{color:var(--color-text-primary);}
.navlink[aria-current="page"]{color:var(--color-text-primary);}
.btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:10px 17px;font:600 13px var(--font-grotesk);
  border-radius:var(--radius-pill);cursor:pointer;border:0;
  background:#1746BA;color:#fff;
  transition:filter .15s ease, translate .15s ease;
}
.btn:hover{filter:brightness(1.12);translate:0 -1px;color:#fff;}
.btn-ghost{
  background:var(--neutral-0);color:var(--color-text-primary);
  border:1px solid var(--color-border-strong);
}
.btn-ghost:hover{color:var(--color-text-primary);filter:none;}

main{position:relative;z-index:1;}
.wrap{max-width:1160px;margin:0 auto;padding:0 28px;}
.reading{max-width:760px;margin:0 auto;padding:0 28px;}

/* ---------------- editorial type ---------------- */
.eyebrow{
  font:600 10px var(--font-grotesk);letter-spacing:.12em;text-transform:uppercase;
  color:var(--color-brand-primary);margin-bottom:14px;
}
.eyebrow-muted{color:var(--color-text-tertiary);}
h1.display{
  font-family:var(--font-serif);font-weight:500;
  font-size:clamp(38px,6vw,68px);line-height:1.03;letter-spacing:-.02em;
  margin:0 0 22px;text-wrap:balance;
}
h2.display{
  font-family:var(--font-serif);font-weight:500;
  font-size:clamp(30px,4.4vw,50px);line-height:1.06;letter-spacing:-.02em;
  margin:0 0 20px;text-wrap:balance;
}
.lede{
  font-size:clamp(17px,2vw,21px);line-height:1.5;
  color:var(--color-text-secondary);max-width:48ch;
}

/* ---------------- post prose ---------------- */
.post{padding:clamp(30px,5vw,56px) 0 0;}
.post section{margin-top:clamp(56px,7vw,92px);}
.post h2{
  font-family:var(--font-serif);font-weight:500;
  font-size:clamp(27px,3.6vw,42px);line-height:1.08;letter-spacing:-.02em;
  margin:0 0 18px;text-wrap:balance;
}
.post h3{
  font:600 19px/1.3 var(--font-grotesk);
  margin:clamp(34px,4vw,46px) 0 12px;letter-spacing:-.01em;
}
.post p{
  font-size:17px;line-height:1.65;color:rgba(17,17,17,.72);
  margin:0 0 18px;max-width:66ch;
}
.post p.strong-line{
  font-size:19px;line-height:1.55;color:var(--color-text-primary);font-weight:500;
}
.post ul,.post ol{
  margin:0 0 20px;padding-left:22px;max-width:66ch;
  font-size:17px;line-height:1.6;color:rgba(17,17,17,.72);
}
.post li{margin-bottom:9px;}
.post li strong{color:var(--color-text-primary);font-weight:600;}
.post strong{color:var(--color-text-primary);font-weight:600;}
.post a{border-bottom:1px solid rgba(46,76,166,.28);}

.pull{
  margin:clamp(34px,4vw,52px) 0;padding:0 0 0 22px;
  border-left:3px solid var(--brand-light-blue);
}
.pull p{
  font-family:var(--font-serif);font-weight:500;
  font-size:clamp(21px,2.6vw,29px);line-height:1.28;letter-spacing:-.01em;
  color:var(--color-text-primary);margin:0;max-width:34ch;
}

.callout{
  margin:clamp(28px,3.5vw,40px) 0;padding:22px 24px;
  background:var(--color-bg-surface);
  border:1px solid var(--color-border-default);
  border-radius:var(--radius-xl);box-shadow:var(--shadow-card);
}
.callout .k{
  font:600 10px var(--font-grotesk);letter-spacing:.12em;text-transform:uppercase;
  color:var(--color-brand-primary);display:block;margin-bottom:10px;
}
.callout p{margin:0;font-size:16px;}
.callout p+p{margin-top:12px;}

/* ---------------- figures ---------------- */
figure{margin:clamp(34px,4.5vw,56px) 0;}
.fig-scroll{
  overflow-x:auto;
  border:1px solid var(--color-border-default);
  border-radius:var(--radius-2xl);
  background:var(--color-bg-surface);
  box-shadow:var(--shadow-card);
  padding:clamp(16px,2.4vw,28px);
  scrollbar-width:thin;
}
.fig-scroll>svg{display:block;width:100%;height:auto;min-width:600px;}
figcaption{
  margin-top:12px;font-size:13.5px;line-height:1.5;
  color:var(--color-text-tertiary);max-width:70ch;
}
figcaption b{color:var(--color-text-secondary);font-weight:600;}

/* shared SVG vocabulary */
.d text{font-family:var(--font-grotesk);fill:var(--color-text-primary);}
.d .lbl{font-weight:600;font-size:15px;}
.d .lbl-sm{font-weight:600;font-size:13px;}
.d .sub{font-weight:400;font-size:12.5px;fill:var(--color-text-secondary);}
.d .sub-xs{font-weight:400;font-size:11.5px;fill:var(--color-text-tertiary);}
.d .mono{font-family:var(--font-mono);font-weight:500;font-size:12px;}
.d .mono-sm{font-family:var(--font-mono);font-weight:500;font-size:10.5px;}
.d .eye{font-weight:600;font-size:11px;letter-spacing:.1em;fill:var(--color-text-tertiary);}
.d .inv{fill:#fff;}
.d .inv-soft{fill:rgba(255,255,255,.82);}
.d .serif{font-family:var(--font-serif);font-weight:500;}
.d .box{fill:var(--neutral-0);stroke:rgba(17,17,17,.13);stroke-width:1;}
.d .box-tint{fill:#EDF1F6;stroke:rgba(46,76,166,.16);stroke-width:1;}
.d .box-lav{fill:#EFEDFB;stroke:rgba(75,71,126,.16);stroke-width:1;}
.d .box-brand{fill:#1746BA;stroke:none;}
.d .box-deep{fill:var(--brand-deep-blue);stroke:none;}
.d .box-warn{fill:#FDF2EE;stroke:rgba(214,90,76,.3);stroke-width:1;}
.d .box-ok{fill:var(--green-success-bg);stroke:var(--green-success-border);stroke-width:1;}
.d .box-dash{fill:none;stroke:rgba(17,17,17,.2);stroke-width:1;stroke-dasharray:5 5;}
.d .panel{fill:#FCFBF6;stroke:rgba(17,17,17,.08);stroke-width:1;}
.d .flow{fill:none;stroke:rgba(17,17,17,.3);stroke-width:1.5;}
.d .flow-soft{fill:none;stroke:rgba(17,17,17,.16);stroke-width:1.3;}
.d .flow-bad{fill:none;stroke:var(--red-500);stroke-width:1.6;stroke-dasharray:6 4;}
.d .flow-ok{fill:none;stroke:var(--green-600);stroke-width:1.6;}
.d .flow-brand{fill:none;stroke:#1746BA;stroke-width:1.8;}
.d .bad{fill:var(--red-500);}
.d .ok{fill:var(--green-600);}
.d .warn{fill:var(--amber-500);}
.d .brandf{fill:#1746BA;}
.d .rule{stroke:rgba(17,17,17,.1);stroke-width:1;}
.d .rule-dash{stroke:rgba(17,17,17,.14);stroke-width:1;stroke-dasharray:4 4;}

/* ---------------- post index cards ---------------- */
.cards{
  display:grid;gap:clamp(16px,2vw,22px);
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  margin-top:clamp(34px,4vw,52px);
}
.card{
  display:flex;flex-direction:column;
  padding:26px 24px 24px;border-radius:var(--radius-2xl);
  border:1px solid var(--color-border-default);background:var(--color-bg-surface);
  box-shadow:var(--shadow-card);color:inherit;
  transition:box-shadow .28s ease, border-color .28s ease, translate .28s ease;
}
.card:hover{
  box-shadow:var(--shadow-elevated-brand);
  border-color:var(--color-border-strong);
  translate:0 -3px;color:inherit;
}
.card .k{
  font:600 10px var(--font-grotesk);letter-spacing:.12em;text-transform:uppercase;
  color:var(--color-brand-primary);margin-bottom:14px;
}
.card h3{
  font-family:var(--font-serif);font-weight:500;
  font-size:clamp(23px,2.4vw,29px);line-height:1.12;letter-spacing:-.015em;
  margin:0 0 12px;color:var(--color-text-primary);text-wrap:balance;
}
.card p{font-size:15.5px;line-height:1.55;color:var(--color-text-secondary);margin:0 0 18px;}
.card .more{
  margin-top:auto;font:600 13px var(--font-grotesk);color:var(--color-brand-primary);
  display:inline-flex;align-items:center;gap:6px;
}
.card:hover .more{gap:10px;transition:gap .2s ease;}

/* ---------------- post meta + next ---------------- */
.meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
  font-size:13.5px;color:var(--color-text-tertiary);margin-bottom:26px;
}
.meta .dot{width:4px;height:4px;border-radius:50%;background:var(--brand-light-blue);}
.tldr{
  margin:clamp(30px,4vw,44px) 0;padding:24px 26px;
  border-radius:var(--radius-2xl);
  background:linear-gradient(180deg, rgba(149,177,238,.16), rgba(218,214,247,.14));
  border:1px solid var(--color-border-brand);
}
.tldr .k{
  font:600 10px var(--font-grotesk);letter-spacing:.12em;text-transform:uppercase;
  color:var(--color-brand-primary);display:block;margin-bottom:12px;
}
.tldr ul{margin:0;padding-left:20px;}
.tldr li{font-size:16px;line-height:1.55;color:rgba(17,17,17,.75);margin-bottom:8px;}
.tldr li:last-child{margin-bottom:0;}

.next-up{
  margin-top:clamp(56px,7vw,88px);padding-top:34px;
  border-top:1px solid var(--color-border-subtle);
}
.next-up .k{
  font:600 10px var(--font-grotesk);letter-spacing:.12em;text-transform:uppercase;
  color:var(--color-text-tertiary);margin-bottom:18px;
}

/* ---------------- CTA + footer ---------------- */
.cta{
  position:relative;overflow:hidden;border-radius:var(--radius-2xl);
  margin:clamp(56px,7vw,96px) 0 clamp(40px,5vw,64px);
  padding:clamp(38px,5vw,64px) clamp(26px,4vw,56px);
  background:linear-gradient(160deg, var(--brand-deep-blue), #22315a);
  text-align:center;
}
.cta h2{
  font-family:var(--font-serif);font-weight:500;
  font-size:clamp(28px,4vw,46px);line-height:1.06;letter-spacing:-.02em;
  margin:0 0 16px;color:#fff;text-wrap:balance;
}
.cta p{
  font-size:clamp(15px,1.8vw,18px);line-height:1.55;
  color:rgba(255,255,255,.86);margin:0 auto 28px;max-width:56ch;
}
.cta .row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;}
.cta .btn{padding:12px 20px;font-size:13.5px;}

.site-footer{
  position:relative;overflow:hidden;
  border-top:1px solid var(--color-border-subtle);
  background-color:rgba(255,249,239,.918);
}
.site-footer .mark{
  position:absolute;right:-2%;bottom:-8%;
  font-family:var(--font-serif);font-weight:500;
  font-size:clamp(160px,30vw,420px);line-height:.8;letter-spacing:-.03em;
  color:var(--brand-light-blue);opacity:.16;user-select:none;pointer-events:none;z-index:0;
}
.site-footer>div{
  position:relative;z-index:1;max-width:1160px;margin:0 auto;
  padding:clamp(36px,5vw,60px) 28px 22px;
}
.site-footer .top{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:20px 32px;margin-bottom:clamp(40px,7vw,84px);
}
.site-footer img{height:72px;width:144px;display:block;}
.site-footer .bottom{
  padding-top:22px;border-top:1px solid var(--color-border-subtle);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
  font-size:14px;color:var(--color-text-tertiary);
}

/* ---------------- reveal ---------------- */
.rv{opacity:0;translate:0 18px;transition:opacity .65s cubic-bezier(.2,.7,.2,1),translate .65s cubic-bezier(.2,.7,.2,1);transition-delay:var(--rvd,0ms);}
.rv.in{opacity:1;translate:0 0;}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1!important;translate:none!important;}
  html{scroll-behavior:auto;}
}

/* ---------------- phone ---------------- */
@media (max-width:760px){
  .post p,.post ul,.post ol{font-size:16.5px;}
  .fig-scroll{padding:14px;}
  .fig-scroll>svg{min-width:560px;}
  figure::after{
    content:"Scroll the diagram sideways to see all of it.";
    display:block;margin-top:10px;
    font:400 12px var(--font-grotesk);color:var(--color-text-disabled);
  }
}
@media (max-width:640px){
  /* header wraps to two rows: logo + CTA, then the nav underneath.
     Never hide the nav on phones, it is the only way back to the site. */
  .site-header>div{padding:10px 16px 0;gap:12px;flex-wrap:wrap;}
  .site-header img{height:38px;width:76px;}
  .site-header>div>a:first-child{margin-right:auto;}
  .site-header .site-nav{
    order:3;width:100%;justify-content:space-between;gap:10px;
    margin-top:8px;padding:9px 0;
    border-top:1px solid var(--color-border-subtle);
  }
  .navlink{font-size:13px;}
  .site-header .btn{padding:8px 13px;font-size:12px;white-space:nowrap;}
  .reading,.wrap{padding:0 18px;}
  .site-footer img{height:56px;width:112px;}
  .site-footer .mark{font-size:44vw;right:-6%;}
  .site-footer .site-nav{justify-content:flex-start;}
}
@media (max-width:400px){
  .site-header .navlink{font-size:12.5px;}
  .site-header .site-nav{gap:6px;}
}