/* AI Streamline: written from scratch to match the existing look (see ../../NOTES.md).
   Parts: 1 base (the Bootstrap 3 defaults the old pages relied on), 2 page layout, 3 the record pages, 4 scroll animations,
   5 platform theme (the privacy notice and the consent window), 6 small screens. No inline styles, no external requests. */

/* 1 ---- base --------------------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; list-style: none; }
html { font-family: sans-serif; -webkit-text-size-adjust: 100%; font-size: 10px; scroll-behavior: smooth; }
body {
  /* the old page loaded its stylesheet twice, so the royal blue won over the indigo set inline: keep what was seen */
  display: grid; grid-template-rows: 1fr 10rem auto; min-height: 100vh; overflow-x: hidden;
  background: #0e48b5; color: #eff6f8; font-family: "Sixtyfour", serif; font-size: 14px; line-height: 1.42857143;
}
h1, h2, h3, h4, h5, h6 { font-weight: 500; line-height: 1.1; color: inherit; }
h1, h2, h3 { margin-top: 20px; margin-bottom: 10px; }
h4, h5, h6 { margin-top: 10px; margin-bottom: 10px; }
h1 { font-size: 36px; }
h3 { font-size: 24px; }
h4 { font-size: 18px; font-family: "Montserrat", sans-serif; }
h5 { font-size: 14px; font-family: "Zilla Slab Highlight", serif; font-weight: 400; font-style: oblique; }
h6 { font-size: 12px; font-family: "Montserrat", sans-serif; }
h1 { font-family: "Zilla Slab Highlight", serif; font-weight: 700; font-style: oblique; }
h2 {
  font-size: 48px; font-family: "Sixtyfour", serif; font-optical-sizing: auto; font-weight: 400; font-style: normal;
  font-variation-settings: "BLED" 0, "SCAN" -22;
}
p { margin: 0 0 10px; font-family: "Zilla Slab Highlight", serif; font-weight: 700; font-style: oblique; }
ul { margin-top: 0; margin-bottom: 10px; }
a { color: #337ab7; text-decoration: none; }
a:hover, a:focus { color: #23527c; text-decoration: underline; }
img { vertical-align: middle; border: 0; }
figure { margin: 0; }
sup { position: relative; top: -0.5em; font-size: 75%; line-height: 0; vertical-align: baseline; }
.text-center { text-align: center; }

.container { margin: 0 auto; padding: 0 15px; position: static; height: 15vh; background-color: #0e48b5; display: flex; justify-content: center; align-items: center; }
.container-fluid { margin: 0 auto; padding: 0 15px; }
.row { margin: 0 -15px; }
.row::before, .row::after { content: " "; display: table; }
.row::after { clear: both; }
.col-sm-4 { position: relative; min-height: 1px; padding: 0 15px; }
@media (min-width: 768px) { .container { width: 750px; } .col-sm-4 { float: left; width: 33.33333333%; } }
@media (min-width: 992px) { .container { width: 970px; } }
@media (min-width: 1200px) { .container { width: 1170px; } }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* 2 ---- page layout --------------------------------------------------------------------------------------- */
#particles-js { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
#particles-js canvas { display: block; width: 100%; height: 100%; }
.padding { height: 200px; }

header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.sticky-header { position: fixed; top: 0; width: 100%; background-color: #ffffff; z-index: 999; font-weight: bold; color: #ffffff; }
.sticky-header ul { display: flex; justify-content: center; list-style-type: none; margin: 0; padding: 0; margin-bottom: 0; }
.sticky-header li { margin: 0 10px; }
.sticky-header a { text-decoration: none; color: #000000; }
.sticky-header a:hover { color: #000000; text-decoration: none; }

main { width: min(1400px, 100vw); margin: auto; padding: 20px; }

.hero-section { padding: 50px; text-align: center; color: #ffffff; }
.home .hero-section { padding: 3%; }
.contact-section { text-align: center; color: #ffffff; padding: 50px; }
.contact-section p { margin-bottom: 20px; }
.contact-section a { display: inline-block; padding: 10px 20px; background-color: #ffffff; color: #2515a9; font-weight: bold; text-decoration: none; }

/* The intro. The logo, 65% of the page's width, opens the page in the normal flow, and "We figured out how to use AI" (also 65% of the page's width, narrower only where the
   window is too short or too narrow for it to turn without leaving the frame) sits directly under it, so both are on the first screen. As the page scrolls, the picture is
   pinned in the middle of the window and turns once, until the timeline begins. Only the picture's own height is reserved for it (--phrase-h): the old full-screen stage left a
   blank screen between the logo and the words. The turn starts when the logo has scrolled out of the window, --top-h down the page (the logo's height plus the paddings above and
   below it) and lasts 120vh; .intro-run is as tall as the pin needs: the pin starts when the picture reaches the middle of the window and ends together with the turn.
   The picture's width keeps its whole rotated outline inside the frame (its diagonal is 1.0856 times its width). Without scroll-driven animations, or for visitors who asked for
   less motion, the picture stays as drawn, under the logo. */
:root {
  --vh: 100vh;
  --logo-ratio: 0.4573;  /* the logo picture's height divided by its width (878 / 1920, as Brand Studio made it): change it with the picture */
  --top-h: calc(98px + 65vw * var(--logo-ratio));  /* main's own 20px padding, the logo section's 58px above and 8px below its picture, the picture's height, and the 12px above the turning picture */
  --phrase-w: min(65vw, calc(min(100vw - 32px, var(--vh) - 64px) * 0.84));
  --phrase-h: calc(var(--phrase-w) * 0.4226);  /* 415 / 982 */
}
@supports (height: 100svh) { :root { --vh: 100svh; } }
.intro-top { box-sizing: border-box; padding: 58px 0 8px; text-align: center; }
.intro-name { display: block; width: 65vw; margin: 0 auto; line-height: 0; }
.intro-name img { display: block; width: 100%; height: auto; border-radius: 14px; }  /* the logo picture as made in Brand Studio, 65% of the page's width */
.intro-run { padding: 12px 0 24px; }
.intro-stage { display: grid; place-items: center; }
.intro-spin { display: grid; place-items: center; width: 100%; }
.intro-phrase { width: var(--phrase-w); height: auto; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .intro-run { height: calc((var(--vh) + var(--phrase-h)) / 2 + 120vh + 36px); }  /* + the 12px and 24px of padding, which the border box includes */
    .intro-stage { position: sticky; top: calc((var(--vh) - var(--phrase-h)) / 2); height: var(--phrase-h); }
    .intro-phrase { animation: introSpin linear both; animation-timeline: scroll(root); animation-range: var(--top-h) calc(var(--top-h) + 120vh); }
    @keyframes introSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
  }
}

.grid figure img { width: 100%; }
.grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(var(--row), 100px); margin-top: 50px; gap: 50px; }
.grid-1 { grid-template-rows: none; }
.grid-1 h2 { font-size: 7em; grid-column: 1 / 7; text-align: center; margin: 0; z-index: 1; }
.grid-2 { --row: 8; font-size: 1.7em; }
.grid-2 div:nth-child(1) { grid-column: 1 / 4; grid-row: 3; }
.grid-2 div:nth-child(2) { grid-column: 4 / 7; grid-row: 1; }
.grid-2 div:nth-child(3) { grid-column: 4 / 7; grid-row: 4; }
.grid-2 div:nth-child(4) { grid-column: 1 / 4; grid-row: 6; }
.grid-3 { --row: 6; font-size: 7em; }
.grid-3 div { grid-column: 2 / 6; text-wrap: nowrap; }
.grid-3 div:nth-child(even) { text-align: right; }
.grid-3 div:nth-child(5) { grid-column: 1 / 6; }
.grid-3 div:nth-child(4) { grid-column: 1 / 7; }

/* picture bands between the old sections: placeholder pictures about AI and wires (see ASSETS.md), the old layout is unchanged */

.site-footer { margin-top: 60px; padding: 20px; text-align: center; font-size: 12px; }
.site-footer a, .site-footer button { color: #ffffff; font: inherit; font-family: "Sixtyfour", serif; background: none; border: 0; cursor: pointer; text-decoration: underline; margin: 0 8px; }

/* 3 ---- the record pages: current projects, projects, timeline, contact (plain HTML cards, readable type; the old look is around them) ---- */
.record-section { margin: 90px 0 180px; color: #eff6f8; } /* the room below keeps the turning pictures that follow off the buttons */
.record-section h2 { text-align: center; }
.record-page { width: min(1000px, 100vw); margin: auto; padding-top: 90px; color: #eff6f8; }
.record-title { font-family: "Sixtyfour", serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-size: 48px; font-variation-settings: "BLED" 0, "SCAN" -22; margin: 0 0 10px; }
.record-h2 { font-size: 28px; margin: 50px 0 16px; }
.record-h3 { font-family: "Sixtyfour", serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-size: 22px; font-variation-settings: "BLED" 0, "SCAN" -22; margin: 0 0 10px; }
.record-lead, .record-note { font-family: system-ui, "Segoe UI", sans-serif; font-style: normal; font-weight: 400; font-size: 17px; line-height: 1.6; max-width: 46em; margin: 0 0 14px; }
.record-section .record-lead { margin-left: auto; margin-right: auto; text-align: center; }

/* the node map on the home page (js/web.js): a canvas that fits the screen's width (stacked top to bottom on a narrow one, never a scroll bar); the card is plain text */
.web-map { margin: 70px 0 0; color: #eff6f8; --web-ink: #0e48b5; }
.web-map .web-title { text-align: center; font-size: 36px; }
.web-map .web-hint { text-align: center; margin: 0 0 14px; }
.web-scroll { overflow: visible; } /* no scroll bar: the map is laid out to fit */
.web-stage { position: relative; margin: 0 auto; max-width: 100%; }
.web-canvas { display: block; max-width: none; }
.web-canvas img { display: block; width: 100%; height: auto; }
.web-canvas:focus-visible { outline: 3px solid #ffd84d; outline-offset: 2px; }
.web-pop { position: absolute; z-index: 5; width: 300px; max-width: calc(100vw - 24px); padding: 12px 14px; border-radius: 10px; background: #ffffff; color: #0b1f55; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); font-family: "Montserrat", sans-serif; font-size: 13px; line-height: 1.4; }
.web-pop[hidden] { display: none; }
.web-pop span, .web-pop strong { display: block; }
.web-pop-name { font-size: 16px; font-weight: 700; }
.web-pop-phrase { color: #4a5688; font-size: 12px; margin-bottom: 6px; }
.web-pop-label { text-transform: uppercase; letter-spacing: 0.06em; font-size: 10px; color: #6a74a8; }
.web-pop-text { font-family: "Montserrat", sans-serif; font-weight: 600; font-style: normal; font-size: 14px; } /* not the highlight font: its built-in highlighter box makes small text unreadable */
.web-pop-open { margin-top: 10px; padding: 6px 12px; border: 0; border-radius: 6px; background: #0e48b5; color: #ffffff; font: 600 12px "Montserrat", sans-serif; cursor: pointer; }
.web-pop-open[hidden] { display: none; }
.web-pop-open:hover, .web-pop-open:focus-visible { background: #0b3a94; outline: 2px solid #ffd84d; outline-offset: 2px; }
/* the saved-page window: plain text and small pictures, never a page engine; a full-screen sheet on phones */
.saved { margin: auto; border: 0; padding: 0; width: min(760px, 94vw); max-height: 88vh; border-radius: 12px; background: #ffffff; color: #0b1f55; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); font-family: "Montserrat", sans-serif; }
.saved[open] { display: flex; flex-direction: column; }
.saved::backdrop { background: rgba(5, 12, 40, 0.72); }
.saved-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #d5dbf0; }
.saved .saved-title { margin: 0; font-family: "Montserrat", sans-serif; font-size: 16px; font-weight: 700; color: #0b1f55; }
.saved-close { padding: 6px 12px; border: 1px solid #b9c3ea; border-radius: 6px; background: #f3f5fd; color: #0b1f55; font: 600 12px "Montserrat", sans-serif; cursor: pointer; }
.saved .saved-notice { margin: 0; padding: 8px 16px; background: #fff4c2; color: #4a3b00; font-family: "Montserrat", sans-serif; font-size: 12px; font-style: normal; font-weight: 600; }
.saved-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px 0; }
.saved-tabs:empty { display: none; }
.saved-tab { padding: 5px 12px; border: 1px solid #b9c3ea; border-radius: 16px; background: #ffffff; color: #0b1f55; font: 600 12px "Montserrat", sans-serif; cursor: pointer; }
.saved-tab[aria-pressed="true"] { background: #0e48b5; border-color: #0e48b5; color: #ffffff; }
.saved-body { flex: 1; overflow-y: auto; padding: 14px 16px 22px; }
.saved-top { display: block; width: 100%; height: 230px; object-fit: cover; object-position: top; margin-bottom: 14px; border: 1px solid #d5dbf0; border-radius: 8px; } /* a banner of the page's top, so its first words show without scrolling */
.saved .saved-h { margin: 14px 0 6px; font-family: "Montserrat", sans-serif; font-size: 17px; font-weight: 700; line-height: 1.25; color: #0b1f55; }
.saved .saved-p { margin: 0 0 8px; font-family: "Montserrat", sans-serif; font-size: 14px; font-style: normal; font-weight: 500; line-height: 1.5; color: #1d2b5e; overflow-wrap: anywhere; }
.saved .saved-wait { margin: 14px 0; font-family: "Montserrat", sans-serif; font-size: 14px; font-style: normal; font-weight: 500; color: #4a5688; }
.saved-img { display: block; max-width: 100%; height: auto; margin: 12px auto; border-radius: 6px; }
.saved-more { margin: 14px 0 0; padding: 9px 16px; border: 0; border-radius: 8px; background: #0e48b5; color: #ffffff; font: 600 13px "Montserrat", sans-serif; cursor: pointer; }
@media (max-width: 700px) { .saved { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; } }
/* the highlights (js/highlights.js): the line carries on below the map, opens the introduction, then winds through ghosts, the blank arch of the welcome window's picture */
.highlights { margin: 0 0 180px; color: #eff6f8; } /* the room below keeps the turning pictures that follow off the buttons */
.hl-body { position: relative; display: flow-root; max-width: 1200px; margin: 0 auto; } /* flow-root keeps the room above the introduction inside the body, so the line's first curve starts at the map's edge */
.hl-wire { position: absolute; left: 0; top: 0; z-index: 1; overflow: visible; pointer-events: none; }
.hl-intro { position: relative; z-index: 2; width: min(620px, calc(100% - 96px)); margin: 230px auto 0; }
.hl-intro .hl-title { margin: 0 0 18px; font-size: 30px; }
.hl-intro .hl-line { margin: 0 0 16px; font-family: "Montserrat", sans-serif; font-style: normal; font-weight: 500; font-size: 17px; line-height: 1.6; color: #eff6f8; }
.hl-on .hl-title, .hl-on .hl-line { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.hl-on .hl-title.on, .hl-on .hl-line.on { opacity: 1; transform: none; }
.hl-path { position: relative; z-index: 2; margin: 90px 0 0; padding: 0 0 150px; list-style: none; }
.hl-item { position: relative; }
.hl-large { height: 290px; }
.hl-medium { height: 250px; }
.hl-small { height: 205px; }
.hl-pos { position: absolute; top: 0; } /* no transform here: a transform would turn a fixed-position sheet into a box relative to this one */
.hl-large .hl-pos { margin-left: -95px; }
.hl-medium .hl-pos { margin-left: -75px; }
.hl-small .hl-pos { margin-left: -56px; }
.hl-x1 .hl-pos { left: 74%; }
.hl-x2 .hl-pos { left: 24%; }
.hl-x3 .hl-pos { left: 68%; }
.hl-x4 .hl-pos { left: 30%; }
.hl-x5 .hl-pos { left: 62%; }
.hl-x6 .hl-pos { left: 36%; }
.hl-ghost { display: grid; place-items: center; padding: 0 12px; border: 0; background: #17a8bd; color: #06253d; cursor: pointer; text-align: center; font: 700 14px/1.2 "Montserrat", sans-serif;
  border-radius: 50% 50% 8px 8px / 46% 46% 8px 8px; /* the arch beside "Notes from founder" in the welcome window */
  transition: opacity .6s ease, transform .6s ease, background .2s ease; }
.hl-large .hl-ghost { width: 190px; height: 210px; font-size: 16px; }
.hl-medium .hl-ghost { width: 150px; height: 168px; }
.hl-small .hl-ghost { width: 112px; height: 124px; font-size: 12px; }
.hl-ghost:hover, .hl-ghost:focus-visible { background: #2cc3d9; }
.hl-ghost:focus-visible { outline: 3px solid #ffd84d; outline-offset: 4px; }
.hl-on .hl-ghost { opacity: 0; transform: scale(.55); } /* until the line reaches it */
.hl-on .hl-item.on .hl-ghost { opacity: 1; transform: none; }
.hl-item.spin .hl-ghost { animation: hl-spin .75s cubic-bezier(.45, 0, .25, 1) 1; }
@keyframes hl-spin { from { transform: perspective(800px) rotateY(0deg) scale(1); } 55% { transform: perspective(800px) rotateY(200deg) scale(1.1); } to { transform: perspective(800px) rotateY(360deg) scale(1); } }
.hl-card { position: absolute; top: 50%; left: calc(100% + 18px); z-index: 20; width: 320px; padding: 14px 16px; border-radius: 12px; background: #ffffff; color: #0b1f55; box-shadow: 0 14px 38px rgba(0, 0, 0, 0.4);
  font-family: "Montserrat", sans-serif; font-size: 14px; line-height: 1.5; visibility: hidden; opacity: 0; transform: translateY(-50%) scale(.9); transform-origin: left center;
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s; }
.hl-x1 .hl-card, .hl-x3 .hl-card, .hl-x5 .hl-card { left: auto; right: calc(100% + 18px); transform-origin: right center; }
.hl-item.open { z-index: 10; }
.hl-item.open .hl-card { visibility: visible; opacity: 1; transform: translateY(-50%) scale(1); transition-delay: 0s; }
.hl-card .status { margin: 0 0 4px; font-family: "Montserrat", sans-serif; font-style: normal; font-weight: 700; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #5a64a0; }
.hl-card h3 { margin: 0 0 6px; font: 700 16px/1.3 "Montserrat", sans-serif; color: #0b1f55; }
.hl-card p { margin: 0 0 8px; font-family: "Montserrat", sans-serif; font-style: normal; font-weight: 500; font-size: 14px; color: #1d2b5e; }
.hl-card p.account { font-size: 12px; font-style: italic; font-weight: 500; color: #5a64a0; }
.hl-card a { color: #0e48b5; font-weight: 700; text-decoration: underline; }
/* the bubbles around an opened card: tiny pictures and short phrases from that website, each joined to the card by a line; placed by js/highlights.js, only while the card is open */
.hl-bubbles { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.hl-bubbles svg { position: absolute; left: 0; top: 0; overflow: visible; z-index: -1; pointer-events: none; }
.hl-bubble { position: absolute; z-index: 1; pointer-events: auto; cursor: pointer; opacity: 0; transform: scale(.4); transition: opacity .35s ease, transform .35s ease, box-shadow .2s ease; }
.hl-item.open .hl-bubble { opacity: 1; transform: none; }
.hl-bubble-img { width: 76px; height: 76px; border-radius: 50%; overflow: hidden; background: #17a8bd; border: 3px solid #ffffff; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); }
.hl-bubble-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hl-bubble-txt { max-width: 170px; padding: 7px 14px; border-radius: 18px; background: #ffffff; color: #0e48b5; font: 700 12px/1.25 "Montserrat", sans-serif; text-align: center; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); }
.hl-bubble:hover { box-shadow: 0 0 0 3px #ffd84d, 0 6px 18px rgba(0, 0, 0, 0.35); }
.hl-bubbles line { stroke: #ffffff; stroke-width: 1.6; stroke-opacity: .75; stroke-linecap: round; }
.hl-item.open .hl-bubble-img, .hl-item.open .hl-bubble-txt { animation: hl-float 6s ease-in-out infinite alternate; }
.hl-item.open .hl-bubble:nth-child(2n) { animation-duration: 7.5s; animation-delay: -2s; }
.hl-item.open .hl-bubble:nth-child(3n) { animation-duration: 5.5s; animation-delay: -4s; }
@keyframes hl-float { from { translate: 0 0; } to { translate: 0 -7px; } }
.highlights:not(.hl-on) .hl-bubbles { display: none; }
@media (prefers-reduced-motion: reduce) { .hl-bubble { transition: none; animation: none !important; } }
@media (max-width: 900px) { .hl-bubbles { display: none; } } /* the project is a bottom sheet here; the "scroll through the website" button is in it */
.hl-close { display: none; margin-top: 4px; padding: 7px 14px; border: 1px solid #b9c3ea; border-radius: 8px; background: #f3f5fd; color: #0b1f55; font: 700 13px "Montserrat", sans-serif; cursor: pointer; }
.hl-break { position: relative; width: min(620px, calc(100% - 96px)); margin: 50px auto 90px; padding: 8px 0 14px; }
.hl-break + .hl-showcase { margin-top: 250px; } /* room for the line to swing from beside the Showcase words to beside the tiles */
.hl-break .hl-title { margin: 0 0 12px; font-size: 26px; }
.hl-break .hl-line { margin: 0; font-family: "Montserrat", sans-serif; font-style: normal; font-weight: 500; font-size: 16px; line-height: 1.6; color: #eff6f8; }
.hl-card .hl-open, .hl-site .hl-open { margin: 2px 0 8px; padding: 8px 14px; border: 0; border-radius: 8px; background: #0e48b5; color: #ffffff; font: 700 13px "Montserrat", sans-serif; cursor: pointer; }
.hl-card .hl-open:hover, .hl-card .hl-open:focus-visible, .hl-site .hl-open:hover, .hl-site .hl-open:focus-visible { background: #0b3a94; outline: 2px solid #ffd84d; outline-offset: 2px; }
.highlights:not(.hl-review) .hl-open[data-approved="0"], .highlights:not(.hl-on) .hl-open { display: none; } /* a saved website is offered only once the owner has approved it (tools/saved_pages.json) */
.saved .saved-note { margin: 0; padding: 6px 16px; background: #e9f1ff; color: #0b1f55; font-family: "Montserrat", sans-serif; font-size: 12px; font-style: normal; font-weight: 600; }
.saved .saved-note[hidden] { display: none; }
/* the Showcase: every website is open at once, with its pictures, as a grid of tiles (no ghosts, nothing to hover); the tiles come in together when the line reaches them */
.hl-showcase { position: relative; z-index: 2; width: min(1000px, calc(100% - 96px)); margin: 0 auto 90px; list-style: none; }
.hl-sites { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.hl-site { display: flex; flex-direction: column; padding: 14px 16px 16px; border-radius: 12px; background: #ffffff; color: #0b1f55; box-shadow: 0 14px 38px rgba(0, 0, 0, 0.4); }
.hl-site > p:last-child { margin: auto 0 0; } /* the button sits at the foot of the tile, so a row of tiles lines up */
.hl-site .status { margin: 0 0 4px; font-family: "Montserrat", sans-serif; font-style: normal; font-weight: 700; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #5a64a0; }
.hl-site h3 { margin: 0 0 6px; font: 700 16px/1.3 "Montserrat", sans-serif; color: #0b1f55; }
.hl-site p { margin: 0 0 8px; font-family: "Montserrat", sans-serif; font-style: normal; font-weight: 500; font-size: 14px; color: #1d2b5e; }
.hl-site p.account { font-size: 12px; font-style: italic; color: #5a64a0; }
.hl-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 10px 0; }
.hl-shots.one { grid-template-columns: minmax(0, 1fr); }
.hl-shot { display: block; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: #17a8bd; cursor: pointer; }
.hl-shot img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.hl-shot:hover, .hl-shot:focus-visible { outline: 3px solid #ffd84d; outline-offset: 1px; }
.hl-on .hl-showcase .hl-site { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; }
.hl-on .hl-showcase.on .hl-site { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .hl-on .hl-showcase .hl-site { transition: none; } }
/* the call for subjects: four kinds of people we want to hear from; each button is an email link, the site has no form */
.page-logo { display: block; box-sizing: border-box; width: min(300px, 72vw); margin: 0 auto 10px; padding: 10px 18px; background: #ffffff; border-radius: 14px; }  /* the logos are dark artwork with a blue line: shown whole, on white */
.page-logo img { display: block; width: 100%; height: auto; }
.foot-logo { display: block; box-sizing: border-box; width: min(260px, 64vw); height: auto; margin: 0 auto 16px; padding: 12px 18px; background: #ffffff; border-radius: 14px; }
.tool-alpha { display: block; margin: 0 0 14px; max-width: 420px; }
.tool-alpha img { display: block; width: 100%; height: auto; border-radius: 12px; }
.end-result { margin: 0 auto 120px; width: min(760px, calc(100% - 48px)); color: #eff6f8; text-align: center; }
.end-title { margin: 0 0 18px; font-size: 30px; }
.end-line { margin: 0 0 16px; font-family: "Montserrat", sans-serif; font-style: normal; font-weight: 500; font-size: 17px; line-height: 1.6; color: #eff6f8; }
.end-last { margin: 30px 0 0; font-size: 22px; line-height: 1.3; letter-spacing: .04em; }
.subjects { margin: 0 auto 120px; width: min(1000px, calc(100% - 48px)); color: #eff6f8; }
.subjects-title { margin: 0 0 16px; font-size: 30px; text-align: center; }
.subjects-lead { margin: 0 auto 28px; max-width: 40em; text-align: center; font-family: "Montserrat", sans-serif; font-style: normal; font-weight: 500; font-size: 17px; line-height: 1.6; color: #eff6f8; }
.subjects-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.subjects-card { display: flex; flex-direction: column; padding: 16px 18px 18px; border-radius: 12px; background: #ffffff; color: #0b1f55; box-shadow: 0 14px 38px rgba(0, 0, 0, 0.4); }
.subjects-card h3 { margin: 0 0 8px; font: 700 17px/1.3 "Montserrat", sans-serif; color: #0b1f55; }
.subjects-card p { margin: 0 0 10px; font-family: "Montserrat", sans-serif; font-style: normal; font-weight: 500; font-size: 14px; line-height: 1.5; color: #1d2b5e; }
.subjects-card p:last-child { margin: auto 0 0; }
.subjects-button { display: inline-block; padding: 9px 16px; border-radius: 8px; background: #0e48b5; color: #ffffff; font: 700 13px "Montserrat", sans-serif; text-decoration: none; }
.subjects-button:hover, .subjects-button:focus-visible { background: #0b3a94; outline: 2px solid #ffd84d; outline-offset: 2px; }
.subjects-how { margin: 24px auto 0; max-width: 44em; text-align: center; font-family: "Montserrat", sans-serif; font-style: normal; font-weight: 500; font-size: 13px; line-height: 1.6; color: rgba(239, 246, 248, .88); }
@media (max-width: 700px) { .subjects-grid { grid-template-columns: minmax(0, 1fr); } }
.hl-key { position: relative; z-index: 2; max-width: 520px; margin: 0 auto 50px; padding: 0 16px; text-align: center; font-family: "Montserrat", sans-serif; font-style: normal; font-weight: 500; font-size: 13px; color: rgba(239, 246, 248, .85); }
.highlights .record-links { text-align: center; }
/* without the script the cards are just a plain list */
.highlights:not(.hl-on) .hl-ghost, .highlights:not(.hl-on) .hl-key { display: none; }
.highlights:not(.hl-on) .hl-item { height: auto; }
.highlights:not(.hl-on) .hl-pos { position: static; margin: 0; }
.highlights:not(.hl-on) .hl-card { position: static; visibility: visible; opacity: 1; transform: none; width: auto; margin: 0 24px 16px; }
@media (prefers-reduced-motion: reduce) { .hl-ghost, .hl-title, .hl-line, .hl-card { transition: none; } }
@media (max-width: 900px) { /* the project opens as a sheet at the bottom of the screen: nothing moves in the page, so the line stays where it is */
  .hl-card, .hl-x1 .hl-card, .hl-x3 .hl-card, .hl-x5 .hl-card { position: fixed; left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; max-height: 70vh; overflow-y: auto; transform: translateY(16px); transform-origin: bottom center; }
  .hl-item.open .hl-card { transform: none; }
  .hl-close { display: block; }
}
@media (max-width: 700px) {
  .hl-intro { margin: 100px 14px 0 44px; width: auto; }
  .hl-break { margin: 20px 14px 60px 44px; width: auto; }
  .hl-showcase { width: auto; margin: 0 14px 60px 44px; }
  .hl-sites { grid-template-columns: minmax(0, 1fr); }
  .hl-intro .hl-title { font-size: 22px; }
  .hl-large { height: 235px; }
  .hl-medium { height: 205px; }
  .hl-small { height: 170px; }
  .hl-large .hl-pos { margin-left: -75px; }
  .hl-medium .hl-pos { margin-left: -62px; }
  .hl-small .hl-pos { margin-left: -48px; }
  .hl-large .hl-ghost { width: 150px; height: 166px; font-size: 14px; }
  .hl-medium .hl-ghost { width: 124px; height: 138px; font-size: 13px; }
  .hl-small .hl-ghost { width: 96px; height: 106px; font-size: 11px; }
  .hl-x1 .hl-pos { left: 68%; }
  .hl-x2 .hl-pos { left: 32%; }
  .hl-x3 .hl-pos { left: 64%; }
  .hl-x4 .hl-pos { left: 34%; }
  .hl-x5 .hl-pos { left: 62%; }
  .hl-x6 .hl-pos { left: 36%; }
}
.web-list { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* read by screen readers and search crawlers, not shown */
.record-card { background: #ffffff; color: #1f2328; border-radius: 12px; padding: 20px 24px; margin: 0 0 18px; font-family: system-ui, "Segoe UI", sans-serif; font-size: 15px; line-height: 1.55; text-align: left; }
.record-card h3 { font-family: system-ui, "Segoe UI", sans-serif; font-size: 20px; font-weight: 700; font-style: normal; line-height: 1.3; margin: 6px 0 8px; color: #0b2f78; }
.record-card h4 { font-family: system-ui, "Segoe UI", sans-serif; font-size: 15px; font-weight: 700; margin: 14px 0 4px; }
.record-card p { font-family: system-ui, "Segoe UI", sans-serif; font-style: normal; font-weight: 400; margin: 0 0 10px; }
.record-card a { color: #0e48b5; text-decoration: underline; }
.record-card .status { display: inline-block; background: #e6eefc; color: #0b2f78; border-radius: 999px; padding: 2px 12px; font-size: 13px; font-weight: 600; margin: 0 0 4px; }
.record-card .when, .record-card .meta, .record-card .alt, .record-card .empty { color: #4b5563; font-size: 13px; }
.record-card .alt { font-weight: 400; }
.project-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 24px; width: min(1100px, 100%); margin: 30px auto 0; }
.project-cards .record-card { margin: 0; }
.timeline { margin: 0 0 0 8px; padding: 0 0 0 22px; border-left: 3px solid rgba(255, 255, 255, .55); }
.timeline > li { position: relative; list-style: none; margin: 0 0 20px; }
.timeline > li::before { content: ""; position: absolute; left: -33px; top: 24px; width: 14px; height: 14px; border-radius: 50%; background: #ffffff; border: 3px solid #0e48b5; }
.timeline .record-card { margin: 0; }
.evidence { margin: 8px 0 0; padding: 0; font-size: 13px; }
.evidence li { list-style: none; margin: 0 0 4px; }
.ev-type { font-weight: 700; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 10px 0; }
.facts dt { font-weight: 700; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.fingerprint code { font-family: ui-monospace, Consolas, monospace; font-size: 13px; word-break: break-all; }
.works { margin: 4px 0 0 18px; padding: 0; }
.works li { list-style: disc; margin: 0 0 3px; }
.record-links { text-align: center; margin-top: 26px; }
.record-button { display: inline-block; margin: 6px; padding: 10px 18px; background: #ffffff; color: #0e48b5; font-family: "Sixtyfour", serif; font-style: normal; font-weight: 400; font-size: 13px; text-decoration: none; }
.record-button:hover, .record-button:focus { color: #0b2f78; text-decoration: underline; }
.site-footer .disclosure, .site-footer .updated { font: 400 13px/1.5 system-ui, "Segoe UI", sans-serif; max-width: 60em; margin: 14px auto 0; color: #eff6f8; }
@media screen and (max-width: 560px) { .facts { grid-template-columns: 1fr; } .record-title { font-size: 34px; } }

/* 4 ---- scroll animations (the browser's own scroll timelines) ---------------------------------------------- */
.autoShow { animation: autoShowAnimation both; animation-timeline: view(70% 5%); }
@keyframes autoShowAnimation { from { opacity: 0; transform: translateY(200px) scale(0.3); } to { opacity: 1; transform: translateY(0) scale(1); } }
.autoBLur { animation: autoBLurAnimation linear both; animation-timeline: view(); }
@keyframes autoBLurAnimation { 0% { filter: blur(40px); } 45%, 55% { filter: blur(0px); } 100% { filter: blur(40px); } }

/* 5 ---- platform theme: forum, account, admin, forms ---------------------------------------------------------- */
:root { --pf-accent: #2515a9; --pf-btn-radius: 5px; --pf-radius: 12px; --pf-font-size: 15px; }
.pf-surface { font-family: system-ui, "Segoe UI", sans-serif; }
.pf-surface h2 { font-family: "Sixtyfour", serif; font-size: 22px; font-variation-settings: "BLED" 0, "SCAN" -22; }
.pf-surface p { font-family: system-ui, "Segoe UI", sans-serif; }
.pf-page { width: min(1000px, 100vw); margin: auto; }

/* 6 ---- small screens (same breakpoints as the old page) ---------------------------------------------------------- */
@media screen and (max-width: 1023px) {
  .grid-1 h2 { font-size: 3em; }
  .grid { display: block; }
  .grid-3 { font-size: 3em; display: block; margin-bottom: 100px; }
  .grid-2 div:nth-child(1) { grid-row: 2; }
  .sticky-header ul { flex-wrap: wrap; }
}