/*
Theme Name: Bench
Theme URI: https://www.manu.co.in/
Author: Manu Mathew
Author URI: https://www.manu.co.in/
Description: Portfolio for Manu Mathew. An engineering-desk layout for a technical lead in platform engineering.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 8.0
Text Domain: bench
*/

:root {
  --ink: #101418;
  --muted: #5b6570;
  --line: #e3e7ec;
  --blue: #0b63ce;
  --sans: "Public Sans", "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
body { margin: 0; background: #fff; color: var(--ink); font-family: var(--sans); line-height: 1.5; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--blue); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.wrap { width: min(1160px, calc(100% - 7vw)); margin: 0 auto; }
.nav { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; font-weight: 650; }
.nav ul { display: flex; gap: 1.15rem; list-style: none; margin: 0; padding: 0; }
.nav a[aria-current="page"] { color: var(--blue); }
.hero { display: grid; grid-template-columns: .9fr 1.15fr; gap: 2rem; align-items: center; padding-bottom: 2rem; }
.identity { display: block; }
.hero .portrait { width: 148px; height: 148px; object-fit: cover; object-position: center 18%; border-radius: 16px; display: block; margin: 0 0 1rem; }
.hero img { width: 100%; height: min(68vh, 560px); object-fit: cover; display: block; }
.kicker, .meta { font-family: var(--mono); font-size: .78rem; color: var(--muted); margin: 0; }
h1 { margin: .2rem 0 .5rem; font-size: clamp(3rem, 5.5vw, 4.6rem); letter-spacing: -.045em; line-height: .95; font-weight: 700; }
.stack { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1rem 0 0; padding: 0; list-style: none; font-family: var(--mono); font-size: .8rem; }
.stack li { background: #f2f5f8; padding: .28rem .5rem; }
.section h2 { font-size: 1.35rem; margin: .4rem 0 .3rem; }
.timeline article { display: grid; grid-template-columns: 8.2rem 1fr; gap: 1rem; padding: .85rem 0; border-top: 1px solid var(--line); }
.timeline h3 { margin: 0; }
.timeline p { margin: .12rem 0 0; color: var(--muted); }
.latest a, .posts a { display: grid; grid-template-columns: 8rem 6.5rem 1fr; gap: .8rem; padding: .8rem 0; border-top: 1px solid var(--line); align-items: baseline; }
.posts a { grid-template-columns: 1fr; }
.posts h2 { margin: .15rem 0; font-size: 1.25rem; }
#contact { display: flex; justify-content: space-between; padding: 1rem 0 2.4rem; border-top: 1px solid var(--ink); font-weight: 650; margin-top: 1rem; }
.article { max-width: 42rem; padding-bottom: 3rem; }
.article h1 { font-size: clamp(2rem, 4vw, 3rem); }
.article pre { background: #101418; color: #e7eef5; padding: 1rem; overflow: auto; font-family: var(--mono); font-size: .86rem; line-height: 1.6; }
.about p, .faq p { max-width: 46rem; }
.quote { margin: 0; padding: .9rem 0; border-top: 1px solid var(--line); }
.quote p { margin: 0; }
.quote footer { margin-top: .35rem; color: var(--muted); font-size: .92rem; }
.faq h3 { margin: 0 0 .25rem; font-size: 1.05rem; }
.faq article { padding: .85rem 0; border-top: 1px solid var(--line); }
.article p, .article li { max-width: 42rem; }
.article img, .article iframe, .article video { max-width: 100%; height: auto; }
.article code { font-family: var(--mono); font-size: .92em; }
.nav-links { display: flex; flex-wrap: wrap; gap: .8rem; padding: 1.2rem 0 2rem; font-family: var(--mono); font-size: .82rem; }
.page-numbers.current { color: var(--blue); }
@media (max-width: 860px) {
  .hero, .timeline article, .latest a { grid-template-columns: 1fr; }
  .hero .portrait { width: 120px; height: 120px; }
  .hero img { height: 280px; }
  .nav { flex-direction: column; align-items: flex-start; gap: .6rem; }
}