/*
   CHUCK COPELAND - CSS EDITING GUIDE

   Use Ctrl+F to find a numbered section or a selector below.

   01. GLOBAL BASE         Fonts, colors, default text, links and images
   02. SHARED HEADER       Page width, header logos and top navigation
   03. INTRODUCTIONS       Portfolio headings + shared introductory text
   04. PORTFOLIO GALLERIES Section links, headings and column layouts
   05. SHARED WORK CARDS   Project/photo/video cards and their text
   06. PORTFOLIO ABOUT     About sections on the three portfolios
   07. SHARED FOOTER       Contact information and social links
   08. HOMEPAGE ONLY       Home heading, intro, three tiles and note
   09. ITEM PAGES ONLY     Individual project/photo/video page layouts
   10. SHARED VIEWER       The photo/video popup
   11. GLOBAL UTILITIES   Screen-reader text, skip link and hidden elements
   12. RESPONSIVE         Large-screen, tablet and phone overrides
   13. REDUCED MOTION     Respect the visitor's motion preference

   HOW TO READ THE SCOPE LABELS
   GLOBAL: defaults that can affect the whole site.
   SHARED: a component used on more than one page.
   HOMEPAGE / PORTFOLIO / ITEM: where the current templates use a component.
   BRAND OVERRIDE: a change for one brand or one homepage tile.
   Comments describe usage; the CSS selector determines what actually matches.

   PAGE SELECTORS YOU CAN USE FOR TARGETED EXPERIMENTS
   body.home                         Homepage (/)
   body.portfolio                    All three portfolio landing pages
   body.portfolio.brand-personal     Personal portfolio (/personal)
   body.portfolio.brand-weather      Weather portfolio (/weather)
   body.portfolio.brand-cats         Cats portfolio (/cats)
   body.item                         All individual portfolio item pages
   body.item.brand-weather           Only Weather's individual item pages

   The homepage also has body.brand-personal, so that class alone is NOT
   exclusive to /personal. Use body.portfolio.brand-personal for that page.
   The identity-* classes belong to the HOMEPAGE TILES; the brand-* classes
   belong to the PAGE BODY. For example, .identity-weather styles a home tile,
   while body.brand-weather scopes changes to Weather pages.

   COMMON PLACES TO EXPERIMENT
   .intro                    Shared intro text on Home + all portfolios
   .home-intro .intro        Homepage intro text only
   .portfolio-intro .intro   Intro text on the three portfolios only
   .brand-art                Homepage tile's logo/background area
   .brand-tile-caption       Homepage tile's description and Explore link
   .work-card                A gallery/item card, not a homepage tile
   .site-logo                Header images, not the homepage tile images

   Base rules come first; responsive overrides are in section 12. Check both
   when experimenting. At equal specificity, a later matching rule wins.
   Keep more-specific selectors such as .home-intro .intro in mind too.
   Change one value at a time, save, refresh, then check a narrow window.
*/

/* ========================================================================== 
   01. GLOBAL BASE - available throughout the site
   ========================================================================== */

/* GLOBAL: locally hosted fonts and shared color/type variables. */
/* Active fonts are preloaded in the head; wait briefly instead of showing fallback text. */
@font-face {
  font-family:Oswald;
  src:url('../fonts/oswald-latin-400-normal.woff2') format('woff2');
  font-weight:400;
  font-display:block
}
@font-face {
  font-family:Roboto;
  src:url('../fonts/roboto-latin-400-normal.woff2') format('woff2');
  font-weight:400;
  font-display:block
}
@font-face {
  font-family:Montserrat;
  src:url('../fonts/Montserrat[wght].ttf') format('truetype');
  font: weight 100px 900px;
  font-display:block
}
@font-face {
  font-family:Montserrat-Italic;
  src:url('../fonts/Montserrat-Italic[wght].ttf') format('truetype');
  font: weight 100px 900px;
  font-display:block
}
:root {
  color-scheme:dark;
  --bg:#0b0b0c;
  --text:#eeeef0;
  --muted:#b3b4bd;
  --line:#35363b;
  --accent:#ffda24;
  --heading:Oswald,'Arial Narrow',sans-serif;
  --body:Roboto,Arial,sans-serif;
  --altText:Montserrat,Arial,sans-serif;
  --altItalic:Montserrat-Italic,Arial,sans-serif;
  --heading-weight:400;
  --body-weight:400;
  --heading-axes:normal;
  --body-axes:normal;
  --fade-gradient: linear-gradient(
    to right,
    #35363b 0%,
    rgba(53, 54, 59, 0.5) 40%,
    transparent 100%
  );
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:24px
}
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:var(--body-weight) 16px/1.6 var(--body);
  font-variation-settings:var(--body-axes);
  font-optical-sizing:auto
}
/* BRAND OVERRIDES: accents inherited by each brand's portfolio and item pages. */
body.brand-weather {
  --accent:#84d4f4
}
body.brand-cats {
  --accent:#ddff00
}
/* GLOBAL: links, keyboard focus, buttons, images and default heading sizes. */
a {
  color:inherit;
  text-decoration:none
}
a:hover {
  color:var(--accent)
}
a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:5px
}
button {
  font:inherit;
  color:inherit;
  cursor:pointer
}
img {
  display:block;
  max-width:100%;
  height:auto
}
h1,h2,h3,p {
  margin:0
}
h1,h2 {
  font-family:var(--heading);
  font-weight:var(--heading-weight);
  line-height:1.18
}
/* Shared heading family, including text fallbacks and navigation. */
h1,h2,.wordmark,.brand-nav,.brand-type,.placeholder {
  font-weight:var(--heading-weight);
  font-variation-settings:var(--heading-axes)
}
h1 {
  font-size:clamp(2.55rem,5vw,4.1rem);
  letter-spacing:-.025em
}
h2 {
  font-size:1.7rem
}
h3 {
  font-size:.96rem;
  font-weight:600;
  line-height:1.5
}
/* ========================================================================== 
   02. SHARED HEADER - all pages
   ========================================================================== */

/* SHARED: the outer page width and spacing around the header. */
.shell {
  max-width:1380px;
  margin:auto;
  padding:0 clamp(22px,4.7vw,66px)
}
.site-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  padding:30px 0 27px;
  border-bottom:1px solid #222328
}
/* SHARED FALLBACK: text header used when no selected header image exists.
   The name uses Configuration > Site > Title; the tagline uses Home's heading. */
.wordmark {
  font:var(--heading-weight) clamp(1.5rem,2.5vw,2.2rem)/1.1 var(--heading);
  font-variation-settings:var(--heading-axes);
  letter-spacing:.045em;
  white-space:nowrap
}
.wordmark span {
  color:var(--accent)
}
.wordmark small {
  display:block;
  font:var(--body-weight) 10px/1.2 var(--body);
  font-variation-settings:var(--body-axes);
  letter-spacing:.24em;
  margin-top:9px;
  color:#aaa
}
/* SHARED: uploaded header logos. "logo-home" means the link leads home;
   it does not limit these rules to the homepage. */
.logo-home {
  display:block;
  min-width:0;
  max-width:100%;
}
.site-logo {
  width:310px;
  height:65px;
  max-width:100%;
  object-fit:contain;
  object-position:left center;
}
/* SHARED: Home / Personal / Weather / Cats navigation.
   Paired mobile/desktop type sizes scale from 600px to 1200px at a 16px root.
   The homepage heading and wordmark retain their separate sizing rules. */
.brand-nav {
  display:flex;
  flex-wrap:wrap;
  min-width:0;
  align-items:center;
  gap:clamp(16px,2.8vw,34px);
  font:var(--heading-weight) clamp(.88rem,calc(.8225rem + .153333vw),.9375rem) var(--heading);
  font-variation-settings:var(--heading-axes);
  letter-spacing:.075em;
  text-transform:uppercase
}
.brand-nav a {
  padding:12px 0;
  max-width:100%;
  overflow-wrap:anywhere;
  border-bottom:2px solid transparent;
  border-top:2px solid transparent;
}
.brand-nav [aria-current] {
  color:var(--accent);
  border-color:var(--accent)
}
/* SHARED: enabled by navigation.js; links stay visible without JavaScript. */
.nav-toggle {
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:10px 12px;
  border:1px solid var(--line);
  background:transparent;
  font:var(--heading-weight) .875rem/1.25 var(--heading);
  font-variation-settings:var(--heading-axes)
}
.nav-toggle:hover,.nav-toggle[aria-expanded="true"] {
  border-color:var(--accent);
  color:var(--accent)
}
/* ========================================================================== 
   03. INTRODUCTIONS - scope changes within this section
   ========================================================================== */

/* PORTFOLIOS ONLY: top section and main heading on Personal, Weather and Cats. */
.portfolio-intro {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:35px;
  padding:30px 0 16px
}
.portfolio-intro .intro {
  font-size:clamp(0.8rem,calc(.65rem + .933333vw),1rem);
}
.portfolio-intro h1 {
  max-width:1200px;
  font-size:clamp(2.8rem, calc(2rem + 2.5vw), 4.1rem);
  text-transform: uppercase
}
/* HOME + PORTFOLIOS: main headings zoom in once on page load. */
@keyframes intro-heading-zoom-in {
  from {
    opacity:0;
    transform:scale(.75)
  }
  to {
    opacity:1;
    transform:scale(1)
  }
}
@media(prefers-reduced-motion:no-preference) {
  body.home .home-intro h1,
  body.portfolio .portfolio-intro h1 {
    transform-origin:left center;
    animation:intro-heading-zoom-in 750ms ease-out
  }
}
/* SHARED: small label and intro paragraph on Home AND all three portfolios.
   The homepage's more-specific intro overrides are in section 08. */
.eyebrow {
  font-size:.7rem;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:10px
}
.intro {
  font-size:clamp(1rem,calc(.65rem + .933333vw),1.35rem);
  color:#cbcbd0;
  margin-top:10px;
  max-width:760px;
  line-height:1.5
}
/* OPTIONAL COMPONENT: .brand-logo is not used by the current Twig templates.
   For visible logos, edit .site-logo (header) or .brand-art img (home tiles). */
.brand-logo {
  width:200px;
  height:90px;
  object-fit:contain
}
/* ========================================================================== 
   04. PORTFOLIO GALLERIES - Personal, Weather and Cats landing pages
   ========================================================================== */

/* PORTFOLIOS ONLY: Web & Apps / Video / Photography / About / Contact links. */
.section-nav {
  display:flex;
  gap:0;
  flex-wrap:wrap;
  margin:0 0 27px;
  color:#c3c3cb;
  font-size:clamp(.76rem,calc(.67rem + .24vw),.85rem);
  text-transform: uppercase
}
.section-nav a {
  padding:5px 18px
}
.section-nav a:first-child {
  padding-left:0
}
.section-nav a+a {
  border-left:1px solid var(--line)
}
/* PORTFOLIOS ONLY: section spacing, headings and item counts. */
.gallery-section {
  margin-bottom:33px
}
.section-heading {
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:15px;
  background:var(--fade-gradient);

}
.section-heading h2 {
  border-left:4px solid var(--accent);
  padding:5px 15px;
  text-transform:uppercase;
  font-size:clamp(1.4rem,calc(1.25rem + .4vw),1.55rem);
  letter-spacing:.045em
}
.section-heading>span {
  font-size:11px;
  letter-spacing:.1em;
  color:#85858d
}
/* PORTFOLIOS ONLY: gallery columns. Homepage tiles use .brand-grid instead. */
.gallery-grid {
  display:grid;
  gap:22px
}
.grid-web {
  grid-template-columns:repeat(2,minmax(0,1fr))
}
.grid-video {
  grid-template-columns:repeat(3,minmax(0,1fr))
}
.grid-photography {
  grid-template-columns:repeat(4,minmax(0,1fr))
}
/* ========================================================================== 
   05. SHARED WORK CARDS - portfolio galleries AND individual item pages
   ========================================================================== */

/* SHARED: card containers, preview images, play buttons and action links.
   Selectors beginning .grid-web or .grid-photography target a gallery section.
   Individual item-page preview overrides are in section 09. */
.work-card {
  min-width:0;
  scroll-margin-top:26px
}
.work-card:target {
  outline:1px solid var(--accent);
  outline-offset:9px
}
.media-link {
  display:block;
  position:relative;
  aspect-ratio:16/9;
  background:#16171c;
  border:1px solid #44464d;
  overflow:hidden
}
.media-link img {
  width:100%;
  height:100%;
  object-fit:cover
}
.grid-web .media-link img {
  object-position:top
}
.grid-photography .media-link {
  aspect-ratio:5/4
}
.media-link:hover,a.media-link:focus-visible {
  border-color:var(--accent)
}
/* TILES, MEDIA, SECTION NAV + SOCIALS: zoom the whole link, including its border. */
@media(prefers-reduced-motion:no-preference) {
  .site-logo,
  .brand-nav a,
  body.home .brand-tile,
  a.media-link,
  .section-nav a,
  .socials a {
    transition:transform 220ms ease;
  }

  body.home .brand-tile:focus-visible,
  a.media-link:focus-visible {
    transform:scale(1.03);
  }

  .brand-nav a:focus-visible,
  .section-nav a:focus-visible,
  .socials a:focus-visible {
    transform:scale(1.15);
  }

  .logo-home:focus-visible .site-logo {
    transform:scale(1.10);
  }
}

@media(hover:hover) and (prefers-reduced-motion:no-preference) {
  body.home .brand-tile:hover,
  a.media-link:hover {
    transform:scale(1.03);
  }

  .brand-nav a:hover,
  .section-nav a:hover,
  .socials a:hover {
    transform:scale(1.15);
  }

  .logo-home:hover .site-logo {
    transform:scale(1.10);
  }
}
.play-icon {
  position:absolute;
  inset:50% auto auto 50%;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  padding-left:3px;
  border:2px solid #fff;
  border-radius:50%;
  background:#0b0b0c88;
  color:#fff;
  font-size:21px;
  box-shadow:0 2px 12px #0005
}
/* SHARED: card title, type label and short description. */
.card-meta {
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:5px 10px;
  margin-top:10px
}
.card-meta h3 {
  font-size:clamp(.9rem,calc(.84rem + .16vw),.96rem)
}
/* GALLERY CARDS: the title opens the item's own page and supporting details. */
.card-meta h3 a:hover,
.card-meta h3 a:focus-visible {
  text-decoration:underline
}
.card-meta>span {
  font-size:.75rem;
  color:var(--muted);
  border-left:1px solid #666;
  padding-left:10px
}
.card-description {
  color:var(--muted);
  font-size:.82rem;
  line-height:1.5;
  margin-top:4px;
  max-width:65ch
}
/* PHOTOGRAPHY GALLERIES ONLY: description size under the photography cards. */
.grid-photography .card-description {
  font-size:clamp(.76rem,calc(.7rem + .16vw),.82rem)
}
/* SHARED: Visit website / Enlarge / Play video, share link and missing-media text. */
.card-actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:4px;
  min-height:30px
}
.action {
  font-size:.88rem;
  color:var(--accent)
}
.permalink {
  margin-left:auto;
  font-size:.85rem;
  color:#a0a0aa;
  padding:2px 8px
}
.placeholder {
  height:100%;
  display:grid;
  place-items:center;
  padding:24px;
  color:#c7c7d0;
  font-family:var(--heading);
  font-size:1.6rem
}
.unavailable {
  color:var(--muted);
  font-size:.85rem
}
/* ========================================================================== 
   06. PORTFOLIO ABOUT - Personal, Weather and Cats landing pages
   ========================================================================== */
.about {
  border-bottom:1px solid var(--line);
  border-top:1px solid var(--line);
  padding:15px 0;
  margin-bottom:33px
}
.about h2 {
  border-left: 4px solid var(--accent);
  padding: 5px 15px;
  text-transform: uppercase;
  font-size: clamp(1.4rem, calc(1.25rem + .4vw), 1.55rem);
  letter-spacing: .045em;
  margin-bottom:10px;
  background:var(--fade-gradient);
}
.about>div {
  color:#c6c6ce;
  max-width:950px;
  font-size: clamp(1rem, calc(0.891rem + 0.545vw), 1.3rem);
}
.about p+p {
  margin-top:12px
}
.about a {
  text-decoration:underline;
  text-underline-offset:3px
}
/* ========================================================================== 
   07. SHARED FOOTER - all pages; social icons appear where profiles are set
   ========================================================================== */
.site-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  padding:30px 0 35px;
  color:#bdbdc5;
  font-size:.84rem;
  border-top:1px solid var(--line);

}
.site-footer p {
  font-size:.72rem;
  color:#91919b;
  margin-top:8px
}
.socials {
  display:flex;
  gap:12px;
  flex-wrap:wrap
}
.socials a {
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:1px solid #35353d;
  border-radius:50%
}
.socials img {
  filter:brightness(0) invert(1);
  opacity:.8
}
.socials a:hover {
  border-color:var(--accent);
  background:#25252c
}
/* ========================================================================== 
   08. HOMEPAGE ONLY - introduction, three portfolio tiles and closing note
   ========================================================================== */

/* HOME ONLY: heading and intro. These override the shared h1 / .intro rules. */
.home-intro {
  padding:30px 0 38px
}
.home-intro h1 {
  max-width:1200px;
  font-size:clamp(2.8rem, calc(2rem + 2.5vw), 4.1rem);
  text-transform: uppercase
}
.home-intro .intro {
  font-size:clamp(0.8rem,calc(.65rem + .933333vw),1rem);
}
/* HOME ONLY: width and spacing of the three-card row, plus shared tile styling. */
.brand-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  max-width:1100px;
  margin-inline:auto;
}
.brand-tile {
  border:1px solid var(--line);
  background:#111115
}
/* HOME TILE BRAND OVERRIDES: each tile's background image. */
.brand-tile.identity-personal .brand-art {
  background-image: url('/user/pages/02.personal/cccom-bg.webp');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.brand-tile.identity-weather .brand-art {
  background-image: url('/user/pages/03.weather/wx-bg.webp');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.brand-tile.identity-cats .brand-art {
  background-image: url('/user/pages/04.cats/cats-hero-fallback.webp');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
/* HOME ONLY: hover border, logo area, logo images and fallback text. */
.brand-tile:hover,.brand-tile:focus-visible {
  border-color:var(--tile-accent,var(--accent))
}
.brand-art {
  height: 200px;
  padding:28px;
  display:grid;
  place-items:center;
  background:radial-gradient(ellipse at 50% 110%,#ffda240a,transparent 75%)
}
.brand-art img {
  width:100%;
  height:140px;
  object-fit:contain
}
.brand-type {
  font:var(--heading-weight) 2.3rem var(--heading);
  font-variation-settings:var(--heading-axes);
  color:var(--tile-accent,var(--accent));
  overflow-wrap:anywhere
}
/* HOME TILE BRAND OVERRIDES: accents for tile borders, text and Explore links. */
.identity-weather {
  --tile-accent:#84d4f4
}
.identity-cats {
  --tile-accent:#ddff00
}
/* HOME ONLY: description and Explore link beneath each logo. */
.brand-tile-caption {
  border-top:1px solid #282830;
  padding:22px
}
.brand-tile-caption p {
  font-size:.88rem;
  color:var(--muted);
  min-height:44px
}
.brand-tile-caption>span {
  display:flex;
  justify-content:space-between;
  color:var(--tile-accent,var(--accent));
  font-size:.9rem;
  margin-top:20px
}
/* HOME ONLY: closing paragraph and the home footer's extra top border. */
.home-note {
  border-bottom:1px solid var(--line);
  border-top:1px solid var(--line);
  max-width:1400px;
  color:#a5a5af;
  padding:15px 0;
  margin-bottom:33px;
  font-size: clamp(1.4rem, calc(1.25rem + .4vw), 1.55rem);

}
.home .site-footer {
  border-top:1px solid var(--line)
}
/* ========================================================================== 
   09. ITEM PAGES ONLY - e.g. /cats/stormy-on-the-quilt
   ========================================================================== */

/* ITEM ONLY: back link, content width and larger uncropped card previews. */
.back-link {
  margin:30px 0;
  color:var(--accent)
}
.single-item {
  max-width:1000px;
  margin:25px 0
}
.single-item .media-link {
  aspect-ratio:auto
}
.single-item .media-link img {
  max-height:70vh;
  object-fit:contain
}
/* ========================================================================== 
   10. SHARED VIEWER - photo/video popup opened from gallery or item cards
   ========================================================================== */
.viewer {
  padding:0;
  border:1px solid #53545f;
  background:#101114;
  color:var(--text);
  width:min(1120px,94vw);
  max-width:94vw;
  max-height:94dvh;
  overflow:auto
}
.viewer::backdrop {
  background:#000e
}
.viewer-bar,.viewer-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:14px 20px
}
.viewer-bar h2 {
  font-size:clamp(1.15rem,calc(.9rem + .666667vw),1.4rem)
}
.viewer-close {
  border:1px solid #6d6d78;
  background:#22232a;
  padding:7px 13px;
  white-space:nowrap
}
.viewer-close span {
  margin-left:8px
}
.viewer-content {
  display:grid;
  place-items:center;
  background:#070708
}
.viewer-content img {
  width:100%;
  height:auto;
  max-height:72dvh;
  object-fit:contain
}
.viewer-content video,.viewer-content iframe {
  width:100%;
  max-height:70dvh;
  aspect-ratio:16/9;
  border:0
}
.viewer-bottom {
  font-size:.88rem;
  color:#c2c2cd;
  align-items:start
}
.viewer-external {
  color:var(--accent);
  white-space:nowrap
}
body:has(.viewer[open]) {
  overflow:hidden
}
/* ========================================================================== 
   11. GLOBAL UTILITIES - accessibility and visibility helpers
   ========================================================================== */
.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
}
.skip-link {
  position:fixed;
  top:10px;
  left:10px;
  z-index:20;
  padding:10px 18px;
  background:var(--accent);
  color:#111;
  transform:translateY(-180%)
}
.skip-link:focus {
  transform:translateY(0)
}
[hidden] {
  display:none!important
}
/* ========================================================================== 
   12. RESPONSIVE - overrides for the components described above

   These rules apply in addition to the base styles. At 600px and below,
   BOTH the 850px and 600px blocks match. The labels still describe which
   pages/components are affected; a media query does not select a page.
   ========================================================================== */

/* LARGE SCREENS: 1600px and wider. */
@media(min-width:1600px) {
  /* SHARED: outer page width. */
  .shell {
    max-width:1450px
  }
  /* SHARED WORK CARDS: preview proportions. */
  .media-link {
    aspect-ratio:16/9
  }
}
/* TABLET AND SMALLER: 850px and narrower, including phones. */
@media(max-width:850px) {
  /* SHARED HEADER: compact toggle with links overlaid below the header. */
  .site-header {
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:16px
  }
  .wordmark {
    min-width:0;
    white-space:normal;
    overflow-wrap:anywhere
  }
  .brand-nav {
    grid-column:1/-1;
    width:100%;
    flex-direction:column;
    align-items:stretch;
    gap:0
  }
  .brand-nav a {
    font-size:x-large;
    min-height:44px;
    padding:12px 0;
    text-align:center;
  }
  .brand-nav a:hover,
  .brand-nav a:focus-visible {
  transform:none;
  }
  /* Keep the no-JavaScript navigation in normal flow. */
  .nav-toggle:not([hidden]) + .brand-nav {
    position:absolute;
    top:100%;
    inset-inline:0;
    z-index:10;
    height:70dvh;
    overflow-y:auto;
    padding:8px 16px;
    border:2px solid var(--line);
    background:rgb(25 25 26 / 90%);
    box-shadow:0 12px 24px #0008
  }
  /* OPTIONAL COMPONENT: currently unused standalone logo. */
  .brand-logo {
    width:150px
  }
  /* PORTFOLIOS ONLY: photography gallery columns. */
  .grid-photography {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  /* HOME ONLY: tile spacing, logo-area height and caption padding. */
  .brand-grid {
    gap:15px
  }
  .brand-art {
    height:190px;
    padding:20px
  }
  .brand-type {
    font-size:1.65rem
  }
  .brand-tile-caption {
    padding:16px
  }
}
/* PHONES: 600px and narrower. */
@media(max-width:600px) {
  /* SHARED HEADER: phone spacing and text wordmark fallback. */
  .site-header {
    padding:23px 0 14px
  }
  .wordmark {
    font-size:clamp(1.2rem,4.5vw,1.9rem)
  }
  .wordmark small {
    display:none
  }
  /* PORTFOLIOS ONLY: introduction spacing. */
  .portfolio-intro {
    padding-top:26px;
    gap:12px
  }
  /* OPTIONAL COMPONENT: currently unused standalone logo. */
  .brand-logo {
    display:none
  }
  /* PORTFOLIOS ONLY: section navigation and gallery layouts. */
  .section-nav {
    margin-bottom:24px;
    row-gap:8px
  }
  .section-nav a {
    padding:3px 10px
  }
  .grid-web,.grid-video {
    grid-template-columns:1fr
  }
  .gallery-grid {
    gap:24px
  }
  .grid-photography {
    gap:23px 13px
  }
  .grid-photography .card-meta>span {
    display:none
  }
  .gallery-section {
    margin-bottom:30px
  }
  /* SHARED FOOTER: stack contact and social links. */
  .site-footer {
    align-items:flex-start;
    flex-direction:column;
    gap:20px
  }
  .socials {
    gap:11px
  }
  /* HOME ONLY: heading spacing, stacked tiles and closing note. */
  .home-intro {
    padding:30px 0
  }
  .home-intro h1,.portfolio-intro h1 {
    font-size:clamp(2rem,8.5vw,2.8rem);
    overflow-wrap:anywhere;
    text-transform: uppercase
  }
  .brand-grid {
    grid-template-columns:1fr
  }
  .brand-art {
    height:180px;
    padding:24px
  }
  .brand-art img {
    height:130px
  }
  .brand-type {
    font-size:2.25rem
  }
  .brand-tile-caption p {
    min-height:0
  }
  .brand-tile-caption>span {
    margin-top:12px
  }
  .home-note {
    padding:27px 0 36px
  }
  /* SHARED VIEWER: title/caption spacing and close button. */
  .viewer-bar,.viewer-bottom {
    padding:12px;
    gap:12px
  }
  .viewer-bottom {
    flex-direction:column
  }
  .viewer-close {
    font-size:.8rem
  }
}
/* ========================================================================== 
   13. REDUCED MOTION - global visitor preference, independent of screen size
   ========================================================================== */
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
}
/* 404 PAGE */
body.error {
  min-height: 100vh;
  background:
    linear-gradient(
      rgba(0, 0, 0, 0.2),
      rgba(0, 0, 0, 0.5)
    ),
    var(--bg) url('/user/media/404/404.gif')
      no-repeat center / cover;
}

body.error .error-page {
  max-width: 850px;
  margin-inline: auto;
  padding: 4rem 0 5rem;
  text-align: center;
}

body.error .error-page .eyebrow {
  font-size: clamp(0.8rem, calc(0.65rem + 1vw), 3rem);
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}

body.error .error-page h1 {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  text-shadow: #000 11px 12px 2px, #000 6px 7px 3px;}

body.error .error-page .intro {
  max-width: 50ch;
  margin: 1.25rem auto 2rem;
}

body.error .error-return {
  display: inline-block;
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--accent);
  border-radius: 6px;
  color: var(--accent);
}

body.error .error-return:hover {
  background: var(--accent);
  color: var(--bg);
}