/* tcurreri.com - rebuild
   ------------------------------------------------------------------
   COLORS AND FONTS extracted from the live Wix site's own stylesheet.
   These are your real values, not approximations:
     --color_0  18,183,179  -> #12b7b3  primary teal
     --color_24 65,139,141  -> #418b8d  dark teal
     --color_21 197,239,241 -> #c5eff1  pale teal
     --color_11 234,229,229 -> #eae5e5  warm grey rule
     --color_14 77,77,77    -> #4d4d4d  body grey
     --color_15 0,0,0       -> #000000  headings
   Fonts (from --font_0 / --font_4 / --font_7):
     Noticia Text  headings   (was --font_0, bold 43px serif)
     Questrial     subheads   (was --font_4/6, 32px/24px)
     Open Sans     body       (was --font_7, 17px/1.4em)
   All three are free Google Fonts. Wix also used Avenir Light, which is
   licensed and not redistributable - Open Sans stands in for it.
   ------------------------------------------------------------------ */
:root{
  --teal:#12b7b3;
  --teal-dk:#418b8d;
  --teal-lt:#c5eff1;
  --ink:#000000;
  --muted:#4d4d4d;
  --line:#eae5e5;
  --bg:#ffffff;
  --bg-alt:#f4fbfb;
  --max:980px;   /* Wix classic canvas width */
  /* Wix used Avenir Light (licensed) for body and hero, Futura Book for the
     nav, and Questrial for headings. Nunito Sans and Jost stand in for the
     two licensed faces; Questrial is the real thing. */
  --font:"Nunito Sans",system-ui,-apple-system,Helvetica,Arial,sans-serif;
  --font-nav:"Jost",system-ui,Helvetica,Arial,sans-serif;
  --font-head:"Nunito Sans",system-ui,Helvetica,Arial,sans-serif;
  --font-alt:"Questrial",system-ui,Helvetica,Arial,sans-serif;

  /* Logo strip. --logo-gray 0 = original colour, 1 = fully desaturated.
     --logo-fade 1 = full strength. Both snap to full on hover. */
  --logo-gray:1;
  --logo-fade:.62;
  --logo-height:130px;
  --logo-cols:5;

  /* Colour blocking: the tint used on alternating section bands. */
  --band-tint:#ffffff;   /* testimonials band - no tint */

  /* Call-to-action circles. Teal and lime are sampled straight out of the
     Doodat logo; the teal is lightened slightly so white text reads on it. */
  --circle-1:#64c6cc;   /* logo teal lightened 35% so the dark label passes AA */
  --circle-2:#b8d050;
  --circle-3:#d0d0d0;
  /* Both circle labels use the dark grey from the Doodat logo. White text
     failed contrast on both the teal and the lime (1.7:1 and 2.1:1). */
  --circle-text:#404848;
  --circle-size:clamp(112px,15vw,186px);
  /* All four home circles share one size. The portrait is zoomed inside its
     circle so her face stays the size it was before the circle shrank. */
  --photo-zoom:1.4;
  --photo-focus:50% 38%;
  /* About page - values read off the live Wix page at a 1352px viewport
     using computed styles, not measured from a screenshot.
       circle          120px, lime #badb55, label Questrial 20px
       circle -> text  72px
       skills          Questrial 24px / 28.8px line, #4d4d4d, ONE column
       traits          Questrial 20px / 32px line, black, indented 99px
       illustration    404px wide, right of the traits                     */
  --badge-size:clamp(92px,8.9vw,120px);
  --badge-gap:clamp(30px,5.3vw,72px);
  --row-pad:clamp(30px,4.2vw,56px);
  --about-photo-w:clamp(220px,30vw,404px);
  --skill-size:clamp(1.15rem,1.78vw,1.5rem);   /* 24px at 1352 */
  --trait-size:clamp(1.05rem,1.48vw,1.25rem);  /* 20px at 1352 */
  --trait-line:1.6;                            /* 32px on 20px */
  --trait-gap:1.65em;                          /* the blank line */

  /* Header band - the grey strip carrying logo, nav and name. */
  --head-bg:#707373;   /* rgba(57,61,61,.72) flattened */
  --head-text:#ffffff;
  --head-active:#61d0d4;
  --head-pad:26px;
  --name-size:clamp(1.7rem,2.96vw,2.5rem);  /* 40px at 1352 */
  --name-weight:400;

  /* Doodat Design mark in the header. */
  --doodat-height:76px;
  --field-rule:#34d1b6;   /* Wix form underline */

  /* Weight and slant per text role. 400 = regular, 700 = bold.
     Noticia Text and Open Sans ship real bold and real italic.
     Questrial has ONE weight and no italic - asking for bold or
     italic there makes the browser fake it, which looks smeared.
     Switch the subhead font if you want weight range. */
  --h1-weight:300;   --h1-style:italic;
  --h2-weight:400;   --h2-style:normal;
  --body-weight:400; --body-style:normal;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);
     font-weight:var(--body-weight);font-style:var(--body-style);
     line-height:1.4;font-size:clamp(16px,1.33vw,18px)}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal-dk)}
h1{font-family:var(--font-head);font-weight:var(--h1-weight);
   font-style:var(--h1-style);line-height:1.2;margin:0 0 .5em}
h2,h3{font-family:var(--font-alt);font-weight:var(--h2-weight);
      font-style:var(--h2-style);line-height:1.25;margin:0 0 .5em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.center{text-align:center}
.mt{margin-top:3rem}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:#fff;padding:10px;z-index:99}

.site-head{background:var(--head-bg);color:var(--head-text)}
.head-inner{display:flex;align-items:flex-start;gap:30px;
            padding:var(--head-pad) 24px calc(var(--head-pad) + 6px)}
.doodat{display:flex;align-items:flex-start;flex:0 0 auto;line-height:0;
        text-decoration:none;opacity:.95;transition:opacity .2s}
.doodat:hover{opacity:1}
.doodat img{height:var(--doodat-height);width:auto}
.head-main{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.brand{font-family:var(--font-head);font-weight:var(--name-weight);
       font-style:normal;font-size:var(--name-size);letter-spacing:.01em;
       text-decoration:none;color:var(--head-text);line-height:1.1;
       padding-left:2px}
.site-nav ul{display:flex;gap:clamp(18px,4vw,54px);list-style:none;margin:0;
             padding:0;align-items:center;flex-wrap:wrap}
.site-nav li{white-space:nowrap}
.site-nav a{font-family:var(--font-nav);font-size:clamp(.85rem,1.18vw,1rem);
       letter-spacing:.04em;
       text-transform:uppercase;text-decoration:none;color:var(--head-text);
       padding:4px 0;display:inline-block;transition:color .15s}
.site-nav a:hover{color:var(--head-active)}
.site-nav a.is-active{color:var(--head-active)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;
        cursor:pointer;padding:8px;margin-left:auto}
.burger span{width:26px;height:2px;background:var(--head-text);display:block;
             transition:.2s}
.burger.x span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.x span:nth-child(2){opacity:0}
.burger.x span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.hero{padding:70px 0 40px}
.hero-grid{display:block}
.hero-copy h1{font-size:clamp(1.35rem,2.07vw,1.75rem);max-width:34ch;
              line-height:1.4;color:#2f2e2e}
.hero-copy p{color:var(--ink);margin:0 0 1.15em;max-width:58ch;line-height:1.4}
.hero-img img{border-radius:10px;width:100%}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:1.8rem}

/* Circular call-to-action row: two buttons, the Doodat mark, and the portrait. */
.circles{display:flex;align-items:center;flex-wrap:wrap;
         gap:clamp(14px,3.2vw,48px);margin-top:clamp(2rem,4vw,3.4rem)}
.circle{width:var(--circle-size);aspect-ratio:1;border-radius:50%;
        display:grid;place-items:center;text-align:center;padding:12px;
        text-decoration:none;color:#fff;font-family:var(--font-alt);
        text-transform:uppercase;letter-spacing:.06em;
        font-size:clamp(.82rem,1.25vw,1.05rem);line-height:1.25;
        transition:transform .2s ease, box-shadow .2s ease}
.circle:hover{transform:translateY(-5px);box-shadow:0 10px 26px rgba(0,0,0,.16)}
.circle-a{background:var(--circle-1);color:var(--circle-text)}
.circle-b{background:var(--circle-2);color:var(--circle-text)}
.circle-c{background:var(--circle-3);padding:0;overflow:hidden}
.circle-c img{width:53%;height:auto}
.circle-photo{width:var(--circle-size);aspect-ratio:1;border-radius:50%;
              overflow:hidden;display:block;flex:0 0 auto;background:var(--bg);
              box-shadow:0 8px 28px rgba(0,0,0,.16);
              transition:transform .2s ease}
.circle-photo:hover{transform:translateY(-5px)}
.circle-photo img{width:100%;height:100%;object-fit:cover;display:block;
                  transform:scale(var(--photo-zoom));
                  transform-origin:var(--photo-focus)}
.btn{display:inline-block;background:var(--teal);color:#fff;padding:12px 26px;
     border-radius:999px;text-decoration:none;font-size:.82rem;letter-spacing:.09em;
     text-transform:uppercase;border:1px solid var(--teal);cursor:pointer;font-family:inherit}
.btn:hover{background:var(--teal-dk);border-color:var(--teal-dk)}
.btn-ghost{background:none;color:var(--teal-dk)}
.btn-ghost:hover{background:var(--teal);color:#fff}

.band{padding:56px 0;border-top:1px solid var(--line)}
.band.alt{background:var(--band-tint)}
.eyebrow{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
         color:var(--muted);font-weight:600;margin-bottom:1.6rem}
.logos{display:grid;grid-template-columns:repeat(var(--logo-cols),1fr);gap:22px;
       align-items:center}
.logo img{margin:0 auto;max-height:var(--logo-height);width:auto;
          filter:grayscale(var(--logo-gray));opacity:var(--logo-fade);transition:.2s}
.logo img:hover{filter:grayscale(0);opacity:1}

/* section titles - teal Questrial, matching the Wix headings */
.section-title{font-family:var(--font-alt);font-weight:var(--h2-weight);
  font-style:var(--h2-style);color:var(--head-active);
  font-size:clamp(1.4rem,2.37vw,2rem);margin:0 0 1.6rem}
.hint{color:var(--muted);font-size:.92rem;margin:0 0 1.2rem}

/* testimonials */
.quote{margin:0 auto;max-width:760px;text-align:center;padding:0}
.quote p{font-size:clamp(1.1rem,1.78vw,1.5rem);line-height:1.35;
         margin:0 0 1.6rem;color:var(--muted)}
.quote cite{font-style:italic;font-size:1.08rem;color:var(--muted)}
.quotes .quote{margin-bottom:64px}
.quote-slider{position:relative;min-height:230px;display:grid;place-items:center}
.quote-slider .quote{grid-area:1/1;opacity:0;visibility:hidden;
  transition:opacity .5s ease}
.quote-slider .quote.on{opacity:1;visibility:visible}
.dots{grid-area:1/1;align-self:end;display:flex;gap:9px;justify-content:center;
  transform:translateY(30px)}
.dots .dot{width:9px;height:9px;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid var(--teal-dk);background:none}
.dots .dot.on{background:var(--teal)}

/* clickable gallery items */
.lb .gitem{position:relative;display:block;padding:0;border:0;background:none;
  cursor:pointer;border-radius:8px;overflow:hidden;line-height:0;
  transition:transform .18s ease,box-shadow .18s ease}
.lb .gitem:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.16)}
.lb .gitem:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.lb .gitem img{width:100%}
.lb .play{position:absolute;inset:0;margin:auto;width:54px;height:54px;
  border-radius:50%;background:rgba(0,0,0,.55)}
.lb .play::after{content:"";position:absolute;top:50%;left:54%;
  transform:translate(-50%,-50%);border-style:solid;border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent #fff}

/* lightbox overlay */
.lightbox{position:fixed;inset:0;z-index:200;display:none;
  background:rgba(238,238,238,.98)}
.lightbox.open{display:grid;grid-template-columns:1fr 340px;align-items:center}
.lightbox .stage{padding:40px;display:grid;place-items:center;height:100vh}
.lightbox .stage img,.lightbox .stage video,.lightbox .stage iframe{
  max-width:100%;max-height:calc(100vh - 80px);border:0;background:#fff}
.lightbox .stage iframe{width:100%;aspect-ratio:16/9;height:auto}
.lightbox .meta{padding:40px 48px 40px 0}
.lightbox .meta h2{font-family:var(--font-alt);font-style:italic;font-weight:400;
  font-size:1.85rem;color:var(--ink);margin:0 0 .7rem}
.lightbox .meta p{color:var(--muted);margin:0;font-size:1rem;line-height:1.55}
.lightbox .nav{display:flex;gap:10px;margin-top:36px}
.lightbox .nav button,.lightbox .close{background:none;border:0;cursor:pointer;
  color:var(--ink);font-size:2rem;line-height:1;padding:6px 14px;border-radius:6px}
.lightbox .nav button:hover,.lightbox .close:hover{background:rgba(0,0,0,.07)}
.lightbox .nav button[disabled]{opacity:.25;cursor:default;background:none}
.lightbox .close{position:absolute;top:18px;right:22px;font-size:2.2rem;z-index:2}
.lightbox .count{margin-top:14px;font-size:.85rem;color:var(--muted);
  letter-spacing:.08em}
body.lb-open{overflow:hidden}

.page-head{padding:56px 0 8px}
.page-head h1{font-size:clamp(1.6rem,3.03vw,2.56rem)}
.lede{color:var(--muted);font-size:1.1rem;max-width:52ch;margin:0}
.crumb{margin:0 0 .8rem;font-size:.85rem}
.crumb a{text-decoration:none;color:var(--muted)}
.crumb a:hover{color:var(--teal)}

.projects{padding:36px 0 20px}
.project{display:grid;grid-template-columns:1.1fr 1fr;gap:44px;align-items:center;
         padding:44px 0;border-bottom:1px solid var(--line)}
.project.flip .project-imgs{order:2}
.project-imgs{display:grid;gap:12px}
.project-imgs img{border-radius:8px;width:100%}
.project-copy h3{font-size:clamp(1.15rem,1.78vw,1.5rem);margin-bottom:.6rem;
                 color:var(--muted)}
.project-copy h3 a{color:var(--ink);text-decoration:none}
.project-copy h3 a:hover{color:var(--teal)}
.project-copy p{color:var(--ink);margin:0 0 1em;line-height:1.2}
.more{font-size:.85rem;font-weight:600;text-decoration:none;letter-spacing:.02em}
.more:hover{text-decoration:underline}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.gallery .gitem img{aspect-ratio:1;object-fit:cover}

.project-detail{padding:24px 0 64px;max-width:900px}
.detail-copy p{font-size:1.05rem;color:var(--muted);max-width:68ch}
.shots{display:grid;gap:26px;margin-top:10px}
.shots .gitem{border-radius:10px}
.badge img{width:96px;margin-top:20px}

/* About page - mirrors the Wix layout: a coloured circle label on the left,
   content on the right, with the portrait sitting below. */
.about-page{padding:8px 0 80px}
.rule{border:0;border-top:1px solid var(--line);margin:0}
.about-row{display:grid;grid-template-columns:var(--badge-size) 1fr;
           gap:var(--badge-gap);align-items:center;
           padding:var(--row-pad) 0}
.badge-col{display:flex;justify-content:flex-start}
.badge-circle{width:var(--badge-size);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center start;text-align:left;
  padding:0 8% 0 7.5%;
  font-family:var(--font-alt);font-size:clamp(.88rem,1.48vw,1.25rem);
  line-height:1.2;color:#fff}
.badge-teal{background:var(--circle-1);color:var(--circle-text)}
.badge-lime{background:var(--circle-2);color:var(--circle-text)}
.trait-stack{list-style:none;margin:0;padding:0}
.trait-stack li{font-size:var(--trait-size);line-height:var(--trait-line);
                color:var(--ink)}
.trait-stack li.gap{margin-top:var(--trait-gap)}
.trait-stack li.last{font-weight:700;color:var(--ink)}
.trait-stack{padding-left:clamp(0px,2vw,26px)}
.skill-cols{display:block}
.bullets{list-style:none;margin:0;padding:0;color:var(--muted)}
.bullets li{font-size:var(--skill-size);line-height:1.2;padding:4px 0}
.me-body{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:end}
.me-photo{justify-self:end;align-self:end}
.me-photo img{width:var(--about-photo-w);height:auto;display:block}
.work-links{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:26px;margin:1.4rem 0 0}
.work-links a{font-family:var(--font-alt);font-size:1.02rem;font-weight:600;
  color:var(--teal-dk);text-decoration:none;border-bottom:2px solid transparent;
  padding-bottom:3px;transition:border-color .15s}
.work-links a:hover{border-bottom-color:var(--teal)}

.resume{padding:24px 0 70px;max-width:900px}
.resume .cols2{margin-bottom:.5rem}
.resume-loc{color:var(--muted);font-size:.95rem;margin:.5rem 0 0}
.resume .section-title{font-size:1.4rem}
.resume .job-dates{line-height:1.45;display:block}
.resume .work-links{margin-top:.2rem}
.job{display:grid;grid-template-columns:150px 1fr;gap:28px;padding:26px 0;
     border-top:1px solid var(--line)}
.job-dates{font-size:.85rem;color:var(--muted);font-weight:600;letter-spacing:.02em}
.job-body h3{font-size:1.12rem;margin-bottom:.15em;
             font-weight:var(--h2-weight);font-style:var(--h2-style)}
.job-co{color:var(--teal-dk);font-size:.93rem;font-weight:600;margin:0 0 .8em}
.job-body p{color:var(--muted);margin:0 0 .8em}
.job-body ul{margin:0;padding-left:19px;color:var(--muted)}
.job-body li{margin-bottom:.45em;font-size:.97rem}

.contact{padding:24px 0 70px;display:grid;grid-template-columns:1fr 1.3fr;gap:56px;
         align-items:start}
.contact-list{list-style:none;margin:0;padding:0}
.contact-list li{padding:16px 0;border-bottom:1px solid var(--line)}
.contact .page-head h1{color:var(--circle-2)}
.contact-list span{display:block;font-size:.74rem;letter-spacing:.13em;
                   text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.contact-list a{font-size:1.05rem;text-decoration:none;font-weight:600}
.contact-list a:hover{text-decoration:underline}
.contact-form{display:grid;gap:15px}
.contact-form label{display:grid;gap:6px;font-size:.78rem;letter-spacing:.11em;
                    text-transform:uppercase;color:var(--muted);font-weight:600}
/* Wix used underline-only fields with a mint rule, not boxes. */
.contact-form input,.contact-form textarea{font:inherit;font-size:1rem;
   text-transform:none;letter-spacing:0;color:var(--ink);padding:8px 2px;
   border:0;border-bottom:1px solid var(--field-rule);border-radius:0;
   background:#fff;width:100%}
.contact-form textarea{min-height:150px;resize:vertical}
.contact-form input:focus,.contact-form textarea:focus{outline:0;
   border-bottom:2px solid var(--teal)}
.contact-form .btn{justify-self:start}
.contact-form button[disabled]{opacity:.6;cursor:default}
.form-note{margin:.2rem 0 0;font-size:1rem;line-height:1.45;padding:12px 14px;
  border-radius:7px;display:none}
.form-note.ok{display:block;background:#eefaf7;border:1px solid var(--field-rule);
  color:#1d4f45}
.form-note.err{display:block;background:#fdeeee;border:1px solid #e3b4b4;
  color:#7a2b2b}
/* honeypot - hidden from humans, visible to bots */
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}

.site-foot{border-top:1px solid var(--line);padding:34px 0;margin-top:20px;
           background:var(--bg-alt)}
.foot-inner{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
            font-size:.9rem;color:var(--muted)}
.foot-inner p{margin:0}
.foot-inner a{color:var(--muted)}

@media(max-width:900px){
  .burger{display:flex}
  .head-inner{flex-wrap:wrap;align-items:center;gap:14px;
              padding-bottom:var(--head-pad)}
  .head-main{flex:1 0 100%;order:3}
  .site-nav{display:none;width:100%}
  .site-nav.open{display:block}
  .site-nav ul{flex-direction:column;align-items:stretch;gap:0}
  .site-nav a{display:block;padding:12px 0;width:100%;
              border-bottom:1px solid rgba(255,255,255,.22)}
  .brand{font-size:clamp(1.6rem,7vw,2.1rem);order:-1;padding-left:0}
  .hero-grid,.contact{grid-template-columns:1fr;gap:36px}
  .about-row{grid-template-columns:1fr;gap:20px;justify-items:center;
             text-align:center}
  .me-body{grid-template-columns:1fr;justify-items:center}
  .me-photo{justify-self:center}
  .badge-col{justify-content:center}
  .skill-cols{grid-template-columns:1fr;text-align:left}
  .work-links{justify-content:center}
  .circles{gap:16px;justify-content:flex-start}
  .doodat img{height:54px}
  .project,.project.flip .project-imgs{grid-template-columns:1fr;order:0}
  .logos{grid-template-columns:repeat(3,1fr)}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .job{grid-template-columns:1fr;gap:8px}
  .lightbox.open{grid-template-columns:1fr;grid-template-rows:1fr auto;
                 align-content:start}
  .lightbox .stage{height:auto;max-height:62vh;padding:56px 16px 8px}
  .lightbox .stage img,.lightbox .stage video{max-height:58vh}
  .lightbox .meta{padding:0 24px 30px;text-align:center}
  .lightbox .meta h2{font-size:1.4rem}
  .lightbox .nav{justify-content:center;margin-top:20px}
}
@media(max-width:560px){
  body{font-size:16px}
  .hero{padding:44px 0 28px}
  .hero-copy h1{font-size:1.65rem}
  .page-head h1{font-size:1.7rem}
  .cols2{grid-template-columns:1fr}
  .logos{grid-template-columns:repeat(2,1fr)}
  .quote p{font-size:1.08rem}
  .circles{gap:12px}
}