@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@100..125,300..600&family=Instrument+Sans:wdth,wght@75..100,400..600&display=swap");

/* ==========================================================================
   oa-theme.css  (2026-10-10)
   Re-skins the whole public Squarespace 7.1 site (www.omarali.xyz) in the look of
   the new kit: chalk page, ink text, poppy accent, Archivo Expanded headings,
   Instrument Sans text, pill buttons, hairlines, light sections.
   Paste into Settings > Custom CSS, or serve it next to oa.css.

   Ground rules
   - Scoped to the public site. Every rule sits behind a guard that switches the
     whole file off while the Squarespace editor is open (it adds
     sqs-is-page-editing / sqs-editing to the page).
   - Sections with a photo, a video or a Squarespace background effect are never
     restyled (no colour, filter, overlay or scrim). Only their type and buttons change.
   - No em dashes anywhere in this file.
   ========================================================================== */


/* ---------- 1. Palette (2026-10-10) --------------------------------------
   Squarespace builds every colour from a handful of "h,s%,l%" variables.
   Pointing them at the kit colours re-colours the entire site in one move.
     white  -> chalk  #f6f6f2   (page background)
     black  -> ink    #17171b   (text, and the "dark" ground on photo sections)
     accent -> poppy  #ef4a24
   The "safe" variants are the ones Squarespace picks for text and buttons that
   sit on the matching ground, so they are set by hand for contrast:
     safeDark  = ink   (text on chalk/sky)        safeInverseDark  = chalk (text on ink)
     safeLight = chalk (text on photo/ink)        safeInverseLight = ink
     safeInverseAccent = ink (text on poppy, 5:1) */
html:not(.sqs-is-page-editing):not(.sqs-editing):not(:has(body.sqs-is-page-editing)) {
  --white-hsl: 60, 18.1818%, 95.6863%;
  --black-hsl: 240, 8%, 9.8039%;
  --accent-hsl: 11.2315, 86.383%, 53.9216%;
  --lightAccent-hsl: 207.5676, 62.7119%, 88.4314%;   /* sky tint, used by "light" sections */
  --darkAccent-hsl: 240, 8%, 9.8039%;
  --safeLightAccent-hsl: 60, 18.1818%, 95.6863%;
  --safeDarkAccent-hsl: 240, 8%, 9.8039%;
  --safeInverseAccent-hsl: 240, 8%, 9.8039%;
  --safeInverseLightAccent-hsl: 240, 8%, 9.8039%;
  --safeInverseDarkAccent-hsl: 60, 18.1818%, 95.6863%;

  /* fonts: the family variables only carry the family; stretch is set below */
  --heading-font-font-family: "Archivo";
  --body-font-font-family: "Instrument Sans";
  --meta-font-font-family: "Instrument Sans";
  --primary-button-font-font-family: "Instrument Sans";
  --secondary-button-font-font-family: "Instrument Sans";
  --tertiary-button-font-font-family: "Instrument Sans";
  --heading-font-font-weight: 400;
  --body-font-font-weight: 400;
  --meta-font-font-weight: 400;
  --primary-button-font-font-weight: 500;
  --secondary-button-font-font-weight: 500;
  --tertiary-button-font-font-weight: 500;
  --primary-button-font-text-transform: none;
  --secondary-button-font-text-transform: none;
  --tertiary-button-font-text-transform: none;
}


/* ---------- 2. Page ground and type (2026-10-10) -------------------------
   Chalk behind everything, kit text face for body, nav and meta. */
body:not(.sqs-is-page-editing):not(.sqs-editing) {
  background-color: #f6f6f2;
  font-family: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body:not(.sqs-is-page-editing):not(.sqs-editing) :is(p, li, a, span, label, input, textarea, select, button, figcaption, blockquote, td, th, dt, dd) {
  font-family: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
}
body:not(.sqs-is-page-editing):not(.sqs-editing) :is(p, li, figcaption, blockquote) {
  font-weight: 400;
}

/* Headings, the site title and the big card titles use Archivo at width 125.
   Squarespace keeps its own size scale; only tracking and line height change so
   the wide face does not crowd. */
body:not(.sqs-is-page-editing):not(.sqs-editing) :is(h1, h2, h3, h4, .header-title-text, .header-title-text a, .list-item-content__title, .summary-title, .portfolio-title, .blog-item-title, .sqs-block-marquee h1) {
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-stretch: 125%;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.08;
  text-transform: none;
  overflow-wrap: break-word;
}
/* h5 and h6 act as small labels on this site: text face, no stretch */
body:not(.sqs-is-page-editing):not(.sqs-editing) :is(h5, h6) {
  font-family: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
}

/* Navigation: kit text face, ink on light pages (colour comes from the theme variables) */
body:not(.sqs-is-page-editing):not(.sqs-editing) :is(.header-nav-item a, .header-nav-folder-item a, .header-menu-nav-item a, .header-actions a, .header-burger, .header-menu a) {
  font-family: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
}


/* ---------- 3. Dark sections turn light (2026-10-10) ---------------------
   Sections themed black, dark, black-bold, dark-bold or bright-inverse become
   chalk with ink text. Squarespace builds a dark section by using the "black"
   colour as the background and "white" as the text, so swapping those two
   variables inside the section flips everything in it (text, links, form fields,
   hairlines) without touching any other rule.
   A section is left alone if it has a background image, video or effect canvas.
   A section that only holds a video block turns light like the rest (Omar prefers
   light pages; the video sits on chalk as a framed player). */
body:not(.sqs-is-page-editing):not(.sqs-editing) :is(
  section.page-section[data-section-theme="black"],
  section.page-section[data-section-theme="dark"],
  section.page-section[data-section-theme="black-bold"],
  section.page-section[data-section-theme="dark-bold"],
  section.page-section[data-section-theme="darkest"],
  section.page-section[data-section-theme="bright-inverse"]
):not(:has(.section-background img, .section-background video, .section-background iframe, .section-background-canvas, .sqs-video-background-native, .sqs-video-background, .video-background, [data-controller="VideoBackgroundNative"])) {
  --white-hsl: 240, 8%, 9.8039%;
  --black-hsl: 60, 18.1818%, 95.6863%;
  --darkAccent-hsl: 60, 18.1818%, 95.6863%;
  --lightAccent-hsl: 240, 8%, 9.8039%;
  --safeLightAccent-hsl: 240, 8%, 9.8039%;
  --safeInverseLightAccent-hsl: 60, 18.1818%, 95.6863%;
  background-color: #f6f6f2;
  color: #17171b;
}

/* Footer: the footer is a "dark" section too, so it turns chalk above; this adds the hairline on top */
body:not(.sqs-is-page-editing):not(.sqs-editing) footer#footer-sections {
  border-top: 1px solid rgba(23, 23, 27, 0.2);
}

/* Photo, video and effect sections are left exactly as Squarespace draws them.
   The palette change above would shift their black ground and scrim from pure black to
   ink, so those two colours are put back to Squarespace's originals inside them. Only the
   type (font, chalk colour) and the buttons change there. */
body:not(.sqs-is-page-editing):not(.sqs-editing) section.page-section:has(.section-background img, .section-background video, .section-background iframe, .section-background-canvas, .sqs-video-background-native, .sqs-video-background, .video-background, [data-controller="VideoBackgroundNative"]) {
  --black-hsl: 0, 0%, 0%;
  --darkAccent-hsl: 0, 0%, 10.98039216%;
}


/* ---------- 4. Header and logo (2026-10-10) ------------------------------
   Squarespace gives the header the theme of the first section (data-section-theme
   on #header). When that first section is a photo or effect hero the header keeps
   its light type and white logo. In every other case the header now sits on a
   light page: ink type and the white logo is inverted to dark. */
body:not(.sqs-is-page-editing):not(.sqs-editing):not(:has(#page article > :first-child :is(.section-background img, .section-background video, .section-background iframe, .section-background-canvas, .sqs-video-background-native, .sqs-video-background, .video-background, [data-controller="VideoBackgroundNative"]))) #header:is(
  [data-section-theme="black"], [data-section-theme="dark"], [data-section-theme="black-bold"],
  [data-section-theme="dark-bold"], [data-section-theme="darkest"], [data-section-theme="bright-inverse"]) {
  --white-hsl: 240, 8%, 9.8039%;
  --black-hsl: 60, 18.1818%, 95.6863%;
  --darkAccent-hsl: 60, 18.1818%, 95.6863%;
  --lightAccent-hsl: 240, 8%, 9.8039%;
  --safeLightAccent-hsl: 240, 8%, 9.8039%;
  --safeInverseLightAccent-hsl: 60, 18.1818%, 95.6863%;
  color: #17171b;
}
body:not(.sqs-is-page-editing):not(.sqs-editing):not(:has(#page article > :first-child :is(.section-background img, .section-background video, .section-background iframe, .section-background-canvas, .sqs-video-background-native, .sqs-video-background, .video-background, [data-controller="VideoBackgroundNative"]))) #header :is(.header-title-logo img, .header-mobile-logo img) {
  filter: invert(1);
}


/* The open mobile menu is a chalk sheet on every page, including over a photo hero,
   so while it is open the logo is dark and the menu type is ink. */
body.header--menu-open:not(.sqs-is-page-editing):not(.sqs-editing) #header :is(.header-title-logo img, .header-mobile-logo img) {
  filter: invert(1);
}
body.header--menu-open:not(.sqs-is-page-editing):not(.sqs-editing) #header :is(.header-menu a, .header-burger, .header-title-text a) {
  color: #17171b;
}
body.header--menu-open:not(.sqs-is-page-editing):not(.sqs-editing) #header .header-burger-btn :is(.top-bun, .patty, .bottom-bun, .burger-inner span) {
  background-color: #17171b;
}


/* ---------- 5. Buttons (2026-10-10) --------------------------------------
   Pill shape, sentence case, kit text face. Primary is a poppy fill with white
   text, secondary an ink outline, tertiary a sky tint. Hover changes the fill
   only, never a shadow. On photo or video sections the secondary outline turns
   chalk so it stays readable; primary stays poppy everywhere. */
body:not(.sqs-is-page-editing):not(.sqs-editing) :is(
  .sqs-button-element--primary, .sqs-button-element--secondary, .sqs-button-element--tertiary,
  .sqs-block-button-element, .newsletter-form-button, .form-submit-button,
  .sqs-block-form button[type="submit"], .sqs-block-form input[type="submit"],
  .form-button-wrapper button, .form-button-wrapper input[type="submit"]) {
  font-family: "Instrument Sans", "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 500 !important;
  font-stretch: 100% !important;
  letter-spacing: 0.005em !important;
  text-transform: none !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
/* Some button labels were typed in capitals in the page content. Sentence case is
   forced in CSS: lowercase the label, then capitalise its first letter. */
body:not(.sqs-is-page-editing):not(.sqs-editing) :is(
  .sqs-button-element--primary, .sqs-button-element--secondary, .sqs-button-element--tertiary,
  .sqs-block-button-element, .newsletter-form-button, .form-submit-button,
  .sqs-block-form button[type="submit"], .form-button-wrapper button):not(.header-skip-link) {
  text-transform: lowercase !important;
}
body:not(.sqs-is-page-editing):not(.sqs-editing) :is(
  .sqs-button-element--primary, .sqs-button-element--secondary, .sqs-button-element--tertiary,
  .sqs-block-button-element, .newsletter-form-button, .form-submit-button,
  .sqs-block-form button[type="submit"], .form-button-wrapper button)::first-letter {
  text-transform: uppercase !important;
}
/* Button blocks are flex boxes, and a flex box cannot capitalise its first letter.
   Inside the button block they become plain centred blocks so the sentence-case
   rule above works. */
body:not(.sqs-is-page-editing):not(.sqs-editing) .sqs-block-button-container .sqs-block-button-element {
  display: block !important;
  text-align: center;
  align-content: center;
}
body:not(.sqs-is-page-editing):not(.sqs-editing) :is(
  .sqs-button-element--primary, .sqs-block-button-element[data-sqs-button-element="primary"],
  .sqs-block-button-element--primary, .newsletter-form-button, .form-submit-button,
  .sqs-block-form button[type="submit"], .sqs-block-form input[type="submit"],
  .form-button-wrapper button, .form-button-wrapper input[type="submit"]) {
  background-color: #ef4a24 !important;
  border: 1.5px solid #ef4a24 !important;
  color: #ffffff !important;
}
body:not(.sqs-is-page-editing):not(.sqs-editing) :is(
  .sqs-button-element--primary, .sqs-block-button-element--primary, .newsletter-form-button, .form-submit-button,
  .sqs-block-form button[type="submit"], .sqs-block-form input[type="submit"],
  .form-button-wrapper button, .form-button-wrapper input[type="submit"]):hover {
  background-color: #c8361a !important;
  border-color: #c8361a !important;
  color: #ffffff !important;
}
/* labels inside buttons inherit the white */
body:not(.sqs-is-page-editing):not(.sqs-editing) :is(.sqs-button-element--primary, .newsletter-form-button, .form-submit-button) :is(span, .newsletter-form-button-label) {
  color: inherit !important;
}
/* secondary: ink outline */
body:not(.sqs-is-page-editing):not(.sqs-editing) :is(.sqs-button-element--secondary, .sqs-block-button-element--secondary) {
  background-color: transparent !important;
  border: 1.5px solid #17171b !important;
  color: #17171b !important;
}
body:not(.sqs-is-page-editing):not(.sqs-editing) :is(.sqs-button-element--secondary, .sqs-block-button-element--secondary):hover {
  background-color: #17171b !important;
  color: #f6f6f2 !important;
}
/* tertiary: sky tint */
body:not(.sqs-is-page-editing):not(.sqs-editing) :is(.sqs-button-element--tertiary, .sqs-block-button-element--tertiary) {
  background-color: #cfe3f4 !important;
  border: 1.5px solid #cfe3f4 !important;
  color: #17171b !important;
}
body:not(.sqs-is-page-editing):not(.sqs-editing) :is(.sqs-button-element--tertiary, .sqs-block-button-element--tertiary):hover {
  background-color: #dcd6f7 !important;
  border-color: #dcd6f7 !important;
}
/* secondary and tertiary on photo or video sections: chalk outline, chalk text */
body:not(.sqs-is-page-editing):not(.sqs-editing) section.page-section:has(.section-background img, .section-background video, .section-background iframe, .section-background-canvas, .sqs-video-background-native, .sqs-video-background, .video-background, [data-controller="VideoBackgroundNative"]) :is(.sqs-button-element--secondary, .sqs-block-button-element--secondary) {
  border-color: #f6f6f2 !important;
  color: #f6f6f2 !important;
}
body:not(.sqs-is-page-editing):not(.sqs-editing) section.page-section:has(.section-background img, .section-background video, .section-background iframe, .section-background-canvas, .sqs-video-background-native, .sqs-video-background, .video-background, [data-controller="VideoBackgroundNative"]) :is(.sqs-button-element--secondary, .sqs-block-button-element--secondary):hover {
  background-color: #f6f6f2 !important;
  color: #17171b !important;
}


/* ---------- 5b. List sections and carousels (2026-10-10) ------------------
   The "Selected projects" carousel and other Squarespace list sections: titles in the
   display face, descriptions in the text face, and arrows as ink circles with a chalk
   arrow on light sections (chalk circle, ink arrow on photo or video sections).
   Their buttons are ordinary Squarespace buttons and get the pill rules above. */
body:not(.sqs-is-page-editing):not(.sqs-editing) .user-items-list :is(.list-item-content__description, .list-item-content__description p) {
  font-family: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  text-transform: none;
}
body:not(.sqs-is-page-editing):not(.sqs-editing) :is(.user-items-list-carousel__arrow-icon-background, .user-items-list-carousel__arrow-icon-background-area, .mobile-arrow-icon-background-area, .user-items-list-banner-slideshow__arrow-icon-background-area) {
  background-color: #17171b;
}
body:not(.sqs-is-page-editing):not(.sqs-editing) :is(.user-items-list-carousel__arrow-button, .mobile-arrow-button, .user-items-list-banner-slideshow__arrow-button) :is(svg, svg *) {
  stroke: #f6f6f2;
  color: #f6f6f2;
}
body:not(.sqs-is-page-editing):not(.sqs-editing) section.page-section:has(.section-background img, .section-background video, .section-background iframe, .section-background-canvas, .sqs-video-background-native, .sqs-video-background, .video-background, [data-controller="VideoBackgroundNative"]) :is(.user-items-list-carousel__arrow-icon-background, .user-items-list-carousel__arrow-icon-background-area, .mobile-arrow-icon-background-area) {
  background-color: #f6f6f2;
}
body:not(.sqs-is-page-editing):not(.sqs-editing) section.page-section:has(.section-background img, .section-background video, .section-background iframe, .section-background-canvas, .sqs-video-background-native, .sqs-video-background, .video-background, [data-controller="VideoBackgroundNative"]) :is(.user-items-list-carousel__arrow-button, .mobile-arrow-button) :is(svg, svg *) {
  stroke: #17171b;
  color: #17171b;
}


/* ---------- 6. Scrolling banner (2026-10-10) -----------------------------
   The marquee section keeps its uppercase but takes the display face at width 125. */
body:not(.sqs-is-page-editing):not(.sqs-editing) .sqs-block-marquee :is(h1, h2, h3, p, span, div) {
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-stretch: 125%;
  font-weight: 400;
  letter-spacing: -0.01em;
}


/* ---------- 7. Kit pieces melt into the page (2026-10-10) ----------------
   Kit pieces paint their own chalk panel. On a themed page the page is chalk
   already, so the panel goes transparent and the piece sits directly on the page. */
body:not(.sqs-is-page-editing):not(.sqs-editing) .oa-kit.oa-c {
  background: transparent;
}


/* ---------- 8. Previous / next project bar (2026-10-10) ------------------
   The bar under each case study is drawn dark by Squarespace. It turns chalk
   with ink type and a hairline above, like the footer. */
body:not(.sqs-is-page-editing):not(.sqs-editing) .item-pagination {
  --white-hsl: 240, 8%, 9.8039%;
  --black-hsl: 60, 18.1818%, 95.6863%;
  --darkAccent-hsl: 60, 18.1818%, 95.6863%;
  --lightAccent-hsl: 240, 8%, 9.8039%;
  background-color: #f6f6f2 !important;
  color: #17171b !important;
  border-top: 1px solid rgba(23, 23, 27, 0.2);
}
body:not(.sqs-is-page-editing):not(.sqs-editing) .item-pagination :is(.item-pagination-link, .item-pagination-title, .item-pagination-prev-next) {
  color: #17171b !important;
}
body:not(.sqs-is-page-editing):not(.sqs-editing) .item-pagination .item-pagination-icon :is(svg, svg *, polyline, path) {
  stroke: #17171b !important;
}


/* ---------- 9. Inset photo and video sections (2026-10-10) ---------------
   When a background photo or video is set to "inset", Squarespace paints the
   margin around it black. That margin turns chalk so the media reads as a
   framed picture on a light page. */
body:not(.sqs-is-page-editing):not(.sqs-editing) section.page-section.background-width--inset > .section-border {
  background-color: #f6f6f2;
}