@charset "utf-8";
/*
Site: de Carvalho Bueno — personal / academic site
File: Framework CSS  (reset, tokens, grid, utilities)

Originally based on the "Ligerrat" template by OS Templates.
Rebuilt 2026 as a responsive, token-driven layer. Class names from the
original template are preserved so existing markup keeps working.
*/

/* fontawesome-4.5.0.min.css is linked directly from each page — see the note
   at the top of layout.css for why the @import chain was removed. */

/* ============================================================================
   Design tokens
   ========================================================================= */
:root{
  /* Brand — built around the site's signature slate blue #6785b8 */
  --brand-050:#f3f6fb;
  --brand-100:#e5ecf6;
  --brand-200:#c8d6ea;
  --brand-300:#a5bbdb;
  --brand-400:#849ec8;
  --brand-500:#6785b8;   /* primary */
  --brand-600:#526d9c;
  --brand-700:#41567b;
  --brand-800:#2f3e59;
  --brand-900:#1d2739;

  /* Neutrals */
  --ink:#1b2230;          /* headings */
  --body:#4b5563;         /* body copy */
  --muted:#6b7480;        /* secondary text */
  --line:#e3e8f0;         /* hairlines */
  --line-strong:#cbd4e1;
  --surface:#ffffff;
  --surface-alt:#f6f8fc;
  --surface-dark:#12161d;
  --surface-darker:#0c0f14;

  /* Typography */
  --font-sans:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --font-script:'Freestyle Script','Segoe Script',cursive;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Consolas,"Liberation Mono",monospace;

  /* Fluid type scale */
  --step--1:clamp(.78rem,.75rem + .15vw,.86rem);
  --step-0 :clamp(.94rem,.9rem + .2vw,1.02rem);
  --step-1 :clamp(1.06rem,1rem + .3vw,1.2rem);
  --step-2 :clamp(1.25rem,1.15rem + .5vw,1.5rem);
  --step-3 :clamp(1.5rem,1.3rem + .9vw,2rem);
  --step-4 :clamp(1.85rem,1.5rem + 1.5vw,2.7rem);
  --step-5 :clamp(2.2rem,1.7rem + 2.4vw,3.6rem);

  /* Space */
  --sp-1:.25rem; --sp-2:.5rem;  --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.5rem; --sp-6:2rem;   --sp-7:3rem;   --sp-8:4rem; --sp-9:6rem;

  /* Shape + depth */
  --radius-sm:6px;
  --radius:12px;
  --radius-lg:18px;
  --radius-pill:999px;
  --shadow-xs:0 1px 2px rgba(16,24,40,.05);
  --shadow-sm:0 2px 6px rgba(16,24,40,.06),0 1px 2px rgba(16,24,40,.04);
  --shadow-md:0 8px 24px rgba(16,24,40,.08),0 2px 6px rgba(16,24,40,.04);
  --shadow-lg:0 18px 45px rgba(16,24,40,.12),0 4px 12px rgba(16,24,40,.06);

  /* Layout */
  --shell:1180px;
  --gutter:clamp(1rem,4vw,2.5rem);
  --ease:cubic-bezier(.4,0,.2,1);
}

/* ============================================================================
   Reset
   ========================================================================= */
*,*::before,*::after{box-sizing:border-box;}

html{
  overflow-y:scroll;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:90px;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important;}
}

html,body{
  margin:0;
  padding:0;
  font-size:16px;
  line-height:1.7;
}

body{
  font-family:var(--font-sans);
  font-size:var(--step-0);
  color:var(--body);
  background-color:var(--surface);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-wrap:break-word;
}

img,svg,video,canvas,iframe{max-width:100%;}
img,svg,video,canvas{height:auto;}
img{width:auto; border:none; vertical-align:middle;}

a{color:var(--brand-600); text-decoration:none; outline:none;}
a:hover{color:var(--brand-700);}

/* Visible focus for keyboard users only */
:focus-visible{
  outline:3px solid var(--brand-400);
  outline-offset:2px;
  border-radius:3px;
}

/* ============================================================================
   Typography
   ========================================================================= */
h1,h2,h3,h4,h5,h6,.heading{
  margin:0 0 var(--sp-4) 0;
  font-family:var(--font-serif);
  font-weight:600;
  line-height:1.2;
  letter-spacing:-.015em;
  color:var(--ink);
}
h1{font-size:var(--step-4);}
h2{font-size:var(--step-3);}
h3{font-size:var(--step-2);}
h4{font-size:var(--step-1);}
h5,h6,.heading{font-size:var(--step-1);}

p{margin:0 0 var(--sp-4) 0;}
p:last-child{margin-bottom:0;}

strong,b{font-weight:650; color:var(--ink);}
small{font-size:var(--step--1);}
address{font-style:normal; font-weight:normal;}

blockquote{margin:0; padding:0;}

hr{
  display:block;
  width:100%;
  height:1px;
  margin:var(--sp-7) 0;
  border:0;
  background:linear-gradient(90deg,transparent,var(--line-strong),transparent);
}

ul,ol{margin:0 0 var(--sp-4) 0; padding-left:1.4em;}
li{margin-bottom:.35em;}
li:last-child{margin-bottom:0;}
ol{list-style-type:decimal;}

code,kbd,samp,pre{font-family:var(--font-mono); font-size:.9em;}

/* ============================================================================
   Utilities (kept from the original template API)
   ========================================================================= */
.bold{font-weight:700;}
.center{text-align:center;}
.right{text-align:right;}
.uppercase{}
.capitalise{text-transform:capitalize;}
.hidden{display:none;}
.nospace{margin:0; padding:0; list-style:none;}
.block{display:block;}
.inline *{display:inline-block;}
.inline *:last-child{margin-right:0;}
.pushright li{margin-right:var(--sp-4);}
.pushright li:last-child{margin-right:0;}
.borderedbox{border:1px solid var(--line); border-radius:var(--radius); background-clip:padding-box;}
.overlay{position:relative; z-index:1;}
.overlay::after{display:block; position:absolute; inset:0; content:""; z-index:-1;}
.bgded{background-position:center; background-repeat:no-repeat; background-size:cover;}
.circle{border-radius:50%; background-clip:padding-box;}

.clear::before,.clear::after{display:table; content:"";}
.clear::after{clear:both;}
.clear{display:block;}

.fl_left{float:left;}
.fl_right{float:right;}

.imgl,.imgr{
  display:block;
  border-radius:var(--radius);
  margin-bottom:var(--sp-4);
}
.imgl{float:left; margin-right:var(--sp-5); clear:left;}
.imgr{float:right; margin-left:var(--sp-5); clear:right;}

.font-xs{font-size:var(--step--1);}
.font-x1{font-size:var(--step-1);}
.font-x2{font-size:var(--step-2);}
.font-x3{font-size:var(--step-4);}

.wrapper{display:block; width:100%; margin:0; padding:0; text-align:left; word-wrap:break-word;}

/* Centred page shell */
.hoc{display:block; width:100%; max-width:var(--shell); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter);}

/* Screen-reader only */
.visually-hidden{
  position:absolute !important;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

/* ============================================================================
   Forms
   ========================================================================= */
form,fieldset,legend{margin:0; padding:0; border:none;}
legend{display:none;}
label,input,textarea,select,button{
  display:block; resize:none; outline:none;
  color:inherit; font-size:inherit; font-family:inherit;
  vertical-align:middle;
}
label{margin-bottom:var(--sp-2); font-weight:600; color:var(--ink);}
:required,:invalid{outline:none; box-shadow:none;}
button{cursor:pointer; border:none; background:none;}

/* ============================================================================
   HTML5 element defaults
   ========================================================================= */
address,article,aside,figcaption,figure,footer,header,main,nav,section{
  display:block; margin:0; padding:0; font-size:inherit; text-align:left;
}

/* ============================================================================
   Grid
   ---------------------------------------------------------------------------
   The legacy float grid is replaced by a wrapping flex grid. Any direct child
   of a grid container defaults to full width, so loose <p>/<h*> siblings that
   sit next to column divs in the existing markup still behave sensibly.
   ========================================================================= */
.group,
ul.elements,
#gallery > ul,
#gallery figure > ul{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-6) 3%;
  align-items:flex-start;
}

/* Neutralise the legacy clearfix pseudo-elements inside flex containers —
   otherwise they become phantom flex items. */
.group::before,.group::after,
ul.elements::before,ul.elements::after,
#gallery > ul::before,#gallery > ul::after,
#gallery figure > ul::before,#gallery figure > ul::after{
  content:none; display:none;
}

.group > *,
ul.elements > *,
#gallery > ul > *,
#gallery figure > ul > *{
  flex:0 1 100%;
  min-width:0;   /* lets long words/tables shrink instead of overflowing */
}

.one_quarter,.one_third,.two_third,.one_half,.two_quarter,.three_quarter{
  display:block;
  float:none;
  margin:0;
  list-style:none;
  min-width:0;
}

.group > .one_quarter,       ul.elements > .one_quarter,       #gallery ul > .one_quarter      {flex-basis:calc((100% - 9%) / 4);}
.group > .one_third,         ul.elements > .one_third,         #gallery ul > .one_third        {flex-basis:calc((100% - 6%) / 3);}
.group > .one_half,          ul.elements > .one_half,          #gallery ul > .one_half         {flex-basis:calc((100% - 3%) / 2);}
.group > .two_quarter,       ul.elements > .two_quarter,       #gallery ul > .two_quarter      {flex-basis:calc((100% - 3%) / 2);}
.group > .two_third,         ul.elements > .two_third,         #gallery ul > .two_third        {flex-basis:calc(((100% - 6%) / 3) * 2 + 3%);}
.group > .three_quarter,     ul.elements > .three_quarter,     #gallery ul > .three_quarter    {flex-basis:calc(((100% - 9%) / 4) * 3 + 6%);}

/* Outside a grid container the legacy widths still apply as a fallback */
.one_quarter{width:22.6%;}
.one_third{width:31.3%;}
.one_half,.two_quarter{width:48.5%;}
.two_third{width:65.6%;}
.three_quarter{width:74.2%;}
.group > *, ul.elements > *, #gallery ul > *{width:auto;}

.first{clear:none;}

/* Tablet — four and three column rows fold to two */
@media screen and (max-width:900px){
  .group > .one_quarter, ul.elements > .one_quarter, #gallery ul > .one_quarter,
  .group > .one_third,   ul.elements > .one_third,   #gallery ul > .one_third,
  .group > .three_quarter,ul.elements > .three_quarter,
  .group > .two_third,   ul.elements > .two_third{
    flex-basis:calc((100% - 3%) / 2);
  }
}

/* Phone — everything stacks */
@media screen and (max-width:640px){
  .group,ul.elements,#gallery > ul,#gallery figure > ul{gap:var(--sp-5);}
  .group > *,ul.elements > *,#gallery ul > *{flex-basis:100% !important; width:100% !important;}
  .imgl,.imgr{float:none; margin-left:0; margin-right:0; width:100%;}
}

/* ============================================================================
   Spacing helpers
   ========================================================================= */
.btmspace-10{margin-bottom:var(--sp-3);}
.btmspace-15{margin-bottom:var(--sp-4);}
.btmspace-30{margin-bottom:var(--sp-6);}
.btmspace-50{margin-bottom:clamp(1.75rem,4vw,3rem);}
.btmspace-80{margin-bottom:clamp(2.25rem,6vw,4.5rem);}

.inspace-5{padding:var(--sp-1);}
.inspace-10{padding:var(--sp-3);}
.inspace-15{padding:var(--sp-4);}
.inspace-30{padding:var(--sp-6);}
.inspace-50{padding:clamp(1.5rem,4vw,3rem);}
.inspace-80{padding:clamp(2rem,6vw,4.5rem);}