/* Plate 5: Found. A search shines a light; it lands on one marble figure on a plain sea ground, and the
   plaque on her pedestal says whose business she is. The same search then plays out in a results panel below.
   JS aims the beam from the search bar's lamp at the statue's face (--bx --by --ang --hw --bl) and adds
   .is-found when the art comes into view; without JS the found state is the page. */
.fd{position:relative;background:var(--sea);overflow:clip;--ink:#0a1416}

/* ---------- the poster (phone first) ---------- */
.fd-poster{position:relative}
.fd-copy{position:relative;z-index:3;padding:calc(env(safe-area-inset-top) + 104px) var(--g) 0}
.fd-lead{font:italic 400 21px/1.3 var(--garamond);color:var(--marble-2)}
.fd-title{margin-top:4px;font:300 min(17.5vw,96px)/.9 var(--didone);font-stretch:62.5%;letter-spacing:-.008em;color:var(--marble)}
.fd-lede{margin-top:20px;max-width:30ch;font:400 19px/1.45 var(--garamond);color:var(--marble-2);text-wrap:pretty}

/* the art: a museum spot on the sea ground, the figure, the light, the search. The --b* defaults match what
   the script computes, so the page without JS still lights her. */
.fd-art{--bx:calc(var(--g) + min(70vw,330px) - 26px);--by:26px;--ang:-7deg;--hw:35deg;--bl:148vw;position:relative;height:166vw;margin-top:26px;overflow-x:visible;overflow-y:clip;
  background:radial-gradient(52% 36% at 70% 44%,rgba(70,232,212,.12),rgba(70,232,212,0) 72%)}
.fd-figure{position:absolute;z-index:1;right:-3vw;top:24vw;width:64vw;aspect-ratio:687/1466}
.fd-statue img{display:block;width:100%;height:auto;filter:brightness(.84) contrast(1.06);
  -webkit-mask-image:linear-gradient(#000 86%,transparent 99%);mask-image:linear-gradient(#000 86%,transparent 99%);transition:filter 1.4s var(--ease) .9s}
.fd-plaque{position:absolute;left:57.5%;top:84.5%;translate:-50% -50%;padding:.5em 1em;white-space:nowrap;
  font:italic 500 clamp(12px,3.4vw,19px)/1 var(--garamond);color:#1c2a29;
  background:linear-gradient(#d9d2c3,#bfb7a6);box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 2px 6px rgba(0,0,0,.45)}

/* the beam: a soft wedge pointing down, turned toward her by --ang, screened over everything under it */
.fd-beam{position:absolute;z-index:2;left:var(--bx);top:var(--by);width:calc(var(--bl) * 2);aspect-ratio:1;pointer-events:none;mix-blend-mode:screen;
  translate:-50% -50%;rotate:var(--ang);
  background:conic-gradient(from calc(180deg - var(--hw)) at 50% 50%,transparent 0deg,rgba(130,226,212,.2) calc(var(--hw) * .4),rgba(246,241,231,.5) var(--hw),rgba(130,226,212,.2) calc(var(--hw) * 1.6),transparent calc(var(--hw) * 2));
  -webkit-mask-image:radial-gradient(closest-side,#000 6%,rgba(0,0,0,.85) 40%,transparent 100%);mask-image:radial-gradient(closest-side,#000 6%,rgba(0,0,0,.85) 40%,transparent 100%);
  transition:rotate 1.9s cubic-bezier(.3,.1,.15,1) .25s,opacity .6s var(--ease)}

/* the search: a real bar whose lamp is the light's source */
.fd-bar{position:absolute;z-index:3;left:var(--g);top:0;display:flex;align-items:center;gap:10px;width:min(70vw,330px);height:52px;padding:0 6px 0 20px;border-radius:26px;
  background:#F7F4EE;box-shadow:0 14px 34px -14px rgba(0,0,0,.6);font:400 16px/1 Arial,Helvetica,sans-serif;color:#202124}
.fd-bar span{flex:1;min-width:0;white-space:nowrap;overflow:hidden}
.fd-lamp{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--lagoon-deep);
  box-shadow:0 0 0 4px rgba(70,232,212,.18),0 0 26px 4px rgba(70,232,212,.45)}
.fd-lamp svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round}

/* before the light finds her (only with JS): the beam searches off to one side and she waits in shadow */
.js .fd:not(.is-found) .fd-beam{opacity:0;rotate:calc(var(--ang) - 34deg)}
.js .fd:not(.is-found) .fd-statue img{filter:brightness(.5) saturate(.8)}

/* ---------- the search: the v1 layout on the night ground, readable at a glance ---------- */
.fd-search{position:relative;z-index:6;display:grid;grid-template-areas:"head" "serp" "checks";gap:30px;padding:8px var(--g) calc(env(safe-area-inset-bottom) + 96px)}
.fd-head{grid-area:head}
.fd-h{font:300 44px/1 var(--didone);font-stretch:62.5%;letter-spacing:-.005em;color:var(--marble);text-wrap:balance;max-width:14ch}
.fd-h em{font-style:italic;color:var(--lagoon)}
.fd-lede2{margin-top:20px;font-size:19px;line-height:1.45;color:var(--marble-2);max-width:36ch;text-wrap:pretty}
.fd-lede2 [data-qq]{color:var(--marble)}
.fd-checks{grid-area:checks;list-style:none;margin:0;padding:0;display:grid;gap:16px}
.fd-checks li{display:flex;gap:14px;align-items:flex-start;font-size:17.5px;line-height:1.4;color:var(--marble);max-width:36ch}
.fd-checks svg{flex:none;width:28px;height:28px;margin-top:-2px;fill:none;stroke:var(--marble-2);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.fd-checks .fd-ink{stroke:var(--lagoon)}

/* the panel: a results page in night mode, Google's own anatomy */
.fd-serp{grid-area:serp;align-self:start;min-width:0;padding:14px 14px 4px;border:1px solid rgba(236,231,220,.12);border-radius:18px;
  background:rgba(10,15,17,.8);font-family:Arial,Helvetica,sans-serif;color:#e3e3e3;--link:#8ab4f8}
.fd-chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 0 14px}
.fd-chips button{flex:1 1 calc(50% - 4px);height:36px;padding:0 14px;border:1px solid rgba(236,231,220,.22);border-radius:10px;background:none;font:500 13px/1 var(--mono);color:var(--marble-2);cursor:pointer;transition:background-color .25s,border-color .25s,color .25s}
.fd-chips button[aria-pressed=true]{background:var(--lagoon);border-color:var(--lagoon);color:var(--night)}
.fd-q{display:flex;align-items:center;gap:12px;height:48px;padding:0 16px;border:1px solid rgba(236,231,220,.16);border-radius:24px;background:#151c1f;font-size:16px;color:var(--marble)}
.fd-lens{flex:none;width:20px;height:20px;fill:none;stroke:#9aa3a0;stroke-width:1.5;stroke-linecap:round}
.fd-lens .fd-glint{stroke:var(--lagoon)}
.fd-q span{flex:1;min-width:0;white-space:nowrap;overflow:hidden}
.fd-serp.is-typing .fd-q span::after{content:"";display:inline-block;width:1.5px;height:1.1em;margin-left:1px;vertical-align:-.15em;background:var(--lagoon);animation:fd-caret 1s steps(1) infinite}
@keyframes fd-caret{50%{opacity:0}}
.fd-switch{display:flex;margin:14px 0 6px;padding:4px;border:1px solid rgba(236,231,220,.12);border-radius:13px}
.fd-switch button{flex:1;height:38px;border:0;border-radius:9px;background:none;font:500 13px/1 var(--mono);color:var(--ash);cursor:pointer;transition:background-color .3s,color .3s}
.fd-switch button[aria-pressed=true]{background:var(--marble);color:var(--night)}

.fd-list{list-style:none;margin:0;padding:0;position:relative}
.fd-r{position:relative;padding:14px 2px;border-bottom:1px solid rgba(236,231,220,.08);transition:background-color .6s,box-shadow .6s}
.fd-r:last-child{border-bottom-color:transparent}
.fd-site{display:flex;align-items:center;gap:10px;font-size:14px;line-height:1.3;color:#dadce0}
.fd-fav{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#283033;font:700 11px/1 Arial,Helvetica,sans-serif;color:#bdc1c6}
.fd-src{min-width:0}
.fd-src small{display:block;font-size:12px;color:#9aa0a6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fd-t{display:block;margin-top:7px;font-size:18px;line-height:1.3;color:var(--link)}
.fd-d{margin:4px 0 0;font-size:14.5px;line-height:1.5;color:#bdc1c6}
.fd-meta{display:flex;flex-wrap:wrap;gap:2px 10px;margin:6px 0 0;font-size:13px;line-height:1.4;color:#9aa0a6}
.fd-stars{color:#fdd663;letter-spacing:1px}
.fd-body{display:grid;grid-template-columns:minmax(0,1fr) 84px;gap:12px;align-items:start}
.fd-thumb img{width:84px;height:84px;margin-top:6px;border-radius:10px;object-fit:cover}
.fd-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.fd-links span{padding:7px 12px;border:1px solid rgba(236,231,220,.18);border-radius:16px;font-size:13px;color:var(--link)}
.is-you .fd-fav{background:var(--lagoon-deep);color:#fff}
.fd-rich{display:none}
.fd-serp[data-state=after] .is-you .fd-rich{display:block}
.fd-serp[data-state=after] .is-you .fd-poor{display:none}
/* the winner stands in the same light */
.fd-serp[data-state=after] .is-you{margin:2px -8px;padding:14px 10px;border-radius:12px;border-bottom-color:transparent;
  background:radial-gradient(120% 90% at 30% -25%,rgba(70,232,212,.17),rgba(70,232,212,.03) 62%,transparent),rgba(70,232,212,.025);
  box-shadow:inset 0 0 0 1px rgba(70,232,212,.3),0 0 46px -14px rgba(70,232,212,.5)}

/* ---------- desktop: its own composition ---------- */
@media (min-width:900px) and (orientation:landscape){
  /* copy left; the search sits over her head and the light falls from the upper left, as the statue is lit */
  .fd-poster{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;min-height:max(100svh,680px);max-width:1520px;margin:0 auto}
  .fd-copy{padding:88px 0 0 var(--g)}
  .fd-lead{font-size:clamp(22px,1.6vw,30px)}
  .fd-title{margin-top:8px;font-size:clamp(104px,min(9.4vw,20svh),184px)}
  .fd-lede{margin-top:28px;max-width:25ch;font-size:clamp(21px,1.45vw,26px)}
  .fd-art{--bx:calc(9% + min(44%,440px) - 29px);--by:calc(max(92px,10%) + 30px);--ang:-46deg;--hw:36deg;--bl:92vh;align-self:stretch;height:auto;margin:0;
    background:radial-gradient(30% 42% at 70% 50%,rgba(70,232,212,.11),rgba(70,232,212,0) 72%)}
  .fd-figure{right:16%;top:17%;width:auto;height:84%}
  .fd-plaque{font-size:clamp(14px,1vw,19px)}
  .fd-bar{left:9%;top:max(92px,10%);width:min(44%,440px);height:60px;padding-left:24px;border-radius:30px;font-size:18px}
  .fd-lamp{width:46px;height:46px}
  .fd-search{grid-template-columns:minmax(0,1fr) minmax(460px,580px);grid-template-areas:"head serp" "checks serp";grid-template-rows:auto 1fr;
    column-gap:7vw;row-gap:44px;max-width:1520px;margin:0 auto;padding:56px var(--g) 160px}
  .fd-h{font-size:min(4.2vw,80px);max-width:15ch}
  .fd-lede2{margin-top:28px;font-size:22px}
  .fd-checks{align-self:start}
  .fd-checks li{font-size:18.5px}
  .fd-serp{padding:20px 22px 8px}
  .fd-chips{flex-wrap:nowrap;padding:0 0 16px}
  .fd-chips button{flex:none}
  .fd-t{font-size:20px}
  .fd-d{font-size:15px}
  .fd-body{grid-template-columns:minmax(0,1fr) 104px;gap:16px}
  .fd-thumb img{width:104px;height:104px}
}

@media (prefers-reduced-motion:reduce){
  .fd-beam,.fd-statue img{transition:none}
  .fd-search *,.fd-search *::after{transition:none!important;animation:none!important}
}