/* Handmade material, not aged parchment. Tile at a physical scale rather
   than stretching fibres across a whole screen. Original assets retained. */
body::before {
  background: var(--paper) url('/assets/site/lokta-paper-v2.webp') repeat center top / 820px 820px;
  opacity: .62;
}
.arrival[data-arrival] {
  background: linear-gradient(#f5f0e661, #f5f0e661),
    url('/assets/site/lokta-paper-v2.webp') repeat center / 820px 820px;
}
/* Research-led ink absorption: micro-displacement, varying pigment density
   and a feathered edge. Blend ink into the actual paper beneath it. */
.ink-definitions { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
:is(h1, h2.display, #services-heading, .experience-stat strong, .hero-role, .section-role, .hero-line) {
  text-shadow: none;
  filter: url('#ink-display');
  mix-blend-mode: multiply;
}
.intro, .field label, .hero-areas, .practice-areas, .experience-stat > span, .coverage-line, .services .eyebrow {
  text-shadow: none;
  filter: url('#ink-fine');
  mix-blend-mode: multiply;
}
.paper-ink {
  /* The per-element paper mask supersedes higher-specificity fallback rules. */
  filter: var(--paper-ink-filter, url('#ink-fine')) !important;
  text-shadow: none;
  mix-blend-mode: multiply;
}
.letter-image > .paperclip { display: none; }
/* Correspondence, not a long questionnaire. Reply channels stay optional
   and discoverable without requiring JavaScript. */
.note-form { padding: 30px 32px 24px; }
.note-kicker { margin: 0 0 20px; color: var(--accent); font-size: 22px; }
html:lang(en) .note-kicker { font-family: 'Caveat', cursive; font-size: 29px; }
.note-form .field { margin-bottom: 16px; }
.note-form .field textarea { min-height: 82px; }
.reply-details { margin: 0 0 14px; font-size: 15px; }
.reply-details summary {
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  min-height: 44px; list-style: none; cursor: pointer; color: var(--muted);
}
.reply-details summary::-webkit-details-marker { display: none; }
.reply-details summary > span { font-size: 22px; flex: 0 0 auto; }
.reply-details[open] summary > span { transform: rotate(180deg); }
.reply-details summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.reply-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-top: 10px; }
.reply-fields .field { min-width: 0; margin-bottom: 0; }
.reply-fields .field label { font-size: 14px; }
@media(max-width:480px) {
  .reply-fields { grid-template-columns: 1fr; gap: 14px; }
}
.note-form .no-reply { font-size: 12px; line-height: 1.45; margin: 0 0 12px; }
.note-form .form-status { margin: 12px 0 0; font-size: 12px; line-height: 1.45; }
.note-form .send {
  font-size: 19px; min-height: 44px; padding: 8px 0;
  background: transparent; color: var(--burgundy); border-bottom: 1px solid var(--burgundy);
}
.note-form .send .icon { filter: none; }
@media (prefers-reduced-motion: no-preference) {
  .contact-copy.reveal-visible h2 { animation: ink-settle 850ms ease-out both; }
  @keyframes ink-settle {
    from { opacity: .35; }
    to { opacity: 1; }
  }
}
@media (forced-colors: active), print {
  .paper-ink { filter: none !important; mix-blend-mode: normal; }
  :is(h1, h2.display, #services-heading, .experience-stat strong, .experience-stat > span, .coverage-line, .services .eyebrow, .hero-role, .section-role, .hero-line, .intro,
    .field label, .hero-areas, .practice-areas) {
    filter: none; mix-blend-mode: normal;
  }
}
@media (max-width: 760px) {
  body::before { background-size: 610px 610px; }
  .arrival[data-arrival] { background-size: auto, 610px 610px; }
  /* Owner correction: text remains beside the photograph, vertically centered.
     Services are always visible; no disclosure/plus control here. */
  .practice-copy > .intro, .practice-copy > .practice-areas { display: block; }
  .practice { grid-template-columns: 36% 60%; column-gap: 4%; row-gap: 16px; }
  .practice-photo { grid-column: 2; grid-row: 1; width: 100%; justify-self: end; }
  .practice-identity { grid-column: 1; grid-row: 1; text-align: left; align-self: center; padding-top: 0; }
  .practice #practice-heading { padding-top: 0; }
  .practice .section-role { margin: 12px 0 0; }
  .note-form { padding: 24px 22px 18px; }
  .note-kicker { margin-bottom: 14px; font-size: 20px; }
  .note-form .field label { font-size: 16px; }
  .reply-fields .field label { font-size: 13px; }
  .reply-details summary { font-size: 14px; }
  /* A compact keepsake stack: caption above photo, original letter clipped
     onto its lower margin. Faces and the entire scanned letter stay visible. */
  .writing-memories { gap: 0; padding: 0 4px; }
  .meeting { display: flex; flex-direction: column; width: 94%; }
  .meeting figcaption { order: -1; margin: 0 0 12px 5px; }
  .meeting .photo-frame { transform: rotate(-2.5deg); }
  /* The letter overlaps the lower photo margin. Keep the quote above that
     physical occlusion, not merely inside its own image bounds. */
  .meeting .photo-note-overlay {
    bottom: 0; padding-bottom: 50px; max-height: calc(55% + 38px);
  }
  .letter { position: relative; z-index: 2; width: 88%; margin: -22px 0 0 auto; }
  .letter-image {
    position: relative; display: block; padding: 9px;
    background: var(--frame); transform: rotate(2deg);
    box-shadow: 1px 2px 3px #49351c28, 4px 9px 13px #49351c38, 8px 18px 22px -12px #49351c50;
  }
  .letter-image > img:not(.paperclip) { display: block; width: 100%; height: auto; box-shadow: none; }
  .letter-image > .paperclip {
    display: block; position: absolute; left: 12%; right: auto; top: -23px;
    width: 20px; height: 62px; transform: rotate(14deg); z-index: 4;
    pointer-events: none; filter: drop-shadow(1.5px 2px 1px #211d1b75);
  }
  .letter figcaption { padding-left: 3px; margin-top: 16px; }
  .letter figcaption > span { font-size: 15px; }
}