/* Drop your licensed WOFF2/WOFF files into assets/fonts/ with these filenames */
@font-face{
  font-family:"Beatrice Deck";
  src:url("../fonts/BeatriceDeck-Regular.woff2") format("woff2"),
      url("../fonts/BeatriceDeck-Regular.woff") format("woff");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Beatrice Deck";
  src:url("../fonts/BeatriceDeck-Italic.woff2") format("woff2"),
      url("../fonts/BeatriceDeck-Italic.woff") format("woff");
  font-weight:400;
  font-style:italic;
  font-display:swap;
}

@font-face{
  font-family:"Beatrice Standard";
  src:url("../fonts/BeatriceStandard-Regular.woff2") format("woff2"),
      url("../fonts/BeatriceStandard-Regular.woff") format("woff");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Beatrice Standard";
  src:url("../fonts/BeatriceStandard-Medium.woff2") format("woff2"),
      url("../fonts/BeatriceStandard-Medium.woff") format("woff");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Beatrice Standard";
  src:url("../fonts/BeatriceStandard-Bold.woff2") format("woff2"),
      url("../fonts/BeatriceStandard-Bold.woff") format("woff");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

/* ===============================
   GLOBAL TYPOGRAPHY
   =============================== */
html{ font-synthesis:none; }

body{
  margin:0;
  font-family:"Beatrice Standard", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color:#2C2725;
  background:#F4F1E8;
}

/* Headings and brand */
.brand-lines,
h1,
h2{
  font-family:"Beatrice Deck","Beatrice Standard", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

h3,
h4,
h5,
h6{
  font-family:"Beatrice Standard", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ===============================
   VARIABLES
   =============================== */
:root{
  --orange:#EB5F28;
  --plum:#7B5A8A;
  --slate:#2C2725;
  --chartreuse:#D5DF35;
  --sand:#F4F1E8;

  --fg:#ffffff;
  --fg-dim:rgba(255,255,255,0.85);
  --bg:#0b0b0b;
  --overlay:linear-gradient(to top, rgba(0,0,0,0.5), rgba(0,0,0,0) 40%);
  --accent:var(--chartreuse);
}

/* ===============================
   LINKS + BUTTONS
   =============================== */
a{
  color:var(--chartreuse);
  text-decoration:underline;
  text-underline-offset:3px;
}
a:hover{ color:#C8D41F; }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  padding:0.75rem 1.1rem;
  border-radius:999px;
  border:0;
  font-weight:500;
  cursor:pointer;
}
.btn--primary{ background:var(--chartreuse); color:var(--slate); }
.btn--secondary{ background:var(--orange); color:var(--sand); }

/* ===============================
   HERO
   =============================== */
.hero{
  position:relative;
  min-height:100vh;
  overflow:hidden;
}
.overlay{
  position:absolute;
  inset:0;
  background-image:var(--overlay);
  pointer-events:none;
}
.caption{
  position:absolute;
  left:1.5rem;
  bottom:1.5rem;
  color:var(--fg);
  letter-spacing:0.04em;
}

/* ===============================
   BRAND + NAV
   =============================== */
.brand{
  position:absolute;
  left:1.5rem;
  top:1.5rem;
  z-index:10;
  pointer-events:auto;
}
.brand a,
.brand img{
  pointer-events:auto;
}
.brand-lines{
  pointer-events:none;
  font-weight:600;
  line-height:0.9;
  font-size:clamp(1.75rem, 3vw, 2.5rem);
  color:var(--fg);
}

.primary-nav{
  position:absolute;
  right:1.5rem;
  top:1.25rem;
  z-index:10;
}
.primary-nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:1.25rem;
}
.primary-nav a{
  color:var(--fg);
  text-decoration:none;
  letter-spacing:0.04em;
}

/* ===============================
   GRID
   =============================== */
.work-grid{
  --gap:12px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--gap);
}
@media (max-width:1024px){
  .work-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .work-grid{ grid-template-columns:1fr; }
}

.t-card{
  position:relative;
  overflow:hidden;
  background:#000;
}
.t-card__label{
  position:absolute;
  left:14px;
  bottom:12px;
  color:#fff;
  font-family:"Beatrice Standard", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ===============================
   ACCESSIBILITY
   =============================== */
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
}

/* ===============================
   MOBILE
   =============================== */
@media (max-width:480px){
  .brand{ left:1rem; top:1rem; }
  .primary-nav{ right:1rem; top:0.75rem; }
}
/* ===============================
   HARD FIX: LOGO MUST ALWAYS CLICK
   Put this at the VERY BOTTOM of main.css
   =============================== */

.brand,
.primary-nav{
  position: fixed !important;
  z-index: 2147483647 !important;
  pointer-events: auto !important;
}

.brand a,
.brand img,
.primary-nav a{
  pointer-events: auto !important;
}

/* If any full-screen layer is covering the page, this helps prevent it from stealing clicks */
.overlay,
.page-fader{
  pointer-events: none !important;
}
/* ===============================
   FIX: header click blocked on project pages
   Put at VERY BOTTOM of assets/css/main.css
   =============================== */

/* 1) Remove “fixed trapping” stacking contexts */
html, body,
.site-root,
#page, #content,
.site, .site-content,
.wp-site-blocks,
.entry-content,
main{
  transform: none !important;
  filter: none !important;
  perspective: none !important;
}

/* 2) Force logo + nav above everything */
.brand,
.primary-nav{
  position: fixed !important;
  z-index: 9999999 !important;
  pointer-events: auto !important;
}

.brand a,
.brand img,
.primary-nav a{
  pointer-events: auto !important;
}