/* =========================================================
   1. COLORS (3 main colors + neutrals)
   ========================================================= */
:root{
  --ink:#171818;     /* dark: text on light, dark sections */
  --paper:#dcdad3;   /* light: concrete grey               */
  --accent:#2c3dd9;  /* cobalt: Work section, hover states */
  --muted:#7d7d78;
  --font:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --nav:52px;        /* navbar height */
  --pad:20px;        /* side padding, grows on larger screens */
  --max:1760px;      /* content max width on very large screens */
  --gutter:max(var(--pad),env(safe-area-inset-left),calc((100vw - var(--max)) / 2 + var(--pad)));
  --rule:2px;
}

/* =========================================================
   2. HERO BACKGROUND (desktop + mobile)  — customize here
   ---------------------------------------------------------
   TWO IMAGES (put them in the "assets" folder):
     assets/background-desktop.jpg  landscape, e.g. 1920x1080
     assets/background-mobile.jpg   portrait,  e.g. 1080x1920
   The portrait image is used on phones and upright tablets
   (any screen taller than it is wide). The landscape image is
   used on laptops, desktops and phones held sideways.
   Paths are relative to THIS css file, hence "../assets/".

   HOW TO MOVE THE PICTURE
   The image always fills the hero ("cover") without stretching,
   so some of it is cropped. Position = "x y":
     0% = left / top,  50% = center,  100% = right / bottom
   - Portrait image on a phone: edges are cropped LEFT/RIGHT,
     so change the FIRST number (e.g. "30% 50%" shows more of
     the left side, "70% 50%" more of the right).
   - Landscape image on a wide screen: edges are cropped
     TOP/BOTTOM, so change the SECOND number (e.g. "50% 30%").
   ========================================================= */
:root{
  --background-image-desktop: url('../assets/bg-desktop.jpg');
  --background-image-mobile:  url('../assets/bg-mobile.jpg');

  /* POSITION PER SCREEN TYPE — edit these */
  --bg-pos-desktop: 50% 50%;  /* laptops and desktops */
  --bg-pos-large:   50% 50%;  /* very large monitors (1600px wide and up) */
  --bg-pos-tablet:  50% 50%;  /* tablets held upright (600px wide and up) */
  --bg-pos-mobile:  50% 50%;  /* phones held upright (under 600px wide) */

  --background-size: cover;   /* keep "cover": fills the hero, never stretched */
  --background-blur: 0px;     /* e.g. 4px for a soft blur */

  /* OVERLAY: flat color above the image. Raise opacity if text is hard to read */
  --overlay-color: #171818;
  --overlay-opacity-desktop: .75;
  --overlay-opacity-mobile:  .72;

  /* active values, switched by the media queries below (normally leave alone) */
  --background-image: var(--background-image-desktop);
  --background-position: var(--bg-pos-desktop);
  --overlay-opacity: var(--overlay-opacity-desktop);
}
@media (min-width:1600px){
  :root{--background-position:var(--bg-pos-large)}
}
@media (orientation:portrait){            /* phones and upright tablets */
  :root{--background-image:var(--background-image-mobile);--background-position:var(--bg-pos-mobile);--overlay-opacity:var(--overlay-opacity-mobile)}
}
@media (orientation:portrait) and (min-width:600px){   /* upright tablets */
  :root{--background-position:var(--bg-pos-tablet)}
}

/* =========================================================
   3. BASE (mobile first)
   ========================================================= */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav);overflow-x:clip;-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:var(--paper);color:var(--ink);font-size:1.05rem;line-height:1.55;overflow-x:clip;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(44,61,217,.2)}
body.lock{overflow:hidden}
a{color:inherit}
button{font-family:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.on-dark :focus-visible,.top :focus-visible,.menu :focus-visible{outline-color:var(--paper)}
::selection{background:var(--accent);color:var(--paper)}
.wrap{padding-inline:var(--gutter)}
.sec-title{font-weight:800;font-stretch:80%;letter-spacing:-.045em;line-height:.85}

/* ---------- Navbar ---------- */
.top{position:fixed;top:0;left:0;right:0;z-index:20;height:var(--nav);display:flex;justify-content:space-between;align-items:center;padding-inline:var(--gutter);background:transparent;color:var(--paper);border-bottom:1px solid transparent;transition:background .3s,border-color .3s}
.top.scrolled,body.open .top{background:var(--ink);border-bottom-color:rgba(220,218,211,.28)}
.brand{display:flex;align-items:center;min-height:44px;text-decoration:none;font-weight:700;letter-spacing:-.01em}
.burger{display:flex;align-items:center;gap:.7rem;min-height:44px;min-width:44px;justify-content:flex-end;background:none;border:0;color:inherit;font-weight:600;font-size:.95rem;cursor:pointer}
.bars{display:grid;gap:6px;width:28px}
.bars i{display:block;height:2px;background:currentColor;transform-origin:center;transition:transform .35s,width .3s}
.bars i:last-child{width:60%;margin-left:auto}
body.open .bars i:first-child{transform:translateY(4px) rotate(45deg)}
body.open .bars i:last-child{width:100%;transform:translateY(-4px) rotate(-45deg)}

/* ---------- Menu: drops down from under the navbar ---------- */
.backdrop{position:fixed;inset:var(--nav) 0 0 0;z-index:18;background:rgba(23,24,24,.5);opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s}
.menu{position:fixed;top:var(--nav);left:0;right:0;z-index:19;max-height:calc(100vh - var(--nav));max-height:calc(100svh - var(--nav));overflow-y:auto;background:var(--ink);color:var(--paper);clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .45s cubic-bezier(.65,0,.25,1),visibility 0s .45s}
.menu ul{list-style:none;padding-bottom:.6rem}
.menu li{border-top:1px solid rgba(220,218,211,.28);opacity:0;transform:translateY(-8px);transition:opacity .3s,transform .4s}
.menu a{display:flex;align-items:center;min-height:60px;padding-inline:var(--gutter);text-decoration:none;font-weight:700;font-stretch:85%;font-size:clamp(1.7rem,7vw,2.6rem);letter-spacing:-.03em;line-height:1.1;transition:background .2s,padding .25s}
body.open .backdrop{opacity:1;visibility:visible;transition-delay:0s}
body.open .menu{clip-path:inset(0);visibility:visible;transition-delay:0s}
body.open .menu li{opacity:1;transform:none;transition-delay:calc(.15s + var(--i) * .05s)}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;padding-top:var(--nav);color:var(--paper);background:var(--overlay-color);overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:calc(var(--background-blur) * -2);z-index:-2;background-image:var(--background-image);background-position:var(--background-position);background-size:var(--background-size);background-repeat:no-repeat;filter:blur(var(--background-blur))}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--overlay-color);opacity:var(--overlay-opacity)}
.hero-meta{display:flex;justify-content:space-between;padding-block:1rem;font-size:.95rem;font-weight:500}
.name{font-weight:800;font-stretch:80%;letter-spacing:-.05em;line-height:.8}
.name .a{display:block;font-size:clamp(3.6rem,22vw,22rem);margin-left:-.04em}
.name .b{display:block;font-size:clamp(2.3rem,12vw,12rem);margin-left:clamp(24px,30vw,36rem);font-weight:300;margin-top:.04em}
.hero-bottom{display:grid;gap:1.3rem;border-top:var(--rule) solid var(--paper);margin-top:1.6rem;padding-block:1.2rem 1.6rem}
.hero-bottom h1{font-size:clamp(1.2rem,5vw,1.9rem);line-height:1.15;font-weight:600;letter-spacing:-.015em;max-width:24ch}
.cta{display:flex;align-items:center;justify-content:center;min-height:52px;padding:.9rem 1.5rem;font-weight:700;text-decoration:none;background:var(--paper);color:var(--ink);border:var(--rule) solid var(--paper);transition:background .2s,color .2s}

/* ---------- About ---------- */
#about{padding-block:3.5rem 4rem}
.about{display:grid;gap:1.2rem}
.about .sec-title{font-size:1.6rem;font-stretch:100%;font-weight:700;letter-spacing:-.02em;border-top:var(--rule) solid var(--ink);padding-top:.8rem}
.statement{font-size:clamp(2rem,9.5vw,5.4rem);line-height:.98;font-weight:700;font-stretch:82%;letter-spacing:-.04em;max-width:14ch}
.about .sub{margin-top:1.4rem;max-width:42ch;font-size:1.1rem;color:#3b3c3a}
.facts{margin-top:2.4rem;max-width:640px}
.facts div{display:grid;grid-template-columns:6.5rem 1fr;padding:.85rem 0;border-top:1px solid var(--ink)}
.facts div:last-child{border-bottom:1px solid var(--ink)}
.facts dt{color:#55554f;font-weight:500}
.facts dd{font-weight:600}

/* ---------- Projects ---------- */
#projects{background:var(--ink);color:var(--paper);padding-block:3rem 4rem}
#projects .sec-title{font-size:clamp(3.2rem,17vw,16rem);margin-left:-.04em}
.list{list-style:none;margin-top:2rem;border-top:var(--rule) solid currentColor}
.row a,.row>div{display:grid;gap:.3rem;padding:1.2rem 0;border-bottom:1px solid currentColor;text-decoration:none;transition:padding .25s,background .2s}
.row .t{font-size:clamp(1.5rem,6vw,2.6rem);font-weight:700;font-stretch:85%;letter-spacing:-.03em;line-height:1.05}
.row .m{opacity:.75}
.empty{margin-top:2rem;display:flex;align-items:flex-start;gap:1rem;border-top:var(--rule) solid currentColor;padding-top:1.4rem}
.empty p{font-size:clamp(1.6rem,7vw,3.4rem);line-height:1.04;font-weight:300;font-stretch:85%;letter-spacing:-.03em;max-width:20ch}
.empty .sq{flex:none;width:clamp(32px,9vw,84px);aspect-ratio:1;border:var(--rule) solid currentColor;margin-left:auto;margin-top:.3rem}

/* ---------- Work ---------- */
#work{background:var(--accent);color:var(--paper);padding-block:3rem 4rem}
.work{display:grid;gap:1.6rem}
.work .sec-title{font-size:clamp(3.2rem,15vw,13rem)}
#work .empty{margin-top:0}
#work .empty p{font-weight:400}
#work .list{margin-top:0}

/* ---------- Social ---------- */
#social{padding-block:3.5rem 3rem}
#social .sec-title{font-size:clamp(2.4rem,11vw,8rem)}
.socials{list-style:none;margin-top:2rem;border-top:var(--rule) solid var(--ink)}
.soc{display:grid;grid-template-columns:1fr auto;gap:.1rem 1rem;align-items:center;min-height:72px;padding:1rem 0;border-bottom:1px solid var(--ink);text-decoration:none;transition:background .2s,color .2s,padding .25s}
.soc .n{font-size:clamp(2rem,9vw,4.6rem);font-weight:800;font-stretch:80%;letter-spacing:-.04em;line-height:1}
.soc .u{grid-column:1;color:#55554f;font-weight:500;word-break:break-all}
.soc svg{grid-column:2;grid-row:1/3;width:32px;height:32px;fill:currentColor}
.soc[data-todo] .u::after{content:" (placeholder)";opacity:.7}

/* ---------- Copyright ---------- */
footer{padding-block:1.5rem 1.6rem}
footer p{border-top:1px solid var(--ink);padding-top:1.1rem;font-size:.8rem;color:#55554f}

/* ---------- Hover only on devices that really hover ---------- */
@media (hover:hover){
  .burger:hover i:last-child{width:100%}
  .menu a:hover{background:var(--accent);padding-left:calc(var(--gutter) + 14px)}
  .cta:hover{background:transparent;color:var(--paper)}
  a.row-link:hover{padding-left:1rem;background:var(--accent)}
  .soc:hover{background:var(--ink);color:var(--paper);padding-inline:1rem}
  .soc:hover .u{color:var(--paper)}
}
.menu a:active{background:var(--accent)}
.soc:active{background:var(--ink);color:var(--paper)}

/* =========================================================
   4. TABLET (768px and up)
   ========================================================= */
@media (min-width:768px){
  :root{--pad:40px;--nav:56px}
  .hero-bottom{grid-template-columns:7fr 5fr;gap:var(--pad);align-items:end;margin-top:2.4rem;padding-block:1.4rem 2.2rem}
  .hero-bottom h1{max-width:20ch}
  .cta{display:inline-flex;justify-self:start;order:-1}
  .facts div{grid-template-columns:9rem 1fr}
  .row a,.row>div{grid-template-columns:5fr 4fr 3fr;gap:1rem;align-items:baseline;padding:1.4rem 0}
  .soc{grid-template-columns:5fr 5fr auto;gap:1rem}
  .soc .u{grid-column:2;grid-row:1}
  .soc svg{grid-column:3;grid-row:1}
  #about{padding-block:5rem 6rem}
  #projects,#work{padding-block:4.5rem 5.5rem}
  #social{padding-block:5rem 4rem}
  footer{padding-block:2rem 2rem}
}

/* =========================================================
   5. LAPTOP / DESKTOP (1024px and up)
   ========================================================= */
@media (min-width:1024px){
  :root{--pad:64px}
  .about{grid-template-columns:3fr 9fr;gap:var(--pad)}
  .about .sec-title{font-size:2.2rem;margin-bottom:0}
  .work{grid-template-columns:7fr 5fr;gap:var(--pad)}
  .work .sec-title{grid-column:2;grid-row:1;text-align:right;margin-right:-.03em}
  .work .body{grid-column:1;grid-row:1;align-self:end}
  .hero-bottom{padding-bottom:2.8rem}
  #about{padding-block:8rem 9rem}
  #projects,#work{padding-block:6rem 7rem}
  #social{padding-block:6rem 5rem}
}

/* =========================================================
   6. LARGE SCREENS (1600px and up)
   ========================================================= */
@media (min-width:1600px){
  :root{--pad:80px}
  html{font-size:112.5%}
}

/* Short landscape phones: keep the hero from stretching */
@media (max-height:480px) and (orientation:landscape){
  .hero{min-height:0}
  .hero-bottom{margin-top:1rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important}
}