/* =====================================================================
   NOIR: the site-wide look (Robert, 2026-10-08: "stoic, noir, elegant").
   Black and white only; nothing but the photographs has color.
   Loaded LAST on every page, so it overrides each page's own palette.
   The only colors left are product swatches in the shop (frame colors),
   because they show what the customer is buying.
   Hierarchy comes from type (size, weight, spacing), never from grey.
   ===================================================================== */

:root{
  --noir-black:#000;
  --noir-white:#fff;
  --noir-serif:'Cormorant Garamond', 'Fraunces', Georgia, serif;
  --noir-sans:'Inter', system-ui, sans-serif;

  /* index.html / forms.css names */
  --bg:#000; --panel:#000; --ink:#fff; --ink-soft:#fff; --accent:#fff; --accent-dim:#fff;
  --line:#fff; --field:#000; --ok:#fff; --err:#fff;
  /* portfolio.html / affiliated.html names */
  --bg-elevated:#000; --border:#fff; --text:#fff; --text-dim:#fff; --overlay:rgba(0,0,0,0.78);
  --font-display:var(--noir-serif);
}

html,body{background-color:#000;color:#fff;}
::selection{background:#fff;color:#000;}
:focus-visible{outline:1px solid #fff !important;outline-offset:4px;box-shadow:none !important;}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--noir-serif) !important;font-weight:400 !important;letter-spacing:0.01em !important;color:#fff;}
h1{font-weight:300 !important;}
.hero-content h1,.page-hero-content h1{font-size:clamp(3rem,7.5vw,5.6rem);line-height:0.98;letter-spacing:0.005em !important;}
/* Affiliated's heading is a full sentence: a calmer size. */
.section-head h1{font-size:clamp(1.9rem,4vw,3rem) !important;line-height:1.12;letter-spacing:0.005em !important;max-width:22ch;}
.hero-content p,.page-hero-content p,.section-head p,.about-copy p{color:#fff;font-weight:300;}
.eyebrow,.shop-step,legend,.shop-label,.lb-cat,.photo-caption .cap-gallery{
  color:#fff !important;font-family:var(--noir-sans);font-size:0.68rem !important;font-weight:500 !important;
  letter-spacing:0.32em !important;text-transform:uppercase;
}
.eyebrow{display:flex !important;align-items:center;gap:14px;}
.eyebrow::before{content:"";width:32px;height:1px;background:#fff;flex:none;}
.hint,.fine,.shop-secure,.contact-loc,footer p,.shop-gal,.photo-caption,.lede{color:#fff !important;font-weight:300;}

/* ---------- wordmark: no glow, spaced capitals ---------- */
.wordmark,nav .wordmark{
  color:#fff !important;text-shadow:none !important;animation:none !important;
  font-family:var(--noir-serif) !important;font-weight:500 !important;letter-spacing:0.32em !important;
}

/* ---------- header ---------- */
header.scrolled{background:rgba(0,0,0,0.94) !important;border-color:#fff !important;}

/* ---------- buttons: hairline outline, square, small capitals; invert on hover ---------- */
.btn-primary,.btn-ghost,.dropdown-toggle,.shop-pay,.lightbox .lb-buy,.filters button,.shop-cat,.btn-noir{
  font-family:var(--noir-sans) !important;font-size:0.72rem !important;font-weight:500 !important;
  letter-spacing:0.26em !important;text-transform:uppercase;line-height:1.2;
  border-radius:0 !important;border:1px solid #fff !important;
  background:transparent !important;color:#fff !important;
  padding:16px 34px;transition:background .35s ease,color .35s ease !important;
}
.btn-primary:hover,.btn-ghost:hover,.dropdown-toggle:hover,.lightbox .lb-buy:hover,
.filters button:hover,.shop-cat:hover,.btn-noir:hover,
.dropdown.open .dropdown-toggle{background:#fff !important;color:#000 !important;}
/* The one main action on a page is solid white. */
.shop-pay,.shop-add .btn-primary,.form-actions .btn-primary{background:#fff !important;color:#000 !important;}
.shop-pay:hover,.shop-add .btn-primary:hover,.form-actions .btn-primary:hover{background:#000 !important;color:#fff !important;}
.btn-primary[disabled],.shop-pay[disabled]{opacity:0.35;cursor:not-allowed;}
.btn-primary[disabled]:hover,.shop-pay[disabled]:hover{background:#fff !important;color:#000 !important;}
.filters button.active,.shop-cat[aria-pressed="true"]{background:#fff !important;color:#000 !important;}
.filters button{padding:10px 22px;}
.shop-cat{padding:10px 20px;}
.dropdown-toggle .caret{border-color:currentColor !important;}

/* ---------- menus: black panel, hairline frame, inverted hover ---------- */
.tsl-nav{--paper-raised:#000;--ink:#fff;--line:#fff;--teal:#fff;--teal-deep:#000;--focus:#fff;font-family:var(--noir-sans) !important;}
.tsl-nav summary{
  background:transparent !important;color:#fff !important;border:1px solid #fff !important;border-radius:0 !important;
  font-size:0.7rem !important;font-weight:500 !important;letter-spacing:0.28em !important;text-transform:uppercase;
  padding:12px 20px !important;transition:background .3s ease,color .3s ease;
}
.tsl-nav summary:hover,.tsl-nav[open] summary{background:#fff !important;color:#000 !important;}
.tsl-nav-menu,.dropdown-menu{
  background:#000 !important;border:1px solid #fff !important;border-radius:0 !important;
  box-shadow:none !important;padding:8px !important;min-width:240px;
}
/* The header Menu sits at the right edge: open it toward the left so it never runs off screen. */
.tsl-nav-menu{left:auto !important;right:0 !important;}
.tsl-nav-menu a,.dropdown-menu li a{
  color:#fff !important;border-radius:0 !important;font-size:0.7rem !important;font-weight:500 !important;
  letter-spacing:0.24em !important;text-transform:uppercase;padding:12px 14px !important;
  transition:background .25s ease,color .25s ease;
}
.tsl-nav-menu a:hover,.tsl-nav-menu a:focus-visible,.dropdown-menu li a:hover,.dropdown-menu li a:focus-visible{background:#fff !important;color:#000 !important;}
.tsl-nav-menu .divider{background:#fff !important;margin:8px 0 !important;}

/* ---------- surfaces: all black, divided by hairlines ---------- */
.about,.contact,.form-card,.shop-box,.shop-config,.status-card,.panel{background:#000 !important;}
.about,.contact{border-color:#fff !important;}
.form-card,.shop-box,.shop-config{border:1px solid #fff !important;border-radius:0 !important;}
.about-media img{border-color:#fff !important;}
.about-facts{border-color:#fff !important;}
.about-facts .fact-num{color:#fff !important;font-family:var(--noir-serif);font-weight:300;font-size:2rem;}
.about-facts .fact-label{color:#fff !important;font-size:0.68rem;letter-spacing:0.28em;text-transform:uppercase;}
footer{border-color:#fff !important;}
.hero{background:#000 !important;}
.hero-scrim{background:linear-gradient(180deg,rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.3) 45%,rgba(0,0,0,0.97) 100%) !important;}
.page-hero{background:#000 !important;}
.page-hero-scrim{background:linear-gradient(180deg,rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.38) 45%,rgba(0,0,0,0.97) 100%) !important;}
.tile{background:#000 !important;}

/* ---------- links ---------- */
.contact-details a,.foot-social a,footer a,.shop-or a,.shop-notice a,.status-track a,.link-table a{
  color:#fff !important;text-decoration:none;border-bottom:1px solid #fff;padding-bottom:2px;
  transition:opacity .25s ease;
}
.contact-details a:hover,.foot-social a:hover,footer a:hover,.shop-or a:hover,.shop-notice a:hover,.status-track a:hover,.link-table a:hover{opacity:0.6;}
.contact-details .contact-social a{border:none !important;padding:0;}
.contact-details .contact-social a:hover{color:#fff !important;opacity:0.6;transform:none !important;}
.link-table td{border-bottom:1px solid #fff !important;}
.vv-link:hover,.vv-link:focus-visible{filter:drop-shadow(0 8px 14px rgba(255,255,255,0.18)) !important;}

/* ---------- forms: underline fields, like a printed form ---------- */
input,select,textarea{
  background:transparent !important;color:#fff !important;border:none !important;border-bottom:1px solid #fff !important;
  border-radius:0 !important;padding:12px 2px !important;font-weight:300;
}
textarea{border:1px solid #fff !important;padding:12px !important;}
input:focus,select:focus,textarea:focus{border-bottom-width:2px !important;padding-bottom:11px !important;}
input::placeholder,textarea::placeholder{color:#fff !important;opacity:0.45;}
select{background-image:linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%) !important;
  background-position:calc(100% - 14px) 55%,calc(100% - 9px) 55% !important;background-size:5px 5px !important;background-repeat:no-repeat !important;padding-right:30px !important;}
select option{background:#000;color:#fff;}
label{color:#fff !important;font-size:0.7rem !important;font-weight:500 !important;letter-spacing:0.2em;text-transform:uppercase;}
label .req,label .opt{color:#fff !important;letter-spacing:0;text-transform:none;}
.field.invalid input{border-bottom:2px dashed #fff !important;}
.field-error{color:#fff !important;font-style:italic;}
.choice{background:transparent !important;border:1px solid #fff !important;border-radius:0 !important;}
.choice input{accent-color:#fff;}
.notice,.shop-notice{background:#000 !important;border:1px solid #fff !important;border-left-width:3px !important;border-radius:0 !important;color:#fff !important;}

/* ---------- shop ---------- */
.shop-photo{background:#000 !important;border:1px solid transparent !important;border-radius:0 !important;}
.shop-photo span{background:linear-gradient(transparent,rgba(0,0,0,0.9)) !important;}
.shop-photo span small{color:#fff !important;letter-spacing:0.14em;text-transform:uppercase;font-size:0.62rem !important;}
.shop-photo[aria-pressed="true"]{border-color:#fff !important;box-shadow:0 0 0 1px #fff !important;}
.shop-product,.shop-frame,.shop-size{
  background:transparent !important;color:#fff !important;border:1px solid #fff !important;border-radius:0 !important;
  transition:background .3s ease,color .3s ease;
}
.shop-product:hover,.shop-frame:hover,.shop-size:hover{box-shadow:inset 0 0 0 1px #fff;}
.shop-product[aria-pressed="true"],.shop-frame[aria-pressed="true"],.shop-size[aria-pressed="true"]{background:#fff !important;color:#000 !important;}
.shop-product strong{font-family:var(--noir-serif);font-size:1.2rem;font-weight:500;letter-spacing:0.02em;}
.shop-product small,.shop-product strong em,.shop-size span{color:inherit !important;font-weight:300;}
.shop-size b{font-family:var(--noir-serif);font-size:1.15rem;font-weight:500;}
.shop-frame{font-size:0.72rem !important;letter-spacing:0.16em;text-transform:uppercase;}
.shop-frame i{border:1px solid currentColor !important;border-radius:50% !important;}
.shop-preview{background:#000 !important;}
.shop-line img,.shop-items img{border-color:#fff !important;border-radius:0 !important;}
.shop-totals,.shop-totals .shop-grand{border-color:#fff !important;}
.shop-totals dt,.shop-line-desc{color:#fff !important;font-weight:300;}
.shop-totals .shop-grand dd{font-family:var(--noir-serif);font-size:1.5rem;}
.shop-remove{color:#fff !important;}
.shop-msg,.shop-msg.error{color:#fff !important;font-style:italic;}
.spinner{border:2px solid #fff !important;border-top-color:transparent !important;}
.status-steps li{color:#fff !important;border:1px dashed #fff !important;border-radius:0 !important;}
.status-steps li.done{border-style:solid !important;}
.status-steps li.now{border-style:solid !important;background:#fff !important;color:#000 !important;}
.status-track{border-color:#fff !important;border-radius:0 !important;background:#000 !important;}

/* ---------- home: featured frame + social icons ---------- */
.photo-caption .cap-title{color:#fff;font-family:var(--noir-serif);font-style:italic;font-size:1.05rem;}
.contact-social svg{fill:#fff !important;}

/* ---------- portfolio lightbox ---------- */
.lightbox{background:rgba(0,0,0,0.97) !important;}
.lightbox .lb-close,.lightbox .lb-prev,.lightbox .lb-next{
  border:1px solid #fff !important;border-radius:0 !important;color:#fff !important;background:transparent !important;
  transition:background .3s ease,color .3s ease !important;
}
.lightbox .lb-close:hover,.lightbox .lb-prev:hover,.lightbox .lb-next:hover{background:#fff !important;color:#000 !important;}
.lightbox .lb-buy{padding:0 22px;height:42px;display:inline-flex !important;align-items:center;}
.lightbox .lb-caption{color:#fff !important;font-family:var(--noir-serif);font-style:italic;font-size:1rem !important;}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;}
}

/* ---------- tighter layout (2026-10-08) ----------
   The homepage opener used to fill the whole screen with the title pinned to
   the bottom: dead space above it on computers and tablets, and below the
   stacked buttons on phones. Now it's only as tall as its content, starting
   just under the header. The logo is a little smaller, so headers are slimmer. */
.wordmark img{height:72px !important;width:auto !important;}
header{padding:18px 0 !important;}
header.scrolled{padding:10px 0 !important;}
header.scrolled .wordmark img{height:52px !important;}
.wordmark img{transition:height .3s ease;}

.hero{height:auto !important;min-height:0 !important;padding-top:clamp(150px,20vh,230px) !important;padding-bottom:0 !important;}
.hero-content{padding-bottom:clamp(40px,7vh,80px) !important;}
.hero-content h1{margin-bottom:14px !important;}
.hero-content p{margin-bottom:26px !important;}
.featured{padding:clamp(36px,5vw,64px) 0 !important;}

/* Inner pages: banner just tall enough for its title. */
.page-hero{min-height:0 !important;padding-top:clamp(140px,18vh,200px) !important;}

@media (max-width:680px){
  .wordmark img{height:52px !important;}
  header{padding:12px 0 !important;}
  .hero{padding-top:110px !important;}
  .hero-content{padding-bottom:32px !important;}
  .hero-actions{gap:10px !important;}
  .hero-actions > *{flex:1 1 100%;}
  .hero-actions .btn-ghost,.hero-actions .dropdown-toggle{width:100%;text-align:center;justify-content:center;}
  .featured{padding:28px 0 !important;}
  .page-hero{padding-top:104px !important;}
}

/* The homepage frame only shows landscapes now: keep it landscape-shaped on
   phones too, so wide photos don't float in a tall, half-empty box. */
.photo-frame{aspect-ratio:3/2 !important;}

/* About: Robert's portrait at half its old size (2026-10-08); the text gets the room. */
.about-grid{grid-template-columns:minmax(0,0.425fr) minmax(0,1.575fr) !important;align-items:start !important;}
@media (max-width:900px){
  .about-grid{grid-template-columns:minmax(0,1fr) !important;}
  .about-media{width:50%;}
}

/* ---------- v19 (2026-10-11): readable small text, logo, contact, events ----------
   Nothing below 0.8rem (12.8px); wide capitals keep their look with a little
   less letter spacing so the bigger text still fits on phones. */
.eyebrow,.shop-step,legend,.shop-label,.lb-cat,.photo-caption .cap-gallery,
.lightbox .lb-caption .lb-cat,.tile-cat{font-size:0.8rem !important;letter-spacing:0.22em !important;}
.btn-primary,.btn-ghost,.dropdown-toggle,.shop-pay,.lightbox .lb-buy,.filters button,.shop-cat,.btn-noir{font-size:0.8rem !important;letter-spacing:0.2em !important;}
.tsl-nav summary{font-size:0.8rem !important;letter-spacing:0.22em !important;}
.tsl-nav summary .caret{font-size:0.9em !important;}
.tsl-nav-menu a,.dropdown-menu li a{font-size:0.8rem !important;letter-spacing:0.18em !important;}
label{font-size:0.8rem !important;letter-spacing:0.16em;}
.shop-frame{font-size:0.8rem !important;letter-spacing:0.12em;}
.shop-photo span small{font-size:0.8rem !important;letter-spacing:0.1em;}
.link-sub{font-size:0.8rem !important;letter-spacing:0.12em !important;}
.tile .placeholder,footer .owner-link{font-size:0.8rem !important;}
@media (max-width:680px){.link-sub{letter-spacing:0.06em !important;}}

/* Logo mark on every page, same size everywhere. */
.wordmark,nav .wordmark{display:inline-flex !important;align-items:center;gap:10px;}

/* About: portrait 20% smaller than v15. */
.about-grid{grid-template-columns:minmax(0,0.34fr) minmax(0,1.66fr) !important;}
@media (max-width:900px){
  .about-grid{grid-template-columns:minmax(0,1fr) !important;}
  .about-media{width:40%;}
}

/* About: events covered (replaces the 2023 / MSU facts). */
.about-events{margin-top:36px;padding-top:28px;border-top:1px solid #fff;}
.events-label{display:block;font-family:var(--noir-sans);font-size:0.8rem;font-weight:500;letter-spacing:0.22em;text-transform:uppercase;margin-bottom:16px;}
.events-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 36px;}
.events-list li{font-family:var(--noir-serif);font-size:1.25rem;font-weight:400;line-height:1.3;}
@media (max-width:600px){.events-list{grid-template-columns:minmax(0,1fr);}}

/* Contact: two columns, "Let's work together" + the details. */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr);gap:clamp(36px,6vw,96px);align-items:end;}
.contact-intro h2{font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.05;margin-bottom:18px;max-width:14ch;}
.contact-intro p{font-weight:300;font-size:1.05rem;max-width:44ch;color:#fff;}
.contact-details{display:flex;flex-direction:column;gap:16px;align-items:flex-start;}
.contact-details a{font-size:1.1rem;}
@media (max-width:780px){.contact-grid{grid-template-columns:minmax(0,1fr);align-items:start;}}

/* v20 fixes (2026-10-11)
   - About portrait: the img has width/height attributes (v19), so without
     height:auto the 20%-narrower column squashed it. Keep its own shape.
   - Homepage slideshow: always cross-fade. The reduced-motion rule above
     turns every transition off, and Robert's PC (Windows animations off)
     reports reduced motion, so the photos were switching abruptly. A slow
     opacity fade is gentle, so it stays on for everyone (decided 2026-10-03). */
.about-media img{height:auto !important;}
.photo-frame img{transition:opacity 1.5s ease !important;}
.photo-caption{transition:opacity .75s ease !important;}