/* ==========================================================================
   Amami Italia — the site's one footer.
   Self-contained on purpose: it declares the tokens it needs on .ftr rather
   than reading :root, so the same footer sits on a page that never loads
   amami.css without restyling that page's body.

   Built to the homepage system (design-system.md): the page's own ground
   colours, one tracked small-caps label style, Cormorant for the one line of
   brand type, and the split blocks' 81.226vw column so it lines up with what
   sits above it. Four utility columns, nothing else — no taglines, no voice.
   Above them, six square frames of recent posts.
   ========================================================================== */
.ftr{
  --f-ink:#161616;
  --f-cream:#eee9da;
  --f-cream-dim:rgba(238,233,218,.62);
  --f-line:rgba(238,233,218,.16);
  --f-red:#812b28;
  --f-serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --f-sans:'Poppins','Helvetica Neue',system-ui,sans-serif;
  background:var(--f-ink);color:var(--f-cream);
  font-family:var(--f-sans);font-weight:300;font-size:max(12px,1.06vw);line-height:1.6;
  text-align:left;margin:0;
  padding:max(30px,7.031vw) 0 max(22px,2.6vw);
}
.ftr *{box-sizing:border-box}
.ftr p{margin:0}
.ftr a{color:inherit;text-decoration:none;transition:color .2s ease-out}
.ftr a:hover{color:var(--f-cream-dim)}
.ftr__wrap{width:81.226vw;margin:0 auto}

/* the one label style: the proof bar's tracked caps */
.ftr__label{
  margin:0 0 max(10px,1.1vw);font-weight:400;
  font-size:max(9px,.95vw);letter-spacing:.2em;text-transform:uppercase;
  color:var(--f-cream-dim);
}

/* --- recent posts: six squares in a row ---------------------------------- */
.ftr__ig{margin-bottom:max(34px,5.036vw)}
.ftr__ig .ftr__label a:hover{color:var(--f-cream)}
.ftr__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:max(6px,.6vw)}
.ftr__grid a{display:block;aspect-ratio:1;overflow:hidden;background:#000}
.ftr__grid img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .4s cubic-bezier(.22,1,.36,1),opacity .4s ease-out}
.ftr__grid a:hover img{transform:scale(1.03);opacity:.86}

/* --- four utility columns ------------------------------------------------- */
.ftr__cols{
  display:grid;grid-template-columns:repeat(4,1fr);gap:max(24px,3vw);
  padding-top:max(30px,3.861vw);border-top:1px solid var(--f-line);
}
.ftr__col p+p{margin-top:max(8px,.7vw)}
.ftr__brand{font-family:var(--f-serif);font-weight:300;font-size:max(20px,1.9vw);
  letter-spacing:-.02em;text-transform:uppercase;line-height:1;margin-bottom:max(10px,.9vw)!important}
.ftr__link{border-bottom:1px solid var(--f-line);padding-bottom:1px}
.ftr__link:hover{border-color:var(--f-cream-dim)}
.ftr__hours{margin:0;display:grid;grid-template-columns:auto 1fr;column-gap:max(12px,1.2vw);row-gap:max(4px,.4vw)}
.ftr__hours dt{color:var(--f-cream-dim)}
.ftr__hours dd{margin:0}
.ftr__nav{list-style:none;margin:0;padding:0}
.ftr__nav li+li{margin-top:max(4px,.45vw)}
.ftr__nl label{display:block;margin:0 0 max(10px,1vw);color:var(--f-cream);line-height:1.5}
.ftr__nlrow{display:flex}
.ftr .ftr__nlrow input,.ftr__nl input{
  flex:1;min-width:0;background:transparent;border:1px solid var(--f-line);border-right:0;
  color:var(--f-cream);font:inherit;font-size:max(12px,.95vw);padding:.7em .9em;border-radius:0;margin:0}
.ftr__nl input::placeholder{color:var(--f-cream-dim)}
.ftr__nl input:focus{outline:none;border-color:var(--f-cream)}
.ftr .ftr__nlrow button,.ftr__nl button{
  background:transparent;border:1px solid var(--f-cream);color:var(--f-cream);
  font:inherit;font-weight:300;font-size:max(9.5px,.9vw);letter-spacing:.2em;text-indent:.2em;text-transform:uppercase;
  padding:0 max(12px,1.1vw);cursor:pointer;border-radius:0;margin:0;
  transition:background .25s ease-out,color .25s ease-out}
.ftr .ftr__nlrow button:hover,.ftr__nl button:hover{background:var(--f-cream);color:var(--f-ink)}
.ftr .form-status{margin:.5rem 0 0;font-size:.85em;color:var(--f-cream-dim);min-height:1.2em}

/* --- bottom bar ------------------------------------------------------------ */
.ftr__bar{
  margin-top:max(30px,3.861vw);padding-top:max(16px,1.6vw);border-top:1px solid var(--f-line);
  display:flex;justify-content:space-between;gap:max(14px,2vw);flex-wrap:wrap;
  font-size:max(9px,.85vw);letter-spacing:.14em;text-transform:uppercase;color:var(--f-cream-dim);
}
.ftr__bar a:hover{color:var(--f-cream)}
.ftr .sep{font-style:normal;margin:0 .7em;opacity:.55}

/* desktop: columns sized to their content so hours and the sign-up line sit on one line each */
@media (min-width:1024px){
  .ftr__cols{grid-template-columns:minmax(0,1fr) auto minmax(0,.8fr) minmax(0,1.15fr);column-gap:max(40px,4.4vw)}
  .ftr__hours dt,.ftr__hours dd{white-space:nowrap}
  .ftr__hours{column-gap:max(18px,1.6vw)}
  .ftr__nl label{white-space:nowrap}
  .ftr__bar{align-items:center}
  .ftr__bar p{white-space:nowrap}
}
@media (max-width:1023px){
  .ftr__cols{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .ftr{font-size:14px;padding:max(34px,9vw) 0 20px}
  .ftr__wrap{width:min(88vw,520px)}
  .ftr__label{font-size:9px;letter-spacing:.16em}
  .ftr__grid{grid-template-columns:repeat(3,1fr);gap:6px}
  .ftr__cols{grid-template-columns:1fr;gap:26px}
  .ftr__brand{font-size:22px}
  .ftr .ftr__nlrow input,.ftr__nl input{font-size:14px}
  .ftr .ftr__nlrow button,.ftr__nl button{font-size:10px;padding:0 14px}
  .ftr__bar{flex-direction:column;gap:10px;font-size:9px;line-height:2}
}
@media (prefers-reduced-motion:reduce){
  .ftr a,.ftr__grid img,.ftr__nl button{transition:none}
  .ftr__grid a:hover img{transform:none}
}

@media (max-width:760px){.ftr .ftr__nlrow input,.ftr__nl input,.ftr .ftr__nlrow button,.ftr__nl button{min-height:44px}.ftr__nav li+li{margin-top:8px}.ftr__nav a{display:inline-block;padding:6px 0}}

/* §6 — footer links on phones: the list opens up to a 44px pitch; inline
   links grow their hit area without moving the text. */
@media (max-width:760px){
  .ftr__nav a{display:inline-block;padding:12px 0}
  .ftr__nav li+li{margin-top:0}
  .ftr__cols p a,.ftr__hours a{display:inline-block;padding:12px 0;margin:-12px 0}
  .ftr__label a{display:inline-block;padding:16px 0;margin:-16px 0}
  .ftr__bar a{display:inline-block;padding:16px 0;margin:-16px 0}
}

/* Phones, sleeker: one row of three posts, links in two columns, tighter
   rhythm, the legal bar centred. Hit areas stay at 44px. */
@media (max-width:760px){
  .ftr{font-size:13px;padding:32px 0 18px}
  .ftr__ig{margin-bottom:26px}
  .ftr__grid a:nth-child(n+4){display:none}
  .ftr__cols{gap:22px;padding-top:24px}
  .ftr__col p+p{margin-top:6px}
  .ftr__brand{font-size:20px;margin-bottom:8px!important}
  .ftr__hours{row-gap:2px;column-gap:14px}
  .ftr__nav{display:grid;grid-template-columns:1fr 1fr;column-gap:18px}
  .ftr__nav a{padding:10px 0}
  .ftr__nl label{margin-bottom:8px;color:var(--f-cream-dim)}
  .ftr__bar{margin-top:24px;padding-top:14px;align-items:center;text-align:center;gap:6px;letter-spacing:.12em}
  .ftr__bar .sep{margin:0 .5em}
}

/* --- the end of every page: where else to find Amami, as a row of line icons --- */
.ftr__social{display:flex;flex-wrap:wrap;justify-content:center;gap:max(8px,1vw) max(14px,1.8vw);
  margin-top:max(22px,2.4vw);padding-top:max(18px,2vw);border-top:1px solid var(--f-line)}
.ftr__soc{display:inline-flex;flex-direction:column;align-items:center;gap:6px;min-width:56px;padding:6px 4px;
  color:var(--f-cream-dim);text-decoration:none;transition:color .2s ease-out,transform .2s ease-out}
.ftr__soc svg{display:block;width:22px;height:22px}
.ftr__soc-l{font-size:9px;letter-spacing:.2em;text-transform:uppercase}
.ftr__soc:hover,.ftr__soc:focus-visible{color:#cbd6e3;transform:translateY(-1px)}
@media (max-width:760px){.ftr__social{gap:4px 6px}.ftr__soc{min-width:48px;min-height:44px}}
@media (prefers-reduced-motion:reduce){.ftr__soc{transition:none}.ftr__soc:hover{transform:none}}
/* Event alerts sign-up: first name, last name, email, phone (client, 2026-09-25) */
.ftr__nllabel{margin:0 0 max(10px,1vw);color:var(--f-cream);line-height:1.5}
.ftr__nlgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ftr__nl .ftr__nlgrid input{border-right:1px solid var(--f-line);width:100%;box-sizing:border-box}
.ftr__nl .ftr__nlgrid input:focus{border-color:var(--f-cream)}
.ftr__nl > button{margin-top:8px;width:100%;min-height:max(40px,2.8vw)}
@media (max-width:760px){.ftr__nlgrid{grid-template-columns:1fr}.ftr__nl > button{min-height:44px}}