/* ==========================================================================
   Paden Brand System v1.1, shared across every page: tokens, type, the glass
   masthead with its progress strip, buttons, footer, grain and glass. Page
   files (home.css, article.css) load after this and only add their own parts.

   Oat and espresso, muted signal colours, Fraunces for headlines and numbers,
   Inter for reading, sentence case. The four signal colours appear together
   only in the progress strip. One visual world on purpose: the brand is a
   light oat identity, so pages paint their own grounds rather than following
   the viewer's theme.
   ========================================================================== */
:root{
  --oat:#F3EDE1; --paper:#FBF8F2; --deep:#E6DAC5; --esp:#241B14;
  --ink:#221C16; --mid:#716B63; --rule:rgba(34,28,22,.14); --rule-2:rgba(34,28,22,.24);
  --rust:#C75635; --mustard:#E1A74D; --teal:#1472A2; --sage:#5C8864;
  --on-dark:#FBF8F2; --on-dark-mid:rgba(251,248,242,.72); --on-dark-rule:rgba(251,248,242,.16);
  --d:'Fraunces',Georgia,'Times New Roman',serif;
  --t:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --wrap:1120px; --gut:clamp(20px,5vw,48px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:72px}
body{margin:0;background:var(--oat);color:var(--ink);font:17px/1.6 var(--t);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
h1,h2,h3{font-family:var(--d);font-weight:600;letter-spacing:-.02em;margin:0;text-wrap:balance}
.label{font:600 13px/1.3 var(--t);letter-spacing:.04em;color:var(--mid)}
.u{box-shadow:inset 0 -.2em 0 var(--mustard)}   /* the one emphasis on light grounds */
.y{color:var(--mustard)}                         /* the one emphasis on dark grounds */
.arrow{width:14px;height:14px;flex:none;transition:transform .15s}

/* masthead */
.masthead{position:sticky;top:0;z-index:20;background:rgba(243,237,225,.9);backdrop-filter:blur(10px) saturate(1.2);transition:box-shadow .25s}
.masthead__in{max-width:var(--wrap);margin:0 auto;padding:14px var(--gut);display:flex;align-items:center;justify-content:space-between;gap:20px}
.wordmark{display:flex;align-items:center;gap:10px;text-decoration:none;font:600 19px/1 var(--d);letter-spacing:-.015em}
.wordmark img{width:28px;height:28px}
.mhnav{display:flex;gap:clamp(20px,3.4vw,40px)}
.mhnav a{font:600 14px var(--t);color:var(--mid);text-decoration:none;padding:4px 0;border-bottom:2px solid transparent}
.mhnav a:hover{color:var(--ink);border-color:var(--mustard)}
.mhnav a[aria-current="page"]{color:var(--ink);border-color:var(--mustard)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font:600 15px/1 var(--t);text-decoration:none;padding:15px 22px;border-radius:999px;border:1.5px solid transparent}
.btn--fill{background:var(--mustard);color:var(--esp)}
.btn--line{border-color:var(--on-dark-rule);color:var(--on-dark)}
.btn--line:hover{border-color:var(--on-dark)}
.btn:hover .arrow{transform:translateX(3px)}

/* footer */
.foot{border-top:1px solid var(--rule);padding:28px 0 64px}
.foot__in{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font:600 14px var(--t);color:var(--mid)}
.foot nav{display:flex;gap:20px;flex-wrap:wrap}
.foot a{text-decoration:none} .foot a:hover{color:var(--ink)}

/* the progress strip: pinned under the masthead as its bottom edge, one
   segment per section, the current section filling as you read it. The only
   place on the page all four signal colours appear together. */
.progress{display:flex;gap:2px;height:3px}
.progress i{flex:1;position:relative;overflow:hidden;background:rgba(34,28,22,.10)}
.progress b{position:absolute;inset:0;transform-origin:left;transform:scaleX(var(--f,0))}
.progress i:nth-child(4n+1) b{background:var(--rust)} .progress i:nth-child(4n+2) b{background:var(--mustard)}
.progress i:nth-child(4n+3) b{background:var(--teal)} .progress i:nth-child(4n+4) b{background:var(--sage)}

@media (max-width:600px){
  .wordmark span{display:none}
  .mhnav{gap:16px} .mhnav a{font-size:13.5px}
}
/* narrow phones: "Job board" is long, so the nav tightens to keep one line */
@media (max-width:400px){ .mhnav{gap:12px} .mhnav a{font-size:13px} }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .arrow{transition:none} }

/* ==========================================================================
   Web layer. The brand system's flat rules (square corners, no shadows, no
   gradients) are written for carousel slides. On the site: rounded corners,
   frosted glass over soft colour, paper grain and a faint dot grid. Each
   section takes one signal colour, the web version of "one signal colour per
   slide". Everything below is additive: delete this block to return to the
   flat, square look.
   ========================================================================== */
:root{
  --grain-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .14 0 0 0 0 .11 0 0 0 0 .08 0 0 0 .30 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .97 0 0 0 0 .92 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --r-sm:12px; --r-md:18px; --r-lg:28px;
  --glass:rgba(251,248,242,.58); --glass-edge:rgba(255,255,255,.72);
  --sh-1:0 1px 2px rgba(36,27,20,.05),0 10px 24px -10px rgba(36,27,20,.16);
  --sh-2:0 2px 6px rgba(36,27,20,.06),0 24px 48px -16px rgba(36,27,20,.26);
  --sh-3:0 40px 90px -40px rgba(36,27,20,.6);
}
html{scroll-padding-top:96px}
body{background:var(--grain-dark) 0 0/200px 200px,var(--oat)}

/* the masthead floats as a rounded glass bar; the strip runs along its edge */
.masthead{top:12px;margin:12px auto 0;width:min(calc(100% - 24px),1180px);border-radius:var(--r-md);overflow:hidden;
  background:rgba(251,248,242,.66);border:1px solid var(--glass-edge);backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.masthead.is-scrolled{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 18px 40px -20px rgba(36,27,20,.45)}
.masthead__in{padding:12px 20px}
.wordmark img{border-radius:8px}

.btn--fill{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 10px 26px -10px rgba(225,167,77,.8);transition:transform .2s,box-shadow .2s}
.btn--fill:hover{transform:translateY(-1px)}
.btn--line{background:rgba(251,248,242,.06);backdrop-filter:blur(8px)}
@media (prefers-reduced-motion:reduce){ .btn--fill{transition:none} .btn--fill:hover{transform:none} }
@media (max-width:600px){ .masthead__in{padding:10px 14px} }

/* hero dots, on any section marked data-dots: a static grid in CSS, replaced by
   the live canvas once brand.js runs. The hero's content sits above the canvas. */
[data-dots]::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(rgba(251,248,242,.10) 1px,transparent 1.3px) 0 0/22px 22px}
[data-dots].dots-live::before{display:none}
.hero__dots{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;pointer-events:none}
[data-dots] > :not(.hero__dots){position:relative;z-index:1}

/* the community's rating, shown wherever we ask someone to join */
.stars{display:inline-flex;align-items:center;gap:8px;font:600 13px var(--t);color:var(--mid)}
.stars i{font-style:normal;letter-spacing:1.5px;color:var(--mustard)}