/* ===================================================================
   Super Hot Lava
   Design source: Figma "SSH MOCK 2" -> frame Desktop-1 (1440 x 1024)
   Every value marked [F] is read off the Figma frame, not estimated.
   =================================================================== */

:root {
    /* ---- palette [F] ---- */
    --ink:       #222222;   /* header bar + dark type          */
    --ink-soft:  #383838;   /* secondary dark                  */
    --paper:     #ffffff;   /* content panel                   */
    --red:       #ff0000;   /* accent                          */
    --page:      #1e1e1e;   /* frame background                */

    /* ---- layout [F] (1440 reference frame) ---- */
    --frame:     1440px;
    --gutter:    32px;
    --header-h:  99px;      /* [F] header rect 1440 x 99       */
    --logo-h:    100px;     /* [F] logo 142.22 x 100.09        */
    --logo-x:    12px;      /* [F] logo X = 12                 */
    --logo-y:    7px;       /* [F] logo Y = 6.83               */
    --col-gap:   40px;
    --flyer-w:   36.25%;    /* [F] 522 / 1440                  */

    /* ---- fluid type, anchored to the 1440 frame ----
       86/1440 = 5.97vw   64/1440 = 4.44vw   75/1440 = 5.21vw
       32/1440 = 2.22vw   40/1440 = 2.78vw                     */
    --fs-sale: clamp(30px, 5.69vw, 82px);   /* [F] 86, capped to 82: see note */
    --fs-free: clamp(24px, 4.44vw, 64px);   /* [F] 64 */
    --fs-date: clamp(28px, 5.21vw, 75px);   /* [F] 75 */
    --fs-nav:  clamp(15px, 2.22vw, 32px);   /* [F] 32 */
    --fs-btn:  clamp(13px, 2.78vw, 40px);   /* [F] 40 */

    --poster-shadow: 2px 3px 0 rgba(0, 0, 0, .22);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--page);
    color: var(--ink);
    font-family: "Stick No Bills", sans-serif;
    font-weight: 800;          /* [F] Post No Bills Colombo ExtraBold */
    overflow-x: hidden;
}

img { display: block; max-width: 100%; }

a:focus-visible,
.logo-link:focus-visible {
    outline: 3px solid var(--red);
    outline-offset: 3px;
}

/* ------------------------------------------------------------------
   HEADER  [F] 1440 x 99, fill #222222
   Logo is absolutely placed so it can overhang the bar by ~8px,
   the way it does in the mock, without stretching the bar.
   ------------------------------------------------------------------ */
.site-header {
    position: relative;
    z-index: 3;
    height: var(--header-h);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 var(--gutter);
    background: var(--ink);
}

.logo-link {
    position: absolute;
    left: var(--logo-x);
    top: var(--logo-y);
    line-height: 0;
    z-index: 4;
}

.logo {
    height: var(--logo-h);
    width: auto;
    transform: rotate(4.75deg);       /* [F] rotation 4.75 deg */
    transform-origin: center;
    filter: drop-shadow(4px 6px 10px rgba(0, 0, 0, .6));
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 36px;
}

.site-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;                 /* touch target */
    padding: 0 2px;
    color: #fff;
    font-size: var(--fs-nav);
    line-height: 1;
    letter-spacing: .02em;
    text-transform: uppercase;        /* [F] nav is caps */
    text-decoration: none;
    transition: color .15s ease;
}

.site-nav a:hover,
.site-nav a:focus-visible { color: var(--red); }

/* ------------------------------------------------------------------
   BANNER  [F] visible band y99 -> y378 = 279px on a 1440 frame.
   Source image is placed 1539 x 694 at y = -96, so the visible slice
   runs from image-relative y195 to y474, i.e. 28.1% - 68.3% down.
   Sampling banner.png confirms the red band is rows 148-295 of 461
   (32.1% - 64.0%, centred 48.0%), so it lands inside that slice.
   Under object-fit:cover the image renders 1440 x 649, so the offset
   is 182.5 / (649 - 279) = 49%.
   ------------------------------------------------------------------ */
.banner {
    position: relative;
    z-index: 1;
    width: 100%;
    height: min(19.375vw, 279px, 32vh);   /* [F] 279 of 1440 = 19.375vw, capped so it stops growing on wide screens */
    object-fit: cover;
    object-position: center 49%;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .7);
}

/* ------------------------------------------------------------------
   CONTENT  [F] white panel 1440 x 636 starting at y378
   ------------------------------------------------------------------ */
.content {
    position: relative;
    z-index: 2;
    background: var(--paper);
}

.content-inner {
    max-width: var(--frame);
    margin: 0 auto;
    padding: 32px var(--gutter) 96px;
    display: flex;
    align-items: flex-start;
    gap: var(--col-gap);
}

/* [F] flyer 522 x 522, 5px INSIDE stroke #000 (border-box keeps 522) */
.flyer {
    flex: 0 0 var(--flyer-w);
    max-width: 522px;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border: 5px solid #000;
}

.announcement {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.announcement p {
    margin: 0;
    line-height: 1.04;
    text-transform: uppercase;
    text-shadow: var(--poster-shadow);
}

.announcement .line-sale { font-size: var(--fs-sale); }
.announcement .line-free { font-size: var(--fs-free); margin-top: .16em; }
.announcement .line-date { font-size: var(--fs-date); margin-top: .16em; }

.announcement .red { color: var(--red); }

/* ------------------------------------------------------------------
   LINK BUTTONS  [F] 146 x 147, radius 26, red gradient
   ------------------------------------------------------------------ */
.links {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: clamp(24px, 8vw, 182px);     /* [F] desktop gap 182 */
    margin-top: clamp(24px, 2.2vw, 32px);
    width: 100%;
}

.link-button {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width:  clamp(104px, 10.14vw, 146px);
    height: clamp(105px, 10.21vw, 147px);
    border-radius: clamp(18px, 1.8vw, 26px);
    color: #fff;
    font-size: var(--fs-btn);
    line-height: .95;
    letter-spacing: .01em;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, .30) 0%,
            rgba(214, 38, 32, .96)  42%,
            rgba(126, 16, 12, 1)   100%),
        #c8302a;
    border: 1px solid rgba(255, 255, 255, .35);
    box-shadow:
        0 8px 20px rgba(0, 0, 0, .35),
        0 1px 1px rgba(255, 255, 255, .55) inset,
        0 -3px 8px rgba(0, 0, 0, .45) inset;
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease;
}

.link-button:hover,
.link-button:focus-visible {
    transform: translateY(-2px);
    box-shadow:
        0 12px 26px rgba(0, 0, 0, .45),
        0 1px 1px rgba(255, 255, 255, .55) inset,
        0 -3px 8px rgba(0, 0, 0, .45) inset;
}

.link-button .icon {
    width:  clamp(30px, 2.9vw, 42px);
    height: clamp(30px, 2.9vw, 42px);
}

.link-button .icon svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: #fff;
}

/* ==================================================================
   RESPONSIVE
   The Figma mobile frame is 470px wide, which is not a real device
   width, so its pixel values are converted to ratios rather than
   copied. Verified at 1440 / 1024 / 768 / 428 / 390 / 375.
   ================================================================== */

/* ---- tablet / small laptop ---- */
@media (max-width: 1024px) {
    :root {
        --gutter:   24px;
        --col-gap:  32px;
        --header-h: 84px;
        --logo-h:   78px;
        --logo-y:   6px;
    }
    .site-nav { gap: 26px; }
}

/* ---- stack: flyer above copy ---- */
@media (max-width: 768px) {
    :root {
        --gutter:   20px;
        --header-h: 72px;
        --logo-h:   58px;
        --logo-y:   6px;
        --logo-x:   10px;
    }

    .site-nav { gap: 20px; }

    /* [F-mobile] banner band is ~143 of 470 wide -> aspect 3.29 */
    .banner {
        height: 30.4vw;
        object-position: center 44%;
        box-shadow: 0 8px 18px rgba(0, 0, 0, .7);
    }

    .content-inner {
        flex-direction: column;
        align-items: center;
        gap: 28px;
        padding: 28px var(--gutter) 64px;
    }

    .flyer {
        flex: 0 0 auto;
        width: 100%;
        max-width: 460px;
        border-width: 4px;
    }

    .announcement { width: 100%; }

    .links { gap: clamp(20px, 7vw, 48px); }
}

/* ---- phones ---- */
@media (max-width: 480px) {
    :root {
        --gutter:   16px;
        --header-h: 64px;
        --logo-h:   46px;
        --logo-y:   5px;
        --logo-x:   8px;
        --poster-shadow: 1px 2px 0 rgba(0, 0, 0, .22);
    }

    .site-nav { gap: 14px; }
    .site-nav a { padding: 0 1px; letter-spacing: 0; }

    .banner {
        height: 31.5vw;
        object-position: center 44%;
    }

    .content-inner {
        gap: 22px;
        padding: 22px var(--gutter) 48px;
    }

    .flyer { border-width: 3px; }

    .announcement .line-free,
    .announcement .line-date { margin-top: .2em; }

    .links {
        gap: 20px;
        margin-top: 26px;
    }

    /* keep both buttons comfortably tappable at 375px */
    .link-button {
        width:  clamp(112px, 34vw, 132px);
        height: clamp(113px, 34vw, 133px);
        border-radius: 20px;
        font-size: clamp(15px, 4.6vw, 20px);
    }

    .link-button .icon { width: 30px; height: 30px; }
}

/* ---- very narrow fallback ---- */
@media (max-width: 340px) {
    .site-nav { gap: 10px; }
    .links { gap: 14px; }
    .link-button { width: 104px; height: 105px; }
}