/* The look of the home page, laid over every inner page (after jimmychin.com):
   white paper, black ink, Pathway Gothic One for headings in wide capitals, Barlow for text,
   the name in Tassilo's own hand on top, CONTACT on the left, MENU on the right.
   Loaded after each page's own styles; theme.js builds the top bar and the menu. */
:root{
  --bg:#fff;--bg-2:#f3f3f1;--ink:#000;--muted:rgba(0,0,0,.56);--line:rgba(0,0,0,.14);
  --rust:#000;--rust-deep:#000;--green:#000;--green-ink:#fff;--brown:#444;
  --serif:'Barlow','FF DIN',-apple-system,Helvetica,Arial,sans-serif;
  --sans:'Barlow','FF DIN',-apple-system,Helvetica,Arial,sans-serif;
  --display:'Pathway Gothic One','Univers LT Pro','Arial Narrow',sans-serif;
  --th-top:52px;--th-edge:40px
}
html body{background:#fff;color:#000;font-family:var(--sans);font-weight:400;padding-top:120px}
/* everything below up to the bar only touches pages without their own design */
body ::selection{background:#000;color:#fff}

/* the old bars go */
body > .topbar,body > header:has(nav[aria-label="Main"]),header:has(#navtoggle),.ig-float{display:none !important}

/* the live ribbon of the About page sits under the top bar instead of behind it */
body .livebar{position:relative !important;top:auto !important}

/* text over a photograph stays light */
body .hero:has(.hero-bg) .eyebrow,body .hero:has(.hero-bg) p,body .hero .hero-cue,body .hero .hero-ig{color:rgba(255,255,255,.86) !important}
body .hero:has(.hero-bg) h1,body .hero:has(.hero-bg) h1 em{color:#fff !important}
body .hero-cta{background:#fff !important;color:#000 !important;border-radius:0}
body h1 em,body h2 em,body h1 i,body h2 i{font-style:normal}

/* headings in the big face */
body:not(.th-own) h1,body:not(.th-own) h2,body:not(.th-own) .display{font-family:var(--display) !important;font-weight:400 !important;text-transform:uppercase;
  letter-spacing:.12em;line-height:1.08;color:#000}
body:not(.th-own) h1{font-size:clamp(40px,5.4vw,78px) !important}
body:not(.th-own) h2{font-size:clamp(28px,3.4vw,46px) !important}
body:not(.th-own) h3{font-family:var(--sans);font-weight:500;letter-spacing:.01em}
body:not(.th-own) .eyebrow,body:not(.th-own) .kicker,body:not(.th-own) .label{font-family:var(--sans) !important;font-weight:500;font-size:12px !important;
  letter-spacing:.1em !important;text-transform:uppercase;color:var(--muted) !important}
body:not(.th-own) p,body:not(.th-own) li{font-family:var(--sans)}
body a{color:inherit}
body a:focus-visible,body button:focus-visible{outline:1px solid #000;outline-offset:4px}
body em,body i{font-style:italic}

/* buttons: black on white, no colour */
body:not(.th-own) .cta,body:not(.th-own) .btn,body:not(.th-own) .button{background:#000 !important;color:#fff !important;border-radius:0 !important;font-family:var(--sans) !important;
  font-weight:500;letter-spacing:.1em;text-transform:uppercase}
body:not(.th-own) .cta:hover,body:not(.th-own) .btn:hover,body:not(.th-own) .button:hover{background:#333 !important}
body:not(.th-own) .cta-ghost{color:#000 !important;border-bottom:1px solid #000 !important}

/* the top bar */
.th-tl,.th-tr{position:absolute;z-index:60;top:var(--th-top);display:flex;align-items:center;gap:20px;color:#000;
  font-family:var(--sans);font-weight:500;font-size:16px;line-height:1;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;background:none;border:0;padding:0;cursor:pointer;transition:opacity .2s}
.th-tl{left:0}.th-tr{right:0}
.th-tl::before{content:"";width:var(--th-edge);height:1px;background:#000}
.th-tl:hover,.th-tr:hover{opacity:.6}
.th-burger{display:flex;flex-direction:column;gap:5px;width:var(--th-edge)}
.th-burger i{display:block;height:1px;background:#000}
.th-mark{position:absolute;z-index:60;top:calc(var(--th-top) - 3px);left:50%;transform:translateX(-50%);line-height:0}
.th-mark img{display:block;width:clamp(220px,22vw,330px);height:auto;filter:invert(1)}
.th-band{display:none}

/* the menu: a white veil, the pages in one line */
.th-veil{position:fixed;inset:0;z-index:70;background:rgba(255,255,255,.94);opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.th-nav{position:fixed;z-index:80;top:calc(var(--th-top) - 2px);right:var(--th-edge);display:flex;align-items:center;
  font-family:var(--sans);font-weight:500;font-size:16px;line-height:1;letter-spacing:.1em;text-transform:uppercase;
  opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
html.th-open .th-veil,html.th-open .th-nav{opacity:1;visibility:visible;transition:opacity .3s}
html.th-open .th-tr,html.th-open .th-mark,html.th-open .th-tl{opacity:0;pointer-events:none}
.th-nav ul{display:flex;list-style:none;margin:0;padding:0}
.th-nav li{margin:0}
.th-nav li+li::before{content:"/";padding:0 13px;opacity:.8}
.th-nav a{text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px}
.th-nav a:hover,.th-nav a[aria-current]{border-bottom-color:#000}
.th-x{margin-left:21px;width:18px;height:18px;position:relative;background:none;border:0;cursor:pointer;padding:0}
.th-x::before,.th-x::after{content:"";position:absolute;left:-2px;right:-2px;top:50%;height:1px;background:#000;transform:rotate(45deg)}
.th-x::after{transform:rotate(-45deg)}
.th-langs{display:flex;gap:10px;margin-left:34px;font-size:12px}
.th-langs a,.th-langs span{opacity:.6;text-decoration:none}
.th-langs span[aria-current],.th-langs a:hover{opacity:1}

@media(max-width:900px){
  :root{--th-top:30px;--th-edge:24px}
  html body{padding-top:110px}
  .th-mark{top:calc(var(--th-top) + 32px)}
  .th-mark img{width:min(74vw,300px)}
  .th-nav{left:0;right:0;top:0;bottom:0;padding:96px 24px;flex-direction:column;align-items:flex-start;overflow-y:auto}
  .th-nav ul{flex-direction:column}
  .th-nav li{font-size:22px;margin:0 0 21px}
  .th-nav li+li::before{display:none}
  .th-x{position:fixed;top:var(--th-top);right:var(--th-edge);margin:0}
  .th-langs{margin:13px 0 0}
}
@media(prefers-reduced-motion:reduce){.th-veil,.th-nav{transition:none}}

/* journeys and writing: cards and photographs without frames, titles in the big face but smaller */
body .card img,body .ph img{border:0 !important;border-radius:0 !important;background:#eee !important}
body .card h2,body li h2,body a h2{font-size:clamp(22px,2.1vw,30px) !important;letter-spacing:.1em !important;line-height:1.15}
body .more,body .namebtn{border-radius:0 !important;border-color:#000 !important;color:#000 !important;font-family:var(--sans) !important;font-weight:500}
body .fn{border-radius:0 !important;background:rgba(0,0,0,.6) !important}

/* pages that bring their own design (About) take only the bar; on a dark cover it is white */
body.th-light .th-tl,body.th-light .th-tr{color:#fff}
body.th-light .th-tl::before,body.th-light .th-burger i{background:#fff}
body.th-light .th-mark img{filter:drop-shadow(0 1px 10px rgba(0,0,0,.5))}
body.th-light .th-tl,body.th-light .th-tr{text-shadow:0 1px 12px rgba(0,0,0,.4)}
html body.th-own{padding-top:0}
html.th-open body.th-light .th-tr{color:#000}