/* ============================================================
   coreyshay.com · SUBPAGE chrome — "Life on a Rock" skin
   Extends lifeonarock.css. Link order: ../lifeonarock.css → sub-lifeonarock.css
   Re-styles the subpage-only classes in the warm sand / ocean / sunset palette.
   ============================================================ */

/* ---------- subpage top bar (always visible, slim) ---------- */
.subtop{
  position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px var(--gutter);
  background:linear-gradient(180deg,rgba(238,227,204,.94),rgba(238,227,204,0));
  backdrop-filter:blur(3px);
}
.subtop .back{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);white-space:nowrap;
  font-family:var(--type);font-weight:400;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
}
.subtop .back .arr{
  display:inline-block;width:26px;height:1px;background:currentColor;position:relative;transition:width .3s ease;
}
.subtop .back .arr::before{
  content:"";position:absolute;left:0;top:50%;width:7px;height:7px;
  border-left:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:translateY(-50%) rotate(45deg);transform-origin:left center;
}
.subtop .back:hover{color:var(--accent);}
.subtop .back:hover .arr{width:34px;}
.subtop .word{font-family:var(--serif);font-weight:800;font-size:17px;letter-spacing:.01em;color:var(--ink);white-space:nowrap;}
.subtop .word .dot{color:var(--accent);}

/* ---------- subpage hero / masthead ---------- */
.sub-hero{
  position:relative;overflow:hidden;
  padding:clamp(116px,18vh,184px) 0 clamp(40px,7vh,84px);
}
.sub-hero .eyebrow-row{
  display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:clamp(14px,2.4vh,26px);
}
.sub-title{
  font-family:var(--serif);font-weight:900;line-height:.88;letter-spacing:-.025em;
  margin:0;color:var(--ink);font-size:clamp(64px,12vw,180px);
}
.sub-title .dot{color:var(--accent);}
.sub-deck{
  font-family:var(--serif);font-weight:500;font-style:italic;
  font-size:clamp(22px,3vw,38px);line-height:1.26;letter-spacing:-.015em;color:var(--ink-2);
  max-width:24ch;margin:clamp(20px,3vh,34px) 0 0;text-wrap:balance;
}

/* ---------- generic section rhythm on subpages ---------- */
.sub-sec{position:relative;padding:clamp(48px,8vh,104px) 0;}
.sub-sec.tight{padding:clamp(30px,5vh,64px) 0;}
.section-label{
  display:flex;align-items:center;gap:20px;margin-bottom:clamp(26px,4vh,46px);
}
.section-label .kicker{white-space:nowrap;}
.section-label .rule{flex:1;height:1px;background:var(--hair);}
.section-label .no{white-space:nowrap;}

/* essay column */
.essay{max-width:62ch;}
.essay .body + .body{margin-top:1.1em;}

/* ---------- photo frame (torn warm edge around the photo) ---------- */
.frame{
  position:relative;z-index:1;overflow:hidden;
  background:
    linear-gradient(135deg,rgba(216,154,58,.22),rgba(44,115,130,.18)),
    linear-gradient(168deg,var(--card),var(--card-2));
  box-shadow:
    0 1px 0 rgba(255,255,255,.5) inset,
    0 2px 3px rgba(42,33,20,.12),
    0 18px 34px -14px rgba(42,33,20,.4);
}
.frame.deckle{padding:clamp(18px,2.8vw,40px);}
.bleed .frame.deckle{padding:0;box-shadow:none;}
body.imgs-rounded .frame{border-radius:14px;}
body.imgs-rect .frame{border-radius:0;}

/* ---------- favorites: numbered editorial index ---------- */
.index-list{display:flex;flex-direction:column;}
.index-row{
  display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:clamp(16px,3vw,46px);
  padding:clamp(18px,2.6vh,28px) 0;border-top:1px solid var(--hair);
}
.index-row:last-child{border-bottom:1px solid var(--hair);}
.index-row .ix-no{font-family:var(--serif);font-style:italic;font-weight:500;font-size:15px;color:var(--ink-soft);}
.index-row .ix-main{display:flex;flex-direction:column;gap:8px;}
.index-row .ix-name{
  font-family:var(--serif);font-weight:700;font-size:clamp(24px,3.2vw,40px);line-height:1.02;
  letter-spacing:-.015em;color:var(--ink);
}
.index-row .ix-desc{font-size:clamp(15px,1.2vw,17px);line-height:1.55;color:var(--ink-soft);max-width:54ch;text-wrap:pretty;}
.index-row .ix-aside{font-family:var(--type);font-weight:400;text-transform:uppercase;letter-spacing:.16em;
  font-size:11px;color:var(--sea-700);text-align:right;white-space:nowrap;}
@media (max-width:680px){
  .index-row{grid-template-columns:auto 1fr;}
  .index-row .ix-aside{grid-column:2;text-align:left;margin-top:4px;}
}

/* ---------- favorites: cards w/ thumb (ledger / gallery) ---------- */
.card-grid{display:grid;gap:clamp(20px,2.6vw,34px);}
.card-grid.c2{grid-template-columns:repeat(2,1fr);}
.card-grid.c3{grid-template-columns:repeat(3,1fr);}
.rcard{display:flex;flex-direction:column;gap:16px;}
.rcard .rcard-name{
  font-family:var(--serif);font-weight:700;font-size:clamp(22px,2vw,28px);line-height:1.04;
  letter-spacing:-.01em;color:var(--ink);
}
.rcard .rcard-desc{font-size:clamp(14px,1.05vw,16px);line-height:1.56;color:var(--ink-soft);text-wrap:pretty;}
.rcard .rcard-meta{margin-top:2px;}
@media (max-width:860px){.card-grid.c3{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.card-grid.c2,.card-grid.c3{grid-template-columns:1fr;}}

/* ---------- gallery (varied) ---------- */
.photo-grid{display:grid;gap:clamp(14px,1.8vw,24px);}
.photo-grid.g4{grid-template-columns:repeat(4,1fr);}
.photo-grid.g3{grid-template-columns:repeat(3,1fr);}
.photo-grid .span2{grid-column:span 2;}
.photo-grid .row2{grid-row:span 2;}
@media (max-width:860px){
  .photo-grid.g4{grid-template-columns:repeat(2,1fr);}
  .photo-grid.g3{grid-template-columns:repeat(2,1fr);}
}

/* ---------- sticky index rail (ledger variation) ---------- */
.ledger{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:clamp(40px,6vw,96px);align-items:start;}
.ledger .rail{position:sticky;top:clamp(96px,12vh,128px);display:flex;flex-direction:column;gap:26px;}
.ledger .rail .contents{display:flex;flex-direction:column;}
.ledger .rail .contents a{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;text-decoration:none;
  padding:11px 0;border-top:1px solid var(--hair);color:var(--ink-2);transition:color .25s ease;
  font-family:var(--serif);font-size:18px;
}
.ledger .rail .contents a:last-child{border-bottom:1px solid var(--hair);}
.ledger .rail .contents a .c-no{font-family:var(--type);font-size:11px;letter-spacing:.16em;color:var(--ink-soft);}
.ledger .rail .contents a:hover{color:var(--accent);}
.ledger .rail .factbox{display:flex;flex-direction:column;gap:14px;}
.ledger .rail .fact{display:flex;flex-direction:column;gap:3px;}
.ledger .rail .fact .k{font-family:var(--type);font-weight:400;text-transform:uppercase;letter-spacing:.18em;font-size:10px;color:var(--ink-soft);}
.ledger .rail .fact .v{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--ink);}
.ledger .feed{display:flex;flex-direction:column;}
.ledger-item{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,48px);align-items:center;
  padding:clamp(34px,5vh,60px) 0;border-top:1px solid var(--hair);
}
.ledger-item:first-child{border-top:none;padding-top:0;}
.ledger-item.rev .ld-photo{order:2;}
.ledger-item .ld-body{display:flex;flex-direction:column;gap:14px;}
.ledger-item .ld-no{font-family:var(--serif);font-style:italic;color:var(--ink-soft);font-size:15px;}
.ledger-item .ld-name{font-family:var(--serif);font-weight:700;font-size:clamp(26px,2.6vw,38px);line-height:1.02;letter-spacing:-.015em;color:var(--ink);}
.ledger-item .ld-desc{font-size:clamp(15px,1.1vw,17px);line-height:1.6;color:var(--ink-soft);text-wrap:pretty;}
@media (max-width:900px){
  .ledger{grid-template-columns:1fr;}
  .ledger .rail{position:static;}
  .ledger-item{grid-template-columns:1fr;}
  .ledger-item.rev .ld-photo{order:0;}
}

/* ---------- pull quote ---------- */
.pull{
  font-family:var(--serif);font-weight:500;font-style:italic;
  font-size:clamp(26px,4vw,52px);line-height:1.18;letter-spacing:-.02em;color:var(--ink);
  text-wrap:balance;max-width:18ch;margin:clamp(20px,4vh,40px) auto;text-align:center;
}
.pull .em{font-style:italic;color:var(--accent-2);}

/* ---------- next/prev sub footer ---------- */
.sub-foot{position:relative;overflow:hidden;padding:clamp(70px,12vh,150px) 0 clamp(40px,6vh,64px);text-align:center;}
.sub-foot .ff-kicker{display:block;margin-bottom:16px;}
.sub-foot .ff-title{
  font-family:var(--serif);font-weight:900;font-size:clamp(44px,8vw,120px);line-height:.9;
  letter-spacing:-.02em;margin:0;color:var(--ink);
}
.sub-foot .ff-title .dot{color:var(--accent);}
.sub-foot .ff-next{text-decoration:none;display:inline-block;margin-top:8px;}
.sub-foot .ff-next .ff-title{transition:color .3s ease;}
.sub-foot .ff-next:hover .ff-title{color:var(--accent);}
.sub-foot .nextlink{
  display:inline-flex;align-items:center;gap:14px;margin-top:clamp(26px,4vh,44px);text-decoration:none;
  font-family:var(--type);font-weight:400;text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:var(--ink);
  border-bottom:1.5px solid var(--sea-500);padding-bottom:5px;transition:color .3s,border-color .3s;
}
.sub-foot .nextlink:hover{color:var(--accent);border-color:var(--accent);}
.sub-foot .sign{margin-top:clamp(46px,8vh,86px);display:flex;justify-content:space-between;align-items:center;
  gap:16px;flex-wrap:wrap;border-top:1px solid var(--hair);padding-top:22px;text-align:left;}
.sub-foot .sign .word{font-family:var(--serif);font-weight:800;font-size:17px;}
.sub-foot .sign .word .dot{color:var(--accent);}
.sub-foot .sign .label{font-size:11px;}