/* AR. HASEEB ULLAH — ARCHITECTURAL PRACTICE
   Design language: the architect's drawing sheet, redrawn as a cyanotype —
   the original "blueprint" was always dark paper with light ink, so a dark
   theme is right at home here. Deep ink ground, warm parchment type, a
   luminous cyanotype-blue accent, and a brass scale-rule accent. */

:root{
  --paper:        #17150F;
  --paper-dim:    #1C1A12;
  --paper-line:   rgba(237,231,218,.16);
  --ink:          #0B0A07;
  --ink-soft:     #C9C2AE;
  --ink-faint:    #96906F;
  --blue:         #3FB6D3;
  --blue-deep:    #0F5A6E;
  --blue-light:   #58C9E3;
  --blue-wash:    rgba(63,182,211,.14);
  --brass:        #C9A466;
  --brass-light:  #E4C384;
  --white:        #FBF9F3;
  --text:         #EDE7DA;
  --surface:      #221F16;

  --font-display: "Montserrat", "Segoe UI", sans-serif;
  --font-sans:    "Inter", "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", "Courier New", monospace;

  --radius: 2px;
  /* Tight gutter — content runs close to the viewport edge. The small floor
     keeps text off the screen edge on phones. */
  --container-pad: clamp(.85rem, 1.4vw, 1.25rem);
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  background:var(--paper);
  color:var(--text);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.6;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

main{flex:1 0 auto;}

a{color:inherit;text-decoration:none;}
::selection{background:var(--blue);color:var(--ink);}

h1,h2,h3,h4,.font-display{font-family:var(--font-display);}
.font-mono{font-family:var(--font-mono);}

.eyebrow{
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--brass-light);
  display:inline-flex;
  align-items:center;
  gap:.5rem;
}

.section-title{
  font-size:clamp(1.9rem,3.2vw,2.6rem);
  font-weight:600;
  color:var(--text);
  margin:.35rem 0 0;
}

/* Every band on the site gets its vertical rhythm from the section wrapper and
   its horizontal measure from the .container-wide inside it — never both, or
   the section content indents one gutter deeper than the header, hero and
   footer and nothing lines up down the page. */
.section-pad{padding:5rem 0;}
.container-wide{max-width:1760px;margin:0 auto;padding:0 var(--container-pad);}

hr.rule{border:0;border-top:1px solid var(--paper-line);margin:2.5rem 0;}

.blueprint-ground{
  background-color:var(--ink);
  color:var(--white);
}

/* SITE HEADER */
.site-header{
  background:var(--ink);
  border-bottom:1px solid rgba(220,231,230,.12);
  position:sticky;top:0;z-index:1030;
}
.site-header .navbar-brand{
  font-family:var(--font-display);
  color:var(--white);
  font-size:1.15rem;
  letter-spacing:.03em;
  display:flex;flex-direction:column;line-height:1.05;
}
.site-header .navbar-brand small{
  font-family:var(--font-mono);
  font-size:.62rem;
  letter-spacing:.14em;
  color:var(--brass-light);
  text-transform:uppercase;
  margin-top:.15rem;
}
.site-nav .nav-link{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(251,249,243,.7) !important;
  padding:.5rem .9rem !important;
  position:relative;
}
.site-nav .nav-link:hover,.site-nav .nav-link.active{color:var(--white) !important;}
.site-nav .nav-link.active::after{
  content:"";position:absolute;left:.9rem;right:.9rem;bottom:.15rem;height:2px;background:var(--brass-light);
}
.navbar-toggler{border-color:rgba(255,255,255,.25);}
.navbar-toggler-icon{filter:invert(1);}

/* Small, deliberately understated admin-access icon in the public navbar —
   discoverable for the site owner without reading as a public "Admin" CTA. */
.nav-admin-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;
  border:1px solid rgba(251,249,243,.22);
  color:rgba(251,249,243,.5);
  font-size:.72rem;
  transition:.2s ease;
}
.nav-admin-icon:hover{border-color:var(--brass-light);color:var(--brass-light);}

/* SHEET TITLE BLOCK (signature) */
.title-block{
  background:var(--surface);
  border-bottom:1px solid var(--paper-line);
}
.title-block .tb-inner{
  display:grid;
  grid-template-columns: auto 1fr auto auto auto;
  gap:0;
}
.title-block .tb-cell{
  padding:.55rem var(--container-pad);
  border-right:1px solid var(--paper-line);
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.06em;
  color:var(--ink-faint);
  display:flex;flex-direction:column;justify-content:center;
}
.title-block .tb-cell:last-child{border-right:0;}
.title-block .tb-cell b{
  display:block;color:var(--text);font-size:.78rem;letter-spacing:.02em;
  font-weight:700;
}
.title-block .tb-sheet{color:var(--blue);font-weight:700;}
@media (max-width:900px){
  .title-block .tb-inner{grid-template-columns:auto 1fr;}
  .title-block .tb-scale,.title-block .tb-date,.title-block .tb-drawnby{display:none;}
}

/* BUTTONS */
.btn-ink{
  background:var(--text);color:var(--ink);border:1px solid var(--text);
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.75rem 1.5rem;border-radius:var(--radius);transition:.2s ease;
}
.btn-ink:hover{background:transparent;color:var(--text);}
.btn-brass{
  background:var(--brass);color:var(--ink);border:1px solid var(--brass);
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.75rem 1.5rem;border-radius:var(--radius);transition:.2s ease;
}
.btn-brass:hover{background:transparent;color:var(--brass);}
/* Square brass chevron used by the Design Index pager. */
.btn-arrow{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;padding:0;cursor:pointer;
  background:transparent;color:var(--brass-light);
  border:1px solid rgba(201,164,102,.55);border-radius:var(--radius);
  font-size:.8rem;transition:.2s ease;
}
.btn-arrow:hover{background:var(--brass);color:var(--ink);border-color:var(--brass);}
.btn-outline-paper{
  border:1px solid rgba(251,249,243,.4);color:var(--white);
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.7rem 1.3rem;border-radius:var(--radius);transition:.2s ease;
}
.btn-outline-paper:hover{background:var(--white);color:var(--ink);}

/* HERO */
.hero{position:relative;min-height:78vh;overflow:hidden;color:var(--white);}
.hero-slide{
  position:absolute;inset:0;background-size:cover;background-position:center;
  filter:brightness(.5) saturate(1.05);
  transition:opacity 1s ease;
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(28,27,24,.25) 0%, rgba(28,27,24,.55) 60%, rgba(28,27,24,.92) 100%);
}
/* Holds its own copy of the .container-wide measure — it has no such wrapper
   inside it, and without the cap the hero copy would run wider than every
   section below it once the viewport passes that width. */
.hero-content{
  position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;
  width:100%;max-width:1760px;margin:0 auto;padding:0 var(--container-pad) 2.5rem;min-height:78vh;
}
.hero-title{font-size:clamp(2.2rem,5vw,3.6rem);font-weight:600;max-width:760px;}
.hero-panels{display:flex;flex-wrap:wrap;gap:1.25rem;justify-content:space-between;align-items:flex-end;margin-top:2rem;}

.profile-chip{
  display:flex;align-items:center;gap:1.4rem;background:rgba(28,27,24,.85);
  border:1px solid rgba(251,249,243,.15);padding:1.4rem 1.9rem;border-radius:8px;backdrop-filter:blur(6px);
}
.profile-chip img{width:96px;height:96px;border-radius:50%;object-fit:cover;border:3px solid var(--brass-light);}
.profile-chip .name{font-family:var(--font-display);font-weight:700;font-size:1.35rem;}
.profile-chip .role{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;color:var(--brass-light);text-transform:uppercase;}
.profile-chip .socials a{color:rgba(251,249,243,.75);margin-right:.7rem;font-size:1.1rem;}
.profile-chip .socials a:hover{color:var(--brass-light);}

.upcoming-chip{
  background:rgba(28,27,24,.85);border:1px solid rgba(251,249,243,.15);border-radius:6px;
  padding:1rem 1.4rem;max-width:380px;backdrop-filter:blur(6px);
}
.upcoming-chip .tag{
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brass-light);
  border:1px solid rgba(199,164,101,.4);padding:.15rem .5rem;border-radius:3px;
}
.upcoming-chip h3{font-size:1.1rem;margin:.6rem 0 .25rem;}
.upcoming-chip p{font-size:.78rem;color:rgba(251,249,243,.7);margin:0;}
.slide-dots{display:flex;gap:.35rem;margin-top:.8rem;}
.slide-dots button{width:18px;height:3px;border:0;background:rgba(251,249,243,.3);cursor:pointer;}
.slide-dots button.active{background:var(--brass-light);}

/* CARDS */
/* Admin-authored copy can arrive as one unbroken run of characters (a pasted
   URL, a long filename, mashed keys). Without this it has no space to break
   on and spills straight through the card border. */
.card-plate,.ebook-card,.project-card,.category-card,.service-card,.process-card{min-width:0;}
.card-plate h3,.card-plate p,.card-plate span,.card-plate li,
.ebook-card .body,.project-card .body,.upcoming-chip,.title-block{
  overflow-wrap:break-word;
}
.card-plate{
  background:var(--surface);border:1px solid var(--paper-line);border-radius:var(--radius);
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  height:100%;
}
.card-plate:hover,.card-plate:focus-within{transform:translateY(-6px);box-shadow:0 18px 34px -14px rgba(0,0,0,.6),0 0 0 1px rgba(201,164,102,.18);border-color:var(--brass);}

.category-card{
  position:relative;height:280px;border-radius:var(--radius);overflow:hidden;cursor:pointer;
  border:1px solid rgba(201,164,102,.55);
  transition:border-color .35s ease, box-shadow .35s ease;
}
.category-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;filter:saturate(1.05);}
.category-card:hover img{transform:scale(1.08);}
.category-card:hover,.category-card:focus-visible{
  border-color:var(--brass);
  box-shadow:0 0 0 1px rgba(201,164,102,.35), 0 18px 34px -14px rgba(0,0,0,.6);
}
.category-card .overlay{
  position:absolute;inset:0;background:linear-gradient(0deg, rgba(28,27,24,.88) 0%, rgba(28,27,24,.2) 55%, rgba(28,27,24,.05) 100%);
  display:flex;flex-direction:column;justify-content:flex-end;padding:1.2rem;color:var(--white);
}
.category-card .idx{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.1em;color:var(--brass-light);}
.category-card h3{font-size:1.25rem;margin:.2rem 0;}
.category-card .count{font-family:var(--font-mono);font-size:.68rem;color:rgba(251,249,243,.75);}

/* Portfolio project cards carry the same brass outline as the typology cards. */
.project-card{border-color:rgba(201,164,102,.55);}
.project-card .imgwrap{height:230px;overflow:hidden;border-bottom:1px solid rgba(201,164,102,.3);position:relative;}
.project-card .imgwrap img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.project-card:hover .imgwrap img{transform:scale(1.06);}
.project-card .body{padding:1.25rem 1.35rem;}
.project-card .meta{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.05em;color:var(--ink-faint);text-transform:uppercase;}
.project-card h3{font-size:1.15rem;margin:.35rem 0;}
.project-card .badge-cat{
  position:absolute;top:.7rem;left:.7rem;background:var(--blue-deep);color:var(--white);
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.25rem .55rem;border-radius:2px;
}

.service-card,.process-card{padding:2rem 1.6rem;}
.service-card i{color:var(--brass-light);font-size:1.6rem;}
/* Uploaded icon art stands in for the Font Awesome glyph — sized to match it
   so a card reads the same whichever the admin chose. */
.service-icon-img{width:2.1rem;height:2.1rem;object-fit:contain;display:block;}
.step-icon-img{width:2.4rem;height:2.4rem;object-fit:contain;display:block;}
/* Step numerals carry the same brass as the masthead tagline. */
.process-card .step{font-family:var(--font-mono);font-weight:700;font-size:1.6rem;color:var(--brass-light);}
.process-card h3{font-size:1.05rem;margin:.6rem 0 .4rem;}

.ebook-card .cover{height:210px;overflow:hidden;border-bottom:1px solid var(--paper-line);}
.ebook-card .cover img{width:100%;height:100%;object-fit:cover;}
.ebook-card .body{padding:1.2rem 1.3rem;}
.ebook-card .type-tag{
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--brass-light);border:1px solid rgba(201,164,102,.35);background:rgba(201,164,102,.14);padding:.15rem .5rem;border-radius:2px;
}

/* FOOTER */
.site-footer{background:var(--ink);color:rgba(251,249,243,.65);border-top:1px solid rgba(220,231,230,.12);}
.site-footer a:hover{color:var(--brass-light);}
.site-footer .studio-access{
  font-family:var(--font-mono);font-size:.65rem;letter-spacing:.06em;color:rgba(251,249,243,.35);
}
.site-footer .studio-access:hover{color:rgba(251,249,243,.65);}

/* MISC */
.page-hero-sm{
  padding:3.2rem 0 2.5rem;
  border-bottom:1px solid rgba(220,231,230,.12);
  position:relative;
  overflow:hidden;
  background:var(--ink);
}
.page-hero-sm .section-title{color:var(--white);}
.page-hero-sm .container-wide{position:relative;z-index:2;}

/* Carries one slideshow behind several stacked sections. The sections inside
   ride above it and give up their own opaque grounds, so the photograph stays
   continuous from the intro down past the cards. */
.page-ground{position:relative;overflow:hidden;}
.page-ground > section{position:relative;z-index:2;}
.page-ground > .page-hero-sm{background:transparent;border-bottom:0;}
/* Lighter over the intro so the photograph still reads behind the heading,
   deepening as it passes behind the cards. */
.page-ground > .page-bg-overlay{
  background:linear-gradient(180deg, rgba(11,10,7,.55) 0%, rgba(11,10,7,.72) 32%, rgba(11,10,7,.85) 100%);
}

/* Crossfading background slideshow for inner-page intros (e.g. Portfolio) */
.page-bg-slider{position:absolute;inset:0;z-index:0;}
.page-bg-slide{
  position:absolute;inset:0;background-size:cover;background-position:center;
  filter:brightness(.32) saturate(1.05);
  transition:opacity 1.2s ease;
}
.page-bg-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg, rgba(11,10,7,.9) 0%, rgba(11,10,7,.7) 50%, rgba(11,10,7,.4) 100%);
}
/* The Home "Design Index" slideshow sits behind a full-width card grid rather
   than left-aligned hero copy, so it takes an even veil — the sideways
   gradient would leave the right-hand cards floating on a bright photo. */
#design-index-slides ~ .page-bg-overlay{
  background:linear-gradient(180deg, rgba(11,10,7,.88) 0%, rgba(11,10,7,.8) 100%);
}

.pagination-plates .page-link{
  font-family:var(--font-mono);font-size:.75rem;background:var(--surface);border-color:var(--paper-line);color:var(--text);
}
.pagination-plates .page-item.active .page-link{background:var(--brass);border-color:var(--brass);color:var(--ink);}
.pagination-plates .page-link:hover{border-color:var(--brass);color:var(--brass-light);}

.toast-plate{
  position:fixed;bottom:1.5rem;right:1.5rem;z-index:2000;
  background:var(--ink);color:var(--white);padding:.9rem 1.3rem;border-radius:var(--radius);
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.03em;
  border-left:3px solid var(--brass-light);
  box-shadow:0 12px 30px -10px rgba(0,0,0,.4);
  transform:translateY(20px);opacity:0;transition:.3s ease;pointer-events:none;
}
.toast-plate.show{transform:translateY(0);opacity:1;}

.skip-link{position:absolute;left:-999px;top:0;background:var(--brass);color:var(--white);padding:.6rem 1rem;z-index:2000;}
.skip-link:focus{left:1rem;top:1rem;}

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

/* Visible focus ring throughout — brass, to match the heading accent */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,
[tabindex]:focus-visible,.card-plate:focus-visible,.category-card:focus-visible,.project-plate:focus-visible{
  outline:2px solid var(--brass-light);outline-offset:2px;
}

/* Bootstrap paints its own blue focus ring on buttons, form controls, links,
   accordions, nav pills and modals — repoint every one of those at the brass. */
:root{
  --bs-focus-ring-color: rgba(228,195,132,.35);
  --bs-focus-ring-opacity: .35;
}
.btn,.btn-close,.nav-link,.page-link,.form-check-input,.accordion-button,.dropdown-item{
  --bs-btn-focus-shadow-rgb: 201,164,102;
  --bs-focus-ring-color: rgba(228,195,132,.35);
}
.form-control:focus,.form-select:focus,.form-check-input:focus{
  border-color:var(--brass);
  box-shadow:0 0 0 .2rem rgba(201,164,102,.25);
}
.form-check-input:checked{background-color:var(--brass);border-color:var(--brass);}
.btn:focus-visible,.btn:focus,.page-link:focus,.accordion-button:focus{
  box-shadow:0 0 0 .2rem rgba(201,164,102,.25);
}
.accordion-button:not(.collapsed){box-shadow:inset 0 -1px 0 rgba(201,164,102,.35);}