/* ------------------------------------------------------------------
   Font Pulse principles, applied to the portfolio.

   1. True black and white. One signal colour, used only for emphasis.
   2. Hairline rules instead of boxes: no borders, radii or shadows.
   3. One interface family. Size and weight carry the hierarchy.
   4. The wordmark is a specimen: set large, tight, on its own line.
   5. Links and buttons are type with a rule under them.
   6. Figures are tabular. Headings balance. Paragraphs never widow.
   ------------------------------------------------------------------ */

:root{
  --ink:#000000;
  --paper:#ffffff;
  --muted:#6b6b6b;
  --rule:#dcdcdc;
  --hair:#ececec;
  --signal:#c33e23;

  /* fold the old palette into the new one */
  --accent:var(--signal);
  --acid:var(--ink);
  --cyan:var(--ink);
  --line:var(--rule);
  --support:var(--paper);
  --support-warm:var(--paper);
}

/* --- 1. True black and white ------------------------------------- */

html,body{background:var(--paper);color:var(--ink)}
body{-webkit-font-smoothing:antialiased;font-feature-settings:"kern" 1}

.eyebrow,.meta,.card-meta,figcaption,.film-label,.viewer-notice{color:var(--muted)!important}

/* The signal is reserved. It marks the wordmark and live state, nothing else. */
.portfolio-logo .wm-red{color:var(--signal)!important}
a:hover,button:hover .text-link,.text-link:hover{color:var(--signal)}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}

/* --- 2. Hairline rules, not boxes -------------------------------- */

.card-image,.card-image img,.lab-card,.portrait,.portrait img,.provenance,
dialog,button,.button,input,select,textarea,.film-image,.film-frame,
.art-display img,.quick-overview,.piece,.collection-card,
.more-work>summary,.experience summary,.project-card{
  border-radius:0!important;
  box-shadow:none!important;
}


.more-work>summary,.experience summary{
  border:0!important;
  border-top:1px solid var(--ink)!important;
  border-bottom:1px solid var(--ink)!important;
  padding-left:0;
  padding-right:0;
}



/* --- 3. One family, hierarchy by size ---------------------------- */

h1,h2,h3,h4{font-weight:500!important;letter-spacing:-.02em;margin:0}
h2{font-size:clamp(34px,3.6vw,52px);line-height:1}
h3{font-size:clamp(22px,2vw,30px);line-height:1.05}
p,li,dd{font-size:16px;line-height:1.55}

/* --- 4. The wordmark is a specimen ------------------------------- */

.header .portfolio-logo{
  font-weight:500!important;
  letter-spacing:-.035em;
  line-height:.86;
  white-space:nowrap;
  text-decoration:none;
}

/* --- 5. Links and buttons are type with a rule ------------------- */

.header nav a,.header #open-wall,.header .resume,.header button,
.header-portfolio,.contact-links>a,.contact-links>button,
.text-link,footer a{
  background:none!important;
  border:0!important;
  border-radius:0!important;
  border-bottom:1px solid transparent!important;
  padding-left:0!important;
  padding-right:0!important;
  color:var(--ink)!important;
  text-decoration:none;
}
.header nav a:hover,.header .resume:hover,.header button:hover,
.header-portfolio:hover,.contact-links>a:hover,.contact-links>button:hover,
.text-link:hover,footer a:hover{
  border-bottom-color:var(--ink)!important;
}
[aria-current="page"],[aria-pressed="true"]{
  border-bottom:2px solid var(--signal)!important;
}

/* --- 6. Figures, balance, and no widows -------------------------- */

h1,h2,h3,h4,.lede,.hero h1{text-wrap:balance}
p,li,dd,figcaption{text-wrap:pretty}
.fig,.count,time,.tech dd,[class*="num"]{font-variant-numeric:tabular-nums}

/* --- Dark ground ------------------------------------------------- */

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#ffffff;
    --paper:#000000;
    --muted:#9b9b9b;
    --rule:#2b2b2b;
    --hair:#1c1c1c;
    --signal:#e4573a;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ink:#ffffff;--paper:#000000;--muted:#9b9b9b;
  --rule:#2b2b2b;--hair:#1c1c1c;--signal:#e4573a;color-scheme:dark;
}

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

/* ------------------------------------------------------------------
   Project viewer: title, then a small spec button. Navigation sits
   at the right with the close control. Thumbnails stay one column.
   ------------------------------------------------------------------ */

.viewer-toolbar{gap:12px}
.viewer-toolbar h2{order:0;flex:0 1 auto}

/* Spec sheet: a small box directly after the name, not a banner. */
.viewer-toolbar #company-spec,
.viewer-toolbar .viewer-spec{
  order:1;
  width:auto!important;
  flex:0 0 auto;
  margin:0!important;
  padding:5px 10px!important;
  min-height:0!important;
  font:500 11px/1.2 var(--mono)!important;
  border:1px solid var(--rule)!important;
  background:none!important;
  color:var(--ink)!important;
  white-space:nowrap;
}
.viewer-toolbar #company-spec:hover,
.viewer-toolbar .viewer-spec:hover{
  border-color:var(--ink)!important;
  background:none!important;
  color:var(--signal)!important;
}

/* Previous and next ride next to the close control. */
.viewer-toolbar .viewer-project-nav{order:2;margin-left:auto;gap:4px}
.viewer-toolbar .viewer-project-nav button{
  padding:4px 8px!important;
  min-height:0!important;
  font:500 10px/1.2 var(--mono)!important;
  border:1px solid var(--rule)!important;
}
.viewer-toolbar .viewer-project-nav button:hover{
  border-color:var(--ink)!important;
  background:none!important;
  color:var(--signal)!important;
}
.viewer-toolbar #close-project{order:3;margin-left:4px!important;font-size:18px}

/* One column of smaller thumbnails. */
.art-sidebar .art-filmstrip{
  grid-template-columns:minmax(0,1fr)!important;
  gap:8px!important;
  max-width:188px;
}
.art-sidebar .film-image{aspect-ratio:3/2!important}
.art-sidebar .film-label{font-size:10px!important;padding:2px 5px!important}

/* ------------------------------------------------------------------
   Studio tools: identical treatment to the work grid above — a 3:2
   tile of the site's own hero, filled, 5px corners, and the name on
   a dark plate in the lower right. No description copy.
   ------------------------------------------------------------------ */

.section-heading .eyebrow,.collection-heading .eyebrow{display:none!important}
.section-heading{margin-bottom:28px!important;gap:24px!important}

.lab-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:24px!important;
  align-items:start!important;
}

#lab .lab-card{
  position:relative!important;
  display:block!important;
  min-height:0!important;
  height:auto!important;
  width:100%;
  aspect-ratio:3/2!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:5px!important;
  overflow:hidden!important;
  background-color:var(--hair)!important;
  background-position:center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  text-decoration:none;
}

/* Only the name shows. */
#lab .lab-card .eyebrow,
#lab .lab-card p,
#lab .lab-card .text-link,
#lab .lab-card h3 span,
#lab .lab-card .type-demo,
#lab .lab-card .year-demo,
#lab .lab-card .kit-demo,
#lab .lab-card .kevns-demo,
#lab .lab-card .kevns-ear{
  display:none!important;
}

/* The name plate, exactly as the work grid sets it. */
#lab .lab-card h3{
  position:absolute!important;
  right:0!important;
  bottom:0!important;
  top:auto!important;
  z-index:2;
  width:auto!important;
  max-width:92%;
  min-height:0!important;
  margin:0!important;
  padding:8px 12px!important;
  background:rgba(0,0,0,.68)!important;
  border-radius:5px 0 5px 0!important;
  color:#fff!important;
  font:700 18px/1.2 Anaheim,Arial,sans-serif!important;
  letter-spacing:0!important;
  text-align:left;
}
#lab .lab-card:hover h3{background:var(--signal)!important}

#lab .lab-card.ad-studio{background-image:url(work/lab-shift.webp)!important}
#lab .lab-card.rag{background-image:url(work/lab-labs.webp)!important}
#lab .lab-card.born{background-image:url(work/lab-born.webp)!important}
#lab .lab-card.kit{background-image:url(work/lab-kit.webp)!important}
#lab .lab-card.kevns{background-image:url(work/lab-kevns.webp)!important}
#lab .lab-card.franklynn{background-image:url(work/lab-franklynn.webp)!important}
#lab .lab-card.stillhere{background-image:url(work/lab-stillhere.webp)!important}
#lab .lab-card.pulse-product{background-image:url(work/lab-pulse.webp)!important}

@media (max-width:1100px){.lab-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media (max-width:820px){.lab-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:24px!important}}
@media (max-width:520px){.lab-grid{grid-template-columns:1fr!important}}

/* ------------------------------------------------------------------
   Narrow views: keep the grids at two or more columns so the art
   stays small instead of running the full width of the panel.
   ------------------------------------------------------------------ */

@media (max-width:900px){
  .card-grid,.work-group-grid,.collection-grid,.lab-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:24px!important;
  }
}
@media (max-width:560px){
  .card-grid,.work-group-grid,.collection-grid,.lab-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:24px!important;
  }
  #lab .lab-card h3,
  .project-card .card-copy h3,
  .collection-card .card-copy h3{
    font-size:12px!important;
  }
  #lab .lab-card h3,
  .project-card .card-copy,
  .collection-card .card-copy{
    padding:5px 8px!important;
  }
}

/* No horizontal rules between sections, headings or cards. */
.work-section,.concept-section,.lab-section,
.collection-section,.practice-section,
.section-heading,.work-group-heading,
.lab-card,.collection-card,.project-card,
.quick-overview,.piece,.provenance,.closing-work{
  border-top:0!important;
  border-bottom:0!important;
}

/* Sections were carrying 110px of padding above the heading. */
.lab-section,.concept-section,.collection-section,.practice-section,.closing-work{
  padding-top:48px!important;
  padding-bottom:56px!important;
}
.section-heading h2,.collection-heading h2{margin-top:0!important}
.section-heading{margin-bottom:22px!important}

/* Header: the three links need room between them. */
.header{gap:30px!important}
.header nav{gap:30px!important}
.header .header-portfolio,.header .resume{margin-left:0!important}

/* ------------------------------------------------------------------
   Back to top: a small white disc.
   ------------------------------------------------------------------ */
.floating-top{
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  min-height:42px!important;
  right:16px!important;
  bottom:16px!important;
  padding:0!important;
  gap:0!important;
  background:#fff!important;
  border:1px solid var(--rule)!important;
  border-radius:50%!important;
  color:var(--ink)!important;
  box-shadow:0 2px 8px rgba(0,0,0,.08)!important;
}
.floating-top span{font:16px/1 Arial!important}
.floating-top small{font:7px/1.1 var(--mono)!important;letter-spacing:.02em}
.floating-top:hover{background:#fff!important;border-color:var(--ink)!important;color:var(--signal)!important}

/* The provenance note is hidden, so it should not hold space. */
.provenance{
  display:none!important;
}
.lab-section{padding-bottom:36px!important}
.practice-section{padding-top:36px!important}

/* One gap value across every grid. */
#featured,#concept-grid,#client-grid,#collection-grid,
.card-grid,.work-group-grid,.collection-grid,.lab-grid{
  gap:24px!important;
}