/**
 * Resources ("Field Notes") archive — masthead, search/filter controls,
 * featured entry, card grid.
 */

.masthead { padding: 170px 0 36px; }
.masthead .top { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; border-bottom: 1px solid var(--ink); padding-bottom: 26px; }
.masthead h1 { font: 800 clamp(40px, 6vw, 86px)/0.95 var(--serif); letter-spacing: -.03em; }
.masthead h1 em { font-style: italic; font-weight: 500; }
.masthead .sub { max-width: 40ch; font: 400 16px/1.6 var(--sans); color: var(--ink-soft); text-align: right; }
.masthead .issue { margin-top: 18px; display: flex; justify-content: space-between; font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--sec); }

@media (max-width: 680px) {
	.masthead .sub { text-align: left; }
}

.controls {
	/* position: sticky; top: 0; z-index: 500; */
	background: color-mix(in srgb, var(--bg) 92%, transparent);
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
	padding: 18px 0; border-bottom: 1px solid var(--line);
}
.controls .row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.search {
	flex: 1; min-width: 220px; display: flex; align-items: center; gap: 11px;
	padding: 13px 18px; border: 1px solid var(--line); border-radius: 999px;
	background: var(--paper); transition: border-color .2s, box-shadow .2s;
}
.search:focus-within { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(10, 10, 10, .05); }
.search svg { flex: none; }
.search input { border: 0; outline: 0; background: none; font: 400 15px var(--sans); color: var(--ink); width: 100%; }
.search input::placeholder { color: var(--sec); }
.cats { display: flex; gap: 8px; flex-wrap: wrap; }
.cat {
	padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper);
	cursor: pointer; font: 500 13px var(--sans); color: var(--ink-soft); transition: all .2s var(--ease); white-space: nowrap;
}
.cat:hover { border-color: var(--ink); color: var(--ink); }
.cat.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.barhead #sortToggle { border: 0; background: none; padding: 0; font: inherit; cursor: pointer; }

.featured { padding: 54px 0 10px; }
.feat {
	display: grid; grid-template-columns: 1.15fr 1fr; gap: 0;
	border: 1px solid var(--line); border-radius: 22px; overflow: hidden;
	background: var(--paper); transition: box-shadow .4s var(--ease), transform .4s var(--ease);
}
.feat:hover { box-shadow: 0 26px 70px rgba(10, 10, 10, .12); transform: translateY(-3px); }
.feat .img { position: relative; min-height: 420px; background: linear-gradient(150deg, #15140f, #23211b 55%, #34302a); overflow: hidden; }
.feat .img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feat .img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 10, 10, .1), rgba(10, 10, 10, .6)); }
.feat .img .tx { position: absolute; inset: 0; z-index: 1; padding: 40px; display: flex; flex-direction: column; justify-content: space-between; color: #efeee9; }
.feat .img .badge { align-self: flex-start; font: 600 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; border: 1px solid rgba(255, 255, 255, .34); padding: 7px 13px; border-radius: 999px; }
.feat .img .hand { font: 600 40px/1.1 var(--hand); color: rgba(255, 255, 255, .9); max-width: 11ch; }
.feat .meat { padding: 48px 44px; display: flex; flex-direction: column; justify-content: center; }
.feat .meat .k { font: 600 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--sec); }
.feat .meat h2 { margin-top: 18px; font: 700 clamp(26px, 3vw, 40px)/1.08 var(--serif); letter-spacing: -.02em; }
.feat .meat p { margin-top: 18px; font: 400 16px/1.62 var(--sans); color: var(--ink-soft); max-width: 46ch; }
.feat .meat .by { margin-top: 26px; display: flex; align-items: center; gap: 12px; font: 500 13px var(--sans); color: var(--ink); }
.feat .meat .by .av { width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font: 600 12px var(--serif); }
.feat .meat .by .sep { color: var(--line); }
.feat .meat .by .rt { color: var(--sec); font-family: var(--mono); font-size: 12px; }

@media (max-width: 820px) {
	.feat { grid-template-columns: 1fr; }
	.feat .img { min-height: 260px; }
}

.lib { padding: 46px 0 30px; }
.lib .barhead { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 16px; margin-bottom: 34px; }
.lib .barhead .t { font: 600 13px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--sec); }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }

@media (max-width: 980px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid { grid-template-columns: 1fr; } }

.rc {
	border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--paper);
	display: flex; flex-direction: column; transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s;
}
.rc__link { display: flex; flex-direction: column; flex: 1; color: inherit; }
.rc:hover { transform: translateY(-4px); box-shadow: 0 22px 54px rgba(10, 10, 10, .1); border-color: #dadad6; }
.rc .thumb { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.rc .thumb .g, .rc .thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.rc:hover .thumb .g, .rc:hover .thumb img { transform: scale(1.05); }

/* Deterministic fallback backgrounds for cards without a Featured Image,
   cycling through the same 9-tone palette the archive always used. */
.g-0 { background: linear-gradient(150deg, #15140f, #2a2820); }
.g-1 { background: linear-gradient(150deg, #1a2420, #2c3a33); }
.g-2 { background: linear-gradient(150deg, #241a1a, #3a2c2c); }
.g-3 { background: linear-gradient(150deg, #1c1c24, #2f2f3c); }
.g-4 { background: linear-gradient(150deg, #241f15, #3a3220); }
.g-5 { background: linear-gradient(150deg, #15201f, #283a38); }
.g-6 { background: linear-gradient(150deg, #201a24, #332a3a); }
.g-7 { background: linear-gradient(150deg, #1f1f1f, #333); }
.g-8 { background: linear-gradient(150deg, #22201a, #383528); }
.rc .thumb .cn {
	position: absolute; left: 16px; top: 16px; font: 600 10px var(--mono); letter-spacing: .14em; text-transform: uppercase;
	color: #fff; background: rgba(0, 0, 0, .34); backdrop-filter: blur(4px); padding: 6px 11px; border-radius: 999px;
}
.rc .thumb .hd { position: absolute; left: 18px; bottom: 16px; right: 18px; font: 600 26px/1.05 var(--hand); color: rgba(255, 255, 255, .92); }
.rc .b { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.rc .b h3 { font: 600 21px/1.22 var(--serif); letter-spacing: -.01em; }
.rc:hover .b h3 { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.rc .b p { margin-top: 11px; font: 400 14.5px/1.55 var(--sans); color: var(--ink-soft); flex: 1; }
.rc .tags { margin-top: 18px; display: flex; gap: 7px; flex-wrap: wrap; }
.rc .tg { font: 500 11px var(--mono); letter-spacing: .04em; color: var(--sec); border: 1px solid var(--line); padding: 4px 9px; border-radius: 999px; }
.rc .foot { margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; font: 500 12px var(--mono); color: var(--sec); }
.rc .foot .au { color: var(--ink); font-family: var(--sans); font-weight: 500; font-size: 13px; }

.hidden { display: none !important; }

.more { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 30px 0 120px; }
.more button {
	padding: 15px 34px; border-radius: 999px; border: 1px solid var(--ink); background: transparent; cursor: pointer;
	font: 600 14px var(--sans); color: var(--ink); transition: background .25s, color .25s;
}
.more button:hover { background: var(--ink); color: var(--paper); }
.more .count { font: 500 12px var(--mono); letter-spacing: .08em; color: var(--sec); }
.empty { text-align: center; padding: 60px 0; font: 400 18px var(--serif); color: var(--sec); font-style: italic; }