/* ============================================================
   BRAND. Values taken from gahensley_Exec_Summary_resume_2025
   ============================================================ */
:root{
  /* >>> THE ONLY LINE TO CHANGE FOR THE BRAND ORANGE <<<
     Everything orange on this site reads from this one value.        */
  --orange:#b2552a;
  /* darker shade used for hover states. Keep it roughly 20% darker
     than --orange, or set it to the same value if you prefer flat.   */
  --orange-2:#8e4422;
  --black:#000000;
  --gray:#6d6e71;
  --gray-2:#939598;
  --blue:#215e9e;
  --paper:#ffffff;
  --paper-2:#f7f6f6;
  --rule:#d7d8da;
  --max:1180px;
  --sec-pad:70px;   /* every section gap derives from this one value */
  --rule-w:1px;
  --stack-gap:8px;  /* name to acronyms, and acronyms to role. Kept equal. */     /* weight of the orange dividers, header and footer */
  --bar-h:0px;
  --bar-pt:34px;
  --cap-drop:3.67px;   /* box top of the name down to its cap top */
  --head-h:190px;   /* recomputed at runtime, see setHead() */
  /* Desktop type in the header. The credentials and the role line are the
     same size deliberately, so they read as one subordinate voice under the
     name. Phones override all three in the max-width:700px block below.

     --name was clamp(20px,3.4vw,34px) and is 20% down from that.

     --sub is half of it, and is the size of the credentials AND of the role
     block, which is the whole point of it being one token: those two are
     meant to read as one subordinate voice and cannot drift apart.

     The two were briefly unlocked, when the name came down 20% on its own
     and --sub was left at the value it had. That put the role and the
     credentials at 62.5% of the name rather than half, and they read too
     loud against it. Halving is the rule; keep it. */
  --name:clamp(16px,2.72vw,27.2px);
  --sub:calc(var(--name) * .5);   /* credentials, and the role, matched */

  /* Breathing room under the orange caption before the fold. The hero is
     sized so the caption finishes above this much of the window. */
  --hero-fold-gap:26px;
  --sans:"Myriad Pro","Myriad Set Pro","Source Sans 3","Segoe UI",Calibri,
         -apple-system,"Helvetica Neue",Arial,sans-serif;
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
*{box-sizing:border-box}
body{
  margin:0;background:var(--paper);color:var(--black);
  font-family:var(--sans);font-size:16.5px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
/* Scroll lock for the menu and the image viewer. overflow:hidden on the body
   is ignored by phone browsers, so the body is pinned instead and the scroll
   position is put back on release. See lockScroll(). */
body.locked{position:fixed;left:0;right:0;width:100%;overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit}

/* ============================================================
   HEADER. The mark starts big and collapses to GAH on scroll,
   at which point it becomes the menu button.
   ============================================================ */
/* solid white the whole way down to the orange rule, so page content
   scrolling underneath never shows through the title block */
header{position:fixed;top:0;left:0;right:0;z-index:60;background:var(--paper);
  border-bottom:var(--rule-w) solid var(--orange);
  /* Phones composite a fixed bar on the scrolling layer unless it is given one
     of its own. Without this the header can lag behind a momentum flick, or
     judder while the address bar collapses. Nothing here is visible: it only
     tells the phone to keep the bar pinned and painted. */
  transform:translateZ(0);-webkit-transform:translateZ(0);
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  will-change:transform}
.bar{max-width:var(--max);margin:0 auto;padding:var(--bar-pt) 24px 0;min-height:var(--bar-h);
  display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
  transition:min-height .3s ease,padding .3s ease}
.subrow{max-width:var(--max);margin:0 auto;padding:var(--stack-gap) 24px 15px;
  transition:opacity .25s ease}
header.compact .subrow{display:none}
header.compact .bar{min-height:60px;padding-top:0;align-items:center}
header.compact .hdr-right{align-self:center;margin-top:0}

/* the mark itself */
#mark{
  position:relative;display:flex;align-items:center;transition:opacity .25s ease;
  background:none;border:0;padding:0;cursor:pointer;font-family:inherit;color:var(--black);
  text-align:left;
}
#mark .full,#mark .short{
  text-transform:uppercase;font-weight:600;letter-spacing:.06em;line-height:1;
  transition:opacity .28s ease, transform .28s ease;
}
#mark .full{font-size:var(--name);line-height:1}
#mark .full em{font-style:normal;color:var(--gray);font-weight:400;font-size:var(--sub);letter-spacing:.08em}
#mark .short{font-size:26px;letter-spacing:.1em;position:absolute;opacity:0;transform:translateY(6px)}
header.compact #mark .full{opacity:0;transform:translateY(-6px);pointer-events:none;position:absolute;left:0}
header.compact #mark .short{opacity:1;transform:translateY(0);position:static}

/* the burger sits hard against the right edge of the page width */
#burger{
  flex:0 0 auto;width:34px;display:grid;gap:6px;
  background:none;border:0;padding:0;cursor:pointer;
}
#burger i{display:block;height:2px;background:var(--orange);border-radius:1px;
  transition:transform .3s ease, opacity .3s ease}
body.menu-open #burger i:nth-child(1){transform:translateY(8px) rotate(45deg)}
body.menu-open #burger i:nth-child(2){opacity:0}
body.menu-open #burger i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
/* while the menu is open the mark is always in its GAH state */
body.menu-open header{background:transparent;border-bottom-color:transparent}
body.menu-open .bar{min-height:60px;padding-top:0;align-items:center}
body.menu-open .hdr-right{align-self:center;margin-top:0}
body.menu-open .subrow{display:none}
body.menu-open #mark{opacity:0;pointer-events:none}

/* ============================================================
   SLIDE-IN MENU. Enters from the left, type set large.
   ============================================================ */
#scrim{position:fixed;inset:0;background:rgba(0,0,0,.35);opacity:0;visibility:hidden;
  transition:opacity .35s ease,visibility .35s;z-index:55}
body.menu-open #scrim{opacity:1;visibility:visible}

#panel{
  position:fixed;top:0;left:0;bottom:0;width:min(430px,86vw);z-index:58;
  background:var(--paper);
  transform:translateX(-102%);transition:transform .42s cubic-bezier(.5,0,.2,1);
  padding:0 40px 40px;overflow-y:auto;
  box-shadow:0 0 60px rgba(0,0,0,.12);
}
#panel .pmark{height:66px;display:flex;align-items:center;font-size:26px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:44px;
  opacity:0;transition:opacity .3s ease .12s}
body.menu-open #panel .pmark{opacity:1}
body.menu-open #panel{transform:translateX(0)}
#panel ul{list-style:none;margin:0;padding:0}
#panel li{opacity:0;transform:translateX(-16px);transition:opacity .4s ease,transform .4s ease}
body.menu-open #panel li{opacity:1;transform:translateX(0)}
#panel a{
  display:block;text-decoration:none;text-transform:uppercase;font-weight:600;
  font-size:clamp(21px,3.6vw,27px);letter-spacing:.05em;color:var(--black);
  padding:15px 0;border-bottom:1px solid var(--rule);transition:color .2s,padding-left .2s;
}
#panel a:hover,#panel a.active{color:var(--orange);padding-left:9px}
#panel .pcard{margin-top:38px;font-size:15px;line-height:1.9;color:var(--gray)}
#panel .pcard a{display:inline;font-size:15px;letter-spacing:0;text-transform:none;
  font-weight:400;border:0;padding:0;color:var(--gray)}
#panel .pcard a:hover{color:var(--orange);padding-left:0}
#panel .pcred{margin-top:26px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--orange);font-weight:600}

/* ============================================================
   MASTHEAD
   ============================================================ */
.lock{position:relative;min-width:0}
/* Same face, weight and now the same size as the AIA, NCARB, LEED AP BD+C
   line: both read from --sub, so they cannot drift apart. Regular, not
   semibold. Black rather than grey is the only thing that separates them. */
.sm-br{display:none}
.role{margin:0;font-size:var(--sub);letter-spacing:.16em;text-transform:uppercase;
  color:var(--black);font-weight:400;line-height:1.31}

.hdr-right{display:flex;align-items:center;gap:24px;flex:0 0 auto}
/* the right hand group hangs from the cap height of the name rather than
   being centred against it, so the burger's top rule lines up with the top
   of HENSLEY */
.hdr-right{align-self:flex-start;margin-top:var(--cap-drop)}
.hdr-link{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gray);
  text-decoration:none;font-weight:600;border-bottom:1px solid transparent;padding-bottom:2px;
  transition:color .2s,border-color .2s,opacity .25s}
.hdr-link:hover{color:var(--orange);border-bottom-color:var(--orange)}
body.menu-open .hdr-link{opacity:0;pointer-events:none}
/* Phones: the full credential string drops to its own line under the
   name, so nothing is abbreviated away and nothing wraps mid-acronym at
   any width. Above 700px the acronyms trail the name on one line. */
@media(max-width:700px){
  :root{--bar-h:0px;--bar-pt:22px;--cap-drop:2.33px;--sec-pad:35px;--stack-gap:7.0px}
  #hdr-li{display:none}
  /* the role is absolutely placed inside .lock, which is only as wide as the
     name. Give it the full column so it stops wrapping in a narrow gutter. */
  #mark .full{font-size:min(20px,5.25vw);letter-spacing:.03em;line-height:1}
  #mark .full em{display:block;font-size:.42em;letter-spacing:.13em;
    line-height:1;margin-top:var(--stack-gap)}
  .lead-comma{display:none}
  #burger{width:28px}
  .bar{gap:12px}
  .hdr-right{gap:12px}
  .hdr-link{font-size:9px;letter-spacing:.12em}
  .role{font-size:10.5px;letter-spacing:.13em;line-height:1.82}
  .ip{display:none}
  .sm-br{display:inline}
  /* Measured off rendered pixels in a column with no commas in it, cap height
     to cap height. Both gaps read 12.00px, which is also the role's own line
     spacing, so the stack sits on a single 12px rhythm. The subtraction covers
     the leading the role's 1.8 line height already supplies. */
  .subrow{padding-top:calc(var(--stack-gap) - 2.0px);padding-bottom:13px}
}
@media(max-width:360px){
  #mark .full em{font-size:.6em;letter-spacing:.1em}
  .hdr-link{font-size:8.5px;letter-spacing:.1em}
  /* tracking comes in slightly so SENIOR DIRECTOR OF CONSTRUCTION
     OPERATIONS still holds one line on a 320px screen */
  .role{letter-spacing:.09em}
}

/* ============================================================
   ROTATING HERO BAND. Image band with the caption in orange.
   ============================================================ */
/* The band sits in the 1180 content column, on the same left and right
   margin as the intro, the project cards and the footer below it. It was
   briefly run full bleed to the window and that was wrong: the picture broke
   the column every other element on the page holds to. The white either side
   is the page, not a border on the photograph. Those were a separate problem,
   in the image files, and are trimmed out of them. */
.heroband{max-width:var(--max);margin:0 auto 8px;padding:calc(var(--head-h) + 26px) 24px 0}

/* The band is 16:7, but never taller than what is left of the window once
   the header, the caption and a margin have taken their share. On a short
   laptop that cap binds and the picture simply crops tighter, which is the
   whole intent: the orange caption has to finish above the fold, not just
   below the picture.

   Both heights it subtracts are measured at runtime rather than guessed.
   --head-h is the header. --cap-h is the tallest of the captions, so the
   figure holds whichever slide is showing.

   svh rather than vh because a phone's vh is the height with the browser
   chrome retracted, which is not the height you actually get. vh first for
   anything too old to know svh. */
.stage{position:relative;width:100%;aspect-ratio:16/7;background:var(--paper-2);overflow:hidden;
  max-height:calc(100vh  - var(--head-h) - var(--cap-h,96px) - 26px - 8px - var(--hero-fold-gap));
  max-height:calc(100svh - var(--head-h) - var(--cap-h,96px) - 26px - 8px - var(--hero-fold-gap));
  min-height:200px}
.stage{overflow:hidden}
.stage figure{position:absolute;inset:0;margin:0;opacity:0;transform:translateX(7%);
  transition:opacity .75s ease, transform 1.05s cubic-bezier(.22,.61,.36,1)}
.stage figure.on{opacity:1;transform:translateX(0)}
.stage img{width:100%;height:100%;object-fit:cover}
.stage .none{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:30px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gray-2);font-weight:600;line-height:2}

/* Held at the height of the tallest caption, so the band does not grow and
   shrink as the rotation moves between a short description and a long one.
   --cap-h is measured once at runtime, see measureCap() in site.js. */
/* The text runs the full width of the band. It used to sit in the first of
   two grid columns with the dots holding the second, which cut every
   sentence off at about two thirds and wrapped it early for no reason.
   The dots are lifted out of the flow instead and sat on the last line,
   so only the sub line has to leave room for them. */
.cap{background:var(--orange);color:#fff;padding:11px 26px;position:relative;
  min-height:var(--cap-h,84px)}
.cap{overflow:hidden}
/* The caption slides in from the left. It is written as an animation off a
   visible resting state rather than a transition off an invisible one, so a
   viewer that will not run the animation shows the words rather than an empty
   orange band. Never give type opacity:0 as its default. */
/* The caption slides in from the left. Two rules keep it honest: the resting
   state is fully visible, and the animation carries no fill mode or delay, so
   there is no instant, before or after, where the words are transparent. The
   0.18s beat that lets the image lead is written into the keyframes instead of
   an animation-delay, which would need fill-mode to hold and so could strand
   the type at zero. Never give type opacity:0 as its default. */
.cap .txt{min-width:0}
@keyframes cap-in{
  0%,17%{opacity:0;transform:translateX(-22px)}
  100%  {opacity:1;transform:translateX(0)}}
@keyframes cap-fade{0%,17%{opacity:0} 100%{opacity:1}}
.cap .txt.in{animation:cap-in 1.03s cubic-bezier(.22,.61,.36,1)}
@media(prefers-reduced-motion:reduce){
  .stage figure{transform:none;transition:opacity .4s ease}
  .cap .txt.in{animation:cap-fade .48s ease}
}
/* Two lines, a title and a sub line, and nothing else. The description was
   taken out of the hero, so the band is a little over half what it was.
   Leading is tight because there is no paragraph left to breathe. */
.cap h2{margin:0 0 2px;font-size:17px;letter-spacing:.09em;text-transform:uppercase;
  font-weight:600;line-height:1.15}
.cap p{margin:0;font-size:15px;line-height:1.2;color:rgba(255,255,255,.93)}
/* The sub line took the size the description had, 15px, and is now 15% under
   that. Its tracking came in at the same time, because uppercase at the old
   .14em reads far wider than the same size in sentence case and was
   outgrowing the title it sits beneath. It is also the line that shares its
   row with the dots, so it is the only thing that has to keep clear of them. */
.cap .meta{margin:3px 0 0;padding:0 118px 0 0;border:0;font-size:12.75px;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.82);font-weight:600;line-height:1.2}
/* Sat on the last line of the caption, hard right. Bottom aligned to the
   same padding the sub line rests on, and the two line boxes are within a
   fifth of a pixel of each other, so they read as one row. */
.dots,.counter{position:absolute;right:26px;bottom:11px}
.dots{display:flex;gap:2px}
.dots button{background:none;border:0;padding:0 4px;cursor:pointer;color:#fff;
  font:inherit;font-size:26px;line-height:.6;opacity:.45;transition:opacity .25s}
.dots button:hover{opacity:.8}
.dots button.on{opacity:1}
.counter{display:flex;align-items:center;color:#fff}
.counter button{background:none;border:0;padding:2px 0;cursor:pointer;color:#fff;
  font:inherit;font-size:11px;letter-spacing:.16em;font-weight:600;
  font-variant-numeric:tabular-nums;white-space:nowrap;opacity:.85;transition:opacity .2s}
.counter button:hover{opacity:1}
.counter .sep{padding:0 7px;opacity:.7;font-size:14px;line-height:1}
/* Phones: the band runs edge to edge, the image goes tall so it is the
   loudest thing on the screen, and the caption keeps the project title
   only. Description and sub line would otherwise outrun the picture. */
@media(max-width:700px){
  .heroband{padding-left:0;padding-right:0;padding-top:calc(var(--head-h) + 18px)}
  .stage{aspect-ratio:4/3}
  /* the band holds a fixed floor of roughly three times a single-line
     caption, so a long project title fills the space it already has
     instead of forcing the type down a size */
  /* the phone keeps the old two row grid and the dots stay in the flow,
     because there is no sub line here for them to sit beside */
  .cap{display:grid;grid-template-columns:1fr;align-content:space-between;
       padding:16px 24px;min-height:104px;gap:10px;position:static}
  .cap .meta{padding-right:0}
  .dots,.counter{position:static;right:auto;bottom:auto}
  /* the title block is locked: 19px, two lines, always the same height.
     A longer title truncates rather than growing or shrinking the type, so
     the band never changes shape from slide to slide. */
  .cap h2{font-size:19px;line-height:1.3;letter-spacing:.07em;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
    overflow:hidden;min-height:calc(19px * 1.3 * 2);margin:0}
  .cap-desc,.cap-meta{display:none}
  .dots{justify-self:start;align-self:end;gap:11px}
  .dots button{width:10px;height:10px}
}

/* ============================================================
   INTRO + SECTIONS
   ============================================================ */
.intro{max-width:var(--max);margin:0 auto;padding:var(--sec-pad) 24px;border-bottom:1px solid var(--rule)}
.intro p{max-width:74ch;font-size:17px;margin:0 0 15px}

/* scroll-margin-top clears the fixed header when a link lands on a section.
   The header no longer collapses on scroll, so it is at full height whenever
   a landing happens, and this has to read off the measured --head-h rather
   than the 76px that suited the old 60px collapsed bar. Anything less and
   Contact arrives underneath the header. */
section{max-width:var(--max);margin:0 auto;padding:var(--sec-pad) 24px;
  border-bottom:1px solid var(--rule);scroll-margin-top:calc(var(--head-h) + 16px)}

/* A category page has no hero band, so the first thing on it would slide
   up under the fixed header. It supplies its own clearance instead, off
   the same measured --head-h the hero uses, so the two stay in step when
   the header rewraps. */
body[data-section] main#sections > section:first-child{
  padding-top:calc(var(--head-h) + var(--sec-pad))}
.sec-head{margin-bottom:var(--sec-pad)}
.sec-kicker{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gray-2);margin-bottom:10px;font-weight:600}
.sec-head h2{font-size:clamp(19px,2.6vw,26px);letter-spacing:.28em;text-transform:uppercase;
  font-weight:600;margin:0;padding-bottom:12px;border-bottom:var(--rule-w) solid var(--orange);display:inline-block}
.sec-head p{max-width:78ch;margin:22px 0 0}

/* ---------- PROJECT GRID ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:44px 36px}
.card{display:flex;flex-direction:column}
.shot{position:relative;aspect-ratio:4/3;background:var(--paper-2);
  border:1px solid var(--rule);border-top:var(--rule-w) solid var(--orange);overflow:hidden;margin-bottom:15px}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card:hover .shot img{transform:scale(1.03)}
.shot.empty{display:flex;align-items:center;justify-content:center;padding:20px;text-align:center}
.shot.empty span{font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gray-2);font-weight:600}
.card h3{font-size:16px;letter-spacing:.04em;text-transform:uppercase;font-weight:600;
  color:var(--orange);margin:0 0 6px;transition:color .2s}
.card:hover h3{color:var(--orange-2)}
.meta{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--gray-2);
  margin:0 0 12px;padding-bottom:11px;border-bottom:1px solid var(--rule);font-weight:600}
.card p.desc{margin:0;font-size:15.5px}
.assoc{margin-top:11px;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gray);font-weight:600}
.card.slot .shot{border:1px dashed var(--gray-2);border-top:var(--rule-w) solid var(--gray-2);background:transparent}
.card.slot h3{color:var(--gray-2)}

/* ---------- RESUME BLOCK (home page) ---------- */
.res-lead{max-width:70ch;margin:0 0 28px;font-size:17px}
.btn-row{display:flex;gap:14px;flex-wrap:wrap}
.dl{display:inline-block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:#fff;background:var(--orange);text-decoration:none;
  border:1px solid var(--orange);padding:13px 22px;transition:background .2s,border-color .2s,color .2s}
.dl:hover{background:var(--orange-2);border-color:var(--orange-2)}
.dl.ghost{background:none;color:var(--orange)}
.dl.ghost:hover{background:var(--orange);color:#fff;border-color:var(--orange)}

/* ---------- CONTACT + FOOTER ---------- */
.contact-wrap{display:grid;grid-template-columns:1fr 260px;gap:52px;align-items:start}
@media(max-width:800px){.contact-wrap{grid-template-columns:1fr;gap:38px}}
#cform label{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gray-2);font-weight:600;margin-bottom:18px}
#cform .f-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:600px){#cform .f-row{grid-template-columns:1fr;gap:0}}
#cform input,#cform textarea{display:block;width:100%;margin-top:7px;font-family:inherit;
  font-size:16px;color:var(--black);background:var(--paper);border:1px solid var(--rule);
  padding:11px 13px;letter-spacing:0;text-transform:none;font-weight:400}
#cform input:focus,#cform textarea:focus{outline:2px solid var(--orange);outline-offset:-2px}
#cform textarea{resize:vertical;line-height:1.55}
#cform .f-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.f-note{font-size:13px;color:var(--gray)}
.f-note.ok{color:var(--orange);font-weight:600}
.f-note.bad{color:#c0392b}
#cform button[disabled]{opacity:.45;cursor:not-allowed}
.c-side h4{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gray-2);font-weight:600;margin:0 0 8px}
.c-side p{margin:0;font-size:17px;line-height:1.7}
.c-side a{text-decoration:none;border-bottom:1px solid var(--rule)}
.c-side a:hover{color:var(--orange);border-bottom-color:var(--orange)}
footer{max-width:var(--max);margin:0 auto;padding:var(--sec-pad) 24px calc(var(--sec-pad) * 1.4);border-top:var(--rule-w) solid var(--orange);
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gray-2);font-weight:600}

/* ---------- THUMBNAILS UNDER THE HERO ---------- */
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(62px,1fr));
  gap:7px;margin:-6px 0 15px}
.thumb{padding:0;border:1px solid var(--rule);background:var(--paper-2);
  cursor:pointer;overflow:hidden;aspect-ratio:1;transition:border-color .2s}
.thumb:hover{border-color:var(--orange)}
.thumb img{width:100%;height:100%;object-fit:cover}
.card .shot{cursor:zoom-in}

/* ---------- IMAGE VIEWER ---------- */
#lb{position:fixed;inset:0;background:rgba(0,0,0,.94);display:none;
    align-items:center;justify-content:center;z-index:99;padding:32px 76px;cursor:zoom-out}
#lb.on{display:flex}
#lb img{max-width:100%;max-height:100%;object-fit:contain;cursor:default}
#lb-prev,#lb-next{position:absolute;top:50%;transform:translateY(-50%);
  width:56px;height:56px;border:0;background:none;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;opacity:.7;transition:opacity .2s}
#lb-prev:hover,#lb-next:hover{opacity:1}
#lb-prev{left:10px} #lb-next{right:10px}
#lb-prev span,#lb-next span{display:block;width:17px;height:17px;
  border-left:2px solid #fff;border-bottom:2px solid #fff}
#lb-prev span{transform:rotate(45deg);margin-left:5px}
#lb-next span{transform:rotate(-135deg);margin-right:5px}
#lb-count{position:absolute;left:0;right:0;bottom:26px;text-align:center;color:#fff;
  font-size:11px;letter-spacing:.18em;font-weight:600;font-variant-numeric:tabular-nums;opacity:.75}

/* The way out. Escape closes the viewer, so does clicking the backdrop or
   the picture, but none of that is visible and a viewer you cannot see how
   to leave is a trap. The cross is added by site.js rather than sitting in
   the markup, so every page gets it from the one file. */
#lb-close{position:absolute;top:14px;right:14px;width:46px;height:46px;
  border:0;background:none;cursor:pointer;padding:0;z-index:2;
  display:flex;align-items:center;justify-content:center;opacity:.75;
  transition:opacity .2s}
#lb-close:hover{opacity:1}
/* Focus moves here when the viewer opens, so the keyboard is already on the
   way out. A mouse user should not see a ring for that, a keyboard user
   must. :focus-visible is exactly that distinction. */
#lb-close:focus{outline:none}
#lb-close:focus-visible{opacity:1;outline:2px solid #fff;outline-offset:3px;border-radius:3px}
#lb-close::before,#lb-close::after{content:"";position:absolute;
  width:23px;height:2px;background:#fff;border-radius:1px}
#lb-close::before{transform:rotate(45deg)}
#lb-close::after{transform:rotate(-45deg)}
/* a word under it, because a bare cross still asks the viewer to guess */
#lb-esc{position:absolute;top:64px;right:14px;color:#fff;opacity:.5;
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  pointer-events:none}
@media(max-width:700px){
  #lb{padding:20px 52px}
  #lb-prev,#lb-next{width:44px;height:44px}
  #lb-prev{left:2px} #lb-next{right:2px}
  #lb-close{top:6px;right:6px;width:42px;height:42px}
  #lb-esc{display:none}          /* no Escape key to press on a phone */
  .thumbs{grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:6px}
}


/* ============================================================
   UNDER CONSTRUCTION WATERMARK. TEMPORARY.
   This whole block is throwaway. Delete from this comment down to
   the line that says END and the site is clean again, with nothing
   else to undo. No markup was touched to put it there.

   --uc-see is the one number to change. .15 is 85 percent
   transparent, which is what was asked for. 1 would be solid.
   ============================================================ */
:root{ --uc-see:.15; }
body::after{
  content:"Under Construction";
  position:fixed; left:50%; top:50%;
  transform:translate(-50%,-50%) rotate(-24deg);
  font-family:var(--sans);
  font-size:clamp(20px,7vw,120px);   /* sized so the whole phrase fits a phone */
  font-weight:800; letter-spacing:.055em; text-transform:uppercase;
  white-space:nowrap; line-height:1;
  color:var(--orange);
  opacity:var(--uc-see);
  pointer-events:none;   /* never stands between a finger and a link */
  z-index:95;            /* over the page and the fixed header, under the
                            image viewer at 99, so a photograph opened
                            full screen is seen clean */
}
/* a printed page should not carry it */
@media print{ body::after{ display:none; } }
/* ===================== END UNDER CONSTRUCTION ================ */