/* The Living Timeline: brand tokens, fonts and the site navigation. Every page links this first.
   Matches the live Le Random Editorials system (23 Sep 2026): paper #F7F4EA reading grounds, Rules 500 at -.04rem for
   headings and interface, EB Garamond only for reading text, page frame clamp(20px,4.4vw,80px), content up to 1580px. */
@font-face{font-family:'Rules';src:url(../fonts/Rules-Regular.woff) format('woff');font-weight:400;font-display:swap}
@font-face{font-family:'Rules';src:url(../fonts/Rules-Medium.woff) format('woff');font-weight:500;font-display:swap}
:root{
  --lr-cream:#EFE9D8; --lr-paper:#F7F4EA; --lr-ink:#011015; --lr-orange:#FF4C00; --lr-blue:#02B0F4;
  --lr-hair:rgba(1,16,21,.17); --lr-dim:rgba(1,16,21,.62);
  --lr-sans:'Rules','Helvetica Neue',Helvetica,Arial,sans-serif;
  --lr-serif:'EB Garamond','Iowan Old Style',Palatino,Georgia,serif;
  --lr-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --lr-shadow:10px 11px 0 rgba(1,16,21,.10);
  --lr-track:-.04rem;                          /* Editorials: headings and interface */
  --lr-frame:clamp(20px,4.4vw,80px);           /* Editorials: page frame padding-inline */
  --lr-maxw:1580px;                            /* Editorials: max content width */
  --nav-h:56px;
  --sn-bg:rgba(1,16,21,.6); --sn-bar:rgba(1,16,21,.86); --sn-line:rgba(239,233,216,.18);
}
*,*::before,*::after{box-sizing:border-box}
.lab{font:500 10.5px/1.2 var(--lr-sans);letter-spacing:.16em;text-transform:uppercase}
:focus-visible{outline:2px solid var(--lr-orange);outline-offset:2px}

/* site navigation: dark glass by default, .is-light on cream pages.
   The glass lives on ::before, never on .site-nav itself: a backdrop-filter on the nav would make it the containing block
   of the fixed phone tab bar below and pin that bar to the top of the screen. */
.site-nav{position:fixed;z-index:50;top:0;left:0;right:0;height:calc(var(--nav-h) + env(safe-area-inset-top,0px));
  padding:env(safe-area-inset-top,0px) 20px 0;display:flex;align-items:center;gap:22px;isolation:isolate;
  color:#EFE9D8;font-family:var(--lr-sans);letter-spacing:var(--lr-track)}
.site-nav::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--sn-bg);border-bottom:1px solid var(--sn-line);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
.site-nav.is-light{color:#011015;--sn-bg:rgba(247,244,234,.78);--sn-bar:rgba(247,244,234,.94);--sn-line:rgba(1,16,21,.14)}
.site-nav a{color:inherit;text-decoration:none}
.sn-brand{display:flex;align-items:center;gap:14px;flex:0 0 auto;min-height:40px}
.sn-logo{height:19px;width:auto;display:block}
.sn-logo-b{display:none}.site-nav.is-light .sn-logo-b{display:block}.site-nav.is-light .sn-logo-w{display:none}
.sn-product{font:500 10.5px/1 var(--lr-sans);letter-spacing:.16em;text-transform:uppercase;opacity:.62;padding-left:14px;border-left:1px solid currentColor;border-left-color:rgba(127,127,127,.4);white-space:nowrap}
.sn-links{display:flex;gap:4px;margin-left:auto;height:100%;min-width:0}
.sn-links a{display:flex;align-items:center;padding:0 10px;font-size:13.5px;font-weight:500;white-space:nowrap;opacity:.7;border-bottom:2px solid transparent;transition:opacity .2s,border-color .2s}
.sn-links a:hover{opacity:1}
.sn-links a[aria-current="page"]{opacity:1;border-bottom-color:var(--lr-orange)}
.sn-search{display:inline-flex;align-items:center;gap:10px;height:32px;padding:0 10px 0 14px;border:1px solid rgba(127,127,127,.45);border-radius:16px;background:transparent;color:inherit;
  font:500 10.5px/1 var(--lr-sans);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;position:relative}
.sn-search::after{content:"";position:absolute;inset:-5px -3px}
.sn-search kbd{font:500 11px/1 var(--lr-sans);padding:2px 6px;border:1px solid rgba(127,127,127,.45);border-radius:4px;letter-spacing:0}
@media (max-width:1320px){.sn-product{display:none}}
@media (min-width:861px) and (max-width:1050px){.site-nav{gap:14px}.sn-links{gap:0}.sn-links a{padding:0 7px}}
@media (max-width:860px){
  .sn-links{position:fixed;z-index:50;left:0;right:0;bottom:0;top:auto;height:calc(52px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);
    justify-content:flex-start;gap:0;margin:0;overflow-x:auto;overscroll-behavior-x:contain;background:var(--sn-bar);border-top:1px solid var(--sn-line);
    -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
  .sn-links a{flex:1 0 auto;justify-content:center;min-width:max-content;padding:0 12px;font-size:12px;letter-spacing:-.02em;border-bottom:0;border-top:2px solid transparent;white-space:nowrap}
  .sn-links a[aria-current="page"]{border-top-color:var(--lr-orange)}
  .sn-search{margin-left:auto;width:40px;height:40px;padding:0;justify-content:center;border-radius:20px}
  .sn-search span,.sn-search kbd{display:none}
  .sn-search::before{content:"";width:14px;height:14px;background:no-repeat center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='6.8' cy='6.8' r='4.6' fill='none' stroke='%23888' stroke-width='1.6'/%3E%3Cpath d='M10.2 10.2 14 14' stroke='%23888' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")}
}
@media (max-width:400px){.sn-links a{font-size:11.5px}}
@media (max-width:350px){.sn-links a{font-size:10.5px;letter-spacing:-.03em}}
.sn-fallback{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:20px 24px;border-bottom:1px solid var(--lr-hair);font:500 13.5px/1.4 var(--lr-sans);background:var(--lr-paper);color:var(--lr-ink)}
.sn-fallback a{color:inherit;text-decoration:none}.sn-fallback a:hover{text-decoration:underline}
.sn-fallback img{display:block;width:auto;height:19px}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}