/*
© Copyright 1990-2026 Toptronic® Ltd, all rights reserved; no part of this document may be reproduced, modified or stored in a retrieval system, or transmitted in any form or by any means, electronic, mechanical, photocopying, recording or otherwise, without the prior written permission of Toptronic Limited.
For copyright inquiries: jacques@toptronic.com
  HOCWS :: House Of Concepts Website — CSS Styles Part 1 of 6
  Project: House Of Concepts Web Site (HOCWS) — www.houseofconcepts.co.za
  Generated: 2026-08-08T11:55:59+1000
  Audience: Jacques (French, hardware/C bg), Ryan (14), Ava (9), Students (15-23)
  This file contains: @font-face, design tokens, CSS reset, base typography.
  The design uses Michael's brand colours: warm taupe + dark charcoal,
  on a warm off-white page. Sibling of the amber/charcoal sister-site system —
  same layout grammar, its own voice (Decision 0035, D9).
  Content continues in styles_002.css (header, hero, buttons).
*/

/* ============================================================
   @FONT-FACE — Self-hosted WOFF2, copied verbatim from the sister site.
   Archivo Bold for headings, Inter variable for body.
   GDPR-safe: no Google Fonts round-trip. font-display: swap
   means text renders in a fallback font instantly, then upgrades
   when the WOFF2 loads.
   ============================================================ */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/archivo-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
}

/* ============================================================
   SECTION 0: CSS CUSTOM PROPERTIES (Design Tokens)
   ---------------------------------------------------------
   -- Ava (9): These are like paint colours we pick once at the
     top, then use everywhere. If we want a different taupe later,
     we only change it here!
   -- Ryan (14): CSS custom properties are variables. They save
     us from repeating values — "named constants" for the design.
   -- Jacques: Same PCB layout as the sister site, new front-panel colours.
   ============================================================ */
:root {
  /* === COLOR PALETTE (House Of Concepts — taupe + charcoal) === */
  /* Taupe = the brand accent, the colour of the H+C monogram.
     LAW (Plan 002 A.3): taupe is TEXT only on charcoal (4.58:1,
     WCAG AA pass). On light backgrounds it is decoration only —
     frames, hairlines, the watermark — never letters. */
  --clr-taupe: #A49C90;
  /* Taupe-dark = taupe's serious older sibling. This is the accent
     colour for TEXT on light backgrounds (5.59:1 on white, AA). */
  --clr-taupe-dark: #6E675C;
  /* Charcoal = the main dark colour, the wordmark band of the logo.
     Hero + footer background. Do NOT lighten it: the taupe-on-it
     contrast margin is thin (Decision 0035, D9). */
  --clr-charcoal: #343434;
  /* Slightly lighter dark for cards and wells on dark sections */
  --clr-charcoal-2: #454545;
  /* Warm off-white page background (taupe-tinted, not plain grey —
     this is one of the quiet ways HOCWS differs from its sibling) */
  --clr-light: #F7F5F2;
  /* White */
  --clr-white: #FFFFFF;
  /* Medium grey for borders and subtle elements */
  --clr-grey: #CCCCCC;
  /* Dark grey for body text on light backgrounds */
  --clr-text: #333333;
  /* Success green (house convention, used sparingly) */
  --clr-green: #2ECC71;
  /* Keyboard focus ring on light backgrounds (dark sections
     override this to taupe in styles_004.css) */
  --clr-focus: #6E675C;
  /* Hairlines — the super-thin lines between sections. One name,
     one shade, changed in exactly one place. */
  --clr-hairline: rgba(52, 52, 52, 0.12);
  --clr-hairline-strong: rgba(52, 52, 52, 0.18);

  /* === TYPOGRAPHY === */
  /* -- Self-hosted Archivo Bold (geometric, close to Futura) for
     headings. Inter variable (400-700) for body text. */
  --font-heading: 'Archivo', 'Futura', 'Trebuchet MS', 'Century Gothic', 'Segoe UI', Arial, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'Consolas', 'Courier New', monospace;
  /* Wide letter-spacing for the tracked taupe "eyebrow" labels —
     the architectural voice of the HOC brand (Plan 002 A.4). */
  --ls-wide: 0.12em;

  /* === SPACING SCALE (8px base, sister-site values verbatim) === */
  /* -- Ava: Think of these like lego bricks — they all snap together. */
  --sp-xs: 4px;    /* Extra small: tight gaps */
  --sp-sm: 8px;    /* Small: between related items */
  --sp-md: 16px;   /* Medium: standard padding */
  --sp-lg: 24px;   /* Large: section padding */
  --sp-xl: 32px;   /* Extra large: between big blocks */
  --sp-2xl: 48px;  /* Double extra: hero spacing */
  --sp-3xl: 64px;  /* Triple: page margins */

  /* === SIZING (sister-site values verbatim) === */
  --max-width: 1400px;          /* Content never wider than this */
  --header-height: 70px;        /* Header bar height */
  --carousel-max-width: 1200px; /* Carousel maximum width */
  --carousel-arrow-size: 48px;  /* Left/right arrow button size */

  /* === SHADOWS (sister-site values verbatim) === */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.2);

  /* === BORDERS & RADII (sister-site values verbatim) === */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-round: 50%;
  /* The 1px taupe hairline frame seen in the placeholder slides —
     reused as a card/section motif (Plan 002 A.5) */
  --frame-thin: 1px;

  /* === TRANSITIONS (sister-site values verbatim) === */
  --trans-fast: 150ms ease;
  --trans-normal: 300ms ease;
  --trans-slow: 500ms ease;
}

/* ============================================================
   SECTION 1: CSS RESET (Normalize across browsers)
   ---------------------------------------------------------
   -- Students: Every browser has its own default styles.
     A reset makes them all start from the same baseline.
     This is like clearing the whiteboard before drawing.
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* -- Ryan: "box-sizing: border-box" means padding is inside the
   element's width, not added outside. It makes layouts predictable. */

html {
  font-size: 16px;                     /* Base: 1rem = 16px */
  scroll-behavior: smooth;             /* Smooth anchor scrolling */
  scroll-padding-top: calc(var(--header-height) + 8px); /* Anchors clear the sticky header */
  -webkit-text-size-adjust: 100%;      /* Prevent iOS text zoom */
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--clr-text);
  background-color: var(--clr-light);
  min-height: 100vh;                   /* At least full viewport height */
  display: flex;
  flex-direction: column;              /* Stack header, main, footer */
  /* -- Ava: "flex-direction: column" means things go top-to-bottom,
     like a sandwich: bread (header), fillings (main), bread (footer). */
}

/* Text selection gets a soft taupe wash — a tiny brand moment */
::selection { background: rgba(164, 156, 144, 0.35); }

/* Images should never overflow their container */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Link styling — on light pages links are taupe-dark (AA-safe),
   and the hover goes to charcoal. Colour is never the only cue:
   hover/focus adds an underline too (WCAG 1.4.1). */
a {
  color: var(--clr-taupe-dark);
  text-decoration: none;
  transition: color var(--trans-fast);
}

a:hover,
a:focus {
  color: var(--clr-charcoal);
  text-decoration: underline;
}

/* Lists */
ul, ol {
  list-style: none;    /* We style lists ourselves */
}

/* ============================================================
   SECTION 2: TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--clr-charcoal);
}

h1 { font-size: clamp(1.75rem, 5vw, 3rem); }      /* Page heroes */
h2 { font-size: clamp(1.25rem, 3vw, 2rem); }      /* Section titles */
h3 { font-size: clamp(1.15rem, 2.5vw, 1.5rem); }  /* Card titles — never smaller than body text */
h4 { font-size: 1rem; }
h5 { font-size: 0.875rem; }
h6 { font-size: 0.75rem; }

/* -- Jacques: "clamp()" is a CSS function that picks a size between
   a minimum and maximum. clamp(1.75rem, 5vw, 3rem) means:
   - Never smaller than 1.75rem (28px)
   - Never bigger than 3rem (48px)
   - Otherwise, use 5% of the viewport width
   This is how we make text resize automatically! */

p {
  margin-bottom: var(--sp-md);
  max-width: 68ch;      /* comfortable reading line-length */
  text-wrap: pretty;    /* no lonely last word (ignored by old browsers — no harm) */
}

/* ============================================================
   SECTION 3: MAIN CONTENT WRAPPER
   ============================================================ */
.site-main {
  flex: 1;               /* Takes remaining vertical space */
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--sp-lg);
  width: 100%;
}

/* -- Ryan: "flex: 1" tells the main content area to grow and
   fill all the space between header and footer. This keeps the
   footer at the bottom even on short pages. */

/* Generic inner wrapper (used by the 404 page, mirrors the sister site) */
.section-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

/* Content continues in styles_002.css (header, hero, buttons) */