/* =========================================================
   ANTIQUE HOME — 06 · FOOTER
   Self-contained. Loaded after sections.css; nothing above
   the footer is touched from this file.
   ========================================================= */

.foot{
  position:relative;
  isolation:isolate;
  background: var(--paper);
  color: var(--ink-900);
  overflow:hidden;
}

.foot__bg{
  position:absolute;
  inset:0;
  z-index:-1;
  display:block;
}
.foot__bg img{
  width:100%; height:100%;
  object-fit:cover;
  object-position: center bottom;
}
/* a cream veil: light over the wall at the top so the shadows still read,
   firmer lower down where the carving and the books would otherwise fight
   the type */
.foot__bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(to bottom,
      rgba(245,240,231,.26) 0%,
      rgba(245,240,231,.32) 40%,
      rgba(245,240,231,.68) 62%,
      rgba(245,240,231,.78) 84%,
      rgba(245,240,231,.60) 100%);
}

.foot__inner{
  position:relative;
  max-width: var(--shell);
  margin-inline:auto;
  padding: 42px var(--gutter) clamp(120px, 34vw, 170px);
}

/* ---------------------------------------------------------
   brand mark, held between two hairlines
   --------------------------------------------------------- */

.fmark{
  position:relative;
  display:flex;
  justify-content:center;
  --fmark-w: clamp(190px, 54vw, 236px);
  /* the ornament occupies the middle 65.2% of the artwork and its optical
     centre sits 28.2% down — the hairlines are placed off those figures */
  --orn-half: calc(var(--fmark-w) * 0.326);
  --orn-gap: 12px;
}

.fmark__rule{
  position:absolute;
  top: 28.2%;
  height:1px;
  background: rgba(150,116,72,.62);
}
.fmark__rule:first-child{
  left:0;
  right: calc(50% + var(--orn-half) + var(--orn-gap));
  background: linear-gradient(to right, rgba(150,116,72,0), rgba(150,116,72,.62) 34%);
}
.fmark__rule:last-child{
  right:0;
  left: calc(50% + var(--orn-half) + var(--orn-gap));
  background: linear-gradient(to left, rgba(150,116,72,0), rgba(150,116,72,.62) 34%);
}

/* The supplied artwork is a 531×423 canvas whose ink occupies
   87–466 × 104–315; the frame below crops that margin away so the
   mark's true width is what --fmark-w sets. */
.fmark__logo{
  position:relative;
  display:block;
  flex:none;
  width: var(--fmark-w);
  aspect-ratio: 379 / 211;
  overflow:hidden;
}
.fmark__logo img{
  position:absolute;
  width:140.11%;          /* 531 / 379 */
  max-width:none;
  height:auto;
  left:-22.96%;           /* -87 / 379 */
  top:-49.29%;            /* -104 / 211 of the box height */
}

/* a slow gold glint riding the letterforms */
.fmark__shine{
  position:absolute;
  width:140.11%;
  height:176.7%;          /* 140.11 / (211/379) ... matched to the image box */
  left:-22.96%;
  top:-49.29%;
  pointer-events:none;
  background:
    linear-gradient(100deg,
      rgba(255,236,190,0)   38%,
      rgba(255,246,214,.65) 47%,
      rgba(255,252,238,.95) 50%,
      rgba(255,246,214,.65) 53%,
      rgba(255,236,190,0)   62%);
  background-size: 260% 100%;
  background-repeat:no-repeat;
  mix-blend-mode: overlay;
  -webkit-mask-image: url("footer/logo-footer.png");
          mask-image: url("footer/logo-footer.png");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  animation: fShine 7s var(--ease) 1.2s infinite;
}
@keyframes fShine{
  0%       { background-position: 170% 0; }
  36%, 100%{ background-position: -70% 0; }
}

@media (hover:hover){
  .fmark__logo{ transition: transform .6s var(--ease); }
  .fmark__logo:hover{ transform: scale(1.035); }
}

/* the small lozenge under the wordmark */
.fmark__gem{
  display:block;
  width:6px; height:6px;
  margin: 10px auto 0;
  border:1px solid rgba(150,116,72,.7);
  transform: rotate(45deg);
}
.fmark__gem.in{ transform: rotate(45deg); }

/* ---------------------------------------------------------
   columns
   --------------------------------------------------------- */

.foot__cols{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px 18px;
  margin-top: 34px;
}

.fcol__title{
  margin:0 0 10px;
  font-family: var(--sans);
  font-size:11px;
  font-weight:500;
  letter-spacing:.26em;
  text-transform:uppercase;
  color: var(--ink-900);
}
.fcol__title::after{
  content:"";
  display:block;
  width:26px; height:1px;
  margin-top:9px;
  background: rgba(150,116,72,.75);
  transition: width .55s var(--ease);
}
.fcol:hover .fcol__title::after{ width:44px; }

.fcol__list{
  list-style:none;
  margin:0;
  padding:0;
}
.fcol__list li + li{ margin-top:9px; }

.fcol__list a{
  display:flex;
  align-items:center;
  gap:9px;
  font-family: var(--sans);
  font-size:11.5px;
  font-weight:300;
  letter-spacing:.02em;
  color: var(--ink-600);
  transition: color .35s var(--ease), transform .35s var(--ease);
}

.fcol__ico{
  flex:none;
  display:grid;
  place-items:center;
  width:16px; height:16px;
  color: rgba(150,116,72,.85);
  transition: transform .4s var(--ease), color .4s var(--ease);
}
.fcol__ico svg{
  width:100%; height:100%;
  fill:none; stroke:currentColor;
  stroke-width:1.15; stroke-linecap:round; stroke-linejoin:round;
}

@media (hover:hover){
  .fcol__list a:hover{ color: var(--gold-deep); transform: translateX(4px); }
  .fcol__list a:hover .fcol__ico{ transform: scale(1.18); color: var(--gold-deep); }
}

/* ---------- newsletter ---------- */

.fcol--news{ grid-column: 1 / -1; }

.fnews__text{
  margin:0 0 14px;
  font-family: var(--sans);
  font-size:11.5px;
  font-weight:300;
  line-height:1.75;
  color: var(--ink-600);
}

.fnews{
  display:flex;
  align-items:stretch;
  max-width:340px;
  border:1px solid rgba(150,116,72,.45);
  background: rgba(255,252,246,.55);
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.fnews:focus-within{
  border-color: rgba(150,116,72,.9);
  box-shadow: 0 0 0 3px rgba(169,138,92,.12);
}

.fnews input{
  flex:1 1 auto;
  min-width:0;
  appearance:none;
  border:0;
  background:transparent;
  padding: 13px 14px;
  font-family: var(--sans);
  font-size:11.5px;
  font-weight:300;
  letter-spacing:.03em;
  color: var(--ink-900);
}
.fnews input::placeholder{ color: rgba(93,82,70,.6); }
.fnews input:focus{ outline:none; }

.fnews button{
  appearance:none;
  border:0;
  cursor:pointer;
  flex:none;
  display:grid;
  place-items:center;
  width:54px;
  background: linear-gradient(100deg, #9C7A4C, #B69463 52%, #9C7A4C);
  background-size:200% 100%;
  color:#FBF6EC;
  transition: background-position .6s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.fnews button svg{
  width:22px; height:10px;
  fill:none; stroke:currentColor;
  stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round;
  transition: transform .4s var(--ease);
}
@media (hover:hover){
  .fnews button:hover{ background-position:100% 0; }
  .fnews button:hover svg{ transform: translateX(4px); }
}
.fnews button:active{ transform: scale(.96); }

.fnews__note{
  margin:9px 0 0;
  min-height:14px;
  font-family: var(--sans);
  font-size:10.5px;
  font-weight:300;
  letter-spacing:.03em;
  color: var(--gold-deep);
}
.fnews__note.err{ color:#A9573A; }

/* ---------------------------------------------------------
   assurances + social
   --------------------------------------------------------- */

.fbar{
  margin-top: 30px;
  padding-top: 26px;
  position:relative;
  border-top:1px solid rgba(150,116,72,.3);
}
/* a small lozenge sitting on the rule */
.fbar::before{
  content:"";
  position:absolute;
  top:-4px; left:50%;
  width:7px; height:7px;
  margin-left:-3.5px;
  background: var(--paper);
  border:1px solid rgba(150,116,72,.7);
  transform: rotate(45deg);
}

.fbar__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:0;
}

.fbar__item{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:9px;
  padding: 0 6px;
  border-right:1px solid rgba(150,116,72,.24);
}
.fbar__item:nth-child(3){ border-right:0; }

.fbar__ico{
  display:grid; place-items:center;
  width: clamp(24px, 6.6vw, 30px);
  height: clamp(24px, 6.6vw, 30px);
  color: var(--gold-deep);
  transition: transform .45s var(--ease);
}
.fbar__ico svg{
  width:100%; height:100%;
  fill:none; stroke:currentColor;
  stroke-width:1.15; stroke-linecap:round; stroke-linejoin:round;
}
@media (hover:hover){
  .fbar__item:hover .fbar__ico{ transform: translateY(-3px) scale(1.1); }
}

.fbar__copy h3{
  margin:0 0 6px;
  font-family: var(--sans);
  font-size: clamp(8.5px, 2.4vw, 10px);
  font-weight:500;
  letter-spacing:.16em;
  line-height:1.5;
  text-transform:uppercase;
  color: var(--ink-900);
}
.fbar__copy p{
  margin:0;
  font-family: var(--sans);
  font-size: clamp(8.5px, 2.4vw, 10.5px);
  font-weight:300;
  line-height:1.65;
  color: var(--ink-600);
}

/* on a phone the social row drops to its own line under the three */
.fbar__item--social{
  order: 9;                 /* after the three assurances on a phone */
  grid-column: 1 / -1;
  border-right:0;
  margin-top: 22px;
  padding-top: 20px;
  border-top:1px solid rgba(150,116,72,.24);
}

.fsocial{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 26px;
}
.fsocial a{
  display:grid;
  place-items:center;
  width:30px; height:30px;
  transition: transform .4s var(--ease), filter .4s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.fsocial svg{ width:100%; height:100%; }
@media (hover:hover){
  .fsocial a:hover{ transform: translateY(-3px) scale(1.14); filter: drop-shadow(0 5px 12px rgba(60,44,26,.28)); }
}
.fsocial a:active{ transform: scale(.9); }

/* ---------------------------------------------------------
   signature + copyright
   --------------------------------------------------------- */

.fsign{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin-top: 30px;
  padding-top: 22px;
  border-top:1px solid rgba(150,116,72,.28);
}
.fsign__rule{
  flex:1 1 auto;
  max-width:150px;
  height:1px;
  background: linear-gradient(to right, transparent, rgba(150,116,72,.5));
}
.fsign__rule:last-child{
  background: linear-gradient(to left, transparent, rgba(150,116,72,.5));
}

/* the credit — set a touch heavier than a hairline script so the
   name stays legible, with a gold sheen travelling across it */
.fsign__name{
  position:relative;
  flex:none;
  display:inline-block;
  font-family: "Dancing Script", "Segoe Script", cursive;
  font-size: clamp(21px, 5.9vw, 25px);
  font-weight:700;
  letter-spacing:.02em;
  line-height:1.25;
  padding: 0 2px 3px;
  /* every stop stays darker than the cream wall — a near-white peak would
     simply disappear on this background */
  background-image: linear-gradient(
    100deg,
    #5C4423 0%,
    #6E5229 30%,
    #A57C36 44%,
    #D2A94E 50%,
    #A57C36 56%,
    #6E5229 70%,
    #5C4423 100%);
  /* The sweep must stay inside 0%–100%. Pushed past those bounds the
     gradient leaves the text box and, with no-repeat, the glyphs it no
     longer covers get no paint at all and vanish. */
  background-size: 300% 100%;
  background-repeat:no-repeat;
  background-position: 100% 0;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: fSignSheen 6.5s ease-in-out 1.4s infinite;
  transition: transform .5s var(--ease);
}
@keyframes fSignSheen{
  0%,   10%{ background-position: 100% 0; }
  55%, 100%{ background-position: 0% 0; }
}
@media (hover:hover){
  .fsign__name:hover{ transform: scale(1.07); }
}

.fcopy{
  margin: 12px 0 0;
  text-align:center;
  font-family: var(--sans);
  font-size: clamp(8.5px, 2.5vw, 10px);
  font-weight:300;
  letter-spacing:.16em;
  text-transform:uppercase;
  color: var(--ink-600);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (min-width: 700px){
  .foot__inner{ padding: 56px var(--gutter) clamp(90px, 12vw, 130px); }
  .fmark{ --fmark-w: clamp(240px, 30vw, 300px); }

  .foot__cols{ grid-template-columns: 1.1fr 1fr 1fr; gap: 34px 26px; margin-top: 42px; }
  .fcol--news{ grid-column: auto; }

  .fbar__list{ grid-template-columns: repeat(3, 1fr) auto; }
  .fbar__item{ flex-direction:row; text-align:left; gap:14px; padding: 0 20px; }
  .fbar__item--social{
    order:0;
    grid-column:auto;
    margin-top:0;
    padding-top:0;
    border-top:0;
    justify-content:center;
  }
  .fsocial{ gap:18px; }
}


/* =========================================================
   DESKTOP / LAPTOP
   ========================================================= */

@media (min-width: 1024px){
  .foot__inner{ padding: 74px var(--gutter) clamp(70px, 7vw, 104px); }

  /* the landscape plate is wider than the footer, so anchor the crop to the
     right and keep the vase and books in frame as the reference does */
  .foot__bg img{ object-position: right bottom; }

  .fmark{ --fmark-w: clamp(300px, 24vw, 360px); --orn-gap: 20px; }

  .foot__cols{
    grid-template-columns: 1.05fr 1fr 1fr;
    gap: 0 60px;
    margin-top: 52px;
    /* the reference indents the columns in from the frame edge */
    padding-inline: clamp(0px, 4vw, 74px);
  }
  .fcol__title{ font-size:12px; letter-spacing:.28em; }
  .fcol__list li + li{ margin-top:11px; }
  .fcol__list a{ font-size:12.5px; }

  /* the laptop reference lists the shop links as plain type */
  .fcol__ico{ display:none; }

  .fnews__text{ font-size:12.5px; }
  .fnews{ max-width:300px; }

  .fbar{ margin-top:44px; padding-top:30px; }
  .fbar__list{ grid-template-columns: 1fr 1fr auto 1fr; }
  .fbar__item{ padding: 0 28px; }
  .fbar__copy h3{ font-size:10px; }
  .fbar__copy p{ font-size:11px; }
  .fsocial{ gap:22px; }
  .fsocial a{ width:34px; height:34px; }

  .fsign{ margin-top:40px; padding-top:26px; }
  .fsign__rule{ max-width:none; }
  .fsign__name{ font-size:26px; }
  .fcopy{ font-size:10.5px; margin-top:14px; }
}

@media (min-width: 1600px){
  .foot__cols{ padding-inline: 90px; }
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce){
  .fmark__shine,
  .fsign__name{ animation:none !important; }
  .fsign__name{
    -webkit-text-fill-color: #7A5A32;
    color:#7A5A32;
  }
}