/* The sign-in page. Same paper, ink, lime and typeface as the rest of Heliopolis. No inline styles anywhere:
   the site's security policy only allows its own stylesheet files.
   The drawing leads and the form stays quiet beside it. Two separate fields with their labels above, in the site's
   flat box style: drawn with the same pen as the pictures. A thin ink line, barely rounded corners, no shadows, and a
   lime halo while you type. */
@font-face { font-family: "Lato"; src: url("/meetings/2026-09-17/assets/_assets/fonts/lato/Lato-Light-extended.woff2") format("woff2"); font-style: normal; font-weight: 300; font-display: swap; unicode-range: U+0100-0130, U+0132-0151, U+0154-02BA, U+02BD-02C5, U+02C7-02D9, U+02DB, U+02DD-0303, U+0305-0307, U+0309-0328, U+032A-0513, U+0E3F, U+1D00-1DCA, U+1DFE-1FFE, U+2070-2071, U+2075-20AB, U+20AD-20BA, U+20DD, U+2105-2120, U+2126-2132, U+214D-215F, U+2183-2184, U+21A8, U+2202-2211, U+2219-222B, U+2261, U+2302-2321, U+2460-2473, U+24EA-2518, U+25A1-25AB, U+25CA-25CF, U+25E6, U+2600, U+263C, U+2669, U+2776-277F, U+2C60-2C77, U+2E17, U+A717-A721, U+F8FF, U+FB00-FB04, U+FE20-FE23; }
@font-face { font-family: "Lato"; src: url("/meetings/2026-09-17/assets/_assets/fonts/lato/Lato-Light.woff2") format("woff2"); font-style: normal; font-weight: 300; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+2248, U+2260, U+2264-2265, U+FEFF, U+FFFD; }
@font-face { font-family: "Lato"; src: url("/meetings/2026-09-17/assets/_assets/fonts/lato/Lato-Regular-extended.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; unicode-range: U+0100-0130, U+0132-0151, U+0154-02BA, U+02BD-02C5, U+02C7-02D9, U+02DB, U+02DD-0303, U+0305-0307, U+0309-0328, U+032A-0513, U+0E3F, U+1D00-1DCA, U+1DFE-1FFE, U+2070-2071, U+2075-20AB, U+20AD-20BA, U+20DD, U+2105-2120, U+2126-2132, U+214D-215F, U+2183-2184, U+21A8, U+2202-2211, U+2219-222B, U+2261, U+2302-2321, U+2460-2473, U+24EA-2518, U+25A1-25AB, U+25CA-25CF, U+25E6, U+2600, U+263C, U+2669, U+2776-277F, U+2C60-2C77, U+2E17, U+A717-A721, U+F8FF, U+FB00-FB04, U+FE20-FE23; }
@font-face { font-family: "Lato"; src: url("/meetings/2026-09-17/assets/_assets/fonts/lato/Lato-Regular.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+2248, U+2260, U+2264-2265, U+FEFF, U+FFFD; }
@font-face { font-family: "Lato"; src: url("/meetings/2026-09-17/assets/_assets/fonts/lato/Lato-Bold-extended.woff2") format("woff2"); font-style: normal; font-weight: 700; font-display: swap; unicode-range: U+0100-0130, U+0132-0151, U+0154-02BA, U+02BD-02C5, U+02C7-02D9, U+02DB, U+02DD-0303, U+0305-0307, U+0309-0328, U+032A-0513, U+0E3F, U+1D00-1DCA, U+1DFE-1FFE, U+2070-2071, U+2075-20AB, U+20AD-20BA, U+20DD, U+2105-2120, U+2126-2132, U+214D-215F, U+2183-2184, U+21A8, U+2202-2211, U+2219-222B, U+2261, U+2302-2321, U+2460-2473, U+24EA-2518, U+25A1-25AB, U+25CA-25CF, U+25E6, U+2600, U+263C, U+2669, U+2776-277F, U+2C60-2C77, U+2E17, U+A717-A721, U+F8FF, U+FB00-FB04, U+FE20-FE23; }
@font-face { font-family: "Lato"; src: url("/meetings/2026-09-17/assets/_assets/fonts/lato/Lato-Bold.woff2") format("woff2"); font-style: normal; font-weight: 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+2248, U+2260, U+2264-2265, U+FEFF, U+FFFD; }
:root { --paper: #faf9f5; --ink: #103044; --muted: #526879; --frame: #d3d9c6; --frame-strong: #a7b396; --lime: #daeaaa; --white: #fffefb; --signal: #007d76; --warn: #8a3b1e;
  --radius: 5px; --line: 1.5px; --halo: 0 0 0 3px var(--lime); }
* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); font: 400 16px/1.6 Lato, "Avenir Next", sans-serif; -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100dvh; }
.gate-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 372px); gap: clamp(36px, 6vw, 104px); align-items: center; max-width: 1340px; min-height: 100dvh; margin: 0 auto; padding: 48px clamp(20px, 5vw, 72px); }
.gate-art img { display: block; width: 100%; max-width: 760px; height: auto; margin-left: auto; }
.gate-wordmark { display: block; width: 184px; height: auto; margin: 0 0 40px; }
.gate-kicker, .gate-label { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .15em; line-height: 1.5; text-transform: uppercase; }
.gate-kicker { margin: 0 0 12px; }
h1 { margin: 0 0 10px; font-size: clamp(36px, 3.6vw, 46px); font-weight: 300; line-height: 1.1; letter-spacing: 0; }
.gate-lead { margin: 0 0 30px; color: var(--muted); font-size: 17px; }
.gate-form { display: grid; gap: 18px; }
.gate-field { display: grid; gap: 8px; }
.gate-label { display: block; padding-left: 2px; }
.gate-field input { display: block; width: 100%; min-height: 52px; margin: 0; padding: 0 16px; border: var(--line) solid var(--ink); border-radius: var(--radius); outline: 0; background: var(--white); color: var(--ink); font: inherit; font-size: 17px; appearance: none; transition: border-color .16s, box-shadow .16s; }
.gate-field input:focus { border-color: var(--ink); box-shadow: var(--halo); }
.gate-field input[type="password"] { letter-spacing: .08em; }
.gate-password { position: relative; display: block; }
.gate-password input { padding-right: 78px; }
/* A saved password fills in without the browser's yellow or blue block. */
.gate-field input:-webkit-autofill, .gate-field input:-webkit-autofill:hover, .gate-field input:-webkit-autofill:focus { -webkit-text-fill-color: var(--ink); caret-color: var(--ink); -webkit-box-shadow: 0 0 0 40px var(--white) inset; }
.gate-field input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 40px var(--white) inset, var(--halo); }
.gate-show { position: absolute; top: 4px; right: 6px; min-width: 62px; min-height: 44px; border: 0; border-radius: 4px; background: transparent; color: var(--muted); font: inherit; font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; cursor: pointer; }
.gate-show:hover, .gate-show[aria-pressed="true"] { color: var(--ink); }

.gate-button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 54px; margin-top: 6px; padding: 0 24px; border: 1px solid var(--ink); border-radius: var(--radius); background: var(--ink); color: var(--white); font: inherit; font-size: 16px; letter-spacing: .01em; cursor: pointer; }
.gate-button:hover:not(:disabled) { background: var(--lime); color: var(--ink); }
.gate-button:hover:not(:disabled) .gate-arrow { transform: translateX(4px); }
.gate-button:disabled { opacity: .6; cursor: progress; }
.gate-arrow { display: inline-block; }
.gate-error { margin: 0; padding: 12px 16px; border-radius: var(--radius); background: #f8ece3; color: var(--warn); font-size: 14px; line-height: 1.5; }
.gate-error[hidden] { display: none; }
.gate-help { margin: 26px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
:is(a, button):focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; }
@media (max-width: 860px) {
  .gate-page { grid-template-columns: minmax(0, 1fr); gap: 26px; align-content: start; padding: 28px 20px 40px; }
  .gate-art { order: 2; }
  .gate-art img { max-width: 440px; margin: 0 auto; }
  .gate-wordmark { width: 170px; margin-bottom: 30px; }
  .gate-lead { margin-bottom: 24px; }
}
@media (prefers-reduced-motion: no-preference) { .gate-button, .gate-arrow { transition: background .16s, color .16s, transform .16s; } }
@media (prefers-reduced-motion: reduce) { .gate-field input { transition: none; } }

/* Playground (September 22): the courtyard's sun shines, the logo keeps the time of day, a wrong password gives a
   small shake, and signing in opens the courtyard like a door. Everything is still files on the signed-out list;
   the rays and the logo are drawn inside the page itself. Reduce Motion keeps it all still. */
.gate-scene { position: relative; display: block; width: 100%; max-width: 760px; margin-left: auto; }
.gate-scene img { position: relative; z-index: 1; max-width: none; margin: 0; }
.gate-rays { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; }
.gate-rays line { stroke: var(--ink); stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: 30; stroke-dashoffset: 30; }
.gate-rays-turn { transform-box: view-box; transform-origin: 421px 80px; }
@media (prefers-reduced-motion: no-preference) {
  .gate-panel > * { animation: gate-rise .5s cubic-bezier(.2,0,0,1) both; }
  .gate-panel > :nth-child(2) { animation-delay: 60ms; } .gate-panel > :nth-child(3) { animation-delay: 110ms; } .gate-panel > :nth-child(4) { animation-delay: 150ms; }
  .gate-panel > :nth-child(5) { animation-delay: 190ms; } .gate-panel > :nth-child(n+6) { animation-delay: 230ms; }
  .gate-scene img { animation: gate-develop .8s cubic-bezier(.2,0,0,1) both; }
  .gate-rays line { animation: gate-ray .7s cubic-bezier(.2,0,0,1) .55s forwards; }
  .gate-rays-turn { animation: gate-turn 90s linear 1.2s infinite; }
  .gate-form.is-wrong { animation: gate-shake .36s cubic-bezier(.4,0,.2,1); }
  .gate-entering .gate-scene { animation: gate-door .56s cubic-bezier(.4,0,1,1) forwards; transform-origin: 63% 56%; }
  .gate-entering .gate-panel { animation: gate-leave .3s cubic-bezier(.4,0,1,1) forwards; }
}
@media (prefers-reduced-motion: reduce) { .gate-rays line { stroke-dashoffset: 0; } }
@keyframes gate-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes gate-develop { from { opacity: 0; transform: translateY(8px) scale(.985); } }
@keyframes gate-ray { to { stroke-dashoffset: 0; } }
@keyframes gate-turn { to { transform: rotate(360deg); } }
@keyframes gate-shake { 20% { transform: translateX(-7px); } 45% { transform: translateX(6px); } 70% { transform: translateX(-3px); } 100% { transform: none; } }
@keyframes gate-door { to { opacity: 0; transform: scale(1.6); } }
@keyframes gate-leave { to { opacity: 0; transform: translateY(-6px); } }
@media (max-width: 860px) { .gate-scene { max-width: 440px; margin: 0 auto; } }