@charset "UTF-8";
/* MOI — additions for the Couch page builder (home.php, landing.php)
   Loaded AFTER the main stylesheet. The main stylesheet is left untouched. */


/* --- 1. Standards-mode corrections ------------------------------------------
   The pages now carry <!DOCTYPE html>. Two rules in the main stylesheet used
   unit-less lengths, which only worked in quirks mode. */

.moy						{padding: 0 10px;}
@media (max-width: 800px)	{ .centred_img {padding: 0 30px;} }


/* --- 2. Editor text: ignore pasted-in formatting ------------------------------
   Everything typed or pasted into a text box is wrapped in .rt. Font, size,
   line-height and colour always come from the site, whatever was pasted.
   Bold, italic and links are kept. */

.rt, .rt *					{font-family: inherit !important; font-size: inherit !important; line-height: inherit !important;
							 letter-spacing: inherit !important; color: inherit !important; background: none !important;}
.rt p, .rt div				{margin: 0; padding: 0;}
.rt p + p					{margin-top: 23px;}
.rt table					{border-collapse: collapse; border-spacing: 0;}
.rt a						{text-decoration: none;}


/* --- 3. Content rows, links and buttons ---------------------------------------- */

.rows > * + *				{margin-top: 23px;}
.rows > .ul_link + .ul_link	{margin-top: 0;}
.rows > .ul_link + .ul_link--gap	{margin-top: 23px;}

/* Brush-underlined link. The stroke image always spans the wording, whatever its length. */
.ul_link					{display: table; position: relative; padding-bottom: 2px;}
.ul_link__stroke			{position: absolute; left: -4px; right: -4px; top: 100%; margin-top: -2px; pointer-events: none;}
.ul_link__stroke img		{display: block; width: 100%; height: auto;}

.btn_img					{display: block; width: 160px; max-width: 100%;}
.btn_img img				{display: block; width: 100%; height: auto;}

.btn_outline				{display: block; box-sizing: border-box; width: 218px; max-width: 100%; padding: 8px; border: 1px solid currentColor; text-align: center;}

.tone_dark a:link, .tone_dark a:visited,
.tone_dark a:hover, .tone_dark a:active	{color: #fff;}


/* --- 4. Header ----------------------------------------------------------------- */

.reservations_inner			{padding: 0 25px; margin: auto; width: 150px;}
.reservations_inner a		{display: block; width: 160px; margin: -5px 0 0 -15px;}
.reservations_inner img		{display: block; width: 100%; height: auto;}

.intro_badge				{position: absolute; bottom: 75px; left: 0; right: 0; text-align: center;}
.intro_badge img			{width: 80px; height: auto;}

.hero_mob_pad				{padding: 125px 25px 0 25px;}


/* --- 5. Right-hand keyline -----------------------------------------------------
   Runs from 40px below the top of the page to the top of the footer, however
   long the page is. Change 'bottom' to stop it earlier. */

#page						{position: relative;}
.keyline					{position: absolute; top: 40px; bottom: 0; right: 27px; width: 5px; z-index: 99; pointer-events: none;}
.keyline img				{display: block; width: 100%; height: 100%;}


/* --- 6. Sections --------------------------------------------------------------- */

/* 50/50 */
.sec_split_text				{max-width: 425px; margin: auto;}
.sec_overlap_wrap			{max-width: 1400px; margin: -50px auto -7px auto;}
.sec_overlap_text			{max-width: 400px; margin: auto; padding: 20px 20px 80px 20px; text-align: left; box-sizing: border-box;}

@media (max-width: 800px) {
	.sec_split .row_wrapper > .column2.m:last-child	{padding-bottom: 69px;}
}

/* Centred image, text below */
.sec_centred				{max-width: 800px; margin: auto; padding: 100px 0;}
.sec_centred__pad			{padding: 0 20px;}
.sec_centred__text			{max-width: 420px; padding: 30px 20px 0 20px; margin: auto;}
.sec_centred__text > * + *	{margin-top: 23px;}
.sec_centred__text > .sec_title + .sec_sub	{margin-top: 0;}
.sec_centred__text.ta_center				{text-align: center;}
.ta_center .ul_link, .ta_center .btn_img,
.ta_center .btn_outline						{margin-left: auto; margin-right: auto;}
.sec_title					{font-family: Baskerville, 'Times New Roman', serif; font-style: italic; font-size: 18px;}
.sec_sub					{opacity: 0.6;}
.sec_expander				{display: none;}

/* Full-screen image: fills the viewport, cropped to fit on any screen */
.sec_full					{position: relative; width: 100%; height: 100vh; height: 100svh; overflow: hidden;}
.sec_full .slider,
.sec_full .slick-list,
.sec_full .slick-track		{height: 100%;}
.sec_full img				{display: block; width: 100%; height: 100%; object-fit: cover; object-position: center;}
.sec_full.pos_top img		{object-position: center top;}
.sec_full.pos_bottom img	{object-position: center bottom;}
.sec_full.pos_left img		{object-position: left center;}
.sec_full.pos_right img		{object-position: right center;}

/* Custom code */
.sec_embed--full			{position: relative; width: 100%; height: 100vh;}
.sec_embed--full > div		{position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
.sec_embed--full iframe		{display: block; width: 100%; height: 100%; border: 0;}

/* Dark panel (Room 86). Desktop: the image fills the right half at exactly the
   height of the text. Mobile: text, then image, as before. */
.sec_dark					{position: relative; width: 100%; background: #201D1D; color: #fff; overflow: hidden;}
.sec_dark__inner			{display: flex; max-width: 400px;}
.sec_dark__line				{flex: 0 0 3px; margin: 0 8px 0 15px; background: url(../img/restaurant-soho/left-wht.png) no-repeat 0 0 / 100% 100%;}
.sec_dark__body				{flex: 1 1 auto; min-width: 0; padding-left: 14px;}

@media (min-width: 801px) {
	.sec_dark				{display: flex;}
	.sec_dark__text			{flex: 0 0 50%; box-sizing: border-box; padding: 12.5vh 20px;}
	.sec_dark__media		{flex: 0 0 50%; position: relative;}
	.sec_dark__media .slider	{position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden;}
	.sec_dark__media .slick-list,
	.sec_dark__media .slick-track	{height: 100%;}
	.sec_dark__media img	{display: block; width: 100%; height: 100%; object-fit: cover;}
}
@media (max-width: 800px) {
	.sec_dark__text			{padding: 150px 20px 75px 20px;}
}

/* Information blocks. The vertical line beside each title stretches to the
   height of its block instead of a fixed pixel height. */
.sec_info__pad				{padding: 120px 20px;}
.info_block					{display: flex; min-height: 200px;}
.info_col:first-child > .info_block:first-child	{min-height: 300px;}
.info_block__title			{flex: 0 0 20%; display: flex; align-items: stretch;}
.info_block__line			{flex: 0 0 3px; margin-right: 8px; background: url(../img/restaurant-soho/menu-break.png) no-repeat 0 0 / 100% 100%;}
.info_block__title img		{display: block; width: 29px; height: auto; align-self: flex-start;}
.info_block__body			{flex: 1 1 auto; min-width: 0; margin-top: -5px;}
.info_block__inner			{max-width: 400px; padding: 20px;}
.info_col > .info_block + .info_block	{margin-top: 120px;}
@media (max-width: 800px) {
	.info_col > .info_block + .info_block	{margin-top: 100px;}
}

/* Text column (FAQs, terms): a single readable column, title with the brush underline */
.sec_text					{max-width: 850px; margin: auto; padding-top: 150px;}
.sec_text__pad				{padding: 30px 30px 100px 30px;}
.sec_text__title			{margin-bottom: 92px;}
.sec_text__item + .sec_text__item	{margin-top: 46px;}
.sec_text__heading			{text-decoration: underline; margin-bottom: 23px;}

/* Landing pages without a hero: clear the fixed header before the first section */
@media (min-width: 801px) {
	.landing_top + .sec_split .l_omakase	{padding-top: 115px;}
	.landing_top + .sec_centred				{padding-top: 160px;}
}
@media (max-width: 800px) {
	.landing_top			{height: 275px;}
	.landing_top + .sec_centred, .landing_top + .sec_full, .landing_top + .sec_dark, .landing_top + .sec_embed, .landing_top + .sec_text	{margin-top: -275px;}
	.landing_top + .sec_centred				{padding-top: 140px;}
}


/* --- 7. Pop-up -----------------------------------------------------------------
   Height follows the text and buttons. Colours still come from .modal_modal in
   the main stylesheet. */

.modal_modal.modal_auto		{height: auto; box-sizing: border-box; width: 300px; max-width: calc(100vw - 40px); max-height: calc(100vh - 40px);
							 overflow-y: auto; padding: 50px 22px 36px 26px;}
.modal_auto .modal_message	{padding-top: 0;}
.modal_auto .modal_right	{top: 8px; bottom: 8px; left: 12px;}
.modal_auto .modal_right img	{display: block; width: 4px; height: 100%;}
.modal_auto .closebutton	{padding-top: 10px;}
.modal_auto .closebutton button	{cursor: pointer; line-height: 0;}
.modal_auto .closebutton img	{display: block; width: 24px; height: 24px;}
.popup_title				{font-size: 18px; font-family: Baskerville, 'Times New Roman', serif; font-style: italic; padding-bottom: 5px;}
.modal_auto a:link, .modal_auto a:visited,
.modal_auto a:hover, .modal_auto a:active	{color: #fff;}
.popup_buttons				{margin-top: 23px;}
.popup_buttons:empty		{display: none;}
.popup_buttons .btn_outline	{margin-left: auto; margin-right: auto;}
.popup_buttons .btn_outline + .btn_outline	{margin-top: 14px;}

#myBtn						{cursor: pointer;}