/* Show headshot as-is: remove any masks/overlays/blending */
.headshot::after{ content: none !important; }
.headshot img{
  mix-blend-mode: normal !important;
  -webkit-mask: none !important;
  -webkit-mask-image: none !important;
  mask: none !important;
  mask-image: none !important;
  opacity: 1 !important;
  filter: none !important;
}

/* Social logos row below closing link */
.social-logos{
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
}

/* Pull the paper to the very top and remove the built-in first-section gap */
.container{ margin: 0 auto !important; padding-top: 0 !important; }
.container > section:first-of-type{ margin-top: 0 !important; }

/* Reduce space between sections by ~15% */
.container section{ margin-top: 13px !important; }
.container section:first-of-type{ margin-top: 32px !important; }
.container section + section{ padding-top: 6px !important; }

/* Let paragraphs and lists span the full paper width */
.container :where(p, ul, ol){ max-width: 100% !important; }

.social-logos a{ display: inline-flex; }

.social-logos img{
  height: 28px;
  width: auto;
  display: block;
}

/* Header enhancements */
.field-onepager{
  font-family: 'Dancing Script', cursive;
  font-size: 25.3px;
  line-height: 1.1;
  color: navy;
  margin-top: 4px;
}

/* Signature location line below typed name */
.location-coords{
  color: #2b2b2b; /* graphite black */
  font-size: 13.8px;
  margin-top: 2px;
}

/* Hand-drawn-like underline that follows each wrapped line */
.hand-underline{
  font-family: "Courier Prime", Courier, "Courier New", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  text-decoration: none; /* we'll draw our own */
  background-repeat: no-repeat;
  background-position: left bottom; /* anchor stroke at the line bottom */
  background-size: 100% 4px; /* closer to text */
  padding-bottom: 3px; /* small gap under text */
  /* ensure the background renders per wrapped line */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  /* near-straight handmade stroke using current text color */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 12' preserveAspectRatio='none'><path d='M3 8 L40 7.6 L78 8.3 L120 7.7 L170 8.1 L220 7.5 L270 8.2 L320 7.7 L397 8' fill='none' stroke='currentColor' stroke-opacity='0.55' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* Variant: handmade underline in oxblood without changing text color */
.hand-underline-oxblood{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 12' preserveAspectRatio='none'><path d='M3 8 L40 7.6 L78 8.3 L120 7.7 L170 8.1 L220 7.5 L270 8.2 L320 7.7 L397 8' fill='none' stroke='%237b1113' stroke-opacity='0.68' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* Handwritten accents */
.hand-note{
  font-family: 'Caveat', 'Segoe Script', cursive;
  font-size: 1.196rem; /* slightly larger */
  letter-spacing: 0.025em;
  line-height: 1.1;
  color: #7b1113; /* oxblood */
}

.hand-note-black{
  font-family: 'Caveat', 'Segoe Script', cursive;
  font-size: 1.196rem; /* slightly larger */
  letter-spacing: 0.025em;
  line-height: 1.1;
  color: #2b2b2b; /* graphite black */
}

.hand-note-plus{ display:inline-block; transform: translateY(2px) rotate(-6deg); }

/* Highlighter effect that wraps across lines */
.highlight-yellow{
  padding: 0 .18em;
  border-radius: 6px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0) 65%),
    linear-gradient(180deg, rgba(255,239,137,0.96) 15%, rgba(255,229,94,0.9) 55%, rgba(255,220,82,0.82) 100%),
    repeating-linear-gradient(180deg, rgba(209,170,52,0.26) 0 10px, transparent 10px 18px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/></filter><rect width='50' height='120' filter='url(%23n)' opacity='0.22'/></svg>");
  background-size: 100% 100%, 100% 100%, 100% 60%, 140% 100%;
  background-position: 0 0, 0 0, 0 12%, 0 0;
  background-blend-mode: screen, multiply, multiply, multiply;
  box-shadow: inset 0 -1px 0 rgba(201,160,28,0.35), inset 0 1px 0 rgba(255,255,255,0.45);
}




/* Hand-drawn circle around inline text in oxblood */
.circle-oxblood{
  position: relative;
  display: inline-block;
  padding: 0.2em 0.28em 0.1em; /* tighter sides, slight vertical */
  z-index: 0;           /* create stacking context */
  isolation: isolate;   /* keep ::after behind only this text */
}
.circle-oxblood::after{
  content: "";
  position: absolute;
  inset: -0.78em -0.45em -0.78em -0.45em; /* bigger and closer to circular */
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center; /* center the ring around the text */
  background-size: 100% 100%; /* scale ring to box */
  z-index: -1; /* place behind the text */
  mix-blend-mode: multiply;
  /* hand-drawn circle (scales to ellipse as needed, but with round ends) */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M50 5 a45 45 0 1 1 0 90 a45 45 0 1 1 0 -90' fill='none' stroke='%237b1113' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' opacity='0.82'/></svg>");
}

/* Small taped matte photo, angled slightly */
.taped-photo{
  display: inline-block;
  position: relative;
  background: #fdf7e6; /* aged matte, warmer */
  /* thicker bottom border like old Polaroids */
  padding: 8px 8px 18px 8px;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 3px;
  /* soft drop + slight inner emboss */
  box-shadow: 0 8px 14px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.06) inset, 0 2px 0 rgba(255,255,255,0.9) inset;
  /* subtle paper texture */
  background-image:
    linear-gradient(0deg, rgba(246,225,140,0.18), rgba(246,225,140,0.10) 60%, transparent 100%),
    radial-gradient(140% 120% at 12% 108%, rgba(170,140,60,0.14) 0%, rgba(255,255,255,0) 62%),
    radial-gradient(120% 100% at 84% 102%, rgba(160,120,50,0.10) 0%, rgba(255,255,255,0) 58%),
    repeating-linear-gradient(135deg, rgba(0,0,0,0.035) 0 1px, transparent 1px 6px);
  margin-left: 10px;
  margin-top: 4px;
  transform: rotate(-2deg);
  vertical-align: middle;
}
.taped-photo.small{ width: 120px; }
.taped-photo img{
  width: 100%; height: auto; display: block;
  /* slight aging and softness */
  filter: contrast(0.94) saturate(0.92) brightness(0.98);
  position: relative; z-index: 1;
}
.taped-photo::before{
  /* stains and inner catch shadow on the matte (below content and tape) */
  content: "";
  position: absolute; inset: 0; pointer-events: none; border-radius: 3px;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.18'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='160' viewBox='0 0 320 160'><g opacity='.5' stroke='rgba(150,120,60,.35)' fill='none' stroke-width='8'><path d='M60,140c50,-60 160,-60 210,0'/></g></svg>"),
    radial-gradient(180px 80px at 15% 88%, rgba(143,113,62,0.12), transparent 60%),
    radial-gradient(120px 60px at 85% 92%, rgba(120,90,50,0.10), transparent 60%),
    radial-gradient(60px 26px at 50% 14%, rgba(0,0,0,0.10), transparent 60%);
  mix-blend-mode: multiply;
  opacity: .75;
  z-index: 0;
}
.taped-photo::after{
  /* masking tape above the photo */
  content: "";
  position: absolute;
  top: -12px; left: 50%; transform: translateX(-50%) rotate(-4deg);
  width: 130%; height: 22px; border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(233,210,125,0.95), rgba(212,189,105,0.95)),
    linear-gradient(120deg, rgba(255,255,255,0.28), rgba(0,0,0,0.10)),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='34' viewBox='0 0 320 34'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.18'/></svg>");
  background-blend-mode: multiply, soft-light, normal;
  clip-path: polygon(2% 10%, 98% 0%, 100% 88%, 0% 100%);
  box-shadow: 0 3px 4px rgba(0,0,0,0.20);
  opacity: 0.95;
  pointer-events: none;
  z-index: 3;
}

/* Headshot + stamp stacking on right */
.headshot-stack{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.headshot-stamp{
  width: 140px;
  height: auto;
  display: block;
  transform: rotate(-3deg);
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.15));
}
.headshot{ margin-top: 10px; }

/* Ensure text and photo stack never overlap and scale text responsively */
.signature-block{
  grid-template-columns: minmax(0,1fr) auto !important; /* keep photos on the right */
  align-items: start;
  column-gap: clamp(12px, 3vw, 24px);
}
.signature-text{ min-width: 0; }
.headshot-stack{ width: clamp(95.2px, 23.8vw, 193.8px); justify-self: end; align-self: start; }

/* On narrower screens, stack vertically so they never collide */
/* Keep two columns even on phones; just scale photos */
@media (max-width: 900px){
  .signature-block{ grid-template-columns: minmax(0,1fr) minmax(110px, 28vw) !important; }
  .headshot-stack{ justify-self: end; margin-top: 0; }
}

/* Let the large handwritten lines wrap and scale down on small screens */
@media (max-width: 780px){
  .signature-handwritten .write{ 
    white-space: normal !important; /* allow wrap to avoid overlap */
    font-size: clamp(29.9px, 10.58vw, 82.8px) !important;
    letter-spacing: 0.2px;
  }
  .signature-handwritten .write:nth-of-type(2){
    font-size: clamp(27.6px, 9.89vw, 75.9px) !important;
  }
  .field-onepager{ font-size: clamp(18.4px, 4.37vw, 25.3px); }
}

/* Hard override base mobile rule that stacked to one column */
@media (max-width: 480px){
  .signature-block{ grid-template-columns: minmax(0,1fr) minmax(100px, 32vw) !important; }
  .headshot img{ width: 100% !important; height: auto !important; }
  .headshot-stamp{ width: 85%; max-width: 160px; height: auto; }
}

/* Keep off-duty list and photo aligned */
#field-off-duty{ position: relative; }
.field-off-duty__grid{
  display: grid;
  grid-template-columns: minmax(0,1fr) clamp(140px, 34vw, 240px);
  gap: clamp(18px, 4vw, 32px);
  align-items: start;
}
.field-off-duty__list{
  grid-column: 1;
  padding: 0 0 0 1.1em;
  margin: 0;
}
.field-off-duty__dog{
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-self: center;
  align-self: start;
}
.field-off-duty__dog .taped-photo{
  width: clamp(160px, 34vw, 240px);
  margin: clamp(60px, 9vw, 120px) 0 0;
  transform: none;
}
.field-off-duty__dog .taped-photo img{ width: 100%; height: auto; display: block; }
.field-off-duty__dog-text{
  margin: clamp(12px, 3vw, 24px) 0 0;
  max-width: clamp(160px, 30vw, 220px);
  font-size: 1.0925em;
  line-height: 1.35;
  text-align: left;
  position: relative;
  padding-left: 1.2em;
}
.field-off-duty__dog-text::before{
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
}

@media (max-width: 540px){
  .field-off-duty__grid{
    grid-template-columns: minmax(0,1fr);
    gap: clamp(4px, 2vw, 12px);
  }
  .field-off-duty__dog{
    grid-column: 1;
    align-items: center;
    justify-self: center;
  }
  .field-off-duty__dog .taped-photo{
    width: clamp(190px, 62vw, 280px);
    margin: clamp(4px, 2vw, 12px) auto clamp(2px, 1.5vw, 8px);
  }
  .field-off-duty__dog-text{
    max-width: min(32ch, 90vw);
    margin: 0 auto;
    padding-left: 1.4em;
  }
}


@media (max-width: 500px){
  .field-off-duty__dog .taped-photo{
    width: clamp(133px, calc(52.5vw - 24.5px), 238px);
  }
}

@media (max-width: 300px){
  .field-off-duty__dog .taped-photo{
    width: 133px;
  }
}

/* Top grid: dossier left, headshot right */
.top-grid{
  display: grid;
  grid-template-columns: minmax(0, clamp(208px, 78vw, 832px)) minmax(0, clamp(93.5px, 32.3vw, 221px));
  align-items: start;
  justify-content: center;
  gap: clamp(14px, 2.4vw, 28px);
  margin-bottom: clamp(16px, 2.2vw, 28px);
}
.file-header{ display:flex; justify-content:center; align-items:flex-start; }
.dossier-shot{ width: clamp(208px, 78vw, 532px); height:auto; display:block; box-shadow: 0 18px 46px rgba(0,0,0,0.18), 0 4px 14px rgba(0,0,0,0.12); border-radius: 6px; }
.header-portrait{
  justify-self:end;
  align-self:start;
  width: 100%;
  min-width: 0;
  margin-top: clamp(-16px, -1.8vw, -6px);
}
.headshot-top{ width: 100%; margin: 0; transform: translateY(1%); }
.headshot-top img{ width: clamp(102px, 32.3vw, 204px); height: auto; display: block; }

@media (max-width: 560px){
  .top-grid{ gap: clamp(10px, 4vw, 18px); }
  .dossier-shot{ width: clamp(208px, 75.4vw, 546px); }
  .headshot-top img{ width: clamp(89.25px, 28.9vw, 178.5px); }
}

/* Field header image */
.file-header{ margin-top: 0; margin-bottom: clamp(12px, 3vw, 20px); }
.pencil-note{ color: #5a5a5a; font-family: 'Caveat', 'Segoe Script', cursive; }
.bic-blue{ color: #0E47A1; }
.oxblood{ color: #7b1113; }



/* Make link underlines blue while keeping link text color inherited */
a{ color: inherit; text-decoration-color: #0E47A1; }
a:hover{ text-decoration-color: #0B3A8C; }
/* Enforce (and set the color via shorthand) so it wins over any previous shorthand uses */
.container a[href]{
  color: inherit !important;
  text-decoration: underline !important;
  text-decoration-color: #0E47A1 !important;
  text-decoration-thickness: 0.09em !important;
  text-underline-offset: 0.12em !important;
}
.container a[href]:hover, .container a[href]:focus{
  text-decoration: underline dotted !important;
  text-decoration-color: #0B3A8C !important;
}

/* Let the container grow with large displays */
@media (min-width: 1000px){
  .container{
    width: max(80vw, 1000px);
    max-width: none;
  }
}

@media (max-width: 420px){
  .field-off-duty__grid{
    gap: clamp(2px, 1.8vw, 10px);
  }
  .field-off-duty__dog .taped-photo{
    margin: clamp(2px, 1.8vw, 10px) auto clamp(2px, 1vw, 6px);
  }
}