html,body{block-size:100%}
html{box-sizing:border-box}
*,*::before,*::after{box-sizing:inherit}

/* -----------------------------------------------------------------
   NATURALCOLLECTION LTD -- the warm vellum card drawer.

   A secretariat keeps its registers in a drawer of cards, so the site
   is one. Three decisions govern every page and nothing overrides them:

     .  the ground is vellum, washed with light. The only dark things
        on the site are the drawer rail at the head, the wedge that
        cuts the opener and the wedge that closes the footer.
     .  nothing is a row. Every entry is a card, and the cards sit in
        a grid whose columns change width from section to section.
     .  a heading is marked by an underline drawn beneath the words
        themselves, never by a rule floated above them.

   The register still reads as a register: field name, then value. It
   simply no longer looks like a two-column list of them.
   ----------------------------------------------------------------- */

:root{
  /* the five recorded hexes, re-roled for a light ground */
  --secr-ink:#333336;
  --secr-accent:#a06eb4;
  --secr-accent2:#cfc19c;
  --secr-shade:#3f4045;
  --secr-mist:#c1cad6;

  /* the vellum itself: a card face, the ground under it, the foot of
     the wash, and the aubergine that carries heading and link type at
     a contrast the violet cannot reach */
  --secr-vellum:#fbf6ea;
  --secr-ground:#f3ead8;
  --secr-ground2:#ece0c9;
  --secr-deep:#5d3a6d;
  --secr-tab:#efe3c8;
  --secr-face:#fdfaf2;

  /* hairlines: one in ink for a card edge, one in violet for an edge
     that is doing something, one faint for a rule inside a card */
  --secr-hair:rgba(51,51,54,.19);
  --secr-hair2:rgba(160,110,180,.45);
  --secr-hair3:rgba(51,51,54,.10);

  --secr-mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --secr-serif:"Literata",Georgia,"Times New Roman",serif;

  --secr-rail:3.4rem;
  --secr-flank:2.5rem;
  --secr-drawer:min(17rem,calc(100vw - 6.4rem));
  --secr-gap:1rem;
  --secr-pad:1rem;
  --secr-frame:78rem;

  /* the single shadow on the site: what a card lying on a desk casts */
  --secr-lay:0 1px 0 rgba(255,255,255,.8) inset,0 10px 20px -16px rgba(51,51,54,.72);
}

/* -----------------------------------------------------------------
   01  the wash. Three fixed blooms on the root, then a second wash
       the length of the document on the body. No fibre, no grid, no
       dots and no hatch: this site is lit, not printed on.
   ----------------------------------------------------------------- */

html{
  background-color:var(--secr-ground);
  background-image:
    radial-gradient(78% 46% at 92% -4%,rgba(160,110,180,.26),rgba(160,110,180,0) 66%),
    radial-gradient(64% 44% at 2% 14%,rgba(207,193,156,.46),rgba(207,193,156,0) 72%),
    radial-gradient(96% 52% at 44% 104%,rgba(93,58,109,.20),rgba(93,58,109,0) 68%);
  background-attachment:fixed;
  background-repeat:no-repeat;
  scroll-padding-block-start:calc(var(--secr-rail) + 1rem);
}

body{
  margin:0;
  padding-block-start:var(--secr-rail);
  padding-inline-start:var(--secr-flank);
  background-image:linear-gradient(180deg,rgba(253,250,242,.92) 0,rgba(243,234,216,.14) 34%,rgba(236,224,201,.62) 100%);
  color:var(--secr-ink);
  font-family:var(--secr-serif);
  font-size:1rem;
  line-height:1.62;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
}

/* -----------------------------------------------------------------
   02  type. Mono for anything a register would print as a field name,
       serif for anything it would print as a value.
   ----------------------------------------------------------------- */

p{margin:0 0 1.05rem}
p:last-child{margin-bottom:0}

h1,h2,h3,h4{
  font-family:var(--secr-mono);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.085em;
  line-height:1.34;
  color:var(--secr-deep);
  margin:0;
}

a{
  color:var(--secr-deep);
  text-decoration:underline;
  text-decoration-color:var(--secr-hair2);
  text-decoration-thickness:1px;
  text-underline-offset:.18em;
  overflow-wrap:anywhere;
  transition:color 200ms ease,text-decoration-color 200ms ease,text-decoration-thickness 200ms ease;
}
a:hover{color:var(--secr-ink);text-decoration-color:var(--secr-accent);text-decoration-thickness:2px}
a:focus-visible{
  outline:2px solid var(--secr-accent);
  outline-offset:3px;
  color:var(--secr-ink);
  text-decoration:none;
}

[data-skip]{
  position:absolute;
  inset-inline-start:-100vw;
  inset-block-start:0;
  z-index:90;
  background:var(--secr-shade);
  color:var(--secr-vellum);
  font-family:var(--secr-mono);
  font-size:.66rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  padding:.65rem 1rem;
  border-block-end:3px solid var(--secr-accent2);
  transition:inset-inline-start 160ms ease;
}
[data-skip]:focus{inset-inline-start:.4rem}

/* -----------------------------------------------------------------
   03  the cabinet. The company keeps its registers in a drawer of
       cards, so the way between the folios is one more drawer in the
       same cabinet: a sand pull set into the left edge of the page,
       and behind it three cards that run out over the document and
       push nothing aside.

       The rail at the head is the nameplate now and nothing else. It
       carries no control and nothing hangs from it; the whole of the
       navigation is the pull at the edge and the drawer behind it.
   ----------------------------------------------------------------- */

/* the nameplate. Its ground still bleeds the width of the window; its
   inner frame is inset by the strip the pull stands in, so the name
   sits over the same line as the left edge of every card below it */
div[data-part="rail"]{
  position:fixed;
  inset:0 0 auto;
  z-index:70;
  padding-inline-start:var(--secr-flank);
  background-color:var(--secr-shade);
  background-image:
    radial-gradient(56% 190% at 88% 50%,rgba(160,110,180,.42),rgba(160,110,180,0) 70%),
    linear-gradient(180deg,#4a4b51 0,var(--secr-shade) 100%);
  border-block-end:1px solid rgba(207,193,156,.5);
  box-shadow:0 8px 20px -16px rgba(51,51,54,.9);
}

div[data-part="rail"] > div{
  max-inline-size:var(--secr-frame);
  margin-inline:auto;
  min-block-size:var(--secr-rail);
  padding-inline:var(--secr-pad);
  display:flex;
  align-items:center;
  gap:.7rem;
}

a[data-plate]{
  display:flex;
  align-items:baseline;
  gap:.4rem;
  min-inline-size:0;
  padding-block:.5rem;
  font-family:var(--secr-mono);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:var(--secr-vellum);
}
a[data-plate] > span{font-weight:400;color:var(--secr-accent2)}
a[data-plate]::before{
  content:"";
  flex:0 0 auto;
  align-self:center;
  inline-size:.55rem;
  block-size:.55rem;
  background:var(--secr-accent2);
  transition:background-color 200ms ease,transform 240ms ease;
}
a[data-plate]:hover::before{background:var(--secr-mist);transform:rotate(45deg)}
a[data-plate]:focus-visible{outline:2px solid var(--secr-accent2);outline-offset:3px}

/* the pull. A card tab standing out of the left edge, level with the
   middle of the window: an anchor in the markup, a real button the
   moment the script runs, so the drawer opens either way. When the
   drawer is out the tab rides on its front and closes it again. */
a[data-handle],button[data-handle]{
  position:fixed;
  z-index:84;
  inset-inline-start:0;
  inset-block-start:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.7rem;
  inline-size:2.75rem;
  min-block-size:9.4rem;
  padding-block:1.1rem;
  border:0;
  border-inline-end:3px solid var(--secr-accent);
  background:var(--secr-accent2);
  color:var(--secr-shade);
  font-family:var(--secr-mono);
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  box-shadow:4px 0 16px -10px rgba(51,51,54,.9);
  transform:translateY(-50%);
  transition:transform 380ms cubic-bezier(.22,.78,.3,1),background-color 200ms ease,color 200ms ease,border-inline-end-color 200ms ease;
}
a[data-handle] > em,button[data-handle] > em{
  font-style:normal;
  writing-mode:vertical-rl;
  line-height:1;
}

a[data-handle]:hover,button[data-handle]:hover{
  background:var(--secr-vellum);
  color:var(--secr-deep);
  border-inline-end-color:var(--secr-accent2);
}
a[data-handle]:focus-visible,button[data-handle]:focus-visible{
  outline:3px solid var(--secr-deep);
  outline-offset:-6px;
}

/* the mark on the tab: a drawer front seen end on, with its own pull
   across the middle. On hover the pull runs the width of the front */
a[data-handle] > i,button[data-handle] > i{
  position:relative;
  flex:0 0 auto;
  inline-size:1.05rem;
  block-size:.8rem;
  border:2px solid currentColor;
  transition:transform 240ms ease;
}
a[data-handle] > i::before,button[data-handle] > i::before{
  content:"";
  position:absolute;
  inset-block-start:50%;
  inset-inline:22%;
  block-size:2px;
  margin-block-start:-1px;
  background:currentColor;
  transition:inset-inline 240ms ease;
}
a[data-handle]:hover > i::before,button[data-handle]:hover > i::before{inset-inline:8%}
a[data-handle]:hover > i,button[data-handle]:hover > i{transform:translateX(2px)}

/* the drawer out: the tab travels the width of the drawer and stands
   on its front, and the word on it turns from open to close */
div[data-part="cabinet"][data-open] > button[data-handle],
:root:not([data-live]) div[data-part="cabinet"]:has(#secr-drawer:target) > a[data-handle]{
  transform:translate(var(--secr-drawer),-50%);
  background:var(--secr-vellum);
  color:var(--secr-deep);
  border-inline-end-color:var(--secr-accent2);
}
div[data-part="cabinet"][data-open] > button[data-handle] > i,
:root:not([data-live]) div[data-part="cabinet"]:has(#secr-drawer:target) > a[data-handle] > i{transform:translateX(2px)}
div[data-part="cabinet"][data-open] > button[data-handle] > i::before,
:root:not([data-live]) div[data-part="cabinet"]:has(#secr-drawer:target) > a[data-handle] > i::before{inset-inline:8%}

/* without the script the word cannot be rewritten, so the stylesheet
   rewrites it for as long as the drawer is the target */
:root:not([data-live]) div[data-part="cabinet"]:has(#secr-drawer:target) > a[data-handle] > em{font-size:0}
:root:not([data-live]) div[data-part="cabinet"]:has(#secr-drawer:target) > a[data-handle] > em::after{
  content:"Close the drawer";
  font-size:.6rem;
}

/* the scrim: the page goes back behind the drawer and stays there
   until the drawer is pushed back */
div[data-part="cabinet"] > nav{
  position:fixed;
  inset:0;
  z-index:80;
  visibility:hidden;
  opacity:0;
  background:rgba(51,51,54,.56);
  transition:opacity 260ms ease,visibility 0s linear 260ms;
}
div[data-part="cabinet"][data-open] > nav,
:root:not([data-live]) #secr-drawer:target{
  visibility:visible;
  opacity:1;
  transition:opacity 260ms ease,visibility 0s linear 0s;
}

/* the drawer itself: a box the depth of what it holds, run out of the
   left edge on the line of the tab, so the tab stands on its front */
div[data-part="cabinet"] > nav > div[data-face]{
  position:absolute;
  inset-block-start:50%;
  inset-inline-start:0;
  inline-size:var(--secr-drawer);
  max-block-size:calc(100% - 1.6rem);
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:1.15rem .95rem 1.35rem;
  background-color:var(--secr-ground);
  background-image:linear-gradient(160deg,var(--secr-ground2) 0,var(--secr-ground) 46%,#e8dcc3 100%);
  border:1px solid var(--secr-hair);
  border-inline-start:0;
  box-shadow:16px 0 40px -24px rgba(51,51,54,.95);
  transform:translate(-101%,-50%);
  transition:transform 380ms cubic-bezier(.22,.78,.3,1);
}
div[data-part="cabinet"][data-open] > nav > div[data-face],
:root:not([data-live]) #secr-drawer:target > div[data-face]{transform:translate(0,-50%)}

p[data-folios]{
  font-family:var(--secr-mono);
  font-size:.57rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--secr-deep);
  margin:0 0 .9rem;
  padding-block-end:.55rem;
  border-block-end:1px solid var(--secr-hair);
}

div[data-face] > ol{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.7rem;
}
div[data-face] > ol > li{margin:0}
div[data-face] > ol > li:nth-child(2){padding-inline-start:.6rem}
div[data-face] > ol > li:nth-child(3){padding-inline-start:1.2rem}

/* each folio is a card of the same cut as the cards on the page:
   vellum face, hairline edge, a coloured head and a nicked corner */
div[data-face] > ol > li > a{
  position:relative;
  display:flex;
  align-items:stretch;
  min-block-size:58px;
  background-color:var(--secr-vellum);
  background-image:linear-gradient(180deg,var(--secr-face) 0,var(--secr-vellum) 42%,#f6efdf 100%);
  border:1px solid var(--secr-hair);
  border-block-start:3px solid var(--secr-accent);
  box-shadow:var(--secr-lay);
  color:var(--secr-ink);
  text-decoration:none;
  transition:transform 240ms cubic-bezier(.22,.78,.3,1),box-shadow 240ms ease;
}
div[data-face] > ol > li:nth-child(2) > a{border-block-start-color:var(--secr-accent2)}
div[data-face] > ol > li:nth-child(3) > a{border-block-start-color:var(--secr-mist)}
div[data-face] > ol > li > a::after{
  content:"";
  position:absolute;
  inset-block-start:0;
  inset-inline-end:0;
  inline-size:1.2rem;
  block-size:1.2rem;
  background:linear-gradient(225deg,rgba(207,193,156,.62) 0,rgba(207,193,156,0) 62%);
  pointer-events:none;
}
div[data-face] > ol > li > a:hover{
  transform:translateX(5px);
  box-shadow:0 1px 0 rgba(255,255,255,.85) inset,0 16px 26px -18px rgba(51,51,54,.8);
}

/* The leading edge of the folio is a tab, and the tab is now COLOURED rather
   than numbered: the three folios are told apart by the colour of their edge
   and by the stamp on the one being stood in, the way a cabinet actually
   works. The numeral that used to ride here was the index-menu pattern the
   operator struck out on 2026-10-27, and three equal rows reading 01 02 03
   are that pattern however few of them there are. */
div[data-face] > ol > li > a::before{
  content:"";
  flex:0 0 1.15rem;
  align-self:stretch;
  background:var(--secr-tab);
  border-inline-end:1px solid var(--secr-hair);
  transition:background-color 200ms ease;
}
div[data-face] > ol > li:nth-child(2) > a::before{background:color-mix(in oklab,var(--secr-accent2) 62%,var(--secr-tab))}
div[data-face] > ol > li:nth-child(3) > a::before{background:color-mix(in oklab,var(--secr-mist) 58%,var(--secr-tab))}
div[data-face] > ol > li > a > span{
  flex:1 1 auto;
  min-inline-size:0;
  align-self:center;
  padding:.6rem .7rem;
  font-family:var(--secr-serif);
  font-size:.98rem;
  line-height:1.24;
}
div[data-face] > ol > li > a:hover::before{background:var(--secr-accent)}

/* the folio being stood in is stamped, and its tab is reversed out */
div[data-face] > ol > li > a[aria-current]{border-block-start-color:var(--secr-deep)}
div[data-face] > ol > li > a[aria-current]::before{
  background:var(--secr-deep);
  border-inline-end-color:var(--secr-deep);
}
div[data-face] > ol > li > a[aria-current] > span::after{
  content:"standing at";
  display:block;
  inline-size:max-content;
  margin-block-start:.34rem;
  padding:.2rem .42rem;
  font-family:var(--secr-mono);
  font-size:.54rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--secr-vellum);
  background:var(--secr-accent);
}

a[data-shut]{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  min-block-size:48px;
  margin-block-start:.9rem;
  padding-inline:.7rem;
  background:var(--secr-shade);
  color:var(--secr-accent2);
  font-family:var(--secr-mono);
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-decoration:none;
  text-align:center;
  transition:background-color 200ms ease,color 200ms ease;
}
a[data-shut]::before{content:"\2190";font-size:.95rem;line-height:1;letter-spacing:0}
a[data-shut]:hover{background:var(--secr-deep);color:var(--secr-vellum)}

div[data-face] > ol > li > a:focus-visible,
a[data-shut]:focus-visible{outline:3px solid var(--secr-deep);outline-offset:-5px}

/* the cards come out of the cabinet one after another, and only when
   the drawer is actually pulled */
div[data-part="cabinet"][data-open] > nav > div[data-face] > ol > li > a,
:root:not([data-live]) #secr-drawer:target > div[data-face] > ol > li > a{
  animation:secr-slip 460ms cubic-bezier(.22,.78,.3,1) both;
}
div[data-face] > ol > li:nth-child(1) > a{animation-delay:90ms}
div[data-face] > ol > li:nth-child(2) > a{animation-delay:155ms}
div[data-face] > ol > li:nth-child(3) > a{animation-delay:220ms}

@keyframes secr-slip{from{opacity:0;transform:translateX(-26px)}}

/* on a wide window the drawer is a little deeper; it is the same
   drawer, in the same place, pulled by the same tab */
@media (min-width:62rem){
  :root{--secr-drawer:min(20rem,calc(100vw - 8rem))}
  div[data-part="cabinet"] > nav > div[data-face]{padding:1.4rem 1.15rem 1.6rem}
}

/* the document stands clear of the strip the pull occupies, so the tab
   never lies over a word. The two blocks that are drawn edge to edge
   reach back across that strip and bleed to the window as they did */
header[data-part="masthead"],
footer[data-part="foot"]{
  margin-inline-start:calc(-1 * var(--secr-flank));
  padding-inline-start:var(--secr-flank);
}

/* -----------------------------------------------------------------
   04  the opener. One diagonal seam across the head of the page: a
       charcoal wedge carrying the name, vellum carrying the sentence
       that says what the company is. No facts here; they are entered
       in the first card below.
   ----------------------------------------------------------------- */

header[data-part="masthead"]{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  margin-block-end:1.5rem;
}

header[data-part="masthead"] > div{
  max-inline-size:var(--secr-frame);
  margin-inline:auto;
  padding:0 var(--secr-pad) 2rem;
}

/* the wedge draws its own ground, so the seam always falls inside the
   wedge's own bottom padding and never cuts under a word */
div[data-wedge]{
  position:relative;
  padding:1.7rem 0 3.6rem;
}
div[data-wedge]::before,
div[data-wedge]::after{
  content:"";
  position:absolute;
  inset-block:-2.4rem 0;
  inset-inline:-50vw;
  animation:secr-seam 780ms cubic-bezier(.2,.7,.3,1) both;
}
/* the sand hairline lying along the seam: the same wedge, 4px lower */
div[data-wedge]::before{
  z-index:-2;
  background:var(--secr-accent2);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 2.6rem + 4px),0 calc(100% + 4px));
}
div[data-wedge]::after{
  z-index:-1;
  background-color:var(--secr-shade);
  background-image:
    radial-gradient(46% 76% at 80% 10%,rgba(160,110,180,.5),rgba(160,110,180,0) 68%),
    radial-gradient(40% 58% at 16% 94%,rgba(93,58,109,.46),rgba(93,58,109,0) 70%),
    linear-gradient(168deg,#494a50 0,var(--secr-shade) 58%,#35363a 100%);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 2.6rem),0 100%);
}

p[data-rubric]{
  font-family:var(--secr-mono);
  font-size:.6rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--secr-accent2);
  margin:0 0 .85rem;
  display:flex;
  align-items:center;
  gap:.6rem;
}
p[data-rubric]::after{
  content:"";
  flex:1 1 auto;
  block-size:1px;
  background:linear-gradient(90deg,rgba(207,193,156,.7),rgba(207,193,156,0));
  animation:secr-hair 900ms ease-out 260ms both;
}

header[data-part="masthead"] h1{
  font-size:clamp(1.1rem,4.6vw,1.72rem);
  letter-spacing:.1em;
  color:var(--secr-vellum);
  margin:0 0 .9rem;
  animation:secr-lift 620ms cubic-bezier(.2,.7,.3,1) 140ms both;
}

/* the standfirst sits on the vellum side of the seam, so it is ink on
   paper and not reversed type */
div[data-vellum]{max-inline-size:32rem;padding-block-start:1.6rem}
p[data-styled]{
  font-size:1.1rem;
  line-height:1.56;
  color:var(--secr-ink);
  border-inline-start:3px solid var(--secr-accent);
  padding-inline-start:.9rem;
  margin:0;
  animation:secr-lift 620ms cubic-bezier(.2,.7,.3,1) 240ms both;
}

/* the note the first card closes on */
p[data-lede]{
  font-size:.95rem;
  line-height:1.56;
  color:#57524a;
  border-block-start:1px solid var(--secr-hair3);
  padding-block-start:.8rem;
  margin:1rem 0 0;
}

@keyframes secr-seam{from{transform:translateY(-14px);opacity:0}}
@keyframes secr-lift{from{opacity:0;transform:translateY(9px)}}
@keyframes secr-hair{from{transform:scaleX(0);transform-origin:left center}}

/* -----------------------------------------------------------------
   05  the drawer of cards. main is the grid; every section is a card
       in it, and the span changes with what the card carries.
   ----------------------------------------------------------------- */

main{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--secr-gap);
  max-inline-size:var(--secr-frame);
  margin-inline:auto;
  padding-inline:var(--secr-pad);
  padding-block-end:2.4rem;
  align-items:start;
}

main > section,
main > nav[data-part="contents"]{
  min-inline-size:0;
  position:relative;
  background-color:var(--secr-vellum);
  background-image:linear-gradient(180deg,var(--secr-face) 0,var(--secr-vellum) 40%,#f6efdf 100%);
  border:1px solid var(--secr-hair);
  border-block-start:3px solid var(--secr-accent);
  box-shadow:var(--secr-lay);
  padding:1.2rem var(--secr-pad) 1.35rem;
  transition:box-shadow 260ms ease,border-block-start-color 260ms ease;
}
main > section:nth-of-type(even){border-block-start-color:var(--secr-accent2)}
main > section:hover{box-shadow:0 1px 0 rgba(255,255,255,.85) inset,0 16px 28px -18px rgba(51,51,54,.72)}
main > section[id]:target{border-block-start-color:var(--secr-deep)}

/* the corner nick every card in the drawer carries */
main > section::after,
main > nav[data-part="contents"]::after{
  content:"";
  position:absolute;
  inset-block-start:0;
  inset-inline-end:0;
  inline-size:1.5rem;
  block-size:1.5rem;
  background:linear-gradient(225deg,rgba(207,193,156,.62) 0,rgba(207,193,156,0) 62%);
  pointer-events:none;
}

/* -----------------------------------------------------------------
   06  the head of a card: an underline drawn under the words, from
       nothing, once. Not a rule above them.
   ----------------------------------------------------------------- */

main h2{
  display:inline-block;
  max-inline-size:100%;
  font-size:1.02rem;
  margin:0 0 .95rem;
  padding-block-end:.34rem;
  background-image:linear-gradient(var(--secr-accent),var(--secr-accent));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:100% 3px;
  animation:secr-underline 820ms cubic-bezier(.2,.72,.28,1) both;
}
main > section:nth-of-type(even) h2{background-image:linear-gradient(var(--secr-deep),var(--secr-deep))}
main > section[id]:target h2{background-image:linear-gradient(var(--secr-deep),var(--secr-deep))}

@keyframes secr-underline{from{background-size:0 3px}}

main h3{
  display:inline-block;
  max-inline-size:100%;
  font-size:.8rem;
  letter-spacing:.11em;
  margin:0 0 .6rem;
  padding-block-end:.26rem;
  background-image:linear-gradient(var(--secr-accent),var(--secr-accent));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:2.6rem 2px;
  transition:background-size 300ms cubic-bezier(.2,.72,.28,1),color 220ms ease;
}

/* -----------------------------------------------------------------
   07  an entry is a card. This is the change that matters most: the
       register keeps its field-name-then-value shape, and stops being
       a two-column list of rows.
   ----------------------------------------------------------------- */

dl[data-entry]{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(13.5rem,1fr));
  gap:.7rem;
  margin:0;
  counter-reset:secr-card;
}

dl[data-entry] > div{
  min-inline-size:0;
  display:flex;
  flex-direction:column;
  counter-increment:secr-card;
  background:var(--secr-face);
  border:1px solid var(--secr-hair3);
  border-inline-start:3px solid var(--secr-accent2);
  transition:border-inline-start-color 230ms ease,transform 230ms ease,box-shadow 230ms ease,background-color 230ms ease;
}
dl[data-entry] > div:hover{
  border-inline-start-color:var(--secr-accent);
  background:#fffdf7;
  transform:translateY(-2px);
  box-shadow:0 10px 18px -14px rgba(51,51,54,.75);
}

dl[data-entry] > div > dt{
  font-family:var(--secr-mono);
  font-size:.585rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--secr-deep);
  background-image:linear-gradient(90deg,var(--secr-tab) 0,rgba(239,227,200,0) 88%);
  border-block-end:1px solid var(--secr-hair3);
  padding:.46rem .62rem;
  display:flex;
  align-items:baseline;
  gap:.45rem;
}
dl[data-entry] > div > dt::before{
  content:counter(secr-card,decimal-leading-zero);
  flex:0 0 auto;
  color:var(--secr-accent);
  letter-spacing:.06em;
}
dl[data-entry] > div > dd{
  margin:0;
  padding:.58rem .62rem .68rem;
  font-size:.935rem;
  line-height:1.55;
}

/* the particulars card is the one place a value is a figure, so the
   figures are set in the mono face */
dd[data-mono]{font-family:var(--secr-mono);font-size:.86rem;letter-spacing:.05em}

/* -----------------------------------------------------------------
   08  the timeline. The component vocabulary of the site, used only
       where the content is genuinely a sequence.
   ----------------------------------------------------------------- */

dl[data-shape="timeline"],
ol[data-sequence]{
  display:block;
  position:relative;
  margin:0;
  padding:.2rem 0 .2rem 2.55rem;
  list-style:none;
  counter-reset:secr-step;
}
/* the spine is drawn one segment at a time, between one node and the
   next, so it never overshoots the last entry */
dl[data-shape="timeline"] > div::after,
ol[data-sequence] > li::after{
  content:"";
  position:absolute;
  inset-inline-start:calc(-1.8rem - 1px);
  inset-block-start:1.9rem;
  inset-block-end:-.95rem;
  inline-size:2px;
  background:var(--secr-accent2);
}
dl[data-shape="timeline"] > div:last-child::after,
ol[data-sequence] > li:last-child::after{content:none}

dl[data-shape="timeline"] > div,
ol[data-sequence] > li{
  position:relative;
  min-inline-size:0;
  counter-increment:secr-step;
  margin:0 0 .85rem;
  padding:.1rem 0 0;
  background:none;
  border:0;
}
dl[data-shape="timeline"] > div:last-child,
ol[data-sequence] > li:last-child{margin-block-end:0}

dl[data-shape="timeline"] > div::before,
ol[data-sequence] > li::before{
  content:counter(secr-step);
  position:absolute;
  inset-inline-start:-2.55rem;
  inset-block-start:.05rem;
  inline-size:1.5rem;
  block-size:1.5rem;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--secr-mono);
  font-size:.66rem;
  font-weight:700;
  color:var(--secr-deep);
  background:var(--secr-vellum);
  border:2px solid var(--secr-accent);
  box-shadow:0 0 0 4px var(--secr-vellum);
  transition:background-color 230ms ease,color 230ms ease,border-color 230ms ease;
}
dl[data-shape="timeline"] > div:hover::before,
ol[data-sequence] > li:hover::before{background:var(--secr-accent);color:var(--secr-vellum)}

dl[data-shape="timeline"] > div > dt{
  display:block;
  font-family:var(--secr-mono);
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--secr-accent);
  background:none;
  border:0;
  padding:0;
  margin-block-end:.22rem;
}
/* the ringed node already carries the number, so the field name does not */
dl[data-shape="timeline"] > div > dt::before{content:none}
dl[data-shape="timeline"] > div > dd{margin:0;font-size:.95rem}

ol[data-sequence] > li > p{margin:0;font-size:.95rem}

/* -----------------------------------------------------------------
   09  the five books, as five cards nested inside the wide one
   ----------------------------------------------------------------- */

div[data-books]{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));
  gap:.8rem;
}

article[data-register]{
  min-inline-size:0;
  background:var(--secr-face);
  border:1px solid var(--secr-hair3);
  border-block-start:2px solid var(--secr-accent2);
  padding:.85rem .8rem .9rem;
  transition:border-block-start-color 240ms ease,box-shadow 240ms ease,transform 240ms ease;
}
article[data-register]:hover{
  border-block-start-color:var(--secr-accent);
  box-shadow:0 12px 20px -16px rgba(51,51,54,.8);
  transform:translateY(-2px);
}
article[data-register]:hover h3{background-size:100% 2px;color:var(--secr-ink)}
article[data-register="members"]{border-block-start-color:var(--secr-accent)}
article[data-register="psc"]{border-block-start-color:var(--secr-deep)}

article[data-register] dl[data-entry]{
  grid-template-columns:minmax(0,1fr);
  gap:.5rem;
}
article[data-register] dl[data-entry] > div{
  background:transparent;
  border:0;
  border-inline-start:2px solid var(--secr-hair3);
  padding-inline-start:.55rem;
}
article[data-register] dl[data-entry] > div:hover{
  background:transparent;
  transform:none;
  box-shadow:none;
  border-inline-start-color:var(--secr-accent);
}
article[data-register] dl[data-entry] > div > dt{
  background:none;
  border:0;
  padding:0 0 .12rem;
  color:var(--secr-accent);
}
article[data-register] dl[data-entry] > div > dt::before{color:var(--secr-accent2)}
article[data-register] dl[data-entry] > div > dd{padding:0;font-size:.9rem}

/* -----------------------------------------------------------------
   10  figures, and the signature: the group structure drawing itself
   ----------------------------------------------------------------- */

figure[data-figure]{
  margin:0 0 1.1rem;
  background:var(--secr-face);
  border:1px solid var(--secr-hair3);
  border-block-end:3px solid var(--secr-accent2);
  padding:1rem .8rem .85rem;
}
figure[data-figure] svg{
  display:block;
  inline-size:100%;
  max-inline-size:26rem;
  block-size:auto;
  margin-inline:auto;
}
figure[data-figure] figcaption{
  margin-block-start:.9rem;
  padding-block-start:.7rem;
  border-block-start:1px solid var(--secr-hair3);
  font-size:.88rem;
  color:#57524a;
}

figure[data-figure] rect{fill:var(--secr-vellum);stroke:var(--secr-hair);stroke-width:1}
figure[data-figure] text{fill:var(--secr-ink);font-family:var(--secr-mono);letter-spacing:.05em}
figure[data-figure] text[data-sub]{fill:#6a645b;letter-spacing:.02em}
figure[data-figure] text[data-legend]{fill:var(--secr-deep);letter-spacing:.1em}
figure[data-figure] path{fill:none;stroke:var(--secr-accent);stroke-width:1.6}

figure[data-figure="structure"] g[data-node="parent"] rect{fill:var(--secr-shade);stroke:var(--secr-deep)}
figure[data-figure="structure"] g[data-node="parent"] text{fill:var(--secr-vellum)}
figure[data-figure="structure"] g[data-node="parent"] text[data-sub]{fill:var(--secr-accent2)}
figure[data-figure="structure"] g[data-node="three"] rect{stroke-dasharray:4 3;stroke:var(--secr-accent)}

figure[data-figure="structure"] path[data-branch]{
  stroke-dasharray:1;
  stroke-dashoffset:0;
  animation:secr-branch 640ms linear both;
}
figure[data-figure="structure"] path[data-branch="spine"]{animation-duration:840ms;animation-delay:280ms}
figure[data-figure="structure"] path[data-branch="one"]{animation-delay:940ms}
figure[data-figure="structure"] path[data-branch="two"]{animation-delay:1220ms}
figure[data-figure="structure"] path[data-branch="three"]{animation-delay:1500ms}

figure[data-figure="structure"] g[data-node]{
  opacity:1;
  transform-box:fill-box;
  transform-origin:left center;
  animation:secr-node 540ms ease-out both;
}
figure[data-figure="structure"] g[data-node="parent"]{animation-delay:80ms}
figure[data-figure="structure"] g[data-node="one"]{animation-delay:1320ms}
figure[data-figure="structure"] g[data-node="two"]{animation-delay:1600ms}
figure[data-figure="structure"] g[data-node="three"]{animation-delay:1880ms}
figure[data-figure="structure"] text[data-legend]{opacity:1;animation:secr-legend 640ms ease-out 2160ms both}

@keyframes secr-branch{from{stroke-dashoffset:1}}
@keyframes secr-node{from{opacity:0;transform:translateX(-10px)}}
@keyframes secr-legend{from{opacity:0}}

/* the path figure on folio two is the same timeline, drawn */
figure[data-figure="path"] circle{fill:var(--secr-vellum);stroke:var(--secr-accent);stroke-width:2}
figure[data-figure="path"] circle[data-fill]{fill:var(--secr-accent)}
figure[data-figure="path"] text[data-num]{fill:var(--secr-deep);letter-spacing:0}
figure[data-figure="path"] circle[data-fill] + text[data-num]{fill:var(--secr-vellum)}
figure[data-figure="path"] path[data-spine]{
  stroke:var(--secr-accent2);
  stroke-width:2;
  stroke-dasharray:1;
  animation:secr-branch 980ms linear 120ms both;
}
figure[data-figure="path"] g[data-stage]{animation:secr-node 520ms ease-out both}
figure[data-figure="path"] g[data-stage="1"]{animation-delay:320ms}
figure[data-figure="path"] g[data-stage="2"]{animation-delay:560ms}
figure[data-figure="path"] g[data-stage="3"]{animation-delay:800ms}
figure[data-figure="path"] g[data-stage="4"]{animation-delay:1040ms}

/* the band scale */
figure[data-figure="bands"] rect[data-band]{fill:var(--secr-tab);stroke:var(--secr-hair);stroke-width:1}
figure[data-figure="bands"] rect[data-band="b"]{fill:#e6d7c0}
figure[data-figure="bands"] rect[data-band="c"]{fill:#dcc9ad}
figure[data-figure="bands"] rect[data-band="d"]{fill:#cfbfa0}
figure[data-figure="bands"] text[data-roman]{fill:var(--secr-deep);letter-spacing:.08em}
figure[data-figure="bands"] line[data-tick]{stroke:var(--secr-hair);stroke-width:1}
figure[data-figure="bands"] g[data-marker]{opacity:0;transition:opacity 260ms ease,transform 420ms cubic-bezier(.2,.72,.28,1)}
figure[data-figure="bands"] g[data-marker][data-set]{opacity:1}
figure[data-figure="bands"] g[data-marker] path{fill:var(--secr-accent);stroke:none}
figure[data-figure="bands"] g[data-marker] line{stroke:var(--secr-accent);stroke-width:1.4;stroke-dasharray:2 2}

/* -----------------------------------------------------------------
   11  the two sheets. Same arithmetic, same printed rules, on vellum.
   ----------------------------------------------------------------- */

p[data-guide]{
  font-family:var(--secr-mono);
  font-size:.63rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--secr-deep);
  background:linear-gradient(90deg,rgba(207,193,156,.55),rgba(207,193,156,0) 76%);
  border-inline-start:3px solid var(--secr-accent);
  padding:.45rem .6rem;
  margin:0 0 1rem;
}

form[data-widget]{
  margin:0 0 1.1rem;
  padding:.95rem .85rem 1rem;
  background:var(--secr-face);
  border:1px solid var(--secr-hair3);
  border-block-start:2px solid var(--secr-accent);
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));
  gap:.85rem;
}
form[data-widget] div[data-field]{min-inline-size:0}
form[data-widget] label{
  display:block;
  font-family:var(--secr-mono);
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--secr-deep);
  margin-block-end:.3rem;
}
form[data-widget] input[type="date"],
form[data-widget] input[type="number"]{
  inline-size:100%;
  max-inline-size:100%;
  font-family:var(--secr-mono);
  font-size:.9rem;
  color:var(--secr-ink);
  background:var(--secr-vellum);
  border:1px solid var(--secr-hair);
  border-block-end:2px solid var(--secr-accent2);
  padding:.44rem .5rem;
  transition:border-color 190ms ease,background-color 190ms ease,box-shadow 190ms ease;
}
form[data-widget] input[type="date"]:hover,
form[data-widget] input[type="number"]:hover{border-block-end-color:var(--secr-accent)}
form[data-widget] input[type="date"]:focus-visible,
form[data-widget] input[type="number"]:focus-visible,
form[data-widget] input[type="checkbox"]:focus-visible{
  outline:2px solid var(--secr-accent);
  outline-offset:2px;
  background:#fffdf7;
  box-shadow:0 0 0 3px rgba(160,110,180,.14);
}
form[data-widget] small{
  display:block;
  margin-block-start:.34rem;
  font-size:.79rem;
  line-height:1.45;
  color:#6a645b;
}
form[data-widget] div[data-check]{
  display:flex;
  align-items:flex-start;
  gap:.55rem;
  align-self:end;
}
form[data-widget] div[data-check] input{
  flex:0 0 auto;
  inline-size:1.05rem;
  block-size:1.05rem;
  accent-color:var(--secr-accent);
  margin:.15rem 0 0;
}
form[data-widget] div[data-check] label{margin:0;line-height:1.4}

dl[data-results]{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(16.5rem,1fr));
  gap:.75rem;
  margin:0 0 .9rem;
}
dl[data-results] > div{
  min-inline-size:0;
  background:var(--secr-vellum);
  border:1px solid var(--secr-hair3);
  border-inline-start:3px solid var(--secr-accent2);
  padding:.6rem .7rem .7rem;
  transition:border-inline-start-color 230ms ease;
}
dl[data-results] > div:hover{border-inline-start-color:var(--secr-accent)}
dl[data-results] > div > dt{
  font-family:var(--secr-mono);
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--secr-deep);
  margin-block-end:.35rem;
}
dl[data-results] > div > dd{margin:0}
p[data-rule]{
  font-size:.82rem;
  line-height:1.48;
  color:#6a645b;
  border-inline-start:2px solid var(--secr-hair3);
  padding-inline-start:.55rem;
  margin:0 0 .5rem;
}
p[data-out]{font-size:.93rem;margin:0}
p[data-working]{
  font-family:var(--secr-mono);
  font-size:.76rem;
  line-height:1.55;
  color:var(--secr-deep);
  margin:.4rem 0 0;
  padding-block-start:.4rem;
  border-block-start:1px solid var(--secr-hair3);
  overflow-wrap:anywhere;
}
output{
  font-family:var(--secr-mono);
  font-size:.88rem;
  font-weight:700;
  color:var(--secr-deep);
  background:linear-gradient(0deg,rgba(160,110,180,.16),rgba(160,110,180,.16));
  background-size:100% .55em;
  background-position:0 88%;
  background-repeat:no-repeat;
  padding-inline:.1rem;
}
p[data-note]{
  font-size:.86rem;
  color:#57524a;
  border-block-start:1px solid var(--secr-hair3);
  padding-block-start:.7rem;
  margin:0;
}

/* -----------------------------------------------------------------
   12  tables. Contained, never the cause of a sideways page.
   ----------------------------------------------------------------- */

div[data-scroll]{
  overflow-x:auto;
  margin:0 0 1rem;
  border:1px solid var(--secr-hair3);
  background:
    linear-gradient(90deg,var(--secr-face) 30%,rgba(253,250,242,0)) left/2rem 100% no-repeat,
    linear-gradient(270deg,var(--secr-face) 30%,rgba(253,250,242,0)) right/2rem 100% no-repeat,
    radial-gradient(farthest-side at 0 50%,rgba(51,51,54,.3),rgba(51,51,54,0)) left/1rem 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%,rgba(51,51,54,.3),rgba(51,51,54,0)) right/1rem 100% no-repeat,
    var(--secr-face);
  background-attachment:local,local,scroll,scroll,local;
}
table[data-table]{
  border-collapse:collapse;
  inline-size:100%;
  min-inline-size:32rem;
  font-size:.88rem;
}
table[data-table] caption{
  caption-side:top;
  text-align:start;
  font-family:var(--secr-mono);
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--secr-deep);
  padding:.55rem .65rem;
  background:linear-gradient(90deg,var(--secr-tab),rgba(239,227,200,0) 70%);
  border-block-end:1px solid var(--secr-hair);
}
table[data-table] th,
table[data-table] td{
  text-align:start;
  vertical-align:top;
  padding:.5rem .65rem;
  border-block-end:1px solid var(--secr-hair3);
}
table[data-table] thead th{
  font-family:var(--secr-mono);
  font-size:.58rem;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--secr-deep);
  border-block-end:2px solid var(--secr-accent2);
  white-space:nowrap;
}
table[data-table] tbody th{
  font-family:var(--secr-mono);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.05em;
  color:var(--secr-ink);
  inline-size:11rem;
}
table[data-table] tbody tr{transition:background-color 200ms ease}
table[data-table] tbody tr:hover{background:rgba(207,193,156,.22)}
table[data-table] tbody tr:last-child th,
table[data-table] tbody tr:last-child td{border-block-end:0}

/* on a phone the sheet is read by sliding it, so the register name
   stays pinned at the left edge while the columns pass under it */
@media (max-width:47.99rem){
  table[data-table]{min-inline-size:30rem}
  table[data-table] thead th:first-child,
  table[data-table] tbody th{
    position:sticky;
    inset-inline-start:0;
    z-index:1;
    inline-size:8.5rem;
    background:var(--secr-tab);
    border-inline-end:1px solid var(--secr-hair);
  }
  table[data-table] thead th:first-child{z-index:2}
}

/* -----------------------------------------------------------------
   13  the index of entries, as its own card of tabs
   ----------------------------------------------------------------- */

/* The card said "tabs" in its heading comment and was built as a stack of
   numbered rows underneath it. It is a tab set now, which is what a drawer of
   dividers actually looks like: each entry is a cut tab the width of its own
   wording, and the tab positions step across the drawer so that no two in a
   row sit over each other. A leader runs from the end of the tab to the edge
   of the card, the way an index is set.

   The zero-padded counter went with the rows, 2026-10-27: a numbered index
   MENU is the pattern the operator struck out, and the row is as much of it
   as the digits. The entry cards in folio three keep their "entry 01" marks
   -- those number CONTENT. */
nav[data-part="contents"] h2{font-size:.9rem}
nav[data-part="contents"] ol{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:7px;
  --secr-step:1.15rem;
}
nav[data-part="contents"] li{
  display:flex;
  align-items:center;
  min-inline-size:0;
  gap:.45rem;
}

/* the drawer's four tab positions, cycled */
nav[data-part="contents"] li:nth-child(4n+2){padding-inline-start:var(--secr-step)}
nav[data-part="contents"] li:nth-child(4n+3){padding-inline-start:calc(var(--secr-step) * 2)}
nav[data-part="contents"] li:nth-child(4n+4){padding-inline-start:calc(var(--secr-step) * 3)}

/* the leader: the dotted run from the end of the tab out to the card edge,
   stopped by the small square that stands where a folio number would */
nav[data-part="contents"] li::after{
  content:"";
  flex:1 1 .8rem;
  min-inline-size:.4rem;
  block-size:0;
  border-block-end:1px dotted var(--secr-hair);
}

nav[data-part="contents"] a{
  display:inline-flex;
  align-items:center;
  min-block-size:46px;
  min-inline-size:0;
  padding:.45rem .7rem;
  font-size:.92rem;
  line-height:1.26;
  text-decoration:none;
  color:var(--secr-ink);
  background-color:var(--secr-tab);
  background-image:linear-gradient(180deg,var(--secr-face) 0,var(--secr-tab) 72%);
  border-block-start:3px solid var(--secr-accent2);
  box-shadow:var(--secr-lay);
  transition:border-block-start-color 220ms ease,color 200ms ease,background-color 200ms ease,transform 220ms ease;
}
nav[data-part="contents"] li:nth-child(2n) a{border-block-start-color:var(--secr-accent)}
nav[data-part="contents"] a:hover{
  color:var(--secr-deep);
  background-color:var(--secr-face);
  border-block-start-color:var(--secr-deep);
  transform:translateY(-2px);
}
nav[data-part="contents"] a:focus-visible{transform:translateY(-2px)}

/* -----------------------------------------------------------------
   14  folio three: the schedule, as a drawer of entry cards
   ----------------------------------------------------------------- */

main[data-page="schedule"] > p[data-opening]{
  grid-column:1 / -1;
  font-size:1.04rem;
  background:var(--secr-vellum);
  border:1px solid var(--secr-hair);
  border-block-start:3px solid var(--secr-accent);
  box-shadow:var(--secr-lay);
  padding:1.1rem var(--secr-pad);
  margin:0;
}
div[data-entries]{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));
  gap:var(--secr-gap);
  counter-reset:secr-para;
}
div[data-entries] > p{
  min-inline-size:0;
  counter-increment:secr-para;
  position:relative;
  margin:0;
  padding:1.5rem .9rem 1rem;
  font-size:.94rem;
  background-color:var(--secr-vellum);
  background-image:linear-gradient(180deg,var(--secr-face) 0,var(--secr-vellum) 46%,#f6efdf 100%);
  border:1px solid var(--secr-hair3);
  border-inline-start:3px solid var(--secr-accent2);
  box-shadow:var(--secr-lay);
  transition:border-inline-start-color 240ms ease,transform 240ms ease,box-shadow 240ms ease;
}
div[data-entries] > p::before{
  content:"entry " counter(secr-para,decimal-leading-zero);
  position:absolute;
  inset-block-start:.45rem;
  inset-inline-start:.9rem;
  font-family:var(--secr-mono);
  font-size:.56rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--secr-accent);
}
div[data-entries] > p:hover{
  border-inline-start-color:var(--secr-accent);
  transform:translateY(-2px);
  box-shadow:0 14px 24px -18px rgba(51,51,54,.78);
}

main[data-page="schedule"] > p:not([data-opening]):not([data-return]){
  grid-column:1 / -1;
  font-size:.95rem;
  background:var(--secr-face);
  border:1px solid var(--secr-hair3);
  border-inline-start:3px solid var(--secr-deep);
  padding:.9rem var(--secr-pad);
  margin:0;
}
p[data-return]{
  grid-column:1 / -1;
  font-family:var(--secr-mono);
  font-size:.66rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-align:center;
  margin:.4rem 0 0;
}

/* -----------------------------------------------------------------
   15  the foot: the diagonal of the opener, reversed
   ----------------------------------------------------------------- */

footer[data-part="foot"]{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  margin-block-start:1.4rem;
  border-block-start:1px solid var(--secr-hair);
  /* the wash reaches its deepest tone here, at the foot of the page */
  background-image:linear-gradient(180deg,transparent 0,var(--secr-ground2) 100%);
}

footer[data-part="foot"] > div{
  max-inline-size:var(--secr-frame);
  margin-inline:auto;
  padding:1.5rem var(--secr-pad) 0;
}

footer[data-part="foot"] p{margin:0 0 .35rem;font-size:.87rem}
footer[data-part="foot"] address{
  font-style:normal;
  font-size:.87rem;
  margin-block-end:.35rem;
  max-inline-size:26rem;
}
p[data-name]{
  font-family:var(--secr-mono);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--secr-deep);
  margin-block-end:.55rem;
  padding-block-end:.3rem;
  border-block-end:2px solid var(--secr-accent);
  display:inline-block;
}
div[data-colophon]{padding-block-end:2.8rem}

/* the diagonal of the opener, reversed: the post block draws its own
   charcoal ground and the seam falls in its own top padding */
div[data-post]{
  position:relative;
  padding:2.9rem 0 1.9rem;
  color:var(--secr-mist);
}
div[data-post]::before,
div[data-post]::after{
  content:"";
  position:absolute;
  inset-block:0 -2rem;
  inset-inline:-50vw;
}
div[data-post]::before{
  z-index:-2;
  background:var(--secr-accent2);
  clip-path:polygon(0 calc(2.3rem - 4px),100% -4px,100% 100%,0 100%);
}
div[data-post]::after{
  z-index:-1;
  background-color:var(--secr-shade);
  background-image:
    radial-gradient(52% 80% at 14% 96%,rgba(160,110,180,.44),rgba(160,110,180,0) 68%),
    linear-gradient(190deg,#45464c 0,var(--secr-shade) 72%);
  clip-path:polygon(0 2.3rem,100% 0,100% 100%,0 100%);
}
div[data-post] p{color:var(--secr-mist)}
div[data-post] a{color:var(--secr-accent2);text-decoration-color:rgba(207,193,156,.55)}
div[data-post] a:hover{color:var(--secr-vellum);text-decoration-color:var(--secr-vellum)}
p[data-post-label]{
  font-family:var(--secr-mono);
  font-size:.58rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--secr-accent2);
  margin-block-end:.4rem;
}
p[data-foot-folios]{
  font-family:var(--secr-mono);
  font-size:.64rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-block-start:.7rem;
}

/* -----------------------------------------------------------------
   16  the grid opens up. Spans are set per card, so no two rows of
       the drawer have the same rhythm.
   ----------------------------------------------------------------- */

@media (min-width:34rem){
  :root{--secr-pad:1.4rem;--secr-gap:1.15rem}
  header[data-part="masthead"] h1{letter-spacing:.13em}
}

@media (min-width:48rem){
  main{grid-template-columns:repeat(12,minmax(0,1fr))}
  main > section,
  main > nav[data-part="contents"]{grid-column:span 6}
  main > section[data-part="books"],
  main > section[data-part="maintenance"],
  main > section[data-part="calendar"],
  main > section[data-part="correspondence"],
  main > section[data-part="inspection"],
  main > section[data-part="schedule-table"],
  main > section[data-part="transcript"]{grid-column:span 12}

  /* folio three keeps one column: its own cards are the entry grid */
  main[data-page="schedule"]{grid-template-columns:minmax(0,1fr)}
  main[data-page="schedule"] > section[data-part]{grid-column:auto}

  /* the seam turns: it now runs down the page instead of across it */
  header[data-part="masthead"] > div{
    display:grid;
    grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
    gap:1.4rem;
    align-items:end;
    padding-block:2.3rem 2.6rem;
  }
  div[data-wedge]{padding:0 3.4rem 0 0}
  div[data-wedge]::before,
  div[data-wedge]::after{inset-block:-2.6rem -2.8rem;inset-inline:-50vw -3.4rem}
  div[data-wedge]::after{clip-path:polygon(0 0,100% 0,calc(100% - 5.6rem) 100%,0 100%)}
  div[data-wedge]::before{clip-path:polygon(0 0,calc(100% + 5px) 0,calc(100% - 5.6rem + 5px) 100%,0 100%)}
  div[data-vellum]{padding-block:0 .5rem}

  footer[data-part="foot"] > div{
    display:grid;
    grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
    gap:1.4rem;
    align-items:start;
    padding-block:2rem 0;
  }
  div[data-colophon]{padding-block-end:2rem}
  div[data-post]{padding:0 0 2rem 3.4rem}
  div[data-post]::before,
  div[data-post]::after{inset-block:-2.2rem -2.6rem;inset-inline:-5.6rem -50vw}
  div[data-post]::after{clip-path:polygon(5.6rem 0,100% 0,100% 100%,0 100%)}
  div[data-post]::before{clip-path:polygon(calc(5.6rem - 5px) 0,100% 0,100% 100%,-5px 100%)}
}

@media (min-width:62rem){
  :root{--secr-gap:1.3rem}
  main > section[data-part="particulars"],
  main > section[data-part="structure"],
  main > section[data-part="allotment"],
  main > section[data-part="reporting"],
  main > section[data-part="definition"],
  main > section[data-part="psc"],
  main > section[data-part="rectification"]{grid-column:span 7}
  main > nav[data-part="contents"],
  main > section[data-part="holdings"],
  main > section[data-part="bands"],
  main > section[data-part="reference-date"],
  main > section[data-part="office"],
  main > section[data-part="secretaries"],
  main > section[data-part="keeping"]{grid-column:span 5}

  /* the one card that reads best with the drawing standing beside its
     entries rather than above them */
  main > section[data-part="structure"]{
    display:grid;
    grid-template-columns:minmax(0,19rem) minmax(0,1fr);
    gap:1.1rem 1.3rem;
    align-items:start;
  }
  section[data-part="structure"] > h2{grid-column:1 / -1;justify-self:start}
  section[data-part="structure"] > figure{margin:0}
  section[data-part="structure"] > dl{grid-template-columns:minmax(0,1fr)}
  main > section[data-part="recharges"],
  main > section[data-part="officers"],
  main > section[data-part="members"],
  main > section[data-part="directors"],
  main > section[data-part="charges"],
  main > section[data-part="path"]{grid-column:span 6}
  main[data-page="schedule"] > section[data-part]{grid-column:auto}
  main > section,
  main > nav[data-part="contents"]{padding:1.4rem 1.3rem 1.5rem}
  main h2{font-size:1.08rem}
  header[data-part="masthead"] h1{font-size:1.78rem}
}

@media (min-width:78rem){
  :root{--secr-pad:1.6rem}
}

/* -----------------------------------------------------------------
   17  when motion is not wanted, every one-shot ends where it would
       have ended and nothing moves at all
   ----------------------------------------------------------------- */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:1ms !important;
    animation-delay:0ms !important;
    animation-iteration-count:1 !important;
    transition-duration:1ms !important;
  }
  main h2{background-size:100% 3px}
  figure[data-figure="structure"] path[data-branch],
  figure[data-figure="path"] path[data-spine]{stroke-dashoffset:0}
  figure[data-figure="bands"] g[data-marker]{transition:none}
}

@media print{
  html{background:#fff}
  body{background:#fff;color:#000;padding-block-start:0;padding-inline-start:0}
  div[data-part="rail"],div[data-part="cabinet"],[data-skip]{display:none}
  header[data-part="masthead"]::before,
  header[data-part="masthead"]::after,
  footer[data-part="foot"]::before,
  footer[data-part="foot"]::after{display:none}
  header[data-part="masthead"] h1,p[data-styled],div[data-post] p,div[data-post] a{color:#000}
  main{display:block}
  main > section,main > nav[data-part="contents"]{
    box-shadow:none;
    border:1px solid #999;
    break-inside:avoid;
    margin-block-end:.8rem;
  }
  main h2{animation:none;background-size:100% 2px}
}