@charset "utf-8";

/* ==========================================================================
   Innovate Humber — holding page
   --------------------------------------------------------------------------
   One fluid layout, driven by CSS grid areas over a flat DOM. The photograph is
   a full-bleed fixed layer; the content sits in a centred column above it.
   Type scales with the viewport via clamp(), so there are no fixed breakpoints
   beyond the single switch from the two-column desktop grid to the stacked
   mobile one at 860px.
   ========================================================================== */

/* ---------- fonts ---------- */
@font-face{
  font-family:"Anton";
  src:url("/assets/fonts/anton-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Roboto Condensed";
  src:url("/assets/fonts/robotocondensed-700.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Roboto";
  src:url("/assets/fonts/roboto-700.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Open Sans";
  src:url("/assets/fonts/opensans-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}

/* ---------- tokens ---------- */
:root{
  --orange:#f78f24;
  --orange-dim:rgba(247,143,36,.42);
  --ink:#f2f0ef;
  --ink-soft:#e4e2e1;
  --night:#020813;

  --display:"Anton",Impact,"Haettenschweiler","Arial Narrow Bold",sans-serif;
  --cond:"Roboto Condensed","Arial Narrow",Arial,sans-serif;
  --sans:"Roboto",Helvetica,Arial,sans-serif;
  --body:"Open Sans",Helvetica,Arial,sans-serif;

  /* Fluid type scale. On the wide layout the vertical terms matter as much as
     the horizontal ones — a 1920x1080 screen is short, not just wide — so the
     big elements are clamped against vh as well as vw. */
  --fs-eyebrow:clamp(12px,1.02vw,17px);
  --fs-title:clamp(54px,min(6.7vw,10vh),100px);
  --fs-tagline:clamp(20px,min(2.35vw,3.6vh),38px);
  --fs-body:clamp(15px,min(1.22vw,1.9vh),19px);
  --fs-card-kicker:clamp(15px,1.42vw,22px);
  --fs-card-head:clamp(26px,2.4vw,38px);
  --fs-card-year:clamp(29px,2.66vw,42px);
  --fs-card-place:clamp(19px,1.68vw,27px);
  --fs-card-region:clamp(14px,1.24vw,20px);
  --fs-card-time:clamp(17px,1.5vw,24px);
  --fs-card-note:clamp(12px,1.05vw,17px);
  --fs-badge:clamp(15px,1.38vw,22px);
  --fs-label:clamp(15px,1.34vw,24px);
  --fs-pillar:clamp(13px,1.08vw,17px);
  --fs-strap:clamp(12px,1.18vw,21px);

  --shadow:0 2px 12px rgba(0,0,0,.6);
  --gutter:clamp(22px,4vw,72px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--night);
  color:var(--ink);
  font-family:var(--body);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,p,ul{margin:0}
ul{list-style:none;padding:0}
img,svg{display:block}

/* ---------- the photograph ---------- */
.poster__photo{
  position:fixed;
  inset:0;
  z-index:-2;
  background:url("/assets/img/bg-1024.jpg") 50% 62%/cover no-repeat var(--night);
}
@media (min-width:1000px),(min-resolution:1.5dppx){
  .poster__photo{background-image:url("/assets/img/bg-2048.jpg")}
}
.poster__photo::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(to right,
      rgba(2,8,19,.93) 0%,rgba(2,8,19,.82) 26%,
      rgba(2,8,19,.46) 52%,rgba(2,8,19,.3) 70%,rgba(2,8,19,.52) 100%),
    linear-gradient(to bottom,
      rgba(2,8,19,.72) 0%,rgba(2,8,19,.24) 30%,
      rgba(2,8,19,.2) 52%,rgba(2,8,19,.68) 80%,rgba(2,8,19,.96) 100%);
}

/* ---------- shared type ---------- */
.eyebrow{
  font-family:var(--cond); font-weight:700;
  font-size:var(--fs-eyebrow);
  line-height:1.2;
  letter-spacing:.155em;
  text-transform:uppercase;
  text-shadow:var(--shadow);
}
.rule{
  display:block;
  width:clamp(30px,3vw,44px); height:3px;
  background:var(--orange);
  border-radius:2px;
}
.title{
  font-family:var(--display); font-weight:400;
  font-size:var(--fs-title);
  line-height:.93;
  letter-spacing:-.012em;
  text-transform:uppercase;
  text-shadow:0 4px 26px rgba(0,0,0,.55);
}
.title__line{display:block}
.title__line--light{color:#efedec}
.title__line--accent{color:var(--orange)}

.tagline{
  font-family:var(--sans); font-weight:700;
  font-size:var(--fs-tagline);
  line-height:1.16;
  letter-spacing:-.028em;
  text-transform:uppercase;
  text-shadow:var(--shadow);
}
.tagline__line{display:block}
.tagline__line--accent{color:var(--orange)}

.intro,.lede{
  font-size:var(--fs-body);
  line-height:1.6;
  color:var(--ink-soft);
  text-shadow:var(--shadow);
  max-width:46ch;
}
.intro .ln{display:inline}
.lede__line{display:block}
.lede__line--accent{color:var(--orange)}

/* ---------- event details card ---------- */
.card{
  position:relative;
  border:2px solid rgba(247,143,36,.92);
  border-radius:16px;
  background:rgba(3,10,22,.42);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  box-shadow:0 0 34px rgba(247,143,36,.1),0 18px 50px rgba(0,0,0,.4);
  text-align:center;
}
.card__block + .card__block{border-top:2px solid var(--orange-dim)}
.card .icon{margin:0 auto}
.card p{
  font-family:var(--cond); font-weight:700;
  line-height:1.12;
  text-transform:uppercase;
  text-shadow:var(--shadow);
}
.card__kicker  {font-size:var(--fs-card-kicker);letter-spacing:.07em;text-indent:.07em}
.card__headline{font-size:var(--fs-card-head);letter-spacing:.006em;text-indent:.006em}
.card__year    {font-size:var(--fs-card-year);letter-spacing:.057em;text-indent:.057em;color:var(--orange)}
.card__place   {font-size:var(--fs-card-place);letter-spacing:.056em;text-indent:.056em}
.card__region  {font-size:var(--fs-card-region);letter-spacing:.04em;text-indent:.04em;color:var(--orange)}
.card__time    {font-size:var(--fs-card-time);letter-spacing:.043em;text-indent:.043em}
.card__note    {font-size:var(--fs-card-note);letter-spacing:.01em;text-indent:.01em;color:var(--orange)}

/* ---------- CONNECT / SHOWCASE / COLLABORATE / GROW ---------- */
.badge{
  position:relative;
  aspect-ratio:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-radius:50%;
  background:radial-gradient(circle at 50% 45%,rgba(13,22,38,.94),rgba(4,11,23,.96));
  box-shadow:0 0 46px rgba(247,143,36,.16),inset 0 0 34px rgba(0,0,0,.55);
  text-align:center;
  font-family:var(--cond); font-weight:700;
  font-size:var(--fs-badge);
  line-height:1.35;
  text-transform:uppercase;
  text-shadow:0 2px 10px rgba(0,0,0,.75);
}
.badge::before{
  content:"";
  position:absolute; inset:0;
  border-radius:50%;
  padding:2px;
  background:conic-gradient(from 192deg,
    #ffb85f 0deg,rgba(247,143,36,.2) 58deg,rgba(247,143,36,.48) 138deg,
    #ffb85f 206deg,rgba(247,143,36,.22) 262deg,rgba(247,143,36,.55) 322deg,#ffb85f 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask-composite:exclude;
}
.badge__line{display:block}
.badge__line--accent{color:var(--orange)}

/* ---------- MEET / DISCOVER / EXPLORE / BUILD ---------- */
.pillar{text-align:center}
.pillar .icon{margin:0 auto}
.pillar__label{
  font-family:var(--cond); font-weight:700;
  font-size:var(--fs-label);
  line-height:1;
  letter-spacing:.13em;
  text-indent:.13em;
  text-transform:uppercase;
  text-shadow:var(--shadow);
}
.pillar__text{
  font-size:var(--fs-pillar);
  line-height:1.45;
  color:var(--ink-soft);
  text-shadow:var(--shadow);
}

.icon{
  fill:none;
  stroke:var(--orange);
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:1.55;
  filter:drop-shadow(0 0 7px rgba(247,143,36,.35));
}
.icon .dots{fill:var(--orange);stroke:none}

/* ---------- strapline ---------- */
.strap{
  position:relative;
  text-align:center;
  font-family:var(--cond); font-weight:700;
  font-size:var(--fs-strap);
  line-height:1.7;
  letter-spacing:.24em;
  text-indent:.24em;
  text-transform:uppercase;
  text-shadow:var(--shadow);
}
.strap__accent{color:var(--orange)}
.strap::after{
  content:"";
  position:absolute;
  left:50%; transform:translateX(-50%);
  bottom:clamp(-24px,-1.6vw,-14px);
  width:min(62%,620px); height:1px;
  background:linear-gradient(to right,transparent,rgba(255,185,100,.95),transparent);
  box-shadow:0 0 12px rgba(247,143,36,.6);
}

/* ==========================================================================
   DESKTOP / TABLET — two-column grid over a flat DOM
   ========================================================================== */
@media (min-width:861px){

  .poster{
    position:relative;
    min-height:100vh;
    min-height:100svh;
    max-width:1560px;
    margin:0 auto;
    padding:clamp(26px,min(3vw,4.4vh),52px) var(--gutter) clamp(18px,2vw,34px);

    display:grid;
    grid-template-columns:minmax(0,1fr) clamp(248px,23vw,330px);
    grid-template-rows:auto auto auto auto auto auto 1fr auto auto;
    grid-template-areas:
      "eyebrow  card"
      "rule1    card"
      "title    card"
      "tagline  card"
      "intro    card"
      "lede     card"
      "badge    ."
      "pillars  pillars"
      "strap    strap";
    column-gap:clamp(34px,5vw,110px);
    align-content:start;
  }

  .eyebrow    {grid-area:eyebrow}
  .rule--top  {grid-area:rule1;margin:clamp(10px,1vw,16px) 0 clamp(14px,min(1.5vw,2.2vh),24px)}
  .title      {grid-area:title}
  .tagline    {grid-area:tagline;margin-top:clamp(14px,min(1.7vw,2.5vh),28px)}
  .intro      {grid-area:intro;margin-top:clamp(14px,min(1.6vw,2.4vh),26px)}
  .lede       {grid-area:lede;margin-top:clamp(12px,min(1.4vw,2.1vh),22px)}
  .rule--mid  {grid-area:lede;align-self:end;margin-top:clamp(18px,1.8vw,30px);display:none}
  .card       {grid-area:card;align-self:start;padding:clamp(16px,min(1.7vw,2.5vh),28px) clamp(12px,1.2vw,20px)}
  .badge      {grid-area:badge;align-self:end;justify-self:start;
               width:clamp(126px,min(11vw,17vh),164px);
               margin:clamp(18px,min(2.3vw,3.4vh),36px) 0 clamp(12px,min(1.6vw,2.3vh),24px)}
  .pillars    {grid-area:pillars}
  .strap      {grid-area:strap;margin-top:clamp(16px,min(1.8vw,2.6vh),29px);padding-bottom:clamp(16px,1.8vw,26px)}

  .card__block{padding:clamp(12px,min(1.4vw,2vh),21px) 0}
  .card__block:first-child{padding-top:clamp(6px,.7vw,12px)}
  .card__block:last-child{padding-bottom:clamp(6px,.7vw,12px)}
  .card .icon{margin-bottom:clamp(8px,min(1vw,1.5vh),15px)}
  .card p + p{margin-top:clamp(4px,.5vw,9px)}
  .icon--calendar{width:clamp(38px,3.3vw,52px);height:auto}
  .icon--pin     {width:clamp(32px,2.8vw,45px);height:auto}
  .icon--clock   {width:clamp(38px,3.3vw,54px);height:auto}

  /* grid rows 8 and 9 are the feature row and the strapline */
  .poster::before{
    content:"";
    grid-row:8 / 10;
    grid-column:1 / -1;
    justify-self:center;
    width:100vw;
    z-index:-1;
    background:linear-gradient(to bottom,
      rgba(2,8,19,0) 0%,rgba(2,8,19,.58) 16%,rgba(2,8,19,.86) 52%,rgba(2,8,19,.96) 100%);
    border-top:1px solid rgba(247,143,36,.14);
  }

  .pillars{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    padding-top:clamp(12px,min(1.5vw,2.1vh),21px);
  }
  .pillar{padding:0 clamp(10px,1.4vw,26px)}
  .pillar + .pillar{
    border-left:1px solid transparent;
    border-image:linear-gradient(to bottom,transparent,rgba(247,143,36,.36) 16%,rgba(247,143,36,.36) 84%,transparent) 1;
  }
  .pillar .icon{height:clamp(34px,min(3.2vw,4.8vh),50px);width:auto}
  .pillar__label{margin-top:clamp(10px,min(1.2vw,1.8vh),18px)}
  .pillar__text{margin-top:clamp(7px,min(.85vw,1.3vh),13px)}
}

/* the intro's designed line breaks only fit once there is room for them */
@media (min-width:1180px){
  .intro .ln{display:block}
}

/* ==========================================================================
   MOBILE — stacked
   ========================================================================== */
@media (max-width:860px){

  .poster{
    position:relative;
    max-width:640px;
    margin:0 auto;
    padding:clamp(34px,9vw,54px) clamp(22px,6vw,34px) 0;
  }
  .poster__photo{
    position:absolute;
    left:50%; top:0; right:auto; bottom:auto;
    width:100vw; transform:translateX(-50%);
    height:min(94vh,800px);
    background-position:50% 58%;
  }
  .poster__photo::after{
    background:linear-gradient(to bottom,
      rgba(2,8,19,.88) 0%,rgba(2,8,19,.58) 28%,rgba(2,8,19,.3) 54%,
      rgba(2,8,19,.8) 84%,var(--night) 100%);
  }

  :root{
    --fs-title:clamp(56px,17.5vw,116px);
    --fs-tagline:clamp(19px,5.4vw,30px);
    --fs-body:clamp(15px,4vw,18px);
    --fs-eyebrow:clamp(13px,3.5vw,16px);
    --fs-card-kicker:clamp(17px,4.6vw,21px);
    --fs-card-head:clamp(28px,7.6vw,36px);
    --fs-card-year:clamp(31px,8.4vw,40px);
    --fs-card-place:clamp(21px,5.6vw,26px);
    --fs-card-region:clamp(15px,4.1vw,19px);
    --fs-card-time:clamp(19px,5vw,23px);
    --fs-card-note:clamp(13px,3.5vw,16px);
    --fs-badge:clamp(17px,4.8vw,21px);
    --fs-label:clamp(16px,4.4vw,20px);
    --fs-pillar:clamp(13px,3.6vw,16px);
    --fs-strap:clamp(12px,3.4vw,16px);
  }

  .rule--top{margin:14px 0 18px}
  .rule--mid{margin:26px 0 0}
  .tagline{margin-top:clamp(14px,4vw,22px)}
  .intro{margin-top:clamp(16px,4.5vw,24px)}
  .lede{margin-top:clamp(14px,4vw,20px)}

  .card{
    margin:clamp(30px,8vw,46px) 0 0;
    padding:clamp(24px,6vw,32px) 18px clamp(26px,6vw,34px);
    background:rgba(3,10,22,.55);
  }
  .card__block + .card__block{
    margin-top:clamp(20px,5vw,28px);
    padding-top:clamp(20px,5vw,28px);
  }
  .card .icon{margin-bottom:clamp(10px,2.5vw,14px)}
  .icon--calendar{width:44px;height:48px}
  .icon--pin{width:38px;height:49px}
  .icon--clock{width:46px;height:46px}
  .card__region{margin-top:4px}
  .card__note{margin-top:6px}

  .badge{
    width:clamp(196px,58vw,236px);
    margin:clamp(34px,9vw,50px) auto 0;
  }

  .pillars{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:clamp(26px,7vw,38px) clamp(12px,4vw,22px);
    margin:clamp(38px,10vw,56px) 0 0;
  }
  .pillar{position:relative}
  .pillar:nth-child(odd)::after{
    content:"";
    position:absolute;
    right:calc(-1 * clamp(6px,2vw,11px));
    top:6%; bottom:6%;
    width:1px;
    background:linear-gradient(to bottom,transparent,rgba(247,143,36,.34) 18%,rgba(247,143,36,.34) 82%,transparent);
  }
  .icon--meet   {width:62px;height:42px}
  .icon--rocket {width:47px;height:47px}
  .icon--explore{width:45px;height:47px}
  .icon--build  {width:74px;height:48px}
  .pillar__label{margin-top:14px}
  .pillar__text{margin-top:9px}

  .strap{
    margin:clamp(40px,11vw,60px) 0 0;
    padding-bottom:clamp(46px,12vw,64px);
    letter-spacing:.2em;
    text-indent:.2em;
  }
  .strap::after{bottom:clamp(20px,5vw,30px);width:min(72%,300px)}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}