/* Shared sheet components (sheet header, fields, story entries, log tables, checklist, contact slip) + About page top */

/* ─── Sheet header strip ─────────────────────────────────── */

.sheet-head {
  display: grid; grid-template-columns: 1.4fr 1fr 0.8fr 0.8fr;
  margin-top: var(--s-7);
  border: 1.5px solid var(--ink);
}
.sheet-head > div { padding: var(--s-2) var(--s-3); border-right: 1.5px solid var(--ink); }
.sheet-head > div:last-child { border-right: 0; }
.sheet-head b { display: block; font-size: 15px; font-weight: 700; font-variation-settings: "wdth" 85; }

/* ─── Top of sheet ───────────────────────────────────────── */

.top {
  display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  grid-template-areas: "title title" "facts photo";
  grid-template-rows: auto auto;
  gap: var(--s-6) var(--s-7);
  padding: var(--s-7) 0 var(--s-9);
}
.top h1 { grid-area: title; }
.top .photo { grid-area: photo; }
.top__facts { grid-area: facts; }

.top h1 {
  font-size: clamp(52px, 8.6vw, 96px);
  font-weight: 850; text-transform: uppercase;
  font-variation-settings: "wdth" 66;
  line-height: 0.86; letter-spacing: -0.01em;
}
.top h1 .under { position: relative; display: inline-block; }
.top h1 .under svg {
  position: absolute; left: -1%; bottom: -0.16em; width: 102%; height: 0.22em; overflow: visible;
}

.fields--top .value .marked { margin: 4px 0 0 10px; }
.fields--top .value .marked > svg { inset: auto; top: -7px; left: -14px; width: calc(100% + 27px); height: calc(100% + 15px); }

.oneline {
  position: relative;
  border: 1.5px solid var(--ink); border-top-width: 0;
  padding: var(--s-2) var(--s-3) var(--s-5);
}
.oneline p {
  margin-top: var(--s-2);
  font-size: clamp(21px, 2.3vw, 27px); font-weight: 500; line-height: 1.3;
  font-variation-settings: "wdth" 90; max-width: 34ch;
}
.oneline__note {
  position: absolute; right: var(--s-4); bottom: calc(-1 * var(--s-6));
  display: flex; align-items: flex-end; gap: var(--s-1);
  font-size: 21px; transform: rotate(-3deg);
}
.oneline__note svg { width: 52px; height: 40px; margin-bottom: 18px; overflow: visible; }

/* Clipped portrait */
.photo {
  position: relative; margin: var(--s-4) 0 0; justify-self: end; width: 100%; max-width: 360px;
  transform: rotate(1.6deg);
}
.photo__print {
  position: relative; aspect-ratio: 4 / 5; background: #fff; padding: 10px 10px 0;
  box-shadow: 0 1px 2px rgb(21 23 28 / 0.12), 0 14px 32px -12px rgb(21 23 28 / 0.35);
}
.photo__frame {
  position: relative; height: 100%; overflow: hidden;
  background: var(--paper-2);
  display: grid; place-items: center; text-align: center;
}
.photo__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo__empty { padding: var(--s-5); color: var(--ink-2); font-size: 13px; line-height: 1.45; }
.photo__empty b { display: block; color: var(--ink); font-size: 14px; }
.photo figcaption { padding: var(--s-2) 12px var(--s-3); background: #fff; font-size: 20px; }
.photo__clip {
  position: absolute; top: -26px; left: 22%; width: 26px; height: 64px; z-index: 2;
  transform: rotate(-4deg); color: var(--pen);
  filter: drop-shadow(0 1px 1px rgb(21 23 28 / 0.25));
}
.photo__clip--marker { color: var(--marker); }
.photo__clip--pen { color: var(--pen); }
.photo__clip--canary { color: var(--canary); }

/* ─── Story ──────────────────────────────────────────────── */

.story { padding-bottom: var(--s-9); }

.lang { display: flex; align-items: center; gap: var(--s-4); border: 0; margin: 0; padding: 0; }
.lang legend {
  float: left; margin-right: var(--s-2);
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.75;
}
.box {
  position: relative; display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 44px; cursor: pointer;
  font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.box input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.box__sq {
  position: relative; width: 20px; height: 20px; flex: none;
  border: 1.5px solid currentColor; background: transparent;
}
.bar .box__sq { background: var(--paper); border-color: var(--paper); }
.box__sq svg { position: absolute; inset: -6px; width: 30px; height: 30px; overflow: visible; }
.box__sq path { fill: none; stroke: var(--marker); stroke-width: 2.6; stroke-linecap: round; opacity: 0; }
.box input:checked + .box__sq path { opacity: 1; }
.box input:focus-visible + .box__sq { outline: 2px solid var(--paper); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .box__sq path { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .box input:checked + .box__sq path { animation: draw 0.35s var(--ease-out) forwards; }
  .box input:checked + .box__sq path + path { animation-delay: 0.15s; }
}

.entry {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  gap: var(--s-3) var(--s-7);
  padding-top: var(--s-7);
}
.entry + .entry { margin-top: var(--s-5); }
.entry__head {
  grid-column: 1 / -1;
  display: flex; align-items: baseline; gap: var(--s-4);
  border-bottom: 1.5px solid var(--ink); padding-bottom: var(--s-2);
}
.entry__head h3 {
  font-size: clamp(26px, 3.2vw, 36px); font-weight: 800; text-transform: uppercase;
  font-variation-settings: "wdth" 70; letter-spacing: 0;
}
.notes {
  display: flex; flex-direction: column; gap: var(--s-4);
  padding-top: var(--s-4); font-size: 20px; transform: rotate(-1.2deg); transform-origin: top left;
}
.notes p { max-width: 16ch; }
.notes .ul { text-decoration: underline; text-decoration-color: var(--pen); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.body { display: flex; flex-direction: column; gap: var(--s-5); padding-top: var(--s-4); max-width: 68ch; }
.body p { font-size: 17px; line-height: 1.75; }
.body h4 {
  margin-top: var(--s-3);
  font-size: 15px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}

/* Training log: a ruled table, not a stat wall */
.log { width: 100%; border-collapse: collapse; margin-top: var(--s-2); font-size: 15px; }
.log caption {
  caption-side: top; text-align: left; padding-bottom: var(--s-2);
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2);
}
.log th, .log td { border: 1.5px solid var(--ink); padding: var(--s-2) var(--s-3); text-align: left; vertical-align: baseline; }
.log th { width: 42%; font-weight: 500; color: var(--ink-2); }
.log td { font-weight: 700; font-size: 17px; font-variation-settings: "wdth" 85; }

/* Evaluator checklist */
.checklist {
  margin-top: var(--s-8);
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--s-5) var(--s-7);
  border-top: 1.5px solid var(--ink); padding-top: var(--s-5);
}
.checklist h3 {
  font-size: clamp(22px, 2.4vw, 26px); font-weight: 800; text-transform: uppercase;
  font-variation-settings: "wdth" 70;
}
.checklist ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1.5px solid var(--ink); border-left: 1.5px solid var(--ink);
}
.checklist li {
  display: flex; align-items: center; gap: var(--s-3);
  border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink);
  padding: var(--s-3); font-weight: 700; font-size: 17px; font-variation-settings: "wdth" 85;
}
.checklist li .box__sq { color: var(--ink); }
.checklist li .box__sq path { stroke: var(--marker); opacity: 1; stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
.checklist p { grid-column: 2; font-size: 18px; max-width: 52ch; }

/* ─── Contact slip (canary copy) ─────────────────────────── */

.slip {
  position: relative; background: var(--canary); color: var(--ink);
  padding: var(--s-8) 0;
}
.slip::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 0;
  border-top: 2px dashed var(--ink);
}
.slip__cut {
  position: absolute; top: -12px; left: var(--gutter); width: 24px; height: 24px;
  background: var(--canary); color: var(--ink); padding: 2px;
}
.slip__tear {
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--canary-ink); position: absolute; top: var(--s-3); right: var(--gutter);
}
.slip__grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-7) var(--s-8);
  align-items: start;
}
.slip h2 {
  font-size: clamp(48px, 7vw, 84px); font-weight: 850; text-transform: uppercase;
  font-variation-settings: "wdth" 66; line-height: 0.88; margin-bottom: var(--s-4);
}
.slip__lede { font-size: 19px; max-width: 44ch; margin-bottom: var(--s-6); }
.slip .field-label { color: var(--canary-ink); }

.form { display: grid; gap: var(--s-5); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
.input {
  width: 100%; min-height: 48px; margin-top: var(--s-1);
  font: 500 18px/1.4 var(--f-print); color: var(--ink);
  background: transparent; border: 0; border-bottom: 1.5px solid var(--ink); border-radius: 0;
  padding: var(--s-2) 0;
}
.input::placeholder { color: #5a4d00; }
.input:hover { border-bottom-color: var(--pen); }
.input:focus-visible { outline: none; border-bottom: 2.5px solid var(--pen); }
.input:user-invalid { border-bottom-color: var(--marker); }
textarea.input { resize: vertical; min-height: 132px; border: 1.5px solid var(--ink); padding: var(--s-3); margin-top: var(--s-2); }
textarea.input:focus-visible { border: 2.5px solid var(--pen); }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }
.form__hint { font-size: 14px; color: var(--canary-ink); }
.form__status { font-size: 20px; }
.form__status:empty { display: none; }

.direct { border-top: 2px solid var(--ink); }
.direct__item { border-bottom: 1.5px solid var(--ink); padding: var(--s-3) 0; }
.direct__item a {
  display: block; margin-top: var(--s-1); font-size: clamp(19px, 2.2vw, 24px); font-weight: 700;
  font-variation-settings: "wdth" 85; text-decoration: none; overflow-wrap: anywhere;
}
.direct__item a:hover { text-decoration: underline; }
.socials { list-style: none; margin: var(--s-6) 0 0; padding: 0; border-top: 1.5px solid var(--ink); }
.socials a {
  display: flex; align-items: center; justify-content: space-between; min-height: 48px;
  border-bottom: 1.5px solid var(--ink); font-weight: 600; text-decoration: none;
}
.socials a:hover { color: var(--pen); }
.socials svg { width: 16px; height: 16px; }
.next { margin-top: var(--s-6); display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* ─── Responsive ─────────────────────────────────────────── */

@media (max-width: 900px) {
  .top { grid-template-columns: 1fr; grid-template-areas: "title" "facts" "photo"; grid-template-rows: auto; padding-top: var(--s-6); }
  .photo { justify-self: center; max-width: 280px; margin: var(--s-6) auto 0; }
  .entry, .checklist { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
  .notes { gap: var(--s-1); transform: none; font-size: 19px; }
  .notes p { max-width: none; min-width: 0; }
  .checklist p { grid-column: 1; }
  .slip__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
}

@media (max-width: 640px) {
  .sheet-head { grid-template-columns: 1fr 1fr; margin-top: var(--s-5); }
  .sheet-head > div:nth-child(2) { border-right: 0; }
  .sheet-head > div:nth-child(-n+2) { border-bottom: 1.5px solid var(--ink); }
  .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fields .span-2 { grid-column: 1 / -1; }
  .fields .value { font-size: 18px; }
  .oneline__note { position: static; margin-top: var(--s-3); justify-content: flex-end; }
  .oneline__note svg { display: none; }
  .checklist ul { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .bar { padding: var(--s-3); }
  .slip__tear { display: none; }
}