/* ================================================================
   Caleb Feinstein — Studio Practice
   Shared stylesheet — used by index.html, biography.html, contact.html
   ================================================================ */

/* ---------- Webfonts: TAY faces, self-hosted in /fonts ---------- */
@font-face{
  font-family:'TAY Road Runner';
  src:url('fonts/TAYRoadRunner.woff') format('woff');
  font-weight:400 700;
  font-display:swap;
}
@font-face{
  font-family:'TAY Big Bird';
  src:url('fonts/TAYBigBird.woff') format('woff');
  font-weight:400 700;
  font-display:swap;
}

:root{
  --coral:#E98374;   /* Lambent */
  --yellow:#F1BD4D;  /* box1a */
  --indigo:#4346A3;  /* windowgazing */
  --mauve:#C9AEC1;   /* option 4 */
  --mint:#9ED0C4;    /* option 5 */
  --teal:#00ACC4;    /* option 6 */
  --tile:#F2F2F2;
  --ink:#3F4045;
  --ink-soft:#6A6C70;
  --bg:#FFFFFF;
  --gutter:24px;
  --font-display:'TAY Road Runner','Arial Narrow',sans-serif;
  --font-alt:'TAY Big Bird','Arial Narrow',sans-serif; /* Big Bird — assign a role below */
  --font-body:'Helvetica Neue',Helvetica,Arial,sans-serif; /* body: Helvetica per Caleb */

  /* the six-color rule, correct order (matches swatches): coral, yellow, indigo, mauve, mint, teal */
  --palette-rule: linear-gradient(to bottom,
    var(--coral)  0      16.666%,
    var(--yellow) 16.666% 33.333%,
    var(--indigo) 33.333% 50%,
    var(--mauve)  50%     66.666%,
    var(--mint)   66.666% 83.333%,
    var(--teal)   83.333% 100%);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5;
}

.page{max-width:1240px;margin:0 auto;padding:48px 100px 140px}

/* ---------- Header ---------- */
header{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap}
.name{
  font-family:var(--font-display);font-weight:700;font-size:34px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
}
.name-link{text-decoration:none;color:inherit}
.subtitle{
  font-family:var(--font-display);font-weight:600;font-size:17px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);
}
.social{margin-left:auto;display:flex;gap:14px;align-items:center}
.social a{color:var(--ink);display:inline-flex}
.social a:hover{color:var(--teal)}
.social svg{width:22px;height:22px}

/* ---------- Palette rule: all six series colors, in swatch order ---------- */
.rule{height:8px;margin:10px 0 14px;background:var(--palette-rule);}

/* ---------- Sort row ---------- */
.sort{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:56px}
.swatches{display:flex}
.swatch{
  appearance:none;border:none;cursor:pointer;
  width:26px;height:16px;padding:0;display:block;
  background:var(--c);
  transition:transform .15s ease,opacity .25s ease,filter .25s ease,box-shadow .25s ease;
}
.swatch:hover{
  transform:translateY(-2px);
  filter:brightness(1.1) saturate(1.15);
  box-shadow:0 0 10px var(--c);
}
.swatch[aria-pressed="true"]{
  transform:translateY(-2px);
  filter:brightness(1.18) saturate(1.25);
  box-shadow:inset 0 0 0 2px var(--ink), 0 0 14px 2px var(--c);
}
.sort.filtering .swatch[aria-pressed="false"]{opacity:.3;filter:saturate(.7)}
.sort-reset{
  appearance:none;border:none;background:none;cursor:pointer;
  font-family:var(--font-body);font-weight:600;font-style:italic;
  font-size:15px;color:var(--ink);padding:2px 4px;
  text-decoration:underline;text-underline-offset:3px;
  transition:opacity .25s ease;
}
.sort.filtering .sort-reset{color:var(--ink-soft);opacity:.35;text-decoration:none}
.sort.filtering .sort-reset:hover{opacity:1;color:var(--ink)}
.sort-tags{display:flex;gap:4px;flex-wrap:wrap;font-style:italic;font-weight:600;font-size:15px}
.tag-btn{
  appearance:none;border:none;background:none;cursor:pointer;
  font:inherit;padding:2px 4px;transition:opacity .2s ease;
}
.tag-btn::after{content:","}
.tag-btn:last-child::after{content:""}
.tag-btn[aria-pressed="true"]{text-decoration:underline;text-underline-offset:3px}
.sort.filtering .tag-btn[aria-pressed="false"]{opacity:.35}

/* date-direction toggle: newest-first / oldest-first, the calendar icon from the artboard */
.date-toggle{
  appearance:none;border:none;background:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:2px;
  color:var(--ink-soft);padding:2px 4px;
  transition:color .2s ease;
}
.date-toggle:hover{color:var(--ink)}
.date-toggle svg{width:18px;height:18px}
.date-toggle .arrow{font-size:13px;line-height:1;transition:transform .2s ease}
.date-toggle[data-direction="asc"] .arrow{transform:rotate(180deg)}

/* ---------- Grid ---------- */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:64px var(--gutter)}
.work{text-decoration:none;color:inherit;display:block;transition:opacity .35s ease}
.grid.filtering .work:not(.match){opacity:.18}
.work-img{
  width:100%;aspect-ratio:3/2;background:var(--tile);
  display:block;object-fit:cover;
}
.caption{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:13.5px;color:var(--ink)}
.chip{width:18px;height:12px;flex:none}
.caption .title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.caption .year{margin-left:auto;color:var(--ink-soft)}

/* ---------- Simple content page (Biography / Contact) ---------- */
.content{max-width:640px;padding-top:16px}
.content h1{
  font-family:var(--font-display);font-weight:700;font-size:22px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
  margin-bottom:24px;
}
.content p{margin-bottom:18px;color:var(--ink)}
.content a{color:var(--ink);text-decoration-color:var(--coral)}
.content .field{margin-bottom:16px}
.content label{display:block;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px}
.content input, .content textarea{
  width:100%;font-family:var(--font-body);font-size:15px;color:var(--ink);
  border:none;border-bottom:1px solid var(--ink-soft);padding:8px 2px;background:none;
}
.content input:focus, .content textarea:focus{outline:none;border-bottom:2px solid var(--coral)}
.content button[type="submit"]{
  margin-top:8px;
  font-family:var(--font-display);font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  font-size:14px;color:var(--ink);background:none;border:2px solid var(--ink);
  padding:10px 24px;cursor:pointer;transition:background .2s ease,color .2s ease;
}
.content button[type="submit"]:hover{background:var(--ink);color:var(--bg)}

/* ---------- Footer nav: fixed, always visible like Zittel's ----------
   Single row, four links in fixed left-to-right order. The active link
   doesn't move horizontally — it just flips to the other side of the
   rule line via a vertical offset, while inactive links stay put below it.
*/
.footer-nav{
  position:fixed;
  left:0;right:0;bottom:0;
  background:var(--bg);
  box-shadow:0 -6px 16px rgba(0,0,0,.05);
  z-index:100;
}
.footer-nav-inner{max-width:1240px;margin:0 auto;padding:0 100px 16px}
.nav-row{
  position:relative;
  display:flex;
  justify-content:space-between;
  padding-top:46px; /* reserves room above the rule for the flipped-up link */
}
.nav-row::before{
  content:"";
  position:absolute;
  left:0;right:0;top:46px;height:8px;
  background:var(--palette-rule);
}
.nav-link{
  position:relative;
  top:12px; /* resting position: clearly below the rule */
  font-family:var(--font-display);font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;font-size:15px;text-decoration:none;color:var(--ink-soft);
  transition:top .25s ease,color .2s ease;
}
.nav-link:hover{color:var(--ink)}
.nav-link.active{
  top:-42px; /* flips well clear above the shared line, same column */
  color:var(--ink);
  padding-bottom:12px;
}
/* the active link's own mini rule — same six colors, sized to its own text width,
   sitting a clear gap above the shared rule so the two never touch */
.nav-link.active::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:8px;
  background:var(--palette-rule);
}

/* ---------- Scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .work,.tag-btn{transition:none}
}

/* ---------- Mobile (390px artboard) ---------- */
@media (max-width:700px){
  .page{padding:28px 20px 130px}
  .name{font-size:26px}
  .subtitle{font-size:13px}
  .grid{grid-template-columns:1fr;gap:40px}
  .sort{margin-bottom:36px}
  .footer-nav-inner{padding:0 20px 14px}
  .nav-row{padding-top:38px}
  .nav-row::before{top:38px;height:7px}
  .nav-link{font-size:11px;letter-spacing:.14em;top:10px}
  .nav-link.active{font-size:12px;top:-32px;padding-bottom:10px}
  .nav-link.active::after{height:7px}
}