/* ============================================================
   BRANDON FOY DESIGN — brandonfoydesign.com
   Built from the BFd logo: black, white, mint.
   ------------------------------------------------------------
   HOW TO EDIT: change the values under :root below and every
   page updates. Colors, fonts, and key sizes all live there.
   ============================================================ */

:root{
  /* ---- COLORS (from your logo) ---- */
  --ink:   #000000;   /* black — text, borders, hover fills */
  --paper: #FFFFFF;   /* white — page background */
  --mint:  #C9FFE5;   /* your logo's accent green */
  --gray:  #777777;   /* muted labels */
  --soft:  #555555;   /* muted body text in the stat sentence */

  /* ---- TYPE ---- */
  --display: 'Archivo Black', system-ui, sans-serif;  /* big bold headings */
  --body:    'Archivo', system-ui, sans-serif;        /* everything else */

  /* ---- LAYOUT ---- */
  --pad: 30px;        /* left/right page padding */
  --maxw: 1400px;     /* max content width — stops everything growing forever on wide screens */
  --line: 2px;        /* border thickness */
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--ink);text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ---- reusable mint highlight ---- */
.mark{background:var(--mint);padding:0 .06em;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* ============ HEADER / NAV ============ */
header.site{border-bottom:var(--line) solid var(--ink);position:sticky;top:0;background:var(--paper);z-index:50}
.nav{display:flex;justify-content:space-between;align-items:center;padding:20px var(--pad)}
.logo{font-family:var(--display);font-size:1.4rem;letter-spacing:-.03em;color:var(--ink)}
.logo .m{background:var(--mint);padding:0 .12em}
nav.links a{margin-left:22px;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink)}
nav.links a:hover{background:var(--mint)}

/* ============ HERO (home) ============ */
.hero{padding:9vh var(--pad) 5vh}
.hero h1{font-family:var(--display);font-size:clamp(3rem,9vw,6.5rem);line-height:.84;letter-spacing:-.03em;text-transform:uppercase}
.hero .woven{margin-top:36px;font-family:var(--display);font-size:clamp(1.2rem,2.2vw,1.75rem);line-height:1.3;letter-spacing:-.01em;max-width:30ch}
.hero .woven .reg{font-family:var(--body);font-weight:600;color:var(--soft)}
.hero .tag{display:inline-block;margin-top:34px;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.1em;border:var(--line) solid var(--ink);padding:9px 15px}

/* ---- HOME HERO: photo background (photo readable, gradient scrim) ----
   Swap photo: change url() below. Dim more/less: raise/lower the black
   percentages in the gradient. The left-most value sits under the headline. */
.hero--photo{position:relative;background:var(--ink) url("img/bfd-tewnc-hemp-leaves-sun.jpeg") center 40%/cover no-repeat;color:var(--paper);overflow:hidden;padding-top:clamp(56px,9vh,110px);padding-bottom:clamp(44px,7vh,90px)}
.hero--photo::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(0,0,0,.93) 0%,rgba(0,0,0,.74) 42%,rgba(0,0,0,.32) 72%,rgba(0,0,0,.12) 100%)}
.hero--photo > *{position:relative;z-index:1}
.hero--photo h1{max-width:14ch}
.hero--photo .woven .reg{color:#CCC}
.hero--photo .tag{border-color:var(--paper);color:var(--paper)}
.hero--photo .mark{color:var(--ink)}
@media(max-width:640px){
  .hero--photo{background-position:center center;padding-top:8vh}
  .hero--photo::before{background:linear-gradient(to bottom,rgba(0,0,0,.88) 0%,rgba(0,0,0,.80) 55%,rgba(0,0,0,.45) 100%)}
  .hero--photo h1{max-width:none}
}

/* ============ SECTION LABEL ============ */
.seclbl{font-family:var(--body);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--gray);border-top:var(--line) solid var(--ink);padding:30px var(--pad) 0}

/* ============ WORK GRID (home) — rich tiles: photo + copy + hover reveal ============ */
.workhint{font-size:11px;color:var(--gray);padding:0 var(--pad) 6px}
.workgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:6px var(--pad) 10px}
.tile{border:var(--line) solid var(--ink);display:flex;flex-direction:column;cursor:pointer;transition:transform .18s,box-shadow .18s;text-decoration:none;color:var(--ink)}
.tile:hover{transform:translateY(-4px);box-shadow:8px 8px 0 var(--mint)}
.tile .timg{aspect-ratio:16/10;background:#ddd;border-bottom:var(--line) solid var(--ink);position:relative;overflow:hidden}
.tile .timg img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(45%) contrast(1.05);transition:filter .25s,transform .4s}
.tile .timg img.top{object-position:top}
.tile:hover .timg img{filter:grayscale(0%) contrast(1.05);transform:scale(1.04)}
.tile .ttag{position:absolute;top:12px;left:0;background:var(--mint);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.06em;padding:5px 12px;z-index:2;color:var(--ink)}
.tile .tbody{padding:18px 20px 20px;flex:1;display:flex;flex-direction:column}
.tile h3{font-family:var(--display);font-size:1.7rem;text-transform:uppercase;letter-spacing:-.01em;line-height:1}
.tile .tyr{font-size:11px;color:var(--gray);font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-top:4px}
.tile p.tdesc{font-size:14px;color:#333;margin-top:10px;line-height:1.45}
.tile .tstat{margin-top:12px;font-weight:700;font-size:13px;line-height:1.4}
.tile .tmore{max-height:0;overflow:hidden;transition:max-height .3s ease,margin-top .3s ease;margin-top:0}
.tile:hover .tmore{max-height:90px;margin-top:12px}
.tile .tmore-inner{border-top:1px dashed #ccc;padding-top:10px;font-size:13px;color:#555;line-height:1.4}
.tile .tmore-inner b{color:var(--ink)}
.tile .tgo{margin-top:auto;padding-top:14px;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.tile:hover .tgo{text-decoration:underline}

/* mini (text-only) work items */

/* mini (text-only) work items */
.mini{padding:22px var(--pad);border-bottom:var(--line) solid var(--ink)}
.mini .num{font-family:var(--display);font-size:.9rem;color:var(--gray)}
.mini h4{font-family:var(--display);font-size:1.3rem;text-transform:uppercase;letter-spacing:-.01em;margin-top:4px}
.mini p{font-size:14px;color:var(--soft);margin-top:4px;max-width:60ch}

/* ============ ABOUT ============ */
.about{background:var(--ink);color:var(--paper);padding:64px var(--pad)}
.about .seclbl{border:none;padding:0 0 20px;color:var(--mint)}
.about h2{font-family:var(--display);font-size:clamp(1.8rem,4vw,2.6rem);text-transform:uppercase;letter-spacing:-.02em;margin-bottom:24px}
.about p{max-width:64ch;margin-bottom:16px;color:#DDD}
.about p strong{color:var(--paper)}
.about .mark{color:var(--ink)}

/* ============ PROJECT PAGE ============ */
.proj-hero{padding:56px var(--pad) 24px}
.proj-hero .crumb{font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--gray);display:inline-block;margin-bottom:20px}
.proj-hero .crumb:hover{background:var(--mint)}
.proj-hero h1{font-family:var(--display);font-size:clamp(2.4rem,8vw,5.5rem);line-height:.86;letter-spacing:-.03em;text-transform:uppercase}
.proj-hero .meta{margin-top:16px;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--gray)}
.proj-hero .meta span{color:var(--ink);background:var(--mint);padding:0 .3em}

.services{display:flex;flex-wrap:wrap;gap:8px;padding:0 var(--pad);margin:20px 0 8px}
.chip{font-weight:700;font-size:11px;letter-spacing:.05em;text-transform:uppercase;border:var(--line) solid var(--ink);padding:6px 11px}

.narrative{max-width:68ch;padding:28px var(--pad) 8px;font-size:17px}
.narrative p{margin-bottom:18px}
.narrative .mark{font-weight:700}
.narrative .pull{font-family:var(--display);font-size:clamp(1.4rem,3vw,2rem);line-height:1.1;text-transform:uppercase;letter-spacing:-.02em;margin:30px 0;padding-left:20px;border-left:6px solid var(--mint)}

/* inline stat sentence on project pages */
.pstats{font-family:var(--display);font-size:clamp(1.2rem,2.6vw,1.8rem);line-height:1.3;max-width:30ch;margin:24px 0}
.pstats .reg{font-family:var(--body);font-weight:600;color:var(--soft)}

/* ============ GALLERY (masonry + lightbox) ============ */
.gallery{columns:3;column-gap:14px;padding:24px var(--pad) 10px}
@media(max-width:820px){.gallery{columns:2}}
@media(max-width:520px){.gallery{columns:1}}
.gallery img{width:100%;height:auto;margin:0 0 14px;border:var(--line) solid var(--ink);display:block;break-inside:avoid;cursor:zoom-in;transition:opacity .15s}
.gallery img:hover{opacity:.85}

.lightbox{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.94);display:none;align-items:center;justify-content:center;padding:30px;cursor:zoom-out}
.lightbox.open{display:flex}
.lightbox img{max-width:92vw;max-height:92vh;border:var(--line) solid var(--mint)}
.lightbox .x{position:absolute;top:20px;right:24px;font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--paper);cursor:pointer}

.ext{display:inline-block;margin:6px var(--pad);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.06em;border:var(--line) solid var(--ink);padding:11px 18px}
.ext:hover{background:var(--ink);color:var(--mint)}

.backnext{display:flex;justify-content:space-between;padding:40px var(--pad);border-top:var(--line) solid var(--ink);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.05em}
.backnext a:hover{background:var(--mint)}

/* ============ CONTACT / FOOTER ============ */
.contact{padding:80px var(--pad)}
.contact h2{font-family:var(--display);font-size:clamp(2rem,6vw,4rem);line-height:.9;text-transform:uppercase;letter-spacing:-.03em;max-width:16ch}
.contact h2 .mark{padding:0 .05em}
.contact .email{display:inline-block;margin-top:26px;font-family:var(--display);font-size:clamp(1.1rem,2.4vw,1.6rem);border-bottom:4px solid var(--mint)}
footer.site{border-top:var(--line) solid var(--ink);padding:24px var(--pad) 40px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--gray)}

/* ============ SCROLL REVEAL ============ */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---- WIDTH CONTAINMENT ----
   Instead of max-width (which would shrink the full-bleed borders and the black
   About band), the side padding grows on wide screens. Backgrounds and rules still
   span the window; the content inside stops at --maxw and stays centered. */
.nav,.hero,.seclbl,.workhint,.workgrid,.mini,.about,.contact,footer.site,
.proj-hero,.services,.narrative,.gallery,.backnext,.ext{
  padding-left:max(var(--pad),calc((100% - var(--maxw))/2));
  padding-right:max(var(--pad),calc((100% - var(--maxw))/2));
}
.ext{margin-left:0;margin-right:0}

/* ============ WIDE SCREENS ============ */
@media(min-width:1500px){
  .workgrid{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:1100px){
  /* stop tile photos growing without limit on big monitors */
  .tile .timg{aspect-ratio:auto;height:320px}
}

/* ============ MOBILE ============ */
@media(max-width:640px){
  .workgrid{grid-template-columns:1fr;gap:20px}
  .workhint{display:none}
  .tile:hover{transform:none;box-shadow:none}
  .tile .timg img{filter:grayscale(0%) contrast(1.05)}
  .tile:hover .timg img{transform:none}
  .tile .tmore{max-height:none;overflow:visible;margin-top:12px}
  .tile h3{font-size:1.5rem}
  footer.site{flex-direction:column;gap:8px}
}