@font-face {
  font-family: "ibmplex";      
  src: url("./portfolio/images/IBMPlexMono-LightItalic.otf")  format(opentype);   
}

@font-face {
  font-family: "ibmplexreg";      
  src: url("./portfolio/images/IBMPlexMono-Regular.otf") format(opentype) ;
}

@font-face {
  font-family: "cardobold";        
  src: url("./portfolio/images/Cardo-Bold.ttf") format(truetype);
}

@font-face {
  font-family: "mardian";        
  src: url("./portfolio/images/MardianDemo.ttf") format(truetype);
}


@font-face {
  font-family: "chivo";        
  src: url("./portfolio/images/Chivo-Light.ttf") format(truetype);
}



body {
  overflow: auto; /* scrollable catalogue */
  background-color: rgb(93, 93, 93);
}

#grain {
  position: fixed;
  inset: 0;
  background-image: url(portfolio/images/bg5.jpg); /* reuse your large cover image */
  background-size: cover;
  background-position: center;
  z-index: 0;
  opacity: 1;
}

/* -------- Typographic + sizing base -------- */
:root{
  --mono: "ibmplexreg", monospace;
  --body: "ibmplexreg", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* spacing + sizing */
  --page-pad: clamp(2rem, 6vw, 4rem);
  --col-gap: clamp(2rem, 4.4vw, 3.75rem);
  --row-gap: clamp(1.2rem, 3vw, 2rem);

  /* label/value ratio ~1:3.15 at laptop scale */
  --label-col: clamp(5.5rem, 10vw, 6rem);   /* ~88–96px */
  --value-col: clamp(16rem, 30vw, 19rem);   /* ~256–304px */

  /* card + visual cue look */
  --img-pad: clamp(0.35rem, 0.8vw, 0.6rem);
  --img-shadow: none;
  --card-bg: none;
  --card-border: none; /* was 1px solid #000; keep none to hide outer border */

  /* visual cue hooks — change these to restyle */
  --visual-img-bg: #e0ded9;
  --visual-img-border: 1px solid rgb(0, 0, 0);
  --visual-figure-bg: transparent;
  --visual-figure-border: none;
}


/* -------- Page shell -------- */
.library-shell{
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.library-header{
  padding: var(--page-pad);
  padding-bottom: 0;
}

/*TITLE SCENT LIBRARY*/
.library-kicker{
  font-family: var(--mono);
  font-size: clamp(0.8rem, 1.1vw, 0.95rem);
  font-weight: bold;
  letter-spacing: 0.03em;
  color: #000000;
  margin: 0;
  display: inline-block;
  padding: 0;
  border: none;
}

/* -------- Library grid of cards (3 per row on wide) -------- */
.library{
  display: grid;
  gap: var(--col-gap);
  padding: var(--page-pad);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1200px){
  .library{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px){
  .library{ grid-template-columns: 1fr; }
}

/* -------- Each scent “grid” card -------- */
.library-item{
  background: var(--card-bg);
  border: var(--card-border);  /* keep none to hide the outer line */
  padding: 0;
  overflow: visible;            /* clips any sub-pixel border bleed */
}

/* inner 2-col x 6-row grid */
.library-item .grid{
  display: grid;
  grid-template-columns: var(--label-col) var(--value-col);
  /* Optional fully-fluid alternative (keeps ~1:3 ratio):
     grid-template-columns: minmax(6rem, 1fr) minmax(14rem, 3fr); */
  grid-auto-rows: auto;        /* row height = content */
  column-gap: 0;
  row-gap: 0;
  align-items: start;
  min-width: 0;                /* allow shrinking inside the card */
}

/* Make borders stay inside each cell’s box to avoid overshoot, padding inside grid*/
.library-item .grid > *{
  box-sizing: border-box;
  display: block;
  min-width: 0;
  padding: 0.4rem 0.6rem; /* top/bottom 0.4rem, left/right 0.6rem */
  box-sizing: border-box; /* keep borders inside total width */
}

/* Horizontal lines: add a top border starting on row 2 */
.library-item .grid > *:nth-child(n+3){
  border-top: 1px solid #000;
}

/* Vertical line: left border on the second column cells only */
.library-item .grid > *:nth-child(2n){
  border-left: 1px solid #000;
}

/* left column labels */
.library-item .label{
  font-family: var(--mono);
  font-size: 12px;
  color: #000;
  text-transform: lowercase;
}

/* right column values */
.library-item .value{
  font-family: var(--body);
  font-size: 12px;
  line-height: 1.35;
  color: #000;
  overflow-wrap: anywhere; /* long tokens won’t push track wider */
}

/* ===== Title row options ===== */

/* style first row (cells 1 & 2) as title, header of grid */
.library-item .grid > :nth-child(1),
.library-item .grid > :nth-child(2){
  font-family: var(--mono);
  font-weight: bold;
  font-size: 15px;
  text-transform: none;
  background: rgba(226, 71, 71, 0);
  color:#000000;
}
/* ensure first row has no top border */
.library-item .grid > :nth-child(-n+2){ border-top: 0; }

/* remove the extra top border on the next row after row-title */
.library-item .grid .row-title + .label,
.library-item .grid .row-title + .label + .value{
  border-top: 0;
}

/* ===== Visual cue styles (change these to adjust look) ===== */

/* Figure wrapper (inside the value cell) */
.library-item .visual figure{
  margin: 0;
  display: inline-block;
  position: relative;
  padding: var(--img-pad);          /* spacing vs. the grid cell */
  background: var(--visual-figure-bg); /* <— change here for wrapper bg */
  border: var(--visual-figure-border);  /* <— change here for wrapper border */
}

/* Image itself (frame/background + subtle tilt) */
.library-item .visual img{
  display: block;
  width: 70%;
  height: auto;
  max-width: 70%; 
  box-shadow: var(--img-shadow);
  background: var(--visual-img-bg);            /* <— change here for img bg */
  border: var(--visual-img-border);            /* <— change here for img border */
  transform: rotate(var(--tilt, 0.8deg)) translate(var(--dx, 0), var(--dy, 0)) skewX(var(--skew, 0.6deg));
  transform-origin: 50% 50%;
}

/* subtle per-card variation */
.library-item:nth-of-type(3n+1) .visual img{
  --tilt: -1.2deg; --dx: 2px; --dy: 1px; --skew: 0.8deg;
}
.library-item:nth-of-type(3n+2) .visual img{
  --tilt: 1deg; --dx: -2px; --dy: 0px; --skew: 0.4deg;
}
.library-item:nth-of-type(3n+3) .visual img{
  --tilt: -0.6deg; --dx: 1px; --dy: -1px; --skew: 0.5deg;
}

/* small caption/credits */
.library-item .visual figcaption{
  font-family: var(--mono);
  font-size: clamp(0.68rem, 0.9vw, 0.75rem);
  color: rgba(0,0,0,.8);
  margin-top: .35rem;
}

/* footer */
.library-foot{
  padding: 0;
  padding-top: 0.5rem;
}
.library-foot p{
  font-family: var(--mono);
  font-size: 9px;
  margin: 0;
  color: #000;
  display: inline-block;
  padding: 0;
}

/* links (inherit your cursor/hover from main.css if desired) */
.library a{
  color: #000;
  text-decoration: none;
}
.library a:hover{ color: #0037ff; }