/* ------------------------------
   Design tokens & base
   ------------------------------ */

/* 1) Root variables for easy theming */
:root {
  --bg: #ffffff;
  --text: #222222;
  --muted: #444444;
  --brand: #0066FF;
  --border: #CCCCCC;

  /* Type scale */
  --size-100: 0.875rem;
  --size-200: 1rem;
  --size-300: 1.125rem;
  --size-400: 1.25rem;
  --size-500: 1.5rem;
  --size-550: 1.75rem;
  --size-600: 2rem;

  /* Container */
  --container: 78ch;
  --gutter: 1rem;
  
  /* #navigation width */
  --nav-width: 8rem;
}

/* 2) Fluid root font-size; replaces body font scaling */
html { 
  /* 18px → 20px between ~250–750px viewport; then capped at 20px */
  font-size: clamp(18px, 17px + 0.4vw, 20px);
}

/* Base body — no max-width and no body font scaling */
body {
  background-color: var(--bg);
  color: var(--text);
  font-family: 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  line-height: 1.45;
  transition: background-color 0.2s;
  margin: 0;
}

/* Links pick up tokens */
a {
  color: var(--muted);
  text-decoration: none;
}
a:hover { color: #666; }

h1 {
  margin: 0.67rem 0;
  font-weight: 300;
  font-size: clamp(2rem, 1.4rem + 2vw, 2.5rem); /* fluid, capped by html clamp */
}

/* Display title used on the page */
.header {
  font-family: 'EB Garamond', serif;
  color: var(--text);
  font-size: var(--size-550);
  letter-spacing: 0.005em;
  padding-left: 0;
  margin: 1.6rem 0;
}


/* local nav tokens (scoped) */
#navigation {
  --nav-fg: #444444;
  --nav-fg-strong: #333333;
  --nav-border: #CCCCCC;
  --nav-border-hover: #0066FF;

  position: fixed;
  height: auto;
  top: 8.0rem;
  left: 0;
  width: var(--nav-width);
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.0;
  color: var(--nav-fg);
  padding: 0;
  overflow: hidden;
  z-index: 50;
}

#navigation a {
  color: var(--nav-fg);
  text-decoration: none;
  display: block;
  border-width: 2pt;
  border-top-style: dotted;
  border-top-color: var(--nav-border);
  border-bottom-color: var(--nav-border);
}

#navigation a:hover {
  color: #777; /* keep your exact hover tone */
  border-top-color: var(--nav-border-hover);
  border-bottom-color: var(--nav-border-hover);
}


/* list reset */
#navigation-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

/* list link styling */
#navigation-list li a {
  text-decoration: none;
  color: var(--nav-fg-strong);
  display: block;
  padding: .5rem 0 .65rem .5rem;
}

#menubutton {
  display: none;
  }
#closebutton {
  display: none;
}


#content {
  position: relative;
  top: 0;
  left: 0;                     /* no absolute shove */

  margin: 3.7rem auto 0;
  padding: 0 var(--gutter) 20px var(--gutter);

  max-width: var(--container);
  overflow: visible;          /* avoids unwanted inner scrollbars */
}

/* Desktop: leave room for the fixed left nav */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
  #content {
    /* push content to the right of the nav, plus a gutter */
    margin-left: calc(var(--nav-width) + var(--gutter));
    margin-right: var(--gutter);
  }
}

#whatsapp {
  display: none;
}
#ipcheck {
  display: none;
}

/* Scrim sits behind the drawer and catches clicks */
#scrim {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0);     /* invisible when closed */
  pointer-events: none;           /* no clicks when closed */
  transition: background .2s ease;
  z-index: 49;                    /* under #navigation (50) */
}

/* When menu is open, we’ll add a class to body to activate the scrim */
.body--nav-open #scrim {
  background: rgba(0,0,0,0.5);
  pointer-events: auto;
}

/* Ensure the drawer stays above scrim */
#navigation { z-index: 50; }  /* already present, keep it that way */


@media (max-width: 1200px) {
  body {
	max-width: unset;
  }
  #navigation {
    width: 0;
    background-color: #ffffff;
    display: block;
    height : 100%;
    top : 0px;
    left : 0;
	font-size: 1.2em;
    color : #444444;
    padding-top : 120px;
    overflow : hidden;
    overflow-x: hidden;
    transition: 0.2s;
    z-index: 50;
  }
  #menubutton {
    font-size: 45px;
    cursor: pointer;
    background-color: #ffffff;
    position: fixed;
    top: 0;
    left: 4px;
    padding: 2px;
    display: block;
    z-index: 10;
  }
  #closebutton {
    font-size: 50px;
    font-weight: bold;
    cursor: pointer;
    background-color: #ffffff;
    position: fixed;
    top: 0;
    left: 4px;
    padding: 2px;
    display: none;
    z-index: 51;
  }
  #content {
    position : relative;
    top: 0;
    left: 0px;
    margin : 50px 0px 0px 0px;
    max-width : unset;
    z-index: 1;
  }
  #whatsapp {
	margin-top: 50px;
	width: 70px;
    height: 70px;
    display: block;
  }
}
@media (min-resolution: 192dpi) {
  body {
	max-width: unset;
  }

  #navigation {
    width: 0;
    background-color: #ffffff;
    display: block;
    height : 100%;
    top : 0px;
    left : 0;
	font-size: 1.1em;
	line-height: 1.4;
    color : #444444;
    padding-top : 220px;
    overflow : hidden;
    overflow-x: hidden;
    transition: 0.2s;
    z-index: 50;
  }
  #menubutton {
    font-size: 90px;
    cursor: pointer;
    background-color: #ffffff;
    position: fixed;
    top: 0;
    left: 4px;
    padding: 4px;
	padding-right: 14px;
    display: block;
    z-index: 10;
  }
  #closebutton {
    font-size: 100px;
    font-weight: bold;
    cursor: pointer;
    background-color: #ffffff;
    position: fixed;
    top: 0;
    left: 4px;
    padding: 2px;
    display: none;
    z-index: 51;
  }
  #content {
    position : relative;
    top: 0;
    left: 0px;
    margin : 50px 0px 0px 0px;
    max-width : unset;
    z-index: 1;
  }
  #whatsapp {
	margin-top: 60px;
	width: 100px;
    height: 100px;
    display: block;
  }
}
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) {
  #ipcheck {
  position : fixed;
  height : auto;
  top : 260px;
  left : 0;
  width : auto;
  margin : 0px 0px 0px 0px;
  font-size: 3em;
  line-height: 1.0;
  color : red;
  padding : 0px;
  overflow : hidden;
  z-index: 150;
  display: block;
  }
}