/*******************************************************************************
CUSTOM STYLES — typography tuned smaller, inspired by s-m.ac
*******************************************************************************/

/* Tighter heading scale. Tufted defaults are 2.3 / 2.0 / 1.75 / 1.5 rem. */
h2 {
    font-size: 1.7rem;
    margin-top: 1.6rem;
    margin-bottom: 0.7rem;
}

h3 {
    font-size: 1.35rem;
    margin-top: 1.2rem;
    margin-bottom: 0.5rem;
}

h4 {
    font-size: 1.15rem;
    margin-top: 1rem;
    margin-bottom: 0.4rem;
}

h5 {
    font-size: 1.05rem;
    margin-top: 0.8rem;
    margin-bottom: 0.3rem;
}

/* Photo grid for Skiing / Travel pages. */
.photo-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    margin: 1em 0;
}
.photo-row .photo {
    flex: 1 1 0;
    margin: 0;
    min-width: 0;
}
.photo-row .photo img {
    width: 100%;
    height: auto;
    display: block;
}
.photo-row .photo figcaption {
    font-size: 0.8rem;
    text-align: center;
    margin-top: 0.3em;
    color: #555;
}
@media (max-width: 600px) {
    .photo-row { flex-direction: column; }
}

/* Slightly smaller margin/sidenote text so it sits lighter alongside body. */
.marginnote,
.sidenote,
.margin-note {
    font-size: 0.85rem;
}

/* Inline hover tooltip — used for pronunciation guide on the homepage. */
.hover-note {
    position: relative;
    cursor: help;
    border-bottom: 1px dotted #888;
    color: #555;
}
.hover-note .hover-tip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background: #2c2c2c;
    color: #f4f4f4;
    padding: 0.4em 0.7em;
    border-radius: 4px;
    font-size: 0.8rem;
    line-height: 1.35;
    white-space: normal;
    width: max-content;
    max-width: 18rem;
    z-index: 10;
    transition: opacity 0.15s ease-in-out;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.hover-note:hover .hover-tip,
.hover-note:focus .hover-tip {
    visibility: visible;
    opacity: 1;
}

/* Publication metadata (venue + links) under each paper title on Research page. */
p.pub-meta {
    font-size: 1rem;
    color: #555;
    margin-top: -0.2em;
    margin-bottom: 1rem;
    line-height: 1.45;
}

/* Table of contents at the top of long Writing posts. Built by toc.js. */
.toc {
    width: 55%;
    margin: 1.5rem 0 2.5rem;
    padding: 1rem 1.2rem;
    border: 1px solid var(--highlight-weak);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    line-height: 1.4;
}
.toc-title {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    color: #999;
    margin-bottom: 0.6em;
}
.toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.toc li {
    margin: 0.15em 0;
}
.toc li.toc-h3 {
    padding-left: 1.1rem;
    font-size: 0.85rem;
}
.toc a {
    color: #888;
    text-decoration: none;
    transition: color 0.12s ease;
}
.toc a:hover {
    color: var(--theme-text);
    text-decoration: underline;
}
@media (max-width: 760px) {
    .toc { width: auto; }
}

/* Scrollable news list on the homepage. */
.news-list {
    max-height: 14rem;
    overflow-y: auto;
    padding-left: 1.2rem;
    margin: 0.5rem 0 1rem;
    border-left: 2px solid #eee;
}
.news-list li {
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    line-height: 1.4;
}