/* ═══════════════════════════════════════════════════════════════════
   Steven Sun — personal site stylesheet
   ═══════════════════════════════════════════════════════════════════
   Layout inherited from a GrapesJS Studio template: the gjs- prefixed
   utility classes come from the template; all ids are semantic.
   Sections: reset/theme → template base classes → hero → work → about
   → contact/footer → project cards → navbar → media queries
   (992px / 768px / 480px breakpoints).
   ═══════════════════════════════════════════════════════════════════ */

/* ── Reset & theme ── */
* { box-sizing: border-box; } body {margin: 0;}
:root{--gjs-t-color-primary:#cf549e;--gjs-t-color-secondary:#b9227d;--gjs-t-color-accent:#ffb347;--gjs-t-color-success:#28a745;--gjs-t-color-warning:#ffc107;--gjs-t-color-error:#dc3545;
      --gutter:56px;   /* side padding below 1300px; steps down per tier */
      --navbar-h:72px; /* desktop navbar height; overridden on phones */}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;} /* smooth anchors; stop iOS inflating text in landscape */
body{font-family:Inter;color:black;overflow-x:hidden;} /* site-wide font; hidden overflow-x guards against stray wide children */
img{max-width:100%;height:auto;} /* never let an image push the layout wider than the screen */

/* ── Template base classes (from GrapesJS) ── */
.gjs-t-body{background-color:inherit;color:inherit;font-size:1rem;line-height:1.75rem;font-family:Arial, Helvetica, sans-serif;}
.gjs-t-h1{color:var(--gjs-t-color-secondary);font-size:1.5rem;line-height:2.5rem;}
.gjs-t-h2{color:#601843;font-size:1.2rem;line-height:1.75rem;}
.gjs-t-button{background-color:var(--gjs-t-color-primary);color:white;border-radius:0.3rem;}
.gjs-t-link{color:var(--gjs-t-color-primary);text-decoration:underline;}
.gjs-t-border{border-radius:1rem;border-color:#e0e0e0;} /* shared rounded-corner look (cards, buttons) */
.gjs-container{width:96%;margin:0 auto;max-width:1360px;} /* page gutter — widen/narrow the whole site here */
.gjs-section{display:flex;padding:50px 0;}
.gjs-plg-flex-column{flex-grow:1;}
.gjs-plg-flex-row{display:flex;align-items:stretch;flex-wrap:nowrap;}
.gjs-link-box{color:inherit;display:inline-block;vertical-align:top;padding:10px;max-width:100%;text-decoration:none;}
.gjs-icon{display:inline-block;text-decoration:none;color:inherit;vertical-align:middle;fill:currentColor;width:50px;height:50px;}

/* ── Hero section ──
   Fills exactly one viewport: 100svh minus the 72px navbar. The faint
   blueprint grid is the CSS background; the animated layer (#hero-bg
   canvas) sits behind the content (z-index 0 vs 1). */
#hero{border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;border-bottom-style:solid;border-top-color:rgba(226, 226, 226, 1);border-right-color:rgba(226, 226, 226, 1);border-bottom-color:rgba(226, 226, 226, 1);border-left-color:rgba(226, 226, 226, 1);padding-top:60px;padding-right:0px;padding-bottom:50px;padding-left:0px;min-height:calc(100vh - 72px);min-height:calc(100svh - 72px);}
#hero .gjs-container{display:flex;position:relative;z-index:1;} /* content above the canvas */
#hero{position:relative;overflow:hidden;background-color:#fff;background-image:linear-gradient(rgba(110,130,165,0.08) 1px,transparent 1px),linear-gradient(90deg,rgba(110,130,165,0.08) 1px,transparent 1px);background-size:44px 44px;} /* blueprint grid */
#hero-bg{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;} /* animation canvas */
#hero-row{width:100%;}
#hero-text-col{flex-basis:50%;}
#hero-name{font-size:120px;margin:100px 0;line-height:110px;font-family:Manrope;} /* "STEVEN SUN" headline */
#tagline-link{display:flex;width:auto;align-items:flex-start;margin:180px 0 0 0;cursor:pointer;padding:10px 0;} /* "> ENGINEER OF …" mailto row */
#tagline-prefix{font-weight:600;font-size:30px;color:rgb(232, 167, 79);margin:0;padding:10px 7px 10px 0;white-space:nowrap;} /* "> ENGINEER OF" (accent orange) */
#tagline-tags{font-size:30px;margin:0 0 0 650px;padding:10px 0 0 14px;display:inline-block;} /* discipline tags; padding-top matches #tagline-prefix so first lines align */

/* ── Work section ── */
#work{border-top-color:rgba(226, 226, 226, 1);border-right-color:rgba(226, 226, 226, 1);border-bottom-color:rgba(226, 226, 226, 1);border-left-color:rgba(226, 226, 226, 1);border-bottom-style:solid;border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;}
#work-head-row{width:100%;align-items:center;justify-content:space-between;} /* "Work." + View More */
#work-title-col{flex-basis:50%;}
#work-title{font-weight:600;font-size:40px;font-family:Manrope;}
#work-more-col{flex:0 1 auto;}
#work-more-btn{padding:15px;display:block;width:160px;text-align:center;text-decoration:none;background-color:#D9D9D9;color:black;font-weight:500;font-size:18px;cursor:pointer;}
#work-row-1{width:100%;gap:22px;margin-top:22px;}
#work-row-2{width:100%;gap:22px;margin-top:22px;}
.work-card{flex-basis:50%;position:relative;} /* card column; relative anchors nothing itself (title anchors to .p-wrap) */
/* Title overlaid bottom-left on the banner. z-index is required: on
   hover the banner gets a transform/filter, which makes it paint in the
   positioned-elements pass — and since it comes after the title in the
   DOM it would otherwise cover the title up. */
.card-title{font-weight:600;font-size:35px;position:absolute;left:35px;bottom:25px;color:white;margin:0;z-index:1;}

/* ── About section ── */
#about-head-row{width:100%;}
#about-text-col{flex-basis:50%;}
#about-title{font-weight:600;font-size:40px;margin:0 0 35px 0;font-family:Manrope;}
#about-intro{font-size:30px;}
#about-more-col{flex:1 0 50%;display:flex;align-items:flex-start;justify-content:flex-end;}
#about-more-btn{padding:15px;display:block;width:160px;text-align:center;text-decoration:none;background-color:#D9D9D9;color:black;font-weight:500;font-size:18px;cursor:pointer;}

/* ── Contact / footer (black closing section) ── */
#contact{background-color:BLACK;padding-bottom:30px;color:white;}
#social-links{padding:10px;font-weight:600;font-size:18px;text-align:right;}
#contact-headline{display:flex;flex-direction:column;font-size:35px;margin-bottom:40px;background:linear-gradient(90deg, #fff, #5F5F5F, #5F5F5F);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent;font-family:Manrope;} /* gradient headline (white → grey clipped to text) */
#cta-row{width:100%;}
#cta-group{flex-basis:100%;display:flex;gap:45px;}
#contact-btn{padding:15px;display:block;width:180px;text-align:center;text-decoration:none;background-color:rgba(255, 255, 255, 1);color:black;font-weight:500;font-size:15px;cursor:pointer;}
#footer-row{width:100%;margin-top:80px;justify-content:space-between;font-size:11px;}
#footer-col-contact{flex:0 0 20%;} /* col 1: location + email */
#footer-col-copy{flex:0 0 20%;}    /* col 2: copyright */
#footer-row h1{margin:8px 0;}
#footer-email{font-weight:600;}

/* ── Project cards ──
   Each banner auto-loads images/<card title>.jpg as its background;
   until the photo exists it shows plain grey (missing images are
   silent with CSS backgrounds — no broken-image icon). */
/* Each card is a link through to work.html. .p-wrap is the <a>: it
   anchors the overlaid .card-title to the banner only, and carries the
   hover feedback for the whole card. */
.p-wrap{position:relative;display:block;color:inherit;text-decoration:none;overflow:hidden;border-radius:1rem;} /* clips the hover zoom, keeps the rounded corners */
.p-banner{width:100%;aspect-ratio:16 / 10;background-color:#ececec;background-size:cover;background-position:center;background-repeat:no-repeat;transition:transform .35s ease, filter .35s ease;}
.p-wrap:hover .p-banner{transform:scale(1.02);filter:brightness(0.92);}
.p-wrap:focus-visible{outline:2px solid rgb(232,167,79);outline-offset:4px;} /* keyboard focus ring */
.g1{background-image:url("images/EdgeAI Defect Detection.jpg");} /* same file work.html uses */
.g2{background-image:url("images/Unibots.jpg");}
.g3{background-image:url("images/F24 Gearbox.jpg");}
.g4{background-image:url("images/Digital Clock.jpg");}
.p-desc{font-size:16px;line-height:1.6;color:#555;margin:14px 5px 0;} /* one-line description under each card */

/* ── Footer social links ── */
.f-link{color:inherit;text-decoration:none;margin-left:18px;}
.f-link:hover{text-decoration:underline;}

/* ── Navbar ──
   Sticky white bar. Desktop: links inline, burger hidden.
   Mobile overrides live in the 768px media query below. */
.navbar-menu-toggle{margin:10px 0;padding:5px 10px;display:none;cursor:pointer;}
.navbar-menu-nav{padding:10px 0;display:flex;gap:20px;}
.navbar-menu-nav a{color:inherit;text-decoration:none;cursor:pointer;}
.navbar-menu-nav a:hover{color:rgb(232, 167, 79);} /* accent orange on hover */
.navbar-menu-nav a.nav-active{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px;} /* underline marks the current page */
.navbar-cnt{max-width:950px;margin:0 auto;width:95%;display:flex;justify-content:space-between;flex-wrap:wrap;}
.navbar{background-color:#222;color:#ddd;min-height:50px;width:100%;position:sticky;top:0;z-index:100;}
.navbar-brand{vertical-align:top;display:inline-block;padding:5px;min-height:50px;min-width:50px;color:inherit;text-decoration:none;}
.navbar-items-c{display:inline-block;float:right;}
#topbar{background-color:rgba(255, 255, 255, 1);color:rgba(0, 0, 0, 1);font-weight:500;border-top-color:rgba(226, 226, 226, 1);border-right-color:rgba(226, 226, 226, 1);border-bottom-color:rgba(226, 226, 226, 1);border-left-color:rgba(226, 226, 226, 1);border-bottom-style:solid;border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;font-family:Manrope;} /* the navbar itself (white, thin border) */
#brand-link{display:flex;align-items:center;gap:4px;} /* logo image + "SZK" text side by side */
#brand-img{height:35px;width:auto;display:block;} /* navbar logo — served from images/logo.png; hidden by onerror until uploaded */
#brand-logo{padding:10px;font-weight:700;font-size:30px;} /* "SZK" brand */
#navbar-inner{max-width:1360px;width:96%;align-items:center;} /* keep in sync with .gjs-container */
#menu-toggle{display:none;}  /* burger hidden on desktop */
#menu-icon{width:35px;height:35px;}
#nav-items{display:flex;align-items:center;} /* nav links shown inline on desktop */
#nav-menu{flex-direction:row;align-items:center;}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE LAYER
   ═══════════════════════════════════════════════════════════════════
   Five tiers, each one narrowing the layout further. Every tier only
   states what CHANGES from the tier above it, so rules are never
   repeated and there is exactly one place to edit per breakpoint.

     ≤1300px  small laptop / tablet landscape — 56px side gutter,
                            hero tagline offset starts shrinking
     ≤992px   tablet portrait — 40px gutter, display type steps down
     ≤768px   phone/small tablet — 24px gutter, burger menu, stacking
     ≤600px   phone        — work cards go single column
     ≤400px   small phone  — 18px gutter, smallest type

   Side margins are one variable, --gutter, stepped per tier. Below
   1300px every page swaps its percentage width for 100% + that
   padding, so content and navbar always share one edge. Above 1300px
   the desktop layout is untouched (96% width, capped at 1360px).

   Plus, at the bottom: landscape phones, reduced motion, and
   touch devices (which have no hover).

   The hero tagline is the one piece of the desktop layout that needs
   stepping down early: #tagline-tags is pushed right by a 650px
   margin, which stops fitting once the viewport drops below ~1300px
   and would otherwise be clipped away by #hero's overflow:hidden.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Small laptops & tablet landscape (≤1300px) ──
   Percentage widths leave only ~20px at the edges here, which reads as
   no margin at all; switch to a real gutter for every page and the
   navbar at once. */
@media (max-width: 1300px){
.gjs-container, #navbar-inner, #topbar .navbar-cnt{width:100%;max-width:100%;padding-left:var(--gutter);padding-right:var(--gutter);}
#tagline-tags{margin-left:clamp(0px, calc(100vw - 660px), 650px);} /* scales with the viewport, never off-screen */
}

/* ── Tablet portrait (≤992px): tighter gutter, smaller display text ── */
@media (max-width: 992px){
:root{--gutter:40px;}
#hero-name{font-size:80px;line-height:1.05;margin:60px 0;}
#tagline-link{margin-top:90px;}
#tagline-prefix{font-size:24px;}
#tagline-tags{font-size:26px;}
#work-title, #about-title{font-size:34px;}
#about-intro{font-size:24px;}
.card-title{font-size:30px;left:20px;bottom:10px;}
#contact-headline{font-size:30px;}
#footer-col-contact, #footer-col-copy{flex:0 0 45%;}
}

/* ── Phones & small tablets (≤768px): burger menu, stacked layout ── */
@media (max-width: 768px){
:root{--gutter:24px;--navbar-h:61px;} /* the bar is shorter here — brand text drives its height */
/* Brand hugs the gutter so the logo lines up with the content below */
.navbar-brand{padding:5px 0;}
#brand-logo{padding:10px 0 10px 6px;}
/* Navbar: show burger, collapse links (toggled by the burger script) */
#menu-toggle{display:block;margin:10px 0;padding:5px 0;}
#nav-items{display:none;width:100%;float:none;}
#nav-menu{flex-direction:column;width:100%;gap:0;}
.navbar-menu-nav{width:100%;}
.navbar-menu-nav a{display:block;padding:14px 0;border-top:1px solid #eee;} /* full-width, thumb-sized rows */
/* Hero: stack, centre, and tighten the vertical rhythm */
#hero{padding-top:30px;padding-bottom:40px;min-height:calc(100vh - var(--navbar-h));min-height:calc(100svh - var(--navbar-h));}
#hero-row{flex-direction:column;}
#hero-text-col{flex-basis:auto;display:flex;flex-direction:column;justify-content:center;align-items:center;}
#hero-name{font-size:clamp(44px, 13vw, 72px);line-height:1.05;margin:40px 0 0;text-align:center;}
#tagline-link{flex-direction:column;align-items:center;justify-content:center;width:100%;margin:40px 0 0;padding:10px 0;}
#tagline-prefix{font-size:18px;padding:0 0 6px;text-align:center;}
#tagline-tags{font-size:22px;margin:0;padding:0;text-align:center;} /* clears the desktop 650px offset */
/* Work */
#work-head-row{flex-wrap:wrap;gap:14px;}
#work-title-col{flex-basis:auto;}
#work-row-1, #work-row-2{gap:12px;margin-top:12px;}
.card-title{font-size:26px;left:20px;bottom:12px;}
.p-desc{margin-bottom:14px;}
/* About */
#about-head-row{flex-direction:column;gap:18px;}
#about-text-col{flex-basis:auto;}
#about-intro{font-size:20px;}
#about-more-col{flex:0 1 auto;justify-content:flex-start;}
/* Contact / footer — everything on one left edge (the desktop layout
   right-aligns the social links, which reads as a stray indent here) */
#contact-headline{font-size:28px;display:block;}
#cta-row, #cta-group{justify-content:flex-start;align-items:stretch;}
#social-links{padding:10px 0;text-align:left;}
#footer-row{flex-direction:column;margin-top:50px;}
#footer-row h1{font-size:16px;}
#footer-col-contact, #footer-col-copy{flex:0 0 auto;}
}

/* ── Phones (≤600px): one card per row ── */
@media (max-width: 600px){
#work-row-1, #work-row-2{flex-direction:column;gap:14px;margin-top:14px;}
.work-card{flex-basis:auto;}
.p-banner{aspect-ratio:16 / 9;}
#work-title, #about-title{font-size:30px;}
/* "View More" / "Show More" hug their label; the closing CTA stays a
   full-width-ish block so it reads as the page's main action */
#work-more-btn, #about-more-btn{width:auto;font-size:15px;padding:13px 20px;}
#contact-btn{width:100%;max-width:220px;font-size:16px;padding:14px;}
#contact-headline{font-size:24px;margin-bottom:24px;}
#social-links{font-size:16px;}
}

/* ── Small phones (≤400px): smallest type ── */
@media (max-width: 400px){
:root{--gutter:18px;--navbar-h:55px;}
#brand-logo{font-size:24px;}
#brand-img{height:28px;}
#menu-icon{width:26px;height:26px;}
#hero-name{margin-top:24px;}
#tagline-prefix{font-size:16px;}
#tagline-tags{font-size:18px;}
.card-title{font-size:22px;left:16px;}
#footer-email{font-size:13px;}
}

/* ── Landscape phones ──
   Very little height: let the hero size to its content instead of
   forcing a full viewport, so the tagline isn't pushed off-screen. */
@media (max-height: 500px) and (orientation: landscape){
#hero{min-height:0;padding-top:24px;padding-bottom:32px;}
#hero-name{font-size:44px;margin:10px 0 0;}
#tagline-link{margin-top:18px;}
}

/* ── Touch devices: no hover, so don't rely on it ──
   Hover styles stay for mice; touch gets the same feedback on tap. */
@media (hover: none){
.navbar-menu-nav a:active{color:rgb(232, 167, 79);}
.f-link:active{text-decoration:underline;}
a{-webkit-tap-highlight-color:rgba(232,167,79,0.2);}
/* A tap would otherwise leave the card zoomed in until you tap elsewhere */
.p-wrap:hover .p-banner{transform:none;filter:none;}
.p-wrap:active .p-banner{filter:brightness(0.92);}
}

/* ── Reduced motion: honour the OS setting site-wide ── */
@media (prefers-reduced-motion: reduce){
html{scroll-behavior:auto;}
*{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;}
}