/* ==========================================================================
   site.css
   Welch & Wandsworth. Rebecca Thompson Studio, with KFA.
   Created 26 August 2026.

   THE SHARED FURNITURE, AND NOTHING ELSE.
   The header, the navigation, the footer, the wordmark, the Inquire button,
   the page container, the reveal, the hero scrim, the location tag and the
   lightbox. Every page links this file. A fix made here reaches all of them.

   WHAT DOES NOT LIVE HERE. Anything that belongs to one page's own
   composition. 260 rules are unique to a single page and that is correct.
   Do not move a rule here because it appears twice. Move it here because it
   is furniture and should be identical everywhere.

   COLOR TOKENS. This file uses --navy, --red, --ink, --mut, --stone2,
   --serif, --sans and --ease. Those are declared in each page's own :root
   and are read from there. Do not redeclare them here.

   THIS FILE LOADS BEFORE EACH PAGE'S OWN <style>. That is deliberate. A
   page can still override its own furniture where it genuinely needs to,
   and today only the location tag does.
   ========================================================================== */


/* ==========================================================================
   1. THE CHROME SWITCH
   --------------------------------------------------------------------------
   NAVY IS THE DEFAULT HEADER. Settled by Rebecca, 26 August 2026.

   Option B, the cream sticky rail, was approved on 17 August, superseded on
   18 August when the sweep prompt was rewritten, and overtaken by every page
   built since. It is NOT rolled out. It survives as a switchable state in
   section 11 of this file.

   The navigation's color is these seven values and nothing else. To change
   the whole site's navigation color, change them here. To roll Option B out,
   see the instructions in section 11.
   ========================================================================== */

:root{
  --chrome-bg:var(--navy);
  --chrome-link:rgba(255,255,255,.82);
  --chrome-link-hover:#fff;
  --chrome-link-here:#fff;
  --chrome-underline:rgba(255,255,255,.85);
  --chrome-underline-opacity:.45;
  --chrome-edge:rgba(255,255,255,.16);
}


/* ==========================================================================
   2. THE HEADER. Row one, the wordmark and Inquire
   ========================================================================== */

header.top{position:relative;z-index:40;background:var(--navy)}
.topbar{position:relative;z-index:40;background:var(--navy)}

.hrow{
  max-width:1360px;margin:0 auto;padding:20px 48px 18px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center
}

@media(max-width:900px){
  .hrow{grid-template-columns:1fr auto;padding:14px 16px 12px}
  .hrow>span{display:none}
}


/* ==========================================================================
   3. THE NAVIGATION. Row two
   --------------------------------------------------------------------------
   .navrow is the band on 32 pages. .rail is the band on altadena.html and
   inquire.html, which are sticky. Both take their color from the tokens
   above, so they are one component with two grounds, not two components.

   IT WRAPS. IT DOES NOT SCROLL SIDEWAYS. Locked by Rebecca 18 August 2026.
   A horizontally scrolling bar with scrollbar-width:none is a hidden bar.
   Never restore overflow-x:auto on .menu. RULES-Decisions-Settled.
   ========================================================================== */

.navrow,.rail{background:var(--chrome-bg);border-top:1px solid var(--chrome-edge)}

.menu{
  max-width:1360px;margin:0 auto;padding:0 48px;
  display:flex;justify-content:center;gap:34px;
  flex-wrap:wrap;overflow-x:visible;scrollbar-width:none
}
.menu::-webkit-scrollbar{display:none}

.menu a{
  color:var(--chrome-link);text-decoration:none;font-size:12.5px;
  letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;
  padding:15px 0;position:relative;transition:color .25s
}
.menu a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--chrome-underline);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease)
}
.menu a:hover{color:var(--chrome-link-hover)}
.menu a:hover::after{transform:scaleX(1);opacity:var(--chrome-underline-opacity)}
.menu a.here{color:var(--chrome-link-here)}
.menu a.here::after{transform:scaleX(1)}
.menu a.altd{color:var(--chrome-link-here)}
.menu a.altd::before{
  content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--red);margin-right:9px;vertical-align:middle
}

@media(max-width:1180px){
  .menu{gap:24px}
  .menu a{font-size:11.5px;letter-spacing:.1em}
}
@media(max-width:900px){
  .menu{padding:0 16px;gap:20px;justify-content:flex-start}
  .menu a{font-size:11px;letter-spacing:.09em;padding:12px 0}
}
@media(max-width:620px){
  .menu{justify-content:center;gap:2px 18px;padding:2px 14px 6px}
  .menu a{padding:9px 0;font-size:11px;letter-spacing:.08em}
}


/* ==========================================================================
   4. THE INQUIRE BUTTON
   ========================================================================== */

.inq{
  grid-column:3;justify-self:end;border:1px solid rgba(255,255,255,.75);
  color:#fff;text-decoration:none;padding:12px 26px;font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;
  transition:background .3s var(--ease),color .3s var(--ease)
}
.inq:hover{background:#fff;color:var(--navy)}

@media(max-width:900px){
  .inq{grid-column:2;padding:10px 16px;font-size:10px;letter-spacing:.13em;white-space:nowrap}
}


/* ==========================================================================
   5. THE WORDMARK. A locked lockup. Do not restyle it
   --------------------------------------------------------------------------
   .rev is the reversed version used on the navy header and in the footer.
   .nav is the header size, .foot the footer size.
   ========================================================================== */

.mark{
  font-family:var(--serif);font-weight:400;letter-spacing:.06em;color:var(--navy);
  line-height:1;text-align:center;display:inline-block;text-decoration:none
}
.mark .amp{color:var(--red);font-style:italic;padding:0 .09em}
.mark .rule{height:1px;background:var(--stone2);margin:7px 0 5px}
.mark .sub{
  font-family:var(--sans);text-transform:uppercase;letter-spacing:.3em;
  font-size:8px;color:var(--navy);opacity:.72
}
.mark .cslb{
  font-family:var(--sans);text-transform:uppercase;letter-spacing:.15em;
  font-size:9.5px;color:var(--navy);opacity:.8;margin-top:5px
}

.mark.rev{color:rgba(255,255,255,.88)}
.mark.rev .rule{background:rgba(255,255,255,.34)}
.mark.rev .sub{color:rgba(255,255,255,.88);opacity:1}
.mark.rev .cslb{color:rgba(255,255,255,.72);opacity:1}

.mark.nav{font-size:19px}
.mark.foot{font-size:23px}
.mark.foot .sub{font-size:9px}

/* Two fixes for the same crowding problem, made on different days by
   different chats, neither of which reached the other's pages. Both applied
   everywhere, 26 August 2026. */
@media(max-width:900px){
  .mark.nav{font-size:15px;justify-self:start;text-align:left}
  .mark.nav .sub{font-size:6.5px;letter-spacing:.22em}
  .mark.nav .rule{margin:5px 0 4px}
  .mark.nav .cslb{font-size:8px;letter-spacing:.12em}
}


/* ==========================================================================
   6. THE PAGE CONTAINER
   ========================================================================== */

.wrap{max-width:1360px;margin:0 auto;padding:0 48px}

@media(max-width:900px){
  .wrap{padding:0 22px}
}


/* ==========================================================================
   7. HERO FURNITURE. The scrim and the location tag
   --------------------------------------------------------------------------
   THE SCRIM keeps the white wordmark readable over a bright sky, and it is
   painting on every page that carries it. Hiding it at 390px brightens the
   top of the photograph by 16 to 55 points on a 0 to 255 scale. Measured
   26 August 2026 on all thirteen project pages.

   z-index:4 here is the value 21 pages already carry. THIRTEEN PAGES CARRY
   NO STACKING LEVEL AND THEY KEEP IT THAT WAY. Each of those thirteen sets
   `z-index:auto` in its own file, with a comment. That difference is a
   latent bug, not a decision, and equalizing it darkens the top of thirteen
   hero photographs by about one point. It is logged for the next job and it
   is deliberately NOT fixed here.

   THE LOCATION TAG. Its appearance lives here. Its DISTANCE FROM THE BOTTOM
   does not, because that genuinely depends on what else is in the hero.
   Three pages override `bottom` in their own file and nothing else.
   This tag has broken twice. Its styling now exists in exactly one place.
   ========================================================================== */

/* .bot-scrim is NOT here. It is page composition and it stays in the page. */
.hero .top-scrim{
  position:absolute;left:0;right:0;top:0;height:26vh;z-index:4;
  background:linear-gradient(to bottom,rgba(0,0,0,.42),rgba(0,0,0,0))
}

/* NO `margin` HERE, DELIBERATELY. The tag is a <p>. On four pages it relies
   on the browser's default paragraph margin to sit where it sits, and on
   inquire.html a local `margin:0` is part of that page's own positioning.
   Setting margin here moved the tag down 10.5px on four pages. Do not add it. */
.hero .loc{
  position:absolute;right:48px;bottom:66px;z-index:6;
  font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.72)
}

@media(max-width:900px){
  .hero .loc{right:22px;bottom:60px}
}
@media(max-width:620px){
  .hero .loc{bottom:10px}
}


/* ==========================================================================
   8. THE REVEAL. Blocks fade up as they enter the viewport
   --------------------------------------------------------------------------
   One definition, 26 August 2026. Four existed: two timings, one page whose
   stop-all-motion rule was incomplete, and one whose transition sat on the
   wrong half of the pair so blocks animated out as well as in.

   --d is the optional stagger delay a page sets inline on a row of blocks.

   THE LOWER BOUND IS DELIBERATELY ABSENT. An element already scrolled past
   should be revealed, not held. RULES-Decisions-Settled, 18 August 2026.
   ========================================================================== */

.rise{opacity:0;transform:translateY(18px)}
.rise.in{
  opacity:1;transform:none;
  transition:opacity 1.05s var(--ease) var(--d,0ms),transform 1.05s var(--ease) var(--d,0ms)
}

@media(max-width:820px){
  .rise{transform:translateY(24px)}
}

@media(prefers-reduced-motion:reduce){
  .rise{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}
}


/* ==========================================================================
   9. THE FOOTER
   --------------------------------------------------------------------------
   THE WORDING IN HERE IS NOT THIS FILE'S BUSINESS. The .lic block is left
   alone by RULES-Company-Description, settled 26 August 2026. This file sets
   how it looks and never what it says.

   flex-shrink:0 stops the footer riding up on a page too short to fill the
   screen. It was on the twelve news pages only. Applied everywhere.

   .back is the "See the work" link. Only altadena.html uses it today.
   ========================================================================== */

footer{
  background:var(--navy);color:rgba(255,255,255,.72);
  padding:62px 0 54px;text-align:center;flex-shrink:0
}

footer .lic{margin-top:24px;font-size:12px;letter-spacing:.1em;line-height:1.9}

footer .credit{
  margin-top:20px;padding-top:18px;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;line-height:2;color:rgba(255,255,255,.52);
  border-top:1px solid rgba(255,255,255,.14);display:inline-block
}
footer .credit span{padding:0 7px;color:rgba(255,255,255,.55)}
footer .credit a{
  color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.26);
  padding-bottom:1px;white-space:nowrap;transition:color .25s,border-color .25s
}
footer .credit a:hover,footer .credit a:focus-visible{color:#fff;border-color:rgba(255,255,255,.7)}

footer .fsoc{margin-top:26px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}
footer .fsoc a{color:rgba(255,255,255,.72);text-decoration:none;padding:0 13px;transition:color .18s ease}
footer .fsoc a:hover,footer .fsoc a:focus-visible{color:#fff}
footer .fsoc i{font-style:normal;color:rgba(255,255,255,.30)}

footer .back{margin-top:18px;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
footer .back a{
  color:rgba(255,255,255,.82);text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:4px
}
footer .back a:hover{color:#fff}


/* ==========================================================================
   10. THE LIGHTBOX
   --------------------------------------------------------------------------
   Twelve project pages. It was byte-identical on all twelve, so nothing was
   reconciled here. It is one definition because a change to it should be one
   edit, not twelve.
   ========================================================================== */

/* THE CONTROLS SIT OUTSIDE THE PHOTOGRAPH, AT EVERY WIDTH. 27 August 2026.
   Three grid rows: the close X above the picture, the picture, the arrows
   beneath it. No width condition, deliberately. Scoped to phones, the same
   controls still landed on the widest photographs at 768, 1024 and 1440.
   The photograph is sized by the space the controls leave, not by a number,
   so a longer caption or a shorter screen cannot cut it off. */
.lb{
  position:fixed;inset:0;z-index:90;display:none;
  grid-template-columns:1fr 1fr;
  grid-template-rows:auto minmax(0,1fr) auto;
  grid-template-areas:"close close" "stage stage" "prev nxt";
  align-items:center;justify-items:center;padding:6px 3vw 12px;
  background:rgba(20,19,17,.96);opacity:0;transition:opacity .45s var(--ease)
}
.lb.open{display:grid}
.lb.vis{opacity:1}
.lb .stage{
  grid-area:stage;max-width:min(92vw,1100px);height:100%;min-height:0;
  display:flex;flex-direction:column;justify-content:center;text-align:center
}
.lb figure{margin:0;display:flex;flex-direction:column;min-height:0;flex:0 1 auto}
.lb img{
  display:block;margin:0 auto;max-width:100%;max-height:100%;width:auto;
  min-height:0;flex:0 1 auto;object-fit:contain;
  opacity:0;transform:scale(.985);
  transition:opacity .55s var(--ease),transform .55s var(--ease)
}
.lb img.show{opacity:1;transform:none}
.lb figcaption{margin-top:22px;color:rgba(255,255,255,.92);font-family:var(--serif);font-size:20px}
.lb .n{display:block;font-family:var(--sans);font-size:14px;color:rgba(255,255,255,.6);margin-top:7px}
.lb .count{margin-top:16px;font-size:11px;letter-spacing:.24em;color:rgba(255,255,255,.45)}
/* 44 by 44 minimum, the standing tap target rule. #4A63C8 is the logo navy
   lifted far enough to read on the near black surround: the navy itself goes
   too quiet on a phone in daylight. */
.lb button{
  position:static;background:none;border:0;color:#4A63C8;
  cursor:pointer;font-size:30px;line-height:1;padding:18px;transition:color .3s;
  min-width:44px;min-height:44px
}
.lb button:hover{color:#fff}
/* the page moves focus to the X when the lightbox opens, and the browser drew
   its own ring around it every time. this keeps the ring for the keyboard. */
.lb button:focus{outline:none}
.lb button:focus-visible{outline:2px solid rgba(255,255,255,.85);outline-offset:3px}
.lb .prev{grid-area:prev;justify-self:end}
.lb .nxt{grid-area:nxt;justify-self:start}
.lb .x{grid-area:close;justify-self:end;font-size:26px;padding:14px 16px}

@media(prefers-reduced-motion:reduce){
  .lb img{opacity:1;transform:none;transition:none}
}


/* ==========================================================================
   11. OPTION B. THE CREAM STICKY RAIL. NOT ROLLED OUT
   --------------------------------------------------------------------------
   Approved by Rebecca 17 August 2026. Superseded 18 August when the sweep
   prompt was rewritten without it, and overtaken by seventeen pages built
   since, every one of them navy. It runs today on altadena.html and
   inquire.html and nowhere else.

   IT IS NOT AN EXCEPTION. IT IS A SWITCH.

   TO ROLL IT OUT TO THE WHOLE SITE: add .navrow to the first selector below,
   so it reads `.navrow,.rail{`. Then move the nav wrapper OUT of <header> on
   the other 32 pages, because sticky inside a positioned header only sticks
   as far as the header. That markup move is the chrome sweep's own work and
   it is not done by this file.

   TO RETIRE IT: delete this whole section. Both pages become navy.

   STICKINESS AND COLOR ARE DIFFERENT DECISIONS. altadena.html carries seven
   in-page anchors and is the longest page on the site. It stays sticky
   whatever color the rail is, so `position:sticky` is set outside the color
   block below.

   AND CREAM-WHEN-STUCK IS ALREADY A SITE PATTERN. The twelve project pages
   use the identical rgba(250,248,244,.94) ground on their sticky filter
   strip. This is not a two-page anomaly.
   ========================================================================== */

/* Function. Not part of the color switch. */
.rail{position:sticky;top:0;z-index:30}

/* Color. This is the switch. */
.rail{
  --chrome-bg:rgba(250,248,244,.94);
  --chrome-link:var(--mut);
  --chrome-link-hover:var(--ink);
  --chrome-link-here:var(--navy);
  --chrome-underline:var(--navy);
  --chrome-underline-opacity:.35;
  backdrop-filter:saturate(1.6) blur(10px);
  -webkit-backdrop-filter:saturate(1.6) blur(10px);
  border-top:0;
  border-bottom:1px solid var(--stone2)
}

/* A row photograph opens on its own image, so there is no sequence to page
   through and the arrows come off. Added 31 August 2026. */
.lb.single .prev,.lb.single .nxt{display:none}