/* ============================================================
   text.css  —  real-text replacements for the old text-only images
   ------------------------------------------------------------
   Revision 1 goal: the site must look the SAME as the image-based
   version. Every helper below reproduces the pixel footprint of the
   image it replaces (see text-inventory.md for sizes and colors).

   Font: Open Sans loaded at weight 400 (regular), per the owner.
   (CLAUDE.md originally noted "weight 100", which Open Sans does not
   provide; the owner chose 400.)

   Font sizes / letter-spacing here are close starting values; each
   page phase verifies them against the original and nudges if needed.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap');

/* ---- shared base ------------------------------------------------ */
.txt,
.nav-btn,
.pnav,
.caption,
.credit,
.resume-tabs,
.resume-copy,
.contact-line,
.tagline {
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  font-weight: 400;
  margin: 0;
  padding: 0;
}

/* ============================================================
   1. Main navigation buttons   (was nav*.gif / page*Nav*.gif)
   67x19  ("gallery" "process" "contact")  |  64x19 ("resume")
   idle ink #666  ->  hover ink #333
   Replaces the JS image-swap rollover with a CSS :hover.
   ============================================================ */
.nav-btn {
  display: inline-block;
  width: 67px;
  height: 19px;
  line-height: 19px;
  font-size: 13px;
  letter-spacing: .4px;
  color: #666;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: bottom;
}
.nav-btn:hover { color: #333; }

.nav-btn--resume { width: 64px; }          /* resume button is 64px wide */

/* the current section is shown un-linked in the darker "On" color */
.nav-btn--current {
  color: #333;
  cursor: default;
}

/* ============================================================
   2. Previous / next links   (was next.gif / nextOn.gif)
   34x18, ink #333
   ============================================================ */
.pnav {
  display: inline-block;
  width: 34px;
  height: 18px;
  line-height: 18px;
  font-size: 11px;
  letter-spacing: .4px;
  color: #555;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}
.pnav:hover { color: #000; }

/* full version: browsing is done with the carets in gallery.html and
   process.html (js/browse.js). The "next" link in each framed page is
   hidden; its row keeps its height, so nothing below it moves. */
.pnav { visibility: hidden; }

/* ============================================================
   3. Resume tab navigation   (was resume-nav-*.gif)
   all 20px tall, ink #333
   ============================================================ */
.resume-tabs {
  display: inline-block;
  font-size: 11px;
  letter-spacing: .4px;
  color: #333;
  white-space: nowrap;
}
.resume-tabs a {
  color: #333;
  text-decoration: none;
}
.resume-tabs a:hover { color: #000; }
.resume-tabs .tab--current {                   /* active tab */
  color: #000;
  font-weight: 600;
}
.resume-tabs .tab-sep {                        /* 11px slot between the tabs, with a dot in it */
  display: inline-block;
  width: 11px;
  text-align: center;
  color: #999;
}
.resume-tabs .tab-sep::before {
  content: "\00b7";
}
.resume-tabs .tab-arrow {                      /* 19px ‹ / › slots */
  display: inline-block;
  width: 19px;
  text-align: center;
}

/* ============================================================
   4. Artwork captions   (was *Text.gif)
   117-118 wide x 314 tall vertical strip; text BOTTOM-aligned,
   three lines: title / dimensions / year. ink #333
   ============================================================ */
.caption {
  display: inline-flex;
  flex-direction: column;
  justify-content: flex-end;   /* push text to the bottom of the strip */
  width: 117px;
  height: 314px;
  vertical-align: bottom;
  font-size: 11px;
  line-height: 14px;
  color: #333;
  text-align: left;            /* captions read left-aligned, as in the gifs */
  padding-left: 8px;
  box-sizing: border-box;      /* keep total width at 117px incl. padding */
  white-space: nowrap;
}
.caption-inner {
  display: block;
  padding-bottom: 2px;
}
.caption .c-title,
.caption .c-dims,
.caption .c-year,
.caption .c-line { display: block; }

/* ============================================================
   5. Photo credits   (was galleryCredit / galleryNoCredit / vumeCredit)
   24px tall strip; a phrase pinned left and/or a phrase pinned right.
   ink ~#5C5C5C

   Alignment: the credit strip sits in its own table row below the
   artwork. That row is `8px pixel.gif + this 706px span` = 714px, the
   same width as the image row (117px spacer + 480px photo + 117px
   caption) so the two rows centre identically. `padding-left:109px`
   then places the credit text at 8 + 109 = 117px from the strip's
   left edge — i.e. flush with the left edge of the photo above it.
   ============================================================ */
.credit {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding-left: 109px;       /* aligns credit text with the photo's left edge */
  height: 24px;
  vertical-align: bottom;
  font-size: 11px;
  letter-spacing: .3px;
  color: #5c5c5c;
  white-space: nowrap;
}
.credit .credit-left  { text-align: left; }
.credit .credit-right { text-align: right; }
/* when there is no left phrase, an empty left span keeps the right
   phrase pinned to the right via space-between */

/* ============================================================
   6. Contact details   (was contactEmail.gif / contactPhone.gif)
   17px tall, dark grey
   ============================================================ */
.contact-line {
  display: inline-block;
  height: 17px;
  line-height: 17px;
  font-size: 12px;
  color: #444;
  text-decoration: none;
  white-space: nowrap;
}
a.contact-line:hover { color: #000; }

/* ============================================================
   7. Resume content   (was resume-education/awards/exhibitions.png)
   Laid into the page as real text. Exact placement/sizing is
   finalised in Phase 4 (the old PNGs were window-scaled backgrounds).
   ============================================================ */
.resume-copy {
  width: 750px;
  min-height: 430px;          /* keeps the tab nav near its old position */
  margin: 10px 0 0 0;         /* matches the old 10px top spacer row */
  padding: 0 10px;
  box-sizing: border-box;
  color: #333;
  font-size: 13px;
  line-height: 1.5;
}
.resume-copy h2 {
  font-weight: 600;
  font-size: 14px;
  margin: 0 0 .7em 0;
}
.resume-copy p {
  margin: 0 0 .55em 0;
}

/* ============================================================
   8. Home tagline   (was painted into bg-home.jpg)
   245x11 of ink at 502,481 on the 800x555 home page, ink ~#666.
   Placed at the same spot over the new home photograph; the ink
   is darker (#333) because the new backdrop is a mid grey there.
   ============================================================ */
.tagline {
  position: absolute;
  left: 500px;
  top: 477px;
  width: 250px;
  height: 19px;
  line-height: 19px;
  font-size: 13px;
  letter-spacing: 1.15px;
  color: #333;
  text-align: center;
  white-space: nowrap;
}