.h-license-wrap { position: relative; margin: 24px -4px 30px; }
.h-license { display: grid; position: relative; grid-template-columns: 29px minmax(0, 1fr); width: 100%; margin: 0; border: 2px solid #a7a39a; border-radius: 3px; color: var(--ink); background-color: #292e2c; background-image: radial-gradient(#d5ddd018 .7px, transparent .7px), linear-gradient(135deg, #3d423f, #252b28); background-size: 4px 4px, 100% 100%; box-shadow: 5px 7px 0 #151515, inset 0 0 0 2px #131815; }
.h-license::after { content: ""; position: absolute; inset: 5px; pointer-events: none; border: 1px solid #e4e7da40; }
.h-edge-text { display: flex; justify-content: center; align-items: center; writing-mode: vertical-rl; transform: rotate(180deg); color: #fff5f0; background: linear-gradient(90deg, #9d000c, var(--red)); font: 700 10px var(--mono); letter-spacing: 3.5px; }
.h-front-content { min-width: 0; padding: 19px 20px 23px; }
.h-card-heading { display: flex; align-items: center; gap: 12px; border-bottom: 3px double var(--red); padding-bottom: 12px; }
.h-emblem { flex: none; display: block; width: 43px; height: 39px; object-fit: contain; padding: 5px; background: #e8e5db; border: 1px solid #b7b4aa; box-shadow: 2px 2px 0 #171c18; }
.h-license-title { margin: 0; min-width: 0; color: #f3eee2; font: 900 25px/.98 Impact, "Arial Narrow", var(--sans); letter-spacing: .3px; text-shadow: 1px 2px 0 #121915; }
.h-identity { display: grid; grid-template-columns: 122px minmax(0,1fr); gap: 24px; align-items: start; padding-top: 20px; }
.h-photo-frame { display: block; min-width: 0; margin: 0; border: 1px solid #e8e5db; position: relative; background: #222824; box-shadow: 3px 3px 0 #101713; }
.h-photo { display: block; object-fit: cover; object-position: center; width: 100%; aspect-ratio: 122 / 139; }
.h-photo-caption { display: block; color: #e8e5db; text-align: center; border-top: 1px solid #e8e5db; padding: 4px; font: 9px/1.4 var(--mono); overflow-wrap: anywhere; }
.h-identification { min-width: 0; padding: 10px 12px 12px; border: 1px solid #74917d66; border-left: 2px solid var(--red); background: #24372e; box-shadow: inset 0 0 0 3px #10251c33; }
.h-small-label { display: block; color: #c5d0c6; font: 10px var(--mono); letter-spacing: 1.3px; }
.h-name { margin-top: 5px; font: 700 48px/1.14 var(--serif); letter-spacing: -1.5px; overflow-wrap: anywhere; }
.h-name.h-long-name { font-size: clamp(22px, 4.8vw, 32px); letter-spacing: -.5px; line-height: 1.3; }
.h-name-rule { height: 1px; width: 100%; background: #8caa95; margin: 13px 0 12px; }
.h-subtitle { margin: 0; color: #d6dfd4; font: 11px/1.6 var(--mono); letter-spacing: .6px; overflow-wrap: anywhere; }
.h-identity.h-no-avatar { grid-template-columns: minmax(0, 1fr); }
.h-identity.h-no-identification { grid-template-columns: minmax(0, 1fr); }
.h-no-identification .h-photo-frame { width: min(122px, 100%); }
.h-license-decoration { display: flex; justify-content: flex-end; margin-top: 16px; padding-top: 8px; border-top: 1px solid #97b09955; }
.h-interest-sheet { position: relative; margin: 0 8px; padding: 20px 23px 22px; border: 1px solid #6d6967; border-left: 2px solid #9d000c; border-top: 0; color: #e9e6e2; background-color: #252525; background-image: radial-gradient(#f0eeeb0d .7px, transparent .7px); background-size: 4px 4px; box-shadow: 4px 5px 0 #1b1b1b; }
.h-interest-sheet::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; border-top: 1px dashed #aaa59c; }
.h-interests-title { margin: 0 0 4px; padding-bottom: 11px; border-bottom: 2px solid var(--red); font: 700 28px/1.2 var(--serif); }
.h-interests { display: block; padding: 0; margin: 0; list-style: none; }
.h-interest { display: block; padding: 9px 0; border-bottom: 1px solid #716b6666; font: 13px/1.65 var(--sans); overflow-wrap: anywhere; }
.h-interest:last-child { border-bottom: 0; padding-bottom: 0; }
.h-bio { position: relative; margin: 0 0 28px; padding-left: 16px; border-left: 3px solid var(--red); }
.h-greeting { margin: 0 0 10px; font: 700 24px/1.3 var(--serif); overflow-wrap: anywhere; }
.h-bio-text { margin: 0; font: 14px/1.85 var(--sans); white-space: pre-line; overflow-wrap: anywhere; }
.h-contact { padding: 0 16px; border: 1px solid #625e5b; border-top: 3px solid var(--red); background: #252525; box-shadow: 3px 4px 0 #232323; }
.h-section-heading { padding: 15px 0 17px; }
.h-section-heading h2 { margin: 0; font: 700 21px var(--serif); }
.h-contact-label { font: 10px/1.5 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: 1px; padding-top: 2px; }
.h-barcode { display: block; width: 126px; height: 16px; max-width: 100%; border: 2px solid #e8e5db; background-color: #e8e5db; background-image: repeating-linear-gradient(90deg, #242424 0 2px, transparent 2px 4px, #242424 4px 5px, transparent 5px 9px, #242424 9px 13px, transparent 13px 15px, #242424 15px 16px, transparent 16px 21px, #242424 21px 24px, transparent 24px 27px); opacity: .75; }
.h-contact-row { display: grid; grid-template-columns: 66px minmax(0,1fr); gap: 12px; padding: 13px 0; border-top: 1px solid var(--rule); }
.h-contact-row:first-child { border-top: 0; padding-top: 0; }
.h-contact-row:last-child { padding-bottom: 18px; }
.h-contact-row.h-contact-unlabeled { grid-template-columns: minmax(0, 1fr); }
.h-contact-value { min-width: 0; width: fit-content; font: 14px/1.6 var(--sans); overflow-wrap: anywhere; }
.h-contact-value a, .h-page-footer a { color: var(--ink); text-decoration-color: var(--red); text-underline-offset: 4px; }
.h-contact-value a:hover, .h-page-footer a:hover { color: #ff545c; }
.h-contact-value a:focus-visible, .h-page-footer a:focus-visible { outline: 2px dashed var(--red); outline-offset: 5px; }
.h-page-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--rule); font: 11px var(--mono); }
.h-contact[hidden], .h-photo-frame[hidden], .h-photo-caption[hidden], .h-subtitle[hidden], .h-bio[hidden], .h-greeting[hidden], .h-interest-sheet[hidden], .h-interests-title[hidden], .h-section-heading[hidden], .h-identification[hidden], .h-name[hidden], .h-name-rule[hidden], .h-small-label[hidden], .h-license-title[hidden], .h-page-footer[hidden], .h-page-footer a[hidden] { display: none; }
@media (max-width: 480px) {
  .h-front-content { padding: 17px 15px 20px; }
  .h-card-heading { gap: 10px; padding-bottom: 11px; }
  .h-emblem { width: 34px; height: 31px; }
  .h-license-title { font-size: 21px; }
  .h-identity { grid-template-columns: 103px minmax(0,1fr); gap: 16px; padding-top: 18px; }
  .h-identification { padding: 8px 9px 10px; }
  .h-name { font-size: 39px; }
  .h-interest-sheet { padding: 18px 19px 20px; }
}
@media (max-width: 360px) {
  .h-license { grid-template-columns: 22px minmax(0,1fr); }
  .h-edge-text { font-size: 8px; letter-spacing: 3px; }
  .h-front-content { padding: 15px 12px 19px; }
  .h-emblem { width: 26px; height: 26px; padding: 3px; }
  .h-card-heading { gap: 7px; }
  .h-license-title { font-size: 18px; }
  .h-identity { grid-template-columns: 87px minmax(0,1fr); gap: 12px; }
  .h-name { font-size: 33px; }
  .h-small-label { font-size: 8px; letter-spacing: .6px; }
  .h-subtitle { font-size: 10px; }
  .h-interest-sheet { margin: 0 6px; padding: 18px 16px; }
  .h-contact { padding: 0 12px; }
  .h-contact-row { grid-template-columns: 47px minmax(0,1fr); gap: 8px; }
}