/* ============================================================
   Home — the folder
   One object, two hinged sheets, one spine down the middle.
   Shut it is a file cover; opened, who I am; turned once, the
   work that was filed underneath all along.
   ============================================================ */

.theme-home {
  /* the surface the folder lies on. Set --desk to #efece4 for a light room. */
  --desk:       #211f1d;
  /* a kraft file folder, sampled from the reference: the outside of the cover
     a shade darker than the inside, the back board between the two */
  --cover:      #ad7849;   /* the outside of the cover */
  --cover-in:   #b88a5e;   /* its inside */
  --board:      #b3845a;   /* the back board, which carries the tab */
  --cover-ink:  #1d1b19;
  --label:      #f7f2dd;   /* the cream label stuck on the cover */
  --label-red:  #b8413a;   /* what is filled in on it */
  --tab-label:  #a3bea2;   /* the sage strip on the tab */
  --leaf:       #c2d7e5;   /* the pages: the reference's blue, paled */
  --leaf-2:     #bcd1df;   /* the page underneath, a shade down */
  --stock:      #fbf9f4;   /* white paper laid on a page */
  --note:       #f9edc6;   /* the about note: the reference's yellow, paled */
  --lend-paper: #f0d9dd;   /* the record card, pale pink */
  --lend-ink:   #3d5a94;   /* its blue printing */
  --badge-strip:#f4d64e;   /* the band printed across the foot of the ID card */
  --ink:        #1d1b19;
  --ink-soft:   #6e7079;
  --rule:       #d9d5cc;
  --paper-shadow: 2px 4px 4px rgba(0, 0, 0, .18);
  --inset: clamp(24px, 4.8%, 42px);   /* how much board shows round a page */

  /* How a page is held, after a classification folder: the page is bound at
     the spine by a folded strip with tape over both ends, and at its head the
     two prongs of a fastener come up through it and are folded flat either
     side. The fastener's kraft base plate is riveted to the folder itself, so
     it shows only on the inside of the cover — on a page, only the prongs. */
  --hinge:      22px;
  --tape:       #57504a;
  /* the creased binding strip, read from the spine outwards */
  --bind-r: linear-gradient(90deg,
      rgba(20, 40, 60, .12) 0 10px,
      rgba(20, 40, 60, .24) 10px 11px,
      rgba(255, 255, 255, .45) 11px 12px,
      rgba(20, 40, 60, .06) 12px 21px,
      rgba(20, 40, 60, .2) 21px 22px);
  --bind-l: linear-gradient(270deg,
      rgba(20, 40, 60, .12) 0 10px,
      rgba(20, 40, 60, .24) 10px 11px,
      rgba(255, 255, 255, .45) 11px 12px,
      rgba(20, 40, 60, .06) 12px 21px,
      rgba(20, 40, 60, .2) 21px 22px);
  --fast-top:   14px;
  /* the board showing above and below a page: the same at head and foot, and
     narrower than at the sides, so a page uses nearly the board's full
     height. Everything fixed to a page — its prongs, the fasteners riveted
     to the board level with them, 02's foot — is measured from this. */
  --page-v:     14px;
  /* one size for every fastener, so the cover's and the pages' prongs lie on
     one line across the open folder */
  --fast-w:     min(440px, 30vw);
  --page-pad:   clamp(22px, 4.4%, 40px);
  --page-head:  62px;   /* room at the head of a page for the fastener */
  /* the prongs are a flat strip of thin metal, folded down: no roundness,
     only a soft sheen along their length */
  --fast-prongs: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 34'%3E%3Cdefs%3E%3ClinearGradient id='m' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%236c5c4d'/%3E%3Cstop offset='.3' stop-color='%23907f6e'/%3E%3Cstop offset='.55' stop-color='%236e5e4f'/%3E%3Cstop offset='.8' stop-color='%23827160'/%3E%3Cstop offset='1' stop-color='%23675849'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cellipse cx='151' cy='17' rx='4.5' ry='3.6' fill='%23000' opacity='.4'/%3E%3Cellipse cx='269' cy='17' rx='4.5' ry='3.6' fill='%23000' opacity='.4'/%3E%3Crect x='10' y='13.6' width='143' height='6.8' rx='3.4' fill='url(%23m)' stroke='%234a3e34' stroke-width='.5'/%3E%3Crect x='267' y='13.6' width='143' height='6.8' rx='3.4' fill='url(%23m)' stroke='%234a3e34' stroke-width='.5'/%3E%3Cpath d='M14 14.3 H149 M271 14.3 H406' stroke='%23fff' stroke-width='.6' opacity='.28'/%3E%3C/svg%3E");
  /* on the folder itself they come up through a base plate of lighter,
     heavier kraft, as the reference's is */
  --fast-shell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 34'%3E%3Cdefs%3E%3ClinearGradient id='m' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%236c5c4d'/%3E%3Cstop offset='.3' stop-color='%23907f6e'/%3E%3Cstop offset='.55' stop-color='%236e5e4f'/%3E%3Cstop offset='.8' stop-color='%23827160'/%3E%3Cstop offset='1' stop-color='%23675849'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M136 2 H284 L290 8 V26 L284 32 H136 L130 26 V8 Z' fill='%23cda676' stroke='%23946841' stroke-width='.8'/%3E%3Cpath d='M138 9 H282 M138 15 H282 M138 21 H282 M138 27 H282' stroke='%23b58d5e' stroke-width='.6' opacity='.55'/%3E%3Crect x='184' y='12.5' width='52' height='9' rx='4.5' fill='%23473a30'/%3E%3Crect x='188' y='14.8' width='44' height='4.4' rx='2.2' fill='%23907d6b'/%3E%3Cellipse cx='151' cy='17' rx='4.5' ry='3.6' fill='%23000' opacity='.4'/%3E%3Cellipse cx='269' cy='17' rx='4.5' ry='3.6' fill='%23000' opacity='.4'/%3E%3Crect x='10' y='13.6' width='143' height='6.8' rx='3.4' fill='url(%23m)' stroke='%234a3e34' stroke-width='.5'/%3E%3Crect x='267' y='13.6' width='143' height='6.8' rx='3.4' fill='url(%23m)' stroke='%234a3e34' stroke-width='.5'/%3E%3Cpath d='M14 14.3 H149 M271 14.3 H406' stroke='%23fff' stroke-width='.6' opacity='.28'/%3E%3C/svg%3E");

  /* The folder's cut. The back board has a tab standing past its outer edge;
     the cover is notched away above the tab's shoulder so the tab shows when
     it is shut, and both edges come back to the board's line in the same
     S-curve. --p is where the shoulder sits, as a percentage of the height. */
  --lip:      clamp(26px, 2.7vw, 38px);         /* how far the tab stands out */
  --notch:    calc(var(--inset) * .78);         /* how deep the cover is cut */
  --shoulder: clamp(22px, 2.4vw, 32px);         /* the S-curve's drop */
  --p:        44;
  /* a mask image is positioned by alignment, so a piece placed "at 44%" of
     the height actually starts at 44% of (height - its own height). These
     two are that start and what is left below the piece, computed the same
     way everywhere so the cover's notch and the board's tab meet exactly. */
  --sh-top:   calc(var(--p) * 1% - var(--p) / 100 * var(--shoulder));   /* use as a size */
  --sh-below: calc(100% - var(--p) * 1% - (100 - var(--p)) / 100 * var(--shoulder));

  /* the fibre in the kraft */
  --grain:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3  0 0 0 0 .18  0 0 0 0 .08  1.6 0 0 0 -.78'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E") 0 0 / 260px 260px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .25  0 0 0 0 .14  0 0 0 0 .05  0 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 .1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E") 0 0 / 600px 600px;

  /* the S-curve pieces: the cover's side of the shoulder, its mirror for the
     inside, and the tab's side */
  --s-cover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0 C0 52 100 48 100 100 L0 100 Z'/%3E%3C/svg%3E");
  --s-cover-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M100 0 C100 52 0 48 0 100 L100 100 Z'/%3E%3C/svg%3E");
  --s-tab: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L100 0 C100 52 0 48 0 100 Z'/%3E%3C/svg%3E");
  --cut-r: 8px;   /* the rounded corner at the top of the notch and of the tab */

  /* the cover, notched at its top right */
  /* (the pieces overlap by a pixel, so no hairline shows where they meet) */
  --cut-right:
    linear-gradient(#000 0 0) left top / calc(100% - var(--notch) - var(--cut-r) + 1px) 100% no-repeat,
    linear-gradient(#000 0 0) left 0 top calc(var(--cut-r) - 1px) / calc(100% - var(--notch)) calc(100% - var(--cut-r) + 1px) no-repeat,
    radial-gradient(circle at 0 100%, #000 calc(var(--cut-r) - .5px), #0000 var(--cut-r)) right var(--notch) top 0 / var(--cut-r) var(--cut-r) no-repeat,
    var(--s-cover) right 0 top calc(var(--p) * 1%) / calc(var(--notch) + 1px) var(--shoulder) no-repeat,
    linear-gradient(#000 0 0) right 0 bottom 0 / calc(var(--notch) + 1px) calc(var(--sh-below) + 1px) no-repeat;
  /* the same cut seen from the inside, where it lies on the left */
  --cut-left:
    linear-gradient(#000 0 0) right top / calc(100% - var(--notch) - var(--cut-r) + 1px) 100% no-repeat,
    linear-gradient(#000 0 0) right 0 top calc(var(--cut-r) - 1px) / calc(100% - var(--notch)) calc(100% - var(--cut-r) + 1px) no-repeat,
    radial-gradient(circle at 100% 100%, #000 calc(var(--cut-r) - .5px), #0000 var(--cut-r)) left var(--notch) top 0 / var(--cut-r) var(--cut-r) no-repeat,
    var(--s-cover-l) left 0 top calc(var(--p) * 1%) / calc(var(--notch) + 1px) var(--shoulder) no-repeat,
    linear-gradient(#000 0 0) left 0 bottom 0 / calc(var(--notch) + 1px) calc(var(--sh-below) + 1px) no-repeat;
}

body.theme-home {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100vh;
  background: var(--desk);
  color: var(--ink);
}

/* the printed voice: fields, dates, numbers */
.theme-home .cover__fields,
.theme-home .badge__contact,
.theme-home .badge__no,
.theme-home .lend__label,
.theme-home .lend__cols,
.theme-home .lend__when,
.theme-home .lend__sec,
.theme-home .lend__no,
.theme-home .tabs__tab,
.theme-home .work__years,
.theme-home .work__id,
.theme-home .works__label,
.theme-home .foot {
  font-family: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

.theme-home .lend__sign {
  font-family: "Cheese Cake", "Segoe Script", cursive;
  font-weight: 400;
}

/* ============================================================
   THE OBJECT
   ============================================================ */

/* the one frame where the folder is put down already open */
.book--settled,
.book--settled .sheet,
.book--settled .tabs,
.book--settled .sheet__face,
.book--settled::after { transition: none !important; }

.book {
  position: relative;
  align-self: center;
  justify-self: center;
  height: clamp(520px, calc(100vh - 56px), 1040px);
  margin: 28px auto;
  /* the tab stands past the right edge, so the object is drawn back by half
     of it to stay centred */
  width: min(1360px, 100% - var(--gutter) * 2 - var(--lip));
  left: calc(var(--lip) / -2);
  /* Whole pixels, where the browser can do it: a width that divides by four
     (so each half, and the quarter it shifts by when shut, is whole), and a
     left edge rounded rather than centred to a half pixel. Otherwise the
     pages are drawn a half pixel off while they move and snap back when they
     stop. */
  width: round(down, min(1360px, 100% - var(--gutter) * 2 - var(--lip)), 4px);
  left: round(down, var(--lip) / -2, 1px);
  perspective: 2600px;
  transition: transform .95s cubic-bezier(.45, .05, .2, 1);
}

@supports (width: round(down, 100%, 4px)) {
  @media (min-width: 900px) {
    .book {
      justify-self: start;
      margin-left: round(down, (100% - round(down, min(1360px, 100% - var(--gutter) * 2 - var(--lip)), 4px)) / 2, 1px);
    }
  }
}

/* On a desk the page is one screen and never scrolls. A turning page leans
   out toward the viewer, and in perspective its edge and its tab stand a few
   pixels past the folder for a moment: enough, near the window's edge, to
   bring up a scrollbar, which narrows the page and squeezes the folder until
   the page lands and the scrollbar goes again. So there is no scrollbar —
   except in a window too short for the folder (520 + the 56 of margin), which
   still scrolls up and down. */
@media (min-width: 900px) {
  html:has(> body.theme-home) { overflow-x: hidden; }
  /* and the page's own size never changes while a page turns: it is the
     window's height (at least the folder's 576) and clips whatever leans
     past it. Hiding the scrollbar alone is not enough where the page is shown
     in a frame sized to its content (the claude.ai viewer): there the frame
     grew by those few pixels and the viewer's own scrollbar came up. */
  body.theme-home {
    height: max(100vh, 576px);
    overflow: clip;
  }
}
@media (min-width: 900px) and (min-height: 576px) {
  html:has(> body.theme-home) { overflow-y: hidden; }
}

/* Shut, the folder is only its right half, so the whole object is nudged back
   to the middle of the screen; opening returns it and the left page appears
   where the cover is swinging to. */
.book[data-state="closed"] { transform: translateX(-25%); }

.leaf {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background: var(--leaf);
}

.leaf--left  { left: 0;   border-radius: 4px 0 0 4px; }
/* square at the top right: the tab carries on from that corner */
.leaf--right { left: 50%; border-radius: 0 0 4px 0; }

.leaf--base { z-index: 1; box-shadow: 18px 26px 60px rgba(0, 0, 0, .5); }

/* The board itself, both halves of it, is the cover's own oxblood — which is
   why nothing kraft shows when the folder is shut. The pages are a size
   smaller and sit inside it, so a margin of board shows all the way round
   them even with the folder open. */
.leaf { background: var(--grain), var(--board); }

/* the left half of the board lies under the open cover, so it is cut the
   same way — otherwise it would show through the notch */
.leaf--left { -webkit-mask: var(--cut-left); mask: var(--cut-left); }

/* the tab, standing past the back board's outer edge. The shadow is on the
   wrapper because a mask would clip a shadow drawn on the masked piece. */
.ftab {
  position: absolute;
  /* a pixel back over the board, so no seam opens where the two meet */
  left: calc(100% - 1px);
  top: 0;
  bottom: 0;
  width: calc(var(--lip) + 1px);
  filter: drop-shadow(6px 10px 12px rgba(0, 0, 0, .38));
  pointer-events: none;
}

.ftab__board {
  position: absolute;
  inset: 0;
  background: var(--grain), var(--board);
  -webkit-mask:
    linear-gradient(#000 0 0) left top / calc(100% - var(--cut-r) + 1px) calc(var(--sh-top) + 1px) no-repeat,
    linear-gradient(#000 0 0) left 0 top calc(var(--cut-r) - 1px) / 100% calc(var(--sh-top) - var(--cut-r) + 2px) no-repeat,
    radial-gradient(circle at 0 100%, #000 calc(var(--cut-r) - .5px), #0000 var(--cut-r)) right top / var(--cut-r) var(--cut-r) no-repeat,
    var(--s-tab) left 0 top calc(var(--p) * 1%) / 100% var(--shoulder) no-repeat;
  mask:
    linear-gradient(#000 0 0) left top / calc(100% - var(--cut-r) + 1px) calc(var(--sh-top) + 1px) no-repeat,
    linear-gradient(#000 0 0) left 0 top calc(var(--cut-r) - 1px) / 100% calc(var(--sh-top) - var(--cut-r) + 2px) no-repeat,
    radial-gradient(circle at 0 100%, #000 calc(var(--cut-r) - .5px), #0000 var(--cut-r)) right top / var(--cut-r) var(--cut-r) no-repeat,
    var(--s-tab) left 0 top calc(var(--p) * 1%) / 100% var(--shoulder) no-repeat;
}

/* the crease down the middle, creased into the board rather than painted on
   one half of it */
.book::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 46px;
  transform: translateX(-50%);
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, .28) 46%,
    rgba(0, 0, 0, .34) 50%,
    rgba(0, 0, 0, .16) 54%,
    rgba(0, 0, 0, 0));
}

/* ---------- the spine ----------
   One gusset joins the boards and the pages along the middle. It is not laid
   over them: each board carries its half of it, glued down along its spine
   edge, and each page's own binding is the same creased strip — so it moves
   with whatever it is part of and is simply there when that lands.
   Shut, all that shows is the band down the cover's spine edge. */
.cover::after {
  content: "";
  position: absolute;
  left: -1px;
  top: 0;
  bottom: 0;
  width: 11px;
  border-radius: 4px 0 0 4px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .08), transparent 40%, rgba(0, 0, 0, .25)),
    #4f321d;
  pointer-events: none;
}
/* Inside, each board's half: the strip glued to the board as tall as the
   pages, its two ends showing dark in the board's margin above and below,
   the same width as the strip. A page filed over it hides the strip under
   its own binding; the ends stay in view. */
.gusset {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--hinge);
  background:
    linear-gradient(var(--tape), var(--tape)) top / 100% var(--page-v) no-repeat,
    linear-gradient(var(--tape), var(--tape)) bottom / 100% var(--page-v) no-repeat;
  pointer-events: none;
}
.gusset::before {
  content: "";
  position: absolute;
  top: var(--page-v);
  bottom: var(--page-v);
  left: 0;
  right: 0;
  background: var(--bind) var(--leaf);
  /* glued: only the thinnest line where its edge meets the board */
  box-shadow: 0 0 1.5px rgba(40, 25, 10, .4);
}
.cover__inside > .gusset { right: 0; --bind: var(--bind-l); }
.leaf--right > .gusset   { left: 0;  --bind: var(--bind-r); }

/* The left half of the board and the crease only exist once the cover is
   lying open on them: no fade, which would show a ghost of the cover where
   it is going to land while it is still in the air. They appear the moment
   it lands, and go the moment it lifts to shut. */
.book[data-state="closed"]::after { opacity: 0; transition: opacity 0s; }
.book::after { transition: opacity 0s .95s; }

.book[data-state="closed"] .leaf--left { opacity: 0; transition: opacity 0s; }
.leaf--left { transition: opacity 0s .95s; }

.leaf__inner {
  display: grid;
  align-content: center;
  gap: clamp(20px, 3.2%, 36px);
  /* the page: held at the spine, a margin of board showing on the other three
     sides, exactly as a folder holds what is filed in it */
  height: calc(100% - var(--page-v) * 2);
  margin: var(--page-v) var(--inset) var(--page-v) 0;
  padding: var(--page-head) var(--page-pad) var(--page-pad) calc(var(--page-pad) + var(--hinge));
  background-color: var(--leaf);
  /* the binding down the spine edge: two folded strips with a crease
     between them — drawn as shading over the page's own colour, so it is the
     same paper whichever page it is, and the same as the board's half of the
     gusset it continues */
  background-image: var(--bind-r);
  background-size: var(--hinge) 100%;
  background-position: left top;
  background-repeat: no-repeat;
  border-radius: 0 3px 3px 0;
  box-shadow: 4px 6px 16px rgba(0, 0, 0, .3);
  overflow: hidden;
  position: relative;
  isolation: isolate;
}

.sheet--two .leaf__inner { background-color: var(--leaf-2); }

/* the inside of the back board, once page two is turned: the folder's own
   fastener, plate and prongs, level with the cover's */
.leaf--right::after {
  content: "";
  position: absolute;
  top: 0;
  margin-top: calc(var(--page-v) + var(--fast-top));
  left: 50%;
  width: var(--fast-w);
  aspect-ratio: 420 / 34;
  transform: translateX(-50%);
  background: var(--fast-shell) center / 100% 100% no-repeat;
  filter: drop-shadow(0 1px .8px rgba(0, 0, 0, .35));
  pointer-events: none;
}

/* the prongs at the head of the page, centred on what is left of the page
   beside the binding, and lying over whatever is filed there. Thin metal
   throws a thin shadow. */
.leaf__inner::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: var(--fast-top);
  left: calc(50% + var(--hinge) / 2);
  width: var(--fast-w);
  aspect-ratio: 420 / 34;
  transform: translateX(-50%);
  background: var(--fast-prongs) center / 100% 100% no-repeat;
  filter: drop-shadow(0 1px .6px rgba(0, 0, 0, .35));
  pointer-events: none;
}

/* the whole fastener, plate and all, riveted to the inside of the cover,
   near its head as in the reference. Once page one is turned it lies under
   that page, which is how a folder is filed. */
.cover__inside::after {
  content: "";
  position: absolute;
  /* level with the pages' prongs: a page starts --page-v down the board,
     and its prongs sit --fast-top below that */
  top: 0;
  margin-top: calc(var(--page-v) + var(--fast-top));
  left: 50%;
  width: var(--fast-w);
  aspect-ratio: 420 / 34;
  transform: translateX(-50%);
  background: var(--fast-shell) center / 100% 100% no-repeat;
  filter: drop-shadow(0 1px .8px rgba(0, 0, 0, .35));
}

/* The back of a sheet is read on the LEFT leaf, so everything that was keyed
   to the spine has to swap sides: the page is held at the spine on its right
   now, the margin of board shows on its left, and it throws its shadow away
   from the spine. */
.sheet__back > .leaf__inner {
  margin: var(--page-v) 0 var(--page-v) var(--inset);
  padding: var(--page-head) calc(var(--page-pad) + var(--hinge)) var(--page-pad) var(--page-pad);
  background-image: var(--bind-l);
  background-position: right top;
  border-radius: 3px 0 0 3px;
  box-shadow: -4px 6px 16px rgba(0, 0, 0, .3);
  /* the record card is filed on this page: it is held by the fastener, so
     it starts at the head of the page rather than floating in the middle */
  align-content: start;
}

.sheet__back > .leaf__inner::after { left: calc(50% - var(--hinge) / 2); }

/* ---------- the hinged sheets ---------- */

.sheet {
  position: absolute;
  left: 50%;
  top: 0;
  width: 50%;
  height: 100%;
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform .95s cubic-bezier(.45, .05, .2, 1);
  /* The sheet and its faces span the whole leaf, margin of board included,
     and they are transparent out there — so neither may swallow the clicks
     meant for the tab of the page behind. Only what is actually drawn on a
     sheet takes them back. */
  pointer-events: none;
}

/* A turning page stays above the board while it crosses over, and settles
   back to its own depth at .4 s, by when it is 115° round and over its own
   half. Not on landing: the cover's shadow falls across the spine onto it,
   and dropping under the cover at rest made that shadow, and the page with
   it, seem to jump. Without the delay it
   drops behind the cover the instant 01 is clicked, and the page disappears
   into the oxblood for the length of the turn, its tab poking out from under
   it. z-index takes no time to change; the delay is the whole point. */
.sheet--one {
  z-index: 3;
  transition: transform .95s cubic-bezier(.45, .05, .2, 1), z-index 0s .4s;
}

.sheet--cover { z-index: 4; }

/* Page two hangs under page one, and turns the same way: above everything
   while it is in the air, settling to its own depth only once it has landed
   back on the right. */
.sheet--two {
  z-index: 2;
  transition: transform .95s cubic-bezier(.45, .05, .2, 1), z-index 0s .4s;
}
.book[data-state="s3"] .sheet--two {
  transform: rotateY(-180deg);
  z-index: 6;
  transition: transform .95s cubic-bezier(.45, .05, .2, 1), z-index 0s;
}

/* turned, a sheet lies on the left — and the one turned last lies on top */
.book[data-state="s1"] .sheet--cover,
.book[data-state="s2"] .sheet--cover,
.book[data-state="s3"] .sheet--cover { transform: rotateY(-180deg); }
.book[data-state="s2"] .sheet--one,
.book[data-state="s3"] .sheet--one {
  transform: rotateY(-180deg);
  z-index: 5;
  /* going the other way it has to rise at once, so that it is already above
     the cover by the time it arrives over it */
  transition: transform .95s cubic-bezier(.45, .05, .2, 1), z-index 0s;
}

.sheet__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  pointer-events: none;
}

.sheet__face > .leaf__inner,
.cover { pointer-events: auto; }

/* the back of a sheet is the left-hand page once it has been turned, so it is
   drawn mirrored and creased on the other side */
.sheet__back { transform: rotateY(180deg); }

/* The cover's board is drawn on a layer of its own and cut there, so the
   shadow can follow the cut: a drop shadow on the face itself takes the shape
   of what is painted, notch and all. Shut, the cover lies flat on the back
   board, so all it throws is the thin line of its own edge — the folder's
   shadow on the desk is the board's. */
.cover {
  color: var(--cover-ink);
  /* only the right-hand edge opens it (.tabs__edge), not the face */
  cursor: default;
  filter: drop-shadow(1px 1px 1.5px rgba(40, 20, 0, .45));
}

.cover::before {
  content: "";
  position: absolute;
  /* a pixel past the spine: page one is held at the spine too, and its edge
     would otherwise show as a hairline down the cover's side */
  inset: 0 0 0 -1px;
  z-index: -1;
  border-radius: 0 4px 4px 0;
  background: var(--grain), var(--cover);
  -webkit-mask: var(--cut-right);
  mask: var(--cut-right);
}

/* Open, the inside of the cover is what lies on the desk on the left, so it
   throws the folder's shadow there, cut to its own shape. */
.cover__inside { filter: drop-shadow(-6px 22px 26px rgba(0, 0, 0, .45)); }

.cover__inside::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 4px 0 0 4px;
  background: var(--grain), var(--cover-in);
  -webkit-mask: var(--cut-left);
  mask: var(--cut-left);
}

/* The strip of the cover that stands out past the board below the notch:
   the edge a hand takes to shut the folder again. */
.cover__edge {
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(var(--notch) + 6px);
  height: var(--sh-below);
  cursor: pointer;
  pointer-events: auto;
}

/* ============================================================
   THE COVER
   ============================================================ */

/* The file's label: a cream sticker with rounded corners, stuck on a little
   above the middle, ruled into a heading, the name, and a row of fields —
   the way the reference's label is. */
.cover__face {
  display: grid;
  align-content: start;
  justify-items: center;
  height: 100%;
  padding: 16% clamp(28px, 9%, 64px) 0 clamp(28px, 7%, 56px);
}

.cover__label {
  width: min(100%, 380px);
  padding: clamp(10px, 1.1vw, 14px);
  background: var(--label);
  border-radius: 12px;
  box-shadow: 0 1px 1px rgba(40, 22, 6, .22), 0 3px 8px rgba(40, 22, 6, .16);
  --rule: rgba(29, 27, 25, .55);
}

.cover__what {
  margin: 0;
  padding: 8px 10px 7px;
  border: 1px solid var(--rule);
  border-bottom: 0;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: .18em;
  text-align: center;
  text-transform: uppercase;
  color: var(--label-red);
}

.cover__name {
  margin: 0;
  padding: 14px 10px 16px;
  border: 1px solid var(--rule);
  border-bottom: 0;
  box-shadow: inset 0 3px 0 -2px var(--rule);   /* the double rule under the heading */
  font-family: Urbanist, sans-serif;
  font-weight: 700;
  font-size: 28px;   /* what the file holds, not who: the name is on the tab */
  line-height: 1.04;
  letter-spacing: -.01em;
  text-align: center;
}

.cover__fields {
  display: grid;
  grid-template-columns: repeat(3, auto);
  margin: 0;
  border: 1px solid var(--rule);
}

.cover__fields > div {
  display: grid;
  gap: 4px;
  padding: 7px 10px 8px;
}

.cover__fields > div + div { border-left: 1px solid var(--rule); }

.cover__fields dt {
  font-size: 8.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.cover__fields dd {
  margin: 0;
  font-size: 11px;
  letter-spacing: .04em;
  white-space: nowrap;
  color: var(--label-red);
}

/* The label as an engineering drawing's title block (after the Off-White c/o
   teenage engineering one): a cream backing, a ruled grid of five columns
   and seven rows, one mono face at one size for names and values alike.
   The right-hand column is shared by REV / SHEET / PERIOD's values, the
   butterfly and the two drawing marks, so it is one straight line. */
.tblock {
  --tb-paper: #f5f0e1;
  --tb-ink: #16140f;
  --tb-fs: 11px;
  --tb-row: 34px;
  --tb-line: 1px;
  --tb-label-w: 96px;
  --tb-rev-w: 64px;
  --tb-right-w: 110px;
  --tb-icon-col: 32px;
  --tb-icon-inset: 10px;
  container-type: inline-size;
  width: min(100%, 440px);
  padding: 12px;
  background: var(--tb-paper);
  border-radius: 4px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .18), 0 8px 18px rgba(0, 0, 0, .2);
  font-family: "DM Mono", ui-monospace, Menlo, monospace;   /* the face of every other field on the page */
  color: var(--tb-ink);
}
.tblock__grid {
  display: grid;
  grid-template-columns: var(--tb-label-w) minmax(0, 1fr) minmax(0, 1fr) var(--tb-rev-w) var(--tb-right-w);
  grid-auto-rows: var(--tb-row);
  gap: var(--tb-line);
  background: var(--tb-ink);
  border: var(--tb-line) solid var(--tb-ink);
}
.tb-c { display: flex; min-width: 0; background: var(--tb-paper); }
.tb-k, .tb-v { font-size: var(--tb-fs); line-height: 1.35; }
.tb-k {                       /* field name */
  display: flex;
  align-items: center;
  flex: none;
  padding: 0 8px;
  border-right: var(--tb-line) solid var(--tb-ink);
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tb-v {                       /* value: a plain block, so a long one wraps */
  flex: 1;
  min-width: 0;
  align-self: center;
  padding: 0 10px;
}
/* a label is its column plus the line after it, so its divider lands on the
   grid line the cells below are cut on */
.tb-w .tb-k { width: calc(var(--tb-label-w) + var(--tb-line)); }
.tb-rev .tb-k, .tb-sheet .tb-k, .tb-period .tb-k { width: calc(var(--tb-rev-w) + var(--tb-line)); }

.tb-title  { grid-column: 1 / 4; grid-row: 1 / 3; }
.tb-rev    { grid-column: 4 / 6; grid-row: 1; }
.tb-sheet  { grid-column: 4 / 6; grid-row: 2; }
.tb-fid    { grid-column: 1 / 4; grid-row: 3; }
.tb-period { grid-column: 4 / 6; grid-row: 3; }
.tb-disc   { grid-column: 1 / 5; grid-row: 4 / 6; }
.tb-logo   { grid-column: 5 / 6; grid-row: 4 / 7; }
.tb-stat   { grid-column: 1 / 5; grid-row: 6; }
.tb-scale  { grid-column: 1 / 3; grid-row: 7; }
.tb-tol    { grid-column: 3 / 5; grid-row: 7; }
.tb-icons  { grid-column: 5 / 6; grid-row: 7; }

.tb-title .tb-v { font-weight: 500; }

/* the butterfly sits bottom right, on the same axis as the target below */
.tb-logo { position: relative; }
.tb-logo svg {
  position: absolute;
  right: var(--tb-icon-inset);
  bottom: 10px;
  width: var(--tb-icon-col);
  height: auto;
  display: block;
  fill: var(--tb-ink);
}
.tb-icons { align-items: center; justify-content: flex-end; gap: 10px; padding-right: var(--tb-icon-inset); }
.tb-icons svg { height: 20px; width: auto; display: block; fill: none; stroke: var(--tb-ink); stroke-width: 1; }
.tb-icons svg.tb-target { width: var(--tb-icon-col); }

/* narrow: a plain two-column stack */
@container (max-width: 405px) {
  .tblock__grid { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; }
  .tb-c { grid-column: auto !important; grid-row: auto !important; min-height: var(--tb-row); }
  .tb-title, .tb-fid, .tb-period, .tb-disc, .tb-stat, .tb-logo, .tb-icons { grid-column: 1 / -1 !important; }
  .tb-logo { min-height: 64px; }
  .tb-w .tb-k { width: auto; min-width: var(--tb-label-w); }
  .tb-rev .tb-k, .tb-sheet .tb-k, .tb-period .tb-k { width: auto; }
  .tb-rev .tb-v, .tb-sheet .tb-v, .tb-tol .tb-v, .tb-scale .tb-v { white-space: nowrap; }
  .tb-title { order: 1; } .tb-rev { order: 2; } .tb-sheet { order: 3; } .tb-fid { order: 4; }
  .tb-period { order: 5; } .tb-disc { order: 6; } .tb-stat { order: 7; } .tb-scale { order: 8; }
  .tb-tol { order: 9; } .tb-logo { order: 10; } .tb-icons { order: 11; }
}

/* ============================================================
   THE TABS, CUT INTO THE RIGHT EDGE
   ============================================================ */

/* Each tab is cut from the page it belongs to — same board, same colour, and
   its inner edge lies ON that page, so there is no seam where they meet.

   The silhouette is the site's own tab, turned a quarter: the same two curved
   shoulders masked from the same vector, stacked top and bottom now instead of
   left and right, with the stretchy middle between them. Inlined rather than
   linked, because a mask is fetched under CORS and would be blocked over
   file://. */
/* A page's tab is cut from that page, and the page is smaller than the board,
   so the tab has to end before the board does — otherwise it would show past
   the shut cover, and the cover shows nothing.

   It also sits WHOLLY in the margin of board, starting at its own page's edge
   rather than lying across it. Every page is the same size, so no page can
   cover another page's tab — which is the only reason a tab in a folder is
   readable at all. */
/* The strip of tabs spans the right leaf, so a width given in % means the
   same here as it does for the pages (the board's margin is a % of the
   leaf). It only positions; the tabs themselves take the clicks. */
.tabs {
  position: absolute;
  left: 50%;
  right: 0;
  top: 0;
  bottom: 0;
  pointer-events: none;
}

.tabs__tab { position: absolute; right: 4px; }

/* Shut, the file opens only from its right-hand edge: the tab, the board's
   shoulder and the strip of cover beside them, top to bottom. The face of
   the cover takes no click. Under the tab button itself, which still takes
   its own. */
.tabs__edge {
  position: absolute;
  top: 0;
  bottom: 0;
  right: calc(var(--lip) * -1);
  width: calc(var(--notch) + var(--lip) + 8px);
  z-index: 4;
  cursor: pointer;
  pointer-events: auto;
}
.book:not([data-state="closed"]) .tabs__edge { display: none; }


/* Each tab sits at the depth of the page it was cut from, so the page in
   front covers the tab of the page behind it — only the part sticking out
   past the page's edge shows, which is the whole point of a tab. */
.tabs__tab,
.ptab {
  /* The file's S-curve rises over the depth of the notch (about 24px wide,
     32 tall on a 1440 screen). A tab's curve runs across the tab's whole
     width, 31px, so it needs proportionally more height to be the same
     curve rather than a flatter one. */
  --sh: 41px;
  /* 4px of board shows past a tab, and its inner edge reaches the page it
     was cut from, however wide the margin has grown — so no seam opens
     between the two on a big screen */
  width: max(31px, calc(var(--inset) - 3px));
  /* The two dividers share what is left of the edge below the file tab:
     01 starts just under the tab's shoulder, 02 runs to the foot of its page,
     and the two are the same length with a small gap between them. */
  --tab-a:   calc(var(--sh-top) + var(--shoulder) + 1.5%);
  --tab-gap: 6px;
  --tab-l:   calc((100% - var(--page-v) - var(--tab-a) - var(--tab-gap)) / 2);
  height: var(--tab-l);
  margin: 0;
  padding: var(--sh) 3px var(--sh) 8px;
  border: 0;
  background: var(--leaf);
  color: var(--ink);
  font-family: Overpass, sans-serif;
  font-weight: 500;
  font-size: clamp(10px, .82vw, 11.5px);
  letter-spacing: .16em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  pointer-events: auto;
  transition: transform .3s cubic-bezier(.2, .7, .3, 1), filter .3s ease;
  /* a divider's tab, cut with the same S-curve as the file's own tab and
     notch, so the pages' tabs and the folder's read as one cutting die */
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0 C0 52 100 48 100 100 L0 100 Z' fill='%23000'/%3E%3C/svg%3E") center top / 100% var(--sh) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100 C0 48 100 52 100 0 L0 0 Z' fill='%23000'/%3E%3C/svg%3E") center bottom / 100% var(--sh) no-repeat,
    linear-gradient(#000, #000) 0 calc(var(--sh) - 1px) / 100% calc(100% - var(--sh) * 2 + 2px) no-repeat;
  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0 C0 52 100 48 100 100 L0 100 Z' fill='%23000'/%3E%3C/svg%3E") center top / 100% var(--sh) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100 C0 48 100 52 100 0 L0 0 Z' fill='%23000'/%3E%3C/svg%3E") center bottom / 100% var(--sh) no-repeat,
    linear-gradient(#000, #000) 0 calc(var(--sh) - 1px) / 100% calc(100% - var(--sh) * 2 + 2px) no-repeat;
}

.tabs__tab span,
.ptab span { display: block; }

/* 01 is cut from page one, so it is carried by page one: it swings round with
   the sheet and comes to rest on the outer edge of the left leaf. What you
   see after the turn is its other side, which is a second face — same shape
   mirrored, same label the right way round. */
/* The pages' tabs sit below the folder tab's shoulder. Higher up, the turned
   page would carry its tab over the cover's notch, where there is no board
   under it and it would stand out past the folder's edge. */
.ptab {
  position: absolute;
  right: 4px;
  top: var(--tab-a);
  backface-visibility: hidden;
}

/* Shut, page one's tab would show through the cover's notch. It is hidden
   until the cover starts to lift, and comes back only once the cover has
   landed over it again. */
.ptab { transition: transform .3s cubic-bezier(.2, .7, .3, 1), filter .3s ease, visibility 0s; }
.book[data-state="closed"] .ptab {
  visibility: hidden;
  transition: transform .3s cubic-bezier(.2, .7, .3, 1), filter .3s ease, visibility 0s .95s;
}

.ptab--back {
  transform: rotateY(180deg);
  padding: var(--sh) 8px var(--sh) 3px;
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M100 0 C100 52 0 48 0 100 L100 100 Z' fill='%23000'/%3E%3C/svg%3E") center top / 100% var(--sh) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M100 100 C100 48 0 52 0 0 L100 0 Z' fill='%23000'/%3E%3C/svg%3E") center bottom / 100% var(--sh) no-repeat,
    linear-gradient(#000, #000) 0 calc(var(--sh) - 1px) / 100% calc(100% - var(--sh) * 2 + 2px) no-repeat;
  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M100 0 C100 52 0 48 0 100 L100 100 Z' fill='%23000'/%3E%3C/svg%3E") center top / 100% var(--sh) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M100 100 C100 48 0 52 0 0 L100 0 Z' fill='%23000'/%3E%3C/svg%3E") center bottom / 100% var(--sh) no-repeat,
    linear-gradient(#000, #000) 0 calc(var(--sh) - 1px) / 100% calc(100% - var(--sh) * 2 + 2px) no-repeat;
}

.tabs__tab--open { z-index: 5; top: 22%; }
/* 02 is cut from page two, the last divider: the same rise at its head, then
   straight down to the foot of its page, where only the outer corner is
   rounded. */
.ptab--two {
  top: calc(var(--tab-a) + var(--tab-l) + var(--tab-gap));
  bottom: var(--page-v);
  height: auto;
  background: var(--leaf-2);
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0 C0 52 100 48 100 100 L0 100 Z' fill='%23000'/%3E%3C/svg%3E") center top / 100% var(--sh) no-repeat,
    linear-gradient(#000, #000) 0 calc(var(--sh) - 1px) / 100% calc(100% - var(--sh) - 5px) no-repeat,
    linear-gradient(#000, #000) left bottom / calc(100% - 6px) 7px no-repeat,
    radial-gradient(circle at 0 0, #000 5.5px, #0000 6px) right bottom / 6px 6px no-repeat;
  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0 C0 52 100 48 100 100 L0 100 Z' fill='%23000'/%3E%3C/svg%3E") center top / 100% var(--sh) no-repeat,
    linear-gradient(#000, #000) 0 calc(var(--sh) - 1px) / 100% calc(100% - var(--sh) - 5px) no-repeat,
    linear-gradient(#000, #000) left bottom / calc(100% - 6px) 7px no-repeat,
    radial-gradient(circle at 0 0, #000 5.5px, #0000 6px) right bottom / 6px 6px no-repeat;
}

.ptab--two.ptab--back {
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M100 0 C100 52 0 48 0 100 L100 100 Z' fill='%23000'/%3E%3C/svg%3E") center top / 100% var(--sh) no-repeat,
    linear-gradient(#000, #000) 0 calc(var(--sh) - 1px) / 100% calc(100% - var(--sh) - 5px) no-repeat,
    linear-gradient(#000, #000) right bottom / calc(100% - 6px) 7px no-repeat,
    radial-gradient(circle at 100% 0, #000 5.5px, #0000 6px) left bottom / 6px 6px no-repeat;
  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M100 0 C100 52 0 48 0 100 L100 100 Z' fill='%23000'/%3E%3C/svg%3E") center top / 100% var(--sh) no-repeat,
    linear-gradient(#000, #000) 0 calc(var(--sh) - 1px) / 100% calc(100% - var(--sh) - 5px) no-repeat,
    linear-gradient(#000, #000) right bottom / calc(100% - 6px) 7px no-repeat,
    radial-gradient(circle at 100% 0, #000 5.5px, #0000 6px) left bottom / 6px 6px no-repeat;
}

/* under page one, 02's tab catches that page's edge shadow */
.book[data-state="s1"] .ptab--two.ptab--front { box-shadow: inset 3px 4px 7px -3px rgba(0, 0, 0, .45); }

/* The strip stuck on the folder's tab, naming the file. It sits wholly on the
   part of the tab that stands past the board, clear of the pages' own tabs
   inside the edge. Shut, it is also what opens the folder. */
.tabs__tab--open {
  --w: calc(var(--lip) - 11px);
  top: 6%;
  right: calc(-1 * (var(--lip) + var(--w)) / 2);
  width: var(--w);
  height: calc(var(--sh-top) - 12%);
  padding: 0;
  display: grid;
  place-items: center;
  background: var(--tab-label);
  color: var(--ink);
  -webkit-mask: none;
  mask: none;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .18);
  font-family: Urbanist, sans-serif;
  font-weight: 700;
  font-size: clamp(10px, 1vw, 13px);
  letter-spacing: .14em;
}

.tabs__tab--open i {
  font-family: Overpass, sans-serif;
  font-style: normal;
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: none;
}

/* A tab is the same paper as its page, so it is never lifted or brightened
   while it is the page in front — either would part it from the page. Only
   a pointer over it lightens it a touch. */
.tabs__tab:not(.tabs__tab--open):hover,
.ptab:hover { filter: brightness(1.04); }

/* shut, the only thing to do is open it; open, the strip is just the label */
.book[data-state="closed"] .tabs__tab:not(.tabs__tab--open) { display: none; }
.book:not([data-state="closed"]) .tabs__tab--open { pointer-events: none; }

/* ============================================================
   PAGE ONE — the badge and the paragraph
   ============================================================ */

.badge {
  position: relative;
  z-index: 2;      /* the card and its clip lie over the page's prongs */
  width: min(100%, 340px);
  margin-top: 14px;
}

.badge__clip {
  position: absolute;
  left: 50%;
  /* its foot lands just inside the mouth of the sleeve, whatever size the
     card is, so the tongue always reads as pushed in behind the film */
  bottom: calc(100% - 7px);
  width: 16%;
  aspect-ratio: 44 / 62;
  transform: translateX(-50%);
  filter: drop-shadow(1px 3px 3px rgba(0, 0, 0, .45));
}

.badge__sleeve {
  position: relative;
  padding: 7px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .18);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .5),
    2px 5px 12px rgba(0, 0, 0, .35);
}

.badge__sleeve::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 5px;
  background: linear-gradient(112deg,
    rgba(255, 255, 255, .34) 0 22%,
    rgba(255, 255, 255, 0) 38% 100%);
  pointer-events: none;
}

/* An ID card is 85.6 x 54 mm, and looks wrong at any other proportion. The
   arrangement follows a student card: the name and the address in the open
   left half, the photograph held at the top right, and a printed band across
   the whole foot carrying the card number and what the holder is. */
.badge__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38%;
  grid-template-rows: minmax(0, 1fr) auto;
  column-gap: clamp(8px, 3%, 14px);
  padding: clamp(9px, 3.4%, 14px) clamp(9px, 3.4%, 14px) 0;
  aspect-ratio: 85.6 / 54;
  background: var(--stock);
  border-radius: 2px;
  overflow: hidden;
}

.badge__body {
  align-self: center;
  min-width: 0;
}

/* the photograph fills its corner of the card, and reaches down to sit on the
   band rather than floating above it */
.badge__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 54% 16%;
}

.badge__name {
  margin: 0;
  font-family: Urbanist, sans-serif;
  font-weight: 400;
  font-size: clamp(16px, 5.6%, 20px);
  line-height: 1.15;
}

.badge__contact {
  margin: 9px 0 0;
  font-size: clamp(9px, 2.9%, 10.5px);
  line-height: 1.5;
  word-break: break-all;
  color: var(--ink-soft);
}

.badge__contact a { color: inherit; text-decoration: none; }
.badge__contact a:hover { text-decoration: underline; }

/* the printed band across the foot, bled to both edges */
.badge__strip {
  grid-column: 1 / -1;
  /* the same two columns as the card above it, so what is printed on the band
     lines up with what is over it: the number under the name, the standing
     centred under the photograph */
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38%;
  column-gap: clamp(8px, 3%, 14px);
  align-items: baseline;
  margin: 0 calc(-1 * clamp(9px, 3.4%, 14px));
  padding: 5px clamp(9px, 3.4%, 14px) 6px;
  background: var(--badge-strip);
}

.badge__no {
  font-size: clamp(9px, 2.9%, 10.5px);
  letter-spacing: .04em;
  white-space: nowrap;
}

.badge__role {
  margin: 0;
  justify-self: center;
  font-family: Urbanist, sans-serif;
  font-weight: 700;
  font-size: clamp(11px, 3.8%, 14px);
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* the paragraph, on a plain sheet */
.about {
  padding: clamp(26px, 6%, 40px) clamp(24px, 6%, 38px);
  background: var(--lend-paper);   /* was var(--note), the pale yellow */
  box-shadow: var(--paper-shadow);
  font-size: clamp(13.5px, 1.12vw, 16px);
  line-height: 1.75;
}

.about p { margin: 0 0 14px; }

/* ---------- cards with a back ----------
   The ID card and the note both have a back, shown the way a game turns a
   card: no turning in space, the face simply changes, with a quick fade and
   a small settle. The note is held under the paperclip, so it is first slid
   out from under it, changed, and slid back. */
.badge__flip,
.note-flip {
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.turn { display: grid; }
.turn > * {
  grid-area: 1 / 1;      /* both sides fill the one cell: one card, one size */
  transition: opacity .22s ease, transform .3s cubic-bezier(.3, 1.5, .5, 1), visibility 0s;
}
/* the side that is down */
.badge__side--back,
.note-flip__back,
.is-turned .badge__side--front,
.is-turned .note-flip__front {
  opacity: 0;
  visibility: hidden;
  transform: scale(.97);
  transition: opacity .22s ease, transform .3s ease, visibility 0s .22s;
}
/* the side that is up */
.is-turned .badge__side--back,
.is-turned .note-flip__back {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .22s ease, transform .3s cubic-bezier(.3, 1.5, .5, 1), visibility 0s;
}

/* the note's trip out from under the clip: out briskly, back slowly */
.note-flip > .turn { transition: transform .75s cubic-bezier(.45, 0, .25, 1); }
.note-flip.is-out > .turn {
  transform: translate(-48px, -12px);
  transition: transform .38s cubic-bezier(.3, .6, .3, 1);
}


.badge__flip:focus-visible,
.note-flip:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 4px; }

/* the back of the ID card: the magnetic strip, the signature panel, and the
   small print a found card carries */
.badge__card--back {
  display: grid;
  grid-template-columns: none;
  grid-template-rows: auto auto 1fr auto;
  align-content: stretch;
  padding: 0;
}
.badge__magstripe {
  display: block;
  height: 19%;
  min-height: 26px;
  margin-top: 8%;
  background: linear-gradient(#2a2724, #1d1b19 40%, #2a2724);
}
.badge__sign {
  display: grid;
  gap: 2px;
  margin: 6% 5% 0;
}
.badge__signlabel {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: clamp(7px, 2.2%, 8.5px);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.badge__signature {
  display: block;
  padding: 2px 8px 0;
  height: clamp(26px, 8.6vw, 34px);
  max-height: 34px;
  background: repeating-linear-gradient(-18deg, #f3efe4 0 5px, #e9e3d4 5px 7px);
  font-family: "Cheese Cake", "Segoe Script", cursive;
  font-size: clamp(17px, 5.4vw, 22px);
  line-height: 1.5;
  color: #2f4a80;
}
.badge__found {
  align-self: end;
  margin: 0;
  padding: 0 5% 2%;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: clamp(8.5px, 2.7%, 10px);
  line-height: 1.5;
  color: var(--ink-soft);
}
.badge__copy {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: copy;
}
.badge__links {
  display: flex;
  gap: 14px;
  margin: 0;
  padding: 0 5% 5%;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: clamp(9px, 2.9%, 10.5px);
}
.badge__links a {
  color: #2f4a80;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.badge__links a:hover { color: var(--ink); }

.note-flip__face { position: relative; }
.note-flip__back {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36%;
  gap: clamp(16px, 4%, 26px);
  align-items: start;
  font-size: clamp(12px, .92vw, 13.5px);
  line-height: 1.6;
}
.about__more p { margin: 0 0 10px; }
.about__more p:last-child { margin-bottom: 0; }
/* the photograph, a white-bordered print; its caption is written on the
   note under it, outside the print */
.about__photo { margin: 0; }
.about__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  box-sizing: border-box;
  border: 6px solid #fff;
  box-shadow: 1px 3px 6px rgba(0, 0, 0, .22);
  transform: rotate(1.6deg);
}
.about__photo figcaption {
  padding: 12px 2px 0;
  font-size: clamp(10px, .78vw, 11.5px);
  line-height: 1.45;
  color: var(--ink-soft);
}
@media (max-width: 599px) {
  .note-flip__back { grid-template-columns: minmax(0, 1fr); }
  .about__photo { width: min(64%, 210px); justify-self: center; }
}

/* a card taken out of the file: it slides out a little and lifts before the
   page goes to it */
.work.is-pulled {
  z-index: 3;
  transform: translate(26px, -6px) rotate(.8deg);
  box-shadow: 6px 16px 26px rgba(0, 0, 0, .34);
  transition: transform .38s cubic-bezier(.3, .7, .3, 1), box-shadow .38s ease;
}

@media (prefers-reduced-motion: reduce) {
  .note-flip > .turn { transition: none !important; }
  .turn > * { transition: none !important; }
}

/* A paperclip pushed onto the right edge of page one. Its inner loop lies on
   the About side, its outer loop on the far side, and the turn that joins the
   two shows just past the page's edge. Each side is a layer inside its face:
   what lies on the far side goes under the page, what lies on this side over
   it — the page clips its own overflow, so the clip cannot live inside it.
   Turned, the record-card side shows the same clip mirrored, with the outer
   loop on top. */
.pclip {
  --clip-w: 92px;
  /* the drawing is 925 long and the page's edge falls at 792 of it */
  --clip-out: calc(var(--clip-w) * 133 / 925);
  position: absolute;
  top: calc(var(--page-v) + (100% - var(--page-v) * 2) * var(--clip-at, .77));
  right: calc(var(--inset) - var(--clip-out));
  width: var(--clip-w);
  aspect-ratio: 925 / 266;
  pointer-events: none;
}
.pclip--under { z-index: -1; }
.pclip--over  { z-index: 2; filter: drop-shadow(.5px 1.5px 1px rgba(0, 0, 0, .4)); }
/* the half on top is the one a hand takes hold of: dragged, the clip slides
   up and down the page's edge, as a clip does */
.pclip--over  { pointer-events: auto; cursor: grab; touch-action: none; }
.pclip--over.is-dragging { cursor: grabbing; }
.pclip--back  { right: auto; left: calc(var(--inset) - var(--clip-out)); transform: scaleX(-1); }
.pclip svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pclip path { fill: none; stroke-linejoin: round; }
/* Where the wire meets the paper's edge it is cut square: the paper hides the
   rest of it. Only the wire's own free end is rounded, drawn as a dot. The
   wire is 1.7 px, at this drawing's scale of 92 / 925. */
.pclip .wire  { stroke: #5d636b; stroke-width: 17; stroke-linecap: butt; }
.pclip .shine { stroke: rgba(255, 255, 255, .6); stroke-width: 5; stroke-linecap: butt; }
.pclip .tip   { stroke: #5d636b; stroke-width: 17; stroke-linecap: round; }
.about p:last-child { margin-bottom: 0; }

.about__hi {
  font-family: Urbanist, sans-serif;
  font-weight: 600;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.25;
  margin-bottom: 16px;
}

/* ============================================================
   PAGE TWO, LEFT — the record card
   ============================================================ */

.lend {
  /* pulled up to the head of the page, so the prongs come up through it
     and fold flat across its head; the heading starts below them */
  margin-top: calc(var(--fast-top) - 6px - var(--page-head));
  padding: 44px 0 12px;
  background: var(--lend-paper);
  color: var(--lend-ink);
  border-radius: 3px;
  box-shadow: var(--paper-shadow);
}

.lend__head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 0 8px;
  padding: 0 16px 14px;
}

.lend__no { font-size: 10px; opacity: .8; }
.lend__no:last-of-type { text-align: right; }

.lend__title {
  grid-column: 2;
  margin: 0;
  font-family: Urbanist, sans-serif;
  font-weight: 700;
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.lend__sub {
  grid-column: 2;
  margin: 4px 0 0;
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-align: center;
  opacity: .85;
}

.lend__issued,
.lend__cols,
.lend__row,
.lend__sec { border-top: 1px solid rgba(61, 90, 148, .42); }

.lend__issued {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 16px 5px;
}

.lend__label { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.lend__sign  { font-size: 22px; line-height: 1; }

.lend__cols {
  display: grid;
  grid-template-columns: 1fr 78px;
  gap: 8px;
  padding: 6px 16px;
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .85;
}

.lend__sec {
  padding: 6px 16px;
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: .8;
}

.lend__row {
  display: grid;
  grid-template-columns: 1fr 78px;
  gap: 8px;
  align-items: baseline;
  padding: 9px 16px;
}

.lend__what { font-size: clamp(12px, 1.02vw, 13.5px); line-height: 1.35; }
.lend__what b { display: block; font-weight: 600; }

.lend__when { font-size: 11px; line-height: 1.35; text-align: right; white-space: nowrap; }

.lend__cols,
.lend__row { position: relative; }

.lend__cols::after,
.lend__row::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 98px;
  border-left: 1px solid rgba(61, 90, 148, .42);
}

/* The date the record was last brought up to date, stamped into the free
   space of the last line just short of the date column — a rubber stamp in
   red ink, put down a little askew and a little unevenly inked. */
.stamp {
  --stamp-ink: #b8413a;
  position: absolute;
  z-index: 1;
  right: calc(98px + 16px);
  top: 50%;
  display: grid;
  justify-items: center;
  gap: 1px;
  padding: 6px 11px 5px;
  /* the stamp's double rule, both inside its box so the ink mask keeps them */
  border: 1.5px solid var(--stamp-ink);
  border-radius: 4px;
  box-shadow: inset 0 0 0 2px var(--lend-paper), inset 0 0 0 3px var(--stamp-ink);
  color: var(--stamp-ink);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateY(-50%) rotate(-6deg);
  opacity: .86;
  mix-blend-mode: multiply;
  /* uneven ink: a fine grain knocks small gaps out of the impression */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='i'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  3.2 0 0 0 -.45'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23i)'/%3E%3C/svg%3E") 0 0 / 120px 120px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='i'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  3.2 0 0 0 -.45'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23i)'/%3E%3C/svg%3E") 0 0 / 120px 120px;
}

.stamp small {
  font-size: 7.5px;
  font-weight: 500;
  letter-spacing: .3em;
}

/* ============================================================
   PAGE TWO, RIGHT — the work
   ============================================================ */

.sheet--two .sheet__front > .leaf__inner,
.sheet--two .sheet__back > .leaf__inner {
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
  align-items: stretch;
  gap: clamp(10px, 1.8%, 18px);
}

.works__head {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(29, 27, 25, .45);
}

.works__label {
  margin: 0;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .7;
}

/* four items filed on one page, each given the same room */
.works {
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 1.4%, 15px);
  min-height: 0;
}

.work {
  position: relative;
  display: grid;
  overflow: hidden;
  grid-template-columns: 33% minmax(0, 1fr);
  min-height: 0;
  background: var(--stock);
  color: inherit;
  text-decoration: none;
  box-shadow: 2px 4px 10px rgba(0, 0, 0, .26);
  transition: transform .3s cubic-bezier(.2, .7, .3, 1),
              box-shadow .3s cubic-bezier(.2, .7, .3, 1);
}

.work:hover,
.work:focus-visible {
  transform: translateY(-3px);
  box-shadow: 3px 9px 18px rgba(0, 0, 0, .32);
}

.work:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* the index colour, down the filed edge of the card */
.work__edge {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 7px;
  background: var(--tab);
}

.work__frame { position: relative; overflow: hidden; background: #fff; }

.work__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* an object cut out on white is shown whole rather than cropped: the frame
   is white too, so what it leaves round the picture is just more paper */
.work__img--whole { object-fit: contain; }

.work__img--print { transition: opacity .5s cubic-bezier(.4, 0, .2, 1); }
.work:hover .work__img--print,
.work:focus-visible .work__img--print { opacity: 0; }

.work__band {
  display: grid;
  align-content: center;
  overflow: hidden;
  gap: clamp(4px, .8vh, 8px);
  min-width: 0;
  padding: clamp(10px, 1.6vh, 16px) clamp(12px, 1.4vw, 20px);
  border-left: 1px dashed #c9c5bb;   /* where the card would tear */
}

.work__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }

.work__name {
  display: inline-block;
  padding: 4px 9px 5px;
  background: var(--ink);
  color: #fff;
  font-family: Urbanist, sans-serif;
  font-weight: 700;
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.1;
}

.work__years { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }

.work__line {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font-size: clamp(11px, .88vw, 12.4px);
  line-height: 1.45;
}

.work__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.bars { display: block; flex: 0 0 auto; width: 86px; height: 16px; fill: var(--ink); }

.work__id { font-size: 9.5px; letter-spacing: .08em; white-space: nowrap; color: var(--ink-soft); }

.work__id b {
  display: inline-block;
  margin-left: 5px;
  padding: 2px 6px 1px;
  font-weight: 400;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
  background: linear-gradient(var(--ink), var(--ink)) no-repeat left center / 0 100%;
  transition: background-size .45s cubic-bezier(.4, 0, .2, 1), color .25s ease .12s;
}

.work:hover .work__id b,
.work:focus-visible .work__id b { background-size: 100% 100%; color: #fff; }

/* ============================================================
   FOOT
   ============================================================ */

.foot {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  width: min(1360px, 100% - var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 0 28px;
  font-size: 11px;
  letter-spacing: .08em;
  color: rgba(240, 237, 230, .45);
}

/* ============================================================
   NARROW — a folder cannot be held open on a phone, so it unfolds
   into the pages it holds, in order
   ============================================================ */

@media (max-width: 899px) {
  body.theme-home { display: block; }

  .book {
    display: grid;
    gap: 22px;
    left: 0;
    /* the screen's width exactly: centred, it would shrink to its content and
       the widest line would push the board past the right edge */
    justify-self: stretch;
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    margin: 0;
    padding: var(--gutter);
    perspective: none;
    transform: none !important;
  }

  .leaf,
  .sheet,
  .sheet__face {
    position: static;
    width: auto;
    height: auto;
    transform: none !important;
    backface-visibility: visible;
  }

  .sheet { transform-style: flat; box-shadow: none; }
  .ptab { display: none; }

  /* nothing is folded here — each page lies on its own board, so there is no
     spine to crease */
  .book::after { display: none; }
  .cover::after { display: none; }
  .leaf--left { display: none; }
  .tabs { display: none; }

  .sheet--cover { order: 1; }
  .sheet--one   { order: 2; display: grid; gap: 22px; }
  .sheet--two   { order: 3; }
  .sheet--one > .sheet__face { position: relative; }
  .leaf--right  { display: none; }               /* the inside of the board: nothing to read */

  .cover { cursor: default; filter: none; }
  .cover::before { display: none; }   /* no tab on a phone, so nothing to notch */
  .ftab { display: none; }
  .cover__face { align-content: center; min-height: 58vh; padding: 40px 16px; }
  /* the three fields keep to one line each, so on a phone they set closer
     rather than push the label past the cover's edge */
  .cover__fields > div { padding: 6px 7px 7px; }
  .cover__fields dd { font-size: 10px; letter-spacing: 0; }
  .cover__inside { display: none; }

  /* each page keeps its board, so a phone reads the same material as a desk */
  .sheet__face,
  .leaf--right {
    background: var(--grain), var(--cover);
    border-radius: 4px;
    box-shadow: 4px 8px 20px rgba(0, 0, 0, .38);
  }

  /* each page keeps its side: a right-hand page is held at the spine on its
     left, a left-hand page (the backs) on its right, the margin of board
     showing on the other three sides — as on the desk */
  .leaf__inner { height: auto; }

  /* laid out one after another there is no spine to bind them to */
  .leaf__inner,
  .sheet__back > .leaf__inner {
    padding: var(--page-head) var(--page-pad) var(--page-pad);
    background-image: none;
  }

  .leaf__inner::after,
  .sheet__back > .leaf__inner::after { left: 50%; width: min(76%, 440px); }

  .sheet--two .sheet__front > .leaf__inner,
  .sheet--two .sheet__back > .leaf__inner { grid-template-rows: auto auto; }
  .sheet--two { display: grid; gap: 22px; }
  .works { grid-template-rows: none; gap: 18px; }
  .work { grid-template-columns: minmax(0, 1fr); }
  .work__frame { aspect-ratio: 16 / 10; }
  .work__band { border-left: 0; border-top: 1px dashed #c9c5bb; padding: 16px 18px; }

  /* the card is only as wide as a phone: when the control number will not sit
     beside the barcode it takes the next line, and the card grows to suit */
  .work__foot { flex-wrap: wrap; row-gap: 10px; }
  .work__id { margin-left: 0; }   /* the wrapped line starts under the barcode */
  .work__line { -webkit-line-clamp: none; display: block; }

  /* the row is too narrow for the stamp to sit beside the school's name, so
     it is put down just under it instead, same size, same tilt */
  .stamp {
    position: static;
    grid-column: 1;
    justify-self: start;
    margin: 10px 0 2px 4px;
    transform: rotate(-6deg);
  }
  .badge { margin-inline: auto; }
  .foot { padding: 24px var(--gutter) 40px; width: auto; }
}

/* A filed card gets a quarter of the page whatever the page is, so on a short
   screen the summary gives up lines rather than spilling out of its card. */
/* A filed card gets a quarter of the page whatever the page is. On a short
   screen the card's own spacing is drawn in first, so the summary keeps its
   three lines for as long as it can; past that, the script beside the folder
   measures each card and shows only the whole lines that fit, ending in an
   ellipsis — a line is never cut through. These rules are the fallback for
   when the script has not run. */
@media (min-width: 900px) and (max-height: 860px) {
  .work__band { padding-block: 6px; gap: 4px; }
  .work__name { padding: 3px 8px 4px; font-size: 15px; }
  .work__years { font-size: 9.5px; }
  .bars { height: 13px; }
}

@media (min-width: 900px) and (max-height: 700px) {
  .work__line { -webkit-line-clamp: 2; }
}

/* the record card is filled in line by line, so on a short screen its lines
   are ruled closer together rather than run off the page */
@media (min-width: 900px) and (max-height: 760px) {
  .lend__head { padding-bottom: 10px; }
  .lend__issued { padding: 5px 16px 3px; }
  .lend__cols, .lend__sec { padding-block: 4px; }
  .lend__row { padding-block: 6px; }
  .lend__what { font-size: 12px; line-height: 1.3; }
  .lend__when { font-size: 10.5px; line-height: 1.3; }
}
@media (min-width: 900px) and (max-height: 620px) {
  .lend__title { font-size: 17px; }
  .lend__row { padding-block: 4px; }
  .lend__what { font-size: 11.5px; line-height: 1.25; }
  .lend__when { font-size: 10px; line-height: 1.25; }
}

@media (min-width: 900px) and (max-height: 600px) {
  .work__line { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .book, .sheet, .work, .work__img--print, .work__id b, .tabs__tab { transition: none; }
  .work:hover, .work:focus-visible { transform: none; }
}