/* Search: the lamp.
   One deep blue and one light in it. A marble woman holds up an oil lamp, the light a
   traveller sees first. The page's blue is the picture's own dark (tools/art.py clears it),
   so she stands in the page with no edge, and the lamp's glow is drawn here so it can
   breathe. What Google shows is set on white cards in Google's own plain type, so it reads
   as the real thing against the night. Everything eases; nothing snaps. */

body.w-vault { background: var(--ground); }

/* ================= Hero ================= */

/* The picture is as tall as the hero and 3:2, so the flame's place is known: --flame-x from
   the left edge. The words begin to the right of it, in its light. */
.se-hero {
  --ph: max(100svh, 720px); --pw: calc(var(--ph) * 1.5); --flame-x: calc(var(--pw) * .4716);
  position: relative; isolation: isolate; display: grid; align-items: center; min-height: var(--ph); overflow: clip;
  padding: calc(var(--nav-h) + 20px) max(var(--gutter), (100vw - var(--wrap)) / 2) clamp(40px, 7svh, 80px) max(50vw, calc(var(--flame-x) + 6vw));
}
.se-lamp { position: absolute; z-index: -1; left: 0; bottom: 0; height: 100%; aspect-ratio: 3 / 2; margin: 0; pointer-events: none; transform: translate3d(0, calc((var(--p, .5) - .5) * 5%), 0); }
.se-lamp img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 0 100%; -webkit-mask: linear-gradient(#000 82%, transparent); mask: linear-gradient(#000 82%, transparent); animation: se-arrive 2.2s var(--ease) both; }
@keyframes se-arrive { from { opacity: 0; } }
/* The glow and the flame sit on the wick, in % of the picture. The glow is wide and faint
   and carries a breath of noise (--dither), so its long falloff does not show as rings. */
.se-lamp__halo, .se-lamp__flame { position: absolute; left: 47.16%; top: 17.39%; translate: -50% -50%; border-radius: 50%; }
.se-lamp__halo {
  width: 68%; aspect-ratio: 1;
  background: var(--dither), radial-gradient(closest-side, rgba(255, 170, 64, .26), rgba(255, 152, 50, .1) 14%, rgba(255, 144, 44, .034) 32%, rgba(255, 140, 40, .012) 60%, rgba(255, 140, 40, 0));
  -webkit-mask: radial-gradient(closest-side, #000 40%, transparent); mask: radial-gradient(closest-side, #000 40%, transparent);
  animation: se-kindle 3.2s var(--ease) both, se-breathe 6.5s ease-in-out 3.2s infinite alternate;
}
.se-lamp__flame {
  top: 16.9%; width: 1.3%; height: 4.6%; filter: blur(1.5px); transform-origin: 50% 92%;
  background: radial-gradient(closest-side, rgba(255, 252, 238, .95), rgba(255, 220, 150, .5) 56%, rgba(255, 190, 100, 0));
  animation: se-flicker 3.7s ease-in-out infinite;
}
@keyframes se-kindle { from { opacity: 0; transform: scale(.45); } }
@keyframes se-breathe { from { opacity: .8; transform: scale(.96); } to { opacity: 1; transform: scale(1.05); } }
@keyframes se-flicker {
  0%, 100% { transform: scale(1, 1) rotate(0deg); opacity: .86; }
  22% { transform: scale(.93, 1.09) rotate(-2deg); opacity: 1; }
  47% { transform: scale(1.05, .95) rotate(1.5deg); opacity: .8; }
  71% { transform: scale(.96, 1.11) rotate(-1deg); opacity: 1; }
}
.se-hero__copy { position: relative; max-width: 40rem; }
.se-hero__copy .label { margin-bottom: clamp(18px, 2.4svh, 30px); }
/* The headline takes the lamp's colour on the side nearest it. */
.se-hero h1 { max-width: 8.6em; padding-bottom: .08em; background: linear-gradient(96deg, #f4d79c, var(--ink) 52%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.se-hero .lede { margin-top: clamp(18px, 2.6svh, 30px); max-width: 26em; }
.se-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(26px, 3.6svh, 44px); }
@media (prefers-reduced-motion: reduce) { .se-lamp img, .se-lamp__halo, .se-lamp__flame { animation: none; } .se-lamp { transform: none; } }

/* Narrow: the picture stands above the words. It is the upright picture, set to the full
   width, so the flame's place is known again: 87.14% across, and 29.84% down a 2:3 frame. */
@media (max-width: 1100px) {
  .se-hero { display: block; min-height: 0; padding: 0 var(--gutter) clamp(44px, 9vw, 80px); }
  .se-lamp { position: relative; left: auto; bottom: auto; width: auto; height: min(118vw, 64svh); aspect-ratio: auto; margin: 0 calc(-1 * var(--gutter)); transform: none; }
  .se-lamp img { object-position: 50% 0; -webkit-mask: linear-gradient(#000 72%, transparent); mask: linear-gradient(#000 72%, transparent); }
  .se-lamp__halo, .se-lamp__flame { left: 87.14%; top: calc(100vw * 1.5 * .2984); }
  .se-lamp__halo { width: 120%; }
  .se-lamp__flame { top: calc(100vw * 1.5 * .2984 - 1.4vw); width: 2.6vw; height: 7vw; }
  .se-hero__copy { margin-top: clamp(-56px, -6vw, -20px); }
}

/* The sections stand closer than on the other pages, and only the comparison has its own ground. */
.w-vault main > .sec { padding-block: clamp(64px, 6.6vw, 128px); }

/* ================= Where the clicks go ================= */

/* On this ground the figures are filled solid: hatching shimmers on deep blue. */
.w-vault .pf .m { font-size: 13px; }
.pf--ranks .bar rect { fill: rgba(245, 238, 220, .2); stroke: none; }
.pf--ranks .bar--hot rect { fill: var(--accent); stroke: none; }
.pf--bounce .area { opacity: 1; }
.se-clicks__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(30px, 6vw, 120px); align-items: center; }
.se-clicks h2 { margin-bottom: clamp(22px, 2.4vw, 36px); max-width: 8em; }
.se-clicks p { max-width: 30em; font-size: 1.08rem; }
.se-clicks__fig { margin: 0; }
.se-clicks__fig .pf { margin-bottom: 14px; }
.se-clicks__fig figcaption { font: 400 .8125rem/1.5 var(--mono); color: var(--text); }
/* Two drawings of one figure: the narrow one is drawn at the size it is read at. */
.se-clicks__narrow { display: none; }
@media (max-width: 900px) { .se-clicks__grid { grid-template-columns: 1fr; } .se-clicks__fig { max-width: 560px; } }
@media (max-width: 620px) { .se-clicks__wide { display: none; } .se-clicks__narrow { display: block; } }

/* ================= Section heads ================= */

.se-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 20px clamp(24px, 5vw, 96px); align-items: end; margin-bottom: clamp(36px, 4.4vw, 70px); }
.se-head .lede { justify-self: end; max-width: 30em; }
@media (max-width: 900px) { .se-head { grid-template-columns: 1fr; } .se-head .lede { justify-self: start; } }

/* ================= What Google shows ================= */

.se-list p, .se-speed p, .se-start__rows p, .hit__notes, .hit__faults { font-size: 1.08rem; }
.se-shows { background: var(--ground-2); border-block: 1px solid var(--line); }
.se-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(22px, 2.4vw, 36px); }
.se-tabs button { min-height: 44px; padding: 0 20px; border: 1px solid var(--line-2); border-radius: 999px; background: none; color: var(--ink); font: 500 .8125rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: color .3s, background-color .3s, border-color .3s; }
.se-tabs button:hover { border-color: var(--accent-hi); }
.se-tabs button[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.se-tabs button:focus-visible { outline: 1px solid var(--accent-hi); outline-offset: 6px; }
.no-js .se-tabs { display: none; }

/* Google's own plain look: white, Arial, blue title. Site styles stay out of these cards. */
/* Changing the kind of business: the two results leave quickly, the search is typed, and
   they come back one after the other. */
.hit { transition: opacity .7s var(--ease), transform .9s var(--ease); }
.hit--after { transition-delay: .12s; }
.serp.is-swapping .hit { opacity: 0; transform: translateY(12px); transition-duration: .2s; transition-delay: 0s; }
.serp__query span { min-height: 1.3em; }
.serp.is-typing .serp__query span::after { content: ""; display: inline-block; width: 1px; height: 1.15em; margin-left: 2px; vertical-align: -.18em; background: var(--g-ink); animation: se-caret 1s steps(2, jump-none) infinite; }
@keyframes se-caret { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hit { transition: none; } }
.serp { --g-ink: #202124; --g-text: #4d5156; --g-link: #1a0dab; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; }
.serp__query { display: flex; align-items: center; gap: 14px; max-width: none; margin-bottom: clamp(22px, 2.4vw, 34px); padding: 13px 22px; border-radius: 999px; background: #fff; color: var(--g-ink); font-size: 1rem; line-height: 1.3; box-shadow: 0 10px 30px rgba(4, 8, 40, .4); }
.serp__query svg { flex: none; width: 18px; height: 18px; fill: none; stroke: #9aa0a6; stroke-width: 2; stroke-linecap: round; }
.serp__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto; gap: 0 clamp(20px, 3vw, 56px); }
.hit { display: grid; grid-row: span 3; grid-template-rows: subgrid; margin: 0; min-width: 0; }
.hit figcaption { margin-bottom: 14px; font: 500 .8125rem/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--text); }
.hit--after figcaption { color: var(--accent-hi); }
.hit__card { position: relative; padding: 24px 28px 26px; border-radius: 10px; background: #fff; color: var(--g-text); box-shadow: 0 24px 60px rgba(2, 4, 24, .6); transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.hit--after:hover .hit__card { transform: translateY(-4px); box-shadow: 0 34px 80px rgba(2, 4, 24, .7); }
.hit--before .hit__card { box-shadow: 0 14px 34px rgba(2, 4, 24, .4); }
.hit--after .hit__card { padding-left: 62px; box-shadow: 0 0 0 1px rgba(240, 215, 154, .5), 0 0 60px rgba(226, 192, 116, .16), 0 24px 60px rgba(2, 4, 24, .6); }
.hit__card p { max-width: none; margin: 0; }
.hit__site { display: flex; align-items: center; gap: 12px; }
.hit__site i { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #e8eaed; color: #5f6368; font: 700 13px/1 Arial, sans-serif; font-style: normal; }
.hit__site span { display: grid; min-width: 0; }
.hit__site b { font-weight: 400; font-size: .875rem; line-height: 1.3; color: var(--g-ink); }
.hit__site em { font-style: normal; font-size: .75rem; line-height: 1.4; color: var(--g-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hit__title { margin-top: 10px !important; font-size: 1.25rem; line-height: 1.3; color: var(--g-link); }
.hit__meta { margin-top: 6px !important; font-size: .875rem; line-height: 1.5; }
.hit__desc { margin-top: 4px !important; font-size: .875rem; line-height: 1.58; }
.hit__links { margin-top: 12px !important; font-size: .875rem; line-height: 1.5; color: var(--g-link); }
/* The numbered marks, and the notes they point to. */
.hit__card sup { position: absolute; left: 22px; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; background: var(--ground); color: var(--accent-hi); font: 500 .6875rem/1 var(--mono); }
.hit__notes { counter-reset: note; display: grid; grid-template-columns: 1fr 1fr; gap: 14px clamp(20px, 2.4vw, 40px); margin: clamp(26px, 2.6vw, 40px) 0 0; padding: 0; list-style: none; font-family: var(--serif); line-height: 1.45; color: var(--text); }
.hit__notes li { counter-increment: note; position: relative; padding-left: 36px; }
.hit__notes li::before { content: counter(note); position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--accent); color: var(--accent-hi); font: 500 .6875rem/1 var(--mono); }
.hit__faults { display: grid; gap: 12px; margin: clamp(26px, 2.6vw, 40px) 0 0; padding: 0; list-style: none; font-family: var(--serif); line-height: 1.45; color: var(--text); }
.hit__faults li { position: relative; padding-left: 36px; }
.hit__faults li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 14px; height: 1px; background: var(--line-3); }
.serp__note { max-width: none; margin-top: clamp(26px, 3vw, 44px); font: 400 .8125rem/1.5 var(--mono); color: var(--mute); }
/* Narrow: the two results first, one under the other, then what is wrong and what is right. */
@media (max-width: 900px) {
  .serp__pair { grid-template-columns: 1fr; grid-template-rows: none; }
  .hit { display: contents; }
  .hit--before figcaption { order: 1; } .hit--before .hit__card { order: 2; }
  .hit--after figcaption { order: 3; margin-top: 30px; } .hit--after .hit__card { order: 4; }
  .hit__faults { order: 5; } .hit__notes { order: 6; }
}
@media (max-width: 520px) { .hit__notes { grid-template-columns: 1fr; } .hit__card { padding: 20px 20px 22px; } .hit--after .hit__card { padding-left: 54px; } .hit__card sup { left: 16px; } .hit__title { font-size: 1.125rem; } }

/* ================= What we do ================= */

.se-work__title { margin-bottom: clamp(30px, 3.4vw, 56px); }
/* A ledger: one row for each thing, its name on the left and what it means on the right. */
.se-list { counter-reset: row; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-2); }
.se-list li { counter-increment: row; display: grid; grid-template-columns: 34px minmax(0, 5fr) minmax(0, 6fr); gap: 0 clamp(16px, 3vw, 60px); align-items: baseline; padding: clamp(20px, 2.2vw, 34px) 0; border-bottom: 1px solid var(--line); transition: background-color .6s var(--ease); }
.se-list li::before { content: counter(row, decimal-leading-zero); font: 500 .8125rem/1 var(--mono); letter-spacing: .1em; color: var(--accent); }
@media (hover: hover) { .se-list li:hover { background: linear-gradient(90deg, rgba(240, 215, 154, .05), rgba(240, 215, 154, 0) 70%); } }
.se-list h3 { font: 500 clamp(1.45rem, .9vw + 1.15rem, 2.1rem)/1.12 var(--cormorant); letter-spacing: -.008em; color: var(--ink); text-wrap: balance; }
.se-list p { line-height: 1.56; max-width: 36em; }
@media (max-width: 800px) { .se-list li { grid-template-columns: 34px minmax(0, 1fr); } .se-list p { grid-column: 2; margin-top: 8px; } }

/* ================= Speed ================= */

.se-speed__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(30px, 6vw, 120px); align-items: center; }
.se-speed__fig { order: -1; }
.se-speed h2 { margin-bottom: clamp(22px, 2.4vw, 36px); max-width: 10em; }
.se-speed p { max-width: 34em; }
.se-speed p + p { margin-top: 1em; }
.se-speed .link { margin-top: 26px; }
.se-speed__fig { margin: 0; }
.se-speed__fig .pf { margin-bottom: 16px; }
.se-speed__fig figcaption { font: 400 .8125rem/1.5 var(--mono); color: var(--text); }
@media (max-width: 900px) { .se-speed__grid { grid-template-columns: 1fr; } .se-speed__fig { order: 0; max-width: 440px; } }

/* ================= Where it starts ================= */

.se-start { padding-top: 0; }
.se-start h2 { margin-bottom: clamp(34px, 4vw, 64px); }
.se-start__rows { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 96px); margin: 0; padding: 0; list-style: none; }
.se-start__rows li { display: grid; grid-template-rows: auto 1fr auto; justify-items: start; padding-top: 22px; border-top: 1px solid var(--line-3); }
.se-start__rows h3 { margin-bottom: 12px; font: italic 500 clamp(1.6rem, 1vw + 1.2rem, 2.2rem)/1.08 var(--cormorant); color: var(--ink); }
.se-start__rows p { max-width: 34em; }
.se-start__rows .link { margin-top: 22px; }
@media (max-width: 800px) { .se-start__rows { grid-template-columns: 1fr; } }

/* ================= Contact ================= */

.contact--vault { padding-top: clamp(20px, 3vw, 50px); }
.contact--vault .card-label { --ground: #0a1038; }