/* ===== AAA Martinez — shared Windows 98 shell (matches the client portal) ===== */
:root{
  --silver:#c0c0c0; --silver-hi:#dfdfdf; --silver-lo:#808080; --white:#fff; --ink:#0a0a0a;
  --navy:#000080; --navy2:#1084d0; --face:#c0c0c0;
  --ui:Tahoma,"MS Sans Serif",Geneva,Verdana,sans-serif;
  --head:"Arial Black","Arial Bold",Arial,sans-serif;
  --bevel-up: inset -1px -1px #0a0a0a, inset 1px 1px var(--white), inset -2px -2px var(--silver-lo), inset 2px 2px var(--silver-hi);
  --bevel-dn: inset 1px 1px #0a0a0a, inset -1px -1px var(--white), inset 2px 2px var(--silver-lo), inset -2px -2px var(--silver-hi);
}
*{ box-sizing:border-box; margin:0; }
html,body{ height:100%; overflow:hidden; }              /* NO SCROLL — every page is one screen */
body{ font-family:var(--ui); font-size:13px; color:var(--ink); user-select:none;
  background:radial-gradient(125% 125% at 50% 38%, #0d0d0f 0%, #000 72%); }
/* The retro pages (guestbook, leads, and the reference index/method/etc.) use
   class="desktop" — give that backdrop the same #008080 teal as the home desktop
   so nothing reads as the "old" black-background version. */
body.desktop{ background:#008080; }
a{ color:inherit; text-decoration:none; }

/* faint AAA desktop watermark */
.wm{ position:fixed; inset:0; display:grid; place-items:center; pointer-events:none; z-index:0; }
.wm b{ font-family:Georgia,"Times New Roman",serif; font-size:min(30vw,430px); font-weight:bold; color:rgba(255,255,255,.05); letter-spacing:-.04em; }

/* CRT scanlines (toggle in taskbar; on by default to match the portal) */
.crt::after{ content:""; position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:.4;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,.22) 0, rgba(0,0,0,.22) 1px, transparent 1px, transparent 3px); }

/* ===== the page window (near-maximized, floats above the taskbar) ===== */
.win{ position:fixed; top:16px; bottom:46px; left:50%; transform:translateX(-50%);
  width:min(1080px, calc(100vw - 30px)); z-index:5;
  display:flex; flex-direction:column; background:var(--face); box-shadow:var(--bevel-up); padding:3px; }
.titlebar{ display:flex; align-items:center; padding:3px 3px 3px 8px; color:#fff; font-weight:bold; font-size:12.5px;
  background:linear-gradient(90deg,var(--navy),var(--navy2)); }
.titlebar .t{ flex:1; display:flex; align-items:center; gap:8px; }
.tb-btns{ display:flex; gap:2px; }
.tb-btn{ width:19px; height:16px; display:grid; place-items:center; font-size:10px; font-weight:bold; color:#000; background:var(--face); box-shadow:var(--bevel-up); }

/* toolbar nav */
.nav{ display:flex; gap:4px; padding:5px 6px; flex-wrap:wrap; border-bottom:1px solid var(--silver-lo); box-shadow:0 1px 0 var(--white); }
.nav a{ font-size:12px; padding:5px 13px; color:#000; background:var(--face); box-shadow:var(--bevel-up); }
.nav a:hover{ color:#000; }
.nav a.on{ font-weight:bold; box-shadow:var(--bevel-dn); }

/* window body */
.win-body{ flex:1; overflow:hidden; background:var(--face); display:flex; flex-direction:column; justify-content:center; padding:clamp(20px,4vw,54px); }
.win-body.center{ align-items:center; text-align:center; }

/* status bar */
.statusbar{ display:flex; align-items:center; gap:9px; padding:3px 6px; font-size:11px; color:#303030;
  border-top:1px solid var(--white); box-shadow:inset 0 1px 0 var(--silver-lo); }
.statusbar .cell{ box-shadow:var(--bevel-dn); padding:2px 8px; }
.statusbar .grow{ flex:1; }
.blink{ animation:blink 1.1s steps(1) infinite; } @keyframes blink{ 50%{ opacity:0; } }

/* ===== typography / content ===== */
.eyebrow{ font-size:12px; font-weight:bold; letter-spacing:.02em; color:#a00; text-transform:uppercase; }
h1{ font-family:var(--head); font-weight:900; color:var(--navy); line-height:1.02; letter-spacing:-.02em;
  font-size:clamp(1.9rem,5.2vw,4rem); margin:14px 0 0; max-width:18ch; }
h2{ font-family:var(--head); font-weight:900; color:var(--navy); line-height:1.04; letter-spacing:-.015em;
  font-size:clamp(1.5rem,3.8vw,2.7rem); margin:10px 0 0; max-width:20ch; }
/* hero "business" lockup — shiny WordArt: bold word, metallic red→gold shimmer sweep */
.hl{ font-family:var(--head); font-weight:900; font-size:1.9em; line-height:.85; letter-spacing:-.01em;
  color:#aa0000; /* fallback if background-clip:text is unsupported — hero red */
  background:linear-gradient(100deg,#800000 0%,#aa0000 16%,#e05a5a 30%,#ffffff 46%,#ffffff 54%,#5566bb 70%,#000080 84%,#000066 100%);
  background-size:240% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(2px 3px 0 rgba(0,0,0,.32));
  display:inline-block; transform:rotate(-5deg); transform-origin:center bottom;
  margin:0 .05em -.16em .06em; padding:0 .06em; position:relative; z-index:3;
  animation:hlshine 3.2s linear infinite; }
@keyframes hlshine{ from{ background-position:130% center; } to{ background-position:-150% center; } }
@media(prefers-reduced-motion:reduce){ .hl{ animation:none; } }
.lead{ margin-top:20px; font-size:clamp(.95rem,1.7vw,1.15rem); color:#1c1c1c; max-width:58ch; line-height:1.55; }
.body{ margin-top:16px; font-size:clamp(.92rem,1.5vw,1.06rem); color:#1c1c1c; max-width:62ch; line-height:1.6; }
.body.sub{ color:#3a3a3a; margin-top:10px; }
.body b, .lead b{ color:#000; }
.col{ max-width:760px; }

/* buttons */
.btns{ margin-top:30px; display:flex; flex-wrap:wrap; gap:12px; }
.btn{ display:inline-flex; align-items:center; gap:8px; font-family:var(--ui); font-size:14px; font-weight:bold; color:#000;
  padding:11px 20px; background:var(--face); box-shadow:var(--bevel-up); cursor:pointer; }
.btn:active{ box-shadow:var(--bevel-dn); }
.btn-go{ color:#053d05; background:#c9e7c9; }

/* services grid */
.grid{ margin-top:26px; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; width:100%; max-width:940px; }
.cell{ background:#fff; box-shadow:var(--bevel-dn); padding:14px 15px; }
.cell b{ display:block; color:var(--navy); font-size:14px; }
.cell span{ display:block; margin-top:6px; font-size:12px; color:#333; line-height:1.45; }
@media(max-width:820px){ .grid{ grid-template-columns:repeat(2,1fr); } }

/* how-it-works steps */
.steps{ list-style:none; margin-top:22px; display:grid; grid-template-columns:1fr 1fr; gap:12px 26px; max-width:820px; }
.steps li{ display:flex; gap:12px; align-items:flex-start; }
.steps .n{ flex:none; width:26px; height:26px; display:grid; place-items:center; font-family:var(--head); color:#fff; background:var(--navy); box-shadow:var(--bevel-up); }
.steps div{ font-size:.98rem; color:#1c1c1c; } .steps b{ color:#000; }
@media(max-width:640px){ .steps{ grid-template-columns:1fr; } }

/* contact */
.mail{ display:inline-block; margin-top:22px; font-size:clamp(1.05rem,2.6vw,1.6rem); font-weight:bold; color:#0000c8; text-decoration:underline; }
.mail:hover{ color:#1084d0; }
.gb-link{ display:inline-block; margin-top:20px; font-size:13.5px; font-weight:bold; color:#0000c8; text-decoration:underline; }
.gb-link:hover{ color:#1084d0; }
.gb-link .pen{ display:inline-block; text-decoration:none; animation:blink 1.1s steps(1) infinite; }

/* ===== guestbook ===== */
.gb-body{ padding:13px clamp(14px,2.6vw,26px) 11px; justify-content:flex-start; }
.gb-intro{ font-size:12.5px; color:#2a2a2a; margin-bottom:10px; line-height:1.45; max-width:none; }
.gb-intro b{ color:#000; }
.gb{ display:grid; grid-template-columns:1.28fr .72fr; gap:18px; width:100%; flex:1; min-height:0; }
.gb-left{ display:flex; flex-direction:column; min-height:0; }
.gb-form{ flex:1; min-height:0; overflow:auto; padding-right:6px; }
.gb-grid{ display:grid; grid-template-columns:1fr 1fr; gap:9px 12px; }
.gb-field{ display:flex; flex-direction:column; gap:3px; }
.gb-field.full{ grid-column:1 / -1; }
.gb-field label{ font-size:11px; font-weight:bold; color:#000060; }
.gb-field label .req{ color:#a00; }
.gb-input,.gb-select,.gb-area{ font-family:var(--ui); font-size:12px; color:#000; background:#fff; box-shadow:var(--bevel-dn); border:0; padding:5px 7px; width:100%; }
.gb-area{ resize:none; line-height:1.4; }
.gb-form .btns{ margin-top:13px; }
/* the signatures wall */
.gb-wall{ display:flex; flex-direction:column; min-height:0; background:var(--face); box-shadow:var(--bevel-up); padding:6px; }
.gb-wall h3{ font-family:var(--head); font-size:13.5px; color:var(--navy); text-align:center; padding:3px 0 6px; }
.gb-wall-list{ flex:1; min-height:0; overflow:auto; background:#fff; box-shadow:var(--bevel-dn); padding:8px 9px; }
.gb-sig{ font-size:12px; color:#111; padding:7px 1px; border-bottom:1px dashed #d2d2d2; line-height:1.4; }
.gb-sig:last-child{ border-bottom:0; }
.gb-sig .num{ float:right; color:#aaa; font-size:10px; }
.gb-sig .who{ font-weight:bold; color:#0000a0; }
.gb-sig .whr{ color:#666; font-size:11px; }
.gb-sig .m{ display:block; margin-top:2px; color:#222; }
/* signed! confirmation */
.gb-ok{ display:none; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:10px; flex:1; min-height:0; padding:10px; }
.gb-ok h3{ font-family:var(--head); color:var(--navy); font-size:1.7rem; }
.gb-ok p{ font-size:13px; color:#222; max-width:42ch; line-height:1.55; }
.gb-ok .big{ font-size:2.4rem; }
@media(max-width:760px){ .gb{ grid-template-columns:1fr; } .gb-wall{ min-height:170px; } }

/* ===== leads console (private admin) ===== */
.lv-body{ padding:0; justify-content:flex-start; }
/* login gate */
.lv-login{ flex:1; display:flex; align-items:center; justify-content:center; }
.lv-login form{ width:min(340px,90%); background:var(--face); box-shadow:var(--bevel-up); padding:20px 22px; text-align:center; }
.lv-login .key{ font-size:2.2rem; }
.lv-login h2{ font-size:1.25rem; margin:6px 0 4px; max-width:none; }
.lv-login p{ font-size:12px; color:#444; margin-bottom:14px; }
.lv-login input{ width:100%; font-family:var(--ui); font-size:14px; background:#fff; box-shadow:var(--bevel-dn); border:0; padding:8px 9px; text-align:center; letter-spacing:.06em; }
.lv-err{ min-height:16px; margin-top:9px; font-size:12px; font-weight:bold; color:#c00; }
/* app */
.lv-app{ display:none; flex-direction:column; flex:1; min-height:0; }
.lv-toolbar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:8px 10px; border-bottom:1px solid var(--silver-lo); box-shadow:0 1px 0 var(--white); }
.lv-toolbar .tb{ font-size:12px; font-weight:bold; padding:6px 12px; color:#000; background:var(--face); box-shadow:var(--bevel-up); cursor:pointer; }
.lv-toolbar .tb:active{ box-shadow:var(--bevel-dn); }
.lv-count{ font-size:12px; font-weight:bold; color:var(--navy); padding:5px 9px; box-shadow:var(--bevel-dn); background:#fff; }
.lv-grow{ flex:1; }
.lv-filter{ font-family:var(--ui); font-size:12px; background:#fff; box-shadow:var(--bevel-dn); border:0; padding:6px 8px; width:min(220px,42vw); }
.lv-list{ flex:1; min-height:0; overflow:auto; padding:12px; background:linear-gradient(180deg,#9a9a9a,#8a8a8a); }
.lv-empty{ text-align:center; color:#eee; padding:40px 10px; font-size:14px; }
.lv-card{ background:var(--face); box-shadow:var(--bevel-up); padding:12px 13px; margin-bottom:12px; }
.lv-card:last-child{ margin-bottom:0; }
.lv-head{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; border-bottom:1px solid var(--silver-lo); box-shadow:0 1px 0 var(--white); padding-bottom:8px; margin-bottom:9px; }
.lv-head .nm{ font-family:var(--head); font-size:1.05rem; color:var(--navy); }
.lv-head .biz{ font-size:12.5px; font-weight:bold; color:#333; }
.lv-head .meta{ margin-left:auto; font-size:11px; color:#666; }
.lv-rate{ font-size:11px; font-weight:bold; padding:2px 8px; box-shadow:var(--bevel-dn); background:#fff; }
.lv-rate.hot{ background:#ffd5d5; color:#a00; } .lv-rate.warm{ background:#fff2cf; color:#7a5a00; } .lv-rate.cold{ background:#d7efd7; color:#0a5a0a; }
.lv-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px 18px; }
.lv-f{ font-size:12.5px; min-width:0; }
.lv-f.full{ grid-column:1 / -1; }
.lv-f label{ display:block; font-size:10.5px; font-weight:bold; color:#00006a; text-transform:uppercase; letter-spacing:.03em; }
.lv-f .v{ color:#161616; word-break:break-word; line-height:1.4; }
.lv-f .v a{ color:#0000c8; text-decoration:underline; }
.lv-f .v.fix{ background:#fffbe0; box-shadow:var(--bevel-dn); padding:5px 7px; margin-top:2px; }
.lv-f .muted{ color:#888; }
@media(max-width:640px){ .lv-grid{ grid-template-columns:1fr; } }

/* ===== long-form document pages (terms / privacy / refunds) =====
   The one-screen rule breaks here on purpose: policies are meant to be READ —
   the window body scrolls, and text is selectable so anyone can copy a line. */
.win-body.doc{ justify-content:flex-start; overflow-y:auto; user-select:text;
  padding:clamp(18px,3vw,40px) clamp(20px,4vw,54px); }
.doc-date{ margin-top:8px; font-size:11.5px; color:#555; }
.doc h3{ font-family:var(--head); font-weight:900; font-size:1.02rem; color:var(--navy); margin:24px 0 2px; }
.doc p, .doc li{ font-size:13px; color:#1c1c1c; line-height:1.6; max-width:74ch; }
.doc p{ margin-top:8px; }
.doc ul, .doc ol{ margin:8px 0 0 20px; }
.doc li{ margin-top:4px; }
.doc a{ color:#0000c8; text-decoration:underline; }
.doc a:hover{ color:#1084d0; }
.doc b{ color:#000; }
.doc .prices{ border-collapse:collapse; margin-top:12px; background:#fff; box-shadow:var(--bevel-dn); font-size:12.5px; }
.doc .prices th, .doc .prices td{ border:1px solid #cfcfcf; padding:5px 12px; text-align:left; }
.doc .prices th{ background:var(--face); font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:#00006a; }
.doc .callout{ margin-top:12px; background:#fffbe0; box-shadow:var(--bevel-dn); padding:9px 12px; max-width:74ch; }

/* ===== taskbar ===== */
.taskbar{ position:fixed; left:0; right:0; bottom:0; height:34px; z-index:60; display:flex; align-items:center; gap:6px; padding:0 5px;
  background:var(--face); box-shadow:inset 0 1px 0 var(--white), inset 0 2px 0 var(--silver-hi); }
.start{ display:flex; align-items:center; gap:6px; font-weight:bold; font-size:13px; padding:4px 11px; color:#000; background:var(--face); box-shadow:var(--bevel-up); cursor:pointer; }
.start:active, .start.open{ box-shadow:var(--bevel-dn); }
.tasks{ display:flex; gap:5px; flex:1; padding-left:4px; }
.task{ font-size:12px; padding:4px 12px; color:#000; background:var(--face); box-shadow:var(--bevel-dn); max-width:230px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tray-btn{ font-size:12px; padding:4px 10px; color:#000; background:var(--face); box-shadow:var(--bevel-up); cursor:pointer; }
.tray-btn.on{ box-shadow:var(--bevel-dn); }
.clock{ font-size:12px; padding:4px 11px; box-shadow:var(--bevel-dn); }

/* start menu */
.startmenu{ position:fixed; left:5px; bottom:36px; z-index:65; width:230px; display:flex; padding:3px; background:var(--face); box-shadow:var(--bevel-up); }
.startmenu[hidden]{ display:none; }
.sm-side{ width:26px; background:linear-gradient(180deg,var(--navy),#4a4a8a); display:flex; align-items:flex-end; justify-content:center; padding-bottom:8px; }
.sm-side span{ writing-mode:vertical-rl; transform:rotate(180deg); color:#fff; font-weight:bold; letter-spacing:.16em; font-size:12px; }
.sm-items{ flex:1; padding:2px; }
.sm-item{ display:flex; align-items:center; gap:10px; padding:7px 9px; font-size:13px; color:#000; }
.sm-item span{ width:18px; text-align:center; }
.sm-item:hover{ background:var(--navy); color:#fff; }
.sm-rule{ height:1px; margin:3px 2px; background:var(--silver-lo); box-shadow:0 1px 0 var(--white); }

@media(prefers-reduced-motion:reduce){ *{ animation:none !important; } }
/* tiny screens: let it breathe rather than clip */
/* left:auto is load-bearing: the desktop rule is left:50% + translateX(-50%),
   and dropping only the transform leaves the window shoved half a screen right */
@media(max-height:560px), (max-width:480px){ html,body{ overflow-x:hidden; overflow-y:auto; } .win{ position:relative; top:0; bottom:auto; left:auto; transform:none; margin:14px auto 52px; } }

/* ===== Résumé.doc — inline window body ===== */
.resume-doc{ flex:1; min-height:0; overflow:auto; user-select:text;
  background:var(--face); padding:20px 26px 26px; }
.resume-doc .rd-head{ border-bottom:2px solid var(--silver-lo);
  box-shadow:0 1px 0 var(--white); padding-bottom:12px; }
.resume-doc .rd-name{ font-family:var(--head); font-weight:900; font-size:1.7rem;
  letter-spacing:-.02em; line-height:1.05; }
.resume-doc .rd-role{ font-family:var(--head); font-size:.8rem; color:var(--navy);
  letter-spacing:.11em; text-transform:uppercase; margin-top:4px; }
.resume-doc .rd-contact{ margin-top:8px; font-size:12px; color:#333; }
.resume-doc .rd-contact a{ color:#0000c8; text-decoration:underline; }
.resume-doc .rd-sum{ margin-top:14px; font-size:13px; line-height:1.6; color:#1c1c1c; max-width:74ch; }
.resume-doc h3.rd-sec{ font-family:var(--head); font-weight:900; font-size:.76rem;
  color:var(--navy); letter-spacing:.13em; text-transform:uppercase; margin:24px 0 4px;
  border-bottom:1px solid var(--silver-lo); box-shadow:0 1px 0 var(--white); padding-bottom:4px; }
.resume-doc .rd-note{ font-size:12px; color:#3a3a3a; margin-top:8px; font-style:italic; }
.resume-doc .rd-job, .resume-doc .rd-ops{ margin-top:14px; }
.resume-doc .rd-jh{ font-size:13px; color:#1c1c1c; }
.resume-doc .rd-jh a{ color:#0000c8; text-decoration:underline; }
.resume-doc .rd-yr{ float:right; font-size:11.5px; color:#555; }
.resume-doc .rd-oh{ font-size:12.5px; font-weight:bold; color:#000; }
.resume-doc .rd-oh span{ font-weight:normal; color:#555; }
.resume-doc .rd-job p, .resume-doc .rd-ops p{ margin-top:5px; font-size:12.5px;
  line-height:1.58; color:#1c1c1c; max-width:74ch; }
.resume-doc ul{ margin:6px 0 0 18px; }
.resume-doc li{ font-size:12.5px; line-height:1.55; color:#1c1c1c; margin-top:3px; max-width:72ch; }
.resume-doc .rd-caps{ margin-top:10px; display:grid; gap:6px; }
.resume-doc .rd-caps div{ font-size:12.5px; line-height:1.5; color:#1c1c1c; }
.resume-doc .rd-caps b{ color:var(--navy); text-transform:uppercase;
  font-size:11px; letter-spacing:.06em; margin-right:6px; }
.resume-doc .rd-refs{ margin-top:22px; font-size:11.5px; color:#555;
  border-top:1px solid var(--silver-lo); box-shadow:0 -1px 0 var(--white); padding-top:10px; }
@media(max-width:640px){ .resume-doc{ padding:14px 16px 20px; }
  .resume-doc .rd-yr{ float:none; display:block; } }

/* ===== Résumé.doc — document typography =====
   The base rules the Word 97 block below builds on. The document surface is WHITE,
   not the window's grey face — the single biggest tell that you're looking at a
   DOCUMENT rather than another dialog. (In Print Layout the white moves onto
   .wd-page and this goes transparent; see the Word block further down.) The window
   chrome above it (.ie-menubar/.ie-toolbar) is period furniture that already
   existed in desktop.css from the old IE-window design and had no users left. */
.resume-doc{ background:#fff; }
/* Body copy in Times — what a résumé printed out of Word in 1998 actually looked
   like. Headings keep the site's display face so it still reads as AAA Martinez. */
.resume-doc .rd-sum,
.resume-doc .rd-job p, .resume-doc .rd-job li,
.resume-doc .rd-ops p, .resume-doc .rd-caps,
.resume-doc .rd-note, .resume-doc .rd-refs{
  font-family:"Times New Roman",Times,Georgia,serif; font-size:13.5px; }
/* The toolbar's only working control sits flush right. */
.rd-tools{ margin-left:auto; display:flex; gap:3px; }

/* ===== Résumé.doc — Microsoft Word 97 =====
   What separates Word from WordPad at a glance is furniture: a SECOND toolbar
   (formatting), a ruler, and Print Layout view — a white page with real margins
   floating on a grey canvas. WordPad had none of those; it filled the window with
   text. So the page is the thing to get right.
   The menu/standard toolbar reuse .ie-menubar/.ie-toolbar from desktop.css. */
.wd-fmtbar{ display:flex; align-items:center; gap:4px; padding:3px 5px; flex-wrap:wrap;
  box-shadow:inset 0 1px 0 var(--white), inset 0 -1px 0 var(--silver-lo); }
.wd-sel{ display:flex; align-items:center; gap:8px; background:#fff; box-shadow:var(--bevel-dn);
  padding:2px 3px 2px 5px; font-size:11px; color:#000; white-space:nowrap; }
.wd-sel .ar{ font-size:7px; padding:0 2px; background:var(--face); box-shadow:var(--bevel-up); }
.wd-sep{ width:1px; height:18px; margin:0 3px; box-shadow:1px 0 0 var(--white); background:var(--silver-lo); }
.wd-tb{ min-width:23px; justify-content:center; font-size:12px; padding:3px 6px; }
.wd-tb.on{ box-shadow:var(--bevel-dn); }

/* The ruler — tick marks every 1/8", numerals at the inches, indent markers at the
   margins. Pure decoration, but it's the single most Word-looking strip on screen. */
.wd-ruler{ height:17px; margin:3px 6px 0; background:#fff; box-shadow:var(--bevel-dn);
  position:relative; overflow:hidden; flex:none; }
.wd-ruler::before{ content:''; position:absolute; left:0; right:0; top:7px; height:3px;
  background:repeating-linear-gradient(to right,#808080 0 1px,transparent 1px 12px); }
.wd-ruler::after{ content:''; position:absolute; left:8%; right:8%; top:0; bottom:0;
  box-shadow:inset 1px 0 0 var(--silver-lo), inset -1px 0 0 var(--silver-lo); }

/* Print Layout view: grey canvas, white page, real margins, a little drop shadow. */
.wd-canvas{ flex:1; min-height:0; overflow:auto; background:#808080; padding:16px 0 24px; }
.wd-page{ width:min(94%,720px); margin:0 auto; background:#fff; border:1px solid #3a3a3a;
  box-shadow:3px 3px 0 rgba(0,0,0,.30); padding:40px 46px 46px; }
/* inside the page the doc is just content — the canvas scrolls, not the doc */
.wd-canvas .resume-doc{ background:transparent; flex:none; overflow:visible; padding:0; }
@media(max-width:640px){
  .wd-canvas{ padding:8px 0 14px; }
  .wd-page{ width:96%; padding:20px 18px 24px; }
  .wd-ruler{ display:none; }        /* no room, and nobody misses it on a phone */
}