/* Farshkadeh public site: quiet, warm, fast. One stylesheet, no frameworks. */
@font-face { font-family: "Vazirmatn"; src: url("fonts/Vazirmatn-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --ink: #1b1614;
  --ink-2: #453a34;
  --muted: #62564b;
  --line: #d3c4aa;
  --cream: #e8dcc8;
  --paper: #f2e9d9;
  --wine: #6a0f1c;
  --wine-deep: #4c0913;
  --gold: #a98a4c;
  --gold-text: #7a5f2c;
  --gold-soft: #ddcfb6;
  --royal: #122850;
  --night: #0b0807;
  --royal-deep: #0b1a35;
  --good: #2f6b4f;
  --bad: #a23a2e;
  --serif: "Cormorant", "Iowan Old Style", Georgia, serif;
  --sans: "Vazirmatn", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --radius: 2px;
  --wrap: 1240px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 300 16px/1.85 var(--sans); }
[dir="ltr"] body, body[dir="ltr"] { line-height: 1.7; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--wine); }
h1, h2, h3 { font-weight: 300; line-height: 1.35; margin: 0 0 .5em; }
[dir="ltr"] h1, [dir="ltr"] h2, [dir="ltr"] .display { font-family: var(--serif); font-weight: 500; letter-spacing: .01em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.eyebrow { font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--gold-text); font-weight: 500; }
[dir="rtl"] .eyebrow { letter-spacing: .05em; font-size: 13px; }
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }
.ltr { direction: ltr; unicode-bidi: isolate; }

/* header */
.top { position: sticky; top: 0; z-index: 20; background: rgba(242, 233, 217, .97); backdrop-filter: blur(8px);
       border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 36px; height: 128px; }
.logo { display: flex; flex-direction: column; line-height: 1; }
.logo .en { font-family: var(--serif); font-size: 22px; letter-spacing: .32em; color: var(--ink); font-weight: 500; }
.logo .fa { font-size: 11px; color: var(--muted); margin-top: 5px; letter-spacing: .02em; }
.logo img { height: 108px; width: auto; }
.nav { display: flex; gap: 26px; font-size: 14px; font-weight: 400; color: var(--ink-2); }
.nav a { padding: 6px 0; border-bottom: 1px solid transparent; }
.nav a.on, .nav a:hover { border-color: var(--gold); color: var(--ink); }
.tools { margin-inline-start: auto; display: flex; gap: 14px; align-items: center; font-size: 13px; color: var(--ink-2); }
.tools .sep { width: 1px; height: 14px; background: var(--line); }
.tools a.on { color: var(--wine); font-weight: 500; }
.lang { display: inline-flex; align-items: center; border: 1px solid var(--line); background: var(--paper); }
.lang a, .lang > span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; font-size: 13px; transition: background .2s; }
.lang > span.on { background: var(--gold-soft); color: var(--ink); font-weight: 500; }
.lang a { opacity: .7; }
.lang a:hover { opacity: 1; background: var(--cream); }
.flag { display: block; flex: none; width: 21px; height: 14px; box-shadow: 0 0 0 1px rgba(34, 28, 26, .18); }
.burger { display: none; background: none; border: 0; padding: 8px; cursor: pointer; color: var(--ink); }
.burger span { display: block; width: 22px; height: 1px; background: currentColor; margin: 6px 0; }

/* buttons and forms */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 26px; border: 1px solid var(--wine);
       background: var(--wine); color: var(--paper); font: 400 14px var(--sans); cursor: pointer; border-radius: var(--radius);
       transition: background .2s, color .2s; letter-spacing: .02em; }
.btn:hover { background: var(--wine-deep); border-color: var(--wine-deep); color: #fff; }
.btn.ghost { background: transparent; color: var(--royal); border-color: var(--royal); }
.btn.ghost:hover { background: var(--royal); border-color: var(--royal); color: var(--paper); }
.btn.gold { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--royal); outline-offset: 2px; }
.btn.small { padding: 8px 16px; font-size: 13px; }
.btn.block { width: 100%; }
label { display: block; font-size: 13px; color: var(--ink-2); margin: 14px 0 6px; font-weight: 400; }
input, select, textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  font: 400 15px var(--sans); border-radius: var(--radius); outline: none; transition: border-color .2s; }
input:focus, select:focus, textarea:focus { border-color: var(--gold); }
textarea { min-height: 96px; resize: vertical; }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.notice { padding: 14px 18px; background: var(--gold-soft); border-inline-start: 2px solid var(--gold); margin: 16px 0; font-size: 14px; }
.notice.ok { background: #e6efe9; border-color: var(--good); }
.notice.err { background: #f6e3df; border-color: var(--bad); }
.errorlist { list-style: none; padding: 0; margin: 4px 0 0; color: var(--bad); font-size: 13px; }

/* hero */
.hero { position: relative; overflow: hidden; background: var(--night); color: var(--paper); }
.hero .wrap { display: grid; grid-template-columns: 1fr 1fr; align-items: center; min-height: min(760px, calc(100vh - 128px)); gap: 40px; padding-block: 40px; }
.hero .eyebrow { font-size: clamp(30px, 3.6vw, 44px); font-weight: 400; letter-spacing: .04em; text-transform: none; color: #e6c98f; }
.hero h1 { font-size: clamp(26px, 3.2vw, 40px); margin: 10px 0 18px; color: var(--paper); }
.hero h1 em { font-style: normal; color: var(--paper); }
[dir="ltr"] .hero h1 em { font-style: italic; }
.hero p { max-width: 480px; color: #dcd3c2; font-size: 17px; }
.hero .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.hero .btn.ghost { color: var(--paper); border-color: #e6c98f; }
.hero .btn.ghost:hover { background: #e6c98f; border-color: #e6c98f; color: var(--night); }
.hero a:focus-visible { outline-color: #e6c98f; }
.hero .art { justify-self: center; width: min(640px, 100%); }
.hero .art img { width: 100%; height: auto; }

/* home: next auction, collections, featured piece */
.auction-band { padding: 56px 0; background: var(--night); color: var(--paper); }
.auction-band .wrap { display: grid; grid-template-columns: minmax(0, 340px) 1fr; gap: 48px; align-items: center; }
.auction-art img { width: 100%; max-height: 420px; object-fit: contain; }
.auction-band .eyebrow { color: #e6c98f; }
.auction-band h2 { color: var(--paper); }
.count-label { margin: 18px 0 8px; opacity: .8; }
.timer { display: flex; gap: 12px; margin-bottom: 24px; }
.timer div { min-width: 76px; padding: 12px 8px; text-align: center; border: 1px solid rgba(230, 201, 143, .4); }
.timer b { display: block; font-size: 34px; font-weight: 500; line-height: 1.2; font-variant-numeric: tabular-nums; color: #e6c98f; }
.timer small { font-size: 12px; opacity: .8; }
.collections { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.collections a { position: relative; grid-column: span 2; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper); border: 1px solid var(--line); color: inherit; text-decoration: none; }
.collections a:nth-child(n + 4) { grid-column: span 3; aspect-ratio: 16 / 10; }
.collections img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.collections a:hover img { transform: scale(1.03); }
.collections span { position: absolute; inset: auto 0 0; display: block; padding: 40px 18px 16px; background: linear-gradient(to top, rgba(11, 8, 7, .82), rgba(11, 8, 7, 0)); color: var(--paper); }
.collections strong { display: block; font-size: 20px; font-weight: 500; }
.collections small { font-size: 13px; opacity: .85; }
.spotlight .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.spotlight img { width: 100%; max-height: 560px; object-fit: contain; }
@media (max-width: 820px) {
  .auction-band .wrap, .spotlight .wrap { grid-template-columns: 1fr; gap: 24px; }
  .collections { grid-template-columns: 1fr 1fr; gap: 12px; }
  .collections a, .collections a:nth-child(n + 4) { grid-column: span 1; aspect-ratio: 4 / 5; }
  .timer { gap: 8px; }
  .timer div { flex: 1; min-width: 0; }
  .timer b { font-size: 26px; }
}
.hall { position: relative; background: var(--night); }
.hall img { width: 100%; max-height: 640px; object-fit: cover; opacity: .8; }
.hall:after { content: ""; position: absolute; inset: 0; background: linear-gradient(to left, rgba(11, 8, 7, .85), rgba(11, 8, 7, 0) 65%); }
[dir="ltr"] .hall:after { background: linear-gradient(to right, rgba(11, 8, 7, .85), rgba(11, 8, 7, 0) 65%); }
.hall-text { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; color: var(--paper); }
.hall-text .eyebrow { color: #e6c98f; }
.hall-text h2 { font-size: clamp(26px, 3.4vw, 42px); margin: 8px 0 22px; }
.about-hero { position: relative; background: var(--night); overflow: hidden; }
.about-hero img { width: 100%; height: clamp(320px, 62vh, 640px); object-fit: cover; object-position: center top; opacity: .92; animation: drift 24s ease-in-out infinite alternate; }
.about-hero:after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11, 8, 7, .78), rgba(11, 8, 7, 0) 60%); }
.about-title { position: absolute; inset: auto 0 34px; z-index: 1; color: var(--paper); }
.about-title .eyebrow { color: #e6c98f; }
.about-title h1 { margin: 6px 0 0; font-size: clamp(32px, 5vw, 56px); }
.about-text { max-width: 720px; margin: 0 auto; padding: 56px 20px 96px; }
.about-text p { color: var(--ink-2); font-size: 17px; line-height: 2.1; }
.about-text .about-lead { color: var(--ink); font-size: clamp(20px, 2.4vw, 26px); line-height: 1.9; }
.about-text .btn { margin-top: 18px; }

/* sections */
section.block { padding: 104px 0; }
section.block.alt { background: var(--paper); border-block: 1px solid var(--line); }
.head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 36px; flex-wrap: wrap; }
.head h2 { font-size: clamp(26px, 3vw, 36px); margin: 6px 0 0; }
.link-arrow { font-size: 14px; border-bottom: 1px solid var(--gold); padding-bottom: 2px; }

/* carpet grid */
.grid { display: grid; gap: 36px 24px; grid-template-columns: repeat(4, 1fr); }
.card .pic { position: relative; aspect-ratio: 3 / 4; background: var(--gold-soft) url("img/weave.svg") center / 64px; overflow: hidden; }
.card .pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.card:hover .pic img { transform: scale(1.035); }
.card .badge { position: absolute; top: 12px; inset-inline-start: 12px; background: var(--paper); font-size: 12px; padding: 3px 10px; }
.card .meta { padding-top: 14px; }
.card .title { font-size: 16px; font-weight: 400; }
[dir="ltr"] .card .title { font-family: var(--serif); font-size: 20px; font-weight: 500; }
.card .sub { font-size: 13px; color: var(--muted); }
.card .price { font-size: 14px; margin-top: 4px; color: var(--ink); font-weight: 400; }

/* kinds strip */
.kinds { display: flex; gap: 10px; flex-wrap: wrap; }
.kinds a { border: 1px solid var(--line); padding: 10px 18px; font-size: 14px; background: var(--paper); }
.kinds a:hover { border-color: var(--gold); }
.kinds a small { color: var(--muted); margin-inline-start: 6px; }

/* three pillars */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.pillar { border-top: 1px solid var(--gold); padding-top: 22px; }
.pillar h3 { font-size: 19px; font-weight: 400; }
[dir="ltr"] .pillar h3 { font-family: var(--serif); font-size: 24px; font-weight: 500; }
.pillar p { color: var(--ink-2); font-size: 15px; margin: 0 0 12px; }

/* services */
.services-head { padding-top: 44px; padding-bottom: 28px; max-width: 760px; text-align: center; }
.services-head h1 { font-size: clamp(28px, 3.4vw, 40px); margin: 6px 0 8px; }
.services-head p { margin: 0; color: var(--ink-2); font-size: 15px; }
.service-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding-bottom: 56px; }
.service-card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); overflow: hidden; transition: border-color .25s, transform .3s, box-shadow .3s; }
.service-card:hover { border-color: var(--gold); transform: translateY(-3px); box-shadow: 0 12px 24px rgba(34, 28, 26, .1); }
.service-card img, .cert-art { width: 100%; height: 170px; object-fit: cover; }
.service-card .body { display: flex; flex-direction: column; flex: 1; gap: 8px; padding: 16px; }
.service-card h2 { margin: 0; font-size: 17px; font-weight: 400; }
.service-card p { flex: 1; margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.8; }
.service-card .link-arrow { align-self: flex-start; font-size: 13px; }
.cert-art { display: grid; place-items: center; background: var(--royal-deep); }
.cert-card { position: relative; display: grid; gap: 9px; align-content: center; width: 112px; height: 136px; padding: 0 16px; background: var(--paper); box-shadow: 0 0 0 1px var(--gold), 0 10px 18px rgba(0, 0, 0, .35); }
.cert-card:before { content: ""; position: absolute; inset: 4px; border: 1px solid var(--gold-soft); }
.cert-line { height: 1px; background: var(--muted); opacity: .6; }
.cert-line.short { width: 60%; }
.cert-seal { position: absolute; inset-inline-end: 10px; bottom: 10px; width: 28px; height: 28px; border-radius: 50%; background: var(--wine); box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--gold); }
.photo-credit { margin-top: 26px; font-size: 12px; color: var(--muted); }
.photo-credit a { text-decoration: underline; text-underline-offset: 2px; }

.portal-door { padding-top: 56px; padding-bottom: 90px; }
.portal-door h1 { font-size: clamp(28px, 3.6vw, 42px); }
.portal-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 26px 0; }
.portal-cards article { display: flex; flex-direction: column; align-items: flex-start; padding: 28px; background: var(--paper); border: 1px solid var(--line); }
.portal-cards h2 { font-size: 22px; font-weight: 400; margin: 0 0 8px; }
.portal-cards p { flex: 1; margin: 0 0 18px; color: var(--ink-2); }

/* catalog */
.catalog-head { padding-top: 56px; }
.catalog-head h1 { font-size: clamp(30px, 4vw, 44px); margin-bottom: 30px; }
.product-tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.product-tabs a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 12px 20px; background: var(--paper); border: 1px solid var(--line); font-size: 16px; color: var(--ink); text-align: center; transition: border-color .25s, background .25s, color .25s, transform .3s, box-shadow .3s; }
.product-tabs a:before { content: ""; position: absolute; inset: 5px; border: 1px solid var(--gold-soft); pointer-events: none; transition: border-color .25s; }
.product-tabs a:hover { border-color: var(--gold); color: var(--ink); transform: translateY(-3px); box-shadow: 0 12px 22px rgba(34, 28, 26, .08); }
.product-tabs a:hover .motif { animation: weave .8s steps(16); }
.product-tabs a:hover:before { border-color: var(--gold); }
.product-tabs a.on { background: var(--wine); border-color: var(--wine); color: var(--paper); }
.product-tabs a.on:before { border-color: rgba(230, 201, 143, .45); }
.product-tabs a.on .motif { color: #e6c98f; }
.product-tabs.compact a { flex-direction: row; justify-content: center; padding: 14px 12px; font-size: 15px; }
.product-tabs.compact .motif { width: 20px; height: 20px; }
.motif { display: block; flex: none; width: 30px; height: 30px; color: var(--gold); shape-rendering: crispEdges; }
.catalog { padding-top: 22px; padding-bottom: 96px; }
.filter-bar { position: relative; display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; padding-bottom: 20px; }
.filter summary { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 16px; list-style: none; cursor: pointer; background: var(--paper); border: 1px solid var(--line); font-size: 14px; font-weight: 400; color: var(--ink-2); white-space: nowrap; transition: border-color .2s, color .2s; }
.filter summary::-webkit-details-marker { display: none; }
.filter summary:after { content: ""; width: 5px; height: 5px; margin-top: -3px; border-inline-end: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); opacity: .6; }
.filter summary:hover, .filter[open] summary, .filter.active summary { border-color: var(--gold); color: var(--ink); }
.filter summary b { max-width: 150px; overflow: hidden; text-overflow: ellipsis; font-weight: 400; color: var(--wine); }
.filter-panel { position: absolute; z-index: 15; top: calc(100% - 12px); inset-inline: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 36px; padding: 26px 28px; background: var(--paper); border: 1px solid var(--gold); box-shadow: 0 18px 36px rgba(34, 28, 26, .1); animation: quiet .2s ease; }
@keyframes quiet { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* The small rugs roll open along the reading direction; options arrive in a soft wave. */
@keyframes unroll { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes unroll-ltr { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes arrive { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes weave { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
.filter[open] .options a { animation: arrive .4s ease calc(var(--i, 0) * 22ms) backwards; }
.rug-art { display: block; flex: none; overflow: visible; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.filter[open] .rug-art { animation: unroll .7s cubic-bezier(.3, .7, .2, 1) calc(var(--i, 0) * 45ms + .08s) backwards; }
[dir="ltr"] .filter[open] .rug-art { animation-name: unroll-ltr; }
.rg-edge { fill: var(--rg-edge, var(--wine)); }
.rg-border { fill: var(--rg-border, #e6c98f); }
.rg-field { fill: var(--rg-field, var(--royal)); transition: fill .3s; }
.rg-medallion { fill: var(--rg-ink, #e6c98f); shape-rendering: crispEdges; transform-box: fill-box; transform-origin: center; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.rg-beads { fill: none; stroke: var(--paper); stroke-width: 1; stroke-dasharray: 1 3; opacity: .7; }
.rg-corner { fill: #e6c98f; opacity: .85; }
.rg-fringe { fill: none; stroke: var(--gold); stroke-width: 2; stroke-dasharray: 1 1.2; }
.art-box { display: grid; place-items: center; flex: 0 0 46px; min-height: 26px; font-weight: 400; }
.options.rows a:hover .rug-art { transform: scale(1.14); }
.options a:hover .rg-medallion { transform: scale(1.2); }
.filter-section h4 { margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--gold-soft); font-size: 14px; font-weight: 500; color: var(--gold-text); }
.filter-section h4:empty { display: none; }
.filter-section .options { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.filter-section .options a { display: block; padding: 8px 10px; border: 1px solid var(--line); font-size: 14px; color: var(--ink-2); text-align: center; transition: border-color .2s, color .2s, background .2s; }
.filter-section .options a:hover { border-color: var(--gold); color: var(--ink); }
.filter-section .options a.on { background: var(--wine); border-color: var(--wine); color: var(--paper); }
.filter-panel-size { grid-template-columns: 1.5fr .8fr 1.05fr 1.05fr; gap: 0 28px; }
.filter-panel-material { grid-template-columns: 5fr 3fr; }
.filter-section .options.rows { display: block; }
.filter-section .options.rows a { display: flex; align-items: center; gap: 12px; padding: 6px 6px; border: 0; border-bottom: 1px solid var(--line); text-align: start; }
.filter-section .options.rows a:last-child { border-bottom: 0; }
.filter-section .options.rows a:hover { background: var(--cream); }
.filter-section .options.rows small { margin-inline-start: auto; font-size: 12px; color: var(--muted); white-space: nowrap; }
.filter-section .options.rows a.on small { color: #e6c98f; }
.filter-section .options.squares, .filter-section .options.rounds { grid-template-columns: repeat(4, 42px); justify-content: space-between; gap: 8px; }
/* Shape cards: the rug lies back on the floor when you reach for it, and its fringe ripples. */
.filter-section .options.shapes { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.filter-section .options.shapes a { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 14px; min-height: 142px; padding: 18px 10px 14px; perspective: 340px; }
.filter-section .options.shapes a:hover { background: var(--cream); }
.filter-section .options.shapes a.on { background: var(--cream); border-color: var(--gold); color: var(--wine); }
.filter-section .options.shapes a:hover .rug-art { transform: rotateX(26deg) translateY(-3px) scale(1.04); filter: drop-shadow(0 12px 7px rgba(34, 28, 26, .28)); }
.rug-art { transition: transform .45s cubic-bezier(.2, .7, .2, 1), filter .45s; }
/* Style: each rug tells its age. Vintage and antique regain their colour when you reach for them. */
.tone-vintage { filter: sepia(.55) saturate(.75) brightness(1.08); }
.tone-antique { filter: sepia(1) saturate(.55) contrast(.92) brightness(.92); }
.options.shapes a:hover .tone-vintage, .options.shapes a:hover .tone-antique { filter: none drop-shadow(0 12px 7px rgba(34, 28, 26, .28)); }
.rg-line { fill: none; stroke: #e6c98f; stroke-width: 2; stroke-dasharray: 110; }
@keyframes draw { from { stroke-dashoffset: 110; } to { stroke-dashoffset: 0; } }
.options.shapes a:hover .rg-line { animation: draw .9s ease; }
.rg-spiral { fill: none; stroke: #e6c98f; stroke-width: 1.800; stroke-dasharray: 90; }
.options.shapes a:hover .rg-spiral { animation: spiral 1s ease; }
@keyframes spiral { from { stroke-dashoffset: 90; } to { stroke-dashoffset: 0; } }
.rg-wood { fill: #7a5a3a; }
.rg-warp { fill: none; stroke: #b9a988; stroke-width: 1; }
.rg-woven { transition: none; }
.options.shapes a:hover .rg-woven { animation: grow 1.1s steps(9); }
@keyframes grow { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
.options.shapes a:hover .rug-loom { transform: none; filter: none; }
.bench-art { display: block; flex: none; }
.product-tabs a:hover .bench-art { animation: settle-bench .6s cubic-bezier(.3, .7, .2, 1); }
@keyframes settle-bench { 0% { transform: translateY(0); } 40% { transform: translateY(-4px); } 100% { transform: translateY(0); } }
.product-tabs.compact .bench-art { width: 32px; height: 20px; }
.filter-section .options.regions { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.filter-section .options.regions a { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 14px 4px 10px; font-size: 13px; line-height: 1.5; perspective: 240px; }
.filter-section .options.regions a:hover { background: var(--cream); }
.filter-section .options.regions a:hover .rug-art { transform: rotateX(24deg) translateY(-2px) scale(1.06); filter: drop-shadow(0 8px 5px rgba(34, 28, 26, .26)); }
.options.regions .rg-fringe { stroke-width: 4; stroke-dasharray: 1.200 2; }
.options.regions a:hover .rg-fringe { animation: ripple .9s linear infinite; }
.filter-section .options.squares a, .filter-section .options.rounds a { position: relative; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; background: none; font-size: 13px; }
.filter-section .options.squares .rug-art, .filter-section .options.rounds .rug-art { grid-area: 1 / 1; }
.cell-number { grid-area: 1 / 1; z-index: 1; color: var(--paper); font-variant-numeric: tabular-nums; }
.filter-section .options.squares a:hover, .filter-section .options.rounds a:hover, .filter-section .options.squares a.on, .filter-section .options.rounds a.on { background: none; color: inherit; }
.filter-section .options.squares a:hover .rug-art, .filter-section .options.rounds a:hover .rug-art { transform: scale(1.12) rotate(3deg); }
.filter-section .options.squares a.on .rg-field, .filter-section .options.rounds a.on .rg-field { fill: var(--wine); }
.swatch { display: block; flex: none; box-shadow: 0 0 0 1px var(--gold-soft); overflow: hidden; transition: transform .35s; }
.swatch.spool { box-shadow: none; }
.sw-gleam { fill: #fff; opacity: .55; transform: skewX(-20deg); }
.options.regions a:hover .swatch { transform: translateY(-2px); }
.options.regions a:hover .sw-gleam { animation: gleam .9s ease; }
@keyframes gleam { from { transform: translateX(0) skewX(-20deg); } to { transform: translateX(120px) skewX(-20deg); } }
.options.regions a:hover .spool .sw-thread { filter: brightness(1.06); }
.filter-bar .search { flex: 0 1 240px; margin-inline-start: auto; }
.filter-bar .search input { height: 42px; padding: 0 14px; font-size: 14px; }
.chosen { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; margin-bottom: 14px; font-size: 13px; color: var(--wine); }
.chosen a.clear { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; font-size: 14px; color: var(--muted); gap: 12px; flex-wrap: wrap; }
.toolbar select { width: auto; padding: 8px 12px; font-size: 13px; }
.pager { display: flex; gap: 6px; justify-content: center; margin-top: 48px; }
.pager a, .pager span { min-width: 38px; text-align: center; padding: 7px 10px; border: 1px solid var(--line); font-size: 14px; }
.pager span.on { background: var(--wine); color: var(--paper); border-color: var(--wine); }

/* carpet page */
.rug { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; padding-block: 44px 80px; }
.gallery .main { aspect-ratio: 3 / 4; background: var(--gold-soft) url("img/weave.svg") center / 64px; }
.gallery .main img { width: 100%; height: 100%; object-fit: contain; background: var(--paper); }
.gallery .thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.gallery .thumbs button { padding: 0; border: 1px solid var(--line); width: 74px; aspect-ratio: 3 / 4; cursor: pointer; background: none; }
.gallery .thumbs button.on { border-color: var(--ink); }
.gallery .thumbs img { width: 100%; height: 100%; object-fit: cover; }
.info h1 { font-size: clamp(28px, 3vw, 40px); margin: 8px 0 4px; }
.info .code { font-size: 13px; color: var(--muted); }
.info .price { font-size: 22px; margin: 22px 0; font-weight: 400; }
.specs { width: 100%; border-collapse: collapse; margin: 18px 0 26px; font-size: 14px; }
.specs th, .specs td { padding: 11px 0; border-bottom: 1px solid var(--line); text-align: start; font-weight: 300; }
.specs th { color: var(--muted); width: 40%; font-weight: 400; }
.info .ctas { display: grid; gap: 10px; }
.assure { display: flex; gap: 14px; align-items: flex-start; margin-top: 26px; padding: 18px; background: var(--paper); border: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.assure svg { flex: none; color: var(--gold); }
.panel { margin-top: 22px; padding: 22px; background: var(--paper); border: 1px solid var(--line); }
.panel[hidden] { display: none; }
.choice { display: flex; gap: 16px; font-size: 14px; }
.choice label { display: flex; gap: 6px; align-items: center; margin: 6px 0; }
.choice input { width: auto; }

/* certificate */
.cert { max-width: 760px; margin: 50px auto 90px; background: var(--paper); border: 1px solid var(--line); padding: 46px; position: relative; }
.cert:before { content: ""; position: absolute; inset: 10px; border: 1px solid var(--gold-soft); pointer-events: none; }
.cert .seal { text-align: center; margin-bottom: 26px; }
.cert .seal .en { font-family: var(--serif); letter-spacing: .4em; font-size: 20px; }
.cert .grid2 { display: grid; grid-template-columns: 220px 1fr; gap: 32px; }
.cert .pic { aspect-ratio: 3 / 4; background: var(--gold-soft) url("img/weave.svg") center / 48px; }
.cert .pic img { width: 100%; height: 100%; object-fit: cover; }
.cert .verified { display: inline-flex; gap: 8px; align-items: center; color: var(--good); font-size: 14px; font-weight: 400; }

/* auctions */
.auction-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.countdown { font-size: 30px; font-weight: 300; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.bidbox { padding: 24px; background: var(--paper); border: 1px solid var(--line); margin-top: 18px; }
.bidbox .row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.bidbox form { display: flex; gap: 8px; margin-top: 16px; }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--bad); margin-inline-end: 6px;
            animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: .25; } }

/* steps (tracking) */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 30px 0; }
.steps div { border-top: 2px solid var(--line); padding-top: 10px; font-size: 14px; color: var(--muted); }
.steps div.done { border-color: var(--gold); color: var(--ink); }

/* simple pages */
.page { max-width: 760px; margin: 0 auto; padding: 60px 20px 100px; }
.page h1 { font-size: clamp(30px, 4vw, 44px); }
.page p { color: var(--ink-2); }
.narrow { max-width: 440px; margin: 0 auto; padding: 60px 20px 100px; }
table.list { width: 100%; border-collapse: collapse; font-size: 14px; margin: 10px 0 30px; }
table.list th, table.list td { text-align: start; padding: 10px 8px; border-bottom: 1px solid var(--line); font-weight: 300; }
table.list th { color: var(--muted); font-weight: 400; }
.branches { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 28px; }
.branch { border-top: 1px solid var(--gold); padding-top: 16px; font-size: 14px; color: var(--ink-2); }
.branch h3 { font-size: 18px; color: var(--ink); font-weight: 400; margin-bottom: 6px; }

/* galleries */
.gallery-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.gallery-card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); transition: border-color .2s; }
.gallery-card:hover { border-color: var(--gold); color: inherit; }
.gallery-card .pic, .gallery-hero .pic { aspect-ratio: 4 / 3; background: #ece6da; color: var(--gold); display: grid; place-items: center; overflow: hidden; }
.gallery-card .pic img, .gallery-hero .pic img { width: 100%; height: 100%; object-fit: cover; }
/* Slow camera drift over the real photographs; a shutter rolls down over them outside opening hours. */
.gallery-card .pic, .gallery-hero .pic { position: relative; display: block; }
.gallery-hero .pic img { animation: drift-soft 18s ease-in-out infinite alternate; }
@keyframes drift-soft { from { transform: scale(1); } to { transform: scale(1.04); } }
.gallery-card .pic img { transition: transform 5s cubic-bezier(.2, .7, .2, 1); }
.gallery-card:hover .pic img { transform: scale(1.09); }
@keyframes drift { from { transform: scale(1.02); } to { transform: scale(1.14) translateY(-2%); } }
.pic.is-closed:after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(40, 34, 30, .78) 0 13px, rgba(92, 84, 76, .78) 13px 15px, rgba(16, 13, 12, .78) 15px 16px); animation: shutter 1.800s cubic-bezier(.5, .1, .3, 1) .7s backwards; }
@keyframes shutter { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.gallery-card .body { padding: 22px; flex: 1; }
.gallery-card h2 { font-size: 22px; font-weight: 400; margin: 0 0 6px; }
.gallery-card p { margin: 0; font-size: 14px; color: var(--ink-2); }
.gallery-card .link-arrow { display: inline-block; margin-top: 14px; }
.gallery-link { display: block; }
.abroad { margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.gallery-hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; padding: 56px 0; }
.gallery-hero h1 { font-size: clamp(32px, 4vw, 48px); margin: 8px 0 12px; }
.gallery-hero p { color: var(--ink-2); max-width: 480px; }
.contact-lines { display: grid; gap: 8px; margin: 22px 0; font-size: 15px; }
.contact-lines a { color: var(--royal); border-bottom: 1px solid var(--gold); justify-self: start; }
.gallery-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hours { display: grid; grid-template-columns: auto auto 1fr; gap: 36px; align-items: center; padding: 30px 0; border-top: 1px solid var(--line); }
.hours-status { display: flex; align-items: center; gap: 10px; font-size: 16px; color: var(--ink); }
.hours-dot { width: 10px; height: 10px; border-radius: 50%; background: #2f6b4f; box-shadow: 0 0 0 0 rgba(47, 107, 79, .5); animation: alive 2.200s ease-out infinite; }
.is-closed .hours-dot { background: var(--wine); animation: none; }
@keyframes alive { to { box-shadow: 0 0 0 10px rgba(47, 107, 79, 0); } }
.hours-time span { display: block; font-size: 12px; color: var(--muted); }
.hours-time strong { font-size: 18px; font-weight: 400; font-variant-numeric: tabular-nums; }
.hours-bar { position: relative; height: 6px; background: var(--line); direction: ltr; }
.hours-bar i { position: absolute; top: 0; bottom: 0; left: var(--start); width: calc(var(--end) - var(--start)); background: var(--gold); }
.hours-bar b { position: absolute; top: -5px; left: var(--now); width: 2px; height: 16px; background: var(--wine); }
.status-chip { display: inline-block; margin-inline-start: 10px; padding: 1px 9px; border: 1px solid #2f6b4f; color: #2f6b4f; font-size: 12px; vertical-align: middle; }
.status-chip.closed { border-color: var(--wine); color: var(--wine); }
.shop-photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding-bottom: 44px; }
.shop-photos img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.visit { max-width: 620px; padding: 56px 0 96px; border-top: 1px solid var(--line); }
.visit .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* footer */
footer.site { background: var(--wine-deep); color: #dcd3c2; padding: 64px 0 34px; font-size: 14px; border-top: 2px solid var(--gold); }
footer.site a:hover { color: #e6c98f; }
footer.site .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
footer.site h4 { color: #fff; font-weight: 400; font-size: 14px; margin: 0 0 14px; }
footer.site ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
footer.site .logo .en { color: #fff; }
footer.site .legal { border-top: 1px solid rgba(255,255,255,.12); margin-top: 46px; padding-top: 20px; font-size: 12px; color: #bdb4a4; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.wa { position: fixed; bottom: 22px; inset-inline-end: 22px; width: 52px; height: 52px; border-radius: 50%; background: #1f7a50; color: #fff;
      display: grid; place-items: center; box-shadow: 0 8px 22px rgba(0,0,0,.18); z-index: 30; }

/* responsive */
@media (max-width: 1080px) {
  .service-cards { grid-template-columns: 1fr 1fr; }
  .grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .top .wrap { height: 100px; gap: 16px; }
  .logo img { height: 84px; }
  .nav { display: none; position: absolute; top: 100px; inset-inline: 0; background: var(--paper); flex-direction: column; gap: 0;
         padding: 10px 20px 20px; border-bottom: 1px solid var(--line); }
  .nav.open { display: flex; }
  .nav a { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .burger { display: block; }
  .hero .wrap { grid-template-columns: 1fr; min-height: 0; padding-top: 24px; padding-bottom: 48px; gap: 12px; }
  .hero .art { width: 100%; order: -1; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 28px 14px; }
  .pillars, .auction-grid, .gallery-list, .gallery-hero { grid-template-columns: 1fr; gap: 28px; }
  .service-cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .portal-cards { grid-template-columns: 1fr; }
  .shop-photos { grid-template-columns: 1fr 1fr; gap: 8px; }
  .hours { grid-template-columns: 1fr 1fr; gap: 16px; }
  .hours-bar { grid-column: 1 / -1; }
  .service-card img, .cert-art { height: 120px; }
  .cert-card { width: 80px; height: 100px; padding: 0 12px; gap: 7px; }
  .cert-seal { width: 20px; height: 20px; inset-inline-end: 7px; bottom: 7px; }
  .works { grid-template-columns: 1fr 1fr; gap: 10px; }
  .works a { padding: 12px; order: 3; }
  .works a:nth-child(-n+2) { order: 1; }
  .works a.wide { grid-column: 1 / -1; order: 2; }
  .hall img { min-height: 340px; }
  .filter-section .options.shapes { grid-template-columns: 1fr 1fr; }
  .product-tabs { grid-template-columns: repeat(6, 1fr); gap: 8px; }
  .product-tabs a { grid-column: span 2; padding: 16px 6px 14px; font-size: 14px; }
  .product-tabs a:nth-child(n+4) { grid-column: span 3; }
  .filter-bar { gap: 8px; }
  .filter { flex: 1 1 30%; }
  .filter summary { justify-content: space-between; padding: 0 12px; }
  .filter summary b { max-width: 60px; }
  .filter-bar .search { flex-basis: 100%; }
  .filter-panel { max-height: 70vh; overflow-x: hidden; overflow-y: auto; gap: 22px 0; padding: 20px; }
  .filter-panel-size, .filter-panel-material { grid-template-columns: 1fr; }
  .filter-section .options.squares, .filter-section .options.rounds { grid-template-columns: repeat(6, 42px); }
  .rug { grid-template-columns: 1fr; gap: 28px; padding-top: 20px; }
  .cert { padding: 26px; margin: 24px 16px 60px; }
  .cert .grid2 { grid-template-columns: 1fr; }
  footer.site .cols { grid-template-columns: 1fr 1fr; }
  section.block { padding: 64px 0; }
  .tools .hide-sm { display: none; }
  .lang a, .lang > span { padding: 5px 6px; }
  .lang span span { display: none; }
  .lang a span { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media (max-width: 560px) { .cert .seal .en { font-size: 18px; letter-spacing: .18em; } }

/* private collection */
.private-band { padding: 56px 0; background: var(--wine, #6a0f1c); color: var(--paper); text-align: center; }
.private-band .eyebrow { color: #e6c98f; }
.private-band h2 { color: var(--paper); }
.private-band .btn.ghost { color: var(--paper); border-color: rgba(247, 240, 227, .6); }
.private-head { padding: 64px 0; background: var(--night); color: var(--paper); text-align: center; }
.private-head .eyebrow { color: #e6c98f; }
.private-head h1 { color: var(--paper); }
.private-body { padding: 48px 20px; }



/* treasury: search on top, filters beside the rugs, like a good shop */
.shop-search { position: sticky; top: var(--head, 0); z-index: 5; padding: 12px 0; background: var(--paper); border-bottom: 1px solid var(--line); }
.shop-search form { display: flex; gap: 8px; }
.shop-search input[name=q] { flex: 1; min-width: 0; height: 46px; padding: 0 14px; background: #fff; border: 1px solid var(--line); font: inherit; }
.shop-search input[name=q]:focus { border-color: var(--gold); outline: none; }
.shop-search .btn { height: 46px; padding-block: 0; }
.shop { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; align-items: start; padding-top: 22px; padding-bottom: 80px; }
.shop-side { position: sticky; top: 90px; max-height: calc(100vh - 100px); overflow-y: auto; background: #fff; border: 1px solid var(--line); }
.side-box > summary { padding: 12px 14px; font-weight: 500; cursor: pointer; list-style: none; }
.side-box > summary b { padding: 0 7px; background: var(--wine, #6a0f1c); color: #fff; font-weight: 500; }
.facet { border-top: 1px solid var(--line); padding: 4px 14px; }
.facet > summary { padding: 8px 0; font-size: 15px; font-weight: 500; cursor: pointer; }
.more > summary { padding: 4px 0 8px; color: var(--wine, #6a0f1c); font-size: 13px; cursor: pointer; }
.opt { display: flex; align-items: center; gap: 8px; padding: 5px 0; color: var(--ink); font-size: 14px; text-decoration: none; }
.opt i { flex: none; width: 15px; height: 15px; border: 1px solid #b7a98f; background: #fff; }
.opt.on i { background: var(--wine, #6a0f1c) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 8 3 3 7-7' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center / contain; border-color: var(--wine, #6a0f1c); }
.opt span { flex: 1; min-width: 0; }
.opt small { color: var(--muted); font-size: 12px; }
.opt:hover span { color: var(--wine, #6a0f1c); }
.shop-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.shop-top h1 { margin: 0; font-size: clamp(22px, 2.4vw, 30px); }
.shop-sort { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 10px 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.shop-sort a { color: var(--muted); text-decoration: none; }
.shop-sort a.on { color: var(--wine, #6a0f1c); font-weight: 500; }
.shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.shop-grid .card { display: block; background: #fff; border: 1px solid var(--line); color: inherit; text-decoration: none; transition: box-shadow .2s, border-color .2s; }
.shop-grid .card:hover { border-color: var(--gold); box-shadow: 0 10px 24px rgba(34, 28, 26, .1); }
.shop-grid .card .pic { aspect-ratio: 1 / 1; }
.shop-grid .card .meta { padding: 10px 12px 12px; }
.shop-grid .card .title { overflow: hidden; font-size: 15px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.shop-grid .card .sub { margin-top: 2px; font-size: 12.5px; }
.shop-grid .card .price { margin-top: 8px; font-size: 16px; font-weight: 500; color: var(--wine, #6a0f1c); }
.shop-empty { grid-column: 1 / -1; padding: 50px 16px; text-align: center; }
.pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 26px; }
@media (min-width: 1300px) { .shop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .shop { grid-template-columns: 1fr; gap: 14px; padding-top: 12px; }
  .shop-side { position: static; max-height: none; }
  .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
@media (max-width: 900px) { .shop-grid .card .price { font-size: 14px; white-space: nowrap; } .shop-grid .card .title { font-size: 14px; } .shop-grid .card .meta { padding: 8px; } }

/* the making of a rug: light particles on a dark stage */

/* home page film */
.hero.has-video { min-height: min(86vh, 820px); display: flex; align-items: flex-end; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero.has-video:after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(7, 6, 5, .78), rgba(7, 6, 5, .08) 62%); }
.hero.has-video .wrap { position: relative; z-index: 1; display: block; min-height: 0; width: 100%; padding-block: 56px; }
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } .hero.has-video { background: var(--night) url("img/works/hall.jpg") center / cover; } }
/* one calm type scale for the film: a small title, then one heading and one line */
@media (max-width: 760px) { .cap h2 { font-size: 22px; } .cap p { font-size: 15px; } }
.nav a { white-space: nowrap; }
@media (min-width: 1000px) { .nav { gap: clamp(12px, 1.7vw, 26px); font-size: 14px; } }

/* cut-out rugs sit whole on a quiet ground */
.card .pic:has(img) { background: #f3ede1; }
.card .pic img { object-fit: contain; padding: 8px; }

.follow { padding: 40px 0; text-align: center; border-top: 1px solid var(--line); }
.follow-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 40px; margin-top: 12px; }
.follow-links a { font-family: var(--serif); font-size: 22px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--gold); }
.follow-links a:hover { color: var(--wine, #6a0f1c); }

.insta-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.insta-grid a { display: block; aspect-ratio: 1; overflow: hidden; background: var(--paper); }
.insta-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.insta-grid a:hover img { transform: scale(1.04); }

/* Rug photo: closer in place on a mouse, full screen on tap. No lens. */
.gallery .main { position: relative; overflow: hidden; }
.gallery .main[data-view] { cursor: pointer; }
.gallery .main img { display: block; pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.gallery .main:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
.zoom-open { display: block; min-height: 44px; margin: 10px auto 0; padding: 0 18px; background: none; border: 0; border-bottom: 1px solid var(--gold); color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; }
.card .pic img { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
@media (prefers-reduced-motion: reduce) { .gallery .main img { transition: none; } }

/* Size in centimetres or feet, and delivery anywhere. */
.size-cell { line-height: 1.8; }
.units { display: inline-flex; margin-inline-start: 12px; vertical-align: middle; }
.units button { min-height: 28px; padding: 0 9px; background: none; border: 0; border-bottom: 1px solid transparent; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
.units button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--gold); }
.worldwide { padding: 112px 0; background: var(--night); color: var(--paper); text-align: center; }
.worldwide h2 { margin: 0 0 18px; color: var(--paper); font-size: clamp(40px, 8vw, 92px); font-weight: 200; letter-spacing: .01em; line-height: 1.1; }
.worldwide p { max-width: 620px; margin: 0 auto 32px; color: #e6dccb; font-size: clamp(17px, 2vw, 22px); line-height: 1.9; }
.worldwide .btn.ghost { color: var(--paper); border-color: rgba(247, 240, 227, .6); }
.ship-note { margin: 26px 0 0; padding: 18px; background: var(--night); color: #e6dccb; font-size: 15px; line-height: 1.9; }
.ship-note strong { display: block; color: var(--paper); font-size: 19px; font-weight: 300; }
@media (max-width: 760px) { .worldwide { padding: 72px 0; } }

/* Rug photos are cut out and standing: they sit straight on the page, fringe and all, never cropped. */
.card .pic:has(img), .gallery .main:has(img), .cert .pic:has(img) { background: none; }
.card .pic img, .cert .pic img, .spotlight img { object-fit: contain; background: none; }
.gallery .main img { background: none; }
.grid .card, .card { background: none; }


/* Home: five photographs in turn; a film replaces them once static/site/video/hero.mp4 exists. */
.hero.has-slides { min-height: min(88vh, 860px); display: flex; align-items: center; }
.hero.has-slides .wrap { display: block; width: 100%; min-height: 0; position: relative; z-index: 2; padding-block: 64px; }
.hero-slides { position: absolute; inset: 0; }
.hero-slides::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to left, rgba(11, 8, 7, .82), rgba(11, 8, 7, .34) 58%, rgba(11, 8, 7, .18)); }
[dir="ltr"] .hero-slides::after { background: linear-gradient(to right, rgba(11, 8, 7, .82), rgba(11, 8, 7, .34) 58%, rgba(11, 8, 7, .18)); }
.hero-slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.6s ease; }
.hero-slides img.on { opacity: 1; }
.hero-dots { position: absolute; z-index: 3; bottom: 22px; inset-inline: 0; display: flex; justify-content: center; gap: 4px; }
.hero-dots button { width: 44px; height: 32px; padding: 0; background: none; border: 0; cursor: pointer; }
.hero-dots button::before { content: ""; display: block; height: 2px; background: rgba(242, 233, 217, .4); }
.hero-dots button.on::before { background: #e6c98f; }
@media (max-width: 760px) { .hero-slides::after { background: rgba(11, 8, 7, .56); } [dir="ltr"] .hero-slides::after { background: rgba(11, 8, 7, .56); } }
@media (prefers-reduced-motion: reduce) { .hero-slides img { transition: none; } }

/* News, events, open calls and rug knowledge. */
.stories { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
.story { display: block; color: inherit; }
.story img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; margin-bottom: 14px; }
.story small { display: block; color: var(--gold-text); font-size: 13px; }
.story h3 { margin: 6px 0; font-size: 20px; font-weight: 400; line-height: 1.5; }
.story:hover h3 { color: var(--wine); }
.story p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.8; }
.news-page { padding-block: 64px 96px; }
.news-page h1 { margin-bottom: 24px; font-size: clamp(30px, 4vw, 44px); }
.news-kinds { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-bottom: 36px; border-bottom: 1px solid var(--line); }
.news-kinds a { padding: 8px 0; color: var(--muted); }
.news-kinds a[aria-current] { color: var(--ink); box-shadow: 0 2px 0 var(--wine); }
.article { width: min(760px, 100%); margin: 0 auto; padding: 64px 20px 96px; font-size: 17px; line-height: 2; }
.article h1 { margin: 8px 0 6px; font-size: clamp(28px, 4vw, 40px); line-height: 1.4; }
.article-date { margin: 0 0 24px; color: var(--muted); font-size: 14px; }
.article-cover { width: 100%; margin-bottom: 28px; }
.article-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 32px 0; }
.article-photos figure { margin: 0; }
.article-photos img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.article-photos figcaption { margin-top: 6px; color: var(--muted); font-size: 13px; }
@media (max-width: 760px) { .stories { grid-template-columns: 1fr; } .article-photos { grid-template-columns: 1fr; } }

/* Home: the five halls on one line, and five stories on one line. */
.collections { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.collections a, .collections a:nth-child(n + 4) { grid-column: auto; aspect-ratio: 3 / 4; }
.stories.five { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.stories.five h3 { font-size: 16px; }
.stories.five p { display: none; }
@media (max-width: 1000px) { .collections { grid-template-columns: repeat(5, 62vw); overflow-x: auto; scroll-snap-type: x proximity; } .collections a { scroll-snap-align: start; } .stories.five { grid-template-columns: repeat(5, 62vw); overflow-x: auto; } }

/* Cart */
.card-item { display: flex; flex-direction: column; min-width: 0; }
.card-item .card { flex: 1; }
.cart-form { margin: 0; }
.cart-add { display: block; width: 100%; min-height: 44px; margin-top: 8px; padding: 10px 12px; background: none; border: 1px solid var(--ink); color: var(--ink); font: inherit; font-size: 14px; text-align: center; cursor: pointer; }
.cart-add:hover { background: var(--ink); color: var(--paper); }
.cart-add.in { border-color: var(--gold); color: var(--gold-text); }
.info > .cart-form .cart-add, .info > .cart-add { background: var(--wine); border-color: var(--wine); color: var(--paper); margin: 20px 0 10px; }
.cart-page { padding-block: 64px 96px; max-width: 860px; }
.cart-line { display: grid; grid-template-columns: 72px 1fr auto auto; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cart-line img { width: 72px; height: 96px; object-fit: contain; }
.cart-line small { display: block; color: var(--muted); }
.cart-line button { min-height: 44px; background: none; border: 0; color: var(--muted); font: inherit; font-size: 14px; cursor: pointer; }
.cart-total { margin: 20px 0 28px; font-size: 18px; }
@media (max-width: 600px) { .cart-line { grid-template-columns: 60px 1fr; } .cart-line img { width: 60px; height: 80px; } }
.cart-link { white-space: nowrap; }

/* Landing pages and the app page */
.landing { padding-block: 64px 96px; }
.landing h1 { margin-bottom: 18px; font-size: clamp(30px, 4vw, 44px); }
.landing > p { max-width: 760px; margin: 0 0 14px; font-size: 17px; line-height: 2; }
.landing .grid { margin: 40px 0; }
.landing-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line); }
.landing-links a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 4px; }
.app-page h2 { margin-top: 30px; font-size: 20px; }
.app-page ol { line-height: 2; }

/* The logo keeps its own shape however full the header gets. */
.logo { flex: none; }
.logo img { width: auto; max-width: none; aspect-ratio: 592 / 354; }
.top .logo img { height: 84px; }
.top .wrap { gap: 22px; }
.top .tools { flex: none; }
.top .nav { flex: 1 1 auto; min-width: 0; justify-content: center; white-space: nowrap; }
footer.site .logo img { height: 96px; }
@media (max-width: 1240px) { .top .nav { gap: 12px; font-size: 13px; } .top .logo img { height: 70px; } }
.top .nav { gap: clamp(10px, 1.15vw, 18px); }
@media (max-width: 1000px) {
  .top .wrap { gap: 10px; }
  .top .logo img { height: 56px; }
  .top .tools { flex: 0 1 auto; min-width: 0; gap: 8px; font-size: 13px; margin-inline-start: auto; }
  .top .tools a, .cart-link { white-space: nowrap; }
}
@media (max-width: 480px) {
  .top .tools .sep { display: none; }
  .top .logo img { height: 50px; }
}
.nav a.nav-private { color: var(--wine); font-weight: 500; }

/* Social links: a small panel from the header; inside the menu on phones. */
.social-pop { position: relative; }
.social-pop summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; list-style: none; white-space: nowrap; }
.social-pop summary::-webkit-details-marker { display: none; }
.social-pop[open] summary { color: var(--wine); }
.social-panel { position: absolute; z-index: 30; top: 100%; inset-inline-end: 0; display: grid; grid-template-columns: repeat(4, 72px); gap: 2px; padding: 10px; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 10px 28px rgba(27, 22, 20, .14); }
.social-panel a, .social-panel .soon, .nav-socials a, .nav-socials .soon { display: flex; flex-direction: column; align-items: center; gap: 5px; min-height: 64px; padding: 8px 2px; color: var(--ink); font-size: 11px; }
.social-panel a:hover { color: var(--wine); background: var(--cream); }
.social-panel .soon, .nav-socials .soon { color: var(--muted); opacity: .55; cursor: default; }
.nav-socials { display: none; }
@media (max-width: 1000px) { .nav-socials { display: grid; grid-template-columns: repeat(4, 1fr); padding: 8px 12px; border-top: 1px solid var(--line); } .nav a.nav-private { color: var(--wine); } }
.top .nav { gap: clamp(8px, .85vw, 14px); justify-content: flex-start; }
.top .tools { gap: 10px; }
.nav .nav-socials a { border: 0; padding: 8px 2px; }
@media (min-width: 1001px) and (max-width: 1500px) {
  .top .wrap { gap: 12px; }
  .top .logo img { height: 60px; }
  .top .nav { gap: 8px; font-size: 12.5px; }
  .top .tools { gap: 6px; font-size: 12px; }
  .top .tools .flag + span { display: none; }
}
.app-link { white-space: nowrap; }
.nav-app { display: none; }
@media (max-width: 1000px) { .nav a.nav-app { display: block; color: var(--wine); } }
#install[hidden] { display: none; }
.top .tools .app-link::before, .top .tools .cart-link::before, .top .tools .account-link::before { content: "|"; margin-inline-end: 8px; color: var(--muted); }
@media (max-width: 1000px) { .top .tools .cart-link::before { content: none; } }

/* Slides that carry their own message, and photographs shown whole. */
.hero-slides img.whole { object-fit: contain; object-position: 12% 50%; padding-block: 28px; background: var(--night); }
[dir="ltr"] .hero-slides img.whole { object-position: 88% 50%; }
.hero.has-slides .wrap:not(.hero-cap) { transition: opacity .9s ease; }
.hero.quiet .wrap:not(.hero-cap) { opacity: 0; pointer-events: none; }
.hero-cap { position: absolute !important; z-index: 2; inset: 0; display: flex !important; flex-direction: column; align-items: center; justify-content: center; text-align: center; opacity: 0; pointer-events: none; transition: opacity .9s ease; }
.hero-cap.on { opacity: 1; }
.hero-cap h2 { margin: 0 0 14px; color: var(--paper); font-size: clamp(40px, 7.5vw, 88px); font-weight: 200; line-height: 1.12; }
.hero-cap p { max-width: 640px; margin: 0; color: #f2e9d9; font-size: clamp(17px, 2vw, 22px); line-height: 1.9; }
@media (max-width: 760px) { .hero-slides img.whole { object-position: 50% 50%; } }
section.block.alt.selected { background: #f7f1e6; border-block: 1px solid var(--gold); }
.strip { height: clamp(180px, 26vw, 380px); overflow: hidden; }
.strip img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
section.block.alt.selected { border-block: 0; }
.strip { position: relative; height: clamp(120px, 15vw, 210px); }
.strip::after { content: ""; position: absolute; inset: 0; background: rgba(11, 8, 7, .58); }
.strip p { position: absolute; z-index: 1; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0 20px; color: var(--paper); font-size: clamp(22px, 3.2vw, 42px); font-weight: 300; line-height: 1.4; text-align: center; }

/* Selected pieces: five rugs a line, every picture in the same frame. */
.selected .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px 18px; }
.selected .card .pic { aspect-ratio: 2 / 3; }
.selected .card .title { font-size: 15px; }
@media (max-width: 1100px) { .selected .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .selected .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; } }

/* Under every rug: exactly three lines, whatever the width. */
.card .title, .card .sub, .card .price { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .title { font-size: 14px; }
.card .sub { font-size: 11px; letter-spacing: -.01em; }
.card .price { font-size: 13px; }
@media (max-width: 640px) { .card .title { font-size: 13px; } .card .sub { font-size: 10.5px; } }

/* Home: our galleries on a dotted world map, joined by flight paths. Coordinates live in _world.html. */
.world { padding: 84px 0 72px; overflow: hidden; background: var(--night); color: var(--paper); text-align: center; }
.world .eyebrow { color: #e6c98f; }
.world h2 { margin: 8px 0 36px; color: var(--paper); font-size: clamp(26px, 3.4vw, 40px); }
.world-map { position: relative; width: min(1200px, 100%); margin: 0 auto; overflow: hidden; }
.world-inner { position: relative; aspect-ratio: 1200 / 447; }
.world-inner img, .world-inner svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.air { fill: none; stroke: #e6c98f; stroke-width: 1.4; stroke-dasharray: 1.2 1; stroke-linecap: round; opacity: .85; animation: air 26s linear infinite; }
@keyframes air { to { stroke-dashoffset: -100; } }
.flight circle { fill: #fff3d2; }
.flight circle:first-child { fill: #e6c98f; opacity: .8; }
.city circle { fill: #e6c98f; }
.city .pulse { fill: none; stroke: #e6c98f; stroke-width: 1.4; transform-box: fill-box; transform-origin: center; animation: pin 3.2s ease-out infinite; }
@keyframes pin { from { transform: scale(1); opacity: .9; } to { transform: scale(3.6); opacity: 0; } }
.pin { position: absolute; color: var(--paper); font-size: 15px; font-weight: 400; line-height: 1; white-space: nowrap; }
.pin.tehran { left: 64.25%; top: 31.5%; transform: translate(-50%, -160%); }
.pin.muscat { left: 66.2%; top: 40.5%; transform: translate(14px, 40%); }
.pin.saopaulo { left: 37.1%; top: 75.6%; transform: translate(-50%, 90%); }
.world-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; margin-top: 34px; font-size: 15px; color: #dcd3c2; }
.world-list a { color: inherit; min-height: 32px; }
.world-list a:hover { color: #e6c98f; }
.world-list .all { color: #e6c98f; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 760px) { .world { padding: 60px 0 52px; } .world-inner { width: 200%; left: -50%; } .pin { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .air, .city .pulse { animation: none; } .flight { display: none; } }
.pin time { display: block; margin-top: 5px; color: #e6c98f; font-size: 13px; font-variant-numeric: tabular-nums; text-align: center; }
.pin.tehran { transform: translate(-50%, -128%); }
.pin.muscat { transform: translate(14px, 14%); }
.pin.saopaulo { transform: translate(-50%, 55%); }
@media (max-width: 760px) { .pin time { font-size: 12px; margin-top: 3px; } }

/* Events: a quiet pattern behind five stories framed like the treasury halls. */
section.block.alt.events { background: var(--paper) url("img/pattern.svg?v=2") center top / 96px 12px; }
.story-pic { display: block; }
.stories.five { gap: 14px; }
.stories.five .story { display: flex; flex-direction: column; min-width: 0; padding-bottom: 14px; background: var(--paper); }
.stories.five .story img { aspect-ratio: 3 / 4; margin-bottom: 12px; }
.stories.five small, .stories.five h3, .stories.five p, .stories.five .story-more { margin-inline: 12px; }
.stories.five small { font-size: 12px; }
.stories.five h3 { min-height: 2.9em; font-size: 15px; line-height: 1.45; }
.stories.five p.story-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; min-height: 5.4em; margin-block: 0 10px; font-size: 13px; line-height: 1.8; }
.story-more { align-self: flex-start; display: inline-block; min-height: 32px; margin-top: auto; padding-top: 6px; color: var(--wine); font-size: 14px; border-bottom: 1px solid var(--gold); }
.story-more:hover { color: var(--ink); }
@media (max-width: 1000px) { .stories.five { gap: 12px; } }

/* A live board above the footer: Greenwich time and a moving tape of rates, in digital figures. */
.live-board { display: flex; align-items: stretch; background: #070504; border-top: 2px solid var(--gold); color: #f3d48f; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
.gmt { flex: none; display: flex; align-items: baseline; gap: 12px; padding: 16px 24px; background: #120d09; border-inline-end: 1px solid rgba(230, 201, 143, .35); }
.gmt small { color: #b89a5e; font-size: 12px; letter-spacing: .14em; }
.gmt time { color: #ffdd8e; font-size: clamp(24px, 3vw, 36px); line-height: 1; letter-spacing: .04em; text-shadow: 0 0 10px rgba(255, 205, 110, .55); }
.tape { flex: 1; min-width: 0; display: flex; align-items: center; overflow: hidden; }
.tape-run { display: flex; width: max-content; animation: tape 80s linear infinite; }
.tape:hover .tape-run { animation-play-state: paused; }
@keyframes tape { to { transform: translateX(-50%); } }
.quote { display: inline-flex; align-items: baseline; gap: 9px; padding: 0 26px; border-inline-end: 1px solid rgba(230, 201, 143, .18); font-size: 16px; white-space: nowrap; }
.quote b { color: #b89a5e; font-size: 13px; font-weight: 500; }
.quote em { font-size: 12px; font-style: normal; }
.quote .up { color: #63d3a0; }
.quote .down { color: #f0817a; }
.foot-brand { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 34px; }
.foot-brand p { flex: 1 1 260px; max-width: 420px; margin: 0; }
.foot-brand .btn.ghost { color: var(--paper); border-color: #e6c98f; }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 30px; font-size: 13px; }
.foot-links a { min-height: 28px; }
.data-note { margin: 14px 0 0; color: #bdb4a4; font-size: 11px; }
.data-note a { text-decoration: underline; text-underline-offset: 3px; }
footer.site { border-top: 0; }
@media (max-width: 760px) { .gmt { padding: 12px 14px; gap: 8px; } .gmt small { font-size: 10px; } .gmt time { font-size: 20px; } .quote { font-size: 14px; padding: 0 16px; } }
@media (prefers-reduced-motion: reduce) { .tape { overflow-x: auto; } .tape-run { animation: none; } }
footer.site .legal { margin-top: 18px; }

/* The burgundy footer: one calm centred column under the live board. */
footer.site { padding: 44px 0 22px; text-align: center; }
footer.site .foot-brand { flex-direction: column; gap: 14px; }
footer.site .logo { align-items: center; }
footer.site .logo img { height: 84px; }
footer.site .foot-brand p { flex: none; max-width: 520px; font-size: 14px; color: #e6dccb; }
footer.site .foot-brand .btn.ghost { min-height: 44px; padding: 10px 26px; font-size: 14px; }
footer.site .foot-links { justify-content: center; gap: 4px 0; margin-top: 26px; padding-top: 18px; border-top: 1px solid rgba(230, 201, 143, .22); font-size: 13px; }
footer.site .foot-links a, footer.site .foot-links span { padding: 4px 14px; border-inline-end: 1px solid rgba(230, 201, 143, .25); line-height: 1.5; min-height: 0; }
footer.site .foot-links > :last-child { border-inline-end: 0; }
footer.site .data-note { margin-top: 12px; }
footer.site .legal { justify-content: center; gap: 18px; margin-top: 12px; padding-top: 12px; border-top: 0; }
@media (max-width: 760px) { footer.site { padding-bottom: 84px; } footer.site .foot-links a, footer.site .foot-links span { padding: 6px 10px; } }

/* A slow-moving trellis and a soft travelling light on the burgundy. */
footer.site { position: relative; overflow: hidden; isolation: isolate; background: var(--wine-deep); }
footer.site::before { content: ""; position: absolute; z-index: -2; inset: 0; background: url("img/pattern-wine.svg") 0 0 / 120px 160px; animation: trellis 90s linear infinite; }
footer.site::after { content: ""; position: absolute; z-index: -1; top: -40%; bottom: -40%; width: 45%; background: radial-gradient(closest-side, rgba(230, 201, 143, .16), transparent); animation: sweep 16s ease-in-out infinite alternate; }
@keyframes trellis { to { background-position: 120px 160px; } }
@keyframes sweep { from { left: -30%; } to { left: 85%; } }
footer.site .foot-links { position: relative; }
footer.site .foot-links a { position: relative; transition: color .25s; }
footer.site .foot-links a::after { content: ""; position: absolute; inset-inline: 14px; bottom: 0; height: 1px; background: #e6c98f; transform: scaleX(0); transition: transform .3s; }
footer.site .foot-links a:hover::after { transform: scaleX(1); }
footer.site .legal { flex-wrap: wrap; align-items: center; gap: 4px 0; margin-top: 16px; font-size: 11px; }
footer.site .legal > span { padding: 0 12px; border-inline-end: 1px solid rgba(230, 201, 143, .25); }
footer.site .legal > span:last-child { border-inline-end: 0; }
footer.site .data-note { margin: 0; font-size: 11px; }
@media (prefers-reduced-motion: reduce) { footer.site::before, footer.site::after { animation: none; } footer.site::after { display: none; } }
footer.site { padding: 20px 0 16px; }
footer.site .foot-links { margin-top: 0; padding-top: 0; border-top: 0; }
footer.site .legal { margin-top: 10px; padding-top: 0; }
@media (max-width: 760px) { footer.site { padding-bottom: 84px; } }

/* Treasury menu: its groups open on hover or keyboard focus; on phones they sit under it. */
.nav-group { position: relative; display: flex; align-items: center; }
.nav-sub { position: absolute; z-index: 30; top: 100%; inset-inline-start: -14px; display: grid; min-width: 190px; padding: 8px 0; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 10px 28px rgba(27, 22, 20, .14); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s, transform .2s, visibility .2s; }
.nav-group::after { content: ""; position: absolute; top: 100%; inset-inline: -14px; height: 18px; }
.nav-group:hover .nav-sub, .nav-group:focus-within .nav-sub { opacity: 1; visibility: visible; transform: translateY(14px); }
.nav .nav-sub a { padding: 9px 16px; border: 0; color: var(--ink-2); font-size: 14px; white-space: nowrap; }
.nav .nav-sub a:hover { background: var(--cream); color: var(--wine); }
@media (min-width: 1001px) { .top .nav { overflow: visible; } }
@media (max-width: 1000px) {
  .nav-group { display: block; }
  .nav-group::after { display: none; }
  .nav-sub { position: static; opacity: 1; visibility: visible; transform: none; min-width: 0; padding: 0 16px 6px; background: none; border: 0; box-shadow: none; grid-template-columns: 1fr 1fr; }
  .nav-group:hover .nav-sub, .nav-group:focus-within .nav-sub { transform: none; }
  .nav .nav-sub a { padding: 8px 10px; font-size: 13px; }
}

/* Reading a story: text on the reading side, its picture beside it, related stories below. */
.article-page { padding-block: 56px 88px; }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 48px; align-items: start; }
.article-text { font-size: 17px; line-height: 2; }
.article-text h1 { margin: 8px 0 6px; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.4; }
.article-layout .article-cover { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; margin: 0; }
.article-page .article-photos { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 40px 0 0; }
.article-page .article-photos img { aspect-ratio: 3 / 4; }
.related { margin-top: 64px; padding-top: 36px; border-top: 1px solid var(--line); }
.related h2 { margin: 0; font-size: 24px; }
.news-page .stories.five, .related .stories.five { row-gap: 26px; }
@media (max-width: 1000px) { .news-page .stories.five { grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; } .related .stories.five { grid-template-columns: repeat(5, 62vw); overflow-x: auto; } .article-page .article-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .article-layout { grid-template-columns: 1fr; gap: 24px; } .article-layout .article-cover { order: -1; } }
.abroad-card { cursor: default; }

/* Each gallery as an engraved plan, with the way in drawn to its door. */
.plan { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 30px; align-items: center; padding: 56px max(20px, calc((100% - 1240px) / 2)); background: #0b1a35; color: var(--paper); }
.plan-card { padding: 34px; background: #122850; border: 1px solid rgba(230, 201, 143, .3); border-radius: 18px; }
.plan-card .eyebrow, .plan-card .eyebrow a { color: #e6c98f; }
.plan-card h1 { margin: 8px 0 12px; color: var(--paper); font-size: clamp(30px, 3.6vw, 44px); }
.plan-card p { color: #dfd6c5; }
.plan-card .contact-lines { color: var(--paper); }
.plan-card .btn { background: var(--paper); border-color: var(--paper); color: var(--night); }
.plan-card .btn.ghost { background: none; border-color: rgba(230, 201, 143, .6); color: var(--paper); }
.plan-art { display: block; width: 100%; height: auto; }
.plan-way { animation: way 1.4s linear infinite; }
@keyframes way { to { stroke-dashoffset: -15; } }
.plan-ring { transform-box: fill-box; transform-origin: center; animation: pin 2.6s ease-out infinite; }
.gallery-hero { display: block; padding: 28px 0 0; }
.gallery-hero .pic { aspect-ratio: 21 / 8; }
@media (max-width: 860px) { .plan { grid-template-columns: 1fr; padding-block: 28px; } .plan-card { padding: 22px; } .gallery-hero .pic { aspect-ratio: 4 / 3; } }
@media (prefers-reduced-motion: reduce) { .plan-way, .plan-ring { animation: none; } }
.plan { background: var(--wine-deep); }
.plan-card { background: #5e101c; }
#wash, #repair, #appraisal, #certificate, #request { scroll-margin-top: 150px; }
.abroad-card { scroll-margin-top: 150px; }
.article-video { display: block; width: min(380px, 100%); margin: 36px auto 0; background: #000; }
@media (max-width: 760px) { .hero-slides img.whole { object-fit: cover; object-position: 50% 50%; padding-block: 0; } .hero-dots button { width: 32px; } }

/* The rug magnifier: on by click, follows the pointer or finger inside the frame. */
.gallery .main.near { cursor: zoom-out; touch-action: none; }
.gallery .main.near img { transform: scale(3); transition: transform .25s; }

/* About page: three pictures, then Sabalan and Ardabil. */
.about-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; width: min(1200px, 100%); margin: 0 auto 56px; padding-inline: 20px; }
.about-trio img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.sabalan-slides { position: relative; height: clamp(180px, 30vw, 420px); overflow: hidden; }
.sabalan-slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.6s ease; }
.sabalan-slides img.on { opacity: 1; }
.sabalan .about-text h2 { font-size: clamp(24px, 3vw, 34px); }
@media (max-width: 640px) { .about-trio { grid-template-columns: 1fr; } }

/* Home: dealers' rug platforms. Real CSS 3D, so the top rug can be turned over like in the shop. */
.piles { position: relative; isolation: isolate; padding: 72px 0 64px; background: var(--wine-deep); color: var(--paper); overflow: hidden; }
.city-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 14px 32px; }
.city-head .eyebrow { color: #e6c98f; }
.city-head h2 { margin: 6px 0 4px; color: var(--paper); font-size: clamp(28px, 4vw, 44px); }
.city-head p { margin: 0; color: #dfd6c5; }
.city-total { display: flex; align-items: baseline; gap: 10px; }
.city-total b { color: #ffdd8e; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: clamp(30px, 4.4vw, 52px); font-weight: 400; line-height: 1; }
.city-total span { color: #dfd6c5; font-size: 14px; }
.pile-shelf { margin-top: 38px; padding-top: 18px; border-top: 1px solid rgba(230, 201, 143, .25); }
.shelf-title { margin: 0; color: #e6c98f; font-size: 22px; font-weight: 400; }
.pile-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 370px), 1fr)); justify-content: center; gap: 18px 24px; align-items: end; }
.pile { text-align: center; }
.pile-scene { position: relative; display: grid; place-items: center; height: calc(var(--h) + 110px); perspective: 1400px; }
.pile-3d { position: relative; top: 24px; width: var(--w); height: var(--h); transform-style: preserve-3d; transform: scale(var(--fit, 1)) rotateX(56deg) rotateZ(-40deg); }
.pile-box { position: absolute; inset: 0; transform-style: preserve-3d; }
.pile-box i { position: absolute; display: block; }
.pile-box .u { inset: 0; }
.pile-box .f { top: 100%; left: 0; width: 100%; transform-origin: top; transform: rotateX(-90deg); }
.pile-box .l { top: 0; right: 100%; height: 100%; transform-origin: right; transform: rotateY(-90deg); }
.wood { transform: translateZ(70px); inset: -7px; }
.wood .f { height: 8px; background: linear-gradient(#f0d999 0 1px, #6e4829 1px 3px, #d0a95f 3px 4px, #3a2415 4px 7px, #d0a95f 7px); }
.wood .l { width: 8px; background: linear-gradient(90deg, #a88a54 0 1px, #2a1a10 1px 4px, #a88a54 4px 5px, #54351e 5px 7px, #d0a95f 7px); }
.wood .u { background: linear-gradient(135deg, #7a5230, #3f2513); box-shadow: inset 0 0 0 1px #f0d999, inset 0 0 0 3px #4a2c16, inset 0 0 0 4px #c9a766; }
.stack { transform: translateZ(calc(70px + var(--t))); }
.stack .f { height: var(--t); background: repeating-linear-gradient(0deg, #8a1c2c 0 3px, #e0bf7a 3px 4px, #2f5d8c 4px 7px, #efe4c9 7px 8px); }
.stack .l { width: var(--t); background: repeating-linear-gradient(90deg, #6a0f1c 0 3px, #c9a766 3px 4px, #24496f 4px 7px, #d8cdb0 7px 8px); }
.stack .u { background: #4c0913; }
.leaf { position: absolute; inset: 0; padding: 0; border: 0; background: none; cursor: pointer; transform-style: preserve-3d; transform-origin: 0 50%; transform: translateZ(calc(71px + var(--t) + var(--i) * 1.2px)); transition: transform .8s cubic-bezier(.45, .05, .3, 1), opacity .25s .55s; }
.leaf img { display: block; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.leaf span { display: block; width: 100%; height: 100%; background: radial-gradient(circle at 50% 50%, #e0bf7a 0 14%, #2f5d8c 14% 22%, #8a1c2c 22%); border: 7px solid #efe4c9; outline: 1px solid #c9a766; outline-offset: -11px; }
.leaf.turn { opacity: 0; transform: translateZ(calc(71px + var(--t) + var(--i) * 1.2px + 40px)) rotateY(-165deg); }
.pile h4 { margin: 0 0 2px; color: var(--paper); font-size: 17px; font-weight: 400; }
.pile h4 small { color: #ffdd8e; font-size: 14px; }
.pile-now { min-height: 48px; margin: 0; }
.pile-link { display: block; color: #f2e9d9; font-size: 14px; }
.pile-info { color: #dcd3c2; font-size: 12px; }
.pile-all { display: inline-block; min-height: 32px; margin-top: 6px; color: #e6c98f; font-size: 13px; border-bottom: 1px solid #e6c98f; }
.wood b { position: absolute; display: block; }
.wood .f b { top: 100%; left: 0; width: 100%; height: 15px; background: url(img/platform-apron.svg?v=2) center top / 88px 15px repeat-x; }
.wood .l b { top: 0; right: 100%; width: 15px; height: 100%; background: url(img/platform-apron-side.svg?v=2) right center / 15px 88px repeat-y; }
.leg { position: absolute; width: 0; height: 0; transform-style: preserve-3d; }
.leg.a { left: 1px; top: 1px; } .leg.b { right: 1px; top: 1px; } .leg.c { right: 1px; bottom: 1px; } .leg.d { left: 1px; bottom: 1px; }
.leg i { position: absolute; left: -15px; bottom: 0; width: 30px; height: 66px; background: url(img/platform-leg.svg?v=2) center / 100% 100% no-repeat; transform-origin: 50% 100%; transform: rotateZ(40deg) rotateX(-90deg); }
.leg.a i, .leg.d i { transform: rotateZ(40deg) rotateX(-90deg) scaleX(-1); }
.platforms-link { display: inline-block; margin-top: 10px; color: var(--wine); font-size: 14px; border-bottom: 1px solid currentColor; }
@media (max-width: 640px) { .pile-row { grid-template-columns: minmax(0, 1fr); } .pile { --fit: .84; } .pile-scene { height: calc(var(--h) + 90px); overflow: hidden; } }
@media (prefers-reduced-motion: reduce) { .leaf { transition: none; } }

/* Under the rug photo: the rug drawn in isometric, with its length and width. */
.rug-plan { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
.rug-plan svg { display: block; width: 100%; height: auto; overflow: visible; font-family: inherit; }
.rug-plan .p-top { fill: var(--wine); stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: round; }
.rug-plan .p-side { fill: var(--wine-deep); stroke: var(--ink); stroke-width: 1; }
.rug-plan .p-field { fill: none; stroke: #e6c98f; stroke-width: 1.2; }
.rug-plan .p-med { fill: #e6c98f; opacity: .85; }
.rug-plan .p-fringe { fill: none; stroke: var(--gold-text); stroke-width: 1; }
.rug-plan .p-dim { fill: none; stroke: var(--gold-text); stroke-width: 1.2; }
.rug-plan text { fill: var(--ink); font-size: 20px; text-anchor: middle; }
.rug-plan tspan[hidden] { display: none; }
.rug-plan .p-shadow { fill: rgba(27, 22, 20, .28); }
@media (max-width: 760px) { .rug-plan text { font-size: 30px; } }

/* Text sits centred under each rug and story picture. */
.card .meta { text-align: center; }
.stories.five .story { text-align: center; }
.stories.five .story-more { align-self: center; }
.cart-add { text-align: center; }

/* The making of a rug: the owner's picture, with a spotlight and a light that walk its path. */
.making { background: #050403; color: var(--paper); }
.making-stage { position: relative; width: min(calc((100vh - 200px) * 1.777), 100%); max-width: 1672px; margin: 0 auto; }
.art-sheet { position: relative; overflow: hidden; contain: paint; }
.art-sheet > img { display: block; width: 100%; height: auto; }
.art-sheet svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.spot { position: absolute; z-index: 1; left: -150%; top: -150%; width: 400%; height: 400%; background: radial-gradient(closest-side, transparent 7%, rgba(5, 4, 3, .08) 9.5%, rgba(5, 4, 3, .5) 17%); will-change: transform; pointer-events: none; }
.story-flows { z-index: 2; }
.story-flows path { fill: none; stroke: #fff6dc; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 16 200; stroke-dashoffset: 16; filter: drop-shadow(0 0 5px #7fd8ff) drop-shadow(0 0 12px #ffcf7a); animation: story-flow 3.6s cubic-bezier(.4, 0, .4, 1) calc(var(--n) * -.55s) infinite; }
@keyframes story-flow { to { stroke-dashoffset: -116; } }
.story-air { z-index: 2; }
.steam path { fill: none; stroke: #f2e9d9; stroke-width: 5; stroke-linecap: round; opacity: 0; filter: blur(3px); animation: steam 4.5s ease-out infinite; }
.steam path:nth-child(2) { animation-delay: 1.4s; }
.steam path:nth-child(3) { animation-delay: 2.8s; }
@keyframes steam { 20% { opacity: .4; } to { opacity: 0; transform: translateY(-34px); } }
.glint circle { fill: #fff; opacity: 0; animation: glint 2.4s ease-in-out infinite; }
.glint circle:nth-child(2) { animation-delay: .5s; }
.glint circle:nth-child(3) { animation-delay: 1s; }
.glint circle:nth-child(4) { animation-delay: 1.5s; }
.glint circle:nth-child(5) { animation-delay: 1.9s; }
@keyframes glint { 50% { opacity: .95; } }
.making-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; min-height: 76px; padding: 14px 20px 18px; }
.making-text h1 { margin: 0; color: #b89a5e; font-size: 14px; font-weight: 400; }
.making-text .step { display: none; flex: 1 1 320px; }
.making-text .step.on { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 16px; }
.making-text h2 { margin: 0; color: var(--paper); font-size: clamp(20px, 2.2vw, 28px); font-weight: 300; }
.making-text h2 b { color: #ffdd8e; font-weight: 400; }
.making-text p { margin: 0; color: #dcd3c2; font-size: 15px; line-height: 1.8; }
.tools-wrap { max-width: 1180px; margin: 0 auto; padding: 36px 20px 52px; border-top: 1px solid rgba(201, 167, 102, .25); text-align: center; }
.tools-title { margin: 0; color: #e6c98f; font-size: clamp(24px, 3vw, 34px); font-weight: 300; }
.tools-lead { margin: 6px 0 24px; color: #dcd3c2; font-size: 14px; }
.tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.tool { flex: 0 1 calc(25% - 11px); min-width: 150px; border: 1px solid rgba(201, 167, 102, .3); background: #0d0a08; transition: border-color .25s; }
.tool:hover { border-color: #e6c98f; }
.tool summary { display: block; cursor: pointer; list-style: none; }
.tool summary::-webkit-details-marker { display: none; }
.tool img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.tool b { display: block; padding: 10px 8px 12px; color: var(--paper); font-size: 16px; font-weight: 400; }
.tool[open] { flex-basis: 100%; display: grid; grid-template-columns: minmax(0, 340px) 1fr; border-color: #e6c98f; }
.tool[open]::details-content { display: contents; }
.tool[open] p { align-self: center; margin: 0; padding: 18px 24px; color: #e8dfce; font-size: 16px; line-height: 2; text-align: start; }
.tools-credit { margin: 22px 0 0; color: #8f8574; font-size: 11px; }
.tools-credit a { color: inherit; text-decoration: underline; }
@media (max-width: 640px) { .tool { flex-basis: calc(50% - 7px); } .tool[open] { grid-template-columns: 1fr; } .tool[open] p { padding: 14px 16px; font-size: 15px; } }
@media (max-width: 860px) { .making-text { min-height: 168px; align-content: flex-start; } .making-stage { width: 100%; display: flex; flex-direction: column-reverse; } .works-scroll { overflow-x: auto; scrollbar-width: none; } .art-sheet { width: 1000px; } }
@media (prefers-reduced-motion: reduce) { .story-flows path, .steam path, .glint circle { animation: none; } }
.hours-time small { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); }

/* Upright screen whose browser stays landscape: the whole page turns a quarter and scrolls inside itself. */
html.rot, html.rot body { height: 100%; overflow: hidden; }
html.rot body { position: fixed; top: 0; left: 0; width: 100vh; height: 100vw; overflow-x: hidden; overflow-y: auto;
                transform-origin: 0 0; -webkit-overflow-scrolling: touch; }
html.rot-right body { transform: translateX(100vw) rotate(90deg); }
html.rot-left body { transform: translateY(100vh) rotate(-90deg); }
html.rot .wa { position: sticky; float: inline-end; bottom: 22px; margin: -74px 22px 22px; }