/* from friendly-fire-department@f8a4265:site/styles.css — the chrome, page and prose rules keep FFD's
 * structure; the palette, the hero and its screen, the notice, the figures and the type are this site's.
 *
 * themallowman.com — the only stylesheet.
 *
 * Everything under site/ ships VERBATIM: tools/site/build.mjs copies this file rather than generating
 * it, so opening it tells you what the site looks like.
 *
 * ⚠️ NO PALETTE CHECK YET, AND THAT IS A GAP RATHER THAN A CHOICE. FFD prefixes its game's colours
 * --ff-* and its build fails if one is missing from the game's title screen, so the site cannot drift
 * from the game. This game has no title screen to check against, so every colour here is the site's
 * own (--site-*). When the game has one, give its colours their own prefix and port FFD's check 6.
 *
 * ⚠️ NO WEB FONTS, ON PURPOSE. The wordmark is an SVG drawn from strokes, so the one place a brand face
 * would matter needs none; everything else uses the visitor's system fonts. build.mjs fails if a font
 * file or an @font-face appears — serving a font is distributing it, and the credits page says this
 * site serves none.
 */

:root {
    --site-night-0: #060914;     /* the page's ground — the sky past the trees */
    --site-night-1: #0a0f22;     /* sections */
    --site-night-2: #111934;     /* cards and wells */
    --site-night-3: #1c2648;     /* raised edges */
    --site-rule: rgba(169, 184, 255, .12);
    --site-text: #e4ded2;        /* body: warm, like paper by firelight */
    --site-head: #fff6ea;        /* headings: warm white */
    --site-dim: #a7adc2;         /* secondary copy */
    --site-faint: #737a93;       /* the footer, the small print */
    --site-fire: #ffa54a;        /* the accent: firelight */
    --site-fire-hi: #ffc278;     /* ...hovered */
    --site-ember: #ff6f2c;       /* the hot end of the fire */
    --site-toast: #d98a3a;       /* toasted: the wordmark's outline */
    --site-moon: #a9b8ff;        /* cold light, used sparingly: the riddle's turn */
    --site-max: 44rem;
    --site-wide: 70rem;

    --site-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    /* Rounded where the platform has one (Apple's SF Rounded); a heavy system face everywhere else. */
    --site-display: ui-rounded, "SF Pro Rounded", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
    --site-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--site-night-0); }
body {
    margin: 0;
    background: var(--site-night-0);
    color: var(--site-text);
    font-family: var(--site-sans);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: var(--site-fire); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--site-fire-hi); }
:focus-visible { outline: 2px solid var(--site-fire); outline-offset: 3px; border-radius: 4px; }

img { max-width: 100%; height: auto; }

/* A hyphenated compound in a home-page fact (build.mjs wraps them): never split at the hyphen. */
.nw { white-space: nowrap; }

.skip {
    position: absolute; left: .75rem; top: -3rem; z-index: 10;
    padding: .5rem .9rem; border-radius: 8px;
    background: var(--site-fire); color: var(--site-night-0); font-weight: 700; text-decoration: none;
}
.skip:focus { top: .75rem; }

/* ---------------------------------------------------------------- chrome */

.topnav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1.5rem;
    max-width: var(--site-wide);
    margin: 0 auto;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--site-rule);
}
/* On the home page the bar floats over the hero picture rather than sitting above it. */
.home .topnav {
    position: absolute; z-index: 3; left: 0; right: 0; top: 0;
    border-bottom: 0;
}
.brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-right: auto;
    color: var(--site-head);
    text-decoration: none;
    font-family: var(--site-display);
    font-weight: 800;
    font-size: .95rem;
    letter-spacing: .08em;
}
.brand:hover { color: var(--site-head); }
.brand b { color: var(--site-fire); font-weight: inherit; }
.mark { display: block; border-radius: 8px; }
.topnav-links { display: flex; flex-wrap: wrap; gap: 1.4rem; font-size: .95rem; }
.topnav-links a { color: var(--site-dim); text-decoration: none; }
.topnav-links a:hover, .topnav-links a[aria-current="page"] { color: var(--site-fire); }

.footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
    max-width: var(--site-wide);
    margin: 5rem auto 0;
    padding: 1.5rem 1.25rem 3rem;
    border-top: 1px solid var(--site-rule);
    color: var(--site-faint);
    font-size: .85rem;
}
.footer-brand { display: flex; align-items: center; gap: .55rem; margin-right: auto; color: var(--site-dim); }
.footer-links { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer-links a { color: var(--site-faint); text-decoration: none; }
.footer-links a:hover { color: var(--site-fire); }
/* Its own row under the brand and the links, at every width. */
.footer-legal { flex-basis: 100%; margin: 0; }
.footer-legal a { color: var(--site-dim); }

/* ---------------------------------------------------------------- home: the hero */

/* ⚠️ ABOVE THE FOLD IS FOUR THINGS AND NOTHING ELSE: the wordmark, one line, the screen and the honest
   status — and all four must fit a 1440×900 laptop and a 390×844 phone without scrolling. So the screen
   is sized by the viewport's HEIGHT as well as its width (the calc() below: what is left of 100svh once
   the nav, the wordmark, the line and the status row have theirs), and the wordmark shrinks with the
   height too. Change one of those blocks' sizes and re-shoot both widths. */
/* `clip`, not `hidden`, on the page: the screen's glow and the tilted notice reach past the gutter on a
   phone, and must not give the page a sideways scroll. */
.home-main { overflow-x: hidden; overflow-x: clip; }
.hero {
    position: relative;
    isolation: isolate;
    padding: 5rem 1.25rem 0;
    text-align: center;
    background:
        radial-gradient(ellipse 70% 55% at 50% 0%, #121b40 0%, rgba(6, 9, 20, 0) 72%),
        var(--site-night-0);
}
/* A few stars, drawn rather than fetched: two dot tiles of unrelated sizes, so the repeat never lines
   up, fading out toward the screen. */
.hero::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image:
        radial-gradient(1px 1px at 23px 41px, rgba(255, 255, 255, .7), transparent),
        radial-gradient(1px 1px at 141px 17px, rgba(255, 255, 255, .5), transparent),
        radial-gradient(1.5px 1.5px at 197px 120px, rgba(255, 246, 234, .8), transparent),
        radial-gradient(1px 1px at 88px 212px, rgba(255, 255, 255, .45), transparent),
        radial-gradient(1px 1px at 342px 141px, rgba(255, 255, 255, .4), transparent),
        radial-gradient(1px 1px at 251px 233px, rgba(255, 255, 255, .5), transparent),
        radial-gradient(1px 1px at 61px 93px, rgba(169, 184, 255, .6), transparent),
        radial-gradient(1px 1px at 270px 60px, rgba(255, 255, 255, .55), transparent),
        radial-gradient(1.5px 1.5px at 410px 290px, rgba(255, 255, 255, .6), transparent),
        radial-gradient(1px 1px at 503px 22px, rgba(255, 255, 255, .45), transparent);
    background-size: 389px 263px, 389px 263px, 389px 263px, 389px 263px, 389px 263px, 389px 263px,
                     557px 331px, 557px 331px, 557px 331px, 557px 331px;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .6) 30%, transparent 55%);
    mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .6) 30%, transparent 55%);
}
.hero-inner { position: relative; z-index: 2; max-width: 50rem; margin: 0 auto; }
.wordmark { margin: 0 auto; line-height: 0; }
.wordmark img {
    width: clamp(13rem, min(27vw, 36vh), 23rem);
    width: clamp(13rem, min(27vw, 36svh), 23rem);
    height: auto;
    filter: drop-shadow(0 0 2.5rem rgba(255, 140, 50, .22));
}
/* The one line. Quiet rather than loud: it is a rumour, not a slogan. */
.hook {
    margin: .5rem auto 0;
    max-width: 30rem;
    color: #e9e2d6;
    font-family: var(--site-display);
    font-weight: 600;
    font-size: clamp(1.1rem, 1.9vw, 1.4rem);
    line-height: 1.35;
    letter-spacing: .005em;
    text-wrap: balance;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .8);
}

/* The screen: the teaser, or the still that stands in for it. Same 16:9 box either way. */
.screen {
    position: relative;
    z-index: 1;
    width: min(100%, 62rem, calc((100vh - 24.5rem) * 16 / 9));
    width: min(100%, 62rem, calc((100svh - 24.5rem) * 16 / 9));
    min-width: min(100%, 26rem);
    margin: 1.5rem auto 0;
}
/* The fire's glow, spilling out of the frame onto the night around it. */
.screen::before {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    left: -14%; right: -14%; top: 5%; bottom: -12%;
    background: radial-gradient(ellipse 50% 50% at 50% 58%, rgba(255, 128, 40, .17), rgba(255, 128, 40, 0) 72%);
}
.screen-frame {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    background: #04060d;
    box-shadow:
        0 0 0 1px rgba(255, 205, 150, .10),
        0 1.75rem 4rem -.75rem rgba(0, 0, 0, .9);
}
.screen-frame > img,
.screen-frame > video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* A soft vignette, so the frame's edges sink into the dark rather than ending at a line. */
.screen-frame::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
    box-shadow: inset 0 0 4rem .25rem rgba(2, 3, 9, .4);
}
.screen-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .55rem 1.25rem;
    margin: .85rem 0 0;
}
.screen-note { color: var(--site-faint); font-size: .78rem; letter-spacing: .02em; }
/* Sentence case on purpose: an uppercase transform turns "macOS" into "MACOS". */
.status {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .4rem .95rem;
    border: 1px solid rgba(255, 165, 74, .32);
    border-radius: 999px;
    background: rgba(10, 15, 34, .72);
    color: var(--site-text);
    font-size: .86rem;
    line-height: 1.4;
    text-align: left;
    text-wrap: balance;
}
.pip {
    flex: none;
    width: .55rem; height: .55rem; border-radius: 50%;
    background: var(--site-fire);
    box-shadow: 0 0 .6rem var(--site-ember);
    animation: flicker 2.8s ease-in-out infinite;
}
@keyframes flicker {
    0%, 100% { opacity: 1; }
    40% { opacity: .55; }
    55% { opacity: .9; }
    70% { opacity: .65; }
}
@media (prefers-reduced-motion: reduce) { .pip { animation: none; } }

/* ---------------------------------------------------------------- home: the sections */

/* ⚠️ margin-INLINE, not the `margin` shorthand: the shorthand's specificity (a class, an element and a
   :not() of a class) beat the section-spacing rule below and silently zeroed every gap. */
.home-main > section:not(.hero) {
    max-width: var(--site-wide);
    margin-inline: auto;
    padding: 0 1.25rem;
}
.home-main > section + section { margin-top: 5.5rem; }
.home-main > .hero + section { margin-top: 6.5rem; }

.home-main h2 {
    margin: 0 0 1.4rem;
    color: var(--site-head);
    font-family: var(--site-display);
    font-weight: 800;
    font-size: clamp(1.6rem, 3.6vw, 2.2rem);
    line-height: 1.15;
    letter-spacing: -.01em;
    text-wrap: balance;
}
.home-main h2::after {
    content: ""; display: block;
    width: 3rem; height: 3px; margin-top: .7rem; border-radius: 3px;
    background: linear-gradient(to right, var(--site-fire), var(--site-ember));
}
/* The riddle's second half, in the cold light rather than the warm. */
.hints-turn { color: var(--site-moon); }

/* The notice on the left, two glimpses of the night on the right; stacked on a phone. */
.hints-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
    margin-top: 2.25rem;
}
@media (min-width: 52rem) {
    .hints-grid { grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); gap: 3rem; }
}
/* One column (a tablet, a phone): the notice is pinned up in the middle, not against the left edge. */
@media (max-width: 51.99rem) {
    .notice { margin-inline: auto; }
}

/* A campground notice, pinned up and seen by flashlight: bright where the beam is, browning at the
   edges. Printed in the visitor's own serif — the site serves no fonts. */
.notice {
    position: relative;
    max-width: 30rem;
    padding: 2.1rem 1.9rem 1.5rem;
    border-radius: 3px;
    color: #2b2117;
    background:
        radial-gradient(ellipse 95% 80% at 42% 38%, rgba(255, 249, 232, .55) 0%, rgba(255, 249, 232, 0) 55%),
        radial-gradient(ellipse 120% 100% at 45% 40%, rgba(40, 26, 10, 0) 55%, rgba(40, 26, 10, .38) 100%),
        linear-gradient(170deg, #eee3c9, #e1d2b0);
    box-shadow: 0 1.5rem 3rem -1rem rgba(0, 0, 0, .85), 0 0 0 1px rgba(0, 0, 0, .3);
    transform: rotate(-1.1deg);
    font-family: ui-serif, Georgia, Cambria, "Times New Roman", serif;
}
/* The pin. */
.notice::before {
    content: ""; position: absolute; top: .7rem; left: 50%;
    width: .8rem; height: .8rem; margin-left: -.4rem; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ff9c7a, #c2381d 60%, #6d1608);
    box-shadow: 0 .2rem .3rem rgba(0, 0, 0, .45);
}
.notice-title {
    margin: 0 0 1rem;
    padding-bottom: .7rem;
    border-bottom: 2px solid rgba(43, 33, 23, .55);
    font-family: var(--site-display);
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: .16em;
    text-align: center;
    text-transform: uppercase;
}
.notice-rules {
    margin: 0;
    padding: 0 0 0 1.6rem;
    font-size: 1.02rem;
    line-height: 1.5;
}
.notice-rules li { margin: 0 0 .6rem; padding-left: .2rem; }
.notice-rules li::marker { font-weight: 700; color: #6b4a26; }
/* "Please do not feed the" … and then something sticky is smeared over the rest. Drawn, not written:
   there is no word under it to find in the source. */
.smear {
    position: relative;
    display: inline-block;
    vertical-align: -.4em;
    width: 5.4em; height: 1.5em;
    margin-left: .12em;
    /* Overlapping blobs with crisp edges rather than one shape, so the outline is lumpy and wet rather
       than a pill or a blur; two glints sit on top, and the drop shadow is what makes it read as a
       thing ON the paper. */
    background:
        radial-gradient(ellipse 9% 14% at 22% 36%, #fff 70%, rgba(255, 255, 255, 0) 100%),
        radial-gradient(ellipse 6% 9% at 47% 34%, rgba(255, 255, 255, .9) 70%, rgba(255, 255, 255, 0) 100%),
        radial-gradient(ellipse 26% 46% at 25% 52%, #fbf6ea 90%, rgba(251, 246, 234, 0) 100%),
        radial-gradient(ellipse 23% 40% at 47% 46%, #faf4e6 90%, rgba(250, 244, 230, 0) 100%),
        radial-gradient(ellipse 17% 32% at 66% 56%, #f8f1e1 90%, rgba(248, 241, 225, 0) 100%),
        radial-gradient(ellipse 9% 18% at 82% 60%, #f6eedc 88%, rgba(246, 238, 220, 0) 100%);
    filter: drop-shadow(0 .05em .06em rgba(90, 58, 18, .55)) drop-shadow(0 0 .02em rgba(90, 58, 18, .35));
    transform: rotate(-4deg);
}
/* ...and it drips. */
.smear::after {
    content: ""; position: absolute; left: 30%; top: 72%;
    width: .38em; height: .72em;
    border-radius: 45% 45% 50% 50% / 25% 25% 75% 75%;
    background: #f9f2e3;
}
.notice-foot {
    margin: 1rem 0 0;
    padding-top: .65rem;
    border-top: 1px solid rgba(43, 33, 23, .3);
    font-size: .9rem;
    font-style: italic;
    text-align: right;
    color: #4a3a28;
}

/* Two glimpses, cropped tall from 16:9 engine frames; the note under them spans both. */
.glimpses {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 1.25rem;
}
.shot { margin: 0; padding: 0; }
.shot img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border: 1px solid var(--site-rule);
    border-radius: 12px;
    background: var(--site-night-2);
}
/* The lantern frame keeps the food locker's sign in the crop; the fir stays centred in the beam. */
.glimpses .shot:nth-child(1) img { object-position: 42% 50%; }
.glimpses .shot:nth-child(2) img { object-position: 56% 50%; }
.shot figcaption {
    margin-top: .6rem;
    color: var(--site-dim);
    font-size: .88rem;
    line-height: 1.5;
}
.shot figcaption b { color: var(--site-fire); font-weight: 700; }

.tone-row {
    display: grid;
    gap: 1rem 2.5rem;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    margin-top: 3.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--site-rule);
}
.tone-row p { margin: 0; color: var(--site-dim); }
.tone-row strong { color: var(--site-head); }

.kama p { max-width: var(--site-max); margin: 0; font-size: 1.08rem; }

.cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.card {
    display: block;
    padding: 1.3rem 1.4rem;
    border: 1px solid var(--site-rule);
    border-radius: 16px;
    background: var(--site-night-1);
    color: var(--site-text);
    text-decoration: none;
    transition: border-color .15s, background-color .15s;
}
.card:hover { border-color: rgba(255, 165, 74, .5); background: var(--site-night-2); color: var(--site-text); }
.home-main .card h2 { margin: 0 0 .4rem; font-size: 1.12rem; }
.home-main .card h2::after { display: none; }
.card p { margin: 0; color: var(--site-dim); font-size: .95rem; }

/* ---------------------------------------------------------------- pages */

.doc-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
    max-width: var(--site-wide);
    margin: 0 auto;
    padding: 3rem 1.25rem 0;
}
@media (min-width: 62rem) {
    .doc-wrap { grid-template-columns: minmax(0, 1fr) 14rem; }
}

.prose { max-width: var(--site-max); min-width: 0; }
.prose h1 {
    margin: 0 0 1.5rem;
    color: var(--site-head);
    font-family: var(--site-display);
    font-weight: 800;
    font-size: clamp(2rem, 5vw, 2.7rem);
    line-height: 1.12;
    letter-spacing: -.01em;
}
.prose h2 {
    margin: 2.75rem 0 .75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--site-rule);
    color: var(--site-head);
    font-family: var(--site-display);
    font-size: 1.4rem;
    line-height: 1.25;
}
.prose h3 { margin: 2rem 0 .5rem; color: var(--site-head); font-size: 1.1rem; }
.prose strong { color: var(--site-head); }
.prose ol, .prose ul { padding-left: 1.3rem; }
.prose li { margin: .35rem 0; }
.prose li::marker { color: var(--site-fire); }
.prose blockquote {
    margin: 1.5rem 0;
    padding: .2rem 0 .2rem 1.1rem;
    border-left: 3px solid var(--site-toast);
    color: var(--site-dim);
}

.anchor {
    margin-left: .4rem;
    color: var(--site-faint);
    text-decoration: none;
    opacity: 0;
    font-weight: 400;
}
h2:hover .anchor, h3:hover .anchor, .anchor:focus-visible { opacity: 1; }

.prose code {
    font-family: var(--site-mono);
    font-size: .88em;
    background: var(--site-night-2);
    border: 1px solid var(--site-rule);
    border-radius: 4px;
    padding: .08em .35em;
}
pre.code {
    background: var(--site-night-2);
    border: 1px solid var(--site-rule);
    border-left: 3px solid var(--site-toast);
    border-radius: 0 8px 8px 0;
    padding: .9rem 1rem;
    overflow-x: auto;
}
pre.code code { background: none; border: 0; padding: 0; font-size: .88rem; }

.prose table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; font-size: .94rem; }
.prose th, .prose td {
    text-align: left;
    padding: .55rem .75rem;
    border-bottom: 1px solid var(--site-rule);
    vertical-align: top;
}
.prose th { color: var(--site-dim); font-weight: 600; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }
/* The tables are the one thing that genuinely needs to escape the prose column on a phone. */
.prose > table { display: block; overflow-x: auto; }

.toc { position: sticky; top: 1.5rem; align-self: start; font-size: .87rem; }
@media (max-width: 61.99rem) { .toc { display: none; } }
.toc-title { margin: 0 0 .5rem; color: var(--site-faint); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; }
.toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--site-rule); }
.toc li { margin: 0; }
.toc a { display: block; padding: .22rem 0 .22rem .85rem; color: var(--site-dim); text-decoration: none; }
.toc a:hover { color: var(--site-fire); }
.toc .d3 a { padding-left: 1.7rem; color: var(--site-faint); }

.page { max-width: var(--site-max); margin: 0 auto; padding: 5rem 1.25rem 0; }
.page h1 { color: var(--site-head); font-family: var(--site-display); font-weight: 800; font-size: 2.4rem; margin: 0 0 1rem; }
.page .lede { color: var(--site-dim); }

/* ---------------------------------------------------------------- phones */

@media (max-width: 40rem) {
    body { font-size: 16px; }
    .topnav { padding: .85rem 1rem; gap: .5rem 1rem; }
    .brand { font-size: .85rem; letter-spacing: .06em; }
    .topnav-links { gap: 1rem; font-size: .9rem; }
    .hero { padding: 5rem 1rem 0; }
    .wordmark img { width: 17rem; }
    .screen { margin-top: 1.4rem; }
    .screen-frame { border-radius: 10px; }
    .screen-frame::after { box-shadow: inset 0 0 3rem .25rem rgba(2, 3, 9, .5); }
    .screen-meta { flex-direction: column; justify-content: center; margin-top: 1rem; }
    .status { font-size: .84rem; }
    .home-main > section:not(.hero) { padding: 0 1rem; }
    .home-main > section + section { margin-top: 4rem; }
    .home-main > .hero + section { margin-top: 4.5rem; }
    .hints-grid { gap: 2.25rem; margin-top: 1.75rem; }
    .notice { padding: 1.9rem 1.25rem 1.25rem; transform: rotate(-.7deg); }
    .notice-rules { padding-left: 1.4rem; font-size: 1rem; }
    .glimpses { gap: 1rem .85rem; }
    .shot figcaption { font-size: .82rem; }
    .doc-wrap { padding: 2rem 1rem 0; }
    .footer { padding: 1.5rem 1rem 2.5rem; }
}