/* =============================================================
   PRIME CONCEPTS — stylesheet
   You only need this file to change how things LOOK.
   To change what things SAY, edit content.js instead.
   ============================================================= */


/* -------------------------------------------------------------
   1. VARIABLES — every colour and font, named once
   ------------------------------------------------------------- */
:root{
  --gun-1:#12161C;
  --gun-2:#0A0D11;
  --gun-3:#191F28;

  --frost-1:#EDEEF0;
  --frost-2:#DDDFE3;

  --on-dark:#E4E7EB;
  --on-dark-muted:#868D97;
  --on-light:#0E1114;
  --on-light-muted:#5F646B;

  --line-dark:rgba(255,255,255,.13);
  --line-light:rgba(14,17,20,.16);

  --chrome:linear-gradient(96deg,
      #7E858F 0%, #FFFFFF 22%, #99A0AA 40%,
      #F2F5F8 60%, #767D87 78%, #E6E9ED 100%);

  --display:"Archivo Narrow","Arial Narrow",Helvetica,sans-serif;
  --body:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --ease:cubic-bezier(.16,1,.3,1);
}


/* -------------------------------------------------------------
   2. RESET + BASE
   ------------------------------------------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
section{scroll-margin-top:78px}   /* keeps anchors clear of the fixed header */

body{
  margin:0;
  background:var(--gun-2);
  color:var(--on-dark);
  font-family:var(--body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-weight:600;line-height:1}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:1px solid currentColor;outline-offset:4px}


/* -------------------------------------------------------------
   3. THE TWO GROUNDS
   Each section sets its own local colours. Everything inside a
   section then just says "use --fg" and automatically works on
   both a dark and a light background. This is why you can flip
   any section between dark and light in content.js.
   ------------------------------------------------------------- */
.g-dark{
  --bg:linear-gradient(180deg,var(--gun-1) 0%,var(--gun-2) 100%);
  --fg:var(--on-dark);
  --fg-muted:var(--on-dark-muted);
  --line:var(--line-dark);
  --hi:#FFFFFF;
}
.g-light{
  --bg:linear-gradient(172deg,var(--frost-1) 0%,var(--frost-2) 100%);
  --fg:var(--on-light);
  --fg-muted:var(--on-light-muted);
  --line:var(--line-light);
  --hi:#000000;
}

.section{
  position:relative;
  overflow:hidden;
  background:var(--bg);
  color:var(--fg);
  padding:120px 32px;
}
.section-label{margin-bottom:44px}


/* -------------------------------------------------------------
   4. REUSABLE PIECES
   ------------------------------------------------------------- */
.micro{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--fg-muted);
}

/* CHROME TEXT: paint a wide metallic gradient, clip it to the
   letter shapes, make the letters transparent. Sliding the
   gradient on hover drags a highlight across the metal. */
.chrome{
  background-image:var(--chrome);
  background-size:260% 100%;
  background-position:78% 0;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  transition:background-position 1.6s var(--ease);
}
.chrome:hover{background-position:8% 0}

.grain{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  opacity:.22;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
.g-light .grain{opacity:.14;mix-blend-mode:multiply}

.btn{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--mono);font-size:10.5px;
  letter-spacing:.22em;text-transform:uppercase;
  padding:14px 22px 14px 0;position:relative;overflow:hidden;
}
.btn-rule{
  display:inline-block;width:34px;height:1px;background:currentColor;
  transition:width .9s var(--ease);
}
.btn:hover .btn-rule{width:64px}
.btn::after{                       /* the light sweep */
  content:"";position:absolute;top:-50%;left:-60%;width:30%;height:200%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  transform:rotate(18deg) translateX(-60px);
  transition:transform 1.1s var(--ease);
}
.btn:hover::after{transform:rotate(18deg) translateX(340px)}


/* -------------------------------------------------------------
   5. HEADER
   ------------------------------------------------------------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;
  gap:20px;padding:22px 32px;
  font-family:var(--mono);font-size:10px;
  letter-spacing:.22em;text-transform:uppercase;
  mix-blend-mode:difference;   /* readable over dark AND light sections */
}
.site-nav{display:flex;gap:26px;flex-wrap:wrap;justify-content:flex-end}
.site-nav a{position:relative;padding-bottom:3px}
.site-nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .7s var(--ease);
}
.site-nav a:hover::after{transform:scaleX(1)}


/* -------------------------------------------------------------
   6. HERO
   ------------------------------------------------------------- */
.hero{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 32px 64px;overflow:hidden;
}
/* [PHOTO] set hero.image in content.js to use a real photograph.
   The gradient below is only the stand-in. */
.hero-image{
  position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;
  background-image:
    radial-gradient(120% 90% at 74% 6%,rgba(255,255,255,.16),transparent 58%),
    linear-gradient(158deg,#3A424E 0%,#141920 52%,#252D38 100%);
}
/* the veil guarantees the headline stays readable over ANY photo */
.hero-veil{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,
      rgba(10,13,17,.45) 0%,rgba(10,13,17,.30) 40%,rgba(10,13,17,.88) 100%);
}
.hero-content{position:relative;z-index:4;max-width:1200px}
.hero-kicker{margin-bottom:20px;color:var(--on-dark-muted)}
.hero-title{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(52px,13vw,190px);letter-spacing:-.02em;line-height:.86;
  margin-bottom:26px;
}
.hero-sub{max-width:34ch;font-size:17px;color:var(--on-dark-muted);margin-bottom:30px}
.hero-scroll{
  position:absolute;right:32px;bottom:64px;z-index:4;
  writing-mode:vertical-rl;color:var(--on-dark-muted);
}

/* blur into focus */
@keyframes focus-in{
  from{opacity:0;filter:blur(14px);letter-spacing:.28em}
  to  {opacity:1;filter:blur(0);letter-spacing:-.02em}
}
@keyframes lift{
  from{opacity:0;transform:translateY(18px)}
  to  {opacity:1;transform:none}
}
.hero-title {animation:focus-in 1.8s var(--ease) both}
.hero-kicker{animation:lift 1s var(--ease) both;animation-delay:.15s}
.hero-sub   {animation:lift 1s var(--ease) both;animation-delay:.9s}
.hero .btn  {animation:lift 1s var(--ease) both;animation-delay:1.05s}


/* -------------------------------------------------------------
   7. SECTION TYPE — STATEMENT
   ------------------------------------------------------------- */
.statement-lead{
  font-family:var(--display);font-weight:600;
  font-size:clamp(25px,3.3vw,44px);line-height:1.14;letter-spacing:-.015em;
  max-width:26ch;margin-bottom:34px;text-wrap:balance;
}
.statement-body{max-width:56ch;color:var(--fg-muted);font-size:16.5px}


/* -------------------------------------------------------------
   8. SECTION TYPE — INDEX (your numbered list of categories)
   ------------------------------------------------------------- */
.index-row{
  position:relative;display:grid;grid-template-columns:70px 1fr;gap:20px;
  padding:34px 0;border-top:1px solid var(--line);
  transition:padding-left .8s var(--ease);
}
.index-row:last-child{border-bottom:1px solid var(--line)}
.index-row:hover{padding-left:16px}
.index-no{
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  color:var(--fg-muted);padding-top:8px;
}
.index-body h3{
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:clamp(24px,3.4vw,42px);letter-spacing:-.01em;margin-bottom:10px;
  transition:color .6s var(--ease);
}
.index-row:hover .index-body h3{color:var(--hi)}
.index-body p{max-width:52ch;color:var(--fg-muted);font-size:15.5px}
.index-rule{
  position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--fg);opacity:.55;
  transition:width 1.1s var(--ease);
}
.index-row:hover .index-rule{width:100%}


/* -------------------------------------------------------------
   9. SECTION TYPE — GALLERY
   Tall hard crops. This is what makes uneven photos look like a set.
   ------------------------------------------------------------- */
.gallery-grid{
  display:grid;gap:22px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.gallery-item{margin:0;overflow:hidden}
.img-slot{
  position:relative;aspect-ratio:4/5;overflow:hidden;
  border:1px solid var(--line);
  background-size:cover;background-position:center;
  transition:transform 1.3s var(--ease);
}
.gallery-item:hover .img-slot{transform:scale(1.04)}
/* stand-in gradients, used only when an item has no image set */
.slot-0{background-image:linear-gradient(150deg,#414A57 0%,#171C23 54%,#2C343F 100%)}
.slot-1{background-image:linear-gradient(150deg,#2E3640 0%,#101419 50%,#3A434F 100%)}
.slot-2{background-image:linear-gradient(150deg,#4A525E 0%,#1A2027 58%,#232A33 100%)}
.gallery-item figcaption{padding-top:14px;font-size:14.5px;color:var(--fg-muted)}
.gallery-item figcaption .micro{display:block;margin-bottom:6px}


/* -------------------------------------------------------------
   10. SECTION TYPE — TEXT (a plain heading + paragraphs block)
   ------------------------------------------------------------- */
.text-heading{
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:clamp(26px,3.6vw,46px);letter-spacing:-.01em;margin-bottom:26px;
}
.text-body{max-width:62ch}
.text-body p{color:var(--fg-muted);font-size:16.5px;margin-bottom:18px}
.text-body p:last-child{margin-bottom:0}


/* -------------------------------------------------------------
   11. SECTION TYPE — CONTACT
   ------------------------------------------------------------- */
.contact-title{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(46px,10vw,130px);letter-spacing:-.02em;line-height:.9;
  margin-bottom:22px;
}
.contact-sub{color:var(--fg-muted);max-width:34ch;margin-bottom:40px}
.contact-mail{
  display:inline-block;
  font-family:var(--display);font-size:clamp(20px,3vw,34px);font-weight:600;
  border-bottom:1px solid var(--line);padding-bottom:6px;
  transition:border-color .7s var(--ease),color .7s var(--ease);
}
.contact-mail:hover{border-color:var(--hi);color:var(--hi)}

.site-footer{
  display:flex;justify-content:space-between;gap:20px;
  background:var(--gun-2);color:var(--on-dark-muted);
  padding:22px 32px 30px;
  border-top:1px solid var(--line-dark);
}


/* -------------------------------------------------------------
   12. SCROLL REVEALS
   Hidden ONLY once JavaScript has added .js-on. If JS fails,
   nothing is ever hidden. Always build effects this way round.
   ------------------------------------------------------------- */
.js-on .reveal{
  opacity:0;transform:translateY(22px);
  transition:opacity 1.1s var(--ease),transform 1.1s var(--ease);
}
.js-on .reveal.in-view{opacity:1;transform:none}


/* -------------------------------------------------------------
   13. SMALLER SCREENS
   ------------------------------------------------------------- */
@media (max-width:720px){
  .site-header{padding:18px 20px}
  .site-nav{gap:16px}
  .hero{padding:0 20px 52px}
  .hero-scroll{display:none}
  .section{padding:80px 20px}
  .site-footer{padding:20px}
  .index-row{grid-template-columns:44px 1fr;gap:12px;padding:26px 0}
}


/* -------------------------------------------------------------
   14. REDUCED MOTION
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .js-on .reveal{opacity:1;transform:none}
}