@import url('https://fonts.googleapis.com/css2?family=Yuji+Boku&display=swap');
:root{--ink:#32241f;--red:#923e30;--paper:#fff4df;--line:#dec8a4;--night:#20233e;--heading:"Yuji Boku","Yu Mincho",serif}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.7 var(--heading)}h1,h2,h3,.logo{font-family:var(--heading);line-height:1.14;font-weight:400;margin:0}a{color:inherit;text-decoration:none}button,input{font:inherit}button,a,input{outline-offset:5px}button{cursor:pointer}header,footer{padding:14px max(5vw,calc((100vw - 1280px)/2));display:flex;align-items:center;gap:28px;background:#221f34;color:#fff3dc}header{border-bottom:3px solid #cf9e65;position:relative;z-index:2}.logo{font-size:32px;white-space:nowrap}.mark{color:#ffbd6d;font-size:16px}nav{display:flex;gap:22px;margin-left:auto;white-space:nowrap}nav a[aria-current]{color:#ffbf75;text-decoration:underline;text-underline-offset:8px}form{display:flex;border:1px solid #88728d;background:#353149}form input{width:155px;padding:6px 10px;color:#fff4e0;border:0;background:none}form input::placeholder{color:#dbcbce}form button{background:none;border:0;color:#ffc384;font-size:23px;padding:0 9px}.skip,.sr{position:absolute;left:-10000px}.skip:focus{left:10px;top:10px;z-index:4;background:white}.hero{position:relative;isolation:isolate;overflow:hidden;background:#22243d;color:#fff3de;min-height:470px;display:grid;align-items:center}.wrap{width:min(90%,1200px);margin-inline:auto}.hero .wrap{padding:60px 0}.kicker{font-size:12px;font-weight:700;letter-spacing:.23em;color:#9a4d37}.hero .kicker{color:#ffc881}h1{font-size:clamp(44px,7vw,84px)}.hero p{max-width:370px;color:#fae0c9;font-size:17px;margin:20px 0 27px}.button{display:inline-block;background:var(--red);color:#fff8e8;padding:11px 21px;border:2px solid #f5d3a3;box-shadow:3px 3px #542c28;font-weight:700}.button:hover{background:#a74c35}.block{padding:44px 0 54px}.block+.block{border-top:1px dashed var(--line)}h2{font-size:clamp(31px,4vw,48px)}h3{font-size:25px}.section-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:22px}.section-head p{margin:5px 0 0}.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.dish,.tile,.topic{display:block;background:#fff9ed;border:1px solid #d6b894;box-shadow:3px 3px #e5c9a2}.dish:hover,.tile:hover,.topic:hover{border-color:#a65a40;box-shadow:4px 4px #bc8060}.art{height:150px;background:var(--tint,#edd1a4);display:grid;place-items:center}.art svg{width:min(85%,200px);height:100%;max-height:150px}.body,.tile,.topic{padding:15px}.body small,.muted,.crumb{color:#6e5145}.body p{font-size:14px;margin:6px 0 0}.tile span{display:block;color:var(--red);font-size:12px;letter-spacing:.13em}.tile h3{margin:6px 0}.pagehead{padding:30px 0;border-bottom:1px solid var(--line);background:#f4e5ca}.pagehead h1{font-size:clamp(37px,6vw,65px);margin:12px 0}.crumb a{text-decoration:underline;text-underline-offset:4px}.chips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px}.chip{background:#fff9ec;padding:5px 11px;border:1px solid #d8bd9a;color:#664138}.chip[aria-pressed=true]{background:#82382a;color:white}.details{display:grid;grid-template-columns:minmax(240px,1fr) 1.45fr;gap:32px;align-items:start}.details .art{height:300px;border:1px solid var(--line)}.details .art svg{width:90%;max-height:260px}.details h2{font-size:29px;margin-top:18px}.details p{margin:8px 0 16px}.details article{background:#fff9ed;border:1px solid var(--line);padding:20px 25px}.details article h2:first-child{margin-top:0}.more{color:var(--red);font-weight:700;text-decoration:underline;text-underline-offset:4px}.empty{padding:24px;border:1px dashed var(--line)}footer{margin-top:25px;flex-wrap:wrap}footer b{font-family:var(--heading);font-size:25px}footer a{margin-left:auto}@media(max-width:820px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}header{gap:14px;flex-wrap:wrap}nav{gap:14px}form{width:100%}form input{width:100%}}@media(max-width:565px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.details{grid-template-columns:1fr}.details .art{height:190px}.art{height:108px}.hero{min-height:395px}.logo{font-size:24px}nav{font-size:12px;gap:10px}.body,.tile{padding:10px}.body h3,.tile h3{font-size:21px}}
.placeholder{position:relative;overflow:hidden;background-color:var(--tint);background-image:conic-gradient(#fff2 25%,transparent 0 50%,#fff2 0 75%,transparent 0);background-size:20px 20px}.placeholder span{display:grid;place-items:center;width:68px;height:68px;border:2px solid #67443480;box-shadow:4px 4px #67443430;background:#fff4df90;color:#674434;font:36px var(--heading);clip-path:polygon(8% 0,92% 0,92% 8%,100% 8%,100% 92%,92% 92%,92% 100%,8% 100%,8% 92%,0 92%,0 8%,8% 8%)}.details .placeholder span{width:110px;height:110px;font-size:56px}

body,
.pagehead {
  background-image:
    url("asanoha.svg"),
    repeating-linear-gradient(0deg, #7753330b 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, #fff8 0 1px, #77533308 1px 2px, transparent 2px 4px);
}
body {
  background-color: #f5e8d0;
}
.pagehead {
  background-color: #eddbc0;
}

/* Fabric signs for the main categories. */
.shop {
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 0;
  background: #fcf0d7;
  border: 1px solid #b8956d;
  box-shadow: 3px 3px #67443426;
}
.shop:hover, .shop:focus-visible { border-color: #82512f; box-shadow: 4px 5px #67443445; }
.noren {
  position: relative;
  height: 116px;
  overflow: hidden;
  padding: 13px 10px 7px;
  background: repeating-linear-gradient(90deg, #2b1e20 0 16px, #352421 16px 18px);
  border-bottom: 3px solid #ac7744;
}
.rod {
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 5px;
  right: 5px;
  height: 7px;
  background: linear-gradient(#edbf84 0 2px,#a96c3b 2px 5px,#653c28 5px);
  border-inline: 4px solid #e1a96d;
  box-shadow: 0 2px #261a1d;
}
.curtain {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  height: 100%;
  transition: transform 150ms steps(3);
}
.curtain i {
  display: block;
  height: 100%;
  border-top: 5px solid #ffffff20;
  border-inline: 2px solid #0002;
  border-bottom: 4px double #ffffff55;
  background:
    repeating-linear-gradient(0deg,#fff0 0 2px,#fff1 2px 3px),
    repeating-linear-gradient(90deg,#0000 0 3px,#0002 3px 4px),
    linear-gradient(90deg,#0002,transparent 25%,#fff1 64%,#0002),
    var(--cloth);
}
.curtain i:nth-child(2) { height: calc(100% + 2px); }
.shop-seal {
  position: absolute;
  display: grid;
  place-items: center;
  left: 50%;
  top: 53%;
  transform: translate(-50%,-50%);
  width: 54px;
  height: 54px;
  border: 3px double var(--thread);
  outline: 1px dashed var(--thread);
  outline-offset: 3px;
  background: var(--cloth);
  color: var(--thread);
  font: 32px/1 var(--heading);
  box-shadow: 3px 3px #0003;
}
.shop:hover .curtain, .shop:focus-visible .curtain { transform: translateY(-4px); }
.shop:hover .noren, .shop:focus-visible .noren { background: linear-gradient(#291e20 60%,#ffbf70); }
.shop-plaque { flex: 1; position: relative; padding: 10px 30px 14px 13px; }
.shop-plaque h3 { margin: 2px 0 6px; overflow-wrap: anywhere; }
.shop-plaque p { margin: 0; color: #624539; font-size: 14px; }
.shop-meta { color: #864631; font-size: 12px; letter-spacing: .08em; }
.shop-arrow { position: absolute; right: 9px; bottom: 11px; color: #864631; font-size: 19px; }
@media(max-width:565px) {
  .noren { height: 91px; padding-inline: 6px; }
  .shop-seal { width: 40px; height: 40px; font-size: 24px; }
  .shop-plaque { padding: 8px 22px 10px 9px; }
  .shop-plaque h3 { font-size: 20px; }
  .shop-plaque p { font-size: 13px; }
  .shop-arrow { right: 5px; }
}
@media(prefers-reduced-motion: reduce) { .curtain { transition: none; } }

/* Let fabric, wood and paper define the edges of the directory. */
:root {
  --ink: #302820;
  --red: #883d32;
}
body {
  background-color: #f6ecd9;
  background-size: 144px auto, auto, auto;
}
header {
  border-bottom: 0;
  padding-block: 19px;
}
nav a[aria-current] {
  text-decoration: none;
  border-bottom: 1px solid #ce9561;
}
header form {
  background: transparent;
  border: 0;
  border-bottom: 1px solid #9c827b;
}
.hero .button {
  border: 0;
  border-left: 3px solid #d49c6b;
  box-shadow: none;
  padding-inline: 19px 23px;
}
.block {
  padding-block: 60px 66px;
}
.block+.block {
  border-top: 1px solid #a778594a;
}
.section-head {
  margin-bottom: 32px;
}
.section-head h2::before {
  content: "";
  display: block;
  width: 1.4rem;
  height: 3px;
  margin-bottom: 12px;
  background: var(--red);
}
.grid:has(.shop) {
  column-gap: clamp(20px, 3.5vw, 48px);
  row-gap: 36px;
}
.shop,
.shop:hover,
.shop:focus-visible {
  background: transparent;
  border: 0;
  box-shadow: none;
}
.noren {
  height: 127px;
  padding: 13px 9px 6px;
  border: 0;
  overflow: visible;
  background: none;
}
.shop:hover .noren,
.shop:focus-visible .noren {
  background: none;
}
.rod {
  top: 10px;
  left: 0;
  right: 0;
  height: 5px;
  border-inline: 3px solid #55392b;
  background: linear-gradient(#a5815b 0 1px,#74563e 1px 4px,#4e352a 4px);
  box-shadow: none;
}
.curtain {
  grid-template-columns: 1fr 1.06fr 1fr;
  gap: 3px;
}
.curtain i {
  border: 0;
  border-top: 4px solid #ffffff1c;
  border-bottom: 2px solid #0004;
  box-shadow: inset 1px 0 #fff2,inset -2px 0 #0002;
  clip-path: polygon(0 0,100% 0,100% calc(100% - 3px),calc(100% - 3px) calc(100% - 3px),calc(100% - 3px) 100%,3px 100%,3px calc(100% - 3px),0 calc(100% - 3px));
}
.curtain i:nth-child(2) { height: 94%; }
.curtain i:nth-child(3) { height: 97%; }
.shop-seal {
  top: 48%;
  width: auto;
  height: auto;
  background: none;
  border: 0;
  outline: 0;
  box-shadow: none;
  font-size: 47px;
}
.shop-plaque {
  margin-inline: 9px;
  padding: 7px 26px 0 0;
}
.shop-plaque h3 {
  margin-block: 1px 8px;
}
.shop-meta { letter-spacing: .12em; }
.shop-arrow {
  right: 0;
  bottom: auto;
  top: 26px;
}
.shop:hover .shop-arrow,
.shop:focus-visible .shop-arrow {
  transform: translateX(3px);
}
.dish,.dish:hover,.topic,.topic:hover {
  background: transparent;
  border: 0;
  box-shadow: none;
}
.dish .body {
  padding-inline: 0;
  border-bottom: 1px solid #a778594a;
}
.dish:hover h3,.dish:focus-visible h3 {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: .2em;
}
.art.placeholder {
  background-image: radial-gradient(ellipse at center,#fff5 0,transparent 75%);
}
.placeholder span,.details .placeholder span {
  clip-path: none;
  border: 0;
  box-shadow: none;
  background: none;
}
.details article {
  border: 0;
  border-top: 2px solid #a37850;
  background: #fff8e9;
}
.details .art { border: 0; }
@media(max-width:565px) {
  .block { padding-block: 36px 44px; }
  .section-head { margin-bottom: 22px; }
  .grid:has(.shop) { column-gap: 15px; row-gap: 24px; }
  .noren { height: 90px; padding-inline: 5px; }
  .shop-seal { font-size: 33px; }
  .shop-plaque { margin-inline: 5px; padding-right: 17px; }
  .shop-arrow { top: 22px; font-size: 15px; }
}

/* The masthead uses the same woven ground as the directory. */
header {
  color: #332f38;
  background: #f2e6cf url("asanoha.svg") right center / 190px auto;
  border-bottom: 2px solid #984538;
  column-gap: 30px;
  row-gap: 10px;
  padding-block: 13px;
}
header .logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #28364c;
}
.shop-crest {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 39px;
  height: 39px;
}
.shop-crest svg { width: 100%; height: 100%; }
header nav a[aria-current] {
  color: #84372c;
  border-bottom-color: #84372c;
}
header form {
  border-bottom-color: #7c665b;
}
header input { color: #332f38; }
header input::placeholder { color: #62564d; }
header form button { color: #84372c; }
.catalog-tab {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  min-height: 44px;
  padding: 5px 1px 5px 0;
  border-bottom: 1px solid #dcb48d;
  color: #fff2d9;
  font-size: 18px;
}
.catalog-tab span { color: #ffca8d; }
.catalog-tab:hover,
.catalog-tab:focus-visible {
  color: #ffca8d;
  border-bottom-color: #ffca8d;
}
.catalog-tab:hover span { transform: translateX(3px); }
@media (min-width: 700px) and (max-width: 820px) {
  header form { width: auto; }
  header form input { width: 146px; }
}
@media (max-width: 565px) {
  header { column-gap: 10px; }
  header .logo { gap: 5px; }
  .shop-crest { width: 27px; height: 27px; }
}

.hero {
  background:
    linear-gradient(90deg, #151a2b55, #151a2b25 48%, transparent 72%),
    #20223c url("night-street.png") center center / cover no-repeat;
}
.hero h1 {
  max-width: 56%;
  font-size: clamp(40px, 5.4vw, 78px);
  text-wrap: balance;
}
.hero p { max-width: min(100%, 370px); }
@media (max-width: 700px) {
  .hero {
    background:
      linear-gradient(90deg, #151a2be8, #151a2b88 68%, #151a2b24),
      #20223c url("night-street.png") 78% center / cover no-repeat;
  }
  .hero h1 { max-width: 100%; }
}

/* Washi slips with a small strip of indigo binding. */
.grid:has(> .menu-board) {
  gap: 24px 20px;
}
.menu-board {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 19px 15px 13px 19px;
  border-bottom: 1px solid #ab8f71;
  background:
    repeating-linear-gradient(173deg, transparent 0 5px, #8e705207 5px 6px),
    #fffaec;
}
.menu-board::before {
  content: "";
  position: absolute;
  inset: 0 auto 10px 0;
  width: 7px;
  background: repeating-linear-gradient(0deg, #314c60 0 3px, #405b6b 3px 4px);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 4px), 0 100%);
}
.menu-board-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
}
.menu-board h3 { overflow-wrap: anywhere; }
.menu-board-count {
  color: #8d382d;
  border: 1px solid #ac6457;
  padding: 1px 4px;
  font: 11px/1.35 system-ui, sans-serif;
  white-space: nowrap;
}
.menu-board p {
  color: #624f42;
  margin: 10px 0 7px;
  font-size: 14px;
}
.menu-board-arrow {
  align-self: flex-end;
  margin-top: auto;
  color: #365468;
  line-height: 1;
}
.menu-board:hover, .menu-board:focus-visible {
  background-color: #fffdf4;
  border-bottom-color: #365468;
}
.menu-board:hover h3, .menu-board:focus-visible h3 { color: #365468; }
@media (max-width: 565px) {
  .grid:has(> .menu-board) { gap: 16px 12px; }
  .menu-board { padding: 13px 10px 10px 14px; }
  .menu-board h3 { font-size: 20px; }
  .menu-board p { font-size: 13px; }
}

.dish-detail { padding-block: 25px 42px; }
.dish-detail > .crumb { margin-bottom: 16px; }
.dish-poster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto;
  gap: clamp(12px, 3vw, 45px);
  align-items: center;
  position: relative;
  padding: clamp(24px, 5vw, 64px);
  background: repeating-linear-gradient(3deg, transparent 0 6px, #83593508 6px 7px), #fff7e5;
  border-block: 1px solid #a98365;
}
.poster-copy { position: relative; z-index: 1; }
.poster-copy h1 { font-size: clamp(36px, 6.1vw, 82px); line-height: 1.15; overflow-wrap: anywhere; }
.poster-copy > p { max-width: 28em; }
.poster-stamp {
  display: inline-block;
  padding: 2px 6px;
  margin-bottom: 17px;
  border: 2px solid #963e31;
  color: #963e31;
  transform: rotate(-5deg);
}
.poster-reading { color: #8b3f31; letter-spacing: .14em; margin: 10px 0 22px; }
.poster-spine {
  writing-mode: vertical-rl;
  align-self: start;
  color: #31465b;
  border-inline-start: 1px solid #987454;
  padding-inline-start: 10px;
  letter-spacing: .26em;
}
.poster-figure,.dish-photo { margin: 0; min-width: 0; }
.poster-figure { position: relative; isolation: isolate; }
.poster-figure .art {
  background: transparent;
  height: clamp(180px, 32vw, 385px);
}
.poster-figure .placeholder span {
  color: #8b6853;
  font-size: clamp(54px, 9vw, 108px);
  opacity: .86;
}
.poster-figure figcaption,.dish-photo figcaption {
  color: #65493c;
  letter-spacing: .13em;
  font-size: 13px;
  border-top: 1px solid #aa85685e;
  padding-top: 8px;
}
.poster-figure figcaption { text-align: right; }
.poster-spread {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  align-items: start;
  gap: clamp(24px, 5vw, 65px);
  padding-top: 35px;
}
.photo-mat {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  background: #2f4252;
  color: #eee1ca;
  border: 8px solid #fff7e5;
}
.dish-photo figcaption { margin-top: 8px; }
.poster-notes section { border-bottom: 1px solid #a778594a; margin-bottom: 17px; }
.poster-notes h2 { color: #813c30; font-size: clamp(23px, 3vw, 32px); }
.poster-notes p { margin: 7px 0 14px; }
@media (max-width: 620px) {
  .dish-poster { grid-template-columns: minmax(0, 1fr) auto; }
  .poster-spine { grid-column: 2; grid-row: 1; }
  .poster-figure { grid-column: 1 / -1; }
  .poster-spread { grid-template-columns: 1fr; }
}

/* Ink marks and photo corners give the spread the finish of a printed album. */
.dish-poster {
  border: 0;
  background:
    repeating-linear-gradient(3deg, transparent 0 6px, #83593508 6px 7px),
    #fff7e5;
}
.dish-poster::before {
  content: "";
  position: absolute;
  inset: 9px auto auto 0;
  width: 32%;
  height: 2px;
  background: #9a775c;
  clip-path: polygon(0 14%, 68% 0, 95% 36%, 100% 70%, 76% 82%, 0 100%);
}
.poster-stamp {
  position: relative;
  padding: 5px 8px;
  border: 0;
  line-height: 1.15;
}
.poster-stamp::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 30' preserveAspectRatio='none'%3E%3Cpath d='M2 21L2 2l19 1m3-1 17 1 1 13m0 3-1 9-20-1m-3 1-16-1v-3' fill='none' stroke='%23963e31' stroke-width='2'/%3E%3C/svg%3E") center / 100% 100%;
}
.poster-spine {
  border: 0;
  padding-inline-start: 0;
}
.poster-spine::before {
  content: "・";
  color: #963e31;
  margin-inline-end: .4em;
}
.poster-figure figcaption,.dish-photo figcaption {
  border: 0;
  padding-top: 6px;
}
.poster-figure figcaption::before,.dish-photo figcaption::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 1.5em;
  height: 1px;
  margin-inline-end: .65em;
  background: #9a775c;
}
.photo-mat {
  border: 0;
  position: relative;
  margin: 6px;
  outline: 6px solid #fff7e5;
}
.photo-mat::before,.photo-mat::after {
  content: "";
  position: absolute;
  width: 29px;
  aspect-ratio: 1;
  background: #9c4738;
  pointer-events: none;
}
.photo-mat::before {
  top: -6px;
  left: -6px;
  clip-path: polygon(0 0,100% 0,0 100%);
}
.photo-mat::after {
  bottom: -6px;
  right: -6px;
  clip-path: polygon(100% 0,100% 100%,0 100%);
}
.poster-notes section {
  border: 0;
  margin-bottom: 23px;
}
.poster-notes h2 {
  position: relative;
  padding-inline-start: 15px;
}
.poster-notes h2::before {
  content: "";
  position: absolute;
  inset: .15em auto .1em 0;
  width: 4px;
  background: #9b4839;
  clip-path: polygon(30% 0,100% 7%,75% 85%,0 100%,12% 34%);
}

.dish-poster::before,
.dish-poster::after {
  content: "";
  position: absolute;
  width: clamp(108px, 25%, 245px);
  aspect-ratio: 3 / 1;
  height: auto;
  clip-path: none;
  background: url("poster-corners.png") left top / 160% auto no-repeat;
  pointer-events: none;
}
.dish-poster::before { inset: 0 auto auto 0; }
.dish-poster::after {
  inset: auto 0 0 auto;
  width: clamp(90px, 18%, 180px);
  background-position: right bottom;
  background-size: 230% auto;
}
.poster-stamp {
  display: inline-grid;
  place-items: center;
  width: 103px;
  height: 34px;
  padding: 0;
  transform: none;
  background: url("poster-label.png") center / contain no-repeat;
}
.poster-stamp::after { content: none; }
.poster-notes h2 { padding-inline-start: 0; }
.poster-notes h2::before { content: none; }
.poster-notes section:not(:last-of-type)::after {
  content: "";
  display: block;
  width: 138px;
  height: 9px;
  margin-top: 12px;
  background: url("poster-rule.png") center / 100% auto no-repeat;
}

.pixel-art img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  image-rendering: pixelated;
}
.dish .pixel-art { background: #edd9bd; }
.photo-mat img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}