/*
 * Webylance agency presentation.
 *
 * Composition only — colour comes from the shared token layer (--brand-*),
 * with literals as fallback so the file is legible on its own. The visual
 * argument is: editorial serif display at large sizes, a neutral sans for
 * reading, hairline rules instead of cards, and one dark band to give
 * production physical weight. Deliberately not a card grid — fifteen of
 * sixteen portfolio records have no image, so type has to carry the page.
 *
 * All inline/block logical properties: the same layout serves LTR English and
 * RTL Arabic without a mirrored stylesheet.
 */

.wl-page {
	--wl-ground: var(--brand-bg, #F7F6F2);
	--wl-ink: var(--brand-fg, #16160F);
	--wl-accent: var(--brand-accent-strong, var(--brand-accent, #1F6B4F));
	--wl-gold: var(--brand-accent-2, #B08B3E);
	--wl-muted: var(--brand-muted-ink, var(--brand-muted, #6D7069));
	--wl-deep: #10231B;
	--wl-rule: color-mix(in srgb, var(--wl-ink) 14%, transparent);
	--wl-serif: 'Amiri', 'Iowan Old Style', Georgia, serif;
	--wl-sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
	--wl-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--wl-measure: 62ch;
	--wl-gap: clamp(3.5rem, 7vw, 7rem);

	background: var(--wl-ground);
	color: var(--wl-ink);
	font-family: var(--wl-sans);
	font-size: clamp(1rem, .96rem + .18vw, 1.0625rem);
	line-height: 1.62;
}

.wl-wrap {
	inline-size: min(100% - 2.5rem, 74rem);
	margin-inline: auto;
}

.wl-sec { padding-block: var(--wl-gap); border-block-start: 1px solid var(--wl-rule); }
.wl-sec:first-child { border-block-start: 0; }

/* ---------- editorial type ---------- */

.wl-eyebrow {
	margin: 0 0 1.4rem;
	font-family: var(--wl-mono);
	font-size: .72rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--wl-accent);
}

.wl-hero-title,
.wl-sec-title,
.wl-project-title {
	font-family: var(--wl-serif);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -.015em;
	text-wrap: balance;
	margin: 0;
}

/* Arabic needs more leading and no negative tracking, or the marks collide. */
:root[lang^="ar"] .wl-hero-title,
:root[lang^="ar"] .wl-sec-title,
:root[lang^="ar"] .wl-project-title,
[dir="rtl"] .wl-hero-title,
[dir="rtl"] .wl-sec-title,
[dir="rtl"] .wl-project-title {
	line-height: 1.28;
	letter-spacing: 0;
}

.wl-hero-title { font-size: clamp(2.6rem, 1.4rem + 5.2vw, 5.4rem); max-inline-size: 17ch; }
.wl-sec-title  { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.1rem); max-inline-size: 22ch; }

.wl-hero-lead,
.wl-sec-lead {
	max-inline-size: var(--wl-measure);
	margin: 1.6rem 0 0;
	font-size: 1.12rem;
	color: var(--wl-muted);
}

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

.wl-hero {
	padding-block: clamp(4.5rem, 9vw, 9.5rem) var(--wl-gap);
	/* A single hairline hints at the fold without a decorative hero image. */
	background-image: linear-gradient(to bottom, transparent calc(100% - 1px), var(--wl-rule) 100%);
}

/* ---------- actions ---------- */

.wl-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-block-start: 2.4rem; }

.wl-btn {
	display: inline-flex;
	align-items: center;
	min-block-size: 3rem;
	padding-inline: 1.6rem;
	border: 1px solid var(--wl-accent);
	border-radius: 2px;
	font-size: .95rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color .16s ease, color .16s ease;
}
.wl-btn-primary { background: var(--wl-accent); color: var(--brand-on-accent, #FFFDF8); }
.wl-btn-primary:hover, .wl-btn-primary:focus-visible { background: var(--wl-ink); border-color: var(--wl-ink); }
.wl-btn-ghost { background: transparent; color: var(--wl-accent); }
.wl-btn-ghost:hover, .wl-btn-ghost:focus-visible { background: var(--wl-accent); color: var(--brand-on-accent, #FFFDF8); }
.wl-btn:focus-visible { outline: 2px solid var(--wl-gold); outline-offset: 3px; }

/* ---------- selected work: an index, not a card grid ---------- */

.wl-work-list { margin-block-start: 3.2rem; border-block-start: 1px solid var(--wl-rule); }

.wl-work {
	display: grid;
	grid-template-columns: 3.5rem minmax(0, 1fr);
	gap: 0 1.5rem;
	align-items: start;
	padding-block: 2.1rem;
	border-block-end: 1px solid var(--wl-rule);
	color: inherit;
	text-decoration: none;
	transition: background-color .16s ease;
}
.wl-work.has-media { grid-template-columns: 3.5rem minmax(0, 1fr) clamp(7rem, 16vw, 12rem); }
.wl-work:hover, .wl-work:focus-visible { background: color-mix(in srgb, var(--wl-ink) 3.5%, transparent); }
.wl-work:focus-visible { outline: 2px solid var(--wl-accent); outline-offset: -2px; }

.wl-work-n {
	font-family: var(--wl-mono);
	font-size: .78rem;
	font-variant-numeric: tabular-nums;
	color: var(--wl-muted);
	padding-block-start: .5rem;
}

.wl-work-kind {
	margin: 0 0 .5rem;
	font-family: var(--wl-mono);
	font-size: .68rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wl-muted);
}
/* An illustrative record is flagged in the index too, not only on its page. */
.wl-work-kind.wl-kind-illustrative { color: var(--wl-gold); }

.wl-work-title {
	margin: 0;
	font-family: var(--wl-serif);
	font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.15rem);
	font-weight: 700;
	line-height: 1.16;
}
[dir="rtl"] .wl-work-title { line-height: 1.34; }

.wl-work-blurb { margin: .6rem 0 0; max-inline-size: 58ch; color: var(--wl-muted); }

.wl-work-media { align-self: center; }
.wl-work-media img { display: block; inline-size: 100%; block-size: auto; border-radius: 2px; }

.wl-more {
	display: inline-block;
	margin-block-start: 2.4rem;
	font-family: var(--wl-mono);
	font-size: .8rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wl-accent);
}

/* ---------- capability tags: named, never scored ---------- */

.wl-tags { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 1rem 0 0; padding: 0; }
.wl-tags li {
	padding: .28rem .7rem;
	border: 1px solid var(--wl-rule);
	border-radius: 2px;
	font-size: .8rem;
	color: var(--wl-muted);
}
.wl-tags-sm li { font-size: .74rem; }
.wl-disciplines { margin-block-start: 2.6rem; }

/* ---------- expertise ---------- */

.wl-cap-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: 2.6rem 3rem;
	margin-block-start: 3.2rem;
}
.wl-cap h3 {
	margin: 0 0 .6rem;
	padding-block-end: .7rem;
	border-block-end: 2px solid var(--wl-accent);
	font-family: var(--wl-serif);
	font-size: 1.35rem;
	font-weight: 700;
}
.wl-cap p { margin: 0; color: var(--wl-muted); font-size: .95rem; }
.wl-cap-list { list-style: none; margin: 1.1rem 0 0; padding: 0; }
.wl-cap-list li + li { margin-block-start: .35rem; }
.wl-cap-list a { color: inherit; text-decoration: none; border-block-end: 1px solid var(--wl-rule); }
.wl-cap-list a:hover, .wl-cap-list a:focus-visible { border-block-end-color: var(--wl-accent); color: var(--wl-accent); }

/* ---------- production: the one dark band ---------- */

.wl-production {
	background: var(--wl-deep);
	color: #F2F5F2;
	border-block-start: 0;
}
/* The shared system colours every h1-h3 with --text-primary, which is the
   body ink. Inside the one dark band that resolves to near-black on near-black,
   so the heading has to be stated explicitly rather than inherited. */
.wl-production :where(h1, h2, h3, .wl-sec-title, .wl-prod-name) { color: #F2F5F2; }
.wl-production .wl-eyebrow { color: var(--brand-accent-on-dark, #55B78C); }
.wl-production .wl-sec-lead { color: color-mix(in srgb, #F2F5F2 76%, transparent); }
.wl-production .wl-btn-ghost { color: var(--brand-accent-on-dark, #55B78C); border-color: color-mix(in srgb, #F2F5F2 34%, transparent); }
.wl-production .wl-btn-ghost:hover,
.wl-production .wl-btn-ghost:focus-visible { background: var(--brand-accent-on-dark, #55B78C); color: var(--wl-deep); }

.wl-prod-list { list-style: none; margin: 3rem 0 0; padding: 0; border-block-start: 1px solid rgba(242,245,242,.18); }
.wl-prod-list li { border-block-end: 1px solid rgba(242,245,242,.18); }
.wl-prod-list a {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1.5rem;
	padding-block: 1.05rem;
	color: inherit;
	text-decoration: none;
}
.wl-prod-list a:hover .wl-prod-name,
.wl-prod-list a:focus-visible .wl-prod-name { color: var(--brand-accent-on-dark, #55B78C); }
.wl-prod-name { font-family: var(--wl-serif); font-size: 1.25rem; }
.wl-prod-price { font-family: var(--wl-mono); font-size: .9rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wl-prod-price del { opacity: .5; }
.wl-prod-links { display: flex; flex-wrap: wrap; gap: .75rem; margin-block-start: 2.4rem; }

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

.wl-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 2.4rem 3rem;
	list-style: none;
	margin: 2.6rem 0 0;
	padding: 0;
	counter-reset: none;
}
.wl-step-n {
	display: block;
	font-family: var(--wl-mono);
	font-size: .78rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: .1em;
	color: var(--wl-gold);
}
.wl-steps h3 { margin: .7rem 0 .5rem; font-family: var(--wl-serif); font-size: 1.3rem; font-weight: 700; }
.wl-steps p { margin: 0; color: var(--wl-muted); font-size: .95rem; }

/* ---------- project page ---------- */

.wl-project-head { padding-block: clamp(3.2rem, 6vw, 6rem) 2.6rem; }
.wl-project-title { font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4rem); max-inline-size: 20ch; }
.wl-project-lead { max-inline-size: var(--wl-measure); margin: 1.4rem 0 0; font-size: 1.15rem; color: var(--wl-muted); }

/* The illustrative disclaimer must read as a statement, not a footnote. */
.wl-notice {
	max-inline-size: var(--wl-measure);
	margin: 1.8rem 0 0;
	padding: .9rem 1.1rem;
	border-inline-start: 3px solid var(--wl-gold);
	background: color-mix(in srgb, var(--wl-gold) 9%, transparent);
	font-size: .95rem;
}

.wl-facts { display: flex; flex-wrap: wrap; gap: 1.8rem 3rem; margin: 2.4rem 0 0; }
.wl-facts dt { font-family: var(--wl-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--wl-muted); }
.wl-facts dd { margin: .35rem 0 0; font-size: 1rem; max-inline-size: 34ch; }

.wl-project-media { margin: 0 0 var(--wl-gap); }
.wl-project-media img { display: block; inline-size: 100%; block-size: auto; }

.wl-project-body { padding-block-end: var(--wl-gap); }
.wl-block + .wl-block { margin-block-start: 2.8rem; }
.wl-block h2 {
	margin: 0 0 .8rem;
	font-family: var(--wl-serif);
	font-size: clamp(1.35rem, 1.1rem + .9vw, 1.75rem);
	font-weight: 700;
}
.wl-block p { margin: 0; max-inline-size: var(--wl-measure); }
.wl-list { margin: 0; padding-inline-start: 1.1rem; max-inline-size: var(--wl-measure); }
.wl-list li + li { margin-block-start: .35rem; }
.wl-prose :where(p, ul, ol) { max-inline-size: var(--wl-measure); }
.wl-project-links { display: flex; flex-wrap: wrap; gap: .75rem; margin-block-start: 2.6rem; }

.wl-related .wl-work-title { font-size: 1.4rem; }

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

.wl-cta h2 { font-family: var(--wl-serif); font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem); font-weight: 700; margin: 0; max-inline-size: 18ch; line-height: 1.1; }
[dir="rtl"] .wl-cta h2 { line-height: 1.3; }
.wl-cta p { max-inline-size: var(--wl-measure); margin: 1.2rem 0 0; color: var(--wl-muted); }

/* ---------- intake form ---------- */

.wl-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; margin-block-start: 3rem; max-inline-size: 48rem; }
.wl-field { margin: 0; grid-column: 1 / -1; display: flex; flex-direction: column; gap: .45rem; }
.wl-half { grid-column: span 1; }
.wl-field label { font-family: var(--wl-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--wl-muted); }
.wl-field :where(input, select, textarea) {
	inline-size: 100%;
	/* An explicit line-height: the shared system sets a tight one globally and a
	   native select clips its own option text at that height. */
	line-height: 1.4;
	min-block-size: 3rem;
	padding: .8rem .9rem;
	border: 1px solid var(--wl-rule);
	border-radius: 2px;
	background: color-mix(in srgb, var(--wl-ink) 2.5%, transparent);
	color: inherit;
	font: inherit;
}
.wl-field :where(input, select, textarea):focus-visible { outline: 2px solid var(--wl-accent); outline-offset: 1px; border-color: transparent; }
.wl-consent { grid-column: 1 / -1; }
.wl-consent label { display: flex; align-items: flex-start; gap: .6rem; font-family: var(--wl-sans); font-size: .9rem; letter-spacing: 0; text-transform: none; color: var(--wl-muted); }
.wl-consent input { inline-size: auto; margin-block-start: .2rem; }
.wl-consent a { color: var(--wl-accent); }
.wl-submit { grid-column: 1 / -1; margin: 0; }
/* Honeypot: off-canvas rather than display:none, which some bots skip. */
.wl-hp { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- responsive ---------- */

@media (max-width: 760px) {
	.wl-work,
	.wl-work.has-media { grid-template-columns: 2.6rem minmax(0, 1fr); }
	.wl-work-media { grid-column: 2; margin-block-start: 1rem; max-inline-size: 14rem; }
	.wl-form { grid-template-columns: minmax(0, 1fr); }
	.wl-half { grid-column: 1 / -1; }
	.wl-facts { gap: 1.2rem 2rem; }
	.wl-prod-list a { flex-direction: column; gap: .2rem; }
}

@media (prefers-reduced-motion: reduce) {
	.wl-btn, .wl-work { transition: none; }
}

/* ---------- secondary project visuals ---------- */

.wl-shots {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1.4rem;
	margin-block-start: 2.8rem;
}
.wl-shot { margin: 0; background: color-mix(in srgb, var(--wl-ink) 3%, transparent); border: 1px solid var(--wl-rule); }
.wl-shot img { display: block; inline-size: 100%; block-size: auto; }
.wl-shot-architecture-diagram { grid-column: 1 / -1; padding: 1.5rem; background: #fff; }

/* ---------- work index media, now that most records have one ---------- */

.wl-work-media { overflow: hidden; background: color-mix(in srgb, var(--wl-ink) 4%, transparent); border: 1px solid var(--wl-rule); }
.wl-work-media img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }

/* ---------- Blocksy chrome corrections on shortcode-composed pages ---------- */

/* These pages open with their own hero, so the theme's page title would be a
   duplicate heading immediately above it. */
.wl-composed .entry-header,
.wl-composed .page-title,
.wl-composed .ct-page-title,
.wl-composed .hero-section { display: none; }
.wl-composed .entry-content > .wl-page { margin-block-start: 0; }