/* STYLING.CSS — classes only: utilities + components */

/* Assumes tokens exist in @layer base (:root), e.g.:
   --space-1..5, --radius-1..2, --color-subtle, --color-fg, --color-bg, --link, --link-hover, --bp-md, etc.  */

/* -------------------- UTILITIES -------------------- */
@layer utilities {

   /* Layout primitives */
   .main {
      overflow-x: hidden;
      width: 100%;
   }

   .container {
      margin-inline: auto;
      padding-inline: 10px;
      width: 100%;
   }

   .content {
      min-height: 100px;
      padding: 20px 0;
   }

   /* Display helpers */
   .hide {
      display: none !important;
   }

   .mob {
      display: block;
   }

   .desk {
      display: none;
   }

   /* Flex/grid helpers (single, non-conflicting set) */
   .row {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-3);
      margin: 10px;
   }

   .col {
      padding-inline: 10px;
      margin: 0 0 20px 0;
   }

   .fill {
      flex: 1 1 auto;
   }

   /* Fraction columns (mobile-first; upgrade widths at breakpoints) */
   .col-1 {
      flex: 0 0 100%;
      max-width: 100%;
   }

   .col-2 {
      flex: 0 0 50%;
      max-width: 50%;
   }

   .col-3 {
      flex: 0 0 33.333%;
      max-width: 33.333%;
   }

   .col-4 {
      flex: 0 0 25%;
      max-width: 25%;
   }

   .col-5 {
      flex: 0 0 20%;
      max-width: 20%;
   }

   .col-6 {
      flex: 0 0 16.666%;
      max-width: 16.666%;
   }

   .indent {
      margin: 0 0 0 25px;
      padding: 0 0 0 25px;
      text-indent: 20px;
   }

   .sub-info {
      font-size: var(--fs-sm);
      font-weight: 500;
      color: var(--color-subtle);
   }

   .sub-sub-info {
      font-size: var(--fs-sm);
      font-weight: 500;
      color: var(--alloy-orange);
      letter-spacing: .25px;
   }

   /* Alignment */
   .left {
      text-align: left;
   }

   .center {
      text-align: center;
   }

   .right {
      text-align: right;
   }

   /* Width containers */
   .narrowed {
      margin-inline: auto;
      max-width: 60%;
      width: 100%;
   }

   .narrow {
      margin-inline: auto;
      max-width: 50rem;
      width: 100%;
   }

   .wide {
      margin-inline: auto;
      max-width: 80rem;
      width: 100%;
   }

   .moveit-down {
      position: relative;
      top: 100px;
   }

   .moveit-up {
      position: relative;
      top: -100px;
   }

   /* Media (images/logos) */
   .image {
      width: 100%;
      object-fit: cover;
   }

   .logo {
      max-width: 400px;
      padding: 5px 0 0 0;
      margin: -10px 0;
   }

   .hero {
      display: block;
      width: 95%;
   }

   .hero-frame {
      width: 95%;
      height: clamp(30rem, 60vw, 42rem);
      overflow: hidden;
      margin: 0 auto;
      /*margin: 0 0 var(--space-3);*/
      border: 1px dotted var(--color-fg);
   }

   .hero-frame img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
   }

   /* Headers/sections */
   .header,
   .footer {
      padding: 20px;
      text-align: center;
   }

   /* Titles / typography helpers */
   .title {
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      text-shadow: 0.02em 0.02em 0.04em rgba(250, 250, 250, .4);
   }

   /* “Box” container */
   .a-box {
      border: 1px solid var(--color-subtle);
      border-radius: var(--radius-1);
      box-shadow: var(--shadow-1, 0 1px 1px rgba(0, 0, 0, .05));
      padding: 15px;
      margin: 50px;
      background: var(--color-bg);
      color: var(--color-fg);
   }

   .bio-holder {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      gap: clamp(1rem, 3vw, 2rem);
   }

   .bio-holder > .artist-pic {
      flex: 0 0 clamp(160px, 28vw, 220px);
      max-width: clamp(160px, 35vw, 240px);
      min-height: clamp(160px, 28vw, 240px);
      background: color-mix(in srgb, var(--color-muted, #595959) 12%, transparent);
      border: 1px dashed var(--color-subtle, #b1b1b1);
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      font-style: italic;
      padding: var(--space-2);
   }

   .bio-holder > p {
      flex: 1 1 280px;
      margin: 0;
   }

   .highlight {
      font-weight: 600;
      font-style: italic;
      font-size: var(--fs-h6);
      color: var(--color-cyan-dk);
   }

.big-up-dropcap {
   font-size: 115%;
   line-height: 1;
   float: left;
   margin-right: 0.25rem;
   font-weight: bold;
   font-family: "Helvetica Neue LT Std", "Arial Narrow", sans-serif;
   font-stretch: condensed;
   color: var(--color-cyan-dk);
}

/* Portfolio: mobile-first single column → 2x2 grid at larger screens */
.content-area.portfolio {
   display: grid;
   grid-template-columns: 1fr;
   grid-template-areas:
      "portfolio-header"
      "portfolio-primary"
      "portfolio-quote"
      "portfolio-copy"
      "portfolio-secondary";
   gap: clamp(0.75rem, 2vw, 1.5rem);
   align-items: start;
   justify-items: center;
}

.content-area.portfolio > img.portfolio__img--primary {
   width: 100%;
   max-width: 520px;
}

.content-area.portfolio article {
   width: 100%;
}

.content-area > .portfolio > h2 {
   grid-area: portfolio-header;
   justify-self: end;
   text-align: right;
   width: 100%;
   margin: 0 0 clamp(.5rem, 2vw, 1rem);
}

@media (min-width: 48rem) {
   .content-area.portfolio {
      /* Increase the right column so the quote has more horizontal room */
      grid-template-columns: 1fr 1.6fr;
      grid-template-areas:
         "portfolio-header portfolio-header"
         "portfolio-primary portfolio-quote"
         "portfolio-copy portfolio-secondary";
      gap: clamp(1rem, 2.5vw, 2.5rem);
      align-items: start;
      justify-items: stretch;
   }

   /* Keep the 2x2 layout but visually push the entire portfolio block to the right
      by constraining its max-width and using margin-left:auto. This doesn't change
      the inner markup or grid; it only repositions the section on larger screens. */
   .content-area.portfolio {
      max-width: min(1100px, 88%);
      margin-left: auto;
      margin-right: var(--content-gutter, 1rem);
   }

   /* allow article children to participate as grid items */
   .content-area.portfolio article { display: contents; }

   .content-area.portfolio > img.portfolio__img--primary { grid-area: portfolio-primary; justify-self: center; }
   .portfolio__quote { grid-area: portfolio-quote; align-self: start; }
   /* Quote sizing: provide a max box height and sensible defaults. JS will auto-scale font-size to fit. */
   .portfolio__quote {
      --quote-max-height: clamp(6rem, 20vh, 20rem);
      max-height: var(--quote-max-height);
      overflow: hidden;
      /* start larger so JS has more room before shrinking */
      font-size: clamp(1.1rem, 2.6vw, 1.6rem);
      line-height: 1.18;
      hyphens: auto;
      -webkit-hyphens: auto;
      -ms-hyphens: auto;
      text-wrap: balance;
      padding: .6rem;
      box-sizing: border-box;
      /* let the quote fill the column to avoid large gaps on the right */
      justify-self: stretch;
      width: 100%;
      max-width: none;
      padding-inline: 0.6rem;
   }

   /* Modifier for particularly large quotes */
   .portfolio__quote--large {
      --quote-max-height: clamp(8rem, 28vh, 30rem);
      font-size: clamp(1.25rem, 3vw, 1.95rem);
      padding: 0;
   }
   .portfolio__img--secondary { grid-area: portfolio-secondary; justify-self: end; width: 100%; max-width: 320px; }
   .portfolio__copy { grid-area: portfolio-copy; justify-self: start; max-width: 42ch; }
}

   @media (max-width: 48rem) {
      .bio-holder {
         flex-direction: column;
         align-items: center;
         text-align: left;
      }

      .bio-holder > .artist-pic {
         flex: 0 0 auto;
         width: min(100%, 280px);
      }

      .bio-holder > p {
         text-indent: 0;
         width: min(100%, var(--measure));
      }
   }

   .join-buts {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: var(--space-2);
      margin-block: var(--space-3);
      max-width: 30%;
      min-width: 5%;
   }

   .join-buts .btn {
      flex: 1 1 clamp(180px, 40vw, 240px);
      padding: clamp(0.6rem, 2.5vw, 1rem) clamp(1.25rem, 4vw, 2rem);
   }

   @media (max-width: 37.5rem) {
      .join-buts {
         flex-direction: column;
         align-items: stretch;
      }

      .join-buts .btn {
         width: 100%;
      }
   }

   /* Legal bars */
   .legal {
      position: fixed;
      width: 100%;
      left: 0;
      bottom: 0;
      background-color: var(--color-bg);
      border-top: 1px solid color-mix(in srgb, var(--color-fg) 35%, transparent);
      padding: var(--space-2);
      backdrop-filter: blur(6px);
   }

   @media (max-width: 37.5rem) {
      .legal {
         position: static;
         border-top: none;
         margin-top: var(--space-4);
         backdrop-filter: none;
      }
   }

   /* Fancy narrow label */
   .show-off {
      font-family: "Helvetica Neue LT Std", "Arial Narrow", sans-serif;
      font-stretch: condensed;
      font-weight: 100;
      letter-spacing: 0.05rem;
      font-size: var(--norm-p, 1rem);
   }

   /* Close button */
   .close {
      background: inherit;
      color: #333;
      /* consider var if thematic */
      font-size: 1.222rem;
      line-height: .9;
      margin-top: -0.611rem;
      opacity: .3;
      padding: 0 6px 4px;
      position: absolute;
      right: .222rem;
      top: 50%;
   }

   .close:hover,
   .close:focus {
      opacity: .5;
   }

   .fonties {
      margin: 0 0 0 55px;
   }

   .font1 {
      font-family: var(--font1);
   }

   .font2 {
      font-family: var(--font2);
   }

   .font3 {
      font-family: var(--font3);
   }

   .font4 {
      font-family: var(--font4);
   }

   .font5 {
      font-family: var(--font5);
   }

   .font6 {
      font-family: var(--font6);
   }

   .font7 {
      font-family: var(--font7);
   }

   .font8 {
      font-family: var(--font8);
   }

   .bigg {
      font-size: var(--fs-h5);
      font-weight: normal;
      letter-spacing: 2px;
   }

   .smally {
      font-size: 1.5rem;
      font-weight: normal;
      letter-spacing: 1px;
   }

   .tab1 {
      margin-left: 5%;
      line-height: 15px;
   }

   .tab2 {
      margin-left: 10%;
      line-height: 20px;
   }

   .tab3 {
      margin-left: 15%;
      line-height: 25px;
   }

   .tab4 {
      margin-left: 20%;
      line-height: 30px;
   }

   .tab5 {
      margin-left: 25%;
      line-height: 35px;
   }

   .tab6 {
      margin-left: 30%;
      line-height: 40px;
   }

   @media (max-width: 37.5rem) {
      .logo {
         max-width: 250px;
      }
   }

   /* Mobile/desktop toggles (tokenized alternative shown below in NOTES) */
   @media (min-width: 768px) {
      .mob {
         display: none !important;
      }

      .nav-bar {
         display: inline-block;
      }
   }

   @media (max-width: 767.98px) {
      .desk {
         display: none !important;
      }
   }

   /* Responsive column set for larger screens */
   @media (min-width: 1024px) {
      .lg-1 {
         flex: 0 0 100%;
         max-width: 100%;
      }

      .lg-2 {
         flex: 0 0 50%;
         max-width: 50%;
      }

      .lg-3 {
         flex: 0 0 33.333%;
         max-width: 33.333%;
      }

      .lg-4 {
         flex: 0 0 25%;
         max-width: 25%;
      }

      .lg-5 {
         flex: 0 0 20%;
         max-width: 20%;
      }

      .lg-6 {
         flex: 0 0 16.666%;
         max-width: 16.666%;
      }

      .desk {
         display: block;
      }

      .mob {
         display: none;
      }

      .nav-bar {
         display: inline-block;
      }
   }
}

/* -------------------- COMPONENTS -------------------- */
@layer components {

   /* Breadcrumbs */
   .breadcrumbs {
      display: block;
      list-style: none;
      margin-left: 0;
      padding: 0.5rem 0.7778rem;
      overflow: hidden;

      background: color-mix(in oklab, var(--color-fg) 6%, var(--color-bg));
      border: 1px solid var(--color-subtle);
      border-radius: var(--radius-1);
   }

   .breadcrumbs > * {
      float: left;
      /* preserves your current layout; consider modern flex if you like */
      margin: 0;
      font-size: 0.611rem;
      line-height: 0.611rem;
      text-transform: uppercase;
      color: var(--link);
   }

   .breadcrumbs > * a {
      color: var(--link);
   }

   .breadcrumbs > *:hover a,
   .breadcrumbs > *:focus a {
      text-decoration: underline;
   }

   .breadcrumbs > *.current,
   .breadcrumbs > *.current a {
      color: #333;
      /* could be var(--color-fg-strong) if you define one */
      cursor: default;
      text-decoration: none;
   }

   .breadcrumbs > *.unavailable,
   .breadcrumbs > *.unavailable a {
      color: #999;
      cursor: not-allowed;
      text-decoration: none;
   }

   .breadcrumbs > *:after {
      content: "/";
      color: #aaa;
      margin: 0 0.6667rem;
      position: relative;
      top: 1px;
   }

   .breadcrumbs > *:last-child:after {
      content: "";
      margin: 0;
   }

   /* Accessibility hint: screen-reader friendly slash */
   [aria-label="breadcrumbs"] [aria-hidden="true"]::before {
      content: "/";
   }

   /* Inline list */
   .inline-list {
      list-style: none;
      margin: 0 0 0.944rem -1.222rem;
      padding: 0;
      overflow: hidden;
   }

   .inline-list > li {
      float: left;
      margin-left: 1.222rem;
   }

   .inline-list > li > * {
      display: block;
   }

   /* Blockquote */
   blockquote {
      border-left: 1px solid var(--color-subtle);
      margin: 0 0 1rem;
      /*padding: 0.5rem 1rem 0 1rem;*/
      color: #6f6f6f;
      line-height: 3;
   }

   blockquote cite {
      display: block;
      font-size: 1rem;
      color: #555;
   }

   blockquote cite::before {
      content: "\2014\0020";
   }

   blockquote cite a,
   blockquote cite a:visited {
      color: #555;
   }

   /* vCard */
   .vcard {
      display: inline-block;
      border: 1px solid var(--color-subtle);
      padding: 0.556rem 0.667rem;
      margin: 0 0 1.111rem 0;
   }

   .vcard li {
      display: block;
      margin: 0;
   }

   .vcard .fn {
      font-weight: 700;
      font-size: 0.833rem;
   }
}