/* Shared chrome for Muster's public guide pages (/manual, /gear).
 *
 * index.html still carries its own inline copy of these tokens. That is
 * duplication and it is known: the landing page predates these, and pulling it
 * onto this sheet is a separate change with its own screenshot pass. If a token
 * moves, move it in BOTH places until that happens. */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/IBMPlexMono-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/IBMPlexMono-500.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/IBMPlexMono-700.woff2') format('woff2')}

:root{
  --paper:#F1E7CA; --paper-2:#E8DDBF; --ink:#1E1E1B; --ink-soft:#3A3B35; --label:#4B5340;
  --olive:#4B5340; --olive-deep:#3A4430; --cream-soft:#D9D3B8;
  --line:rgba(30,30,27,.2); --stamp:#8C3A2B; --maxw:52rem;
  --mono:'IBM Plex Mono','Courier Prime',ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);background-image:url('/assets/paper-tile.jpg');background-size:512px 512px;
  color:var(--ink);font-family:var(--mono);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img{max-width:100%;height:auto}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 1.2rem}

/* Header: the same TM plate the app and the landing page use. */
.gnav{border-bottom:1.5px solid var(--ink);background:rgba(241,231,202,.86);backdrop-filter:blur(6px);
  position:sticky;top:0;z-index:10}
.gnav .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:62px}
.gnav .mark{display:flex;align-items:center;gap:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:15px;text-decoration:none}
.gnav .mark img{width:30px;height:30px}
.gnav nav{display:flex;gap:1.1rem;font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.gnav nav a{text-decoration:none;color:var(--ink-soft);padding-bottom:2px}
.gnav nav a:hover,.gnav nav a[aria-current]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink)}

.ghead{padding:3.2rem 0 2.2rem;text-align:center}
.tm{font-size:13px;letter-spacing:.34em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 1rem}
h1{font-family:var(--mono);font-weight:700;text-transform:uppercase;letter-spacing:.01em;line-height:1.1;
  font-size:clamp(2rem,7vw,3.1rem);margin:0 0 .8rem}
.ghead p{margin:0 auto;max-width:34rem;color:var(--ink-soft)}

h2{font-family:var(--mono);font-weight:700;text-transform:uppercase;letter-spacing:.02em;line-height:1.18;
  font-size:clamp(1.3rem,4.4vw,1.75rem);margin:3rem 0 .3rem}
h3{font-family:var(--mono);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:1rem;margin:2rem 0 .4rem}
.rule{border:0;border-top:1.5px dotted var(--line);margin:.9rem 0 1.4rem}
p{margin:0 0 1.1rem}
.lede{font-size:1.06rem}

/* The ink box the app uses everywhere: 1.5px, 7px corners. */
.box{border:1.5px solid var(--ink);border-radius:7px;padding:1.3rem 1.35rem;margin:1.6rem 0;background:rgba(241,231,202,.5)}
.box h3{margin-top:0}
.pl{font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--label);margin:0 0 .55rem}
.stamp{display:inline-block;transform:rotate(-6deg);padding:.2rem .6rem;font-weight:700;font-size:12px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--stamp);border:2.5px solid var(--stamp);border-radius:3px;opacity:.9}

ol.steps{margin:0;padding:0;list-style:none;counter-reset:step}
ol.steps li{counter-increment:step;position:relative;padding:0 0 1.25rem 3rem;margin:0}
ol.steps li::before{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:.05rem;
  font-weight:700;font-size:13px;letter-spacing:.1em;color:var(--label);border:1.5px solid var(--line);
  border-radius:4px;padding:.12rem .38rem}
ol.steps b{display:block;text-transform:uppercase;letter-spacing:.04em;font-size:.95rem;margin-bottom:.15rem}

.btn{font-family:var(--mono);font-weight:500;font-size:15px;letter-spacing:.03em;text-transform:uppercase;
  padding:12px 22px;border-radius:8px;border:1.5px solid var(--ink);display:inline-flex;align-items:center;gap:8px;
  cursor:pointer;text-decoration:none;transition:.16s ease}
.btn-solid{background:url('/assets/grain.png') 0 0/520px 520px,var(--olive-deep);color:#F3EEDC;border-color:var(--olive-deep)}
.btn-solid:hover{transform:translateY(-1px)}

.gfoot{border-top:1.5px solid var(--ink);margin-top:4rem;padding:2rem 0 3rem;font-size:13px;
  letter-spacing:.06em;color:var(--ink-soft);text-align:center}
.gfoot a{text-decoration:none;box-shadow:inset 0 -1px 0 var(--line)}