/* alexmcaulay.ca
 *
 * Rebuilt like-for-like from the Wix original. Colours came out of the live
 * stylesheet, not a screenshot: on a near-black page almost every sampled
 * pixel returns black, so the one saturated value in the whole design (the
 * amber button border) is invisible to a naive sample. That was tried twice
 * and failed twice before reading the CSS.
 */

:root {
  --black: #000000;
  --near:  #080808;
  --band:  #141414;
  --white: #FFFFFF;
  --amber: #C38510;
  --muted: #8F8F8F;

  --gutter: clamp(1.5rem, 7vw, 8rem);
  --wide: 1280px;
  --measure: 42em;
}

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

.amc-sec {
  padding-block: clamp(2.5rem, 5.5vw, 4.25rem);
  padding-inline: max(var(--gutter), calc((100% - var(--wide)) / 2));
}

.amc-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.amc-skip {
  position: absolute; left: -9999px;
  background: var(--white); color: var(--black);
  padding: 0.6rem 1rem; z-index: 100;
}
.amc-skip:focus { left: 0.5rem; top: 0.5rem; }

/* ---------------------------------------------------------------- header -- */
.amc-header { background: var(--black); }
.amc-header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  padding-block: 1.6rem;
  padding-inline: max(var(--gutter), calc((100% - var(--wide)) / 2));
}
.amc-wordmark {
  font-family: Jost, sans-serif;
  font-weight: 300;
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  color: var(--white);
  text-decoration: none;
  white-space: nowrap;
}
.amc-nav { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2rem); flex-wrap: wrap; }
.amc-nav a { color: var(--white); text-decoration: none; font-size: 0.95rem; }
.amc-nav a:hover { color: var(--amber); }

.amc-search input {
  background: transparent;
  border: 1px solid #3a3a3a;
  color: var(--white);
  padding: 0.45rem 0.7rem 0.45rem 2rem;
  font-family: inherit;
  font-size: 0.85rem;
  width: 11rem;
  /* Magnifier drawn in the border colour so no icon font or SVG request is
     needed for one glyph. */
  background-image:
    radial-gradient(circle at 0.42rem 0.42rem, transparent 0.28rem, var(--muted) 0.28rem, var(--muted) 0.34rem, transparent 0.35rem);
  background-repeat: no-repeat;
  background-position: 0.35rem center;
  background-size: 1rem 1rem;
}
.amc-search input::placeholder { color: var(--muted); }
.amc-search input:focus { outline: 1px solid var(--amber); outline-offset: 1px; }

/* ------------------------------------------------------------------ hero -- */
.amc-hero-sec { background: var(--band); padding-block: 0; padding-inline: 0; }
.amc-hero {
  display: grid;
  gap: 0;
  grid-template-columns: minmax(0, 1fr);
  /* Measured on the live original: the band is 679px and the portrait is
     600x900 anchored to its top, so the photo runs past the bottom edge and
     is clipped there. That crop is the framing: it ends just below his hand
     and everything under it is cut. Fitting the whole image into the band
     instead is what made it look small and floaty. */
  min-height: 679px;
  overflow: hidden;
}
@media (min-width: 1000px) {
  .amc-hero { grid-template-columns: 660px minmax(0, 1fr); }
}
.amc-hero-portrait {
  position: relative;
  height: 679px;
  overflow: hidden;
}
.amc-hero-portrait img {
  position: absolute;
  top: 0;
  left: 52px;              /* measured on the original */
  width: 600px;
  height: 900px;           /* taller than the band on purpose; the band clips */
  max-width: none;
  object-fit: cover;
  object-position: center top;
  filter: contrast(1.04);
}
.amc-hero-copy { align-self: center; padding-left: clamp(2rem, 5vw, 4.5rem); padding-block: 2rem; }
/* Below the two-column breakpoint the portrait must stop being a fixed 600px
   box anchored at 52px, or it overflows and the page scrolls sideways. Browser
   zoom reduces the effective viewport, so this is the rule that decides
   whether zooming looks deliberate or broken. */
@media (max-width: 999px) {
  .amc-hero { min-height: 0; overflow: hidden; }
  .amc-hero-portrait { height: min(62vh, 520px); }
  .amc-hero-portrait img {
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    height: 100%;
    max-height: 700px;
  }
  .amc-hero-copy { padding: 2.5rem clamp(1.25rem, 5vw, 3rem) 3.5rem; }
}
.amc-hero h1 {
  margin: 0 0 0.6rem;
  font-size: clamp(2.5rem, 6vw, 4.4rem);
  letter-spacing: 0.01em;
  line-height: 1.02;
}
.amc-hero-sub { margin: 0 0 2rem; color: var(--white); font-size: 1.25rem; line-height: 1.67; }
.amc-hero-actions { display: flex; align-items: center; gap: 1.15rem; }

/* The one accent on the site. Outlined, not filled, which is what the
   original does and is why the amber reads as restrained rather than loud. */
.amc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 2px, not 1px. The original's border is 2px solid #C38510 and at 1px the
     amber outline reads as a hairline that the eye resolves as blur rather
     than as a line. Measured off the live original, not chosen. */
  border: 2px solid var(--amber);
  color: var(--white);
  background: transparent;
  text-decoration: none;
  /* border-box, or min-height applies to the content box and the two 2px
     borders push the button to 49px against the original's 45px. */
  box-sizing: border-box;
  min-height: 45px;
  padding: 0 2.75rem;
  border-radius: 999px;
  font-size: 0.85rem;
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.amc-btn:hover { background: var(--amber); color: var(--black); }

/* Disc 39px with the glyph at 53.2% of it, both measured off the original
   asset (a 201px disc with a 107px square hole). The glyph was previously
   14px inside a 32px disc: a third too small inside a disc a fifth too
   small, which is what made the mark look unresolved. The offset is the
   original's own optical centring, scaled: the mark sits slightly right of
   and above the geometric centre because the dot of the 'i' pulls it up. */
.amc-social {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
  width: 39px; height: 39px; border-radius: 999px;
  background: var(--white); color: var(--black);
}
.amc-social svg {
  width: 21px; height: 21px;
  position: relative; left: 0.6px; top: -1.2px;
}
.amc-social:hover { background: var(--amber); }

/* ----------------------------------------------------------------- about -- */
.amc-split {
  display: grid; gap: clamp(1.25rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 860px) {
  .amc-split { grid-template-columns: minmax(0, 0.4fr) minmax(0, 1fr); }
}
.amc-label { font-family: Jost, sans-serif; font-weight: 400; font-size: 1.9rem; margin: 0; }
.amc-split p { max-width: var(--measure); font-size: 1rem; line-height: 1.8; margin: 0 0 1rem; }

.amc-right { text-align: right; padding-bottom: 0; }
.amc-sec:has(.amc-right) { padding-bottom: clamp(1rem, 2vw, 1.75rem); }
.amc-right h2 { margin: 0; font-size: clamp(1.75rem, 3vw, 2.31rem); font-weight: 400; line-height: 1.2; }

/* -------------------------------------------------------------- ventures --
 * Four tabs over a photograph, matching the original. Native radio inputs
 * drive it: no JavaScript, works without it, and the panels are real content
 * in the DOM so they are indexable rather than injected on click.
 */
.amc-ventures { position: relative; background: var(--band); overflow: hidden; }
/* The original runs an autoplay loop video behind this band and behind the
   contact block. Both were flattened to stills on the first pass, which is
   the single most visible thing that made the rebuild look wrong. */
.amc-bgvideo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
.amc-ventures > .amc-bgvideo { opacity: 0.5; }
/* A scrim under the copy. The original is darker than Mahdi wants, so
   this is lighter than matching it exactly. */
.amc-ventures::after { content: ""; position: absolute; inset: 0;
  background: rgba(0,0,0,0.34); z-index: 0; pointer-events: none; }
/* Anyone who has asked for less motion gets the poster frame instead. The
   video still paints; it just does not play. */
@media (prefers-reduced-motion: reduce) {
  .amc-bgvideo { display: none; }
  .amc-ventures { background: var(--band) url('../img/ventures-mountains.jpg') center/cover no-repeat; }
  .amc-contact-img { background: url('../img/contact-street.jpg') center/cover no-repeat; }
}
.amc-ventures > *:not(.amc-bgvideo) { position: relative; z-index: 1; }
.amc-tabs { display: grid; gap: 1.5rem; grid-template-columns: minmax(0,1fr); }
@media (min-width: 780px) { .amc-tabs { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.amc-tab-input { position: absolute; opacity: 0; pointer-events: none; }
.amc-tab-label {
  display: block; cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.5);
  padding-bottom: 0.6rem;
}
.amc-tab-label strong { display: block; font-weight: 600; font-size: 0.98rem;
  text-shadow: 0 1px 10px rgba(0,0,0,0.9); }
.amc-tab-label span { display: block; font-size: 0.88rem; color: #e8e8e8; margin-top: 0.35rem;
  text-shadow: 0 1px 10px rgba(0,0,0,0.9); }
.amc-tab-date { display: block; font-size: 0.86rem; color: #e8e8e8; margin-top: 0.6rem;
  text-shadow: 0 1px 10px rgba(0,0,0,0.9);
  border-top: 1px solid rgba(255,255,255,0.5); padding-top: 0.5rem; }
/* The panels are stacked in one grid cell rather than shown and hidden, so the
   band's height is set by the TALLEST panel and never changes when you move
   between companies. The original jumped because the box was sized to whatever
   was showing: Fiscal Talent is one paragraph, NAKED is two. */
.amc-panels {
  display: grid;
  margin-top: clamp(1.25rem, 3vw, 2rem);
  max-width: 46em;
  /* Reserved so the band never resizes between companies, but sized to sit
     over the video rather than to reserve a hole beneath the tabs. */
  min-height: 9.5rem;
}
.amc-panel {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s ease;
}
.amc-panel p { font-size: 0.97rem; line-height: 1.8; margin: 0 0 0.9rem;
  text-shadow: 0 1px 10px rgba(0,0,0,0.85); }

/* Hover reveals, as on the original. :checked keeps it working for keyboard
   and touch, where there is no hover. Both paths, not one or the other.

   The checked rules are guarded with :not(:has(...:hover)) rather than being
   overridden afterwards. A plain override cannot win: the checked selectors
   carry an id (#p1) and a suppression rule written without one always loses on
   specificity, which showed two panels at once. Guarding the condition is the
   fix; escalating specificity would be a fight that keeps needing escalation. */
.amc-ventures:not(:has(.amc-tab-label:hover)):has(#v1:checked) #p1,
.amc-ventures:not(:has(.amc-tab-label:hover)):has(#v2:checked) #p2,
.amc-ventures:not(:has(.amc-tab-label:hover)):has(#v3:checked) #p3,
.amc-ventures:not(:has(.amc-tab-label:hover)):has(#v4:checked) #p4,
.amc-ventures:has(label[for="v1"]:hover) #p1,
.amc-ventures:has(label[for="v2"]:hover) #p2,
.amc-ventures:has(label[for="v3"]:hover) #p3,
.amc-ventures:has(label[for="v4"]:hover) #p4 { opacity: 1; visibility: visible; }

.amc-tab-input:checked + .amc-tab-label { border-bottom-color: var(--amber); }
.amc-tab-label:hover { border-bottom-color: var(--amber); }
.amc-tab-input:focus-visible + .amc-tab-label { outline: 2px solid var(--amber); outline-offset: 3px; }

/* ----------------------------------------------------------------- posts -- */
.amc-posts { display: grid; gap: clamp(1.25rem, 3vw, 2rem); grid-template-columns: minmax(0,1fr); }
@media (min-width: 760px) { .amc-posts { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.amc-card { position: relative; display: block; text-decoration: none; color: var(--white); }
.amc-card img { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.amc-card-body { position: absolute; inset: auto 0 0 0; padding: 1rem; background: linear-gradient(transparent, rgba(0,0,0,0.75)); }
.amc-card-by { display: block; font-size: 0.72rem; color: #d8d8d8; margin: 0 0 0.3rem; }
.amc-card-title { display: block; font-family: Jost, sans-serif; font-weight: 300; font-size: 1.1rem; margin: 0; line-height: 1.25; }
.amc-card:hover .amc-card-title { color: var(--amber); }

/* ------------------------------------------------------------------ form -- */
.amc-contact { display: grid; gap: 0; grid-template-columns: minmax(0,1fr); }
@media (min-width: 860px) { .amc-contact { grid-template-columns: minmax(0,0.8fr) minmax(0,1fr); } }
.amc-contact-img { position: relative; min-height: 430px; overflow: hidden; }
.amc-contact-img h2 {
  position: relative; z-index: 1; margin: 0;
  padding: clamp(2rem, 5vw, 3.5rem);
  padding-left: clamp(3rem, 7vw, 5.5rem);
  padding-top: clamp(2.5rem, 6vw, 4rem);
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  text-shadow: 0 1px 12px rgba(0,0,0,0.55);
}
.amc-form-wrap { padding: clamp(1.5rem, 4vw, 3rem); }
.amc-form label { display: block; margin-bottom: 1.4rem; }
.amc-form .amc-lab { display: block; font-size: 0.8rem; color: #d8d8d8; margin-bottom: 0.35rem; }
.amc-form .amc-req { color: var(--amber); }

/* !important on the three colour properties is the documented remedy, not
   laziness. The platform injects `body .wp-site-blocks input:not(...)` with
   eight chained :not() clauses, setting colours from Twenty Twenty-Five's
   palette slugs. This theme does not define those, so they resolve to nothing
   and fields render with no background and no border: invisible, not merely
   wrong. It shipped that way on a sibling site and cost real time. */
.amc-form input,
.amc-form textarea {
  display: block; width: 100%;
  /* content-box would put padding and border OUTSIDE the declared width,
     pushing each control past its cell. That exact defect shipped once. */
  box-sizing: border-box;
  background: transparent !important;
  color: var(--white) !important;
  border: 0 !important;
  border-bottom: 1px solid #5a5a5a !important;
  border-radius: 0;
  padding: 0.5rem 0.1rem;
  font-family: inherit; font-size: 0.95rem;
}
.amc-form input:focus, .amc-form textarea:focus { outline: 0; border-bottom-color: var(--amber) !important; }
.amc-form textarea { resize: vertical; min-height: 3.5rem; }
.amc-form-grid { display: grid; gap: 0 1.5rem; grid-template-columns: minmax(0,1fr); }
@media (min-width: 620px) { .amc-form-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.amc-form .amc-btn { width: auto; }
.amc-formnote { font-size: 0.82rem; color: var(--muted); }
.amc-formerror p { color: #E8746A; font-size: 0.88rem; margin: 0 0 0.4rem; }

/* ---------------------------------------------------------------- footer -- */
.amc-footer { background: var(--black); text-align: center; padding-block: 2.5rem; }
.amc-footer-inner { display: grid; gap: 0.5rem; }
.amc-footer-name { font-size: 1rem; margin: 0; display: flex; align-items: center; justify-content: center; gap: 0.6rem; }
.amc-footer-name a { color: var(--white); display: inline-flex; }
.amc-footer-name a:hover { color: var(--amber); }
.amc-footer-mail { margin: 0; font-size: 0.85rem; }
.amc-footer-mail a { color: var(--muted); text-decoration: none; }
.amc-footer-mail a:hover { color: var(--white); }
.amc-footer-copy { margin: 0.4rem 0 0; font-size: 0.78rem; color: var(--muted); }

/* ------------------------------------------------------------------ post -- */
.amc-post h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); margin: 0 0 0.6rem; }
.amc-post .wp-block-post-date { color: var(--muted); font-size: 0.82rem; margin-bottom: 1.5rem; }
.amc-post p { max-width: var(--measure); font-size: 0.98rem; }
.amc-post img { margin: 1.5rem 0; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ------------------------------------------------------- smooth scrolling --
 * Nav links to #about / #contact teleported. A fade-and-glide is table stakes
 * and the original had it; a migration that loses it is a downgrade.
 * Honours prefers-reduced-motion, where an instant jump is the correct
 * behaviour rather than a lesser one.
 */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Anchors land clear of the sticky-ish header rather than under it. */
[id] { scroll-margin-top: 6rem; }

/* --------------------------------------------------------- contact scrim --
 * The original runs this clip dark. Mahdi finds that too heavy, so this is a
 * lighter scrim: enough for white type to hold, not enough to kill the image.
 */
.amc-contact-img::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.34) 55%, rgba(0,0,0,0.18) 100%);
  z-index: 1;
  pointer-events: none;
}
.amc-contact-img h2 { z-index: 2; font-weight: 400; font-size: clamp(1.75rem, 3vw, 2.31rem);
  text-shadow: 0 2px 18px rgba(0,0,0,0.8); }
/* The original plays this clip slowed down. */
.amc-contact-img .amc-bgvideo { animation: none; }


/* ------------------------------------------------------------------ zoom --
 * Browser zoom is just a narrower viewport in CSS pixels, so anything that
 * breaks under zoom breaks on a small laptop too. Nothing here may push the
 * document sideways.
 */
html, body { max-width: 100%; overflow-x: hidden; }
img, video { max-width: 100%; }
.amc-hero-portrait img { max-width: none; }   /* deliberate: the band clips it */
.amc-tabs { min-width: 0; }
.amc-tab-label { min-width: 0; overflow-wrap: anywhere; }
.amc-panels { min-width: 0; }