/* ==========================================================================
   ARFA KHUSHBOO — About page.

   Loads after theme.css and only on the About template. Every colour comes
   from a token; nothing here introduces a hue. Tracking stays at or below
   .05em on small uppercase labels and at or below zero from 18px up, which
   is the rule the rest of the theme follows.
   ========================================================================== */

/* ------------------------------------------------------------------- hero */

.ak-abhero {
	border-bottom: 1px solid var(--ak-line);
	overflow: hidden; /* the drifting strokes must never widen the page */
}

.ak-abhero__grid {
	display: grid;
	gap: 2rem;
	align-items: center;
}

@media (min-width: 800px) {
	.ak-abhero__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
		gap: 3rem;
	}
}

.ak-abhero__eyebrow {
	margin: 0 0 1rem;
	font-size: var(--ak-fs-xs);
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--ak-muted);
}

.ak-abhero__title {
	margin: 0 0 1.25rem;
	font-size: clamp(2rem, 7vw, var(--ak-fs-3xl));
	letter-spacing: -.02em;
	color: var(--ak-black);
}

.ak-abhero__lede {
	margin: 0;
	max-width: 46ch;
	font-size: var(--ak-fs-md);
	line-height: 1.65;
	letter-spacing: 0;
	color: var(--ak-muted);
}

/* ------------------------------------------------------- hero animation */

.ak-abhero__art {
	justify-self: center;
	width: min(240px, 62vw);
}

/* Fixed aspect box: the SVG is laid out before it paints, so nothing shifts. */
.ak-scent {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 240 / 300;
	color: var(--ak-muted);
}

.ak-scent__bottle {
	color: var(--ak-line);
	opacity: .95;
}

.ak-scent__fill { color: var(--ak-cream-deep); }

.ak-scent__wisp {
	/* Percentage transform-origin needs the path's own box, not the viewport. */
	transform-box: fill-box;
	transform-origin: 50% 100%;
	opacity: 0;
	will-change: transform, opacity;
}

/* Three loops of different lengths so the trails never sync up. */
.ak-scent__wisp--1 { animation: ak-drift-a 14s var(--ak-ease) infinite; }
.ak-scent__wisp--2 { animation: ak-drift-b 19s var(--ak-ease) infinite 2.5s; }
.ak-scent__wisp--3 { animation: ak-drift-c 17s var(--ak-ease) infinite 6s; }

@keyframes ak-drift-a {
	0%   { opacity: 0;    transform: translate3d(0, 14px, 0) scaleY(.86); }
	22%  { opacity: .34; }
	70%  { opacity: .18; }
	100% { opacity: 0;    transform: translate3d(-10px, -26px, 0) scaleY(1.1); }
}

@keyframes ak-drift-b {
	0%   { opacity: 0;    transform: translate3d(0, 18px, 0) scaleY(.9); }
	28%  { opacity: .22; }
	72%  { opacity: .12; }
	100% { opacity: 0;    transform: translate3d(-16px, -30px, 0) scaleY(1.14); }
}

@keyframes ak-drift-c {
	0%   { opacity: 0;    transform: translate3d(0, 12px, 0) scaleY(.88); }
	26%  { opacity: .28; }
	68%  { opacity: .14; }
	100% { opacity: 0;    transform: translate3d(12px, -24px, 0) scaleY(1.12); }
}

/* --------------------------------------------------------------- prose */

.ak-abprose {
	max-width: var(--ak-max-text);
	color: var(--ak-ink);
	font-size: var(--ak-fs-md);
	line-height: 1.75;
	letter-spacing: 0;
}

.ak-abprose p { margin: 0 0 1.25rem; }
.ak-abprose p:last-child { margin-bottom: 0; }

.ak-abprose a {
	color: var(--ak-black);
	text-decoration: underline;
	text-underline-offset: .18em;
}
.ak-abprose a:hover { color: var(--ak-gold); }

/* ------------------------------------------------- what makes it different */

.ak-abpoints {
	display: grid;
	gap: 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 700px) {
	.ak-abpoints { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 3rem; }
}

.ak-abpoint {
	padding-top: 1.25rem;
	border-top: 1px solid var(--ak-line);
}

.ak-abpoint__title {
	margin: 0 0 .5rem;
	font-size: var(--ak-fs-md);
	font-weight: 700;
	letter-spacing: 0;
	color: var(--ak-black);
}

.ak-abpoint__text {
	margin: 0;
	max-width: 44ch;
	color: var(--ak-muted);
	line-height: 1.7;
}

/* --------------------------------------------------------- how we work */

.ak-abwork__list {
	display: grid;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.ak-abwork__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
	.ak-abwork__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.ak-abwork__item {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding: 1.5rem;
	background: var(--ak-white);
	border: 1px solid var(--ak-line);
	border-radius: var(--ak-radius-lg);
}

.ak-abwork__ico {
	display: inline-flex;
	color: var(--ak-black);
}

.ak-abwork__ico svg { width: 22px; height: 22px; }

.ak-abwork__title {
	margin: 0;
	font-size: var(--ak-fs-base);
	font-weight: 700;
	letter-spacing: 0;
	color: var(--ak-black);
}

.ak-abwork__text {
	margin: 0;
	color: var(--ak-muted);
	font-size: var(--ak-fs-sm);
	line-height: 1.7;
}

.ak-abwork__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-top: auto;
	font-size: var(--ak-fs-xs);
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--ak-black);
}

.ak-abwork__link:hover { color: var(--ak-gold); text-decoration: underline; }

/* -------------------------------------------------------------- ranges */

.ak-abranges__list {
	display: grid;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.ak-abranges__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
	.ak-abranges__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.ak-abrange {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	height: 100%;
	min-height: 44px;
	padding: 1.5rem;
	border: 1px solid var(--ak-line);
	border-radius: var(--ak-radius-lg);
	background: var(--ak-white);
	transition: border-color .18s var(--ak-ease), background .18s var(--ak-ease);
}

.ak-abrange:hover {
	border-color: var(--ak-black);
	background: var(--ak-cream);
	color: inherit;
}

.ak-abrange__title {
	margin: 0;
	font-size: var(--ak-fs-base);
	font-weight: 700;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: var(--ak-black);
}

.ak-abrange__text {
	margin: 0;
	color: var(--ak-muted);
	font-size: var(--ak-fs-sm);
	line-height: 1.7;
}

.ak-abrange__more {
	margin-top: auto;
	padding-top: .75rem;
	font-size: var(--ak-fs-xs);
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--ak-black);
}

.ak-abrange:hover .ak-abrange__more { text-decoration: underline; }

.ak-abranges__note {
	max-width: var(--ak-max-text);
	margin: 1.75rem 0 0;
	color: var(--ak-muted);
	font-size: var(--ak-fs-sm);
	line-height: 1.7;
}

/* ----------------------------------------------------------------- cta */

.ak-abcta {
	background: var(--ak-black);
	color: var(--ak-white);
}

.ak-abcta__inner { text-align: center; }

.ak-abcta__title {
	margin: 0 0 .75rem;
	font-size: clamp(1.5rem, 5vw, var(--ak-fs-2xl));
	letter-spacing: -.02em;
	color: var(--ak-white);
}

.ak-abcta__text {
	max-width: 52ch;
	margin: 0 auto 1.75rem;
	color: var(--ak-cream-deep);
	line-height: 1.7;
	letter-spacing: 0;
}

.ak-abcta__btns {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	justify-content: center;
}

.ak-abcta .ak-btn {
	background: var(--ak-white);
	border-color: var(--ak-white);
	color: var(--ak-black);
}
.ak-abcta .ak-btn:hover {
	background: var(--ak-cream-deep);
	border-color: var(--ak-cream-deep);
	color: var(--ak-black);
}

.ak-abcta .ak-btn--ghost {
	background: transparent;
	border-color: var(--ak-white);
	color: var(--ak-white);
}
.ak-abcta .ak-btn--ghost:hover {
	background: var(--ak-white);
	color: var(--ak-black);
}

.ak-abcta a:focus-visible { outline-color: var(--ak-white); }

/* -------------------------------------------------------- scroll reveal */

/* Headings are visible by default. The class below is only added by JS, so a
   failed or blocked script leaves the page fully readable. */
.ak-reveal.is-armed {
	opacity: 0;
	transform: translate3d(0, 12px, 0);
}

.ak-reveal.is-armed.is-in {
	opacity: 1;
	transform: none;
	transition: opacity .6s var(--ak-ease), transform .6s var(--ak-ease);
}

/* ------------------------------------------------------ reduced motion */

@media (prefers-reduced-motion: reduce) {
	/* The trails stop where they look composed: three still strokes above the
	   bottle, faint enough to read as vapour rather than as broken artwork. */
	.ak-scent__wisp {
		animation: none !important;
		transform: none !important;
	}
	.ak-scent__wisp--1 { opacity: .28; }
	.ak-scent__wisp--2 { opacity: .18; }
	.ak-scent__wisp--3 { opacity: .22; }

	.ak-reveal.is-armed,
	.ak-reveal.is-armed.is-in {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.ak-abrange { transition: none; }
}