/* Arch homepage, round five. Round four's system and sections (imported
   below) with what Jake's Oct 13 notes add: asset names long enough to wrap,
   industries with locked case studies, and the locked page itself. */
@import url('../homepage-r4-src/site.css');

/* What the Super Audit reads. Names now run to four words, so they wrap
   between words inside the right two thirds, clear of the line beside them. */
.r5-asset{grid-column:5/-1;text-align:right;white-space:normal;text-wrap:balance;font-size:clamp(52px,7.4vw,142px);line-height:.96}
.r5-asset [data-knock]{white-space:nowrap}
@media(max-width:760px){.r5-asset{grid-column:1/-1;font-size:clamp(42px,12.4vw,84px)}}

/* Results: two figures, then industries. Each row is a name and its locked
   "Case studies" link, nothing else (no figures or side text). */
.r5-stats .t-body{max-width:28ch}
.r5-segments{grid-column:1/-1;margin-top:clamp(112px,13vw,220px)}
.r5-segments li{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--gutter);align-items:baseline;padding-block:clamp(16px,1.8vw,26px)}
.r5-segments li::before{content:"";grid-column:1/-1;margin-bottom:clamp(16px,1.8vw,26px);height:3px;background:radial-gradient(circle,var(--rule) 0 .9px,transparent 1.3px) 0 50%/7px 3px repeat-x}
.r5-segments::after{content:"";display:block;height:3px;background:radial-gradient(circle,var(--rule) 0 .9px,transparent 1.3px) 0 50%/7px 3px repeat-x}
.r5-case-link{white-space:nowrap}

/* The locked page: full screen on night, set like the menu. */
.r5-lock{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:18px var(--margin) clamp(32px,6vh,64px);border:0;background:var(--night);color:var(--oat);overflow:auto}
.r5-lock[open]{display:flex;flex-direction:column}
.r5-lock::backdrop{background:var(--night)}
.r5-lock .menu-top{min-height:44px}
.r5-lock-form{margin-block:auto;width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:clamp(18px,2.4vh,28px)}
.r5-lock-segment{color:rgba(215,212,204,.8)}
.r5-lock-title{max-width:12ch}
.r5-lock-field{display:flex;flex-direction:column;gap:10px;width:min(100%,520px);margin-top:clamp(16px,3vh,40px)}
.r5-lock-field span{color:rgba(215,212,204,.8)}
.r5-lock-field input{font:inherit;font-size:var(--t-big);letter-spacing:.06em;color:var(--oat);caret-color:var(--oat);background:transparent;border:0;border-bottom:1px solid rgba(215,212,204,.45);border-radius:0;padding:4px 0 12px;width:100%;outline:none}
.r5-lock-field input:focus-visible{border-bottom-color:var(--oat);box-shadow:0 1px 0 var(--oat)}
.r5-lock-error{min-height:1.45em;margin-top:-6px;color:var(--orange)}

/* The end. The closing lines are gone (Jake, Oct 14), so the dome is open
   gradient, like the hero's arch, and the footer starts low enough that its
   left edge is inside the curve (the dome is half the page width tall). */
.r5 .r4-footer{margin-top:0;padding-top:44vw}