/*
Theme Name:   Seemab Haider
Theme URI:    https://blocks.seemabhaider.com
Description:  Monochrome bento portfolio for Seemab Haider. Block child theme of Frost.
Author:       Seemab Haider
Author URI:   https://seemabhaider.com
Template:     frost
Version:      1.0.2
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
License:      GNU General Public License v3 or later
License URI:  https://www.gnu.org/licenses/gpl-3.0.html
Text Domain:  seemab-haider
*/

/* =========================================================
   Everything below is CSS that theme.json cannot express.
   Colours, fonts, sizes and spacing live in theme.json
   (edit them in Appearance > Editor > Styles).
   ========================================================= */


/* ---------------------------------------------------------
   1. Dark mode
   The toggle sets <html data-theme="dark">. Each colour preset
   is pointed at its "Dark mode:" twin from the palette, so every
   block using a preset flips automatically. Edit the dark values
   in Styles > Colors > Palette ("Dark mode: ..." swatches).
   --------------------------------------------------------- */
html[data-theme="dark"] {
	--wp--preset--color--base: var(--wp--preset--color--dark-base);
	--wp--preset--color--contrast: var(--wp--preset--color--dark-contrast);
	--wp--preset--color--primary: var(--wp--preset--color--dark-primary);
	--wp--preset--color--on-primary: var(--wp--preset--color--dark-on-primary);
	--wp--preset--color--secondary: var(--wp--preset--color--dark-secondary);
	--wp--preset--color--neutral: var(--wp--preset--color--dark-neutral);
	--wp--preset--color--accent: var(--wp--preset--color--dark-accent);
	--wp--preset--color--line: var(--wp--preset--color--dark-line);
	--wp--custom--header--background: var(--wp--custom--header--background-dark);
	color-scheme: dark;
}

body {
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
	transition: background-color 0.5s ease, color 0.5s ease;
}

::selection {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* Logos and the signature invert in dark mode. */
html[data-theme="dark"] .is-style-invert-dark img,
html[data-theme="dark"] .wp-block-site-logo img {
	filter: invert(1);
}


/* ---------------------------------------------------------
   2. Tracking and leading paired with the display sizes
   (theme.json has no letter-spacing/line-height presets).
   A value set on the block itself still wins.
   --------------------------------------------------------- */
.has-display-xxl-font-size { letter-spacing: -0.065em; line-height: 0.84; }
.has-display-xl-font-size  { letter-spacing: -0.06em;  line-height: 0.86; }
.has-display-l-font-size   { letter-spacing: -0.06em;  line-height: 0.9; }
.has-display-m-font-size   { letter-spacing: -0.055em; line-height: 0.86; }
.has-display-s-font-size   { letter-spacing: -0.05em;  line-height: 0.92; }
.has-xxx-large-font-size   { letter-spacing: -0.04em;  line-height: 1; }
.has-xx-large-font-size    { letter-spacing: -0.04em;  line-height: 1.02; }


/* ---------------------------------------------------------
   3. Block styles (pick them in the block's "Styles" panel)
   --------------------------------------------------------- */

/* Paragraph / Heading: "Label" - mono caption, and "Label muted". */
.is-style-label,
.is-style-label-muted {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
	letter-spacing: 0.06em;
	line-height: 1.4;
	text-transform: uppercase;
}
.is-style-label-muted { opacity: 0.6; }

/* Paragraph: "Muted" - secondary text at 65% of the current colour,
   so it reads correctly on white cards, black cards and dark mode. */
.is-style-muted { opacity: 0.65; }

/* Heading: "Outline" - stroked, hollow letters. */
.is-style-outline-text {
	-webkit-text-stroke: 1.2px currentColor;
	color: transparent !important;
}

/* Heading / Paragraph: "Numeral" - light big numbers for stats. */
.is-style-numeral {
	font-weight: 300;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.06em;
	line-height: 0.85;
}

/* Image, Cover, Featured image: "Greyscale" - colour on hover. */
.is-style-greyscale img,
.is-style-greyscale .wp-block-cover__image-background {
	filter: grayscale(1) contrast(1.05);
	transition: filter 0.6s ease;
}
.is-style-greyscale:hover img,
.is-style-greyscale:hover .wp-block-cover__image-background,
a:hover .is-style-greyscale img,
.is-style-card-link:hover .is-style-greyscale img,
.wp-block-post:hover .is-style-greyscale img {
	filter: none;
}

/* Group: "Card link" - the whole card inverts on hover
   (brand rule: everything interactive responds by inverting). */
.is-style-card-link {
	position: relative;
	transition: background-color 0.35s ease, color 0.35s ease;
}
.is-style-card-link:hover,
.is-style-card-link:focus-within {
	background-color: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--on-primary) !important;
}
/* A link inside the card's heading stretches over the whole card;
   buttons and icons inside the card stay clickable above it. */
.is-style-card-link :is(h1, h2, h3, h4, h5, h6) a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.is-style-card-link :is(.wp-block-buttons, .wp-block-social-links) {
	position: relative;
	z-index: 1;
}

/* Group: "Marquee" - endless horizontal strip. The script
   duplicates the content once so the loop is seamless. */
.is-style-marquee {
	overflow: hidden;
	white-space: nowrap;
}
.is-style-marquee > * {
	display: inline-flex;
	flex-wrap: nowrap;
	width: max-content;
	animation: sh-marquee 28s linear infinite;
}
@keyframes sh-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Button: "Status dot" - blinking availability dot before the label. */
.is-style-status-dot .wp-block-button__link::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 10px;
	border-radius: 999px;
	background: currentColor;
	vertical-align: 1px;
	animation: sh-blink 1.6s ease-in-out infinite;
}
@keyframes sh-blink {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.25; }
}


/* ---------------------------------------------------------
   4. Accessibility: honour reduced-motion system setting.
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}


/* ---------------------------------------------------------
   5. Layout: bento grid breakpoints (4 / 2 / 1 columns at
   1080px and 680px, as in the original). Add "sh-bento" to a
   Grid group; add "sh-wide" to a card that should stay full
   width on tablet.
   --------------------------------------------------------- */
@media (max-width: 1079px) {
	.sh-bento.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	.sh-bento.is-layout-grid > * { grid-column: auto !important; grid-row: auto !important; }
	.sh-bento.is-layout-grid > .sh-wide { grid-column: 1 / -1 !important; }
}
@media (max-width: 679px) {
	.sh-bento.is-layout-grid { grid-template-columns: minmax(0, 1fr) !important; }
	.sh-bento.is-layout-grid > * { grid-column: 1 / -1 !important; }
}

/* Sticky, translucent header. */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--wp--custom--header--background);
	-webkit-backdrop-filter: blur(14px) saturate(1.4);
	backdrop-filter: blur(14px) saturate(1.4);
}
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }

/* Mobile menu overlay: big type, as in the original. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	font-size: 52px;
	font-weight: 600;
	letter-spacing: -0.04em;
	line-height: 1.08;
}

/* Round icon buttons (theme toggle, arrows). */
.is-style-circle .wp-block-button__link,
.sh-theme-toggle .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0 !important;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1;
}
.sh-theme-toggle .wp-block-button__link { transition: transform 0.6s cubic-bezier(.2,.7,.1,1), background-color 0.35s, color 0.35s; }
html[data-theme="dark"] .sh-theme-toggle .wp-block-button__link { transform: rotate(180deg); }


/* ---------------------------------------------------------
   6. Behaviour styles used by assets/js/site-fx.js
   --------------------------------------------------------- */

/* Custom cursor (hidden on touch screens by the script). */
body.sh-cursor,
body.sh-cursor * { cursor: none !important; }
.sh-cursor-ring,
.sh-cursor-dot {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1000;
	pointer-events: none;
	border-radius: 999px;
	mix-blend-mode: difference;
	opacity: 0;
}
.sh-cursor-ring {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid #fff;
	transition: width 0.35s cubic-bezier(.2,.7,.1,1), height 0.35s cubic-bezier(.2,.7,.1,1), background-color 0.3s ease, opacity 0.3s ease;
}
.sh-cursor-ring span {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.sh-cursor-dot { z-index: 1001; width: 6px; height: 6px; background: #fff; }

/* Magnetic buttons. */
.is-magnetic,
.is-magnetic .wp-block-button__link { transition: transform 0.35s cubic-bezier(.2,.7,.1,1); }

/* Scroll reveal. Content is only hidden while JavaScript runs,
   and a failsafe shows it after 3s if the script never loads. */
.sh-reveal > * { transition: opacity 1s cubic-bezier(.2,.7,.1,1), transform 1s cubic-bezier(.2,.7,.1,1); }
html.js:not(.sh-fx-ready) .sh-reveal > *,
html.sh-reveal-on .sh-reveal > :not(.is-revealed) {
	opacity: 0;
	transform: translateY(36px);
}
html.js:not(.sh-fx-ready) .sh-reveal > * { animation: sh-failsafe 0s 3s forwards; }
@keyframes sh-failsafe { to { opacity: 1; transform: none; visibility: visible; } }

/* Per-letter headline. */
html.js .sh-split:not(.is-split) { visibility: hidden; animation: sh-failsafe 0s 3s forwards; }
.sh-split .sh-word { display: inline-block; white-space: nowrap; }
.sh-split .sh-ch {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding-bottom: 0.08em;
	margin-bottom: -0.08em;
}
.sh-split .sh-ch-i {
	display: inline-block;
	transform: translateY(110%);
	transition: transform 1s cubic-bezier(.2,.7,.1,1), font-weight 0.35s cubic-bezier(.2,.7,.1,1);
}
.sh-split.is-in .sh-ch-i { transform: none; }
.sh-split .sh-ch:hover .sh-ch-i { font-weight: 200; }

/* Skill bars: a row with the value ("90%") and a track with a fill. */
.sh-bar-track {
	height: 2px;
	background: var(--wp--preset--color--line);
	overflow: hidden;
}
.sh-bar-track > .sh-bar-fill {
	width: 0;
	height: 100%;
	min-height: 2px;
	background: currentColor;
	transition: width 1.4s cubic-bezier(.2,.7,.1,1);
}
html:not(.js) .sh-bar-fill { width: 100%; }

/* Interactive dot map. */
.sh-dotmap { position: relative; isolation: isolate; overflow: hidden; }
.sh-dotmap-canvas {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* Portfolio filter chips (inverted when active). */
.sh-filter a,
.sh-filter-all a {
	display: inline-flex;
	gap: 8px;
	align-items: baseline;
	padding: 7px 12px;
	border: 1px solid currentColor;
	border-radius: 999px;
	color: inherit;
	text-decoration: none !important;
	transition: background-color 0.35s, color 0.35s;
}
.sh-filter a:hover,
.sh-filter a.is-active,
.sh-filter-all a:hover,
.sh-filter-all a.is-active {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}
.sh-filter .wp-block-term-template { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }

/* Project grid: filtered-out cards, and the first card shown large. */
.sh-projects .wp-block-post[hidden] { display: none !important; }
@media (min-width: 680px) {
	.sh-projects .wp-block-post-template > .is-featured { grid-column: span 2; }
}
@media (min-width: 1080px) {
	.sh-projects .wp-block-post-template > .is-featured { grid-row: span 2; }
}
.sh-projects .wp-block-post-featured-image { overflow: hidden; }
.sh-projects .wp-block-post-featured-image img { transition: transform 0.9s cubic-bezier(.2,.7,.1,1), filter 0.6s ease; }
.sh-projects .wp-block-post:hover .wp-block-post-featured-image img { transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) {
	.sh-reveal > *,
	.sh-split .sh-ch-i { opacity: 1 !important; transform: none !important; }
}


/* ---------------------------------------------------------
   7. Components
   --------------------------------------------------------- */

/* Button: "Circle" - round outline icon button (arrows). */
.is-style-circle .wp-block-button__link {
	background: transparent;
	color: currentColor;
	border: 1px solid currentColor;
	font-family: var(--wp--preset--font-family--primary);
	font-size: 18px;
}
.is-style-card-link:hover .is-style-circle .wp-block-button__link {
	background: var(--wp--preset--color--on-primary);
	color: var(--wp--preset--color--primary);
}
.is-style-circle .wp-block-button__link:hover { color: var(--wp--preset--color--base); background: var(--wp--preset--color--contrast); }
.sh-theme-toggle .wp-block-button__link {
	background: transparent;
	color: currentColor;
	border: 1px solid currentColor;
	font-size: 18px;
}

/* Social circles (WA / IN / IG). */
.sh-social .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	padding: 0;
	border: 0;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	letter-spacing: 0.04em;
}
.sh-social .wp-block-button__link:hover { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); }

/* Big round "Start a project" button in the CTA. */
.sh-cta-circle .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(96px, 8vw, 124px);
	aspect-ratio: 1;
	padding: 0;
	border: 0;
	background: var(--wp--preset--color--on-primary);
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	line-height: 1.15;
	text-align: center;
}

/* Hide "Let's Talk" in the header on phones (the menu has it). */
@media (max-width: 599px) { .site-header .sh-talk { display: none; } }

/* Paragraph with class "sh-dot": blinking availability dot. */
.sh-dot::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-right: 8px;
	border-radius: 999px;
	background: currentColor;
	vertical-align: 1px;
	animation: sh-blink 1.6s ease-in-out infinite;
}

/* Dot map: fade the dots out towards the text at the bottom. */
.sh-dotmap::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(180deg, transparent 35%, color-mix(in srgb, var(--wp--preset--color--primary) 94%, transparent) 85%);
}

/* CTA width: 2 columns next to Stats, 3 next to a "Next page" card. */
@media (min-width: 1080px) {
	.sh-bento > .sh-cta { grid-column: span 2; }
	.sh-bento > .sh-cta:has(+ .sh-next) { grid-column: span 3; }
}
/* Tablet: backfill gaps left by full-width cards. */
@media (max-width: 1079px) {
	.sh-bento.is-layout-grid { grid-auto-flow: row dense; }
}

/* Numbered list rows (01 Data Visualization ...). */
.sh-num-row { border-top: 1px solid var(--wp--preset--color--line); }

/* Cover images used as portraits fill their card. */
.sh-fill { height: 100%; }
.sh-fill.wp-block-cover { min-height: 100%; }

/* ---------------------------------------------------------
   8. Fixes after first review
   --------------------------------------------------------- */
/* Portrait fills the full height of the hero. */
.wp-block-column:has(> .sh-fill) { display: flex; flex-direction: column; }
.wp-block-column > .sh-fill { flex: 1 1 auto; height: auto; }
/* Never break a word in the middle of the name. */
.sh-split { overflow-wrap: normal; word-break: normal; hyphens: none; }
/* Marquee: room for descenders (g, p). */
.is-style-marquee p { line-height: 1.12; padding-bottom: 0.06em; }

/* ---------------------------------------------------------
   9. Interior pages
   --------------------------------------------------------- */
/* Filter chips: each Project Type is a pill; active = inverted. */
.sh-filter .wp-block-term {
	position: relative;
	display: inline-flex;
	gap: 8px;
	align-items: baseline;
	padding: 9px 16px;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	transition: background-color 0.35s, color 0.35s;
}
.sh-filter .wp-block-term a { padding: 0; border: 0; border-radius: 0; background: none !important; color: inherit !important; }
.sh-filter .wp-block-term a::after { content: ""; position: absolute; inset: 0; }
.sh-filter .wp-block-term:hover,
.sh-filter .wp-block-term:has(a.is-active) { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); }
.sh-filter .wp-block-term-count,
.sh-chip-count { font-family: var(--wp--preset--font-family--mono); font-size: 10px; }
.sh-filter-all a { padding: 9px 16px; font-size: var(--wp--preset--font-size--medium); font-weight: 500; }
.sh-chips { max-width: 560px; }

/* Project cards: fixed numbering (01 - Web) and round arrow. */
.sh-projects .wp-block-post-template { counter-reset: sh-proj; }
.sh-projects .wp-block-post { counter-increment: sh-proj; }
.sh-projects .wp-block-post > .sh-project-card { height: 100%; }
.sh-proj-num::before { content: counter(sh-proj, decimal-leading-zero) " \2014  "; }
.sh-projects .is-featured .wp-block-post-featured-image { flex: 1 1 auto; }
.sh-projects .is-featured .wp-block-post-featured-image img { height: 100% !important; min-height: clamp(220px, 20vw, 300px); }
.sh-read-circle {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: 16px;
	text-decoration: none !important;
	transition: background-color 0.35s, color 0.35s;
}
.sh-project-card:hover .sh-read-circle { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); }

/* Line lists (Services): hairline between items. */
.sh-lines { list-style: none; margin: 0; padding: 0; font-weight: 500; }
.sh-lines li { padding: 11px 0; border-top: 1px solid var(--wp--preset--color--line); }

/* Outline tags (Interactive Maps). */
.sh-tag { padding: 7px 12px; border: 1px solid currentColor; border-radius: 999px; }

/* Date rows (Experience): fixed 110px date column. */
.sh-date-row > .is-style-label { flex: 0 0 110px; padding-top: 4px; }
@media (max-width: 679px) { .sh-date-row { flex-wrap: wrap !important; } .sh-date-row > .is-style-label { flex-basis: 100%; } }

/* Portrait card spans two rows and fills them. */
.sh-portrait { background: var(--wp--preset--color--neutral); }
.sh-portrait > .sh-fill { flex: 1 1 auto; }

/* ---------------------------------------------------------
   10. Resume, form and project page
   --------------------------------------------------------- */
/* Experience accordion: hairline rows, "+" turns on open. */
.sh-roles .wp-block-accordion-item { border-top: 1px solid var(--wp--preset--color--line); }
.sh-roles .wp-block-accordion-heading { margin: 0; font-size: var(--wp--preset--font-size--x-large); font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; }
.sh-roles .wp-block-accordion-heading__toggle { padding: 20px 0; color: inherit; background: none; }
.sh-roles .wp-block-accordion-heading__toggle-icon { font-size: 26px; font-weight: 300; transition: transform 0.35s cubic-bezier(.2,.7,.1,1); }
.sh-roles .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon { transform: rotate(45deg); }

/* Contact button in the profile card. */
.sh-contact-btn .wp-block-button__link { height: 44px; padding: 0 18px; display: inline-flex; align-items: center; }

/* Contact form on the dark card: underlined fields, pill button. */
.sh-form-card .kb-advanced-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.sh-form-card .kb-advanced-form > .kb-adv-form-field:nth-of-type(n+3),
.sh-form-card .kb-advanced-form > .kb-submit-field,
.sh-form-card .kb-advanced-form > .kb-adv-form-message { grid-column: 1 / -1; }
@media (max-width: 679px) { .sh-form-card .kb-advanced-form { grid-template-columns: minmax(0, 1fr); } }
.sh-form-card .kb-advanced-form label { font-family: var(--wp--preset--font-family--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.7; color: inherit; }
.sh-form-card .kb-advanced-form input,
.sh-form-card .kb-advanced-form textarea {
	background: transparent !important;
	color: inherit !important;
	border: 0 !important;
	border-bottom: 1px solid var(--wp--preset--color--accent) !important;
	border-radius: 0 !important;
	padding: 10px 0 !important;
	font-size: var(--wp--preset--font-size--large);
}
.sh-form-card .kb-advanced-form input:focus,
.sh-form-card .kb-advanced-form textarea:focus { border-bottom-color: currentColor !important; outline: none; }
.sh-form-card ::placeholder { color: inherit; opacity: 0.4; }
.sh-form-card .kb-submit-field .kb-forms-submit {
	background: var(--wp--preset--color--on-primary) !important;
	color: var(--wp--preset--color--primary) !important;
	border: 0 !important;
	border-radius: 999px !important;
	padding: 14px 26px !important;
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
}

/* Project page. */
.sh-case > .sh-bento { margin: 0; }
.sh-gallery.wp-block-gallery .wp-block-image { margin: 0; }
.sh-gallery .wp-block-image img { aspect-ratio: 4 / 3; object-fit: cover; object-position: top; }
.sh-proj-nav .wp-block-post-navigation-link a { color: inherit; text-decoration: none; }
.sh-proj-nav .wp-block-post-navigation-link a::after { content: ""; position: absolute; inset: 0; }
.wp-block-post-featured-image.sh-wide img { width: 100%; }
.sh-live-link .wp-block-button__link { width: 100%; justify-content: center; text-align: center; }

/* ---------------------------------------------------------
   11. Responsive fixes (tablet 680-1079px, phone < 680px)
   --------------------------------------------------------- */
/* Project grid: 2 columns on tablet, 1 on phone (as in the original). */
@media (max-width: 1079px) {
	.sh-projects .wp-block-post-template.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 679px) {
	.sh-projects .wp-block-post-template.is-layout-grid { grid-template-columns: minmax(0, 1fr) !important; }
	/* Page titles scale with the screen so long words fit. */
	.has-display-xxl-font-size { font-size: clamp(44px, 14vw, 72px) !important; }
	.has-display-xl-font-size { font-size: clamp(44px, 13vw, 60px) !important; }
	/* Filter chips and the lead line wrap to the full card width. */
	.sh-chips,
	.sh-wide .wp-block-group > p.has-x-large-font-size { flex-basis: 100% !important; max-width: 100%; }
	/* Hero: no forced height once it stacks. */
	.sh-bento > section.sh-wide:first-child { min-height: 0 !important; }
}

/* ---------------------------------------------------------
   12. Project page (v2 design)
   --------------------------------------------------------- */
.has-display-title-font-size { letter-spacing: -0.06em; line-height: 0.9; text-wrap: balance; }
@media (max-width: 679px) { .has-display-title-font-size { font-size: clamp(44px, 13vw, 64px) !important; } }
.sh-back a { transition: opacity 0.3s; }
.sh-back a:hover { opacity: 0.5; text-decoration: none; }

/* Details list: ink rule on top, hairlines between rows. */
.sh-meta-list { border-top: 1px solid var(--wp--preset--color--contrast); }
.sh-meta-list > * { padding: 14px 0 !important; border-top: 0 !important; border-bottom: 1px solid var(--wp--preset--color--line); }
.sh-meta-list .is-style-label-muted { font-size: 10px; letter-spacing: 0.08em; }

/* Live Preview bar (or outlined Let's Collab). */
.sh-live-link { width: 100%; }
.sh-live-link .wp-block-button__link {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center;
	width: 100%;
	padding: 15px 18px !important;
	border-radius: 0 !important;
	font-size: var(--wp--preset--font-size--normal);
	text-align: left !important;
}
.sh-live-link .wp-block-button__link::after { content: "\2197"; }
.sh-live-link.is-collab .wp-block-button__link { background: transparent; color: var(--wp--preset--color--contrast); border-color: var(--wp--preset--color--contrast); }
.sh-live-link.is-collab .wp-block-button__link:hover { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); }

/* Hero image: greyscale, colour and slow zoom on hover. */
.sh-hero { overflow: hidden; background: var(--wp--preset--color--neutral); }
.sh-hero img { filter: grayscale(1); transform: scale(1.02); transition: filter 0.8s ease, transform 1.6s cubic-bezier(.2,.7,.1,1); object-position: center top; }
.sh-hero:hover img { filter: none; transform: scale(1.05); }
@media (max-width: 1079px) { .sh-hero img { aspect-ratio: 16 / 9 !important; } }
@media (max-width: 679px) { .sh-hero img { aspect-ratio: 4 / 3 !important; } }

/* Story: steps on the left, sticky figure panel on the right. */
.sh-story { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--small); align-items: start; }
.sh-steps { min-width: 0; }
.sh-step-inner { transition: opacity 0.6s cubic-bezier(.2,.7,.1,1); }
.sh-step-rule { padding-bottom: 14px; border-bottom: 1px solid var(--wp--preset--color--contrast); }
.sh-step h2 { text-wrap: balance; }
.sh-step p { max-width: 52ch; }
.sh-step-img { margin: 0 !important; overflow: hidden; background: var(--wp--preset--color--neutral); }
.sh-step-img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: center top; filter: grayscale(1); }
.sh-story-panel { display: none; }
@media (min-width: 680px) {
	.sh-story.has-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.sh-story.has-panel .sh-step-img { display: none; }
	.sh-story.has-panel .sh-step { min-height: clamp(380px, 64vh, 560px); justify-content: center !important; }
	.sh-story.has-panel .sh-step:not(.is-active) .sh-step-inner { opacity: 0.32; }
	.sh-story-panel {
		display: flex;
		flex-direction: column;
		gap: 14px;
		position: sticky;
		top: 90px;
		height: min(calc(100vh - 106px), 760px);
		min-width: 0;
		padding: clamp(12px, 1.2vw, 16px);
		background: var(--wp--preset--color--base);
	}
	.admin-bar .sh-story-panel { top: 122px; height: min(calc(100vh - 138px), 760px); }
}
@media (min-width: 1080px) { .sh-story.has-panel .sh-step { min-height: clamp(420px, 72vh, 680px); } }
.sh-story-head,
.sh-story-foot { display: flex; justify-content: space-between; gap: 12px; padding: 4px 4px 0; }
.sh-story-head { font-family: var(--wp--preset--font-family--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.sh-story-foot { align-items: flex-end; gap: 16px; padding: 0 4px 4px; }
.sh-story-title { font-size: var(--wp--preset--font-size--normal); font-weight: 600; letter-spacing: -0.02em; }
.sh-story-frames { all: unset; position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: var(--wp--preset--color--neutral); cursor: zoom-in; }
.sh-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: grayscale(1); opacity: 0; transform: scale(1.04); transition: opacity 0.8s ease, transform 1.4s cubic-bezier(.2,.7,.1,1), filter 0.6s ease; }
.sh-frame.is-active { opacity: 1; transform: scale(1); }
.sh-story-frames:hover .sh-frame.is-active { filter: none; }
.sh-story-dots { display: flex; gap: 6px; flex: none; }
.sh-dash { all: unset; display: flex; align-items: center; width: 14px; height: 14px; cursor: pointer; transition: width 0.5s cubic-bezier(.2,.7,.1,1); }
.sh-dash::before { content: ""; display: block; width: 100%; height: 2px; background: var(--wp--preset--color--line); transition: background-color 0.4s; }
.sh-dash.is-active { width: 40px; }
.sh-dash.is-active::before { background: var(--wp--preset--color--contrast); }
.sh-dash:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }

/* Masonry gallery: 3 / 2 / 1 columns. */
.sh-masonry { display: block !important; column-count: 3; column-gap: var(--wp--preset--spacing--small); }
.sh-masonry > .wp-block-image { break-inside: avoid; margin: 0 0 var(--wp--preset--spacing--small) !important; background: var(--wp--preset--color--neutral); overflow: hidden; }
.sh-masonry > .wp-block-image img { width: 100%; height: auto; display: block; filter: grayscale(1); transition: filter 0.6s ease, transform 1.2s cubic-bezier(.2,.7,.1,1); }
.sh-masonry > .wp-block-image:hover img { filter: none; transform: scale(1.02); }
@media (max-width: 1079px) { .sh-masonry { column-count: 2; } }
@media (max-width: 679px) { .sh-masonry { column-count: 1; } }

/* Previous / Next cards. */
.sh-proj-nav .sh-glyph { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid currentColor; border-radius: 999px; font-size: 18px; line-height: 1; }
.sh-proj-nav.is-next { text-align: right; }
.sh-proj-nav.is-next .sh-nav-body { align-items: flex-end !important; }

/* ---------------------------------------------------------
   13. Header and mobile menu fix
   A backdrop-filter on the header itself makes it the frame for any
   position:fixed child, which clipped the mobile menu to the header's
   height. The blur now lives on a layer behind the header instead.
   --------------------------------------------------------- */
.site-header {
	background: transparent !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}
.site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: var(--wp--custom--header--background);
	-webkit-backdrop-filter: blur(14px) saturate(1.4);
	backdrop-filter: blur(14px) saturate(1.4);
}
.site-header:has(.is-menu-open)::before { display: none; }

/* Full-screen menu overlay. */
.wp-block-navigation__responsive-container.is-menu-open {
	position: fixed !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	z-index: 100000 !important;
	overflow-y: auto;
	padding: calc(env(safe-area-inset-top, 0px) + 18px) var(--wp--preset--spacing--edge) calc(env(safe-area-inset-bottom, 0px) + 32px) !important;
}
.admin-bar .wp-block-navigation__responsive-container.is-menu-open { top: 46px !important; height: calc(100% - 46px) !important; }
@media (min-width: 783px) { .admin-bar .wp-block-navigation__responsive-container.is-menu-open { top: 32px !important; height: calc(100% - 32px) !important; } }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 64px !important;
	align-items: stretch !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	counter-reset: sh-nav;
	width: 100%;
	gap: 0 !important;
	align-items: stretch !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	counter-increment: sh-nav;
	display: flex !important;
	align-items: baseline;
	gap: 14px;
	width: 100%;
	padding: 12px 0;
	border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
	font-size: clamp(40px, 12vw, 64px);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-child { border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item::before {
	content: counter(sh-nav, decimal-leading-zero);
	flex: none;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.06em;
	opacity: 0.55;
	transform: translateY(-0.6em);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { padding: 0 !important; }
.wp-block-navigation__responsive-container-close {
	top: calc(env(safe-area-inset-top, 0px) + 18px) !important;
	right: var(--wp--preset--spacing--edge) !important;
	width: 44px;
	height: 44px;
	display: grid !important;
	place-items: center;
	border: 1px solid currentColor !important;
	border-radius: 999px;
}
.wp-block-navigation__responsive-container-close svg,
.wp-block-navigation__responsive-container-open svg { width: 28px; height: 28px; }
.wp-block-navigation__responsive-container-open {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border: 1px solid currentColor;
	border-radius: 999px;
}
@media (min-width: 600px) { .wp-block-navigation__responsive-container-open:not(.always-shown) { display: none !important; } }
/* Keep the site title, menu button and toggle on one line on small phones. */
@media (max-width: 599px) {
	.site-header .wp-block-group.alignwide { flex-wrap: nowrap !important; gap: 10px !important; }
	.site-header .wp-block-site-title { font-size: 17px; white-space: nowrap; }
}

/* ---------------------------------------------------------
   14. Filter pills: one row, equal height
   The Project Types list joins the same row as "All", and the
   spacing WordPress adds between a pill's name and count is removed.
   --------------------------------------------------------- */
.sh-chips {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 8px !important;
}
.sh-chips > *,
.sh-chips .sh-filter,
.sh-chips .sh-filter > *,
.sh-chips .wp-block-term > * { margin: 0 !important; }
.sh-chips .sh-filter,
.sh-chips .sh-filter .wp-block-term-template { display: contents !important; }
.sh-chips .sh-filter .wp-block-term,
.sh-chips .sh-filter-all a {
	box-sizing: border-box;
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 16px !important;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none !important;
}
.sh-chips .wp-block-term-name,
.sh-chips .wp-block-term-count { display: inline; line-height: 1; }
.sh-chips .wp-block-term-count,
.sh-chips .sh-chip-count { font-family: var(--wp--preset--font-family--mono); font-size: 10px; letter-spacing: 0.04em; opacity: 0.7; }
.sh-chips .sh-filter-all { display: flex; }
@media (max-width: 679px) { .sh-chips .sh-filter .wp-block-term, .sh-chips .sh-filter-all a { height: 36px; padding: 0 13px !important; } }

/* ---------------------------------------------------------
   15. Fixes: menu close button, title clipping, pill row width
   --------------------------------------------------------- */
/* The close (X) button only exists inside the open mobile menu. */
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-close { display: none !important; }

/* Letter animation: clip only the rise from below, never the sides,
   so letters with tight spacing (the last "o") are not cut. */
.sh-split .sh-ch {
	overflow: visible;
	clip-path: inset(-0.5em -0.3em 0 -0.3em);
}

/* Filter pills use the full width of the title card. */
.sh-chips {
	flex: 1 1 100% !important;
	flex-basis: 100% !important;
	max-width: none !important;
	width: 100%;
}

/* Services > Tools dropdown (desktop) and nested items (mobile menu). */
.site-header .wp-block-navigation__submenu-container {
	min-width: 180px !important;
	padding: 8px !important;
	border: 1px solid var(--wp--preset--color--line) !important;
	background: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--contrast) !important;
}
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 8px 10px !important; }
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--wp--preset--color--neutral); text-decoration: none; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	padding: 4px 0 0 !important;
	border: 0 !important;
	background: transparent !important;
	color: inherit !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
	counter-increment: none;
	font-size: 22px;
	border: 0 !important;
	padding: 4px 0 4px 26px;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item::before { content: "\21B3"; transform: none; font-size: 16px; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu { flex-wrap: wrap; }

/* About: Education spans 2 columns beside Experience; degrees sit side by side. */
@media (min-width: 1080px) {
	.sh-bento.is-layout-grid > .sh-edu { grid-column: span 2; }
	.sh-bento > .sh-edu > .wp-block-group:has(> .has-neutral-background-color) { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wp--preset--spacing--small, 12px); }
	.sh-bento > .sh-edu > .wp-block-group > .has-neutral-background-color { margin: 0 !important; height: 100%; }
}


/* Start a project: How it works list */
.sh-ob-how { margin: 0; padding-left: 1.2em; display: grid; gap: 12px; }
.sh-ob-how li { padding-left: 4px; }