/* Shtil Group: the parts every page shares. Tokens and type, the liquid glass, the nav and buttons, reveals, the
   title block, the footer, the photo frames and the move between pages. Each page adds its own style sheet after this one (the home page: the film and its
   sections, inline; the loan program pages: program.css). Split out of the home page on 2026-10-20 with every
   rule unchanged and in its old order. */
:root{
  --green:#095A31; --leaf:#64BE66; --white:#FFFFFF; --paper:#F7F9F4; --ink:#0F2A1B; --soft:#4E6357;
  --line:rgba(9,90,49,.14); --sans:"Outfit",-apple-system,"Helvetica Neue",sans-serif; --serif:"Instrument Serif",Georgia,serif;
  --display:var(--sans);   /* headlines */
  --cf:"Outfit"; --cw:700; --cw2:500; --cls:-.055; --ctrack:-.035; --cstretch:normal;   /* the canvas letters: font, weights, spacing, width */
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--ink);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.eyebrow{font:500 12px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--green)}
.eyebrow::before{content:"[ "}.eyebrow::after{content:" ]"}
.btn em{font-style:normal}

/* liquid glass, borrowed from FlipFinder's "Intelligence Finds the Deal" pill (its approved single-edge preset,
   revision 2026-09-05.1, values unchanged): a nearly clear frosted body (::before) under a polished rim that the script
   draws live into .lg-optics. FlipFinder's pill sits on a dark map; here the text follows the picture behind it.
   data-tone: "light" = a bright picture (dark text), "paper" = the white page (dark text, a hairline so the clear
   glass still shows), "dark" = a dark picture (light text, FlipFinder's own text style). */
.lg{position:relative;isolation:isolate;background:transparent}
.lg::before{content:"";position:absolute;inset:2px;border-radius:inherit;pointer-events:none;z-index:-1;background:linear-gradient(155deg,rgba(244,242,236,.068),rgba(240,238,231,.029) 45%,rgba(244,242,236,.050));-webkit-backdrop-filter:blur(20px) saturate(1.06);backdrop-filter:blur(20px) saturate(1.06);transition:box-shadow .45s ease,background .2s}
.lg>.lg-optics{position:absolute;left:-2px;top:-2px;width:calc(100% + 4px);height:calc(100% + 4px);pointer-events:none;z-index:0}
.lg>:not(.lg-optics){position:relative;z-index:1}
.lg[data-tone="light"]::before{box-shadow:0 12px 32px -18px rgba(9,40,20,.38)}
.lg[data-tone="paper"]::before{box-shadow:inset 0 0 0 1px rgba(9,90,49,.1),0 14px 34px -18px rgba(9,40,20,.4)}
/* the nav over the page, with a photo under only part of it: the same glass frosted over by a milky fill (an inset
   shadow, so it fades in and out), and the paper hairline and shadow kept as they are. Revision 2026-10-20.1, approved. */
.nav[data-tone="paper"]::before{box-shadow:inset 0 0 0 1px rgba(9,90,49,.1),inset 0 0 0 40px rgba(250,250,246,0),0 14px 34px -18px rgba(9,40,20,.4)}
.nav.lg[data-tone="paper"][data-frost]::before{box-shadow:inset 0 0 0 1px rgba(9,90,49,.1),inset 0 0 0 40px rgba(250,250,246,.76),0 14px 34px -18px rgba(9,40,20,.4)}
.lg[data-tone="dark"]{color:#f8f6f0;text-shadow:0 1px 2px rgba(0,0,0,.45)}
.lg:not([data-glass-optics="live"])::before{box-shadow:inset 0 0 0 1px rgba(237,243,247,.34),0 12px 32px -18px rgba(9,40,20,.3)}   /* no WebGL: a plain glass edge */

/* nav: one compact glass pill, as wide as what it holds and centred. The pill and its button share their corner
   centres: the pill is 60 tall with round ends (radius 30), the button sits 8 in from its edge, so the button's radius
   is 30 - 8 = 22 and the gap around it is even. The logo is the stacked logo laid out side by side (tools/film/
   logo_lockup.py): the mark as drawn, then the name as a shape in the nav's text colour (brand green, near-white over
   dark pictures). */
.nav{position:fixed;z-index:50;top:16px;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);height:60px;display:flex;align-items:center;padding:0 8px 0 16px;border-radius:30px;color:var(--ink);transition:color .45s ease,text-shadow .45s ease}
.nav .brand{display:flex;align-items:center;gap:10px;flex:none;color:var(--green);text-decoration:none;transition:color .45s ease}
.nav[data-tone="dark"] .brand{color:#f8f6f0}
.nav .mark{display:block;height:34px;width:auto}
.nav .wordmark{display:block;height:14px;aspect-ratio:578/64;background:currentColor;-webkit-mask:url(a/wordmark.png) center/contain no-repeat;mask:url(a/wordmark.png) center/contain no-repeat}
.nav ul{display:flex;gap:30px;list-style:none;margin:0 36px 0 44px;padding:0;font:500 15px/1 var(--sans)}
.nav ul a{text-decoration:none;color:inherit;opacity:.84;transition:opacity .2s}
.nav ul a:hover{opacity:1}
.nav .btn{height:44px;padding:0 20px}
.nav .btn .short{display:none}
.btn{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 22px;border-radius:999px;font:500 15px/1 var(--sans);text-decoration:none;white-space:nowrap;transition:transform .2s,background .2s}
.btn:hover{transform:translateY(-1px)}
.btn.g{background:var(--green);color:#fff}
.btn.g:hover{background:#0b6b3a}
.btn.o{background:rgba(255,255,255,.7);color:var(--green);box-shadow:inset 0 0 0 1px rgba(9,90,49,.28)}
.btn.w{background:#fff;color:var(--green)}
.btn svg{width:16px;height:16px}
/* Green and white glass buttons: revision 2026-10-20.1 of the single-edge preset, approved by Arkadiy 2026-10-20. The
   rim (the shader), the spring and the 20 px frost are the approved values, unchanged; only the body is new. Green
   glass for the main action and white glass for the second: tinted, not solid, so the picture behind shows through
   softened, with a light sheen across the top and a thin bright line along the upper edge. Measured from screenshots
   (the faintest glass behind the text): white on the green 5.2:1 or better over the sky, the white page and the film;
   green on the white glass 7.2:1 (the standard is 4.5:1). The clear glass on the green footer is the approved preset
   as it was. The nav's frost over photos (below) is part of this revision too. */
.btn.lg{background:transparent;box-shadow:none}
.btn.lg.g::before{background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.02) 50%,rgba(255,255,255,0) 51%),linear-gradient(155deg,rgba(14,106,57,.87),rgba(7,80,43,.83) 48%,rgba(5,64,34,.89));box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 -6px 14px -8px rgba(120,220,150,.32),0 10px 26px -14px rgba(4,48,24,.62)}
.btn.lg.g:hover::before{background:linear-gradient(180deg,rgba(255,255,255,.19),rgba(255,255,255,.03) 50%,rgba(255,255,255,0) 51%),linear-gradient(155deg,rgba(18,120,64,.88),rgba(9,92,50,.84) 48%,rgba(7,74,40,.9))}
.btn.lg.o:not([data-tone="dark"])::before,.btn.lg.w::before{background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.1) 50%,rgba(255,255,255,0) 51%),linear-gradient(155deg,rgba(255,255,255,.62),rgba(248,252,247,.48) 48%,rgba(255,255,255,.58));box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -6px 14px -8px rgba(255,255,255,.5),0 10px 26px -16px rgba(9,40,20,.34)}
.btn.lg.o:not([data-tone="dark"]):hover::before,.btn.lg.w:hover::before{background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,.14) 50%,rgba(255,255,255,0) 51%),linear-gradient(155deg,rgba(255,255,255,.7),rgba(248,252,247,.56) 48%,rgba(255,255,255,.66))}
.btn.lg.w::before{background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,.12) 50%,rgba(255,255,255,0) 51%),linear-gradient(155deg,rgba(255,255,255,.86),rgba(246,251,245,.78) 48%,rgba(255,255,255,.84))}
.btn.lg.g,.btn.lg.g[data-tone]{color:#fff;text-shadow:0 1px 1px rgba(0,30,12,.25)}
.btn.lg.w,.btn.lg.o{color:var(--green)}
.btn.lg.o[data-tone="dark"]{color:#f8f6f0}
@media (prefers-reduced-transparency:reduce){.lg::before{background:rgba(247,249,244,.95);-webkit-backdrop-filter:none;backdrop-filter:none}.lg[data-tone="dark"],.btn.lg.o[data-tone="dark"]{color:var(--ink);text-shadow:none}.btn.lg.g::before,.btn.lg.g:hover::before{background:var(--green)}.btn.lg.o:not([data-tone="dark"])::before,.btn.lg.o:not([data-tone="dark"]):hover::before,.btn.lg.w::before,.btn.lg.w:hover::before{background:rgba(250,252,249,.96)}}

/* sections */
.wrap{width:min(1180px,calc(100% - 40px));margin:0 auto}
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}

.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.rise{transform:translateY(26px);transition:transform .9s cubic-bezier(.2,.7,.2,1)}   /* for anything holding glass: it moves but never fades */
.rise.in{transform:none}
.tblock dl{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.tblock dl>div{padding:15px 16px 15px 0;opacity:0;transform:translateY(10px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.tblock dl>div:nth-child(even){padding:15px 0 15px 22px;border-left:1px solid rgba(255,255,255,.22)}
.tblock dl>div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.22)}
.tblock dt{font:600 10px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;opacity:.8}
.tblock dd{margin:8px 0 0;font:600 17px/1.2 var(--display);letter-spacing:-.01em}

/* footer: the contact section. The headline with the two direct lines (call, email) beside it, the buttons, then the
   licences laid out like the title block, and the name signed across the bottom in big type, a shade off the green */
.foot{position:relative;overflow:hidden;background:radial-gradient(110% 80% at 88% 0%,#0b6a3a 0%,rgba(9,90,49,0) 60%),var(--green);color:#fff;padding:clamp(80px,11vw,140px) 0 0}
.foot .eyebrow{color:rgba(255,255,255,.8)}
.fhead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:44px clamp(40px,6vw,100px);align-items:end;margin-top:22px}
.foot h2{margin:0;font:500 clamp(46px,7vw,110px)/.95 var(--display);letter-spacing:-.045em}
.foot h2 em{font:italic 400 1.04em var(--serif);color:var(--leaf);letter-spacing:-.01em}
.reach{display:flex;flex-direction:column;border-top:1px solid rgba(255,255,255,.22)}
.reach a{display:grid;grid-template-columns:70px minmax(0,1fr) 38px;align-items:baseline;column-gap:12px;padding:19px 0;border-bottom:1px solid rgba(255,255,255,.22);color:#fff;text-decoration:none}
.reach i{font:600 10.5px/1 var(--sans);font-style:normal;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.reach b{font:600 clamp(20px,2vw,26px)/1.2 var(--display);letter-spacing:-.01em;overflow-wrap:break-word}
.reach a::after{content:"";align-self:center;justify-self:end;width:26px;height:10px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 10' fill='none' stroke='white' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5h34M30.5 1 35 5l-4.5 4'/%3E%3C/svg%3E") right center/36px 10px no-repeat;transition:width .4s cubic-bezier(.2,.7,.2,1)}
.reach a:hover::after,.reach a:focus-visible::after{width:38px}
.reach a:focus-visible{outline:2px solid rgba(255,255,255,.7);outline-offset:4px;border-radius:4px}
.foot .cta{margin-top:40px;display:flex;gap:12px;flex-wrap:wrap}
.foot .legal{margin-top:clamp(64px,8vw,104px);padding-top:28px;border-top:1px solid rgba(255,255,255,.22);font-size:13px;color:rgba(255,255,255,.8)}
.lic{display:grid;grid-template-columns:repeat(4,max-content);gap:18px clamp(28px,5vw,72px);margin:0}
.lic dt{font:600 10px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.lic dd{margin:8px 0 0;font:500 15px/1.3 var(--sans);color:#fff}
.base{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:30px}
.base a{color:inherit;text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);text-underline-offset:3px}
.base a:hover{text-decoration-color:#fff}
.eho{display:inline-flex;align-items:center;gap:10px}
.eho svg{width:26px;height:26px;flex:none}
.foot .tile{background:#fff;border-radius:14px;padding:8px 12px}
.foot .tile img{height:44px;width:auto}
.foot .sign{display:block;width:100%;height:auto;margin:clamp(40px,6vw,72px) 0 0;overflow:hidden}
.foot .sign text{font-family:var(--display);font-weight:800;fill:rgba(255,255,255,.075)}

@media (max-width:900px){
  .nav ul{display:none}
  /* the same pill across the screen: 56 tall (radius 28), the button 6 in from the edge (radius 22) */
  .nav{width:calc(100% - 32px);justify-content:space-between;gap:12px;height:56px;padding:0 6px 0 14px;border-radius:28px}
  .nav .brand{gap:8px}
  .nav .mark{height:30px}
  .nav .wordmark{height:12px}
  .nav .btn{height:44px;padding:0 18px;font-size:14px}
  @media (max-width:440px){.nav .btn .long{display:none}.nav .btn .short{display:inline}}
  .fhead{grid-template-columns:minmax(0,1fr);align-items:start}
  .lic{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lic>div:first-child{grid-column:1/-1}
}
/* tablets: the door photo goes landscape and its title block runs in one row of four */
@media (min-width:561px) and (max-width:900px){
  .tblock dl{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tblock dl>div,.tblock dl>div:nth-child(even){padding:15px 10px 15px 18px;border-top:0;border-left:1px solid rgba(255,255,255,.22)}
  .tblock dl>div:first-child{padding-left:0;border-left:0}
}
@media (max-width:560px){
  .reach a{grid-template-columns:minmax(0,1fr) 30px;row-gap:10px;padding:18px 0}
  .reach i{grid-column:1}
  .reach b{grid-column:1;font-size:clamp(18px,5.8vw,24px)}
  .reach a::after{grid-column:2;grid-row:1/3}
}
@media (prefers-reduced-motion:reduce){.rv,.rise{opacity:1;transform:none;transition:none}
  .tblock dl>div{transition:none!important}}

/* ---------- TYPE (2026-10-20): B · Architect in use; A · Private bank kept as an alternative (?type=a, see <head>) ---------- */
/* A · Private bank: a high-contrast display serif (Noto Serif Display) over a quiet sans with a hint of flare
   (Commissioner); spaced capitals with a hairline for the small labels; the main button carries its arrow in a white
   bead, concentric with the pill (pill radius 23, bead radius 15, 8 from the edge). */
html[data-type="a"]{--sans:"Commissioner","Heebo",-apple-system,sans-serif;--serif:"Noto Serif Display",Georgia,serif;--display:"Noto Serif Display",Georgia,serif;--cf:"Noto Serif Display";--cw:600;--cw2:500;--cls:-.02;--ctrack:0}
html[data-type="a"] body{font-variation-settings:"FLAR" 40}
html[data-type="a"] .foot h2 em{font:italic 300 1em var(--serif);letter-spacing:-.02em}
html[data-type="a"] .foot h2{font-weight:400;letter-spacing:-.025em}
html[data-type="a"] .tblock dd,html[data-type="a"] .reach b{font-weight:500;letter-spacing:0}
html[data-type="a"] .foot .sign text{font-weight:600}
html[data-type="a"] .eyebrow{display:flex;align-items:center;gap:14px;font:600 11px/1 var(--sans);letter-spacing:.28em}
html[data-type="a"] .eyebrow::before{content:"";width:28px;height:1px;background:currentColor;opacity:.55}
html[data-type="a"] .eyebrow::after{content:none}
html[data-type="a"] .btn{font:500 15px/1 var(--sans);letter-spacing:.01em}
html[data-type="a"] .btn svg{display:none}
html[data-type="a"] .btn.g{padding-right:8px;gap:14px}
html[data-type="a"] .btn.g::after{content:"";position:relative;z-index:1;flex:none;width:30px;height:30px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23095A31' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8h9M9 4.5 12.5 8 9 11.5'/%3E%3C/svg%3E") center/14px no-repeat;box-shadow:0 1px 3px rgba(0,30,12,.3),inset 0 -1px 2px rgba(9,90,49,.12);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
html[data-type="a"] .btn.g:hover::after{transform:translateX(3px)}
html[data-type="a"] .nav .btn.g::after{width:28px;height:28px}

/* B · Architect: one confident grotesk in two widths (Mona Sans, wide for headlines; Russian letters from Geologica);
   small spaced capitals for every control and numbered section labels; the main button's arrow is a long hairline
   that stretches on hover. */
html[data-type="b"]{--sans:"Mona Sans","Geologica","Heebo",-apple-system,sans-serif;--serif:"Mona Sans","Geologica",sans-serif;--display:"Mona Sans","Geologica",sans-serif;--cf:"Mona Sans";--cw:800;--cw2:600;--cls:-.045;--ctrack:-.03;--cstretch:expanded}
html[data-type="b"] .foot h2 em{font:italic 300 1em var(--serif);font-stretch:118%;letter-spacing:-.04em}
html[data-type="b"] .foot h2{font-weight:600;font-stretch:115%;letter-spacing:-.04em}
html[data-type="b"] .tblock dd,html[data-type="b"] .reach b{font-stretch:110%}
html[data-type="b"] .foot .sign text{font-stretch:125%}
html[data-type="b"] .eyebrow{font:600 11px/1 var(--sans);letter-spacing:.22em}
html[data-type="b"] .eyebrow::before{content:attr(data-n) "\2002\2014\2002"}
html[data-type="b"] .eyebrow:not([data-n])::before,html[data-type="b"] .eyebrow::after{content:none}
html[data-type="b"] .btn{font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;gap:14px}
html[data-type="b"] .btn svg{display:none}
html[data-type="b"] .btn.g::after{content:"";position:relative;z-index:1;flex:none;width:26px;height:10px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 10' fill='none' stroke='white' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5h34M30.5 1 35 5l-4.5 4'/%3E%3C/svg%3E") right center/36px 10px no-repeat;transition:width .35s cubic-bezier(.2,.7,.2,1)}
html[data-type="b"] .btn.g:hover::after{width:36px}


@media (max-width:900px){
  html[data-type] .nav .btn{font-size:14px}
  html[data-type="b"] .nav .btn{font-size:11.5px}
}
@media (max-width:440px){
  html[data-type="a"] .nav .btn.g::after,html[data-type="b"] .nav .btn.g::after{display:none}
  html[data-type="a"] .nav .btn.g{padding-right:18px}
}
@media (max-width:360px){
  .tblock dd{font-size:15px}
  .tblock dl>div:nth-child(even){padding-left:16px}
  html[data-type] .nav .btn{padding:0 14px}
  html[data-type="b"] .nav .btn{letter-spacing:.04em;padding:0 12px}
}

/* ---------- photo frames: a photo filling a rounded frame with a glass list of programs on it (the home page's loan
   programs, and the other programs at the foot of each loan program page). Moved from the home page on 2026-10-20,
   every rule unchanged and in its old order. ---------- */
/* loan programs: two photographic frames, one per kind of borrower. The photo fills the frame; the programs sit on a
   glass column (the approved glass, data-tone dark) with a count, a dimension line and numbered rows; pointing at a
   row swaps the photo to that kind of loan. Corners are concentric: frame radius 40, the column 10 in, radius 30 (the
   glass rim's own corner). The frame slides up as it arrives and the photo blooms in from the dark; opacity is never
   put on the glass or its parents (it would cut the glass off from what is behind it). */
.frame{position:relative;display:grid;grid-template-columns:minmax(0,1fr) min(50%,580px);min-height:clamp(620px,56vw,700px);border-radius:40px;overflow:hidden;background:#0c2617;color:#fff;transform:translateY(34px);transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.frame.flip{grid-template-columns:min(50%,580px) minmax(0,1fr)}
.frame.in{transform:none}
.frame .ph{position:absolute;inset:0;overflow:hidden}
.frame .ph img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .8s ease,transform 2.4s cubic-bezier(.2,.7,.2,1)}
.frame.in .ph img.on{opacity:1;transform:scale(1)}
.frame .ph img{object-position:100% 50%;transform-origin:30% 50%}
.frame.flip .ph img{object-position:0% 50%;transform-origin:70% 50%}
/* a program's own photo is its tall one (made for narrow screens: its subject high, its foot calm). It fills the
   frame's open side, beside the list and under the caption, and fades out under the list's edge. */
.frame .ph img.t{width:58%;object-position:50% 42%;-webkit-mask-image:linear-gradient(270deg,transparent,#000 14%);mask-image:linear-gradient(270deg,transparent,#000 14%)}
.frame.flip .ph img.t{left:auto;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%);mask-image:linear-gradient(90deg,transparent,#000 14%)}
.frame .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(4,24,13,.8) 0%,rgba(4,24,13,.32) 34%,rgba(4,24,13,0) 56%),linear-gradient(270deg,rgba(4,24,13,.76) 0%,rgba(4,24,13,.68) 47%,rgba(4,24,13,0) 60%)}
.frame.flip .ph::after{background:linear-gradient(0deg,rgba(4,24,13,.8) 0%,rgba(4,24,13,.32) 34%,rgba(4,24,13,0) 56%),linear-gradient(90deg,rgba(4,24,13,.76) 0%,rgba(4,24,13,.68) 47%,rgba(4,24,13,0) 60%)}
.frame .tag{position:absolute;z-index:2;top:30px;left:32px;display:inline-flex;align-items:center;gap:10px;padding:10px 15px 10px 13px;border-radius:999px;font:600 10.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#fff;background:rgba(7,32,18,.42);box-shadow:inset 0 0 0 1px rgba(255,255,255,.26);-webkit-backdrop-filter:blur(12px) saturate(1.1);backdrop-filter:blur(12px) saturate(1.1)}
.frame .tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--leaf);box-shadow:0 0 0 3px rgba(100,190,102,.28)}
.frame.flip .tag{left:auto;right:32px}
.frame .fcap{position:relative;z-index:2;grid-column:1;grid-row:1;align-self:end;padding:0 clamp(28px,3.2vw,44px) clamp(30px,3.4vw,44px)}
.frame.flip .fcap{grid-column:2}
.fcap h3{margin:0;font:600 clamp(34px,3.7vw,54px)/1 var(--display);letter-spacing:-.035em;text-wrap:balance;text-shadow:0 2px 28px rgba(0,20,8,.4)}
.fcap p{margin:14px 0 0;font-size:16px;color:rgba(255,255,255,.86)}
.fcap .btn{margin-top:24px}
.frame .list{z-index:3;grid-column:2;grid-row:1;margin:10px;border-radius:30px;padding:30px 32px 16px;display:flex;flex-direction:column}
.frame.flip .list{grid-column:1}
.list .lhead{display:flex;align-items:baseline;gap:12px}
.list .lhead b{font:600 56px/.9 var(--display);letter-spacing:-.04em}
.list .lhead span{font:600 11px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;opacity:.82}
.list .dim{display:block;height:9px;margin:18px 0 6px;border:solid rgba(255,255,255,.42);border-width:0 1px}   /* a dimension line: |------| */
.list .dim::before{content:"";display:block;margin-top:4px;height:1px;background:rgba(255,255,255,.42)}
.list ol{list-style:none;margin:0;padding:0;flex:1;display:flex;flex-direction:column}
.list li{flex:1;display:flex;align-items:center;border-top:1px solid rgba(255,255,255,.14)}
.list li:first-child{border-top:0}
.list li a{flex:1;display:grid;grid-template-columns:26px minmax(0,1fr) 34px;column-gap:10px;padding:10px 12px;margin:0 -12px;border-radius:16px;color:inherit;text-decoration:none;transition:background .3s ease}
.list li a i{grid-row:1/3;font:600 11px/1.95 var(--sans);font-style:normal;letter-spacing:.08em;opacity:.55;font-variant-numeric:tabular-nums}
.list li a b{font:600 17px/1.25 var(--display);letter-spacing:-.01em}
.list li a span{grid-column:2;margin-top:3px;font:400 13px/1.45 var(--sans);opacity:.84;text-wrap:pretty;transition:opacity .3s}
.list li a::after{content:"";grid-column:3;grid-row:1/3;align-self:center;justify-self:end;width:24px;height:10px;opacity:0;transform:translateX(-8px);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 10' fill='none' stroke='white' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5h34M30.5 1 35 5l-4.5 4'/%3E%3C/svg%3E") right center/36px 10px no-repeat;transition:opacity .3s,transform .4s cubic-bezier(.2,.7,.2,1),width .4s cubic-bezier(.2,.7,.2,1)}
.list li a:hover,.list li a:focus-visible{background:rgba(255,255,255,.09);outline:none}
.list li a:hover span,.list li a:focus-visible span{opacity:.95}
.list li a:hover::after,.list li a:focus-visible::after{opacity:1;transform:none;width:34px}
.list.big li a{padding:18px 14px;margin:0 -14px}
.list.big li a b{font-size:clamp(24px,2.3vw,32px);letter-spacing:-.025em}
.list.big li a span{margin-top:7px;font-size:15px;max-width:44ch}
.list.big li a i{line-height:2.6}
/* arriving: the caption and the rows rise in after the frame (the glass itself never fades) */
.frame .tag,.frame .fcap h3,.frame .fcap p,.frame .list .lhead,.frame .list .dim,.frame .list li{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.frame.in .tag,.frame.in .fcap h3,.frame.in .fcap p,.frame.in .list .lhead,.frame.in .list .dim,.frame.in .list li{opacity:1;transform:none}
.frame.in .fcap h3{transition-delay:.15s}.frame.in .fcap p{transition-delay:.25s}.frame.in .list .lhead{transition-delay:.2s}.frame.in .list .dim{transition-delay:.28s}
.frame.in .list li{transition-delay:calc(.3s + var(--i,0) * 55ms)}
@media (max-width:860px){
  .frame,.frame.flip{grid-template-columns:minmax(0,1fr);min-height:0;border-radius:38px}
  .frame .ph{bottom:auto;height:min(116vw,560px)}
  .frame .ph img,.frame.flip .ph img{object-position:50% 50%;transform-origin:50% 50%}
  .frame .ph img.t,.frame.flip .ph img.t{width:100%;left:0;-webkit-mask-image:none;mask-image:none}
  .frame .ph::after,.frame.flip .ph::after{background:linear-gradient(0deg,#0c2617 0%,rgba(12,38,23,.82) 22%,rgba(4,24,13,.3) 52%,rgba(4,24,13,0) 72%)}
  .frame .tag,.frame.flip .tag{top:20px;left:20px;right:auto}
  .frame .fcap,.frame.flip .fcap{grid-column:1;grid-row:1;padding:min(80vw,390px) 24px 0}
  .frame .list,.frame.flip .list{grid-column:1;grid-row:2;margin:22px 8px 8px;padding:24px 22px 12px}
  .list .lhead b{font-size:46px}
  .list li a{grid-template-columns:24px minmax(0,1fr) 0;column-gap:8px}
  .list.big li a b{font-size:24px}
}
@media (prefers-reduced-motion:reduce){
  .frame,.frame .ph img,.frame .tag,.frame .fcap h3,.frame .fcap p,.frame .list .lhead,.frame .list .dim,.frame .list li{transition:none;transform:none}}
html[data-type="a"] .fcap h3,html[data-type="a"] .list .lhead b{font-weight:400;letter-spacing:-.02em}
html[data-type="a"] .list li a b{font-weight:500;letter-spacing:0}
html[data-type="b"] .fcap h3{font-stretch:112%}
html[data-type="b"] .list .lhead b{font-stretch:120%}
html[data-type="b"] .list li a b{font-stretch:110%}
@media (max-width:360px){
  .frame .fcap,.frame.flip .fcap{padding-left:20px;padding-right:20px}
  .frame .list,.frame.flip .list{padding:22px 18px 10px}
  html[data-type] .fcap .btn{padding:0 16px}
  html[data-type="b"] .fcap .btn{letter-spacing:.07em}
}

/* ---------- moving between pages: the nav stays put, the page cross-fades, and a photo frame's photo grows into the
   next page's scene (cross-document view transitions, Chrome and Safari; other browsers just change page) ---------- */
@view-transition{navigation:auto}
/* The nav is named only while a page change runs. A named element can't frost the page behind it (it becomes its own
   "backdrop root": its blur sees only what is inside it), so a name kept on at all times left the nav clear glass, the
   page sharp through it. During a change its frost comes from its group instead: the same blur and saturation. */
html:active-view-transition .nav{view-transition-name:nav}
::view-transition-group(nav){border-radius:999px;-webkit-backdrop-filter:blur(20px) saturate(1.06);backdrop-filter:blur(20px) saturate(1.06)}
::view-transition-group(scene){animation-duration:.75s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
/* the photo grows from the frame's shape into the page's: both pictures fill the moving box, trimmed, never stretched */
::view-transition-old(scene),::view-transition-new(scene){height:100%;object-fit:cover}
::view-transition-old(root),::view-transition-new(root){animation-duration:.45s}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}