/* ==========================================================================
   MOO DIGITAL STYLE SHEET  v0.2
   One file for the whole site. Part 1 is the only part that changes between
   clients: brand colours, fonts and a few "feel" settings. Part 2 onwards
   uses those values and should stay the same for every client.
   ========================================================================== */


/* ==========================================================================
   PART 1: BRAND (change these per client)
   ========================================================================== */

@font-face{font-family:Archivo;font-style:normal;font-weight:900;font-display:swap;src:url(../fonts/archivo-900.woff2) format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/inter-400.woff2) format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/inter-600.woff2) format('woff2')}

:root{
  /* Core colours */
  --ink:#0a0a0a;          /* main text, dark sections */
  --paper:#f1eee6;        /* page background */
  --accent:#00ff00;       /* lime: big backgrounds, highlights (never text on paper) */
  --accent-2:#0000ff;     /* blue: links, focus rings, second feature colour */
  --on-accent:#0a0a0a;    /* text that sits on --accent */
  --on-accent-2:#ffffff;  /* text that sits on --accent-2 */

  /* Supporting colours */
  --muted:#5a564d;        /* secondary text on paper (6.3:1) */
  --line:#c2bdb1;         /* faint rules and borders on paper */
  --ink-muted:#a8a8a8;    /* secondary text on ink (8.3:1) */
  --ink-line:#333333;     /* rules on ink */
  --white:#ffffff;
  --disabled-bg:#c8c5bc;  /* greyed-out buttons */
  --disabled-text:#5a564d;

  /* Status colours: bright bars plus a pale tint, always with a word as well */
  --ok:#00a63e;   --ok-tint:#dcf6e2;
  --warn:#ff9f00; --warn-tint:#ffefc7;
  --bad:#e5002b;  --bad-tint:#fde0e5;
  --info-tint:#e0e0ff;
  --bad-text:#b00020;     /* red used for words on paper (6.3:1) */

  /* Fonts */
  --font-display:Archivo,Impact,"Arial Black",sans-serif;
  --font-body:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;

  /* Feel */
  --radius:0;             /* boxes: 0 is sharp and bold */
  --radius-pill:999px;    /* buttons and tags */
  --border:3px;           /* the heavy border used on cards and inputs */
}


/* ==========================================================================
   PART 2: SHARED SCALES (the same everywhere)
   ========================================================================== */

:root{
  --space-xs:.25rem; --space-sm:.5rem; --space-md:1rem; --space-lg:1.5rem;
  --space-xl:2rem;   --space-2xl:3rem; --space-3xl:5rem;
  --wrap:1100px;
  --measure:34em;         /* comfortable line length for reading */
}


/* ==========================================================================
   PART 3: BASE
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font:400 18px/1.6 var(--font-body);color:var(--ink);background:var(--paper);min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--accent-2);text-underline-offset:.2em}
a:hover{text-decoration-thickness:3px}
:focus-visible{outline:4px solid var(--accent-2);outline-offset:4px}
.on-dark :focus-visible,.on-blue :focus-visible,.on-accent :focus-visible{outline-color:var(--accent)}
.on-accent :focus-visible{outline-color:var(--ink)}
::selection{background:var(--accent);color:var(--ink)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
section{padding:var(--space-3xl) 0}
.skip{position:absolute;left:-999px;top:0;background:var(--accent);color:var(--ink);padding:12px 20px;font-weight:600;z-index:100}
.skip:focus{left:0}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Section colour themes */
.on-dark{background:var(--ink);color:var(--white)}
.on-blue{background:var(--accent-2);color:var(--on-accent-2)}
.on-accent{background:var(--accent);color:var(--on-accent)}
/* On a page too short to fill the screen, main is stretched taller than its
   content. This colours that leftover strip so it runs into the footer
   rather than showing as a band of paper. Set it to match the last section. */
.page-ink{background:var(--ink)}
/* :where() keeps these rules weak so buttons and tags can set their own colours */
.on-dark :where(a),.on-blue :where(a){color:var(--accent)}
.on-accent :where(a){color:var(--ink)}


/* ==========================================================================
   PART 4: TYPOGRAPHY
   ========================================================================== */

h1,h2,h3,h4{font-family:var(--font-display);font-weight:900;letter-spacing:-.03em;line-height:1}
h1{font-size:clamp(42px,8.6vw,114px)}
h2{font-size:clamp(34px,6vw,72px);margin-bottom:var(--space-lg)}
h3{font-size:clamp(26px,3.4vw,38px);margin-bottom:var(--space-md)}
h4{font-size:clamp(20px,2.4vw,26px);margin-bottom:var(--space-sm);letter-spacing:-.02em}
.on-dark h2,.on-blue h2{color:var(--accent)}
.lead{font-size:clamp(19px,2.2vw,24px);line-height:1.5;max-width:var(--measure)}
.small{font-size:15px;color:var(--muted)}
.on-dark .small,.on-blue .small{color:var(--ink-muted)}
.on-blue .small{color:var(--white)}
.eyebrow{font:600 14px/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase;margin-bottom:var(--space-md)}
strong,b{font-weight:600}
p+p{margin-top:1.1em}


/* ==========================================================================
   PART 5: BUTTONS
   ========================================================================== */

.btn{display:inline-block;font:600 18px/1.2 var(--font-body);text-decoration:none;padding:16px 28px;border:var(--border) solid var(--ink);border-radius:var(--radius-pill);background:var(--ink);color:var(--accent);cursor:pointer;overflow-wrap:anywhere}
.btn:hover{background:var(--accent-2);border-color:var(--accent-2);color:var(--on-accent-2);text-decoration:none}
.btn-outline{background:transparent;color:var(--ink)}
.btn-outline:hover{background:var(--ink);border-color:var(--ink);color:var(--accent)}
.btn-accent{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn-accent:hover{background:var(--white);border-color:var(--white);color:var(--ink)}
.btn-small{font-size:15px;padding:10px 20px}
.btn[disabled],.btn[aria-disabled=true]{background:var(--disabled-bg);border-color:var(--disabled-bg);color:var(--disabled-text);cursor:not-allowed;pointer-events:none}
/* on dark or blue sections, buttons flip */
.on-dark .btn,.on-blue .btn{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.on-dark .btn:hover,.on-blue .btn:hover{background:var(--white);border-color:var(--white);color:var(--ink)}
.on-dark .btn-outline,.on-blue .btn-outline{background:transparent;color:var(--white);border-color:var(--white)}
.on-dark .btn-outline:hover,.on-blue .btn-outline:hover{background:var(--white);color:var(--ink)}
.on-accent .btn:hover{background:var(--accent-2);border-color:var(--accent-2);color:var(--on-accent-2)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--space-md);align-items:center}


/* ==========================================================================
   PART 6: NAVIGATION AND FOOTER
   ========================================================================== */

.bar{background:var(--ink);padding:16px 0}
.bar .wrap{display:flex;align-items:center;gap:var(--space-lg);flex-wrap:wrap}
.bar .brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.bar .brand img{height:34px;width:auto}
.bar .brand svg{height:34px;width:auto;fill:var(--accent)}
.bar .brand span{font:900 22px/1 var(--font-display);letter-spacing:-.02em;color:var(--white)}
/* Name and strapline stacked beside the mark, rather than the name alone.
   The name keeps .brand span's styling; only the line under it is new. */
.bar .brand-text{display:flex;flex-direction:column;gap:2px}
.bar .brand-text small{font:400 14px/1.3 var(--font-body);color:var(--ink-muted)}
.bar nav{margin-left:auto}
.bar nav ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-sm) var(--space-lg)}
.bar nav a{color:var(--accent);font-weight:600;font-size:16px;text-decoration:none;padding:6px 0;border-bottom:3px solid transparent}
.bar nav a:hover{color:var(--white);border-bottom-color:var(--white)}
.bar nav a[aria-current=page]{color:var(--white);border-bottom-color:var(--accent)}
/* Sticky variant. Pages that have their own sticky sub-nav (the style
   guide) leave it off so the two don't stack on top of each other. */
.bar-sticky{position:sticky;top:0;z-index:10}

/* A header that starts tall and shrinks to the compact bar as the page is
   scrolled, then stays pinned to the top.
   The size follows the scroll position rather than running on a timer. That
   matters: on a timer there is a window where a still-tall header overlaps
   content that has already scrolled up under it. Tied to scroll, the bottom
   of the header tracks the top of the content exactly, so nothing is covered
   part way through and nothing below ever shifts.
   --bar-t runs 0 (tall) to 1 (compact) and every size below is interpolated
   from it, so a media query only has to restate the endpoints.
   Needs _includes/bar-shrink.njk, which adds .is-fixed and keeps --bar-h and
   --bar-t current. Without the script the header stays tall and scrolls away
   like any other header, which is a perfectly good page. */
.bar-shrink{--bar-max:240px;--bar-min:64px;--badge-max:112px;--badge-min:34px;--name-max:40px;--name-min:22px;--strap-max:17px;--strap-min:14px;--mail-max:19px;--mail-min:16px;--bar-t:0;--bar-h:var(--bar-max);height:var(--bar-h);padding:0}
.bar-shrink.is-fixed{position:fixed;top:0;left:0;right:0;z-index:10}
.bar-shrink .wrap{height:100%;align-items:center;flex-wrap:nowrap}
.bar-shrink .brand{gap:calc(24px - 10px * var(--bar-t))}
.bar-shrink .brand img{height:calc(var(--badge-max) - (var(--badge-max) - var(--badge-min)) * var(--bar-t));width:auto}
.bar-shrink .brand span{font-size:calc(var(--name-max) - (var(--name-max) - var(--name-min)) * var(--bar-t))}
.bar-shrink .brand-text small{font-size:calc(var(--strap-max) - (var(--strap-max) - var(--strap-min)) * var(--bar-t))}
.bar-shrink .bar-mail{font-size:calc(var(--mail-max) - (var(--mail-max) - var(--mail-min)) * var(--bar-t))}
/* An email address in place of the nav, pushed to the right of the bar. */
.bar-mail{margin-left:auto;color:var(--accent);font-weight:600;font-size:16px;text-decoration:none;white-space:nowrap}
.bar-mail:hover{color:var(--white);text-decoration:underline;text-underline-offset:4px}

.crumbs{font-size:15px;color:var(--muted)}
.crumbs ol{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-sm)}
.crumbs li+li::before{content:"/";margin-right:var(--space-sm)}

footer{background:var(--ink);color:var(--ink-muted);font-size:14px;padding:0 0 32px}
footer .inner{border-top:1px solid var(--ink-line);padding-top:24px}
footer a{color:var(--ink-muted)}
footer a:hover{color:var(--white)}


/* ==========================================================================
   PART 7: FORMS
   ========================================================================== */

.field{margin-bottom:var(--space-lg)}
label,legend{display:block;font-weight:600;margin-bottom:var(--space-sm)}
.hint{display:block;font-size:15px;color:var(--muted);margin:-.25rem 0 var(--space-sm)}
input,textarea,select{font:400 18px/1.4 var(--font-body);color:var(--ink);background:var(--white);border:var(--border) solid var(--ink);border-radius:var(--radius);padding:12px 14px;width:100%;max-width:36em}
textarea{min-height:9em;resize:vertical}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:4px solid var(--accent-2);outline-offset:2px}
input::placeholder,textarea::placeholder{color:var(--muted)}
input[type=checkbox],input[type=radio]{width:1.4em;height:1.4em;accent-color:var(--accent-2);vertical-align:middle;margin-right:var(--space-sm)}
.check{display:flex;align-items:center;font-weight:400}
.field-error input{border-color:var(--bad)}
.error-text{color:var(--bad-text);font-weight:600;margin-top:var(--space-sm)}
.error-text::before{content:"Problem: "}
fieldset{border:0;padding:0}


/* ==========================================================================
   PART 8: COMPONENTS
   ========================================================================== */

/* Two columns side by side, stacking on a phone (Part 12). */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
/* Sits the shorter column against the middle of the taller one. */
.cols-middle{align-items:center}

/* Tags */
.tags{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-sm)}
.tag{display:inline-block;font:600 14px/1 var(--font-body);padding:8px 14px;border-radius:var(--radius-pill);background:var(--accent);color:var(--on-accent);text-decoration:none}
a.tag:hover{background:var(--ink);color:var(--accent)}
/* tags on lime flip to ink so they stay visible */
.on-accent .tag{background:var(--ink);color:var(--accent)}
.on-accent a.tag:hover{background:var(--accent-2);color:var(--on-accent-2)}
.on-accent .tag-outline{background:transparent;color:var(--ink);border-color:var(--ink)}
.tag-outline{background:transparent;border:2px solid var(--ink);color:var(--ink);padding:6px 12px}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-lg)}
.card{background:var(--white);border:var(--border) solid var(--ink);border-radius:var(--radius);padding:var(--space-lg);display:flex;flex-direction:column;gap:var(--space-sm)}
.card h3,.card h4{margin-bottom:0}
.card a{color:inherit}
.card .more{margin-top:auto;font-weight:600}
.card-accent{background:var(--accent)}
.card-blue{background:var(--accent-2);color:var(--on-accent-2)}
.card-blue h3,.card-blue h4{color:var(--accent)}
.card-link:hover{box-shadow:8px 8px 0 var(--ink);transform:translate(-4px,-4px)}
@media (prefers-reduced-motion:no-preference){.card-link{transition:box-shadow .15s,transform .15s}}

/* Photo gallery. A full-bleed masonry grid, three columns on a desktop. CSS
   columns rather than grid, so pictures of different heights pack without
   leaving gaps and without any JavaScript. Note that columns run top to
   bottom, so the reading order is down each column in turn, not across.
   The gallery sits outside .wrap, which is what makes it full width. */
.gallery{columns:3;column-gap:var(--space-xs);margin:0;padding:0}
.gallery-item{break-inside:avoid;margin:0 0 var(--space-xs)}
.gallery-item a{display:block;line-height:0}
.gallery-item img{width:100%}
/* The focus ring is drawn inside the picture. The shared rule offsets it
   outwards, which in a grid this tight would be hidden by the neighbour. */
.gallery-item a:focus-visible{outline:4px solid var(--accent);outline-offset:-10px}
@media (prefers-reduced-motion:no-preference){.gallery-item img{transition:opacity .15s}}
.gallery-item a:hover img{opacity:.78}

/* Lightbox. A native <dialog>, so the browser handles the top layer, Esc to
   close and holding focus inside it. Needs _includes/lightbox.njk. With
   JavaScript off the dialog never opens and each thumbnail stays an ordinary
   link to the large picture, which is why the markup is a link in the first
   place. */
.lightbox{border:0;padding:0;background:none;max-width:100vw;max-height:100vh;width:100%;height:100%;overflow:hidden}
.lightbox::backdrop{background:rgba(10,10,10,.94)}
/* Nothing but the picture. The description still travels with it as the
   image's alt text, and the position is announced to a screen reader from a
   visually hidden live region, so taking the words off the screen costs a
   non-sighted visitor nothing. */
.lightbox-stage{display:flex;height:100%;padding:16px}
.lightbox-figure{flex:1;display:flex;align-items:center;justify-content:center;margin:0;min-height:0}
.lightbox-figure img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
/* Round buttons matching .totop. Fixed rather than absolute so they stay put
   whatever the shape of the picture behind them. */
.lightbox button{position:fixed;width:52px;height:52px;border:0;border-radius:50%;background:rgba(10,10,10,.82);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.lightbox button:hover{background:var(--ink)}
.lightbox button:focus-visible{outline:4px solid var(--accent);outline-offset:3px}
.lightbox button svg{width:24px;height:24px;fill:var(--accent)}
.lightbox button[disabled]{opacity:.35;cursor:not-allowed}
.lightbox-close{top:16px;right:16px}
.lightbox-prev{left:16px;top:50%;transform:translateY(-50%)}
.lightbox-next{right:16px;top:50%;transform:translateY(-50%)}

/* Alerts: always carry a word as well as colour */
.alert{border:var(--border) solid var(--ink);padding:var(--space-md) var(--space-lg) var(--space-md) calc(var(--space-lg) + 12px);background:var(--white);border-radius:var(--radius)}
.alert strong:first-child{display:block;margin-bottom:var(--space-xs)}
.alert-ok{box-shadow:inset 12px 0 0 var(--ok);background:var(--ok-tint)}
.alert-warn{box-shadow:inset 12px 0 0 var(--warn);background:var(--warn-tint)}
.alert-bad{box-shadow:inset 12px 0 0 var(--bad);background:var(--bad-tint)}
.alert-info{box-shadow:inset 12px 0 0 var(--accent-2);background:var(--info-tint)}
.alerts{display:grid;gap:var(--space-md);max-width:var(--measure)}

/* Side note (used on the landing page) */
.note{border-left:12px solid var(--accent-2);padding:4px 0 4px 24px}
/* A heading in a note belongs to the paragraph under it, so the space sits
   above the heading rather than below it. */
.note h3{margin-top:var(--space-xl);margin-bottom:var(--space-sm)}
.note>h3:first-child{margin-top:0}

/* Tables */
.table-wrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:30em}
th,td{text-align:left;padding:12px 16px;border-bottom:2px solid var(--line);vertical-align:top}
th{font-weight:600}
thead th{border-bottom:var(--border) solid var(--ink)}

/* Pagination */
.pager{display:flex;justify-content:space-between;gap:var(--space-md);flex-wrap:wrap}

/* Back to top: fades in once the page has scrolled a little way. Needs the
   small script in _includes/back-to-top.njk to add .show. */
.totop{position:fixed;right:24px;bottom:24px;z-index:9;width:52px;height:52px;border-radius:50%;background:rgba(10,10,10,.82);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .4s,transform .4s,visibility .4s}
.totop.show{opacity:1;visibility:visible;transform:none}
.totop svg{width:26px;height:29px;fill:var(--accent);opacity:.85}
.totop:hover{background:var(--ink)}
.totop:hover svg{opacity:1}
.totop:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.totop{transform:none;transition:opacity .4s,visibility .4s}}

/* Back to top: fades in once the page has scrolled a little way. Needs the
   small script in _includes/back-to-top.njk to add .show. */
.totop{position:fixed;right:24px;bottom:24px;z-index:9;width:52px;height:52px;border-radius:50%;background:rgba(10,10,10,.82);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .4s,transform .4s,visibility .4s}
.totop.show{opacity:1;visibility:visible;transform:none}
.totop svg{width:26px;height:29px;fill:var(--accent);opacity:.85}
.totop:hover{background:var(--ink)}
.totop:hover svg{opacity:1}
.totop:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.totop{transform:none;transition:opacity .4s,visibility .4s}}


/* ==========================================================================
   PART 9: BLOG / PROSE
   ========================================================================== */

.prose{font-size:clamp(19px,2.1vw,22px)}
.prose>*{max-width:var(--measure)}
.prose>*+*{margin-top:1.1em}
.prose h2{font-size:clamp(30px,4.4vw,48px);margin:2em 0 .6em}
.prose h3{font-size:clamp(24px,3vw,32px);margin:1.8em 0 .5em}
.prose h2+*,.prose h3+*{margin-top:0}
.prose ul,.prose ol{padding-left:1.4em}
.prose li+li{margin-top:.4em}
.prose blockquote{border-left:12px solid var(--accent);padding:4px 0 4px 24px;font-size:1.15em;font-weight:600}
.prose blockquote footer{background:none;padding:0;margin-top:var(--space-sm);font-size:.8em;font-weight:400;color:var(--muted)}
.prose hr{border:0;border-top:var(--border) solid var(--ink);margin:2.5em 0}
.prose figure{max-width:none}
.prose figure img{border:var(--border) solid var(--ink);width:100%}
.prose figcaption{font-size:15px;color:var(--muted);margin-top:var(--space-sm);max-width:var(--measure)}
code,kbd{font:400 .88em var(--font-mono);background:var(--white);border:1px solid var(--line);padding:.1em .4em;border-radius:4px}
pre{background:var(--ink);color:var(--white);padding:var(--space-lg);overflow-x:auto;font:400 15px/1.6 var(--font-mono);border-radius:var(--radius)}
pre code{background:none;border:0;padding:0;font-size:inherit}

/* Post header and list */
.post-meta{margin-bottom:var(--space-sm);font-size:15px;color:var(--muted);display:flex;flex-wrap:wrap;gap:var(--space-xs) var(--space-md)}
.post-meta .tags{margin-left:0}
.post-list{list-style:none;padding:0;border-top:var(--border) solid var(--ink)}
.post-list>li{padding:var(--space-lg) 0;border-bottom:2px solid var(--line)}
.post-list h3{margin-bottom:var(--space-sm)}
.post-list h3 a{color:inherit;text-decoration:none}
.post-list h3 a:hover{text-decoration:underline;text-decoration-thickness:6px;text-decoration-color:var(--accent-2)}
.author{display:flex;gap:var(--space-lg);align-items:flex-start;border-top:var(--border) solid var(--ink);padding-top:var(--space-lg)}


/* ==========================================================================
   PART 10: LANDING AND 404 PAGES
   The few pieces only those two use. Their colours, headings, buttons and
   side note all come from the shared parts above.
   ========================================================================== */

/* Hero. Colour comes from .on-accent. */
.hero{padding:72px 0 88px}
.hero h1{max-width:11em}
.hero .lead{margin-top:var(--space-xl)}
.hero .btn{margin-top:40px}
/* Artwork set beside a hero's words, as on the 404 page. Centred in its
   column so it sits under the text once the two stack. */
.hero-art{width:100%;max-width:380px;margin-inline:auto}
/* It drifts, because it is adrift. Holds still if the visitor asks it to. */
@media (prefers-reduced-motion:no-preference){
  .hero-art{animation:drift 7s ease-in-out infinite alternate}
  @keyframes drift{from{transform:translateY(-10px) rotate(-1.5deg)}to{transform:translateY(10px) rotate(1.5deg)}}
}

/* A faint pattern of logo bars behind a section. Put .has-pattern on the
   section and .pattern as its first child; add .rev to fade it in from the
   right instead of the left. The stroke is --line, written out in full
   because a data URI cannot read a custom property. */
.has-pattern{position:relative;overflow:hidden}
.has-pattern .wrap{position:relative}
.pattern{position:absolute;inset:0;background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='128' viewBox='0 0 240 128' fill='none' stroke='%23c2bdb1' stroke-width='1.5'><rect x='0.75' y='0.75' width='98.5' height='14.5' rx='7.25'/><rect x='116.75' y='0.75' width='98.5' height='14.5' rx='7.25'/><rect x='0.75' y='32.75' width='168.5' height='14.5' rx='7.25'/><rect x='186.75' y='32.75' width='38.5' height='14.5' rx='7.25'/><rect x='30.75' y='64.75' width='208.5' height='14.5' rx='7.25'/><rect x='0.75' y='96.75' width='58.5' height='14.5' rx='7.25'/><rect x='76.75' y='96.75' width='98.5' height='14.5' rx='7.25'/><rect x='192.75' y='96.75' width='34.5' height='14.5' rx='7.25'/></svg>") repeat left top/240px 128px;-webkit-mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.5) 75%);mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.5) 75%)}
.pattern.rev{-webkit-mask-image:linear-gradient(to left,transparent 0,rgba(0,0,0,.5) 75%);mask-image:linear-gradient(to left,transparent 0,rgba(0,0,0,.5) 75%)}

/* Portrait in the "Who's behind Moo Digital" note. Held well under the
   column width so the face stays a comfortable size next to the copy. */
.portrait{width:100%;max-width:400px}

/* Closing contact block. Colour comes from .on-dark. */
.contact{padding-bottom:96px}
.contact h2{font-size:clamp(48px,11vw,150px);margin-bottom:var(--space-xl)}
.contact p{max-width:30em}
.mail{display:inline-block;margin-top:var(--space-xl);font:900 clamp(26px,5.2vw,64px)/1.1 var(--font-display);letter-spacing:-.02em;color:var(--accent);text-decoration-thickness:6px;text-underline-offset:8px;overflow-wrap:anywhere}
.mail:hover{color:var(--white)}


/* ==========================================================================
   PART 11: STYLE GUIDE PAGE ONLY (delete when forking this for a client)
   ========================================================================== */

.sg-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--space-md)}
.sg-swatch{border:var(--border) solid var(--ink);background:var(--white)}
.sg-swatch .chip{height:96px;border-bottom:var(--border) solid var(--ink)}
.sg-swatch .meta{padding:var(--space-sm) var(--space-md);font-size:15px;line-height:1.4}
.sg-swatch code{border:0;padding:0;background:none}
.sg-pair{display:inline-block;font-weight:600;padding:8px 14px;margin:0 var(--space-sm) var(--space-sm) 0;border:2px solid var(--ink)}
.sg-space{display:flex;align-items:center;gap:var(--space-md);margin-bottom:var(--space-sm)}
.sg-space i{display:block;height:20px;background:var(--accent-2)}
.sg-demo{border:2px dashed var(--line);padding:var(--space-lg);background:rgba(255,255,255,.4)}
.sg-demo.on-dark,.sg-demo.on-blue,.sg-demo.on-accent{border-color:transparent}
.sg-nav{position:sticky;top:0;z-index:10;background:var(--paper);border-bottom:var(--border) solid var(--ink)}
.sg-nav ul{list-style:none;padding:0;display:flex;gap:var(--space-sm) var(--space-lg);flex-wrap:wrap;padding:12px 0;font-size:15px;font-weight:600}
.sg-nav a{color:var(--ink)}
.sg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-md)}
.sg-grid div{background:var(--accent);border:var(--border) solid var(--ink);padding:var(--space-lg);font-weight:600;text-align:center}
.sg-type-row{display:grid;grid-template-columns:7rem 1fr;gap:var(--space-md);align-items:baseline;padding:var(--space-md) 0;border-bottom:2px solid var(--line)}
.sg-type-row>span{font-size:14px;color:var(--muted)}
.sg-note{font-size:15px;color:var(--muted);margin-top:var(--space-md)}


/* ==========================================================================
   PART 12: SMALL SCREENS
   ========================================================================== */

/* The gallery drops a column before the rest of the page changes: three
   thirds of a narrow screen is too small to see a photograph in. */
@media (max-width:1000px){.gallery{columns:2}}

@media (max-width:760px){
  body{font-size:17px}
  section{padding:var(--space-2xl) 0}
  .bar nav{margin-left:0;width:100%}
  .bar-mail{font-size:15px}
  /* Only the endpoints change; the interpolation above is untouched. A phone
     has no room for the address beside the name, so it drops to its own line
     and --bar-min grows to hold two. */
  .bar-shrink{--bar-max:168px;--bar-min:88px;--badge-max:64px;--name-max:26px;--strap-max:15px;--mail-max:16px}
  .bar-shrink .wrap{flex-wrap:wrap;align-content:center;gap:2px var(--space-md)}
  .bar-shrink .bar-mail{margin-left:0;width:100%}
  .cols{grid-template-columns:1fr;gap:40px}
  .hero{padding:48px 0 64px}
  .totop{right:16px;bottom:16px}
  .sg-grid{grid-template-columns:repeat(2,1fr)}
  .gallery{columns:1}
  .lightbox-stage{padding:12px}
  .lightbox-prev{left:8px}
  .lightbox-next{right:8px}
  .sg-type-row{grid-template-columns:1fr;gap:var(--space-xs)}
}
@media (max-width:380px){.bar .brand span{display:none}}