/* Garulangit — persistent shrinking header.
   The tall hero branding (#header) collapses into a compact sticky bar
   once the user scrolls past it. Driven by body.is-scrolled, toggled
   from assets/js/header.js. Colors come from the --gl-* theme tokens so
   light/dark mode keep working. */

/* Sticky descendants need the wrapper to not be a scroll container.
   overflow:clip keeps the visual clipping of #wrapper > .bg while
   letting position:sticky stick to the viewport. */
#wrapper {
	overflow: hidden; /* fallback for very old browsers */
	overflow: clip;
}

#header {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 60;
	-moz-transition: height 0.35s ease, padding 0.35s ease;
	-webkit-transition: height 0.35s ease, padding 0.35s ease;
	-ms-transition: height 0.35s ease, padding 0.35s ease;
	transition: height 0.35s ease, padding 0.35s ease;
}

#header .logo {
	-moz-transition: font-size 0.35s ease, padding 0.35s ease, border-width 0.35s ease, border-color 0.2s ease-in-out, color 0.2s ease-in-out, opacity 0.5s ease, -moz-transform 0.5s ease, visibility 0.5s;
	-webkit-transition: font-size 0.35s ease, padding 0.35s ease, border-width 0.35s ease, border-color 0.2s ease-in-out, color 0.2s ease-in-out, opacity 0.5s ease, -webkit-transform 0.5s ease, visibility 0.5s;
	-ms-transition: font-size 0.35s ease, padding 0.35s ease, border-width 0.35s ease, border-color 0.2s ease-in-out, color 0.2s ease-in-out, opacity 0.5s ease, -ms-transform 0.5s ease, visibility 0.5s;
	transition: font-size 0.35s ease, padding 0.35s ease, border-width 0.35s ease, border-color 0.2s ease-in-out, color 0.2s ease-in-out, opacity 0.5s ease, transform 0.5s ease, visibility 0.5s;
}

/* Scrolled (compact) state. */
body.is-scrolled #header {
	height: 4.5rem;
	padding-bottom: 0;
	-moz-justify-content: center;
	-webkit-justify-content: center;
	-ms-justify-content: center;
	justify-content: center;
	background: rgba(var(--gl-page-rgb), 0.92);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

body.is-scrolled #header .logo {
	font-size: 1.05rem;
	letter-spacing: 0.075em;
	padding: 0.5rem 1rem;
	border-width: 3px !important;
}

/* Keep the desktop nav pinned right under the compact header. */
@media screen and (min-width: 981px) {
	body.is-scrolled #nav {
		position: -webkit-sticky;
		position: sticky;
		top: 4.5rem;
		margin-top: 0;
		z-index: 59;
		/* Solid chrome: the default navwash is translucent and page
		   content would show through while stuck. */
		background: rgba(var(--gl-page-rgb), 0.92);
		-webkit-backdrop-filter: blur(6px);
		backdrop-filter: blur(6px);
	}
}

/* Compact sizing on smaller screens (#nav itself is hidden <= 980px,
   the fixed MENU toggle stays reachable). */
@media screen and (max-width: 980px) {
	body.is-scrolled #header {
		height: 3.75rem;
	}
	body.is-scrolled #header .logo {
		font-size: 0.95rem;
		padding: 0.4rem 0.8rem;
		border-width: 2px !important;
	}
}

/* Anchored content must not hide under the sticky bars. */
[id] {
	scroll-margin-top: 10rem;
}

@media screen and (max-width: 980px) {
	[id] {
		scroll-margin-top: 5rem;
	}
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
	#header,
	#header .logo {
		-moz-transition: none;
		-webkit-transition: none;
		-ms-transition: none;
		transition: none;
	}
}

/* About page: portrait beside the intro text so the photo doesn't
   fill the whole screen. Stacks vertically on small screens. */
.about-hero {
	display: -moz-flex;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-moz-align-items: flex-start;
	-webkit-align-items: flex-start;
	-ms-align-items: flex-start;
	align-items: flex-start;
	gap: 2.5rem;
	margin: 0 0 2rem 0;
}
.about-hero .about-photo {
	-moz-flex: 0 0 300px;
	-webkit-flex: 0 0 300px;
	-ms-flex: 0 0 300px;
	flex: 0 0 300px;
	margin: 0;
}
.about-hero .about-photo img {
	width: 100%;
	height: auto;
	display: block;
}
.about-hero .about-intro {
	-moz-flex: 1;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
	min-width: 0;
}
.about-hero .about-intro h3:first-child {
	margin-top: 0;
}
@media screen and (max-width: 736px) {
	.about-hero {
		-moz-flex-direction: column;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		gap: 1.5rem;
	}
	.about-hero .about-photo {
		-moz-flex: 0 0 auto;
		-webkit-flex: 0 0 auto;
		-ms-flex: 0 0 auto;
		flex: 0 0 auto;
		width: 100%;
		max-width: 300px;
		margin: 0 auto;
	}
}

/* Editorial publication dates: compact metadata, visually secondary to
   the title. Muted token keeps contrast in light and dark modes. */
.pubdate {
	margin: 0.75rem 0 0 0;
	font-size: 0.85rem;
	letter-spacing: 0.05em;
	line-height: 1.4;
}
.pubdate time {
	color: var(--gl-muted);
}
header.major .pubdate {
	text-align: center;
}

/* Dynamic page title: a second, smaller line beneath the ANDHIKAFBRY
   brand. Rendered as a plain span (not a heading) so it never competes
   with the document outline. Each page carries its own title in the
   markup; the compact sticky state keeps it visible, truncated. */
#header .logo .page-title {
	display: block;
	margin-top: 0.55rem;
	font-family: "Source Sans Pro", Helvetica, sans-serif;
	font-size: 0.8rem;
	font-weight: 400;
	letter-spacing: 0.14em;
	line-height: 1.4;
	text-align: center;
	color: var(--gl-muted);
}
/* Compact sticky header: keep the title on one truncated line so it
   never overflows or collides with the fixed MENU toggle on mobile. */
body.is-scrolled #header .logo .page-title {
	margin-top: 0.3rem;
	font-size: 0.6rem;
	letter-spacing: 0.12em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: min(58vw, 26rem);
}
@media screen and (max-width: 980px) {
	body.is-scrolled #header .logo .page-title {
		font-size: 0.56rem;
		max-width: 60vw;
	}
	/* The MENU toggle is fixed at the top-right; keep the compact
	   lockup sized to the brand only so the frame can never reach it.
	   width:0 keeps the title out of the anchor's shrink-to-fit width,
	   min-width:100% then fills the brand-sized frame with ellipsis. */
	body.is-scrolled #header .logo .page-title {
		width: 0;
		min-width: 100%;
		max-width: 100%;
	}
}

/* ---- Project cards (projects.html) ---- */

/* Tech stack tags with icons. */
.tech-tags {
	list-style: none;
	padding-left: 0;
	margin: 0 0 1.5rem 0;
	display: -moz-flex;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-moz-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.tech-tags li {
	display: -moz-inline-flex;
	display: -webkit-inline-flex;
	display: -ms-inline-flex;
	display: inline-flex;
	-moz-align-items: center;
	-webkit-align-items: center;
	-ms-align-items: center;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--gl-muted);
	border: 1px solid var(--gl-line);
	border-radius: 999px;
	padding: 0.35rem 0.8rem;
}
.tech-tags .icon {
	font-size: 0.9rem;
}
.tech-tags .icon::before {
	color: var(--gl-accent);
}

/* Read-more expander for project cards. */
.read-more {
	margin: 0 0 1.75rem 0;
	border-top: solid 1px var(--gl-line);
	padding-top: 1.25rem;
}
.read-more summary {
	display: inline-block;
	list-style: none;
	cursor: pointer;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gl-accent);
}
.read-more summary::-webkit-details-marker {
	display: none;
}
.read-more summary::marker {
	content: "";
}
.read-more summary .less {
	display: none;
}
.read-more[open] summary .more {
	display: none;
}
.read-more[open] summary .less {
	display: inline;
}
.read-more summary:hover {
	text-decoration: underline;
}
.read-more summary:focus-visible {
	outline: 2px solid var(--gl-accent);
	outline-offset: 3px;
	border-radius: 2px;
}
.read-more .read-more-body h4:first-child {
	margin-top: 1.5rem;
}

/* Footer contact sections (Location/Email/Social): rapatkan padding vertikal.
   Lebar dibiarkan mengikuti layout (tidak di-override). */
#footer > section.split.contact > section{
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
}
@media screen and (max-width: 980px){
	#footer > section.split.contact > section,
	#footer > section.split.contact > section:first-child,
	#footer > section.split.contact > section:last-child{
		padding-top: 1.5rem;
		padding-bottom: 1.5rem;
	}
}
@media screen and (max-width: 736px){
	#footer > section.split.contact > section,
	#footer > section.split.contact > section:first-child,
	#footer > section.split.contact > section:last-child{
		padding-top: 1.25rem;
		padding-bottom: 1.25rem;
	}
}

/* Professional experience timeline (About page).
   Two-column LinkedIn-style layout: narrow date column + wide content column,
   subtle vertical line with markers. Widths stay in the normal flow. */
.exp-timeline{
	position:relative;
	margin:0 0 2rem;
}
.exp-timeline::before{
	content:"";
	position:absolute;
	top:.5rem;
	bottom:.5rem;
	left:10.25rem;
	width:1px;
	background:var(--gl-line);
}
.exp-entry{
	position:relative;
	display:grid;
	grid-template-columns:8.5rem 1fr;
	column-gap:3.5rem;
	align-items:start;
	padding:1.4rem 0;
}
.exp-entry::before{
	content:"";
	position:absolute;
	left:10.25rem;
	top:1.9rem;
	width:9px;
	height:9px;
	margin-left:-4.5px;
	border-radius:50%;
	background:var(--gl-sheet);
	border:2px solid var(--gl-accent);
}
.exp-date{
	font-size:.78rem;
	font-weight:600;
	letter-spacing:.08em;
	text-transform:uppercase;
	color:var(--gl-muted);
	line-height:1.7;
}
.exp-date span{ display:block; }
/* Company row: name left, location pinned to the far-right edge. */
.exp-company-row{
	display:flex;
	justify-content:space-between;
	align-items:baseline;
	gap:1rem;
	margin:0 0 .2rem;
}
.exp-company-row h4{
	margin:0;
	min-width:0;
	font-size:1.02rem;
	line-height:1.4;
	font-weight:700;
	color:var(--gl-ink);
}
.exp-loc{
	flex-shrink:0;
	margin-left:auto;
	font-size:.8rem;
	font-weight:400;
	font-style:italic;
	color:var(--gl-muted);
	white-space:nowrap;
}
.exp-body .exp-title{
	margin:0 0 .2rem;
	font-size:.95rem;
	color:var(--gl-ink);
}
.exp-body .exp-meta{
	margin:0 0 .55rem;
	font-size:.85rem;
	color:var(--gl-muted);
}
.exp-body .exp-desc{
	margin:0 0 .8rem;
	font-size:.95rem;
	line-height:1.75;
	color:var(--gl-ink);
}
.exp-tags{
	list-style:none;
	padding:0;
	margin:0;
	display:flex;
	flex-wrap:wrap;
	gap:.4rem;
}
.exp-tags li{
	font-size:.7rem;
	font-weight:600;
	letter-spacing:.05em;
	text-transform:uppercase;
	color:var(--gl-muted);
	border:1px solid var(--gl-line);
	border-radius:999px;
	padding:.28rem .75rem;
}
@media screen and (max-width: 736px){
	.exp-entry{
		grid-template-columns:1fr;
		row-gap:.35rem;
		padding:1.1rem 0;
	}
	.exp-timeline::before,
	.exp-entry::before{ display:none; }
	.exp-date{ font-size:.75rem; }
	.exp-date span{ display:inline; }
	/* On narrow screens the location may wrap under a long company name. */
	.exp-company-row{ flex-wrap:wrap; row-gap:.15rem; }
}