/* GEM BARBER CANBERRA — Main Stylesheet */
/* Refactored 2026-05-08 — Speed, UX, and SEO optimized */
/* FONTS — Custom @font-face Declarations */
@font-face
{
  font-family: text;
  src: url('/font/text.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face
{
  font-family: bold;
  src: url('/font/bold.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face
{
  font-family: icon;
  src: url('/font/icon.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: block;
}
/* DESIGN TOKENS — CSS Custom Properties */
: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: #fff;
  --tt-link-hover-color: #fff;
  --tt-accent-blue: #0271e3;
  --tt-dark-bg: #171b27;
  --tt-accent-green: #00ff4c;
}
/* RESET CHAINS — Shared base properties grouped for byte efficiency */
.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;
}
.dir-map,
.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;
}
/* BASE & GLOBAL — Box model, body, links, selection */
*
{
  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);
}
/* SCROLLBAR — Smooth scroll and custom scrollbar styling */
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;
}
/* TYPOGRAPHY — Headings */
.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;
}
/* LAYOUT — Body inner wrapper */
#body-inner
{
  height: 100%;
  min-height: 100vh;
  min-height: 100svh;
}
/* HEADER — Top navigation bar */
#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 .3s;
  max-width: 1100px;
  margin: 0 auto;
}
#tt-header::before
{
  position: absolute;
  content: "";
  inset: 0;
  z-index: -1;
  transition: background-color .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;
}
/* SHOP / OPEN-NOW BADGE */
#shop5
{
  color: #2cff65;
  font-size: 13px;
  display: block;
  padding: 3px;
  margin-bottom: -25px;
}
/* BUTTONS */
.tt-btn
{
  display: inline-flex;
  align-items: center;
  height: 32px;
  margin: 18px 3px;
  padding: 15px 25px;
  font-size: 14px;
  letter-spacing: .5px;
  border-radius: 100px;
  z-index: 9;
}
.tt-btn-secondary
{
  background: var(--tt-accent-blue);
  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, .5);
  border-radius: 25px;
  font-size: 14px;
  font-weight: 900;
}
.tt-btn-outline:hover
{
  background-color: rgba(255, 255, 255, .1);
}
/* SOCIAL BUTTONS */
.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;
}
/* PORTFOLIO SLIDER — Hero swiper */
.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: 50%;
  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(.8);
}
.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: .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 .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: #654500;
  font-family: var(--tt-alter-font);
  z-index: 2;
}
/* ICON FONTS */
.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;
}
.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: 20px;
  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;
}
.dir-map,
.dir-shadow
{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
}
.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: .3;
}
/* SEARCH ICON */
.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;
}
/* SOCIAL ICON GLYPHS */
.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";
}
/* DIRECTION INDICATOR — Footer location pin with bounce */
.dir-map
{
  bottom: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #dedede;
  font-weight: 300;
  font-size: 15px;
  z-index: 9999;
  cursor: pointer;
  animation: 1.2s ease-out realBounce;
}
.dir-icon
{
  font-size: 1.8em;
  color: #ea4336;
  line-height: 1;
  margin-bottom: 4px;
  z-index: 1000;
}
.dir-shadow
{
  bottom: 98px;
  width: 28px;
  height: 8px;
  background-color: #888;
  border-radius: 50%;
  z-index: 999;
  opacity: .5;
}
.dir-add,
.dir-name
{
  position: fixed;
  bottom: 102px;
  transform: translateY(50%);
  align-items: center;
  font-size: 13px;
  color: #dedede;
  z-index: 1000;
  display: flex;
  font-weight: 300;
  white-space: nowrap;
}
.dir-add
{
  left: calc(50% + 20px);
}
.dir-name
{
  right: calc(50% + 20px);
}
/* SITE LOGO & BRAND */
.site-logo
{
  display: flex;
  align-items: center;
  gap: .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: .07em;
}
.brand-group
{
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.brand-link,
.footer-logo .site-logo
{
  display: flex;
  align-items: center;
  gap: .5rem;
}
.brand-name
{
  font-family: icon;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: .1rem;
}
.phone-number
{
  font-family: icon;
  margin: .5rem 0 0;
  line-height: 1.4;
  text-shadow: 0 0 0 currentColor, .2px 0 currentColor, -.2px 0 currentColor, 0 .2px currentColor, 0 -.2px currentColor;
}
.heart,
.tik5,
.tik6,
.tik7
{
  font-family: icon;
}
/* MAIN MENU */
.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: .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: var(--tt-accent-blue);
  border-radius: 25px;
  transform: scale(0);
  transition: transform .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;
}
.tt-main-menu-list>li:last-child>a
{
  background: var(--tt-accent-blue);
  color: #fff;
  border: none;
  font-family: bold;
  font-weight: 900;
  padding: 6px 18px;
  font-size: 14px;
  border-radius: 25px;
  letter-spacing: .5px;
}
.tt-main-menu-list>li:last-child>a:hover
{
  background: var(--tt-accent-blue);
  transform: none;
  box-shadow: 0 4px 15px rgba(148, 55, 255, .3);
}
.tt-search-icon-item .tt-search-icon
{
  padding: 0;
  border-radius: 0;
}
body.tt-m-menu-open .tt-main-menu
{
  transform: none;
}
/* PORTFOLIO SLIDER — Backgrounds & social */
.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 MARKERS — Decorative status icons */
.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 LABEL CAPTIONS */
.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 PAGES */
.article-main
{
  padding-top: 120px;
  min-height: 100vh;
  background-color: var(--tt-main-color);
}
.article-cta-section,
.next-article-card
{
  background-color: var(--tt-dark-bg);
  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: 20px;
  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 -20px;
  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;
  color: #8DBAFF;
}
.article-content
{
  font-size: 17px;
  line-height: 1.3;
  color: #fff;
}
.article-content p
{
  margin-bottom: 24px;
  color: #fff;
}
.article-content h2
{
  margin: 20px 0;
}
.article-content h3
{
  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,
.footer-copyright,
.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, .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: var(--tt-accent-green);
}
.read-with-icon
{
  display: inline-flex;
  align-items: center;
  gap: .4em;
  white-space: nowrap;
}
/* AUDIO PLAYER — Custom HTML5 player */
.article-audio
{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 0 1.25rem;
  padding: .75rem 0 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.custom-audio-player
{
  width: min(720px, 100%);
  margin: 0 auto;
  border-radius: 50px;
  background: var(--tt-dark-bg);
  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: .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, .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 .1s;
}
.time-display
{
  color: #e0e0e0;
  font-size: 13px;
  min-width: 40px;
  text-align: center;
  flex-shrink: 0;
}
.article-audio .audio-caption
{
  margin-top: .5rem;
  text-align: center;
  color: #aaa;
  font-size: .95rem;
  line-height: 1.6;
}
/* RATING & MISC */
.footer-logo .icon,
.rating
{
  font-family: icon;
  line-height: 1;
}
.rating
{
  font-size: 17px;
  margin-top: -9px;
  margin-bottom: -2px;
}
.line
{
  color: rgb(73 75 86 / 50%);
}
/* FOOTER */
.footer-heading,
.footer-links a
{
  color: #fff;
  font-size: 12px;
}
.site-footer
{
  background-color: var(--tt-dark-bg);
  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: .3rem 0 0;
  line-height: 1.4;
}
.footer-logo .phone-number a
{
  color: #ebebeb;
  text-decoration: none;
}
.footer-nav
{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-bottom: 10px;
  padding: 7px 0 11px;
  border-bottom: 1px solid #2b3039;
}
.footer-heading,
.footer-links li
{
  margin-bottom: 1px;
}
.footer-column
{
  min-width: 0;
}
.footer-links
{
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-links a
{
  line-height: .3;
  text-decoration: none;
  transition: color .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 .2s;
}
.footer-social .icons
{
  font-size: 16px;
  line-height: 1;
  color: #ebebeb;
}
.footer-bottom
{
  padding: 17px 0 21px;
  font-size: 12px;
  line-height: .3;
}
.footer-legal-responsive
{
  font-family: bold;
  font-size: 11px;
  display: inline;
}
.footer-legal-responsive a
{
  color: #fff;
  text-decoration: none;
  transition: color .2s;
}
.footer-legal-responsive a:hover
{
  color: #4f0;
  text-decoration: none;
}
.footer-legal-responsive .separator
{
  margin: 0 8px;
  color: #505869;
}
.footer-copyright p
{
  font-size: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1px;
}
.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: #ea4336;
  line-height: 1;
}
.footer-location .location-text
{
  font-size: 13px;
  color: #424245;
}
/* ARTICLE PAGE — Header overrides */
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 & TEAM LISTS */
.sitemap ol,
.sitemap ul,
.team
{
  list-style: none;
  margin: 0;
  padding: 0;
}
.team li::marker
{
  content: "";
}
.sitemap
{
  color: #fff;
}
.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;
}
/* LOGO SHARED — Header & Footer logo sizing */
.footer-logo .icon,
.site-logo .icon
{
  font-size: 4rem;
}
.footer-logo .brand-name,
.site-logo .brand-name
{
  font-size: 1rem;
  letter-spacing: 1px;
}
.footer-logo .phone-number,
.site-logo .phone-number
{
  font-size: 1rem;
}
/* ANIMATIONS — @keyframes */
@keyframes pulseCircle
{
  0%,
  100%
  {
    transform: translate(-50%, -50%) scale(.9);
    opacity: .8;
  }
  50%
  {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}
@keyframes realBounce
{
  0%,
  100%,
  20%,
  40%,
  60%,
  80%
  {
    transform: translateX(-50%) translateY(0);
  }
  10%
  {
    transform: translateX(-50%) translateY(-80px);
  }
  30%
  {
    transform: translateX(-50%) translateY(-60px);
  }
  50%
  {
    transform: translateX(-50%) translateY(-10px);
  }
  70%
  {
    transform: translateX(-50%) translateY(-5px);
  }
}
/* ACCESSIBILITY — Skip link & reduced motion */
.skip-link
{
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus
{
  position: fixed;
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  padding: 12px 16px;
  background: var(--tt-dark-bg);
  color: var(--tt-link-color);
  z-index: 9999;
  text-decoration: underline;
}



/* BACKDROP BLUR — Apple-style page blur when mobile menu is open */
body::before
{
  content: '';
  position: fixed;
  inset: 0;
  z-index: 998;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(0, 0, 0, .001);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.3s ease-in-out, visibility 0s linear 1.3s;
}
body.tt-m-menu-open::before
{
  visibility: visible;
  opacity: 1;
  transition: opacity 1s ease-in-out, visibility 0s linear 0s;
}



@media (prefers-reduced-motion: reduce)
{
  *,
  *::before,
  *::after
  {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
/* INLINE-MIGRATED UTILITY CLASSES */
.text-highlight
{
  color: var(--tt-accent-green);
  font-family: 'bold';
}
.icon-overlap
{
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}
.text-bold
{
  font-family: 'bold';
}
.list-plain
{
  list-style: none;
  padding-left: 0;
}
.text-italic
{
  font-style: italic;
}
.text-center
{
  text-align: center;
}
.fallback-message
{
  text-align: center;
  padding: 20px 20px;
  font-family: Arial, sans-serif;
}
.container-narrow
{
  max-width: 820px;
  margin: 0 auto;
}
.text-large
{
  font-size: 1.5em;
  font-family: text;
}
.note-light
{
  font-size: 1.1rem;
  color: #d6d6d6;
  margin: 20px 0;
}
.btn-cta-pill
{
  display: inline-block;
  padding: 12px 24px;
  background-color: var(--tt-accent-blue);
  color: #fff;
  text-decoration: none;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 700;
}
/* MISC TOP-LEVEL OVERRIDES */
.article-content p.rating
{
  color: #f8b604;
}
/* RESPONSIVE — @media Queries */
@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: translateY(-100%);
  }
  body.tt-m-menu-open .tt-main-menu
  {
    visibility: visible;
  }
  .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;
  }
  .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 .4s, transform .4s;
  }
  .tt-main-menu-list>li:first-child>a
  {
    border: 1px solid rgba(255, 255, 255, .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, .2);
    border-radius: 25px;
  }
  .tt-main-menu-list>li:nth-child(3)>a
  {
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 25px;
  }
  .tt-main-menu-list>li:last-child>a
  {
    background: var(--tt-accent-blue);
    color: #fff;
    border: none;
    font-family: bold;
    font-weight: 900;
    border-radius: 25px;
    letter-spacing: .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: .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: .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: .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: 16px;
    line-height: 1.3;
  }
  .article-meta
  {
    font-size: 11px;
  }
  .article-featured-image
  {
    margin: 20px -15px;
  }
  .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: 1;
    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-nav
  {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .footer-bottom
  {
    padding: 10px 0 0;
    font-size: 12px;
    line-height: 1.3;
    flex-direction: column;
    align-items: flex-start;
  }
  .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: .75rem;
  }
  .article-audio .audio-caption
  {
    font-size: .9rem;
  }
  .footer-copyright p
  {
    display: block;
    margin: 0;
    text-align: center;
  }
  .footer-address,
  .footer-legal-responsive
  {
    display: block;
    margin-top: .3rem;
  }
}
@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;
  }
  .footer-legal-responsive,
  .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: translateY(-100%);
  }
  body.tt-m-menu-open .tt-main-menu
  {
    visibility: visible;
  }
  .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;
  }
  .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, .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, .2);
    border-radius: 25px;
  }
  .tt-main-menu-list>li:nth-child(3)>a
  {
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 25px;
  }
  .tt-main-menu-list>li:last-child>a
  {
    background: var(--tt-accent-blue);
    color: #fff;
    border: none;
    font-family: bold;
    font-weight: 900;
    border-radius: 25px;
    letter-spacing: .5px;
  }
  .tt-menu-item-info
  {
    display: block;
    font-size: 12px;
    color: var(--tt-text-color);
    opacity: .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: .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: .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;
  }
  .footer-bottom
  {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .footer-copyright
  {
    margin-bottom: 0;
    width: 100%;
  }
  .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: 18px;
  }
  .article-featured-image
  {
    /* 2026-09-18 issue 1: was -30px, which exceeded the container's 20px
       padding and made the document 778px wide at a 768px viewport
       (10px horizontal scroll on iPad portrait). */
    margin: 30px -20px;
  }
  .article-content h2
  {
    font-size: 17px;
  }
  .article-content h3
  {
    font-size: 16px;
  }
  .article-cta-section
  {
    padding: 30px;
  }
  .article-featured-image img
  {
    border-radius: 0;
  }
}
@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;
  }
  .footer-nav
  {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--footer-gap, 20px);
  }
  .footer-nav > .footer-column:nth-of-type(3)
  {
    display: none;
  }
  .footer-copyright p
  {
    display: block;
    margin: 0;
    text-align: center;
  }
  .footer-address,
  .footer-legal-responsive
  {
    display: block;
    margin-top: .9rem;
  }
}
@media screen and (min-width: 481px) and (max-width: 991px) and (orientation: landscape)
{
  .footer-bottom
  {
    text-align: center;
  }
  .footer-copyright p
  {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .9rem;
    margin: 0;
  }
  .footer-line-1,
  .footer-line-2
  {
    display: block;
  }
  .footer-line-2
  {
    order: -1;
  }
  .footer-line-2 .footer-address,
  .footer-line-2 .footer-legal-responsive
  {
    display: inline;
  }
  .footer-line-2 .footer-legal-responsive
  {
    margin-left: .75ch;
  }
  .footer-line-2 .footer-legal-responsive .separator
  {
    margin: 0 .5ch;
  }
  .footer-address::before
  {
    content: none;
  }
}
@media screen and (orientation: landscape) and (max-height: 550px)
{
  .dir-add,
  .dir-icon,
  .dir-map,
  .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;
  }
  .footer-nav
  {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--footer-gap, 20px);
  }
  .footer-nav > .footer-column:nth-of-type(3)
  {
    display: none;
  }
  .tt-posl-item-title
  {
    font-size: 20px;
    padding: 0 10px;
  }
}

/* ------------------------------------------------------------------
   2026-09-18 issue 2: the book cover on the home page and the novel
   page rendered 980x1527 on a desktop viewport and filled more than a
   screen. The cover is now capped by height, not width, so it keeps its
   own proportions and sits within one screen on every size.
   Scoped to .cover-figure only; no other featured image is affected.
   ------------------------------------------------------------------ */
.cover-figure img
{
  width: auto;
  max-width: 100%;
  max-height: 70svh;
  margin: 0 auto;
}
@media (max-width: 480px)
{
  .cover-figure img
  {
    max-height: 60svh;
  }
}

/* ------------------------------------------------------------------
   2026-09-18: Minion 3, the typeface the novel is set in, used for the
   chapter text only. The owner supplied minion3-regular.otf and
   minion3-italic.otf; both were converted to woff2 (280 KB and 242 KB,
   about half the original size). Scoped to .chapter-text paragraphs so
   no other page or element changes.
   ------------------------------------------------------------------ */
@font-face
{
  font-family: minion;
  src: url('/font/minion3-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face
{
  font-family: minion;
  src: url('/font/minion3-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
.chapter-text p,
.chapter-text em,
.chapter-text i
{
  font-family: minion, Georgia, 'Times New Roman', serif;
  font-size: 19px;
  line-height: 1.6;
}
@media (max-width: 480px)
{
  .chapter-text p,
  .chapter-text em,
  .chapter-text i
  {
    font-size: 18px;
  }
}

/* ------------------------------------------------------------------
   2026-09-18 owner: the header carries the logo on its own. The brand
   name was removed from the markup, and the mark is 30% smaller
   (4rem to 2.8rem). Scoped so the rest of the header is untouched.
   ------------------------------------------------------------------ */
.site-logo .icon
{
  font-size: 2.8rem;
}

/* ------------------------------------------------------------------
   2026-09-18 owner: the footer is separated by a line, not by a
   background colour, the same way as on mohamadhnaghdi.com. The footer
   now sits on the page background with a 1px #535355 rule above it.
   ------------------------------------------------------------------ */
.site-footer
{
  background-color: transparent;
  padding: 0;
}
.site-footer .footer-bottom
{
  border-top: 1px solid #535355;
  padding: 20px 0 24px;
  line-height: 1.4;
}
.site-footer .footer-copyright p
{
  font-size: 12px;
  flex-wrap: wrap;
  gap: 0;
}
.site-footer .footer-line-1
{
  color: #bbbcc1;
}
.site-footer .footer-line-1 .text-bold
{
  color: #fff;
}
.site-footer .footer-legal-responsive .separator
{
  margin: 0 5px;
  color: #535355;
}

/* ------------------------------------------------------------------
   2026-09-18 owner: the Prev/Next cards are back on every page,
   including the home page. The card image is capped at 260px tall
   between 481px and 991px so two stacked cards do not run to 2000px,
   the same cap the sister site uses.
   ------------------------------------------------------------------ */
@media (min-width: 481px) and (max-width: 991px)
{
  .next-article-image img
  {
    height: 260px;
    object-fit: cover;
  }
}

/* 2026-09-18: the Prev card's arrow points back, the Next card's forward. */
.tik3-prev
{
  display: inline-block;
  transform: scaleX(-1);
}

/* ------------------------------------------------------------------
   2026-09-18 owner: the mobile menu is back. The template's panel CSS
   was already here but it needed GSAP to fade in, and GSAP is no longer
   loaded. These rules do the fade in plain CSS, so js/site.js only has
   to flip the body class.
   ------------------------------------------------------------------ */
@media (max-width: 991px)
{
  .tt-main-menu
  {
    /* 2026-09-18 owner: the panel opened and closed too fast; the speed
       is halved, so every duration is doubled from .35s to .7s. */
    transition: opacity .7s ease, transform .7s ease, visibility .7s;
  }
  body.tt-m-menu-open .tt-main-menu
  {
    visibility: visible;
    opacity: 1;
    transform: none;
  }
  html.tt-no-scroll,
  html.tt-no-scroll body
  {
    overflow: hidden;
  }
  /* the home icon is a desktop affordance; the burger replaces it */
  .tt-home-icon
  {
    display: none;
  }
}
@media (min-width: 992px)
{
  #tt-m-menu-toggle-btn-wrap
  {
    display: none;
  }
}

/* The cover and platform list shown inside the mobile menu only. */
.tt-m-menu-extra
{
  display: none;
}
@media (max-width: 991px)
{
  .tt-m-menu-extra
  {
    display: block;
    margin-top: 32px;
    text-align: center;
  }
  .tt-m-menu-extra img
  {
    display: block;
    width: auto;
    max-width: 60%;
    max-height: 30svh;
    margin: 0 auto 18px;
    border-radius: 4px;
  }
  .tt-m-menu-extra ul
  {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .tt-m-menu-extra li
  {
    margin: 0 0 10px;
  }
  .tt-m-menu-extra a
  {
    color: #fff;
    font-family: bold;
    font-size: 15px;
    text-decoration: none;
  }
  .tt-m-menu-extra a:hover
  {
    color: #4f0;
  }
}

/* ------------------------------------------------------------------
   2026-09-18 owner: social icons on their own row in the footer, icons
   only, no names. On a desktop they sit on the second line; below 768px
   the copyright takes line one, the page links line two and the icons
   line three.
   ------------------------------------------------------------------ */
.footer-social-row
{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 18px;
  margin-top: 14px;
}
.footer-social-row a
{
  color: #bbbcc1;
  font-family: icon;
  font-size: 18px;
  line-height: 1;
  text-decoration: none;
  transition: color .2s;
}
.footer-social-row a:hover
{
  color: #fff;
}

/* 2026-09-18: glyphs the owner added to icon.woff2 for the footer row. */
.icon-linkedin:before
{
  content: "\E022";
}
.icon-bluesky:before
{
  content: "\E023";
}
.icon-behance:before
{
  content: "\E024";
}

/* 2026-09-18 owner: the social row sits ABOVE the footer rule, so it needs
   its own space under it rather than above. */
.footer-social-row
{
  margin-top: 0;
  margin-bottom: 18px;
}

/* 2026-09-18 owner: the header sat 60px from the top of the window, which
   was too much. Halved to 30px, and the tablet value from 30px to 15px.
   The phone value of 10px is left alone. */
#tt-header
{
  margin-top: 30px;
}
@media (min-width: 481px) and (max-width: 991px)
{
  #tt-header
  {
    margin-top: 15px;
  }
}

/* 2026-09-18 owner: the novel text is 10% larger on a desktop and 5%
   larger on small devices. 19px -> 21px, 18px -> 19px. */
.chapter-text p,
.chapter-text em,
.chapter-text i
{
  font-size: 21px;
}
@media (max-width: 480px)
{
  .chapter-text p,
  .chapter-text em,
  .chapter-text i
  {
    /* 2026-09-18 owner: 10% larger on phones, 19px -> 21px.
       The novel text only; headings and everything else unchanged. */
    font-size: 21px;
  }
}

/* 2026-09-18 owner: in the mobile menu the last item looked like a blue
   button. It now matches the second item instead. */
@media (max-width: 991px)
{
  .tt-main-menu-list>li:last-child>a
  {
    background: rgba(255, 255, 255, .2);
    background-color: rgba(255, 255, 255, .2);
    color: var(--tt-text-color);
    font-family: var(--tt-body-font);
    font-weight: 300;
    letter-spacing: normal;
  }
}

/* 2026-09-18: retailer glyphs the owner added to icon.woff2. */
.icon-kindle:before
{
  content: "\E025";
}
.icon-apple-books:before
{
  content: "\E026";
}
.icon-kobo:before
{
  content: "\E027";
}

/* The platform links inside the mobile menu are icons on one row. */
@media (max-width: 991px)
{
  .tt-m-menu-extra ul
  {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 26px;
  }
  .tt-m-menu-extra li
  {
    margin: 0;
  }
  .tt-m-menu-extra a
  {
    display: block;
    font-family: icon;
    font-size: 26px;
    line-height: 1;
    color: #fff;
  }
}

/* ------------------------------------------------------------------
   2026-09-18 owner: the blue call-to-action moves from the last menu
   item (Calligraphy & Design) to the first one (Novels). The template
   styled the last item; these rules undo that and style the first.
   Desktop only: below 992px the mobile menu keeps its plain pills.
   ------------------------------------------------------------------ */
@media (min-width: 992px)
{
  .tt-main-menu-list>li:last-child>a
  {
    background: none;
    color: var(--tt-text-color);
    font-family: var(--tt-body-font);
    font-weight: 300;
    font-size: 14px;
    padding: 6px 18px;
    border-radius: 25px;
    letter-spacing: normal;
  }
  .tt-main-menu-list>li:last-child>a:hover
  {
    background: none;
    box-shadow: none;
    color: var(--tt-link-hover-color);
  }
  /* 2026-09-18: "Read Chapter One" became the first item, so the blue
     button follows Novels to position 2. */
  .tt-main-menu-list>li:nth-child(2)>a
  {
    background: var(--tt-accent-blue);
    color: #fff;
    border: none;
    font-family: bold;
    font-weight: 900;
    padding: 6px 18px;
    font-size: 14px;
    border-radius: 25px;
    letter-spacing: .5px;
  }
  .tt-main-menu-list>li:nth-child(2)>a:hover
  {
    background: var(--tt-accent-blue);
    color: #fff;
    transform: none;
    box-shadow: 0 4px 15px rgba(148, 55, 255, .3);
  }
  .tt-main-menu-list>li:nth-child(2)>a::before
  {
    display: none;
  }
}

/* ------------------------------------------------------------------
   2026-09-18 owner: the caption must sit under the image, aligned to
   the image's own right edge with a 5px gap. It was aligned to the
   figure instead, so on any image narrower than the figure (the height
   capped ones) the caption drifted far to the right of the picture.
   The figure becomes a shrink-to-fit table so its width follows the
   image's used width, and the caption is a table-caption beneath it.
   ------------------------------------------------------------------ */
.article-featured-image
{
  display: table;
  margin-left: auto;
  margin-right: auto;
  table-layout: auto;
}
.article-featured-image figcaption
{
  display: table-caption;
  caption-side: bottom;
  text-align: right;
  padding: 0 5px 0 0;
}

/* ------------------------------------------------------------------
   2026-09-18 owner: the page title is twice the size. Scoped to the h1
   inside .article-header, so the h2 headings in the body, which share
   the .article-title class, keep their own size.
   20px -> 40px, 18px -> 36px on tablets, 16px -> 32px on phones.
   ------------------------------------------------------------------ */
.article-header .article-title
{
  font-size: 40px;
}
@media (min-width: 481px) and (max-width: 991px)
{
  .article-header .article-title
  {
    font-size: 36px;
  }
}
@media (max-width: 480px)
{
  .article-header .article-title
  {
    font-size: 32px;
  }
}

/* ------------------------------------------------------------------
   2026-09-18 owner: the social icons moved out of the footer and sit
   above the featured image, on the author and calligraphy pages only.
   The retailer icons sit above the image and again before the heart,
   on the novel pages only. Both rows are centred.
   ------------------------------------------------------------------ */
.icon-row
{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 22px;
  margin: 0 0 24px;
}
.icon-row-end
{
  margin: 28px 0 0;
}
.icon-row a
{
  color: #bbbcc1;
  font-family: icon;
  font-size: 22px;
  line-height: 1;
  text-decoration: none;
  transition: color .2s;
}
.icon-row a:hover
{
  color: #fff;
}

/* ------------------------------------------------------------------
   2026-09-18 owner: the "Where to buy" list carries the platform icon,
   then the arrow, then the name, all on one line. The three sit side by
   side on wide screens and wrap only when they genuinely do not fit.
   ------------------------------------------------------------------ */
.article-content ul.buy-list
{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 10px 32px;
  margin: 0 0 24px;
  padding: 0;
}
.article-content ul.buy-list li
{
  margin: 0;
  list-style: none;
}
.article-content ul.buy-list li::before
{
  content: none;
}
.buy-list a
{
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.buy-icon
{
  font-family: icon;
  /* 2026-09-18 owner: 10% smaller, 20px -> 18px */
  font-size: 18px;
  line-height: 1;
  margin-right: 10px;
}

/* 2026-09-18 owner: on the chapter page the title reads
   "D-Dyla.n | Chapter One" with a paler separator. */
.title-sep
{
  color: #6a6a72;
  font-weight: 300;
  padding: 0 .12em;
}

/* 2026-09-18 owner: below 768px the three platforms do not fit on one
   line, so each takes its own row rather than wrapping unevenly. */
@media (max-width: 767px)
{
  .article-content ul.buy-list
  {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* ------------------------------------------------------------------
   2026-09-18 owner: the mobile menu follows the Apple pattern. No pill
   or border around an item, text three times larger, everything left
   aligned, all of it in #F5F5F7. The cover sits left aligned under the
   items, and under it the three platforms, one per line, each as logo,
   arrow, name.
   ------------------------------------------------------------------ */
@media (max-width: 991px)
{
  .tt-main-menu-inner
  {
    align-items: flex-start;
    justify-content: flex-start;
    padding: 110px 8% 60px;
  }
  .tt-main-menu-content
  {
    text-align: left;
  }
  .tt-main-menu-list>li
  {
    /* 2026-09-18 owner: row spacing 10% tighter, 22px -> 20px */
    margin: 0 0 20px;
  }
  /* strip every pill, border and colour the template puts on the items */
  .tt-main-menu-list>li>a,
  .tt-main-menu-list>li:first-child>a,
  .tt-main-menu-list>li:nth-child(2)>a,
  .tt-main-menu-list>li:nth-child(3)>a,
  .tt-main-menu-list>li:nth-child(4)>a,
  .tt-main-menu-list>li:last-child>a
  {
    display: inline-block;
    background: none;
    background-color: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    /* 2026-09-18 owner: 39px was too large; 30% smaller, 39 -> 27px.
       The platform icons, arrows and names below are unaffected. */
    font-size: 27px;
    font-family: bold;
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: #f5f5f7;
    text-align: left;
    /* the template sets nowrap on menu links; at 39px a long label has
       to be allowed to run onto a second line instead of overflowing */
    white-space: normal;
    max-width: 100%;
  }
  .tt-main-menu-list>li>a::before
  {
    display: none;
  }
  .tt-main-menu-list>li>a:hover,
  .tt-main-menu-list>li>a:active
  {
    color: #f5f5f7;
    background: none;
    transform: none;
    box-shadow: none;
  }

  /* cover and platforms, left aligned under the items */
  .tt-m-menu-extra
  {
    text-align: left;
    margin-top: 40px;
  }
  .tt-m-menu-extra img
  {
    margin: 0 0 24px;
    max-width: 46%;
    max-height: 26svh;
  }
  .tt-m-menu-extra ul.menu-buy-list
  {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .tt-m-menu-extra ul.menu-buy-list li
  {
    margin: 0 0 16px;
  }
  .tt-m-menu-extra ul.menu-buy-list a
  {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    font-family: bold;
    font-size: 17px;
    line-height: 1;
    color: #f5f5f7;
    text-decoration: none;
  }
  .tt-m-menu-extra ul.menu-buy-list .buy-icon
  {
    font-family: icon;
    font-size: 18px;
    margin-right: 10px;
  }
}

/* 2026-09-19 owner: the three retailer marks sit 2px too low against the
   arrow and the text. Applies wherever they appear: the icon row above a
   featured image, the "Where to buy" list and the mobile menu list. */
.icon-kindle,
.icon-apple-books,
.icon-kobo
{
  position: relative;
  top: -2px;
}

/* ------------------------------------------------------------------
   2026-09-19 owner, footer fixes for the phone.

   1. In landscape the template put the links line above the copyright
      line, a leftover from the Gem Barber footer where line 2 held the
      shop address. The copyright line comes first again.
   2. The leading separator belongs to the one-line footer only. Once
      the footer breaks into two lines, a bar and a space at the start
      of the second line are wrong, so it is hidden below 992px, which
      is exactly where the two lines separate.
   ------------------------------------------------------------------ */
@media screen and (min-width: 481px) and (max-width: 991px) and (orientation: landscape)
{
  .footer-line-2
  {
    order: 0;
  }
}
.footer-legal-responsive > .separator:first-child
{
  display: none;
}
@media (min-width: 992px)
{
  .footer-legal-responsive > .separator:first-child
  {
    display: inline;
  }
}

/* ------------------------------------------------------------------
   2026-09-19 owner (iPhone landscape): the Prev/Next card image was
   cropped to a 732x260 strip. Cause: the tablet rule (min-width 481 and
   max-width 991: height 260px, object-fit cover) also catches a phone
   held landscape, which is 812 wide, and it wins on source order over
   the landscape-phone rule higher up. The card is laid out like the
   desktop one instead: a 200x200 square image on the left with the text
   beside it, one card per row. Two side by side would leave about 116px
   for the text on an 812px screen. Same fix as mohamadhnaghdi.com.
   Tablets and every other size are untouched.
   ------------------------------------------------------------------ */
@media screen and (orientation: landscape) and (max-height: 550px)
{
  .next-article-card
  {
    flex-direction: row;
    align-items: center;
  }
  .next-article-image
  {
    flex: 0 0 200px;
  }
  .next-article-image img
  {
    width: 200px;
    height: 200px;
    margin: 0;
    object-fit: cover;
  }
}