.record { display: flow-root; }
.id-photo { position: relative; float: right; width: 104px; margin: 6px 4px 8px 14px; rotate: 2deg; }
.id-photo .pic { width: 100%; aspect-ratio: 35 / 45; object-fit: cover; border: 5px solid var(--bond); box-shadow: var(--shadow-paper); background: var(--bond); }
.id-photo .clip { top: -20px; left: 10px; height: 46px; }
.record .form > div, .sheet__body > .form--long > div { grid-template-columns: 1fr; row-gap: 0; }
.remarks-h { font: 600 12px/16px var(--font-printed); letter-spacing: .08em; text-transform: uppercase; color: var(--carbon); padding-bottom: 4px; border-bottom: 1px solid var(--rule); }

.req { display: grid; gap: 20px; }
.req-photo { position: relative; width: min(100%, 320px); justify-self: center; rotate: -1deg; margin-top: 26px; }
.req-photo .pic { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 60% 30%; border: 6px solid var(--bond); box-shadow: var(--shadow-paper); background: var(--manila); }
.req-photo .clip { top: -28px; left: auto; right: 26px; height: 58px; rotate: 7deg; }
.req-slip { padding: 16px 14px 18px; background: var(--flimsy); border: 1px solid var(--rule); box-shadow: var(--shadow-paper); }
.req-slip > * + * { margin-top: 14px; }
.req-slip h2 { font-size: 24px; line-height: 30px; }
.signoff { font: italic 400 16px/24px var(--font-typed); }
.note { margin-top: 28px; padding: 16px; background: var(--bond); border: 1px dashed var(--carbon-soft); }
.note > * + * { margin-top: 10px; }
.note li { margin-top: 6px; }
.js .note { display: none; }
.note:target { display: block; }

@media (min-width: 760px) {
  .id-photo { float: none; width: 200px; margin: 0; }
  .id-photo .pic { border-width: 8px; }
  .id-photo .clip { top: -36px; left: 20px; height: 88px; }
  .record { display: grid; grid-template-columns: 200px 1fr; gap: 28px; align-items: start; }
  .record .form > div, .sheet__body > .form--long > div { grid-template-columns: var(--label-col) 1fr; row-gap: 0; }
  .req { grid-template-columns: 160px 1fr; align-items: start; gap: 32px; }
  .req-photo { margin-top: 0; }
  .req-slip { padding: 24px 24px 26px; }
  .req-slip h2 { font-size: 34px; line-height: 40px; }
  .signoff { font-size: 18px; line-height: 28px; }
}
@media (max-width: 759px) { .form--slip > div { grid-template-columns: 1fr; } .req-photo { display: none; } }
@media (min-width: 480px) and (max-width: 759px) {
  .record .form > div, .sheet__body > .form--long > div { grid-template-columns: var(--label-col) 1fr; }
}