/* Tea Room page: styles only this page needs. Shared look comes from c.css. */

/* Hero: words first, on plain paper, in an editorial split: the title large on the left, the intro and buttons on the right.
   Then the break-room painting on its own, wide, with every edge dissolving into the paper like the other pages' pictures. */
.tr-hero{display:flex;flex-direction:column-reverse}
.tr-hero-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:end;padding-top:clamp(150px,13vw,200px)}
.tr-hero-text{display:contents}
.tr-hero .f-hero-premise{grid-column:1 / -1;margin:0 0 clamp(20px,2vw,28px)}
.tr-title{grid-column:1 / span 7;margin:0;padding-right:24px;font:300 clamp(46px,5.4vw,80px)/1.04 var(--serif);letter-spacing:-.04em;color:#1b3832;text-wrap:balance}
.tr-lede{grid-column:8 / -1;grid-row:2;margin:0;font:400 19px/1.6 var(--sans);letter-spacing:0;color:var(--deep);text-wrap:pretty}
.tr-actions{grid-column:8 / -1;display:flex;flex-wrap:wrap;gap:12px 14px;margin-top:28px}
.tr-actions .f-btn{min-height:50px;padding:0 20px;font-size:14.5px}
/* The painting as a wide strip under the words, edges dissolving into the paper (its own paper melts into ours). */
.tr-hero-art{position:relative;width:min(1440px,100%);margin:clamp(40px,4vw,64px) auto 0}
.tr-hero-art picture{mix-blend-mode:multiply}
.tr-hero-art picture,.tr-hero-art img{display:block;width:100%}
.tr-hero-art img{height:auto;aspect-ratio:2.35;object-fit:cover;object-position:80% 55%;-webkit-mask-image:linear-gradient(to right,transparent,#000 10%,#000 92%,transparent),linear-gradient(transparent,#000 14%,#000 82%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 10%,#000 92%,transparent),linear-gradient(transparent,#000 14%,#000 82%,transparent);mask-composite:intersect}
@media (prefers-reduced-motion:no-preference){
  html.js .tr-hero .f-hero-premise,html.js .tr-title,html.js .tr-lede,html.js .tr-actions{animation:f-rise 1.1s var(--ease) both}
  html.js .tr-title{animation-delay:.06s}
  html.js .tr-lede{animation-delay:.2s}
  html.js .tr-actions{animation-delay:.28s}
  html.js .tr-hero-art picture{animation:tr-fade 1.8s var(--ease) .25s both}
  html.js .tr-hero-art .f-wide-tag{animation:f-rise 1s var(--ease) 1.1s both}
}
@keyframes tr-fade{0%{opacity:0;transform:translateY(14px)}}
@media (max-width:1100px){
  .tr-title,.tr-lede,.tr-actions{grid-column:1 / -1;grid-row:auto}
  .tr-title{padding-right:0}
  .tr-lede{max-width:560px;margin-top:24px}
}
@media (max-width:960px){
  .tr-hero-grid{padding-top:136px}
  .tr-hero-art img{aspect-ratio:auto;-webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent),linear-gradient(transparent,#000 10%,#000 88%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent),linear-gradient(transparent,#000 10%,#000 88%,transparent);mask-composite:intersect}
}
@media (max-width:760px){
  .tr-title{font-size:clamp(40px,11.5vw,56px);line-height:1.06}
  .tr-lede{font-size:18px}
  .tr-actions{display:grid;gap:12px}
  .tr-actions .f-btn{width:100%;min-height:52px;font-size:15px}
  .tr-hero-art{margin-top:24px}
}

/* Section 2 (id="reads"): the reads, as the Digital Home Section 5 rows (c.css .f-todo-* rows, Digital Home row spacing):
   title left in the serif, the short line in the middle, the cuppa rating on the right: small and quiet, because it is not a price.
   A quiet "Coming soon" sits under the rating until the read is live. */
.tr-reads{margin-top:var(--section);scroll-margin-top:88px}
.tr-reads-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.tr-reads-intro{grid-column:1 / span 6;max-width:600px}
.tr-reads-intro h2{margin:0 0 24px;font:300 clamp(34px,3.5vw,50px)/1.1 var(--serif);letter-spacing:-.035em;color:var(--deep);text-wrap:balance}
.tr-reads-intro p{margin:0;font-size:18px;line-height:1.75;color:var(--body);text-wrap:pretty}
/* The cuppa note: small and quiet, like the small print. #6b716d is the lightest grey that still passes AA contrast on the paper. */
.tr-reads-intro .tr-reads-note{margin-top:12px;font-size:14px;line-height:1.6;color:var(--small-print)}
.tr-read-rows{margin-top:clamp(48px,5vw,64px)}
.tr-read-rows .f-todo-row{padding:28px 0}
.tr-read-rows .f-todo-what{text-wrap:pretty}
.tr-nowrap{white-space:nowrap}
.tr-read-meta{justify-self:end;display:grid;justify-items:end;gap:4px;text-align:right;font:400 14px/1.4 var(--sans);color:var(--quiet);white-space:nowrap}
.tr-read-soon{font-style:normal}
@media (max-width:960px){
  .tr-reads-intro{grid-column:1 / -1}
  .tr-read-meta{grid-column:1 / -1;justify-self:start;justify-items:start;text-align:left;margin-top:12px}
}
@media (max-width:760px){
  .tr-reads-intro p{font-size:17px}
  .tr-read-rows{margin-top:36px}
  .tr-read-rows .f-todo-row{padding:22px 0}
  .tr-read-meta{margin-top:10px}
}

/* Read titles are links: the same highlighter as the nav and body links. The low band draws in on hover and keyboard focus. */
.tr-read-link{color:var(--deep);text-decoration:none;transition:color .2s}
.tr-read-title{padding:0 2px;margin:0 -2px;border-radius:3px;background:linear-gradient(var(--teal-soft),var(--teal-soft)) no-repeat 0 100%/100% 0;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size .25s var(--ease)}
.tr-read-link:hover,.tr-read-link:focus-visible{color:var(--teal-ink)}
.tr-read-link:hover .tr-read-title,.tr-read-link:focus-visible .tr-read-title{background-size:100% 38%}

/* Date column (6 Oct): small and quiet at the start of each row, so the rows still read title first.
   The whole row is the link. On hover the title takes the highlighter and the hand-drawn arrow slides in at the end. */
.tr-read-rows .tr-read-row{position:relative;grid-template-columns:104px minmax(0,1fr) minmax(0,1.2fr) 150px 28px;padding:34px 0}
.tr-read-date{font:500 13px/1.4 var(--sans);font-variant-numeric:tabular-nums;color:var(--quiet);white-space:nowrap}
.tr-read-link::after{content:"";position:absolute;inset:0}
.tr-read-row:hover .tr-read-title{background-size:100% 38%}
.tr-read-row:hover .tr-read-link{color:var(--teal-ink)}
.tr-read-row .f-todo-what{transition:color .2s}
.tr-read-row:hover .f-todo-what{color:var(--ink)}
.tr-read-meta{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.tr-cups{display:inline-flex;gap:1px;color:var(--teal)}
.tr-cups svg{width:19px;height:15px}
.tr-read-go{justify-self:end;align-self:center;width:24px;height:14px;color:var(--teal-ink);opacity:0;transform:translateX(-8px);transition:opacity .25s,transform .3s var(--ease)}
.tr-read-row:hover .tr-read-go{opacity:1;transform:none}
@media (max-width:960px){
  .tr-read-rows .tr-read-row{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);padding:28px 0}
  .tr-read-date{grid-column:1 / -1;margin-bottom:8px}
  .tr-read-meta{flex-direction:row;align-items:center;gap:8px}
  .tr-read-go{display:none}
}
@media (max-width:760px){
  .tr-read-rows .tr-read-row{grid-template-columns:1fr;padding:22px 0}
}

/* Gate 6 Oct (Simon): no fade from invisible. */
@keyframes tr-fade{0%{transform:translateY(14px)}}