/* The contents menu (menu.js). Paper, ink hairlines, DM Mono labels and one
   large typed word, as on the home page and the lens section. */

.index-panel,.fx-index-preview{display:none!important}
html.sm-open{overflow:hidden}
/* The home page's crack sits under the menu while it is open, so the sheet
   covers it as it drops and uncovers it as it lifts. */
html.sm-open .gp-hint,html.sm-closing .gp-hint{z-index:130!important;pointer-events:none!important}

/* The header stays on top, light, with the close cross. */
html.sm-open .site-head.menu-open{color:#1d1d1f!important;background:rgba(250,250,252,.86)!important;border-color:rgba(0,0,0,.07)!important;box-shadow:none!important}
html.sm-open .site-head.menu-open .menu-button i:before,html.sm-open .site-head.menu-open .menu-button i:after{background:#1d1d1f!important}
html.sm-open .site-head.menu-open .identity,html.sm-open .site-head.menu-open .coordinates{color:#1d1d1f!important}

.sm{position:fixed;inset:0;z-index:140;pointer-events:none;color:#1d1d1f;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif;-webkit-user-select:none;user-select:none}
.sm[hidden]{display:none}
.sm.is-open{pointer-events:auto}
.sm-sheet{position:absolute;inset:0;box-sizing:border-box;display:grid;grid-template-columns:clamp(220px,22vw,320px) minmax(0,1fr);column-gap:clamp(28px,4vw,72px);padding:calc(52px + clamp(28px,5vh,64px)) max(var(--pad,40px),calc((100vw - var(--max,1440px))/2)) clamp(28px,5vh,56px);background:#f5f5f7;clip-path:inset(0 0 100% 0);transition:clip-path .62s cubic-bezier(.76,0,.24,1)}
.sm-sheet:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:#1d1d1f;opacity:0;transition:opacity .2s}
.sm.is-open .sm-sheet{clip-path:inset(0 0 0 0)}

/* ---- the index ---------------------------------------------------------- */
.sm-index{display:flex;flex-direction:column;min-height:0}
.sm-kicker{margin:0 0 auto;display:flex;align-items:center;gap:12px;font:500 10px/1 "DM Mono",ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:#6e6e73}
.sm-kicker:before{content:"";width:34px;height:1px;background:#1d1d1f}
.sm-index ol{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid #1d1d1f}
.sm-index li{margin:0;border-bottom:1px solid rgba(29,29,31,.14)}
.sm-item{appearance:none;position:relative;display:flex;align-items:baseline;gap:18px;width:100%;margin:0;padding:clamp(9px,1.5vh,14px) 0;border:0;background:none;color:#1d1d1f;font:inherit;text-align:left;text-decoration:none;cursor:none;outline:none}
.sm-item span{flex:none;width:22px;font:500 10px/1 "DM Mono",ui-monospace,monospace;letter-spacing:.04em;color:#86868b;transition:color .25s}
.sm-item b{font-weight:600;font-size:clamp(19px,1.7vw,24px);letter-spacing:-.025em;line-height:1.1;transition:transform .45s cubic-bezier(.16,1,.3,1),color .25s}
/* A small square marks the page you are on; the one you point at slides in. */
.sm-item:before{content:"";position:absolute;right:0;top:50%;width:7px;height:7px;margin-top:-3.5px;border:1px solid #1d1d1f;box-sizing:border-box;opacity:0;transform:scale(.4);transition:opacity .25s,transform .35s cubic-bezier(.16,1,.3,1),background-color .25s}
.sm-item.is-current:before{opacity:1;transform:none;background:#1d1d1f}
.sm-item.is-shown b{transform:translateX(8px)}
.sm-item.is-shown span{color:#1d1d1f}
.sm-item.is-shown:not(.is-current):before{opacity:1;transform:none}
.sm-item:focus-visible b{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.sm-links{margin:22px 0 0;display:flex;gap:16px;font:500 10px/1 "DM Mono",ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase}
.sm-links a{color:#6e6e73;text-decoration:none;cursor:none;transition:color .2s}
.sm-links a:hover,.sm-links a:focus-visible{color:#1d1d1f;outline:none}

/* ---- the window ------------------------------------------------------------ */
.sm-stage{position:relative;min-height:0;overflow:hidden;border-top:1px solid #1d1d1f;border-bottom:1px solid #1d1d1f;background:#f5f5f7;color:#1d1d1f;transition:background-color .55s ease,color .55s ease}
.sm-stage[data-theme="blank"]{background:#fff}
.sm-stage[data-theme="dark"]{background:#1d1d1f;color:#f5f5f7}
.sm-field{position:absolute;inset:0;opacity:0;transition:opacity .55s ease;pointer-events:none}
.sm-field canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.sm-stage[data-theme="paper"] .sm-field-light{opacity:.45}
.sm-stage[data-theme="lines"] .sm-field-light{opacity:1}
.sm-stage[data-theme="dark"] .sm-field-dark{opacity:1}
.sm-meta{position:absolute;z-index:2;left:22px;top:20px;display:flex;gap:10px;font:500 10px/1 "DM Mono",ui-monospace,monospace;letter-spacing:.06em}
.sm-meta b{font-weight:500}
.sm-meta i{font-style:normal;opacity:.6}
.sm-go{position:absolute;z-index:2;right:22px;top:16px;display:flex;align-items:center;gap:10px;font:500 10px/1 "DM Mono",ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase}
.sm-go i{position:relative;width:22px;height:1px;background:currentColor}
.sm-go i:after{content:"";position:absolute;right:0;top:-3px;width:6px;height:6px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.sm-word{position:absolute;z-index:2;left:18px;right:18px;bottom:52px;display:flex;align-items:baseline;font:650 clamp(64px,min(11vw,19vh),200px)/.8 -apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif;letter-spacing:-.07em;white-space:nowrap}
.sm-caret{margin-left:.04em;letter-spacing:0;opacity:0}
.sm-stage.is-typing .sm-caret{opacity:1}
.sm-note{position:absolute;z-index:2;left:22px;bottom:22px;font:500 10px/1 "DM Mono",ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;opacity:.7}

/* ---- opening: the sheet drops, the rules draw, the index rises -------------- */
.sm-kicker,.sm-index li,.sm-links,.sm-meta,.sm-go,.sm-note{opacity:0;transform:translateY(10px);transition:opacity .35s ease,transform .6s cubic-bezier(.16,1,.3,1)}
.sm-stage{border-color:transparent}
.sm-stage:before,.sm-stage:after{content:"";position:absolute;z-index:3;left:0;right:0;height:1px;background:#1d1d1f;transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.76,0,.24,1)}
.sm-stage:before{top:-1px}.sm-stage:after{bottom:-1px}
.sm.is-open .sm-stage:before,.sm.is-open .sm-stage:after{transform:none;transition-delay:.22s}
.sm.is-open .sm-kicker,.sm.is-open .sm-index li,.sm.is-open .sm-links,.sm.is-open .sm-meta,.sm.is-open .sm-go,.sm.is-open .sm-note{opacity:1;transform:none}
.sm.is-open .sm-kicker{transition-delay:.25s}
.sm.is-open .sm-index li{transition-delay:calc(.28s + var(--d,0) * 1s)}
.sm.is-open .sm-index li:nth-child(1){--d:.00}.sm.is-open .sm-index li:nth-child(2){--d:.035}.sm.is-open .sm-index li:nth-child(3){--d:.07}.sm.is-open .sm-index li:nth-child(4){--d:.105}.sm.is-open .sm-index li:nth-child(5){--d:.14}.sm.is-open .sm-index li:nth-child(6){--d:.175}.sm.is-open .sm-index li:nth-child(7){--d:.21}
.sm.is-open .sm-links{transition-delay:.52s}
.sm.is-open .sm-meta,.sm.is-open .sm-go,.sm.is-open .sm-note{transition-delay:.42s}
.sm-stage .sm-field{transition:opacity .55s ease}
/* Closing is quicker and all at once. */
.sm:not(.is-open) .sm-sheet{transition-duration:.48s}
.sm:not(.is-open) *{transition-delay:0s!important}

@media(max-width:900px){
  .sm-sheet{grid-template-columns:1fr;grid-template-rows:minmax(160px,34svh) auto;row-gap:22px;padding:calc(48px + 20px) 18px 24px;overflow:auto}
  .sm-index{order:2}
  .sm-stage{order:1}
  .sm-kicker{display:none}
  .sm-index ol{margin-top:0}
  .sm-item{padding:14px 0}
  .sm-item b{font-size:26px}
  .sm-word{bottom:40px;font-size:clamp(52px,17vw,96px)}
  .sm-note{bottom:16px}
}
@media(prefers-reduced-motion:reduce){
  .sm *,.sm-sheet{transition:none!important}
}