.guide-page{
    padding:14px 14px 32px;
}

.guide-page__back{
    display:inline-block;

    margin:2px 2px 12px;

    color:#b9c8bd;

    font-size:13px;
}


/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */

.guide-page__hero{
    overflow:hidden;

    margin-bottom:16px;

    border:1px solid #d9c68f;
    border-radius:20px;

    background:
        linear-gradient(
            145deg,
            #fffaf1,
            #f6efd9
        );

    color:#172019;

    box-shadow:
        0 9px 22px rgba(3,27,15,.20),
        0 2px 6px rgba(0,0,0,.10);
}

.guide-page__hero-image{
    position:relative;

    height:240px;
    overflow:hidden;

    background:#173423;
}

.guide-page__hero-image::after{
    content:"";

    position:absolute;
    right:0;
    bottom:0;
    left:0;

    height:58px;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(5,20,12,.32)
        );
}

.guide-page__hero-image img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
}

.guide-page__difficulty{
    position:absolute;
    z-index:2;

    top:12px;
    right:12px;

    padding:7px 10px;

    border:1px solid rgba(255,255,255,.35);
    border-radius:999px;

    background:rgba(9,28,17,.78);
    color:#fff;

    backdrop-filter:blur(7px);
    -webkit-backdrop-filter:blur(7px);

    font-size:12px;
    font-weight:400;
}

.guide-page__hero-body{
    padding:15px 15px 16px;
}

.guide-page__hero-body > small{
    display:block;

    margin-bottom:5px;

    color:#659346;

    font-size:11px;
    font-weight:400;
    letter-spacing:1.1px;
}

.guide-page__hero-body h1{
    margin:0;

    color:#123c27;

    font-size:29px;
    line-height:1.05;
    font-weight:500;
    letter-spacing:-.5px;
}

.guide-page__hero-body em{
    display:block;

    margin-top:4px;

    color:#72756d;

    font-size:12px;
    font-weight:400;
}

.guide-page__hero-body > p{
    margin:11px 0 12px;

    color:#535c55;

    font-size:14px;
    line-height:1.5;
}

.guide-page__tags{
    display:flex;
    flex-wrap:wrap;
    gap:5px;
}

.guide-page__tags span{
    padding:6px 8px;

    border-radius:7px;

    background:#eee3c8;
    color:#5f5a4d;

    font-size:12px;
    line-height:1.2;
}


/* ---------------------------------------------------------
   Section titles
   --------------------------------------------------------- */

.guide-page__section-title{
    margin-bottom:11px;
}

.guide-page__section-title small{
    display:block;

    margin-bottom:3px;

    color:#91d34f;

    font-size:11px;
    font-weight:400;
    letter-spacing:1px;
}

.guide-page__section-title h2{
    margin:0;

    color:#fff;

    font-size:21px;
    line-height:1.12;
    font-weight:400;
}


/* ---------------------------------------------------------
   Quick facts
   --------------------------------------------------------- */

.guide-page__quick{
    margin-bottom:17px;
}

.guide-page__facts{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
}

.guide-page__fact{
    padding:10px 11px;

    border:1px solid #31543c;
    border-radius:12px;

    background:#10291b;
}

.guide-page__fact small{
    display:block;

    margin-bottom:4px;

    color:#91cc58;

    font-size:11px;
    letter-spacing:.8px;
}

.guide-page__fact strong{
    display:block;

    color:#eef5ef;

    font-size:13px;
    line-height:1.3;
    font-weight:400;
}


/* ---------------------------------------------------------
   Philippine note
   --------------------------------------------------------- */

.guide-page__philippines{
    display:grid;
    grid-template-columns:42px minmax(0,1fr);
    gap:11px;

    margin-bottom:18px;
    padding:14px;

    border:1px solid #d9c68f;
    border-radius:16px;

    background:
        linear-gradient(
            145deg,
            #fff8e7,
            #f2ead1
        );

    color:#1c291f;
}

.guide-page__philippines-icon{
    font-size:28px;
}

.guide-page__philippines small{
    display:block;

    margin-bottom:3px;

    color:#937024;

    font-size:11px;
    letter-spacing:1px;
}

.guide-page__philippines h2{
    margin:0 0 6px;

    color:#173c28;

    font-size:15px;
    line-height:1.2;
    font-weight:500;
}

.guide-page__philippines p{
    margin:0 0 6px;

    color:#5d625b;

    font-size:13px;
    line-height:1.5;
}

.guide-page__philippines p:last-child{
    margin-bottom:0;
}


/* ---------------------------------------------------------
   Contents
   --------------------------------------------------------- */

.guide-page__contents{
    margin-bottom:20px;
    padding:13px;

    border:1px solid #31543c;
    border-radius:15px;

    background:#0d2518;
}

.guide-page__contents > small{
    display:block;

    margin-bottom:9px;

    color:#91d34f;

    font-size:11px;
    letter-spacing:1px;
}

.guide-page__contents > div{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}

.guide-page__contents a{
    padding:7px 10px;

    border:1px solid #385b42;
    border-radius:999px;

    background:#122d1e;
    color:#ccd9cf;

    font-size:13px;
    line-height:1.2;
}


/* ---------------------------------------------------------
   Article
   --------------------------------------------------------- */

.guide-page__article-section{
    margin-bottom:13px;
    padding:16px 14px;

    border:1px solid #d9cba6;
    border-radius:17px;

    background:
        linear-gradient(
            145deg,
            #fffaf0,
            #f8efd9
        );

    color:#1b261e;

    box-shadow:0 6px 16px rgba(0,0,0,.13);
}

.guide-page__article-section .guide-page__section-title small{
    color:#668f46;
}

.guide-page__article-section .guide-page__section-title h2{
    color:#173c28;
}

.guide-page__article-section > p{
    margin:0 0 11px;

    color:#4f5851;

    font-size:14px;
    line-height:1.58;
}

.guide-page__article-section > p:last-child{
    margin-bottom:0;
}

.guide-page__article-section strong{
    font-weight:600;
}


/* ---------------------------------------------------------
   Article callouts
   --------------------------------------------------------- */

.guide-page__important,
.guide-page__avoid,
.guide-page__ph-note{
    margin:14px 0;
    padding:12px;

    border-radius:12px;
}

.guide-page__important{
    border:1px solid #b9cf9e;

    background:#eaf3dd;
}

.guide-page__important > small{
    display:block;

    margin-bottom:4px;

    color:#557d39;

    font-size:11px;
    letter-spacing:.9px;
}

.guide-page__important > strong{
    display:block;

    color:#234829;

    font-size:13px;
}

.guide-page__important p,
.guide-page__avoid p,
.guide-page__ph-note p{
    margin:5px 0 0;

    color:#566057;

    font-size:13px;
    line-height:1.5;
}

.guide-page__ph-note{
    border-left:3px solid #6fa63f;

    background:#eef2df;
}

.guide-page__ph-note > strong{
    color:#315936;

    font-size:13px;
}

.guide-page__avoid{
    border:1px solid #d8c68f;

    background:#f4ead0;
}

.guide-page__avoid small{
    display:block;

    color:#8b6824;

    font-size:11px;
    letter-spacing:.9px;
}


/* ---------------------------------------------------------
   Supporting images
   --------------------------------------------------------- */

.guide-page__figure{
    overflow:hidden;

    margin:15px 0;

    border:1px solid #d1c294;
    border-radius:13px;

    background:#efe7d3;
}

.guide-page__figure img{
    display:block;

    width:100%;
    height:190px;

    object-fit:cover;
}

.guide-page__figure figcaption{
    padding:10px 11px;

    color:#6a685f;

    font-size:12px;
    line-height:1.45;
}


/* ---------------------------------------------------------
   Vet notice
   --------------------------------------------------------- */

.guide-page__vet{
    display:grid;
    grid-template-columns:34px minmax(0,1fr);
    gap:9px;

    margin-top:14px;
    padding:11px;

    border:1px solid #d6b8a8;
    border-radius:12px;

    background:#f5e6df;
}

.guide-page__vet > span{
    display:flex;
    align-items:center;
    justify-content:center;

    width:30px;
    height:30px;

    border-radius:50%;

    background:#86584e;
    color:#fff;

    font-size:17px;
}

.guide-page__vet strong{
    display:block;

    color:#603c35;

    font-size:13px;
}

.guide-page__vet p{
    margin:4px 0 0;

    color:#6a5a56;

    font-size:12px;
    line-height:1.5;
}


/* ---------------------------------------------------------
   Sources
   --------------------------------------------------------- */

.guide-page__source-list{
    display:grid;
    gap:7px;

    margin-top:13px;
}

.guide-page__source-list > div{
    padding:9px 10px;

    border:1px solid #ded2b6;
    border-radius:10px;

    background:#f3ead7;
}

.guide-page__source-list strong,
.guide-page__source-list span{
    display:block;
}

.guide-page__source-list strong{
    color:#284b31;

    font-size:13px;
}

.guide-page__source-list span{
    margin-top:3px;

    color:#6d6d65;

    font-size:12px;
    line-height:1.4;
}


/* ---------------------------------------------------------
   Credit / editorial status
   --------------------------------------------------------- */

.guide-page__credit{
    padding:15px;

    border:1px solid #31543c;
    border-radius:16px;

    background:#10291b;
}

.guide-page__credit > small{
    display:block;

    color:#92d04f;

    font-size:11px;
    letter-spacing:1px;
}

.guide-page__credit h2{
    margin:4px 0 12px;

    color:#fff;

    font-size:18px;
    font-weight:400;
}

.guide-page__credit-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
}

.guide-page__credit-grid > div{
    min-width:0;

    padding:8px;

    border-radius:9px;

    background:#173523;
}

.guide-page__credit-grid small,
.guide-page__credit-grid strong{
    display:block;
}

.guide-page__credit-grid small{
    margin-bottom:4px;

    color:#8ab26e;

    font-size:11px;
    letter-spacing:.6px;
}

.guide-page__credit-grid strong{
    color:#eef4ef;

    font-size:13px;
    line-height:1.35;
    font-weight:400;
}

.guide-page__credit > p{
    margin:11px 0 0;

    color:#9dad9f;

    font-size:12px;
    line-height:1.5;
}


/* ---------------------------------------------------------
   404
   --------------------------------------------------------- */

.guide-page__not-found{
    padding:24px 5px;
}

.guide-page__not-found small{
    color:#98df50;

    font-size:11px;
}

.guide-page__not-found h1{
    margin:5px 0;

    font-size:28px;
    font-weight:400;
}

.guide-page__not-found p{
    color:#c5d1c8;

    font-size:13px;
}

.guide-page__not-found a{
    display:inline-block;

    margin-top:8px;

    color:#98df50;

    font-size:13px;
}


/* ---------------------------------------------------------
   Small phones
   --------------------------------------------------------- */

@media (max-width:370px){

    .guide-page{
        padding-right:12px;
        padding-left:12px;
    }

    .guide-page__hero-image{
        height:215px;
    }

    .guide-page__credit-grid{
        grid-template-columns:1fr;
    }
}


.guide-page__image-credit{
    display:block;
    margin-top:6px;
    color:#7a8179;
    font-size:11px;
    line-height:1.35;
}