/*
Theme Name: Tours Around Turkey
Theme URI: https://toursaroundturkey.com/
Author: Hasan Gülday
Author URI: https://toursaroundturkey.com/licensed-tour-guide-in-turkey/
Description: Field notes of a licensed tour guide. One wide reading column with a right sidebar, an illustrated horizon drawn in the site's own ink, self-hosted Newsreader type, warm paper and deep teal. Light only. No page builders, no external requests.
Version: 2.0.2
Requires at least: 6.3
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: toursaroundturkey
Tags: blog, two-columns, right-sidebar, custom-logo, custom-menu, featured-images, translation-ready
*/

/* ==========================================================================
   CONTENTS
   01 fonts            06 buttons           11 article furniture   16 forms
   02 tokens           07 layout            12 lists of articles   17 doodles + scene
   03 base             08 masthead          13 sidebar             18 motion
   04 WordPress        09 article header    14 footer              19 small screens
   05 header           10 article text      15 phone bar           20 print
   ========================================================================== */

/* ============ 01 fonts: self-hosted Newsreader (variable: weight 400-700, optical size 10-72) ============ */
@font-face{font-family:"Newsreader";font-style:normal;font-weight:400 700;font-display:swap;src:url("assets/fonts/nr-roman-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* latin-ext carries the Turkish letters: ğ ş İ */
@font-face{font-family:"Newsreader";font-style:normal;font-weight:400 700;font-display:swap;src:url("assets/fonts/nr-roman-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400 700;font-display:swap;src:url("assets/fonts/nr-italic-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400 700;font-display:swap;src:url("assets/fonts/nr-italic-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* Metric-matched stand-ins: measured against the real files, Newsreader sets
   0.5% wider than Georgia and 9.5% wider than Times. The text does not re-wrap
   when the web font arrives, so the page does not jump. */
@font-face{font-family:"Newsreader Fallback";src:local("Georgia");size-adjust:100.5%}
@font-face{font-family:"Newsreader Fallback";src:local("Tinos");size-adjust:109.5%}
@font-face{font-family:"Newsreader Fallback";src:local("Liberation Serif");size-adjust:109.5%}
@font-face{font-family:"Newsreader Fallback";src:local("Times New Roman");size-adjust:109.5%}

/* ============ 02 tokens ============
   One palette, light only. Contrast measured (WCAG 2.2):
   ink 14.2 / ink-2 7.7 / muted 5.4 / teal 8.2 on paper; white on sienna 5.2;
   white on WhatsApp green 5.6; field border 3.5 on paper.
   Sienna is the action color: buttons only. Brass is ornament only. */
:root{
  color-scheme:light;
  color-scheme:light only;
  --paper:#FAF7F2; --card:#F3EDE2; --card-hi:#FFFDF9; --wash:#E9F1F1;
  --hair:#E0D7C7; --hair-2:#CBDDDF; --line:#8C8474;
  --ink:#1C2730; --ink-2:#43515A; --muted:#5B6871;
  --teal:#12525C; --teal-deep:#0B3A42; --teal-soft:#DCEAEB;
  --sienna:#B34E1C; --sienna-deep:#8F3D14; --accent-ink:#8F3D14;
  --brass:#9A7B4F; --brass-ink:#7D6440;
  --wa:#107567; --wa-deep:#0B5A4E;
  --foot:#0B3A42; --foot-text:#D6E6E8; --foot-muted:#A9CDD2;

  --serif:"Newsreader","Newsreader Fallback",Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  /* fluid type scale: 17px at 360 to 19px at 1440, rem + vw so browser zoom still works */
  --step--1:clamp(.84rem,.82rem + .09vw,.9rem);
  --step-0:clamp(1.062rem,1.021rem + .185vw,1.188rem);
  --step-1:clamp(1.275rem,1.205rem + .31vw,1.484rem);
  --step-2:clamp(1.53rem,1.422rem + .482vw,1.855rem);
  --step-3:clamp(1.836rem,1.675rem + .716vw,2.319rem);
  --step-4:clamp(2.203rem,1.971rem + 1.031vw,2.899rem);
  --step-5:clamp(2.644rem,2.317rem + 1.452vw,3.624rem);

  --gut:clamp(16px,4vw,28px);
  --r:12px; --r-s:8px;
  --shadow:0 1px 2px rgba(28,39,48,.05),0 10px 26px -14px rgba(28,39,48,.2);
  --shadow-up:0 2px 4px rgba(28,39,48,.06),0 18px 38px -16px rgba(28,39,48,.28);
  --ease:cubic-bezier(.23,1,.32,1);

  /* the kilim border: a woven strip used on the top of the page and on the side of boxes */
  --kilim-h:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='6'%3E%3Crect width='24' height='6' fill='%2312525C'/%3E%3Cpath d='M0 3 3 0 6 3 3 6z' fill='%23FAF7F2'/%3E%3Cpath d='M12 3 15 0 18 3 15 6z' fill='%23C9A46A'/%3E%3C/svg%3E");
  --kilim-v:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='24'%3E%3Crect width='6' height='24' fill='%2312525C'/%3E%3Cpath d='M3 0 6 3 3 6 0 3z' fill='%23FAF7F2'/%3E%3Cpath d='M3 12 6 15 3 18 0 15z' fill='%23C9A46A'/%3E%3C/svg%3E");
}

/* ============ 03 base ============ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:20px}
body{
  margin:0;background-color:var(--paper);color:var(--ink);
  font-family:var(--serif);font-size:var(--step-0);line-height:1.6;
  font-optical-sizing:auto;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  /* faint Turkish-motif pattern behind everything (inline, no request) */
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27224%27%20height%3D%27224%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%2312525C%27%20stroke-opacity%3D%270.045%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M34%2012%20L50%2028%2034%2044%2018%2028%20Z%20M34%2020%20L42%2028%2034%2036%2026%2028%20Z%27%2F%3E%3Ccircle%20cx%3D%27168%27%20cy%3D%2758%27%20r%3D%2710%27%2F%3E%3Ccircle%20cx%3D%27168%27%20cy%3D%2758%27%20r%3D%275%27%2F%3E%3Ccircle%20cx%3D%27168%27%20cy%3D%2758%27%20r%3D%271.5%27%2F%3E%3Cpath%20d%3D%27M96%2088%20q0%20-9%207%20-12%20M103%2076%20q-5%20-1%20-5%20-7%20q6%200%205%207%20M103%2076%20q5%20-1%205%20-7%20q-6%200%20-5%207%27%2F%3E%3Cpath%20d%3D%27M28%20148%20q0%20-9%203%20-13%20q1%20-2%202%200%20q3%204%203%2013%20M26%20136%20q5%20-3%2010%200%20M44%20148%20q0%20-6%202%20-9%20q1%20-1%202%200%20q2%203%202%209%27%2F%3E%3Cpath%20d%3D%27M186%20124%20q-5%20-3%20-6%20-8%20q0%20-3%203%20-3%20q3%200%203%202%20q0%20-2%203%20-2%20q3%200%203%203%20q-1%205%20-6%208%27%2F%3E%3Cpath%20d%3D%27M118%20186%20q14%206%2028%200%27%2F%3E%3Ccircle%20cx%3D%27126%27%20cy%3D%27188%27%20r%3D%273.5%27%2F%3E%3Ccircle%20cx%3D%27132%27%20cy%3D%27190%27%20r%3D%274.5%27%2F%3E%3Ccircle%20cx%3D%27139%27%20cy%3D%27188%27%20r%3D%273.5%27%2F%3E%3Cpath%20d%3D%27M62%20202%20h4%20l2%20-3%20h7%20l2%203%20h4%20v11%20h-19%20z%27%2F%3E%3Ccircle%20cx%3D%2771%27%20cy%3D%27208%27%20r%3D%273%27%2F%3E%3Cpath%20d%3D%27M196%20178%20q4%20-2%208%200%20M197%20180%20q-1%206%200%2012%20M203%20180%20q1%206%200%2012%20M195%20194%20h10%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-size:224px 224px;
}
img,svg,video{max-width:100%}
img{height:auto;border-radius:10px}
a{color:var(--teal);text-decoration-thickness:1px;text-underline-offset:.18em;transition:color .15s ease,background-color .15s ease,border-color .15s ease}
a:hover{color:var(--teal-deep);text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:3px}
h1,h2,h3,h4{font-weight:620;line-height:1.15;letter-spacing:-.015em;text-wrap:balance;margin:0}
p{margin:0 0 1.1em}
::selection{background:var(--teal);color:#fff}
.shell{max-width:1200px;margin-inline:auto;padding-inline:var(--gut)}
.btn,summary,.share-btn,.c-row,.reach{touch-action:manipulation}

/* ============ 04 WordPress required ============ */
.screen-reader-text{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}
.screen-reader-text:focus{clip-path:none;display:block;height:auto;left:8px;top:8px;width:auto;z-index:100000;background:var(--card-hi);color:var(--teal);padding:12px 18px;font-family:var(--sans);font-size:14px}
.skip-link{position:absolute}
.alignleft{float:left;margin:6px 28px 14px 0;max-width:46%}
.alignright{float:right;margin:6px 0 14px 28px;max-width:46%}
.aligncenter{display:block;margin-inline:auto}
.wp-caption{max-width:100%}
.sticky,.bypostauthor,.gallery-caption{}

/* ============ 05 header ============ */
.site-header{position:relative;z-index:40;background-color:var(--paper)}
.kilim-rule{height:6px;background:var(--kilim-h) 0 0/24px 6px repeat-x}
.bar{position:relative;display:flex;align-items:center;gap:clamp(10px,2vw,22px);padding-block:14px}
.brand{display:flex;align-items:center;gap:12px;min-width:0;margin-right:auto;text-decoration:none;color:inherit}
.brand-mark{flex:none;line-height:0;color:var(--teal);transition:transform .5s var(--ease)}
.tat-logo{display:block;filter:drop-shadow(0 2px 3px rgba(22,47,104,.28))}
.brand-txt{min-width:0}
.brand .nm{display:block;font-size:1.55rem;font-weight:650;letter-spacing:-.02em;line-height:1.05;color:var(--ink)}
.brand .lic{display:block;margin-top:5px;font:600 .66rem/1.5 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--teal)}
.brand .lic span{display:inline-block}
.brand .lic i{font-style:normal;color:var(--brass)}
.custom-logo-link{margin-right:auto;line-height:0}
.custom-logo{max-height:52px;width:auto;border-radius:0}

.util-nav{display:none;gap:26px;font:600 .94rem/1 var(--sans)}
.util-nav a{color:var(--ink-2);text-decoration:none;white-space:nowrap;padding:14px 2px;border-bottom:2px solid transparent}
.util-nav a:hover{color:var(--teal)}
.util-nav a[aria-current]{color:var(--teal);border-bottom-color:var(--teal)}

.bar-tools{display:flex;align-items:center;gap:6px}
.bar-tools .bar-cta{display:none}
.hdr-dd{position:static}
.hdr-dd > summary{list-style:none;cursor:pointer;user-select:none}
.hdr-dd > summary::-webkit-details-marker{display:none}
.tool-btn,.menu-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;border-radius:var(--r-s);color:var(--ink);font:600 .92rem/1 var(--sans);transition:background-color .15s ease,color .15s ease}
.menu-btn{padding:0 12px 0 10px}
.tool-btn:hover,.menu-btn:hover,.hdr-dd[open] > summary{background-color:var(--wash);color:var(--teal)}
.dd-panel{position:absolute;top:calc(100% - 2px);right:var(--gut);z-index:60;width:min(380px,calc(100vw - 2 * var(--gut)));background:var(--card-hi);border:1px solid var(--hair);border-radius:var(--r);box-shadow:var(--shadow-up);padding:14px 18px 18px}
.site-nav ul{list-style:none;margin:0 0 6px;padding:0;font:500 1.02rem/1.3 var(--sans)}
.site-nav ul ul{display:none}
.site-nav li a{display:block;padding:13px 2px;border-bottom:1px solid var(--hair);color:var(--ink-2);text-decoration:none}
.site-nav li a:hover{color:var(--teal)}
.site-nav .current-menu-item > a,.site-nav .current_page_item > a,.site-nav .current-post-ancestor > a{color:var(--teal);font-weight:700}
.site-nav .btn{display:flex;margin-top:12px}

/* topic strip: always visible; scrolls sideways on phones */
.topics{border-block:1px solid var(--hair);background-color:var(--card-hi)}
.topics-list{display:flex;gap:2px;list-style:none;margin:0 -10px;padding:0;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
.topics-list::-webkit-scrollbar{display:none}
.topics-list a{position:relative;display:block;white-space:nowrap;padding:14px 10px;font:600 .88rem/1.15 var(--sans);letter-spacing:.01em;color:var(--ink-2);text-decoration:none}
.topics-list a::after{content:"";position:absolute;inset:auto 10px 0;height:3px;border-radius:3px 3px 0 0;background:var(--teal);transform:scaleX(0);transform-origin:0 50%;transition:transform .3s var(--ease)}
.topics-list a:hover{color:var(--teal)}
.topics-list a:hover::after,.topics-list .is-current a::after{transform:scaleX(1)}
.topics-list .is-current a{color:var(--teal)}

/* ============ 06 buttons ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:10px 20px;
  font:600 .95rem/1.2 var(--sans);text-decoration:none;white-space:nowrap;cursor:pointer;
  border:1.5px solid transparent;border-radius:var(--r-s);
  transition:background-color .16s ease,border-color .16s ease,color .16s ease,transform .1s ease,box-shadow .16s ease;
}
.btn:active{transform:scale(.97)}
.btn-lg{min-height:52px;padding-inline:26px;font-size:1rem}
.btn-solid{background-color:var(--sienna);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 6px 14px -8px rgba(143,61,20,.7)}
.btn-solid:hover{background-color:var(--sienna-deep);color:#fff}
.btn-line{background-color:var(--card-hi);border-color:var(--line);color:var(--ink)}
.btn-line:hover{border-color:var(--teal);color:var(--teal)}
/* #107567: white text measures 5.6:1. WhatsApp's own green #25D366 fails contrast. */
.btn-wa{background-color:var(--wa);color:#fff}
.btn-wa:hover{background-color:var(--wa-deep);color:#fff}
.wa-ic,.ic{flex:none}
.text-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;font:600 .95rem/1.2 var(--sans);text-decoration:none}
.text-link .ic{transition:transform .25s var(--ease)}
.text-link:hover .ic,.more:hover .ic,.friend-card:hover .ic,.f-greviews:hover .ic{transform:translateX(4px)}

/* ============ 07 layout ============ */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 332px;gap:clamp(40px,5vw,72px);padding-block:clamp(28px,4vw,48px) 84px}
.layout.one-col{grid-template-columns:minmax(0,1fr)}
.layout.one-col .site-main{max-width:46rem;margin-inline:auto;width:100%}
.site-main{min-width:0}

/* ============ 08 masthead (home page and topic hubs) ============ */
.masthead{position:relative;overflow:clip;border-bottom:1px solid var(--hair-2);background:linear-gradient(180deg,var(--paper) 0%,var(--wash) 100%)}
.mast-in{position:relative;z-index:1;padding-block:clamp(26px,4.4vw,54px) calc(max(124px,min(17.5vw,262px)) + 6px)}
.mast-title{font-size:var(--step-5);line-height:1.04;letter-spacing:-.028em;font-weight:640;max-width:20ch;margin:0}
.masthead:not(.masthead-home) .mast-title{font-size:var(--step-4);max-width:24ch}
.kicker{display:flex;align-items:center;gap:8px;margin:0 0 12px;font:600 .74rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
.kicker a{color:inherit;text-decoration:none}
.kicker a:hover{text-decoration:underline}
.kicker .doodle{opacity:.9}
.mast-intro{max-width:68ch;margin-top:16px;font-size:var(--step-0);line-height:1.6;color:var(--ink-2)}
.mast-intro p:last-child{margin-bottom:0}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:26px 0 0;max-width:56rem}
.fact{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;padding:12px 14px;background-color:rgba(255,253,249,.82);border:1px solid var(--hair);border-radius:var(--r)}
.fact .doodle{grid-row:span 2;opacity:1;color:var(--teal)}
.fact dt{font:600 .68rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.fact dd{margin:2px 0 0;font-size:1.02rem;font-weight:600;line-height:1.25;color:var(--ink)}
.mast-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;margin:24px 0 0}

/* ============ 09 article header ============ */
.rank-math-breadcrumb{margin:0 0 18px;font:500 .8rem/1.4 var(--sans);color:var(--muted)}
.rank-math-breadcrumb p{margin:0}
.rank-math-breadcrumb a{color:var(--muted);text-decoration:none}
.rank-math-breadcrumb a:hover{color:var(--teal);text-decoration:underline}
.entry-header{max-inline-size:44rem;margin:0 0 26px}
.entry-title{font-size:var(--step-4);line-height:1.07;letter-spacing:-.024em}
.byline{display:flex;align-items:center;gap:12px;margin-top:18px}
.byline-face{flex:none;width:44px;height:44px;border-radius:50%;box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--brass)}
.byline-txt{margin:0;display:flex;flex-direction:column;gap:3px;min-width:0}
.byline .by{font-size:1rem;line-height:1.3;color:var(--ink)}
.byline .by a{font-weight:600;text-decoration:none}
.byline .by a:hover{text-decoration:underline}
.entry-meta,.card-meta{font:500 .76rem/1.4 var(--sans);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.entry-meta .sep,.card-meta .sep{margin-inline:7px;color:var(--brass)}
.featured-img{max-inline-size:44rem;margin:0 0 30px}
.featured-img img{display:block;width:100%;border-radius:14px;box-shadow:var(--shadow)}
.featured-img.is-small img{width:auto;max-height:min(70vh,520px)}

/* ============ 10 article text ============
   Text keeps a comfortable measure (about 70 characters); photos, tables and
   boxes may run to the full 44rem so 700px photos show at their real size. */
.entry-content{max-inline-size:44rem;overflow-wrap:break-word}
.entry-content > *{margin-top:0;margin-bottom:1.25em}
.entry-content > :is(p,ul,ol,dl,h2,h3,h4,h5,blockquote){max-inline-size:66ch}
.entry-content h2{font-size:var(--step-2);line-height:1.18;margin:1.9em 0 .6em;scroll-margin-top:24px}
.entry-content h2::before{content:"";display:block;width:34px;height:3px;margin-bottom:.6em;border-radius:2px;background:var(--brass)}
.entry-content h3{font-size:var(--step-1);line-height:1.25;margin:1.6em 0 .5em;color:var(--teal-deep)}
.entry-content h4{font-size:1.15rem;margin:1.5em 0 .4em}
.entry-content li{margin:.45em 0}
.entry-content ul,.entry-content ol{padding-left:1.35em}
.entry-content ul > li::marker{color:var(--brass-ink)}
.entry-content ol > li::marker{color:var(--brass-ink);font-weight:600;font-variant-numeric:tabular-nums}
.entry-content strong{font-weight:650}
/* the opening paragraph answers the question: set it apart, with a drop cap
   (only when the article opens with text, not with a picture beside it) */
.single-post .entry-content > p:first-child{font-size:1.12em;line-height:1.55}
.single-post .entry-content > p:first-child::first-letter{float:left;margin:.06em .09em 0 0;font-size:3.5em;line-height:.8;font-weight:600;color:var(--teal)}
/* pull quote */
.entry-content blockquote{position:relative;margin-block:1.8em;padding:.2em 0 .2em 1.5em;border-left:3px solid var(--brass);font-style:italic;font-size:var(--step-1);line-height:1.4;color:var(--ink-2)}
.entry-content blockquote p:last-child{margin-bottom:0}
.entry-content blockquote cite{display:block;margin-top:.6em;font:500 .8rem/1.4 var(--sans);font-style:normal;letter-spacing:.04em;color:var(--muted)}
/* separator: a small kilim knot instead of a gray line */
.entry-content hr,.wp-block-separator{height:16px;border:0;margin-block:2.2em;opacity:1;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='16' fill='none'%3E%3Cpath d='M0 8h56M94 8h56' stroke='%239A7B4F' stroke-width='1.2' stroke-linecap='round'/%3E%3Cpath d='M75 1.5 81.5 8 75 14.5 68.5 8z' stroke='%2312525C' stroke-width='1.4'/%3E%3Ccircle cx='75' cy='8' r='1.6' fill='%2312525C'/%3E%3C/svg%3E") center/150px 16px no-repeat}

/* photos */
.entry-content figure{margin-inline:0}
.entry-content img[style*="height"]{height:auto!important}
.entry-content figure img{display:block}
.entry-content .aligncenter img,.entry-content img.aligncenter{margin-inline:auto}
.wp-caption-text,figcaption,.wp-element-caption{margin-top:9px;padding-left:14px;border-left:2px solid var(--brass);font:italic 400 .9rem/1.45 var(--serif);color:var(--muted);text-align:left}
.entry-content .wp-block-media-text{margin-block:1.8em;padding:18px;background-color:var(--card);border:1px solid var(--hair);border-radius:var(--r);gap:6px 18px}
.entry-content .wp-block-media-text .wp-block-media-text__content{padding:0}
.entry-content .wp-block-media-text__content > :first-child{margin-top:0}
.entry-content .wp-block-media-text__content > :last-child{margin-bottom:0}
.entry-content iframe,.entry-content video{max-width:100%}
.entry-content .wp-block-embed iframe{border-radius:var(--r)}
/* classic and block galleries */
.entry-content .gallery{display:grid;gap:12px}
.entry-content .gallery-columns-2{grid-template-columns:repeat(2,1fr)}
.entry-content .gallery-columns-3{grid-template-columns:repeat(3,1fr)}
.entry-content .gallery-columns-4{grid-template-columns:repeat(4,1fr)}
.entry-content .gallery-columns-5{grid-template-columns:repeat(5,1fr)}
.entry-content .gallery-item{margin:0}
.entry-content .gallery-item img{width:100%;aspect-ratio:1/1;object-fit:cover}

/* tables: facts as facts */
.entry-content .wp-block-table{overflow-x:auto;border:1px solid var(--hair);border-radius:var(--r);background-color:var(--card-hi)}
.entry-content table{width:100%;border-collapse:collapse;font-size:.98rem;line-height:1.4;font-variant-numeric:tabular-nums}
.entry-content .table-wrap{overflow-x:auto;border:1px solid var(--hair);border-radius:var(--r);background-color:var(--card-hi)}
.entry-content th,.entry-content td{padding:11px 14px;text-align:left;vertical-align:top;border:0;border-bottom:1px solid var(--hair)}
.entry-content tr:last-child > td{border-bottom:0}
.entry-content th,.entry-content thead td{font:600 .74rem/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--teal-deep);background-color:var(--teal-soft)}
.entry-content tbody tr:nth-child(even) > td{background-color:rgba(243,237,226,.5)}
.entry-content pre{padding:16px;overflow-x:auto;font-size:.88rem;background-color:var(--card);border-radius:var(--r-s)}

/* core block color classes still used by old posts (the global-styles block is not loaded) */
.has-black-color{color:#000}.has-cyan-bluish-gray-color{color:#abb8c3}.has-white-color{color:#fff}.has-pale-pink-color{color:#f78da7}.has-vivid-red-color{color:#cf2e2e}.has-luminous-vivid-orange-color{color:#ff6900}.has-luminous-vivid-amber-color{color:#fcb900}.has-light-green-cyan-color{color:#7bdcb5}.has-vivid-green-cyan-color{color:#00d084}.has-pale-cyan-blue-color{color:#8ed1fc}.has-vivid-cyan-blue-color{color:#0693e3}.has-vivid-purple-color{color:#9b51e0}
.has-black-background-color{background-color:#000}.has-cyan-bluish-gray-background-color{background-color:#abb8c3}.has-white-background-color{background-color:#fff}.has-pale-pink-background-color{background-color:#f78da7}.has-vivid-red-background-color{background-color:#cf2e2e}.has-luminous-vivid-orange-background-color{background-color:#ff6900}.has-luminous-vivid-amber-background-color{background-color:#fcb900}.has-light-green-cyan-background-color{background-color:#7bdcb5}.has-vivid-green-cyan-background-color{background-color:#00d084}.has-pale-cyan-blue-background-color{background-color:#8ed1fc}.has-vivid-cyan-blue-background-color{background-color:#0693e3}.has-vivid-purple-background-color{background-color:#9b51e0}
.has-text-align-center{text-align:center}.has-text-align-right{text-align:right}

/* ============ 11 article furniture ============ */
/* table of contents */
.tat-toc details{background-color:var(--card);border:1px solid var(--hair);border-radius:var(--r)}
.tat-toc summary{display:flex;align-items:center;gap:9px;min-height:50px;padding:13px 18px;list-style:none;cursor:pointer;font:600 .76rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.tat-toc summary::-webkit-details-marker{display:none}
.tat-toc summary::after{content:"";flex:none;width:8px;height:8px;margin-left:auto;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .2s var(--ease)}
.tat-toc details[open] summary::after{transform:rotate(-135deg)}
.tat-toc .toc-n{padding:2px 8px;font-size:.68rem;letter-spacing:0;color:var(--muted);background-color:var(--paper);border:1px solid var(--hair);border-radius:99px}
.tat-toc ol{list-style:none;margin:0;padding:0 18px 12px;counter-reset:t}
.tat-toc li{counter-increment:t;display:grid;grid-template-columns:28px 1fr;gap:8px;margin:0;border-top:1px solid var(--hair)}
.tat-toc li::before{content:counter(t,decimal-leading-zero);padding-top:13px;font:600 .72rem/1.3 var(--sans);color:var(--brass-ink)}
.tat-toc a{display:block;padding:11px 0;font:500 .95rem/1.4 var(--sans);color:var(--ink-2);text-decoration:none}
.tat-toc a:hover{color:var(--teal);text-decoration:underline}

/* invitation box: the kilim border runs down its side */
.tat-cta{position:relative;overflow:hidden;clear:both;margin-block:2.2em;padding:24px 26px 24px 34px;background-color:var(--wash);border:1px solid var(--hair-2);border-radius:var(--r)}
.tat-cta::before{content:"";position:absolute;inset:0 auto 0 0;width:6px;background:var(--kilim-v) 0 0/6px 24px repeat-y}
.tat-cta .cta-kicker{margin:0 0 8px;font-size:var(--step-1);font-weight:650;line-height:1.2;letter-spacing:-.01em;color:var(--teal-deep)}
.tat-cta .cta-text{max-inline-size:60ch;margin:0 0 18px;font-size:1.02rem;line-height:1.6;color:var(--ink)}
.tat-cta .cta-links{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.tat-cta .card-mark{right:-14px;bottom:-22px;opacity:.14}

/* FAQ cards. The question is followed at once by its answer on purpose:
   the theme reads exactly that shape to build the FAQ schema. */
.tat-faq{margin-block:2.4em 1em}
.tat-faq > h2{margin-top:0}
.faq-q{position:relative;margin:0 0 12px;padding:18px 20px 16px 58px;background-color:var(--card-hi);border:1px solid var(--hair);border-radius:var(--r);transition:border-color .2s ease,box-shadow .2s ease}
.faq-q::before{content:"?";position:absolute;left:16px;top:17px;width:28px;height:28px;border-radius:50%;background-color:var(--teal);color:#fff;font:700 .95rem/28px var(--sans);text-align:center}
.faq-q h3{margin:0 0 6px;font-size:1.14rem;line-height:1.32;color:var(--teal-deep)}
.faq-q p{margin:0;line-height:1.6}
/* Rank Math's own FAQ block gets the same clothes */
.rank-math-list-item{margin:0 0 12px;padding:18px 20px 16px;background-color:var(--card-hi);border:1px solid var(--hair);border-radius:var(--r)}
.rank-math-list-item .rank-math-question{margin:0 0 6px;font-size:1.14rem;line-height:1.32;color:var(--teal-deep)}
.rank-math-list-item .rank-math-answer p:last-child{margin-bottom:0}

/* "preferred source on Google" */
.pref-src{margin-block:1.4em}
.pref-src a{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:8px 16px 8px 12px;font:600 .88rem/1.3 var(--sans);color:var(--ink);text-decoration:none;background-color:var(--card-hi);border:1px solid var(--line);border-radius:999px}
.pref-src a:hover{border-color:var(--teal);color:var(--teal)}
.pref-src .ic{color:var(--brass-ink)}
.pref-src b{font-weight:700}
.pref-src small{display:block;margin-top:8px;font:400 .84rem/1.45 var(--sans);color:var(--muted)}
.pref-src-end{max-inline-size:44rem;margin-top:26px;text-align:center}

/* end of article */
.article-end{display:flex;align-items:center;justify-content:center;gap:18px;max-inline-size:44rem;margin:44px 0 4px;color:var(--brass)}
.article-end .doodle{opacity:1;color:var(--brass)}
.article-end .doodle-amphora{color:var(--teal);opacity:.75}
.share-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px;max-inline-size:44rem;margin-top:26px}
.share-lbl{margin-right:4px;font:600 .74rem/1.3 var(--sans);letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.share-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:9px 16px;font:600 .88rem/1 var(--sans);color:var(--ink-2);text-decoration:none;background-color:var(--card-hi);border:1px solid var(--hair);border-radius:99px}
.share-btn:hover{border-color:var(--teal);color:var(--teal)}
.share-btn .wa-ic{width:17px;height:17px}
.tag-links{display:flex;flex-wrap:wrap;gap:8px;max-inline-size:44rem;margin-top:26px}
.tag-links a{padding:9px 14px;font:500 .84rem/1.2 var(--sans);color:var(--teal);text-decoration:none;background-color:var(--wash);border:1px solid var(--hair-2);border-radius:99px}
.tag-links a:hover{border-color:var(--teal)}

/* author box */
.author-box{position:relative;overflow:hidden;display:grid;grid-template-columns:72px 1fr;gap:20px;align-items:start;max-inline-size:44rem;margin-top:40px;padding:24px;background-color:var(--card);border:1px solid var(--hair);border-radius:var(--r)}
.author-box > img{border-radius:50%;box-shadow:0 0 0 3px var(--card),0 0 0 4px var(--brass)}
.author-box .who{margin:0 0 4px;font:600 .7rem/1.3 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--teal)}
.author-box .name{margin:0 0 6px;font-size:1.35rem;font-weight:650;line-height:1.2}
.author-box .name a{color:var(--ink);text-decoration:none}
.author-box .name a:hover{color:var(--teal)}
.author-box p{margin:0 0 14px;font-size:1rem;line-height:1.55;color:var(--ink-2)}
.author-links{display:flex;flex-wrap:wrap;gap:10px;margin:0!important}

/* shared section heading */
.band-title,.page-title{display:flex;align-items:center;gap:9px;margin:0 0 18px;padding-bottom:12px;border-bottom:1px solid var(--hair);font:600 .8rem/1.3 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--teal)}
.band-title .doodle,.page-title .doodle{opacity:.9}

/* planning kit and topic hubs */
.plan-kit,.hubs{max-inline-size:44rem;margin-top:48px}
.layout.one-col .hubs{max-inline-size:none}
.plan-grid,.hub-grid{display:grid;gap:12px;list-style:none;margin:0;padding:0}
.plan-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,15.5rem),1fr))}
.hub-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
.plan-card,.hub-card{display:flex;align-items:center;gap:14px;height:100%;padding:14px 16px;color:var(--ink);text-decoration:none;background-color:var(--card-hi);border:1px solid var(--hair);border-radius:var(--r);transition:border-color .2s ease,box-shadow .25s ease,transform .25s var(--ease)}
.plan-card span{font-size:1.02rem;font-weight:600;line-height:1.3}
.plan-card .doodle,.hub-card .doodle{flex:none;opacity:1;color:var(--teal)}
.hub-card{flex-direction:column;align-items:flex-start;gap:6px;padding:18px}
.hub-name{font-size:1.14rem;font-weight:650;line-height:1.2}
.hub-count{font:500 .76rem/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* previous / next */
.post-navigation{max-inline-size:44rem;margin-top:40px;padding-top:22px;border-top:1px solid var(--hair)}
.post-navigation .nav-links{display:grid;grid-template-columns:1fr 1fr;gap:24px;font-size:1.02rem;line-height:1.35}
.post-navigation a{color:var(--ink);text-decoration:none;font-weight:600}
.post-navigation a:hover{color:var(--teal)}
.post-navigation .nav-next{text-align:right}
.post-navigation .nav-subtitle{display:block;margin-bottom:5px;font:600 .7rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* related */
.related-posts{max-inline-size:44rem;margin-top:52px}
.related-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px 28px}
.rel-card .thumb{display:block;overflow:hidden;border-radius:var(--r)}
.rel-card .thumb img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:0;transition:transform .6s var(--ease)}
.rel-card h3{margin:12px 0 5px;font-size:1.14rem;line-height:1.28}
.rel-card h3 a{color:var(--ink);text-decoration:none}
.rel-card h3 a:hover{color:var(--teal)}
.rel-card .card-meta{margin:0}

/* comments */
.comments-area{max-inline-size:44rem;margin-top:52px;padding-top:32px;border-top:1px solid var(--hair)}
.comments-title,.comment-reply-title{display:flex;align-items:center;gap:8px;margin:0 0 20px;font-size:var(--step-1)}
.comments-title .doodle{color:var(--brass);opacity:1}
.comment-list{list-style:none;margin:0;padding:0}
.comment-list .comment{padding:20px 0;border-bottom:1px solid var(--hair)}
.comment-list .children{list-style:none;padding-left:clamp(16px,4vw,34px)}
.comment-author{font:600 .95rem/1.3 var(--sans)}
.comment-author .avatar{margin-right:10px;vertical-align:middle;border-radius:50%}
.comment-metadata{margin:4px 0 10px;font:400 .78rem/1.3 var(--sans);color:var(--muted)}
.comment-metadata a{color:var(--muted);text-decoration:none}
.comment-content{font-size:1rem}
.comment-content p{margin:0 0 12px}
.reply a{display:inline-flex;align-items:center;min-height:44px;font:600 .82rem/1 var(--sans);text-decoration:none}

/* ============ 12 lists of articles ============ */
.hub-more{max-inline-size:44rem;margin-top:48px;color:var(--ink-2)}
.hub-more p{max-inline-size:66ch}
.post-card{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;align-items:start;padding:24px 0;border-bottom:1px solid var(--hair)}
.post-card.no-thumb{grid-template-columns:minmax(0,1fr)}
.post-card .thumb{display:block;overflow:hidden;border-radius:var(--r)}
.post-card .thumb img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:0;transition:transform .6s var(--ease)}
.card-topic{margin:0 0 6px;font:600 .7rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.card-topic a{color:var(--accent-ink);text-decoration:none}
.card-topic a:hover{text-decoration:underline}
.post-card h2{margin:0 0 8px;font-size:var(--step-1);line-height:1.2}
.post-card h2 a{color:var(--ink);text-decoration:none;background:linear-gradient(var(--teal),var(--teal)) 0 100%/0 2px no-repeat;transition:background-size .4s var(--ease),color .15s ease}
.post-card h2 a:hover{color:var(--teal);background-size:100% 2px}
.post-card .excerpt{margin:0 0 10px;font-size:1rem;line-height:1.55;color:var(--ink-2)}
.post-card .card-meta{margin:0}
.post-card.is-feature{grid-template-columns:minmax(0,1fr);gap:16px;padding-top:0}
.post-card.is-feature .thumb img{aspect-ratio:16/9}
.post-card.is-feature h2{font-size:var(--step-2)}
.pagination{margin-top:34px}
.pagination .nav-links{display:flex;flex-wrap:wrap;gap:8px;font:600 .92rem/1 var(--sans)}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:46px;min-height:46px;padding:9px 15px;color:var(--ink-2);text-decoration:none;background-color:var(--card-hi);border:1px solid var(--hair);border-radius:var(--r-s)}
.pagination .page-numbers.current{background-color:var(--teal);border-color:var(--teal);color:#fff}
.pagination a.page-numbers:hover{border-color:var(--teal);color:var(--teal)}
.search-hint{color:var(--ink-2)}
.big-oops{margin:0 0 14px;font-size:var(--step-5);letter-spacing:-.025em}
.oops-doodles{display:flex;align-items:flex-end;gap:20px;margin:0 0 12px;color:var(--teal)}
.oops-doodles .doodle{opacity:.85}
.oops-text{max-width:60ch;color:var(--ink-2)}
.oops-actions{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0}

/* ============ 13 sidebar ============ */
.site-sidebar{display:flex;flex-direction:column;gap:24px;min-width:0}
.side-card{position:relative;overflow:hidden;background-color:var(--card-hi);border:1px solid var(--hair);border-radius:var(--r);box-shadow:var(--shadow);transition:border-color .2s ease,box-shadow .25s ease,transform .25s var(--ease)}
.side-card .hd{display:flex;align-items:center;gap:8px;padding:13px 18px;border-bottom:1px solid var(--hair);font:600 .72rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.side-card .hd .doodle{opacity:.9}
.side-card .bd{position:relative;padding:16px 18px}
.card-mark{position:absolute;right:-16px;bottom:-16px;line-height:0;color:var(--teal);opacity:.08;pointer-events:none;transition:transform .7s var(--ease),opacity .4s ease}
.hire-card{border-color:var(--teal);background-color:var(--wash)}
.hire-card::before{content:"";display:block;height:6px;background:var(--kilim-h) 0 0/24px 6px repeat-x}
.hire-card .hd{border-bottom-color:var(--hair-2);color:var(--teal-deep)}
.hire-card .rate{margin:0;font-size:2.5rem;font-weight:650;line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--teal-deep)}
.hire-card .rate-note{margin:2px 0 16px;font:400 .84rem/1.4 var(--sans);color:var(--muted)}
.hire-card .btn{display:flex;margin-bottom:9px}
.hire-card .mail{display:block;margin-top:12px;text-align:center;font:500 .84rem/1.4 var(--sans);word-break:break-all}
.site-sidebar > .btn-wa{margin-top:-12px;min-height:50px}
.about-card p{margin:0 0 12px;font-size:.98rem;line-height:1.6;color:var(--ink-2)}
.about-card strong{color:var(--ink)}
.more{display:inline-flex;align-items:center;gap:6px;min-height:44px;font:600 .88rem/1 var(--sans);text-decoration:none}
.more .ic,.friend-visit .ic,.f-greviews .ic{width:15px;height:15px;transition:transform .25s var(--ease)}
.contact-card .c-note{margin:0 0 6px;font:400 .86rem/1.5 var(--sans);color:var(--muted)}
.c-row{display:flex;align-items:center;gap:11px;min-height:46px;padding:10px 0;border-bottom:1px solid var(--hair);font:500 .94rem/1.3 var(--sans);font-variant-numeric:tabular-nums;color:var(--ink);text-decoration:none}
.c-row:last-child{border-bottom:0}
.c-row .ic,.c-row .wa-ic{color:var(--teal)}
.c-row.c-wa .wa-ic{color:var(--wa)}
.c-row:hover{color:var(--teal)}
.friend-card{display:block;color:inherit;text-decoration:none}
.friend-card .friend-desc{margin:0 0 10px;font-size:.96rem;line-height:1.55;color:var(--ink-2)}
.friend-card .friend-visit{display:inline-flex;align-items:center;gap:6px;font:600 .84rem/1 var(--sans);color:var(--accent-ink)}
.side-list{list-style:none;margin:0;padding:0;counter-reset:s}
.side-list li{counter-increment:s;display:grid;grid-template-columns:26px 1fr;gap:10px;padding:10px 0;border-bottom:1px solid var(--hair)}
.side-list li:last-child{border-bottom:0;padding-bottom:2px}
.side-list li::before{content:counter(s,decimal-leading-zero);padding-top:3px;font:600 .72rem/1.4 var(--sans);color:var(--brass-ink)}
.side-list a{font-size:1rem;line-height:1.35;color:var(--ink);text-decoration:none}
.side-list a:hover{color:var(--teal);text-decoration:underline}
.site-sidebar .widget{padding:16px 18px;background-color:var(--card-hi);border:1px solid var(--hair);border-radius:var(--r)}
/* block widgets print their titles as plain h2/h3: dress them like the card headers */
.site-sidebar .widget :is(h2,h3),.site-sidebar .widget-title{margin:0 0 12px;font:600 .72rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.site-sidebar .widget ul{list-style:none;margin:0;padding:0}
.site-sidebar .widget li{padding:9px 0;border-bottom:1px solid var(--hair);font-size:1rem}
.site-sidebar .widget li:last-child{border-bottom:0}
.site-sidebar .widget a{color:var(--ink);text-decoration:none}
.site-sidebar .widget a:hover{color:var(--teal)}
/* the follower: stays in view for the rest of a long article (wide screens only) */
.side-follow{display:none}
.side-toc ol{list-style:none;margin:0;max-height:calc(100vh - 250px);overflow-y:auto;overscroll-behavior:contain;padding:8px 10px 10px}
.side-toc li{margin:0}
.side-toc a{display:block;padding:7px 10px;border-left:2px solid var(--hair);font:500 .86rem/1.35 var(--sans);color:var(--ink-2);text-decoration:none;transition:color .15s ease,border-color .15s ease,background-color .15s ease}
.side-toc a:hover{color:var(--teal);border-left-color:var(--hair-2)}
.side-toc a.is-current{color:var(--teal-deep);font-weight:700;border-left-color:var(--teal);background-color:var(--wash)}
.mini-hire{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;background-color:var(--wash);border-color:var(--teal)}
.mini-hire p{margin:0;font:400 .8rem/1.3 var(--sans);color:var(--muted)}
.mini-hire strong{display:block;font:650 1.5rem/1 var(--serif);color:var(--teal-deep)}
.mini-hire .btn{min-height:44px;padding-inline:14px;font-size:.86rem}

/* ============ 14 footer ============ */
.site-footer{position:relative;overflow:hidden;background-color:var(--foot);color:var(--foot-text)}
.foot-horizon{position:relative;height:calc(clamp(88px,11vw,150px) + 14px);border-bottom:1px solid rgba(250,247,242,.14);background:linear-gradient(180deg,#0E444D 0%,var(--foot) 100%)}
.scene.scene-foot{--scene-h:clamp(88px,11vw,150px);color:#CFE5E8}
.scene-foot .sc-sky{color:#E0B77A}
.site-footer a{color:#EAF3F4;text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.foot-reviews{padding-block:42px 36px;border-bottom:1px solid rgba(250,247,242,.14)}
.site-footer .band-title{border-bottom:0;padding-bottom:0;color:var(--foot-muted)}
.stars{color:#E0B77A;letter-spacing:.12em}
.reviews-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:20px}
.review-card{margin:0;padding:22px 24px;font-size:1.02rem;font-style:italic;line-height:1.6;color:var(--foot-text);background-color:rgba(250,247,242,.06);border:1px solid rgba(250,247,242,.16);border-radius:var(--r)}
.review-card p{margin:0 0 12px}
.review-card cite{font:600 .8rem/1.4 var(--sans);font-style:normal;letter-spacing:.04em;color:var(--foot-muted)}
/* The same card in the sidebar: the page's light colors, and a "verified" line on top. */
.side-review{padding:18px 20px;font-size:.98rem;color:var(--ink-2);background-color:var(--card-hi);border-color:var(--hair);border-left:3px solid var(--brass);box-shadow:var(--shadow)}
.side-review cite{color:var(--muted)}
.side-review cite a{color:var(--teal)}
.side-review .stars{color:var(--brass)}
.rv-badge{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 10px;margin-bottom:10px;font:600 .72rem/1.3 var(--sans);letter-spacing:.05em;color:var(--wa)}
.rv-ok::before{content:"\2713\00a0"}
.band-more{margin:22px 0 0}
.f-greviews{display:inline-flex;align-items:center;gap:7px;min-height:44px;font:600 .9rem/1 var(--sans)}
.site-footer .inner{padding-block:44px 30px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:44px}
.foot-grid h2{margin:0 0 14px;font:600 .72rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--foot-muted)}
.foot-grid p{max-width:36ch;margin:0 0 12px;font-size:1rem;line-height:1.6}
.foot-grid ul{list-style:none;margin:0;padding:0;font-size:1rem}
.foot-grid li a{display:inline-flex;align-items:center;gap:11px;min-height:40px;font-variant-numeric:tabular-nums}
.f-contact .ic,.f-contact .wa-ic{opacity:.85}
.colophon{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px 18px;margin-top:34px;padding-top:20px;border-top:1px solid rgba(250,247,242,.18);font:400 .8rem/1.5 var(--sans);color:var(--foot-muted)}
.colophon .doodle{color:var(--foot-muted);opacity:.9;vertical-align:-4px}
.colophon-cat{line-height:0}

/* ============ 15 phone bar ============
   A slim fixed bar, not an interstitial: it covers no content (the body gets
   matching padding), hides while a form field has focus so the keyboard is
   not crowded, and does not exist on wide screens. */
.mobile-cta{display:none}
.btn-wa-round{display:inline-flex;align-items:center;justify-content:center;flex:none;width:50px;height:50px;border-radius:50%;background-color:var(--wa);color:#fff;text-decoration:none}
.btn-wa-round:hover{background-color:var(--wa-deep);color:#fff}

/* ============ 16 forms ============ */
.search-form{display:flex;gap:8px}
.search-form input[type=search],.comment-form input[type=text],.comment-form input[type=email],.comment-form input[type=url],.comment-form textarea,
.entry-content .grunion-field,.entry-content .wp-block-jetpack-contact-form input:not([type=submit],[type=checkbox],[type=radio]),.entry-content .wp-block-jetpack-contact-form textarea,.entry-content .wp-block-jetpack-contact-form select{
  width:100%;min-height:48px;padding:11px 14px;font:400 1rem/1.4 var(--sans);color:var(--ink);
  background-color:#fff;border:1.5px solid var(--line);border-radius:var(--r-s);box-shadow:none;
}
.search-form input[type=search]{flex:1;min-width:0}
.wp-block-search__inside-wrapper{display:flex;gap:8px}
.wp-block-search__input{flex:1;min-width:0;min-height:48px;padding:11px 14px;font:400 1rem/1.4 var(--sans);color:var(--ink);background-color:#fff;border:1.5px solid var(--line);border-radius:var(--r-s)}
.wp-block-search__button{min-height:48px;margin:0;padding:11px 18px;font:600 .95rem/1 var(--sans);color:#fff;background-color:var(--teal);border:0;border-radius:var(--r-s);cursor:pointer}
.wp-block-search__label{display:block;margin:0 0 8px;font:600 .72rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.search-form input[type=search]:focus-visible,.comment-form :is(input,textarea):focus-visible,.entry-content .wp-block-jetpack-contact-form :is(input,textarea,select):focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-color:var(--teal-deep)}
.search-form button,.comment-form .submit{min-height:48px;padding:11px 18px;font:600 .95rem/1 var(--sans);color:#fff;background-color:var(--teal);border:0;border-radius:var(--r-s);cursor:pointer;transition:background-color .15s ease}
.search-form button:hover,.comment-form .submit:hover{background-color:var(--teal-deep)}
.comment-form label{display:block;margin:0 0 6px;font:500 .9rem/1.3 var(--sans)}
.comment-form p{margin:0 0 16px}

/* the contact form (Jetpack): one card, big fields, one big button */
.entry-content form.contact-form{position:relative;overflow:hidden;margin-block:1.6em .6em;padding:26px clamp(18px,4vw,30px) 28px;background-color:var(--card-hi);border:1px solid var(--hair);border-top:0;border-radius:var(--r);box-shadow:var(--shadow-up)}
.entry-content form.contact-form::before{content:"";display:block;height:6px;margin:-26px calc(-1 * clamp(18px,4vw,30px)) 22px;background:var(--kilim-h) 0 0/24px 6px repeat-x}
.entry-content .wp-block-jetpack-contact-form{gap:18px!important}
.entry-content .grunion-field-label{display:block;margin:0 0 6px;font:500 1rem/1.3 var(--sans)!important;color:var(--ink)}
.entry-content .grunion-label-required{margin-left:6px;font-weight:400;color:var(--muted)}
.entry-content .wp-block-jetpack-contact-form textarea{min-height:9.5rem;height:auto;resize:vertical;field-sizing:content;max-height:60vh}
.entry-content .wp-block-jetpack-contact-form .wp-block-button{width:100%;margin:4px 0 0}
.entry-content .wp-block-jetpack-contact-form .wp-block-button__link{display:flex;align-items:center;justify-content:center;width:100%;min-height:54px;padding:12px 24px;font:600 1.06rem/1.2 var(--sans);color:#fff;background-color:var(--sienna);border:0;border-radius:var(--r-s);cursor:pointer;transition:background-color .16s ease,transform .1s ease}
.entry-content .wp-block-jetpack-contact-form .wp-block-button__link:hover{background-color:var(--sienna-deep)}
.entry-content .wp-block-jetpack-contact-form .wp-block-button__link:active{transform:scale(.98)}
.form-promise{max-inline-size:none!important;margin:10px 0 0;text-align:center;font:500 .92rem/1.5 var(--sans);color:var(--ink-2)}
/* three direct lines at the top of the contact page */
.reach-row{max-inline-size:44rem;margin:0 0 26px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13.5rem),1fr));gap:12px}
.reach{display:flex;align-items:center;gap:13px;min-height:64px;padding:12px 16px;color:var(--ink);text-decoration:none;background-color:var(--card-hi);border:1px solid var(--line);border-radius:var(--r);transition:border-color .2s ease,box-shadow .25s ease,transform .25s var(--ease)}
.reach .ic,.reach .wa-ic{width:24px;height:24px;color:var(--teal)}
.reach span{min-width:0}
.reach b{display:block;font:600 1rem/1.25 var(--sans);overflow-wrap:anywhere}
.reach small{display:block;font:400 .8rem/1.35 var(--sans);color:var(--muted)}
.reach-wa{background-color:var(--wa);border-color:var(--wa);color:#fff}
.reach-wa .wa-ic,.reach-wa small{color:#fff}
.reach-wa:hover{background-color:var(--wa-deep);color:#fff}

/* ============ 17 doodles and the horizon scene ============ */
.doodle{color:var(--teal);opacity:.8;vertical-align:-4px}
/* The canvas is 1200 x 210. The box is never wider than its height allows
   (height x 5.714), so a narrow screen crops the sides and never the tops of
   the buildings; on a wide screen the drawing keeps its size and fades out. */
.scene{
  --scene-h:max(124px,min(17.5vw,262px));
  position:absolute;bottom:0;left:50%;translate:-50% 0;display:block;
  height:var(--scene-h);width:min(100%,calc(var(--scene-h) * 5.7143));
  color:var(--teal);pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
/* topic hubs: a smaller drawing tucked into the right corner */
.masthead:not(.masthead-home) .scene{--scene-h:clamp(96px,12vw,168px);left:auto;right:0;translate:none}
.masthead:not(.masthead-home) .mast-in{padding-bottom:calc(clamp(96px,12vw,168px) + 6px)}
.sc-far{opacity:.3}
.sc-mid{opacity:.55}
.sc-near{opacity:.85}
.sc-sky{opacity:.75;color:var(--brass)}
.sc-ground{opacity:.6}

/* ============ 18 motion ============
   Rules: nothing here hides content. Every start state is still readable or
   is pure decoration, every animation ends at rest, nothing loops, and all
   of it is skipped when the visitor asks for reduced motion. Scroll-linked
   effects are CSS-only, so they cost no JavaScript and cannot get stuck. */
@keyframes tat-drop{from{opacity:0;transform:translateY(-8px)}}
@keyframes tat-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes tat-rise{from{opacity:.4;translate:0 22px}to{opacity:1;translate:0 0}}
@keyframes tat-progress{to{transform:scaleX(1)}}
@keyframes tat-sky{from{transform:translateY(16px)}to{transform:translateY(-26px)}}
@keyframes tat-far{from{transform:translate(-14px,0)}to{transform:translate(14px,8px)}}
@keyframes tat-mid{from{transform:translate(8px,0)}to{transform:translate(-8px,4px)}}

.read-progress{position:fixed;inset:0 0 auto;z-index:70;height:3px;pointer-events:none}
.read-progress span{display:block;height:100%;background-color:var(--teal);transform:scaleX(0);transform-origin:0 50%}
@supports (animation-timeline:scroll()){
  .read-progress span{animation:tat-progress linear both;animation-timeline:scroll(root block)}
}

@media (prefers-reduced-motion:no-preference){
  /* a soft cross-fade between pages (browsers that know it; others ignore it) */
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.2s}

  .hdr-dd[open] > .dd-panel{animation:tat-drop .24s var(--ease)}

  /* the horizon draws itself once when a page opens */
  .masthead .scene path{stroke-dasharray:1;animation:tat-draw 1.5s var(--ease) backwards}
  .masthead .sc-mid path{animation-delay:.12s}
  .masthead .sc-far path{animation-delay:.28s}
  .masthead .sc-sky path{animation-delay:.5s}

  @supports (animation-timeline:view()){
    /* the horizon's layers drift apart as it scrolls past: balloons rise, the far skyline slides */
    .masthead,.foot-horizon{view-timeline:--tat-scene block}
    .scene .sc-sky,.scene .sc-far,.scene .sc-mid{animation:linear both;animation-timeline:--tat-scene;animation-range:cover 0% cover 100%}
    .scene .sc-sky{animation-name:tat-sky}
    .scene .sc-far{animation-name:tat-far}
    .scene .sc-mid{animation-name:tat-mid}

    /* doodles sketch themselves as they come into view */
    .draw-in .doodle path,.scene-foot path{stroke-dasharray:1;animation:tat-draw linear both;animation-timeline:view();animation-range:entry 0% cover 34%}

    /* cards and photos settle into place (never from invisible) */
    .post-card,.rel-card,.review-card,.hub-card,.plan-card,.faq-q,.reach,.entry-content > figure,.site-sidebar > .side-card{animation:tat-rise linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
  }
}

/* hover effects only where there is a real pointer */
@media (hover:hover) and (pointer:fine){
  .brand:hover .brand-mark{transform:rotate(-10deg) scale(1.08)}
  .side-card:hover,.plan-card:hover,.hub-card:hover,.reach:hover,.faq-q:hover{border-color:var(--hair-2);box-shadow:var(--shadow-up)}
  .plan-card:hover,.hub-card:hover,.reach:hover,a.side-card:hover{transform:translateY(-3px);border-color:var(--teal)}
  .side-card:hover .card-mark{transform:rotate(-6deg) scale(1.08);opacity:.14}
  .post-card:hover .thumb img,.rel-card:hover .thumb img{transform:scale(1.045)}
  .friend-card:hover .hd{color:var(--teal)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
@media (forced-colors:active){
  .btn,.side-card,.faq-q,.tat-cta,.plan-card,.hub-card,.reach{border:1px solid}
}
/* long pages: let the browser skip painting what is far below */
.site-footer,.comments-area,.related-posts{content-visibility:auto;contain-intrinsic-size:auto 640px}

/* ============ 19 screen sizes ============ */
@media (min-width:768px){
  .bar-tools .bar-cta{display:inline-flex}
}
@media (min-width:1024px){
  .util-nav{display:flex}
  .site-sidebar .side-follow{display:flex;flex-direction:column;gap:14px;position:sticky;top:18px}
}
@media (max-width:1199px){
  /* the third part of the tagline ("since 2008") needs a wide header */
  .brand .lic span:nth-child(n+3){display:none}
}
@media (max-width:1023px){
  .layout{grid-template-columns:minmax(0,1fr);gap:48px}
  .site-nav .btn-solid{display:flex}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-grid{grid-template-columns:1fr 1fr}
  .topics .shell{-webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);mask-image:linear-gradient(90deg,#000 86%,transparent)}
  .topics-list{padding-right:36px}
}
@media (max-width:680px){
  .bar{padding-block:10px}
  .brand{gap:10px}
  .brand-mark .tat-logo{width:38px;height:38px}
  .brand .nm{font-size:1.32rem}
  .brand .lic{font-size:.56rem;letter-spacing:.04em}
  .brand .lic span{display:block}
  .brand .lic i{display:none}
  /* the phone bar at the bottom already carries these two buttons */
  .site-nav .btn{display:none}
  .menu-btn{padding-inline:8px}
  .dd-panel{left:0;right:0;width:auto;border-inline:0;border-radius:0 0 14px 14px}

  /* photos run edge to edge on phones */
  .featured-img:not(.is-small),.entry-content > figure.wp-block-image:not(.alignleft,.alignright),.entry-content > figure.wp-caption,.entry-content > .gallery{margin-inline:calc(-1 * var(--gut));max-inline-size:none;width:auto}
  .featured-img.is-small{margin-inline:0}
  .featured-img.is-small img{width:auto;max-height:56vh;margin-inline:auto;border-radius:14px}
  .featured-img:not(.is-small) img,.entry-content > figure.wp-block-image:not(.alignleft,.alignright) img,.entry-content > figure.wp-caption img{width:100%;border-radius:0;box-shadow:none}
  .entry-content > figure figcaption,.entry-content > figure .wp-caption-text,.featured-img figcaption{margin-inline:var(--gut)}
  .alignleft,.alignright{float:none;margin:0 0 1.25em;max-width:100%}
  .entry-content .gallery-columns-3,.entry-content .gallery-columns-4,.entry-content .gallery-columns-5{grid-template-columns:repeat(2,1fr)}

  /* the phone bar already carries these two buttons */
  .mast-cta{margin-top:14px}
  .mast-cta .btn{display:none}

  .tat-cta{padding:20px 18px 20px 26px}
  .tat-cta .cta-links .btn{flex:1 1 100%}
  .faq-q{padding:16px 16px 14px 52px}
  .faq-q::before{left:13px;top:15px}
  .author-box{grid-template-columns:56px 1fr;gap:14px;padding:18px}
  .author-box > img{width:56px;height:56px}
  .post-card{grid-template-columns:112px minmax(0,1fr);gap:14px;padding:18px 0}
  .post-card h2{font-size:1.16rem}
  .post-card .excerpt{display:none}
  .post-card.is-feature .excerpt{display:block}
  .post-card.is-feature h2{font-size:var(--step-1)}
  .related-grid,.post-navigation .nav-links{grid-template-columns:1fr}
  .post-navigation .nav-next{text-align:left}
  .foot-grid{grid-template-columns:1fr;gap:30px}
  .side-list li{padding:12px 0}
  .side-list a,.site-sidebar .widget a{display:block}

  .mobile-cta{display:flex;align-items:center;gap:12px;position:fixed;inset:auto 0 0;z-index:60;padding:9px 14px calc(9px + env(safe-area-inset-bottom));background-color:var(--card-hi);border-top:1px solid var(--hair);box-shadow:0 -8px 22px -14px rgba(28,39,48,.35)}
  .mobile-cta .btn{flex:1;min-height:50px}
  body{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
  body:has(:is(input:not([type=checkbox],[type=radio],[type=submit],[type=button]),textarea,select):focus) .mobile-cta{display:none}
  html{scroll-padding-bottom:84px}
}
@media (max-width:520px){
  .facts{gap:8px;margin-top:20px}
  .fact{grid-template-columns:minmax(0,1fr);padding:10px 12px}
  .fact .doodle{display:none}
  .fact dd{font-size:.98rem}
}
@media (max-width:350px){
  .brand .nm{font-size:1.14rem}
  .brand-mark .tat-logo{width:32px;height:32px}
  .menu-btn{padding-inline:6px}
}
@media (max-width:330px){
  .facts{grid-template-columns:minmax(0,1fr)}
}

/* ============ 20 print ============ */
@media print{
  .site-header .bar-tools,.topics,.site-sidebar,.mobile-cta,.read-progress,.share-row,.pref-src,.comments-area,.related-posts,.post-navigation,.foot-horizon,.foot-reviews,.scene{display:none!important}
  body{background:#fff;padding:0;font-size:11pt}
  .layout{display:block;padding:0}
  .site-footer{background:#fff;color:#000;content-visibility:visible}
  a{color:#000}
}