/* ======================================================================
   Provenance Record — Tacettin Sertkaya
   A career set as an object's chain of custody.
   Palette and type measured off .impeccable/mocks/comp-2-vertical-ledger-real.png
   ====================================================================== */


/* ---- faces, self-hosted so a blocked CDN cannot collapse the voice ---- */

@font-face {
  font-family: 'Abhaya Libre';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/abhayalibre-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Abhaya Libre';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/abhayalibre-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Buenard';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/buenard-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Buenard';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/buenard-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Buenard';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/buenard-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Buenard';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/buenard-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Port Lligat Slab';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/portlligatslab-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Port Lligat Slab';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/portlligatslab-400-tr.woff2') format('woff2');
  unicode-range: U+c7, U+cf, U+d6, U+dc, U+e7, U+f6, U+fc, U+10a-10b, U+11e-123, U+12c, U+130-131, U+14e-14f, U+15e-15f, U+16c-16d, U+22e-22f, U+306-308, U+327, U+1e60-1e61;
}

:root {
  --paper:      #cab796;
  --paper-deep: #b8a17c;
  --ink:        #15110e;
  --ink-soft:   #3b332a;
  --seal:       #4e0b0c;
  --seal-lift:  #7d1a18;
  --rule:       #8b7860;
  --rule-fine:  #a8977b;
  --muted:      #4f4537;
  --inferred:   #38454c;

  --sheet-max:  1599px;
  --rail-w:     16.37%;

  /* the four column starts the whole sheet registers to */
  --col-custody: 16.33%;
  --col-dates:   18.62%;
  --col-body:    41.23%;
  --col-meta:    23.81%;

  /* faces ranked from the comp's own pixels by impeccable font-match */
  --face-display: 'Abhaya Libre', Georgia, 'Times New Roman', serif;
  --face-slab:    'Port Lligat Slab', Georgia, 'Times New Roman', serif;
  --face-text:    'Buenard', Georgia, 'Times New Roman', serif;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* the whole sheet scales as one document: 16px at the comp's 1344 width */
  font-size: clamp(12.2px, 1.1905vw, 19px);
}

body {
  margin: 0;
  background-color: var(--paper);
  background-image: url("assets/plates/paper-texture.png");
  background-repeat: repeat;
  background-size: 16.75rem 18.75rem;
  color: var(--ink);
  font-family: var(--face-text);
  font-size: 1.0625rem;
  line-height: 1.4;
  font-variant-numeric: lining-nums tabular-nums;
}

::selection { background: var(--seal); color: #efe3c8; }

:focus-visible { outline: 0.125rem solid var(--seal); outline-offset: 0.1875rem; }

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.1875rem;
  text-decoration-color: var(--rule);
  transition: text-decoration-color 160ms var(--ease), color 160ms var(--ease);
}

a:hover { color: var(--seal); text-decoration-color: var(--seal); }

h1, h2, h3, p, dl, dd, dt, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }

.vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 20;
  padding: 0.7rem 1.1rem;
  background: var(--seal);
  color: #efe3c8;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
}

.skip:focus { left: 0; }

.skip:hover,
.skip:focus { color: #efe3c8; text-decoration-color: #efe3c8; }

/* ======================================================================
   The sheet
   ====================================================================== */

.sheet {
  position: relative;
  width: 100%;
  max-width: var(--sheet-max);
  margin: 0 auto;
  overflow-x: clip;
}

.plate {
  position: absolute;
  display: block;
  pointer-events: none;
  user-select: none;
}

.plate--ribbon {
  left: 90%;
  top: 0;
  width: 10%;
  height: 47.14rem;
  object-fit: cover;
  object-position: right top;
  filter: drop-shadow(-7px 0.6875rem 0.625rem rgba(21, 17, 14, 0.24));
  z-index: 3;
}

.plate--stamp {
  left: 2.23%;
  top: 21.125rem;
  width: 11.46%;
  height: 10.875rem;
  object-fit: contain;
  opacity: 0.74;
  z-index: 1;
}

/* ---- language ------------------------------------------------------- */

.pane { display: grid; grid-template-columns: var(--rail-w) 1fr; }

.pane > * { min-width: 0; }

:root[data-lang="en"] [data-pane="tr"],
:root[data-lang="tr"] [data-pane="en"] { display: none; }

.langswitch {
  position: absolute;
  left: 7%;
  bottom: 9.5rem;
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
}

.langswitch__btn {
  appearance: none;
  border: 0;
  background: none;
  padding: 0.25rem 0.1rem;
  font-family: var(--face-text);
  font-size: 0.6875rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  transition: color 160ms var(--ease);
}

.langswitch__btn:hover { color: var(--ink); }

.langswitch__btn.is-on {
  color: var(--seal);
  box-shadow: inset 0 -2px 0 var(--seal);
}

.langswitch__sep { font-size: 0.6875rem; color: var(--rule); }

/* ======================================================================
   The ledger rail
   ====================================================================== */

.rail {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  min-height: 35rem;
  z-index: 2;
}

.rail__entry {
  padding: 0 7% 1rem 7%;
  border-bottom: 1px solid var(--rule-fine);
}

.rail__entry:first-child { padding-top: 2rem; }
.rail__entry + .rail__entry { padding-top: 1.05rem; }

.rail__label,
.rail__foot-place {
  font-family: var(--face-text);
  font-size: 0.6875rem;
  line-height: 1.2;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
}

.rail__value {
  margin: 0.5rem 0 0;
  max-width: 10.9375rem;
  font-family: var(--face-text);
  font-size: 1.375rem;
  line-height: 1.3;
  color: var(--ink);
}

.rail__value--record { letter-spacing: 0.06em; }

.rail__foot {
  position: absolute;
  left: 0;
  bottom: 2.5%;
  width: 100%;
  padding: 0 7%;
}

.rail__foot-place {
  display: block;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule-fine);
  letter-spacing: 0.2em;
}

.rail__foot-mail {
  display: inline-block;
  margin-top: 0.45rem;
  font-size: 0.8125rem;
  line-height: 1.3;
  word-break: break-all;
}

/* ======================================================================
   Main sheet
   ====================================================================== */

.sheet__main {
  border-left: 1px solid var(--rule);
  margin-left: -1px;
  padding: 0 3.4% 0 0.6%;
}

.masthead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  padding: 0.85rem 4.6% 0.4rem 0;
  border-top: 1px solid var(--seal);
  border-bottom: 1px solid var(--seal);
  margin-top: 0.6rem;
}

.masthead__name {
  padding-left: 1.0625rem;
  font-family: var(--face-display);
  font-weight: 400;
  font-size: 1.875rem;
  line-height: 1;
  letter-spacing: 0.108em;
  text-transform: uppercase;
  color: var(--ink);
}

.masthead__standfirst {
  max-width: 26ch;
  font-family: var(--face-text);
  font-style: italic;
  font-size: 1.125rem;
  line-height: 1.35;
  text-align: right;
  color: var(--ink);
}

/* ======================================================================
   The record — the first viewport
   ====================================================================== */

.entry {
  display: grid;
  grid-template-columns: var(--col-custody) var(--col-dates) var(--col-body) var(--col-meta);
  align-items: start;
  min-height: 8.39rem;
  padding: 1.3rem 0 0.2rem;
  border-bottom: 1px solid var(--rule-fine);
}

.entry__custody {
  position: relative;
  align-self: stretch;
  padding-right: 4.1rem;
  text-align: right;
}

.entry__status {
  display: inline-block;
  font-size: 0.6875rem;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--seal);
}

.entry--distributed .entry__status { color: var(--inferred); }

.entry__custody::before {
  content: "";
  position: absolute;
  right: 2.6rem;
  top: -1.3rem;
  bottom: -0.2rem;
  width: 0.1875rem;
  background: var(--seal);
}

.entry--distributed .entry__custody::before {
  width: 0;
  border-left: 0.1875rem dashed var(--inferred);
  background: none;
}

.entry__custody::after {
  content: "";
  position: absolute;
  right: 2.2rem;
  top: -0.3rem;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--seal);
}

.entry:last-child .entry__custody::before { bottom: -0.2rem; }

.entry--distributed .entry__custody::after {
  background: var(--paper);
  border: 0.1875rem solid var(--inferred);
}

.entry__dates {
  font-family: var(--face-slab);
  font-size: 1.3125rem;
  line-height: 1.1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}

.entry__body { padding-right: 1.2rem; }

.entry__org {
  font-family: var(--face-slab);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.05;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}

.entry__place {
  margin-top: 0.3rem;
  font-size: 0.6875rem;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.entry__note {
  margin-top: 0.55rem;
  max-width: 62ch;
  font-size: 1.0625rem;
  line-height: 1.2;
  color: var(--ink-soft);
}

.entry__figure {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--face-slab);
  font-size: 2.8125rem;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
}

.tilde {
  font-family: var(--face-text);
  font-size: 0.86em;
  padding-right: 0.02em;
}

.entry__figure-label {
  display: block;
  margin-top: 0.55rem;
  font-size: 0.6875rem;
  line-height: 1.2;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--muted);
}

/* ---- custody legend -------------------------------------------------- */

.legend {
  display: grid;
  grid-template-columns: var(--col-custody) 1fr;
  align-items: baseline;
  padding: 1.5rem 0 2.4rem;
}

.legend__head {
  padding-right: 4.1rem;
  text-align: right;
  font-family: var(--face-text);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.legend__item { grid-column: 2; }

.legend__item {
  grid-column: 2;
  position: relative;
  padding-left: 2.6rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.legend__item + .legend__item { margin-top: 0.35rem; }

.legend__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 1.8rem;
  height: 0.1875rem;
  background: var(--seal);
}

.legend__item--dist::before {
  height: 0;
  background: none;
  border-top: 0.1875rem dashed var(--inferred);
}

.legend__key {
  display: inline-block;
  min-width: 8.5rem;
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
}

/* ======================================================================
   Bands below the record
   ====================================================================== */

.band { padding-top: 2.6rem; }

.band--record { padding-top: 0; }

.band--close { padding-bottom: 6.5rem; }

.band__head {
  display: grid;
  grid-template-columns: var(--col-custody) 1fr;
  align-items: end;
  gap: 0 0;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--seal);
}

/* the printer's registration mark, struck in the margin where each band opens */
.band__head { position: relative; }

.band__head::before,
.band__head::after {
  content: "";
  position: absolute;
  left: -2.7rem;
  background: var(--seal);
}

.band__head::before { top: 0.85rem; width: 0.85rem; height: 2px; }
.band__head::after  { top: 0.43rem; left: -2.35rem; width: 2px; height: 0.85rem; }

.band__title {
  grid-column: 1 / -1;
  padding-left: 1.0625rem;
  font-family: var(--face-display);
  font-weight: 400;
  font-size: 3.625rem;
  line-height: 0.95;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--seal);
}

.band__intro {
  grid-column: 2;
  margin-top: 0.8rem;
  max-width: 46ch;
  font-size: 1.125rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

/* ---- works ----------------------------------------------------------- */

.work {
  display: grid;
  grid-template-columns: var(--col-custody) var(--col-dates) var(--col-body) var(--col-meta);
  align-items: start;
  padding: 1.3rem 0 1.15rem;
  border-bottom: 1px solid var(--rule-fine);
}

.work__years {
  grid-column: 2;
  font-family: var(--face-slab);
  font-size: 1.3125rem;
  line-height: 1.1;
  letter-spacing: 0.06em;
  color: var(--ink);
  white-space: nowrap;
}

.work__body { grid-column: 3; padding-right: 1.2rem; }

.work__name {
  font-family: var(--face-slab);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.15;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}

.work__for {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--face-text);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  color: var(--muted);
}

.work__note {
  margin-top: 0.55rem;
  max-width: 58ch;
  font-size: 1.0625rem;
  line-height: 1.35;
  color: var(--ink-soft);
}

.work__meta { grid-column: 4; }

.work__stack {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.work__link {
  display: inline-block;
  margin-top: 0.7rem;
  font-family: var(--face-slab);
  font-size: 1.0625rem;
  letter-spacing: 0.02em;
  color: var(--seal);
  text-decoration-color: var(--seal-lift);
}

.work__link--none {
  color: var(--muted);
  font-style: italic;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.6875rem;
  font-family: var(--face-text);
}

/* ---- materials ------------------------------------------------------- */

.materials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.1rem 2.4rem;
  padding: 1.8rem 0 0.6rem 0;
  margin-left: var(--col-custody);
}

.material__head {
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--face-text);
  font-weight: 400;
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
}

.material__list {
  margin-top: 0.7rem;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.material__list li { padding: 0.2rem 0; }
.material__list li + li { border-top: 1px solid rgba(139, 120, 96, 0.3); }

/* ---- provenance ------------------------------------------------------ */

.provenance {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 24rem));
  gap: 0 4rem;
  padding: 1.8rem 0 0.6rem 0;
  margin-left: var(--col-custody);
}

.provenance__head {
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--face-text);
  font-weight: 400;
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
}

.provenance__years {
  margin-top: 0.9rem;
  font-family: var(--face-slab);
  font-size: 1.3125rem;
  letter-spacing: 0.06em;
  color: var(--ink);
}

.provenance__name {
  margin-top: 0.55rem;
  font-family: var(--face-slab);
  font-size: 1.25rem;
  line-height: 1.15;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}

.provenance__name--second { margin-top: 1.5rem; }

.provenance__note {
  margin-top: 0.4rem;
  max-width: 40ch;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--ink-soft);
}

/* ---- the close ------------------------------------------------------- */

.close {
  padding: 2rem 0 0;
  margin-left: var(--col-custody);
}

.close__mail {
  display: inline-block;
  font-family: var(--face-slab);
  font-size: 2.5rem;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--seal);
  text-decoration-color: var(--rule);
}

.close__tel {
  margin-top: 0.8rem;
  font-family: var(--face-slab);
  font-size: 1.3125rem;
  letter-spacing: 0.06em;
}

.close__where {
  margin-top: 0.5rem;
  font-size: 1rem;
  color: var(--ink-soft);
}

.contact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 27rem));
  gap: 0 3.5rem;
  margin-top: 2.2rem;
  border-top: 1px solid var(--rule);
}

.contact li {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule-fine);
}

.contact__key {
  flex: 0 0 7rem;
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.contact__val { font-size: 1rem; overflow-wrap: anywhere; }

.close__stamp {
  margin-top: 2.2rem;
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.close { position: relative; }

.plate--close-stamp {
  position: static;
  display: block;
  width: 8.5rem;
  height: 8.5rem;
  margin: 1.4rem 0 0 auto;
  object-fit: contain;
  opacity: 0.5;
  transform: rotate(-11deg);
}

/* ======================================================================
   Print — recruiters save pages as PDF
   ====================================================================== */

@media print {
  body { background: #fff; color: #000; }
  .plate--ribbon, .langswitch, .skip { display: none; }
  .rail { position: static; height: auto; }
  .band, .entry, .work { break-inside: avoid; }
  a { text-decoration: none; }
  .work__link::after { content: ""; }
}

/* ======================================================================
   Motion — one authored moment: the custody spine inks itself downward
   as the record is read, and each node is struck as it arrives.
   Everything is fully drawn by default; motion only ever animates a
   state that is already correct without it.
   ====================================================================== */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {

    .entry__custody::before,
    .work + .work .work__years {
      animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
      animation-fill-mode: both;
    }

    .entry__custody::before {
      transform-origin: top center;
      animation-name: ink-down;
      animation-timeline: view();
      animation-range: entry 8% cover 38%;
    }

    .entry__custody::after {
      transform-origin: center;
      animation-name: strike;
      animation-timeline: view();
      animation-range: entry 14% cover 34%;
      animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
      animation-fill-mode: both;
    }

    @keyframes ink-down {
      from { transform: scaleY(0); }
      to   { transform: scaleY(1); }
    }

    @keyframes strike {
      from { transform: scale(0.35); filter: blur(0.125rem); opacity: 0; }
      60%  { filter: blur(0.025rem); }
      to   { transform: scale(1); filter: blur(0); opacity: 1; }
    }
  }
}

/* ======================================================================
   Narrower sheets
   ====================================================================== */

@media (max-width: 1180px) {
  .materials { grid-template-columns: repeat(2, 1fr); }
  .band__title { font-size: 48px; }
}

@media (max-width: 860px) {

  html { font-size: 16px; }

  /* the sheet keeps its ground; only the binding changes */
  .sheet { overflow-x: clip; }

  .pane { grid-template-columns: 1fr; }

  /* the rail unrolls into a head-block across the top of the record */
  .rail {
    position: static;
    height: auto;
    min-height: 0;
    border-bottom: 1px solid var(--seal);
    padding: 1.1rem 5.5% 1.2rem;
  }

  .sheet__main { border-left: 0; margin-left: 0; }

  .rail__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1.6rem;
    max-width: 22rem;
  }

  .rail__entry {
    padding: 0.85rem 0 0.7rem;
    border-bottom: 1px solid var(--rule-fine);
  }

  .rail__entry:first-child,
  .rail__entry + .rail__entry { padding-top: 0.85rem; }

  .rail__entry:nth-child(3) { grid-column: 1 / -1; }

  .rail__value { font-size: 19px; max-width: none; }

  .rail__foot {
    position: static;
    width: auto;
    padding: 0;
    margin-top: 1.1rem;
  }

  .rail__foot-place { padding-top: 0.9rem; }

  /* plates re-place around the head-block */
  .plate--stamp {
    left: auto;
    right: 13%;
    top: 84px;
    width: 112px;
    height: 112px;
    opacity: 0.9;
  }

  .plate--ribbon {
    left: auto;
    right: 0;
    top: 0;
    width: 26px;
    height: 300px;
  }

  .langswitch {
    position: absolute;
    left: auto;
    right: 42px;
    top: 14px;
    bottom: auto;
  }

  .plate--close-stamp {
    width: 6.4rem;
    height: 6.4rem;
    margin-top: 1.2rem;
  }

  .band__head { padding-top: 1.5rem; }
  .band__head::before { left: 0; top: 0.4rem; }
  .band__head::after { left: 0.35rem; top: -0.02rem; }

  .sheet__main { padding: 0 5.5% 0 5.5%; }

  .masthead {
    display: block;
    padding: 1.4rem 0 1rem;
    margin-top: 0;
  }

  .masthead__name {
    padding-left: 0;
    font-size: 26px;
    letter-spacing: 0.09em;
  }

  .masthead__standfirst {
    margin-top: 0.7rem;
    max-width: none;
    text-align: left;
    font-size: 17px;
  }

  /* ---- the record, stacked, spine in its own gutter ---- */

  .entry,
  .work {
    position: relative;
    display: block;
    min-height: 0;
    padding: 1.35rem 0 1.25rem 2.4rem;
  }

  .entry::before {
    content: "";
    position: absolute;
    left: 0.55rem;
    top: 0;
    bottom: -1px;
    width: 3px;
    background: var(--seal);
  }

  .entry--distributed::before {
    width: 0;
    border-left: 3px dashed var(--inferred);
    background: none;
  }

  .entry::after {
    content: "";
    position: absolute;
    left: 0.2rem;
    top: 1.3rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--seal);
  }

  .entry--distributed::after {
    background: var(--paper);
    border: 3px solid var(--inferred);
  }

  .entry__custody { padding-right: 0; text-align: left; }
  .entry__custody::before,
  .entry__custody::after { display: none; }

  .entry__dates,
  .work__years { margin-top: 0.4rem; font-size: 19px; }

  .entry__body,
  .work__body { padding-right: 0; margin-top: 0.7rem; }

  .entry__org,
  .work__name { font-size: 19px; }

  .entry__note,
  .work__note { max-width: none; font-size: 16px; line-height: 1.45; }

  .entry__measure,
  .work__meta { margin-top: 1rem; }

  .entry__figure { display: inline-block; margin-top: 0; font-size: 38px; }

  .entry__figure-label {
    display: inline-block;
    margin: 0 0 0 0.7rem;
    white-space: normal;
  }

  .work__link { margin-top: 0.4rem; }

  /* ---- legend & bands ---- */

  .legend {
    display: block;
    padding: 1.4rem 0 2rem 2.4rem;
  }

  .legend__head { padding-right: 0; text-align: left; margin-bottom: 0.7rem; }

  .legend__key { min-width: 0; margin-right: 0.6rem; }

  .band { padding-top: 2.2rem; }

  .band__head { display: block; }

  .band__title {
    padding-left: 0;
    font-size: 40px;
    letter-spacing: 0.04em;
  }

  .band__intro { max-width: none; font-size: 17px; }

  .materials,
  .provenance,
  .close { margin-left: 0; }

  .materials { grid-template-columns: 1fr; gap: 1.6rem; }

  .provenance { grid-template-columns: 1fr; gap: 2rem; }

  .contact { grid-template-columns: 1fr; }

  .contact li { gap: 0.9rem; }

  .contact__key { flex: 0 0 5.6rem; }

  .close__mail { font-size: 25px; overflow-wrap: anywhere; }

  .band--close { padding-bottom: 3rem; }
}

@media (max-width: 420px) {
  .rail__list { grid-template-columns: 1fr; max-width: none; }
  .rail__entry:nth-child(3) { grid-column: auto; }
  .plate--stamp { width: 92px; height: 92px; top: 92px; opacity: 0.8; }
  .masthead__name { font-size: 23px; }
  .band__title { font-size: 33px; }
  .close__mail { font-size: 21px; }
}