/* Jan Espig — Portfolio styles
   Extracted verbatim from the original single-file build (visual layer unchanged).
*/

    /* TOKENS & BASE */
    :root{
      --header-h:56px;
      --bg:#000; --text:#fff; --muted:#fff; --accent:#FF7903; --ctl-border-w:1px;
      --maxw:96vw; --gutter:24px;
      
      /* TYPOGRAPHY SYSTEM: 3 SIZES + EXCEPTIONS */
      --font-main: "Atkinson Hyperlegible Mono", monospace;
      
      /* 1. LARGE */
      --h1: 22px; 
      /* 2. STANDARD */
      --h2: 15px; 
      /* 3. SMALL */
      --h3: 11px; 
      
      /* EXCEPTIONS */
      --btn-text: 15px; 
      
      --lh:1.4;
      --sep:rgba(255,255,255,.22); --line:#fff;
      --ease:cubic-bezier(.22,.61,.36,1); --anim:220ms var(--ease);
      --rowHL:#fff; 
      
      /* ALIGNMENT TOKEN */
      --col-pad: 12px; 
    }
    .light{ --bg:#fff; --text:#000; --muted:#000; --sep:rgba(0,0,0,.28); --line:#000; --rowHL:#000; }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{margin:0; background:var(--bg); color:var(--text); font-family:var(--font-main); font-size:var(--h2); line-height:var(--lh); padding-top:var(--header-h)}
    img{display:block; max-width:100%; height:auto}
    a{color:inherit; text-decoration:none}
    a:hover{text-decoration:underline}
    .ext{color:var(--accent)}

    /* HEADER */
    header{position:fixed; inset:0 0 auto 0; z-index:999; padding:14px 0; background:var(--bg)}
    .nav{display:flex; align-items:center; justify-content:space-between; gap:12px; overflow:hidden;}
    /* EXCEPTION: Logo Size */
    .brand{font-size:var(--h1); text-decoration:none !important; font-weight: 400; padding-left: var(--col-pad); white-space:nowrap; flex-shrink: 0;}
    .container{max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(10px,2vw,20px)}
    
    .controls{
        display:flex; align-items:center; gap:10px; 
        overflow-x: auto; 
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; 
        -ms-overflow-style: none;
    }
    .controls::-webkit-scrollbar { display: none; }

    /* EXCEPTION: Button/Pill Size */
    .toggle,.pill{
      display:inline-flex; align-items:center; justify-content: center; gap:6px; 
      padding:4px 12px; height: 28px; 
      border-radius:999px; border:var(--ctl-border-w) solid var(--text); 
      background:transparent; font-family:var(--font-main); 
      font-size:var(--btn-text); color:var(--text); cursor:pointer;
      white-space: nowrap; flex-shrink: 0;
    }
    .themeDot{width:6px; height:6px; border-radius:999px; background:currentColor; display:inline-block}
    .audio-group{display:flex; align-items:center; gap:8px; flex-shrink:0;}
    .trackDot{width:16px; height:16px; padding:0; line-height:0; border-radius:50%; border:var(--ctl-border-w) solid var(--text); background:transparent; display:inline-block; cursor:pointer; transition:transform .15s var(--ease), background-color .15s var(--ease), border-color .15s var(--ease); box-sizing:content-box}
    .trackDot:not(.active){background:rgba(127,127,127,.18)}
    .trackDot.active{background:var(--accent); border-color:var(--accent)}
    /* Pills are outline-only in BOTH themes (dark fill removed by request). */

    /* HERO */
    .intro{
      padding: 35vh 0 36vh; 
      position:relative; z-index:1; 
      display:flex; flex-direction:column; gap:24px;
      padding-left: var(--col-pad);
    }
    /* SIZE 2: Standard */
    .intro p{margin:0; max-width:850px; font-size:var(--h2); line-height:1.5}
    .intro .hero-jump{color:var(--accent)}
    
    .hero-underlay{position:absolute; left:0; width:100vw; margin-left:calc(50% - 50vw); top:0; z-index:0; pointer-events:none}
    #heroSketch{position:absolute; inset:0}
    #heroSketch canvas{width:100% !important; height:100% !important; display:block}

    /* FILTERS & TABLE */
    .filters{
        display:flex; 
        align-items:center; 
        justify-content:space-between; 
        padding:14px var(--col-pad); 
        margin-top:0; margin-bottom:10px; 
        position:sticky; top:var(--header-h); 
        z-index:45; background:var(--bg); 
        border-bottom:1px solid var(--line);
        gap: 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; 
        -ms-overflow-style: none;
    }
    .filters::-webkit-scrollbar { display: none; }

    .choices{
        display:flex; gap:20px; align-items:center; 
        flex-wrap:nowrap; 
        /* SIZE 2: Standard */
        font-size:var(--h2);
        white-space: nowrap;
    }
    
    .choice{
        display:inline-flex; 
        align-items:center; 
        gap:8px; 
        cursor:pointer;
    }
    .choice input{
        appearance:none; width:14px; height:14px; 
        border-radius:999px; border:1.5px solid var(--muted); 
        display:grid; place-items:center;
        margin: 0; 
        position: relative;
        top: -1px; 
    }
    .choice input:checked{border-color:var(--accent)}
    .choice input:checked::after{content:""; width:8px; height:8px; background:var(--accent); border-radius:999px}
    
    .filters #toggleAll { 
        height: 28px; font-size: var(--btn-text); padding: 0 12px; 
        flex-shrink: 0; 
        margin-left: auto; 
    }

    .table{border-top:none}
    .thead,.row{display:grid; grid-template-columns:1.4fr 1fr 1fr 100px; column-gap:12px; align-items:center}
    
    .table .thead>div,.table .row>div{
        transition:background-color var(--anim), color var(--anim); 
        padding-inline:var(--col-pad); 
        position:relative; z-index:1
    }
    
    /* SIZE 2: Standard used in Header */
    .thead{position:sticky; top:calc(var(--header-h) + var(--filters-h, 56px)); z-index:40; padding:10px 0; background:var(--bg); color:var(--muted); font-size:var(--h2); border-bottom:1px solid var(--line)}
    
    .row{height:90px; min-height:90px; border-bottom:1px solid var(--sep); cursor:pointer; position:relative; overflow:hidden}
    .table .row>div{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
    .row::before{content:""; position:absolute; inset:0; background:var(--rowHL); transform:scaleX(0); transform-origin:left center; transition:transform var(--anim)}
    .row:hover::before{transform:scaleX(1)}
    .row:hover{color:#000}
    .row:hover .type,.row:hover .client,.row:hover .year{color:#222}
    .light .row:hover{color:#fff}
    .light .row:hover .type,.light .row:hover .client,.light .row:hover .year{color:#eaeaea}

    /* SIZE 1: Large for Title */
    .name{font-size:var(--h1)}
    /* SIZE 2: Standard for Metadata (Desktop) */
    .type,.client,.year{color:var(--muted); font-size:var(--h2)}
    
    .yearDot{display:inline-block; width:12px; height:12px; border-radius:999px; border:1.5px solid var(--muted); margin-right:8px; translate:0 0}
    .yearDot.hot{background:var(--accent); border-color:var(--accent)}
    
    .thead>div{display:flex; align-items:center}
    .thead>div:last-child{justify-content:flex-end}
    .row .year{display:flex; justify-content:flex-end; align-items:center; gap:8px}
    #sortYear{cursor:pointer; user-select:none;}
    #sortYear:hover{opacity: 0.7;}

    /* DETAILS & GALLERY */
    .details{display:none}
    .details.open{display:block; border-bottom:1px solid var(--sep)}
    .detail-scroll{padding:0 0 10px}
    
    .detail-inner{
        display:grid; 
        grid-template-columns:1fr 460px; 
        column-gap:clamp(20px,4vw,40px); 
        align-items:start;
        padding-left: 0; 
    }

    .gallery{display:grid; grid-auto-flow:column; grid-auto-columns:100%; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch}
    .gallery::-webkit-scrollbar{display:none}
    .slide{scroll-snap-align:start}
    
    .media-box{aspect-ratio:16/9; background:var(--bg); position: relative; width:100%}
    .light .media-box{background:var(--bg)}
    
    .media-box>img,.media-box>video,.media-box>iframe{
      width:100%; height:100%; 
      object-fit:contain; 
      object-position: left center; 
      display:block; pointer-events:auto
    }
    
    .media-wrap{position:relative; min-width:0}
    .dots{position:absolute; left:50%; bottom:10px; transform:translateX(-50%); display:flex; gap:6px}
    .dot{width:5px; height:5px; border-radius:999px; background:rgba(255,255,255,.6); border:none; padding:0; cursor:pointer; transition:transform 160ms var(--ease), background 160ms var(--ease)}
    .dot{background:rgba(255,255,255,.6)}
    .dot.active{background:var(--text); transform:scale(1.4)}
    .light .dot{background:rgba(0,0,0,.5)}

    /* Detail Text Side */
    .detail-meta{
      display:flex; flex-direction:column; 
      padding-top:0px;
      height: 550px; 
      max-height: 56vw;
      padding-right:10px;
    }
    /* Fixed areas */
    .meta-head { flex: 0 0 auto; padding-top: 35px; margin-bottom: 24px; } 
    .meta-foot { flex: 0 0 auto; padding-top: 24px; border-top: 1px solid var(--sep); margin-top: auto; }
    
    .scroll-frame {
        position: relative;
        flex: 1 1 auto;
        overflow: hidden; 
        display: flex;
        flex-direction: column;
    }

    .meta-scroll { 
        flex: 1; 
        overflow-y: auto; 
        padding-right: 6px;
        padding-bottom: 30px; 
    }
    .meta-scroll::-webkit-scrollbar {width: 2px;}
    .meta-scroll::-webkit-scrollbar-track {background: transparent;}
    .meta-scroll::-webkit-scrollbar-thumb {background: var(--sep);}
    
    .scroll-gradient {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 60px;
        background: linear-gradient(to bottom, transparent, var(--bg));
        pointer-events: none;
    }

    /* SIZE 2: Standard for body copy */
    .meta-desc{margin:0; font-size:var(--h2); line-height:1.5; white-space:pre-wrap}
    .credits{list-style:none; padding:0; margin:0; display:grid; gap:4px; font-size:var(--h2); opacity:.8}
    /* Team disclosure: collapsible on mobile only — toggle hidden / content shown on desktop */
    .team-toggle{display:none}
    .team-block{display:block}
    /* "read more" is a mobile-only affordance; desktop keeps the scrolling frame */
    .desc-more{display:none}
    .award-imgs{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:0px}
    .award-imgs img{height:42px; width:auto; object-fit:contain}
    
    .chips{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
    /* SIZE 3: Small for chips */
    .chip{display:inline-flex; align-items:center; justify-content:center; background:transparent; border:1px solid var(--sep); height:24px; padding:0 12px; border-radius:12px; color:var(--text); font-size:var(--h3); line-height:1; white-space:nowrap}
    .light .chip{border-color:rgba(0,0,0,.38); color:#000}

    /* ABOUT */
    .about-wrap{display:grid; grid-template-columns: 1.4fr 0.8fr; gap: var(--gutter); align-items:start; margin-top:40px; padding-left: var(--col-pad);}
    .about-table{border-top:1px solid var(--sep)}
    .about-row{display:grid; grid-template-columns: 140px minmax(0,1fr); column-gap: var(--gutter); padding:16px 0; border-bottom:1px solid var(--sep)}
    
    /* SIZE 2: Standard for About */
    .about-row .label{color:var(--muted); font-size:var(--h2); min-width:0; overflow-wrap:break-word}
    .about-row .content{font-size: var(--h2); min-width:0; overflow-wrap:break-word; word-break:break-word}
    .about-list{font-size: var(--h2); margin:0; padding-left:16px; line-height:1.8; overflow-wrap:break-word; word-break:break-word}
    .about-photo{position:sticky; top: calc(var(--header-h) + 20px)}
    .about-photo img{display:block; width:100%; aspect-ratio: 3 / 2; height:auto; object-fit: cover}

    /* CONTACT SECTION */
    .contact-band{
        margin-top:120px; padding:100px 0; 
        width:100vw; margin-left:calc(50% - 50vw);
        background:#fff; color:#000;
    }
    body.light .contact-band { background: #000; color: #fff; } 

    .contact-inner{max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(10px,2vw,20px); padding-left: calc(clamp(10px,2vw,20px) + var(--col-pad));}
    
    .contact-stack{
      display: flex;
      flex-direction: column;
      gap: 16px;
      width: 100%;
    }

    .contact-grid{
      display:grid; 
      grid-template-columns: 1fr 1fr; 
      gap:16px;
      width: 100%;
    }
    
    /* SIZE 1: Large for Links */
    .contact-email{
      font-size:var(--h1); 
      display:block;
      text-decoration:none;
      margin-bottom: 4px;
    }
    .contact-email:hover { text-decoration: underline; }
    
    /* SIZE 2: Standard for Subtext */
    .contact-sub {
        font-size: var(--h2);
        color: rgba(0,0,0,0.6); 
        margin-bottom: 32px;
    }
    body.light .contact-sub { color: rgba(255,255,255,0.7); }

    .social-pill{
      display:flex; 
      flex-direction: column; 
      width:100%; 
      height:100px; 
      align-items:center; 
      justify-content:center; 
      border:1px solid currentColor; 
      border-radius:999px; 
      font-size:var(--h1);
      transition: opacity 0.2s;
      text-decoration: none !important;
      line-height: 1.2;
    }
    .social-pill:hover{ opacity: 0.6; }
    .pill-sub { font-size: var(--h2); color: rgba(0,0,0,0.6); margin-top: 2px; }
    body.light .pill-sub { color: rgba(255,255,255,0.7); }

    .contact-band .ext{ color: inherit; }
    
    /* FIX 1: About Link Styling */
    .about-link-container { padding: 24px 0 0 var(--col-pad); margin-top:24px; }
    .bottom-about-link { font-size: var(--h1); text-decoration: none; }

    /* FOOTER */
    footer{padding:18px 0; border-top:1px solid var(--sep); padding-left: var(--col-pad);}
    .footline{display:flex; justify-content:space-between; align-items:center; color:var(--muted)}
    /* SIZE 3: Small for Footer */
    footer,footer a{font-size:var(--h3)}

    /* MOBILE ADJUSTMENTS */
    @media (max-width:780px){
      :root{
         /* SIZE 2 MOBILE: Slightly smaller standard */
         --h2: 11px; 
         /* SIZE 3 MOBILE: Keep small */
         --h3: 11px;
         
         /* EXCEPTION: Button Mobile */
         --btn-text: 12px; 
         
         --header-h:46px;
      }
      
      header{padding:8px 0}
      .nav { gap: 8px; }
      .controls{ gap:6px; flex-shrink: 0; }
      
      .brand, .toggle, .pill, .social-pill, .contact-email, .pill-sub {
         white-space: nowrap;
      }
      
      /* Use specific size 3 for brand fix if needed, or keep generic */
      .brand { font-size: 12px; padding-left: 0; } 
      
      .toggle, .pill { padding: 4px 10px; }
      
      .contact-email, .social-pill { font-size: 18px; }
      .pill-sub { font-size: 11px; }
      .social-pill { height: 80px; }
      
      /* Reduced Mobile Padding (Task 2) */
      .container { padding-inline: 6px; } 
      .contact-inner { padding-left: 6px; } 
      
      /* FIX 2: Filter Bar - Background Rectangle Hack */
      .filters {
         display: flex;
         flex-wrap: nowrap;
         overflow-x: auto; 
         -webkit-overflow-scrolling: touch; 
         justify-content: flex-start; 
         gap: 20px; 
         padding: 10px 0; /* Keep content aligned with grid */
         scrollbar-width: none;
         
         position: sticky; 
         top: calc(var(--header-h) - 3px); 
         z-index: 50; 
         background: var(--bg);
         
         /* THE FULL WIDTH RECTANGLE BEHIND */
         box-shadow: 0 0 0 100vw var(--bg);
         clip-path: inset(0 -100vh 0 -100vh);
      }
      .choices { 
          gap: 12px; 
          font-size: 12px; 
      }
      .filters #toggleAll { 
          flex-shrink: 0; 
          margin-left: auto; /* Push to right */
          font-size: 12px;
          padding: 0 8px;
      }
      
      .hide-on-mobile { display: none; }
      
      .intro { padding-top: 140px; }
      
      /* FIX 1: Hide Thead again on Mobile */
      .thead{display:none !important}

      /* COMPACT ROW LAYOUT USING VARIABLES */
      .row {
          display: grid;
          grid-template-columns: 1.2fr 1fr auto; 
          grid-template-rows: auto auto;
          grid-template-areas: 
            "title title title"
            "type client year";
          gap: 4px 12px;
          padding: 10px 0;
          align-items: start;
          height: auto !important; 
          min-height: 0;
      }

      /* TITLE: Use SIZE 1 (Large) for prominence on mobile */
      .row .name {
          grid-area: title;
          font-size: var(--h1); /* 22px - Prominently bigger */
          margin-bottom: 2px;
      }

      /* META: Use SIZE 3 (Small) */
      .row .type, .row .client, .row .year {
          font-size: var(--h3);
          line-height: 1.3;
          white-space: normal; 
          overflow: visible;
          color: var(--muted);
          align-self: start;
          opacity: 0.8;
      }

      .row .type { grid-area: type; }
      .row .client { grid-area: client; }
      
      .row .year { 
          grid-area: year; 
          text-align: right; 
          justify-self: end;
          display: flex;
          justify-content: flex-end;
          white-space: nowrap; 
      }
      
      .yearDot { width: 6px; height: 6px; margin-right: 4px; border-width: 1px; }
      
      .table .row>div { padding-inline: 0; }

      .detail-inner{grid-template-columns:1fr; row-gap:16px; padding-left:0}
      
      /* FULL-WIDTH IMAGES ON MOBILE (TASK 2 - CLEAN VERSION) */
      .media-wrap {
          width: 100vw; 
          margin-left: calc(50% - 50vw);
      }
      
      .media-box{aspect-ratio:3/2}
      
      /* FIX 3: Center Images in Box */
      .media-box > img, .media-box > video, .media-box > iframe {
          object-position: center center;
      }
      
      .detail-meta {
         height: auto;
         max-height: none;
         padding-right: 6px;
         margin-bottom: 8px;
         border-bottom: none; /* Removed thin line on mobile */
      }

      /* FIX: New Credits Style */
      .credits { 
          padding-top: 10px;  
          gap: 2px; 
          font-size: var(--h3); 
      }
      
      /* Drop the fixed-height scroll box on mobile — the description clamps
         to 4 lines and expands via "read more" instead. */
      .scroll-frame { max-height: none; overflow: visible; }
      .meta-scroll { overflow-y: visible; padding-bottom: 0; }
      .scroll-gradient { display: none; }

      /* Tighter line spacing + 4-line clamp for the description on mobile */
      .meta-desc {
          line-height: 1.3;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 4;
          overflow: hidden;
      }
      .meta-desc.expanded {
          display: block;
          -webkit-line-clamp: unset;
          overflow: visible;
      }
      .desc-more {
          display: inline-block;
          margin-top: 8px;
          padding: 0;
          background: transparent;
          border: none;
          color: var(--accent);
          font-family: var(--font-main);
          font-size: var(--h3);
          line-height: 1.3;
          cursor: pointer;
      }
      .desc-more:hover { text-decoration: underline; }

      .meta-head, .meta-foot { padding-top: 0; }

      /* MOBILE: Team becomes a one-line "See Team" disclosure */
      .team-toggle {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          margin-top: 12px;
          padding: 6px 14px;
          height: 28px;
          border: 1px solid var(--sep);
          border-radius: 999px;
          background: transparent;
          color: var(--text);
          font-family: var(--font-main);
          font-size: var(--h3);
          line-height: 1;
          white-space: nowrap;
          cursor: pointer;
      }
      .team-toggle::after {
          content: "↓";
          font-size: var(--h3);
          line-height: 1;
      }
      .team-toggle[aria-expanded="true"]::after { content: "↑"; }
      .team-block { display: none; }
      .team-block.open { display: block; }
      
      .about-wrap{display:flex !important; flex-direction:column; gap:24px; padding-left:0}
      .about-photo{position:static; order:-1}
      .about-row { grid-template-columns: 90px minmax(0,1fr); }
      
      .contact-inner { padding-left: clamp(10px,2vw,20px); }
      .contact-grid{ grid-template-columns: 1fr; }
      
      /* TASKS: New Adjustments */
      .bottom-about-link { font-size: var(--h2); } /* Task 1 */
      .contact-band { margin-top: 60px; padding: 60px 0; } /* Task 2: Reduced gap */
    }
  

/* ============================================================
   ACCESSIBILITY QUALITY FLOOR (added during refactor)
   Non-visual: focus ring for keyboard users + reduced motion.
   ============================================================ */

/* Visible focus only for keyboard navigation, never on mouse click */
:where(a, button, .row, input, [tabindex]):focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Respect users who ask the OS to reduce motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}