/* ==========================================================
   Phone / touch polish — loaded last on every page.
   Hit areas of 44px or more, no tap flash, no sticky hover (the
   hover rules themselves sit in @media (hover:hover)), press
   feedback on touch, and a calendar that fits a 360px screen.
   ========================================================== */
html{-webkit-tap-highlight-color:transparent}
a,button,[role="button"]{touch-action:manipulation}

/* line breaks that only exist on a phone: a break at a phrase boundary, so no line ends up with one or two characters */
.sp{display:none}

/* press feedback where there is no hover */
@media (hover:none){
  .btn--ink:active{background:var(--ember)}
  .cbtn:active::before{transform:none}
  .cbtn--line:active{color:var(--paper)}
  .rbtn:active{background:var(--ink);color:var(--paper)}
  .rfocus__nav button:active{background:var(--ink);color:#fff}
}

@media (max-width:860px){
  /* header: 54px row, so the hit areas stretch past the drawn shapes instead of growing them */
  .hdr__logo{padding:14px 0;margin:-14px 0}
  .hdr .btn{position:relative}
  .hdr .btn::after{content:"";position:absolute;inset:-5px -3px}
  .hdr__menu{width:44px;height:44px;margin-right:-3px}
  .hdr__menu i{left:12px;right:12px;transition:transform .45s var(--ease),top .45s var(--ease),bottom .45s var(--ease)}
  .hdr__menu i:first-child{top:17px}
  .hdr__menu i:last-child{bottom:17px}
  .hdr.is-open .hdr__menu i:first-child{top:21px;transform:rotate(45deg)}
  .hdr.is-open .hdr__menu i:last-child{bottom:21px;transform:rotate(-45deg)}

  /* small controls */
  .rooms__tabs button,.rcard__tabs button{min-height:44px;align-items:center}
  .rfocus__nav button{height:44px;min-width:44px}
  .sprog__back,.sr__retry,.vp__pager button{min-height:44px;display:inline-flex;align-items:center}
  .ftr__row a{display:inline-block;padding:12px 0;margin:-12px 0}

  /* chips, segmented control and style tabs keep their drawn size; the touch area grows around them */
  .chip,.seg button,.styles button{position:relative}
  .chip::after{content:"";position:absolute;inset:-6px -3px}
  .seg button::after,.styles button::after{content:"";position:absolute;inset:-5px 0}
  .styles{gap:12px 8px}

  /* Japanese lines: headings and short blocks balanced, long text without a one- or two-character last line */
  .sp{display:inline}
  h1,h2,h3,dd,.rcard__lead,.rfocus__d,.vlabel__jp{text-wrap:balance}
  p,li,.exp__p{text-wrap:pretty}

  /* the calendar's seven columns may shrink below their label width */
  .cal{grid-template-columns:repeat(7,minmax(0,1fr))}
  .cal__h{padding:8px 0;text-align:center;letter-spacing:0}
}

/* narrow phones: the big phrase on the hero is 34px at the smallest; let it shrink so "絵画ではありません。" stays on one line */
@media (max-width:480px){
  .phrase__jp{font-size:clamp(28px,8.4vw,34px)}
}

/* phone held sideways: the title block becomes one low row so the painting keeps room above it */
@media (max-width:860px) and (max-height:520px) and (orientation:landscape){
  .hero__intro{grid-template-columns:auto 1fr;column-gap:3vw}
  .hero__kicker{margin-bottom:2px}
  .hero__title{font-size:clamp(36px,11vh,52px)}
  .hero__meta{flex-direction:row;align-items:flex-end;gap:16px;padding-bottom:6px}
  .hero__when{align-items:flex-end;text-align:right}
  .tomb{width:200px}
}