@charset "utf-8";
@import url("webfonts/Khula_SemiBold/stylesheet.css");
@import url("webfonts/Khula_Light/stylesheet.css");
@import url("webfonts/Khula_Regular/stylesheet.css");
@import url("webfonts/Khula_Bold/stylesheet.css");



:root {
  --left-bg:      #B2E0B3;   /* left column */
  --menu-color:   #00B050;   /* menu words */
  --hover-bg:     #00B050;   /* hovered menu item */
  --title-color:  #B2E0B3;   /* selected section title: "same as the left column" */
  --page-margin:  24px;      /* left margin of left column = right margin of right column */
  --top-gap:      14px;      /* top and right spacing of "Francisco Garcia" */
}

.khula-light {
  font-family: "Khula", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.khula-regular {
  font-family: "Khula", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.khula-semibold {
  font-family: "Khula", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.khula-bold {
  font-family: "Khula", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.khula-extrabold {
  font-family: "Khula", sans-serif;
  font-weight: 800;
  font-style: normal;
}


html, body { margin: 0; padding: 0; background: #fff; }
body { font-family: "khula", "Helvetica Neue", Arial, sans-serif; color: #000;}


.fg-wrap {
	display: grid;
	grid-template-columns: 12.4% 1fr;   /* left column | everything else */
	grid-template-rows:auto 1fr;       /* name row | content row */
	column-gap: 4%;
	min-height: 100vh;                  /* left column reaches the bottom of the window */
	margin: 0;
	padding: 0;
}

.fg-left {
	grid-column: 1;
	grid-row: 1 / -1;                   /* spans both rows, so it's always full height */
	background: var(--left-bg);
	position: relative;
	z-index: 3;
	padding-top: 20px;
	box-sizing: border-box;
}

.fg-top {
	grid-column: 2;
	grid-row: 1;
	display: flow-root;                 /* contains the floated .fg-name */
	padding-top: 20px;
	text-align: right;
}

.fg-main {
	grid-column: 2;
	grid-row: 2;
	min-width: 0;
	padding-top: 20px;
	font-family: "Khula Light";
	box-sizing: border-box;
	padding-right: 6%;
}

.fg-main-sect {
	grid-column: 2;
	grid-row: 2;
	min-width: 0;
	padding-top: 20px;
	padding-left: 10%;
	box-sizing: border-box;
	padding-bottom: 4%;
}


.fg-name {
	margin-left: auto;
    margin-right: 2%;
    font-family: "khula light", sans-serif;
	font-weight: 300;
	font-size: 24PX;
	line-height: 1.4;
	white-space: nowrap;
	text-align: right;
	color: #5F5E5E;
}


/* Left-column menu rules moved to fg-menu.css (2026-11-07). */

/* Section bar: icon buttons stacked under the menu; label appears to the right on hover */
.fg-tools { margin-top: 26px; display: flex; flex-direction: column; gap: 14px; }
.fg-tool-wrap { position: relative; }
.fg-tool {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 30px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: #3a3a3a;
  position: relative;
}
.fg-tool svg { width: 24px; height: 24px; }
.fg-tool:hover, .fg-tool:focus-visible, .fg-tool[aria-expanded="true"] { color: #000; outline: none; }
.fg-tip {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 6px;
  white-space: nowrap;
  background: var(--hover-bg);
  color: #fff;
  font-family: "khula", sans-serif;
  font-weight: 600;
  font-size: 10pt;
  padding: 3px 10px;
  border-radius: 3px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
}
.fg-tool:hover .fg-tip, .fg-tool:focus-visible .fg-tip { opacity: 1; }
.fg-flyout {                                /* favorites list */
  position: absolute;
  left: 100%;
  top: 0;
  margin-left: 6px;
  z-index: 6;
}
.fg-tool[aria-expanded="true"] .fg-tip { opacity: 0; }

/* ---------- Right column ---------- */

.fg-section {                               /* the selected section, moved out of the menu */
  margin: 0;
  font-family: "khula", sans-serif;
  font-weight: 600;
  font-size: 24px;
/*  letter-spacing: .02em;*/
  color: var(--title-color);
  line-height: 1.4;
}

/* Sections page: the blockquote right after a .sectiontitles shows on hover or click.
   (Hidden only when scripts run, so Dreamweaver Design view still shows everything.) */
.js .sectiontitles + blockquote { display: none; }
.js .sectiontitles.is-open + blockquote { display: block; }
.sectiontitles.has-more { cursor: pointer; }

#content { flex: 1; }                       /* the empty area below the name */




html {
  font-size: clamp(15px, 0.8rem + 0.38vw, 19px);
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 1rem;
}

h4 {font-family: "khula", "Helvetica Neue", Arial, sans-serif;
    font-weight: 400;
}
[hidden] { display: none !important; }

body {
	/*    margin-top: 10%;*/
	background-color: var(--paper);
	color: var(--ink);
	font-family: khula, "Helvetica Neue", 
        Arial, sans-serif;
	font-weight: 300;
	font-size: 1rem;           /* all other sizes are % / em of this */
    padding:0;
    margin: 0;
}

/* ---------- Standard elements, per the site spec ---------- */
p {
	font-family: 'Khula Light';   /* khula Light (falls back to web khula) */
	/* [disabled]font-weight: 300; */
	font-size: 100%;
	margin: 5pt 0 0;
    line-height: 1.5;
}
h1 {                         /* page titles only */
  font-family: "khula bold", "khula", sans-serif;
  font-size: 120%;
  letter-spacing: .01em;
  margin: 0;
  line-height: 1.25;
}
h2 {                         /* group headings / headings above post titles */
	font-family: "Khula SemiBold";
	/*(font-weight: 400;*/
	font-size: 110%;
	/*	margin: 2rem 0 0;*/
	/*  line-height: 1.3;*/
	/* [disabled]text-decoration: none; */
	padding-left: 0px;
}
h3 {                         /* post titles */
  font-family: 'Khula Regular';        /* khula Regular */
  font-size: 110%;
    font-weight: 300;
/*  line-height: 1.3;*/
}

.fakeh3 {
	font-family: "Khula";
	font-size: 110%;
	font-weight: 400;
	margin-bottom: 0;
	padding-bottom: 0;
	line-height: 1.2;
	margin-top: 0px;
	padding-right: 0px;
}

.resh2 {color: rgba(3,155,6,1.00); border-bottom: dotted; border-bottom-width: 2px; border-bottom-color: hsla(0,1%,52%,1.00); margin-top: 45px;}

.sectiontitles {font-family: "khula"; font-weight: 200; font-size: 115%;}
    
.pageheader {
    margin-left: 0;
    position: relative;
    display: block;
    top: 15px;
    left: 10px;
}

#header a div {
    
}

.middler {
    margin-left: 20%;
}

.title {
    font-size: 120%;
}

#headerdivs {visibility: hidden;
font-family: "khula semibold", "khula", sans-serif;
font-weight: 500;
}
TH {font-family: "khula semibold", "khula", sans-serif;
font-weight: 300;}
thead {font-weight: 300;
}
ul, ol { padding-left: 1.25rem; margin: 7pt 0 0; }
li { font-weight: 300; margin-top: .3rem; }
strong, b { font-weight: 500; }
blockquote { margin: 1rem 0 0; padding: 0 0 0 1rem; border-left: 2px solid var(--rule); }
hr { border: 0; border-top: 1px solid var(--rule); margin: 2rem 0; }
img { max-width: 100%; height: auto; }

a {
	color: var(--accent);
/*
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
*/
}
a:hover { color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

/* ---------- Header ---------- */
#header {
  margin: 3% var(--side) 5pt;
  padding: 0;
  width: auto;               /* = 100% of the space between the side margins */
}


/* ---------- Right column ---------- */
.fg-section {                               /* the selected section, moved out of the menu */
  margin: 0;
    float:left;
  font-family: "khula", sans-serif;
  font-weight: 600;
  font-size: 24px;
  color: var(--title-color);
  line-height: 1.4;
    text-align: left;
}
.fg-name {
	margin-left: auto;
    float:right;
	font-family: "khula light", sans-serif;
	font-weight: 300;
	font-size: 24PX;
	line-height: 1.4;
	white-space: nowrap;
	text-align: right;
	color: #5F5E5E;
}
#content { flex: 1; }                       /* the empty area below the name */



/* 100cqw = page width between the two outer margins */
/**.fg-page {
  --leftw: max(88px, 15cqw);
 width: 12.4%; 
    margin-left: 0;
    float: left;
    display: grid;
  grid-template-columns: var(--leftw) 1fr;
min-height: 100vh;}
/**/


/* =====================================================================
   Responsive (2026-11-07)
   ===================================================================== */

/* Section title and name shrink a little on small screens */
.fg-section, .fg-name { font-size: clamp(17px, 0.9rem + 0.9vw, 24px); }

/* HTML resume: company / role on the left, dates on the right.
   The text scales with the column width so the two never collide and the date never wraps.
   On a phone-width column the date moves under the role instead. */
.fg-main { container-type: inline-size; }
.job > table td:first-child { padding-right: 1.25em; }
.job > table .when { white-space: nowrap; }
.job > table .fakeh3,
.job > table .when { font-size: clamp(12px, 2.45cqi, 1.1rem); }
@container (max-width: 430px) {
  .job > table, .job > table tbody, .job > table tr, .job > table td { display: block; width: auto; }
  .job > table td { text-align: left; white-space: normal; padding-right: 0; }
  .job > table .when { display: block; margin-top: 2pt; }
}

/* Tables with a fixed pixel width (e.g. the contact table) fit the column on small screens */
.fg-main table[width]:not([width="100%"]) { width: auto; max-width: 100%; }
.fg-main table[width]:not([width="100%"]) td { overflow-wrap: anywhere; }

/* Page bar (posts page): buttons wrap to a second row instead of running off a phone screen */
#pagebar .toolbar { flex-wrap: wrap; row-gap: .25rem; }
#pagebar .tool-group { flex-wrap: wrap; }
@media (max-width: 640px) { .pageheader { left: 0; } }