/* ── the climbing site ───────────────────────────────────────────────
   Shared by index / log / list / stats. One look, four short pages. */

:root{
  --bar:#3a5a40;
  --bg:#f4f1e9; --card:#fff; --ink:#211f1b; --soft:#6f6a5f; --line:#e2ddd0;
  --clay:#b14f2a;
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;
  --serif:"Newsreader",Georgia,serif;
  /* grades go light to dark as they get harder — no key needed */
  --g-easy:#5d6b5f; --g10:#3f6b46; --g11:#7a6412; --g12:#b5651d; --g13:#a83a1f; --g14:#7d2412;
}
*{box-sizing:border-box;margin:0}
/* The log page sets display:flex on .ledger and .tabs, which beats the default
   [hidden] rule — so hiding them from the markup silently did nothing. */
[hidden]{display:none!important}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;
     -webkit-font-smoothing:antialiased}
a{color:var(--clay);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1060px;margin:0 auto;padding:0 1.5rem}

/* ── hero ── */
.hero{position:relative;min-height:clamp(340px,52vh,480px);display:flex;align-items:flex-end;
      background:#1a1815 center 42%/cover no-repeat;color:#fff}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,18,15,.28) 0%,rgba(20,18,15,0) 28%,rgba(20,18,15,.6) 58%,rgba(20,18,15,.94) 100%)}
.hero .wrap{position:relative;z-index:1;width:100%;padding-top:3rem;padding-bottom:3.6rem}
.hero .wrap>*{text-shadow:0 1px 12px rgba(15,13,10,.55)}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.6rem,6.5vw,4.4rem);line-height:1;
         letter-spacing:-.02em}
.kicker{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:#cbbfae;font-weight:600}

.tally{display:flex;gap:clamp(1.4rem,5vw,3.6rem);margin-top:1.8rem;flex-wrap:wrap;align-items:flex-end}
.tally b{display:block;font-size:clamp(1.6rem,3vw,2rem);font-weight:700;line-height:1;
         letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.tally .lead b{font-size:clamp(2.6rem,6vw,4rem)}
.tally span{display:block;font-size:.82rem;color:#c6b9a7;margin-top:.35rem}

/* ── next out: the one card with a border ── */
.next{margin:-1.9rem auto 0;position:relative;z-index:2;background:var(--card);
      border:1px solid var(--line);border-left:5px solid var(--clay);border-radius:4px;
      box-shadow:0 12px 30px -18px rgba(33,31,27,.5);
      padding:.95rem 1.3rem;display:flex;gap:1rem;align-items:baseline;flex-wrap:wrap}
.next .in{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--clay);font-weight:700}
.next .where{font-size:1.3rem;font-weight:700;letter-spacing:-.01em}
.next .what{color:var(--soft);font-size:.92rem}
.next .when{margin-left:auto;color:var(--soft);font-size:.85rem}

/* ── section headings ── */
section{margin:3.2rem 0}
.head{display:flex;align-items:baseline;gap:1rem;border-bottom:1px solid var(--ink);
      padding-bottom:.45rem;margin-bottom:1.2rem}
.head h2{font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700}
.head .more{margin-left:auto;font-size:.82rem}

/* ── the guidebook line: name, leader, grade ── */
.routes{border-top:1px solid var(--line)}
.crag{font-size:.82rem;color:var(--soft);padding:1.1rem 0 .3rem;font-weight:600}
.crag i{font-style:normal;color:#bab2a1}
.rt{display:flex;align-items:baseline;gap:.6rem;padding:.38rem 0;border-bottom:1px solid var(--line)}
.rt .nm{font-weight:600;font-size:1.02rem;letter-spacing:-.005em;white-space:nowrap}
.rt .dot{flex:1;border-bottom:1px dotted #c9c2b1;transform:translateY(-.28em);min-width:1.2rem}
.rt .meta{color:#948d80;font-size:.78rem;white-space:nowrap;font-variant-numeric:tabular-nums;
           opacity:.75;transition:opacity .12s}
.rt:hover .meta{opacity:1}
/* filled = sent, outline = been on it, plain = not yet. No word needed. */
.rt .tag{display:none}
.g.try{background:transparent!important;box-shadow:inset 0 0 0 1.5px currentColor}

.g{font-weight:700;font-size:.88rem;font-variant-numeric:tabular-nums;letter-spacing:-.01em;
   padding:.08rem .4rem;border-radius:3px;white-space:nowrap;min-width:3.2em;text-align:center;display:inline-block}
.g.easy{color:var(--g-easy);background:#e8e6dc}
.g.g10{color:var(--g10);background:#e0eadf}
.g.g11{color:var(--g11);background:#efe8cd}
.g.g12{color:var(--g12);background:#f7e6d2}
.g.g13{color:var(--g13);background:#f7ddd4}
.g.g14{color:#fff;background:var(--g14)}

/* ── last day out ── */
.day{display:grid;grid-template-columns:1.1fr .9fr;gap:2.2rem;align-items:start}
.day .when{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--soft)}
.day h3{font-family:var(--serif);font-weight:400;font-size:2.2rem;line-height:1.05;margin:.25rem 0 .1rem;
        letter-spacing:-.02em}
.day .with{color:var(--soft);font-size:.92rem;margin-bottom:1rem}
.day p{font-family:var(--serif);font-size:1.1rem;line-height:1.55;max-width:46ch;color:#332f28}
.day figure{max-width:300px;margin-left:auto}
.day img,.day video{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:3px;display:block;background:#1a1815}
.day .wide img,.day .wide video{aspect-ratio:4/3}
.day figcaption{font-size:.72rem;color:var(--soft);margin-top:.45rem;letter-spacing:.08em;text-transform:uppercase}

/* ── the log: one dense row per day ── */
.days{border-top:1px solid var(--line)}
.d{display:grid;grid-template-columns:6.5rem 1fr auto;gap:1rem;align-items:baseline;
   padding:.72rem 0;border-bottom:1px solid var(--line)}
.d:hover{background:#faf8f2}
.d .dt{color:var(--soft);font-size:.82rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.d .pl{font-weight:700;font-size:1rem}
.d .who{color:var(--soft);font-size:.85rem;font-weight:400}
.d .gs{display:flex;gap:.25rem;flex-wrap:wrap;justify-content:flex-end}

/* filter row — no labels, the buttons say it */
.filters{display:flex;gap:.4rem;flex-wrap:wrap;margin:1.2rem 0}
.filters button{font:inherit;font-size:.85rem;font-weight:600;color:var(--soft);background:var(--card);
  border:1px solid var(--line);border-radius:999px;padding:.35rem .85rem;cursor:pointer}
.filters button.on{background:var(--bar);border-color:var(--bar);color:#fff}
.search{width:100%;font:inherit;font-size:1rem;padding:.7rem .95rem;border:1px solid var(--line);
        border-radius:4px;background:var(--card)}

/* ── stats ── */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);
      border:1px solid var(--line);border-radius:4px;overflow:hidden}
.grid .c{background:var(--card);padding:1.1rem 1.2rem}
.grid b{display:block;font-size:2rem;font-weight:700;line-height:1.05;letter-spacing:-.03em;
        font-variant-numeric:tabular-nums}
.grid span{display:block;font-size:.85rem;color:var(--soft);margin-top:.3rem}
.grid small{display:block;font-size:.8rem;color:var(--soft);margin-top:.15rem;font-weight:400;letter-spacing:0;text-transform:none}

/* A fixed height was the bug behind the year labels appearing INSIDE the bars:
   the columns are taller than it — a long route name wraps to three lines on a
   phone — and everything past it spilled out of the bottom of the chart and
   over the row of years underneath. min-height keeps a thin year from looking
   collapsed; the chart takes the height it actually needs, and the columns
   still bottom-align on the same line because the grid row does that. */
.arc{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem;align-items:end;min-height:265px}
.yr{display:flex;flex-direction:column;justify-content:flex-end;height:100%;text-align:center;gap:.45rem}
.yr .bar{background:#dcd6c6;border-radius:2px 2px 0 0}
.yr .peak{font-weight:700;font-size:1rem;font-variant-numeric:tabular-nums}
.yr .days{font-size:.7rem;color:var(--soft)}
.arclabels{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem}
.yrlabel{font-size:.72rem;letter-spacing:.14em;color:var(--soft);text-align:center;padding-top:.45rem;
         border-top:1px solid var(--line)}

/* horizontal bar list — crags, partners */
.bars{display:grid;gap:.55rem}
.bl{display:grid;grid-template-columns:9rem 1fr 2.5rem;gap:.8rem;align-items:center;font-size:.92rem}
.bl .t{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bl .b{height:9px;background:#dcd6c6;border-radius:2px}
.bl .b i{display:block;height:100%;background:var(--bar);border-radius:2px}
.bl .v{text-align:right;color:var(--soft);font-variant-numeric:tabular-nums;font-size:.85rem}

/* ── full-bleed photo band ── */
.band{position:relative;height:clamp(180px,26vw,280px);margin:3.2rem 0;
      background:#1a1815 center 45%/cover no-repeat;display:flex;align-items:flex-end}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(20,18,15,.82))}
.band .cap{position:relative;z-index:1;width:100%;max-width:1060px;margin:0 auto;padding:0 1.5rem 1.4rem;color:#fff}
.band .cap strong{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,3.2vw,2.1rem)}

/* ── the long list runs in two balanced columns, one screenful ── */
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:0 2.6rem}
.twocol .col>.grp:first-child .crag{padding-top:0}
@media(max-width:820px){.twocol{grid-template-columns:1fr}}

footer{border-top:1px solid var(--line);margin-top:3rem;padding:1.6rem 0 3rem;color:var(--soft);font-size:.82rem}
.mockup{background:#fffdf6;border:1px dashed #cdbf9f;border-radius:4px;padding:.7rem 1rem;
        font-size:.82rem;color:#5f5744;margin-top:1rem}

@media(max-width:820px){
  .day{grid-template-columns:1fr;gap:1.3rem}
  .day figure{order:-1;max-width:240px;margin:0 auto}
  .arc,.arclabels{gap:.3rem}
  .d{grid-template-columns:1fr auto;gap:.3rem .8rem}
  .d .dt{grid-column:1/-1;order:-1}
  .bl{grid-template-columns:7rem 1fr 2.3rem}
}
@media(max-width:600px){
  .next{display:grid;gap:.1rem;padding:.9rem 1.1rem}
  .next .when{margin-left:0}
  .rt .meta{display:none}
}

/* ── media: photos and clips in one stream, newest first ── */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.9rem}
.tile{margin:0;position:relative}
.tile img,.tile video{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
                      border-radius:3px;background:#1a1815}
.tile figcaption{font-size:.76rem;color:var(--soft);margin-top:.35rem}
/* a clip announces itself without autoplaying — three 85MB files would not be kind */
.tile.vid .play{position:absolute;left:.5rem;top:.5rem;width:1.6rem;height:1.6rem;border-radius:50%;
  background:rgba(20,18,15,.62);display:grid;place-items:center;pointer-events:none}
.tile.vid .play::after{content:"";border-left:.45rem solid #fff;border-top:.28rem solid transparent;
  border-bottom:.28rem solid transparent;margin-left:.12rem}
.tile.vid video{cursor:pointer}
.tile.playing .play{opacity:0}
@media(max-width:600px){.tiles{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.6rem}}

/* page title — every page has one now, not just home */
h1.ph{font-family:var(--serif);font-weight:400;font-size:2.2rem;letter-spacing:-.02em;
      margin:2rem 0 0;line-height:1.1}

@media(max-width:600px){
  /* the place list wrapped to a lone orphaned word over the photo */
  .hero .kicker{display:none}
}

@media(max-width:600px){
  /* the place list wrapped to one orphaned word across the photo */
  .hero .kicker{display:none}
}

/* ── pieces the live pages need that the mockup didn't ── */
.breadcrumb{color:var(--soft);font-size:.82rem;margin:1.4rem 0 0}
mark{background:#f6e7c6;color:inherit;border-radius:2px;padding:0 .12em}
.empty{color:var(--soft);padding:2rem 0;text-align:center}
.count{color:var(--soft);font-size:.85rem;margin:.2rem 0 .9rem}
.rt .fav,.d .fav{color:var(--star)}
:root{--star:#966400}
/* a day the log can be deep-linked to lights up when you arrive on it */
:target{scroll-margin-top:5rem}
/* and a section somebody linked to keeps its own heading: the nav bar is
   sticky, so landing flush with the top of a section puts what it is called
   underneath the bar. This applies to the scroll, not just to :target, because
   the stats page builds its sections after the browser has given up looking
   for the fragment and scrolls to them itself. */
section[id]{scroll-margin-top:4.5rem}
.d:target,.trip:target{background:#fdf6e3;box-shadow:inset 3px 0 0 var(--clay)}

/* ── the two days behind the newest one ──
   Compact on purpose: their job is to say what the last couple of weeks looked
   like, not to be read in full. Side by side on a wide screen so three days
   cost roughly what one used to. */
.pastdays{display:grid;grid-template-columns:1fr 1fr;gap:2.2rem;margin-top:2.4rem;
          padding-top:1.6rem;border-top:1px solid var(--line)}
.pastday .when{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}
.pastday h4{font-family:var(--serif);font-weight:400;font-size:1.5rem;line-height:1.1;
            margin:.2rem 0 .1rem;letter-spacing:-.01em}
.pastday h4 a{color:var(--ink)}
.pastday h4 a:hover{color:var(--clay);text-decoration:none}
.pastday .with{color:var(--soft);font-size:.88rem;margin-bottom:.7rem}
.pastday .pastnote{font-family:var(--serif);font-size:1rem;line-height:1.5;color:#4a453c;
  margin-top:.7rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:820px){.pastdays{grid-template-columns:1fr;gap:1.8rem}}

/* ── the sign-in, at the foot of the room page ──
   It used to sit on the log, which meant the archive — the page a stranger is
   most likely to land on — ended a search result with a password prompt. It
   lives here now, under the footer rule, last thing on the page: out of the way
   of anyone reading, and in one known place when he needs it. Signing in is
   what puts the Add tab in the bar, so this and ClimbNav.refresh() are two ends
   of the same gesture. */
#ownerbar{margin:2.4rem 0 0;padding-top:1.6rem;border-top:1px solid var(--line)}
.ownerform{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.ownerlabel{font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
            color:var(--soft)}
.ownerform input{font:inherit;font-size:.9rem;padding:.4rem .6rem;min-height:42px;
  border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);flex:0 1 13rem}
.ownerform button{font:inherit;font-size:.85rem;font-weight:700;cursor:pointer;min-height:42px;
  padding:.4rem 1rem;border:1px solid var(--bar);border-radius:8px;background:var(--bar);color:#fff}
.ownermsg{flex-basis:100%;color:var(--clay);font-size:.8rem;min-height:1.1em}
.signedin{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;background:var(--bar);color:#fff;
  border-radius:9px;padding:.6rem .9rem;font-size:.88rem}
.signedin a{color:#fff;text-decoration:underline}
.signedin button{font:inherit;font-size:.8rem;cursor:pointer;margin-left:auto;padding:.25rem .8rem;
  border:1px solid #fff;border-radius:6px;background:#fff;color:var(--bar);font-weight:700}

/* ── the tally numbers go somewhere ──
   Anchors that keep the headline's looks: a number that stays a number and a
   label that stays a label. The cursor and a faint lift on the label are the
   only tells, because four underlined links across the hero photo would read as
   navigation rather than as a count of his climbing. */
.tally a{color:inherit;text-decoration:none;cursor:pointer}
.tally a:hover{text-decoration:none}
.tally a:hover span{color:#efe6d8}
.tally a:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:3px}

/* ── the year chart is a way into the log ──
   Grade, name and bar all point at the day it happened. They inherit rather
   than colour themselves: the grade already carries the band colour and a bar
   that turns blue on hover stops reading as a bar. */
.yr a{color:inherit;text-decoration:none}
.yr a:hover{text-decoration:none}
.yr .route{font-size:.92rem;line-height:1.25}
.yr a.route:hover,.yr a.peak:hover{color:var(--clay)}
.yr a.bar:hover{filter:brightness(.93)}
.yr a.bar{display:block}
/* the boulder of the year: its grade, and the name it went with */
.yr .bould{display:block;font-size:.7rem;color:var(--soft)}
.yr .bould .bn{display:block;margin-top:.15rem;font-size:.76rem;color:var(--ink);line-height:1.2}
.yr a.bould:hover .bn{color:var(--clay)}

/* a guidebook line that is a link is still a guidebook line */
a.rt{color:inherit;text-decoration:none}
a.rt:hover{text-decoration:none}
a.rt:hover .nm{color:var(--clay)}