@font-face {
    font-family: 'futura_bold';
    src: url('../fonts/Futura/futura-bold-webfont.woff2') format('woff2'),
         url('../fonts/Futura/futura-bold-webfont.woff')  format('woff'),
         url('../fonts/Futura/futura-bold-webfont.ttf')   format('truetype');
    font-weight: bold;
    font-style: normal;

}

@font-face {
    font-family: 'futura';
    src: url('../fonts/Futura/futura-book-webfont.woff2') format('woff2'),
         url('../fonts/Futura/futura-book-webfont.woff')  format('woff'),
         url('../fonts/Futura/futura-book-webfont.ttf')   format('truetype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'futura_light';
    src: url('../fonts/Futura/futurabt-light-webfont.woff2') format('woff2'),
         url('../fonts/Futura/futurabt-light-webfont.woff')  format('woff'),
         url('../fonts/Futura/futura-light-webfont.ttf')   format('truetype');
    font-weight: normal;
    font-style:  normal;

}


/* ---------- COLOUR VARIABLES ---------- */

:root {
    --white-pure: #ffffff;
    --white:      #f4f4f4;
    --black:      #262626;
    --grey:       #6E6E6E;
    --light-grey: #e8e8e8;
    --blue:       #0F8BE9;
    --green:      #27ae60;
    --red:        #E94242;
}


/* ---------- DEFAULT TAG STYLES ---------- */
html {
    font-size: 18px;
}

body {
    font-family:         'futura', Arial, Helvetica, sans-serif;
    text-align:          Left;
    color:               var(--black);

    background-color:    var(--white);
    
    overscroll-behavior: none;
    
    max-width:           1000px;
    margin:              0 auto 0 auto;
    padding:             5rem 0 5rem 0;
}

h1 {
    font-size:    5rem;
    font-family:  'futura_bold';
}

h2 {
    font-size:    2.778rem;
    font-weight:  700;
}

h3 {
    font-size:   2.111rem;
}

h4 {
    font-size:   1.556rem;
    font-weight: 500;
    margin:      0;
}

h5 {
    font-size:   1.167rem;
    font-weight: 500;
}

p {
    font-size:   1rem;
}

h6 {
    font-size:   0.778rem;
    font-family: 'futura_light';
    margin:      0.2em;
}

b{
    font-family: 'futura_bold';
}

a {
    font-weight:     700;
    color:           var(--grey);
    text-decoration: underline;
}

a:hover {
    color: var(--black);
}

ul{
    list-style-type: disc;
    padding:         0;
    margin:          0;
}

li{
    font-size:     1rem;
    margin-top:    0;
    margin-bottom: 0;
}

button {
    padding:     20px;
    color:       var(--white);
    align-items: center;
}

footer {
    max-width:   1000px;
    width:       100%;
    margin:      5em auto 0 auto;
    text-align:  center;
    color:       var(--grey);
}


/* ---------- LANDING SECTION STYLES ---------- */
.logo {
    width:         50px;
    height:        50px;
    border-radius: 3px;
    margin-bottom: 5rem;
}


/* ---------- LANDING SECTION STYLES ---------- */

.landing {
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    margin:          0 auto 5em auto;
    position:        relative;
}

.landing_about{
    width: 100%;
}


/* ---------- WORDMARK ---------- */

  .kelton{
    display:             inline-flex;
    position:            relative;
    align-items:         flex-end;
    justify-content:     left;
    margin:              0;

    font-weight:         900;
    font-size:           clamp(56px, 13vw, 190px);    
    line-height:         1;
    color:               var(--black);
    
    -webkit-user-select: none;
    user-select:         none;
  }

  .letter{
    position: relative;
    display:  inline-block;
  }


  /* ---------- K : transform / scale ---------- */

  .k-wrap{
    position:    relative;
    display:     inline-flex;
    align-items: flex-end;
    z-index:     1;

    cursor:      url("../img/Cursors/black_arrow.png"), auto;
  }

  .k-wrap.active{ z-index:5; }

  #kGlyph{
    display:          inline-block;
    transform-origin: 0% 0%;
    will-change:      transform;
  }

  .sel-box{
    position:       absolute;
    border:         4px solid var(--blue);
    display:        block;
    pointer-events: none;
  }

  .handle{
    display:      block;
    position:     absolute;
    width:        15px;
    height:       15px;

    background:   var(--white);
    border:       4px solid var(--blue);
    
    touch-action: none;
    z-index:      6;
  }

/* Enlarges the invisible tap/drag target to ~44px without growing the
   visible handle, so the K is still comfortably resizable on touch screens. */
.handle::before {
    content:  '';
    position: absolute;
    inset:    -15px;
}

.handle:hover {
    background: var(--blue);
}


/* ---------- L&T : Grasshopper Wire --------- */
.lt-wrap {
  position:        relative;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  line-height:     1;
  user-select:     none;
  pointer-events:  none;

  z-index:         1;
}

.lt-chars {
  display:        block;
  line-height:    1;
  pointer-events: none;

  z-index:        2;
}

/* Default T char state. */
#t-char {
    color:               var(--red);
    -webkit-text-stroke: 4px var(--black);

    position:            relative;
    display:             inline-block;
}

/* Connected Node State T Char */
#t-char.is-connected {
  color: var(--black);
}

/* Wire is snapping to T node */
#t-char.snap-target {
    color: var(--green);
}

.node_overlay {
  position:       absolute;
  inset:          0;
  width:          100%;
  height:         100%;
  pointer-events: none;
  overflow:       visible;
  z-index:        1;
}

.node_circle {
  fill:             var(--white);
  stroke:           var(--black);
  stroke-width:     4px;
  pointer-events:   auto; /* Enable interaction specifically on circles */
  cursor:           grab;
  vector-effect:    non-scaling-stroke;
  transition:       fill 0.2s ease, stroke 0.2s ease, transform 0.2s ease;
  transform-origin: center;
}

.node_circle:hover {
  cursor: grab;
}

#l-node-point:hover {
    cursor: url("../img/Cursors/node_connect.png") 0 6, auto;
}

#t-node-point:hover {
    cursor: url("../img/Cursors/node_disconnect.png"), auto;
}

/* Wire styling */
.wire-path {
  fill:             none;
  stroke:           var(--black);
  stroke-width:     4px;
  stroke-linecap:   round;
  stroke-dasharray: 10 6;

  vector-effect:    non-scaling-stroke;
  pointer-events:   none;
  transition:       stroke 0.2s ease;
}

.wire-path.snap-target {
    stroke:           var(--green) !important;
    stroke-dasharray: none;
}

.wire-path.is-connected {
    stroke:           var(--black);
    stroke-dasharray: none;
}

/* The main speech bubble box */
.speech-bubble {
  position:            absolute;
  bottom:              calc(95%); /* Positions box just above the top bar of the T */
  left:                50%; /* Align horizontally with the left-middle portion of T's crossbar */
  transform:           translateX(-50%);
  
  background-color:    var(--light-grey);
  border:              1.5px solid var(--black);
  
  font-family:         'futura', Arial, Helvetica, sans-serif !important;
  font-weight:         normal;
  font-size:           0.778rem;
  text-transform:      lowercase;
  -webkit-text-stroke: 0;
  text-shadow:         none;
  color:               var(--black);
  line-height:         1.2;

  padding:             0px 10px;
  white-space:         nowrap;
  pointer-events:      none;
  z-index:             3;
}

/* The downward-pointing triangle tail */
.speech-bubble::after {
  content:            '';
  position:           absolute;
  bottom:             -6px; /* Extends below the main box */
  left:               50%;
  transform:          translateX(-50%) rotate(45deg);
  
  width:              8px;
  height:             8px;
  background-color:   var(--light-grey); /* Same background color as the bubble */
  border-right:       1.5px solid var(--black);
  border-bottom:      1.5px solid var(--black);
}


/* ---------- N : Demolition ---------- */
/* Container wraps tightly to the exact footprint of the letter N */
.n-wrap {
  position:        relative;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  line-height:     1;
  user-select:     none;
}

.n-char {
  display:     block;
  line-height: 1;
}

/* Absolute overlay matching the text bounding box exactly */
.n-overlay {
  position:       absolute;
  inset:          0;
  width:          100%;
  height:         100%;
  pointer-events: none; /* Let container handle layout; polygons handle hits */
  overflow:       visible;
}

/* Base shape: Interactive, hit-testable, keeps stroke uniform across devices */
.counter-tri {
  pointer-events: auto;
  cursor:         url("../img/Cursors/hammer.png") 0 0, pointer;
  vector-effect:  non-scaling-stroke;
  transition:     fill 0.15s ease, stroke 0.15s ease;

  /* STATE 1: Default (Invisible fill, no border) */
  fill:         var(--black);
  stroke:       transparent;
  stroke:       var(--blue);
  stroke-width: 4px;
}

/* STATE 2: Hover (Blue Outline) - Only applies when NOT demolished */
.counter-tri:not(.is-demolished):hover {
  stroke:       var(--blue);
  stroke-width: 4px;
}

/* STATE 3: Demolished (Red Hatch Fill + Dashed Outline) */
.counter-tri.is-demolished {
  fill:             url(#revitHatch);
  stroke:           var(--red);
  stroke-width:     4px;
  stroke-dasharray: 25 10;
}

/* Landing description text.  */
.landing_description{
    width:      80%;
    word-wrap:  normal;
    margin-top: 1em;
}

/* Typewriter writer */
.i_design_section {
    margin-top: 3em;
}

.i_design_section h5 {
    display:      inline;
    margin-right: 0.3em;
}

#typewriter {
    color:       var(--black);
    font-size:   1.167rem;
}


/* ---------- PROJECT GRID SECTION ---------- */
.projects{
    margin:                 0 auto 5em auto;
    display:                grid;
    grid-template-columns:  repeat(3, 1fr);
    column-gap:             2.778rem;
    row-gap:                2.778rem;
}

.project_cover_button{
    aspect-ratio:     1 / 1;
    width:            100%;
    border:           none;
    box-sizing:       border-box;
    object-fit:       cover;
    padding:          2em;
    background-color: transparent;
    border-radius:    0.2em;
    display:          flex;
    justify-content:  space-between;
    flex-direction:   column;

    position:         relative;
    overflow:         hidden;
    outline:          none;

    color:            var(--black);
}

.project_cover_button:hover {
    cursor:           pointer;
    background-color: var(--white-pure);
}

.project_cover_button.locked:hover {
    cursor: url("../img/Icons/lock-01.png"), not-allowed;
}

.project_cover_image{
    /* Ensure that all items maintain a 1x1 aspect ratio */
    aspect-ratio:     1 / 1;
    width:            60%;
    border-radius:    5px;
    position:         relative;
    background-color: transparent;
    margin:           auto;
}

/* Hidden by default, fades in on button hover */
.project_cover_name {
    text-align:       left;
    color:            var(--black);
    margin:           0;
    width:            100%;
    opacity:          0;
    transition:       opacity 0.2s ease;
}

/* Hidden by default, fades in on button hover */
.project_cover_tags {
    display:          flex;
    flex-direction:   row;
    width:            100%;
    opacity:          0;
    transition:       opacity 0.2s ease;
}

.project_cover_tags h6 {
    width: 100%;
    text-align: center;
}

/* Target the button hover to reveal both text containers */
.project_cover_button:hover .project_cover_name,
.project_cover_button:hover .project_cover_tags {
    opacity:          1;
    z-index:          2;
}

/* ---------- ABOUT ME SECTION ---------- */
.about_section{
    width:                 100%;
    margin:                2em auto auto auto;

    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap:            2.778rem;
    row-gap:               2.778rem;
}

.about_image_container{
    aspect-ratio:   1/1;
    width:          100%;
    border-radius:  5px;
    position:       relative;
    overflow:       hidden;
    flex-shrink:    0;
}

.carousel_image{
    width:         100%;
    height:        100%;
    object-fit:    cover;
    border-radius: 5px;
    position:      absolute;
    top:           0;
    left:          0;
    opacity:       0;
    transition:    opacity 0.5s ease-in-out;
}

.carousel_image.active{
    opacity: 1;
}

.carousel_dots{
    position:   absolute;
    bottom:     15px;
    left:       50%;
    transform:  translateX(-50%);
    display:    flex;
    gap:        8px;
}

.dot{
    width:             12px;
    height:            12px;
    border-radius:     50%;
    background-color: rgba(255, 255, 255, 0.5);
    cursor:            pointer;
    transition:        background-color 0.3s;
}

.dot.active{
    background-color: rgba(255, 255, 255, 1);
}

.about_description_container{
    width:       100%;
    grid-column: span 2;
}

.about_description_container h4 {
    margin-top :   0;
    margin-bottom: 0.5em;
}

.about_description_container ul {
    list-style-type:     disc; 
    list-style-position: inside;
    margin-left:         1em;
}

.contact-items {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start; /* Keeps links sized to their text width rather than stretching 100% */
  gap:            8px; /* Adds physical spacing between tap targets */
}

/* Remove default br height so flexbox gap handles spacing exclusively */
.contact-items br {
  display: none;
}

.contact-items a {
  display:         inline-flex;
  align-items:     center;
  
  /* Expands the invisible clickable area to hit Lighthouse's min 48px target */
  min-height:      22px; 
  padding:         4px 8px; 
  margin:          -4px -8px; /* Negative margin offsets padding so text layout stays visually aligned */
  
  /* Touch UX improvements */
  text-decoration: underline;
  touch-action:    manipulation; /* Removes tap delay on mobile devices */
}


/* ---------- PROJECT GALLERY PAGE STYLES ---------- */
/* Container holds the 50x50 space */
.logo_container {
    position:      relative;
    width:         50px;
    height:        50px;
    margin-bottom: 5em;
    display:       inline-block;
}

/* Logo image is visible by default */
.logo_project_page {
    position:      absolute;
    top:           0;
    left:          0;
    width:         100%;
    border-radius: 3px;
    object-fit:    contain;
    
    opacity:       1;
    transition:    opacity 0.4s ease;
}

/* Button is hidden by default */
.home_button_header {
    position: absolute;
    top:              0;
    left:             0;
    width:            100%;
    height:           100%;
    
    background-color: var(--black);
    color:            var(--white);
    cursor:           pointer;
    text-align:       center;
    border:           none;
    border-radius:    3px;
    padding:          0;
    margin:           0;
    
    /* Hide button initially so it doesn't bleed through transparent logos */
    opacity:          0;
    pointer-events:   none; /* Prevents clicking the invisible button */
    transition:       opacity 0.2s ease;
}

/* HOVER STATE: Hide the image, show the button */
.logo_container:hover .logo_project_page {
    opacity: 0;
}

.logo_container:hover .home_button_header {
    opacity:        1;
    pointer-events: auto; /* Re-enables clicking when hovered */
}

.project_hero{
    width:         100%;
    border-radius: 5px;
    aspect-ratio:  16 / 9;
}

 /* Project title and description. */
.project_title {
    margin-bottom: 1rem;
 }

.project_description {
    margin-bottom: 1rem;
}

 .project_description h5{
    display: inline;
    margin:  0 3rem 0 0;
 }

/* Project role, problem and approach. */
.role_problem_approach_grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap:            2rem;
    row-gap:               2rem;
    margin:                5rem 0 5rem 0;
}


/* Project impact section grid. */
.impact_title {
    margin: 5rem 0 0 0;
}

.impact_grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap:            2em;
    margin:                0 0 5rem 0;
}

/* Project image bento grid. */
.project_image_grid{
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows:    repeat(4, 1fr);
    gap:                   1em;
    width:                 100%;
    margin:                0;
    aspect-ratio:          3 / 4;
}

.grid_item,
.project_text {
    width:           100%;
    height:          100%;
    border-radius:   5px;
    box-sizing:      border-box;
    margin:          0;

    min-height:      0;
    min-width:       0;
    overflow:        hidden;

    text-wrap:       wrap;
}

.grid_item {
    position: relative;
    overflow: hidden;
}

/* Text only grid item. */
.project_text{
    padding:     2em;
    box-sizing:  border-box;
    display:     flex;
    align-items: center;
}

/* Image and Video grid item. */
.project_image,
.project_video {
    width:           100%;
    height:          100%;
    border-radius:   5px;
    object-fit:      cover;
    object-position: center;
    display:         block;
}

/* Caption text. */
.grid_item h6 {
    background:    var(--white);
    border:        0.1em solid var(--black);
    border-radius: 5px;
    z-index:       2;

    position:      absolute;
    bottom:        1rem;
    left:          50%;
    transform:     translateX(-50%);

    margin:        0;
    text-align:    center;
    padding:       0.3rem 2rem 0.3rem 2rem;

    width:         max-content;
    max-width:     90%;
}

/* GRID SPAN CLASSES */
.span1x1 {
    aspect-ratio: 1 / 1;
}

.span1x2 {
    grid-column: span 1;
    grid-row:    span 2;
}

.span2x1 {
    grid-column: span 2;
    grid-row:    span 1;
}

.span2x2 {
    grid-column: span 2;
    grid-row:    span 2;
}

.span3x2 {
    grid-column: span 3;
    grid-row:    span 2;
}

.span3x1 {
    grid-column: span 3;
    grid-row:    span 1;
}

.span4x1 {
    grid-column: span 4;
    grid-row:    span 1;
}

/* Project Page Home Button */
.home_button{
    background:    var(--black);
    color:         var(--white);
    margin:        5em auto 0 auto;
    padding:       0.5em 5em 0.5em 5em;
    display:       block;
    border-radius: 0.3em;
    cursor:        pointer;
}

.home_button h5 {
    color:      var(--white);
    text-align: center;
    margin:     0;
}






/* ===============================================
   RESPONSIVE MEDIA QUERIES: LARGEST TO SMALLEST
   =============================================== */

/* ---------------- LARGE DEVICES - 992px - 1199px ----------------------- */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    body {
        max-width: 900px;
    }

    /* Landing Section */
    .home_page_subheadings {
    max-width:   900px;
    }

    /* Project Cover Grid */
    .project_cover_button{
    cursor:           pointer;
    background-color: var(--white-pure);
    }

    .project_cover_button .project_cover_name,
    .project_cover_button .project_cover_tags {
        opacity:          1;
        z-index:          2;
    }

    .project_cover_name h4 {
        font-size:   1.35rem;
    }

    .project_cover_name p {
        font-size: 0.9rem;
        margin:    0;
    }
}



/* ---------------- TABLET & BELOW - up to 991px -----------------
   Shared by every breakpoint under "medium", so it's declared once
   here instead of being repeated in each range block below. */
@media only screen and (max-width: 991px) {
    /* Project grid section */
    .project_cover_button {
    cursor:           pointer;
    background-color: var(--white-pure);
    }

    .project_cover_button .project_cover_name,
    .project_cover_button .project_cover_tags {
        opacity:          1;
        z-index:          2;
    }

    /* Project Cover Grid */
    .projects {
        grid-template-columns: repeat(2, 1fr);
        gap: 50px;
    }

    /* About Me Section */
    .about_section{
        grid-template-columns: repeat(2, 1fr);
    }
    
    .about_image_container {
        height: 100%;
    }

    .about_description_container {
        grid-column: span 1;
    }
}



/* -------------------- MEDIUM DEVICES 768px - 991px ----------------------- */
@media only screen and (min-width: 768px) and (max-width: 991px) {

    body {
        max-width: 700px;
    }

    /* Landing Section */
    .kelton {
        font-size: clamp(130px, 13vw, 190px);   
    }

    /* About Me section */
    .about_image_container {
        width: 100%;
        aspect-ratio: 1 / 1;
    }

    /* Project Gallery Page */
    .project_title {
        font-size: 4rem;
    }

    .project_text {
        font-size: 1.3rem;
    }
}



/* ------------------ SMALL DEVICES 600px - 767px ----------------- */
@media only screen and (min-width: 600px) and (max-width: 767px) {
    /* Tag Styles */
    html {
        font-size: 14px;
    }
    
    body {
        max-width: 575px;
        padding:   3rem 0 3rem 0;
    }

    h1 {
        font-size: 4rem;
    }

    /* Header Section */
    .logo {
        margin-bottom: 3rem;
    }
    
    /* Landing Section */
    /* Interactive wordmark: thinner chrome so the K's handles and the
       wire don't overpower the smaller glyphs, plus a slightly bigger
       (invisible) touch target on the grasshopper nodes. */
    .kelton {
        font-size: clamp(115px, 13vw, 190px);   
    }

    .sel-box,
    .handle {
        border-width: 2px;
    }

    .node_circle {
        stroke-width: 3px;
        r: 8px;
    }

    .wire-path {
        stroke-width: 3px;
    }

    #t-char {
        -webkit-text-stroke-width: 3px;
    }

    .speech-bubble {
        font-size: 12px;
        padding: 0 8px;
    }

    .counter-tri:not(.is-demolished):hover,
    .counter-tri.is-demolished {
        stroke-width: 3px;
    }
    
    /* Project Gallery Page */
    .role_problem_approach_grid {
    grid-template-columns: repeat(2, 1fr);
    }

    #project_approach {
        grid-column: span 2;
    }

    .project_image_grid {
        grid-template-columns: repeat(2, 1fr);
        aspect-ratio:          2 / 4;
    }

    .project_image {
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
    }

    .grid_item.span1x1,
    .grid_item.span1x2,
    .grid_item.span2x1 {
        aspect-ratio: 1 / 1;
        grid-column: auto;
        grid-row: auto;
    }

    .grid_item h6 {
        padding: 0.3rem 0.75rem 0.3rem 0.75rem;
    }
}


/* ------------------ EXTRA SMALL DEVICES - < 600px ------------------ */
@media only screen and (max-width: 600px) {
    /* Tag Styles */
    html {
        font-size: 14px;
    }

    body {
        max-width: calc(100dvw - 8rem);
    }
    
    /* Wordmark */
    .kelton {
        font-size: clamp(70px, 13vw, 100px);
        margin-top: 1rem;
    }

    .handle {
        width:  10px;
        height: 10px;
    }

    .node_circle {
        stroke-width: 3px;
        r: 9px;
    }

    .wire-path {
        stroke-width: 3px;
    }

    #t-char {
        -webkit-text-stroke-width: 3px;
    }

    .speech-bubble {
        font-size: 11px;
        padding: 0 6px;
    }

    .counter-tri:not(.is-demolished):hover,
    .counter-tri.is-demolished {
        stroke-width: 3px;
    }

    .landing_description {
        width: 100%;
    }

    /* Project Cover Grid */
    .projects {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    /* About section */
    .about_section{
        grid-template-columns: repeat(1, 1fr);
        gap: 2rem;
    }

    .about_image_container {
        width: 100%;
        aspect-ratio: 1 / 1;
    }
    
    /* Project Gallery Page */
    .project_hero {
        aspect-ratio: 3 / 4;
        object-fit: cover;
    }

    .project_title {
        font-size: 2rem;
    }

    .role_problem_approach_grid {
    grid-template-columns: repeat(1, 1fr);
    }

    .project_image_grid {
        display: flex;
        flex-direction: column;
        aspect-ratio: 1 / 1;
    }

    .project_image {
        width: 100%;
        height: 100%;
        aspect-ratio: 1 / 1 !important;
    }

    .grid_item.span1x1,
    .grid_item.span1x2,
    .grid_item.span2x1 {
        aspect-ratio: auto;
        grid-column: auto;
        grid-row: auto;
    }

    .impact_grid {
        grid-template-columns: repeat(1, 1fr);
    }
}