/* ════════════════════════════════════════════════════════════════
   RSM CONSULTING · FIELD MANUAL — Vol. 01
   A printed "service manual" direction: warm paper, ink, safety
   orange, highlighter marks. Original CSS/HTML textures, no assets.
   ════════════════════════════════════════════════════════════════ */

:root{
  --paper:      #F3EDE0;   /* warm cream stock           */
  --paper-2:    #EAE2CF;   /* slightly deeper panels      */
  --paper-3:    #E2D8C1;   /* spine / inset              */
  --ink:        #201B10;   /* warm black                 */
  --ink-soft:   #5A5240;   /* muted body                 */
  --ink-faint:  #8C8370;   /* hairline-ish text          */
  --rule:       rgba(32,27,16,.22);
  --rule-soft:  rgba(32,27,16,.12);
  --accent:     #C93F14;   /* safety / field orange      */
  --accent-deep:#9C2E0B;
  --mark:       #FFE14D;   /* highlighter yellow         */
  --field:      #1F4A36;   /* deep field green (notes)   */

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Inter", system-ui, -apple-system, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  --pad:  clamp(20px, 5vw, 72px);
  --maxw: 1280px;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ── paper grain (inline SVG turbulence, no asset) ────────────── */
.grain{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

/* ── crop / registration marks in the corners ─────────────────── */
.crop{
  position:fixed; z-index:5; pointer-events:none; opacity:.85;
}
.crop::before,.crop::after{
  content:""; position:absolute; background:var(--ink); opacity:.55;
}
.crop--tl{ top:14px; left:14px; width:22px; height:22px; }
.crop--tr{ top:14px; right:14px; width:22px; height:22px; }
.crop--bl{ bottom:14px; left:14px; width:22px; height:22px; }
.crop--br{ bottom:14px; right:14px; width:22px; height:22px; }
.crop--tl::before{ width:22px; height:1px; top:0; left:0; }
.crop--tl::after{  width:1px; height:22px; top:0; left:0; }
.crop--tr::before{ width:22px; height:1px; top:0; right:0; }
.crop--tr::after{  width:1px; height:22px; top:0; right:0; }
.crop--bl::before{ width:22px; height:1px; bottom:0; left:0; }
.crop--bl::after{  width:1px; height:22px; bottom:0; left:0; }
.crop--br::before{ width:22px; height:1px; bottom:0; right:0; }
.crop--br::after{  width:1px; height:22px; bottom:0; right:0; }

.page{
  position:relative; z-index:1;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--pad);
}

/* ── type helpers ─────────────────────────────────────────────── */
.mono{ font-family:var(--mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; font-weight:500; }
em{ font-style:italic; }

/* ── buttons ──────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:13px; letter-spacing:.08em;
  text-transform:uppercase; text-decoration:none; font-weight:500;
  padding:14px 22px; border:1px solid var(--ink); cursor:pointer;
  transition:background .18s ease, color .18s ease, transform .18s ease;
  white-space:nowrap;
}
.btn span{ transition:transform .18s ease; }
.btn:hover span{ transform:translateX(4px); }
.btn--solid{ background:var(--ink); color:var(--paper); }
.btn--solid:hover{ background:var(--accent); border-color:var(--accent); }
.btn--line{ background:transparent; color:var(--ink); }
.btn--line:hover{ background:var(--ink); color:var(--paper); }

/* ── reveal (JS adds .in) ─────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ══════════ MASTHEAD ══════════ */
.masthead{
  display:flex; align-items:center; gap:32px;
  padding:26px 0 22px;
  border-bottom:2px solid var(--ink);
  position:sticky; top:0; z-index:20;
  background:var(--paper);
}
.masthead__brand{ display:flex; align-items:center; gap:12px;
  text-decoration:none; color:var(--ink); }
.masthead__mark{
  width:34px; height:34px; display:grid; place-items:center;
  background:var(--ink); color:var(--paper);
  font-family:var(--serif); font-weight:900; font-size:20px;
}
.masthead__name{ font-family:var(--serif); font-weight:700; font-size:19px; letter-spacing:.01em; }
.masthead__name em{ font-weight:400; color:var(--ink-soft); font-size:15px; }
.masthead__toc{ display:flex; gap:22px; margin-left:auto; }
.masthead__toc a{
  font-family:var(--mono); font-size:12px; letter-spacing:.06em;
  text-decoration:none; color:var(--ink-soft); text-transform:uppercase;
  position:relative; padding-bottom:4px;
}
.masthead__toc a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:var(--accent); transition:width .2s ease;
}
.masthead__toc a:hover{ color:var(--ink); }
.masthead__toc a:hover::after{ width:100%; }
.masthead__cta{ margin-left:8px; }

/* ══════════ COVER ══════════ */
.cover{ padding:72px 0 40px; position:relative; }
.cover__meta{
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  color:var(--ink-soft); padding-bottom:18px;
  border-bottom:1px solid var(--rule);
}
.stamp{
  display:inline-block;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent);
  border:1.5px solid var(--accent); padding:5px 12px;
  border-radius:999px; transform:rotate(-2deg);
}
.cover__title{
  font-family:var(--serif); font-weight:900;
  font-size:clamp(44px, 7.2vw, 96px);
  line-height:1.02; letter-spacing:-.02em;
  margin:44px 0 40px; max-width:19ch;
}
.cover__title-em{
  position:relative; white-space:nowrap;
}
.cover__title-em::after{              /* highlighter swipe */
  content:""; position:absolute; left:-.04em; right:-.04em;
  bottom:.06em; height:.42em; background:var(--mark); z-index:-1;
  transform:rotate(-1.2deg);
}
.cover__bottom{
  display:grid; grid-template-columns:1.1fr minmax(280px,auto);
  gap:48px; align-items:end; max-width:1100px;
}
.cover__lede{
  font-size:clamp(17px, 1.5vw, 20px); line-height:1.65;
  color:var(--ink); max-width:44ch;
}
.cover__lede em{ color:var(--accent-deep); font-weight:600; }
.cover__ctas{ display:flex; gap:14px; flex-wrap:wrap; }

/* ── folded inspection sheet ──────────────────────────────────── */
.sheet{
  position:relative; margin-top:56px; max-width:860px;
  background:var(--paper-2);
  border:1px solid var(--ink);
  box-shadow:10px 12px 0 rgba(32,27,16,.08);
  padding:26px 30px 30px;
}
.sheet__fold{                       /* dog-ear top-right */
  position:absolute; top:-1px; right:-1px;
  width:0; height:0;
  border-left:26px solid transparent;
  border-bottom:26px solid var(--paper);
  border-top:26px solid var(--ink);
}
.sheet__head{
  display:flex; justify-content:space-between; align-items:center;
  padding-bottom:14px; border-bottom:1px solid var(--rule);
  color:var(--ink-soft);
}
.sheet__no{ color:var(--accent-deep); }
.sheet__body{ padding-top:22px; }
.sheet__pipe{
  display:flex; gap:0; align-items:stretch; margin-bottom:24px;
}
.node{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:14px 8px; border-top:3px solid var(--rule);
  position:relative;
}
.node:not(:last-child)::after{
  content:""; position:absolute; right:-7px; top:14px; width:14px; height:0;
  border-top:2px dashed var(--ink-faint);
}
.node i{
  font-style:normal; width:30px; height:30px; display:grid; place-items:center;
  border:1.5px solid var(--ink); border-radius:50%;
  font-family:var(--mono); font-size:12px; font-weight:500;
}
.node b{ font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; font-weight:500; color:var(--ink-soft); }
.node--hot i{ background:var(--mark); border-color:var(--ink); }
.node--hot b{ color:var(--ink); }
.sheet__list{ list-style:none; display:grid; gap:10px; margin-bottom:20px; }
.sheet__list li{
  font-size:15px; display:flex; gap:12px; align-items:baseline;
  border-bottom:1px dashed var(--rule-soft); padding-bottom:10px;
}
.sheet__list .box{ color:var(--accent-deep); }
.sheet__list em{ color:var(--ink-soft); font-size:13px; }
.sheet__note{
  display:flex; gap:14px; align-items:flex-start;
  background:var(--mark); padding:14px 18px; max-width:380px;
  transform:rotate(-1deg); border:1px solid var(--ink);
}
.sheet__note-hand{ font-size:22px; line-height:1; }
.sheet__note p{ font-family:var(--serif); font-style:italic; font-size:16px; line-height:1.4; }

/* ══════════ CONTENTS ══════════ */
.contents{
  margin:56px 0 0; border:1px solid var(--ink);
}
.contents__lbl{
  display:block; padding:12px 22px; background:var(--ink);
  color:var(--paper); letter-spacing:.2em;
}
.contents a{
  display:flex; align-items:baseline; gap:18px;
  padding:14px 22px; text-decoration:none; color:var(--ink);
  border-bottom:1px solid var(--rule-soft);
  font-family:var(--sans); font-size:16px;
  transition:background .15s ease;
}
.contents a:last-child{ border-bottom:none; }
.contents a:hover{ background:var(--paper-2); }
.contents a span{ font-family:var(--mono); font-size:12px; color:var(--accent-deep); }
.contents b{ font-family:var(--mono); font-size:12px; font-weight:500; color:var(--ink-faint); }
.leader{ flex:1; border-bottom:2px dotted var(--ink-faint); margin:0 4px; }

/* ══════════ PARTS (shared) ══════════ */
.part{ padding:96px 0 24px; border-top:2px solid var(--ink); margin-top:64px; }
.part--method{ border-top:none; }
.part--check{
  background:var(--paper-2);
  border-top:2px solid var(--ink); border-bottom:2px solid var(--ink);
  margin-left:calc(-1 * var(--pad));
  margin-right:calc(-1 * var(--pad));
  padding-left:var(--pad);
  padding-right:var(--pad);
}
.part--check .part__head, .part--check .check{ max-width:var(--maxw); margin-left:auto; margin-right:auto; }

.part__head{ max-width:760px; margin-bottom:48px; }
.part__num{ color:var(--accent-deep); display:block; margin-bottom:14px; }
.part__head h2{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(32px, 4.4vw, 56px); line-height:1.05; letter-spacing:-.01em;
  margin-bottom:14px;
}
.part__head p{ font-size:17px; color:var(--ink-soft); max-width:56ch; }
.part__head p em{ color:var(--accent-deep); }

/* ── procedures (services) ────────────────────────────────────── */
.procs{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1px; background:var(--rule); border:1px solid var(--ink);
}
.proc{
  background:var(--paper); padding:30px 28px 34px;
  display:flex; flex-direction:column; gap:12px;
  transition:background .2s ease;
}
.proc:hover{ background:var(--paper-2); }
.proc__top{ display:flex; justify-content:space-between; align-items:center;
  padding-bottom:12px; border-bottom:1px solid var(--rule-soft); }
.proc__no{ font-size:26px; color:var(--accent-deep); font-weight:500; }
.proc__tag{ color:var(--ink-faint); }
.proc h3{ font-family:var(--serif); font-weight:700; font-size:26px; line-height:1.12; }
.proc h3 em{ color:var(--accent-deep); }
.proc p{ font-size:15px; color:var(--ink-soft); flex:1; }
.proc__note{ color:var(--accent-deep); font-size:11px; }

/* ── steps (method) ───────────────────────────────────────────── */
.steps{ list-style:none; display:grid; gap:0; border-top:1px solid var(--ink); }
.step{
  display:grid; grid-template-columns:120px 1fr; column-gap:36px;
  padding:30px 0; border-bottom:1px solid var(--rule);
}
.step__head{ grid-row:span 2; display:flex; flex-direction:column; gap:10px; }
.step__box{ font-size:26px; color:var(--accent-deep); line-height:1; }
.step__no{ color:var(--ink-soft); }
.step__dur{ color:var(--ink-faint); }
.step h3{ font-family:var(--serif); font-weight:700; font-size:30px; line-height:1.1; margin-bottom:8px; }
.step p{ font-size:16px; color:var(--ink-soft); max-width:60ch; }

.marginnote{
  margin:44px 0 0; padding:22px 26px; background:var(--mark);
  border:1px solid var(--ink); transform:rotate(-.6deg);
  display:flex; gap:16px; align-items:flex-start; max-width:640px;
}
.marginnote .box{ font-size:22px; color:var(--accent-deep); line-height:1; }
.marginnote p{ font-family:var(--serif); font-style:italic; font-size:19px; line-height:1.4; }
.marginnote cite{ display:block; margin-top:10px; color:var(--ink-soft); font-style:normal; }

/* ── field notes ──────────────────────────────────────────────── */
.notes{ display:grid; grid-template-columns:1fr 1fr; gap:0; border-left:1px solid var(--ink); }
.note{
  padding:28px 30px; border-right:1px solid var(--ink); border-bottom:1px solid var(--ink);
  display:flex; flex-direction:column; gap:10px;
}
.note__date{ color:var(--ink-faint); }
.note h3{ font-family:var(--serif); font-weight:600; font-size:22px; line-height:1.2; }
.note p{ font-size:15px; color:var(--ink-soft); flex:1; }
.note__go{
  font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent-deep); text-decoration:none; margin-top:6px;
}
.note__go:hover{ text-decoration:underline; }

/* ── field check ──────────────────────────────────────────────── */
.check{
  display:grid; grid-template-columns:1.3fr 1fr; gap:44px; align-items:start;
  padding-bottom:40px;
}
.check__items{ list-style:none; counter-reset:chk; display:grid; gap:0; }
.check__item{ border-bottom:1px solid var(--rule); }
.check__item::before{
  counter-increment:chk; content:"0" counter(chk);
  font-family:var(--mono); font-size:12px; color:var(--ink-faint);
  display:block; margin:18px 0 4px; letter-spacing:.1em;
}
.check__item label{
  display:flex; gap:14px; align-items:baseline; cursor:pointer;
  font-size:17px; padding-bottom:18px; user-select:none;
}
.check__item .box{ color:var(--ink-faint); font-size:20px; transition:color .15s ease; flex:none; }
.check__item.checked .box{ color:var(--accent-deep); }
.check__item.checked label{ color:var(--ink-soft); }
.check__item.checked label{ text-decoration:line-through; text-decoration-color:var(--ink-faint); }
.check__out{
  background:var(--paper); border:1px solid var(--ink);
  padding:24px 26px; box-shadow:8px 8px 0 rgba(32,27,16,.07);
  position:sticky; top:90px;
}
.check__out-lbl{ color:var(--accent-deep); display:block; margin-bottom:12px; }
.check__out p{ font-family:var(--serif); font-style:italic; font-size:18px; line-height:1.45; }

/* ══════════ FINAL VISIT ══════════ */
.visit{
  margin:64px 0 0; padding:96px 0 80px; text-align:center;
  border-top:2px solid var(--ink); position:relative;
}
.visit__kicker{ color:var(--accent-deep); }
.visit h2{
  font-family:var(--serif); font-weight:900;
  font-size:clamp(40px, 6vw, 76px); line-height:1.02; letter-spacing:-.02em;
  margin:18px 0 22px;
}
.visit__lede{ font-size:18px; color:var(--ink-soft); max-width:52ch; margin:0 auto 34px; }
.visit__btns{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.visit__fine{ margin-top:26px; color:var(--ink-faint); font-size:11px; }
.stamp--big{
  position:absolute; top:34px; right:0; font-size:13px; padding:8px 16px;
  transform:rotate(-14deg); opacity:.9;
}

/* ══════════ COLOPHON ══════════ */
.colophon{
  border-top:2px solid var(--ink); padding:56px 0 40px; margin-top:24px;
}
.colophon__grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px;
  padding-bottom:40px;
}
.colophon__brand b{ font-family:var(--serif); font-weight:700; font-size:22px; }
.colophon__brand p{ color:var(--ink-soft); font-size:14px; margin-top:10px; max-width:34ch; }
.colophon__col{ display:flex; flex-direction:column; gap:9px; }
.colophon__col span{ color:var(--accent-deep); margin-bottom:6px; }
.colophon__col a{ color:var(--ink-soft); text-decoration:none; font-size:14px; width:fit-content; }
.colophon__col a:hover{ color:var(--ink); text-decoration:underline; }
.colophon__bottom{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  border-top:1px solid var(--rule); padding-top:22px;
  color:var(--ink-faint); font-size:13px;
}

/* ── reduced motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
}

/* ══════════ RESPONSIVE ══════════ */
@media (max-width: 980px){
  .masthead__toc{ display:none; }
  .cover__bottom{ grid-template-columns:1fr; gap:28px; }
  .check{ grid-template-columns:1fr; }
  .check__out{ position:static; }
  .colophon__grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width: 560px){
  .masthead{ flex-wrap:wrap; gap:14px; }
  .masthead__cta{ margin-left:0; }
  .cover{ padding-top:44px; }
  .cover__title{ margin:34px 0 30px; }
  .cover__title-em{ white-space:normal; }
  .sheet{ padding:20px; box-shadow:6px 8px 0 rgba(32,27,16,.08); }
  .sheet__pipe{ flex-wrap:wrap; gap:8px; }
  .node{ min-width:44%; border-top:none; }
  .node:not(:last-child)::after{ display:none; }
  .notes{ grid-template-columns:1fr; }
  .step{ grid-template-columns:1fr; column-gap:0; gap:6px; }
  .step__head{ grid-row:auto; flex-direction:row; align-items:center; gap:14px; }
  .step__dur{ margin-left:auto; }
  .visit{ padding:72px 0 60px; }
  .stamp--big{ position:static; display:inline-block; margin-bottom:8px; }
  .colophon__grid{ grid-template-columns:1fr; gap:26px; }
}