/* ==========================================================================
   marshal.co.ls — each product stop dresses in its own world, the same one
   as its product page on headway.co.ls/products/:
     Schools          an exercise book: ruled paper, red margin, red pen
     CRM              a sales whiteboard: dot grid, sticky notes, marker
     Business Suite   a till receipt: thermal paper, mono type, tear-off edge
     Fields           a survey map: contours, a tick collar and coordinates
   The portal before each product stays dark; its colour flood opens onto
   the product's paper, which carries straight on into the section.
   ========================================================================== */

/* ---- tokens (same values as product-themes.css) ------------------------ */
.mk-world--schools, .mk-gate--schools .mk-gate__disc {
    --ink: #eef2f8; --ink-2: #e3e9f3; --ink-3: #d8e0ed; --paper: #e3e9f3; --paper-2: #d8e0ed;
    --text: #1b2a4a; --text-dim: #55627e; --line: rgba(27, 42, 74, .15);
    --text-ink: #1b2a4a; --text-ink-dim: #55627e; --line-ink: rgba(27, 42, 74, .15);
    --accent: #2f5bd3; --accent-ink: #fff; --p: #2f5bd3; --pi: #fff;
    --pen: #c8323c; --rule: rgba(47, 91, 211, .17);
    --display: "Literata", Georgia, serif; --sans: "Atkinson Hyperlegible", system-ui, sans-serif; --hand: "Caveat", "Segoe Print", cursive;
    --mo-card: #fff;
}
.mk-world--crm, .mk-gate--crm .mk-gate__disc {
    --ink: #f2f4f6; --ink-2: #e7eaef; --ink-3: #dde1e7; --paper: #e8ebf0; --paper-2: #dde1e7;
    --text: #15171c; --text-dim: #5a606c; --line: rgba(21, 23, 28, .13);
    --text-ink: #15171c; --text-ink-dim: #5a606c; --line-ink: rgba(21, 23, 28, .13);
    --accent: #ffd43b; --accent-ink: #15171c; --p: #2348e0; --pi: #fff;
    --marker: #2348e0; --sticky: #ffe36e;
    --display: "Archivo", system-ui, sans-serif; --sans: "Archivo", system-ui, sans-serif;
    --mo-card: #fff;
}
.mk-world--business-suite, .mk-gate--business-suite .mk-gate__disc {
    --ink: #fafaf7; --ink-2: #f0f0eb; --ink-3: #e6e6e0; --paper: #efefe9; --paper-2: #e6e6e0;
    --text: #161616; --text-dim: #5c5c57; --line: rgba(22, 22, 22, .2);
    --text-ink: #161616; --text-ink-dim: #5c5c57; --line-ink: rgba(22, 22, 22, .2);
    --accent: #0e7c46; --accent-ink: #fff; --p: #0e7c46; --pi: #fff;
    --display: "Big Shoulders Display", "Arial Narrow", sans-serif; --sans: "IBM Plex Mono", ui-monospace, monospace;
    --mo-card: #fff;
}
.mk-world--fields, .mk-gate--fields .mk-gate__disc {
    --ink: #e7ecdd; --ink-2: #dce3ce; --ink-3: #d1d9c1; --paper: #dde4cf; --paper-2: #d1d9c1;
    --text: #1f2b17; --text-dim: #55634a; --line: rgba(31, 43, 23, .17);
    --text-ink: #1f2b17; --text-ink-dim: #55634a; --line-ink: rgba(31, 43, 23, .17);
    --accent: #3f6e21; --accent-ink: #fff; --p: #3f6e21; --pi: #fff;
    --contour: #93633a;
    --display: "Barlow Condensed", "Arial Narrow", sans-serif; --sans: "Barlow", system-ui, sans-serif;
    --mo-card: #fff;
}

/* ---- paper ---------------------------------------------------------------- */
.mk-world { background-color: var(--ink); color: var(--text); font-family: var(--sans); isolation: isolate; }
.mk-gate__disc { background-color: var(--ink); color: var(--text); }
.mk-world--schools, .mk-gate--schools .mk-gate__paper { background-image: repeating-linear-gradient(to bottom, transparent 0 35px, var(--rule) 35px 36px); background-size: 100% 36px; }
.mk-world--crm, .mk-gate--crm .mk-gate__paper { background-image: radial-gradient(rgba(21, 23, 28, .16) 1px, transparent 1.3px); background-size: 28px 28px; }
.mk-world--fields, .mk-gate--fields .mk-gate__paper { background-image: url("../img/marshal/fields/contours.svg"); background-size: 1000px 1000px; }

/* the portal's flood ends on a whole tile of the pattern and the section starts
   a new one, so ruled lines, dots and contours run on without a seam */
.mk-world { background-position: center top; }
.mk-gate__paper { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-position: center bottom; will-change: transform; }

/* the red margin line runs down the exercise book */
.mk-world--schools::before, .mk-gate--schools .mk-gate__paper::after {
    content: ""; position: absolute; z-index: 0; pointer-events: none;
    top: 0; bottom: 0; left: max(8px, calc(var(--gutter) - 20px)); width: 2px; background: var(--pen); opacity: .5;
}
/* the map collar: a tick scale down the left edge */
.mk-world--fields::before {
    content: ""; position: absolute; z-index: 0; pointer-events: none; left: 0; top: 0; bottom: 0; width: 16px;
    background:
        repeating-linear-gradient(to bottom, var(--text) 0 1px, transparent 1px 120px) left / 16px 100% no-repeat,
        repeating-linear-gradient(to bottom, var(--text) 0 1px, transparent 1px 24px) left / 7px 100% no-repeat;
    opacity: .45;
}
/* the receipt tears off at the bottom, into the next portal */
.mk-world--business-suite::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 12px; pointer-events: none;
    background: linear-gradient(-45deg, #0c0d0c 6px, transparent 0), linear-gradient(45deg, #0c0d0c 6px, transparent 0);
    background-size: 12px 12px; background-position: left bottom; background-repeat: repeat-x;
}

/* ---- type ------------------------------------------------------------------ */
.mk-world .mk-band { background: transparent; color: var(--text); position: relative; }
.mk-world .mk-band__inner { position: relative; z-index: 1; }
.mk-world .mk-band__kicker, .mk-world .mk-band__lede { opacity: 1; color: var(--text-dim); }
.mk-world .mk-band__name { position: relative; color: var(--text); }
.mk-world .mk-proof { opacity: 1; }
.mk-world .mono { font-family: var(--sans); }

.mk-world--schools .mk-band__name, .mk-gate--schools .mk-gate__name { font-family: "Literata", Georgia, serif; font-weight: 600; font-variation-settings: normal; letter-spacing: -.025em; line-height: .98; }
.mk-world--crm .mk-band__name, .mk-gate--crm .mk-gate__name { font-family: "Archivo", system-ui, sans-serif; font-weight: 800; font-variation-settings: "wdth" 116; letter-spacing: -.04em; line-height: .9; }
.mk-world--business-suite .mk-band__name, .mk-gate--business-suite .mk-gate__name { font-family: "Big Shoulders Display", "Arial Narrow", sans-serif; font-weight: 900; font-variation-settings: normal; text-transform: uppercase; letter-spacing: -.005em; line-height: .86; }
.mk-world--fields .mk-band__name, .mk-gate--fields .mk-gate__name { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-weight: 700; font-variation-settings: normal; letter-spacing: -.01em; line-height: .88; }
.mk-world--schools .mk-gate__k, .mk-gate--schools .mk-gate__sub { font-family: "Atkinson Hyperlegible", system-ui, sans-serif; }
.mk-world .mk-rail-title, .mk-world .mk-slide__text h4, .mk-world .mk-feats h4, .mk-world .mk-more__link { font-variation-settings: normal; }
.mk-world--crm .mk-rail-title { font-weight: 800; font-variation-settings: "wdth" 112; }
.mk-world--business-suite .mk-rail-title, .mk-world--business-suite .mk-feats h4, .mk-world--business-suite .mk-slide__text h4 { font-weight: 900; text-transform: uppercase; letter-spacing: 0; }
.mk-world--fields .mk-rail-title { font-weight: 700; }

/* ---- buttons, frames, links ------------------------------------------------ */
.mk-world .mk-btn { background: var(--accent); color: var(--accent-ink); }
.mk-world .mk-btn::before { background: var(--text); }
.mk-world .mk-btn:hover { color: var(--ink); }
.mk-world .mk-band .btn--line:hover > span { color: var(--ink); }
.mk-world .frame { box-shadow: 0 0 0 1px var(--line), 0 34px 70px -34px color-mix(in srgb, var(--text) 40%, transparent); }
.mk-world .phone__device { box-shadow: 0 0 0 7px #23262b, 0 0 0 8px #3a3d42, 0 34px 60px -30px color-mix(in srgb, var(--text) 55%, transparent); }

/* ---- each world's own marks ------------------------------------------------ */
/* Schools: the teacher's red pen */
.mk-world--schools .mk-proof svg { color: var(--pen); }
.mk-world--schools .mk-band__name, .mk-world--crm .mk-band__name { margin-bottom: clamp(40px, 4.4vw, 60px); }
.mk-world--schools .mk-stats .stat__value { font-family: var(--hand); font-weight: 700; color: var(--pen); font-size: clamp(4.2rem, 8.4vw, 7.4rem); line-height: .8; letter-spacing: 0; display: inline-block; transform: rotate(-4deg); transform-origin: left bottom; }
.mk-world--schools .mk-slide__text .mono span { font-family: var(--hand); font-size: 22px; color: var(--pen); }

/* CRM: the next step, on a sticky note; figures in marker */
.mk-world--crm .mk-proof { gap: 14px; margin-top: 44px; }
.mk-world--crm .mk-proof li {
    max-width: 220px; padding: 14px 16px 18px; background: var(--sticky); color: var(--text);
    font-size: 15px; font-weight: 600; line-height: 1.3;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 14px 22px -14px rgba(0, 0, 0, .45);
    transform: rotate(-1.6deg);
}
.mk-world--crm .mk-proof li:nth-child(2n) { transform: rotate(1.3deg); }
.mk-world--crm .mk-proof li:nth-child(3n) { transform: rotate(-.6deg); }
.mk-world--crm .mk-proof svg { display: none; }
.mk-world--crm .mk-stats .stat__value { font-weight: 800; font-variation-settings: "wdth" 66; color: var(--marker); letter-spacing: -.03em; }

/* Business Suite: printed in mono, perforated rules */
.mk-world--business-suite { font-size: 15px; line-height: 1.6; }
.mk-world--business-suite .mono { text-transform: uppercase; letter-spacing: .06em; font-size: 12px; }
.mk-world--business-suite .mk-stats .stat__value { font-family: var(--display); font-weight: 900; letter-spacing: 0; color: var(--text); }
.mk-world--business-suite .btn { border-radius: 4px; font-family: var(--sans); text-transform: uppercase; letter-spacing: .06em; font-size: 13px; }
.mk-world--business-suite .mk-stats, .mk-world--business-suite .mk-feats { border-top-style: dashed; }
.mk-world--business-suite .mk-stats .stat + .stat, .mk-world--business-suite .mk-feats article { border-left-style: dashed; }
.mk-world--business-suite .mk-feats article { border-bottom-style: dashed; }
@media (max-width: 960px) { .mk-world--business-suite .mk-stats .stat + .stat { border-top-style: dashed; } }
.mk-world--business-suite .mk-shot { outline: 3px solid transparent; outline-offset: 4px; }
.mk-world--business-suite .mk-shot .mo-scan { top: 40px; }

/* Fields: survey green figures, contour bullets, the walked track */
.mk-world--fields .mk-stats .stat__value { font-weight: 700; color: var(--accent); letter-spacing: -.01em; }
.mk-world--fields .mk-proof svg { color: var(--contour); }
.mk-track { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: visible; }
.mk-track path { fill: none; stroke: var(--contour); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1 0; opacity: .6; }
.mk-track circle { fill: var(--accent); }
.mk-track .mk-track__ring { fill: none; stroke: var(--accent); stroke-width: 2; }
.mk-coords { position: sticky; top: calc(100svh - 40px); height: 0; z-index: 2; margin: 0; pointer-events: none; }
.mk-coords span {
    position: absolute; left: 22px; bottom: 0; writing-mode: vertical-rl; transform: rotate(180deg);
    font: 500 12px/1 var(--sans); letter-spacing: .04em; color: var(--text-dim); font-variant-numeric: tabular-nums; white-space: pre;
}
@media (max-width: 700px) { .mk-coords { display: none; } }
@media (prefers-reduced-motion: reduce) { .mk-track { display: none; } }