/* HomeIsSecure, human redesign 2026-10-13: the brand's shared components, used by the frame, the home page and (through
   the old class names they restyle) the inner pages. Loaded after base.css, before frame.css and home.css.
   Contents: 1 document and type  2 links and focus  3 layout (wrap, 12-column grid, inset panels, textures)
   4 the kick-plate button  5 text links with an arrow  6 stamped tags  7 the dog-ear card  8 checks, icons, photos. */

/* ---------------------------------------------------------------- 1 document and type */
html, body { background: var(--white); color: var(--charcoal); }
body { font: 400 var(--t-body) / 1.55 var(--f-sans); }
h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
  font-family: var(--f-sans);
  color: inherit;
  letter-spacing: var(--track-tight);
  text-wrap: balance;
}
main h1, main h2, main h3, main h4, footer h4 { color: inherit; }
h1, .h1 { font-weight: 900; line-height: 1; }
h2, .h2 { font-weight: 800; line-height: 1.08; }
h3, .h3, h4, .h4 { font-weight: 800; line-height: 1.15; }
p { text-wrap: pretty; }
img { border-radius: 0; }
::selection { background: var(--kraft); color: var(--charcoal); }

/* ---------------------------------------------------------------- 2 links and focus
   Charcoal text with a 3 px tan underline, offset 4 px; hover: the underline turns charcoal. */
a, a:visited {
  color: var(--charcoal);
  text-decoration: underline;
  text-decoration-color: var(--tan);
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}
a:hover { color: var(--charcoal); text-decoration-color: var(--charcoal); text-decoration-thickness: 3px; }
:focus-visible { outline: 3px solid var(--charcoal); outline-offset: 3px; border-radius: 2px; }
.on-dark :focus-visible, .on-dark:focus-visible { outline-color: var(--sky); }
.on-dark a, .on-dark a:visited, .on-dark a:hover { color: var(--white); }
.on-dark a:hover { text-decoration-color: var(--white); }
.h-skip { background: var(--charcoal); color: var(--white); border-radius: 4px; }
.h-skip:visited, .h-skip:hover { color: var(--white); }

/* ---------------------------------------------------------------- 3 layout */
.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--pad));
  margin-inline: auto;
  padding-inline: var(--pad);
}
/* panels: kraft and charcoal boards inset from the viewport; their content keeps the page's left and right edges */
.panel {
  position: relative;
  isolation: isolate;
  width: calc(100% - 2 * var(--inset));
  max-width: 1400px;
  margin-inline: auto;
  border-radius: var(--panel-r);
}
.panel > .wrap {
  max-width: calc(var(--wrap) + 2 * (var(--pad) - var(--inset)));
  padding-inline: calc(var(--pad) - var(--inset));
}
.panel + .panel { margin-top: 20px; }
:root {
  /* kraft paper grain (4 %) and the canvas weave of the charcoal panels (3 %) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .14 0 0 0 0 .13 0 0 0 0 .12 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.1'/%3E%3C/svg%3E");
  --weave: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.032) 0 1px, transparent 1px 5px), repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.032) 0 1px, transparent 1px 5px);
  /* the stamp: a speckled mask that wears the edges and letters of stamped tags a little */
  --stamp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='s' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.4 2.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
  --stamp-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='s' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2 2.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
  --arrow-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224.49 136.49l-72 72a12 12 0 0 1-17-17L187 140H40a12 12 0 0 1 0-24h147l-51.49-51.52a12 12 0 0 1 17-17l72 72a12 12 0 0 1-.02 17.01z'/%3E%3C/svg%3E");
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%2324221f' d='M232.49 80.49l-128 128a12 12 0 0 1-17 0l-56-56a12 12 0 1 1 17-17L96 183 215.51 63.51a12 12 0 0 1 17 17z'/%3E%3C/svg%3E");
  /* the same tick in kraft, for charcoal check squares on kraft boards */
  --check-kraft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23e6d7bc' d='M232.49 80.49l-128 128a12 12 0 0 1-17 0l-56-56a12 12 0 1 1 17-17L96 183 215.51 63.51a12 12 0 0 1 17 17z'/%3E%3C/svg%3E");
  /* the drafting arrow of the first build's inner pages becomes the brand arrow */
  --arrow: var(--arrow-r);
}
.panel-kraft { background-color: var(--kraft); background-image: var(--grain); color: var(--charcoal); }
.panel-char { background-color: var(--charcoal); background-image: var(--weave); color: var(--white); }

/* ---------------------------------------------------------------- 4 the kick-plate button
   One button on the whole site: a tan rectangle (radius 4) on a 4 px charcoal plate. Hover: darker tan, the button
   rises 2 px onto a 6 px plate; pressed: it sinks 2 px onto a 2 px plate. Every second action is a text link (.go). */
.h-btn, .h-btn:visited {
  --plate: 4px;
  --plate-c: var(--charcoal);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  margin-bottom: 4px;
  padding: 0 26px;
  border: 0;
  border-radius: var(--btn-r);
  background: var(--tan);
  color: var(--charcoal);
  box-shadow: 0 var(--plate) 0 var(--plate-c);
  font: 700 17px / 1.1 var(--f-sans);
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transform: translateY(0);
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}
.h-btn:hover { --plate: 6px; background: var(--tan-d); color: var(--charcoal); transform: translateY(-2px); text-decoration: none; }
.h-btn:hover > span { text-decoration: none; }
.h-btn:active { --plate: 2px; transform: translateY(2px); }
.h-btn:focus-visible { outline: 3px solid var(--charcoal); outline-offset: 3px; }
.h-btn.lg { min-height: 58px; padding: 0 32px; font-size: 18px; }
.h-btn.sm { min-height: 44px; padding: 0 18px; font-size: 15px; }
.h-btn.w-100 { width: 100%; }
.h-btn .ic, .h-btn .pi { width: 18px; height: 18px; }
.h-btn:disabled, .h-btn[aria-disabled="true"] { cursor: not-allowed; opacity: 0.6; transform: none; }
/* on a charcoal panel the plate is the tan's own shadow, and focus is the sky ring */
.on-dark .h-btn { --plate-c: #7a5a30; }
.on-dark .h-btn, .on-dark .h-btn:visited, .on-dark .h-btn:hover { color: var(--charcoal); }
.on-dark .h-btn:focus-visible { outline-color: var(--sky); }
/* the first build's secondary variants stay text links */
.h-btn.outline, .h-btn.ghost-light, .h-btn.outline:visited, .h-btn.ghost-light:visited {
  min-height: 44px;
  margin: 0;
  padding: 0;
  background: none;
  box-shadow: none;
  color: var(--charcoal);
  text-decoration: underline;
  text-decoration-color: var(--tan);
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
  transform: none;
}
.h-btn.outline:hover, .h-btn.ghost-light:hover { background: none; text-decoration-color: var(--charcoal); transform: none; }

/* ---------------------------------------------------------------- 5 text links with an arrow */
.go, .go:visited, .bp-go, .bp-go:visited {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--charcoal);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--tan);
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}
.go::after, .bp-go::after {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--arrow-r) no-repeat center / contain;
  mask: var(--arrow-r) no-repeat center / contain;
  transition: transform 0.15s ease;
}
.go:hover, .bp-go:hover { color: var(--charcoal); text-decoration-color: var(--charcoal); text-decoration-thickness: 3px; }
.go:hover::after, .bp-go:hover::after { transform: translateX(3px); }
.on-dark .go, .on-dark .go:visited, .on-dark .go:hover { color: var(--white); }
.on-dark .go:hover { text-decoration-color: var(--white); }

/* ---------------------------------------------------------------- 6 stamped tags
   Small rectangles with a 1.5 px outline, Michroma uppercase, slightly inked edges; never rotated. */
.tag, a.tag, a.tag:visited {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 26px;
  padding: 5px 9px 4px 10px;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  background: none;
  color: var(--charcoal);
  font: 400 var(--t-tag) / 1.1 var(--f-tag);
  letter-spacing: var(--track-tag);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  -webkit-mask: var(--stamp) 0 0 / 150px 150px;
  mask: var(--stamp) 0 0 / 150px 150px;
}
a.tag { transition: background-color 0.15s ease, color 0.15s ease; }
a.tag:hover { background: var(--charcoal); color: var(--white); text-decoration: none; }
/* the stamp mask would also hide the focus ring (it is drawn outside the box): a focused tag is printed clean */
a.tag:focus-visible, button.tag:focus-visible { -webkit-mask: none; mask: none; }
.tag.fill { border-color: var(--tan); background: var(--tan); color: var(--charcoal); }
.tag.dark { border-color: var(--charcoal); background: var(--charcoal); color: var(--white); }
.tag.fill, .tag.dark { -webkit-mask-image: var(--stamp-soft); mask-image: var(--stamp-soft); }
.on-dark .tag, .on-dark a.tag { color: var(--kraft); }
.on-dark a.tag:hover { background: var(--kraft); color: var(--charcoal); }
.tag .pi { width: 14px; height: 14px; }
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tag-row > li { max-width: none; margin: 0; }

/* ---------------------------------------------------------------- 7 the dog-ear card
   White card (kraft on white sections), radius 6, 1 px soft border, no shadow; the top-right corner is folded over in
   tan. Hover: the fold grows to 30 px and the border turns charcoal. */
.dog {
  --f: var(--fold);
  position: relative;
  border: 1px solid var(--line-soft);
  border-radius: var(--card-r);
  background: var(--white);
  color: var(--charcoal);
  clip-path: polygon(0 0, calc(100% - var(--f)) 0, 100% var(--f), 100% 100%, 0 100%);
  transition: border-color 0.18s ease, clip-path 0.18s ease;
}
.dog::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: calc(var(--f) + 1px);
  height: calc(var(--f) + 1px);
  border-bottom-left-radius: 4px;
  background: linear-gradient(to bottom left, transparent 50%, var(--tan) 50%);
  transition: width 0.18s ease, height 0.18s ease;
  pointer-events: none;
}
.dog.kraft { background: var(--kraft); border-color: transparent; }
a.dog:hover, .dog.is-link:hover, .dog:has(a:hover), .dog:focus-within { --f: 30px; border-color: var(--charcoal); }

/* ---------------------------------------------------------------- 8 checks, icons, photos */
.ck {
  flex: none;
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 3px;
  background: var(--tan) var(--check) no-repeat center / 15px 15px;
}
.ck.sm { width: 18px; height: 18px; background-size: 12px 12px; }
.pi { display: inline-block; flex: none; width: 24px; height: 24px; fill: currentColor; vertical-align: -0.2em; }
.ph { position: relative; overflow: hidden; border-radius: var(--photo-r); background: var(--kraft); }
.ph > img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
/* the first paragraph of a section: 20 px (18 on phones), regular weight (Bootstrap's .lead is 300, too thin here) */
.lead { font-size: var(--t-lede); font-weight: 400; line-height: 1.5; }
.muted { color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .h-btn, .go::after, .bp-go::after, .dog, .dog::after, a.tag { transition: none; }
  .h-btn:hover, .h-btn:active { transform: none; }
}