/* Tramps Journal: the new post layouts (The Guide first).
   Black, fog and brass, Libre Baskerville over Archivo, as the rest of the site.
   Everything sits under .tj so nothing leaks into the theme. */

.tj{
  --tj-ink:#0B0B0B; --tj-paper:#FFFFFF; --tj-fog:#F4F3F0; --tj-fog-2:#FBFAF7; --tj-line:#E6E4DF; --tj-ash:#C9C7C1;
  --tj-text:#4A4945; --tj-slate:#6E6D69; --tj-brass:#B08D57; --tj-brass-ink:#87683A; --tj-lift:#CDB58A; --tj-on-ink:#D9D4CA; --tj-ink-line:#33322F;
  --tj-serif:var(--serif,'Libre Baskerville',Georgia,serif); --tj-sans:var(--sans,'Archivo',system-ui,-apple-system,sans-serif);
  --tj-w:1240px; --tj-gut:24px; --tj-r:14px; --tj-r-lg:26px;
  background:var(--tj-paper); color:var(--tj-ink); font-family:var(--tj-sans); font-size:17px; line-height:1.65;
  overflow-x:clip;
}
.tj *,.tj *::before,.tj *::after{box-sizing:border-box}
.tj a{color:inherit}
.tj em{font-style:italic}
.tj img{max-width:100%;height:auto;display:block}
.tj-in{max-width:var(--tj-w);margin-inline:auto;padding-inline:var(--tj-gut)}
/* the theme wraps each group's inside in an extra box: let the blocks lay out as if it weren't there */
.tj .wp-block-group__inner-container{display:contents}
.tj .wp-block-group{margin-block:0}
.tj-kicker{display:block;margin:0;font:700 12px/1.3 var(--tj-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--tj-brass-ink)}

/* ---- the folio ---- */
.tj-folio{border-bottom:1px solid var(--tj-line)}
.tj-folio .tj-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding-block:14px;font:600 12px/1.3 var(--tj-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--tj-slate)}

/* ---- the opening (The Guide: words beside the photo) ---- */
.tj-open{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:40px 64px;align-items:center;padding-block:56px 48px}
.tj-open-words{display:flex;flex-direction:column;gap:22px}
.tj-open h1{margin:0;font:400 clamp(34px,4.6vw,60px)/1.1 var(--tj-serif);letter-spacing:-.01em;color:var(--tj-ink)}
.tj-open h1 em{color:var(--tj-brass)}
.tj-stand{margin:0;max-width:540px;font:400 20px/1.55 var(--tj-serif);color:var(--tj-text)}
.tj-credits{display:flex;flex-wrap:wrap;gap:10px 28px;margin:0;padding-top:18px;border-top:1px solid var(--tj-line);font-size:14px;color:var(--tj-slate)}
.tj-credits b{color:var(--tj-ink);font-weight:600}
.tj-open-pic{margin:0;border-radius:var(--tj-r);overflow:hidden;background:#1A1A18;aspect-ratio:4/5;max-height:620px}
.tj-open-pic img{width:100%;height:100%;object-fit:cover}

/* ---- the body: the post's own blocks ---- */
.tj-body{counter-reset:tjsec}
.tj-body > *{max-width:var(--tj-w);margin-inline:auto;padding-inline:var(--tj-gut)}
.tj-body p{margin:0}
.tj-body h2,.tj-body h3{margin:0;color:inherit}
.tj-body ul,.tj-body ol{margin:0}

/* full-width bands: the quick answer, the takeaway, the questions */
.tj-body > .tj-quick,.tj-body > .tj-band,.tj-body > .tj-faq{max-width:none;padding-inline:max(var(--tj-gut),calc((100% - var(--tj-w)) / 2 + var(--tj-gut)))}

/* the quick answer: what search and AI answers quote */
.tj-quick{background:var(--tj-fog);padding-block:56px;display:flex;flex-direction:column;gap:30px}
.tj-quick-top{display:flex;flex-wrap:wrap;gap:12px 48px;align-items:flex-start}
.tj-quick-label{flex:0 0 220px;display:flex;flex-direction:column;gap:8px;padding-top:6px}
.tj-quick .tj-quick-q{font:600 15px/1.4 var(--tj-sans);color:var(--tj-text)}
.tj-quick-text{flex:1 1 480px;display:flex;flex-direction:column;gap:14px}
.tj-quick-answer{font:400 24px/1.5 var(--tj-serif)}
.tj-quick-more{font-size:16px;color:var(--tj-text)}

/* a table at a glance */
.tj .tj-glance{margin:0;background:var(--tj-paper);border:1px solid var(--tj-line);border-radius:var(--tj-r);overflow-x:auto;display:flex;flex-direction:column-reverse}
.tj .tj-glance table{width:100%;min-width:640px;border-collapse:collapse;font-size:15px;line-height:1.45;border:0;margin:0}
.tj .tj-glance th,.tj .tj-glance td{padding:14px 22px;text-align:left;border:0;border-bottom:1px solid var(--tj-line);vertical-align:top;background:none}
.tj .tj-glance thead{border-bottom:1px solid var(--tj-line)}
.tj .tj-glance thead th{padding-block:12px;font:700 12px/1.3 var(--tj-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--tj-slate)}
.tj .tj-glance tbody tr:last-child td{border-bottom:0}
.tj .tj-glance figcaption{margin:0;padding:18px 22px 6px;text-align:left;font:700 12px/1.3 var(--tj-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--tj-slate)}

/* in this guide */
.tj .tj-toc{list-style:none;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:10px;counter-reset:toc}
.tj .tj-toc::before{content:"In this guide";margin-right:6px;font:700 12px/1.3 var(--tj-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--tj-slate)}
.tj .tj-toc li{counter-increment:toc}
.tj .tj-toc a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border:1px solid var(--tj-ash);border-radius:999px;background:var(--tj-paper);font-size:14px;font-weight:600;text-decoration:none;transition:border-color .2s,background .2s}
.tj .tj-toc a:hover{border-color:var(--tj-ink)}
.tj .tj-toc li:not(:last-child) a::before{content:counter(toc,decimal-leading-zero);color:var(--tj-brass-ink)}
.tj .tj-toc li:last-child a::before{content:"?";color:var(--tj-brass-ink)}

/* a section: its number and question, then the answer first */
.tj-sec{padding-block:88px 40px;display:flex;flex-direction:column;gap:30px}
.tj-body .tj-h{counter-increment:tjsec;display:flex;align-items:baseline;gap:18px;font:400 clamp(28px,3vw,40px)/1.15 var(--tj-serif)}
.tj-body .tj-h::before{content:counter(tjsec,decimal-leading-zero);flex:none;font:400 44px/1 var(--tj-serif);color:var(--tj-brass)}
.tj-lead{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:16px 56px}
.tj-lead p{color:var(--tj-text)}
.tj-body .tj-answer{font:600 19px/1.5 var(--tj-sans);color:var(--tj-ink)}

/* the price scale */
.tj-scale{border:1px solid var(--tj-line);border-radius:var(--tj-r);padding:28px;display:flex;flex-direction:column;gap:18px}
.tj-scale-h{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;font-size:13px;color:var(--tj-slate)}
.tj-scale-h span:first-child{font:700 12px/1.3 var(--tj-sans);letter-spacing:.12em;text-transform:uppercase}
.tj-scale-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px}
.tj-scale-row > span{flex:0 0 200px;font-weight:600;font-size:15px}
.tj-scale-track{flex:1 1 400px;position:relative;height:14px;background:var(--tj-fog);border-radius:999px}
.tj-scale-track i{position:absolute;top:0;bottom:0;background:var(--tj-ink);border-radius:999px}
.tj-scale-track i.is-mid{background:var(--tj-slate)}
.tj-scale-track i.is-acc{background:var(--tj-brass)}
.tj-scale-track i.is-soft{background:var(--tj-ink);opacity:.35;border-radius:999px 0 0 999px}
.tj-scale-track b{position:absolute;top:-7px;bottom:-7px;width:2px;background:var(--tj-ink)}
.tj-scale-axis > div{flex:1 1 400px;display:flex;justify-content:space-between;font-size:12px;color:var(--tj-slate)}
.tj-scale-note{font-size:13px;color:var(--tj-slate)}

/* cards side by side */
.tj-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:18px}
.tj-cards--3{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.tj-card{border:1px solid var(--tj-line);border-radius:var(--tj-r);padding:26px;display:flex;flex-direction:column;gap:14px}
.tj-card h3{font:400 24px/1.2 var(--tj-serif);display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.tj-card p{font-size:15px;color:var(--tj-text)}
.tj-card.is-strong{border:2px solid var(--tj-ink);padding:25px}
.tj-card.is-dark,.tj-tile.is-dark{background:var(--tj-ink);color:#fff;border-color:var(--tj-ink)}
.tj-card.is-dark p,.tj-tile.is-dark p{color:var(--tj-on-ink)}
.tj-cost{font:700 15px/1 var(--tj-sans);letter-spacing:.05em}
.tj-card.is-dark .tj-cost{color:var(--tj-lift)}
.tj-body .tj-tag{align-self:flex-start;font:700 11px/1.2 var(--tj-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--tj-slate);border:1px solid var(--tj-ash);border-radius:999px;padding:4px 10px}
.tj-card.is-strong .tj-tag{background:var(--tj-ink);border-color:var(--tj-ink);color:#fff}
.tj-card.is-dark .tj-tag{background:var(--tj-lift);border-color:var(--tj-lift);color:var(--tj-ink)}
.tj-tile .tj-tag{border:0;padding:0;border-radius:0}
.tj-tile.is-dark .tj-tag{color:var(--tj-lift)}
.tj .tj-facts{list-style:none;padding:16px 0 0;border-top:1px solid var(--tj-line);display:flex;flex-direction:column;gap:12px;font-size:15px}
.tj-card.is-dark .tj-facts{border-top-color:var(--tj-ink-line)}
.tj .tj-facts strong{display:block;font:700 11px/1.3 var(--tj-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--tj-slate);margin-bottom:2px}
.tj-card.is-dark .tj-facts strong{color:var(--tj-lift)}
.tj-card .wp-block-buttons{margin-top:auto}
.tj-card .wp-block-button,.tj-card .wp-block-button__link{width:100%}

/* tiles */
.tj-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:18px}
.tj-tile{background:var(--tj-fog);border-radius:var(--tj-r);padding:26px;display:flex;flex-direction:column;gap:12px}
.tj-tile h3{font:400 26px/1.2 var(--tj-serif)}
.tj-tile p{font-size:15px;color:var(--tj-text)}

/* a break between sections */
.tj-body .tj-break{border:0;height:9px;margin:40px auto;padding:0;max-width:calc(var(--tj-w) - 2 * var(--tj-gut));width:calc(100% - 2 * var(--tj-gut));opacity:1;background:radial-gradient(circle,var(--tj-brass) 0 4px,transparent 4.5px) center/9px 9px no-repeat,linear-gradient(var(--tj-line),var(--tj-line)) left center/calc(50% - 18px) 1px no-repeat,linear-gradient(var(--tj-line),var(--tj-line)) right center/calc(50% - 18px) 1px no-repeat}

/* the takeaway band */
.tj-band{background:var(--tj-ink);color:#fff;padding-block:72px;display:flex;flex-direction:column;gap:18px;align-items:center;text-align:center}
.tj-band-text{max-width:900px;font:italic 400 clamp(24px,3vw,36px)/1.35 var(--tj-serif)}
.tj-band .tj-kicker{color:var(--tj-lift)}

/* a split: the case on the left, the panel on the right */
.tj-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:40px 64px;align-items:start}
.tj-split-main{display:flex;flex-direction:column;gap:22px}
.tj-split-main > p:not(.tj-answer){color:var(--tj-text)}
.tj-panel{background:var(--tj-ink);color:#fff;border-radius:var(--tj-r-lg);padding:36px;display:flex;flex-direction:column;gap:22px}
.tj-panel .tj-kicker{color:var(--tj-lift)}
.tj-panel p{color:var(--tj-on-ink);font-size:15px}
.tj-panel .tj-panel-big{font:400 28px/1.3 var(--tj-serif);color:#fff}
.tj-panel .tj-panel-big em{color:var(--tj-lift)}
.tj .tj-stats{list-style:none;padding:22px 0 0;border-top:1px solid var(--tj-ink-line);display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:16px;font:400 24px/1.2 var(--tj-serif)}
.tj .tj-stats strong{display:block;margin-bottom:4px;font:700 11px/1.3 var(--tj-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--tj-lift)}
.tj-panel .tj-small{font-size:14px}

/* a checklist */
.tj .tj-checks{list-style:none;padding:0;display:flex;flex-direction:column;gap:12px}
.tj .tj-checks li{position:relative;padding:18px 20px 18px 56px;background:var(--tj-fog);border-radius:12px}
.tj .tj-checks li::before{content:"";position:absolute;left:20px;top:21px;width:22px;height:22px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0B0B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}
.tj .tj-checks strong{font-weight:600}

/* numbered steps */
.tj .tj-steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:14px;counter-reset:step}
.tj .tj-steps li{counter-increment:step;border:1px solid var(--tj-line);border-radius:var(--tj-r);padding:22px;display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--tj-text)}
.tj .tj-steps li::before{content:counter(step);font:400 22px/1 var(--tj-serif);color:var(--tj-brass-ink)}
.tj .tj-steps strong{display:block;font:600 17px/1.4 var(--tj-sans);color:var(--tj-ink)}

/* the questions */
.tj-faq{background:var(--tj-fog);padding-block:80px;margin-top:40px;display:flex;flex-direction:column;gap:12px}
.tj-body .tj-faq-h{font:400 clamp(28px,3vw,40px)/1.15 var(--tj-serif);margin-bottom:20px}
.tj-faq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:16px}
.tj-qa{background:var(--tj-paper);border-radius:var(--tj-r);padding:26px;display:flex;flex-direction:column;gap:10px}
.tj-qa h3{font:700 18px/1.35 var(--tj-sans)}
.tj-qa p{font-size:15px;color:var(--tj-text)}

/* buttons: the editor's Button blocks, and the template's own */
.tj .wp-block-buttons{display:flex;flex-wrap:wrap;gap:12px}
.tj .wp-block-button__link,.tj-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 26px;border-radius:999px;border:1px solid var(--tj-ink);background:var(--tj-ink);color:#fff;font:800 13px/1 var(--tj-sans);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;transition:transform .2s,background .2s}
.tj a.tj-btn,.tj a.wp-block-button__link{color:#fff}
.tj a.tj-btn:hover,.tj a.wp-block-button__link:hover{transform:translateY(-1px);color:#fff}
.tj .is-style-outline a.wp-block-button__link,.tj a.tj-btn--line{background:transparent;color:var(--tj-ink)}
.tj .is-style-outline a.wp-block-button__link:hover,.tj a.tj-btn--line:hover{color:var(--tj-ink)}
.tj .is-dark a.wp-block-button__link,.tj .tj-panel .is-style-fill a.wp-block-button__link{background:var(--tj-lift);border-color:var(--tj-lift);color:var(--tj-ink)}
.tj .tj-panel .is-style-outline a.wp-block-button__link{border-color:#6E6D69;color:#fff}

/* the stylist */
.tj-strip{margin-block:72px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 36px;border:1px solid var(--tj-line);border-radius:var(--tj-r-lg);padding:30px 36px;max-width:calc(var(--tj-w) - 2 * var(--tj-gut));margin-inline:auto}
.tj-strip p{margin:4px 0 0;font:400 24px/1.3 var(--tj-serif)}

/* in this story: the pieces */
.tj-story{padding-bottom:72px}
.tj-story-card{background:var(--tj-fog);border-radius:var(--tj-r-lg);padding:40px;display:flex;flex-wrap:wrap;gap:32px 48px;align-items:center}
.tj-story-words{flex:1 1 320px;display:flex;flex-direction:column;gap:14px}
.tj-story-words h2{margin:0;font:400 clamp(28px,3vw,40px)/1.15 var(--tj-serif)}
.tj-story-words p{margin:0;color:var(--tj-text)}
.tj-btns{display:flex;flex-wrap:wrap;gap:12px;padding-top:6px}
.tj-story-grid{flex:2 1 560px;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px}
.tj-pc{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--tj-ink)}
.tj-pc-im{display:block;aspect-ratio:3/4;border-radius:var(--tj-r);overflow:hidden;background:var(--tj-paper);margin-bottom:4px}
.tj-pc-im img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.tj-pc:hover .tj-pc-im img{transform:scale(1.03)}
.tj-pc-b{font:700 11px/1.3 var(--tj-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--tj-slate)}
.tj-pc-n{font-size:14px;line-height:1.35}
.tj-pc-p{font-size:14px;font-weight:700}
.tj-pc-p del{opacity:.55;font-weight:400;margin-right:4px}
.tj-pc-p ins{text-decoration:none}

/* turn the page */
.tj-turn{display:block;background:var(--tj-fog);text-decoration:none;color:var(--tj-ink)}
.tj-turn .tj-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;padding-block:44px}
.tj-turn .tj-kicker{color:var(--tj-slate)}
.tj-turn-t{display:block;margin-top:6px;font:400 26px/1.3 var(--tj-serif)}
.tj-turn-arrow{font-size:30px;transition:transform .2s}
.tj-turn:hover .tj-turn-arrow{transform:translateX(6px)}

/* ==================================================================
   Occasions: the races, weddings, black tie. The same black, fog and
   brass, laid out around the day itself.
   ================================================================== */

/* the opening: the photo behind the title (the races) */
.tj-hero{position:relative;display:flex;align-items:flex-end;min-height:560px;overflow:hidden;background:#1A1A18;color:#fff}
.tj-hero-pic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.tj .tj-hero-pic{max-width:none;height:100%}
.tj-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,11,.12) 0%,rgba(11,11,11,.38) 42%,rgba(11,11,11,.9) 100%)}
.tj-hero-words{position:relative;z-index:1;width:100%;padding-block:150px 48px;display:flex;flex-direction:column;gap:20px}
.tj-hero h1{margin:0;max-width:900px;font:400 clamp(36px,5.2vw,72px)/1.06 var(--tj-serif);letter-spacing:-.01em;color:#fff}
.tj-hero h1 em{color:var(--tj-lift)}
.tj-hero .tj-stand{max-width:680px;color:var(--tj-on-ink)}
.tj-hero .tj-credits{border-top-color:rgba(255,255,255,.2);color:#C9C7C1}
.tj-hero .tj-credits b{color:#fff}
.tj-pill{align-self:flex-start;padding:6px 14px;border-radius:999px;background:var(--tj-lift);color:var(--tj-ink)}

/* the opening: the title in the middle, above a wide photo (a wedding guest) */
.tj-centred{padding-top:64px;display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
.tj-centred h1{margin:0;max-width:960px;font:400 clamp(36px,5vw,66px)/1.08 var(--tj-serif);letter-spacing:-.01em}
.tj-centred h1 em{color:var(--tj-brass-ink)}
.tj-centred .tj-stand{max-width:700px}
.tj-centred .tj-credits{justify-content:center;padding-top:0;border-top:0}
.tj-centred-pic{width:100%;margin:26px 0 0;aspect-ratio:3/2;max-height:680px;border-radius:var(--tj-r-lg);overflow:hidden;background:#1A1A18}
.tj-centred-pic img{width:100%;height:100%;object-fit:cover}

/* bands the full width of the page, in fog or black */
.tj-body > .tj-wide{max-width:none;padding-inline:max(var(--tj-gut),calc((100% - var(--tj-w)) / 2 + var(--tj-gut)))}
.tj-body .is-fog{background:var(--tj-fog)}
.tj-body .is-ink{background:var(--tj-ink);color:#fff}
.tj-body .is-ink p{color:var(--tj-on-ink)}
.tj-body .is-ink .tj-kicker,.tj-body .is-ink .tj-label,.tj-body .is-dark .tj-label{color:var(--tj-lift)}
.tj-body .is-ink .tj-answer,.tj-body .is-ink strong{color:#fff}
.tj-sec.tj-wide{padding-block:80px}

/* the date strip under the opening */
.tj-datebar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;padding-block:16px;border-top:1px solid #262522;font-size:14px}
.tj-body .tj-datebar p{color:#fff}
.tj-body .tj-datebar strong{margin-right:8px;font:700 12px/1.3 var(--tj-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--tj-lift)}
.tj-datebar a{font-weight:600;color:#fff}

/* a section's opening: kicker, the question, the answer first */
.tj-head{display:flex;flex-direction:column;gap:12px;max-width:820px}
.tj-body .tj-h2{font:400 clamp(28px,3.2vw,44px)/1.15 var(--tj-serif)}
.tj-body .tj-h2.is-small{font-size:clamp(26px,2.6vw,32px);line-height:1.2}
.tj-body .tj-more{color:var(--tj-text)}
.tj-body .tj-label{font:700 12px/1.3 var(--tj-sans);letter-spacing:.14em;text-transform:uppercase}
.tj-body .tj-note{padding:18px 22px;border-radius:12px;background:var(--tj-fog);font-size:15px;color:var(--tj-ink)}

/* the kit: wear, and leave at home */
.tj-kit{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:16px}
.tj-kit-card{background:var(--tj-paper);border-radius:var(--tj-r);padding:26px;display:flex;flex-direction:column;gap:14px}
.tj-kit-card.is-dark{background:var(--tj-ink);color:#fff}

/* ticks and crosses */
.tj .tj-ticks,.tj .tj-crosses{list-style:none;padding:0;display:flex;flex-direction:column;gap:12px}
.tj .tj-ticks.is-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:12px 20px}
.tj .tj-ticks li,.tj .tj-crosses li{position:relative;padding-left:32px}
.tj .tj-ticks li::before,.tj .tj-crosses li::before{content:"";position:absolute;left:0;top:4px;width:20px;height:20px;background:center/contain no-repeat}
.tj .tj-ticks li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0B0B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.tj .tj-crosses li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0B0B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E")}
.tj .is-dark .tj-ticks li::before,.tj .is-ink .tj-ticks li::before,.tj .tj-panel .tj-ticks li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23CDB58A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.tj .is-dark .tj-crosses li::before,.tj .is-ink .tj-crosses li::before,.tj .tj-panel .tj-crosses li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23CDB58A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E")}
.tj .tj-ticks strong,.tj .tj-crosses strong{font-weight:600}
.tj .tj-crosses.is-boxed,.tj .tj-crosses.is-soft{gap:10px}
.tj .tj-crosses.is-boxed li,.tj .tj-crosses.is-soft li{padding:14px 18px 14px 50px;border-radius:12px}
.tj .tj-crosses.is-boxed li{border:1px solid var(--tj-ink-line)}
.tj .tj-crosses.is-soft li{background:var(--tj-fog)}
.tj .tj-crosses.is-boxed li::before,.tj .tj-crosses.is-soft li::before{left:18px;top:17px}
.tj .tj-plain{padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:15px;color:var(--tj-text)}
.tj .tj-plain strong{font-weight:600;color:var(--tj-ink)}

/* colour swatches */
.tj-dots{display:flex;flex-wrap:wrap;gap:6px}
.tj-dots i{display:block;width:34px;height:34px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(11,11,11,.12)}
.is-dark .tj-dots i,.is-ink .tj-dots i{box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.tj-tile .tj-dots i{width:26px;height:26px}
.tj-bar{height:10px;border-radius:999px}

/* the days, each with its colours */
.tj-days{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:18px}
.tj-day{border:1px solid var(--tj-line);border-radius:18px;padding:26px;display:flex;flex-direction:column;gap:14px}
.tj-day.is-dark{background:var(--tj-ink);border-color:var(--tj-ink);color:#fff}
.tj-day h3{font:400 28px/1.15 var(--tj-serif)}
.tj-day p{font-size:15px;color:var(--tj-text)}
.tj-body .tj-day-date{font:700 12px/1.3 var(--tj-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--tj-brass-ink)}
.tj-body .tj-day-short{font-weight:600;color:var(--tj-ink)}
.tj-day.is-dark p{color:var(--tj-on-ink)}
.tj-day.is-dark .tj-day-date{color:var(--tj-lift)}
.tj-day.is-dark .tj-day-short{color:#fff}

/* a pull quote across the page */
.tj-band--quote::before{content:"\201C";font:400 64px/.6 var(--tj-serif);color:var(--tj-lift)}
.tj-band.is-fog{color:var(--tj-ink)}
.tj-band.is-fog::before{color:var(--tj-brass)}

/* places to race */
.tj .tj-places{list-style:none;padding:0;display:flex;flex-direction:column;gap:12px}
.tj .tj-places li{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:16px;padding:20px 22px;border:1px solid var(--tj-line);border-radius:var(--tj-r);font-size:14px;color:var(--tj-slate)}
.tj .tj-places strong{grid-column:1;grid-row:1;font:400 22px/1.3 var(--tj-serif);color:var(--tj-ink)}
.tj .tj-places em{grid-column:2;grid-row:1 / span 2;padding:4px 10px;border:1px solid var(--tj-ash);border-radius:999px;font:normal 700 12px/1.2 var(--tj-sans);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;color:var(--tj-slate)}
.tj .tj-places li:first-child em{background:var(--tj-ink);border-color:var(--tj-ink);color:#fff}

/* tiles on fog, and the post's photos */
.is-fog .tj-tile{background:var(--tj-paper)}
.tj-tile h3{font-size:22px}
.tj-photos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:18px}
.tj .tj-photos figure,.tj .tj-photos .wp-block-image{margin:0;aspect-ratio:4/5;border-radius:var(--tj-r);overflow:hidden;background:#2A2925}
.tj .tj-photos img{width:100%;height:100%;object-fit:cover}

/* small cards: the finishing touches */
.tj-minis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:16px}
.tj-mini{border:1px solid var(--tj-line);border-radius:var(--tj-r);padding:22px;display:flex;flex-direction:column;gap:8px}
.tj-mini h3{font:700 17px/1.35 var(--tj-sans)}
.tj-mini p{font-size:15px;color:var(--tj-text)}
.tj-body .tj-go{margin-top:auto;font-size:14px;font-weight:600}
.tj-body .tj-go a{color:var(--tj-ink)}

/* two boxes side by side */
.tj-pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:24px;align-items:stretch}
.tj-body > .tj-pair{padding-block:32px 80px}
.tj-box{border-radius:var(--tj-r-lg);padding:36px;display:flex;flex-direction:column;gap:16px}
.tj-box.is-line{border:1px solid var(--tj-line)}
.tj-box h3{font:400 26px/1.2 var(--tj-serif)}
.tj-col{display:flex;flex-direction:column;gap:16px}
.tj-panel .tj-answer{font-size:19px;color:#fff}
.tj .tj-nums{list-style:none;padding:0;display:flex;flex-direction:column;gap:10px;counter-reset:n}
.tj .tj-nums li{counter-increment:n;position:relative;padding-left:34px}
.tj .tj-nums li::before{content:counter(n);position:absolute;left:0;top:0;font:400 17px/1.65 var(--tj-serif);color:var(--tj-brass-ink)}
.tj .tj-nums strong{font-weight:600}
.tj .tj-fits{list-style:none;padding:0;display:flex;flex-direction:column;gap:12px}
.tj .tj-fits li{display:flex;gap:14px;padding:16px 18px;border-radius:12px;background:var(--tj-fog)}
.tj .tj-fits strong{flex:0 0 70px;font-weight:700}

/* the questions, with a line beside the title */
.tj-faq-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 32px;margin-bottom:20px}
.tj-faq-title{display:flex;flex-direction:column;gap:8px}
.tj-body .tj-faq-top .tj-faq-h{margin-bottom:0}
.tj-body .tj-faq-top .tj-more{max-width:420px;font-size:15px}

/* the quick answer as a card (a wedding guest), and its three things to weigh */
.tj-body > .tj-quick.tj-quick--card{width:calc(100% - 2 * var(--tj-gut));max-width:calc(var(--tj-w) - 2 * var(--tj-gut));margin:56px auto 24px;padding:40px;border-radius:var(--tj-r-lg);gap:26px}
.tj-factors{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:14px}
.tj-factor{background:var(--tj-paper);border-radius:var(--tj-r);padding:20px;display:flex;flex-direction:column;gap:6px;font-size:15px}
.tj-factor .tj-tag{border:0;padding:0;border-radius:0}

/* what the invitation means */
.tj .tj-decode{margin:0;border:1px solid var(--tj-line);border-radius:18px;overflow:hidden}
.tj .tj-decode table{width:100%;margin:0;border:0;border-collapse:collapse}
.tj .tj-decode thead{border:0}
.tj .tj-decode th,.tj .tj-decode td{padding:22px 26px;border:0;border-bottom:1px solid var(--tj-line);text-align:left;vertical-align:top;background:none}
.tj .tj-decode thead th{padding-block:14px;background:var(--tj-fog-2);font:700 12px/1.3 var(--tj-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--tj-slate)}
.tj .tj-decode td:first-child{width:36%}
.tj .tj-decode td:first-child strong{font:400 22px/1.3 var(--tj-serif)}
.tj .tj-decode td:first-child em{display:block;margin-top:6px;font:normal 700 11px/1.3 var(--tj-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--tj-brass-ink)}
.tj .tj-decode td a{font-weight:600}
.tj .tj-decode tbody tr:last-child td{border-bottom:0}
.tj .tj-decode tr:has(td:first-child em) td{background:var(--tj-ink);color:var(--tj-on-ink)}
.tj .tj-decode tr:has(td:first-child em) strong,.tj .tj-decode tr:has(td:first-child em) a{color:#fff}
.tj .tj-decode tr:has(td:first-child em) em{color:var(--tj-lift)}

/* day or evening, side by side */
.tj-duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));border:1px solid var(--tj-line);border-radius:var(--tj-r-lg);overflow:hidden}
.tj-half{padding:36px;display:flex;flex-direction:column;gap:16px;background:var(--tj-fog-2)}
.tj-half.is-dark{background:var(--tj-ink);color:#fff}
.tj-half.is-dark .tj-kicker{color:var(--tj-lift)}
.tj-half.is-dark .tj-plain{color:var(--tj-on-ink)}
.tj-half.is-dark .tj-plain strong{color:#fff}
.tj-half .tj-dots i{width:32px;height:32px}

/* places with a photo: the venues */
.tj-venues{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:18px}
.tj-venue{border:1px solid var(--tj-line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
.tj .tj-venue .wp-block-image{margin:0;aspect-ratio:4/3;overflow:hidden;background:#2A2925}
.tj .tj-venue .wp-block-image img{width:100%;height:100%;object-fit:cover}
.tj-venue-text{padding:24px;display:flex;flex-direction:column;gap:10px}
.tj-venue-text h3{font:400 24px/1.2 var(--tj-serif)}
.tj-venue-text p{font-size:15px;color:var(--tj-text)}

/* tie colours, on black */
.tj-ties{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:14px}
.tj-tie{border:1px solid var(--tj-ink-line);border-radius:var(--tj-r);padding:20px;display:flex;flex-direction:column;gap:10px}
.tj-body .tj-tie .tj-tie-n{font-weight:600;color:#fff}
.tj-body .tj-tie p:last-child{font-size:14px;color:#C9C7C1}

/* buttons on black */
.tj .is-ink .is-style-fill a.wp-block-button__link{background:var(--tj-lift);border-color:var(--tj-lift);color:var(--tj-ink)}
.tj .is-ink .is-style-outline a.wp-block-button__link{border-color:#6E6D69;color:#fff}
.tj .is-ink a.wp-block-button__link:hover{color:inherit}

/* the opening: the photo beside the title, on black (the groom) */
.tj-splitopen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));background:var(--tj-ink);color:#fff}
.tj-splitopen-pic{position:relative;margin:0;min-height:clamp(440px,48vw,700px);overflow:hidden;background:#1A1A18}
.tj .tj-splitopen-pic img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.tj-splitopen-words{max-width:700px;padding:64px clamp(24px,4.4vw,64px) 56px;display:flex;flex-direction:column;justify-content:flex-end;gap:22px}
.tj-splitopen .tj-kicker{color:var(--tj-lift)}
.tj-splitopen h1{margin:0;font:400 clamp(36px,4.4vw,60px)/1.08 var(--tj-serif);letter-spacing:-.01em;color:#fff}
.tj-splitopen h1 em{color:var(--tj-lift)}
.tj-splitopen .tj-stand{max-width:560px;color:var(--tj-on-ink)}
.tj-splitopen .tj-credits{border-top-color:var(--tj-ink-line);color:#C9C7C1}
.tj-splitopen .tj-credits b{color:#fff}

/* the quick answer on white, with the plan in numbers */
.tj-body > .tj-quick.tj-quick--plain{max-width:var(--tj-w);padding:64px var(--tj-gut) 32px;background:none}
.tj .tj-numbers{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));border-top:2px solid var(--tj-ink);border-bottom:1px solid var(--tj-line)}
.tj .tj-numbers li{padding:22px 24px 22px 0;font-size:14px;color:var(--tj-slate)}
.tj .tj-numbers strong{display:block;margin-bottom:4px;font:400 34px/1.1 var(--tj-serif);color:var(--tj-ink)}
.tj .tj-toc.is-plain li a::before{content:none}

/* the countdown */
.tj-countdown{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:28px 20px}
.tj-step{position:relative;padding-top:22px;border-top:2px solid var(--tj-ink);display:flex;flex-direction:column;gap:8px}
.tj-step::before{content:"";position:absolute;top:-8px;left:0;width:14px;height:14px;border-radius:50%;background:var(--tj-brass)}
.tj-step.is-day::before{top:-10px;left:-2px;width:18px;height:18px;background:var(--tj-fog);border:3px solid var(--tj-ink)}
.tj-body .tj-when{font:400 30px/1.1 var(--tj-serif);color:var(--tj-ink)}
.tj-step h3{font:700 17px/1.4 var(--tj-sans)}
.tj-step p:last-child{font-size:15px;color:var(--tj-text)}
.tj-body .is-fog .tj-note{background:var(--tj-paper)}
.tj-body .tj-note.is-dashed{background:none;border:1px dashed var(--tj-ash)}
.tj-body .tj-small{font-size:14px}

/* one way or the other: a table side by side */
.tj .tj-versus{margin:0;border:1px solid var(--tj-line);border-radius:18px;overflow-x:auto;display:flex;flex-direction:column-reverse}
.tj .tj-versus table{width:100%;min-width:680px;margin:0;border:0;border-collapse:collapse;font-size:15px;line-height:1.5}
.tj .tj-versus thead{border:0}
.tj .tj-versus th,.tj .tj-versus td{padding:16px 24px;border:0;border-top:1px solid var(--tj-line);text-align:left;vertical-align:top;background:none}
.tj .tj-versus thead th{border-top:0;padding-block:18px;font:400 24px/1.2 var(--tj-serif)}
.tj .tj-versus thead th:first-child{width:18%}
.tj .tj-versus thead th:last-child{background:var(--tj-ink);color:#fff}
.tj .tj-versus td:first-child{font:700 12px/1.5 var(--tj-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--tj-slate)}
.tj .tj-versus td:last-child{background:var(--tj-fog-2)}
.tj .tj-versus figcaption{margin:0;padding:16px 24px 4px;text-align:left;font:700 12px/1.3 var(--tj-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--tj-slate)}
.tj-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px}
.tj-body .tj-row .tj-more{max-width:620px;font-size:15px}

/* the line-up: one card each, under a band of its colour */
.tj-lineup{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:18px}
.tj-person{border:1px solid var(--tj-line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
.tj-person.is-dark{background:var(--tj-ink);border-color:var(--tj-ink);color:#fff}
.tj-swatch{height:120px;display:flex;align-items:flex-end;padding:14px 26px}
.tj-swatch span{font-size:12px;color:#fff}
.tj-person-text{padding:26px;display:flex;flex-direction:column;gap:12px}
.tj-person h3{font:400 26px/1.2 var(--tj-serif)}
.tj .tj-person .tj-ticks{gap:10px;font-size:15px;color:var(--tj-text)}
.tj .tj-person.is-dark .tj-ticks{color:var(--tj-on-ink)}
.tj-person.is-dark .tj-kicker{color:var(--tj-lift)}
.tj-body .tj-person .tj-small{color:#C9C7C1}

/* colours, one to a row */
.tj-shades{border-top:1px solid var(--tj-line)}
.tj-shade{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;padding:20px 0;border-bottom:1px solid var(--tj-line)}
.tj-shade .tj-dots{flex:0 0 120px}
.tj-shade .tj-dots i{width:40px;height:40px}
.tj-body .tj-shade-n{flex:0 0 240px;font:400 24px/1.3 var(--tj-serif)}
.tj-shade p:not([class]){flex:1 1 260px;font-size:15px;color:var(--tj-text)}
.tj-body .tj-pilltag{padding:4px 10px;border:1px solid var(--tj-ash);border-radius:999px;font:700 12px/1.2 var(--tj-sans);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;color:var(--tj-slate)}
.tj-body .tj-pilltag.is-ink{background:var(--tj-ink);border-color:var(--tj-ink);color:#fff}

/* the fitting: steps on fog, what to bring, and a big number */
.tj-body .is-fog .tj-steps li{background:var(--tj-paper);border-color:transparent}
.tj-box.is-paper{background:var(--tj-paper)}
.tj-box .wp-block-buttons{padding-top:8px}
.tj-body .tj-bignum{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;padding:18px 0;border-top:1px solid var(--tj-ink-line);border-bottom:1px solid var(--tj-ink-line);font-size:14px;color:var(--tj-on-ink)}
.tj-body .tj-bignum strong{font:400 44px/1 var(--tj-serif);color:var(--tj-lift)}

/* tiles, three across, outlined */
.tj-tiles--3{grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr))}
.tj-tile.is-line{background:none;border:1px solid var(--tj-line)}

/* the opening: on black, framed like an invitation, then the photo (black tie) */
.tj-invite{background:var(--tj-ink);color:#fff}
.tj-invite-in{max-width:var(--tj-w);margin-inline:auto;padding:56px var(--tj-gut) 0;display:flex;flex-direction:column;gap:40px}
.tj-invite-card{width:100%;max-width:920px;margin-inline:auto;padding:10px;border:1px solid var(--tj-lift)}
.tj-invite-card > div{padding:56px clamp(20px,5vw,64px);border:1px solid #5A4E39;display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
.tj-invite .tj-kicker{letter-spacing:.2em;color:var(--tj-lift)}
.tj-invite h1{margin:0;font:400 clamp(34px,4.8vw,62px)/1.1 var(--tj-serif);letter-spacing:-.01em;color:#fff}
.tj-invite h1 em{color:var(--tj-lift)}
.tj-invite-rule{display:flex;align-items:center;gap:14px;width:160px}
.tj-invite-rule::before,.tj-invite-rule::after{content:"";flex:1;height:1px;background:#5A4E39}
.tj-invite-rule i{width:7px;height:7px;background:var(--tj-lift);transform:rotate(45deg)}
.tj-invite .tj-stand{max-width:640px;color:var(--tj-on-ink)}
.tj-invite .tj-credits{justify-content:center;padding-top:0;border-top:0;color:#C9C7C1}
.tj-invite .tj-credits b{color:#fff}
.tj-invite-pic{margin:0;aspect-ratio:21/9;border-radius:var(--tj-r-lg) var(--tj-r-lg) 0 0;overflow:hidden;background:#1A1A18}
.tj-invite-pic img{width:100%;height:100%;object-fit:cover}

/* the five pieces, numbered */
.tj .tj-five{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));border:1px solid var(--tj-ink);border-radius:var(--tj-r);overflow:hidden;counter-reset:five}
.tj .tj-five li{counter-increment:five;padding:22px;border-right:1px solid var(--tj-line);display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--tj-text)}
.tj .tj-five li::before{content:counter(five);font:400 28px/1 var(--tj-serif);color:var(--tj-brass-ink)}
.tj .tj-five strong{font:700 17px/1.4 var(--tj-sans);color:var(--tj-ink)}
.tj .tj-five li:last-child{border-right:0;background:var(--tj-ink);color:var(--tj-on-ink)}
.tj .tj-five li:last-child::before{color:var(--tj-lift)}
.tj .tj-five li:last-child strong{color:#fff}

/* the formality steps, most formal first */
.tj-ladder{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));gap:12px;align-items:end}
.tj-rung{display:flex;flex-direction:column;gap:10px}
.tj-body .tj-rung-label{font:700 11px/1.3 var(--tj-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--tj-slate)}
.tj-body .tj-rung.is-dark .tj-rung-label{color:var(--tj-brass-ink)}
.tj-rung-box{border-radius:var(--tj-r);padding:20px;background:var(--tj-fog);display:flex;flex-direction:column;justify-content:flex-end;gap:6px}
.tj-rung-box h3{font:400 22px/1.25 var(--tj-serif)}
.tj-rung-box p{font-size:14px;color:var(--tj-text)}
.tj-rung:nth-child(1) .tj-rung-box{min-height:210px;background:none;border:1px solid var(--tj-line)}
.tj-rung:nth-child(2) .tj-rung-box{min-height:180px}
.tj-rung:nth-child(3) .tj-rung-box{min-height:150px}
.tj-rung:nth-child(4) .tj-rung-box{min-height:120px}
.tj-rung:nth-child(5) .tj-rung-box{min-height:90px}
.tj-rung.is-dark .tj-rung-box{background:var(--tj-ink);color:#fff}
.tj-rung.is-dark .tj-rung-box p{color:var(--tj-on-ink)}

/* the photo beside the pieces (stays in view while the list scrolls) */
.tj-anatomy{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:24px;align-items:start}
.tj .tj-anatomy-pic{position:sticky;top:24px;margin:0;border-radius:var(--tj-r-lg);overflow:hidden;background:var(--tj-paper)}
.tj .tj-anatomy-pic img{width:100%;max-width:none;aspect-ratio:4/5;height:auto;object-fit:cover}
.tj .tj-anatomy-pic figcaption{margin:0;padding:16px 22px;text-align:left;font-size:14px;color:var(--tj-text)}
.tj .tj-anatomy-pic figcaption a{font-weight:600;text-decoration:underline;text-underline-offset:3px}
.tj-pieces{display:flex;flex-direction:column;gap:12px;counter-reset:piece}
.tj-piece{counter-increment:piece;background:var(--tj-paper);border-radius:var(--tj-r);padding:22px 24px;display:flex;flex-direction:column;gap:10px}
.tj-piece h3{display:flex;align-items:baseline;gap:12px;font:400 22px/1.25 var(--tj-serif)}
.tj-piece h3::before{content:counter(piece);font-size:16px;color:var(--tj-brass-ink)}
.tj-piece p{font-size:15px;color:var(--tj-text)}
.tj-lapels{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:8px}
.tj-lapel{border:1px solid var(--tj-line);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.tj-body .tj-meter{font-size:12px;letter-spacing:.2em;color:var(--tj-brass-ink)}
.tj-body .tj-lapel-n{font-size:15px;font-weight:600;color:var(--tj-ink)}
.tj-lapel p:last-child{font-size:13px;color:var(--tj-slate)}

/* a list of don'ts on fog, the summer jacket, five tiles, the fit */
.tj-body .is-fog .tj-crosses.is-soft li{background:var(--tj-paper)}
.tj-jacket{display:flex;align-items:flex-end;gap:10px}
.tj-jacket i{display:block;width:92px;height:112px;border-radius:14px 14px 6px 6px;background:#F1EADB}
.tj-jacket i + i{width:56px;height:140px;border-radius:6px;background:#1A1A18;border:1px solid var(--tj-ink-line)}
.tj-tiles--5{grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr))}
.tj-fitbox{border:1px solid var(--tj-line);border-radius:var(--tj-r-lg);padding:40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:28px 56px;align-items:start}
.tj .tj-fitbox .tj-fits strong{flex-basis:90px}

/* the opening: a how-to, on fog, with a jump to each part */
.tj-howopen{background:var(--tj-fog)}
.tj-howopen-in{max-width:var(--tj-w);margin-inline:auto;padding:56px var(--tj-gut);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:40px 72px;align-items:center}
.tj-howopen-words{display:flex;flex-direction:column;gap:22px}
.tj-howopen h1{margin:0;font:400 clamp(36px,4.6vw,60px)/1.08 var(--tj-serif);letter-spacing:-.01em}
.tj-howopen h1 em{color:var(--tj-brass-ink)}
.tj-howopen .tj-credits{border-top-color:#DCD9D2}
.tj-howopen-pic{justify-self:center;width:100%;max-width:480px;margin:0;aspect-ratio:4/5;border-radius:var(--tj-r);overflow:hidden;background:#2A2925}
.tj-howopen-pic img{width:100%;height:100%;object-fit:cover}
.tj .tj-jump{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.tj .tj-jump a{display:inline-flex;flex-direction:column;justify-content:center;min-height:56px;padding:6px 18px;border-radius:14px;background:var(--tj-paper);font-size:12px;line-height:1.3;color:var(--tj-slate);text-decoration:none}
.tj .tj-jump strong{font-size:15px;font-weight:700;color:var(--tj-ink)}
.tj .tj-jump li:last-child a{background:var(--tj-ink);color:var(--tj-lift)}
.tj .tj-jump li:last-child strong{color:#fff}

/* a picture still to come (only editors see it): a labelled box where it goes */
.tj .tj-placeholder{min-height:120px;padding:12px 14px;border:1px dashed var(--tj-ash);background:var(--tj-fog);display:flex;align-items:flex-end}
.tj .tj-placeholder span{font-size:12px;line-height:1.4;color:var(--tj-slate)}
.tj .is-ink .tj-placeholder{border-color:var(--tj-ink-line)}
.tj .is-ink .tj-placeholder span{color:#9B9A96}

/* pick your knot */
.tj-knots{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:16px}
.tj-knot{border:1px solid var(--tj-line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
.tj-knot.is-strong{border:2px solid var(--tj-ink)}
.tj-knot.is-dark{background:var(--tj-ink);border-color:var(--tj-ink);color:#fff}
.tj .tj-knot .wp-block-image{margin:0;aspect-ratio:1/1;overflow:hidden;background:var(--tj-fog)}
.tj .tj-knot .wp-block-image img{width:100%;height:100%;object-fit:cover}
.tj .tj-knot.is-dark .wp-block-image{background:#1A1A18}
.tj-knot-text{padding:22px;display:flex;flex-direction:column;gap:8px}
.tj-knot h3{font:400 24px/1.2 var(--tj-serif)}
.tj-knot p{font-size:14px;color:var(--tj-text)}
.tj-knot.is-dark p{color:var(--tj-on-ink)}
.tj-body .tj-level{font:700 11px/1.3 var(--tj-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--tj-slate)}
.tj-body .tj-knot.is-dark .tj-meter,.tj-body .tj-knot.is-dark .tj-go a{color:var(--tj-lift)}
.tj-body .tj-knot.is-dark .tj-level{color:#C9C7C1}

/* steps with a picture each */
.tj-knothead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 40px}
.tj-knothead .tj-head{max-width:720px}
.tj-chips{display:flex;flex-wrap:wrap;gap:8px}
.tj-body .is-ink .tj-pilltag{border-color:#6E6D69}
.tj-howto{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:16px;counter-reset:hs}
.tj-howto-step{counter-increment:hs;display:flex;flex-direction:column;gap:10px}
.tj .tj-howto-step .wp-block-image{margin:0;aspect-ratio:1/1;border-radius:var(--tj-r);overflow:hidden;background:var(--tj-fog)}
.tj .tj-howto-step .wp-block-image img{width:100%;height:100%;object-fit:cover}
.tj .is-fog .tj-howto-step .wp-block-image{background:var(--tj-paper)}
.tj .is-ink .tj-howto-step .wp-block-image{background:#1A1A18}
.tj-howto-step p{font-size:15px}
.tj-howto-step p::before{content:counter(hs);display:block;margin-bottom:8px;font:400 22px/1 var(--tj-serif);color:var(--tj-brass-ink)}
.is-ink .tj-howto-step p::before{color:var(--tj-lift)}
.tj-howto-note{border-radius:var(--tj-r);padding:24px;background:var(--tj-ink);color:#fff;display:flex;flex-direction:column;justify-content:flex-end;gap:10px}
.tj-body .tj-howto-note p{color:var(--tj-on-ink)}
.tj-body .tj-howto-note .tj-kicker{color:var(--tj-lift)}
.tj-body .tj-howto-note .tj-said{font:italic 400 21px/1.4 var(--tj-serif);color:#fff}
.tj-body .tj-howto-note .tj-said::before{content:"\201C";display:block;margin-bottom:10px;font:400 40px/.6 var(--tj-serif);color:var(--tj-lift)}

/* steps in a row on black, a plain table, tie widths, and lists inside fog boxes */
.tj-body .is-ink .tj-steps li{border-color:var(--tj-ink-line);color:var(--tj-on-ink)}
.tj-body .is-ink .tj-steps li::before{color:var(--tj-lift)}
.tj .tj-simple{margin:0;border:1px solid var(--tj-line);border-radius:var(--tj-r);overflow:hidden}
.tj .tj-simple table{width:100%;margin:0;border:0;border-collapse:collapse;font-size:15px;line-height:1.45}
.tj .tj-simple thead{border:0}
.tj .tj-simple th,.tj .tj-simple td{padding:14px 20px;border:0;border-top:1px solid var(--tj-line);text-align:left;vertical-align:top;background:none}
.tj .tj-simple thead th{border-top:0;background:var(--tj-fog-2);font:700 12px/1.3 var(--tj-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--tj-slate)}
.tj-widths{display:flex;align-items:flex-end;gap:18px;padding:10px 0}
.tj-widths i{display:block;width:44px;height:120px;background:#4C6C9C;clip-path:polygon(0 0,100% 0,100% 86%,50% 100%,0 86%)}
.tj-widths i:nth-child(2){width:60px;height:140px;background:#33405F}
.tj-widths i:nth-child(3){width:76px;height:150px;background:#6B2233}
.tj-body .is-fog .tj-fits li{background:var(--tj-paper)}
.tj .tj-box .tj-fits strong{flex-basis:110px}

/* the opening: the title on a card, laid over the edge of the photo (cocktail) */
.tj-overlap{max-width:var(--tj-w);margin-inline:auto;padding:48px var(--tj-gut) 24px;display:flex;flex-wrap:wrap-reverse;align-items:center}
.tj-overlap-pic{order:2;flex:1 1 560px;position:relative;margin:0;min-height:clamp(380px,44vw,620px);border-radius:var(--tj-r);overflow:hidden;background:#2A2925}
.tj .tj-overlap-pic img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.tj-overlap-card{order:1;flex:1 1 520px;max-width:640px;margin-right:-200px;position:relative;z-index:1;padding:clamp(28px,3.4vw,48px);border:1px solid var(--tj-line);border-radius:var(--tj-r-lg);background:var(--tj-paper);display:flex;flex-direction:column;gap:22px}
.tj-overlap h1{margin:0;font:400 clamp(36px,4.4vw,58px)/1.08 var(--tj-serif);letter-spacing:-.01em}
.tj-overlap h1 em{color:var(--tj-brass-ink)}

/* where a dress code sits: three side by side */
.tj-codes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));border:1px solid var(--tj-line);border-radius:var(--tj-r);overflow:hidden}
.tj-code{padding:20px 22px;background:var(--tj-fog-2);display:flex;flex-direction:column;gap:4px}
.tj-code.is-dark{background:var(--tj-ink);color:#fff}
.tj-body .tj-code-n{font:400 22px/1.3 var(--tj-serif)}
.tj-code p:last-child{font-size:14px;color:var(--tj-text)}
.tj-code.is-dark p:last-child{color:var(--tj-on-ink)}
.tj-body .tj-code.is-dark .tj-level{color:var(--tj-lift)}

/* where you'll see it */
.tj-seen{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.tj-body .tj-seen .tj-level{margin-right:6px}
.tj-body .tj-chip{padding:6px 14px;border-radius:999px;background:var(--tj-paper);font-size:14px}

/* a box on black, and a band of the outfit's colours */
.tj-box.is-dark{background:var(--tj-ink);color:#fff}
.tj-body .tj-box.is-dark p,.tj .tj-box.is-dark .tj-plain{color:var(--tj-on-ink)}
.tj-box.is-dark .tj-kicker{color:var(--tj-lift)}
.tj .tj-box.is-dark .tj-plain strong{color:#fff}
.tj-pairbar{display:flex;height:64px;border-radius:12px;overflow:hidden}
.tj-pairbar i{flex:1}
.tj-pairbar i + i{border-left:1px solid var(--tj-ink-line)}

/* if this, then that */
.tj .tj-ifs{list-style:none;padding:0;display:flex;flex-direction:column;gap:10px}
.tj .tj-ifs li{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:18px 20px;border:1px solid var(--tj-line);border-radius:var(--tj-r)}
.tj .tj-ifs em{flex:1 1 200px;font-style:normal;font-size:15px;color:var(--tj-text)}
.tj .tj-ifs strong{flex:1.2 1 240px;font-weight:600}
.tj .tj-ifs strong::before{content:"\2192";margin-right:12px;font-weight:400;color:var(--tj-brass-ink)}
.tj .tj-ifs li:first-child{background:var(--tj-ink);border-color:var(--tj-ink);color:#fff}
.tj .tj-ifs li:first-child em{color:var(--tj-on-ink)}
.tj .tj-ifs li:first-child strong::before{color:var(--tj-lift)}

/* light to dark, through the day */
.tj-dusk-bar{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));height:72px;border-radius:var(--tj-r);overflow:hidden}
.tj-dusk-labels{display:flex;justify-content:space-between;padding-top:10px;font:700 12px/1.3 var(--tj-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--tj-slate)}

/* read next, at the foot of a box */
.tj-body .tj-readnext{margin-top:auto}
.tj .tj-body p.tj-readnext a{display:flex;flex-direction:column;gap:2px;padding:16px 18px;border-radius:12px;background:var(--tj-fog);font:400 18px/1.35 var(--tj-serif);text-decoration:none;color:var(--tj-ink)}
.tj .tj-body p.tj-readnext a::before{content:"Read next";font:700 11px/1.3 var(--tj-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--tj-slate)}

/* outfits, each with its colours */
.tj-outfits{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:18px}
.tj-outfit{border-radius:18px;overflow:hidden;background:var(--tj-paper);display:flex;flex-direction:column}
.tj-outfit.is-dark{background:var(--tj-ink);color:#fff}
.tj-palette{display:grid;grid-template-columns:3fr 1.2fr;height:150px}
.tj-palette > span{display:grid}
.tj-palette i{display:block}
.tj-outfit-text{padding:26px;display:flex;flex-direction:column;gap:12px}
.tj-outfit h3{font:400 26px/1.2 var(--tj-serif)}
.tj .tj-recipe{list-style:none;padding:0;display:flex;flex-direction:column;gap:6px;font-size:15px;color:var(--tj-text)}
.tj .tj-recipe strong{font-weight:600;color:var(--tj-ink)}
.tj .tj-outfit.is-dark .tj-recipe{color:var(--tj-on-ink)}
.tj .tj-outfit.is-dark .tj-recipe strong{color:#fff}
.tj-body .tj-outfit.is-dark .tj-level{color:var(--tj-lift)}

/* links inside lists */
.tj-body .tj-ifs a,.tj-body .tj-crosses a,.tj-body .tj-ticks a,.tj-body .tj-fits a,.tj-body .tj-nums a,.tj-body .tj-plain a{font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* links in the words: bold and underlined, so they read as links */
.tj-body p a:not(.wp-block-button__link),.tj-body td a{font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.tj-body .tj-datebar p a{text-decoration:none}

/* the stylist, dark, after the pieces */
.tj-stylist-wrap{padding-bottom:72px}
.tj-stylist{background:var(--tj-ink);color:#fff;border-radius:var(--tj-r-lg);padding:36px 40px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 36px}
.tj-stylist-t{display:flex;flex-direction:column;gap:6px;max-width:640px}
.tj-stylist .tj-kicker{color:var(--tj-lift)}
.tj-stylist-t p{margin:0;font-size:15px;color:var(--tj-on-ink)}
.tj-stylist-t .tj-stylist-h{font:400 28px/1.3 var(--tj-serif);color:#fff}
.tj-stylist-h em{color:var(--tj-lift)}
.tj a.tj-btn--lift,.tj a.tj-btn--lift:hover{background:var(--tj-lift);border-color:var(--tj-lift);color:var(--tj-ink)}
.tj a.tj-btn--ghost,.tj a.tj-btn--ghost:hover{background:transparent;border-color:#6E6D69;color:#fff}
.tj--occasion .tj-story{padding-top:72px}

@media (max-width:760px){
  .tj-hero{min-height:520px}
  .tj-hero-words{padding-block:120px 36px}
  .tj-centred{padding-top:40px}
  .tj-centred-pic{aspect-ratio:4/3}
  .tj-sec.tj-wide{padding-block:56px}
  .tj-day,.tj-kit-card,.tj-box,.tj-half{padding:24px}
  .tj-body > .tj-quick.tj-quick--card{padding:26px}
  .tj .tj-decode th,.tj .tj-decode td{padding:16px}
  .tj .tj-decode td:first-child strong{font-size:19px}
  .tj-stylist{padding:28px}
  .tj-invite-pic{aspect-ratio:4/3}
  .tj-invite-card > div{padding-block:40px}
  .tj-ladder .tj-rung:nth-child(n) .tj-rung-box{min-height:0}
  .tj .tj-anatomy-pic{position:static}
  .tj-fitbox{padding:24px}
}
@media (max-width:1060px){
  .tj-overlap-card{max-width:none;margin-right:0;margin-top:-64px}
}

@media (max-width:760px){
  .tj{font-size:16px}
  .tj-open{padding-block:36px 32px}
  .tj-quick{padding-block:40px}
  .tj-quick-answer{font-size:21px}
  .tj-sec{padding-block:56px 24px}
  .tj-body .tj-h::before{font-size:34px}
  .tj-scale-row > span{flex-basis:100%}
  .tj-panel{padding:28px}
  .tj-story-card{padding:26px}
  .tj-strip{padding:24px}
}
@media (prefers-reduced-motion:reduce){.tj *{transition:none!important}}

/* ===== The Guide: every dress code decoded (semi formal) ===== */
/* the opening: the title beside the photo, then the dress codes laid out like a tape measure (the post's tj-tape block) */
.tj-tapeopen{max-width:var(--tj-w);margin-inline:auto;padding:56px var(--tj-gut) 0;display:flex;flex-direction:column;gap:44px}
.tj-tapeopen-top{display:flex;flex-wrap:wrap;gap:36px 56px;align-items:flex-end}
.tj-tapeopen-words{flex:1 1 560px;display:flex;flex-direction:column;gap:22px;padding-bottom:6px}
.tj-tapeopen h1{margin:0;font:400 clamp(36px,4.6vw,62px)/1.08 var(--tj-serif);letter-spacing:-.01em}
.tj-tapeopen h1 em{color:var(--tj-brass-ink)}
.tj-tapeopen-pic{flex:1 1 340px;max-width:500px;margin:0;aspect-ratio:5/6;position:relative;border-radius:var(--tj-r);overflow:hidden;background:#2A2925}
.tj .tj-tapeopen-pic img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.tj-tape{display:flex;flex-direction:column;gap:10px}
.tj-tape-ends{display:flex;justify-content:space-between;gap:16px}
.tj .tj-tape-ends p{margin:0;font:700 11px/1.3 var(--tj-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--tj-slate)}
.tj .tj-tape-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));border:1px solid var(--tj-ink);border-radius:var(--tj-r);overflow:hidden;background-color:var(--tj-fog-2);counter-reset:tape}
.tj .tj-tape-list li{counter-increment:tape;margin:0;min-height:156px;padding:30px 16px 18px;display:flex;flex-direction:column;gap:6px;font-size:13px;line-height:1.4;color:var(--tj-text);background:linear-gradient(var(--tj-ink),var(--tj-ink)) left top/1px 22px no-repeat,repeating-linear-gradient(90deg,var(--tj-ash) 0 1px,transparent 1px 12px) left top/100% 9px no-repeat}
.tj .tj-tape-list li::before{content:counter(tape,decimal-leading-zero);font:700 11px/1.3 var(--tj-sans);letter-spacing:.12em;color:var(--tj-brass-ink)}
.tj .tj-tape-list br{display:none}
.tj .tj-tape-list strong{font:400 19px/1.2 var(--tj-serif);color:var(--tj-ink)}
.tj .tj-tape-list a{margin-top:auto;padding-top:6px;font-size:12px;font-weight:700;color:var(--tj-brass-ink);text-decoration:none}
.tj .tj-tape-list a:hover{text-decoration:underline}
/* the code this guide is about: the list item with an <em> */
.tj .tj-tape-list li:has(em){background:linear-gradient(var(--tj-lift),var(--tj-lift)) left top/1px 22px no-repeat,repeating-linear-gradient(90deg,var(--tj-text) 0 1px,transparent 1px 12px) left top/100% 9px no-repeat,var(--tj-ink);color:var(--tj-on-ink)}
.tj .tj-tape-list li:has(em)::before{display:none}
.tj .tj-tape-list em{font:normal 700 11px/1.3 var(--tj-sans);letter-spacing:.12em;color:var(--tj-lift)}
.tj .tj-tape-list em::before{content:counter(tape,decimal-leading-zero) " · "}
.tj .tj-tape-list li:has(em) strong{color:#fff}
.tj .tj-tape-list li:has(em) a{color:var(--tj-lift)}

/* a smaller part of a section, under it */
.tj-sec.tj-sub{padding-block:32px 88px}
.tj-body .tj-h3{font:400 clamp(24px,2.4vw,32px)/1.2 var(--tj-serif)}
.tj-body .tj-sub .tj-answer{font-size:17px}

/* the ladder: every code in a table; the row with an <em> is this guide's */
.tj .tj-codetable{margin:0;border-radius:var(--tj-r);overflow:hidden;background:var(--tj-paper)}
.tj .tj-codetable table{width:100%;margin:0;border:0;border-collapse:collapse;font-size:15px;line-height:1.5}
.tj .tj-codetable thead{border:0}
.tj .tj-codetable th,.tj .tj-codetable td{padding:16px 22px;border:0;border-bottom:1px solid var(--tj-line);text-align:left;vertical-align:top;background:none;color:var(--tj-ink)}
.tj .tj-codetable thead th{padding-block:18px;font:700 11px/1.3 var(--tj-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--tj-slate)}
.tj .tj-codetable td:first-child{width:22%}
.tj .tj-codetable td:nth-child(2){color:var(--tj-text)}
.tj .tj-codetable td:nth-child(3),.tj .tj-codetable td:nth-child(4){width:15%}
.tj .tj-codetable td:first-child strong{font:400 17px/1.4 var(--tj-serif);color:var(--tj-ink)}
.tj .tj-codetable td a{font-weight:600}
.tj .tj-codetable tbody tr:last-child td{border-bottom:0}
.tj .tj-codetable tr:has(td:first-child em) td{background:var(--tj-ink);border-bottom-color:var(--tj-ink);color:#fff}
.tj .tj-codetable tr:has(td:first-child em) td:nth-child(2){color:var(--tj-on-ink)}
.tj .tj-codetable tr:has(td:first-child em) strong{color:#fff}

/* the outfit on a ticket, beside what isn't semi formal */
.tj-ticketrow{display:flex;flex-wrap:wrap;gap:18px;align-items:stretch}
.tj-ticket{flex:2 1 560px;min-width:0;display:flex;flex-direction:column;background:var(--tj-fog-2);border:1px solid var(--tj-line);border-radius:var(--tj-r)}
.tj-ticketrow .tj-kit-card{flex:1 1 300px}
.tj-ticket-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;padding:18px 28px;border-bottom:1px dashed var(--tj-ash)}
.tj-body .tj-ticket-head p{margin:0;font:700 12px/1.3 var(--tj-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--tj-ink)}
.tj-body .tj-ticket-head p + p{color:var(--tj-brass-ink)}
.tj .tj-ticket-rows{list-style:none;margin:0;padding:4px 28px 14px}
.tj .tj-ticket-rows li{position:relative;margin:0;padding:16px 0 16px 144px;border-bottom:1px solid var(--tj-line);font-size:16px;line-height:1.6}
.tj .tj-ticket-rows li:last-child{border-bottom:0}
.tj .tj-ticket-rows em{position:absolute;left:0;top:19px;font:normal 700 12px/1.3 var(--tj-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--tj-slate)}
.tj .tj-ticket-rows strong{font-weight:600}
.tj-body .tj-ticket-rows a{font-weight:600;text-decoration:underline;text-underline-offset:3px}
.tj-body .tj-kit-foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--tj-ink-line);font-size:14px;color:var(--tj-on-ink)}
.tj-body .tj-kit-foot a{color:#fff}

/* label-and-value rows inside a box; a box's title with its label */
.tj .tj-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;font-size:15px}
.tj .tj-rows li{display:flex;gap:16px;margin:0;padding:10px 0;border-top:1px solid var(--tj-line);color:var(--tj-text)}
.tj .tj-rows strong{flex:0 0 64px;font-weight:600;color:var(--tj-ink)}
.tj .tj-rows.is-wide strong{flex-basis:100px}
.tj .is-dark .tj-rows li{border-top-color:var(--tj-ink-line);color:var(--tj-on-ink)}
.tj .is-dark .tj-rows strong{color:#fff}
.tj-boxhead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 12px}
.tj-boxhead.is-stack{flex-direction:column;align-items:flex-start;gap:4px}
.tj-body .tj-boxhead .tj-level{color:var(--tj-brass-ink)}
.tj-body .is-dark .tj-boxhead .tj-level{color:var(--tj-lift)}
.tj-box.is-white{background:var(--tj-paper)}
.tj-box.is-cream{background:var(--tj-fog-2);border:1px solid var(--tj-line)}
.tj-body .tj-box .tj-label{color:var(--tj-brass-ink)}
.tj-body .tj-box.is-dark .tj-label{color:var(--tj-lift)}
.tj-body .tj-boxnote{font-size:14px;color:var(--tj-text)}

/* a dictionary entry */
.tj-body .tj-define-word{font:400 clamp(34px,3.6vw,46px)/1.1 var(--tj-serif);color:var(--tj-ink)}
.tj-body .tj-define-word em{margin-left:12px;font-size:17px;color:var(--tj-slate)}
.tj .tj-define-senses{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:12px;font-size:17px}
.tj .tj-define-senses li{padding-left:6px}
.tj-define-foot{display:flex;flex-wrap:wrap;gap:8px 24px;padding-top:16px;border-top:1px solid var(--tj-line)}
.tj-body .tj-define-foot p{margin:0;font-size:14px;color:var(--tj-text)}
.tj-body .tj-define-foot strong{font-weight:600;color:var(--tj-ink)}
.tj .tj-apart{margin:0}
.tj .tj-apart table{width:100%;margin:0;border:0;border-collapse:collapse;font-size:15px;line-height:1.45}
.tj .tj-apart thead{border:0}
.tj .tj-apart th,.tj .tj-apart td{padding:12px;border:0;border-bottom:1px solid var(--tj-line);text-align:left;vertical-align:top;background:none;color:var(--tj-text)}
.tj .tj-apart th:first-child,.tj .tj-apart td:first-child{padding-left:0}
.tj .tj-apart thead th{padding-block:8px 10px;font:700 11px/1.3 var(--tj-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--tj-slate)}
.tj .tj-apart tbody tr:last-child td{border-bottom:0}
.tj .tj-apart td strong{font-weight:600;color:var(--tj-ink)}

/* the smart casual menu: pick one from each */
.tj-menu{border:1px solid var(--tj-ink);border-radius:var(--tj-r-lg);padding:clamp(28px,3.6vw,48px);display:flex;flex-direction:column;gap:32px}
.tj-menu-top{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.tj-body .tj-menu-title{font:400 clamp(26px,2.6vw,34px)/1.2 var(--tj-serif)}
.tj-menu-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:28px 32px}
.tj-menu-col{display:flex;flex-direction:column;border-top:2px solid var(--tj-ink)}
.tj-body .tj-menu-col .tj-label{padding:14px 0 6px}
.tj-body .tj-menu-col .tj-label em{font-style:normal;font-weight:600;color:var(--tj-slate)}
.tj .tj-menu-list{list-style:none;margin:0;padding:0}
.tj .tj-menu-list li{margin:0;padding:10px 0;border-bottom:1px solid var(--tj-line);font:400 17px/1.4 var(--tj-serif)}
.tj .tj-menu-list li:last-child{border-bottom:0}
.tj-body .tj-menu-rule{padding:16px 20px;border-left:3px solid var(--tj-brass);background:var(--tj-fog-2);font-size:16px}
.tj-body .tj-menu-rule strong{font-weight:600}
.tj-body .tj-seen.is-no .tj-chip{display:inline-flex;align-items:center;gap:6px;background:var(--tj-fog)}
.tj-body .tj-seen.is-no .tj-chip::before{content:"";flex:none;width:14px;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2387683A' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/contain no-repeat}

/* a section's opening with a button beside it */
.tj-headrow{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 40px}

/* the wardrobe checklist; its last line (no piece in bold) is the stylist */
.tj-listhead{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px}
.tj-body .tj-listhead p{margin:0;font:700 12px/1.3 var(--tj-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--tj-slate)}
.tj-body .tj-listhead p + p{color:var(--tj-brass-ink)}
.tj .tj-checklist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(440px,100%),1fr));gap:0 40px;border-top:1px solid var(--tj-ink)}
.tj .tj-checklist li{position:relative;margin:0;padding:18px 64px 18px 38px;border-bottom:1px solid var(--tj-line);font-size:14px;line-height:1.5;color:var(--tj-text)}
.tj .tj-checklist li::before{content:"";position:absolute;left:0;top:21px;width:22px;height:22px;box-sizing:border-box;border:1.5px solid var(--tj-ink);border-radius:5px}
.tj .tj-checklist strong{font:400 19px/1.4 var(--tj-serif);color:var(--tj-ink)}
.tj .tj-checklist em{display:inline-block;margin-left:8px;padding:3px 10px;border-radius:999px;background:var(--tj-ink);color:var(--tj-lift);font:normal 700 11px/1.3 var(--tj-sans);letter-spacing:.1em;text-transform:uppercase;vertical-align:3px}
.tj-body .tj-checklist a{position:absolute;right:0;top:21px;font-size:13px;font-weight:700;color:var(--tj-brass-ink);text-decoration:none}
.tj .tj-checklist li:not(:has(strong)){padding-right:0;font-size:15px}
.tj .tj-checklist li:not(:has(strong))::before{content:"★";border:0;top:17px;text-align:center;font-size:16px;color:var(--tj-brass-ink)}
.tj-body .tj-checklist li:not(:has(strong)) a{position:static;font-size:inherit;font-weight:600;color:var(--tj-ink);text-decoration:underline;text-underline-offset:3px}

/* the fit: four points along a line */
.tj .tj-fitline{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:28px 0;counter-reset:fit}
.tj .tj-fitline li{counter-increment:fit;margin:0;padding-right:24px;display:flex;flex-direction:column;gap:10px;font-size:15px;color:var(--tj-text);background:linear-gradient(var(--tj-brass),var(--tj-brass)) left 19px/100% 2px no-repeat}
.tj .tj-fitline li::before{content:counter(fit);width:40px;height:40px;border-radius:999px;background:var(--tj-ink);color:#fff;display:flex;align-items:center;justify-content:center;font:700 14px/1 var(--tj-sans)}
.tj .tj-fitline strong{font:400 21px/1.3 var(--tj-serif);color:var(--tj-ink)}

/* a path of steps on black; the step with an <em> is the answer */
.tj .tj-path{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:14px;counter-reset:path}
.tj .tj-path li{counter-increment:path;margin:0;padding:24px;display:flex;flex-direction:column;gap:10px;border:1px solid var(--tj-ink-line);border-radius:var(--tj-r);font-size:15px;color:var(--tj-on-ink)}
.tj .tj-path li::before{content:counter(path,decimal-leading-zero) " →";font:700 12px/1.3 var(--tj-sans);letter-spacing:.14em;color:var(--tj-lift)}
.tj-body .tj-path strong{font:400 21px/1.3 var(--tj-serif);color:#fff}
.tj .tj-path li:has(em){background:var(--tj-lift);border-color:var(--tj-lift);color:var(--tj-ink)}
.tj .tj-path li:has(em)::before{display:none}
.tj .tj-path em{font:normal 700 12px/1.3 var(--tj-sans);letter-spacing:.14em;color:var(--tj-ink)}
.tj-body .is-ink .tj-path li:has(em) strong{color:var(--tj-ink)}

@media (max-width:760px){
  .tj-tapeopen{padding-top:36px;gap:32px}
  .tj-sec.tj-sub{padding-block:24px 56px}
  .tj-ticket-head{padding:16px 22px}
  .tj .tj-ticket-rows{padding:4px 22px 10px}
  .tj .tj-ticket-rows li{padding-left:0}
  .tj .tj-ticket-rows em{position:static;display:block;margin-bottom:4px}
  .tj-menu{padding:24px}
  /* the ladder: each row a card, its tie and jacket as tags */
  .tj .tj-codetable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tj .tj-codetable tr{display:flex;flex-wrap:wrap;gap:8px 6px;padding:16px 18px;border-bottom:1px solid var(--tj-line)}
  .tj .tj-codetable tbody tr:last-child{border-bottom:0}
  .tj .tj-codetable tr:has(td:first-child em){background:var(--tj-ink);border-bottom-color:var(--tj-ink)}
  .tj .tj-codetable tr td:nth-child(n),.tj .tj-codetable tr:has(td:first-child em) td{display:block;width:auto;padding:0;border:0;background:none}
  .tj .tj-codetable td:first-child,.tj .tj-codetable td:nth-child(2){flex:0 0 100%}
  .tj .tj-codetable tr td:nth-child(3),.tj .tj-codetable tr td:nth-child(4),.tj .tj-codetable tr:has(td:first-child em) td:nth-child(3),.tj .tj-codetable tr:has(td:first-child em) td:nth-child(4){padding:4px 12px;border-radius:999px;background:var(--tj-fog);font-size:13px;line-height:1.4}
  .tj .tj-codetable tr:has(td:first-child em) td:nth-child(3),.tj .tj-codetable tr:has(td:first-child em) td:nth-child(4){background:var(--tj-ink-line)}
  .tj .tj-codetable td:nth-child(3)::before{content:"Tie · ";font-weight:600}
  .tj .tj-codetable td:nth-child(4)::before{content:"Jacket · ";font-weight:600}
  .tj .tj-checklist li{padding-right:56px}
}

/* ===== The Guide: casual dress code ===== */
/* the opening: one word set huge and pale behind the title and the photo, like the footer's "Tramps the Store" */
.tj-wordopen{position:relative;max-width:var(--tj-w);margin-inline:auto;padding:24px var(--tj-gut) 0;overflow:hidden}
.tj-word{display:block;font:italic 400 clamp(120px,22vw,316px)/.95 var(--tj-serif);letter-spacing:-.03em;color:#F1EEE8;white-space:nowrap;user-select:none;pointer-events:none}
.tj-wordopen-row{position:relative;margin-top:clamp(-150px,-9vw,-24px);display:flex;flex-wrap:wrap;gap:36px 56px;align-items:flex-end}
.tj-wordopen-words{flex:1 1 520px;display:flex;flex-direction:column;gap:22px;padding-bottom:8px}
.tj-wordopen.is-nopic .tj-wordopen-words{max-width:820px}
.tj-wordopen h1{margin:0;font:400 clamp(36px,4.6vw,62px)/1.08 var(--tj-serif);letter-spacing:-.01em}
.tj-wordopen h1 em{color:var(--tj-brass-ink)}
.tj-wordopen-pic{flex:1 1 400px;max-width:560px;margin:0;aspect-ratio:4/3;position:relative;border-radius:var(--tj-r);overflow:hidden;background:#2A2925}
.tj .tj-wordopen-pic img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}

/* where casual sits: a scale from more dressed to more relaxed; the item with an <em> is this guide's */
.tj-slider-wrap{display:flex;flex-direction:column;gap:6px}
.tj-slider-ends{display:flex;justify-content:space-between;gap:16px}
.tj-body .tj-slider-ends p{margin:0;font:700 11px/1.3 var(--tj-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--tj-slate)}
.tj .tj-slider{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 2fr 2fr 1fr;background:linear-gradient(var(--tj-ink),var(--tj-ink)) 0 13px/100% 1px no-repeat}
.tj .tj-slider li{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;font:400 15px/1.3 var(--tj-serif);color:var(--tj-ink)}
.tj .tj-slider li:first-child{align-items:flex-start;text-align:left}
.tj .tj-slider li:last-child{align-items:flex-end;text-align:right}
.tj .tj-slider li::before{content:"";width:12px;height:12px;margin-block:7px;box-sizing:border-box;border:2px solid var(--tj-ink);border-radius:999px;background:var(--tj-paper)}
.tj .tj-slider li:has(em)::before{width:22px;height:22px;margin-block:2px;border:0;background:var(--tj-brass);box-shadow:0 0 0 6px #F4EBDD}
.tj .tj-slider em{font-style:normal;font-size:18px;color:var(--tj-brass-ink)}

/* four parts of an outfit */
.tj-parts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:16px}
.tj-part{background:var(--tj-paper);border-radius:var(--tj-r);padding:26px;display:flex;flex-direction:column;gap:14px}
.tj-part-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.tj-part .tj-dots{gap:4px}
.tj-part .tj-dots i{width:18px;height:18px}
.tj-body .tj-part h3{font:400 26px/1.2 var(--tj-serif)}
.tj .tj-part-list{list-style:none;margin:0;padding:0;font-size:15px;color:var(--tj-text)}
.tj .tj-part-list li{margin:0;padding:9px 0;border-top:1px solid var(--tj-line)}
.tj-body .tj-part-go{margin-top:auto}
.tj-body p.tj-part-go a{font-size:13px;font-weight:700;color:var(--tj-brass-ink);text-decoration:none}

/* swap one piece: casual to smart casual */
.tj-ticketrow .tj-swapbox{flex:2 1 560px;min-width:0;border:1px solid var(--tj-ink);border-radius:var(--tj-r-lg);padding:clamp(26px,3.4vw,40px)}
.tj .tj-swap{margin:0}
.tj .tj-swap table{width:100%;margin:0;border:0;border-collapse:collapse;table-layout:fixed}
.tj .tj-swap thead{border:0}
.tj .tj-swap th,.tj .tj-swap td{padding:16px 0;border:0;border-top:1px solid var(--tj-line);text-align:left;vertical-align:middle;background:none;font:400 19px/1.35 var(--tj-serif);color:var(--tj-ink)}
.tj .tj-swap td:first-child{position:relative;padding-right:52px}
.tj .tj-swap td:first-child::after{content:"→";position:absolute;right:14px;top:50%;transform:translateY(-50%);font:400 22px/1 var(--tj-sans);color:var(--tj-brass)}
.tj .tj-swap thead th{border-top:0;padding:0 0 12px;font:700 11px/1.3 var(--tj-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--tj-slate)}
.tj .tj-swap thead th + th{color:var(--tj-brass-ink)}
.tj-body .tj-swap-say{font:400 24px/1.35 var(--tj-serif);color:#fff}
.tj-body .tj-swap-say em{color:var(--tj-lift)}
.tj-sec.tj-sub-first{padding-top:24px}

/* yes, only if, no */
.tj-lights{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:16px}
.tj-light{border-radius:var(--tj-r);padding:26px;display:flex;flex-direction:column;gap:14px;background:var(--tj-paper);border:1px solid var(--tj-line)}
.tj-light.is-if{background:var(--tj-fog-2);border:1px dashed var(--tj-brass)}
.tj-light.is-no{background:var(--tj-ink);border-color:var(--tj-ink);color:#fff}
.tj-body .tj-light-label{display:flex;align-items:center;gap:12px;font:700 11px/1.3 var(--tj-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--tj-slate)}
.tj-body .tj-light-label::before{content:"";flex:none;width:34px;height:34px;box-sizing:border-box;border-radius:999px;background:center/20px no-repeat}
.tj-body .is-yes .tj-light-label::before{background-color:var(--tj-brass);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.tj-body .is-if .tj-light-label::before{content:"?";display:flex;align-items:center;justify-content:center;border:2px solid var(--tj-brass);font:800 15px/1 var(--tj-sans);color:var(--tj-brass-ink)}
.tj-body .is-no .tj-light-label{color:var(--tj-lift)}
.tj-body .is-no .tj-light-label::before{border:1px solid var(--tj-slate);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23CDB58A' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E")}
.tj-body .tj-light h3{font:400 24px/1.2 var(--tj-serif)}
.tj .tj-light-list{list-style:none;margin:0;padding:0;font-size:15px;color:var(--tj-text)}
.tj .tj-light-list li{margin:0;padding:8px 0;border-top:1px solid var(--tj-line)}
.tj .is-no .tj-light-list{color:var(--tj-on-ink)}
.tj .is-no .tj-light-list li{border-top-color:var(--tj-ink-line)}

/* a weekend, hour by hour, beside what "casual" means on an invitation */
.tj-weekend{display:flex;flex-wrap:wrap;gap:24px 40px;align-items:flex-start}
.tj .tj-timeline{flex:3 1 520px;list-style:none;margin:0;padding:0}
.tj .tj-timeline li{position:relative;margin:0;padding:18px 0 18px 144px;border-top:1px solid var(--tj-line);font-size:15px;line-height:1.5;color:var(--tj-text)}
.tj .tj-timeline li:first-child{border-top-color:var(--tj-brass)}
.tj .tj-timeline em{position:absolute;left:0;top:23px;font:normal 700 12px/1.3 var(--tj-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--tj-brass-ink)}
.tj .tj-timeline strong{display:block;margin-bottom:4px;font:400 21px/1.3 var(--tj-serif);color:var(--tj-ink)}
.tj-weekend .tj-whenbox{flex:2 1 340px}
.tj .tj-stack{list-style:none;margin:0;padding:0}
.tj .tj-stack li{margin:0;padding:16px 0;border-top:1px solid var(--tj-ink-line);font-size:15px;color:var(--tj-on-ink)}
.tj .tj-stack strong{display:block;margin-bottom:4px;font:400 20px/1.3 var(--tj-serif);color:#fff}
.tj-body .tj-stack a{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* the fit: four swing tags */
.tj-fittags{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:16px}
.tj-fittag{position:relative;background:var(--tj-paper);border:1px solid var(--tj-line);border-radius:var(--tj-r);padding:46px 24px 24px;display:flex;flex-direction:column;gap:10px}
.tj-fittag::before{content:"";position:absolute;top:16px;left:24px;width:12px;height:12px;box-sizing:border-box;border:1.5px solid var(--tj-brass);border-radius:999px}
.tj-fittag::after{content:"";position:absolute;top:21px;left:40px;right:24px;border-top:1px dashed var(--tj-ash)}
.tj-body .tj-fittag h3{font:400 22px/1.25 var(--tj-serif)}
.tj-body .tj-fittag p{font-size:15px;color:var(--tj-text)}

/* ten pieces: 4 x 3 x 3 = 36 */
.tj-sum{background:var(--tj-paper);border-radius:var(--tj-r-lg);padding:clamp(26px,3.4vw,44px);display:flex;flex-wrap:wrap;gap:20px 24px;align-items:stretch}
.tj-sum-col{flex:1 1 200px;display:flex;flex-direction:column;border-top:2px solid var(--tj-ink)}
.tj-body .tj-sum-col .tj-label{padding:14px 0 6px}
.tj-body .tj-sum-op{flex:0 0 auto;align-self:center;font:400 34px/1 var(--tj-serif);color:var(--tj-brass)}
.tj-sum-total{flex:1 1 180px;background:var(--tj-ink);border-radius:var(--tj-r);padding:24px;display:flex;flex-direction:column;justify-content:center;gap:4px}
.tj-body .tj-sum-total p{font-size:15px;color:var(--tj-on-ink)}
.tj-body .tj-sum-total .tj-sum-n{font:400 72px/1 var(--tj-serif);color:var(--tj-lift)}

/* crosses on black, in a grid */
.tj .tj-crosses.is-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:10px;color:var(--tj-on-ink)}

@media (max-width:760px){
  .tj-slider li{font-size:13px}
  .tj .tj-timeline li{padding-left:0}
  .tj .tj-timeline em{position:static;display:block;margin-bottom:6px}
  .tj .tj-swap th,.tj .tj-swap td{font-size:16px}
  .tj .tj-swap td:first-child{padding-right:36px}
  .tj .tj-swap td:first-child::after{right:8px}
  .tj-ticketrow .tj-swapbox{padding:22px}
  .tj-sum{padding:22px}
  .tj-body .tj-sum-op{flex-basis:100%;text-align:center;margin:-6px 0}
}