/* saintclair.asia — site layer on saint-clair.css (v7). One page, ten sections,
   one lattice of twelve columns. The rhythm comes from scale: the name, the
   definition, two words, four numerals, five countries, one continent. */
.as a{text-decoration:none}
.as .lat--win>.cell{padding-left:var(--edge);padding-right:var(--edge)}
.as .ghost{right:-30vh}
.as-lat{grid-template-columns:repeat(12,1fr)}
.as-lat>.cell{padding-top:clamp(18px,2vw,40px);padding-bottom:clamp(22px,2.6vw,52px)}
.s12{grid-column:1/-1}.s8{grid-column:span 8}.s6{grid-column:span 6}.s4{grid-column:span 4}.s3{grid-column:span 3}
.as .sys+.body,.as .sys+.line,.as .sys+.name{margin-top:clamp(12px,1.3vw,24px)}
.as .body{max-width:31em}
.as .body+.body,.as .name+.body{margin-top:.9em}
.as .body a,.as .sys a{color:var(--c)}
.as .cream{color:var(--c)}
.as .name{color:var(--c);font-weight:400;margin:0}
.as dfn{font-style:normal}
.as .body+.sys{margin-top:1.1em}

/* the terminal directory is one more cell of the table: fixed, framed, the page passes beneath it */
.as .nav{background:var(--v);border:var(--wire) solid var(--wire-c);padding:.7em 1em .5em;top:calc(var(--gap) + clamp(10px,1.4vw,24px));right:calc(var(--gap) + clamp(10px,1.4vw,24px))}

/* 1 · hero: the lockup hangs from the top, the name stands on the floor */
.as-hero,.as-intro{min-height:calc(100svh - 2*var(--gap) - clamp(28px,4vh,56px))}
.as-hero{display:flex;flex-direction:column}
.as-hero .wm{margin-top:clamp(12px,1.2vw,20px)}
.as-hero .sys--ent{margin-top:.5em}
.as-mon{margin-top:auto;padding-top:clamp(28px,4vw,72px);font-size:calc(100cqw / 4.38);line-height:.86;white-space:nowrap}
.as-mon span{display:block}
.as-intro{display:flex;flex-direction:column;justify-content:flex-end}
.as-intro .wire+.body{margin-top:clamp(18px,2vw,36px)}
.as-intro .act{align-self:flex-start;margin-top:clamp(28px,3vw,56px)}

/* 2 · the definition, then the difference in two words */
.as-def{padding-top:clamp(32px,4vw,80px)!important;padding-bottom:clamp(40px,5vw,96px)!important}
.as-def .line{max-width:24em}
.as-vs{display:flex;flex-direction:column}
.as-word{font-size:calc(100cqw / var(--em,5.8));white-space:nowrap;line-height:.9;margin:clamp(20px,2.4vw,48px) 0 clamp(16px,1.8vw,32px)}
.as-floor{display:flex;flex-direction:column;justify-content:flex-end}

/* 3 · the steps: a header row, four numerals */
.as-th{padding-top:clamp(10px,.9vw,16px)!important;padding-bottom:clamp(10px,.9vw,16px)!important}
.as-num{font-size:clamp(72px,42cqw,240px);line-height:.8;margin:0 0 clamp(20px,2.4vw,48px)}
.as-step .name{font-size:var(--body)}

/* 5 · five countries, one row of the table */
.as-five{grid-column:1/-1;grid-template-columns:repeat(5,1fr);padding:0;container-type:inline-size}
.as-five>.cell{container-type:normal;padding:clamp(18px,2vw,40px) clamp(12px,1.4vw,28px)}
.as-five>.cell:first-child{padding-left:var(--edge)}
.as-land{font-size:calc(100cqw / 40);white-space:nowrap;line-height:.9;margin:0}

/* 6 · Europe: the continent in the narrow cell, the sentence in the wide one */
.as-eu{display:flex;flex-direction:column;justify-content:flex-end}
.as-eu .as-word{margin:0}
.as-eu-text{display:flex;align-items:flex-end}

/* 9 · Carl */
.as-carl .sig{margin-top:clamp(12px,1.3vw,24px)}
.as-carl .sig+.sys{margin-top:.6em}
.as-floor .sys+.body{margin-top:clamp(12px,1.3vw,24px)}

/* directory and colophon */
.below{grid-template-columns:repeat(3,1fr);padding-top:0}
.below>.cell{padding-top:clamp(10px,.9vw,16px);padding-bottom:clamp(10px,.9vw,16px)}
.below>.c-col{padding-top:clamp(14px,1.4vw,26px);padding-bottom:clamp(14px,1.4vw,26px)}
.c-col .colophon{margin:0;max-width:78em}
.c-col .colophon+.colophon{margin-top:.9em}

/* privacy policy: legal text inside one cell */
.as-legal h2{font:400 var(--sys)/1.6 var(--O);letter-spacing:.2em;text-transform:uppercase;color:var(--g);margin:2.2em 0 .8em}
.as-legal h3{font:400 var(--body)/1.45 var(--J);color:var(--c);margin:1.2em 0 .4em}
.as-legal p,.as-legal li{font:300 var(--body)/1.45 var(--J);color:var(--l);max-width:34em}
.as-legal ul{list-style:none;padding:0;margin:.6em 0}
.as-legal li{position:relative;padding-left:1.1em;margin:0 0 .45em}
.as-legal li::before{content:"\2013";position:absolute;left:0}
.as-legal strong{color:var(--c);font-weight:400}
.as-legal em{font-style:normal}
.as-head .sys{margin-top:clamp(12px,1.2vw,20px)}
.as-head .mon{margin-top:clamp(28px,4vw,72px)}
.as-head .wire{margin-top:clamp(18px,2vw,36px)}
.as-head .wire+.sys{margin-top:1em}

@media (max-width:900px){
  .as-hero,.as-intro{min-height:0}
  .as-intro{justify-content:flex-start}
  .as-lat>.cell{padding-top:20px;padding-bottom:22px}
  .as-num{font-size:clamp(72px,30cqw,160px)}
  .as-five>.cell{container-type:inline-size;padding-left:var(--edge);padding-right:var(--edge)}
  .as-land{font-size:calc(100cqw / 6.6)}
  .below{grid-template-columns:1fr}
}
@media (max-width:720px){.as-intro .act{align-self:stretch}}