/*
  ====================================================
  Izu – layered stylesheet 0.0.4
  ----------------------------------------------------
  • Adds rich pseudo‑selector states (hover, focus‑visible, active)
  • Custom list‑marker colouring via ::marker
  • Keeps responsive container logic from 0.0.3
  ====================================================
*/

/* --------------------  TOKENS  -------------------- */
@layer tokens {
  :root {
    /* colours */
    --bg:              #1d1d1d;
    --fg:              #ffffff;
    --link:            #ffffff;
    --link-hover:      #3dff3d;
    --link-focus:      #00c6ff;
    --link-active:     #ffea00;

    /* typefaces */
    --font-body: "W95", system-ui, sans-serif;
    --font-head: "FSEX300", "W95", sans-serif;

    /* rhythm */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2rem;

    /* layout */
    --nav-width-desktop: 300px;
    --nav-width-tablet:  260px;
  }

  @font-face {
    font-family: "W95";
    src: url("/W95FA.otf") format("opentype");
    font-display: swap;
  }
  @font-face {
    font-family: "FSEX300";
    src: url("/FSEX300.ttf") format("truetype");
    font-display: swap;
  }
}

/* --------------------  RESET  -------------------- */
@layer reset {
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
  img{display:block;max-width:100%;height:auto;}
  ul{list-style:square;margin:0;padding:0;}
  a{text-decoration:none;color:inherit;}
}

/* --------------------  BASE  -------------------- */
@layer base {
  html{height:100%;}
  body{
    min-height:100%;
    font-family:var(--font-body);
    color:var(--fg);
    background:var(--bg);
    display:flex;
  }
  h1,h2,h3{font-family:var(--font-head);line-height:1.1;}
  p{line-height:1.45;margin-block:var(--space-2);}  
}

/* --------------------  LAYOUT  -------------------- */
@layer layout {
  main{
    flex:0 0 var(--nav-width-desktop);
    padding:var(--space-3);
  }
  aside{
    flex:1;
    background:url("/izu.hero-1.png") center/cover no-repeat;
    clip-path:ellipse(46% 50% at center center);
  }

  /* TABLET (portrait & landscape) */
  @media (max-width:1024px){
    main{flex:0 0 var(--nav-width-tablet);}
    .header-brand img{height:72px;}
  }

  /* PHONE */
  @media (max-width:700px){
    body{flex-direction:column;}
    main{flex:0 0 auto;padding:var(--space-3) var(--space-4);}   /* full‑width nav on top */
    aside{
      order:-1;                     /* hero first */
      height:50vh;
      clip-path:none;
      border-radius:0;
    }
    nav ul{display:flex;flex-wrap:wrap;gap:var(--space-2);list-style:none;padding-left:0;}
    nav li{flex:1 1 45%;}
    nav a{display:block;padding:var(--space-1) 0;text-align:center;}
  }
}

/* --------------------  COMPONENTS  -------------------- */
@layer components {
  /* Header */
  .site-header{margin-bottom:var(--space-4);} /* if class added in markup */
  .header-brand{
    display:flex;
    align-items:center;
    gap:var(--space-3);
    margin-bottom:var(--space-2);
  }
  .header-brand img{height:90px;width:auto;}

  /* Nav */
  nav ul{padding-left:var(--space-2);margin-block:var(--space-1) var(--space-4);} 
  nav li::marker{color:var(--link-hover);}                                   /* pseudo‑selector marker */
  nav a{
    position:relative;                       /* enables ::after underline */
    color:var(--link);
    transition:color .15s ease;
  }
  nav a:hover{color:var(--link-hover);}                                      /* :hover state */
  nav a:focus-visible{outline:none;color:var(--link-focus);}                 /* :focus-visible for keyboard */
  nav a:active{color:var(--link-active);}                                    /* :active click state */
  nav a::after{                                                              /* underline grows on hover/focus */
    content:"";
    position:absolute;
    left:0;bottom:-2px;
    width:0;height:2px;
    background:var(--link-hover);
    transition:width .15s ease;
  }
  nav a:hover::after,
  nav a:focus-visible::after{width:100%;}

  /* Footer Social Links */
  footer{margin-top:var(--space-4);} 
  .social-links{padding-left:var(--space-2);}  /* ensure markup uses .social-links */
  .social-links li::marker{color:var(--link-hover);}                         /* coloured markers */
  .social-links a{color:var(--link);transition:color .15s ease;}
  .social-links a:hover{color:var(--link-hover);}  
  .social-links a:focus-visible{outline:1px dashed var(--link-focus);}        /* focus ring */
}

/* --------------------  UTILITIES  -------------------- */
@layer utilities {
  .visually-hidden{
    position:absolute !important;
    height:1px;width:1px;
    overflow:hidden;clip:rect(1px,1px,1px,1px);
    white-space:nowrap;
  }
}

#about {display: none;}
#works {display: none;}
#store {display: none;}
#social {display: none;}
#blog {display: none;}
#contact {display: none;}