/* ==========================================================================
   Directory layout — the Journal design, translated to classes.
   ========================================================================== */

/* ---- masthead ----------------------------------------------------------- */
.nath-masthead {
	border-bottom: 2px solid var(--ink);
	display: flex; flex-wrap: wrap;
	justify-content: space-between; align-items: baseline;
	gap: 10px 18px;
	padding: 26px var(--pad) 16px;
	animation: fadeIn .8s ease both;
}
.nath-brand { font-family: var(--serif); font-size: 24px; color: var(--ink); text-decoration: none; }
.nath-brand:hover { opacity: 1; }
.nath-brand i { font-style: italic; }
.nath-vol { font-family: var(--mono); font-size: 10px; letter-spacing: .15em; color: var(--sub); }
.nath-nav { display: flex; gap: 24px; align-items: baseline; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; }
.nath-nav a { color: var(--ink); text-decoration: none; }
.nath-nav a:hover { color: var(--accent); opacity: 1; }
.nath-toggle {
	cursor: pointer; color: var(--accent); user-select: none;
	background: none; border: 0; padding: 0;
	font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
}
.nath-back { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--ink); text-decoration: none; }
.nath-back:hover { color: var(--accent); opacity: 1; }

/* ---- hero --------------------------------------------------------------- */
.nath-hero { padding: clamp(60px,10vh,110px) 24px 40px; text-align: center; position: relative; }
.nath-hero__note {
	position: absolute; top: 40px; right: clamp(20px,8vw,120px);
	font-family: var(--mono); font-size: 10px; color: var(--faint);
	transform: rotate(6deg); animation: floatSlow 7s ease-in-out infinite;
	letter-spacing: .1em; text-align: left;
}
.nath-hero__kicker { font-family: var(--mono); font-size: 11px; letter-spacing: .34em; color: var(--accent); margin-bottom: 22px; animation: riseIn .7s ease both; }
.nath-hero__name { font-family: var(--serif); font-size: clamp(80px,16vw,170px); line-height: .88; animation: riseIn .7s .1s ease both; }
.nath-hero__tagwrap { display: inline-block; position: relative; margin-top: 14px; animation: riseIn .7s .22s ease both; }
.nath-hero__tag { font-family: var(--serif); font-style: italic; font-size: clamp(26px,4.5vw,44px); color: var(--accent); white-space: nowrap; }
.nath-hero__ink { position: absolute; left: 0; bottom: -6px; height: 2px; width: 100%; background: var(--accent); animation: inkline 1.2s .8s cubic-bezier(.7,0,.3,1) both; }
.nath-hero__sub { max-width: 400px; margin: 30px auto 0; font-size: 14px; line-height: 1.75; color: var(--body); animation: riseIn .7s .34s ease both; }
.nath-caret { animation: blink 1.4s steps(1) infinite; color: var(--accent); }

/* ---- index -------------------------------------------------------------- */
.nath-index { padding: 30px var(--pad) 60px; max-width: var(--wrap); margin: 0 auto; }
.nath-index__head {
	display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
	gap: 12px; border-bottom: 2px solid var(--ink); padding-bottom: 10px;
	animation: riseIn .7s .4s ease both;
}
.nath-index__heading { display: flex; align-items: baseline; gap: 12px; }
.nath-index__title { font-family: var(--serif); font-size: 24px; }
.nath-index__range { font-family: var(--mono); font-size: 10px; color: var(--sub); }
.nath-sorts { display: flex; gap: 6px; }
.nath-sort {
	font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em;
	padding: 5px 11px; border-radius: 999px; cursor: pointer;
	border: 1px solid var(--faint); background: transparent; color: var(--sub);
	transition: all .2s;
}
.nath-sort[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* ---- project rows ------------------------------------------------------- */
.nath-row {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px;
	padding: 22px 8px; border-bottom: 1px solid var(--line);
	text-decoration: none; color: var(--ink);
	transition: background .25s, padding .25s;
}
.nath-row:hover { background: linear-gradient(90deg, var(--accent-06), transparent 70%); padding-left: 20px; opacity: 1; }
.nath-row__num   { font-family: var(--mono); font-size: 11px; color: var(--accent); flex: none; }
.nath-row__title { font-family: var(--serif); font-size: clamp(22px,3.4vw,32px); flex: none; }
.nath-row__tag   { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--sub); flex: none; max-width: 26ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nath-row__leader{ flex: 1; border-bottom: 1px dotted var(--faint); transform: translateY(-6px); min-width: 24px; }
.nath-row__break { width: 100%; height: 0; display: none; }
.nath-row__meta  { font-family: var(--mono); font-size: 10px; color: var(--sub); flex: none; letter-spacing: .06em; white-space: nowrap; }
.nath-row__arrow { font-family: var(--mono); font-size: 12px; color: var(--accent); flex: none; }

.nath-row--reserved { opacity: .45; }
.nath-row--reserved .nath-row__title { font-style: italic; color: var(--sub); font-size: 22px; }

/* ---- hover preview card ------------------------------------------------- */
.nath-preview {
	position: fixed; left: 0; top: 0; width: 250px; pointer-events: none;
	z-index: 9998; transform: translate(-500px,-500px);
}
.nath-preview__inner {
	opacity: 0; transition: opacity .22s ease;
	background: var(--card); border: 1px solid var(--ink);
	box-shadow: 6px 6px 0 var(--accent-9); transform: rotate(2deg);
}
.nath-preview.is-on .nath-preview__inner { opacity: 1; }
.nath-preview__img { height: 140px; background-color: var(--alt); background-size: cover; background-position: center top; }
.nath-preview__cap { padding: 10px 12px; display: flex; justify-content: space-between; align-items: baseline; }
.nath-preview__cap .t { font-family: var(--serif); font-size: 16px; }
.nath-preview__cap .y { font-family: var(--mono); font-size: 9px; color: var(--accent); }

/* ---- about -------------------------------------------------------------- */
.nath-about { border-top: 2px solid var(--ink); background: var(--alt); }
.nath-about__inner {
	max-width: var(--wrap); margin: 0 auto; padding: 56px var(--pad);
	display: grid; grid-template-columns: 1fr 2fr; gap: clamp(24px,5vw,80px);
}
.nath-about__h { font-family: var(--serif); font-size: 34px; }
.nath-about__h i { font-style: italic; color: var(--accent); }
.nath-about__facts { margin-top: 18px; font-family: var(--mono); font-size: 10px; color: var(--sub); letter-spacing: .1em; line-height: 2; }
.nath-about__facts b { color: var(--accent); font-weight: 400; }
.nath-about__body { font-size: 15px; line-height: 1.85; color: var(--body); max-width: 56ch; position: relative; }
.nath-about__body p { margin: 0; }
.nath-about__body p + p { margin-top: 18px; }

/* ---- marquee + colophon ------------------------------------------------- */
.nath-marquee { overflow: hidden; background: var(--accent); border-top: 2px solid var(--ink); }
.nath-marquee__track {
	display: flex; white-space: nowrap; animation: marq 16s linear infinite;
	font-family: var(--mono); font-size: 12px; letter-spacing: .18em; color: var(--bg); padding: 12px 0;
}
.nath-marquee__track span { padding: 0 18px; }
.nath-colophon { display: flex; justify-content: space-between; gap: 12px; padding: 14px var(--pad); font-family: var(--mono); font-size: 9.5px; color: var(--faint); letter-spacing: .12em; }

/* ---- cursor blob (about section signature) ------------------------------ */
.nath-cursor {
	position: fixed; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%;
	background: var(--accent); mix-blend-mode: var(--blend); pointer-events: none;
	z-index: 9999; transform: translate(-100px,-100px);
	transition: transform .18s cubic-bezier(.2,.7,.3,1); opacity: .85;
}

/* ==========================================================================
   Detail (single project)
   ========================================================================== */
.nath-detail { animation: fadeIn .4s ease both; }
.nath-detail__wrap { max-width: var(--wrap); margin: 0 auto; padding: 60px var(--pad) 40px; }
.nath-detail__num { font-family: var(--mono); font-size: 11px; letter-spacing: .3em; color: var(--accent); animation: riseIn .6s ease both; }
.nath-detail__title { font-family: var(--serif); font-size: clamp(52px,9vw,104px); line-height: .95; margin-top: 14px; animation: riseIn .6s .08s ease both; }
.nath-detail__tag { font-family: var(--serif); font-style: italic; font-size: clamp(20px,3vw,30px); color: var(--accent); margin-top: 14px; animation: riseIn .6s .16s ease both; }

.nath-detail__meta {
	display: flex; flex-wrap: wrap; gap: 36px; margin-top: 36px; padding: 20px 0;
	border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line);
	animation: riseIn .6s .24s ease both; align-items: flex-start;
}
.nath-detail__meta .k { font-family: var(--mono); font-size: 9px; letter-spacing: .2em; color: var(--sub); }
.nath-detail__meta .v { font-family: var(--serif); font-size: 20px; margin-top: 5px; }
.nath-detail__spacer { flex: 1; }
.nath-visit {
	align-self: center; font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
	padding: 12px 22px; background: var(--ink); color: var(--bg); text-decoration: none;
	transition: background .2s, color .2s; white-space: nowrap;
}
.nath-visit:hover { background: var(--accent); color: var(--bg); opacity: 1; }

.nath-figure { margin-top: 40px; animation: riseIn .6s .32s ease both; }
.nath-figure__frame {
	border: 1px solid var(--ink); box-shadow: 10px 10px 0 var(--accent-85);
	height: clamp(280px,48vw,540px); background-color: var(--alt);
	background-size: cover; background-position: center top;
	display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.nath-figure__ph { font-family: var(--mono); font-size: 11px; color: var(--faint); letter-spacing: .1em; text-align: center; padding: 20px; }
.nath-figure__cap { font-family: var(--mono); font-size: 9.5px; color: var(--faint); margin-top: 22px; letter-spacing: .12em; }

.nath-blurb { margin-top: 44px; max-width: 60ch; font-size: 15px; line-height: 1.85; color: var(--body); animation: riseIn .6s .4s ease both; }
.nath-blurb p { margin: 0 0 18px; }
.nath-content { margin-top: 8px; max-width: 60ch; color: var(--body); line-height: 1.8; }
.nath-content a { color: var(--accent); }

.nath-pn {
	border-top: 2px solid var(--ink); display: grid; grid-template-columns: 1fr 1fr;
	max-width: var(--wrap); margin: 50px auto 0;
	border-left: 1px solid var(--line); border-right: 1px solid var(--line);
}
.nath-pn__cell { padding: 26px clamp(20px,4vw,40px); text-decoration: none; color: var(--ink); transition: background .2s; }
.nath-pn__cell:hover { background: var(--alt); opacity: 1; }
.nath-pn__cell--prev { border-right: 1px solid var(--line); }
.nath-pn__cell--next { text-align: right; }
.nath-pn__k { font-family: var(--mono); font-size: 9px; letter-spacing: .2em; color: var(--sub); }
.nath-pn__t { font-family: var(--serif); font-size: 24px; margin-top: 6px; }
.nath-detail__colophon { border-top: 2px solid var(--ink); }

/* ==========================================================================
   Generic fallback pages (archive / other singles)
   ========================================================================== */
.nath-page { max-width: var(--wrap); margin: 0 auto; padding: 60px var(--pad); }
.nath-page h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(40px,7vw,72px); line-height: 1; margin: 0 0 8px; }
.nath-page .nath-lead { color: var(--body); line-height: 1.8; max-width: 62ch; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 720px) {
	.nath-vol, .nath-hero__note, .nath-row__tag, .nath-row__leader { display: none; }
	.nath-row__break { display: block; }
	.nath-row__meta { margin-left: auto; }
	.nath-nav { gap: 16px; }
	.nath-about__inner { grid-template-columns: 1fr; }
	.nath-pn { grid-template-columns: 1fr; }
	.nath-pn__cell--prev { border-right: 0; border-bottom: 1px solid var(--line); }
	.nath-pn__cell--next { text-align: left; }
	.nath-preview { display: none; }
	.nath-detail__spacer { display: none; }
	.nath-visit { align-self: flex-start; }
}