/* ======================================================================
   THE CARD — a folded vCard. Minimal Luxury.

   Palette
     #141413  Ink        type, and the few lines that must hold
     #AFACA1  Stone      the deeper grey
     #BDBBB2  Mist       the middle grey
     #C9C8BF  Pearl      the paper

   Black is a note, not the ground. Everything sits on paper.
   ====================================================================== */

:root{
  --ink:#141413;
  --stone:#AFACA1;
  --mist:#BDBBB2;
  --pearl:#C9C8BF;

  --paper:#CFCEC6;
  --paper-2:#C6C5BC;
  --paper-top:#D4D3CB;

  --t-1:rgba(20,20,19,.88);
  --t-2:rgba(20,20,19,.66);
  --t-3:rgba(20,20,19,.44);
  --t-4:rgba(20,20,19,.26);

  --line:rgba(20,20,19,.14);
  --line-soft:rgba(20,20,19,.075);
  --line-hard:rgba(20,20,19,.30);

  --pale:#F2F1EA;
  --sunk:#B9B8B0;
  --ink-rgb:20,20,19;
  --pearl-rgb:201,200,191;
  --bp-1:#DEDDD5;  --bp-2:#D5D4CC;  --bp-3:#CAC9C0;  --bp-rgb:222,221,213;
  --bd-1:#3E3E39;  --bd-2:#262622;  --bd-3:#1A1A17;  --bd-4:#111110;
  --room:linear-gradient(128deg,#A9A69B 0%,#C9C8BF 42%,#DAD9D2 72%,#CFCEC6 100%);

  --leaf:linear-gradient(168deg,#D5D4CC 0%,#CDCCC4 46%,#C5C4BB 100%);
  --edge:linear-gradient(90deg,rgba(20,20,19,0),rgba(20,20,19,.26) 22%,rgba(20,20,19,.42) 50%,rgba(20,20,19,.26) 78%,rgba(20,20,19,0));

  --display:'Cinzel','Cormorant Garamond',Garamond,serif;
  --serif:'Cormorant Garamond',Garamond,'Times New Roman',serif;
  --sans:'Jost',-apple-system,'Helvetica Neue',Arial,sans-serif;

  /* the reading face and the label face. Garamond has more body than
     Cormorant at this size, so it holds its colour against the stone
     instead of thinning away; Marcellus gives the small capitals a
     Roman weight that Jost, being a grotesque, cannot. */
  --text:'EB Garamond','Cormorant Garamond',Garamond,'Times New Roman',serif;
  --label:'Marcellus','Cinzel',Garamond,serif;
  /* the plate captions, and nothing else on the site — a wall-label
     mono, so a line under a photograph never reads as body copy */
  --plate:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;

  --ease:cubic-bezier(.16,.84,.44,1);
  --paperE:cubic-bezier(.22,.90,.28,1);
  --swing:cubic-bezier(.66,0,.14,1);

  --pw:clamp(258px,30.2vw,470px);
  --ph:min(84vh,860px);
  --pad:clamp(18px,1.95vw,30px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{height:100%}
body{
  min-height:100%;background:var(--pearl);color:var(--ink);
  font-family:var(--sans);font-weight:300;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--ink);color:var(--pearl)}

/* ======================================================================
   THE ROOM
   ====================================================================== */
.room{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:var(--room)}
.room__gl{position:absolute;inset:0;width:100%;height:100%;display:block}
.room__grain{position:absolute;inset:-50%;opacity:.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,2%)}
  40%{transform:translate(3%,-3%)}60%{transform:translate(-2%,-2%)}80%{transform:translate(2%,3%)}100%{transform:translate(0,0)}}

/* ======================================================================
   THE DESK
   ====================================================================== */
.desk{position:fixed;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;
  perspective:2600px;perspective-origin:50% 44%}

/* ======================================================================
   THE FOLD
   ====================================================================== */
.fold{
  position:relative;width:var(--pw);height:var(--ph);
  transform-style:preserve-3d;
  transition:width 1.18s var(--swing);
  transition-delay:.05s;
}
body.is-open .fold{width:calc(var(--pw) * 3);transition-delay:0s}

.fold.fx-open{animation:heave 1.75s cubic-bezier(.5,0,.16,1) both}
.fold.fx-shut{animation:settle 1.35s cubic-bezier(.5,0,.2,1) both}
@keyframes heave{
  0%  {transform:translateY(0)     scale(.972) rotateX(4.5deg)}
  30% {transform:translateY(-20px) scale(1.022) rotateX(-1.6deg)}
  62% {transform:translateY(-4px)  scale(1.004) rotateX(.4deg)}
  100%{transform:translateY(0)     scale(1)     rotateX(0)}
}
@keyframes settle{
  0%  {transform:translateY(0)     scale(1)}
  34% {transform:translateY(-13px) scale(1.014) rotateX(-1.4deg)}
  100%{transform:translateY(0)     scale(1)     rotateX(0)}
}

.fold::before,.fold::after{content:'';position:absolute;left:0;right:0;height:1px;z-index:30;
  background:var(--edge);opacity:0;pointer-events:none;transition:opacity .7s var(--ease)}
.fold::before{top:-1px}
.fold::after{bottom:-1px}
body.is-open .fold::before,body.is-open .fold::after{opacity:.5;transition-delay:.72s}

.fold__cast{position:absolute;left:3%;right:3%;bottom:-5%;height:12%;z-index:-1;
  background:radial-gradient(50% 50% at 50% 50%,rgba(20,20,19,.34),transparent 72%);
  filter:blur(18px);transition:transform 1.2s var(--swing),opacity 1.2s var(--swing)}
body.is-open .fold__cast{transform:scaleY(.66);opacity:.85}

.fold__edge{position:absolute;top:2%;bottom:2%;left:calc(var(--pw) - 2px);width:8px;z-index:5;
  border-radius:0 2px 2px 0;
  background:linear-gradient(90deg,#BFBEB5,#D8D7D0 24%,#C3C2B9 48%,#D5D4CD 72%,#B6B5AC);
  box-shadow:2px 0 8px rgba(20,20,19,.20);
  transition:opacity .5s var(--ease) .5s}
body.is-open .fold__edge{opacity:0;transition-delay:0s;transition-duration:.28s}

/* ----------------------------------------------------------------------
   THE PANELS
---------------------------------------------------------------------- */
.panel{
  position:absolute;top:0;height:100%;width:var(--pw);
  transform-origin:left center;transform-style:preserve-3d;backface-visibility:hidden;
  transition:transform 1.2s var(--swing);
}
.panel--1{left:0;transform:rotateY(0deg)}
.panel--2{left:var(--pw);transform:rotateY(96deg);transition-delay:.13s}
.panel--3{left:calc(var(--pw) * 2);transform:rotateY(96deg);transition-delay:0s}
body.is-open .panel--2{transform:rotateY(0deg);transition-delay:.26s}
body.is-open .panel--3{transform:rotateY(0deg);transition-delay:.44s}

.panel__paper{
  position:absolute;inset:0;overflow:hidden;background:var(--leaf);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 0 70px rgba(20,20,19,.05),
    0 26px 60px rgba(20,20,19,.26);
}
.panel--1 .panel__paper{border-radius:3px 0 0 3px}
.panel--3 .panel__paper{border-radius:0 3px 3px 0}

.panel__shade{position:absolute;inset:0;pointer-events:none;z-index:6;opacity:1;
  background:linear-gradient(90deg,rgba(20,20,19,.62) 0%,rgba(20,20,19,.30) 42%,rgba(20,20,19,.10) 100%);
  transition:opacity 1.05s var(--swing);transition-delay:.13s}
.panel--1 .panel__shade{opacity:0;background:linear-gradient(90deg,rgba(20,20,19,.22),transparent 34%)}
.panel--3 .panel__shade{transition-delay:0s}
body.is-open .panel__shade{opacity:0}
body.is-open .panel--2 .panel__shade{transition-delay:.26s}
body.is-open .panel--3 .panel__shade{transition-delay:.44s}

.panel__crease{position:absolute;top:0;bottom:0;right:-7px;width:14px;z-index:7;pointer-events:none;
  background:linear-gradient(90deg,rgba(20,20,19,0),rgba(20,20,19,.20) 42%,rgba(20,20,19,.24) 50%,rgba(255,255,255,.34) 58%,rgba(20,20,19,0));
  opacity:0;transition:opacity .6s var(--ease)}
body.is-open .panel__crease{opacity:1;transition-delay:.62s}

/* ----------------------------------------------------------------------
   THE SCROLLING COLUMN
---------------------------------------------------------------------- */
.panel__scroll{
  position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;scroll-behavior:smooth;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:rgba(20,20,19,.26) transparent;
  padding:0 var(--pad) calc(var(--pad) * 2);
  opacity:0;transition:opacity .6s var(--ease)}
body.is-open .panel__scroll{opacity:1;transition-delay:.56s}
.panel__scroll::-webkit-scrollbar{width:3px}
.panel__scroll::-webkit-scrollbar-track{background:transparent}
.panel__scroll::-webkit-scrollbar-thumb{background:rgba(20,20,19,.24);border-radius:3px}
.panel__scroll::-webkit-scrollbar-thumb:hover{background:rgba(20,20,19,.44)}

/* The head of each section stays put while the rest scrolls under it.
   It used to end in a grey band — a darker stop between the paper and
   nothing, which read as a dark line under Introduction, Involvements
   and Moments. It fades straight from paper to clear now, so whatever
   passes under it dissolves rather than meeting an edge. */
.ribbon{position:sticky;top:0;z-index:9;display:flex;align-items:center;gap:12px;
  padding:14px 0 12px;margin:0 0 4px;
  background:linear-gradient(180deg,var(--paper-top) 0%,var(--paper-top) 54%,
    color-mix(in srgb,var(--paper-top) 62%,transparent) 76%,transparent 100%)}
.ribbon--bare{display:block;position:sticky;height:30px;padding:0;margin:0;gap:0;
  background:linear-gradient(180deg,var(--paper-top) 0%,var(--paper-top) 44%,
    color-mix(in srgb,var(--paper-top) 58%,transparent) 70%,transparent 100%)}
/* engines without color-mix: straight to clear, which a gradient
   interpolates without darkening */
@supports not (background:color-mix(in srgb,red 50%,transparent)){
  .ribbon{background:linear-gradient(180deg,var(--paper-top) 56%,transparent 100%)}
  .ribbon--bare{background:linear-gradient(180deg,var(--paper-top) 46%,transparent 100%)}
}
.ribbon--bare::after{content:'';position:absolute;left:50%;bottom:7px;
  width:34px;height:1px;transform:translateX(-50%);background:var(--edge);opacity:.5}
.ribbon__rule{flex:1;height:1px;background:var(--edge);opacity:.55}
.ribbon__tag{font-family:var(--display);font-weight:700;font-size:11.4px;letter-spacing:.2em;
  text-transform:uppercase;white-space:nowrap;color:var(--ink);
  padding:8px 14px;border:1px solid var(--line)}

/* the two rails beside the Introduction, hinting there is more below */
.creep{position:absolute;top:38px;bottom:22px;width:1px;z-index:8;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,20,19,.10),rgba(20,20,19,0) 60%);
  opacity:0;transition:opacity .7s var(--ease)}
body.is-open .creep{opacity:1;transition-delay:1s}
.creep--l{left:9px}
.creep--r{right:9px}
.creep i{position:absolute;left:-1px;width:3px;height:3px;border-radius:50%;
  background:var(--ink);opacity:.5;animation:creep 3.4s var(--ease) infinite}
.creep--r i{animation-delay:1.7s}
@keyframes creep{
  0%{transform:translateY(0);opacity:0}
  16%{opacity:.55}
  70%{opacity:.28}
  100%{transform:translateY(64px);opacity:0}
}

/* ======================================================================
   THE COVER
   ====================================================================== */
.cover{
  position:absolute;left:0;top:0;width:var(--pw);height:100%;z-index:40;
  transform-origin:left center;transform-style:preserve-3d;cursor:pointer;
  transition-property:transform,opacity;
  transition-duration:1.25s,.45s;
  transition-timing-function:var(--swing),linear;
  transition-delay:.34s,.42s;
}
body.is-loading .cover{opacity:0;transition-duration:.5s,.5s;transition-delay:0s,0s}
body.is-open .cover{
  transform:rotateY(118deg) translateZ(3px);opacity:0;pointer-events:none;
  transition-delay:0s,.72s}
/* the tug, just before it swings */
.cover.tugged{animation:tug .34s var(--ease)}
@keyframes tug{0%{transform:none}42%{transform:translateY(5px) rotateZ(.22deg)}100%{transform:none}}

.cover__face{position:absolute;inset:0;backface-visibility:hidden;overflow:hidden;border-radius:3px;
  box-shadow:
    0 30px 64px rgba(20,20,19,.34),
    0 3px 14px rgba(20,20,19,.20),
    inset 0 0 0 1px rgba(255,255,255,.30);
}
.cover__front{background:var(--paper)}
.cover__back{transform:rotateY(180deg);
  background:linear-gradient(150deg,#D6D5CD,#C7C6BD 58%,#BEBDB4);
  display:grid;place-items:center}

.cover__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 38%;
  filter:saturate(.96) contrast(1.02);
  transform:scale(1.02);transition:transform 1.6s var(--ease)}
.cover:hover .cover__img{transform:scale(1.05)}

/* the photograph runs into paper at the foot, so the type sits on a
   surface rather than fighting the picture */
.cover__veil{position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(207,206,198,.30) 0%,rgba(207,206,198,0) 16%,
      rgba(207,206,198,0) 44%,rgba(207,206,198,.72) 62%,rgba(207,206,198,.98) 72%,var(--paper) 76%);}

.cover__sheen{position:absolute;inset:-40%;pointer-events:none;
  background:linear-gradient(104deg,transparent 40%,rgba(255,255,255,.16) 47%,rgba(255,255,255,.30) 50%,rgba(255,255,255,.14) 53%,transparent 60%);
  transform:translateX(-34%);animation:sheen 9s var(--ease) infinite}
@keyframes sheen{0%,10%{transform:translateX(-44%)}62%,100%{transform:translateX(44%)}}

.cover__frame{position:absolute;inset:12px;pointer-events:none;
  border:1px solid rgba(20,20,19,.20);
  opacity:1;transform:scale(1.02);
  transition:opacity 1.2s var(--ease) .3s,transform 1.4s var(--paperE) .3s}
body.is-loading .cover__frame{opacity:0;transform:scale(1.07)}

/* the plinth: everything the cover says, at the foot, on paper */
.cover__plinth{position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:0 clamp(22px,2.6vw,32px) clamp(22px,3.2vh,32px);text-align:center;
  container-type:inline-size}
.cover__title{font-family:var(--serif);font-weight:600;font-style:italic;
  font-size:clamp(24px,2.35vw,31px);line-height:1.2;color:var(--ink);margin-bottom:11px}
.cover__copy{font-family:var(--sans);font-weight:500;font-size:13.4px;line-height:1.7;
  letter-spacing:.02em;color:rgba(var(--ink-rgb),.84);max-width:32ch;margin:0 auto}
/* no rule over the name any more — the space alone sets it apart. It is
   one line, and never wider than the card: on a smaller laptop the card is
   narrower than the name was set for, and the end of it was cut off */
.cover__name{
  font-family:var(--display);font-weight:600;margin-top:20px;
  font-size:clamp(14.6px,1.45vw,18.4px);
  font-size:min(clamp(14.6px,1.45vw,18.4px),calc(100cqw / 20.1));
  line-height:1.3;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink);white-space:nowrap}
.cover__name i{font-family:var(--serif);font-style:italic;text-transform:none;
  font-size:1.16em;letter-spacing:.02em;padding-right:.22em}

.colophon{text-align:center;padding:30px}
.colophon__rule{display:block;width:40px;height:1px;margin:0 auto;background:rgba(20,20,19,.28)}
.colophon__name{font-family:var(--display);font-weight:500;font-size:10px;letter-spacing:.20em;
  text-transform:uppercase;line-height:1.7;margin:18px 0 7px;color:var(--ink)}
.colophon__name i{font-family:var(--serif);font-style:italic;text-transform:none;
  font-size:1.16em;letter-spacing:.02em;padding-right:.16em}
.colophon__line{font-size:8px;letter-spacing:.30em;text-transform:uppercase;color:var(--t-3);
  margin-bottom:18px}

/* ======================================================================
   THE RIBBON — the pull that opens the card

   Out on the edge from the first moment, black, with a swallowtail cut
   into its free end. Hover and it slides a little further out of the
   book; press it and it is pulled clear before the card swings.
   ====================================================================== */
.tab{position:absolute;z-index:46;
  top:50%;left:calc(var(--pw) - 34px);
  transform:translateY(-50%);
  display:flex;align-items:center;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:opacity .5s var(--ease),transform .55s var(--paperE)}
body.is-open .tab{opacity:0;pointer-events:none;transition-duration:.26s}
body.is-loading .tab{opacity:0}

/* the part that lies on the cover, folded over the edge */
.tab__fold{position:absolute;left:0;top:50%;width:16px;height:30px;
  margin-top:-15px;z-index:0;
  background:linear-gradient(180deg,#000,#141413 44%,#000);
  box-shadow:inset -3px 0 5px rgba(0,0,0,.7)}

/* the flag, with the swallowtail */
.tab__flag{position:relative;z-index:1;display:block;
  padding:9px 26px 9px 18px;
  background:linear-gradient(180deg,#232322,#0B0B0A 58%,#000);
  box-shadow:0 8px 20px rgba(20,20,19,.42),
    inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(0,0,0,.6);
  -webkit-clip-path:polygon(0 0,100% 0,calc(100% - 13px) 50%,100% 100%,0 100%);
  clip-path:polygon(0 0,100% 0,calc(100% - 13px) 50%,100% 100%,0 100%)}
.tab__flag i{display:block;font-style:normal;
  font-family:var(--label);font-weight:400;
  font-size:9.6px;letter-spacing:.30em;text-transform:uppercase;
  color:#EFEEE7;white-space:nowrap}
/* the crease where it comes over the edge */
.tab__flag::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;
  background:linear-gradient(90deg,rgba(0,0,0,.85),rgba(255,255,255,.10))}

.tab:hover{transform:translateY(-50%) translateX(9px)}
.tab:hover .tab__flag{box-shadow:0 12px 26px rgba(20,20,19,.50),
  inset 0 1px 0 rgba(255,255,255,.20),inset 0 -1px 0 rgba(0,0,0,.6)}
.tab:active{transform:translateY(-50%) translateX(4px)}
.tab:focus{outline:none}
.tab:focus-visible .tab__flag{box-shadow:0 0 0 2px rgba(20,20,19,.5),0 12px 26px rgba(20,20,19,.5)}

/* pressed: pulled clear of the book */
.tab.pop{pointer-events:none;transform:translateY(-50%) translateX(30px);opacity:0;
  transition:transform .42s cubic-bezier(.4,0,.2,1),opacity .42s linear .12s}

/* ======================================================================
   THE BOOKMARK
   ====================================================================== */
.mark{position:absolute;z-index:60;
  top:calc(50% - var(--ph)/2 - 1px);
  left:calc(50% + var(--pw)*1.5 - 60px);
  width:36px;height:52px;
  opacity:0;transform:translateY(-16px);pointer-events:none;
  transition:opacity .5s var(--ease),transform .6s var(--paperE)}
body.is-open .mark{opacity:1;transform:translateY(0);pointer-events:auto;transition-delay:1.02s}
/* while the book is up it has its own cross in the bar — two of them, one
   of them smeared by the blur behind the glass, read as a mistake */
body.plate-open .mark{opacity:0;pointer-events:none;transition-delay:0s}
.mark__body{position:absolute;inset:0;display:grid;place-items:center;padding-bottom:9px;
  color:var(--pearl);background:var(--ink);
  clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%);
  box-shadow:0 8px 18px rgba(20,20,19,.32);
  transition:transform .4s var(--ease)}
.mark:hover .mark__body{transform:translateY(3px)}

/* ======================================================================
   SAVE CONTACT — always within reach
   ====================================================================== */
.dock{position:fixed;left:50%;bottom:clamp(12px,2.2vh,26px);transform:translateX(-50%) translateY(14px);
  z-index:120;opacity:0;pointer-events:none;display:flex;gap:10px;white-space:nowrap;
  transition:opacity .5s var(--ease),transform .6s var(--paperE)}
body.is-open .dock{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto;
  transition-delay:1.1s}
body.plate-open .dock{opacity:0;pointer-events:none;transition-delay:0s}

.save{position:relative;display:flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 24px;overflow:hidden;isolation:isolate;
  border:1px solid rgba(20,20,19,.26);border-radius:999px;
  background:rgba(207,206,198,.86);backdrop-filter:blur(10px);
  font-size:8.8px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink);
  box-shadow:0 8px 22px rgba(20,20,19,.20);
  transition:border-color .45s var(--ease),color .45s var(--ease)}
.save__fill{position:absolute;inset:0;z-index:0;background:var(--ink);
  transform:translateY(101%);transition:transform .55s var(--paperE)}
.save > span:not(.save__fill){position:relative;z-index:1}
.save:hover{border-color:var(--ink);color:var(--pearl)}
.save:hover .save__fill{transform:translateY(0)}
.save__x{font-size:13px;line-height:1;transition:transform .5s var(--paperE)}
.save:hover .save__x{transform:rotate(90deg)}
.save.done{color:var(--pearl)}
.save.done .save__fill{transform:translateY(0)}
.save__i{position:relative;z-index:1;width:12px;height:12px;fill:none;stroke:currentColor;
  stroke-width:1.3;stroke-linejoin:round;stroke-linecap:round}

/* ======================================================================
   PANE CONTENT
   ====================================================================== */
.pane{padding-top:2px}
.pane > *{opacity:0;transform:translateY(14px);
  transition:opacity .7s var(--ease),transform .8s var(--paperE)}
body.is-open .pane.lit > *{opacity:1;transform:none}
.pane.lit > *:nth-child(1){transition-delay:.05s}
.pane.lit > *:nth-child(2){transition-delay:.11s}
.pane.lit > *:nth-child(3){transition-delay:.17s}
.pane.lit > *:nth-child(4){transition-delay:.23s}
.pane.lit > *:nth-child(5){transition-delay:.29s}
.pane.lit > *:nth-child(n+6){transition-delay:.34s}

.rv{opacity:0;transform:translateY(14px);
  transition:opacity .62s var(--ease),transform .72s var(--paperE)}
.rv.in{opacity:1;transform:none}

.sub{display:flex;align-items:center;justify-content:center;gap:12px;margin:17px 0 9px;text-align:center}
.pane > .sub:first-child{margin-top:2px}
.sub__t{font-family:var(--label);font-weight:400;font-size:9.4px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--t-2);white-space:nowrap}
#paneOne > .sub:first-child .sub__t,
#paneThree > .sub:first-child .sub__t{font-family:var(--display);font-weight:700;font-size:11px;
  letter-spacing:.2em;color:var(--ink)}
.sub__r{flex:1;height:1px}
.sub__r:first-child{background:linear-gradient(90deg,transparent,var(--line))}
.sub__r:last-child{background:linear-gradient(90deg,var(--line),transparent)}

.hint{font-size:7.6px;letter-spacing:.22em;text-transform:uppercase;color:var(--t-4);
  margin:-4px 0 9px;display:flex;align-items:center;gap:7px}
.hint::before{content:'';width:14px;height:1px;background:var(--line);flex:none}

.body{margin-top:2px}
.body p{font-family:var(--text);font-weight:600;font-size:16.4px;line-height:1.74;
  color:rgba(20,20,19,.88);margin-bottom:15px;letter-spacing:.002em}
.body p:last-child{margin-bottom:0}
/* the opening letter, a shade larger than the line and no more */
.body p:first-child::first-letter{
  font-family:var(--display);font-weight:600;font-size:1.36em;
  letter-spacing:.02em;color:var(--ink)}

.folio{margin-top:32px;padding-top:14px;border-top:1px solid var(--line-soft);
  display:flex;align-items:center;justify-content:space-between;
  font-family:var(--display);font-size:8.4px;letter-spacing:.26em;color:var(--t-4)}

/* ======================================================================
   THE LEAD — two photographs, cross-fading, neither cropped
   ====================================================================== */
.lead2{position:relative;z-index:3;overflow:hidden;aspect-ratio:4/3;
  background:var(--sunk);margin:0 0 26px;transform-origin:50% 46%;
  box-shadow:0 10px 24px rgba(20,20,19,.18),inset 0 0 0 1px rgba(20,20,19,.10);
  transition:transform .95s var(--paperE),box-shadow .95s var(--ease)}
/* a photograph belonging to an involvement stands a little out of the page */
.lead2.out{transform:scale(1.055);
  box-shadow:0 26px 54px rgba(20,20,19,.34),inset 0 0 0 1px rgba(20,20,19,.16)}
.lead2__edge{position:absolute;inset:7px;z-index:4;pointer-events:none;
  border:1px solid rgba(242,241,234,.16);opacity:0;
  transition:opacity .9s var(--ease)}
.lead2.out .lead2__edge{opacity:1}
.lf{position:absolute;inset:0;opacity:0;transition:opacity 1.5s var(--ease)}
.lf.on{opacity:1}
/* the line that was written under the photograph */
.lf__cap{position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:34px 18px 13px;
  background:linear-gradient(180deg,rgba(20,20,19,0),rgba(20,20,19,.58) 48%,rgba(20,20,19,.86));
  opacity:0;transform:translateY(7px);
  transition:opacity .85s var(--ease) .3s,transform .85s var(--paperE) .3s}
.lf.on .lf__cap{opacity:1;transform:none}
.lf__cap i{display:block;font-style:normal;font-family:var(--plate);font-weight:300;
  font-size:10.6px;letter-spacing:.10em;line-height:1.92;color:#F4F3EC;text-align:center;
  text-shadow:0 1px 7px rgba(20,20,19,.8)}
.lf__bg{position:absolute;inset:-12%;width:124%;height:124%;object-fit:cover;
  filter:blur(26px) saturate(.6) brightness(1.04)}
.lf__fg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 8px 20px rgba(20,20,19,.28))}

/* ======================================================================
   SHARE DETAILS — the form
   ====================================================================== */
.share{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
  padding:max(16px,env(safe-area-inset-top,0px)) 16px max(16px,env(safe-area-inset-bottom,0px));
  background:rgba(var(--ink-rgb),.58);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;transition:opacity .38s var(--ease)}
.share[hidden]{display:none}
.share.in{opacity:1}
.share__card{position:relative;width:100%;max-width:400px;max-height:100%;overflow:auto;
  padding:30px 26px 24px;background:var(--leaf);border-radius:3px;
  box-shadow:0 24px 60px rgba(20,20,19,.35);
  transform:translateY(14px) scale(.985);transition:transform .5s var(--paperE)}
.share.in .share__card{transform:none}
.share__x{position:absolute;top:10px;right:10px;width:38px;height:38px;display:grid;place-items:center;
  color:var(--t-2);border:1px solid transparent;transition:color .3s,border-color .3s}
.share__x:hover{color:var(--ink);border-color:var(--line)}
.share__k{font-family:var(--display);font-weight:600;font-size:9.6px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--t-3)}
.share__t{margin-top:8px;font-family:var(--serif);font-style:italic;font-weight:600;font-size:28px;
  line-height:1.15;color:var(--ink)}
.share__s{margin:8px 0 18px;font-family:var(--text);font-weight:500;font-size:14.5px;line-height:1.5;
  color:rgba(var(--ink-rgb),.78)}
.fld{display:block;margin-top:14px}
.fld span{display:block;font-family:var(--display);font-weight:700;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink)}
.fld input{display:block;width:100%;margin-top:6px;padding:9px 2px 8px;
  font-family:var(--text);font-weight:500;font-size:17px;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid rgba(var(--ink-rgb),.35);border-radius:0;
  outline:none;transition:border-color .3s}
.fld input:focus{border-bottom-color:var(--ink);box-shadow:0 1px 0 var(--ink)}
.share__hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.share__note{min-height:20px;margin-top:14px;font-family:var(--text);font-weight:500;font-size:14px;
  line-height:1.45;color:var(--t-2)}
.share__note.is-err{color:#8a2b22}
.share__note.is-ok{color:var(--ink)}
.share__send{display:block;width:100%;margin-top:8px;padding:14px 20px;border-radius:999px;
  background:var(--ink);color:var(--pearl);font-family:var(--display);font-weight:700;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;
  transition:opacity .3s}
.share__send:disabled{opacity:.6;cursor:default}
.share__mail{display:block;width:100%;margin-top:10px;padding:11px 20px;border-radius:999px;
  border:1px solid rgba(var(--ink-rgb),.4);color:var(--ink);font-family:var(--display);font-weight:600;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;cursor:pointer}
.share__mail[hidden]{display:none}

/* ======================================================================
   I — INVOLVEMENTS
   ====================================================================== */
.roles{border-top:1px solid var(--line-soft)}
.role{display:block;width:100%;text-align:left;position:relative;
  padding:7px 30px 8px 30px;border-bottom:1px solid var(--line-soft);cursor:pointer;
  transition:background .4s var(--ease),padding-left .45s var(--paperE)}
.role::before{content:'';position:absolute;left:0;top:0;bottom:0;width:1px;
  background:var(--ink);transform:scaleY(0);transform-origin:top;
  transition:transform .5s var(--paperE)}
.role:hover{background:rgba(20,20,19,.045);padding-left:36px}
.role:hover::before{transform:scaleY(1)}
/* lit while its photograph is showing in the Introduction */
.role.spot{padding-left:36px;
  background:linear-gradient(90deg,rgba(20,20,19,.115),rgba(20,20,19,.035) 58%,rgba(20,20,19,0))}
.role.spot::before{transform:scaleY(1);width:2px}
.role.spot .role__org{color:var(--ink)}
.role.spot .role__n{color:var(--t-2)}
.role.spot .role__go{color:var(--ink);transform:translateY(-50%) translateX(2px)}
.role__n{position:absolute;left:2px;top:10px;font-family:var(--display);font-size:8.6px;
  letter-spacing:.16em;color:var(--t-4)}
.role__org{display:block;font-family:var(--display);font-weight:600;font-size:11.2px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink);line-height:1.44}
.role__role{display:block;font-size:8.2px;letter-spacing:.20em;text-transform:uppercase;
  color:rgba(var(--ink-rgb),.74);line-height:1.5;margin-top:3px}
/* the address, under the designation — mono and lower case, so it reads
   as something to copy down rather than as more of the title */
.role__mail{display:block;font-family:var(--plate);font-weight:400;font-size:8.8px;
  letter-spacing:.015em;color:rgba(var(--ink-rgb),.72);line-height:1.5;margin-top:2px;
  max-width:calc(100% - 16px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.role__go{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-size:11px;line-height:1;color:var(--t-4);
  transition:transform .5s var(--paperE),color .4s}
.role:hover .role__go{color:var(--ink);transform:translateY(-50%) translateX(2px)}
.role__site{position:absolute;right:-2px;top:50%;transform:translateY(-50%);
  width:26px;height:26px;display:grid;place-items:center;
  font-size:10px;color:var(--t-4);opacity:0;
  transition:opacity .4s var(--ease),color .4s}
.role:hover .role__site{opacity:1}
.role__site:hover{color:var(--ink)}

/* ======================================================================
   BRANDS — the marks alone, on paper plates
   ====================================================================== */
/* five to a row rather than four: a fifth smaller each, which is
   still comfortably above the size a mark stops being readable */
.brands{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:6px}
.brand{position:relative;display:block;width:calc(20% - 4.8px)}
.brand__t{display:block;position:relative;aspect-ratio:5/4;overflow:hidden;
  background:var(--pearl);border-radius:2px;
  box-shadow:0 2px 7px rgba(20,20,19,.14),inset 0 0 0 1px rgba(20,20,19,.11);
  transition:transform .5s var(--paperE),box-shadow .45s var(--ease)}
.brand img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  padding:6px;mix-blend-mode:multiply;transition:transform .55s var(--paperE)}
.brand:hover .brand__t{transform:translateY(-2px);
  box-shadow:0 6px 14px rgba(20,20,19,.20),inset 0 0 0 1px rgba(20,20,19,.28)}
.brand:hover img{transform:scale(1.06)}

/* ======================================================================
   ALBUMS — two to a row, photographs shown whole
   ====================================================================== */
.books{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.book{position:relative;display:block;text-align:left;overflow:hidden;
  background:var(--sunk);
  box-shadow:0 7px 18px rgba(20,20,19,.18),inset 0 0 0 1px rgba(20,20,19,.10);
  transition:transform .55s var(--paperE),box-shadow .45s var(--ease)}
.book:hover{transform:translateY(-3px);
  box-shadow:0 12px 26px rgba(20,20,19,.26),inset 0 0 0 1px rgba(20,20,19,.30)}
.book__shot{display:block;position:relative;aspect-ratio:4/3;overflow:hidden}
.book__bg{position:absolute;inset:-14%;width:128%;height:128%;object-fit:cover;
  filter:blur(15px) saturate(.72) brightness(1.02);
  transition:transform .9s var(--paperE)}
.book__fg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 5px 14px rgba(20,20,19,.34));
  transition:transform .8s var(--paperE)}
.book--cover .book__fg{object-fit:cover}
.book--cover .book__bg{display:none}
.book:hover .book__fg{transform:scale(1.045)}
.book:hover .book__bg{transform:scale(1.05)}
.book.bw .book__fg{filter:grayscale(1) drop-shadow(0 5px 14px rgba(20,20,19,.34))}
.book.bw .book__bg{filter:grayscale(1) blur(18px) brightness(1.05)}
.book.bwc .book__fg{filter:grayscale(1) drop-shadow(0 5px 14px rgba(20,20,19,.34))}
.book.bwc .book__bg{filter:grayscale(1) blur(18px) brightness(1.05)}
.book__wash{position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 56%,rgba(20,20,19,.26) 80%,rgba(20,20,19,.66) 100%)}
.book__body{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 11px 10px}
.book__l{display:block;font-family:var(--display);font-weight:600;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--pale);line-height:1.42;
  text-shadow:0 1px 6px rgba(20,20,19,.85)}
.book__c{display:block;flex:none;font-family:var(--display);font-weight:600;font-size:7.4px;letter-spacing:.16em;
  color:rgba(var(--pearl-rgb),.86);padding-bottom:1px}
.book__rule{position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--pale);z-index:3;
  transition:width .7s var(--paperE)}
.book:hover .book__rule{width:100%}

/* ======================================================================
   THE SWITCH — Social Moments on one side of it, Off Duty on the other
   ====================================================================== */
/* No badge and no word. A hairline rule either side of the name, and a
   drawn circle at the end of it that breathes once in a while — enough
   to say there is somewhere to go, and nothing more. */
.swap{display:flex;align-items:center;gap:13px;width:100%;
  margin:20px 0 4px;padding:14px 10px;
  border:0;border-top:1px solid var(--line);cursor:pointer;
  background:linear-gradient(180deg,rgba(var(--ink-rgb),.035),rgba(var(--ink-rgb),.075));
  transition:background .45s var(--ease)}
.swap:hover{background:linear-gradient(180deg,rgba(var(--ink-rgb),.07),rgba(var(--ink-rgb),.12))}
.swap__g{flex:none;display:block;width:22px;height:22px;color:var(--t-2);
  border-radius:50%;
  transition:color .45s var(--ease),transform .55s var(--paperE),box-shadow .5s var(--ease);
  animation:swapHint 5s ease-in-out infinite}
.swap__g svg{display:block}
@keyframes swapHint{
  0%,100%{box-shadow:0 0 0 0 rgba(20,20,19,0)}
  50%{box-shadow:0 0 0 6px rgba(20,20,19,.045)}}
.swap__r{flex:1;height:1px}
.swap__r:first-child{background:linear-gradient(90deg,transparent,var(--line))}
.swap__r:last-child{background:linear-gradient(90deg,var(--line),transparent)}
.swap__t{font-family:var(--label);font-size:9.8px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--t-1);white-space:nowrap;
  transition:color .4s var(--ease)}
.swap:hover .swap__t{color:var(--ink)}
.swap:hover .swap__g{color:var(--ink);transform:translateX(4px);animation:none}

/* the shelf that has just been swapped in */
.books--swap > *{animation:swapIn .58s var(--paperE) both}
.books--swap > *:nth-child(2){animation-delay:.05s}
.books--swap > *:nth-child(3){animation-delay:.10s}
.books--swap > *:nth-child(4){animation-delay:.15s}
.books--swap > *:nth-child(5){animation-delay:.20s}
.books--swap > *:nth-child(n+6){animation-delay:.25s}
@keyframes swapIn{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:none}}

/* ======================================================================
   CONNECT
   ====================================================================== */
.cline{display:flex;align-items:baseline;gap:11px;padding:6px 0;
  border-bottom:1px solid var(--line-soft)}
.cline__k{font-family:var(--label);font-size:8.6px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--t-4);
  width:54px;flex:none}
.cline__v{font-family:var(--text);font-size:15.2px;letter-spacing:.004em;color:rgba(20,20,19,.78);
  transition:color .35s var(--ease);word-break:break-word;line-height:1.4}
a.cline:hover .cline__v{color:var(--ink)}
/* two numbers on the one line, each dialable, parted by a small rule */
.cnums{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 13px}
.cnum{color:inherit;transition:color .35s var(--ease)}
.cnum:hover{color:var(--ink)}
.cnum__d{display:inline-block;width:1px;height:12px;align-self:center;
  background:var(--line-hard);opacity:.55}

/* the accounts, as a row of marks */
/* the accounts, on their own line among the others */
.cline--soc{align-items:center}
.social{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.soc{display:inline-grid;place-items:center;min-width:30px;height:30px;padding:0 9px;
  border:1px solid var(--line);border-radius:2px;
  transition:border-color .4s var(--ease),background .4s var(--ease)}
.soc:hover{border-color:var(--line-hard);background:rgba(20,20,19,.045)}
.soc__i{width:15px;height:15px;object-fit:contain;display:block;
  opacity:.74;transition:opacity .4s var(--ease)}
.soc:hover .soc__i{opacity:1}
/* the marks carry their own colours, so they lift rather than change */
.soc__m{display:block;width:16px;height:16px;opacity:.92;
  transition:opacity .4s var(--ease)}
.soc:hover .soc__m{opacity:1}
.soc__t{font-family:var(--label);font-size:8.4px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--t-3);white-space:nowrap;
  transition:color .4s var(--ease)}
.soc:hover .soc__t{color:var(--ink)}

/* ======================================================================
   THE CUE — a phone only sees one section at a time, and nothing at the
   foot of the screen says it carries on. A hairline with a weight
   sliding down it, and the word under it.
   ====================================================================== */
/* it sits just inside the card's lower edge — the phone stands the card
   on the foot of the screen, so that edge is a known distance up */
/* off to the right margin: the rows are labelled down the left and the
   Save Contact pill holds the middle, so the one clear column is the
   outer edge — and a rule there reads as a rule, not as a divider that
   belongs to whatever it happens to be beside */
.cue{position:fixed;left:auto;right:18px;transform:translateY(10px);
  bottom:calc(env(safe-area-inset-bottom,0px) + 74px);z-index:66;
  display:none;flex-direction:column;align-items:center;gap:7px;
  pointer-events:none;opacity:0;
  transition:opacity .7s var(--ease),transform .8s var(--paperE)}
/* the faintest breath of paper behind it, no more — it is a mark, not
   a band laid across the foot of the section */
.cue::before{content:'';position:absolute;left:50%;top:50%;z-index:-1;
  width:80px;height:80px;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(46% 46% at 50% 50%,
    rgba(var(--pearl-rgb),.86),rgba(var(--pearl-rgb),0) 74%)}
.cue.on{opacity:1;transform:translateY(0)}
/* a circled chevron that beats downward, with a ring going off it —
   the same circled mark the Off Duty switch uses, so it belongs here */
.cue__g{display:block;width:34px;height:34px}
.cue__g svg{display:block;width:100%;height:100%;overflow:visible}
.cue__rim{fill:rgba(var(--pearl-rgb),.62);stroke:rgba(var(--ink-rgb),.26);stroke-width:1}
.cue__ring{fill:none;stroke:rgba(var(--ink-rgb),.34);stroke-width:1;
  transform-origin:18px 18px;animation:cuePing 1.9s cubic-bezier(.24,.6,.3,1) infinite}
.cue__v{fill:none;stroke:var(--ink);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
  animation:cueBeat 1.9s cubic-bezier(.4,0,.2,1) infinite}
@keyframes cuePing{
  0%{transform:scale(1);opacity:.5}
  62%{transform:scale(1.55);opacity:0}
  100%{transform:scale(1.55);opacity:0}}
@keyframes cueBeat{
  0%{transform:translateY(-2.5px);opacity:.45}
  26%{transform:translateY(1.5px);opacity:1}
  52%{transform:translateY(-1px);opacity:.9}
  100%{transform:translateY(-2.5px);opacity:.45}}
.cue__l,.cue__t{display:none}

.credit{margin-top:16px;padding-top:11px;border-top:1px solid var(--line-soft);
  font-size:8.4px;font-weight:500;letter-spacing:.12em;line-height:2.1;color:var(--t-2)}
.credit a{font-weight:600;color:var(--t-1)}
.credit a:hover{color:var(--ink)}
.credit b{font-weight:600;color:var(--t-1)}

/* ======================================================================
   THE BOOK — every album opens as one, and turns a page to move on
   ====================================================================== */
.bookv{position:fixed;inset:0;z-index:200;display:none;
  background:rgba(20,20,19,.74);backdrop-filter:blur(16px);
  opacity:0;transition:opacity .5s var(--ease)}
.bookv.up{display:block}
.bookv.in{opacity:1}
body.plate-open{overflow:hidden}

.bookv__bar{position:absolute;top:0;left:0;right:0;z-index:9;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px clamp(16px,3vw,36px)}
.bookv__title{flex:none;font-family:var(--display);font-weight:500;font-size:10.4px;letter-spacing:.28em;
  text-transform:uppercase;color:rgba(232,231,225,.86)}
.bookv__x{width:36px;height:36px;display:grid;place-items:center;
  border:1px solid rgba(232,231,225,.20);color:rgba(232,231,225,.62);
  transition:color .4s,border-color .4s,transform .5s var(--paperE)}
.bookv__x:hover{color:#fff;border-color:rgba(232,231,225,.55);transform:rotate(90deg)}
/* the shelf lifts once when the button has brought the reader to it */
.pane.called{animation:called 1.9s var(--ease)}
@keyframes called{
  0%{box-shadow:0 0 0 0 rgba(var(--ink-rgb),0)}
  30%{box-shadow:0 0 0 8px rgba(var(--ink-rgb),.07)}
  100%{box-shadow:0 0 0 0 rgba(var(--ink-rgb),0)}}

.bookv__count{margin-left:auto;padding-right:6px;
  font-family:var(--plate);font-weight:300;font-size:10px;letter-spacing:.18em;
  color:rgba(239,238,231,.50)}
.bookv__count b{font-weight:400;color:rgba(255,255,255,.92)}

.bookv__stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:62px clamp(44px,3.4vw,70px) 30px;perspective:2800px;perspective-origin:50% 47%}

/* ======================================================================
   THE BOOK

   Boards in the palette's own ink and stone — no leather, no gilt — a
   block of paper thick enough to see, and one photograph mounted
   across the spread. The proportion is a book's: it is as wide as the
   room allows, but never wider than three of its own halves.
   ====================================================================== */
.bk{position:relative;height:min(73vh,700px);aspect-ratio:2/1;
  max-width:96vw;transform-style:preserve-3d}

/* the boards */
.bk__board{position:absolute;inset:-11px -13px -14px -13px;z-index:0;
  border-radius:3px 5px 5px 3px;
  background:
    linear-gradient(90deg,rgba(0,0,0,.30),rgba(0,0,0,0) 6%,rgba(0,0,0,0) 94%,rgba(0,0,0,.30)),
    linear-gradient(152deg,var(--bd-1) 0%,var(--bd-2) 42%,var(--bd-3) 74%,var(--bd-4) 100%);
  box-shadow:0 44px 96px rgba(0,0,0,.58),
    inset 0 1px 0 rgba(201,200,191,.20),inset 0 -1px 2px rgba(0,0,0,.6),
    0 0 0 1px rgba(175,172,161,.14)}

/* the block of paper — the edges of every other sheet, so it has depth */
.bk__block{position:absolute;top:5px;bottom:5px;width:7px;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(90deg,
    rgba(var(--ink-rgb),.16) 0 1px,rgba(var(--bp-rgb),.92) 1px 2px,rgba(var(--ink-rgb),.05) 2px 3px)}
.bk__block--l{left:-7px;border-radius:2px 0 0 2px;
  box-shadow:-2px 4px 10px rgba(0,0,0,.34)}
.bk__block--r{right:-7px;border-radius:0 2px 2px 0;
  box-shadow:2px 4px 10px rgba(0,0,0,.34)}
.bookv:not(.in) .bk__block{opacity:0}
.bk__block{transition:opacity .5s var(--ease) .3s}

.bk__pages{position:absolute;inset:0;z-index:2;transform-style:preserve-3d}

/* ---- paper. Thin, warm-grey, the same family as the card's leaves ---- */
.bk__leaf{
  background:
    radial-gradient(130% 100% at 28% 14%,rgba(255,255,255,.50),rgba(255,255,255,0) 60%),
    linear-gradient(168deg,var(--bp-1) 0%,var(--bp-2) 46%,var(--bp-3) 100%)}
.bk__leaf::after,.pl__base::after,.pl__in::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:3;
  opacity:.055;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23p)'/%3E%3C/svg%3E")}

.bk__leaf{position:absolute;top:0;height:100%;width:50%;overflow:hidden;
  box-shadow:0 24px 56px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.42)}
.bk__leaf--l{left:0;border-radius:1px 0 0 1px;transform-origin:right center;
  box-shadow:0 24px 56px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.42),
    inset -30px 0 30px -30px rgba(20,20,19,.30)}
.bk__leaf--r{left:50%;border-radius:0 2px 2px 0;transform-origin:left center;
  box-shadow:0 24px 56px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.42),
    inset 30px 0 30px -30px rgba(20,20,19,.30)}
.bk__leaf{transition:transform .92s var(--swing)}
.bookv:not(.in) .bk__leaf--l{transform:rotateY(80deg)}
.bookv:not(.in) .bk__leaf--r{transform:rotateY(-80deg)}

/* ---- the gutter: one hairline, and the faintest breath either side --- */
.bk__spine{position:absolute;left:50%;top:2.5%;bottom:2.5%;width:1px;margin-left:-0.5px;
  z-index:5;pointer-events:none;opacity:0;transition:opacity .6s var(--ease) .5s;
  background:linear-gradient(180deg,rgba(20,20,19,0),rgba(20,20,19,.26) 12%,
    rgba(20,20,19,.26) 88%,rgba(20,20,19,0));
  box-shadow:0 0 14px 7px rgba(20,20,19,.045)}
.bookv.in .bk__spine{opacity:1}

/* ======================================================================
   THE TURNING SHEET — a corner peel

   Paper does not swing on a hinge. Take the outer corner and the sheet
   folds along a diagonal crease that travels across the page, and what
   you see in the fold is the back of the sheet, laid over the front by
   a reflection in that crease. Everything below is that one idea: a
   base clipped to the part still lying flat, and a flap clipped to the
   part that has come over, mirrored about the crease, with the light
   caught along it and its own shadow thrown on the page beneath.
   ====================================================================== */
.bk__flip{position:absolute;top:0;width:50%;height:100%;z-index:6;
  opacity:0;pointer-events:none}
.bk__flip.on{opacity:1}
.bk__flip.fwd{left:50%}
.bk__flip.back{left:0}

.pl__base,.pl__flap{position:absolute;inset:0;overflow:hidden}
.pl__base{z-index:1}
.pl__flap{z-index:2;transform-origin:0 0;overflow:visible;
  filter:drop-shadow(-7px 9px 16px rgba(20,20,19,.34))}
.pl__in{position:absolute;inset:0;overflow:hidden;transform:scaleX(-1)}

/* the paper of the flap shows through from behind */
.pl__base,.pl__in{
  background:
    radial-gradient(130% 100% at 28% 14%,rgba(255,255,255,.50),rgba(255,255,255,0) 60%),
    linear-gradient(168deg,var(--bp-1) 0%,var(--bp-2) 46%,var(--bp-3) 100%)}

/* the crease: dark where the sheet folds, opening to light at the free
   edge, at whatever angle the crease happens to lie */
.pl__light{position:absolute;inset:0;z-index:3;pointer-events:none}

/* ======================================================================
   THE BOOKMARK — the hold on a book that is turning itself

   A ribbon over the head of the left page with a thread that runs down
   it once for each page. Press it and it slips into the gutter and
   stays; press it again and it lifts. A bookmark that has been put in
   says what it means without a word on it.
   ====================================================================== */
.bmk{position:absolute;z-index:9;top:-13px;left:clamp(22px,2.2vw,44px);
  width:22px;height:74px;padding:0;background:none;border:0;cursor:pointer;
  opacity:0;pointer-events:none;transform:translateY(-8px);
  transition:opacity .5s var(--ease),transform .6s var(--paperE)}
.bmk.up{opacity:1;pointer-events:auto;transform:none;transition-delay:.5s}
.bmk__r{position:absolute;inset:0;display:block;overflow:hidden;
  background:linear-gradient(180deg,var(--bd-1),var(--bd-3) 52%,var(--bd-4));
  box-shadow:0 7px 16px rgba(20,20,19,.34),inset 0 1px 0 rgba(255,255,255,.14);
  -webkit-clip-path:polygon(0 0,100% 0,100% 100%,50% 79%,0 100%);
  clip-path:polygon(0 0,100% 0,100% 100%,50% 79%,0 100%);
  transition:transform .6s var(--paperE),box-shadow .5s var(--ease)}
.bmk__fill{position:absolute;left:50%;top:0;width:1px;height:100%;margin-left:-.5px;
  background:linear-gradient(180deg,rgba(var(--pearl-rgb),.92),rgba(var(--pearl-rgb),.34));
  transform-origin:top;transform:scaleY(0)}
@keyframes bmkThread{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.bmk:hover .bmk__r{transform:translateY(3px);box-shadow:0 10px 20px rgba(20,20,19,.42)}
/* put in: it sits deeper, the thread is gone, and a notch marks the place */
.bmk.set .bmk__r{transform:translateY(15px)}
.bmk.set .bmk__fill{opacity:0}
.bmk.set .bmk__r::after{content:'';position:absolute;left:5px;right:5px;top:26px;height:1px;
  background:rgba(var(--pearl-rgb),.72)}
.bmk.set:hover .bmk__r{transform:translateY(11px)}

/* ---- one half of a spread ---- */
.bp{position:absolute;top:0;height:100%;width:200%;
  padding:clamp(20px,2.6vh,36px) 0 clamp(22px,3vh,42px)}
.bp--l{left:0}
.bp--r{left:-100%}
.bp__in{display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:100%;height:100%;padding:0 clamp(18px,2.1vw,40px)}
.bp__shot{position:relative;flex:1;min-height:0;width:100%;
  margin-bottom:clamp(11px,1.6vh,20px)}
/* a plate with no words under it — the photograph takes the whole page,
   centred, with nothing held back for a caption that isn't there */
.bp--bare .bp__shot{margin-bottom:0}
.bp__shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 14px 34px rgba(20,20,19,.30))}
.bp.bw .bp__shot img{filter:grayscale(1) drop-shadow(0 14px 34px rgba(20,20,19,.30))}
/* A breath of the palette behind the words, so a name and a role read
   against paper instead of dissolving into it. It is a wash, not a box:
   it has no edge anywhere. */
.bp__cap{position:relative;flex:none;width:100%;padding:clamp(13px,1.8vh,20px) 6% 0;
  text-align:center}
.bp__cap::before{content:'';position:absolute;left:12%;right:12%;top:0;bottom:-8%;
  z-index:-1;pointer-events:none;border-radius:2px;
  background:
    linear-gradient(180deg,rgba(20,20,19,.085) 0%,rgba(20,20,19,.045) 58%,rgba(20,20,19,0) 100%),
    radial-gradient(72% 120% at 50% 0%,rgba(255,255,255,.42),rgba(255,255,255,0) 70%)}
.bp__cap::after{content:'';position:absolute;left:32%;right:32%;top:0;height:1px;
  background:linear-gradient(90deg,rgba(20,20,19,0),rgba(20,20,19,.30),rgba(20,20,19,0))}
.bp__cap .cn{display:block;font-family:var(--display);font-weight:700;font-size:14px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink);line-height:1.5}
.bp__cap .cd{display:block;font-family:var(--sans);font-weight:600;font-size:11.2px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);margin-top:7px;line-height:1.6}
.bp__cap .cx{display:block;font-family:var(--plate);font-weight:600;font-size:12.4px;
  letter-spacing:.01em;line-height:1.86;color:var(--ink);margin-top:11px}
.bp__n{position:absolute;bottom:13px;right:clamp(18px,2.1vw,34px);
  font-family:var(--label);font-size:9px;letter-spacing:.2em;color:var(--t-4)}
.bp--empty{background:linear-gradient(168deg,var(--bp-1),var(--bp-3))}

/* ======================================================================
   THE DESIGNATIONS SPREAD

   A column of paper down the outer left for the index, and everything
   else is the photograph — standing the full height of the book, top
   edge to bottom edge, never cropped and with nothing laid over it.
   The line that belongs to the plate is printed under the index, in
   the column, so the picture is left alone.

   The book's proportion is set against this: with the column taking a
   quarter of the spread, what remains is half as wide again as it is
   tall, which is exactly what a three-by-two photograph needs to stand
   full height.
   ====================================================================== */
.rp{position:absolute;top:0;height:100%;width:200%}
.rp--l{left:0}
.rp--r{left:-100%}

/* the column */
.rp__nav{position:absolute;left:0;top:0;bottom:0;width:24%;z-index:2;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(26px,4vh,48px) clamp(24px,2.2vw,38px)
          clamp(26px,4vh,48px) clamp(28px,2.8vw,52px)}

/* the plate: everything else */
/* the plate meets the fore-edge, so what margin there is falls beside
   the column rather than splitting either side of the picture */
.rp__pic{position:absolute;left:24%;right:0;top:0;bottom:0;z-index:1;
  display:flex;align-items:center;justify-content:flex-end}
.rp__pic img{display:block;height:100%;width:auto;max-width:100%;
  object-fit:contain}

/* ABOVE THE BOOK — set on the dark ground over the top edge like the
   title over a plate in a catalogue. Off the page entirely, so the
   photograph keeps every pixel. The designation is the small line on top,
   between its rules; the organisation — or during the albums, the album —
   is the large one under it. */
.bk__who{display:none;position:absolute;left:0;right:0;bottom:100%;z-index:8;
  margin-bottom:clamp(18px,3.2vh,30px);text-align:center;pointer-events:none}
.bookv.lined .bk__who{display:block}
.bk__who.fresh{animation:whoIn .9s var(--paperE) both}
@keyframes whoIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.who__role{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:9px;
  font-family:var(--display);font-weight:500;font-size:10.4px;line-height:1.4;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(236,235,228,.74)}
.who__role span{padding-left:.22em}
.who__role i{display:block;flex:none;width:26px;height:1px;background:rgba(236,235,228,.28)}
.who__role.who__shelf{font-size:12px;font-weight:600;letter-spacing:.2em;color:rgba(248,247,242,.9)}
.who__org{font-family:var(--display);font-weight:600;font-size:19px;line-height:1.28;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(250,249,244,.97);text-wrap:balance}
/* during the albums: how far through this one — a hairline that fills */
.who__bar{display:block;width:92px;height:1px;margin:13px auto 0;
  background:rgba(236,235,228,.20);overflow:hidden}
.who__bar i{display:block;height:100%;background:rgba(248,247,242,.9);
  transform-origin:left;transition:transform .9s var(--ease)}
/* where in this involvement's photographs we are — a dot each */
.who__of{display:flex;justify-content:center;gap:7px;margin-top:12px}
.who__of i{display:block;width:4px;height:4px;border-radius:50%;
  background:rgba(236,235,228,.26);transition:background .4s var(--ease),transform .4s var(--ease)}
.who__of i.on{background:rgba(248,247,242,.95);transform:scale(1.25)}
/* THE REST OF THEM — phone only; the desk has the index inside the book.
   Each line is styled by its own class, so a copy of it lifted out to
   fly still looks like itself. */
.bk__past,.bk__ahead{display:none;z-index:8;pointer-events:none}
.bk__past{list-style:none;margin:0;padding:0}
.bk__ahead ol{list-style:none;margin:0;padding:0}
.ahead__t{font-family:var(--label);font-size:9.8px;line-height:28px;letter-spacing:.26em;
  text-transform:uppercase;color:rgba(236,235,228,.50)}
.ln{display:flex;align-items:baseline;gap:10px;list-style:none;
  font-family:var(--display);text-transform:uppercase;line-height:1.36}
.ln > span{min-width:0}
.ln .nw,.who__org .nw{white-space:nowrap}
/* one that has had its turn: quieter, and ticked */
.ln--past{padding:3px 0;font-weight:500;font-size:10.4px;letter-spacing:.08em;
  color:rgba(236,235,228,.52)}
.ln--past svg{flex:none;align-self:center;width:10px;height:10px;fill:none;
  stroke:rgba(236,235,228,.70);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ln--past.land path{stroke-dasharray:14;animation:lnTick .6s var(--ease) .75s both}
@keyframes lnTick{from{stroke-dashoffset:14}to{stroke-dashoffset:0}}
/* one still to come: its number, and its name; the next one is lit */
.ln--next{padding:3px 0;font-weight:500;font-size:11.4px;letter-spacing:.07em;
  color:rgba(236,235,228,.50)}
.ln--next b{flex:none;min-width:17px;font-family:var(--plate);font-weight:400;
  font-size:9.4px;letter-spacing:.06em;color:rgba(236,235,228,.38)}
.ln--next.first{color:rgba(250,249,244,.96)}
.ln--next.first b{color:rgba(250,249,244,.66)}
.ln.in{animation:lnIn .8s var(--paperE) both}
.bk__past .ln,.bk__ahead .ln{pointer-events:auto;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:color .35s var(--ease)}
.bk__past .ln:hover,.bk__ahead .ln:hover{color:#fff}
.bk__past .ln:focus-visible,.bk__ahead .ln:focus-visible{outline:1px solid rgba(236,235,228,.5);outline-offset:3px}
@keyframes lnIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* a copy in flight between a list and the heading */
.ln-fly,.who-fly{position:fixed !important;z-index:12;margin:0 !important;
  pointer-events:none;will-change:transform,opacity}
.who-fly{bottom:auto !important;animation:none !important}

/* on the desk the book sits a little lower during the slideshow, so the
   heading has its own band between the bar and the top edge instead of
   crowding into the bar. Albums keep their place. */
@media (min-width:901px){
  /* the heading, the book under it and the link under that move down as
     one, so the name has air between it and the bar — the book gives up
     a little height to make that room rather than pushing the link off
     the foot of the screen */
  .bookv.lined .bookv__stage{padding-top:132px}
  .bookv.lined .bk{height:min(68vh,650px)}
  .bk__who{margin-bottom:18px}
}

/* the line, set across the foot of the plate on a breath of the page's
   own paper — it comes up out of the photograph rather than sitting in
   a box on it, and only the lowest fifth of the picture is touched */
.rp__txt{position:absolute;left:24%;right:0;bottom:0;z-index:3;text-align:center;
  padding:clamp(44px,8vh,92px) clamp(34px,3.4vw,62px) clamp(18px,2.7vh,32px);
  background:linear-gradient(0deg,
    var(--bp-1) 0%,rgba(var(--bp-rgb),.94) 30%,
    rgba(var(--bp-rgb),.58) 62%,rgba(var(--bp-rgb),.19) 85%,rgba(var(--bp-rgb),0) 100%)}
.rp__t{font-family:var(--plate);font-weight:600;font-size:12.4px;line-height:1.82;
  letter-spacing:.01em;color:var(--ink);max-width:66ch;margin:0 auto}
/* Social moments and Off Duty — in the bottom-right corner of the screen,
   on the dark ground, apart from the book and from both lists, so they
   take nothing from the page and run into nothing. During the involvements
   both show; during one shelf, the way to the other. */
.bk__gos{display:none;position:absolute;z-index:10;
  right:clamp(16px,3vw,36px);bottom:clamp(14px,3vh,30px);align-items:center;gap:16px}
.bookv.lined .bk__gos{display:flex;animation:goUp .8s var(--paperE) 1.1s both}
.bk__go{display:none;align-items:center;gap:8px;padding:6px 2px 6px 4px;
  font-family:var(--text);font-weight:500;font-size:14px;letter-spacing:.01em;
  color:rgba(245,244,238,.80);cursor:pointer;white-space:nowrap;
  transition:color .35s var(--ease)}
/* bottom-left, in every book: the card's own two buttons */
.bk__acts{display:none;position:absolute;z-index:10;
  left:clamp(16px,3vw,36px);bottom:clamp(14px,3vh,30px);align-items:center;gap:16px}
.bookv.up .bk__acts{display:flex;animation:goUp .8s var(--paperE) 1s both}
.bk__act{display:inline-flex;align-items:center;gap:8px;padding:6px 4px 6px 2px;
  font-family:var(--text);font-weight:500;font-size:14px;letter-spacing:.01em;
  color:rgba(245,244,238,.80);cursor:pointer;white-space:nowrap;transition:color .35s var(--ease)}
.bk__act:hover{color:#fff}
.bk__act span{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;
  padding-bottom:1px;transition:background-size .5s var(--paperE)}
.bk__act:hover span{background-size:100% 1px}
.bk__act.done{color:#fff}
.bookv.run-roles .bk__go,
.bookv.run-social .bk__go[data-go="off"],
.bookv.run-off .bk__go[data-go="social"]{display:inline-flex}
@keyframes goUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.go__i{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.2;
  stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.go__c{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .45s var(--paperE)}
.bk__go span{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;
  padding-bottom:1px;transition:background-size .5s var(--paperE)}
.bk__go:hover{color:#fff}
.bk__go:hover span{background-size:100% 1px}
.bk__go:hover .go__c{transform:translateX(3px)}

.rp__t::before{content:'';display:block;width:24px;height:1px;
  background:rgba(20,20,19,.32);margin:0 auto clamp(9px,1.4vh,15px)}
.rp__n{display:none}

/* the index */
.bx__t{font-family:var(--label);font-size:10.6px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--t-3);margin-bottom:clamp(12px,2vh,22px)}
.bx__l{list-style:none}
.bx__i{position:relative;display:block;width:100%;text-align:left;cursor:pointer;
  padding:clamp(9px,1.5vh,14px) 2px clamp(9px,1.5vh,14px) 16px;
  border-bottom:1px solid rgba(20,20,19,.075);
  transition:padding-left .5s var(--paperE)}
.bx__i::before{content:'';position:absolute;left:0;top:24%;bottom:24%;width:1px;
  background:var(--ink);transform:scaleY(0);transform-origin:center;
  transition:transform .55s var(--paperE)}
.bx__n{display:none}
.bx__o{display:block;font-family:var(--display);font-weight:500;font-size:12.2px;
  letter-spacing:.045em;text-transform:uppercase;color:var(--t-3);line-height:1.38;
  transition:color .45s var(--ease)}
.bx__r{display:block;font-family:var(--label);font-size:8.8px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--t-3);line-height:1.45;margin-top:4px}
.bx__i:hover .bx__o{color:var(--t-1)}
.bx__i.on{padding-left:22px}
.bx__i.on::before{transform:scaleY(1)}
.bx__i.on .bx__o{color:var(--ink)}
.bx__bar{position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--ink);
  transform:scaleX(0);transform-origin:left;opacity:.26;
  transition:transform .6s linear}

/* the arrows are gone — a swipe, a tap on the page or the keys turn it */
.bk__nav{display:none !important}
.bk__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:9;
  width:50px;height:50px;display:grid;place-items:center;
  font-family:var(--serif);font-size:32px;line-height:1;color:rgba(239,238,231,.55);
  border:1px solid transparent;
  transition:color .4s var(--ease),border-color .4s var(--ease),transform .5s var(--paperE)}
.bk__nav--prev{left:clamp(8px,2vw,28px)}
.bk__nav--next{right:clamp(8px,2vw,28px)}
.bk__nav:hover{color:#fff;border-color:rgba(239,238,231,.18)}
.bk__nav--prev:hover{transform:translateY(-50%) translateX(-4px)}
.bk__nav--next:hover{transform:translateY(-50%) translateX(4px)}
.bk__nav[disabled]{opacity:.22;pointer-events:none}

/* ======================================================================
   THE TABS — phone only, along the top
   ====================================================================== */
.tabs{position:absolute;left:0;right:0;top:0;z-index:70;display:none;
  padding:14px 14px 0;
  opacity:0;transform:translateY(-14px);pointer-events:none;
  transition:opacity .5s var(--ease),transform .6s var(--paperE)}
body.is-open .tabs{opacity:1;transform:none;pointer-events:auto;transition-delay:.9s}
.tabs button{flex:1;padding:11px 4px 13px;font-size:8px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--t-4);position:relative;
  transition:color .4s var(--ease)}
.tabs button::after{content:'';position:absolute;left:12%;right:12%;bottom:6px;height:1px;
  background:var(--ink);transform:scaleX(0);transition:transform .5s var(--paperE)}
.tabs button.on{color:var(--ink)}
.tabs button.on::after{transform:scaleX(1)}

@media (max-width:900px){
  /* the card IS the screen — nothing of the room shows round it.
     A phone's 100vh is the screen WITH the browser's bar counted in, so
     laying anything out against it pushes the foot of the card — the
     name — down behind that bar. dvh is the height actually on show. */
  :root{--pw:100vw;--ph:100vh;--vh:100vh;--pad:20px}

  .desk{position:fixed;inset:0;display:block;padding:0;
    perspective:1500px;perspective-origin:50% 42%}

  /* ---- ONE COLUMN, NOT THREE TABS --------------------------------
     Involvements, then Introduction, then Moments, stacked, and the
     fold is what scrolls. Each section starts at the top of the screen
     and the scroll settles onto it, so a swipe carries you to the next
     rather than half-way into it. While the card is shut nothing
     scrolls at all — there is only the cover. */
  .fold{position:absolute;inset:0;width:100vw;height:100%;
    overflow:hidden;transform:none !important;transition:none;
    animation:none !important}
  body.is-open .fold{width:100vw;overflow-y:auto;overflow-x:hidden;
    scroll-snap-type:y proximity;scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;overscroll-behavior-y:contain}

  .panel{position:relative !important;left:auto !important;top:auto !important;
    width:100%;height:auto;min-height:var(--vh);
    opacity:1;pointer-events:auto;transform:none !important;
    transition:none;scroll-snap-align:start;scroll-snap-stop:normal}
  .panel__paper{position:relative;inset:auto;min-height:var(--vh);
    overflow:visible;border-radius:0;box-shadow:none;background:var(--leaf)}
  .panel__scroll{position:relative;inset:auto;height:auto;overflow:visible;
    opacity:1;transition:none;padding-bottom:calc(var(--pad) * 5)}
  .panel--2 .panel__scroll,.panel--3 .panel__scroll{padding-top:6px}
  .panel__crease,.panel__shade,.creep{display:none}
  /* The Introduction comes first on a phone: the card opens onto its
     photographs, and the involvements follow once those have had their
     turn. Only the order on screen changes; the desk keeps its three
     panels as they are. */
  .fold{display:flex;flex-direction:column}
  .panel{flex:none}
  .panel--2{order:-1}
  /* one hairline where two sections meet, so the column still reads as
     leaves of the same card */
  .panel--1,.panel--3{border-top:1px solid var(--line-soft)}

  .cue{display:flex}

  .cover{width:100vw;height:var(--vh);transform-origin:center top}

  /* the cover is the whole screen now, so its words were set for a card
     a third the size — they come up to meet it */
  /* a folded phone's outer screen is barely wider than a hand, so the
     words are set larger and heavier still. The name stays on one line:
     it is sized from the screen's width, as large as that line allows,
     and borrows a little of the margin either side to be so */
  .cover__plinth{padding:0 24px calc(env(safe-area-inset-bottom,0px) + 30px)}
  .cover__title{font-size:35px;line-height:1.12;margin-bottom:14px;text-wrap:balance}
  .cover__copy{font-size:17.6px;line-height:1.36;max-width:28ch;color:rgba(var(--ink-rgb),.88);
    text-wrap:pretty}
  .cover__name{font-size:min(21px,calc((100vw - 36px) / 18.4));line-height:1.3;
    letter-spacing:.03em;margin:22px -6px 0;white-space:nowrap}

  /* the designations on the first page — larger, heavier and darker, so
     they read on a folded phone's outer screen without leaning in */
  .role__role{font-size:10.4px;font-weight:500;letter-spacing:.14em;
    color:rgba(var(--ink-rgb),.9);margin-top:4px}

  /* a finger is not a cursor — both crosses get a proper target, and
     they sit clear of a notch or a status bar */
  .mark{top:calc(env(safe-area-inset-top,0px) + 16px);left:auto;bottom:auto;
    right:12px;width:40px;height:52px}
  .bookv__bar{padding-top:calc(env(safe-area-inset-top,0px) + 13px)}
  .bookv__x{width:40px;height:40px;flex:none}
  body.is-open .cover{transform:rotateX(-122deg) translateZ(4px)}

  .fold__edge,.fold__cast{display:none}
  .tab{left:auto;right:0;top:50%;bottom:auto;transform:translateY(-50%)}
  .tab:hover{transform:translateY(-50%) translateX(-5px)}
  .ribbon--bare{height:48px}
  .panel--1 .ribbon--bare{height:22px}
  .ribbon{padding-top:18px}

  .dock{bottom:calc(env(safe-area-inset-bottom,0px) + 14px);gap:8px}
  .save{padding:13px 16px;font-size:9px;letter-spacing:.2em;gap:7px}
  .bk__acts{gap:13px;left:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 10px)}
  .bk__act{font-size:13.5px}
  .ribbon__tag{font-size:12.4px}
  #paneOne > .sub:first-child .sub__t,
  #paneThree > .sub:first-child .sub__t{font-size:12px}

  @supports (height:100dvh){
    :root{--ph:100dvh;--vh:100dvh}
  }

  /* ---- THE BOOK ON A SMALL SCREEN --------------------------------
     It stays a book: two leaves, a gutter down the middle, boards
     around them — the same object as on a desk. Only its proportions
     answer the screen. Standing up the pages are tall and narrow, the
     way a paperback's are; turned on its side it opens to the full
     spread. What it never does is collapse to a single sheet. */
  /* the glass goes nearly solid: the card behind it read as a pale slab
     showing through, which is not a background, it is a distraction */
  .bookv{background:rgba(var(--ink-rgb),.975);backdrop-filter:blur(22px)}
  .bookv__bar{padding:13px 13px;gap:10px;
    background:linear-gradient(180deg,rgba(var(--ink-rgb),.80) 0%,
      rgba(var(--ink-rgb),.42) 58%,rgba(var(--ink-rgb),0) 100%)}
  .bookv__title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    font-size:9.2px;letter-spacing:.19em}
  .bookv__count{white-space:nowrap;font-size:9px;padding-right:2px}
  /* the album names on the covers of the Social Moments and Off Duty
     shelves, larger and heavier on a phone */
  .book__l{font-size:11px;font-weight:600;letter-spacing:.07em;line-height:1.36}
  .book__c{font-size:9px}
  .bookv__x{flex:none}
  .bookv__stage{perspective:1500px}
  .bk__board{inset:-7px -8px -9px -8px}
  .bk__block{display:none}
  .bp__in{padding:0 11px}
  .bp__shot{flex:0 1 auto;height:auto;max-height:100%}
  .bp__cap{padding:clamp(8px,1.4vh,14px) 2% 0}
  /* the words under the photographs, sized to be read on a folded phone */
  .bp__cap .cn{font-size:13px;letter-spacing:.09em}
  .bp__cap .cd{font-size:10.6px;letter-spacing:.1em;margin-top:5px}
  .bp__cap .cx{font-size:12.2px;line-height:1.62;margin-top:7px}
  .bp__cap::after{left:24%;right:24%}
  .bp__n{right:11px;bottom:9px}
  .rp__t{font-size:11.6px;line-height:1.62}
  .bk__nav--prev:hover,.bk__nav--next:hover{transform:none}
  .hint{display:none}
  .bk__gos{gap:13px;right:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 10px)}
  .bk__go{font-size:13.5px}
  .bookv.lined .bk__past,.bookv.lined .bk__ahead{display:block}
}

/* standing up — tall pages, and no index column: at this width it would
   leave the photograph almost nothing */
@media (max-width:900px) and (orientation:portrait){
  /* an object on a dark ground, not the whole screen — it reads as a
     book you are holding rather than a page you have fallen into */
  .bookv__stage{padding:56px 0 62px}
  .bk{width:94vw;height:auto;aspect-ratio:1/1.16;
    max-width:none;max-height:none}
  .rp__nav{display:none}
  .rp__pic{left:0;justify-content:center}
  .rp__txt{left:0;padding:clamp(30px,6vh,58px) 15px 12px}
  /* During the involvements the book shares the height with the heading,
     the ones already shown above it and the ones still to come below it.
     It always keeps the full width — the photographs are wider than they
     are tall, so width is what makes them large — and on a shorter screen
     it gives up height instead: the bare paper above and below them. */
  .bookv.lined .bookv__stage{padding:calc(env(safe-area-inset-top,0px) + 262px) 0 234px}
  .bookv.lined .bk{width:94vw;aspect-ratio:auto;
    height:min(calc(94vw * 1.16),max(260px,calc(var(--vh) - 496px)))}
  .bk__who{margin-bottom:16px}
  .who__org{font-size:17px;letter-spacing:.08em;padding:0 10px}
  .who__role{font-size:10px;letter-spacing:.18em;gap:10px;margin-bottom:8px;padding:0 8px}
  .who__role i{width:16px}
  .who__role.who__shelf{font-size:11.6px;letter-spacing:.16em}
  /* top-left: five places — a shelf holds six albums — filled from the
     top as each one finishes, clear of the heading below them */
  .bk__past{position:absolute;left:0;right:0;bottom:calc(100% + 104px);height:100px}
  /* bottom-left: the ones still to come */
  .bk__ahead{position:absolute;left:0;right:0;top:100%;margin-top:19px}
  .bookv.lined .bk__nav{bottom:calc(env(safe-area-inset-bottom,0px) + 10px)}
  /* the arrows move to the bottom-left, under the list, so the bottom-right
     corner is the buttons' alone */
  .bookv.lined .bk__nav--prev{left:3vw}
  .bookv.lined .bk__nav--next{left:calc(3vw + 50px);right:auto}
  .bk__gos{flex-direction:column;align-items:flex-end;gap:0;right:3vw}
  .bk__acts{flex-direction:column;align-items:flex-start;gap:0;left:3vw}
  .bk__nav{top:auto;bottom:18px;transform:none;width:44px;height:44px}
  .bk__nav--prev{left:calc(50% - 74px)}
  .bk__nav--next{right:calc(50% - 74px)}
}

/* turned on its side — the full spread, index and all, as on a desk */
@media (max-width:900px) and (orientation:landscape){
  /* on its side there is little height, so the book gives up a sliver
     to leave the link a place under it */
  .bookv__stage{padding:52px 44px 40px}
  .bk{width:min(94vw,132vh);height:auto;aspect-ratio:2/1;max-width:none;max-height:none}
  .bk__gos{right:12px;bottom:8px}
  .bk__acts{left:12px;bottom:8px}
  .bk__go{font-size:12.5px}
  /* the index wants a desk's width to read — at this size it crowds the
     photograph and still cannot show all five, so the arrows carry the
     navigating and the picture takes the spread */
  .rp__nav{display:none}
  .rp__pic{left:0;justify-content:center}
  /* on its side there is little height over the book — one line, org and
     designation together, no dots, and the book gives up a sliver so the
     line has a band of its own under the bar */
  .bookv.lined .bookv__stage{padding-top:96px}
  .bookv.lined .bk{width:min(94vw,108vh)}
  .bk__who{margin-bottom:9px}
  .bk__who .who__role{display:inline-flex;margin:0 12px 0 0;font-size:9.4px;vertical-align:2px}
  .bk__who .who__role.who__shelf{font-size:10.6px}
  .bk__who .who__role i:last-child{display:none}
  .bk__who .who__org{display:inline;font-size:14px;letter-spacing:.08em}
  .bk__who .who__of,.bk__who .who__bar{display:none}
  /* both lists stand in the margin left of the book, set against its
     edge: the ones shown from the top corner down, the ones to come
     from the bottom corner up — clear of the arrow at the screen edge */
  .bk__past,.bk__ahead{position:absolute;right:calc(100% + 18px);
    width:max(96px,calc((100vw - 100%) / 2 - 74px));text-align:right}
  .bk__past{top:0}
  .bk__ahead{bottom:0}
  /* narrow margin: the tick or the number rides in front of the first
     word, and a long name breaks between words, never inside one */
  .bk__past .ln,.bk__ahead .ln{display:block;padding:3px 0}
  .bk__past .ln svg,.bk__ahead .ln b{display:inline-block;margin-right:7px}
  .bk__past .ln svg{vertical-align:0}
  .bk__past .ln{font-size:9.8px;letter-spacing:.06em}
  .bk__ahead .ln{font-size:10.4px;letter-spacing:.05em}
  .bk__ahead .ln b{min-width:0}
  .rp__txt{left:0;padding:clamp(26px,8vh,52px) 16px 10px}
  .bk__nav{width:38px;height:38px;font-size:26px}
  .bk__nav--prev{left:6px}
  .bk__nav--next{right:6px}
}

@media (max-width:900px) and (orientation:portrait) and (max-height:740px){
  .bookv.lined .bookv__stage{padding:calc(env(safe-area-inset-top,0px) + 214px) 0 172px}
  .bookv.lined .bk{height:min(calc(94vw * 1.16),max(240px,calc(var(--vh) - 386px)))}
  .bk__past{bottom:calc(100% + 104px);height:40px}
  .bk__past .ln:nth-last-child(n+3){display:none}
  .bk__ahead .ln:nth-child(n+3){display:none}
}

@media (max-width:420px){
  /* the card is the screen at every phone width — this block used to set
     it back to a postcard, which took the name off the foot of the cover */
  .cover__title{font-size:33px}
  .cover__copy{font-size:17px}
}

@media (prefers-reduced-motion:reduce){
  .panel__scroll{scroll-behavior:auto}
  .fold{scroll-behavior:auto !important}
  .cue__ring,.cue__v{animation:none}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.16s !important;transition-delay:0s !important}
}