/*
 * Halvdans Taverne — Shape 1.0.0
 * Functional Joomla layout built from CSS, without cropped reference artwork.
 */

:root {
    --ht-ink: #120a06;
    --ht-ink-soft: #1d110a;
    --ht-wood: #24140b;
    --ht-wood-mid: #352014;
    --ht-wood-light: #4b2b18;
    --ht-accent: #781f18;
    --ht-accent-dark: #3d0f0c;
    --ht-gold: #d7a94b;
    --ht-gold-light: #f0d184;
    --ht-gold-dark: #7b4e16;
    --ht-parchment: #e7d1a0;
    --ht-parchment-light: #f3e4bd;
    --ht-parchment-dark: #a97c45;
    --ht-text: #f2dfb2;
    --ht-text-soft: #cfb987;
    --ht-black: #080503;
    --ht-shadow: 0 18px 42px rgba(0, 0, 0, 0.55);
    --ht-border: rgba(215, 169, 75, 0.72);
    --ht-container: 1480px;
    --ht-header-height: 148px;
    --ht-radius: 2px;
    --ht-display: Cinzel, "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
    --ht-body: Alegreya, Georgia, "Times New Roman", serif;
    color-scheme: dark;
}

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

html {
    scroll-behavior: smooth;
    background: var(--ht-black);
}

body {
    margin: 0;
    min-width: 320px;
    color: var(--ht-text);
    background:
        radial-gradient(circle at 50% -15%, rgba(126, 56, 20, 0.24), transparent 42rem),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 4px),
        linear-gradient(90deg, #0b0704, #160c07 48%, #0b0704);
    font-family: var(--ht-body);
    font-size: 18px;
    line-height: 1.55;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.12;
    background:
        repeating-radial-gradient(circle at 20% 30%, rgba(255,255,255,0.12) 0 0.5px, transparent 0.5px 3px),
        repeating-linear-gradient(92deg, transparent 0 7px, rgba(0,0,0,0.15) 7px 8px);
    mix-blend-mode: soft-light;
}

img,
svg {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--ht-gold-light);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

a:hover {
    color: #fff0bd;
}

button,
input,
textarea,
select {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

:focus-visible {
    outline: 3px solid var(--ht-gold-light);
    outline-offset: 4px;
}

::selection {
    color: #fff7da;
    background: var(--ht-accent);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-block: 0 0.65em;
    color: var(--ht-gold-light);
    font-family: var(--ht-display);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: 0.025em;
    text-wrap: balance;
}

h1 { font-size: clamp(2.65rem, 5.8vw, 5.25rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.35rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.45rem); }

p,
ul,
ol,
blockquote {
    margin-block: 0 1.1em;
}

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

.ht-skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 10000;
    transform: translateY(-180%);
    padding: 0.65rem 1rem;
    color: #170b05;
    background: var(--ht-gold-light);
    border: 2px solid #fff1b9;
    font-family: var(--ht-display);
    text-decoration: none;
}

.ht-skip-link:focus {
    transform: translateY(0);
}

.ht-page-shell {
    width: 100%;
    overflow: clip;
    background:
        linear-gradient(rgba(0,0,0,0.12), rgba(0,0,0,0.12)),
        repeating-linear-gradient(90deg, transparent 0 150px, rgba(255,255,255,0.015) 150px 151px),
        linear-gradient(90deg, #100905 0, #1b0f08 50%, #100905 100%);
}

.ht-container {
    width: min(calc(100% - 44px), var(--ht-container));
    margin-inline: auto;
}

/* Header and tavern sign */
.ht-header {
    position: relative;
    z-index: 40;
    min-height: var(--ht-header-height);
    background:
        linear-gradient(180deg, rgba(0,0,0,0.28), transparent 35%),
        repeating-linear-gradient(1deg, transparent 0 12px, rgba(255,255,255,0.018) 12px 13px),
        linear-gradient(90deg, #0a0604, #25150c 28%, #1b1009 78%, #090503);
    border-bottom: 2px solid #4b2c14;
    box-shadow: 0 10px 28px rgba(0,0,0,0.68), inset 0 -1px rgba(215,169,75,0.25);
}

.has-sticky-header .ht-header {
    position: sticky;
    top: 0;
}

.ht-header::before,
.ht-header::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    pointer-events: none;
}

.ht-header::before {
    top: 0;
    height: 13px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.08), transparent),
        repeating-linear-gradient(90deg, #160d08 0 90px, #24140b 90px 190px, #100905 190px 260px);
    border-bottom: 1px solid rgba(215,169,75,0.2);
}

.ht-header::after {
    bottom: -9px;
    height: 10px;
    background:
        linear-gradient(90deg, transparent, rgba(215,169,75,0.5) 12%, rgba(215,169,75,0.18) 50%, rgba(215,169,75,0.5) 88%, transparent),
        repeating-linear-gradient(90deg, #1a0f08 0 8px, #321d10 8px 16px);
    border-block: 1px solid #7a4b1d;
    box-shadow: 0 6px 10px rgba(0,0,0,0.65);
}

.ht-header.is-scrolled {
    box-shadow: 0 14px 34px rgba(0,0,0,0.85), inset 0 -1px rgba(215,169,75,0.28);
}

.ht-header__beam {
    position: absolute;
    top: 12px;
    bottom: 0;
    left: clamp(205px, 24vw, 380px);
    width: 8px;
    background: linear-gradient(90deg, #080402, #422511 42%, #0d0704);
    box-shadow: 1px 0 rgba(215,169,75,0.18), 8px 0 18px rgba(0,0,0,0.4);
}

.ht-header__inner {
    position: relative;
    display: grid;
    grid-template-columns: clamp(250px, 27vw, 410px) minmax(0, 1fr);
    align-items: stretch;
    width: min(100%, 1580px);
    min-height: var(--ht-header-height);
    margin-inline: auto;
}

.ht-brand {
    position: relative;
    display: grid;
    place-items: center;
    min-height: var(--ht-header-height);
    padding: 20px 20px 12px;
    color: inherit;
    text-decoration: none;
}

.ht-brand::before,
.ht-brand::after {
    content: "";
    position: absolute;
    top: -18px;
    width: 9px;
    height: 62px;
    background: linear-gradient(90deg, #4d2a10, #c28a37 45%, #5c3312);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 2px 8px #000;
}

.ht-brand::before { left: 22%; }
.ht-brand::after { right: 22%; }

.ht-brand__image {
    display: block;
    max-width: min(100%, 360px);
    max-height: 126px;
    object-fit: contain;
    filter: drop-shadow(0 10px 12px rgba(0,0,0,0.7));
}

.ht-brand__sign {
    position: relative;
    display: grid;
    place-items: center;
    width: min(100%, 345px);
    min-height: 118px;
    padding: 18px 36px 26px;
    color: var(--ht-gold-light);
    background:
        radial-gradient(ellipse at 50% 20%, rgba(130,75,26,0.22), transparent 46%),
        repeating-linear-gradient(2deg, transparent 0 13px, rgba(255,255,255,0.02) 13px 14px),
        linear-gradient(90deg, #120a05, #2b180c 45%, #170c06);
    border: 2px solid var(--ht-gold-dark);
    clip-path: polygon(4% 10%, 14% 0, 86% 0, 96% 10%, 100% 72%, 86% 88%, 50% 100%, 14% 88%, 0 72%);
    filter: drop-shadow(0 12px 14px rgba(0,0,0,0.78));
    isolation: isolate;
}

.ht-brand__sign::before {
    content: "";
    position: absolute;
    inset: 7px;
    z-index: -1;
    border: 1px solid rgba(240,209,132,0.6);
    clip-path: inherit;
}

.ht-brand__sign::after {
    content: "";
    position: absolute;
    inset: 14px 20px 25px;
    z-index: -1;
    border-block: 1px solid rgba(215,169,75,0.38);
}

.ht-brand__title {
    max-width: 12ch;
    font-family: var(--ht-display);
    font-size: clamp(1.55rem, 2.7vw, 2.55rem);
    line-height: 0.98;
    letter-spacing: 0.035em;
    text-align: center;
    text-shadow: 0 3px 0 #2c1307, 0 0 14px rgba(215,169,75,0.18);
}

.ht-brand__ornament {
    position: absolute;
    top: 9px;
    font-size: 0.65rem;
    color: #f4d991;
}

.ht-brand__mark {
    position: absolute;
    bottom: 8px;
    display: inline-grid;
    place-items: center;
    min-width: 48px;
    height: 23px;
    padding-inline: 8px;
    color: #f2d887;
    background: #1d0f07;
    border: 1px solid #a46b22;
    border-radius: 50%;
    font-family: var(--ht-display);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
}

.ht-header__content {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding-top: 17px;
}

.ht-topbar {
    min-height: 28px;
    padding: 3px clamp(22px, 4vw, 56px) 0;
    color: var(--ht-text-soft);
    font-size: 0.82rem;
    text-align: right;
}

.ht-menu-toggle {
    display: none;
}

.ht-navigation {
    flex: 1;
    display: flex;
    align-items: stretch;
    min-width: 0;
}

.ht-navigation .mod-menu,
.ht-navigation .nav,
.ht-demo-menu {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ht-navigation .mod-menu > li,
.ht-demo-menu > li {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    border-inline-start: 1px solid rgba(215,169,75,0.16);
}

.ht-navigation .mod-menu > li:last-child,
.ht-demo-menu > li:last-child {
    border-inline-end: 1px solid rgba(215,169,75,0.16);
}

.ht-navigation .mod-menu > li > a,
.ht-navigation .mod-menu > li > span,
.ht-demo-menu > li > a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100px;
    padding: 17px clamp(12px, 1.8vw, 30px) 20px;
    color: var(--ht-text);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.018), transparent 55%),
        repeating-linear-gradient(1deg, transparent 0 11px, rgba(0,0,0,0.16) 11px 12px);
    font-family: var(--ht-display);
    font-size: clamp(0.86rem, 1.18vw, 1.2rem);
    letter-spacing: 0.02em;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 2px 2px #000;
    transition: color 160ms ease, background 160ms ease, transform 160ms ease;
}

.ht-navigation .mod-menu > li > a::after,
.ht-navigation .mod-menu > li > span::after,
.ht-demo-menu > li > a::after {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: 12px;
    height: 2px;
    transform: scaleX(0);
    background: linear-gradient(90deg, transparent, var(--ht-gold), transparent);
    transition: transform 160ms ease;
}

.ht-navigation .mod-menu > li:hover > a,
.ht-navigation .mod-menu > li:hover > span,
.ht-navigation .mod-menu > li:focus-within > a,
.ht-navigation .mod-menu > li.active > a,
.ht-navigation .mod-menu > li.current > a,
.ht-demo-menu > li:hover > a,
.ht-demo-menu > li.active > a {
    color: #fff1bd;
    background:
        linear-gradient(180deg, rgba(120,31,24,0.9), rgba(61,15,12,0.94)),
        repeating-linear-gradient(0deg, transparent 0 8px, rgba(255,255,255,0.025) 8px 9px);
}

.ht-navigation .mod-menu > li:hover > a::after,
.ht-navigation .mod-menu > li:focus-within > a::after,
.ht-navigation .mod-menu > li.active > a::after,
.ht-navigation .mod-menu > li.current > a::after,
.ht-demo-menu > li:hover > a::after,
.ht-demo-menu > li.active > a::after {
    transform: scaleX(1);
}

.ht-navigation .mod-menu > li.active::before,
.ht-navigation .mod-menu > li.current::before,
.ht-demo-menu > li.active::before {
    content: "";
    position: absolute;
    inset: 0 10px -20px;
    z-index: -1;
    background: linear-gradient(180deg, var(--ht-accent), var(--ht-accent-dark));
    border-inline: 1px solid #a56927;
    clip-path: polygon(0 0, 100% 0, 100% 83%, 50% 100%, 0 83%);
    filter: drop-shadow(0 7px 7px rgba(0,0,0,0.65));
}

.ht-navigation .mod-menu ul {
    position: absolute;
    top: calc(100% - 1px);
    left: 0;
    z-index: 50;
    display: none;
    width: min(320px, 85vw);
    margin: 0;
    padding: 8px;
    list-style: none;
    background:
        repeating-linear-gradient(1deg, transparent 0 12px, rgba(255,255,255,0.02) 12px 13px),
        #1d1008;
    border: 1px solid #8b5b25;
    box-shadow: var(--ht-shadow), inset 0 0 0 3px #0b0603;
}

.ht-navigation .mod-menu li:hover > ul,
.ht-navigation .mod-menu li:focus-within > ul {
    display: block;
}

.ht-navigation .mod-menu ul a,
.ht-navigation .mod-menu ul span {
    display: block;
    padding: 0.68rem 0.8rem;
    color: var(--ht-text);
    border-bottom: 1px solid rgba(215,169,75,0.16);
    font-family: var(--ht-display);
    text-decoration: none;
}

.ht-navigation .mod-menu ul a:hover,
.ht-navigation .mod-menu ul a:focus-visible {
    color: #fff0bd;
    background: rgba(120,31,24,0.72);
}

/* Hero */
.ht-hero {
    position: relative;
    min-height: clamp(440px, 34vw, 535px);
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 36% 66%, rgba(255,130,35,0.34) 0 3%, rgba(132,43,8,0.2) 8%, transparent 24%),
        radial-gradient(circle at 70% 34%, rgba(255,172,64,0.18) 0 2%, transparent 14%),
        linear-gradient(90deg, rgba(5,3,2,0.94) 0 15%, rgba(14,8,4,0.4) 42%, rgba(7,4,2,0.22) 70%, rgba(5,3,2,0.76) 100%),
        repeating-linear-gradient(90deg, transparent 0 150px, rgba(0,0,0,0.22) 150px 158px),
        linear-gradient(180deg, #1b1009, #28160b 46%, #0b0704);
    border-bottom: 1px solid #6d421c;
}

.ht-hero.has-image {
    background:
        linear-gradient(90deg, rgba(5,3,2,0.94) 0 12%, rgba(8,4,2,0.64) 32%, rgba(5,3,2,0.22) 67%, rgba(5,3,2,0.7) 100%),
        linear-gradient(180deg, rgba(0,0,0,0.38), rgba(0,0,0,0.2) 55%, rgba(0,0,0,0.72)),
        var(--ht-hero-image) center / cover no-repeat;
}

.ht-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(0,0,0,0.72), transparent 52%),
        radial-gradient(ellipse at 26% 66%, rgba(255,156,55,0.22), transparent 28%),
        radial-gradient(ellipse at 74% 50%, transparent 30%, rgba(0,0,0,0.44) 100%);
}

.ht-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.26;
    background:
        repeating-linear-gradient(90deg, transparent 0 18%, rgba(0,0,0,0.52) 18% 19%, transparent 19% 35%),
        repeating-linear-gradient(0deg, transparent 0 84px, rgba(0,0,0,0.22) 84px 88px);
    clip-path: polygon(0 0, 100% 0, 100% 52%, 70% 48%, 70% 100%, 0 100%);
}


.ht-hero__set {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: 0.88;
}

.ht-fireplace {
    position: absolute;
    left: 35%;
    bottom: 8%;
    width: clamp(150px, 16vw, 235px);
    height: clamp(150px, 16vw, 225px);
    background:
        repeating-linear-gradient(0deg, transparent 0 29px, rgba(0,0,0,0.35) 29px 33px),
        repeating-linear-gradient(90deg, #342013 0 46px, #25150d 46px 50px);
    border: 9px solid #201209;
    border-bottom-width: 17px;
    border-radius: 48% 48% 3px 3px / 32% 32% 3px 3px;
    box-shadow: 0 0 0 3px #4c2d16, 0 16px 35px rgba(0,0,0,0.72), inset 0 0 28px rgba(0,0,0,0.7);
}

.ht-fireplace::before {
    content: "";
    position: absolute;
    left: 18%;
    right: 18%;
    bottom: 5%;
    height: 66%;
    background:
        radial-gradient(ellipse at 50% 100%, rgba(255,128,28,0.55), transparent 42%),
        #070403;
    border: 5px solid #0c0603;
    border-radius: 50% 50% 0 0 / 58% 58% 0 0;
    box-shadow: inset 0 0 30px #000;
}

.ht-fireplace i,
.ht-fireplace b {
    position: absolute;
    z-index: 2;
    bottom: 17%;
    left: 50%;
    display: block;
    width: 27%;
    height: 45%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at 50% 72%, #ffe69b 0 12%, #ff9b2f 28%, #b6330c 53%, transparent 70%);
    border-radius: 52% 48% 48% 52% / 72% 72% 28% 28%;
    filter: drop-shadow(0 0 14px rgba(255,112,18,0.85));
}

.ht-fireplace b {
    left: 39%;
    width: 17%;
    height: 30%;
    transform: rotate(-16deg);
    opacity: 0.78;
}

.ht-lantern {
    position: absolute;
    top: 13%;
    width: 44px;
    height: 64px;
    border: 3px solid #3d2411;
    background:
        radial-gradient(circle, #fff2b5 0 8%, #ffbd52 18%, #a74712 38%, rgba(53,23,8,0.74) 60%),
        #1d0f07;
    box-shadow: 0 0 28px rgba(255,150,42,0.47), inset 0 0 0 2px #0b0502;
    clip-path: polygon(20% 0, 80% 0, 100% 22%, 87% 100%, 13% 100%, 0 22%);
}

.ht-lantern::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 100%;
    width: 3px;
    height: 92px;
    transform: translateX(-50%);
    background: repeating-linear-gradient(#8b5a24 0 5px, #201006 5px 9px);
    box-shadow: 0 0 4px #000;
}

.ht-lantern::after {
    content: "";
    position: absolute;
    inset: 9px 12px;
    border-inline: 2px solid rgba(255,222,142,0.52);
}

.ht-lantern i {
    position: absolute;
    left: 50%;
    bottom: 14px;
    width: 11px;
    height: 24px;
    transform: translateX(-50%);
    background: linear-gradient(#fff4b4, #ff9a2b 58%, transparent);
    border-radius: 50% 50% 35% 35%;
    filter: drop-shadow(0 0 7px #ffac35);
}

.ht-lantern--one { left: 52%; }
.ht-lantern--two { left: 72%; top: 16%; transform: scale(0.86); opacity: 0.9; }

.ht-tavern-window {
    position: absolute;
    top: 17%;
    right: 9%;
    width: clamp(90px, 9vw, 138px);
    height: clamp(140px, 15vw, 205px);
    background:
        linear-gradient(90deg, transparent 47%, #25160d 47% 53%, transparent 53%),
        linear-gradient(0deg, transparent 48%, #25160d 48% 53%, transparent 53%),
        linear-gradient(180deg, #273746, #17202a 55%, #090d12);
    border: 9px solid #25150b;
    border-radius: 48% 48% 0 0 / 28% 28% 0 0;
    box-shadow: 0 0 0 2px #4b2d16, inset 0 0 28px rgba(0,0,0,0.68);
    opacity: 0.72;
}

.ht-tavern-shelves {
    position: absolute;
    top: 29%;
    right: 22%;
    width: 23%;
    height: 120px;
    background:
        radial-gradient(ellipse at 12px 80%, #5b2e13 0 5px, #1b0c05 6px 9px, transparent 10px) 0 4px / 28px 46px repeat-x,
        linear-gradient(#4a2a15 0 7px, transparent 7px 50px, #4a2a15 50px 57px, transparent 57px 100px, #4a2a15 100px 107px, transparent 107px);
    opacity: 0.55;
    filter: drop-shadow(0 5px 7px #000);
}

.ht-tavern-bar {
    position: absolute;
    right: -2%;
    bottom: 6%;
    width: 43%;
    height: 105px;
    transform: perspective(500px) rotateX(2deg);
    background:
        linear-gradient(180deg, #6c3a19 0 8px, #29150b 9px 16px, transparent 17px),
        repeating-linear-gradient(90deg, #2d180d 0 64px, #160b06 64px 69px),
        linear-gradient(180deg, #321b0e, #130906);
    border-top: 4px solid #865326;
    box-shadow: 0 -7px 16px rgba(0,0,0,0.7), inset 0 0 0 2px #100704;
}

.ht-tavern-bar::before {
    content: "";
    position: absolute;
    left: 5%;
    right: 9%;
    top: -32px;
    height: 24px;
    background:
        radial-gradient(ellipse at 12px 70%, #70401d 0 5px, #1c0b05 6px 9px, transparent 10px) 0 0 / 44px 24px repeat-x;
    opacity: 0.82;
}

.ht-tavern-bar::after {
    content: "";
    position: absolute;
    left: 10%;
    right: 12%;
    bottom: -44px;
    height: 64px;
    background:
        radial-gradient(ellipse at 50% 11px, #2c1609 0 16px, #5a3418 17px 20px, transparent 21px) 0 0 / 82px 64px repeat-x;
    opacity: 0.82;
}

.ht-tavern-table {
    position: absolute;
    bottom: 9%;
    width: clamp(120px, 13vw, 195px);
    height: 43px;
    transform: skewX(-8deg);
    background: repeating-linear-gradient(90deg, #4c2914 0 37px, #281309 37px 41px);
    border: 3px solid #160a05;
    box-shadow: 0 7px 13px rgba(0,0,0,0.72);
}

.ht-tavern-table::before,
.ht-tavern-table::after {
    content: "";
    position: absolute;
    top: 35px;
    width: 15px;
    height: 74px;
    background: #1d0e07;
    box-shadow: inset 0 0 0 2px #080402;
}

.ht-tavern-table::before { left: 22px; transform: skewX(5deg); }
.ht-tavern-table::after { right: 22px; transform: skewX(-5deg); }
.ht-tavern-table--one { left: 56%; }
.ht-tavern-table--two { left: 24%; bottom: 3%; transform: scale(0.75) skewX(6deg); opacity: 0.58; }


.ht-hero__atmosphere {
    position: absolute;
    inset: auto 0 0;
    height: 46%;
    pointer-events: none;
    background:
        linear-gradient(180deg, transparent, rgba(0,0,0,0.52)),
        repeating-linear-gradient(90deg, transparent 0 115px, rgba(0,0,0,0.48) 115px 128px);
    mask-image: linear-gradient(to bottom, transparent, #000 50%);
}

.ht-hero__inner {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    min-height: inherit;
    padding-block: clamp(48px, 5vw, 78px) clamp(46px, 5vw, 72px);
}

.ht-hero__copy {
    position: relative;
    width: min(670px, 92%);
    padding: clamp(28px, 4vw, 52px) clamp(24px, 4vw, 54px);
    text-shadow: 0 2px 4px rgba(0,0,0,0.95);
}

.ht-hero__copy::before {
    content: "";
    position: absolute;
    inset: -12% -8% -15% -15%;
    z-index: -1;
    background: radial-gradient(ellipse at 38% 50%, rgba(0,0,0,0.86), rgba(0,0,0,0.5) 42%, transparent 72%);
    filter: blur(3px);
}

.ht-eyebrow {
    margin-bottom: 0.1em;
    color: var(--ht-gold-light);
    font-family: var(--ht-display);
    font-size: clamp(1.35rem, 2.6vw, 2.35rem);
    font-variant: small-caps;
    letter-spacing: 0.035em;
}

.ht-hero h1 {
    max-width: 17ch;
    margin-bottom: 0.22em;
    font-size: clamp(2.8rem, 4.25vw, 4.45rem);
    font-variant: small-caps;
    text-shadow: 0 3px 1px #351607, 0 0 22px rgba(215,169,75,0.13);
}

.ht-title-divider {
    display: flex;
    align-items: center;
    width: min(100%, 500px);
    margin-block: 0.7rem 1.1rem;
}

.ht-title-divider::before,
.ht-title-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ht-gold));
}

.ht-title-divider::after {
    background: linear-gradient(90deg, var(--ht-gold), transparent);
}

.ht-title-divider span {
    width: 11px;
    height: 11px;
    margin-inline: 9px;
    transform: rotate(45deg);
    background: var(--ht-gold);
    box-shadow: 0 0 0 3px #2d1609, 0 0 12px rgba(215,169,75,0.45);
}

.ht-hero__lead {
    max-width: 40ch;
    color: #f5e5bf;
    font-size: clamp(1.08rem, 1.8vw, 1.35rem);
    line-height: 1.45;
}

.ht-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    min-height: 48px;
    padding: 0.7rem 1.55rem;
    color: var(--ht-text);
    border: 1px solid var(--ht-gold-dark);
    border-radius: var(--ht-radius);
    font-family: var(--ht-display);
    font-size: 0.96rem;
    font-variant: small-caps;
    letter-spacing: 0.035em;
    text-decoration: none;
    text-shadow: 0 2px #000;
    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.55), 0 8px 16px rgba(0,0,0,0.38);
    transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
}

.ht-button::before,
.ht-button::after {
    content: "";
    position: absolute;
    top: 6px;
    bottom: 6px;
    width: 6px;
    border-block: 1px solid rgba(240,209,132,0.42);
}
.ht-button::before { left: 6px; border-left: 1px solid rgba(240,209,132,0.42); }
.ht-button::after { right: 6px; border-right: 1px solid rgba(240,209,132,0.42); }

.ht-button--primary {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.06), transparent 45%),
        linear-gradient(180deg, var(--ht-accent), var(--ht-accent-dark));
}

.ht-button:hover,
.ht-button:focus-visible {
    color: #fff4cf;
    transform: translateY(-2px);
    filter: brightness(1.14);
    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.48), 0 11px 20px rgba(0,0,0,0.5), 0 0 18px rgba(215,169,75,0.16);
}

.ht-button b {
    font-size: 1.35em;
    font-weight: 400;
}

.ht-hero__lower-edge {
    position: absolute;
    z-index: 4;
    left: 0;
    right: 0;
    bottom: 0;
    height: 18px;
    background:
        linear-gradient(90deg, transparent, rgba(215,169,75,0.62) 12%, rgba(215,169,75,0.2) 50%, rgba(215,169,75,0.62) 88%, transparent),
        repeating-linear-gradient(90deg, #160c07 0 12px, #3c2312 12px 24px);
    border-block: 1px solid #6f431c;
}

/* Homepage board */
.ht-home-board {
    position: relative;
    padding-block: 20px 28px;
    background:
        repeating-linear-gradient(1deg, transparent 0 18px, rgba(255,255,255,0.015) 18px 19px),
        linear-gradient(90deg, #120a05, #23140b 50%, #100905);
    border-bottom: 1px solid #583313;
}

.ht-home-board__grid {
    display: grid;
    grid-template-columns: minmax(0, 2.25fr) minmax(310px, 0.95fr);
    gap: 20px;
    align-items: stretch;
}

.ht-feature-region {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.ht-feature-card {
    position: relative;
    min-width: 0;
    min-height: 390px;
    padding: 9px;
    color: var(--ht-text);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.025), transparent 22%),
        #120a05;
    border: 1px solid #8f5b24;
    box-shadow: inset 0 0 0 4px #0a0503, inset 0 0 0 5px rgba(215,169,75,0.26), 0 10px 20px rgba(0,0,0,0.48);
    isolation: isolate;
}

.ht-feature-card::before,
.ht-feature-card::after {
    content: "";
    position: absolute;
    z-index: 3;
    width: 32px;
    height: 32px;
    border-color: var(--ht-gold-dark);
    pointer-events: none;
}

.ht-feature-card::before {
    top: 12px;
    left: 12px;
    border-top: 2px solid;
    border-left: 2px solid;
}

.ht-feature-card::after {
    right: 12px;
    bottom: 12px;
    border-right: 2px solid;
    border-bottom: 2px solid;
}

.ht-medallion {
    position: absolute;
    top: -25px;
    left: 50%;
    z-index: 5;
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    transform: translateX(-50%);
    color: var(--ht-gold-light);
    background:
        radial-gradient(circle, #4a2710 0 36%, #160b05 38% 57%, #8e5a21 59% 63%, #110804 65%);
    border: 2px solid #9b6428;
    border-radius: 50%;
    box-shadow: 0 8px 14px rgba(0,0,0,0.66), inset 0 0 0 3px #1a0b04;
    font-family: var(--ht-display);
    font-size: 1.55rem;
    text-shadow: 0 2px #000;
    transition: transform 180ms ease, filter 180ms ease;
}

.ht-feature-card:hover .ht-medallion {
    transform: translateX(-50%) translateY(-3px) rotate(-3deg);
    filter: brightness(1.18);
}

.ht-feature-card__visual {
    position: relative;
    display: grid;
    place-items: center;
    height: 180px;
    overflow: hidden;
    background:
        radial-gradient(circle at 74% 28%, rgba(240,177,73,0.35), transparent 18%),
        linear-gradient(155deg, rgba(94,38,15,0.45), transparent 45%),
        repeating-linear-gradient(75deg, transparent 0 26px, rgba(0,0,0,0.18) 26px 30px),
        linear-gradient(180deg, #45301e, #15100b 72%);
    border: 1px solid #6d421c;
    box-shadow: inset 0 -34px 55px rgba(0,0,0,0.82);
}

.ht-feature-card__visual::before,
.ht-feature-card__visual::after {
    content: "";
    position: absolute;
    bottom: -12%;
    width: 70%;
    height: 68%;
    background: #090604;
    opacity: 0.78;
}

.ht-feature-card__visual::before {
    left: -12%;
    clip-path: polygon(0 100%, 18% 46%, 34% 67%, 48% 28%, 62% 55%, 78% 20%, 100% 100%);
}

.ht-feature-card__visual::after {
    right: -12%;
    clip-path: polygon(0 100%, 18% 62%, 32% 73%, 50% 31%, 66% 66%, 80% 43%, 100% 100%);
}

.ht-feature-card__visual--hero::before {
    left: 18%;
    bottom: 0;
    width: 38%;
    height: 78%;
    clip-path: polygon(43% 0, 61% 6%, 70% 24%, 63% 35%, 77% 53%, 87% 100%, 10% 100%, 20% 54%, 34% 34%, 28% 20%);
}

.ht-feature-card__visual--hero::after {
    right: 11%;
    width: 38%;
    height: 64%;
    border-radius: 50%;
    opacity: 0.54;
}

.ht-feature-card__visual--adventure::before {
    left: 9%;
    bottom: 2%;
    width: 82%;
    height: 75%;
    clip-path: polygon(0 72%, 13% 58%, 23% 51%, 28% 28%, 42% 19%, 48% 0, 56% 21%, 72% 30%, 79% 49%, 100% 64%, 84% 71%, 68% 63%, 49% 71%, 29% 65%, 11% 85%);
}

.ht-feature-card__visual > span {
    position: relative;
    z-index: 2;
    color: rgba(240,209,132,0.33);
    font-family: var(--ht-display);
    font-size: 5rem;
    text-shadow: 0 8px 14px #000;
}

.ht-feature-card__body {
    padding: 22px 18px 16px;
    text-align: center;
}

.ht-feature-card__body h2 {
    margin-bottom: 0.38em;
    font-size: clamp(1.35rem, 2vw, 1.9rem);
    text-transform: uppercase;
}

.ht-feature-card__body p {
    margin-bottom: 0.9em;
    color: var(--ht-text-soft);
    font-size: 0.98rem;
    line-height: 1.42;
}

.ht-feature-card__body > a:last-child {
    display: inline-flex;
    gap: 0.45em;
    color: var(--ht-gold-light);
    font-family: var(--ht-display);
    font-size: 0.82rem;
    font-variant: small-caps;
    letter-spacing: 0.04em;
    text-decoration: none;
}

.ht-feature-card__body > a:last-child:hover span {
    transform: translateX(4px);
}

.ht-feature-card__body > a:last-child span {
    transition: transform 160ms ease;
}

.ht-news-region {
    min-width: 0;
}

.ht-parchment-panel {
    position: relative;
    min-height: 100%;
    padding: clamp(28px, 3vw, 42px) clamp(24px, 3vw, 38px) 30px;
    color: #2b180e;
    background:
        radial-gradient(circle at 12% 18%, rgba(100,55,22,0.10) 0 1px, transparent 1px 100%),
        radial-gradient(circle at 80% 62%, rgba(100,55,22,0.08) 0 1px, transparent 1px 100%),
        linear-gradient(105deg, rgba(255,255,255,0.38), transparent 26%),
        var(--ht-parchment);
    background-size: 29px 31px, 23px 27px, auto, auto;
    border: 1px solid #6d421c;
    box-shadow: inset 0 0 34px rgba(89,44,15,0.3), 0 12px 25px rgba(0,0,0,0.42);
    clip-path: polygon(1.5% 2%, 8% 0, 17% 1.2%, 27% 0.3%, 38% 1.5%, 49% 0, 61% 1.2%, 73% 0.2%, 85% 1.4%, 98.5% 0, 100% 10%, 98.8% 22%, 100% 36%, 98.7% 50%, 100% 64%, 98.5% 78%, 100% 92%, 97% 100%, 85% 98.8%, 73% 100%, 60% 98.8%, 48% 100%, 34% 98.6%, 20% 100%, 7% 98.7%, 0 100%, 1.3% 86%, 0 72%, 1.2% 58%, 0 43%, 1.4% 28%, 0 14%);
}

.ht-parchment-panel::before {
    content: "";
    position: absolute;
    inset: 10px;
    pointer-events: none;
    border: 1px solid rgba(83,41,15,0.22);
}

.ht-parchment-panel h2 {
    position: relative;
    margin-bottom: 0.75em;
    color: #382014;
    font-size: clamp(1.55rem, 2.4vw, 2.15rem);
    text-align: center;
    text-transform: uppercase;
}

.ht-parchment-panel h2::before,
.ht-parchment-panel h2::after {
    content: "~";
    margin-inline: 0.4em;
    color: #7d4e24;
    font-size: 0.7em;
}

.ht-news-list {
    display: grid;
    gap: 15px;
}

.ht-news-list article {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 14px;
    padding-bottom: 13px;
    border-bottom: 1px solid rgba(92,47,20,0.25);
}

.ht-news-list time {
    display: grid;
    place-items: center;
    align-self: start;
    min-height: 58px;
    color: #2a160d;
    background: rgba(118,73,31,0.12);
    border: 1px solid #6f421d;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.22);
    font-family: var(--ht-display);
    line-height: 1;
}

.ht-news-list time b {
    font-size: 1.15rem;
    font-weight: 500;
}

.ht-news-list time span {
    font-size: 0.67rem;
    text-transform: uppercase;
}

.ht-news-list h3 {
    margin: 0 0 0.22rem;
    color: #342015;
    font-family: var(--ht-body);
    font-size: 1.03rem;
    font-weight: 700;
    letter-spacing: 0;
}

.ht-news-list p {
    margin: 0;
    color: #3a2418;
    font-size: 0.9rem;
    line-height: 1.32;
}

.ht-text-link {
    display: inline-flex;
    gap: 0.5rem;
    margin-top: 18px;
    color: inherit;
    font-family: var(--ht-display);
    font-size: 0.78rem;
    font-variant: small-caps;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none;
}

.ht-text-link:hover {
    color: #7d2719;
}

/* Lower deck */
.ht-lower-deck {
    padding-block: 0 18px;
    background:
        repeating-linear-gradient(1deg, transparent 0 16px, rgba(255,255,255,0.012) 16px 17px),
        linear-gradient(90deg, #0f0804, #211209 50%, #0d0704);
}

.ht-lower-deck__grid {
    display: grid;
    grid-template-columns: minmax(330px, 0.92fr) minmax(0, 2.15fr);
    gap: 20px;
    align-items: stretch;
}

.ht-diary-panel,
.ht-quote-panel,
.ht-panel {
    position: relative;
    color: var(--ht-text);
    background:
        repeating-linear-gradient(1deg, transparent 0 13px, rgba(255,255,255,0.018) 13px 14px),
        linear-gradient(90deg, #140b06, #2a170b 48%, #160c06);
    border: 1px solid #825321;
    box-shadow: inset 0 0 0 3px #080402, inset 0 0 0 4px rgba(215,169,75,0.18), var(--ht-shadow);
}

.ht-diary-panel {
    min-height: 100%;
    padding: 18px 24px 16px;
}

.ht-diary-panel h2,
.ht-panel__title {
    margin-bottom: 0.7rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(215,169,75,0.28);
    font-size: 1.1rem;
    font-variant: small-caps;
    text-transform: uppercase;
}

.ht-diary-panel ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ht-diary-panel li {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 14px;
    padding: 0.18rem 0;
    border-bottom: 1px solid rgba(215,169,75,0.09);
    font-size: 0.84rem;
}

.ht-diary-panel time {
    color: var(--ht-gold-light);
    font-variant-numeric: tabular-nums;
}

.ht-diary-panel a {
    color: var(--ht-text);
    text-decoration: none;
}

.ht-diary-panel a:hover {
    color: var(--ht-gold-light);
}

.ht-quote-panel {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr) auto;
    align-items: center;
    min-height: 100%;
    margin: 0;
    padding: clamp(20px, 3vw, 34px) clamp(24px, 3.5vw, 52px);
    background:
        radial-gradient(circle at 12% 50%, rgba(215,169,75,0.09), transparent 20%),
        linear-gradient(90deg, #1b0c07, #3c120e 48%, #180a06);
}

.ht-quote-panel::before,
.ht-quote-panel::after {
    content: "";
    position: absolute;
    width: 44px;
    height: 44px;
    border-color: var(--ht-gold-dark);
}

.ht-quote-panel::before {
    top: 9px;
    left: 9px;
    border-top: 2px solid;
    border-left: 2px solid;
}

.ht-quote-panel::after {
    right: 9px;
    bottom: 9px;
    border-right: 2px solid;
    border-bottom: 2px solid;
}

.ht-quote-panel p,
.ht-quote-panel > div {
    margin: 0;
    color: #ead6a9;
    font-size: clamp(1.15rem, 2vw, 1.55rem);
    font-style: italic;
    line-height: 1.45;
}

.ht-quote-panel footer {
    margin-left: 2rem;
    color: var(--ht-gold-light);
    font-family: var(--ht-display);
    font-size: clamp(1.2rem, 2.2vw, 1.8rem);
    font-style: italic;
    white-space: nowrap;
}

.ht-quote-panel__mug,
.ht-quote-panel__candle {
    color: var(--ht-gold-light);
    font-size: 2.35rem;
    text-align: center;
    text-shadow: 0 0 14px rgba(215,169,75,0.25);
}

.ht-quote-panel__candle {
    align-self: end;
    color: #ffd06d;
    text-shadow: 0 0 12px #e36b1c, 0 0 28px rgba(255,151,43,0.5);
}

/* Main content and Joomla output */
.ht-main-section {
    position: relative;
    padding-block: clamp(34px, 5vw, 72px);
    background:
        radial-gradient(circle at 50% 0, rgba(106,52,18,0.17), transparent 48rem),
        repeating-linear-gradient(0deg, transparent 0 22px, rgba(255,255,255,0.012) 22px 23px),
        #100905;
}

.ht-main-section--inner {
    min-height: 62vh;
    padding-top: clamp(44px, 6vw, 88px);
}

.ht-main-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.ht-main-layout.has-left {
    grid-template-columns: minmax(230px, 0.3fr) minmax(0, 1fr);
}

.ht-main-layout.has-right {
    grid-template-columns: minmax(0, 1fr) minmax(230px, 0.3fr);
}

.ht-main-layout.has-left.has-right {
    grid-template-columns: minmax(210px, 0.25fr) minmax(0, 1fr) minmax(210px, 0.25fr);
}

.ht-sidebar,
.ht-component,
.ht-main-top,
.ht-main-bottom {
    min-width: 0;
}

.ht-component {
    padding: clamp(24px, 4vw, 48px);
    color: #ead8ad;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.018), transparent 12%),
        repeating-linear-gradient(1deg, transparent 0 16px, rgba(255,255,255,0.012) 16px 17px),
        #1b1009;
    border: 1px solid #775020;
    box-shadow: inset 0 0 0 4px #0a0503, inset 0 0 0 5px rgba(215,169,75,0.14), var(--ht-shadow);
}

.ht-component--standalone {
    width: min(calc(100% - 32px), 1180px);
    margin: 32px auto;
}

.ht-component h1,
.ht-component .page-header h1,
.ht-component .page-header h2 {
    padding-bottom: 0.35em;
    border-bottom: 1px solid rgba(215,169,75,0.24);
}

.ht-component table {
    width: 100%;
    border-collapse: collapse;
    color: inherit;
}

.ht-component th,
.ht-component td {
    padding: 0.7rem 0.8rem;
    border: 1px solid rgba(215,169,75,0.22);
    text-align: left;
}

.ht-component th {
    color: var(--ht-gold-light);
    background: rgba(0,0,0,0.24);
    font-family: var(--ht-display);
}

.ht-component input,
.ht-component textarea,
.ht-component select,
.ht-login-form input {
    width: 100%;
    padding: 0.7rem 0.8rem;
    color: #f8e7bd;
    background: #0d0704;
    border: 1px solid #765022;
    border-radius: 1px;
}

.ht-component label,
.ht-login-form label {
    display: block;
    margin-bottom: 0.3rem;
    color: var(--ht-gold-light);
    font-family: var(--ht-display);
}

.ht-component button,
.ht-component .btn,
.ht-component input[type="submit"],
.ht-component input[type="button"],
.sppb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.58rem 1.15rem;
    color: var(--ht-text);
    background: linear-gradient(180deg, var(--ht-accent), var(--ht-accent-dark));
    border: 1px solid var(--ht-gold-dark);
    border-radius: 1px;
    font-family: var(--ht-display);
    text-decoration: none;
    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.38);
}

.ht-component .btn:hover,
.ht-component button:hover,
.sppb-btn:hover {
    color: #fff1bd;
    filter: brightness(1.12);
}

.ht-breadcrumbs {
    margin-bottom: 18px;
    color: var(--ht-text-soft);
    font-size: 0.9rem;
}

.ht-breadcrumbs ol,
.ht-breadcrumbs ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ht-breadcrumbs li + li::before {
    content: "›";
    margin-right: 0.5rem;
    color: var(--ht-gold-dark);
}

.ht-panel {
    margin-bottom: 20px;
    padding: 20px;
}

.ht-panel__body > :last-child,
.ht-module > :last-child {
    margin-bottom: 0;
}

/* Joomla messages */
joomla-alert,
.alert {
    display: block;
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
    color: #2a160d;
    background: var(--ht-parchment);
    border: 1px solid #8e5a25;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.2);
}

.pagination,
.pagination__wrapper ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0;
    list-style: none;
}

.pagination a,
.pagination span {
    display: grid;
    place-items: center;
    min-width: 40px;
    min-height: 40px;
    padding: 0.35rem 0.55rem;
    color: var(--ht-text);
    background: #130b06;
    border: 1px solid #6f481d;
    text-decoration: none;
}

.pagination .active span,
.pagination a:hover {
    color: #fff1bd;
    background: var(--ht-accent);
}

/* SP Page Builder compatibility */
.com-sppagebuilder .ht-component,
.ht-fullwidth .ht-component {
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.com-sppagebuilder .sp-page-builder .page-content,
.ht-fullwidth .sp-page-builder .page-content {
    width: 100%;
    max-width: none;
}

.sppb-section {
    position: relative;
}

.sppb-addon-title {
    color: var(--ht-gold-light);
    font-family: var(--ht-display);
}

/* Footer */
.ht-footer {
    position: relative;
    padding: 22px 0 26px;
    background:
        linear-gradient(180deg, rgba(0,0,0,0.18), transparent 30%),
        repeating-linear-gradient(1deg, transparent 0 13px, rgba(255,255,255,0.014) 13px 14px),
        linear-gradient(90deg, #0a0503, #1c1008 50%, #090503);
    border-top: 1px solid #76501f;
    box-shadow: inset 0 8px 18px rgba(0,0,0,0.52);
}

.ht-footer__ornament {
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 9px;
    background:
        linear-gradient(90deg, transparent, rgba(215,169,75,0.56) 12%, rgba(215,169,75,0.15) 50%, rgba(215,169,75,0.56) 88%, transparent),
        #160c06;
}

.ht-footer__grid {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto auto;
    gap: 30px;
    align-items: center;
}

.ht-footer__brand {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.ht-footer__crest {
    display: grid;
    place-items: center;
    flex: 0 0 66px;
    width: 66px;
    height: 76px;
    color: var(--ht-gold-light);
    background: linear-gradient(180deg, var(--ht-accent), var(--ht-accent-dark));
    border: 2px solid #8b5922;
    clip-path: polygon(8% 0, 92% 0, 100% 74%, 50% 100%, 0 74%);
    font-family: var(--ht-display);
    font-size: 1.8rem;
    box-shadow: inset 0 0 0 3px #1a0905;
}

.ht-footer__brand p {
    margin: 0;
    color: var(--ht-text-soft);
    font-size: 0.86rem;
    line-height: 1.45;
}

.ht-footer__brand strong {
    color: var(--ht-text);
    font-weight: 400;
}

.ht-footer__menu,
.ht-footer__menu .mod-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(14px, 2vw, 32px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ht-footer__menu a {
    color: var(--ht-gold-light);
    font-family: var(--ht-display);
    font-size: 0.82rem;
    font-variant: small-caps;
    text-decoration: none;
}

.ht-footer__menu a:hover {
    color: #fff0ba;
}

.ht-footer__social {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.ht-footer__social a {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    color: var(--ht-gold-light);
    background:
        radial-gradient(circle, #2a160a 0 48%, #0d0603 50% 61%, #8a5721 63% 67%, #100704 69%);
    border: 1px solid #8c5a23;
    border-radius: 50%;
    font-family: var(--ht-display);
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 6px 10px rgba(0,0,0,0.48);
    transition: transform 160ms ease, filter 160ms ease;
}

.ht-footer__social a:hover,
.ht-footer__social a:focus-visible {
    transform: translateY(-3px);
    filter: brightness(1.18);
}

/* Error and offline */
.ht-error-page {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 24px;
    background:
        radial-gradient(circle at 50% 38%, rgba(130,55,18,0.35), transparent 34rem),
        linear-gradient(180deg, #24130a, #090503);
}

.ht-error-card {
    position: relative;
    width: min(100%, 620px);
    padding: clamp(34px, 6vw, 72px);
    text-align: center;
    background:
        repeating-linear-gradient(1deg, transparent 0 14px, rgba(255,255,255,0.016) 14px 15px),
        #180d07;
    border: 1px solid #8b5922;
    box-shadow: inset 0 0 0 5px #090402, inset 0 0 0 6px rgba(215,169,75,0.2), var(--ht-shadow);
}

.ht-error-card__crest {
    display: grid;
    place-items: center;
    width: 78px;
    height: 88px;
    margin: 0 auto 20px;
    color: var(--ht-gold-light);
    background: linear-gradient(180deg, var(--ht-accent), var(--ht-accent-dark));
    border: 2px solid #8b5922;
    clip-path: polygon(8% 0, 92% 0, 100% 74%, 50% 100%, 0 74%);
    font-family: var(--ht-display);
    font-size: 2rem;
}

.ht-error-card h1 {
    font-size: clamp(3rem, 9vw, 7rem);
}

.ht-login-form {
    display: grid;
    gap: 0.7rem;
    margin-top: 1.6rem;
    text-align: left;
}

.ht-login-form .ht-button {
    margin-top: 0.6rem;
}

/* Responsive */
@media (max-width: 1180px) {
    :root { --ht-header-height: 124px; }

    .ht-header__inner {
        grid-template-columns: 260px minmax(0, 1fr);
    }

    .ht-brand__sign {
        min-height: 96px;
        padding: 14px 26px 22px;
    }

    .ht-brand__title {
        font-size: 1.75rem;
    }

    .ht-navigation .mod-menu > li > a,
    .ht-navigation .mod-menu > li > span,
    .ht-demo-menu > li > a {
        min-height: 82px;
        padding-inline: 10px;
        font-size: 0.86rem;
    }

    .ht-home-board__grid {
        grid-template-columns: 1fr;
    }

    .ht-parchment-panel {
        min-height: auto;
    }

    .ht-footer__grid {
        grid-template-columns: 1fr auto;
    }

    .ht-footer__menu {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

@media (max-width: 900px) {
    :root { --ht-header-height: 92px; }

    .has-sticky-header .ht-header {
        position: sticky;
    }

    .ht-header__beam,
    .ht-brand::before,
    .ht-brand::after {
        display: none;
    }

    .ht-header__inner {
        grid-template-columns: minmax(190px, 1fr) auto;
        min-height: var(--ht-header-height);
        padding-inline: 14px;
    }

    .ht-brand {
        justify-content: start;
        min-height: var(--ht-header-height);
        padding: 9px 0;
    }

    .ht-brand__sign {
        width: min(245px, 70vw);
        min-height: 70px;
        padding: 10px 28px 16px;
    }

    .ht-brand__title {
        max-width: none;
        font-size: clamp(1.2rem, 5vw, 1.55rem);
    }

    .ht-brand__ornament,
    .ht-brand__mark {
        display: none;
    }

    .ht-header__content {
        position: static;
        justify-content: center;
        padding: 0;
    }

    .ht-topbar {
        display: none;
    }

    .ht-menu-toggle {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        min-height: 46px;
        padding: 0.55rem 0.8rem;
        color: var(--ht-gold-light);
        background: #160b06;
        border: 1px solid #7c511f;
        font-family: var(--ht-display);
        cursor: pointer;
    }

    .ht-menu-toggle__icon {
        display: grid;
        gap: 4px;
        width: 22px;
    }

    .ht-menu-toggle__icon i {
        display: block;
        height: 2px;
        background: currentColor;
        transition: transform 160ms ease, opacity 160ms ease;
    }

    .ht-menu-toggle[aria-expanded="true"] .ht-menu-toggle__icon i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .ht-menu-toggle[aria-expanded="true"] .ht-menu-toggle__icon i:nth-child(2) { opacity: 0; }
    .ht-menu-toggle[aria-expanded="true"] .ht-menu-toggle__icon i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

    .ht-navigation {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        right: 0;
        display: none;
        max-height: calc(100vh - 104px);
        overflow: auto;
        padding: 12px;
        background:
            repeating-linear-gradient(1deg, transparent 0 14px, rgba(255,255,255,0.017) 14px 15px),
            #150b06;
        border-bottom: 1px solid #8a5922;
        box-shadow: 0 18px 32px rgba(0,0,0,0.8);
    }

    .ht-navigation.is-open {
        display: block;
    }

    .ht-navigation .mod-menu,
    .ht-navigation .nav,
    .ht-demo-menu {
        display: grid;
        width: 100%;
    }

    .ht-navigation .mod-menu > li,
    .ht-demo-menu > li {
        display: block;
        border: 0;
        border-bottom: 1px solid rgba(215,169,75,0.18);
    }

    .ht-navigation .mod-menu > li > a,
    .ht-navigation .mod-menu > li > span,
    .ht-demo-menu > li > a {
        justify-content: flex-start;
        min-height: 54px;
        padding: 0.7rem 1rem;
        text-align: left;
    }

    .ht-navigation .mod-menu > li.active::before,
    .ht-navigation .mod-menu > li.current::before,
    .ht-demo-menu > li.active::before {
        inset: 0;
        clip-path: none;
    }

    .ht-navigation .mod-menu ul {
        position: static;
        display: block;
        width: 100%;
        padding: 0 0 0.5rem 1rem;
        background: rgba(0,0,0,0.18);
        border: 0;
        box-shadow: none;
    }

    .ht-hero {
        min-height: 560px;
    }

    .ht-hero__inner {
        align-items: end;
        padding-block: 70px 76px;
    }

    .ht-hero__copy {
        width: min(100%, 660px);
        padding: 24px 0;
    }

    .ht-feature-region {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ht-feature-card:last-child {
        grid-column: 1 / -1;
    }

    .ht-lower-deck__grid {
        grid-template-columns: 1fr;
    }

    .ht-main-layout.has-left,
    .ht-main-layout.has-right,
    .ht-main-layout.has-left.has-right {
        grid-template-columns: 1fr;
    }

    .ht-component { grid-row: 1; }

    .ht-quote-panel {
        grid-template-columns: 58px minmax(0, 1fr);
    }

    .ht-quote-panel footer {
        grid-column: 2;
        margin: 0.8rem 0 0;
    }

    .ht-quote-panel__candle {
        display: none;
    }
}

@media (max-width: 640px) {
    body { font-size: 16px; }

    .ht-container {
        width: min(calc(100% - 24px), var(--ht-container));
    }

    .ht-header__inner {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .ht-brand__sign {
        width: min(210px, 62vw);
    }

    .ht-menu-toggle > span:last-child {
        display: none;
    }

    .ht-hero {
        min-height: 520px;
    }

    .ht-hero__copy::before {
        inset: -10% -4%;
        background: radial-gradient(ellipse at 30% 50%, rgba(0,0,0,0.9), rgba(0,0,0,0.62) 56%, transparent 82%);
    }

    .ht-feature-region {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .ht-feature-card:last-child {
        grid-column: auto;
    }

    .ht-feature-card {
        min-height: 350px;
    }

    .ht-news-list article {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 10px;
    }

    .ht-lower-deck__grid {
        gap: 14px;
    }

    .ht-diary-panel li {
        grid-template-columns: 1fr;
        gap: 0;
        padding-block: 0.45rem;
    }

    .ht-quote-panel {
        grid-template-columns: 1fr;
        padding: 30px 24px;
    }

    .ht-quote-panel__mug {
        display: none;
    }

    .ht-quote-panel footer {
        grid-column: 1;
    }

    .ht-component {
        padding: 22px 18px;
    }

    .ht-footer__grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .ht-footer__brand {
        justify-content: center;
    }

    .ht-footer__menu {
        grid-column: 1;
        grid-row: auto;
    }

    .ht-footer__social {
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media print {
    body,
    .ht-page-shell,
    .ht-component {
        color: #111;
        background: #fff;
        box-shadow: none;
    }
    .ht-header,
    .ht-footer,
    .ht-menu-toggle,
    .ht-sidebar,
    .ht-hero,
    .ht-home-board,
    .ht-lower-deck {
        display: none !important;
    }
    .ht-main-section {
        padding: 0;
        background: #fff;
    }
    a { color: #111; }
}