.tt-btn,
b,
body,
strong {
 font-weight: 300;
}
#body-inner,
#tt-content-wrap,
.tt-btn,
.tt-header-inner,
.tt-portfolio-slider,
body,
section {
 position: relative;
}
#body-inner,
#tt-content-wrap,
.tt-btn,
.tt-portfolio-slider .swiper-slide {
 overflow: hidden;
}
#shop5,
.tt-btn {
 text-align: center;
}
.tt-posl-item-title .tt-text-wrapper .sitemap a:hover,
a {
 text-decoration: none;
}
.brand-name,
.icons,
.site-logo .icon {
 font-variation-settings: "wght" 300;
}
#shop5,
.footer-heading,
.service-title,
.sitemap,
.team,
.time-display,
.tt-btn,
.tt-btn-outline {
 font-family: bold;
}
@font-face {
 font-family: text;
 src: url("/font/text.woff2") format("woff2"); /* 2026-09-10 owner: .woff fallback removed, woff2 only */
 font-weight: 300;
 font-style: normal;
}
@font-face {
 font-family: bold;
 src: url("/font/bold.woff2") format("woff2"); /* 2026-09-10 owner: .woff fallback removed, woff2 only */
 font-weight: 300;
 font-style: normal;
}
@font-face {
 /* 2026-09-10 owner: Minion 3 (the novella's print typeface, licensed by the owner) for the chapter text on invented-with-love.html only */
 font-family: minion3;
 src: url("/font/minion3-regular-webfont.woff2") format("woff2"); /* 2026-09-10 owner: replaced the file converted from the .otf with the owner's licensed Minion 3 Regular webfont (64 KB) */
 font-weight: 400;
 font-style: normal;
 font-display: swap;
}
@font-face {
 font-family: icon;
 src: url("/font/icon.woff2") format("woff2"); /* 2026-09-10 owner: .woff fallback removed, woff2 only */
 font-weight: 300;
 font-style: normal;
}
:root {
 --tt-main-color: #25262f;
 --tt-light-color: #efedea;
 --tt-text-color: #efedea;
 --tt-body-font: "text", sans-serif;
 --tt-alter-font: "bold", sans-serif;
 --tt-link-color: #ffffff;
 --tt-link-hover-color: #ffffff;
}
* {
 box-sizing: border-box;
}
body,
html {
 padding: 0;
 margin: 0;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-rendering: optimizeLegibility;
}
body {
 margin: 0;
 background-color: var(--tt-main-color);
 line-height: 1.4;
 font-family: var(--tt-body-font);
 font-size: 19px;
 color: var(--tt-text-color);
 overflow-x: hidden;
}
main {
 display: block;
}
p {
 margin: 0 0 24px;
}
a {
 background-color: transparent;
 color: var(--tt-link-color);
 outline: 0;
}
a:focus,
a:hover {
 color: var(--tt-link-hover-color);
}
button:focus {
 outline: 0;
}
::selection {
 color: var(--tt-light-color);
 -webkit-text-fill-color: var(--tt-light-color);
 text-shadow: none;
 background: var(--tt-main-color);
}
html {
 scroll-behavior: smooth;
 scroll-padding-top: 25px;
 scrollbar-width: thin;
 scrollbar-color: #555 rgb(134 134 134 / 18%);
}
html::-webkit-scrollbar {
 width: 8px;
 height: 8px;
}
html::-webkit-scrollbar-track {
 background: rgb(134 134 134 / 18%);
}
html::-webkit-scrollbar-thumb {
 background-color: #555;
 border-radius: 50px;
}
.tt-btn,
button {
 background-color: transparent;
 border: none;
 cursor: pointer;
}
html::-webkit-scrollbar-thumb:hover {
 background-color: #666;
}
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
 margin-top: 0;
 margin-bottom: 25px;
 font-weight: 300;
 color: inherit;
}
.h1,
.h2,
.h3,
h1,
h2,
h3 {
 line-height: 1.1;
}
.h4,
.h5,
.h6,
h4,
h5,
h6 {
 line-height: 1.2;
}
.h1,
h1 {
 font-size: clamp(20px, 5vw, 40px);
}
.h2,
h2 {
 font-size: clamp(18px, 4vw, 38px);
}
.h3,
h3 {
 font-size: clamp(16px, 3vw, 36px);
}
.h4,
h4 {
 font-size: clamp(14px, 3vw, 34px);
}
.h5,
h5 {
 font-size: clamp(14px, 2vw, 34px);
}
.h6,
h6 {
 font-size: 14px;
}
#body-inner {
 height: 100%;
 min-height: 100vh;
 min-height: 100svh;
}
#tt-header {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 z-index: 999;
 padding-left: 30px;
 padding-right: 30px;
 margin-top: 60px;
}
.tt-header-inner {
 width: 100%;
 display: flex;
 align-items: center;
 gap: 15px;
 padding-top: 15px;
 padding-bottom: 15px;
 transition: margin 0.3s;
 max-width: 1100px;
 margin: 0 auto;
}
#tt-header::before {
 position: absolute;
 content: "";
 inset: 0;
 z-index: -1;
 transition: background-color 0.3s;
}
.tt-header-col,
.tt-search-icon-item {
 display: flex;
 align-items: center;
}
.tt-header-col-center {
 margin-left: auto;
 margin-right: 0;
}
.tt-header-col-right {
 flex-direction: row-reverse;
 justify-content: flex-start;
}
#tt-header.tt-header-alter .tt-header-inner {
 justify-content: space-between;
}
#tt-header.tt-header-alter .tt-header-col-left {
 flex: 1;
 justify-content: flex-start;
}
#tt-header.tt-header-alter .tt-header-col-center {
 flex: 0;
 justify-content: flex-end;
 margin-right: 0;
 margin-left: auto;
}
#tt-header.tt-header-alter .tt-header-col-right,
#tt-m-menu-toggle-btn-wrap,
.custom-audio-player audio,
.tt-home-icon,
.tt-main-menu .tt-menu-item-info,
.tt-main-menu-list > li > a::after,
.tt-menu-item-info,
.tt-mobile-search-icon,
.tt-portfolio-slider > .tt-social-buttons {
 display: none;
}
#shop5 {
 color: #2cff65;
 font-size: 13px;
 display: block;
 padding: 3px;
 margin-bottom: -25px;
}
.tt-btn {
 display: inline-flex;
 align-items: center;
 height: 32px;
 margin: 18px 3px;
 padding: 15px 25px;
 font-size: 14px;
 letter-spacing: 0.5px;
 border-radius: 100px;
 z-index: 9;
}
.tt-btn-secondary {
 background: #0271e3;
 letter-spacing: 0;
}
.tt-btn-secondary > *,
.tt-btn-secondary > ::after {
 color: #fff;
 font-weight: 900;
 padding: 5px 1px;
 height: auto;
 font-size: 14px;
}
.tt-btn-outline > *,
.tt-btn-outline > ::after,
.tt-posl-item-category,
.tt-posl-item-title,
.tt-posl-nav-arrow,
.tt-social-buttons > ul > li a {
 color: var(--tt-text-color);
}
.tt-btn-outline,
.tt-btn.tt-btn-outline {
 padding: 15px 25px;
 height: 32px;
}
.tt-btn-outline {
 background-color: transparent;
 border: 1px solid rgba(255, 255, 255, 0.5);
 border-radius: 25px;
 font-size: 14px;
 font-weight: 900;
}
.tt-btn-outline:hover {
 background-color: rgba(255, 255, 255, 0.1);
}
.tt-social-buttons ul {
 display: inline-flex;
 flex-wrap: wrap;
 margin: 0;
 padding: 0;
 list-style: none;
}
.tt-social-buttons ul > li {
 display: flex;
 justify-content: center;
 align-items: center;
 margin: 0 2px;
}
.tt-social-buttons ul > li:first-child {
 margin-left: 0;
}
.tt-social-buttons ul > li:last-child {
 margin-right: 0;
}
.tt-social-buttons > ul > li a {
 display: block;
 width: 50px;
 height: 50px;
 display: flex;
 justify-content: center;
 align-items: center;
 line-height: 1;
 font-size: 16px;
 font-weight: 300;
}
.tt-portfolio-slider .swiper {
 width: 100%;
 height: 100vh;
 height: 100svh;
}
.tt-portfolio-slider-item {
 position: relative;
 display: block;
 height: 100%;
 overflow: hidden;
}
.tt-main-menu,
.tt-main-menu-holder {
 overflow: visible;
 height: auto;
}
.tt-posl-image-wrap {
 position: absolute;
 inset: 0;
 z-index: 1;
}
.tt-posl-item-caption {
 position: absolute;
 top: 54%;
 left: 0;
 right: 0;
 width: 950px;
 margin: 0 auto;
 text-align: center;
 z-index: 2;
 transform: translateY(-50%);
}
.tt-posl-item-caption-inner {
 opacity: 1;
 transform: scale(1);
}
.swiper-slide-next .tt-posl-item-caption-inner,
.swiper-slide-prev .tt-posl-item-caption-inner {
 opacity: 0;
 transform: scale(0.8);
}
.tt-posl-item-caption-inner {
 padding-top: 20px;
}
.hero-book-wrap {
 display: flex;
 justify-content: center;
 align-items: center;
 margin-bottom: 28px;
}

.hero-book {
 display: block;
 width: min(300px, 50vw);
 height: auto;
 filter: drop-shadow(0 28px 40px rgba(0, 0, 0, 0.28));
}
.hero-mhn {
 display: block;
 width: min(200px, 25vw);
 height: auto;
 border-radius: 15px;
 filter: drop-shadow(0 28px 40px rgba(0, 0, 0, 0.28));
}
.tt-posl-item-title {
 margin: 0;
 font-family: var(--tt-alter-font);
 font-size: 40px;
 font-weight: 300;
 line-height: 1.2;
}
.tt-posl-item-categories-wrap {
 position: relative;
 display: flex;
 justify-content: center;
 margin-top: 5px;
 opacity: 0.8;
 font-weight: 300;
}
.tt-posl-item-category {
 position: relative;
 display: block;
 font-size: 13px;
 line-height: 1.7;
}
.tt-portfolio-slider-navigation {
 position: absolute;
 display: flex;
 justify-content: center;
 align-items: center;
 bottom: 24px;
 right: 3.5vw;
 width: 140px;
 height: 60px;
 z-index: 9;
}
.tt-posl-nav-next,
.tt-posl-nav-prev {
 position: absolute;
 top: 0;
 z-index: 20;
}
.tt-posl-nav-next:focus,
.tt-posl-nav-prev:focus {
 outline: 0;
 border: none;
}
.tt-posl-nav-prev {
 left: 0;
}
.tt-posl-nav-next {
 right: 0;
}
.tt-posl-nav-arrow {
 position: relative;
 display: flex;
 justify-content: center;
 align-items: center;
 width: 60px;
 height: 60px;
 padding: 20px;
 font-size: 24px;
 cursor: pointer;
 outline: 0;
 border-radius: 100px;
}
.tt-posl-pagination {
 position: absolute;
 left: 50%;
 bottom: 40px;
 width: auto;
 height: auto;
 transform: translateX(-50%);
 z-index: 9;
}
.tt-posl-pagination .swiper-pagination-bullets {
 font-size: 0;
}
.tt-posl-pagination .swiper-pagination-bullet {
 display: inline-block;
 width: 8px;
 height: 8px;
 background-color: var(--tt-text-color);
 margin: 6px;
 opacity: 1;
 border-radius: 100%;
 border: none;
 transform: scale(1);
 transition: transform 0.3s ease-in-out;
}
.tt-posl-pagination .swiper-pagination-bullet-active {
 background-color: var(--tt-main-color);
 opacity: 1;
 transform: scale(1.7);
}
.tt-posl-pagination-fraction {
 display: flex;
 padding: 5px 12px;
 font-size: 12px;
 font-weight: 300;
 color: var(--tt-text-color);
 border-radius: 100px;
}
.tt-posl-pagination-fraction .swiper-pagination-current {
 position: relative;
 color: #000000;
 font-family: var(--tt-alter-font);
 z-index: 2;
}
.dir-icon,
.icons,
.site-logo .icon,
.tik,
.tik1,
.tik2,
.tik3,
.tik4 {
 font-family: icon;
}
.tt-posl-pagination-fraction .swiper-pagination-current::before {
 content: "";
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 18px;
 height: 18px;
 border-radius: 50%;
 background-color: #fff;
 z-index: -1;
 animation: 2s ease-in-out infinite pulseCircle;
}
@keyframes pulseCircle {
 0%,
 100% {
  transform: translate(-50%, -50%) scale(0.9);
  opacity: 0.8;
 }
 50% {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
 }
}
.tt-posl-pagination-fraction .swiper-pagination-total {
 position: relative;
 margin-left: 40px;
}
.tt-posl-pagination-fraction .swiper-pagination-total::before {
 position: absolute;
 top: calc(50% - 1px);
 right: 100%;
 display: inline-block;
 content: "";
 width: 13px;
 height: 1px;
 margin: 0 10px;
 background-color: var(--tt-text-color);
}
.tt-slide-social {
 position: relative;
 display: block;
 margin-top: 25px;
 left: 0;
 right: 0;
 bottom: auto;
 width: 100%;
 z-index: 10;
}

.tt-slide-social ul {
 display: flex;
 flex-direction: row;
 justify-content: center;
 align-items: center;
 gap: 15px;
 margin: 0;
 padding: 0;
 list-style: none;
 width: 100%;
}
.tt-slide-social ul li {
 display: block;
 margin: 0;
}
.tt-slide-social ul li a {
 display: flex;
 justify-content: center;
 align-items: center;
 width: 40px;
 height: 40px;
 border-radius: 50%;
 background-color: transparent;
}
.tt-slide-social .icons {
 font-size: 20px;
 color: var(--tt-text-color);
}
[class*="cover-opacity-"]::before {
 position: absolute;
 display: block;
 content: "";
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 background-color: #040404;
 z-index: 1;
 opacity: 0;
}
.cover-opacity-3::before {
 opacity: 0.3;
}
.tt-search-icon {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 40px;
 height: 40px;
 color: var(--tt-text-color);
}
.tt-search-icon .icons {
 font-size: 20px;
}
.icons {
 font-style: normal;
 font-weight: 300;
 color: #888;
}
.icon-facebook:before {
 content: "\E000";
}
.icon-instagram:before {
 content: "\E001";
}
.icon-pinterest:before {
 content: "\E002";
}
.icon-tiktok:before {
 content: "\E003";
}
.icon-x:before {
 content: "\E004";
}
.icon-youtube:before {
 content: "\E005";
}
.icon-audible:before {
 content: "\E027";
}
.icon-kobo:before {
 content: "\E026";
}
.icon-google:before {
 content: "\E025";
}
.icon-apple:before {
 content: "\E024";
}
.icon-kindle:before {
 content: "\E023";
}

.platform-icons {
 position: fixed;
 left: 50%;
 bottom: 96px;
 transform: translateX(-50%);
 display: flex;
 align-items: flex-end;
 justify-content: center;
 gap: 26px;
 z-index: 9999;
}

.platform-item {
 position: relative;
 width: 42px;
 height: 42px;
 display: flex;
 align-items: center;
 justify-content: center;
 text-decoration: none;
 color: #fff;
}

.platform-icon {
 position: relative;
 z-index: 2;
 display: flex;
 align-items: center;
 justify-content: center;
 line-height: 1;
 font-size: 28px;
 color: #fff;
}

.platform-icon .icons {
 font-size: 22px;
 color: #fff;
}

.platform-shadow {
 position: absolute;
 left: 50%;
 bottom: -3px;
 transform: translateX(-50%);
 width: 28px;
 height: 8px;
 background-color: #888;
 border-radius: 50%;
 opacity: 0.45;
 z-index: 1;
 filter: blur(0.4px);
}

.platform-item:hover .platform-icon {
 transform: translateY(-2px);
 transition: transform 0.2s ease;
}

.platform-item:hover .platform-shadow {
 transform: translateX(-50%) scale(0.92);
 transition: transform 0.2s ease;
}
.dir-add {
 left: calc(50% + 20px);
}
.dir-name {
 right: calc(50% + 20px);
}
.site-logo {
 display: flex;
 align-items: center;
 gap: 0.5rem;
 color: #fff;
}
.brand-link,
.brand-name a,
.icon a,
.phone-number a,
.sitemap a {
 color: inherit;
 text-decoration: none;
}
.site-logo .icon {
 line-height: 1;
 font-weight: 300;
 position: relative;
 top: 0.07em;
}
.brand-group {
 display: flex;
 flex-direction: column;
 justify-content: center;
}
.brand-link,
.footer-logo .site-logo {
 display: flex;
 align-items: center;
 gap: 0.5rem;
}
.brand-name {
 font-family: icon;
 margin: 0;
 display: flex;
 align-items: baseline;
 gap: 0.1rem;
}
.phone-number {
 font-family: icon;
 margin: 0.5rem 0 0;
 line-height: 1.4;
 text-shadow: 0 0 0 currentColor, 0.2px 0 currentColor, -0.2px 0 currentColor,
  0 0.2px currentColor, 0 -0.2px currentColor;
}
.heart,
.tik5,
.tik6,
.tik7 {
 font-family: icon;
}
.tt-main-menu-list,
.tt-main-menu-list > li {
 margin: 0;
 list-style: none;
}
.tt-main-menu {
 position: static;
 width: auto;
 background-color: transparent;
 visibility: visible;
 opacity: 1;
 transform: none;
 transition: none;
 pointer-events: auto;
}
.tt-main-menu-inner {
 min-height: auto;
 padding: 0;
 display: block;
}
.tt-main-menu-content {
 text-align: left;
}
.tt-main-menu-list {
 display: flex;
 align-items: center;
 gap: 10px;
 padding: 0;
}
.tt-main-menu-list > li > a {
 font-size: 16px;
 font-weight: 300;
 color: var(--tt-text-color);
 padding: 8px 16px;
 border-radius: 25px;
 transition: 0.3s;
 display: inline-block;
 position: relative;
 overflow: hidden;
 white-space: nowrap;
}
.tt-search-icon-item > a {
 border-radius: 0;
 overflow: visible;
}
.tt-main-menu-list > li:not(.tt-search-icon-item) > a::before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: #0271e3;
 border-radius: 25px;
 transform: scale(0);
 transition: transform 0.3s;
 z-index: -1;
}
.tt-main-menu-list > li:not(.tt-search-icon-item) > a:hover::before {
 transform: scale(1);
}
.tt-main-menu-list > li:not(.tt-search-icon-item) > a:hover {
 color: var(--tt-link-hover-color);
 transform: none;
}
/* 2026-09-10 - Phase 2 issue 16: last-child -> last-of-type, because on the article pages the info line (a div) is the
   last child of the menu list, so the blue Get Your Copy style only applied on index.html */
.tt-main-menu-list > li:last-of-type > a {
 background: #0271e3;
 color: #fff;
 border: none;
 font-family: bold;
 font-weight: 900;
 padding: 6px 18px;
 font-size: 14px;
 border-radius: 25px;
 letter-spacing: 0.5px;
}
.tt-main-menu-list > li:last-of-type > a:hover {
 background: #0271e3;
 transform: none;
 box-shadow: 0 4px 15px rgba(148, 55, 255, 0.3);
}
.tt-search-icon-item .tt-search-icon {
 padding: 0;
 border-radius: 0;
}
body.tt-m-menu-open .tt-main-menu {
 transform: none;
}
.tt-portfolio-slider .tt-social-buttons > ul > li a {
 width: 40px;
 height: 40px;
}
.tt-posl-image-wrap[data-bg-color="1"] {
 background: linear-gradient(to top, #55587d, #282831);
}
.tt-posl-image-wrap[data-bg-color="2"] {
 background: linear-gradient(to top, #78557d, #2f2831);
}
.tt-posl-image-wrap[data-bg-color="3"] {
 background: linear-gradient(to top, #55707d, #282e31);
}
.tt-posl-image-wrap[data-bg-color="4"] {
 background: linear-gradient(to top, #667d55, #2c3128);
}
.tt-posl-image-wrap[data-bg-color="5"] {
 background: linear-gradient(to top, #7d5555, #312828);
}
.tt-posl-image-wrap[data-bg-color="6"] {
 background: linear-gradient(to top, #7d6f55, #312e28);
}
.tt-posl-image-wrap[data-bg-color="7"] {
 background: linear-gradient(to top, #66557d, #2f2831);
}
.tt-posl-image-wrap[data-bg-color="8"] {
 background: linear-gradient(to top, #7a7d55, #303128);
}
.tik {
 color: #34cd01;
 font-size: 10px;
}
.tik1 {
 color: #33ff9c;
 font-size: 13px;
}
.tik2 {
 color: #ffb200;
 font-size: 11px;
}
.tik3 {
 line-height: 1;
 font-size: 14px;
 color: #fff;
}
.tik4 {
 font-size: 11px;
 color: #68c2fe;
}
.tik5,
.tik6 {
 color: #fff;
}
.tik5 {
 font-size: 13px;
}
.tik6 {
 font-size: 11px;
}
.tik7 {
 font-size: 10px;
 color: #68c2fe;
}
.article-content .heart,
.heart {
 color: #ff009d;
}
.heart {
 font-size: 20px;
 display: block;
 text-align: center;
}
.audio-chill,
.audio-words {
 font-size: 13px;
 display: block;
 padding: 0;
 margin: -5px 0;
 font-family: bold;
 text-align: center;
}
.audio-words {
 color: #a4a4a4;
}
.audio-chill {
 color: #8cbaff;
}
.article-main {
 padding-top: 120px;
 min-height: 100vh;
 background-color: #25262f;
}
.article-cta-section,
.next-article-card {
 background-color: #171b27;
 border-radius: 12px;
}
.article-container {
 max-width: 980px;
 margin: 0 auto;
 padding: 40px 20px;
}
.article-header {
 text-align: center;
 margin-bottom: 20px;
}
.article-title {
 font-family: bold;
 font-size: 40px;
 line-height: 1;
 color: #fff;
 margin-bottom: 20px;
}
.article-meta {
 font-size: 12px;
 color: #b0b0b0;
}
.article-meta .article-author,
.article-meta time {
 margin: 0 10px;
}
.article-featured-image {
 margin: 40px 0; /* 2026-09-10 - Phase 2 issue 18: was 40px -20px (full bleed); the figure now matches the footer line (container content width, 940px at 980) */
 text-align: center;
}
.article-featured-image img {
 width: 100%;
 height: auto;
 max-width: 1200px;
 border-radius: 8px;
}
.article-featured-image figcaption {
 font-size: 8px;
 color: #a3a3a3;
 margin-top: 5px;
 padding: 0 20px;
 text-align: right;
}
#canberra-barber-tips h3,
.article-content h2,
.article-content h3,
.haircut-list li h3 {
 font-size: 18px;
 font-family: bold;
}
.article-content {
 font-size: 17px;
 line-height: 1.3;
 color: #fff;
}
.article-content p {
 margin-bottom: 24px;
 color: #fff;
}
.article-content h2 {
 color: #fff;
 margin: 20px 0;
}
.article-content h3 {
 color: #fff;
 margin: 32px 0 16px;
}
.article-content ol,
.article-content ul {
 padding-left: 5px;
 margin-left: 0;
}
.article-content ol li,
.article-content ul li {
 margin-bottom: 10px;
}
.article-content h3 {
 margin-left: 0;
 padding-left: 0;
}
.article-content li ol,
.article-content li ul {
 margin-top: 10px;
 padding-left: 5px;
}
.article-cta-section .tt-btn-outline > *,
.article-cta-section .tt-btn-outline > ::after,
.haircut-list li h3,
body.article-page #tt-header .brand-name,
body.article-page #tt-header .icon,
body.article-page #tt-header .phone-number a,
body.article-page #tt-header .tt-main-menu-list > li > a,
main h1[style*="color:#b6823a"],
main p[style*="color:#555"] {
 color: #fff;
}
#canberra-barber-tips h3 {
 color: #fff;
 font-weight: 300;
}
.article-cta-section {
 padding: 20px;
 margin: 20px 0;
 text-align: center;
}
.article-cta-section .tt-btn-outline {
 border-color: rgba(255, 255, 255, 0.3);
}
.cta-heading {
 font-family: bold;
 font-size: 32px;
 color: #fff;
 margin-bottom: 30px;
}
.cta-buttons {
 display: flex;
 justify-content: center;
 gap: 7px;
}
.cta-info {
 font-size: 13px;
 color: #ebebeb;
 line-height: 1.5;
 margin-bottom: -20px;
}
.next-article-section {
 margin: 20px 0 0;
 padding-top: 10px;
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 20px;
}
.next-article-heading {
 font-family: bold;
 font-size: 20px;
 color: #fff;
 margin-bottom: 30px;
 text-align: center;
}
.next-article-card {
 display: flex;
 gap: 20px;
 padding: 20px;
 text-decoration: none;
 transition: none;
}
.next-article-image {
 flex: 1;
}
.next-article-image img {
 width: 100%;
 height: 200px;
 object-fit: cover;
}
.next-article-content {
 flex: 1;
 display: flex;
 flex-direction: column;
 justify-content: center;
}
.next-article-title {
 font-family: bold;
 font-size: 16px;
 color: #fff;
 margin-bottom: 12px;
}
.next-article-excerpt {
 font-size: 16px;
 color: #ebebeb;
 line-height: 1;
 margin-bottom: 16px;
}
.read-more {
 font-size: 14px;
 color: #00ff4c;
}
.read-with-icon {
 display: inline-flex;
 align-items: center;
 gap: 0.4em;
 white-space: nowrap;
}
.article-audio {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 margin: 0 0 1.25rem;
 padding: 0.75rem 0 1rem;
 border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.custom-audio-player {
 width: min(720px, 100%);
 margin: 0 auto;
 border-radius: 50px;
 background: #171b27;
 padding: 10px 20px;
 user-select: none;
 -webkit-user-select: none;
}
.audio-controls {
 display: flex;
 align-items: center;
 gap: 10px;
 width: 100%;
}
.play-pause-btn {
 border: none;
 background: 0 0;
 color: #00ff48;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: 0.2s;
 flex-shrink: 0;
 padding: 0;
 width: 40px;
 height: 40px;
}
.play-pause-btn.playing {
 font-size: 24px;
}
.play-pause-btn.paused {
 font-size: 28px;
}
.progress-container {
 flex: 1;
 height: 6px;
 background: rgba(255, 255, 255, 0.2);
 border-radius: 3px;
 cursor: pointer;
 position: relative;
 overflow: hidden;
 margin: 0 8px;
}
.progress-bar {
 height: 100%;
 background: #58b7ff;
 border-radius: 1px;
 width: 0%;
 transition: width 0.1s;
}
.time-display {
 color: #e0e0e0;
 font-size: 13px;
 min-width: 40px;
 text-align: center;
 flex-shrink: 0;
}
.article-audio .audio-caption {
 margin-top: 0.5rem;
 text-align: center;
 color: #aaa;
 font-size: 0.95rem;
 line-height: 1.6;
}
.footer-logo .icon,
.rating {
 font-family: icon;
 line-height: 1;
}
.rating {
 font-size: 17px;
 color: #f8b604;
 margin-top: -9px;
 margin-bottom: -2px;
}
.line {
 color: rgb(73 75 86 / 50%);
}
.footer-heading,
.footer-links a {
 color: #fff;
 font-size: 12px;
}
.site-footer {
 background-color: #171b27;
 padding: 20px 0;
 font-family: text;
}
.footer-container {
 max-width: 980px;
 margin: 0 auto;
 padding: 0 20px;
}
.footer-logo {
 margin-bottom: 20px;
 display: flex;
 justify-content: center;
}
.footer-logo .icon {
 color: #ebebeb;
}
.footer-logo .brand-name {
 font-family: icon;
 color: #ebebeb;
 margin: 0;
}
.footer-logo .phone-number {
 font-family: icon;
 margin: 0.3rem 0 0;
 line-height: 1.4;
}
.footer-logo .phone-number a {
 color: #ebebeb;
 text-decoration: none;
}
.footer-heading,
.footer-links li {
 margin-bottom: 1px;
}
.footer-links {
 list-style: none;
 padding: 0;
 margin: 0;
}
.footer-links a {
 line-height: 0.3;
 text-decoration: none;
 transition: color 0.2s;
}
.footer-links a:hover {
 color: #00ff2f;
 text-decoration: none;
}
.footer-social {
 display: flex;
 gap: 30px;
 justify-content: center;
}
.footer-social a {
 display: inline-block;
 color: #ebebeb;
 transition: color 0.2s;
}
.footer-social .icons {
 font-size: 16px;
 line-height: 1;
 color: #ebebeb;
}
.footer-location {
 margin-top: 10px;
 position: relative;
 display: inline-block;
 text-decoration: none;
 color: #dedede;
 font-size: 15px;
}
.footer-location .dir-icon {
 font-family: icon;
 font-size: 1.8em;
 color: #ffffff;
 line-height: 1;
}
.footer-location .location-text {
 font-size: 13px;
 color: #424245;
}
body.article-page #tt-header .tt-m-menu-toggle-btn span::after,
body.article-page #tt-header .tt-m-menu-toggle-btn span::before {
 background-color: #fff;
}
body.article-page #tt-header .tt-main-menu-list > li:first-of-type > a {
 color: #fff;
 border-color: #fff;
}
.sitemap ol,
.sitemap ul,
.team {
 list-style: none;
 margin: 0;
 padding: 0;
}
.team li::marker {
 content: "";
}
.sitemap {
 color: #aae1ff;
}
.sitemap li {
 margin: 0;
 list-style-type: none;
}
.sitemap li::before,
.sitemap li::marker {
 content: none;
}
#crew-cut,
#french-crop,
#modern-mullet,
#short-back-and-sides,
#textured-crop {
 font-size: 1em;
 list-style: none;
 padding-left: 0;
 margin-left: 0;
}
.footer-logo .icon,
.site-logo .icon {
 font-size: 3rem;
}
.footer-logo .brand-name,
.site-logo .brand-name {
 font-size: 1rem;
}
.footer-logo .phone-number,
.site-logo .phone-number {
 font-size: 1rem;
}
@media (max-width: 480px) {
 #shop5 {
  margin-bottom: -5px;
 }
 .tt-posl-item-caption {
  width: 95%;
  max-width: 95%;
 }
 .tt-posl-item-title {
  font-size: 20px;
  padding: 0 10px;
 }
 .tt-posl-item-category {
  font-size: 11px;
  padding: 0 10px;
 }
 #tt-header {
  margin-top: 10px;
 }
 .tt-desktop-only,
.tt-m-menu-toggle-btn-text .tt-m-menu-text-close,
.tt-main-menu-list > li > a::before,
.tt-portfolio-slider-navigation,
body.tt-m-menu-open .tt-m-menu-text-menu {
  display: none;
 }
 .tt-main-menu {
  pointer-events: initial;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  background-color: var(--tt-main-color);
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  z-index: 9999;
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out,
   visibility 0s 0.3s;
 }
 body.tt-m-menu-open .tt-main-menu {
  visibility: visible;
  opacity: 1;
  transform: translateX(0);
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility;
 }
 .tt-main-menu-holder {
  position: relative;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 2;
 }
 .tt-main-menu-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100%;
  padding: 100px 7% 50px;
 }
 .tt-main-menu-content {
  width: 100%;
  text-align: center;
 }
 .tt-main-menu-list {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
 }
 body.tt-m-menu-open .tt-main-menu-list {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.3s;
 }
 body:not(.tt-m-menu-open) .tt-main-menu-list {
  transition-delay: 0s;
 }
 .tt-main-menu-list > li {
  margin: 18px 0;
 }
 .tt-main-menu-list > li > a {
  position: relative;
  display: inline-block;
  font-family: var(--tt-body-font);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.2;
  color: var(--tt-text-color);
  padding: 8px 16px;
  transition: color 0.4s, transform 0.4s;
 }
 .tt-main-menu-list > li:first-child > a {
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 25px;
  padding: 8px 16px;
 }
 .tt-main-menu-list > li:nth-child(2) > a,
.tt-main-menu-list > li:nth-child(4) > a {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 25px;
 }
 .tt-main-menu-list > li:nth-child(3) > a {
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 25px;
 }
 .tt-main-menu-list > li:last-of-type > a {
  background: #0271e3;
  color: #fff;
  border: none;
  font-family: bold;
  font-weight: 900;
  border-radius: 25px;
  letter-spacing: 0.5px;
 }
 .tt-m-menu-toggle-btn span,
body.tt-m-menu-open .tt-m-menu-toggle-btn span {
  background-color: transparent;
  width: 20px;
 }
 .tt-menu-item-info {
  display: block;
  font-size: 12px;
  color: var(--tt-text-color);
  opacity: 0.8;
  margin-top: 15px;
  text-align: center;
 }
 #tt-m-menu-toggle-btn-wrap {
  position: relative;
  display: flex;
  align-items: center;
  pointer-events: initial;
  cursor: pointer;
  z-index: 10000;
 }
 .tt-m-menu-toggle-btn-holder {
  float: left;
 }
 .tt-m-menu-toggle-btn {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
 }
 .tt-m-menu-toggle-btn span {
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  height: 2px;
  transform: translate(-50%, -50%);
  transition: 0.3s ease-in-out;
 }
 .tt-m-menu-toggle-btn span::after,
.tt-m-menu-toggle-btn span::before {
  position: absolute;
  display: block;
  content: "";
  height: 2px;
  width: 20px;
  background-color: var(--tt-text-color);
  transition: 0.3s ease-in-out;
 }
 .tt-m-menu-toggle-btn span::before {
  top: -4px;
 }
 .tt-m-menu-toggle-btn span::after {
  top: auto;
  bottom: -4px;
 }
 .tt-m-menu-toggle-btn-text {
  float: left;
  padding-right: 2px;
  overflow: hidden;
  font-family: var(--tt-alter-font);
  text-align: right;
  font-size: 21px;
  font-weight: 300;
  color: var(--tt-text-color);
  letter-spacing: 1px;
 }
 body.tt-m-menu-open .tt-m-menu-toggle-btn span::before {
  top: 0;
  width: 20px;
  transform: rotate(45deg);
 }
 body.tt-m-menu-open .tt-m-menu-toggle-btn span::after {
  bottom: 0;
  width: 20px;
  transform: rotate(-45deg);
 }
 body.tt-m-menu-open .tt-m-menu-toggle-btn-text .tt-m-menu-text-close {
  display: block;
 }
 main-menu-content {
  text-align: center;
 }
 .tt-posl-pagination {
  bottom: 40px;
 }
 .tt-portfolio-slider .tt-social-buttons {
  bottom: 25px;
 }
 .site-logo {
  flex-direction: row;
  justify-content: flex-start;
 }
 #tt-header.tt-header-alter .tt-header-col-right {
  display: flex;
 }
 .tt-home-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-right: 5px;
 }
 .tt-home-icon .icons {
  font-size: 18px;
  color: #fff;
 }
 .haircut-list li h3 {
  font-size: 15px;
  line-height: 1.3;
 }
 #canberra-barber-tips h3 {
  font-size: 15px;
 }
 .team {
  font-size: 14px;
  padding-left: 15px;
 }
 .team li {
  margin-bottom: 8px;
 }
 .team li a {
  font-size: 14px;
  line-height: 1.4;
 }
 .article-main {
  padding-top: 80px;
 }
 .article-container {
  padding: 20px 15px;
 }
 .article-title {
  margin-top: 20px;
  font-size: 20px;
  line-height: 1.3;
 }
 .article-meta {
  font-size: 11px;
 }
 .article-featured-image {
  margin: 20px 5px; /* 2026-09-10 - issue 18: was 20px -15px; the footer line sits 20px from the edges while the text sits 15px, so 5px inset aligns the figure with the line */
 }
 .article-featured-image img {
  border-radius: 0;
 }
 .article-content {
  font-size: 16px;
 }
 .cta-heading,
.next-article-heading,
.play-pause-btn.playing {
  font-size: 24px;
 }
 .article-content h2 {
  font-size: 15px;
  margin: 20px 0 10px;
 }
 .article-content h3 {
  font-size: 13px;
  margin: 28px 0 16px;
 }
 .article-cta-section {
  padding: 20px;
  margin: 20px -15px;
  border-radius: 0;
 }
 .cta-heading {
  margin-bottom: 20px;
 }
 .cta-buttons .tt-btn {
  flex: 0 1 auto; /* 2026-09-10 - Phase 2 issue 14: was flex: 1 (two buttons sharing the row); with the single Get Your Copy button it keeps its natural width and is centred by the flex container */
  justify-content: center;
 }
 .next-article-section {
  grid-template-columns: 1fr;
  margin: 10px 0;
 }
 .next-article-card {
  flex-direction: column;
  padding: 20px;
  gap: 20px;
 }
 .next-article-image {
  flex: 1;
 }
 .next-article-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
 }
 .next-article-excerpt {
  font-size: 14px;
 }
 .footer-social {
  justify-content: center;
  margin-top: 2px;
 }
 .footer-heading-phone {
  margin-top: 15px;
 }
 .custom-audio-player {
  padding: 10px 20px;
 }
 .audio-controls {
  gap: 10px;
 }
 .play-pause-btn.paused {
  font-size: 28px;
 }
 .progress-container {
  margin: 0 6px;
 }
 .article-audio {
  padding-bottom: 0.75rem;
 }
 .article-audio .audio-caption {
  font-size: 0.9rem;
 }
}
@media (min-width: 481px) and (max-width: 991px) {
 .tt-posl-item-caption {
  max-width: 95%;
 }
 .cta-heading,
.tt-posl-item-title {
  font-size: 28px;
 }
 .tt-posl-item-category {
  font-size: 12px;
 }
 #tt-header {
  margin-top: 30px;
 }
 #tt-header.tt-header-alter .tt-header-col-right {
  display: flex;
 }
 .tt-desktop-only,
.tt-main-menu .tt-search-icon-item,
.tt-main-menu-list > li > a::before {
  display: none;
 }
 .tt-main-menu {
  pointer-events: initial;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  background-color: var(--tt-main-color);
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  z-index: 9999;
  transform: translateX(100%);
  transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out,
   visibility 0s 0.4s;
 }
 body.tt-m-menu-open .tt-main-menu {
  visibility: visible;
  opacity: 1;
  transform: translateX(0);
  transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out, visibility;
 }
 .tt-main-menu-holder {
  position: relative;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 2;
 }
 .tt-main-menu-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100%;
  padding: 100px 5% 50px;
 }
 .tt-main-menu-content {
  width: 100%;
  text-align: center;
 }
 .tt-main-menu-list {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
 }
 body.tt-m-menu-open .tt-main-menu-list {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
 }
 body:not(.tt-m-menu-open) .tt-main-menu-list {
  transition-delay: 0s;
 }
 .tt-main-menu-list > li {
  margin: 20px 0;
 }
 .tt-main-menu-list > li > a {
  position: relative;
  display: inline-block;
  font-family: var(--tt-body-font);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.2;
  color: var(--tt-text-color);
  padding: 8px 16px;
 }
 .tt-main-menu-list > li:first-child > a {
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 25px;
  padding: 8px 16px;
 }
 .tt-main-menu-list > li:nth-child(2) > a,
.tt-main-menu-list > li:nth-child(4) > a {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 25px;
 }
 .tt-main-menu-list > li:nth-child(3) > a {
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 25px;
 }
 .tt-main-menu-list > li:last-of-type > a {
  background: #0271e3;
  color: #fff;
  border: none;
  font-family: bold;
  font-weight: 900;
  border-radius: 25px;
  letter-spacing: 0.5px;
 }
 .tt-menu-item-info {
  display: block;
  font-size: 12px;
  color: var(--tt-text-color);
  opacity: 0.8;
  margin-top: 25px;
  text-align: center;
 }
 .tt-mobile-search-icon {
  display: flex;
  align-items: center;
  margin-left: 10px;
  order: 2;
 }
 .tt-header-col-right {
  flex-direction: row-reverse;
 }
 #tt-m-menu-toggle-btn-wrap {
  position: relative;
  display: flex;
  align-items: center;
  pointer-events: initial;
  cursor: pointer;
  z-index: 10000;
  order: 1;
 }
 .tt-m-menu-toggle-btn-holder {
  float: left;
 }
 .tt-m-menu-toggle-btn {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
 }
 .tt-m-menu-toggle-btn span {
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  height: 2px;
  width: 20px;
  background-color: transparent;
  transform: translate(-50%, -50%);
  transition: 0.3s ease-in-out;
 }
 .tt-m-menu-toggle-btn span::after,
.tt-m-menu-toggle-btn span::before {
  position: absolute;
  display: block;
  content: "";
  height: 2px;
  width: 20px;
  background-color: var(--tt-text-color);
  transition: 0.3s ease-in-out;
 }
 .tt-m-menu-toggle-btn span::before {
  top: -4px;
 }
 .tt-m-menu-toggle-btn span::after {
  top: auto;
  bottom: -4px;
 }
 body.tt-m-menu-open .tt-m-menu-toggle-btn span::before {
  top: 0;
  transform: rotate(45deg);
 }
 body.tt-m-menu-open .tt-m-menu-toggle-btn span::after {
  bottom: 0;
  transform: rotate(-45deg);
 }
 .tt-social-buttons ul > li {
  margin: 0;
 }
 .site-logo {
  flex-direction: row;
  justify-content: flex-start;
 }
 .tt-home-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-right: 10px;
 }
 .tt-home-icon .icons {
  font-size: 24px;
  color: #fff;
 }
 .article-main {
  padding-top: 100px;
 }
 .article-container {
  padding: 30px 20px;
 }
 .article-title {
  font-size: 30px;
 }
 .article-featured-image {
  margin: 30px 0; /* 2026-09-10 - Phase 2 issue 7: was -30px (10px overflow); issue 18: now 0 so the figure matches the footer line (20px from the edges) */
 }
 .article-content h2 {
  font-size: 17px;
 }
 .article-content h3 {
  font-size: 16px;
 }
 .article-cta-section {
  padding: 30px;
 }
 .article-featured-image img {
  border-radius: 0;
 }
 .tt-posl-item-caption {
  top: 56%;
 }

 .hero-book-wrap {
  margin-bottom: 18px;
 }

 .tt-posl-item-caption-inner {
  padding-top: 10px;
 }
 .tt-posl-item-caption {
  top: 55%;
 }

 .hero-book {
  width: min(250px, 40vw);
 }
 .hero-mhn {
  width: min(200px, 25vw);
 }
 .hero-book-wrap {
  margin-bottom: 22px;
 }
}
@media screen and (min-width: 844px) and (max-width: 990px) {
 .next-article-section {
  grid-template-columns: 1fr;
  margin: 10px 0;
 }
 .next-article-card {
  flex-direction: column;
  padding: 20px;
  gap: 20px;
 }
 .next-article-image {
  flex: 1;
 }
 .next-article-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
 }
 .next-article-excerpt {
  font-size: 14px;
 }
}
@media screen and (min-width: 801px) and (max-width: 843px) {
 .next-article-section {
  grid-template-columns: 1fr;
  margin: 10px 0;
 }
 .next-article-card {
  flex-direction: column;
  padding: 20px;
  gap: 20px;
 }
 .next-article-image {
  flex: 1;
 }
 .next-article-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
 }
 .next-article-excerpt {
  font-size: 14px;
 }
}
@media screen and (min-width: 481px) and (max-width: 991px) and (orientation: portrait) {
 .next-article-section {
  grid-template-columns: 1fr;
  margin: 10px 0;
 }
 .next-article-card {
  flex-direction: column;
  padding: 20px;
  gap: 20px;
 }
 .next-article-image {
  flex: 1;
 }
 .next-article-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
 }
 .next-article-excerpt {
  font-size: 14px;
 }
}
@media screen and (orientation: landscape) and (max-height: 550px) {
 .dir-add,
.dir-icon,
.dir-name,
.dir-shadow,
.tik1,
.tt-slide-social .icons {
  display: none;
 }
 .tt-posl-item-caption-inner {
  position: relative;
  top: 50px;
 }
 .tt-main-menu-inner {
  padding: 50px 7% 25px;
 }
 .next-article-section {
  grid-template-columns: 1fr;
  margin: 10px 0;
 }
 .next-article-card {
  flex-direction: column;
  padding: 20px;
  gap: 20px;
 }
 .next-article-image {
  flex: 1;
 }
 .next-article-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
 }
 .next-article-excerpt {
  font-size: 14px;
 }
 .tt-posl-item-title {
  font-size: 20px;
  padding: 0 10px;
 }
}
@media screen and (orientation: landscape) and (max-height: 550px) {
 .dir-add,
.dir-icon,
.dir-map,
.dir-name,
.dir-shadow,
.tik1,
.tt-slide-social .icons,
.platform-icons {
  display: none;
 }
}
/* 2026-09-10 - Phase 2 issue 1: single-line footer (Apple style), scoped to .site-footer-inline */
.site-footer.site-footer-inline {
 background-color: #25262f;
 padding: 0;
}
.site-footer-inline .footer-inline-nav {
 border-top: 1px solid #535355; /* 2026-09-10 owner: line colour #535355 */
 padding: 20px 0 24px;
}
.site-footer-inline .footer-inline-list {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 align-items: center;
 margin: 0;
 padding: 0;
 list-style: none;
 font-size: 12px;
 line-height: 1.4;
 color: #fff;
}
.site-footer-inline .footer-inline-list li {
 margin: 0;
}
.site-footer-inline .footer-inline-list li + li::before {
 content: "|";
 margin: 0 5px;
 color: #535355; /* 2026-09-10 owner: separator colour #535355 */
}
.site-footer-inline .footer-inline-copyright {
 color: #bbbcc1; /* 2026-09-10 owner: "Copyright © <year>" and "All rights reserved." in #BBBCC1 */
}
.site-footer-inline .footer-inline-name {
 font-family: bold;
 color: #fff;
}
.site-footer-inline .footer-inline-list a {
 color: #fff;
 font-size: 12px;
 text-decoration: none;
 transition: color 0.2s;
}
.site-footer-inline .footer-inline-list a:hover {
 color: #00ff2f;
 text-decoration: none;
}
@media (max-width: 767px) {
 /* 2026-09-10 - issue 1: below 768px the copyright takes its own line, links stay on one line under it */
 .site-footer-inline .footer-inline-list .footer-inline-copyright {
  flex-basis: 100%;
  text-align: center;
  margin-bottom: 8px; /* 2026-09-10 owner: wider gap between the two footer lines; selector specificity raised because the li margin:0 rule was overriding this */
 }
 .site-footer-inline .footer-inline-list .footer-inline-copyright + li::before {
  content: none;
 }
}
/* 2026-09-10 - Phase 2 issue 2 (index.html): the slider caption is boxed between the header and the fixed
   platform-icons bar and centred inside that box, and the hero images may shrink with the viewport height,
   so the cover no longer sits far from the top on tall screens nor collides with the icons on short ones. */
.tt-portfolio-slider .tt-posl-item-caption {
 top: 138px; /* header: margin-top 60px + height 78px */
 bottom: 138px; /* platform icons: bottom 96px + height 42px */
 transform: none;
 display: flex;
 flex-direction: column;
 justify-content: center;
}
.tt-portfolio-slider .tt-posl-item-caption-inner {
 padding-top: 0;
}
.tt-portfolio-slider .hero-book {
 width: auto;
 max-width: min(300px, 50vw);
 /* 507px = header 138 + icons bar 138 + title/buttons/info block about 171 + two 30px gaps */
 max-height: max(160px, calc(100vh - 507px));
 max-height: max(160px, calc(100svh - 507px));
}
.tt-portfolio-slider .hero-mhn {
 width: auto;
 max-width: min(300px, 50vw); /* 2026-09-10 owner: author photo same size as the cover (was 200px / 25vw) */
 /* 540px (2026-09-10, after the two buttons were removed from slide 2): with this cap the photo reaches the
    cover's width on every listed viewport, with about 47px gaps on the shortest one (1024x768) */
 max-height: max(120px, calc(100vh - 540px));
 max-height: max(120px, calc(100svh - 540px));
 border-radius: 0; /* 2026-09-10 owner: square corners for the author photo (was 15px) */
}
@media (min-width: 481px) and (max-width: 991px) {
 .tt-portfolio-slider .tt-posl-item-caption {
  top: 108px; /* header margin-top 30px + 78px */
 }
 .tt-portfolio-slider .hero-book,
.tt-portfolio-slider .hero-mhn {
  max-width: min(250px, 40vw);
 }
}
@media (max-width: 480px) {
 .tt-portfolio-slider .tt-posl-item-caption {
  top: 88px; /* header margin-top 10px + 78px */
 }
}
/* 2026-09-10 owner: chapter text of invented-with-love.html in Minion 3 (the class chapter-text exists only on that page);
   the audio block, the heart glyph and everything else keep the site fonts */
.article-content.chapter-text > h2,
.article-content.chapter-text > p:not(.heart) {
 font-family: minion3, Georgia, "Times New Roman", serif;
 font-size: 19px;
 line-height: 1.6;
}
@media (max-width: 480px) {
 .article-content.chapter-text > h2,
.article-content.chapter-text > p:not(.heart) {
  font-size: 18px;
 }
}
/* 2026-09-10 - Phase 2 issue 5 (index.html on landscape phones, viewport height <= 550px): the legacy landscape rule
   above pushes the caption 50px down and hides the platform icons, while the issue 2 caption box still reserves
   138px at the bottom for those hidden icons; the content then overflows into the header row and the pagination
   sits on the buttons. Here the push is cancelled, the box uses the space of the hidden icons, the hero images
   shrink so title/buttons/info fit above the bottom edge, and the "1 - 2" pagination moves to the bottom-right corner. */
@media screen and (orientation: landscape) and (max-height: 550px) {
 .tt-portfolio-slider .tt-posl-item-caption {
  bottom: 20px; /* platform icons are hidden in this mode */
 }
 .tt-portfolio-slider .tt-posl-item-caption-inner {
  top: 0; /* cancels the legacy top: 50px */
 }
 .tt-portfolio-slider .hero-book,
.tt-portfolio-slider .hero-mhn {
  /* 268px = header 108 + bottom gap 20 + image-to-title gap 22 + title/buttons/info block about 118 */
  max-height: max(100px, calc(100vh - 268px));
  max-height: max(100px, calc(100svh - 268px));
 }
 .tt-portfolio-slider .tt-posl-pagination {
  left: auto;
  right: 20px;
  bottom: 8px;
  transform: none;
 }
 /* 2026-09-10 - Phase 2 issue 12 (owner, iPhone landscape): the legacy landscape rule above hides .tt-slide-social .icons,
    so the Instagram icon disappeared on slides 2 and 3; its 40px row is already part of the layout, so showing it again
    moves nothing. */
 .tt-portfolio-slider .tt-slide-social .icons {
  display: inline;
 }
}
/* 2026-09-10 - Phase 2 issue 6 (index.html), owner decision after the live test: the retailer icons bar must stay in place
   and visible while the mobile menu opens and closes (the menu panel, z-index 9999, slides underneath it). The earlier
   rule that hid the bar while the menu was open (body.tt-m-menu-open .platform-icons { display: none }) is withdrawn;
   the bar gets a z-index above the menu so the stacking no longer depends on DOM order. */
.platform-icons {
 z-index: 10000;
}
/* 2026-09-10 - Phase 2 issue 8 (owner decision): on tablets the Prev/Next cards stack and the card image took its natural
   height (688-947px at 768px wide); the image is capped like on desktop (200px there), cropped with object-fit cover. */
@media (min-width: 481px) and (max-width: 991px) {
 .next-article-image img {
  height: 260px;
  object-fit: cover;
 }
}
/* 2026-09-10 - Phase 2 issue 15 (owner, iPhone landscape with the menu open): the legacy landscape rule hides the retailer
   icons bar to make room for the slide; while the mobile menu is open the slide is covered anyway, so the bar is shown
   again, moved down to 12px so it sits under the last menu item (the items end at about 300px on a 375px-high viewport).
   Owner refinement (same day): no hard switch. The bar fades in 0.8s after the menu starts opening (theme.js: panel 0.4s,
   items staggered until about 0.8s) and fades out in 0.3s as soon as the menu starts closing (theme.js removes the body
   class at the click; the items take 0.3s and the panel another 0.3s, so the bar is gone before the panel leaves). */
@media screen and (orientation: landscape) and (max-height: 550px) {
 .platform-icons {
  display: flex; /* kept in the layout but invisible; position fixed, so nothing moves */
  bottom: 22px; /* 2026-09-10 owner: same value as the open state, otherwise the bar jumped from 22px to 96px while fading out */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
 }
 body.tt-m-menu-open .platform-icons {
  bottom: 22px; /* 2026-09-10 owner: 10px higher than the first value (12px) */
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.3s ease 0.8s, visibility 0s linear 0.8s;
 }
}
/* 2026-09-10 - Phase 2 issue 19 (owner): the card image was 20px from the top of the card but 27px from the bottom,
   because the img is inline and sits on the text baseline, leaving the descender space (7px at 19px/26.6px) under it.
   The image becomes a block; in the side-by-side layout (>= 992px) the card centres image and text vertically. */
.next-article-image img {
 display: block;
}
@media (min-width: 992px) {
 .next-article-card {
  align-items: center;
 }
}
/* 2026-09-10 - Phase 2 issue 20 (owner): the author photo (slide 2) and the painting (slide 3) must have exactly the
   height and the top/bottom position of the book cover on slide 1; their width may differ. Two causes were measured:
   (1) the photo had its own height cap (100svh - 540px) while the cover uses 100svh - 507px, and on tall screens the
   cover is width-limited (300px -> 470.4px high, ratio 1000x1568) while the photo was not; (2) the caption block is
   centred vertically and the block under the image is 3px taller on slide 1 (title + buttons + info = 171px) than
   on slides 2/3 (title + info + Instagram row = 168px), which shifted the image top by half of that.
   Fix: slides 2/3 images get height = the cover's rendered height, min(height cap, width cap x 1.568), per breakpoint;
   the Instagram row gets margin-top 28px (was 25px) so the blocks are equally tall. */
.tt-portfolio-slider .hero-mhn {
 width: auto;
 max-width: none;
 max-height: none;
 height: min(max(160px, calc(100vh - 507px)), 470.4px);
 height: min(max(160px, calc(100svh - 507px)), 470.4px); /* 300px cover width x 1.568 */
}
@media (min-width: 481px) and (max-width: 991px) {
 .tt-portfolio-slider .hero-mhn {
  height: min(max(160px, calc(100vh - 507px)), 392px);
  height: min(max(160px, calc(100svh - 507px)), 392px); /* 250px cover width x 1.568 */
 }
}
@media (max-width: 480px) {
 .tt-portfolio-slider .hero-mhn {
  height: min(max(160px, calc(100vh - 507px)), 78.4vw);
  height: min(max(160px, calc(100svh - 507px)), 78.4vw); /* 50vw cover width x 1.568 */
 }
}
@media screen and (orientation: landscape) and (max-height: 550px) {
 .tt-portfolio-slider .hero-mhn {
  height: min(max(100px, calc(100vh - 268px)), 392px);
  height: min(max(100px, calc(100svh - 268px)), 392px); /* same caps as the cover in the issue 5 block */
 }
}
.tt-portfolio-slider .tt-slide-social {
 margin-top: 28px; /* was 25px: equalises the block height with slide 1 (buttons row) */
}