/* A piece, mounted like a page from an album.
   Cream paper, photos held by paper corners, a rail that follows you down. */

.cc-album{
  --paper:#f3ece2;
  --card:#fffdf8;
  --ink:#1b1714;
  --soft:#6d635a;
  --line:#d9cdbc;
  --accent:#8f2c2c;
  background:var(--paper);
  color:var(--ink);
  font-family:'Playfair Display',Georgia,serif;
  line-height:1.55;
}

/* ---- top plate ---- */
.cc-album .alb-top{
  display:flex;align-items:center;justify-content:space-between;
  max-width:1180px;margin:0 auto;padding:22px 26px 10px;
}
.cc-album .alb-back{
  font-family:'GFS Didot',Georgia,serif;
  text-transform:uppercase;letter-spacing:2.4px;font-size:11.5px;
  color:var(--soft);text-decoration:none;
}
.cc-album .alb-back:hover{color:var(--accent);}
.cc-album .alb-plate{font-family:'GFS Didot',Georgia,serif;letter-spacing:2.4px;font-size:11.5px;color:var(--soft);}
.cc-album .alb-no{color:var(--accent);}

/* ---- two columns ---- */
.cc-album .alb-wrap{
  max-width:1180px;margin:0 auto;padding:0 26px 40px;
  display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:56px;align-items:start;
}

/* ---- the roll ---- */
/* ---- the roll, laid out as a collage ----
   The lead plate and the film hold the full width; the rest are pinned around
   them at different sizes and a degree or two off square, the way photographs
   get pressed into an album by hand. */
.cc-album .alb-roll{
  display:grid;grid-template-columns:repeat(6,1fr);
  column-gap:26px;row-gap:34px;align-items:start;
}
.cc-album .alb-plateimg{grid-column:span 6;--tilt:0deg;transform:rotate(var(--tilt));}
/* Width comes from the plate's place in the roll, not from what it shows — a
   piece that was never photographed from the side must not leave half a row
   empty. The template decides the spans and always fills six columns. */
.cc-album .alb-w6{grid-column:span 6;}
.cc-album .alb-w4{grid-column:span 4;}
.cc-album .alb-w3{grid-column:span 3;}
.cc-album .alb-w2{grid-column:span 2;}
.cc-album .alb-plateimg:nth-child(3n+2){--tilt:-.9deg;}
.cc-album .alb-plateimg:nth-child(3n+3){--tilt:.8deg;}
.cc-album .alb-plateimg:nth-child(5n+4){--tilt:-1.1deg;}
.cc-album .alb-plateimg.is-lead{--tilt:0deg;}

/* the note: a small card pinned to the mount, ruled like a vintage label */
.cc-album .alb-note{
  position:absolute;z-index:4;
  left:50%;bottom:-13px;transform:translateX(-50%) rotate(-1.4deg);
  max-width:78%;
  padding:7px 16px 8px;
  font-family:'GFS Didot',Georgia,serif;font-style:italic;
  font-size:13px;line-height:1.2;color:#6b4a22;text-align:center;white-space:nowrap;
  background:#fdf6e7;
  border:1px solid rgba(172,91,17,.55);
  outline:1px solid #fdf6e7;outline-offset:-3px;
  box-shadow:0 1px 0 rgba(172,91,17,.25) inset, 0 5px 14px rgba(27,23,20,.10);
}
.cc-album .alb-plateimg figcaption{margin-bottom:10px;}
.cc-album .alb-p--detail .alb-note,
.cc-album .alb-p--detail2 .alb-note{transform:translateX(-50%) rotate(1.2deg);}
.cc-album .alb-p--slip .alb-note{transform:translateX(-50%) rotate(.9deg);}
.cc-album .alb-p--detail2 .alb-note{font-size:11.5px;padding:6px 10px 7px;white-space:normal;max-width:86%;}

.cc-album .alb-style{
  font-family:'GFS Didot',Georgia,serif;
  text-transform:uppercase;letter-spacing:2.2px;font-size:10.5px;color:var(--soft);
  margin:-6px 0 14px;
}
.cc-album .alb-plateimg{
  position:relative;margin:0;background:var(--card);
  padding:18px 18px 14px;
  box-shadow:0 1px 0 rgba(27,23,20,.05), 0 10px 26px rgba(27,23,20,.06);
}
.cc-album .alb-plateimg img{display:block;width:100%;height:auto;}
.cc-album .alb-plateimg figcaption{
  margin-top:12px;text-align:center;
  font-family:'GFS Didot',Georgia,serif;
  text-transform:uppercase;letter-spacing:2.4px;font-size:10.5px;color:var(--soft);
}

/* paper corners — the album tell */
.cc-album .alb-corner{
  position:absolute;width:20px;height:20px;pointer-events:none;
  background:linear-gradient(135deg,rgba(27,23,20,.24) 0 48%,transparent 48%);
}
.cc-album .alb-corner.tl{top:8px;left:8px;}
.cc-album .alb-corner.tr{top:8px;right:8px;transform:rotate(90deg);}
.cc-album .alb-corner.br{bottom:8px;right:8px;transform:rotate(180deg);}
.cc-album .alb-corner.bl{bottom:8px;left:8px;transform:rotate(270deg);}

/* ---- the rail ---- */
.cc-album .alb-rail{position:sticky;top:24px;}
.cc-album .alb-eyebrow{
  font-family:'GFS Didot',Georgia,serif;
  text-transform:uppercase;letter-spacing:2.6px;font-size:11px;color:var(--accent);margin-bottom:10px;
}
.cc-album h1{
  font-family:'GFS Didot',Georgia,serif;font-weight:400;
  font-size:clamp(30px,3.4vw,42px);line-height:1.08;margin:0 0 8px;
}
.cc-album .alb-price{font-size:19px;color:var(--soft);margin-bottom:18px;}
.cc-album .alb-desc{font-size:16px;margin:0 0 24px;color:#2f2822;}

/* ---- form ---- */
.cc-album .alb-field{display:block;margin-bottom:16px;}
.cc-album .alb-lab{
  display:block;font-family:'GFS Didot',Georgia,serif;
  text-transform:uppercase;letter-spacing:2px;font-size:10.5px;color:var(--soft);margin-bottom:6px;
}
.cc-album .alb-sec{margin-top:24px;}
.cc-album input[type=text],.cc-album input[type=email],.cc-album input[type=tel],
.cc-album input[type=number],.cc-album select,.cc-album textarea{
  width:100%;box-sizing:border-box;background:var(--card);
  border:1px solid var(--line);border-radius:0;
  font-family:'Playfair Display',Georgia,serif;font-size:16px;color:var(--ink);
  padding:11px 12px;outline:none;transition:border-color .18s;
}
.cc-album input:focus,.cc-album select:focus,.cc-album textarea:focus{border-color:var(--accent);}
.cc-album textarea{resize:vertical;}
.cc-album .alb-money{display:flex;align-items:stretch;border:1px solid var(--line);background:var(--card);}
.cc-album .alb-money>span{
  display:grid;place-items:center;width:38px;border-right:1px solid var(--line);
  font-size:17px;color:var(--soft);
}
.cc-album .alb-money input{border:0;font-size:22px;}
.cc-album .alb-three{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.cc-album .alb-three span{
  display:block;font-family:'GFS Didot',Georgia,serif;
  text-transform:uppercase;letter-spacing:1.6px;font-size:10px;color:var(--soft);margin-bottom:5px;
}
.cc-album .alb-hint{font-size:13px;color:var(--soft);margin:7px 0 4px;line-height:1.5;}
.cc-album .alb-btn{
  display:block;width:100%;margin-top:22px;
  background:var(--accent);color:#fff;border:0;border-radius:0;cursor:pointer;
  font-family:'GFS Didot',Georgia,serif;
  text-transform:uppercase;letter-spacing:2.2px;font-size:13px;padding:16px 20px;
  transition:background .18s;
}
.cc-album .alb-btn:hover{background:#6f2020;}
.cc-album .alb-pay{margin-top:10px;text-align:center;}
.cc-album .cc-hp{position:absolute;left:-9999px;}
.cc-album .cc-note{border:1px solid var(--line);background:var(--card);padding:12px 14px;font-size:15px;margin-bottom:18px;}

/* ---- notes ---- */
.cc-album .alb-notes{margin-top:30px;border-top:1px solid var(--line);}
.cc-album .alb-notes details{border-bottom:1px solid var(--line);}
.cc-album .alb-notes summary{
  cursor:pointer;list-style:none;padding:13px 0;
  font-family:'GFS Didot',Georgia,serif;
  text-transform:uppercase;letter-spacing:2px;font-size:11px;
  display:flex;justify-content:space-between;align-items:center;
}
.cc-album .alb-notes summary::-webkit-details-marker{display:none;}
.cc-album .alb-notes summary:after{content:'+';color:var(--accent);font-size:15px;}
.cc-album .alb-notes details[open] summary:after{content:'\2013';}
.cc-album .alb-notes p{font-size:15px;margin:0 0 15px;color:#2f2822;}

/* ---- more ---- */
.cc-album .alb-more{max-width:1180px;margin:0 auto;padding:10px 26px 70px;}
.cc-album .alb-morek{
  font-family:'GFS Didot',Georgia,serif;
  text-transform:uppercase;letter-spacing:2.6px;font-size:11.5px;
  border-top:1px solid var(--line);padding-top:26px;margin-bottom:20px;
}
.cc-album .alb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.cc-album .alb-card{display:block;text-decoration:none;color:inherit;}
.cc-album .alb-cardimg{
  position:relative;display:block;background:var(--card);padding:12px;
  box-shadow:0 1px 0 rgba(27,23,20,.05), 0 8px 20px rgba(27,23,20,.06);
  transition:transform .2s;
}
.cc-album .alb-card:hover .alb-cardimg{transform:translateY(-3px);}
.cc-album .alb-cardimg img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center top;}
.cc-album .alb-cardimg .alb-corner{width:15px;height:15px;}
.cc-album .alb-cardimg .alb-corner.tl{top:5px;left:5px;}
.cc-album .alb-cardimg .alb-corner.tr{top:5px;right:5px;}
.cc-album .alb-cardimg .alb-corner.bl{bottom:5px;left:5px;}
.cc-album .alb-cardimg .alb-corner.br{bottom:5px;right:5px;}
.cc-album .alb-cardn{display:block;margin-top:11px;font-size:15px;}
.cc-album .alb-cardp{display:block;font-size:12.5px;color:var(--soft);}
/* Two cards can carry the same name — the colourway is what tells them apart. */
.cc-album .alb-cardc{display:block;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);margin-top:1px;}
/* colourway: the name, then a swatch for each of the two, DÔEN's 23px circles */
.cc-album .alb-colour{
  display:flex;align-items:center;gap:12px;
  margin:-2px 0 16px;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);
}
.cc-album .alb-swatches{display:flex;align-items:center;gap:8px;}
.cc-album .alb-swatch{
  display:block;width:23px;height:23px;border-radius:50%;
  background:var(--sw);border:1px solid rgba(27,23,20,.22);
  box-shadow:0 0 0 1px transparent;
  transition:box-shadow .15s,border-color .15s;
}
.cc-album .alb-swatch:hover{border-color:rgba(27,23,20,.5);}
.cc-album .alb-swatch.is-on{box-shadow:0 0 0 1px #fffdf8,0 0 0 2px var(--accent);border-color:rgba(27,23,20,.35);}
.cc-album .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

@media (max-width:900px){
  .cc-album .alb-wrap{grid-template-columns:1fr;gap:34px;}
  .cc-album .alb-rail{position:static;}
  .cc-album .alb-roll{grid-template-columns:repeat(2,1fr);column-gap:14px;row-gap:24px;}
  /* Two columns on a phone. Only a pair of thirds sits side by side; every
     other span takes the full width, so no row template can leave a hole. */
  .cc-album .alb-plateimg,
  .cc-album .alb-w6,
  .cc-album .alb-w4,
  .cc-album .alb-w2{grid-column:span 2;}
  .cc-album .alb-w3{grid-column:span 1;}
  .cc-album .alb-note{font-size:11px;padding:5px 9px 6px;bottom:-11px;max-width:92%;white-space:normal;}
  .cc-album .alb-grid{grid-template-columns:repeat(2,1fr);gap:16px;}
}
@media (max-width:640px){
  .cc-album .alb-wrap,.cc-album .alb-more,.cc-album .alb-top{padding-left:16px;padding-right:16px;}
  .cc-album .alb-plateimg{padding:11px 11px 9px;}
  .cc-album .alb-corner{width:15px;height:15px;top:5px;left:5px;}
}

/* ---- size, the first and only question ---- */
/* Size, set the way DÔEN set it: no boxes, just the letters in a row.
   11/15, a point of tracking, eight pixels either side, and a rule through
   anything that has gone. */
.cc-album .alb-sizes{display:flex;flex-wrap:wrap;gap:0;align-items:center;}
.cc-album .alb-size{cursor:pointer;}
.cc-album .alb-size input{position:absolute;opacity:0;pointer-events:none;}
.cc-album .alb-size span{
  display:flex;align-items:center;height:25px;
  font-size:11px;line-height:15px;letter-spacing:1px;padding:0 8px;
  color:#232323;background:none;border:0;
  text-decoration:none;text-underline-offset:4px;
  transition:opacity .15s;
}
.cc-album .alb-size:hover span{opacity:.6;}
.cc-album .alb-size.on span{text-decoration:underline;}
.cc-album .alb-size.is-unavailable span{text-decoration:line-through;opacity:.45;cursor:default;}
.cc-album .alb-sizes.shake{animation:albShake .45s;}
@keyframes albShake{
  0%,100%{transform:translateX(0);}
  20%{transform:translateX(-5px);} 40%{transform:translateX(5px);}
  60%{transform:translateX(-3px);} 80%{transform:translateX(3px);}
}
.cc-album .alb-err{color:var(--accent);font-size:13px;margin-top:10px;}
.cc-album .alb-step2{margin-top:26px;border-top:1px solid var(--line);padding-top:22px;animation:albIn .3s ease both;}
@keyframes albIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}

.cc-album .alb-hint.is-needed{color:#2f2822;}
.cc-album .alb-hint.is-needed b{color:var(--accent);}

/* ---- the Closet, as the opening spread ---- */
/* DÔEN run the collection almost edge to edge — 10px of air either side and
   no column limit. The header keeps a readable measure of its own. */
.cc-shopalb .alb-wrapx{max-width:none;margin:0;padding:30px 10px 70px;}
.cc-shopalb .shop-head{max-width:760px;margin:0 auto 34px;padding:30px 16px 0;text-align:center;}
.cc-shopalb h1{
  font-family:var(--cc-script),'GFS Didot',Georgia,serif;font-weight:400;
  font-size:42px;line-height:42px;text-align:center;margin:0 0 14px;
}
.cc-shopalb .shop-lede{font-size:13px;line-height:16.9px;text-align:center;color:#333230;margin:0;}

/* A collage, not a contact sheet.
   Twelve columns, and each piece takes a different width, a different shape
   and a different place on the line — with a degree or two of tilt, the way a
   photograph gets pressed into an album by hand. Uniform tiles read as stock;
   this reads as someone's collection. */

/* ------------------------------------------------------------------ *
 * The Closet grid, 1:1 with DÔEN's Heirloom collection.
 *
 * Every number below was read off their live page — the fourteen-beat width
 * cycle, the per-beat image proportions, the 10px mount, the 70% veil at
 * 0.2s on cubic-bezier(.455,.03,.515,.955), the hover-revealed name and price
 * at 12/18 and 14/20. Ours are the photographs and the crest; nothing else
 * here is invented.
 * ------------------------------------------------------------------ */

.cc-shopalb .shop-grid{
  display:flex;flex-wrap:wrap;gap:0;
  margin:0 0 30px;padding:0;list-style:none;
}
.cc-shopalb .shop-item{margin:0;padding:0;list-style:none;width:calc(100% / 3);flex-grow:0;}
.cc-shopalb .shop-wrap{position:relative;display:flex;align-items:center;justify-content:center;width:100%;}

/* the mount: 10px all round, and the plate's proportion lives on the card */
.cc-shopalb .shop-card{
  position:relative;display:flex;width:100%;padding:10px;
  text-decoration:none;color:inherit;
  --ratio:calc(62 / 49 * 100%);
}
.cc-shopalb .shop-main{position:relative;width:100%;}
.cc-shopalb .shop-inner{position:relative;width:100%;padding-bottom:var(--ratio);}
.cc-shopalb .shop-media{position:absolute;inset:0;overflow:hidden;background:var(--card);}
.cc-shopalb .shop-media img{display:block;width:100%;height:100%;object-fit:cover;}

/* the veil — their colour, their alpha, their curve */
.cc-shopalb .shop-media:before{
  content:'';position:absolute;inset:0;width:100%;height:100%;z-index:1;
  background-color:rgba(246,242,230,.7);
  opacity:0;visibility:hidden;
  transition:opacity var(--ease) var(--dur), visibility var(--dur);
}
.cc-shopalb .shop-card:hover .shop-media:before,
.cc-shopalb .shop-card:focus-visible .shop-media:before{
  opacity:1;visibility:visible;
  transition:opacity var(--ease) var(--dur), visibility 0s;
}

/* name, price and crest: nothing until the cursor arrives */
.cc-shopalb .shop-content{
  position:absolute;top:10px;right:10px;bottom:10px;left:10px;width:auto;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  background-color:transparent;z-index:2;pointer-events:none;
  opacity:0;visibility:hidden;
  transition:opacity var(--ease) var(--dur), visibility var(--dur);
}
.cc-shopalb .shop-card:hover .shop-content,
.cc-shopalb .shop-card:focus-visible .shop-content{
  opacity:1;visibility:visible;
  transition:opacity var(--ease) var(--dur), visibility 0s;
}
.cc-shopalb .shop-badges{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;margin-bottom:90px;
}
.cc-shopalb .shop-crest{display:block;width:155px;height:auto;}
.cc-shopalb .shop-info{padding:0;margin-bottom:50px;width:96%;text-align:center;}
.cc-shopalb .shop-n{
  margin:0;font-family:inherit;font-weight:400;
  font-size:12px;line-height:18px;letter-spacing:1.5px;
  text-transform:uppercase;text-align:center;color:inherit;
}
.cc-shopalb .shop-c{display:block;letter-spacing:1.5px;text-transform:uppercase;color:var(--soft);}
.cc-shopalb .shop-p{
  font-size:14px;line-height:20px;letter-spacing:.25px;
  text-transform:uppercase;text-align:center;color:inherit;
}

/* ---- the fourteen-beat cycle (desktop) ---- */
@media (min-width:750px){
  .cc-shopalb .shop-item:nth-child(14n+1),
  .cc-shopalb .shop-item:nth-child(14n+2),
  .cc-shopalb .shop-item:nth-child(14n+6),
  .cc-shopalb .shop-item:nth-child(14n+7){width:50%;flex-grow:0;}

  .cc-shopalb .shop-item:nth-child(14n+3),
  .cc-shopalb .shop-item:nth-child(14n+4),
  .cc-shopalb .shop-item:nth-child(14n+5),
  .cc-shopalb .shop-item:nth-child(14n+8),
  .cc-shopalb .shop-item:nth-child(14n+9),
  .cc-shopalb .shop-item:nth-child(14n+10),
  .cc-shopalb .shop-item:nth-child(14n+12),
  .cc-shopalb .shop-item:nth-child(14n+13),
  .cc-shopalb .shop-item:nth-child(14n+14){width:calc(100% / 3);flex-grow:0;}

  .cc-shopalb .shop-item:nth-child(14n+11){width:100%;}

  .cc-shopalb .shop-item:nth-child(14n+1) .shop-card,
  .cc-shopalb .shop-item:nth-child(14n+7) .shop-card{--ratio:calc(456 / 365 * 100%);}

  /* the three framed beats sit smaller inside their column, and lift */
  .cc-shopalb .shop-item:nth-child(14n+2) .shop-card{
    --ratio:calc(307 / 233 * 100%);
    width:70%;margin-right:10px;margin-top:-15px;padding:0;
  }
  .cc-shopalb .shop-item:nth-child(14n+2) .shop-main{padding:18px 22px 22px;}

  .cc-shopalb .shop-item:nth-child(14n+6) .shop-card{
    --ratio:calc(311 / 235 * 100%);
    width:calc((100% - 16px) * .65);margin-left:16px;margin-top:-18px;padding:0;
  }
  .cc-shopalb .shop-item:nth-child(14n+6) .shop-main{padding:22px;}
  .cc-shopalb .shop-item:nth-child(14n+6) .shop-info{padding:22px;}
  .cc-shopalb .shop-item:nth-child(14n+6) .shop-badges{transform:translate(-50%,-80%);}

  .cc-shopalb .shop-item:nth-child(14n+11) .shop-card{
    --ratio:calc(45 / 74 * 100%);padding:10px;
  }

}

/* ---- the frame: three drawings, three beats ----
   Which beats carry a frame is DÔEN's rhythm. The drawings are ours, torn
   from the crest's own paper. */
.cc-shopalb .shop-fr{position:absolute;inset:0;height:100%;width:100%;pointer-events:none;display:none;z-index:3;}
.cc-shopalb .shop-fr .fr{position:absolute;inset:0;display:none;background-repeat:no-repeat;background-size:100% 100%;}
.cc-shopalb .shop-item:nth-child(14n+2) .shop-fr,
.cc-shopalb .shop-item:nth-child(14n+6) .shop-fr,
.cc-shopalb .shop-item:nth-child(14n+11) .shop-fr{display:block;}
.cc-shopalb .shop-item:nth-child(14n+2) .shop-fr .fr--1{display:block;background-image:url('../images/frames/frame-1.svg');}
.cc-shopalb .shop-item:nth-child(14n+6) .shop-fr .fr--2{display:block;background-image:url('../images/frames/frame-2.svg');}
.cc-shopalb .shop-item:nth-child(14n+11) .shop-fr .fr--3{display:block;background-image:url('../images/frames/frame-3.svg');}

/* the empty mount keeps the cycle but says what it is */
.cc-shopalb .shop-blank{
  display:grid;place-items:center;
  background:repeating-linear-gradient(45deg,#fffdf8 0 10px,#f7f1e7 10px 20px);
  border:1px dashed var(--line);
}
.cc-shopalb .shop-blanktext{
  font-family:'GFS Didot',Georgia,serif;
  text-transform:uppercase;letter-spacing:2.4px;font-size:11px;color:var(--soft);
}
.cc-shopalb .shop-foot{
  margin-top:20px;border-top:1px solid var(--line);padding-top:18px;
  font-style:italic;font-size:14.5px;color:var(--soft);text-align:center;
}

/* ---- DÔEN's phone collage: half-plus-fifteen, bleeding off both edges ---- */
@media (max-width:749px){
  .cc-shopalb .alb-wrapx{padding:22px 10px 56px;}
  .cc-shopalb .shop-item{width:100%;}
  .cc-shopalb .shop-item:nth-child(14n+3),
  .cc-shopalb .shop-item:nth-child(14n+4),
  .cc-shopalb .shop-item:nth-child(14n+5),
  .cc-shopalb .shop-item:nth-child(14n+6),
  .cc-shopalb .shop-item:nth-child(14n+10),
  .cc-shopalb .shop-item:nth-child(14n+11),
  .cc-shopalb .shop-item:nth-child(14n+12),
  .cc-shopalb .shop-item:nth-child(14n+13){
    width:calc(100% / 2 + 15px);flex-grow:0;
  }
  .cc-shopalb .shop-item:nth-child(14n+3) .shop-wrap,
  .cc-shopalb .shop-item:nth-child(14n+4) .shop-wrap,
  .cc-shopalb .shop-item:nth-child(14n+5) .shop-wrap,
  .cc-shopalb .shop-item:nth-child(14n+6) .shop-wrap,
  .cc-shopalb .shop-item:nth-child(14n+10) .shop-wrap,
  .cc-shopalb .shop-item:nth-child(14n+11) .shop-wrap,
  .cc-shopalb .shop-item:nth-child(14n+12) .shop-wrap,
  .cc-shopalb .shop-item:nth-child(14n+13) .shop-wrap{align-items:flex-start;}
  .cc-shopalb .shop-item:nth-child(14n+3),
  .cc-shopalb .shop-item:nth-child(14n+5),
  .cc-shopalb .shop-item:nth-child(14n+10),
  .cc-shopalb .shop-item:nth-child(14n+12){margin-left:-30px;margin-right:30px;}
  .cc-shopalb .shop-item:nth-child(14n+4),
  .cc-shopalb .shop-item:nth-child(14n+6),
  .cc-shopalb .shop-item:nth-child(14n+11),
  .cc-shopalb .shop-item:nth-child(14n+13){margin-right:-30px;}
  .cc-shopalb .shop-item:nth-child(14n+4) .shop-card,
  .cc-shopalb .shop-item:nth-child(14n+6) .shop-card,
  .cc-shopalb .shop-item:nth-child(14n+11) .shop-card,
  .cc-shopalb .shop-item:nth-child(14n+13) .shop-card{
    margin-left:0;margin-right:0;width:100%;
    --ratio:calc(421 / 313 * 100%);
  }
  .cc-shopalb .shop-item:nth-child(14n+2) .shop-main,
  .cc-shopalb .shop-item:nth-child(14n+6) .shop-main,
  .cc-shopalb .shop-item:nth-child(14n+11) .shop-main{padding:19px 18px;}
  .cc-shopalb .shop-item:nth-child(14n+11) .shop-main{padding:14px;}
  .cc-shopalb .shop-crest{width:110px;}
  .cc-shopalb .shop-badges{margin-bottom:60px;}
  .cc-shopalb .shop-info{margin-bottom:26px;}
}

/* ------------------------------------------------------------------ *
 * Heirloom mechanics.
 *
 * Two things are copied from DÔEN's Heirloom collection deliberately,
 * because they are mechanics rather than artwork:
 *   1. which cards are framed — items 2, 6 and 11 of every fourteen,
 *      each of the three positions using a different drawing;
 *   2. the hover: a cream veil at 70% and a mark, both fading 0 to 1 over
 *      0.2s on cubic-bezier(.455,.03,.515,.955).
 * The frames and the mark are ours — drawn from the crest.
 * ------------------------------------------------------------------ */

.cc-album{
  --veil:#f6f2e6;
  --veil-a:.7;
  --dur:.2s;
  --ease:cubic-bezier(.455,.03,.515,.955);
}


/* the veil */
.cc-album .shop-veil{
  position:absolute;inset:16px;z-index:2;
  background:var(--veil);opacity:0;visibility:hidden;
  transition:opacity var(--ease) var(--dur), visibility var(--dur);
  pointer-events:none;
}
.cc-album .shop-card:hover .shop-veil,
.cc-album .shop-card:focus-visible .shop-veil,
.cc-album .alb-card:hover .shop-veil,
.cc-album .alb-card:focus-visible .shop-veil{
  opacity:var(--veil-a);visibility:visible;
  transition:opacity var(--ease) var(--dur), visibility 0s;
}

/* the crest, in colour — it is the whole point that it is not a grey mark */
.cc-album .shop-mark{
  position:absolute;inset:16px;z-index:3;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  opacity:0;visibility:hidden;
  transition:opacity var(--ease) var(--dur), visibility var(--dur);
  pointer-events:none;
}
/* A third of DÔEN's 155px. At this size a full-colour crest would be mud —
   drawn as outline it still reads as the crest. */
.cc-album .shop-mark img{
  width:52px;max-width:34%;height:auto;
  object-fit:contain;
}
.cc-album .shop-marktext{
  font-family:'GFS Didot',Georgia,serif;
  text-transform:uppercase;letter-spacing:2.2px;font-size:9.5px;color:#3b332b;
  -webkit-font-smoothing:auto;white-space:nowrap;
}
.cc-album .shop-card:hover .shop-mark,
.cc-album .shop-card:focus-visible .shop-mark,
.cc-album .alb-card:hover .shop-mark,
.cc-album .alb-card:focus-visible .shop-mark{
  opacity:1;visibility:visible;
  transition:opacity var(--ease) var(--dur), visibility 0s;
}

/* ---- the frame: a torn sheet laid over the photograph ----
   DÔEN's frames are a hand-torn paper opening, not ornament. That is why they
   survive being stretched across cards of different shapes — a ragged edge has
   no proportions to get wrong. The tear is ours (walked and jittered per
   drawing, so no two edges repeat), and the only ornament is one symbol lifted
   straight off the crest: the three stars, the crescent from the window, the
   rose. */
.cc-album .shop-frame{position:absolute;inset:0;z-index:4;display:none;pointer-events:none;
  --fr-sheet:none;--fr-mark:none;}
.cc-album .fr-sheet{
  position:absolute;inset:0;
  background-image:var(--fr-sheet);
  background-size:100% 100%;background-repeat:no-repeat;
  filter:drop-shadow(0 1px 1px rgba(27,23,20,.10));
}
.cc-album .fr-mark{
  position:absolute;top:0;left:0;right:0;height:16%;max-height:58px;
  background-image:var(--fr-mark);
  background-size:auto 68%;background-repeat:no-repeat;background-position:center 26%;
}

/* Which cards wear one, and which tear each wears. */
.cc-album .shop-grid .shop-card:nth-child(14n+2) .shop-frame,
.cc-album .shop-grid .shop-card:nth-child(14n+6) .shop-frame,
.cc-album .shop-grid .shop-card:nth-child(14n+11) .shop-frame,
.cc-album .alb-grid .alb-card:nth-child(14n+2) .shop-frame,
.cc-album .alb-grid .alb-card:nth-child(14n+6) .shop-frame,
.cc-album .alb-grid .alb-card:nth-child(14n+11) .shop-frame{display:block;}

.cc-album .shop-grid .shop-card:nth-child(14n+2) .shop-frame,
.cc-album .alb-grid .alb-card:nth-child(14n+2) .shop-frame{
  --fr-sheet:url('../images/frames/frame-1.svg');
  --fr-mark:url('../images/frames/frame-1-mark.svg');
}
.cc-album .shop-grid .shop-card:nth-child(14n+6) .shop-frame,
.cc-album .alb-grid .alb-card:nth-child(14n+6) .shop-frame{
  --fr-sheet:url('../images/frames/frame-2.svg');
  --fr-mark:url('../images/frames/frame-2-mark.svg');
}
.cc-album .shop-grid .shop-card:nth-child(14n+11) .shop-frame,
.cc-album .alb-grid .alb-card:nth-child(14n+11) .shop-frame{
  --fr-sheet:url('../images/frames/frame-3.svg');
  --fr-mark:url('../images/frames/frame-3-mark.svg');
}

@media (max-width:640px){
  .cc-shopalb .shop-veil,.cc-album .shop-mark{inset:10px;}
  .cc-album .fr-mark{height:18%;}
  .cc-album .shop-mark img{width:40px;}
}

/* "More from the Closet" uses a 12px mount rather than the Closet's 16px. */
.cc-album .alb-cardimg{position:relative;overflow:hidden;}
.cc-album .alb-cardimg .shop-veil,
.cc-album .alb-cardimg .shop-mark{inset:12px;}
.cc-album .alb-cardimg .shop-mark img{width:44px;}
.cc-album .alb-cardimg .shop-marktext{font-size:8.5px;letter-spacing:1.8px;}
.cc-album .alb-cardimg .fr-mark{height:18%;}
@media (max-width:640px){
  .cc-album .alb-cardimg .shop-veil,
  .cc-album .alb-cardimg .shop-mark{inset:8px;}
  .cc-album .alb-cardimg .shop-mark img{width:34px;}
}

/* ---- the film, mounted in the roll like any other plate ---- */
.cc-album .alb-film{position:relative;cursor:pointer;overflow:hidden;}
.cc-album .alb-film video{display:block;width:100%;height:auto;}
.cc-album .alb-film:after{
  content:'';position:absolute;inset:18px;
  background:rgba(27,23,20,.30);
  transition:background var(--ease) .3s;pointer-events:none;
}
.cc-album .alb-film.is-on:after{background:transparent;}
.cc-album .alb-film .play{
  position:absolute;left:50%;top:calc(50% - 8px);transform:translate(-50%,-50%);
  width:66px;height:66px;border:1.5px solid rgba(255,255,255,.9);border-radius:50%;
  background:rgba(27,23,20,.22);backdrop-filter:blur(2px);
  transition:opacity .3s ease,transform .2s ease,background .2s ease;pointer-events:none;
}
.cc-album .alb-film .play:before{
  content:'';position:absolute;left:52%;top:50%;transform:translate(-50%,-50%);
  border-style:solid;border-width:10px 0 10px 16px;
  border-color:transparent transparent transparent #fff;
}
.cc-album .alb-film:hover .play{transform:translate(-50%,-50%) scale(1.06);background:rgba(143,44,44,.55);}
.cc-album .alb-film.is-on .play{opacity:0;}
@media (max-width:640px){
  .cc-album .alb-film:after{inset:11px;}
  .cc-album .alb-film .play{width:54px;height:54px;}
}


/* ---- save: the small bookmark DÔEN put on their cards ---- */
.cc-shopalb .shop-save{
  position:absolute;top:18px;right:18px;z-index:5;
  width:26px;height:26px;padding:0;border:0;background:none;cursor:pointer;
  color:#333230;opacity:0;visibility:hidden;
  transition:opacity var(--ease) var(--dur), visibility var(--dur);
}
.cc-shopalb .shop-wrap:hover .shop-save,
.cc-shopalb .shop-save:focus-visible,
.cc-shopalb .shop-save.is-on{opacity:1;visibility:visible;transition:opacity var(--ease) var(--dur), visibility 0s;}
.cc-shopalb .shop-save svg{display:block;width:20px;height:20px;margin:3px;}
.cc-shopalb .shop-save svg path{fill:none;stroke:currentColor;stroke-width:1.2;}
.cc-shopalb .shop-save.is-on svg path{fill:currentColor;}
.cc-shopalb .shop-save:hover{color:var(--accent);}
@media (max-width:749px){
  .cc-shopalb .shop-save{opacity:1;visibility:visible;top:12px;right:12px;}
}

.cc-shopalb .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* the script face, on names only — never on running text */
.cc-album .alb-rail h1{
  font-family:var(--cc-script),'GFS Didot',Georgia,serif;
  font-size:42px;line-height:1.02;letter-spacing:0;text-transform:none;
}
/* The card name stays in DÔEN's small caps: a copperplate script at 12px,
   tracked and uppercased inside a hover veil, cannot be read. The script face
   earns its place on the two titles, where it is large enough to be a name. */
@media (max-width:749px){
  .cc-album .alb-rail h1{font-size:34px;}
  .cc-shopalb h1{font-size:34px;line-height:34px;}
}